@nuxt/ui 3.0.2 → 3.1.0

package/dist/runtime/components/Table.vue

@@ -1,318 +1,196 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<script lang="ts">
-import type { Ref } from 'vue'
-import type { VariantProps } from 'tailwind-variants'
-import type { AppConfig } from '@nuxt/schema'
-import type { RowData } from '@tanstack/table-core'
-import type {
-  CellContext,
-  ColumnDef,
-  ColumnFiltersOptions,
-  ColumnFiltersState,
-  ColumnOrderState,
-  ColumnPinningOptions,
-  ColumnPinningState,
-  ColumnSizingInfoState,
-  ColumnSizingOptions,
-  ColumnSizingState,
-  CoreOptions,
-  ExpandedOptions,
-  ExpandedState,
-  FacetedOptions,
-  GlobalFilterOptions,
-  GroupingOptions,
-  GroupingState,
-  HeaderContext,
-  PaginationOptions,
-  PaginationState,
-  Row,
-  RowPinningOptions,
-  RowPinningState,
-  RowSelectionOptions,
-  RowSelectionState,
-  SortingOptions,
-  SortingState,
-  Updater,
-  VisibilityOptions,
-  VisibilityState
-} from '@tanstack/vue-table'
-import _appConfig from '#build/app.config'
-import theme from '#build/ui/table'
-import { tv } from '../utils/tv'
-
-declare module '@tanstack/table-core' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    class?: {
-      th?: string
-      td?: string
-    }
-  }
-}
-
-const appConfigTable = _appConfig as AppConfig & { ui: { table: Partial<typeof theme> } }
-
-const table = tv({ extend: tv(theme), ...(appConfigTable.ui?.table || {}) })
-
-type TableVariants = VariantProps<typeof table>
-
-export type TableRow<T> = Row<T>
-export type TableData = RowData
-export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>
-
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
-  state?: CoreOptions<T>['state']
-  onStateChange?: CoreOptions<T>['onStateChange']
-  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
-}
-
-export interface TableProps<T extends TableData> extends TableOptions<T> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  data?: T[]
-  columns?: TableColumn<T>[]
-  caption?: string
-  /**
-   * The text to display when the table is empty.
-   * @defaultValue t('table.noData')
-   */
-  empty?: string
-  /**
-   * Whether the table should have a sticky header.
-   * @defaultValue false
-   */
-  sticky?: boolean
-  /** Whether the table should be in loading state. */
-  loading?: boolean
-  /**
-   * @defaultValue 'primary'
-   */
-  loadingColor?: TableVariants['loadingColor']
-  /**
-   * @defaultValue 'carousel'
-   */
-  loadingAnimation?: TableVariants['loadingAnimation']
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
-   */
-  globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
-   */
-  columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
-   */
-  columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
-   */
-  columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
-   */
-  visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
-   */
-  sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
-   */
-  groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
-   */
-  expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
-   */
-  rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
-   */
-  rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
-   */
-  paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>
-  /**
-   * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
-   * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
-   */
-  facetedOptions?: FacetedOptions<T>
-  onSelect?: (row: TableRow<T>, e?: Event) => void
-  class?: any
-  ui?: Partial<typeof table.slots>
-}
-
-type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
-type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
-
-export type TableSlots<T> = {
-  expanded: (props: { row: Row<T> }) => any
-  empty: (props?: {}) => any
-  loading: (props?: {}) => any
-  caption: (props?: {}) => any
-} & DynamicHeaderSlots<T> & DynamicCellSlots<T>
-
+<script>
+import theme from "#build/ui/table";
 </script>
 
-<script setup lang="ts" generic="T extends TableData">
-import { computed } from 'vue'
-import { Primitive } from 'reka-ui'
-import { upperFirst } from 'scule'
-import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
-import { reactiveOmit } from '@vueuse/core'
-import { useLocale } from '../composables/useLocale'
-
-const props = defineProps<TableProps<T>>()
-const slots = 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) })))
-
-const ui = computed(() => table({
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { upperFirst } from "scule";
+import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
+import { reactiveOmit } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  data: { type: Array, required: false },
+  columns: { type: Array, required: false },
+  caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  empty: { type: String, required: false },
+  sticky: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  loadingAnimation: { type: null, required: false },
+  watchOptions: { type: Object, required: false, default: () => ({
+    deep: true
+  }) },
+  globalFilterOptions: { type: Object, required: false },
+  columnFiltersOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  visibilityOptions: { type: Object, required: false },
+  sortingOptions: { type: Object, required: false },
+  groupingOptions: { type: Object, required: false },
+  expandedOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  rowPinningOptions: { type: Object, required: false },
+  paginationOptions: { type: Object, required: false },
+  facetedOptions: { type: Object, required: false },
+  onSelect: { type: Function, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  state: { type: Object, required: false },
+  onStateChange: { type: Function, required: false },
+  renderFallbackValue: { type: null, required: false },
+  _features: { type: Array, required: false },
+  autoResetAll: { type: Boolean, required: false },
+  debugAll: { type: Boolean, required: false },
+  debugCells: { type: Boolean, required: false },
+  debugColumns: { type: Boolean, required: false },
+  debugHeaders: { type: Boolean, required: false },
+  debugRows: { type: Boolean, required: false },
+  debugTable: { type: Boolean, required: false },
+  defaultColumn: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  getSubRows: { type: Function, required: false },
+  initialState: { type: Object, required: false },
+  mergeOptions: { type: Function, required: false }
+});
+const slots = defineSlots();
+const { t } = useLocale();
+const appConfig = useAppConfig();
+const data = ref(props.data ?? []);
+const columns = computed(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) })));
+const meta = computed(() => props.meta ?? {});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
   sticky: props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
   loadingAnimation: props.loadingAnimation
-}))
-
-const globalFilterState = defineModel<string>('globalFilter', { default: undefined })
-const columnFiltersState = defineModel<ColumnFiltersState>('columnFilters', { default: [] })
-const columnOrderState = defineModel<ColumnOrderState>('columnOrder', { default: [] })
-const columnVisibilityState = defineModel<VisibilityState>('columnVisibility', { default: {} })
-const columnPinningState = defineModel<ColumnPinningState>('columnPinning', { default: {} })
-const columnSizingState = defineModel<ColumnSizingState>('columnSizing', { default: {} })
-const columnSizingInfoState = defineModel<ColumnSizingInfoState>('columnSizingInfo', { default: {} })
-const rowSelectionState = defineModel<RowSelectionState>('rowSelection', { default: {} })
-const rowPinningState = defineModel<RowPinningState>('rowPinning', { default: {} })
-const sortingState = defineModel<SortingState>('sorting', { default: [] })
-const groupingState = defineModel<GroupingState>('grouping', { default: [] })
-const expandedState = defineModel<ExpandedState>('expanded', { default: {} })
-const paginationState = defineModel<PaginationState>('pagination', { default: {} })
-
+}));
+const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
+const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
+const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
+const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
+const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
+const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
+const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
+const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
+const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
+const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
+const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
+const tableRef = ref();
 const tableApi = useVueTable({
-  ...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
+  ...reactiveOmit(props, "as", "data", "columns", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
   data,
   columns: columns.value,
+  meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
-  ...(props.globalFilterOptions || {}),
-  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilterState),
-  ...(props.columnFiltersOptions || {}),
+  ...props.globalFilterOptions || {},
+  onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
+  ...props.columnFiltersOptions || {},
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrderState),
-  ...(props.visibilityOptions || {}),
-  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibilityState),
-  ...(props.columnPinningOptions || {}),
-  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinningState),
-  ...(props.columnSizingOptions || {}),
-  onColumnSizingChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingState),
-  onColumnSizingInfoChange: updaterOrValue => valueUpdater(updaterOrValue, columnSizingInfoState),
-  ...(props.rowSelectionOptions || {}),
-  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelectionState),
-  ...(props.rowPinningOptions || {}),
-  onRowPinningChange: updaterOrValue => valueUpdater(updaterOrValue, rowPinningState),
-  ...(props.sortingOptions || {}),
+  onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
+  onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
+  ...props.visibilityOptions || {},
+  onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...props.columnPinningOptions || {},
+  onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
+  ...props.columnSizingOptions || {},
+  onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
+  onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...props.rowSelectionOptions || {},
+  onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
+  ...props.rowPinningOptions || {},
+  onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
+  ...props.sortingOptions || {},
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sortingState),
-  ...(props.groupingOptions || {}),
-  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, groupingState),
-  ...(props.expandedOptions || {}),
+  onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
+  ...props.groupingOptions || {},
+  onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
+  ...props.expandedOptions || {},
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expandedState),
-  ...(props.paginationOptions || {}),
-  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, paginationState),
-  ...(props.facetedOptions || {}),
+  onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
+  ...props.paginationOptions || {},
+  onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
+  ...props.facetedOptions || {},
   state: {
     get globalFilter() {
-      return globalFilterState.value
+      return globalFilterState.value;
     },
     get columnFilters() {
-      return columnFiltersState.value
+      return columnFiltersState.value;
     },
     get columnOrder() {
-      return columnOrderState.value
+      return columnOrderState.value;
     },
     get columnVisibility() {
-      return columnVisibilityState.value
+      return columnVisibilityState.value;
     },
     get columnPinning() {
-      return columnPinningState.value
+      return columnPinningState.value;
     },
     get expanded() {
-      return expandedState.value
+      return expandedState.value;
     },
     get rowSelection() {
-      return rowSelectionState.value
+      return rowSelectionState.value;
     },
     get sorting() {
-      return sortingState.value
+      return sortingState.value;
     },
     get grouping() {
-      return groupingState.value
+      return groupingState.value;
     },
     get rowPinning() {
-      return rowPinningState.value
+      return rowPinningState.value;
     },
     get columnSizing() {
-      return columnSizingState.value
+      return columnSizingState.value;
     },
     get columnSizingInfo() {
-      return columnSizingInfoState.value
+      return columnSizingInfoState.value;
     },
     get pagination() {
-      return paginationState.value
+      return paginationState.value;
     }
   }
-})
-
-function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
-  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+});
+function valueUpdater(updaterOrValue, ref2) {
+  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
 }
-
-function handleRowSelect(row: TableRow<T>, e: Event) {
+function handleRowSelect(row, e) {
   if (!props.onSelect) {
-    return
+    return;
   }
-  const target = e.target as HTMLElement
-  const isInteractive = target.closest('button') || target.closest('a')
+  const target = e.target;
+  const isInteractive = target.closest("button") || target.closest("a");
   if (isInteractive) {
-    return
+    return;
   }
-
-  e.preventDefault()
-  e.stopPropagation()
-
-  props.onSelect(row, e)
+  e.preventDefault();
+  e.stopPropagation();
+  props.onSelect(row, e);
 }
-
+watch(
+  () => props.data,
+  () => {
+    data.value = props.data ? [...props.data] : [];
+  },
+  props.watchOptions
+);
 defineExpose({
+  tableRef,
   tableApi
-})
+});
 </script>
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <table :class="ui.base({ class: [props.ui?.base] })">
+    <table ref="tableRef" :class="ui.base({ class: [props.ui?.base] })">
       <caption v-if="caption || !!slots.caption" :class="ui.caption({ class: [props.ui?.caption] })">
         <slot name="caption">
           {{ caption }}
@@ -325,7 +203,14 @@ defineExpose({
             v-for="header in headerGroup.headers"
             :key="header.id"
             :data-pinned="header.column.getIsPinned()"
-            :class="ui.th({ class: [props.ui?.th, header.column.columnDef.meta?.class?.th], pinned: !!header.column.getIsPinned() })"
+            :colspan="header.colSpan > 1 ? header.colSpan : void 0"
+            :class="ui.th({
+  class: [
+    props.ui?.th,
+    typeof header.column.columnDef.meta?.class?.th === 'function' ? header.column.columnDef.meta.class.th(header) : header.column.columnDef.meta?.class?.th
+  ],
+  pinned: !!header.column.getIsPinned()
+})"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -341,16 +226,27 @@ defineExpose({
               :data-selected="row.getIsSelected()"
               :data-selectable="!!props.onSelect"
               :data-expanded="row.getIsExpanded()"
-              :role="props.onSelect ? 'button' : undefined"
-              :tabindex="props.onSelect ? 0 : undefined"
-              :class="ui.tr({ class: [props.ui?.tr] })"
+              :role="props.onSelect ? 'button' : void 0"
+              :tabindex="props.onSelect ? 0 : void 0"
+              :class="ui.tr({
+  class: [
+    props.ui?.tr,
+    typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
+  ]
+})"
               @click="handleRowSelect(row, $event)"
             >
               <td
                 v-for="cell in row.getVisibleCells()"
                 :key="cell.id"
                 :data-pinned="cell.column.getIsPinned()"
-                :class="ui.td({ class: [props.ui?.td, cell.column.columnDef.meta?.class?.td], pinned: !!cell.column.getIsPinned() })"
+                :class="ui.td({
+  class: [
+    props.ui?.td,
+    typeof cell.column.columnDef.meta?.class?.td === 'function' ? cell.column.columnDef.meta.class.td(cell) : cell.column.columnDef.meta?.class?.td
+  ],
+  pinned: !!cell.column.getIsPinned()
+})"
               >
                 <slot :name="`${cell.column.id}-cell`" v-bind="cell.getContext()">
                   <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />