@nuxt/ui 4.5.0 → 4.6.0

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-sidebar';
 import type { UseResizableProps } from '../composables/useResizable';
@@ -36,32 +37,32 @@ export interface DashboardSidebarProps<T extends DashboardSidebarMode = Dashboar
     ui?: DashboardSidebar['slots'];
 }
 export interface DashboardSidebarSlots {
-    'header'(props: {
-        collapsed?: boolean;
-        collapse?: (value: boolean) => void;
-    }): any;
-    'default'(props: {
-        collapsed?: boolean;
-        collapse?: (value: boolean) => void;
-    }): any;
-    'footer'(props: {
-        collapsed?: boolean;
-        collapse?: (value: boolean) => void;
-    }): any;
-    'toggle'(props: {
+    'header'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'default'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'footer'?(props: {
+        collapsed: boolean;
+        collapse: (value: boolean) => void;
+    }): VNode[];
+    'toggle'?(props: {
         open: boolean;
         toggle: () => void;
         ui: DashboardSidebar['ui'];
-    }): any;
-    'content'(props: {
+    }): VNode[];
+    'content'?(props: {
         close?: () => void;
-    }): any;
-    'resize-handle'(props: {
+    }): VNode[];
+    'resize-handle'?(props: {
         onMouseDown: (e: MouseEvent) => void;
         onTouchStart: (e: TouchEvent) => void;
         onDoubleClick: (e: MouseEvent) => void;
         ui: DashboardSidebar['ui'];
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-toolbar';
 import type { ComponentConfig } from '../types/tv';
@@ -12,9 +13,9 @@ export interface DashboardToolbarProps {
     ui?: DashboardToolbar['slots'];
 }
 export interface DashboardToolbarSlots {
-    default(props?: {}): any;
-    left(props?: {}): any;
-    right(props?: {}): any;
+    default?(props?: {}): VNode[];
+    left?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-toolbar';
 import type { ComponentConfig } from '../types/tv';
@@ -12,9 +13,9 @@ export interface DashboardToolbarProps {
     ui?: DashboardToolbar['slots'];
 }
 export interface DashboardToolbarSlots {
-    default(props?: {}): any;
-    left(props?: {}): any;
-    right(props?: {}): any;
+    default?(props?: {}): VNode[];
+    left?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
 import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
@@ -47,13 +48,13 @@ export interface DrawerEmits extends DrawerRootEmits {
     (e: 'close:prevent'): void;
 }
 export interface DrawerSlots {
-    default(props?: {}): any;
-    content(props?: {}): any;
-    header(props?: {}): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    body(props?: {}): any;
-    footer(props?: {}): any;
+    default?(props?: {}): VNode[];
+    content?(props?: {}): VNode[];
+    header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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/Drawer.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
 import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
@@ -47,13 +48,13 @@ export interface DrawerEmits extends DrawerRootEmits {
     (e: 'close:prevent'): void;
 }
 export interface DrawerSlots {
-    default(props?: {}): any;
-    content(props?: {}): any;
-    header(props?: {}): any;
-    title(props?: {}): any;
-    description(props?: {}): any;
-    body(props?: {}): any;
-    footer(props?: {}): any;
+    default?(props?: {}): VNode[];
+    content?(props?: {}): VNode[];
+    header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    footer?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,7 +1,8 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
+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'>;
@@ -29,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;
@@ -68,6 +72,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
     content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
     /**
      * Display an arrow alongside the menu.
+     * `{ rounded: true }`{lang="ts-type"}
      * @defaultValue false
      */
     arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>;
@@ -86,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'];
@@ -94,53 +116,59 @@ export interface DropdownMenuEmits extends DropdownMenuRootEmits {
 }
 type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: DropdownMenu['ui'];
-}) => any;
+}) => VNode[];
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props: {
+    'default'?(props: {
         open: boolean;
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: DropdownMenu['ui'];
 }>;
 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,11 +35,12 @@ 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);
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
-const arrowProps = toRef(() => props.arrow);
+const arrowProps = toRef(() => defu(props.arrow, { rounded: true }));
 const getProxySlots = () => omit(slots, ["default"]);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} })({
   size: props.size
@@ -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

@@ -1,7 +1,8 @@
 import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
+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'>;
@@ -29,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;
@@ -68,6 +72,7 @@ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = A
     content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
     /**
      * Display an arrow alongside the menu.
+     * `{ rounded: true }`{lang="ts-type"}
      * @defaultValue false
      */
     arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>;
@@ -86,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'];
@@ -94,53 +116,59 @@ export interface DropdownMenuEmits extends DropdownMenuRootEmits {
 }
 type SlotProps<T extends DropdownMenuItem> = (props: {
     item: T;
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: DropdownMenu['ui'];
-}) => any;
+}) => VNode[];
 export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
-    'default'(props: {
+    'default'?(props: {
         open: boolean;
-    }): any;
-    'item': SlotProps<T>;
-    'item-leading': SlotProps<T>;
-    'item-label': (props: {
+    }): VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-description': (props: {
+    }) => VNode[];
+    'item-description'?: (props: {
         item: T;
-        active?: boolean;
+        active: boolean;
         index: number;
-    }) => any;
-    'item-trailing': SlotProps<T>;
-    'content-top': (props: {
+    }) => VNode[];
+    'item-trailing'?: SlotProps<T>;
+    'empty'?(props: {
+        searchTerm: string;
+    }): VNode[];
+    'content-top'?: (props: {
         sub: boolean;
-    }) => any;
-    'content-bottom': (props: {
+    }) => VNode[];
+    'content-bottom'?: (props: {
         sub: boolean;
-    }) => any;
+    }) => VNode[];
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
-    active?: boolean;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: DropdownMenu['ui'];
 }>;
 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

@@ -1,8 +1,9 @@
 import { DropdownMenu } from 'reka-ui/namespaced';
 import type { DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui';
+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'>;
@@ -24,17 +25,22 @@ 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'> & {
-    default(props?: {}): any;
+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;
+    active: boolean;
     index: number;
 }> & DynamicSlots<MergeTypes<T>, 'leading' | 'trailing', {
-    active?: boolean;
+    active: boolean;
     index: number;
     ui: DropdownMenu['ui'];
 }>;
@@ -43,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;
@@ -53,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" />