@nuxt/ui 4.6.1 → 4.7.1

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

@@ -225,7 +225,6 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectMenuProps<T, VK, M, Mod, C> & {
         searchTerm?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
@@ -253,6 +252,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
                 nullable: true;
             } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
         } | undefined) => any) | undefined;
+        onClear?: (() => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: (Mod extends {
@@ -286,7 +286,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, Mod, C, NestedItem<T>>;
-    emit: (((evt: "clear") => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: (Mod extends {
             number: true;
@@ -309,7 +309,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
             nullable: true;
         } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | IsClearUsed<M, C>;
-    } | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
+    } | undefined) => void) & ((evt: "clear") => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: (Mod extends {
         number: true;
     } ? (Mod extends {
         optional: true;

package/dist/runtime/components/Sidebar.vue

@@ -94,10 +94,7 @@ const menuProps = toRef(() => defu(props.menu, {
   title: props.title,
   description: props.description,
   close: props.close,
-  closeIcon: props.closeIcon,
-  content: {
-    onOpenAutoFocus: (e) => e.preventDefault()
-  }
+  closeIcon: props.closeIcon
 }, props.mode === "modal" ? {} : props.mode === "slideover" ? { side: props.side, inset: props.variant === "inset" } : {}));
 </script>
 

package/dist/runtime/components/Slideover.vue

@@ -8,6 +8,7 @@ import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
@@ -68,78 +69,80 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
-      <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
+      <FieldGroupReset>
+        <DialogOverlay v-if="overlay" data-slot="overlay" :class="ui.overlay({ class: uiProp?.overlay })" />
 
-      <DialogContent
-        :data-side="side"
-        data-slot="content"
-        :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
-        v-bind="contentProps"
-        @after-enter="emits('after:enter')"
-        @after-leave="emits('after:leave')"
-        v-on="contentEvents"
-      >
-        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
-          <DialogTitle v-if="!title && !slots.title" />
-          <DialogTitle v-else-if="!!slots.content">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </DialogTitle>
+        <DialogContent
+          :data-side="side"
+          data-slot="content"
+          :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
+          v-bind="contentProps"
+          @after-enter="emits('after:enter')"
+          @after-leave="emits('after:leave')"
+          v-on="contentEvents"
+        >
+          <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+            <DialogTitle v-if="!title && !slots.title" />
+            <DialogTitle v-else-if="!!slots.content">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </DialogTitle>
 
-          <DialogDescription v-if="!description && !slots.description" />
-          <DialogDescription v-else-if="!!slots.content">
-            <slot name="description">
-              {{ description }}
-            </slot>
-          </DialogDescription>
-        </VisuallyHidden>
+            <DialogDescription v-if="!description && !slots.description" />
+            <DialogDescription v-else-if="!!slots.content">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </DialogDescription>
+          </VisuallyHidden>
 
-        <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
-            <slot name="header" :close="close">
-              <div data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DialogTitle>
+          <slot name="content" :close="close">
+            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+              <slot name="header" :close="close">
+                <div v-if="title || !!slots.title || description || !!slots.description" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
+                  <DialogTitle v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+                  </DialogTitle>
 
-                <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DialogDescription>
-              </div>
+                  <DialogDescription v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+                    <slot name="description">
+                      {{ description }}
+                    </slot>
+                  </DialogDescription>
+                </div>
 
-              <slot name="actions" />
+                <slot name="actions" />
 
-              <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :ui="ui">
-                  <UButton
-                    v-if="props.close"
-                    :icon="closeIcon || appConfig.ui.icons.close"
-                    color="neutral"
-                    variant="ghost"
-                    :aria-label="t('slideover.close')"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    data-slot="close"
-                    :class="ui.close({ class: uiProp?.close })"
-                  />
-                </slot>
-              </DialogClose>
-            </slot>
-          </div>
+                <DialogClose v-if="props.close || !!slots.close" as-child>
+                  <slot name="close" :ui="ui">
+                    <UButton
+                      v-if="props.close"
+                      :icon="closeIcon || appConfig.ui.icons.close"
+                      color="neutral"
+                      variant="ghost"
+                      :aria-label="t('slideover.close')"
+                      v-bind="typeof props.close === 'object' ? props.close : {}"
+                      data-slot="close"
+                      :class="ui.close({ class: uiProp?.close })"
+                    />
+                  </slot>
+                </DialogClose>
+              </slot>
+            </div>
 
-          <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
-            <slot name="body" :close="close" />
-          </div>
+            <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+              <slot name="body" :close="close" />
+            </div>
 
-          <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
-            <slot name="footer" :close="close" />
-          </div>
-        </slot>
-      </DialogContent>
+            <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+              <slot name="footer" :close="close" />
+            </div>
+          </slot>
+        </DialogContent>
+      </FieldGroupReset>
     </DialogPortal>
   </DialogRoot>
 </template>

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

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
+     * Note: row pinning is not supported when virtualization is enabled.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
@@ -75,7 +75,6 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
-     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';

package/dist/runtime/components/Table.vue

@@ -90,11 +90,10 @@ function processColumns(columns2) {
   });
 }
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
-  sticky: props.virtualize ? false : props.sticky,
+  sticky: props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
-  loadingAnimation: props.loadingAnimation,
-  virtualize: !!props.virtualize
+  loadingAnimation: props.loadingAnimation
 }));
 const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
 const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
@@ -238,15 +237,11 @@ const virtualizer = !!props.virtualize && useVirtualizer({
     return typeof estimate === "function" ? estimate(index) : estimate;
   }
 });
-const renderedSize = computed(() => {
-  if (!virtualizer) {
-    return 0;
-  }
-  const virtualItems = virtualizer.value.getVirtualItems();
-  if (!virtualItems?.length) {
-    return 0;
-  }
-  return virtualItems.reduce((sum, item) => sum + item.size, 0);
+const virtualItems = computed(() => virtualizer ? virtualizer.value.getVirtualItems() : []);
+const virtualPaddingTop = computed(() => virtualItems.value[0]?.start ?? 0);
+const virtualPaddingBottom = computed(() => {
+  if (!virtualizer || !virtualItems.value.length) return 0;
+  return virtualizer.value.getTotalSize() - (virtualItems.value[virtualItems.value.length - 1]?.end ?? 0);
 });
 function valueUpdater(updaterOrValue, ref) {
   ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
@@ -408,15 +403,19 @@ defineExpose({
           <ReuseRowTemplate v-for="row in topRows" :key="row.id" :row="row" />
 
           <template v-if="virtualizer">
-            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="centerRows[virtualRow.index]?.id">
+            <tr v-if="virtualPaddingTop > 0" :style="{ height: `${virtualPaddingTop}px` }" aria-hidden="true">
+              <td :colspan="tableApi.getAllLeafColumns().length" />
+            </tr>
+            <template v-for="virtualRow in virtualItems" :key="centerRows[virtualRow.index]?.id ?? `virtual-${virtualRow.index}`">
               <ReuseRowTemplate
+                v-if="centerRows[virtualRow.index]"
                 :row="centerRows[virtualRow.index]"
-                :style="{
-  height: `${virtualRow.size}px`,
-  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
-}"
+                :style="{ height: `${virtualRow.size}px` }"
               />
             </template>
+            <tr v-if="virtualPaddingBottom > 0" :style="{ height: `${virtualPaddingBottom}px` }" aria-hidden="true">
+              <td :colspan="tableApi.getAllLeafColumns().length" />
+            </tr>
           </template>
 
           <template v-else>
@@ -447,9 +446,6 @@ defineExpose({
         v-if="hasFooter"
         data-slot="tfoot"
         :class="ui.tfoot({ class: [uiProp?.tfoot] })"
-        :style="virtualizer ? {
-  transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
-} : void 0"
       >
         <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
 
@@ -483,14 +479,6 @@ defineExpose({
   </DefineTableTemplate>
 
   <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div
-      v-if="virtualizer"
-      :style="{
-  height: `${virtualizer.getTotalSize()}px`
-}"
-    >
-      <ReuseTableTemplate />
-    </div>
-    <ReuseTableTemplate v-else />
+    <ReuseTableTemplate />
   </Primitive>
 </template>

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

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
+     * Note: row pinning is not supported when virtualization is enabled.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
@@ -75,7 +75,6 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
-     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';

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

@@ -20,7 +20,11 @@ export interface TabsItem {
     badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
-    /** A unique value for the tab item. Defaults to the index. */
+    /**
+     * A unique value for the tab item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents tab
+     * content (and its local state) from remounting when items are added, removed, or reordered.
+     */
     value?: string | number;
     disabled?: boolean;
     class?: any;

package/dist/runtime/components/Tabs.vue

@@ -67,7 +67,7 @@ defineExpose({
 
       <TabsTrigger
         v-for="(item, index) of items"
-        :key="index"
+        :key="get(item, props.valueKey) ?? index"
         :ref="(el) => setTriggerRef(index, el)"
         :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
@@ -100,7 +100,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="get(item, props.valueKey) ?? index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>

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

@@ -20,7 +20,11 @@ export interface TabsItem {
     badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
-    /** A unique value for the tab item. Defaults to the index. */
+    /**
+     * A unique value for the tab item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents tab
+     * content (and its local state) from remounting when items are added, removed, or reordered.
+     */
     value?: string | number;
     disabled?: boolean;
     class?: any;

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

@@ -95,6 +95,7 @@ declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+        autoResize: () => void;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;

package/dist/runtime/components/Textarea.vue

@@ -138,7 +138,8 @@ onMounted(() => {
   }, props.autoresizeDelay);
 });
 defineExpose({
-  textareaRef
+  textareaRef,
+  autoResize
 });
 </script>
 

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

@@ -95,6 +95,7 @@ declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+        autoResize: () => void;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;

package/dist/runtime/components/Tooltip.vue

@@ -9,6 +9,7 @@ import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArro
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import UKbd from "./Kbd.vue";
@@ -50,17 +51,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
-        <slot name="content" :ui="ui">
-          <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
+      <FieldGroupReset>
+        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
+          <slot name="content" :ui="ui">
+            <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
-            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-          </span>
-        </slot>
+            <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
+              <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            </span>
+          </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </TooltipContent>
+          <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </TooltipContent>
+      </FieldGroupReset>
     </TooltipPortal>
   </TooltipRoot>
 </template>

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -29,35 +29,11 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
      */
     icon?: IconProps['name'];
 }
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups'> {
     /**
      * @defaultValue 'md'
      */
     size?: ContentSearch['variants']['size'];
-    /**
-     * The icon displayed in the input.
-     * @defaultValue appConfig.ui.icons.search
-     * @IconifyIcon
-     */
-    icon?: IconProps['name'];
-    /**
-     * The placeholder text for the input.
-     * @defaultValue t('commandPalette.placeholder')
-     */
-    placeholder?: InputProps['placeholder'];
-    /**
-     * Automatically focus the input when component is mounted.
-     * @defaultValue true
-     */
-    autofocus?: boolean;
-    /** When `true`, the loading icon will be displayed. */
-    loading?: boolean;
-    /**
-     * The icon when the `loading` prop is `true`.
-     * @defaultValue appConfig.ui.icons.loading
-     * @IconifyIcon
-     */
-    loadingIcon?: IconProps['name'];
     /**
      * Display a close button in the input (useful when inside a Modal for example).
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -65,12 +41,6 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue appConfig.ui.icons.close
-     * @IconifyIcon
-     */
-    closeIcon?: IconProps['name'];
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'
@@ -79,14 +49,28 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     /** Links group displayed as the first group in the command palette. */
     links?: T[];
     navigation?: ContentNavigationItem[];
-    /** Custom groups displayed between navigation and color mode group. */
-    groups?: CommandPaletteGroup<ContentSearchItem>[];
     files?: ContentSearchFile[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
-     * @defaultValue { fuseOptions: { includeMatches: true } }
+     * @defaultValue {
+        fuseOptions: {
+          ignoreLocation: true,
+          includeMatches: true,
+          threshold: 0.1,
+          keys: ['label', 'suffix']
+        },
+        resultLimit: 12,
+        matchAllWhenSearchEmpty: true
+      }
      */
     fuse?: UseFuseOptions<T>;
+    /**
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful for large doc sets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Set to `0` to disable.
+     * @defaultValue 100
+     */
+    searchDelay?: number;
     /**
      * When `true`, the theme command will be added to the groups.
      * @defaultValue true

package/dist/runtime/components/content/ContentSearch.vue

@@ -17,19 +17,13 @@ import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
 const props = defineProps({
   size: { type: null, required: false },
-  icon: { type: null, required: false },
-  placeholder: { type: String, required: false },
-  autofocus: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  loadingIcon: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: null, required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },
-  groups: { type: Array, required: false },
   files: { type: Array, required: false },
   fuse: { type: Object, required: false },
+  searchDelay: { type: Number, required: false, default: 100 },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -41,7 +35,14 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false },
   fullscreen: { type: Boolean, required: false, default: false },
   modal: { type: Boolean, required: false },
-  portal: { type: [Boolean, String], required: false, skipCheck: true }
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
+  icon: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  closeIcon: { type: null, required: false },
+  groups: { type: Array, required: false }
 });
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
@@ -50,7 +51,7 @@ const { open, mapNavigationItems, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("contentSearch", props);
-const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {