@movk/nuxt 1.2.0 → 1.3.0

package/dist/runtime/components/DataTable.vue

@@ -0,0 +1,584 @@
+<script setup>
+import { getPaginationRowModel } from "@tanstack/vue-table";
+import { UTable } from "#components";
+import { useAppConfig } from "#imports";
+import { computed, onMounted, ref, useAttrs, useTemplateRef, watch } from "vue";
+import { useExtendedTv } from "../utils/extend-theme";
+import { resolveColumns } from "../domains/data-table/columns/resolve-columns";
+import { resolveCallbackValue } from "../domains/data-table/columns/utils";
+import { computeTreeRowSelection } from "../domains/data-table/tree-selection";
+import { resolveMaxIndentPx } from "../domains/data-table/indent";
+import { Tree, useInfiniteScrollBinding, separate } from "@movk/core";
+import theme from "#build/movk-ui/data-table";
+import tableTheme from "#build/ui/table";
+import DataTablePagination from "../domains/data-table/components/Pagination.vue";
+const props = defineProps({
+  rowKey: { type: [String, Object], required: false },
+  columns: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  stripe: { type: Boolean, required: false },
+  bordered: { type: [Boolean, Object], required: false },
+  fitContent: { type: Boolean, required: false },
+  emptyCell: { type: [Boolean, String, Function], required: false, default: "-" },
+  pinable: { type: [Boolean, Function], required: false },
+  pinButtonProps: { type: [Object, Function], required: false },
+  sortable: { type: [Boolean, Function], required: false },
+  sortButtonProps: { type: [Object, Function], required: false },
+  actionButtonProps: { type: [Object, Function], required: false },
+  actionsMaxInline: { type: Number, required: false },
+  actionsOverflowTrigger: { type: [Object, Function], required: false },
+  resizable: { type: [Boolean, Function], required: false },
+  columnResizeMode: { type: String, required: false, default: "onChange" },
+  density: { type: String, required: false },
+  meta: { type: Object, required: false },
+  rowClass: { type: [String, Function], required: false },
+  rowStyle: { type: [String, Object, Function], required: false },
+  tooltip: { type: [Boolean, Number, Function], required: false },
+  tooltipProps: { type: null, required: false },
+  truncate: { type: [Boolean, Number, Function], required: false, default: true },
+  sortingOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  childrenKey: { type: [String, Object], required: false },
+  indentSize: { type: [Number, String, Function], required: false, default: "1rem" },
+  expandedOptions: { type: Object, required: false },
+  expandOnRowClick: { type: Boolean, required: false },
+  selectOnRowClick: { type: Boolean, required: false },
+  columnVisibilityKeys: { type: Array, required: false },
+  columnVisibilityExcludeKeys: { type: Array, required: false },
+  rowSelectionKeys: { type: Array, required: false },
+  expandedKeys: { type: Array, required: false },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onRowContextmenu: { type: [Function, Array], required: false },
+  paginationOptions: { type: Object, required: false },
+  sticky: { type: [Boolean, String], required: false, default: true },
+  paginationUi: { type: Object, required: false },
+  loadMore: { type: Function, required: false },
+  canLoadMore: { type: Boolean, required: false },
+  loadMoreDistance: { type: Number, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const paginationState = defineModel("pagination", { type: Object });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object });
+const columnPinningState = defineModel("columnPinning", { type: Object });
+const columnSizingState = defineModel("columnSizing", { type: Object });
+const rowSelectionState = defineModel("rowSelection", { type: Object });
+const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: () => ({ top: [], bottom: [] }) } });
+const sortingState = defineModel("sorting", { type: Array, ...{ default: () => [] } });
+const expandedState = defineModel("expanded", { type: [Boolean, Object] });
+const columnVisibilityKeysState = defineModel("columnVisibilityKeys", { type: Array });
+const columnVisibilityExcludeKeysState = defineModel("columnVisibilityExcludeKeys", { type: Array });
+const rowSelectionKeysState = defineModel("rowSelectionKeys", { type: Array });
+const expandedKeysState = defineModel("expandedKeys", { type: Array });
+defineSlots();
+const resolved = computed(() => resolveColumns(props.columns || [], props));
+function hasEntries(v) {
+  return typeof v === "object" && v !== null && Object.keys(v).length > 0;
+}
+function keysToVisibility(keys, allColumnIds) {
+  const set = new Set(keys);
+  const state = {};
+  for (const id of allColumnIds) state[id] = set.has(id);
+  return state;
+}
+function visibilityToKeys(state, allColumnIds) {
+  return allColumnIds.filter((id) => state[id] !== false);
+}
+function keysToVisibilityExclude(excludeKeys, allColumnIds) {
+  const set = new Set(excludeKeys);
+  const state = {};
+  for (const id of allColumnIds) state[id] = !set.has(id);
+  return state;
+}
+function visibilityToExcludeKeys(state, allColumnIds) {
+  return allColumnIds.filter((id) => state[id] === false);
+}
+function keysToRowSelection(keys) {
+  const state = {};
+  for (const key of keys) state[key] = true;
+  return state;
+}
+function rowSelectionToKeys(state) {
+  return Object.entries(state).filter(([, s]) => s).map(([k]) => k);
+}
+function keysToExpanded(keys) {
+  const state = {};
+  for (const key of keys) state[key] = true;
+  return state;
+}
+function expandedToKeys(state) {
+  if (state === true) return [];
+  return Object.entries(state).filter(([, e]) => e).map(([k]) => k);
+}
+function areSameKeys(a, b) {
+  if (a.length !== b.length) return false;
+  const set = new Set(a.map(String));
+  for (const key of b) if (!set.has(String(key))) return false;
+  return true;
+}
+function useEffectiveModel(model, getDefault, syncBack) {
+  const effective = computed({
+    get: () => model.value !== void 0 ? model.value : getDefault(),
+    set: (value) => {
+      model.value = value;
+    }
+  });
+  if (syncBack !== void 0) {
+    onMounted(() => {
+      if (model.value !== void 0) return;
+      const defaults = getDefault();
+      if (syncBack(defaults)) model.value = defaults;
+    });
+  }
+  return effective;
+}
+function useSyncKeys(keys, record, toRecord, toKeys) {
+  let updating = false;
+  watch(keys, (next) => {
+    if (updating) return;
+    const current = record.value !== void 0 ? toKeys(record.value) : [];
+    if (areSameKeys(current, next ?? [])) return;
+    updating = true;
+    record.value = toRecord(next ?? []);
+    updating = false;
+  }, { deep: true });
+  watch(record, (next) => {
+    if (updating) return;
+    if (next === void 0) return;
+    const derived = toKeys(next);
+    if (areSameKeys(derived, keys.value ?? [])) return;
+    updating = true;
+    keys.value = derived;
+    updating = false;
+  }, { deep: true });
+}
+const effectiveVisibility = useEffectiveModel(
+  columnVisibilityState,
+  () => {
+    if (columnVisibilityKeysState.value !== void 0) {
+      return keysToVisibility(columnVisibilityKeysState.value, resolved.value.allColumnIds);
+    }
+    if (columnVisibilityExcludeKeysState.value !== void 0) {
+      return keysToVisibilityExclude(columnVisibilityExcludeKeysState.value, resolved.value.allColumnIds);
+    }
+    return { ...resolved.value.initialVisibility };
+  },
+  hasEntries
+);
+const effectivePinning = useEffectiveModel(
+  columnPinningState,
+  () => ({
+    left: [...resolved.value.initialPinning.left ?? []],
+    right: [...resolved.value.initialPinning.right ?? []]
+  }),
+  (v) => (v.left?.length ?? 0) + (v.right?.length ?? 0) > 0
+);
+const effectiveSizing = useEffectiveModel(
+  columnSizingState,
+  () => ({ ...resolved.value.initialSizing }),
+  hasEntries
+);
+const effectiveRowSelection = useEffectiveModel(
+  rowSelectionState,
+  () => rowSelectionKeysState.value !== void 0 ? keysToRowSelection(rowSelectionKeysState.value) : {},
+  hasEntries
+);
+const effectiveExpanded = useEffectiveModel(
+  expandedState,
+  () => expandedKeysState.value !== void 0 ? keysToExpanded(expandedKeysState.value) : {},
+  hasEntries
+);
+useSyncKeys(
+  columnVisibilityKeysState,
+  columnVisibilityState,
+  (keys) => keysToVisibility(keys, resolved.value.allColumnIds),
+  (state) => visibilityToKeys(state, resolved.value.allColumnIds)
+);
+useSyncKeys(
+  columnVisibilityExcludeKeysState,
+  columnVisibilityState,
+  (keys) => keysToVisibilityExclude(keys, resolved.value.allColumnIds),
+  (state) => visibilityToExcludeKeys(state, resolved.value.allColumnIds)
+);
+useSyncKeys(
+  rowSelectionKeysState,
+  rowSelectionState,
+  keysToRowSelection,
+  rowSelectionToKeys
+);
+useSyncKeys(
+  expandedKeysState,
+  expandedState,
+  keysToExpanded,
+  expandedToKeys
+);
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const tableRef = useTemplateRef("tableRef");
+const internalLoading = ref(false);
+async function invokeLoadMore() {
+  if (!props.loadMore) return;
+  const ret = props.loadMore();
+  if (ret && typeof ret.then === "function") {
+    internalLoading.value = true;
+    try {
+      await ret;
+    } finally {
+      internalLoading.value = false;
+    }
+  }
+}
+useInfiniteScrollBinding(
+  () => tableRef.value?.$el ?? null,
+  {
+    distance: () => props.loadMoreDistance ?? 100,
+    canLoadMore: () => !!props.loadMore && props.canLoadMore !== false && !internalLoading.value,
+    onLoadMore: invokeLoadMore
+  }
+);
+function scrollToTop(options = { top: 0, behavior: "smooth" }) {
+  tableRef.value?.$el?.scrollTo({ top: 0, ...options });
+}
+const tableApi = computed(() => tableRef.value?.tableApi ?? null);
+const isColumnResizing = computed(() => Boolean(tableApi.value?.getState().columnSizingInfo.isResizingColumn));
+const isTreeMode = computed(() => Boolean(props.childrenKey));
+const treeMaxDepth = computed(() => {
+  if (!isTreeMode.value || !props.childrenKey) return 0;
+  const data = attrs.data ?? [];
+  if (data.length === 0) return 0;
+  return Tree.getStats(data, { children: props.childrenKey }).depth - 1;
+});
+const EXPAND_DEFAULT_SIZE = 60;
+const EXPAND_BUTTON_SLOT = 60;
+const expandColumnSize = computed(() => {
+  if (!isTreeMode.value || !resolved.value.hasExpandColumn) return null;
+  const maxButtonDepth = Math.max(0, treeMaxDepth.value - 1);
+  if (maxButtonDepth === 0) return null;
+  const indentPx = resolveMaxIndentPx(props.indentSize, maxButtonDepth);
+  return Math.max(EXPAND_DEFAULT_SIZE, EXPAND_BUTTON_SLOT + indentPx * 2);
+});
+let autoExpandSize = null;
+watch(expandColumnSize, (target) => {
+  if (target == null) return;
+  const state = effectiveSizing.value;
+  const current = state.__expand;
+  const canOverride = current == null || current === EXPAND_DEFAULT_SIZE || current === autoExpandSize;
+  if (!canOverride || current === target) return;
+  effectiveSizing.value = { ...state, __expand: target };
+  autoExpandSize = target;
+}, { immediate: true });
+const isManualPagination = computed(() => props.paginationOptions?.manualPagination === true);
+const hasPaginationIntent = computed(
+  () => !props.loadMore && (props.paginationOptions !== void 0 || paginationState.value !== void 0 || (props.paginationUi?.pageSizes?.length ?? 0) > 0 || props.paginationUi?.show === true)
+);
+const tableMeta = computed(() => ({
+  ...(props.stripe || props.rowClass || props.meta?.class?.tr) && {
+    class: {
+      tr: (row) => [
+        props.rowClass && resolveCallbackValue(props.rowClass, row.original),
+        props.meta?.class?.tr && resolveCallbackValue(props.meta.class.tr, row)
+      ].filter(Boolean).join(" ")
+    }
+  },
+  ...(props.rowStyle || props.meta?.style?.tr) && {
+    style: {
+      tr: props.rowStyle && props.meta?.style?.tr ? (row) => {
+        const a = resolveCallbackValue(props.rowStyle, row.original);
+        const b = resolveCallbackValue(props.meta.style.tr, row);
+        return typeof a === "object" && typeof b === "object" ? { ...a, ...b } : b;
+      } : props.rowStyle ? (row) => resolveCallbackValue(props.rowStyle, row.original) : props.meta.style.tr
+    }
+  }
+}));
+const borderedStyle = computed(() => {
+  if (!props.bordered || typeof props.bordered === "boolean") return void 0;
+  return {
+    "--m-dt-border-color": props.bordered.color,
+    "--m-dt-border-width": props.bordered.width,
+    "--m-dt-border-style": props.bordered.style
+  };
+});
+const { baseUi, extraUi } = useExtendedTv(
+  tableTheme,
+  theme,
+  () => appConfig.movk?.dataTable,
+  () => ({
+    ui: {
+      ...props.ui,
+      wrapper: [props.ui?.wrapper, props.class]
+    },
+    variants: {
+      fitContent: !!props.fitContent,
+      bordered: !!props.bordered,
+      striped: !!props.stripe,
+      tree: isTreeMode.value,
+      resizing: isColumnResizing.value
+    }
+  })
+);
+const uTableProps = computed(() => {
+  const hasRowClickBehavior = props.expandOnRowClick || props.selectOnRowClick || !!props.onSelect;
+  return {
+    ...props.rowKey && {
+      getRowId: ((row) => String(row[props.rowKey]))
+    },
+    ...props.childrenKey && {
+      getSubRows: (row) => {
+        const children = row[props.childrenKey];
+        return Array.isArray(children) && children.length > 0 ? children : void 0;
+      }
+    },
+    ...attrs,
+    sticky: props.sticky,
+    loading: Boolean(props.loading) || internalLoading.value,
+    columns: resolved.value.columnDefs,
+    meta: tableMeta.value,
+    ui: baseUi.value,
+    columnSizingOptions: {
+      enableColumnResizing: !!props.resizable || resolved.value.hasColumnResizing,
+      ...props.columnResizeMode && { columnResizeMode: props.columnResizeMode },
+      ...props.columnSizingOptions
+    },
+    sortingOptions: {
+      enableSorting: !!props.sortable || resolved.value.hasColumnSort,
+      ...props.sortingOptions
+    },
+    columnPinningOptions: {
+      enableColumnPinning: !!props.pinable || resolved.value.hasColumnPinning,
+      ...props.columnPinningOptions
+    },
+    rowSelectionOptions: resolved.value.selectionMode ? {
+      ...resolved.value.selectionMode === "single" && { enableMultiRowSelection: false },
+      ...resolved.value.subRowSelection === false && { enableSubRowSelection: false },
+      ...props.rowSelectionOptions
+    } : {
+      ...resolved.value.subRowSelection === false && { enableSubRowSelection: false },
+      ...props.rowSelectionOptions
+    },
+    expandedOptions: {
+      ...resolved.value.hasExpandColumn && { enableExpanding: true },
+      ...props.expandedOptions
+    },
+    // pageCount / rowCount 由 MDataTable 自管，不灌进 TanStack，避免 setPageIndex 的 clamp 副作用
+    paginationOptions: {
+      ...hasPaginationIntent.value && !isManualPagination.value && {
+        getPaginationRowModel: getPaginationRowModel()
+      },
+      ...separate(props.paginationOptions ?? {}, ["pageCount", "rowCount"]).omitted
+    },
+    ...hasRowClickBehavior && {
+      onSelect: (e, row) => {
+        if (props.expandOnRowClick) {
+          const canToggle = isTreeMode.value ? row.getCanExpand() : true;
+          if (canToggle) row.toggleExpanded();
+        }
+        if (props.selectOnRowClick) row.toggleSelected();
+        props.onSelect?.(e, row);
+      }
+    },
+    ...props.onHover && { onHover: props.onHover },
+    ...props.onRowContextmenu && { onContextmenu: props.onRowContextmenu }
+  };
+});
+const selectedCount = computed(() => {
+  if (rowSelectionKeysState.value !== void 0) return rowSelectionKeysState.value.length;
+  return Object.keys(rowSelectionState.value ?? {}).length;
+});
+const paginationView = computed(() => {
+  const api = tableApi.value;
+  if (!api || !hasPaginationIntent.value) return null;
+  const manual = isManualPagination.value;
+  const explicitRowCount = props.paginationOptions?.rowCount;
+  const explicitPageCount = props.paginationOptions?.pageCount;
+  const rowCountKnown = !manual || explicitRowCount !== void 0;
+  const pagination = api.getState().pagination;
+  const pageIndex = pagination?.pageIndex ?? 0;
+  const pageSize = pagination?.pageSize ?? 10;
+  const currentPageRowCount = api.getRowModel().rows.length;
+  const fallbackManualPageCount = explicitRowCount !== void 0 ? Math.ceil(Math.max(0, explicitRowCount) / pageSize) : api.getPageCount();
+  const pageCount = manual ? Math.max(0, explicitPageCount ?? fallbackManualPageCount) : api.getPageCount();
+  const rowCount = rowCountKnown ? manual ? Math.max(0, explicitRowCount) : api.getRowCount() : 0;
+  const referenceCount = rowCountKnown ? rowCount : pageCount * pageSize;
+  const from = referenceCount > 0 && currentPageRowCount > 0 ? pageIndex * pageSize + 1 : 0;
+  const to = referenceCount > 0 && currentPageRowCount > 0 ? Math.min(referenceCount, from + currentPageRowCount - 1) : 0;
+  const show = props.paginationUi?.show ?? (pageCount > 1 || (props.paginationUi?.pageSizes?.length ?? 0) > 1);
+  const setPage = (value) => {
+    const nextPage = Math.floor(Number(value));
+    if (!Number.isFinite(nextPage) || nextPage < 1) return;
+    const maxPage = Math.max(1, pageCount);
+    const nextIndex = Math.min(maxPage, nextPage) - 1;
+    api.setPagination((prev) => ({ ...prev, pageIndex: nextIndex }));
+  };
+  const setPageSize = (value) => {
+    if (value === "" || value == null) return;
+    const nextPageSize = Math.floor(Number(value));
+    if (!Number.isFinite(nextPageSize) || nextPageSize <= 0) return;
+    api.setPagination((prev) => ({ ...prev, pageSize: nextPageSize }));
+  };
+  return {
+    tableApi: api,
+    pagination: { pageIndex, pageSize },
+    page: pageIndex + 1,
+    rowCount,
+    rowCountKnown,
+    pageCount,
+    currentPageRowCount,
+    from,
+    to,
+    show,
+    setPage,
+    setPageSize
+  };
+});
+const paginationRendererProps = computed(() => {
+  const v = paginationView.value;
+  if (!v) return null;
+  return {
+    tableApi: v.tableApi,
+    pagination: v.pagination,
+    page: v.page,
+    rowCount: v.rowCount,
+    rowCountKnown: v.rowCountKnown,
+    pageCount: v.pageCount,
+    from: v.from,
+    to: v.to,
+    setPage: v.setPage,
+    setPageSize: v.setPageSize,
+    selectedCount: selectedCount.value
+  };
+});
+const showPagination = computed(() => paginationView.value?.show ?? false);
+const treeSelection = computed(() => {
+  const data = attrs.data ?? [];
+  const keys = rowSelectionKeysState.value ?? Object.keys(effectiveRowSelection.value).filter((k) => effectiveRowSelection.value[k]);
+  return computeTreeRowSelection(data, keys, {
+    rowKey: props.rowKey,
+    childrenKey: props.childrenKey,
+    strategy: resolved.value.selectionStrategy
+  });
+});
+function clearSelection() {
+  rowSelectionState.value = {};
+  if (rowSelectionKeysState.value !== void 0) rowSelectionKeysState.value = [];
+}
+function expandToDepth(depth) {
+  const api = tableApi.value;
+  if (!api) return;
+  const next = {};
+  for (const row of api.getPrePaginationRowModel().flatRows) {
+    if (row.getCanExpand() && row.depth < depth) next[row.id] = true;
+  }
+  effectiveExpanded.value = next;
+}
+function collapseAll() {
+  effectiveExpanded.value = {};
+}
+const tableResetKey = computed(() => {
+  const flags = [
+    !!props.resizable,
+    !!props.sortable,
+    !!props.pinable,
+    resolved.value.hasColumnPinning,
+    resolved.value.hasColumnResizing,
+    resolved.value.hasColumnSort,
+    isManualPagination.value,
+    resolved.value.selectionMode === "single",
+    resolved.value.subRowSelection === false
+  ].reduce((mask, enabled, index) => mask | (enabled ? 1 : 0) << index, 0);
+  return `${props.columnResizeMode === "onEnd" ? "e" : "c"}${flags.toString(36)}`;
+});
+defineExpose({
+  get tableRef() {
+    return tableRef.value?.tableRef ?? null;
+  },
+  get tableApi() {
+    return tableApi.value;
+  },
+  get el() {
+    return tableRef.value?.$el ?? null;
+  },
+  scrollToTop,
+  clearSelection,
+  expandToDepth,
+  collapseAll,
+  get treeSelection() {
+    return treeSelection.value;
+  }
+});
+</script>
+
+<template>
+  <div :class="extraUi.wrapper" data-slot="wrapper">
+    <UTable
+      :key="tableResetKey"
+      ref="tableRef"
+      v-model:pagination="paginationState"
+      v-model:column-visibility="effectiveVisibility"
+      v-model:column-pinning="effectivePinning"
+      v-model:column-sizing="effectiveSizing"
+      v-model:row-selection="effectiveRowSelection"
+      v-model:row-pinning="rowPinningState"
+      v-model:sorting="sortingState"
+      v-model:expanded="effectiveExpanded"
+      data-slot="table"
+      :style="borderedStyle"
+      v-bind="uTableProps"
+    >
+      <template v-if="$slots.expanded" #expanded="{ row }">
+        <slot name="expanded" :row="row" />
+      </template>
+
+      <template v-if="$slots.empty" #empty>
+        <slot name="empty" />
+      </template>
+
+      <template v-if="$slots.loading" #loading>
+        <slot name="loading" />
+      </template>
+
+      <template v-if="$slots.caption" #caption>
+        <slot name="caption" />
+      </template>
+
+      <template v-if="$slots['body-top']" #body-top>
+        <slot name="body-top" />
+      </template>
+
+      <template v-if="$slots['body-bottom']" #body-bottom>
+        <slot name="body-bottom" />
+      </template>
+    </UTable>
+
+    <template v-if="showPagination && paginationView && paginationRendererProps">
+      <slot
+        v-if="$slots.pagination"
+        name="pagination"
+        v-bind="{ ...paginationView, selectedCount }"
+      />
+
+      <DataTablePagination
+        v-else
+        v-bind="paginationRendererProps"
+        :ui-config="props.paginationUi"
+      >
+        <template
+          v-if="$slots['pagination-summary']"
+          #summary="slotProps"
+        >
+          <slot name="pagination-summary" v-bind="slotProps" />
+        </template>
+
+        <template
+          v-if="$slots['pagination-actions']"
+          #actions="slotProps"
+        >
+          <slot name="pagination-actions" v-bind="slotProps" />
+        </template>
+      </DataTablePagination>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/DataTable.vue.d.ts

@@ -0,0 +1,57 @@
+import type { ColumnPinningState, ColumnSizingState, ExpandedState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { TableData } from '@nuxt/ui';
+import type { DataTableExposed, DataTableProps, DataTableSlots } from '../types/data-table/component';
+import type { DataTablePaginationUi } from '../types/data-table/pagination';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DataTableProps<T> & {
+        ui?: {
+            [x: string]: import("tailwind-variants").ClassValue;
+        };
+        paginationUi?: DataTablePaginationUi & {
+            ui?: {
+                [x: string]: import("tailwind-variants").ClassValue;
+            };
+        };
+    } & {
+        pagination?: PaginationState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        rowSelection?: RowSelectionState;
+        rowPinning?: RowPinningState;
+        sorting?: SortingState;
+        expanded?: ExpandedState;
+        columnVisibilityKeys?: string[];
+        columnVisibilityExcludeKeys?: string[];
+        rowSelectionKeys?: string[];
+        expandedKeys?: string[];
+    }) & {
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:columnVisibilityKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:columnVisibilityExcludeKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:rowSelectionKeys"?: ((value: string[] | undefined) => any) | undefined;
+        "onUpdate:expandedKeys"?: ((value: string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<DataTableExposed<T>>) => void;
+    attrs: any;
+    slots: DataTableSlots<T>;
+    emit: ((event: "update:pagination", value: PaginationState | undefined) => void) & ((event: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((event: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((event: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState) => void) & ((event: "update:sorting", value: SortingState) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:columnVisibilityKeys", value: string[] | undefined) => void) & ((event: "update:columnVisibilityExcludeKeys", value: string[] | undefined) => void) & ((event: "update:rowSelectionKeys", value: string[] | undefined) => void) & ((event: "update:expandedKeys", value: string[] | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};