@nuxt/ui 2.18.7 → 2.19.1

package/dist/runtime/components/forms/Form.vue

@@ -56,16 +56,11 @@ export default defineComponent({
     async function getErrors() {
       let errs = await props.validate(props.state);
       if (props.schema) {
-        if (isZodSchema(props.schema)) {
-          errs = errs.concat(await getZodErrors(props.state, props.schema));
-        } else if (isYupSchema(props.schema)) {
-          errs = errs.concat(await getYupErrors(props.state, props.schema));
-        } else if (isJoiSchema(props.schema)) {
-          errs = errs.concat(await getJoiErrors(props.state, props.schema));
-        } else if (isValibotSchema(props.schema)) {
-          errs = errs.concat(await getValibotError(props.state, props.schema));
+        const { errors: errors2, result } = await parseSchema(props.state, props.schema);
+        if (errors2) {
+          errs = errs.concat(errors2);
         } else {
-          throw new Error("Form validation failed: Unsupported form schema");
+          Object.assign(props.state, result);
         }
       }
       return errs;
@@ -157,64 +152,130 @@ function isYupSchema(schema) {
 function isYupError(error) {
   return error.inner !== void 0;
 }
-async function getYupErrors(state, schema) {
+function isSuperStructSchema(schema) {
+  return "schema" in schema && typeof schema.coercer === "function" && typeof schema.validator === "function" && typeof schema.refiner === "function";
+}
+function isJoiSchema(schema) {
+  return schema.validateAsync !== void 0 && schema.id !== void 0;
+}
+function isJoiError(error) {
+  return error.isJoi === true;
+}
+function isValibotSchema(schema) {
+  return "_parse" in schema || "_run" in schema || typeof schema === "function" && "schema" in schema;
+}
+function isZodSchema(schema) {
+  return schema.parse !== void 0;
+}
+async function validateValibotSchema(state, schema) {
+  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
+  if (!result.issues || result.issues.length === 0) {
+    const output = "output" in result ? result.output : "value" in result ? result.value : null;
+    return {
+      errors: null,
+      result: output
+    };
+  }
+  const errors = result.issues.map((issue) => ({
+    path: issue.path?.map((item) => item.key).join(".") || "",
+    message: issue.message
+  }));
+  return {
+    errors,
+    result: null
+  };
+}
+async function validateJoiSchema(state, schema) {
   try {
-    await schema.validate(state, { abortEarly: false });
-    return [];
+    await schema.validateAsync(state, { abortEarly: false });
+    return {
+      errors: null,
+      result: state
+    };
   } catch (error) {
-    if (isYupError(error)) {
-      return error.inner.map((issue) => ({
-        path: issue.path ?? "",
+    if (isJoiError(error)) {
+      const errors = error.details.map((issue) => ({
+        path: issue.path.join("."),
         message: issue.message
       }));
+      return {
+        errors,
+        result: null
+      };
     } else {
       throw error;
     }
   }
 }
-function isZodSchema(schema) {
-  return schema.parse !== void 0;
-}
-async function getZodErrors(state, schema) {
+async function validateZodSchema(state, schema) {
   const result = await schema.safeParseAsync(state);
   if (result.success === false) {
-    return result.error.issues.map((issue) => ({
+    const errors = result.error.issues.map((issue) => ({
       path: issue.path.join("."),
       message: issue.message
     }));
+    return {
+      errors,
+      result: null
+    };
   }
-  return [];
-}
-function isJoiSchema(schema) {
-  return schema.validateAsync !== void 0 && schema.id !== void 0;
+  return {
+    result: result.data,
+    errors: null
+  };
 }
-function isJoiError(error) {
-  return error.isJoi === true;
+async function validateSuperstructSchema(state, schema) {
+  const [err, result] = schema.validate(state);
+  if (err) {
+    const errors = err.failures().map((error) => ({
+      message: error.message,
+      path: error.path.join(".")
+    }));
+    return {
+      errors,
+      result: null
+    };
+  }
+  return {
+    errors: null,
+    result
+  };
 }
-async function getJoiErrors(state, schema) {
+async function validateYupSchema(state, schema) {
   try {
-    await schema.validateAsync(state, { abortEarly: false });
-    return [];
+    const result = schema.validateSync(state, { abortEarly: false });
+    return {
+      errors: null,
+      result
+    };
   } catch (error) {
-    if (isJoiError(error)) {
-      return error.details.map((detail) => ({
-        path: detail.path.join("."),
-        message: detail.message
+    if (isYupError(error)) {
+      const errors = error.inner.map((issue) => ({
+        path: issue.path ?? "",
+        message: issue.message
       }));
+      return {
+        errors,
+        result: null
+      };
     } else {
       throw error;
     }
   }
 }
-function isValibotSchema(schema) {
-  return "_parse" in schema || "_run" in schema || typeof schema === "function" && "schema" in schema;
-}
-async function getValibotError(state, schema) {
-  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
-  return result.issues?.map((issue) => ({
-    // We know that the key for a form schema is always a string or a number
-    path: issue.path?.map((item) => item.key).join(".") || "",
-    message: issue.message
-  })) || [];
+function parseSchema(state, schema) {
+  if (isZodSchema(schema)) {
+    return validateZodSchema(state, schema);
+  } else if (isJoiSchema(schema)) {
+    return validateJoiSchema(state, schema);
+  } else if (isValibotSchema(schema)) {
+    return validateValibotSchema(state, schema);
+  } else if (isYupSchema(schema)) {
+    return validateYupSchema(state, schema);
+  } else if (isSuperStructSchema(schema)) {
+    return validateSuperstructSchema(state, schema);
+  } else {
+    throw new Error("Form validation failed: Unsupported form schema");
+  }
 }
 </script>

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

@@ -5,10 +5,12 @@ import type { ObjectSchema as YupObjectSchema } from 'yup';
 import type { BaseSchema as ValibotSchema30, BaseSchemaAsync as ValibotSchemaAsync30 } from 'valibot30';
 import type { GenericSchema as ValibotSchema31, GenericSchemaAsync as ValibotSchemaAsync31, SafeParser as ValibotSafeParser31, SafeParserAsync as ValibotSafeParserAsync31 } from 'valibot31';
 import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
+import type { Struct } from 'superstruct';
 import type { FormError, FormEventType } from '../../types/form.js';
+type Schema = PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     schema: {
-        type: PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>;
+        type: Schema;
         default: any;
     };
     state: {
@@ -34,7 +36,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[]>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
-        type: PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>;
+        type: Schema;
         default: any;
     };
     state: {
@@ -53,7 +55,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onSubmit?: (...args: any[]) => any;
     onError?: (...args: any[]) => any;
 }>, {
-    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotSchema30<any, any> | ValibotSchemaAsync30<any, any> | ValibotSchema31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSchemaAsync31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema<unknown, unknown, import("valibot").BaseIssue<unknown>> | ValibotSchemaAsync<unknown, unknown, import("valibot").BaseIssue<unknown>>;
+    schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotSchema30<any, any> | ValibotSchemaAsync30<any, any> | ValibotSchema31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSchemaAsync31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema<unknown, unknown, import("valibot").BaseIssue<unknown>> | ValibotSchemaAsync<unknown, unknown, import("valibot").BaseIssue<unknown>> | Struct<any, any>;
     validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
     validateOn: FormEventType[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/forms/Input.vue

@@ -33,8 +33,8 @@
 <script>
 import { ref, computed, toRef, onMounted, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
 import { defu } from "defu";
+import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig, looseToNumber } from "../../utils";
@@ -163,7 +163,7 @@ export default defineComponent({
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
     const { emitFormBlur, emitFormInput, size: sizeFormGroup, color, inputId, name } = useFormGroup(props, config);
     const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
-    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }));
+    const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false, nullify: false }));
     const input2 = ref(null);
     const autoFocus = () => {
       if (props.autofocus) {
@@ -177,6 +177,9 @@ export default defineComponent({
       if (modelModifiers.value.number || props.type === "number") {
         value = looseToNumber(value);
       }
+      if (modelModifiers.value.nullify) {
+        value ||= null;
+      }
       emit("update:modelValue", value);
       emitFormInput();
     };

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

@@ -212,6 +212,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             trim?: boolean;
             lazy?: boolean;
             number?: boolean;
+            nullify?: boolean;
         }>;
         default: () => {};
     };
@@ -446,6 +447,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             trim?: boolean;
             lazy?: boolean;
             number?: boolean;
+            nullify?: boolean;
         }>;
         default: () => {};
     };
@@ -593,6 +595,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         trim?: boolean;
         lazy?: boolean;
         number?: boolean;
+        nullify?: boolean;
     };
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/forms/InputMenu.vue

@@ -63,7 +63,7 @@
                     />
                     <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
 
-                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
+                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : accessor(option, optionAttribute) }}</span>
                   </slot>
                 </div>
 
@@ -75,12 +75,12 @@
 
             <p v-if="query && !filteredOptions.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
-                No results for "{{ query }}".
+                {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}
               </slot>
             </p>
             <p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
               <slot name="empty" :query="query">
-                No options.
+                {{ uiMenu.default.empty.label }}
               </slot>
             </p>
           </HComboboxOptions>
@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import { ref, computed, toRef, watch, defineComponent } from "vue";
+import { ref, computed, toRef, watch, defineComponent, toRaw } from "vue";
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -297,9 +297,9 @@ export default defineComponent({
       }
       if (props.valueAttribute) {
         const option = options.value.find((option2) => option2[props.valueAttribute] === props.modelValue);
-        return option ? option[props.optionAttribute] : null;
+        return option ? accessor(option, props.optionAttribute) : null;
       } else {
-        return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
+        return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
       }
     });
     const inputClass = computed(() => {
@@ -372,17 +372,21 @@ export default defineComponent({
     }, [], {
       lazy: props.searchLazy
     });
+    function escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
+    }
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {
         return options.value;
       }
+      const escapedQuery = escapeRegExp(query.value);
       return options.value.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
           if (["string", "number"].includes(typeof option)) {
-            return String(option).search(new RegExp(query.value, "i")) !== -1;
+            return String(option).search(new RegExp(escapedQuery, "i")) !== -1;
           }
           const child = get(option, searchAttribute);
-          return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
+          return child !== null && child !== void 0 && String(child).search(new RegExp(escapedQuery, "i")) !== -1;
         });
       });
     });
@@ -396,10 +400,16 @@ export default defineComponent({
     });
     function onUpdate(value) {
       query.value = "";
+      if (toRaw(props.modelValue) === toRaw(value)) {
+        return;
+      }
       emit("update:modelValue", value);
       emit("change", value);
       emitFormChange();
     }
+    function accessor(obj, key) {
+      return get(obj, key);
+    }
     function onQueryChange(event) {
       query.value = event.target.value;
     }
@@ -431,6 +441,7 @@ export default defineComponent({
       filteredOptions,
       // eslint-disable-next-line vue/no-dupe-keys
       query,
+      accessor,
       onUpdate,
       onQueryChange
     };

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

@@ -162,6 +162,12 @@ declare const configMenu: {
     default: {
         selectedIcon: string;
         trailingIcon: string;
+        empty: {
+            label: string;
+        };
+        optionEmpty: {
+            label: string;
+        };
     };
     arrow: {
         ring: string;
@@ -478,6 +484,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: {
             selectedIcon: string;
             trailingIcon: string;
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         };
         arrow: {
             ring: string;
@@ -508,6 +520,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
     filteredOptions: import("vue").ComputedRef<any[]>;
     query: import("vue").WritableComputedRef<string, string>;
+    accessor: <T extends Record<string, any>>(obj: T, key: string) => any;
     onUpdate: (value: any) => void;
     onQueryChange: (event: any) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -860,6 +873,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default?: DeepPartial<{
             selectedIcon: string;
             trailingIcon: string;
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         }, any>;
         arrow?: DeepPartial<{
             ring: string;

package/dist/runtime/components/forms/Radio.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { DeepPartial, Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
+import type colors from '#ui-colors';
 declare const config: {
     wrapper: string;
     container: string;

package/dist/runtime/components/forms/RadioGroup.vue

@@ -17,11 +17,11 @@
         :ui="uiRadio"
         @change="onUpdate(option.value)"
       >
-        <template #label>
+        <template v-if="$slots.label" #label>
           <slot name="label" v-bind="{ option, selected: option.selected }" />
         </template>
 
-        <template #help>
+        <template v-if="$slots.help" #help>
           <slot name="help" v-bind="{ option, selected: option.selected }" />
         </template>
       </URadio>
@@ -30,11 +30,11 @@
 </template>
 
 <script>
-import URadio from "./Radio.vue";
 import { computed, defineComponent, provide, toRef } from "vue";
 import { useUI } from "../../composables/useUI";
 import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig, get } from "../../utils";
+import URadio from "./Radio.vue";
 import appConfig from "#build/app.config";
 import { radioGroup, radio } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup);
@@ -137,7 +137,6 @@ export default defineComponent({
       uiRadio,
       attrs,
       normalizedOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
       onUpdate
     };
   }

package/dist/runtime/components/forms/RadioGroup.vue.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { DeepPartial, Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
+import type colors from '#ui-colors';
 declare const config: {
     wrapper: string;
     fieldset: string;

package/dist/runtime/components/forms/SelectMenu.vue

@@ -86,7 +86,7 @@
                     />
                     <span v-else-if="option.chip" :class="uiMenu.option.chip.base" :style="{ background: `#${option.chip}` }" />
 
-                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : option[optionAttribute] }}</span>
+                    <span class="truncate">{{ ['string', 'number'].includes(typeof option) ? option : accessor(option, optionAttribute) }}</span>
                   </slot>
                 </div>
 
@@ -100,19 +100,19 @@
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
                   <slot name="option-create" :option="createOption" :active="active" :selected="optionSelected">
-                    <span :class="uiMenu.option.create">Create "{{ createOption[optionAttribute] }}"</span>
+                    <span :class="uiMenu.option.create">Create "{{ typeof createOption === 'string' ? createOption : accessor(createOption, optionAttribute) }}"</span>
                   </slot>
                 </div>
               </li>
             </component>
             <p v-else-if="searchable && query && !filteredOptions?.length" :class="uiMenu.option.empty">
               <slot name="option-empty" :query="query">
-                No results for "{{ query }}".
+                {{ uiMenu.default.optionEmpty.label.replace('{query}', query) }}
               </slot>
             </p>
             <p v-else-if="!filteredOptions?.length" :class="uiMenu.empty">
               <slot name="empty" :query="query">
-                No options.
+                {{ uiMenu.default.empty.label }}
               </slot>
             </p>
           </component>
@@ -123,7 +123,7 @@
 </template>
 
 <script>
-import { ref, computed, toRef, watch, defineComponent } from "vue";
+import { ref, computed, toRef, watch, defineComponent, toRaw } from "vue";
 import {
   Combobox as HCombobox,
   ComboboxButton as HComboboxButton,
@@ -241,7 +241,7 @@ export default defineComponent({
     },
     searchablePlaceholder: {
       type: String,
-      default: "Search..."
+      default: () => configMenu.default.searchablePlaceholder.label
     },
     searchableLazy: {
       type: Boolean,
@@ -374,9 +374,9 @@ export default defineComponent({
         }
       } else if (props.modelValue !== void 0 && props.modelValue !== null) {
         if (props.valueAttribute) {
-          return selected.value?.[props.optionAttribute] ?? null;
+          return accessor(selected.value, props.optionAttribute) ?? null;
         } else {
-          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
+          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
         }
       }
       return null;
@@ -452,17 +452,24 @@ export default defineComponent({
     }, [], {
       lazy: props.searchableLazy
     });
+    function escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, (match) => `\\${match}`);
+    }
+    function accessor(obj, key) {
+      return get(obj, key);
+    }
     const filteredOptions = computed(() => {
       if (!query.value || debouncedSearch) {
         return options.value;
       }
+      const escapedQuery = escapeRegExp(query.value);
       return options.value.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
           if (["string", "number"].includes(typeof option)) {
-            return String(option).search(new RegExp(query.value, "i")) !== -1;
+            return String(option).search(new RegExp(escapedQuery, "i")) !== -1;
           }
           const child = get(option, searchAttribute);
-          return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
+          return child !== null && child !== void 0 && String(child).search(new RegExp(escapedQuery, "i")) !== -1;
         });
       });
     });
@@ -474,7 +481,7 @@ export default defineComponent({
         return null;
       }
       if (props.showCreateOptionWhen === "always") {
-        const existingOption = filteredOptions.value.find((option) => ["string", "number"].includes(typeof option) ? option === query.value : option[props.optionAttribute] === query.value);
+        const existingOption = filteredOptions.value.find((option) => ["string", "number"].includes(typeof option) ? option === query.value : accessor(option, props.optionAttribute) === query.value);
         if (existingOption) {
           return null;
         }
@@ -501,6 +508,9 @@ export default defineComponent({
       }
     });
     function onUpdate(value) {
+      if (toRaw(props.modelValue) === value) {
+        return;
+      }
       emit("update:modelValue", value);
       emit("change", value);
       emitFormChange();
@@ -524,6 +534,7 @@ export default defineComponent({
       container,
       selected,
       label,
+      accessor,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -158,6 +158,15 @@ declare const configMenu: {
         selectedIcon: string;
         clearSearchOnClose: boolean;
         showCreateOptionWhen: string;
+        searchablePlaceholder: {
+            label: string;
+        };
+        empty: {
+            label: string;
+        };
+        optionEmpty: {
+            label: string;
+        };
     };
     arrow: {
         ring: string;
@@ -257,7 +266,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     searchablePlaceholder: {
         type: StringConstructor;
-        default: string;
+        default: () => string;
     };
     searchableLazy: {
         type: BooleanConstructor;
@@ -497,6 +506,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedIcon: string;
             clearSearchOnClose: boolean;
             showCreateOptionWhen: string;
+            searchablePlaceholder: {
+                label: string;
+            };
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         };
         arrow: {
             ring: string;
@@ -528,6 +546,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     container: import("vue").Ref<import("@vueuse/core").MaybeElement, import("@vueuse/core").MaybeElement>;
     selected: import("vue").ComputedRef<any>;
     label: import("vue").ComputedRef<any>;
+    accessor: <T extends Record<string, any>>(obj: T, key: string) => any;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true>;
     selectClass: import("vue").ComputedRef<string>;
@@ -622,7 +641,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     searchablePlaceholder: {
         type: StringConstructor;
-        default: string;
+        default: () => string;
     };
     searchableLazy: {
         type: BooleanConstructor;
@@ -903,6 +922,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             selectedIcon: string;
             clearSearchOnClose: boolean;
             showCreateOptionWhen: string;
+            searchablePlaceholder: {
+                label: string;
+            };
+            empty: {
+                label: string;
+            };
+            optionEmpty: {
+                label: string;
+            };
         }, any>;
         arrow?: DeepPartial<{
             ring: string;