@nuxt/ui 4.0.1 → 4.1.0

package/dist/runtime/components/CommandPalette.vue

@@ -3,10 +3,10 @@ import theme from "#build/ui/command-palette";
 </script>
 
 <script setup>
-import { computed, ref, useTemplateRef } from "vue";
-import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { computed, ref, useTemplateRef, toRef } from "vue";
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick } from "@vueuse/core";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
@@ -25,8 +25,9 @@ import UKbd from "./Kbd.vue";
 const props = defineProps({
   as: { type: null, required: false },
   icon: { type: [String, Object], required: false },
-  selectedIcon: { type: [String, Object], required: false },
   trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  childrenIcon: { type: [String, Object], required: false },
   placeholder: { type: String, required: false },
   autofocus: { type: Boolean, required: false, default: true },
   close: { type: [Boolean, Object], required: false },
@@ -35,14 +36,17 @@ const props = defineProps({
   backIcon: { type: [String, Object], required: false },
   groups: { type: Array, required: false },
   fuse: { type: Object, required: false },
+  virtualize: { type: [Boolean, Object], required: false, default: false },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  preserveGroupOrder: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false, default: "" },
   defaultValue: { type: null, required: false },
-  highlightOnHover: { type: Boolean, required: false },
+  highlightOnHover: { type: Boolean, required: false, default: true },
   selectionBehavior: { type: String, required: false },
   loading: { type: Boolean, required: false },
   loadingIcon: { type: [String, Object], required: false }
@@ -54,7 +58,26 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover"), emits);
 const inputProps = useForwardProps(reactivePick(props, "loading"));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })());
+const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, { estimateSize: 32 }));
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    group: {
+      type: Object,
+      required: false
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+});
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.commandPalette || {} })({
+  virtualize: !!props.virtualize
+}));
 const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     ignoreLocation: true,
@@ -103,6 +126,19 @@ const filteredGroups = computed(() => {
     acc[item.group]?.push({ ...item, matches });
     return acc;
   }, {});
+  if (props.preserveGroupOrder) {
+    const processedGroups = [];
+    for (const group of groups.value || []) {
+      if (!group.items?.length) {
+        continue;
+      }
+      const items2 = group.ignoreFilter ? group.items : groupsById[group.id];
+      if (items2?.length) {
+        processedGroups.push(getGroupWithItems(group, items2));
+      }
+    }
+    return processedGroups;
+  }
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
     const group = groups.value?.find((group2) => group2.id === id);
     if (!group) {
@@ -116,6 +152,7 @@ const filteredGroups = computed(() => {
     return acc;
   }, [...fuseGroups]);
 });
+const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group.items || []));
 const listboxRootRef = useTemplateRef("listboxRootRef");
 function navigate(item) {
   if (!item.children?.length) {
@@ -155,6 +192,73 @@ function onSelect(e, item) {
 </script>
 
 <template>
+  <DefineItemTemplate v-slot="{ item, index, group }">
+    <ListboxItem
+      :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+      :disabled="item.disabled"
+      as-child
+      @select="onSelect($event, item)"
+    >
+      <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+        <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
+          <slot :name="item.slot || group?.slot || 'item'" :item="item" :index="index" :ui="ui">
+            <slot :name="item.slot ? `${item.slot}-leading` : group?.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index" :ui="ui">
+              <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
+              <UAvatar v-else-if="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], active: active || item.active })" />
+              <UChip
+                v-else-if="item.chip"
+                :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                inset
+                standalone
+                v-bind="item.chip"
+                :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+              />
+            </slot>
+
+            <span v-if="item.prefix || (item.labelHtml || get(item, props.labelKey)) || (item.suffixHtml || item.suffix) || !!slots[item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`])" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+              <span :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+                <slot :name="item.slot ? `${item.slot}-label` : group?.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index" :ui="ui">
+                  <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+
+                  <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
+
+                  <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                </slot>
+              </span>
+
+              <span v-if="get(item, props.descriptionKey)" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })">
+                <slot :name="item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`" :item="item" :index="index" :ui="ui">
+                  {{ get(item, props.descriptionKey) }}
+                </slot>
+              </span>
+            </span>
+
+            <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+              <slot :name="item.slot ? `${item.slot}-trailing` : group?.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index" :ui="ui">
+                <UIcon
+                  v-if="item.children && item.children.length > 0"
+                  :name="childrenIcon || appConfig.ui.icons.chevronRight"
+                  :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                />
+
+                <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                </span>
+
+                <UIcon v-else-if="group?.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+              </slot>
+
+              <ListboxItemIndicator v-if="!item.children?.length" as-child>
+                <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+              </ListboxItemIndicator>
+            </span>
+          </slot>
+        </ULinkBase>
+      </ULink>
+    </ListboxItem>
+  </DefineItemTemplate>
+
   <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
@@ -163,6 +267,7 @@ function onSelect(e, item) {
         :autofocus="autofocus"
         v-bind="inputProps"
         :loading-icon="loadingIcon"
+        :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
@@ -200,70 +305,31 @@ function onSelect(e, item) {
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
       <div v-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
-          <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
-            {{ get(group, props.labelKey) }}
-          </ListboxGroupLabel>
-
-          <ListboxItem
-            v-for="(item, index) in group.items"
-            :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
-            :disabled="item.disabled"
-            as-child
-            @select="onSelect($event, item)"
-          >
-            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
-                <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
-                  <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-                    <UAvatar v-else-if="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], active: active || item.active })" />
-                    <UChip
-                      v-else-if="item.chip"
-                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
-                      inset
-                      standalone
-                      v-bind="item.chip"
-                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
-                    />
-                  </slot>
-
-                  <span v-if="item.labelHtml || get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`]" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
-                    <slot :name="item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`" :item="item" :index="index">
-                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+        <ListboxVirtualizer
+          v-if="!!virtualize"
+          v-slot="{ option: item, virtualItem }"
+          :options="filteredItems"
+          :text-content="(item2) => get(item2, props.labelKey)"
+          v-bind="virtualizerProps"
+        >
+          <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+        </ListboxVirtualizer>
 
-                      <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey)" />
+        <template v-else>
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" :class="ui.label({ class: props.ui?.label })">
+              {{ get(group, props.labelKey) }}
+            </ListboxGroupLabel>
 
-                      <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
-                    </slot>
-                  </span>
-
-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
-                    <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
-                      <UIcon
-                        v-if="item.children && item.children.length > 0"
-                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
-                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
-                      />
-
-                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-                      </span>
-
-                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
-                    </slot>
-
-                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
-                    </ListboxItemIndicator>
-                  </span>
-                </slot>
-              </ULinkBase>
-            </ULink>
-          </ListboxItem>
-        </ListboxGroup>
+            <ReuseItemTemplate
+              v-for="(item, index) in group.items"
+              :key="`group-${group.id}-${index}`"
+              :item="item"
+              :index="index"
+              :group="group"
+            />
+          </ListboxGroup>
+        </template>
       </div>
 
       <div v-else :class="ui.empty({ class: props.ui?.empty })">

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

@@ -11,6 +11,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     prefix?: string;
     label?: string;
     suffix?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -27,9 +28,9 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     placeholder?: string;
     children?: CommandPaletteItem[];
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
@@ -63,6 +64,12 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @IconifyIcon
      */
     icon?: IconProps['name'];
+    /**
+     * The icon displayed on the right side of the input.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
@@ -74,7 +81,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    trailingIcon?: IconProps['name'];
+    childrenIcon?: IconProps['name'];
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -124,11 +131,39 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
       }
      */
     fuse?: UseFuseOptions<T>;
+    /**
+     * 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;
+    };
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether to preserve the order of groups as defined in the `groups` prop when filtering.
+     * When `false`, groups will appear based on item matches.
+     * @defaultValue false
+     */
+    preserveGroupOrder?: boolean;
     class?: any;
     ui?: CommandPalette['slots'];
 }
@@ -138,29 +173,25 @@ export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteIte
 type SlotProps<T> = (props: {
     item: T;
     index: number;
+    ui: CommandPalette['ui'];
 }) => any;
 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
     'empty'(props: {
         searchTerm?: string;
     }): any;
     'footer'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'back'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'close'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
     'item-label': SlotProps<T>;
+    'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
 declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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/ContextMenu.d.vue.ts

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: ContextMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>;
+    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<ContextMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<ContextMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {
@@ -70,6 +73,11 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     disabled?: boolean;
     class?: any;
     ui?: ContextMenu['slots'];
@@ -80,18 +88,32 @@ type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: ContextMenu['ui'];
 }) => any;
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props?: {}): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
+    'item-description': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (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: ContextMenu['ui'];
 }>;
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & {

package/dist/runtime/components/ContextMenu.vue

@@ -19,6 +19,7 @@ const props = defineProps({
   content: { type: Object, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -50,6 +51,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu |
       :items="items"
       :portal="portal"
       :label-key="labelKey"
+      :description-key="descriptionKey"
       :checked-icon="checkedIcon"
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"

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

@@ -7,13 +7,16 @@ import type { ComponentConfig } from '../types/tv';
 type ContextMenu = ComponentConfig<typeof theme, AppConfig, 'contextMenu'>;
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
     icon?: IconProps['name'];
     color?: ContextMenu['variants']['color'];
     avatar?: AvatarProps;
-    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ContextMenuContentEmits>>;
+    content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'> & {
+        class?: any;
+    } & Partial<EmitsToProps<ContextMenuContentEmits>>;
     kbds?: KbdProps['value'][] | KbdProps[];
     /**
      * The item type.
@@ -27,10 +30,10 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
     open?: boolean;
     defaultOpen?: boolean;
     children?: ArrayOrNested<ContextMenuItem>;
-    onSelect?(e: Event): void;
-    onUpdateChecked?(checked: boolean): void;
+    onSelect?: (e: Event) => void;
+    onUpdateChecked?: (checked: boolean) => void;
     class?: any;
-    ui?: Pick<ContextMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
+    ui?: Pick<ContextMenu['slots'], 'content' | 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>> extends Omit<ContextMenuRootProps, 'dir'> {
@@ -70,6 +73,11 @@ export interface ContextMenuProps<T extends ArrayOrNested<ContextMenuItem> = Arr
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
     disabled?: boolean;
     class?: any;
     ui?: ContextMenu['slots'];
@@ -80,18 +88,32 @@ type SlotProps<T extends ContextMenuItem> = (props: {
     item: T;
     active?: boolean;
     index: number;
+    ui: ContextMenu['ui'];
 }) => any;
 export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrNested<ContextMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
     'default'(props?: {}): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
-    'item-label': SlotProps<T>;
+    'item-label': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
+    'item-description': (props: {
+        item: T;
+        active?: boolean;
+        index: number;
+    }) => any;
     'item-trailing': SlotProps<T>;
     'content-top': (props?: {}) => any;
     'content-bottom': (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: ContextMenu['ui'];
 }>;
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & {

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

@@ -11,6 +11,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     portal?: boolean | string | HTMLElement;
     sub?: boolean;
     labelKey: GetItemKeys<T>;
+    descriptionKey: GetItemKeys<T>;
     /**
      * @IconifyIcon
      */
@@ -24,9 +25,7 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
      */
     externalIcon?: boolean | IconProps['name'];
     class?: any;
-    ui: {
-        [K in keyof Required<ContextMenu['slots']>]: (props?: Record<string, any>) => string;
-    };
+    ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
 declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<{