@nuxt/ui 3.1.3 → 3.3.0

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

@@ -0,0 +1,167 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { UseFileDialogReturn } from '@vueuse/core';
+import theme from '#build/ui/file-upload';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/utils';
+type FileUpload = ComponentConfig<typeof theme, AppConfig, 'fileUpload'>;
+export interface FileUploadProps<M extends boolean = false> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    /**
+     * The icon to display.
+     * @defaultValue appConfig.ui.icons.upload
+     * @IconifyIcon
+     */
+    icon?: string;
+    label?: string;
+    description?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: FileUpload['variants']['color'];
+    /**
+     * The `button` variant is only available when `multiple` is `false`.
+     * @defaultValue 'area'
+     */
+    variant?: FileUpload['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: FileUpload['variants']['size'];
+    /**
+     * The layout of how files are displayed.
+     * Only works when `variant` is `area`.
+     * @defaultValue 'list'
+     */
+    layout?: FileUpload['variants']['layout'];
+    /**
+     * The position of the files.
+     * Only works when `variant` is `area` and when `layout` is `list`.
+     * @defaultValue 'outside'
+     */
+    position?: FileUpload['variants']['position'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     * @defaultValue '*'
+     */
+    accept?: string;
+    multiple?: M & boolean;
+    /**
+     * Reset the file input when the dialog is opened.
+     * @defaultValue false
+     */
+    reset?: boolean;
+    /**
+     * Create a zone that allows the user to drop files onto it.
+     * @defaultValue true
+     */
+    dropzone?: boolean;
+    /**
+     * Make the dropzone interactive when the user is clicking on it.
+     * @defaultValue true
+     */
+    interactive?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * The icon to display for the file.
+     * @defaultValue appConfig.ui.icons.file
+     * @IconifyIcon
+     */
+    fileIcon?: string;
+    /**
+     * Configure the delete button for the file.
+     * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`{lang="ts-type"}
+     * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`{lang="ts-type"}
+     */
+    fileDelete?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed to delete a file.
+     * @defaultValue appConfig.ui.icons.close
+     * @IconifyIcon
+     */
+    fileDeleteIcon?: string;
+    class?: any;
+    ui?: FileUpload['slots'];
+}
+export interface FileUploadEmits<M extends boolean = false> {
+    'update:modelValue': [payload: M extends true ? File[] : File | null];
+    'change': [event: Event];
+}
+type FileUploadFiles<M> = (M extends true ? File[] : File) | null;
+export interface FileUploadSlots<M extends boolean = false> {
+    'default'(props: {
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'leading'(props?: {}): any;
+    'label'(props?: {}): any;
+    'description'(props?: {}): any;
+    'actions'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files'(props: {
+        files?: FileUploadFiles<M>;
+    }): any;
+    'files-top'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'files-bottom'(props: {
+        files?: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }): any;
+    'file'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-leading'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-name'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-size'(props: {
+        file: File;
+        index: number;
+    }): any;
+    'file-trailing'(props: {
+        file: File;
+        index: number;
+    }): any;
+}
+declare const _default: <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 onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & (FileUploadProps<M> & {
+        modelValue?: (M extends true ? File[] : File) | null;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        dropzoneRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    }>): void;
+    attrs: any;
+    slots: FileUploadSlots<M>;
+    emit: (((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: M extends true ? File[] : File | null) => void)) & ((evt: "update:modelValue", value: (M extends true ? File[] : File) | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/Form.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
@@ -20,7 +20,7 @@ const props = defineProps({
   } },
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
-  transform: { type: Boolean, required: false, default: true },
+  transform: { type: null, required: false, default: () => true },
   attach: { type: Boolean, required: false, default: true },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -80,9 +80,9 @@ const errors = ref([]);
 provide("form-errors", errors);
 const inputs = ref({});
 provide(formInputsInjectionKey, inputs);
-const dirtyFields = /* @__PURE__ */ new Set();
-const touchedFields = /* @__PURE__ */ new Set();
-const blurredFields = /* @__PURE__ */ new Set();
+const dirtyFields = reactive(/* @__PURE__ */ new Set());
+const touchedFields = reactive(/* @__PURE__ */ new Set());
+const blurredFields = reactive(/* @__PURE__ */ new Set());
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -205,6 +205,6 @@ defineExpose({
     :class="ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

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

@@ -1,5 +1,5 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, InferOutput } from '../types/form';
-export interface FormProps<S extends FormSchema> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, FormData } from '../types/form';
+export interface FormProps<S extends FormSchema, T extends boolean = true> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
@@ -13,6 +13,7 @@ export interface FormProps<S extends FormSchema> {
     validate?: (state: Partial<InferInput<S>>) => Promise<FormError[]> | FormError[];
     /**
      * The list of input events that trigger the form validation.
+     * @remarks The form always validates on submit.
      * @defaultValue `['blur', 'change', 'input']`
      */
     validateOn?: FormInputEvents[];
@@ -27,7 +28,7 @@ export interface FormProps<S extends FormSchema> {
      * If true, schema transformations will be applied to the state on submit.
      * @defaultValue `true`
      */
-    transform?: boolean;
+    transform?: T;
     /**
      * If true, this form will attach to its parent Form (if any) and validate at the same time.
      * @defaultValue `true`
@@ -40,30 +41,31 @@ export interface FormProps<S extends FormSchema> {
      */
     loadingAuto?: boolean;
     class?: any;
-    onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export interface FormEmits<S extends FormSchema> {
-    (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void;
-    (e: 'error', payload: FormErrorEvent): void;
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+    submit: [payload: FormSubmitEvent<FormData<S, T>>];
+    error: [payload: FormErrorEvent];
 }
 export interface FormSlots {
     default(props?: {
         errors: FormError[];
+        loading: boolean;
     }): any;
 }
-declare const _default: <S extends FormSchema>(__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<{
+declare const _default: <S extends FormSchema, T extends boolean = true>(__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 onError?: ((payload: FormErrorEvent) => any) | undefined;
-        readonly onSubmit?: ((payload: FormSubmitEvent<InferOutput<S>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<InferInput<S>>>): void;
+        readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S>;
+    emit: ((evt: "error", payload: FormErrorEvent) => void) & ((evt: "submit", payload: FormSubmitEvent<FormData<S, T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/FormField.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   help: { type: String, required: false },
-  error: { type: [String, Boolean], required: false },
+  error: { type: [Boolean, String], required: false },
   hint: { type: String, required: false },
   size: { type: null, required: false },
   required: { type: Boolean, required: false },
@@ -80,7 +80,7 @@ provide(formFieldInjectionKey, computed(() => ({
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

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

@@ -15,7 +15,7 @@ export interface FormFieldProps {
     label?: string;
     description?: string;
     help?: string;
-    error?: string | boolean;
+    error?: boolean | string;
     hint?: string;
     /**
      * @defaultValue 'md'
@@ -46,13 +46,13 @@ export interface FormFieldSlots {
         help?: string;
     }): any;
     error(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
     default(props: {
-        error?: string | boolean;
+        error?: boolean | string;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FormFieldSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -4,5 +4,5 @@ export interface IconProps {
     size?: string | number;
     customize?: (content: string, name?: string, prefix?: string, provider?: string) => string;
 }
-declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<IconProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Input.vue

@@ -5,6 +5,7 @@ import theme from "#build/ui/input";
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { Primitive } from "reka-ui";
+import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
@@ -29,6 +30,8 @@ const props = defineProps({
   autofocusDelay: { type: Number, required: false, default: 0 },
   disabled: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   modelModifiers: { type: Object, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false },
@@ -43,7 +46,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "blur", "change"]);
 const slots = defineSlots();
-const [modelValue, modelModifiers] = defineModel({ type: null });
+const modelValue = useVModel(props, "modelValue", emits, { defaultValue: props.defaultValue });
 const appConfig = useAppConfig();
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField(props, { deferInputValidation: true });
 const { orientation, size: buttonGroupSize } = useButtonGroup(props);
@@ -62,29 +65,29 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.input || {} }
 }));
 const inputRef = ref(null);
 function updateInput(value) {
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;
   }
-  if (modelModifiers.number || props.type === "number") {
+  if (props.modelModifiers?.number || props.type === "number") {
     value = looseToNumber(value);
   }
-  if (modelModifiers.nullify) {
+  if (props.modelModifiers?.nullify) {
     value ||= null;
   }
   modelValue.value = value;
   emitFormInput();
 }
 function onInput(event) {
-  if (!modelModifiers.lazy) {
+  if (!props.modelModifiers?.lazy) {
     updateInput(event.target.value);
   }
 }
 function onChange(event) {
   const value = event.target.value;
-  if (modelModifiers.lazy) {
+  if (props.modelModifiers?.lazy) {
     updateInput(value);
   }
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     event.target.value = value.trim();
   }
   emitFormChange();

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

@@ -4,7 +4,7 @@ import theme from '#build/ui/input';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AcceptableValue, ComponentConfig } from '../types/utils';
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>;
-export interface InputProps extends UseComponentIconsProps {
+export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -34,6 +34,8 @@ export interface InputProps extends UseComponentIconsProps {
     disabled?: boolean;
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
+    modelValue?: T;
+    defaultValue?: T;
     modelModifiers?: {
         string?: boolean;
         number?: boolean;
@@ -45,9 +47,9 @@ export interface InputProps extends UseComponentIconsProps {
     ui?: Input['slots'];
 }
 export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', event: Event): void;
+    'update:modelValue': [payload: T];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
 }
 export interface InputSlots {
     leading(props?: {}): any;
@@ -59,19 +61,17 @@ declare const _default: <T extends AcceptableValue>(__VLS_props: NonNullable<Awa
         readonly onBlur?: ((event: FocusEvent) => any) | undefined;
         readonly onChange?: ((event: Event) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & (InputProps & {
-        modelValue?: T;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & InputProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
     }>): void;
     attrs: any;
     slots: InputSlots;
-    emit: InputEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/InputMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/input-menu";
 </script>
 
 <script setup>
-import { computed, ref, toRef, onMounted, toRaw } from "vue";
+import { computed, ref, toRef, onMounted, toRaw, nextTick } from "vue";
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { isEqual } from "ohash/utils";
@@ -64,7 +64,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   loadingIcon: { type: String, required: false }
 });
-const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "update:modelValue"]);
+const emits = defineEmits(["update:open", "change", "blur", "focus", "create", "highlight", "remove-tag", "update:modelValue"]);
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
 const { t } = useLocale();
@@ -91,10 +91,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.inputMenu ||
   buttonGroup: orientation.value
 }));
 function displayValue(value) {
-  if (!props.valueKey) {
-    return value && (typeof value === "object" ? get(value, props.labelKey) : value);
-  }
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, 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);
 }
 const groups = computed(
@@ -106,14 +103,20 @@ const filteredGroups = computed(() => {
     return groups.value;
   }
   const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey];
-  return groups.value.map((group) => group.filter((item) => {
-    if (typeof item !== "object" || item === null) {
+  return groups.value.map((items2) => items2.filter((item) => {
+    if (item === void 0 || item === null) {
+      return false;
+    }
+    if (typeof item !== "object") {
       return contains(String(item), searchTerm.value);
     }
     if (item.type && ["label", "separator"].includes(item.type)) {
       return true;
     }
-    return fields.some((field) => contains(get(item, field), searchTerm.value));
+    return fields.some((field) => {
+      const value = get(item, field);
+      return value !== void 0 && value !== null && contains(String(value), searchTerm.value);
+    });
   })).filter((group) => group.filter(
     (item) => !isInputItem(item) || (!item.type || !["label", "separator"].includes(item.type))
   ).length > 0);
@@ -137,6 +140,9 @@ function autoFocus() {
   }
 }
 onMounted(() => {
+  nextTick(() => {
+    searchTerm.value = "";
+  });
   setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
@@ -185,6 +191,7 @@ function onRemoveTag(event) {
     const modelValue = props.modelValue;
     const filteredValue = modelValue.filter((value) => !isEqual(value, event));
     emits("update:modelValue", filteredValue);
+    emits("remove-tag", event);
     onUpdate(filteredValue);
   }
 }
@@ -252,7 +259,7 @@ defineExpose({
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="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) }}
+              {{ displayValue(item) ?? item }}
             </slot>
           </TagsInputItemText>
 

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import type { InputHTMLAttributes } from 'vue';
 import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
@@ -126,17 +127,18 @@ 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];
-    create: [item: string];
+    'change': [payload: Event];
+    'blur': [payload: FocusEvent];
+    'focus': [payload: FocusEvent];
+    'create': [item: string];
     /** Event handler when highlighted element changes. */
-    highlight: [
+    'highlight': [
         payload: {
             ref: HTMLElement;
             value: GetModelValue<A, VK, M>;
         } | undefined
     ];
+    'remove-tag': [item: GetModelValue<A, VK, M>];
 } & GetModelValueEmits<A, VK, M>;
 type SlotProps<T extends InputMenuItem> = (props: {
     item: T;
@@ -185,7 +187,8 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
             value: GetModelValue<T, VK, M>;
         } | undefined) => any) | undefined;
         readonly "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onUpdate:open" | "onUpdate:modelValue" | "onHighlight" | "onUpdate:searchTerm" | "onCreate"> & (InputMenuProps<T, VK, M> & {
+        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> & {
         searchTerm?: string;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
@@ -293,7 +296,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                         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 import("vue").nextTick;
+                    $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;
@@ -301,11 +304,11 @@ 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: Readonly<{
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     }> & {
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     };
@@ -343,7 +346,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                 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 import("vue").nextTick;
+            $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;
@@ -457,7 +460,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                         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 import("vue").nextTick;
+                    $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;
@@ -465,11 +468,11 @@ 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: Readonly<{
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     }> & {
-                        default: (props: {
+                        default?: (props: {
                             modelValue: string | undefined;
                         }) => any;
                     };
@@ -507,7 +510,7 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
                 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 import("vue").nextTick;
+            $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;
@@ -524,11 +527,11 @@ declare const _default: <T extends ArrayOrNested<InputMenuItem>, VK extends GetI
     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: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
-    } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);
+    } | undefined) => void) & ((evt: "remove-tag", item: GetModelValue<T, VK, M>) => void)) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};