@eslamdevui/ui 4.0.0 → 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;
@@ -169,23 +197,14 @@ export interface SelectMenuSlots<A extends ArrayOrNested<SelectMenuItem> = Array
         item: string;
     }): any;
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
-        readonly onCreate?: ((item: string) => any) | undefined;
-        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
-        readonly onHighlight?: ((payload: {
-            ref: HTMLElement;
-            value: GetModelValue<T, VK, M>;
-        } | undefined) => any) | undefined;
-        readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm"> & (SelectMenuProps<T, VK, M> & {
+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;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => 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;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggerRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
             $data: {};
@@ -287,7 +306,7 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
                 default?: (props: {}) => any;
             };
         }) | null>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
     emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
@@ -297,6 +316,7 @@ declare const _default: <T extends ArrayOrNested<SelectMenuItem>, VK extends Get
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -41,11 +41,14 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props?: {}): any;
+    default(props: {
+        ui: Separator['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+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 _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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,11 +41,14 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
     ui?: Separator['slots'];
 }
 export interface SeparatorSlots {
-    default(props?: {}): any;
+    default(props: {
+        ui: Separator['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+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 _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -6,9 +6,10 @@ export interface SkeletonProps {
     as?: any;
     class?: any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -6,9 +6,10 @@ export interface SkeletonProps {
     as?: any;
     class?: any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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;
@@ -81,7 +78,7 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
     "after:enter": () => any;
@@ -94,12 +91,13 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverP
 }>, {
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
-    transition: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     side: Slideover["variants"]["side"];
+    transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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;
@@ -81,7 +78,7 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
     "after:enter": () => any;
@@ -94,12 +91,13 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverP
 }>, {
     close: boolean | Partial<ButtonProps>;
     modal: boolean;
-    transition: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     side: Slideover["variants"]["side"];
+    transition: boolean;
     dismissible: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -37,20 +37,18 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface SliderEmits {
     change: [event: Event];
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (SliderProps & {
+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;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -37,20 +37,18 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
 export interface SliderEmits {
     change: [event: Event];
 }
-declare const _default: <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<Pick<Partial<{}> & Omit<{
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (SliderProps & {
+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;
-    }) & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];