@nuxt/ui 4.0.1 → 4.1.0

package/dist/runtime/components/SelectMenu.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/select-menu";
 
 <script setup>
 import { ref, computed, onMounted, toRef, toRaw } from "vue";
-import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from "reka-ui";
+import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -33,8 +33,10 @@ const props = defineProps({
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
   valueKey: { type: null, required: false },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -72,12 +74,33 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaul
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
+const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: {
+    xs: 24,
+    sm: 28,
+    md: 32,
+    lg: 36,
+    xl: 40
+  }[props.size || "md"]
+}));
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), variant: "none" }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
 const selectSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: [Object, String, Number, Boolean],
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+});
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} })({
   color: color.value,
   variant: props.variant,
@@ -86,7 +109,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.selectMenu ||
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
-  fieldGroup: orientation.value
+  fieldGroup: orientation.value,
+  virtualize: !!props.virtualize
 }));
 function displayValue(value) {
   if (props.multiple && Array.isArray(value)) {
@@ -204,21 +228,72 @@ defineExpose({
 
 <template>
   <DefineCreateItemTemplate>
-    <ComboboxGroup :class="ui.group({ class: props.ui?.group })">
-      <ComboboxItem
-        :class="ui.item({ class: props.ui?.item })"
-        :value="searchTerm"
-        @select.prevent="emits('create', searchTerm)"
-      >
-        <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
-          <slot name="create-item-label" :item="searchTerm">
-            {{ t("selectMenu.create", { label: searchTerm }) }}
-          </slot>
-        </span>
-      </ComboboxItem>
-    </ComboboxGroup>
+    <ComboboxItem
+      :class="ui.item({ class: props.ui?.item })"
+      :value="searchTerm"
+      @select.prevent="emits('create', searchTerm)"
+    >
+      <span :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+        <slot name="create-item-label" :item="searchTerm">
+          {{ t("selectMenu.create", { label: searchTerm }) }}
+        </slot>
+      </span>
+    </ComboboxItem>
   </DefineCreateItemTemplate>
 
+  <DefineItemTemplate v-slot="{ item, index }">
+    <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+      {{ get(item, props.labelKey) }}
+    </ComboboxLabel>
+
+    <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+
+    <ComboboxItem
+      v-else
+      :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
+      :disabled="isSelectItem(item) && item.disabled"
+      :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
+      @select="onSelect($event, item)"
+    >
+      <slot name="item" :item="item" :index="index" :ui="ui">
+        <slot name="item-leading" :item="item" :index="index" :ui="ui">
+          <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UChip
+            v-else-if="isSelectItem(item) && item.chip"
+            :size="props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+            inset
+            standalone
+            v-bind="item.chip"
+            :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+          />
+        </slot>
+
+        <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, isSelectItem(item) && item.ui?.itemWrapper] })">
+          <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
+            <slot name="item-label" :item="item" :index="index">
+              {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+            </slot>
+          </span>
+
+          <span v-if="isSelectItem(item) && (get(item, props.descriptionKey) || !!slots['item-description'])" :class="ui.itemDescription({ class: [props.ui?.itemDescription, isSelectItem(item) && item.ui?.itemDescription] })">
+            <slot name="item-description" :item="item" :index="index">
+              {{ get(item, props.descriptionKey) }}
+            </slot>
+          </span>
+        </span>
+
+        <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
+          <slot name="item-trailing" :item="item" :index="index" :ui="ui" />
+
+          <ComboboxItemIndicator as-child>
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
+          </ComboboxItemIndicator>
+        </span>
+      </slot>
+    </ComboboxItem>
+  </DefineItemTemplate>
+
   <ComboboxRoot
     :id="id"
     v-slot="{ modelValue, open }"
@@ -239,7 +314,7 @@ defineExpose({
           </slot>
         </span>
 
-        <slot :model-value="modelValue" :open="open">
+        <slot :model-value="modelValue" :open="open" :ui="ui">
           <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
             <span v-if="displayedModelValue !== void 0 && displayedModelValue !== null" :class="ui.value({ class: props.ui?.value })">
               {{ displayedModelValue }}
@@ -274,56 +349,34 @@ defineExpose({
           </ComboboxEmpty>
 
           <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
-
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
-              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-                <ComboboxLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-                  {{ get(item, props.labelKey) }}
-                </ComboboxLabel>
-
-                <ComboboxSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
+            <template v-if="!!virtualize">
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
 
-                <ComboboxItem
-                  v-else
-                  :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
-                  :disabled="isSelectItem(item) && item.disabled"
-                  :value="props.valueKey && isSelectItem(item) ? get(item, props.valueKey) : item"
-                  @select="onSelect($event, item)"
-                >
-                  <slot name="item" :item="item" :index="index">
-                    <slot name="item-leading" :item="item" :index="index">
-                      <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
-                      <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
-                      <UChip
-                        v-else-if="isSelectItem(item) && item.chip"
-                        :size="props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                        inset
-                        standalone
-                        v-bind="item.chip"
-                        :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
-                      />
-                    </slot>
+              <ComboboxVirtualizer
+                v-slot="{ option: item, virtualItem }"
+                :options="filteredItems"
+                :text-content="(item2) => isSelectItem(item2) ? get(item2, props.labelKey) : String(item2)"
+                v-bind="virtualizerProps"
+              >
+                <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+              </ComboboxVirtualizer>
 
-                    <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
-                      <slot name="item-label" :item="item" :index="index">
-                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                      </slot>
-                    </span>
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+            </template>
 
-                    <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
-                      <slot name="item-trailing" :item="item" :index="index" />
+            <template v-else>
+              <ComboboxGroup v-if="createItem && createItemPosition === 'top'" :class="ui.group({ class: props.ui?.group })">
+                <ReuseCreateItemTemplate />
+              </ComboboxGroup>
 
-                      <ComboboxItemIndicator as-child>
-                        <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
-                      </ComboboxItemIndicator>
-                    </span>
-                  </slot>
-                </ComboboxItem>
-              </template>
-            </ComboboxGroup>
+              <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
+                <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
+              </ComboboxGroup>
 
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+              <ComboboxGroup v-if="createItem && createItemPosition === 'bottom'" :class="ui.group({ class: props.ui?.group })">
+                <ReuseCreateItemTemplate />
+              </ComboboxGroup>
+            </template>
           </div>
 
           <slot name="content-bottom" />

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

@@ -9,6 +9,7 @@ type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
 export type SelectMenuValue = AcceptableValue;
 export type SelectMenuItem = SelectMenuValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -21,9 +22,9 @@ export type SelectMenuItem = SelectMenuValue | {
      */
     type?: 'label' | 'separator' | 'item';
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
@@ -78,6 +79,23 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * @defaultValue true
      */
     portal?: boolean | string | HTMLElement;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
     /**
      * When `items` is an array of objects, select the field to use as the value instead of the object itself.
      * @defaultValue undefined
@@ -88,6 +106,11 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -136,32 +159,37 @@ export type SelectMenuEmits<A extends ArrayOrNested<SelectMenuItem>, VK extends
 type SlotProps<T extends SelectMenuItem> = (props: {
     item: T;
     index: number;
+    ui: SelectMenu['ui'];
 }) => any;
 export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: SelectMenu['ui'];
     }): any;
     'default'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
+        ui: SelectMenu['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<SelectMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: SelectMenu['ui'];
     }): any;
     'empty'(props: {
         searchTerm?: string;
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label'(props: {
+        item: T;
+        index: number;
+    }): any;
+    'item-description'(props: {
+        item: T;
+        index: number;
+    }): any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;
@@ -229,7 +257,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
             };
             $forceUpdate: () => void;
             $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (... /** Event handler when highlighted element changes. */args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
@@ -279,7 +307,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
             };
             $forceUpdate: () => void;
             $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (... /** Event handler when highlighted element changes. */args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
         } & Readonly<{
             as: import("reka-ui").AsTag | import("vue").Component;
         }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {

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

@@ -41,7 +41,9 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props?: {}): any;
+    default(props: {
+        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";

package/dist/runtime/components/Separator.vue

@@ -40,7 +40,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.separator ||
 
     <template v-if="label || icon || avatar || !!slots.default">
       <div :class="ui.container({ class: props.ui?.container })">
-        <slot>
+        <slot :ui="ui">
           <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
           <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
           <UAvatar v-else-if="avatar" :size="props.ui?.avatarSize || ui.avatarSize()" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />

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

@@ -41,7 +41,9 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props?: {}): any;
+    default(props: {
+        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";

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

@@ -69,10 +69,7 @@ export interface SlideoverSlots {
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        close: () => void;
-        ui: {
-            [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Slideover['ui'];
     }): any;
     body(props: {
         close: () => void;

package/dist/runtime/components/Slideover.vue

@@ -36,9 +36,6 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen"
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
-  const defaultEvents = {
-    closeAutoFocus: (e) => e.preventDefault()
-  };
   if (!props.dismissible) {
     const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
@@ -47,9 +44,9 @@ const contentEvents = computed(() => {
         emits("close:prevent");
       };
       return acc;
-    }, defaultEvents);
+    }, {});
   }
-  return defaultEvents;
+  return {};
 });
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} })({
   transition: props.transition,
@@ -108,7 +105,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
               <slot name="actions" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"

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

@@ -69,10 +69,7 @@ export interface SlideoverSlots {
     description(props?: {}): any;
     actions(props?: {}): any;
     close(props: {
-        close: () => void;
-        ui: {
-            [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: Slideover['ui'];
     }): any;
     body(props: {
         close: () => void;

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

@@ -56,7 +56,10 @@ type SlotProps<T extends StepperItem> = (props: {
     item: T;
 }) => any;
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator: SlotProps<T>;
+    indicator(props: {
+        item: T;
+        ui: Stepper['ui'];
+    }): any;
     title: SlotProps<T>;
     description: SlotProps<T>;
     content: SlotProps<T>;

package/dist/runtime/components/Stepper.vue

@@ -74,7 +74,7 @@ defineExpose({
         <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <StepperTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
             <StepperIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })">
-              <slot name="indicator" :item="item">
+              <slot name="indicator" :item="item" :ui="ui">
                 <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
                 <template v-else>
                   {{ count + 1 }}

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

@@ -56,7 +56,10 @@ type SlotProps<T extends StepperItem> = (props: {
     item: T;
 }) => any;
 export type StepperSlots<T extends StepperItem = StepperItem> = {
-    indicator: SlotProps<T>;
+    indicator(props: {
+        item: T;
+        ui: Stepper['ui'];
+    }): any;
     title: SlotProps<T>;
     description: SlotProps<T>;
     content: SlotProps<T>;

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

@@ -2,6 +2,7 @@ import type { Ref, WatchOptions } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
+import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/table';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
@@ -49,6 +50,23 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     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.
+     * @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
+         * @defaultValue 65
+         */
+        estimateSize?: number;
+    });
     /**
      * The text to display when the table is empty.
      * @defaultValue t('table.noData')
@@ -56,6 +74,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     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';
@@ -136,7 +155,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
      */
     facetedOptions?: FacetedOptions<T>;
-    onSelect?: (row: TableRow<T>, e?: Event) => void;
+    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)>;
     class?: any;
@@ -186,6 +205,7 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
         tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;