@nuxt/ui 4.0.1 → 4.1.0

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

@@ -11,6 +11,7 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: GetItemKeys<T>;
+    descriptionKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
@@ -24,16 +25,18 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
      */
     externalIcon?: boolean | IconProps['name'];
     class?: any;
-    ui: {
-        [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string;
-    };
+    ui: DropdownMenu['ui'];
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
     default(props?: {}): any;
-} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
+} & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
+}> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
+    active?: boolean;
+    index: number;
+    ui: DropdownMenu['ui'];
 }>;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__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<DropdownMenuContentProps<T> & {

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

@@ -0,0 +1,53 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/empty';
+import type { ComponentConfig } from '../types/tv';
+import type { ButtonProps, IconProps, AvatarProps } from '../types';
+type Empty = ComponentConfig<typeof theme, AppConfig, 'empty'>;
+export interface EmptyProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button in the body.
+     */
+    actions?: ButtonProps[];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Empty['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Empty['variants']['size'];
+    class?: any;
+    ui?: Empty['slots'];
+}
+export interface EmptySlots {
+    header(props?: {}): any;
+    leading(props: {
+        ui: Empty['ui'];
+    }): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    actions(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Empty.vue

@@ -0,0 +1,68 @@
+<script>
+import theme from "#build/ui/empty";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import UAvatar from "./Avatar.vue";
+import UButton from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  actions: { type: Array, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.empty || {} })({
+  variant: props.variant,
+  size: props.size
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.header || (icon || avatar || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description)" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header">
+        <slot name="leading" :ui="ui">
+          <UAvatar v-if="icon || avatar" :icon="icon" v-bind="typeof avatar === 'object' ? avatar : {}" :class="ui.avatar({ class: props.ui?.avatar })" />
+        </slot>
+
+        <h2 v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h2>
+
+        <div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.body || (actions?.length || !!slots.actions)" :class="ui.body({ class: props.ui?.body })">
+      <slot name="body">
+        <div v-if="actions?.length || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+          <slot name="actions">
+            <UButton v-for="(action, index) in actions" :key="index" :size="size" v-bind="action" />
+          </slot>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,53 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/empty';
+import type { ComponentConfig } from '../types/tv';
+import type { ButtonProps, IconProps, AvatarProps } from '../types';
+type Empty = ComponentConfig<typeof theme, AppConfig, 'empty'>;
+export interface EmptyProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed above the title.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button in the body.
+     */
+    actions?: ButtonProps[];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Empty['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Empty['variants']['size'];
+    class?: any;
+    ui?: Empty['slots'];
+}
+export interface EmptySlots {
+    header(props?: {}): any;
+    leading(props: {
+        ui: Empty['ui'];
+    }): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    actions(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<EmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, EmptySlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -36,7 +36,6 @@ export interface ErrorSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
     clear: boolean | Partial<ButtonProps>;
-    as: any;
     redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Error.vue

@@ -10,7 +10,7 @@ import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 const props = defineProps({
-  as: { type: null, required: false, default: "main" },
+  as: { type: null, required: false },
   error: { type: Object, required: false },
   redirect: { type: String, required: false, default: "/" },
   clear: { type: [Boolean, Object], required: false, default: true },

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

@@ -36,7 +36,6 @@ export interface ErrorSlots {
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
     clear: boolean | Partial<ButtonProps>;
-    as: any;
     redirect: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ErrorSlots>;
 declare const _default: typeof __VLS_export;

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

@@ -100,8 +100,11 @@ export interface FileUploadSlots<M extends boolean = false> {
     'default'(props: {
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        ui: FileUpload['ui'];
+    }): any;
+    'leading'(props: {
+        ui: FileUpload['ui'];
     }): any;
-    'leading'(props?: {}): any;
     'label'(props?: {}): any;
     'description'(props?: {}): any;
     'actions'(props: {
@@ -129,6 +132,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file-leading'(props: {
         file: File;
         index: number;
+        ui: FileUpload['ui'];
     }): any;
     'file-name'(props: {
         file: File;
@@ -141,6 +145,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file-trailing'(props: {
         file: File;
         index: number;
+        ui: FileUpload['ui'];
     }): any;
 }
 declare const __VLS_export: <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<{

package/dist/runtime/components/FileUpload.vue

@@ -35,7 +35,7 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   fileIcon: { type: [String, Object], required: false },
-  fileDelete: { type: [Boolean, Object], required: false },
+  fileDelete: { type: [Boolean, Object], required: false, default: true },
   fileDeleteIcon: { type: [String, Object], required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -142,8 +142,8 @@ defineExpose({
         <slot name="files" :files="modelValue">
           <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="file.name" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
-              <slot name="file-leading" :file="file" :index="index">
-                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+              <slot name="file-leading" :file="file" :index="index" :ui="ui">
+                <UAvatar :as="{ img: 'img' }" :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
               </slot>
 
               <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">
@@ -160,8 +160,9 @@ defineExpose({
                 </span>
               </div>
 
-              <slot name="file-trailing" :file="file" :index="index">
+              <slot name="file-trailing" :file="file" :index="index" :ui="ui">
                 <UButton
+                  v-if="fileDelete"
                   color="neutral"
                   v-bind="{
   ...layout === 'grid' ? {
@@ -189,7 +190,7 @@ defineExpose({
   </DefineFilesTemplate>
 
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <slot :open="open" :remove-file="removeFile">
+    <slot :open="open" :remove-file="removeFile" :ui="ui">
       <component
         :is="variant === 'button' ? 'button' : 'div'"
         ref="dropzoneRef"
@@ -199,13 +200,13 @@ defineExpose({
         :class="ui.base({ class: props.ui?.base })"
         :tabindex="interactive && !disabled ? 0 : -1"
         @click="interactive && !disabled && open()"
-        @keydown.prevent
+        @keydown.space.prevent
         @keyup.enter.space="interactive && !disabled && open()"
       >
         <ReuseFilesTemplate v-if="position === 'inside'" />
 
         <div v-if="position === 'inside' ? multiple ? !modelValue?.length : !modelValue : true" :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <slot name="leading">
+          <slot name="leading" :ui="ui">
             <UIcon v-if="variant === 'button'" :name="icon || appConfig.ui.icons.upload" :class="ui.icon({ class: props.ui?.icon })" />
             <UAvatar v-else :icon="icon || appConfig.ui.icons.upload" :size="props.size" :class="ui.avatar({ class: props.ui?.avatar })" />
           </slot>

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

@@ -100,8 +100,11 @@ export interface FileUploadSlots<M extends boolean = false> {
     'default'(props: {
         open: UseFileDialogReturn['open'];
         removeFile: (index?: number) => void;
+        ui: FileUpload['ui'];
+    }): any;
+    'leading'(props: {
+        ui: FileUpload['ui'];
     }): any;
-    'leading'(props?: {}): any;
     'label'(props?: {}): any;
     'description'(props?: {}): any;
     'actions'(props: {
@@ -129,6 +132,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file-leading'(props: {
         file: File;
         index: number;
+        ui: FileUpload['ui'];
     }): any;
     'file-name'(props: {
         file: File;
@@ -141,6 +145,7 @@ export interface FileUploadSlots<M extends boolean = false> {
     'file-trailing'(props: {
         file: File;
         index: number;
+        ui: FileUpload['ui'];
     }): any;
 }
 declare const __VLS_export: <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<{

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

@@ -29,6 +29,7 @@ export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLin
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: FooterColumns['ui'];
 }) => any;
 export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
     'left'(props?: {}): any;
@@ -39,8 +40,14 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
     }) => any;
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & import("vue").PublicProps;

package/dist/runtime/components/FooterColumns.vue

@@ -41,8 +41,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.footerColumns
             <li v-for="(link, linkIndex) in column.children" :key="linkIndex" :class="ui.item({ class: [props.ui?.item, link.ui?.item] })">
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
                 <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, link.ui?.link, link.class], active })">
-                  <slot name="link" :link="link" :active="active">
-                    <slot name="link-leading" :link="link" :active="active">
+                  <slot name="link" :link="link" :active="active" :ui="ui">
+                    <slot name="link-leading" :link="link" :active="active" :ui="ui">
                       <UIcon v-if="link.icon" :name="link.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, link.ui?.linkLeadingIcon], active })" />
                     </slot>
 

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

@@ -29,6 +29,7 @@ export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLin
 type SlotProps<T> = (props: {
     link: T;
     active: boolean;
+    ui: FooterColumns['ui'];
 }) => any;
 export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
     'left'(props?: {}): any;
@@ -39,8 +40,14 @@ export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLin
     }) => any;
     'link': SlotProps<T>;
     'link-leading': SlotProps<T>;
-    'link-label': SlotProps<T>;
-    'link-trailing': SlotProps<T>;
+    'link-label'(props: {
+        link: T;
+        active: boolean;
+    }): any;
+    'link-trailing'(props: {
+        link: T;
+        active: boolean;
+    }): any;
 }
 declare const __VLS_export: <T extends FooterColumnLink>(__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<FooterColumnsProps<T>> & import("vue").PublicProps;

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

@@ -43,11 +43,14 @@ export interface HeaderSlots {
     toggle(props: {
         open: boolean;
         toggle: () => void;
+        ui: Header['ui'];
     }): any;
     top(props?: {}): any;
     bottom(props?: {}): any;
     body(props?: {}): any;
-    content(props?: {}): any;
+    content(props: {
+        close?: () => void;
+    }): any;
 }
 declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {

package/dist/runtime/components/Header.vue

@@ -62,7 +62,7 @@ function toggleOpen() {
 
 <template>
   <DefineToggleTemplate>
-    <slot name="toggle" :open="open" :toggle="toggleOpen">
+    <slot name="toggle" :open="open" :toggle="toggleOpen" :ui="ui">
       <UButton
         v-if="toggle"
         color="neutral"
@@ -124,8 +124,8 @@ function toggleOpen() {
   content: ui.content({ class: props.ui?.content })
 }"
   >
-    <template #content>
-      <slot name="content">
+    <template #content="contentData">
+      <slot name="content" v-bind="contentData">
         <div v-if="mode !== 'drawer'" :class="ui.header({ class: props.ui?.header })">
           <ReuseLeftTemplate />
 

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

@@ -43,11 +43,14 @@ export interface HeaderSlots {
     toggle(props: {
         open: boolean;
         toggle: () => void;
+        ui: Header['ui'];
     }): any;
     top(props?: {}): any;
     bottom(props?: {}): any;
     body(props?: {}): any;
-    content(props?: {}): any;
+    content(props: {
+        close?: () => void;
+    }): any;
 }
 declare const __VLS_export: <T extends HeaderMode>(__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<(HeaderProps<T> & {

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

@@ -49,9 +49,15 @@ export interface InputEmits<T extends InputValue = InputValue> {
     'change': [event: Event];
 }
 export interface InputSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Input['ui'];
+    }): any;
+    default(props: {
+        ui: Input['ui'];
+    }): any;
+    trailing(props: {
+        ui: Input['ui'];
+    }): any;
 }
 declare const __VLS_export: <T extends InputValue>(__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<InputProps<T> & {

package/dist/runtime/components/Input.vue

@@ -135,17 +135,17 @@ defineExpose({
       @focus="emitFormFocus"
     >
 
-    <slot />
+    <slot :ui="ui" />
 
     <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-      <slot name="leading">
+      <slot name="leading" :ui="ui">
         <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
       </slot>
     </span>
 
     <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-      <slot name="trailing">
+      <slot name="trailing" :ui="ui">
         <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
       </slot>
     </span>

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

@@ -49,9 +49,15 @@ export interface InputEmits<T extends InputValue = InputValue> {
     'change': [event: Event];
 }
 export interface InputSlots {
-    leading(props?: {}): any;
-    default(props?: {}): any;
-    trailing(props?: {}): any;
+    leading(props: {
+        ui: Input['ui'];
+    }): any;
+    default(props: {
+        ui: Input['ui'];
+    }): any;
+    trailing(props: {
+        ui: Input['ui'];
+    }): any;
 }
 declare const __VLS_export: <T extends InputValue>(__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<InputProps<T> & {

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

@@ -11,6 +11,7 @@ type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
 export type InputMenuValue = AcceptableValue;
 export type InputMenuItem = InputMenuValue | {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -23,9 +24,9 @@ export type InputMenuItem = InputMenuValue | {
      */
     type?: 'label' | 'separator' | 'item';
     disabled?: boolean;
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
+    ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
 export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
@@ -87,6 +88,23 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @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
@@ -97,6 +115,11 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @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 InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -144,30 +167,37 @@ export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends Ge
 type SlotProps<T extends InputMenuItem> = (props: {
     item: T;
     index: number;
+    ui: InputMenu['ui'];
 }) => any;
 export interface InputMenuSlots<A extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, 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<InputMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: InputMenu['ui'];
     }): any;
     'trailing'(props: {
         modelValue?: GetModelValue<A, VK, M>;
         open: boolean;
-        ui: {
-            [K in keyof Required<InputMenu['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: InputMenu['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>;
-    'tags-item-text': SlotProps<T>;
+    'tags-item-text'(props: {
+        item: T;
+        index: number;
+    }): any;
     'tags-item-delete': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (props?: {}) => any;