@nuxt/ui 4.7.0 → 4.8.0

package/dist/runtime/components/CommandPalette.vue

@@ -3,16 +3,17 @@ import theme from "#build/ui/command-palette";
 </script>
 
 <script setup>
-import { computed, ref, useTemplateRef, toRef } from "vue";
-import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { computed, ref, useTemplateRef, toRef, watch, nextTick } from "vue";
+import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate, refDebounced, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { omit, get } from "../utils";
-import { highlight } from "../utils/fuse";
+import { highlight } from "../utils/search";
 import { pickLinkProps } from "../utils/link";
 import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
@@ -25,7 +26,7 @@ import ULink from "./Link.vue";
 import UInput from "./Input.vue";
 import UKbd from "./Kbd.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   size: { type: null, required: false },
   icon: { type: null, required: false },
@@ -61,11 +62,11 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "highlight", "entryFocus", "leave", "update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("commandPalette", _props);
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("commandPalette", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
+const rootProps = useForwardProps(reactivePick(props, "as", "disabled", "multiple", "modelValue", "defaultValue", "highlightOnHover", "by"), emits);
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
@@ -96,7 +97,7 @@ const fuse = computed(() => defu({}, props.fuse, {
   fuseOptions: {
     ignoreLocation: true,
     threshold: 0.1,
-    keys: [props.labelKey, "suffix"]
+    keys: [props.labelKey, props.descriptionKey, "suffix"]
   },
   resultLimit: 12,
   matchAllWhenSearchEmpty: true
@@ -127,16 +128,17 @@ function processGroupItems(group, items2) {
     items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
-        labelHtml: highlight(item, fuseSearchTerm.value, props.labelKey),
-        suffixHtml: highlight(item, fuseSearchTerm.value, void 0, [props.labelKey])
+        labelHtml: item.labelHtml ?? highlight(item, fuseSearchTerm.value, props.labelKey, void 0, fuse.value.fuseOptions?.useTokenSearch),
+        suffixHtml: item.suffixHtml ?? highlight(item, fuseSearchTerm.value, "suffix", [props.labelKey], fuse.value.fuseOptions?.useTokenSearch),
+        descriptionHtml: item.descriptionHtml ?? highlight(item, fuseSearchTerm.value, props.descriptionKey, [props.labelKey, "suffix"], fuse.value.fuseOptions?.useTokenSearch)
       };
     })
   };
 }
 const filteredGroups = computed(() => {
   const currentGroups = groups.value;
-  const groupsById = throttledFuseResults.value.reduce((acc, result) => {
-    const { item, matches } = result;
+  const groupsById = throttledFuseResults.value.reduce((acc, result2) => {
+    const { item, matches } = result2;
     if (!item.group) {
       return acc;
     }
@@ -169,17 +171,37 @@ const filteredGroups = computed(() => {
     const processedGroup = processGroupItems(group, items2);
     return processedGroup.items?.length ? processedGroup : void 0;
   }).filter((group) => !!group);
-  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 result = [...fuseGroups];
+  for (const group of currentGroups || []) {
+    if (!group.ignoreFilter || !group.items?.length) {
+      continue;
+    }
+    const processedGroup = processGroupItems(group, group.items);
+    if (!processedGroup.items?.length) {
+      continue;
+    }
+    const originalIndex = currentGroups.indexOf(group);
+    const precedingIds = /* @__PURE__ */ new Set();
+    for (let i = 0; i < originalIndex; i++) {
+      precedingIds.add(currentGroups[i].id);
+    }
+    let insertAfter = -1;
+    for (let i = 0; i < result.length; i++) {
+      if (precedingIds.has(result[i].id)) {
+        insertAfter = i;
+      }
+    }
+    result.splice(insertAfter + 1, 0, processedGroup);
+  }
+  return result;
 });
 const filteredItems = computed(() => filteredGroups.value.flatMap((group) => group.items || []));
 const rootRef = useTemplateRef("rootRef");
+watch(filteredGroups, () => {
+  nextTick(() => {
+    rootRef.value?.highlightFirstItem();
+  });
+});
 function navigate(item) {
   if (!item.children?.length) {
     return;
@@ -221,66 +243,67 @@ function onSelect(e, item) {
   <DefineItemTemplate v-slot="{ item, index, group }">
     <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
       <ListboxItem
-        :value="props.valueKey ? get(item, props.valueKey) : omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
+        :value="props.valueKey ? get(item, props.valueKey) : omit(item, ['matches', 'group', 'onSelect', 'labelHtml', 'suffixHtml', 'descriptionHtml', 'children'])"
         :disabled="item.disabled"
         as-child
         @select="onSelect($event, item)"
       >
-        <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class], active: active || item.active })">
+        <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: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-              <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-              <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+              <UIcon v-if="item.loading" :name="props.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 || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
                 inset
                 standalone
                 v-bind="item.chip"
                 data-slot="itemLeadingChip"
-                :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                :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: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
-              <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+            <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: [uiProp?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                  <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: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml" />
-                  <span v-else data-slot="itemLabelBase" :class="ui.itemLabelBase({ class: [uiProp?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })">{{ get(item, props.labelKey) }}</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: [uiProp?.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: [uiProp?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })">{{ item.suffix }}</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) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`]" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+              <span v-if="item.descriptionHtml" data-slot="itemDescription" :class="ui.itemDescription({ class: [props.ui?.itemDescription, item.ui?.itemDescription] })" v-html="item.descriptionHtml" />
+              <span v-else-if="get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : group?.slot ? `${group.slot}-description` : `item-description`]" 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: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+            <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"
+                  :name="props.childrenIcon || appConfig.ui.icons.chevronRight"
                   data-slot="itemTrailingIcon"
-                  :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.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: [uiProp?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-                  <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiProp?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                <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: [uiProp?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
+                <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: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                <UIcon :name="props.selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
               </ListboxItemIndicator>
             </span>
           </slot>
@@ -289,50 +312,50 @@ function onSelect(e, item) {
     </ULink>
   </DefineItemTemplate>
 
-  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="selectionBehavior" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <ListboxFilter v-if="input" v-model="searchTerm" as-child>
+  <ListboxRoot v-bind="{ ...rootProps, ...$attrs }" ref="rootRef" :selection-behavior="props.selectionBehavior" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <ListboxFilter v-if="props.input" v-model="searchTerm" as-child>
       <UInput
         variant="none"
-        :size="size"
+        :size="props.size"
         v-bind="typeof props.input === 'object' ? props.input : {}"
         :placeholder="placeholder"
-        :autofocus="autofocus"
-        :loading="loading"
-        :loading-icon="loadingIcon"
-        :trailing-icon="trailingIcon"
-        :icon="icon || appConfig.ui.icons.search"
+        :autofocus="props.autofocus"
+        :loading="props.loading"
+        :loading-icon="props.loadingIcon"
+        :trailing-icon="props.trailingIcon"
+        :icon="props.icon || appConfig.ui.icons.search"
         data-slot="input"
-        :class="ui.input({ class: uiProp?.input })"
+        :class="ui.input({ class: props.ui?.input })"
         @keydown.backspace="onBackspace"
       >
-        <template v-if="history?.length && (back || !!slots.back)" #leading>
+        <template v-if="history?.length && (props.back || !!slots.back)" #leading>
           <slot name="back" :ui="ui">
             <UButton
-              :size="size"
-              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              :size="props.size"
+              :icon="props.backIcon || appConfig.ui.icons.arrowLeft"
               color="neutral"
               variant="link"
               :aria-label="t('commandPalette.back')"
-              v-bind="typeof back === 'object' ? back : {}"
+              v-bind="typeof props.back === 'object' ? props.back : {}"
               data-slot="back"
-              :class="ui.back({ class: uiProp?.back })"
+              :class="ui.back({ class: props.ui?.back })"
               @click="navigateBack"
             />
           </slot>
         </template>
 
-        <template v-if="close || !!slots.close" #trailing>
+        <template v-if="props.close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
-              v-if="close"
-              :size="size"
-              :icon="closeIcon || appConfig.ui.icons.close"
+              v-if="props.close"
+              :size="props.size"
+              :icon="props.closeIcon || appConfig.ui.icons.close"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
-              v-bind="typeof close === 'object' ? close : {}"
+              v-bind="typeof props.close === 'object' ? props.close : {}"
               data-slot="close"
-              :class="ui.close({ class: uiProp?.close })"
+              :class="ui.close({ class: props.ui?.close })"
               @click="emits('update:open', false)"
             />
           </slot>
@@ -340,10 +363,10 @@ function onSelect(e, item) {
       </UInput>
     </ListboxFilter>
 
-    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div v-if="filteredGroups?.length" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+    <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-if="!!props.virtualize"
           v-slot="{ option: item, virtualItem }"
           :options="filteredItems"
           :text-content="(item2) => get(item2, props.labelKey)"
@@ -353,8 +376,8 @@ function onSelect(e, item) {
         </ListboxVirtualizer>
 
         <template v-else>
-          <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey) || !!slots[group.slot ? `${group.slot}-group-label` : 'group-label']" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+          <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) || !!slots[group.slot ? `${group.slot}-group-label` : 'group-label']" data-slot="label" :class="ui.label({ class: props.ui?.label })">
               <slot :name="group.slot ? `${group.slot}-group-label` : 'group-label'" :group="group" :label="get(group, props.labelKey)" :ui="ui">
                 {{ get(group, props.labelKey) }}
               </slot>
@@ -371,14 +394,14 @@ function onSelect(e, item) {
         </template>
       </div>
 
-      <div v-else data-slot="empty" :class="ui.empty({ class: uiProp?.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" data-slot="footer" :class="ui.footer({ class: uiProp?.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

@@ -134,7 +134,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
         fuseOptions: {
           ignoreLocation: true,
           threshold: 0.1,
-          keys: ['label', 'suffix']
+          keys: ['label', 'description', 'suffix']
         },
         resultLimit: 12,
         matchAllWhenSearchEmpty: true
@@ -230,12 +230,12 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
             value: T;
         } | undefined) => any) | undefined;
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
         onLeave?: ((event: Event) => any) | undefined;
@@ -245,10 +245,10 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<T, G>;
-    emit: (((evt: "highlight", payload: {
+    emit: (((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void)) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Container.vue

@@ -7,20 +7,20 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
-const props = defineProps({
+import { useComponentProps } from "../composables/useComponentProps";
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
 defineSlots();
+const props = useComponentProps("container", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("container", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.container || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

package/dist/runtime/components/ContextMenu.vue

@@ -4,14 +4,15 @@ import theme from "#build/ui/context-menu";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { ContextMenuRoot, ContextMenuTrigger, useForwardPropsEmits } from "reka-ui";
+import { ContextMenuRoot, ContextMenuTrigger } from "reka-ui";
+import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UContextMenuContent from "./ContextMenuContent.vue";
-const props = defineProps({
+const _props = defineProps({
   size: { type: null, required: false },
   items: { type: null, required: false },
   checkedIcon: { type: null, required: false },
@@ -29,9 +30,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const props = useComponentProps("contextMenu", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("contextMenu", props);
-const rootProps = useForwardPropsEmits(reactivePick(props, "modal"), emits);
+const rootProps = useForwardProps(reactivePick(props, "modal"), emits);
 const contentProps = toRef(() => props.content);
 const getProxySlots = () => omit(slots, ["default"]);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu || {} })({
@@ -41,22 +42,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contextMenu |
 
 <template>
   <ContextMenuRoot v-bind="rootProps">
-    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="disabled" :class="props.class">
+    <ContextMenuTrigger v-if="!!slots.default" as-child :disabled="props.disabled" :class="props.class">
       <slot />
     </ContextMenuTrigger>
 
     <UContextMenuContent
-      :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+      :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
       :ui="ui"
-      :ui-override="uiProp"
+      :ui-override="props.ui"
       v-bind="contentProps"
-      :items="items"
-      :portal="portal"
-      :label-key="labelKey"
-      :description-key="descriptionKey"
-      :checked-icon="checkedIcon"
-      :loading-icon="loadingIcon"
-      :external-icon="externalIcon"
+      :items="props.items"
+      :portal="props.portal"
+      :label-key="props.labelKey"
+      :description-key="props.descriptionKey"
+      :checked-icon="props.checkedIcon"
+      :loading-icon="props.loadingIcon"
+      :external-icon="props.externalIcon"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { UseResizableProps } from '../composables/useResizable';
-export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'storageOptions' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

package/dist/runtime/components/DashboardGroup.vue

@@ -8,26 +8,28 @@ import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
-import { useComponentUI } from "../composables/useComponentUI";
-const props = defineProps({
+import { useComponentProps } from "../composables/useComponentProps";
+const _props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
   storageKey: { type: String, required: false, default: "dashboard" },
+  storageOptions: { type: Object, required: false },
   persistent: { type: Boolean, required: false, default: true },
   unit: { type: String, required: false, default: "%" }
 });
 defineSlots();
+const props = useComponentProps("dashboardGroup", _props);
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardGroup", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
 const sidebarCollapsed = ref(false);
 provideDashboardContext({
   storage: props.storage,
   storageKey: props.storageKey,
+  storageOptions: props.storageOptions,
   persistent: props.persistent,
   unit: props.unit,
   sidebarOpen,
@@ -45,7 +47,7 @@ provideDashboardContext({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui({ class: [uiProp?.base, props.class] })">
+  <Primitive :as="props.as" :class="ui({ class: [props.ui?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { UseResizableProps } from '../composables/useResizable';
-export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'storageOptions' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

package/dist/runtime/components/DashboardNavbar.vue

@@ -7,13 +7,13 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useDashboard } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 import UDashboardSidebarToggle from "./DashboardSidebarToggle.vue";
 import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false },
   icon: { type: null, required: false },
   title: { type: String, required: false },
@@ -23,8 +23,8 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("dashboardNavbar", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("dashboardNavbar", props);
 const dashboardContext = useDashboard({});
 const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavbar || {} })());
@@ -34,27 +34,27 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
   <DefineToggleTemplate>
     <slot name="toggle" v-bind="{ ...dashboardContext, ui }">
       <UDashboardSidebarToggle
-        v-if="toggle"
-        v-bind="typeof toggle === 'object' ? toggle : {}"
-        :side="toggleSide"
+        v-if="props.toggle"
+        v-bind="typeof props.toggle === 'object' ? props.toggle : {}"
+        :side="props.toggleSide"
         data-slot="toggle"
-        :class="ui.toggle({ class: uiProp?.toggle, toggleSide })"
+        :class="ui.toggle({ class: props.ui?.toggle, toggleSide: props.toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div data-slot="left" :class="ui.left({ class: uiProp?.left })">
-      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+  <Primitive :as="props.as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
+      <ReuseToggleTemplate v-if="props.toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 data-slot="title" :class="ui.title({ class: uiProp?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
-            {{ title }}
+            {{ props.title }}
           </slot>
         </h1>
 
@@ -62,14 +62,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
       </slot>
     </div>
 
-    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: uiProp?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div data-slot="right" :class="ui.right({ class: uiProp?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
-      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+      <ReuseToggleTemplate v-if="props.toggleSide === 'right'" />
     </div>
   </Primitive>
 </template>