@nuxt/ui 2.18.7 → 2.19.0

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<{