@kikiloaw/simple-table 1.0.0

package/src/components/table/Table.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table
+      :class="cn('w-full caption-bottom text-sm', props.class)"
+      v-bind="delegatedProps"
+    >
+      <slot />
+    </table>
+  </div>
+</template>

package/src/components/table/TableBody.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <tbody
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </tbody>
+</template>

package/src/components/table/TableCell.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <td
+    :class="cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </td>
+</template>

package/src/components/table/TableHead.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <th
+    :class="
+      cn(
+        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </th>
+</template>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)" v-bind="delegatedProps">
+    <slot />
+  </thead>
+</template>

package/src/components/table/TableRow.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <tr
+    :class="
+      cn(
+        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </tr>
+</template>

package/src/components/table/index.ts

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/src/index.d.ts

@@ -0,0 +1,6 @@
+import { DefineComponent } from 'vue'
+
+declare const SimpleTable: DefineComponent<{}, {}, any>
+
+export default SimpleTable
+export { SimpleTable }

package/src/index.js

@@ -0,0 +1,33 @@
+// Main entry point for SimpleTable package
+import SimpleTable from './SimpleTable.vue'
+import Table from './components/table/Table.vue'
+import TableBody from './components/table/TableBody.vue'
+import TableCell from './components/table/TableCell.vue'
+import TableHead from './components/table/TableHead.vue'
+import TableHeader from './components/table/TableHeader.vue'
+import TableRow from './components/table/TableRow.vue'
+
+// Export the main component
+export default SimpleTable
+
+// Named exports for flexibility
+export {
+    SimpleTable,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+}
+
+// Vue plugin install function
+export function install(app) {
+    app.component('SimpleTable', SimpleTable)
+    app.component('Table', Table)
+    app.component('TableBody', TableBody)
+    app.component('TableCell', TableCell)
+    app.component('TableHead', TableHead)
+    app.component('TableHeader', TableHeader)
+    app.component('TableRow', TableRow)
+}