@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/components/CommandPalette.vue

@@ -3,17 +3,18 @@ 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, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
-import { tv } from "../utils/tv";
 import { highlight } from "../utils/fuse";
 import { pickLinkProps } from "../utils/link";
+import { getEstimateSize } from "../utils/virtualizer";
+import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
 import UButton from "./Button.vue";
@@ -22,11 +23,13 @@ import ULinkBase from "./LinkBase.vue";
 import ULink from "./Link.vue";
 import UInput from "./Input.vue";
 import UKbd from "./Kbd.vue";
+defineOptions({ inheritAttrs: false });
 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 +38,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 +60,31 @@ 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(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, "md", props.descriptionKey)
+  });
+});
+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,
@@ -78,13 +108,15 @@ const items = computed(() => groups.value?.filter((group) => {
   return true;
 })?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
 const { results: fuseResults } = useFuse(searchTerm, items, fuse);
-function getGroupWithItems(group, items2) {
+const throttledFuseResults = refThrottled(fuseResults, 16, true);
+function processGroupItems(group, items2) {
+  let processedItems = items2;
   if (group?.postFilter && typeof group.postFilter === "function") {
-    items2 = group.postFilter(searchTerm.value, items2);
+    processedItems = group.postFilter(searchTerm.value, processedItems);
   }
   return {
     ...group,
-    items: items2.slice(0, fuse.value.resultLimit).map((item) => {
+    items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
         labelHtml: highlight(item, searchTerm.value, props.labelKey),
@@ -94,7 +126,8 @@ function getGroupWithItems(group, items2) {
   };
 }
 const filteredGroups = computed(() => {
-  const groupsById = fuseResults.value.reduce((acc, result) => {
+  const currentGroups = groups.value;
+  const groupsById = throttledFuseResults.value.reduce((acc, result) => {
     const { item, matches } = result;
     if (!item.group) {
       return acc;
@@ -103,20 +136,42 @@ const filteredGroups = computed(() => {
     acc[item.group]?.push({ ...item, matches });
     return acc;
   }, {});
+  if (props.preserveGroupOrder) {
+    const processedGroups = [];
+    for (const group of currentGroups || []) {
+      if (!group.items?.length) {
+        continue;
+      }
+      const items2 = group.ignoreFilter ? group.items : groupsById[group.id];
+      if (!items2?.length) {
+        continue;
+      }
+      const processedGroup = processGroupItems(group, items2);
+      if (processedGroup.items?.length) {
+        processedGroups.push(processedGroup);
+      }
+    }
+    return processedGroups;
+  }
   const fuseGroups = Object.entries(groupsById).map(([id, items2]) => {
-    const group = groups.value?.find((group2) => group2.id === id);
+    const group = currentGroups?.find((group2) => group2.id === id);
     if (!group) {
       return;
     }
-    return getGroupWithItems(group, items2);
+    const processedGroup = processGroupItems(group, items2);
+    return processedGroup.items?.length ? processedGroup : void 0;
   }).filter((group) => !!group);
-  const nonFuseGroups = groups.value?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || [];
+  const nonFuseGroups = currentGroups?.map((group, index) => ({ ...group, index }))?.filter((group) => group.ignoreFilter && group.items?.length)?.map((group) => {
+    const processedGroup = processGroupItems(group, group.items || []);
+    return { ...processedGroup, index: group.index };
+  })?.filter((group) => group.items?.length) || [];
   return nonFuseGroups.reduce((acc, group) => {
     acc.splice(group.index, 0, group);
     return acc;
   }, [...fuseGroups]);
 });
-const listboxRootRef = useTemplateRef("listboxRootRef");
+const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group.items || []));
+const rootRef = useTemplateRef("rootRef");
 function navigate(item) {
   if (!item.children?.length) {
     return;
@@ -129,7 +184,7 @@ function navigate(item) {
     items: item.children
   });
   searchTerm.value = "";
-  listboxRootRef.value?.highlightFirstItem();
+  rootRef.value?.highlightFirstItem();
 }
 function navigateBack() {
   if (!history.value.length) {
@@ -137,7 +192,7 @@ function navigateBack() {
   }
   history.value.pop();
   searchTerm.value = "";
-  listboxRootRef.value?.highlightFirstItem();
+  rootRef.value?.highlightFirstItem();
 }
 function onBackspace() {
   if (!searchTerm.value) {
@@ -155,7 +210,78 @@ function onSelect(e, item) {
 </script>
 
 <template>
-  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :selection-behavior="selectionBehavior" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <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" data-slot="item" :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" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
+              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :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" data-slot="itemLeadingAvatar" :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"
+                data-slot="itemLeadingChip"
+                :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`])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, item.ui?.itemWrapper] })">
+              <span data-slot="itemLabel" :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" data-slot="itemLabelPrefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+
+                  <span v-if="item.labelHtml" data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
+                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey) }}</span>
+
+                  <span v-if="item.suffixHtml" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml" />
+                  <span v-else-if="item.suffix" data-slot="itemLabelSuffix" :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</span>
+                </slot>
+              </span>
+
+              <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :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 data-slot="itemTrailing" :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"
+                  data-slot="itemTrailingIcon"
+                  :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                />
+
+                <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :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" data-slot="itemTrailingHighlightedIcon" :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" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+              </ListboxItemIndicator>
+            </span>
+          </slot>
+        </ULinkBase>
+      </ULink>
+    </ListboxItem>
+  </DefineItemTemplate>
+
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder"
@@ -163,7 +289,9 @@ function onSelect(e, item) {
         :autofocus="autofocus"
         v-bind="inputProps"
         :loading-icon="loadingIcon"
+        :trailing-icon="trailingIcon"
         :icon="icon || appConfig.ui.icons.search"
+        data-slot="input"
         :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
       >
@@ -175,6 +303,7 @@ function onSelect(e, item) {
               variant="link"
               :aria-label="t('commandPalette.back')"
               v-bind="typeof back === 'object' ? back : {}"
+              data-slot="back"
               :class="ui.back({ class: props.ui?.back })"
               @click="navigateBack"
             />
@@ -190,6 +319,7 @@ function onSelect(e, item) {
               variant="ghost"
               :aria-label="t('commandPalette.close')"
               v-bind="typeof close === 'object' ? close : {}"
+              data-slot="close"
               :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
@@ -198,82 +328,43 @@ function onSelect(e, item) {
       </UInput>
     </ListboxFilter>
 
-    <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>
+    <ListboxContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+        <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 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>
+        <template v-else>
+          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: props.ui?.group })">
+            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="ui.label({ class: props.ui?.label })">
+              {{ get(group, props.labelKey) }}
+            </ListboxGroupLabel>
 
-                      <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 :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 })">
+      <div v-else data-slot="empty" :class="ui.empty({ class: props.ui?.empty })">
         <slot name="empty" :search-term="searchTerm">
           {{ searchTerm ? t("commandPalette.noMatch", { searchTerm }) : t("commandPalette.noData") }}
         </slot>
       </div>
     </ListboxContent>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" :ui="ui" />
     </div>
   </ListboxRoot>

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"