nuance-ui 0.1.25 → 0.1.27

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.25",
+  "version": "0.1.27",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app-shell/app-shell.d.vue.ts

@@ -1,22 +1,32 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
-    navbar?: boolean;
-    /** AppShellAside collapsed state. Required if you use AppShellAside component. */
-    aside?: boolean;
-    /** AppShellHeader collapsed state. Required if you use AppShellHeader component. */
-    header?: boolean;
-    /** AppShellFooter collapsed state. Required if you use AppShellFooter component. */
-    footer?: boolean;
     /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
     layout?: 'default' | 'alt';
     withBorder?: boolean;
 }
+type __VLS_Props = AppShellProps;
+type __VLS_ModelProps = {
+    'aside'?: boolean;
+    'header'?: boolean;
+    'navbar'?: boolean;
+    'footer'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:aside": (value: boolean) => any;
+    "update:header": (value: boolean) => any;
+    "update:navbar": (value: boolean) => any;
+    "update:footer": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:aside"?: ((value: boolean) => any) | undefined;
+    "onUpdate:header"?: ((value: boolean) => any) | undefined;
+    "onUpdate:navbar"?: ((value: boolean) => any) | undefined;
+    "onUpdate:footer"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app-shell/app-shell.vue

@@ -1,28 +1,32 @@
 <script setup>
-import { computed, toRefs } from "vue";
+import { computed } from "vue";
 import Box from "../box.vue";
 import { useProvideAppShell } from "./context";
-const { is, mod, layout = "default", withBorder = false, ...rest } = defineProps({
-  navbar: { type: Boolean, required: false },
-  aside: { type: Boolean, required: false },
-  header: { type: Boolean, required: false },
-  footer: { type: Boolean, required: false },
+const {
+  is,
+  mod,
+  layout = "default",
+  withBorder = false
+} = defineProps({
   layout: { type: String, required: false },
   withBorder: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const flags = toRefs(rest);
-useProvideAppShell(flags);
+const aside = defineModel("aside", { type: Boolean, ...{ default: false } });
+const header = defineModel("header", { type: Boolean, ...{ default: false } });
+const navbar = defineModel("navbar", { type: Boolean, ...{ default: false } });
+const footer = defineModel("footer", { type: Boolean, ...{ default: false } });
+useProvideAppShell({ aside, footer, header, navbar });
 const style = computed(() => ({
-  "--app-shell-navbar-transform": flags.navbar.value ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,
-  "--app-shell-navbar-offset": flags.navbar.value ? "0rem" : void 0,
-  "--app-shell-aside-transform": flags.aside.value ? "translateX(var(--app-shell-aside-width))" : void 0,
-  "--app-shell-aside-offset": flags.aside.value ? "0rem" : void 0,
-  "--app-shell-header-transform": flags.header.value ? "translateY(calc(-1 * var(--app-shell-header-height)))" : void 0,
-  "--app-shell-header-offset": flags.header.value ? "0rem" : void 0,
-  "--app-shell-footer-transform": flags.footer.value ? "translateY(var(--app-shell-footer-height))" : void 0,
-  "--app-shell-footer-offset": flags.footer.value ? "0rem" : void 0
+  "--app-shell-navbar-transform": navbar.value ? "translateX(calc(-1 * var(--app-shell-navbar-width)))" : void 0,
+  "--app-shell-navbar-offset": navbar.value ? "0rem" : void 0,
+  "--app-shell-aside-transform": aside.value ? "translateX(var(--app-shell-aside-width))" : void 0,
+  "--app-shell-aside-offset": aside.value ? "0rem" : void 0,
+  "--app-shell-header-transform": header.value ? "translateY(calc(-1 * var(--app-shell-header-height)))" : void 0,
+  "--app-shell-header-offset": header.value ? "0rem" : void 0,
+  "--app-shell-footer-transform": footer.value ? "translateY(var(--app-shell-footer-height))" : void 0,
+  "--app-shell-footer-offset": footer.value ? "0rem" : void 0
 }));
 </script>
 

package/dist/runtime/components/app-shell/app-shell.vue.d.ts

@@ -1,22 +1,32 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** AppShellNavbar collapsed state. Required if you use AppShellNavbar component. */
-    navbar?: boolean;
-    /** AppShellAside collapsed state. Required if you use AppShellAside component. */
-    aside?: boolean;
-    /** AppShellHeader collapsed state. Required if you use AppShellHeader component. */
-    header?: boolean;
-    /** AppShellFooter collapsed state. Required if you use AppShellFooter component. */
-    footer?: boolean;
     /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
     layout?: 'default' | 'alt';
     withBorder?: boolean;
 }
+type __VLS_Props = AppShellProps;
+type __VLS_ModelProps = {
+    'aside'?: boolean;
+    'header'?: boolean;
+    'navbar'?: boolean;
+    'footer'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:aside": (value: boolean) => any;
+    "update:header": (value: boolean) => any;
+    "update:navbar": (value: boolean) => any;
+    "update:footer": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:aside"?: ((value: boolean) => any) | undefined;
+    "onUpdate:header"?: ((value: boolean) => any) | undefined;
+    "onUpdate:navbar"?: ((value: boolean) => any) | undefined;
+    "onUpdate:footer"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app-shell/context.d.ts

@@ -1,9 +1,9 @@
-import type { Ref } from 'vue';
+import type { ModelRef } from 'vue';
 interface AppShellState {
-    header: Ref<boolean>;
-    navbar: Ref<boolean>;
-    aside: Ref<boolean>;
-    footer: Ref<boolean>;
+    header: ModelRef<boolean>;
+    navbar: ModelRef<boolean>;
+    aside: ModelRef<boolean>;
+    footer: ModelRef<boolean>;
 }
 export declare const useProvideAppShell: (args_0: AppShellState) => AppShellState;
 export declare const useAppShell: () => AppShellState | undefined;

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

@@ -6,12 +6,11 @@ export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     variant?: 'filled' | 'outline';
     radius?: NuanceSize;
     size?: NuanceSize;
-    indeterminate?: boolean;
     value?: string;
 }
 type __VLS_Props = CheckboxProps;
 type __VLS_ModelProps = {
-    modelValue?: boolean;
+    modelValue?: boolean | 'indeterminate';
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_10: {
@@ -22,9 +21,9 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | undefined) => any;
+    "update:modelValue": (value: boolean | "indeterminate" | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/checkbox/checkbox.vue

@@ -11,7 +11,6 @@ const {
   variant = "filled",
   color,
   iconColor,
-  indeterminate,
   value,
   ...rest
 } = defineProps({
@@ -20,7 +19,6 @@ const {
   variant: { type: String, required: false },
   radius: { type: String, required: false },
   size: { type: String, required: false },
-  indeterminate: { type: Boolean, required: false },
   value: { type: String, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
@@ -31,12 +29,12 @@ const {
   mod: { type: [Object, Array, null], required: false }
 });
 const id = useId();
-const modelValue = defineModel({ type: Boolean });
+const modelValue = defineModel({ type: [Boolean, String] });
 const ctx = useCheckboxGroupState();
 const checked = computed(() => {
   if (ctx?.value && value)
     return ctx?.value.value.includes(value);
-  return modelValue.value;
+  return !!modelValue.value;
 });
 const size = ctx?.size ?? _size;
 const toggle = () => modelValue.value = !modelValue.value;
@@ -64,8 +62,8 @@ const style = computed(() => useStyleResolver((theme) => {
 				@change='() => value && ctx ? ctx.onUpdate(value) : toggle()'
 			>
 
-			<slot name='icon' :indeterminate='indeterminate' :class='$style.icon'>
-				<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' />
+			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
+				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
 				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
 			</slot>
 		</Box>

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

@@ -6,12 +6,11 @@ export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     variant?: 'filled' | 'outline';
     radius?: NuanceSize;
     size?: NuanceSize;
-    indeterminate?: boolean;
     value?: string;
 }
 type __VLS_Props = CheckboxProps;
 type __VLS_ModelProps = {
-    modelValue?: boolean;
+    modelValue?: boolean | 'indeterminate';
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_10: {
@@ -22,9 +21,9 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | undefined) => any;
+    "update:modelValue": (value: boolean | "indeterminate" | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './popover/index.js';
 export * from './progress/index.js';
 export * from './roving-focus/index.js';
 export * from './select/index.js';
+export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text.vue.js';
 export * from './textarea.vue.js';

package/dist/runtime/components/index.js

@@ -21,6 +21,7 @@ export * from "./popover/index.js";
 export * from "./progress/index.js";
 export * from "./roving-focus/index.js";
 export * from "./select/index.js";
+export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./text.vue";
 export * from "./textarea.vue";

package/dist/runtime/components/table/_ui/table-row.d.vue.ts

@@ -0,0 +1,35 @@
+import type { Row } from '@tanstack/vue-table';
+import type { TableData, TableRow } from '../model.js';
+export interface TableRowProps<T extends TableData> {
+    row: Row<T>;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
+    onHover?: (e: Event, row: TableRow<T> | null) => void;
+    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
+}
+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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<TableRowProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `${string}-cell`]: ((props: {
+            cell: import("@tanstack/table-core").Cell<T, unknown>;
+            column: import("@tanstack/table-core").Column<T, unknown>;
+            getValue: import("@tanstack/table-core").Getter<unknown>;
+            renderValue: import("@tanstack/table-core").Getter<unknown>;
+            row: Row<T>;
+            table: import("@tanstack/table-core").Table<T>;
+        }) => any) | undefined;
+    } & {
+        expanded?: (props: {
+            row: Row<T>;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/table/_ui/table-row.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { FlexRender } from "@tanstack/vue-table";
+import Box from "../../box.vue";
+import { resolveValue } from "../lib";
+const { row, onSelect, onHover, onContextmenu } = defineProps({
+  row: { type: Object, required: true },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onContextmenu: { type: [Function, Array], required: false }
+});
+function onRowSelect(e, row2) {
+  if (!onSelect)
+    return;
+  const target = e.target;
+  const isInteractive = target.closest("button") || target.closest("a");
+  if (isInteractive)
+    return;
+  e.preventDefault();
+  e.stopPropagation();
+  onSelect(e, row2);
+}
+function onRowHover(e, row2) {
+  if (!onHover)
+    return;
+  onHover(e, row2);
+}
+function onRowContextmenu(e, row2) {
+  if (!onContextmenu)
+    return;
+  if (Array.isArray(onContextmenu))
+    onContextmenu.forEach((fn) => fn(e, row2));
+  else
+    onContextmenu(e, row2);
+}
+</script>
+
+<template>
+	<Box
+		is='tr'
+		v-bind='$attrs'
+		:mod='{
+  selected: row.getIsSelected(),
+  expanded: row.getIsExpanded(),
+  selectable: !!onSelect || !!onHover || !!onContextmenu
+}'
+		:role="onSelect ? 'button' : void 0"
+		:tabindex='onSelect ? 0 : void 0'
+		@click='onRowSelect($event, row)'
+		@pointerenter='onRowHover($event, row)'
+		@pointerleave='onRowHover($event, null)'
+		@contextmenu='onRowContextmenu($event, row)'
+	>
+		<Box
+			is='td'
+			v-for='cell in row.getVisibleCells()'
+			:key='cell.id'
+			:mod='{ pinned: cell.column.getIsPinned() }'
+			:colspan='resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)'
+			:rowspan='resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)'
+			:class='resolveValue(cell.column.columnDef.meta?.class?.td, cell)'
+			:style='resolveValue(cell.column.columnDef.meta?.style?.td, cell)'
+		>
+			<slot :name='`${cell.column.id}-cell`' v-bind='cell.getContext()'>
+				<FlexRender :render='cell.column.columnDef.cell' :props='cell.getContext()' />
+			</slot>
+		</Box>
+	</Box>
+
+	<tr v-if='row.getIsExpanded()'>
+		<td :colspan='row.getAllCells().length'>
+			<slot name='expanded' :row='row' />
+		</td>
+	</tr>
+</template>

package/dist/runtime/components/table/_ui/table-row.vue.d.ts

@@ -0,0 +1,35 @@
+import type { Row } from '@tanstack/vue-table';
+import type { TableData, TableRow } from '../model.js';
+export interface TableRowProps<T extends TableData> {
+    row: Row<T>;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
+    onHover?: (e: Event, row: TableRow<T> | null) => void;
+    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
+}
+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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<TableRowProps<T>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [x: `${string}-cell`]: ((props: {
+            cell: import("@tanstack/table-core").Cell<T, unknown>;
+            column: import("@tanstack/table-core").Column<T, unknown>;
+            getValue: import("@tanstack/table-core").Getter<unknown>;
+            renderValue: import("@tanstack/table-core").Getter<unknown>;
+            row: Row<T>;
+            table: import("@tanstack/table-core").Table<T>;
+        }) => any) | undefined;
+    } & {
+        expanded?: (props: {
+            row: Row<T>;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from './model.js';

package/dist/runtime/components/table/index.js

@@ -0,0 +1 @@
+export * from "./model.js";

package/dist/runtime/components/table/lib.d.ts

@@ -0,0 +1,6 @@
+import type { Updater } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import type { TableColumn, TableData } from './model.js';
+export declare function processColumns<T extends TableData>(columns: TableColumn<T>[]): TableColumn<T>[];
+export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;
+export declare function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined;

package/dist/runtime/components/table/lib.js

@@ -0,0 +1,24 @@
+export function processColumns(columns) {
+  return columns.map((column) => {
+    const col = { ...column };
+    if ("columns" in col && col.columns)
+      col.columns = processColumns(col.columns);
+    if (!col.cell) {
+      col.cell = ({ getValue }) => {
+        const value = getValue();
+        if (value === "" || value === null || value === void 0)
+          return "\xA0";
+        return String(value);
+      };
+    }
+    return col;
+  });
+}
+export function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
+}
+export function resolveValue(prop, arg) {
+  if (typeof prop === "function")
+    return prop(arg);
+  return prop;
+}

package/dist/runtime/components/table/model.d.ts

@@ -0,0 +1,150 @@
+import type { RowData, TableMeta } from '@tanstack/table-core';
+import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnPinningOptions, ColumnSizingOptions, CoreOptions, ExpandedOptions, FacetedOptions, GlobalFilterOptions, GroupingOptions, HeaderContext, PaginationOptions, Row, RowPinningOptions, RowSelectionOptions, SortingOptions, VisibilityOptions } from '@tanstack/vue-table';
+import type { VirtualizerOptions } from '@tanstack/vue-virtual';
+import type { TableHTMLAttributes, WatchOptions } from 'vue';
+import type { NuanceColor } from '../../types/index.js';
+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 = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+    state?: CoreOptions<T>['state'];
+    onStateChange?: CoreOptions<T>['onStateChange'];
+    renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
+}
+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 DynamicFooterSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-footer`, (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 extends TableData = TableData> = {
+    'expanded': (props: {
+        row: Row<T>;
+    }) => any;
+    'empty': (props?: object) => any;
+    'loading': (props?: object) => any;
+    'caption': (props?: object) => any;
+    'body-top': (props?: object) => any;
+    'body-bottom': (props?: object) => any;
+} & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ Omit<TableHTMLAttributes, 'columns' | 'onSelect' | 'onContextmenu'> {
+    data?: T[];
+    columns?: TableColumn<T>[];
+    caption?: string;
+    meta?: TableMeta<T>;
+    /**
+     * Enable virtualization for large datasets.
+     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+     * @defaultValue false
+     */
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
+         * @defaultValue 65
+         */
+        estimateSize?: number | ((index: number) => number);
+    });
+    /**
+     * The text to display when the table is empty.
+     */
+    empty?: string;
+    /**
+     * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
+     * Note: this prop is not supported when `virtualize` is true.
+     * @defaultValue false
+     */
+    sticky?: boolean | 'header' | 'footer';
+    /** Whether the table should be in loading state. */
+    loading?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    loadingColor?: NuanceColor | string;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
+    onHover?: (e: Event, row: TableRow<T> | null) => void;
+    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
+    classes?: {
+        root?: string;
+        table?: string;
+        thead?: string;
+        th?: string;
+        tr?: string;
+        tbody?: string;
+        tfoot?: string;
+        caption?: string;
+        loading?: string;
+        empty?: string;
+        separator?: string;
+    };
+    /**
+     * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
+     * @see [API](https://vuejs.org/api/options-state.html#watch)
+     * @see [Guide](https://vuejs.org/guide/essentials/watchers.html)
+     * @defaultValue { deep: true }
+     */
+    watchOptions?: WatchOptions;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+     */
+    globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+     */
+    columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+     */
+    columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+     */
+    columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+     */
+    visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
+     */
+    groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+     */
+    expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+     */
+    rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
+     */
+    rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+     */
+    paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>;
+    /**
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
+     */
+    facetedOptions?: FacetedOptions<T>;
+}
+export {};

package/dist/runtime/components/table/table.d.ts

@@ -0,0 +1,30 @@
+import type { Cell, Header, RowData } from '@tanstack/vue-table'
+
+
+declare module '@tanstack/table-core' {
+	interface ColumnMeta<TData extends RowData, TValue> {
+		class?: {
+			th?: string | ((cell: Header<TData, TValue>) => string)
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		style?: {
+			th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
+			td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
+		}
+		colspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		rowspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+	}
+
+	interface TableMeta<TData> {
+		class?: {
+			tr?: string | ((row: Row<TData>) => string)
+		}
+		style?: {
+			tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
+		}
+	}
+}