@eslamdevui/ui 3.3.3 → 4.0.0-beta

package/dist/runtime/components/InputMenu.vue

@@ -9,12 +9,12 @@ import { defu } from "defu";
 import { isEqual } from "ohash/utils";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
-import { compare, get, isArrayOfArray } from "../utils";
+import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UAvatar from "./Avatar.vue";
@@ -31,9 +31,9 @@ const props = defineProps({
   required: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
-  trailingIcon: { type: String, required: false },
-  selectedIcon: { type: String, required: false },
-  deleteIcon: { type: String, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
+  deleteIcon: { type: [String, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
@@ -56,13 +56,15 @@ const props = defineProps({
   resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
   resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
   highlightOnHover: { type: Boolean, required: false },
-  icon: { type: String, required: false },
+  openOnClick: { type: Boolean, required: false },
+  openOnFocus: { type: Boolean, required: false },
+  icon: { type: [String, Object], required: false },
   avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false }
+  loadingIcon: { type: [String, Object], required: false }
 });
 const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "remove-tag", "update:modelValue"]);
 const slots = defineSlots();
@@ -70,14 +72,14 @@ const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" }
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const { contains } = useFilter({ sensitivity: "base" });
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "ignoreFilter"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "open", "defaultOpen", "required", "multiple", "resetSearchTermOnBlur", "resetSearchTermOnSelect", "highlightOnHover", "openOnClick", "openOnFocus"), emits);
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
-const { orientation, size: buttonGroupSize } = useButtonGroup(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })));
-const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value);
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value);
 const [DefineCreateItemTemplate, ReuseCreateItemTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu || {} })({
   color: color.value,
@@ -88,16 +90,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   multiple: props.multiple,
-  buttonGroup: orientation.value
+  fieldGroup: orientation.value
 }));
+const items = computed(() => groups.value.flatMap((group) => group));
 function displayValue(value) {
-  const item = items.value.find((item2) => compare(typeof item2 === "object" && props.valueKey ? get(item2, props.valueKey) : item2, value));
-  return item && (typeof item === "object" ? get(item, props.labelKey) : item);
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  }) ?? "";
 }
 const groups = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
 );
-const items = computed(() => groups.value.flatMap((group) => group));
 const filteredGroups = computed(() => {
   if (props.ignoreFilter || !searchTerm.value) {
     return groups.value;
@@ -231,7 +235,6 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <ComboboxRoot
-    :id="id"
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
     :name="name"
@@ -256,10 +259,10 @@ defineExpose({
         @focus="onFocus"
         @remove-tag="onRemoveTag"
       >
-        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
+        <TagsInputItem v-for="(item, index) in tags" :key="index" :value="isInputItem(item) ? item : String(item)" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">
           <TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">
             <slot name="tags-item-text" :item="item" :index="index">
-              {{ displayValue(item) ?? item }}
+              {{ displayValue(item) }}
             </slot>
           </TagsInputItemText>
 
@@ -272,6 +275,7 @@ defineExpose({
 
         <ComboboxInput v-model="searchTerm" as-child>
           <TagsInputInput
+            :id="id"
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
@@ -283,6 +287,7 @@ defineExpose({
 
       <ComboboxInput
         v-else
+        :id="id"
         ref="inputRef"
         :display-value="displayValue"
         v-bind="{ ...$attrs, ...ariaAttrs }"
@@ -309,7 +314,7 @@ defineExpose({
     </ComboboxAnchor>
 
     <ComboboxPortal v-bind="portalProps">
-      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps">
+      <ComboboxContent :class="ui.content({ class: props.ui?.content })" v-bind="contentProps" @focus-outside.prevent>
         <slot name="content-top" />
 
         <ComboboxEmpty :class="ui.empty({ class: props.ui?.empty })">

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

@@ -4,15 +4,17 @@ import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, Combob
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/input-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ChipProps } from '../types';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
+import type { AvatarProps, ChipProps, IconProps } from '../types';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
 type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>;
-interface _InputMenuItem {
+export type InputMenuValue = AcceptableValue;
+export type InputMenuItem = InputMenuValue | {
     label?: string;
     /**
      * @IconifyIcon
      */
-    icon?: string;
+    icon?: IconProps['name'];
     avatar?: AvatarProps;
     chip?: ChipProps;
     /**
@@ -25,9 +27,8 @@ interface _InputMenuItem {
     class?: any;
     ui?: Pick<InputMenu['slots'], 'tagsItem' | 'tagsItemText' | 'tagsItemDelete' | 'tagsItemDeleteIcon' | 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
-}
-export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean;
-export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
+};
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -57,20 +58,20 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * @defaultValue appConfig.ui.icons.chevronDown
      * @IconifyIcon
      */
-    trailingIcon?: string;
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
-    selectedIcon?: string;
+    selectedIcon?: IconProps['name'];
     /**
      * The icon displayed to delete a tag.
      * Works only when `multiple` is `true`.
      * @defaultValue appConfig.ui.icons.close
      * @IconifyIcon
      */
-    deleteIcon?: string;
+    deleteIcon?: IconProps['name'];
     /**
      * The content of the menu.
      * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
@@ -95,7 +96,7 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
      * When `items` is an array of objects, select the field to use as the label.
      * @defaultValue 'label'
      */
-    labelKey?: keyof NestedItem<T>;
+    labelKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */
     defaultValue?: GetModelValue<T, VK, M>;
@@ -127,9 +128,9 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
     ui?: InputMenu['slots'];
 }
 export type InputMenuEmits<A extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Pick<ComboboxRootEmits, 'update:open'> & {
-    'change': [payload: Event];
-    'blur': [payload: FocusEvent];
-    'focus': [payload: FocusEvent];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
     'create': [item: string];
     /** Event handler when highlighted element changes. */
     'highlight': [
@@ -176,21 +177,21 @@ export interface InputMenuSlots<A extends ArrayOrNested<InputMenuItem> = ArrayOr
 }
 declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onBlur?: ((payload: FocusEvent) => any) | undefined;
-        readonly onChange?: ((payload: Event) => any) | undefined;
-        readonly onFocus?: ((payload: FocusEvent) => any) | undefined;
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
         readonly onCreate?: ((item: string) => any) | undefined;
         readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         readonly onHighlight?: ((payload: {
             ref: HTMLElement;
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
         readonly "onRemove-tag"?: ((item: GetModelValue<T, VK, M>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onCreate" | "onHighlight" | "onUpdate:searchTerm" | "onRemove-tag"> & (InputMenuProps<T, VK, M> & {
         searchTerm?: string;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
@@ -209,110 +210,6 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             };
             $refs: {
                 [x: string]: unknown;
-            } & {
-                primitiveElement: ({
-                    $: import("vue").ComponentInternalInstance;
-                    $data: {};
-                    $props: {
-                        readonly modelValue?: string | undefined;
-                        readonly autoFocus?: boolean | undefined;
-                        readonly disabled?: boolean | undefined;
-                        readonly asChild?: boolean | undefined;
-                        readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                        readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-                    $attrs: {
-                        [x: string]: unknown;
-                    };
-                    $refs: {
-                        [x: string]: unknown;
-                    } & {
-                        primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                            P: {};
-                            B: {};
-                            D: {};
-                            C: {};
-                            M: {};
-                            Defaults: {};
-                        }, Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }> | null;
-                    };
-                    $slots: Readonly<{
-                        [name: string]: import("vue").Slot<any> | undefined;
-                    }>;
-                    $root: import("vue").ComponentPublicInstance | null;
-                    $parent: import("vue").ComponentPublicInstance | null;
-                    $host: Element | null;
-                    $emit: (event: "update:modelValue", args_0: string) => void;
-                    $el: any;
-                    $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                        "update:modelValue": (args_0: string) => any;
-                    }, string, {
-                        as: import("reka-ui").AsTag | import("vue").Component;
-                    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                        beforeCreate?: (() => void) | (() => void)[];
-                        created?: (() => void) | (() => void)[];
-                        beforeMount?: (() => void) | (() => void)[];
-                        mounted?: (() => void) | (() => void)[];
-                        beforeUpdate?: (() => void) | (() => void)[];
-                        updated?: (() => void) | (() => void)[];
-                        activated?: (() => void) | (() => void)[];
-                        deactivated?: (() => void) | (() => void)[];
-                        beforeDestroy?: (() => void) | (() => void)[];
-                        beforeUnmount?: (() => void) | (() => void)[];
-                        destroyed?: (() => void) | (() => void)[];
-                        unmounted?: (() => void) | (() => void)[];
-                        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-                    };
-                    $forceUpdate: () => void;
-                    $nextTick: typeof nextTick;
-                    $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-                } & Readonly<{
-                    as: import("reka-ui").AsTag | import("vue").Component;
-                }> & Omit<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-                    $slots: Readonly<{
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    }> & {
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    };
-                }) | null;
             };
             $slots: Readonly<{
                 [name: string]: import("vue").Slot<any> | undefined;
@@ -354,7 +251,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
         }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null, ({
             $: import("vue").ComponentInternalInstance;
@@ -373,110 +270,6 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             };
             $refs: {
                 [x: string]: unknown;
-            } & {
-                primitiveElement: ({
-                    $: import("vue").ComponentInternalInstance;
-                    $data: {};
-                    $props: {
-                        readonly modelValue?: string | undefined;
-                        readonly autoFocus?: boolean | undefined;
-                        readonly disabled?: boolean | undefined;
-                        readonly asChild?: boolean | undefined;
-                        readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-                        readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-                    $attrs: {
-                        [x: string]: unknown;
-                    };
-                    $refs: {
-                        [x: string]: unknown;
-                    } & {
-                        primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-                            P: {};
-                            B: {};
-                            D: {};
-                            C: {};
-                            M: {};
-                            Defaults: {};
-                        }, Readonly<import("vue").ExtractPropTypes<{
-                            asChild: {
-                                type: BooleanConstructor;
-                                default: boolean;
-                            };
-                            as: {
-                                type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
-                                default: string;
-                            };
-                        }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-                            [key: string]: any;
-                        }>, {}, {}, {}, {
-                            asChild: boolean;
-                            as: import("reka-ui").AsTag | import("vue").Component;
-                        }> | null;
-                    };
-                    $slots: Readonly<{
-                        [name: string]: import("vue").Slot<any> | undefined;
-                    }>;
-                    $root: import("vue").ComponentPublicInstance | null;
-                    $parent: import("vue").ComponentPublicInstance | null;
-                    $host: Element | null;
-                    $emit: (event: "update:modelValue", args_0: string) => void;
-                    $el: any;
-                    $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                        "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-                        "update:modelValue": (args_0: string) => any;
-                    }, string, {
-                        as: import("reka-ui").AsTag | import("vue").Component;
-                    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                        beforeCreate?: (() => void) | (() => void)[];
-                        created?: (() => void) | (() => void)[];
-                        beforeMount?: (() => void) | (() => void)[];
-                        mounted?: (() => void) | (() => void)[];
-                        beforeUpdate?: (() => void) | (() => void)[];
-                        updated?: (() => void) | (() => void)[];
-                        activated?: (() => void) | (() => void)[];
-                        deactivated?: (() => void) | (() => void)[];
-                        beforeDestroy?: (() => void) | (() => void)[];
-                        beforeUnmount?: (() => void) | (() => void)[];
-                        destroyed?: (() => void) | (() => void)[];
-                        unmounted?: (() => void) | (() => void)[];
-                        renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                        errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-                    };
-                    $forceUpdate: () => void;
-                    $nextTick: typeof nextTick;
-                    $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-                } & Readonly<{
-                    as: import("reka-ui").AsTag | import("vue").Component;
-                }> & Omit<Readonly<import("reka-ui").ListboxFilterProps> & Readonly<{
-                    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
-                }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-                    $slots: Readonly<{
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    }> & {
-                        default?: (props: {
-                            modelValue: string | undefined;
-                        }) => any;
-                    };
-                }) | null;
             };
             $slots: Readonly<{
                 [name: string]: import("vue").Slot<any> | undefined;
@@ -518,13 +311,13 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
         }>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
             $slots: {
-                default?(_: {}): any;
+                default?: (props: {}) => any;
             };
         }) | null>;
     }>): void;
     attrs: any;
     slots: InputMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", payload: FocusEvent) => void) & ((evt: "change", payload: Event) => void) & ((evt: "focus", payload: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);