@volverjs/form-vue 0.0.3 → 0.0.5

package/README.md

@@ -54,6 +54,7 @@ const form = createForm({
   schema
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: boolean - default false
   // sideEffects?: (data: any) => void
 })
 
@@ -131,6 +132,31 @@ The throttle can be changed with the `updateThrottle` option.
 </template>
 ```
 
+The `continuosValidation` can be passed through options or with VvForm prop.
+With this field the validation doesn't stop and continue also after a validaton success.
+
+```vue
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const { VvForm, VvFormField } = useForm(MyZodSchema, {
+    lazyLoad: true
+    // continuosValidation: true
+  })
+
+  const formData = ref({
+    name: '',
+    surname: ''
+  })
+</script>
+
+<template>
+  <VvForm v-model="formData" :continuosValidation="true">
+    <!-- form fields -->
+  </VvForm>
+</template>
+```
+
 ### VvFormWrapper
 
 `VvFormWrapper` gives you the validation status of a part of your form.
@@ -250,6 +276,86 @@ Or a custom component.
 </template>
 ```
 
+## Nested VvFormField
+
+In some use cases can be usefull nest `VvFormField`.
+For example let's assume:
+
+- a shopping list that is a field of our model (ex: ToDo list)
+- the sum of all products of the shopping list cannot be 0
+- we don't know all the products a priori
+
+So our ToDo model and shopping list are structured like:
+
+```javascript
+const toDo = {
+  shoppingList: {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0,
+    ...
+  }
+}
+```
+
+Our Zod schema can be:
+
+```typescript
+const toDoSchema = z.object({
+  shoppingList: z
+    .object({})
+    .default({})
+    .superRefine((value, ctx) => {
+      const shoppingList = value as Record<string, number>
+      if (
+        Object.keys(value).length &&
+        !Object.keys(value).find((key) => shoppingList[key] > 0)
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: i18n.global.t('atLeastOneProduct')
+        })
+      }
+    })
+})
+```
+
+And the Vue component:
+
+```vue
+<script setup lang="ts">
+  const { VvForm, VvFormField } = useForm(toDoSchema, {
+    lazyLoad: true,
+    continuosValidation: true
+  })
+
+  // shopping list data, const or async
+  const shoppingList = {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0
+  }
+</script>
+
+<template>
+  <VvForm>
+    <VvFormField v-slot="{ invalid, invalidLabel }" name="shoppingList">
+      <VvFormField
+        v-for="key in Object.keys(shoppingList)"
+        :key="key"
+        :name="`shoppingList.${key}`"
+        :label="$t(key)"
+      />
+      <small v-if="invalid" class="input-counter__hint">{{
+        invalidLabel[0]
+      }}</small>
+    </VvFormField>
+  </VvForm>
+</template>
+```
+
 ## Composable
 
 `useForm` can be used to create a form programmatically inside a Vue 3 Component.
@@ -268,6 +374,7 @@ The default settings are inherited from the plugin (if it was defined).
   const { VvForm, VvFormWrapper, VvFormField } = useForm(schema, {
     // lazyLoad: boolean - default false
     // updateThrottle: number - default 500
+    // continuosValidation: true - default false
     // sideEffects?: (formData: any) => void
   })
 </script>
@@ -297,12 +404,80 @@ const schema = z.object({
 const { VvForm, VvFormWrapper, VvFormField } = formFactory(schema, {
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: true - default false
   // sideEffects?: (data: any) => void
 })
 
 export default { VvForm, VvFormWrapper, VvFormField }
 ```
 
+## Default Object by Zod Object Schema
+
+`defaultObjectBySchema` creates an object by a Zod Object Schema.
+It can be useful to create a default object for a form. The default object is created by the default values of the schema and can be merged with an other object passed as parameter.
+
+```ts
+import { z } from 'zod'
+import { defaultObjectBySchema } from '@volverjs/form-vue'
+
+const schema = z.object({
+  name: z.string().default('John'),
+  surname: z.string().default('Doe')
+})
+
+const defaultObject = defaultObjectBySchema(schema)
+// defaultObject = { name: 'John', surname: 'Doe' }
+
+const defaultObject = defaultObjectBySchema(schema, { name: 'Jane' })
+// defaultObject = { name: 'Jane', surname: 'Doe' }
+```
+
+`defaultObjectBySchema` can be used with nested objects.
+
+```ts
+import { z } from 'zod'
+import { defaultObjectBySchema } from '@volverjs/form-vue'
+
+const schema = z.object({
+  name: z.string().default('John'),
+  surname: z.string().default('Doe'),
+  address: z.object({
+    street: z.string().default('Main Street'),
+    number: z.number().default(1)
+  })
+})
+
+const defaultObject = defaultObjectBySchema(schema)
+// defaultObject = { name: 'John', surname: 'Doe', address: { street: 'Main Street', number: 1 } }
+```
+
+Other Zod methods are also supported: [`z.nullable()`](https://github.com/colinhacks/zod#nullable), [`z.coerce`](https://github.com/colinhacks/zod#coercion-for-primitives) and [`z.passthrough()`](https://github.com/colinhacks/zod#passthrough).
+
+```ts
+import { z } from 'zod'
+import { defaultObjectBySchema } from '@volverjs/form-vue'
+
+const schema = z
+  .object({
+    name: z.string().default('John'),
+    surname: z.string().default('Doe'),
+    address: z.object({
+      street: z.string().default('Main Street'),
+      number: z.number().default(1)
+    }),
+    age: z.number().nullable().default(null),
+    height: z.number().coerce().default(1.8),
+    weight: z.number().default(80)
+  })
+  .passthrough()
+
+const defaultObject = defaultObjectBySchema(schema, {
+  height: '1.9',
+  email: 'john.doe@test.com'
+})
+// defaultObject = { name: 'John', surname: 'Doe', address: { street: 'Main Street', number: 1 }, age: null, height: 1.9, weight: 80, email: 'john.doe@test.com' }
+```
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

package/dist/VvForm.d.ts

@@ -13,6 +13,10 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
         type: ObjectConstructor;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     submit: () => boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -20,6 +24,10 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
         type: ObjectConstructor;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onValid?: ((...args: any[]) => any) | undefined;
     onInvalid?: ((...args: any[]) => any) | undefined;
@@ -27,4 +35,5 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
+    continuosValidation: boolean;
 }>;

package/dist/VvFormWrapper.d.ts

@@ -10,7 +10,7 @@ export declare const defineFormWrapper: (formProvideKey: InjectionKey<InjectedFo
         default: undefined;
     };
 }, {
-    formProvided: InjectedFormData<Recrod<string | number, unknown>> | undefined;
+    formProvided: InjectedFormData | undefined;
     invalid: import("vue").ComputedRef<boolean>;
     fields: Ref<Set<string>>;
     errors: Ref<Map<string, Record<string, {

package/dist/index.d.ts

@@ -10,6 +10,10 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -17,6 +21,10 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -24,6 +32,7 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {
@@ -35,7 +44,7 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
             default: undefined;
         };
     }, {
-        formProvided: InjectedFormData<Recrod<string | number, unknown>> | undefined;
+        formProvided: InjectedFormData | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         errors: import("vue").Ref<Map<string, Record<string, {
@@ -56,8 +65,8 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
     }, {
         tag: string;
     }>;
-    VvFormField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    formInjectionKey: InjectionKey<InjectedFormData<Recrod<string | number, unknown>>>;
+    VvFormField: import("vue").Component;
+    formInjectionKey: InjectionKey<InjectedFormData>;
     formWrapperInjectionKey: InjectionKey<InjectedFormWrapperData>;
     formFieldInjectionKey: InjectionKey<InjectedFormFieldData>;
 };
@@ -69,6 +78,10 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -76,6 +89,10 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -83,6 +100,7 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {
@@ -94,7 +112,7 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
             default: undefined;
         };
     }, {
-        formProvided: InjectedFormData<Recrod<string | number, unknown>> | undefined;
+        formProvided: InjectedFormData | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         errors: import("vue").Ref<Map<string, Record<string, {
@@ -115,8 +133,8 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
     }, {
         tag: string;
     }>;
-    VvFormField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    formInjectionKey: InjectionKey<InjectedFormData<Recrod<string | number, unknown>>>;
+    VvFormField: import("vue").Component;
+    formInjectionKey: InjectionKey<InjectedFormData>;
     formWrapperInjectionKey: InjectionKey<InjectedFormWrapperData>;
     formFieldInjectionKey: InjectionKey<InjectedFormFieldData>;
 };

package/dist/index.es.js

@@ -1,77 +1,77 @@
-import { defineComponent as w, computed as h, onMounted as Z, inject as S, toRefs as G, watch as V, provide as $, readonly as M, resolveComponent as b, defineAsyncComponent as q, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
-import { watchThrottled as X } from "@vueuse/core";
-import { ZodEffects as P, ZodDefault as T, ZodObject as F } from "zod";
-function A(e) {
+import { defineComponent as $, computed as V, onMounted as J, inject as k, toRefs as D, watch as y, provide as E, readonly as S, resolveComponent as h, defineAsyncComponent as z, h as x, ref as g, isProxy as U, toRaw as q, withModifiers as H } from "vue";
+import { watchThrottled as Q } from "@vueuse/core";
+import { ZodEffects as R, ZodObject as L, ZodDefault as X, ZodNullable as Y, ZodSchema as P } from "zod";
+function w(e) {
   return Array.isArray(e);
 }
-function ee(e) {
+function F(e) {
   return typeof e < "u";
 }
 function N(e) {
   return e === null;
 }
-function L(e) {
+function _(e) {
   return typeof e == "object";
 }
-function D(e) {
+function W(e) {
   return typeof e == "string";
 }
-function E(e) {
+function O(e) {
   return typeof e > "u";
 }
-const re = /^[0-9]+$/, te = ["__proto__", "prototype", "constructor"];
-function _(e, r, t) {
-  const a = ee(t) ? t : void 0;
-  if (!L(e) || !D(r))
-    return a;
-  const n = W(r);
-  if (n.length !== 0) {
-    for (const u of n) {
-      if (u === "*")
+const T = /^[0-9]+$/, ee = ["__proto__", "prototype", "constructor"];
+function A(e, n, o) {
+  const s = F(o) ? o : void 0;
+  if (!_(e) || !W(n))
+    return s;
+  const t = K(n);
+  if (t.length !== 0) {
+    for (const r of t) {
+      if (r === "*")
         continue;
-      const i = function(s) {
-        return s.map((f) => E(f) || N(f) ? f : A(f) ? i(f) : f[u]);
+      const i = function(l) {
+        return l.map((c) => O(c) || N(c) ? c : w(c) ? i(c) : c[r]);
       };
-      if (A(e) && !re.test(u) ? e = i(e) : e = e[u], E(e) || N(e))
+      if (w(e) && !T.test(r) ? e = i(e) : e = e[r], O(e) || N(e))
         break;
     }
-    return E(e) ? a : e;
+    return O(e) ? s : e;
   }
 }
-function U(e, r, t) {
-  if (!L(e) || !D(r))
+function B(e, n, o) {
+  if (!_(e) || !W(n))
     return;
-  const a = W(r);
-  if (a.length === 0)
+  const s = K(n);
+  if (s.length === 0)
     return;
-  const n = a.length;
-  for (let u = 0; u < n; u++) {
-    const i = a[u];
-    if (u === n - 1) {
-      e[i] = t;
+  const t = s.length;
+  for (let r = 0; r < t; r++) {
+    const i = s[r];
+    if (r === t - 1) {
+      e[i] = o;
       return;
     }
-    if (i === "*" && A(e)) {
-      const s = a.slice(u + 1).join(".");
-      for (const f of e)
-        U(f, s, t);
+    if (i === "*" && w(e)) {
+      const l = s.slice(r + 1).join(".");
+      for (const c of e)
+        B(c, l, o);
       return;
     }
-    E(e[i]) && (e[i] = {}), e = e[i];
+    O(e[i]) && (e[i] = {}), e = e[i];
   }
 }
-function W(e) {
-  const r = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
-  return r.some((t) => te.indexOf(t) !== -1) ? [] : r;
+function K(e) {
+  const n = e.split(/[.]|(?:\[(\d|\*)\])/).filter((o) => !!o);
+  return n.some((o) => ee.indexOf(o) !== -1) ? [] : n;
 }
-var l = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(l || {});
-const ne = (e, r, t, a = {}) => w({
+var u = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(u || {});
+const te = (e, n, o, s = {}) => $({
   name: "FieldComponent",
   props: {
     type: {
       type: String,
-      validator: (n) => Object.values(l).includes(n),
-      default: l.custom
+      validator: (t) => Object.values(u).includes(t),
+      default: u.custom
     },
     is: {
       type: [Object, String],
@@ -96,284 +96,234 @@ const ne = (e, r, t, a = {}) => w({
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(n, { slots: u, emit: i }) {
-    const s = h({
+  setup(t, { slots: r, emit: i }) {
+    const l = V({
       get() {
-        if (o != null && o.modelValue)
-          return _(
-            Object(o.modelValue.value),
-            String(n.name)
+        if (a != null && a.modelValue)
+          return A(
+            Object(a.modelValue.value),
+            String(t.name)
           );
       },
-      set(c) {
-        o != null && o.modelValue && (U(
-          Object(o.modelValue.value),
-          String(n.name),
-          c
+      set(f) {
+        a != null && a.modelValue && (B(
+          Object(a.modelValue.value),
+          String(t.name),
+          f
         ), i("update:modelValue", {
-          newValue: s.value,
-          formData: o == null ? void 0 : o.modelValue
+          newValue: l.value,
+          formData: a == null ? void 0 : a.modelValue
         }));
       }
     });
-    Z(() => {
-      s.value === void 0 && n.defaultValue !== void 0 && (s.value = n.defaultValue);
+    J(() => {
+      l.value === void 0 && t.defaultValue !== void 0 && (l.value = t.defaultValue);
     });
-    const f = S(r, void 0);
-    f && f.fields.value.add(n.name);
-    const o = S(e), { props: d, name: m } = G(n), v = h(() => {
-      if (o != null && o.errors.value)
-        return _(o.errors.value, String(n.name));
-    }), y = h(() => {
-      var c;
-      return (c = v.value) == null ? void 0 : c._errors;
-    }), p = h(() => v.value !== void 0);
-    V(p, () => {
-      p.value ? (i("invalid", y.value), f && f.errors.value.set(n.name, {
-        _errors: y.value
-      })) : (i("valid", s.value), f && f.errors.value.delete(
-        n.name
+    const c = k(n, void 0);
+    c && c.fields.value.add(t.name);
+    const a = k(e), { props: m, name: v } = D(t), d = V(() => {
+      if (a != null && a.errors.value)
+        return A(a.errors.value, String(t.name));
+    }), p = V(() => {
+      var f;
+      return (f = d.value) == null ? void 0 : f._errors;
+    }), b = V(() => d.value !== void 0);
+    y(b, () => {
+      b.value ? (i("invalid", p.value), c && c.errors.value.set(t.name, {
+        _errors: p.value
+      })) : (i("valid", l.value), c && c.errors.value.delete(
+        t.name
       ));
-    }), V(
-      () => o == null ? void 0 : o.modelValue,
+    }), y(
+      () => a == null ? void 0 : a.modelValue,
       () => {
-        i("update:formData", o == null ? void 0 : o.modelValue);
+        i("update:formData", a == null ? void 0 : a.modelValue);
       },
       { deep: !0 }
     );
-    const k = (c) => {
-      s.value = c;
-    }, I = h(() => typeof d.value == "function" ? d.value(o == null ? void 0 : o.modelValue) : d.value), R = h(() => ({
-      ...I.value,
-      name: I.value.name ?? n.name,
-      invalid: p.value,
-      valid: n.showValid ? Boolean(!p.value && s.value) : void 0,
-      type: ((c) => {
+    const G = (f) => {
+      l.value = f;
+    }, C = V(() => typeof m.value == "function" ? m.value(a == null ? void 0 : a.modelValue) : m.value), j = V(() => ({
+      ...C.value,
+      name: C.value.name ?? t.name,
+      invalid: b.value,
+      valid: t.showValid ? !!(!b.value && l.value) : void 0,
+      type: ((f) => {
         if ([
-          l.text,
-          l.number,
-          l.email,
-          l.password,
-          l.tel,
-          l.url,
-          l.search,
-          l.date,
-          l.time,
-          l.datetimeLocal,
-          l.month,
-          l.week,
-          l.color
-        ].includes(c))
-          return c;
-      })(n.type),
-      invalidLabel: y.value,
-      modelValue: s.value,
-      errors: n.is ? v.value : void 0,
-      "onUpdate:modelValue": k
+          u.text,
+          u.number,
+          u.email,
+          u.password,
+          u.tel,
+          u.url,
+          u.search,
+          u.date,
+          u.time,
+          u.datetimeLocal,
+          u.month,
+          u.week,
+          u.color
+        ].includes(f))
+          return f;
+      })(t.type),
+      invalidLabel: p.value,
+      modelValue: l.value,
+      errors: t.is ? d.value : void 0,
+      "onUpdate:modelValue": G
     }));
-    return $(t, {
-      name: M(m),
-      errors: M(v)
-    }), { component: h(() => {
-      if (n.type === l.custom)
+    return E(o, {
+      name: S(v),
+      errors: S(d)
+    }), { component: V(() => {
+      if (t.type === u.custom)
         return {
           render() {
-            var c;
-            return ((c = u.default) == null ? void 0 : c.call(u, {
-              modelValue: s.value,
-              onUpdate: k,
-              invalid: p.value,
-              invalidLabel: y.value,
-              formData: o == null ? void 0 : o.modelValue.value,
-              formErrors: o == null ? void 0 : o.errors.value,
-              errors: v.value
-            })) ?? u.defalut;
+            var f;
+            return ((f = r.default) == null ? void 0 : f.call(r, {
+              modelValue: l.value,
+              onUpdate: G,
+              invalid: b.value,
+              invalidLabel: p.value,
+              formData: a == null ? void 0 : a.modelValue.value,
+              formErrors: a == null ? void 0 : a.errors.value,
+              errors: d.value
+            })) ?? r.defalut;
           }
         };
-      if (!a.lazyLoad) {
-        let c;
-        switch (n.type) {
-          case l.select:
-            c = b("VvSelect");
+      if (!s.lazyLoad) {
+        let f;
+        switch (t.type) {
+          case u.select:
+            f = h("VvSelect");
             break;
-          case l.checkbox:
-            c = b("VvCheckbox");
+          case u.checkbox:
+            f = h("VvCheckbox");
             break;
-          case l.radio:
-            c = b("VvRadio");
+          case u.radio:
+            f = h("VvRadio");
             break;
-          case l.textarea:
-            c = b("VvTextarea");
+          case u.textarea:
+            f = h("VvTextarea");
             break;
-          case l.radioGroup:
-            c = b("VvRadioGroup");
+          case u.radioGroup:
+            f = h("VvRadioGroup");
             break;
-          case l.checkboxGroup:
-            c = b("VvCheckboxGroup");
+          case u.checkboxGroup:
+            f = h("VvCheckboxGroup");
             break;
-          case l.combobox:
-            c = b("VvCombobox");
+          case u.combobox:
+            f = h("VvCombobox");
             break;
           default:
-            c = b("VvInputText");
+            f = h("VvInputText");
         }
-        if (typeof c != "string")
-          return c;
+        if (typeof f != "string")
+          return f;
         console.warn(
-          `[form-vue warn]: ${c} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
+          `[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
         );
       }
-      return q(async () => {
-        switch (a.sideEffects && await Promise.resolve(a.sideEffects(n.type)), n.type) {
-          case l.textarea:
+      return z(async () => {
+        switch (s.sideEffects && await Promise.resolve(s.sideEffects(t.type)), t.type) {
+          case u.textarea:
             return import("@volverjs/ui-vue/vv-textarea");
-          case l.radio:
+          case u.radio:
             return import("@volverjs/ui-vue/vv-radio");
-          case l.radioGroup:
+          case u.radioGroup:
             return import("@volverjs/ui-vue/vv-radio-group");
-          case l.checkbox:
+          case u.checkbox:
             return import("@volverjs/ui-vue/vv-checkbox");
-          case l.checkboxGroup:
+          case u.checkboxGroup:
             return import("@volverjs/ui-vue/vv-checkbox-group");
-          case l.combobox:
+          case u.combobox:
             return import("@volverjs/ui-vue/vv-combobox");
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: R, invalid: p };
+    }), hasProps: j, invalid: b };
   },
   render() {
-    return this.is ? O(this.is, this.hasProps, this.$slots) : this.type === l.custom ? O(this.component, null, this.$slots) : O(this.component, this.hasProps, this.$slots);
-  }
-});
-var ae = function(r) {
-  return ue(r) && !oe(r);
-};
-function ue(e) {
-  return !!e && typeof e == "object";
-}
-function oe(e) {
-  var r = Object.prototype.toString.call(e);
-  return r === "[object RegExp]" || r === "[object Date]" || se(e);
-}
-var le = typeof Symbol == "function" && Symbol.for, ie = le ? Symbol.for("react.element") : 60103;
-function se(e) {
-  return e.$$typeof === ie;
-}
-function ce(e) {
-  return Array.isArray(e) ? [] : {};
-}
-function j(e, r) {
-  return r.clone !== !1 && r.isMergeableObject(e) ? g(ce(e), e, r) : e;
-}
-function fe(e, r, t) {
-  return e.concat(r).map(function(a) {
-    return j(a, t);
-  });
-}
-function de(e, r) {
-  if (!r.customMerge)
-    return g;
-  var t = r.customMerge(e);
-  return typeof t == "function" ? t : g;
-}
-function me(e) {
-  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(e).filter(function(r) {
-    return Object.propertyIsEnumerable.call(e, r);
-  }) : [];
-}
-function C(e) {
-  return Object.keys(e).concat(me(e));
-}
-function B(e, r) {
-  try {
-    return r in e;
-  } catch {
-    return !1;
+    return this.is ? x(this.is, this.hasProps, this.$slots) : this.type === u.custom ? x(this.component, null, this.$slots) : x(this.component, this.hasProps, this.$slots);
   }
-}
-function ve(e, r) {
-  return B(e, r) && !(Object.hasOwnProperty.call(e, r) && Object.propertyIsEnumerable.call(e, r));
-}
-function be(e, r, t) {
-  var a = {};
-  return t.isMergeableObject(e) && C(e).forEach(function(n) {
-    a[n] = j(e[n], t);
-  }), C(r).forEach(function(n) {
-    ve(e, n) || (B(e, n) && t.isMergeableObject(r[n]) ? a[n] = de(n, t)(e[n], r[n], t) : a[n] = j(r[n], t));
-  }), a;
-}
-function g(e, r, t) {
-  t = t || {}, t.arrayMerge = t.arrayMerge || fe, t.isMergeableObject = t.isMergeableObject || ae, t.cloneUnlessOtherwiseSpecified = j;
-  var a = Array.isArray(r), n = Array.isArray(e), u = a === n;
-  return u ? a ? t.arrayMerge(e, r, t) : be(e, r, t) : j(r, t);
-}
-g.all = function(r, t) {
-  if (!Array.isArray(r))
-    throw new Error("first argument should be an array");
-  return r.reduce(function(a, n) {
-    return g(a, n, t);
-  }, {});
-};
-var he = g, ye = he;
-const J = (e, r = {}) => {
-  const t = e instanceof P ? e.innerType().shape : e.shape;
-  return ye(
-    Object.fromEntries(
-      Object.entries(t).map(([a, n]) => n instanceof T ? [a, n._def.defaultValue()] : n instanceof F ? [a, J(n)] : [a, void 0])
-    ),
-    r
-  );
-}, pe = (e, r, t) => w({
+}), M = (e, n = {}) => {
+  const o = e instanceof R ? e.innerType().shape : e.shape;
+  return {
+    ...(e instanceof L ? e._def.unknownKeys === "passthrough" : !1) ? n : {},
+    ...Object.fromEntries(
+      Object.entries(o).map(([t, r]) => {
+        const i = n[t];
+        let l;
+        if (r instanceof X && (l = r._def.defaultValue()), i === null && r instanceof Y)
+          return [t, i];
+        if (r instanceof P) {
+          const c = r.safeParse(n[t]);
+          if (c.success)
+            return [t, c.data ?? l];
+        }
+        return r instanceof L ? [
+          t,
+          M(
+            r,
+            i && typeof i == "object" ? i : {}
+          )
+        ] : [t, l];
+      })
+    )
+  };
+}, re = (e, n, o) => $({
   name: "FormComponent",
   props: {
     modelValue: {
       type: Object,
       default: () => ({})
+    },
+    continuosValidation: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["invalid", "valid", "submit", "update:modelValue"],
   expose: ["submit", "errors", "status"],
-  setup(a, { emit: n }) {
-    const u = x(
-      J(e, a.modelValue)
-    );
-    V(
-      () => a.modelValue,
-      (d) => {
-        if (d) {
-          const m = Y(d) ? H(d) : d;
-          u.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
+  setup(s, { emit: t }) {
+    const r = g(
+      M(e, s.modelValue)
+    ), i = (o == null ? void 0 : o.continuosValidation) || s.continuosValidation;
+    y(
+      () => s.modelValue,
+      (v) => {
+        if (v) {
+          const d = U(v) ? q(v) : v;
+          r.value = typeof (d == null ? void 0 : d.clone) == "function" ? d.clone() : JSON.parse(JSON.stringify(d));
         }
       },
       { deep: !0 }
-    ), X(
-      u,
-      (d) => {
-        (i.value || t != null && t.continuosValidation) && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
+    ), Q(
+      r,
+      (v) => {
+        (l.value || i) && a(), (!v || !s.modelValue || JSON.stringify(v) !== JSON.stringify(s.modelValue)) && t("update:modelValue", v);
       },
-      { deep: !0, throttle: (t == null ? void 0 : t.updateThrottle) ?? 500 }
+      { deep: !0, throttle: (o == null ? void 0 : o.updateThrottle) ?? 500 }
     );
-    const i = x(), s = x(), f = (d = u.value) => {
-      const m = e.safeParse(d);
-      return m.success ? (i.value = void 0, s.value = "valid", u.value = m.data, n("valid", m.data), !0) : (i.value = m.error.format(), s.value = "invalid", n("invalid", i.value), !1);
-    }, o = () => f() ? (n("submit", u.value), !0) : !1;
-    return $(r, {
-      modelValue: u,
-      submit: o,
-      errors: M(i)
-    }), { submit: o };
+    const l = g(), c = g(), a = (v = r.value) => {
+      const d = e.safeParse(v);
+      return d.success ? (l.value = void 0, c.value = "valid", r.value = d.data, t("valid", d.data), !0) : (l.value = d.error.format(), c.value = "invalid", t("invalid", l.value), !1);
+    }, m = () => a() ? (t("submit", r.value), !0) : !1;
+    return E(n, {
+      modelValue: r,
+      submit: m,
+      errors: S(l)
+    }), { submit: m };
   },
   render() {
-    return O(
+    return x(
       "form",
       {
-        onSubmit: Q(this.submit, ["prevent"])
+        onSubmit: H(this.submit, ["prevent"])
       },
       this.$slots
     );
   }
-}), Ve = (e, r) => w({
+}), ae = (e, n) => $({
   name: "WrapperComponent",
   props: {
     name: {
@@ -387,90 +337,90 @@ const J = (e, r = {}) => {
   },
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
-  setup(t, { emit: a }) {
-    const n = S(e), u = S(r, void 0), i = x(/* @__PURE__ */ new Set()), s = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
-    $(r, {
-      name: M(f),
-      errors: s,
+  setup(o, { emit: s }) {
+    const t = k(e), r = k(n, void 0), i = g(/* @__PURE__ */ new Set()), l = g(/* @__PURE__ */ new Map()), { name: c } = D(o);
+    E(n, {
+      name: S(c),
+      errors: l,
       fields: i
-    }), V(
+    }), y(
       i,
-      (d) => {
-        u != null && u.fields && d.forEach((m) => {
-          u == null || u.fields.value.add(m);
+      (m) => {
+        r != null && r.fields && m.forEach((v) => {
+          r == null || r.fields.value.add(v);
         });
       },
       { deep: !0 }
-    ), V(
-      () => new Map(s.value),
-      (d, m) => {
-        u != null && u.errors && (Array.from(m.keys()).forEach((v) => {
-          u.errors.value.delete(v);
-        }), Array.from(d.keys()).forEach((v) => {
-          const y = d.get(v);
-          y && u.errors.value.set(v, y);
+    ), y(
+      () => new Map(l.value),
+      (m, v) => {
+        r != null && r.errors && (Array.from(v.keys()).forEach((d) => {
+          r.errors.value.delete(d);
+        }), Array.from(m.keys()).forEach((d) => {
+          const p = m.get(d);
+          p && r.errors.value.set(d, p);
         }));
       },
       { deep: !0 }
     );
-    const o = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
-    return V(o, () => {
-      o.value ? a("invalid") : a("valid");
-    }), { formProvided: n, invalid: o, fields: i, errors: s };
+    const a = V(() => t != null && t.errors.value ? l.value.size > 0 : !1);
+    return y(a, () => {
+      a.value ? s("invalid") : s("valid");
+    }), { formProvided: t, invalid: a, fields: i, errors: l };
   },
   render() {
-    var t, a, n, u, i, s, f, o;
-    return this.tag ? O(
+    var o, s, t, r, i, l, c, a;
+    return this.tag ? x(
       this.tag,
       null,
-      ((u = (n = this.$slots).default) == null ? void 0 : u.call(n, {
+      ((r = (t = this.$slots).default) == null ? void 0 : r.call(t, {
         invalid: this.invalid,
-        formData: (t = this.formProvided) == null ? void 0 : t.modelValue,
-        errors: (a = this.formProvided) == null ? void 0 : a.errors,
+        formData: (o = this.formProvided) == null ? void 0 : o.modelValue,
+        errors: (s = this.formProvided) == null ? void 0 : s.errors,
         fieldsErrors: this.errors
       })) ?? this.$slots.defalut
-    ) : ((o = (f = this.$slots).default) == null ? void 0 : o.call(f, {
+    ) : ((a = (c = this.$slots).default) == null ? void 0 : a.call(c, {
       invalid: this.invalid,
       formData: (i = this.formProvided) == null ? void 0 : i.modelValue,
-      errors: (s = this.formProvided) == null ? void 0 : s.errors,
+      errors: (l = this.formProvided) == null ? void 0 : l.errors,
       fieldsErrors: this.errors
     })) ?? this.$slots.defalut;
   }
-}), K = (e, r = {}) => {
-  const t = Symbol(), a = Symbol(), n = Symbol(), u = pe(e, t, r), i = Ve(
-    t,
-    a
-  ), s = ne(
+}), I = (e, n = {}) => {
+  const o = Symbol(), s = Symbol(), t = Symbol(), r = re(e, o, n), i = ae(
+    o,
+    s
+  ), l = te(
+    o,
+    s,
     t,
-    a,
-    n,
-    r
+    n
   );
   return {
-    VvForm: u,
+    VvForm: r,
     VvFormWrapper: i,
-    VvFormField: s,
-    formInjectionKey: t,
-    formWrapperInjectionKey: a,
-    formFieldInjectionKey: n
+    VvFormField: l,
+    formInjectionKey: o,
+    formWrapperInjectionKey: s,
+    formFieldInjectionKey: t
   };
-}, z = Symbol(), je = (e) => {
-  let r = {};
-  return e.schema && (r = K(e.schema, e)), {
-    ...r,
-    install(t, { global: a = !1 } = {}) {
-      t.provide(z, e), a && (t.config.globalProperties.$vvForm = e, r != null && r.VvForm && t.component("VvForm", r.VvForm), r != null && r.VvFormWrapper && t.component("VvFormWrapper", r.VvFormWrapper), r != null && r.VvFormField && t.component("VvFormField", r.VvFormField));
+}, Z = Symbol(), se = (e) => {
+  let n = {};
+  return e.schema && (n = I(e.schema, e)), {
+    ...n,
+    install(o, { global: s = !1 } = {}) {
+      o.provide(Z, e), s && (o.config.globalProperties.$vvForm = e, n != null && n.VvForm && o.component("VvForm", n.VvForm), n != null && n.VvFormWrapper && o.component("VvFormWrapper", n.VvFormWrapper), n != null && n.VvFormField && o.component("VvFormField", n.VvFormField));
     }
   };
-}, Ee = (e, r = {}) => {
-  const t = { ...S(z, {}), ...r };
-  return K(e, t);
+}, ie = (e, n = {}) => {
+  const o = { ...k(Z, {}), ...n };
+  return I(e, o);
 };
 export {
-  l as FormFieldType,
-  je as createForm,
-  J as defaultObjectBySchema,
-  K as formFactory,
-  z as pluginInjectionKey,
-  Ee as useForm
+  u as FormFieldType,
+  se as createForm,
+  M as defaultObjectBySchema,
+  I as formFactory,
+  Z as pluginInjectionKey,
+  ie as useForm
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(b,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],a):(b=typeof globalThis<"u"?globalThis:b||self,a(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,a,D,S){"use strict";function j(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function E(e){return e===null}function A(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const W=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,r,t){const o=U(t)?t:void 0;if(!A(e)||!C(r))return o;const n=I(r);if(n.length!==0){for(const l of n){if(l==="*")continue;const c=function(u){return u.map(d=>O(d)||E(d)?d:j(d)?c(d):d[l])};if(j(e)&&!W.test(l)?e=c(e):e=e[l],O(e)||E(e))break}return O(e)?o:e}}function k(e,r,t){if(!A(e)||!C(r))return;const o=I(r);if(o.length===0)return;const n=o.length;for(let l=0;l<n;l++){const c=o[l];if(l===n-1){e[c]=t;return}if(c==="*"&&j(e)){const u=o.slice(l+1).join(".");for(const d of e)k(d,u,t);return}O(e[c])&&(e[c]={}),e=e[c]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>B.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>a.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:n=>Object.values(s).includes(n),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(n,{slots:l,emit:c}){const u=a.computed({get(){if(i!=null&&i.modelValue)return $(Object(i.modelValue.value),String(n.name))},set(f){i!=null&&i.modelValue&&(k(Object(i.modelValue.value),String(n.name),f),c("update:modelValue",{newValue:u.value,formData:i==null?void 0:i.modelValue}))}});a.onMounted(()=>{u.value===void 0&&n.defaultValue!==void 0&&(u.value=n.defaultValue)});const d=a.inject(r,void 0);d&&d.fields.value.add(n.name);const i=a.inject(e),{props:m,name:h}=a.toRefs(n),p=a.computed(()=>{if(i!=null&&i.errors.value)return $(i.errors.value,String(n.name))}),y=a.computed(()=>{var f;return(f=p.value)==null?void 0:f._errors}),V=a.computed(()=>p.value!==void 0);a.watch(V,()=>{V.value?(c("invalid",y.value),d&&d.errors.value.set(n.name,{_errors:y.value})):(c("valid",u.value),d&&d.errors.value.delete(n.name))}),a.watch(()=>i==null?void 0:i.modelValue,()=>{c("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{u.value=f},L=a.computed(()=>typeof m.value=="function"?m.value(i==null?void 0:i.modelValue):m.value),le=a.computed(()=>({...L.value,name:L.value.name??n.name,invalid:V.value,valid:n.showValid?Boolean(!V.value&&u.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(n.type),invalidLabel:y.value,modelValue:u.value,errors:n.is?p.value:void 0,"onUpdate:modelValue":G}));return a.provide(t,{name:a.readonly(h),errors:a.readonly(p)}),{component:a.computed(()=>{if(n.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:u.value,onUpdate:G,invalid:V.value,invalidLabel:y.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:p.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(n.type){case s.select:f=a.resolveComponent("VvSelect");break;case s.checkbox:f=a.resolveComponent("VvCheckbox");break;case s.radio:f=a.resolveComponent("VvRadio");break;case s.textarea:f=a.resolveComponent("VvTextarea");break;case s.radioGroup:f=a.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=a.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=a.resolveComponent("VvCombobox");break;default:f=a.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return a.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(n.type)),n.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?a.h(this.is,this.hasProps,this.$slots):this.type===s.custom?a.h(this.component,null,this.$slots):a.h(this.component,this.hasProps,this.$slots)}});var K=function(r){return z(r)&&!J(r)};function z(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?v(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return v;var t=r.customMerge(e);return typeof t=="function"?t:v}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function T(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function F(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(n){o[n]=g(e[n],t)}),N(r).forEach(function(n){T(e,n)||(_(e,n)&&t.isMergeableObject(r[n])?o[n]=X(n,t)(e[n],r[n],t):o[n]=g(r[n],t))}),o}function v(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||K,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),n=Array.isArray(e),l=o===n;return l?o?t.arrayMerge(e,r,t):F(e,r,t):g(r,t)}v.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,n){return v(o,n,t)},{})};var ee=v,re=ee;const x=(e,r={})=>{const t=e instanceof S.ZodEffects?e.innerType().shape:e.shape;return re(Object.fromEntries(Object.entries(t).map(([o,n])=>n instanceof S.ZodDefault?[o,n._def.defaultValue()]:n instanceof S.ZodObject?[o,x(n)]:[o,void 0])),r)},te=(e,r,t)=>a.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:n}){const l=a.ref(x(e,o.modelValue));a.watch(()=>o.modelValue,m=>{if(m){const h=a.isProxy(m)?a.toRaw(m):m;l.value=typeof(h==null?void 0:h.clone)=="function"?h.clone():JSON.parse(JSON.stringify(h))}},{deep:!0}),D.watchThrottled(l,m=>{(c.value||t!=null&&t.continuosValidation)&&d(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&n("update:modelValue",m)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=a.ref(),u=a.ref(),d=(m=l.value)=>{const h=e.safeParse(m);return h.success?(c.value=void 0,u.value="valid",l.value=h.data,n("valid",h.data),!0):(c.value=h.error.format(),u.value="invalid",n("invalid",c.value),!1)},i=()=>d()?(n("submit",l.value),!0):!1;return a.provide(r,{modelValue:l,submit:i,errors:a.readonly(c)}),{submit:i}},render(){return a.h("form",{onSubmit:a.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>a.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const n=a.inject(e),l=a.inject(r,void 0),c=a.ref(new Set),u=a.ref(new Map),{name:d}=a.toRefs(t);a.provide(r,{name:a.readonly(d),errors:u,fields:c}),a.watch(c,m=>{l!=null&&l.fields&&m.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),a.watch(()=>new Map(u.value),(m,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(p=>{l.errors.value.delete(p)}),Array.from(m.keys()).forEach(p=>{const y=m.get(p);y&&l.errors.value.set(p,y)}))},{deep:!0});const i=a.computed(()=>n!=null&&n.errors.value?u.value.size>0:!1);return a.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:n,invalid:i,fields:c,errors:u}},render(){var t,o,n,l,c,u,d,i;return this.tag?a.h(this.tag,null,((l=(n=this.$slots).default)==null?void 0:l.call(n,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,r={})=>{const t=Symbol(),o=Symbol(),n=Symbol(),l=te(e,t,r),c=ne(t,o),u=q(t,o,n,r);return{VvForm:l,VvFormWrapper:c,VvFormField:u,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:n}},M=Symbol(),ae=e=>{let r={};return e.schema&&(r=w(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(M,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...a.inject(M,{}),...r};return w(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=x,b.formFactory=w,b.pluginInjectionKey=M,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v["@volverjs/form-vue"]={},v.Vue,v.VueUseCore,v.zod))})(this,function(v,t,A,y){"use strict";function x(e){return Array.isArray(e)}function D(e){return typeof e<"u"}function S(e){return e===null}function C(e){return typeof e=="object"}function j(e){return typeof e=="string"}function g(e){return typeof e>"u"}const _=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,o,l){const u=D(l)?l:void 0;if(!C(e)||!j(o))return u;const r=G(o);if(r.length!==0){for(const n of r){if(n==="*")continue;const c=function(i){return i.map(f=>g(f)||S(f)?f:x(f)?c(f):f[n])};if(x(e)&&!_.test(n)?e=c(e):e=e[n],g(e)||S(e))break}return g(e)?u:e}}function E(e,o,l){if(!C(e)||!j(o))return;const u=G(o);if(u.length===0)return;const r=u.length;for(let n=0;n<r;n++){const c=u[n];if(n===r-1){e[c]=l;return}if(c==="*"&&x(e)){const i=u.slice(n+1).join(".");for(const f of e)E(f,i,l);return}g(e[c])&&(e[c]={}),e=e[c]}}function G(e){const o=e.split(/[.]|(?:\[(\d|\*)\])/).filter(l=>!!l);return o.some(l=>B.indexOf(l)!==-1)?[]:o}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const K=(e,o,l,u={})=>t.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:r=>Object.values(s).includes(r),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(r,{slots:n,emit:c}){const i=t.computed({get(){if(a!=null&&a.modelValue)return $(Object(a.modelValue.value),String(r.name))},set(d){a!=null&&a.modelValue&&(E(Object(a.modelValue.value),String(r.name),d),c("update:modelValue",{newValue:i.value,formData:a==null?void 0:a.modelValue}))}});t.onMounted(()=>{i.value===void 0&&r.defaultValue!==void 0&&(i.value=r.defaultValue)});const f=t.inject(o,void 0);f&&f.fields.value.add(r.name);const a=t.inject(e),{props:p,name:h}=t.toRefs(r),m=t.computed(()=>{if(a!=null&&a.errors.value)return $(a.errors.value,String(r.name))}),V=t.computed(()=>{var d;return(d=m.value)==null?void 0:d._errors}),b=t.computed(()=>m.value!==void 0);t.watch(b,()=>{b.value?(c("invalid",V.value),f&&f.errors.value.set(r.name,{_errors:V.value})):(c("valid",i.value),f&&f.errors.value.delete(r.name))}),t.watch(()=>a==null?void 0:a.modelValue,()=>{c("update:formData",a==null?void 0:a.modelValue)},{deep:!0});const L=d=>{i.value=d},N=t.computed(()=>typeof p.value=="function"?p.value(a==null?void 0:a.modelValue):p.value),q=t.computed(()=>({...N.value,name:N.value.name??r.name,invalid:b.value,valid:r.showValid?!!(!b.value&&i.value):void 0,type:(d=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(d))return d})(r.type),invalidLabel:V.value,modelValue:i.value,errors:r.is?m.value:void 0,"onUpdate:modelValue":L}));return t.provide(l,{name:t.readonly(h),errors:t.readonly(m)}),{component:t.computed(()=>{if(r.type===s.custom)return{render(){var d;return((d=n.default)==null?void 0:d.call(n,{modelValue:i.value,onUpdate:L,invalid:b.value,invalidLabel:V.value,formData:a==null?void 0:a.modelValue.value,formErrors:a==null?void 0:a.errors.value,errors:m.value}))??n.defalut}};if(!u.lazyLoad){let d;switch(r.type){case s.select:d=t.resolveComponent("VvSelect");break;case s.checkbox:d=t.resolveComponent("VvCheckbox");break;case s.radio:d=t.resolveComponent("VvRadio");break;case s.textarea:d=t.resolveComponent("VvTextarea");break;case s.radioGroup:d=t.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:d=t.resolveComponent("VvCheckboxGroup");break;case s.combobox:d=t.resolveComponent("VvCombobox");break;default:d=t.resolveComponent("VvInputText")}if(typeof d!="string")return d;console.warn(`[form-vue warn]: ${d} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return t.defineAsyncComponent(async()=>{switch(u.sideEffects&&await Promise.resolve(u.sideEffects(r.type)),r.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:q,invalid:b}},render(){return this.is?t.h(this.is,this.hasProps,this.$slots):this.type===s.custom?t.h(this.component,null,this.$slots):t.h(this.component,this.hasProps,this.$slots)}}),k=(e,o={})=>{const l=e instanceof y.ZodEffects?e.innerType().shape:e.shape;return{...(e instanceof y.ZodObject?e._def.unknownKeys==="passthrough":!1)?o:{},...Object.fromEntries(Object.entries(l).map(([r,n])=>{const c=o[r];let i;if(n instanceof y.ZodDefault&&(i=n._def.defaultValue()),c===null&&n instanceof y.ZodNullable)return[r,c];if(n instanceof y.ZodSchema){const f=n.safeParse(o[r]);if(f.success)return[r,f.data??i]}return n instanceof y.ZodObject?[r,k(n,c&&typeof c=="object"?c:{})]:[r,i]}))}},M=(e,o,l)=>t.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})},continuosValidation:{type:Boolean,default:!1}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(u,{emit:r}){const n=t.ref(k(e,u.modelValue)),c=(l==null?void 0:l.continuosValidation)||u.continuosValidation;t.watch(()=>u.modelValue,h=>{if(h){const m=t.isProxy(h)?t.toRaw(h):h;n.value=typeof(m==null?void 0:m.clone)=="function"?m.clone():JSON.parse(JSON.stringify(m))}},{deep:!0}),A.watchThrottled(n,h=>{(i.value||c)&&a(),(!h||!u.modelValue||JSON.stringify(h)!==JSON.stringify(u.modelValue))&&r("update:modelValue",h)},{deep:!0,throttle:(l==null?void 0:l.updateThrottle)??500});const i=t.ref(),f=t.ref(),a=(h=n.value)=>{const m=e.safeParse(h);return m.success?(i.value=void 0,f.value="valid",n.value=m.data,r("valid",m.data),!0):(i.value=m.error.format(),f.value="invalid",r("invalid",i.value),!1)},p=()=>a()?(r("submit",n.value),!0):!1;return t.provide(o,{modelValue:n,submit:p,errors:t.readonly(i)}),{submit:p}},render(){return t.h("form",{onSubmit:t.withModifiers(this.submit,["prevent"])},this.$slots)}}),W=(e,o)=>t.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(l,{emit:u}){const r=t.inject(e),n=t.inject(o,void 0),c=t.ref(new Set),i=t.ref(new Map),{name:f}=t.toRefs(l);t.provide(o,{name:t.readonly(f),errors:i,fields:c}),t.watch(c,p=>{n!=null&&n.fields&&p.forEach(h=>{n==null||n.fields.value.add(h)})},{deep:!0}),t.watch(()=>new Map(i.value),(p,h)=>{n!=null&&n.errors&&(Array.from(h.keys()).forEach(m=>{n.errors.value.delete(m)}),Array.from(p.keys()).forEach(m=>{const V=p.get(m);V&&n.errors.value.set(m,V)}))},{deep:!0});const a=t.computed(()=>r!=null&&r.errors.value?i.value.size>0:!1);return t.watch(a,()=>{a.value?u("invalid"):u("valid")}),{formProvided:r,invalid:a,fields:c,errors:i}},render(){var l,u,r,n,c,i,f,a;return this.tag?t.h(this.tag,null,((n=(r=this.$slots).default)==null?void 0:n.call(r,{invalid:this.invalid,formData:(l=this.formProvided)==null?void 0:l.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((a=(f=this.$slots).default)==null?void 0:a.call(f,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(i=this.formProvided)==null?void 0:i.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,o={})=>{const l=Symbol(),u=Symbol(),r=Symbol(),n=M(e,l,o),c=W(l,u),i=K(l,u,r,o);return{VvForm:n,VvFormWrapper:c,VvFormField:i,formInjectionKey:l,formWrapperInjectionKey:u,formFieldInjectionKey:r}},O=Symbol(),I=e=>{let o={};return e.schema&&(o=w(e.schema,e)),{...o,install(l,{global:u=!1}={}){l.provide(O,e),u&&(l.config.globalProperties.$vvForm=e,o!=null&&o.VvForm&&l.component("VvForm",o.VvForm),o!=null&&o.VvFormWrapper&&l.component("VvFormWrapper",o.VvFormWrapper),o!=null&&o.VvFormField&&l.component("VvFormField",o.VvFormField))}}},Z=(e,o={})=>{const l={...t.inject(O,{}),...o};return w(e,l)};v.FormFieldType=s,v.createForm=I,v.defaultObjectBySchema=k,v.formFactory=w,v.pluginInjectionKey=O,v.useForm=Z,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.3",
+  "version": "0.0.5",
   "engines": {
     "node": ">= 16.x"
   },
@@ -36,31 +36,29 @@
   "dependencies": {
     "@volverjs/ui-vue": "0.0.5-beta.1",
     "@vueuse/core": "^9.13.0",
-    "deepmerge": "^4.3.0",
     "ts-dot-prop": "^2.1.2",
     "vue": "^3.2.47",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@testing-library/vue": "^6.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@testing-library/vue": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/runtime-core": "^3.2.47",
     "@vue/test-utils": "^2.3.1",
     "copy": "^0.3.2",
-    "eslint": "^8.35.0",
+    "eslint": "^8.36.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "happy-dom": "^8.9.0",
     "prettier": "^2.8.4",
-    "sass": "^1.58.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.2.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.5.0",
-    "vitest": "^0.29.2",
+    "vitest": "^0.29.3",
     "vue-tsc": "^1.2.0"
   },
   "typesVersions": {

package/src/VvForm.ts

@@ -36,6 +36,10 @@ export const defineForm = (
 				type: Object,
 				default: () => ({}),
 			},
+			continuosValidation: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
 		expose: ['submit', 'errors', 'status'],
@@ -43,6 +47,10 @@ export const defineForm = (
 			const localModelValue = ref(
 				defaultObjectBySchema(schema, props.modelValue),
 			)
+
+			const keepValidation =
+				options?.continuosValidation || props.continuosValidation
+
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -62,7 +70,7 @@ export const defineForm = (
 			watchThrottled(
 				localModelValue,
 				(newValue) => {
-					if (errors.value || options?.continuosValidation) {
+					if (errors.value || keepValidation) {
 						parseModelValue()
 					}
 					if (

package/src/utils.ts

@@ -1,10 +1,11 @@
-import merge from 'deepmerge'
 import {
 	type z,
 	type AnyZodObject,
 	ZodDefault,
 	ZodObject,
 	ZodEffects,
+	ZodSchema,
+	ZodNullable,
 } from 'zod'
 
 export const defaultObjectBySchema = <
@@ -15,18 +16,45 @@ export const defaultObjectBySchema = <
 ): Partial<z.infer<Schema>> => {
 	const shape =
 		schema instanceof ZodEffects ? schema.innerType().shape : schema.shape
-	return merge(
-		Object.fromEntries(
-			Object.entries(shape).map(([key, value]) => {
-				if (value instanceof ZodDefault) {
-					return [key, value._def.defaultValue()]
+
+	const unknownKeys =
+		schema instanceof ZodObject
+			? schema._def.unknownKeys === 'passthrough'
+			: false
+	return {
+		...(unknownKeys ? original : {}),
+		...Object.fromEntries(
+			Object.entries(shape).map(([key, subSchema]) => {
+				const originalValue = original[key]
+				let defaultValue = undefined
+				if (subSchema instanceof ZodDefault) {
+					defaultValue = subSchema._def.defaultValue()
+				}
+				if (
+					originalValue === null &&
+					subSchema instanceof ZodNullable
+				) {
+					return [key, originalValue]
+				}
+				if (subSchema instanceof ZodSchema) {
+					const parse = subSchema.safeParse(original[key])
+					if (parse.success) {
+						return [key, parse.data ?? defaultValue]
+					}
 				}
-				if (value instanceof ZodObject) {
-					return [key, defaultObjectBySchema(value)]
+				if (subSchema instanceof ZodObject) {
+					return [
+						key,
+						defaultObjectBySchema(
+							subSchema,
+							originalValue && typeof originalValue === 'object'
+								? originalValue
+								: {},
+						),
+					]
 				}
-				return [key, undefined]
+				return [key, defaultValue]
 			}),
 		),
-		original,
-	) as Partial<z.infer<Schema>>
+	} as Partial<z.infer<Schema>>
 }