@nuxt/ui 4.5.1 → 4.6.0

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

@@ -1,4 +1,4 @@
-import type { CheckboxRootProps } from 'reka-ui';
+import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
@@ -6,7 +6,7 @@ import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue' | 'modelValue' | 'trueValue' | 'falseValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -46,9 +46,9 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
     class?: any;
     ui?: Checkbox['slots'];
 }
-export type CheckboxEmits = {
+export interface CheckboxEmits<T = boolean> extends CheckboxRootEmits<T> {
     change: [event: Event];
-};
+}
 export interface CheckboxSlots {
     label?(props: {
         label: string | undefined;
@@ -59,19 +59,22 @@ export interface CheckboxSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event) => any;
-    "update:modelValue": (value: boolean | "indeterminate") => any;
-}, string, import("vue").PublicProps, Readonly<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}> & Readonly<{
-    onChange?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CheckboxProps<T> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: "indeterminate" | T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: CheckboxSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Checkbox.vue

@@ -4,7 +4,7 @@ import theme from "#build/ui/checkbox";
 
 <script setup>
 import { computed, useAttrs, useId } from "vue";
-import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from "reka-ui";
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
@@ -29,14 +29,16 @@ const props = defineProps({
   name: { type: String, required: false },
   value: { type: null, required: false },
   id: { type: String, required: false },
-  defaultValue: { type: [Boolean, String], required: false }
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  trueValue: { type: null, required: false },
+  falseValue: { type: null, required: false }
 });
 const slots = defineSlots();
-const emits = defineEmits(["change"]);
-const modelValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
+const emits = defineEmits(["change", "update:modelValue"]);
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("checkbox", props);
-const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const rootProps = useForwardPropsEmits(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
 const attrs = useAttrs();
@@ -66,16 +68,15 @@ function onUpdate(value) {
       <CheckboxRoot
         :id="id"
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
-        v-model="modelValue"
         :name="name"
         :disabled="disabled"
         data-slot="base"
         :class="ui.base({ class: uiProp?.base })"
         @update:model-value="onUpdate"
       >
-        <template #default="{ modelValue }">
+        <template #default="{ state }">
           <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
-            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
+            <UIcon v-if="state === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
             <UIcon v-else :name="icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: uiProp?.icon })" />
           </CheckboxIndicator>
         </template>

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

@@ -1,4 +1,4 @@
-import type { CheckboxRootProps } from 'reka-ui';
+import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
@@ -6,7 +6,7 @@ import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue' | 'modelValue' | 'trueValue' | 'falseValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -46,9 +46,9 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
     class?: any;
     ui?: Checkbox['slots'];
 }
-export type CheckboxEmits = {
+export interface CheckboxEmits<T = boolean> extends CheckboxRootEmits<T> {
     change: [event: Event];
-};
+}
 export interface CheckboxSlots {
     label?(props: {
         label: string | undefined;
@@ -59,19 +59,22 @@ export interface CheckboxSlots {
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event) => any;
-    "update:modelValue": (value: boolean | "indeterminate") => any;
-}, string, import("vue").PublicProps, Readonly<CheckboxProps & {
-    modelValue?: boolean | "indeterminate";
-}> & Readonly<{
-    onChange?: ((event: Event) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CheckboxProps<T> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: "indeterminate" | T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: CheckboxSlots;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -18,9 +18,9 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
+    unit: "%" | "rem" | "px";
     storageKey: string;
     persistent: boolean;
-    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -18,9 +18,9 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
+    unit: "%" | "rem" | "px";
     storageKey: string;
     persistent: boolean;
-    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DashboardSearchButton.vue

@@ -85,13 +85,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardSear
       </template>
 
       <template #trailing="{ ui: uiProxy }">
-        <div data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
+        <span data-slot="trailing" :class="ui.trailing({ class: uiProp?.trailing })">
           <slot name="trailing" :ui="uiProxy">
             <template v-if="kbds?.length">
               <UKbd v-for="(kbd, index) in kbds" :key="index" variant="subtle" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
             </template>
           </slot>
-        </div>
+        </span>
       </template>
     </UButton>
   </DefineButtonTemplate>

package/dist/runtime/components/Drawer.vue

@@ -49,7 +49,7 @@ const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => props.content);
 const contentEvents = computed(() => {
   if (!props.dismissible) {
-    const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
+    const events = ["interactOutside", "escapeKeyDown"];
     return events.reduce((acc, curr) => {
       acc[curr] = (e) => {
         e.preventDefault();

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

@@ -2,7 +2,7 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dropdown-menu';
-import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps, IconProps, InputProps, KbdProps, LinkProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -30,6 +30,9 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     checked?: boolean;
     open?: boolean;
     defaultOpen?: boolean;
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    filterFields?: string[];
+    ignoreFilter?: boolean;
     children?: ArrayOrNested<DropdownMenuItem>;
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
@@ -88,6 +91,23 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue 'description'
      */
     descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether to display a filter input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    /**
+     * The fields to filter by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, items will not be filtered which is useful for custom filtering.
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
     disabled?: boolean;
     class?: any;
     ui?: DropdownMenu['slots'];
@@ -117,6 +137,9 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
         index: number;
     }) => VNode[];
     'item-trailing'?: SlotProps<T>;
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
     'content-top'?: (props: {
         sub: boolean;
     }) => VNode[];
@@ -134,15 +157,18 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DropdownMenuProps<T> & {
+        searchTerm?: string;
+    }) & {
         "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:open", payload: boolean) => void;
+    emit: ((evt: "update:open", payload: boolean) => void) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/DropdownMenu.vue

@@ -23,6 +23,9 @@ const props = defineProps({
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },
   descriptionKey: { type: null, required: false, default: "description" },
+  filter: { type: [Boolean, Object], required: false, default: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -32,6 +35,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
+const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("dropdownMenu", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
@@ -50,6 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent
+      v-model:search-term="searchTerm"
       :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })"
       :ui="ui"
       :ui-override="uiProp"
@@ -61,6 +66,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu
       :checked-icon="checkedIcon"
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
+      :size="size"
+      :filter="filter"
+      :filter-fields="filterFields"
+      :ignore-filter="ignoreFilter"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />

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

@@ -2,7 +2,7 @@ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentP
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dropdown-menu';
-import type { AvatarProps, IconProps, KbdProps, LinkProps } from '../types';
+import type { AvatarProps, IconProps, InputProps, KbdProps, LinkProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -30,6 +30,9 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     checked?: boolean;
     open?: boolean;
     defaultOpen?: boolean;
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    filterFields?: string[];
+    ignoreFilter?: boolean;
     children?: ArrayOrNested<DropdownMenuItem>;
     onSelect?: (e: Event) => void;
     onUpdateChecked?: (checked: boolean) => void;
@@ -88,6 +91,23 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
      * @defaultValue 'description'
      */
     descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether to display a filter input or not.
+     * Can be an object to pass additional props to the input.
+     * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+     * @defaultValue false
+     */
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    /**
+     * The fields to filter by.
+     * @defaultValue [labelKey]
+     */
+    filterFields?: string[];
+    /**
+     * When `true`, items will not be filtered which is useful for custom filtering.
+     * @defaultValue false
+     */
+    ignoreFilter?: boolean;
     disabled?: boolean;
     class?: any;
     ui?: DropdownMenu['slots'];
@@ -117,6 +137,9 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
         index: number;
     }) => VNode[];
     'item-trailing'?: SlotProps<T>;
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
     'content-top'?: (props: {
         sub: boolean;
     }) => VNode[];
@@ -134,15 +157,18 @@ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayO
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuProps<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(DropdownMenuProps<T> & {
+        searchTerm?: string;
+    }) & {
         "onUpdate:open"?: ((payload: boolean) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:open", payload: boolean) => void;
+    emit: ((evt: "update:open", payload: boolean) => void) & ((event: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -3,7 +3,7 @@ import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'r
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type theme from '#build/ui/dropdown-menu';
-import type { DropdownMenuItem, DropdownMenuSlots, IconProps } from '../types';
+import type { DropdownMenuItem, DropdownMenuSlots, IconProps, InputProps } from '../types';
 import type { ArrayOrNested, GetItemKeys, NestedItem, DynamicSlots, MergeTypes } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
@@ -25,11 +25,16 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
      * @IconifyIcon
      */
     externalIcon?: boolean | IconProps['name'];
+    size?: DropdownMenu['variants']['size'];
+    filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>;
+    filterFields?: string[];
+    ignoreFilter?: boolean;
+    searchTerm?: string;
     class?: any;
     ui: DropdownMenu['ui'];
     uiOverride?: DropdownMenu['slots'];
 }
-type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & {
+type DropdownMenuContentSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = Pick<DropdownMenuSlots<A>, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'empty' | 'content-top' | 'content-bottom'> & {
     default?(props?: {}): VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active: boolean;
@@ -44,6 +49,7 @@ export default _default;
 declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<DropdownMenuContentProps<T> & {
         onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+        "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
         onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
         onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
@@ -54,7 +60,7 @@ declare const __VLS_export: <T extends ArrayOrNested<DropdownMenuItem>>(__VLS_pr
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DropdownMenuContentSlots<T, NestedItem<T>>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "update:searchTerm", value: string) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/DropdownMenuContent.vue

@@ -3,11 +3,13 @@
 </script>
 
 <script setup>
-import { computed, toRef } from "vue";
+import { computed, ref, toRef } from "vue";
+import { defu } from "defu";
 import { DropdownMenu } from "reka-ui/namespaced";
 import { useForwardPropsEmits } from "reka-ui";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useFilter } from "../composables/useFilter";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { omit, get, isArrayOfArray } from "../utils";
@@ -16,6 +18,7 @@ import ULinkBase from "./LinkBase.vue";
 import ULink from "./Link.vue";
 import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
+import UInput from "./Input.vue";
 import UKbd from "./Kbd.vue";
 import UDropdownMenuContent from "./DropdownMenuContent.vue";
 const props = defineProps({
@@ -27,6 +30,11 @@ const props = defineProps({
   checkedIcon: { type: null, required: false },
   loadingIcon: { type: null, required: false },
   externalIcon: { type: [Boolean, String], required: false, skipCheck: true },
+  size: { type: null, required: false },
+  filter: { type: [Boolean, Object], required: false },
+  filterFields: { type: Array, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
@@ -50,18 +58,41 @@ const props = defineProps({
   prioritizePosition: { type: Boolean, required: false },
   reference: { type: null, required: false }
 });
-const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
+const emits = defineEmits(["update:searchTerm", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "closeAutoFocus"]);
 const slots = defineSlots();
-const { dir } = useLocale();
+const { t, dir } = useLocale();
 const appConfig = useAppConfig();
+const { filterGroups } = useFilter();
+const _searchTerm = ref("");
+const searchTerm = computed({
+  get: () => props.searchTerm ?? _searchTerm.value,
+  set: (value) => {
+    _searchTerm.value = value;
+    emits("update:searchTerm", value);
+  }
+});
+const inputProps = toRef(() => defu(props.filter, { placeholder: t("dropdownMenu.search"), variant: "none" }));
 const portalProps = usePortal(toRef(() => props.portal));
-const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "loadingIcon", "externalIcon", "class", "ui", "uiOverride"), emits);
+const contentProps = useForwardPropsEmits(reactiveOmit(props, "sub", "items", "portal", "labelKey", "descriptionKey", "checkedIcon", "loadingIcon", "externalIcon", "size", "filter", "filterFields", "ignoreFilter", "searchTerm", "class", "ui", "uiOverride"), emits);
 const getProxySlots = () => omit(slots, ["default"]);
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate();
 const childrenIcon = computed(() => dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight);
-const groups = computed(
-  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
-);
+const groups = computed(() => {
+  if (!props.items?.length) return [];
+  return isArrayOfArray(props.items) ? props.items : [props.items];
+});
+const isStructuralItem = (item) => !!item.type && ["label", "separator"].includes(item.type);
+const filteredGroups = computed(() => {
+  if (!props.filter || props.ignoreFilter || !searchTerm.value) {
+    return groups.value;
+  }
+  const fields = Array.isArray(props.filterFields) && props.filterFields.length ? props.filterFields : [props.labelKey];
+  return filterGroups(groups.value, searchTerm.value, {
+    fields,
+    isStructural: isStructuralItem
+  });
+});
+const hasFilteredItems = computed(() => filteredGroups.value.some((group) => group.some((item) => !isStructuralItem(item))));
 </script>
 
 <template>
@@ -106,10 +137,22 @@ const groups = computed(
 
   <DropdownMenu.Portal v-bind="portalProps">
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+      <DropdownMenu.Filter v-if="!!filter" v-model="searchTerm" as-child>
+        <UInput
+          autofocus
+          autocomplete="off"
+          :size="size"
+          v-bind="inputProps"
+          data-slot="input"
+          :class="ui.input({ class: uiOverride?.input })"
+          @change.stop
+        />
+      </DropdownMenu.Filter>
+
       <slot name="content-top" :sub="sub ?? false" />
 
-      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
+      <div v-if="!searchTerm || hasFilteredItems" role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
             <DropdownMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
@@ -142,6 +185,10 @@ const groups = computed(
                 :checked-icon="checkedIcon"
                 :loading-icon="loadingIcon"
                 :external-icon="externalIcon"
+                :size="size"
+                :filter="item.filter"
+                :filter-fields="item.filterFields || filterFields"
+                :ignore-filter="item.ignoreFilter ?? ignoreFilter"
                 v-bind="item.content"
               >
                 <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -177,6 +224,12 @@ const groups = computed(
         </DropdownMenu.Group>
       </div>
 
+      <div v-if="searchTerm && !hasFilteredItems" data-slot="empty" :class="ui.empty({ class: uiOverride?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ t("dropdownMenu.noMatch", { searchTerm }) }}
+        </slot>
+      </div>
+
       <slot />
 
       <slot name="content-bottom" :sub="sub ?? false" />