@nuxt/ui 4.2.1 → 4.3.0

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -117,6 +118,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -201,25 +203,18 @@ export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = Array
 declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__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<(SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        onBlur?: ((event: FocusEvent) => any) | undefined;
-        onFocus?: ((event: FocusEvent) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        onCreate?: ((item: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: GetModelValue<T, VK, M>;
-        } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: GetModelValue<T, VK, M>;
+    } | undefined) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggerRef: Readonly<import("vue").Ref<HTMLButtonElement, HTMLButtonElement>>;
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);

package/dist/runtime/components/SelectMenu.vue

@@ -13,7 +13,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray, looseToNumber } from "../utils";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -41,6 +41,7 @@ const props = defineProps({
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  modelModifiers: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
   createItem: { type: [Boolean, String, Object], required: false },
@@ -179,6 +180,18 @@ function onUpdate(value) {
   if (toRaw(props.modelValue) === value) {
     return;
   }
+  if (props.modelModifiers?.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value);
+  }
+  if (props.modelModifiers?.nullable) {
+    value ??= null;
+  }
+  if (props.modelModifiers?.optional) {
+    value ??= void 0;
+  }
   const event = new Event("change", { target: { value } });
   emits("change", event);
   emitFormChange();

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types';
+import type { ModelModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
@@ -117,6 +118,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
     defaultValue?: GetModelValue<T, VK, M>;
     /** The controlled value of the SelectMenu. Can be binded-with with `v-model`. */
     modelValue?: GetModelValue<T, VK, M>;
+    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -201,25 +203,18 @@ export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = Array
 declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__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<(SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        onBlur?: ((event: FocusEvent) => any) | undefined;
-        onFocus?: ((event: FocusEvent) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        onCreate?: ((item: string) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
-        onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: GetModelValue<T, VK, M>;
-        } | undefined) => any) | undefined;
-        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+        ref: HTMLElement;
+        value: GetModelValue<T, VK, M>;
+    } | undefined) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggerRef: Readonly<import("vue").Ref<HTMLButtonElement, HTMLButtonElement>>;
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);

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

@@ -45,9 +45,7 @@ export interface SeparatorSlots {
         ui: Separator['ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -45,9 +45,7 @@ export interface SeparatorSlots {
         ui: Separator['ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SeparatorSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -25,6 +25,11 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue 'right'
      */
     side?: Slideover['variants']['side'];
+    /**
+     * Whether to inset the slideover from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
     /**
      * Render the slideover in a portal.
      * @defaultValue true
@@ -35,7 +40,7 @@ export interface SlideoverProps extends DialogRootProps {
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -88,15 +93,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {
-    overlay: boolean;
-    close: boolean | Partial<ButtonProps>;
-    transition: boolean;
-    modal: boolean;
-    portal: boolean | string | HTMLElement;
-    side: Slideover["variants"]["side"];
-    dismissible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/Slideover.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   overlay: { type: Boolean, required: false, default: true },
   transition: { type: Boolean, required: false, default: true },
   side: { type: null, required: false, default: "right" },
+  inset: { type: Boolean, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: null, required: false },
@@ -50,7 +51,8 @@ const contentEvents = computed(() => {
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
-  side: props.side
+  side: props.side,
+  inset: props.inset
 }));
 </script>
 

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

@@ -1,7 +1,7 @@
 import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/slideover';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
@@ -25,6 +25,11 @@ export interface SlideoverProps extends DialogRootProps {
      * @defaultValue 'right'
      */
     side?: Slideover['variants']['side'];
+    /**
+     * Whether to inset the slideover from the edges.
+     * @defaultValue false
+     */
+    inset?: boolean;
     /**
      * Render the slideover in a portal.
      * @defaultValue true
@@ -35,7 +40,7 @@ export interface SlideoverProps extends DialogRootProps {
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -88,15 +93,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:leave"?: (() => any) | undefined;
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
-}>, {
-    overlay: boolean;
-    close: boolean | Partial<ButtonProps>;
-    transition: boolean;
-    modal: boolean;
-    portal: boolean | string | HTMLElement;
-    side: Slideover["variants"]["side"];
-    dismissible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -40,10 +40,9 @@ export interface SliderEmits {
 declare const __VLS_export: <T extends number | number[]>(__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<(SliderProps & {
         modelValue?: T;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};

package/dist/runtime/components/Slider.vue

@@ -87,9 +87,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
+        <SliderThumb data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </UTooltip>
-      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" />
+      <SliderThumb v-else data-slot="thumb" :class="ui.thumb({ class: props.ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -40,10 +40,9 @@ export interface SliderEmits {
 declare const __VLS_export: <T extends number | number[]>(__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<(SliderProps & {
         modelValue?: T;
-    }) & {
-        onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};

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

@@ -67,11 +67,9 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 declare const __VLS_export: <T extends StepperItem>(__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<(StepperProps<T> & {
         modelValue?: string | number;
-    }) & {
-        onNext?: ((value: T) => any) | undefined;
-        onPrev?: ((value: T) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         next(): void;
         prev(): void;

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

@@ -67,11 +67,9 @@ export type StepperSlots<T extends StepperItem = StepperItem> = {
 declare const __VLS_export: <T extends StepperItem>(__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<(StepperProps<T> & {
         modelValue?: string | number;
-    }) & {
-        onNext?: ((value: T) => any) | undefined;
-        onPrev?: ((value: T) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "next", value: T) => void) & ((evt: "prev", value: T) => void) & ((evt: "update:modelValue", value: string | number | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         next(): void;
         prev(): void;

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

@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * 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'>> & {
@@ -190,21 +191,9 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & {
-        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((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)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         readonly $el: HTMLElement;
         tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
@@ -212,7 +201,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+    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);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Table.vue

@@ -4,12 +4,12 @@ import theme from "#build/ui/table";
 
 <script setup>
 import { ref, computed, useTemplateRef, watch, toRef } from "vue";
-import { Primitive } from "reka-ui";
+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 { reactiveOmit, createReusableTemplate } from "@vueuse/core";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
@@ -121,56 +121,59 @@ const hasFooter = computed(() => {
   }
   return hasFooterRecursive(columns.value);
 });
-const globalFilterState = defineModel("globalFilter", { type: String, ...{ default: void 0 } });
-const columnFiltersState = defineModel("columnFilters", { type: Array, ...{ default: [] } });
-const columnOrderState = defineModel("columnOrder", { type: Array, ...{ default: [] } });
-const columnVisibilityState = defineModel("columnVisibility", { type: Object, ...{ default: {} } });
-const columnPinningState = defineModel("columnPinning", { type: Object, ...{ default: {} } });
-const columnSizingState = defineModel("columnSizing", { type: Object, ...{ default: {} } });
-const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object, ...{ default: {} } });
-const rowSelectionState = defineModel("rowSelection", { type: Object, ...{ default: {} } });
-const rowPinningState = defineModel("rowPinning", { type: Object, ...{ default: {} } });
-const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } });
-const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
-const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
-const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
+const globalFilterState = defineModel("globalFilter", { type: String });
+const columnFiltersState = defineModel("columnFilters", { type: Array });
+const columnOrderState = defineModel("columnOrder", { type: Array });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object });
+const columnPinningState = defineModel("columnPinning", { type: Object });
+const columnSizingState = defineModel("columnSizing", { type: Object });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object });
+const rowSelectionState = defineModel("rowSelection", { type: Object });
+const rowPinningState = defineModel("rowPinning", { type: Object });
+const sortingState = defineModel("sorting", { type: Array });
+const groupingState = defineModel("grouping", { type: Array });
+const expandedState = defineModel("expanded", { type: [Boolean, Object] });
+const paginationState = defineModel("pagination", { type: Object });
 const rootRef = useTemplateRef("rootRef");
 const tableRef = useTemplateRef("tableRef");
+const tableProps = useForwardProps(reactivePick(props, "_features", "autoResetAll", "debugAll", "debugCells", "debugColumns", "debugHeaders", "debugRows", "debugTable", "defaultColumn", "getRowId", "getSubRows", "initialState", "mergeOptions", "renderFallbackValue"));
 const tableApi = useVueTable({
-  ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
-  data,
+  ...tableProps.value,
+  get data() {
+    return data.value;
+  },
   get columns() {
     return columns.value;
   },
   meta: meta.value,
   getCoreRowModel: getCoreRowModel(),
   ...props.globalFilterOptions || {},
-  onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState),
+  ...globalFilterState.value !== void 0 && { onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState) },
   ...props.columnFiltersOptions || {},
   getFilteredRowModel: getFilteredRowModel(),
-  onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState),
-  onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState),
+  ...columnFiltersState.value !== void 0 && { onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState) },
+  ...columnOrderState.value !== void 0 && { onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState) },
   ...props.visibilityOptions || {},
-  onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState),
+  ...columnVisibilityState.value !== void 0 && { onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState) },
   ...props.columnPinningOptions || {},
-  onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState),
+  ...columnPinningState.value !== void 0 && { onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState) },
   ...props.columnSizingOptions || {},
-  onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState),
-  onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState),
+  ...columnSizingState.value !== void 0 && { onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState) },
+  ...columnSizingInfoState.value !== void 0 && { onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState) },
   ...props.rowSelectionOptions || {},
-  onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState),
+  ...rowSelectionState.value !== void 0 && { onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState) },
   ...props.rowPinningOptions || {},
-  onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState),
+  ...rowPinningState.value !== void 0 && { onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState) },
   ...props.sortingOptions || {},
   getSortedRowModel: getSortedRowModel(),
-  onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState),
+  ...sortingState.value !== void 0 && { onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState) },
   ...props.groupingOptions || {},
-  onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState),
+  ...groupingState.value !== void 0 && { onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState) },
   ...props.expandedOptions || {},
   getExpandedRowModel: getExpandedRowModel(),
-  onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState),
+  ...expandedState.value !== void 0 && { onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState) },
   ...props.paginationOptions || {},
-  onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState),
+  ...paginationState.value !== void 0 && { onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState) },
   ...props.facetedOptions || {},
   state: {
     get globalFilter() {
@@ -278,6 +281,16 @@ function resolveValue(prop, arg) {
   }
   return prop;
 }
+function getColumnStyles(column) {
+  const styles = {};
+  const pinned = column.getIsPinned();
+  if (pinned === "left") {
+    styles.left = `${column.getStart("left")}px`;
+  } else if (pinned === "right") {
+    styles.right = `${column.getAfter("right")}px`;
+  }
+  return styles;
+}
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
@@ -325,7 +338,10 @@ defineExpose({
   ],
   pinned: !!cell.column.getIsPinned()
 })"
-        :style="resolveValue(cell.column.columnDef.meta?.style?.td, cell)"
+        :style="[
+  getColumnStyles(cell.column),
+  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()" />
@@ -365,7 +381,10 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+  getColumnStyles(header.column),
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -439,7 +458,10 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
-            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
+            :style="[
+  getColumnStyles(header.column),
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]"
           >
             <slot :name="`${header.id}-footer`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.footer" :props="header.getContext()" />

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

@@ -54,6 +54,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     /**
      * 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'>> & {
@@ -190,21 +191,9 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & {
-        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((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)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         readonly $el: HTMLElement;
         tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
@@ -212,7 +201,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+    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);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };