feat(module)!: migrate to reka-ui (#2448)

src/runtime/components/Table.vue

@@ -50,6 +50,11 @@ export interface TableData {
 }
 
 export interface TableProps<T> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
   data?: T[]
   columns?: TableColumn<T>[]
   caption?: string
@@ -114,14 +119,8 @@ export type TableSlots<T> = {
 
 <script setup lang="ts" generic="T extends TableData">
 import { computed } from 'vue'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  getExpandedRowModel,
-  useVueTable
-} from '@tanstack/vue-table'
+import { Primitive } from 'reka-ui'
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
 import { upperFirst } from 'scule'
 import { useLocale } from '../composables/useLocale'
 
@@ -129,6 +128,7 @@ const props = defineProps<TableProps<T>>()
 defineSlots<TableSlots<T>>()
 
 const { t } = useLocale()
+
 const data = computed(() => props.data ?? [])
 const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 
@@ -203,7 +203,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <table :class="ui.base({ class: [props.ui?.base] })">
       <caption v-if="caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
@@ -258,5 +258,5 @@ defineExpose({
         </tr>
       </tbody>
     </table>
-  </div>
+  </Primitive>
 </template>