@nuxt/ui 4.4.0 → 4.5.1

package/dist/runtime/components/Slider.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UTooltip from "./Tooltip.vue";
@@ -18,7 +19,7 @@ const props = defineProps({
   tooltip: { type: [Boolean, Object], required: false },
   defaultValue: { type: [Number, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   name: { type: String, required: false },
   disabled: { type: Boolean, required: false },
   inverted: { type: Boolean, required: false },
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("slider", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
 const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const defaultSliderValue = computed(() => {
@@ -71,13 +73,13 @@ function onChange(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
     :default-value="defaultSliderValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="ui.track({ class: props.ui?.track })">
-      <SliderRange data-slot="range" :class="ui.range({ class: props.ui?.range })" />
+    <SliderTrack data-slot="track" :class="ui.track({ class: uiProp?.track })">
+      <SliderRange data-slot="range" :class="ui.range({ class: uiProp?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -87,9 +89,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -51,7 +51,7 @@ declare const __VLS_export: <T extends number | number[]>(__VLS_props: NonNullab
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "change", event: Event) => void) & ((event: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,5 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
 import type { IconProps } from '../types';
@@ -59,16 +60,16 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 };
 type SlotProps<T extends StepperItem> = (props: {
     item: T;
-}) => any;
+}) => VNode[];
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator(props: {
+    indicator?(props: {
         item: T;
         ui: Stepper['ui'];
-    }): any;
-    wrapper: SlotProps<T>;
-    title: SlotProps<T>;
-    description: SlotProps<T>;
-    content: SlotProps<T>;
+    }): VNode[];
+    wrapper?: SlotProps<T>;
+    title?: SlotProps<T>;
+    description?: SlotProps<T>;
+    content?: SlotProps<T>;
 } & DynamicSlots<T, 'wrapper' | 'title' | 'description', {
     item: T;
 }>;
@@ -92,7 +93,7 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
     }>) => void;
     attrs: any;
     slots: StepperSlots<T>;
-    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((event: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Stepper.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { get } from "../utils";
 import UIcon from "./Icon.vue";
@@ -20,13 +21,14 @@ const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   linear: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["next", "prev"]);
 const slots = defineSlots();
 const modelValue = defineModel({ type: [String, Number] });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("stepper", props);
 const rootProps = useForwardProps(reactivePick(props, "as", "linear"));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.stepper || {} })({
   orientation: props.orientation,
@@ -64,21 +66,21 @@ defineExpose({
 </script>
 
 <template>
-  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="header" :class="ui.header({ class: props.ui?.header })">
+  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" :orientation="orientation" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <StepperItem
         v-for="(item, count) in items"
         :key="count"
         :step="count"
         :disabled="item.disabled || props.disabled"
         data-slot="item"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+        :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
       >
-        <div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
-          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
-            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
+        <div data-slot="container" :class="ui.container({ class: [uiProp?.container, item.ui?.container] })">
+          <StepperTrigger data-slot="trigger" :class="ui.trigger({ class: [uiProp?.trigger, item.ui?.trigger] })">
+            <StepperIndicator data-slot="indicator" :class="ui.indicator({ class: [uiProp?.indicator, item.ui?.indicator] })">
               <slot name="indicator" :item="item" :ui="ui">
-                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
+                <UIcon v-if="item.icon" :name="item.icon" data-slot="icon" :class="ui.icon({ class: [uiProp?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}
                 </template>
@@ -89,18 +91,18 @@ defineExpose({
           <StepperSeparator
             v-if="count < items.length - 1"
             data-slot="separator"
-            :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+            :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator] })"
           />
         </div>
 
-        <div data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div data-slot="wrapper" :class="ui.wrapper({ class: [uiProp?.wrapper, item.ui?.wrapper] })">
           <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
-            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
+            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" data-slot="title" :class="ui.title({ class: [uiProp?.title, item.ui?.title] })">
               <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
                 {{ item.title }}
               </slot>
             </StepperTitle>
-            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
+            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" data-slot="description" :class="ui.description({ class: [uiProp?.description, item.ui?.description] })">
               <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
                 {{ item.description }}
               </slot>
@@ -110,7 +112,7 @@ defineExpose({
       </StepperItem>
     </div>
 
-    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="ui.content({ class: props.ui?.content })">
+    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[currentStep.slot]" data-slot="content" :class="ui.content({ class: uiProp?.content })">
       <slot
         :name="currentStep?.slot || 'content'"
         :item="currentStep"

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

@@ -1,4 +1,5 @@
 import type { StepperRootProps, StepperRootEmits } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/stepper';
 import type { IconProps } from '../types';
@@ -59,16 +60,16 @@ export type StepperEmits<T extends StepperItem = StepperItem> = Omit<StepperRoot
 };
 type SlotProps<T extends StepperItem> = (props: {
     item: T;
-}) => any;
+}) => VNode[];
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator(props: {
+    indicator?(props: {
         item: T;
         ui: Stepper['ui'];
-    }): any;
-    wrapper: SlotProps<T>;
-    title: SlotProps<T>;
-    description: SlotProps<T>;
-    content: SlotProps<T>;
+    }): VNode[];
+    wrapper?: SlotProps<T>;
+    title?: SlotProps<T>;
+    description?: SlotProps<T>;
+    content?: SlotProps<T>;
 } & DynamicSlots<T, 'wrapper' | 'title' | 'description', {
     item: T;
 }>;
@@ -92,7 +93,7 @@ declare const __VLS_export: <T extends StepperItem>(__VLS_props: NonNullable<Awa
     }>) => void;
     attrs: any;
     slots: StepperSlots<T>;
-    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((evt: "update:modelValue", value: string | number | undefined) => void);
+    emit: (((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void)) & ((event: "update:modelValue", value: string | number | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,5 @@
 import type { SwitchRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
 import type { IconProps } from '../types';
@@ -46,12 +47,12 @@ export type SwitchEmits = {
     change: [event: Event];
 };
 export interface SwitchSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Switch.vue

@@ -3,10 +3,11 @@ import theme from "#build/ui/switch";
 </script>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useAttrs, useId } from "vue";
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -22,7 +23,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
   id: { type: String, required: false },
   name: { type: String, required: false },
@@ -34,9 +35,15 @@ const slots = defineSlots();
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: Boolean, ...{ default: void 0 } });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("switch", props);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { "data-state": _, ...rest } = attrs;
+  return rest;
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.switch || {} })({
   size: size.value,
   color: color.value,
@@ -53,34 +60,34 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"
         data-slot="base"
-        :class="ui.base({ class: props.ui?.base })"
+        :class="ui.base({ class: uiProp?.base })"
         @update:model-value="onUpdate"
       >
-        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })">
-          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true, unchecked: true })" />
+        <SwitchThumb data-slot="thumb" :class="ui.thumb({ class: uiProp?.thumb })">
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true, unchecked: true })" />
           <template v-else>
-            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, checked: true })" />
-            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon, unchecked: true })" />
+            <UIcon v-if="checkedIcon" :name="checkedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, checked: true })" />
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon, unchecked: true })" />
           </template>
         </SwitchThumb>
       </SwitchRoot>
     </div>
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+      <Label v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </Label>
-      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

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

@@ -1,4 +1,5 @@
 import type { SwitchRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/switch';
 import type { IconProps } from '../types';
@@ -46,12 +47,12 @@ export type SwitchEmits = {
     change: [event: Event];
 };
 export interface SwitchSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import type { WatchOptions } from 'vue';
+import type { WatchOptions, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, Header, HeaderContext, PaginationOptions, PaginationState, Row, RowData, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, TableMeta, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
@@ -162,19 +162,18 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     class?: any;
     ui?: 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 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>;
+type DynamicHeaderFooterSlots<T, K = keyof T> = Record<`${K extends string ? K : never}-header` | `${K extends string ? K : never}-footer` | (string & {}), (props: HeaderContext<T, unknown>) => VNode[]>;
+type DynamicCellSlots<T, K = keyof T> = Record<`${K extends string ? K : never}-cell` | (string & {}), (props: CellContext<T, unknown>) => VNode[]>;
 export type TableSlots<T extends TableData = TableData> = {
-    'expanded': (props: {
+    'expanded'?: (props: {
         row: Row<T>;
-    }) => any;
-    'empty': (props?: {}) => any;
-    'loading': (props?: {}) => any;
-    'caption': (props?: {}) => any;
-    'body-top': (props?: {}) => any;
-    'body-bottom': (props?: {}) => any;
-} & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
+    }) => VNode[];
+    'empty'?: (props?: {}) => VNode[];
+    'loading'?: (props?: {}) => VNode[];
+    'caption'?: (props?: {}) => VNode[];
+    'body-top'?: (props?: {}) => VNode[];
+    'body-bottom'?: (props?: {}) => VNode[];
+} & DynamicHeaderFooterSlots<T> & DynamicCellSlots<T>;
 declare const _default: typeof __VLS_export;
 export default _default;
 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<{
@@ -216,7 +215,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
+    emit: ((event: "update:globalFilter", value: string | undefined) => void) & ((event: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((event: "update:columnOrder", value: ColumnOrderState | 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:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState | undefined) => void) & ((event: "update:sorting", value: SortingState | undefined) => void) & ((event: "update:grouping", value: GroupingState | undefined) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:pagination", value: PaginationState | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Table.vue

@@ -3,14 +3,15 @@ import theme from "#build/ui/table";
 </script>
 
 <script setup>
-import { ref, computed, useTemplateRef, watch, toRef } from "vue";
+import { computed, useTemplateRef, watch, toRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { reactivePick, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, createRef } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
@@ -45,7 +46,7 @@ const props = defineProps({
   onHover: { type: Function, required: false },
   onContextmenu: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  ui: { type: null, required: false },
+  ui: { type: Object, required: false },
   state: { type: Object, required: false },
   onStateChange: { type: Function, required: false },
   renderFallbackValue: { type: null, required: false },
@@ -66,7 +67,8 @@ const props = defineProps({
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const data = ref(props.data ?? []);
+const uiProp = useComponentUI("table", props);
+const data = createRef(props.data ?? [], props.watchOptions?.deep !== false);
 const meta = computed(() => props.meta ?? {});
 const columns = computed(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: upperFirst(accessorKey) }))));
 function processColumns(columns2) {
@@ -243,8 +245,8 @@ const renderedSize = computed(() => {
   }
   return virtualItems.reduce((sum, item) => sum + item.size, 0);
 });
-function valueUpdater(updaterOrValue, ref2) {
-  ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
+function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
 }
 function onRowSelect(e, row) {
   if (!props.onSelect) {
@@ -314,7 +316,7 @@ defineExpose({
       data-slot="tr"
       :class="ui.tr({
   class: [
-    props.ui?.tr,
+    uiProp?.tr,
     resolveValue(tableApi.options.meta?.class?.tr, row)
   ]
 })"
@@ -333,7 +335,7 @@ defineExpose({
         data-slot="td"
         :class="ui.td({
   class: [
-    props.ui?.td,
+    uiProp?.td,
     resolveValue(cell.column.columnDef.meta?.class?.td, cell)
   ],
   pinned: !!cell.column.getIsPinned()
@@ -349,23 +351,23 @@ defineExpose({
       </td>
     </tr>
 
-    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
-      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [props.ui?.td] })">
+    <tr v-if="row.getIsExpanded()" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
+      <td :colspan="row.getAllCells().length" data-slot="td" :class="ui.td({ class: [uiProp?.td] })">
         <slot name="expanded" :row="row" />
       </td>
     </tr>
   </DefineRowTemplate>
 
   <DefineTableTemplate>
-    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [props.ui?.base] })">
-      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [props.ui?.caption] })">
+    <table ref="tableRef" data-slot="base" :class="ui.base({ class: [uiProp?.base] })">
+      <caption v-if="caption || !!slots.caption" data-slot="caption" :class="ui.caption({ class: [uiProp?.caption] })">
         <slot name="caption">
           {{ caption }}
         </slot>
       </caption>
 
-      <thead data-slot="thead" :class="ui.thead({ class: [props.ui?.thead] })">
-        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+      <thead data-slot="thead" :class="ui.thead({ class: [uiProp?.thead] })">
+        <tr v-for="headerGroup in tableApi.getHeaderGroups()" :key="headerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in headerGroup.headers"
             :key="header.id"
@@ -376,7 +378,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    props.ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -392,10 +394,10 @@ defineExpose({
           </th>
         </tr>
 
-        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
       </thead>
 
-      <tbody data-slot="tbody" :class="ui.tbody({ class: [props.ui?.tbody] })">
+      <tbody data-slot="tbody" :class="ui.tbody({ class: [uiProp?.tbody] })">
         <slot name="body-top" />
 
         <template v-if="rows.length">
@@ -417,13 +419,13 @@ defineExpose({
         </template>
 
         <tr v-else-if="loading && !!slots['loading']">
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: props.ui?.loading })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
             <slot name="loading" />
           </td>
         </tr>
 
         <tr v-else>
-          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
+          <td :colspan="tableApi.getAllLeafColumns().length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
             <slot name="empty">
               {{ empty || t("table.noData") }}
             </slot>
@@ -436,14 +438,14 @@ defineExpose({
       <tfoot
         v-if="hasFooter"
         data-slot="tfoot"
-        :class="ui.tfoot({ class: [props.ui?.tfoot] })"
+        :class="ui.tfoot({ class: [uiProp?.tfoot] })"
         :style="virtualizer ? {
   transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
 } : void 0"
       >
-        <tr data-slot="separator" :class="ui.separator({ class: [props.ui?.separator] })" />
+        <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
 
-        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-for="footerGroup in tableApi.getFooterGroups()" :key="footerGroup.id" data-slot="tr" :class="ui.tr({ class: [uiProp?.tr] })">
           <th
             v-for="header in footerGroup.headers"
             :key="header.id"
@@ -453,7 +455,7 @@ defineExpose({
             data-slot="th"
             :class="ui.th({
   class: [
-    props.ui?.th,
+    uiProp?.th,
     resolveValue(header.column.columnDef.meta?.class?.th, header)
   ],
   pinned: !!header.column.getIsPinned()
@@ -472,7 +474,7 @@ defineExpose({
     </table>
   </DefineTableTemplate>
 
-  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <div
       v-if="virtualizer"
       :style="{

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

@@ -1,4 +1,4 @@
-import type { WatchOptions } from 'vue';
+import type { WatchOptions, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, Header, HeaderContext, PaginationOptions, PaginationState, Row, RowData, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, TableMeta, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
@@ -162,19 +162,18 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     class?: any;
     ui?: 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 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>;
+type DynamicHeaderFooterSlots<T, K = keyof T> = Record<`${K extends string ? K : never}-header` | `${K extends string ? K : never}-footer` | (string & {}), (props: HeaderContext<T, unknown>) => VNode[]>;
+type DynamicCellSlots<T, K = keyof T> = Record<`${K extends string ? K : never}-cell` | (string & {}), (props: CellContext<T, unknown>) => VNode[]>;
 export type TableSlots<T extends TableData = TableData> = {
-    'expanded': (props: {
+    'expanded'?: (props: {
         row: Row<T>;
-    }) => any;
-    'empty': (props?: {}) => any;
-    'loading': (props?: {}) => any;
-    'caption': (props?: {}) => any;
-    'body-top': (props?: {}) => any;
-    'body-bottom': (props?: {}) => any;
-} & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
+    }) => VNode[];
+    'empty'?: (props?: {}) => VNode[];
+    'loading'?: (props?: {}) => VNode[];
+    'caption'?: (props?: {}) => VNode[];
+    'body-top'?: (props?: {}) => VNode[];
+    'body-bottom'?: (props?: {}) => VNode[];
+} & DynamicHeaderFooterSlots<T> & DynamicCellSlots<T>;
 declare const _default: typeof __VLS_export;
 export default _default;
 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<{
@@ -216,7 +215,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
+    emit: ((event: "update:globalFilter", value: string | undefined) => void) & ((event: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((event: "update:columnOrder", value: ColumnOrderState | 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:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((event: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((event: "update:rowPinning", value: RowPinningState | undefined) => void) & ((event: "update:sorting", value: SortingState | undefined) => void) & ((event: "update:grouping", value: GroupingState | undefined) => void) & ((event: "update:expanded", value: ExpandedState | undefined) => void) & ((event: "update:pagination", value: PaginationState | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };