feat: added hoverable and striped states

src/components/Table/Table.vue

@@ -6,13 +6,9 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { provide } from 'vue'
+
 const props = defineProps({
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
   striped: {
     type: Boolean,
     default: false,
@@ -21,10 +17,8 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  className: {
-    type: String,
-    default: '',
-  },
 })
 
+provide('striped', props.striped)
+provide('hoverable', props.hoverable)
 </script>

src/components/Table/TableRow.vue

@@ -1,7 +1,11 @@
 <template>
-  <tr class="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700">
+  <tr :class="tableRowClasses">
     <slot></slot>
   </tr>
 </template>
 <script lang="ts" setup>
+
+import { useTableRowClasses } from '@/components/Table/composables/tableRowClasses'
+
+const { tableRowClasses } = useTableRowClasses()
 </script>

src/components/Table/composables/tableRowClasses.ts

@@ -0,0 +1,26 @@
+import { computed, inject } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700'
+const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 bg-white dark:border-gray-700 dark:bg-gray-800'
+const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
+
+export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
+  const isStriped = inject('striped')
+  const isHoverable = inject('hoverable')
+
+  const tableRowClasses = computed(() => {
+    return classNames(
+      baseClasses,
+      {
+        [stripedClasses]: isStriped,
+        [hoverableClasses]: isHoverable,
+      },
+    )
+  })
+
+  return {
+    tableRowClasses,
+  }
+}