@volverjs/form-vue 0.0.10-beta.2 → 0.0.10-beta.4

package/dist/VvFormWrapper.d.ts

@@ -23,10 +23,11 @@ export declare const defineFormWrapper: <Schema extends AnyZodObject | ZodEffect
         default: undefined;
     };
 }, {
-    formProvided: InjectedFormData<Schema> | undefined;
+    formData: Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
+    errors: Readonly<Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
     invalid: import("vue").ComputedRef<boolean>;
     fields: Ref<Set<string>>;
-    errors: Ref<Map<string, Record<string, {
+    fieldsErrors: Ref<Map<string, Record<string, {
         _errors: string[];
     }>>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid")[], "valid" | "invalid", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/index.d.ts

@@ -56,10 +56,11 @@ export declare const formFactory: <Schema extends AnyZodObject | ZodEffects<AnyZ
             default: undefined;
         };
     }, {
-        formProvided: InjectedFormData<Schema> | undefined;
+        formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
+        errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
-        errors: import("vue").Ref<Map<string, Record<string, {
+        fieldsErrors: import("vue").Ref<Map<string, Record<string, {
             _errors: string[];
         }>>>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid")[], "valid" | "invalid", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -217,10 +218,11 @@ export declare const useForm: <Schema extends AnyZodObject | ZodEffects<AnyZodOb
             default: undefined;
         };
     }, {
-        formProvided: InjectedFormData<Schema> | undefined;
+        formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
+        errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
-        errors: import("vue").Ref<Map<string, Record<string, {
+        fieldsErrors: import("vue").Ref<Map<string, Record<string, {
             _errors: string[];
         }>>>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid")[], "valid" | "invalid", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/index.es.js

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

package/dist/index.umd.js

@@ -1 +1 @@
-(function(p,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):(p=typeof globalThis<"u"?globalThis:p||self,t(p["@volverjs/form-vue"]={},p.Vue,p.VueUseCore,p.zod))})(this,function(p,t,N,b){"use strict";function x(e){return Array.isArray(e)}function A(e){return typeof e<"u"}function O(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 B=/^[0-9]+$/,I=["__proto__","prototype","constructor"];function $(e,o,l){const i=A(l)?l:void 0;if(!C(e)||!j(o))return i;const a=E(o);if(a.length!==0){for(const r of a){if(r==="*")continue;const s=function(u){return u.map(f=>g(f)||O(f)?f:x(f)?s(f):f[r])};if(x(e)&&!B.test(r)?e=s(e):e=e[r],g(e)||O(e))break}return g(e)?i:e}}function D(e,o,l){if(!C(e)||!j(o))return;const i=E(o);if(i.length===0)return;const a=i.length;for(let r=0;r<a;r++){const s=i[r];if(r===a-1){e[s]=l;return}if(s==="*"&&x(e)){const u=i.slice(r+1).join(".");for(const f of e)D(f,u,l);return}g(e[s])&&(e[s]={}),e=e[s]}}function E(e){const o=e.split(/[.]|(?:\[(\d|\*)\])/).filter(l=>!!l);return o.some(l=>I.indexOf(l)!==-1)?[]:o}var c=(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))(c||{});const _=(e,o,l,i={})=>t.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:a=>Object.values(c).includes(a),default:c.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(a,{slots:r,emit:s}){const u=t.computed({get(){if(n!=null&&n.modelValue)return $(Object(n.modelValue.value),String(a.name))},set(d){n!=null&&n.modelValue&&(D(Object(n.modelValue.value),String(a.name),d),s("update:modelValue",{newValue:u.value,formData:n==null?void 0:n.modelValue}))}});t.onMounted(()=>{u.value===void 0&&a.defaultValue!==void 0&&(u.value=a.defaultValue)}),t.onBeforeUnmount(()=>{q(),U()});const f=t.inject(o,void 0);f&&f.fields.value.add(a.name);const n=t.inject(e),{props:h,name:v}=t.toRefs(a),m=t.computed(()=>{if(n!=null&&n.errors.value)return $(n.errors.value,String(a.name))}),V=t.computed(()=>{var d;return(d=m.value)==null?void 0:d._errors}),y=t.computed(()=>m.value!==void 0),q=t.watch(y,()=>{y.value?(s("invalid",V.value),f&&f.errors.value.set(a.name,{_errors:V.value})):(s("valid",u.value),f&&f.errors.value.delete(a.name))}),U=t.watch(()=>n==null?void 0:n.modelValue,()=>{s("update:formData",n==null?void 0:n.modelValue)},{deep:!0}),G=d=>{u.value=d},L=t.computed(()=>typeof h.value=="function"?h.value(n==null?void 0:n.modelValue):h.value),J=t.computed(()=>({...L.value,name:L.value.name??a.name,invalid:y.value,valid:a.showValid?!!(!y.value&&u.value):void 0,type:(d=>{if([c.text,c.number,c.email,c.password,c.tel,c.url,c.search,c.date,c.time,c.datetimeLocal,c.month,c.week,c.color].includes(d))return d})(a.type),invalidLabel:V.value,modelValue:u.value,errors:a.is?m.value:void 0,"onUpdate:modelValue":G}));return t.provide(l,{name:t.readonly(v),errors:t.readonly(m)}),{component:t.computed(()=>{if(a.type===c.custom)return{render(){var d;return((d=r.default)==null?void 0:d.call(r,{modelValue:u.value,onUpdate:G,invalid:y.value,invalidLabel:V.value,formData:n==null?void 0:n.modelValue.value,formErrors:n==null?void 0:n.errors.value,errors:m.value}))??r.defalut}};if(!i.lazyLoad){let d;switch(a.type){case c.select:d=t.resolveComponent("VvSelect");break;case c.checkbox:d=t.resolveComponent("VvCheckbox");break;case c.radio:d=t.resolveComponent("VvRadio");break;case c.textarea:d=t.resolveComponent("VvTextarea");break;case c.radioGroup:d=t.resolveComponent("VvRadioGroup");break;case c.checkboxGroup:d=t.resolveComponent("VvCheckboxGroup");break;case c.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(i.sideEffects&&await Promise.resolve(i.sideEffects(a.type)),a.type){case c.textarea:return import("@volverjs/ui-vue/vv-textarea");case c.radio:return import("@volverjs/ui-vue/vv-radio");case c.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case c.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case c.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case c.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:J,invalid:y}},render(){return this.is?t.h(this.is,this.hasProps,this.$slots):this.type===c.custom?t.h(this.component,null,this.$slots):t.h(this.component,this.hasProps,this.$slots)}}),S=(e,o={})=>{const l=r=>{let s=r;for(;s instanceof b.ZodEffects;)s=s.innerType();return s},i=l(e);return{...(i instanceof b.ZodObject?i._def.unknownKeys==="passthrough":!1)?o:{},...Object.fromEntries(Object.entries(i.shape).map(([r,s])=>{const u=o[r],f=l(s);let n;if(f instanceof b.ZodDefault&&(n=f._def.defaultValue()),u===null&&f instanceof b.ZodNullable)return[r,u];if(f instanceof b.ZodSchema){const h=f.safeParse(o[r]);if(h.success)return[r,h.data??n]}return f instanceof b.ZodObject?[r,S(f,u&&typeof u=="object"?u:{})]:[r,n]}))}},K=(e,o,l)=>{const i=t.ref(),a=t.ref(),r=t.ref();return{errors:i,status:a,formData:r,component: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(s,{emit:u}){r.value=S(e,s.modelValue);const f=(l==null?void 0:l.continuosValidation)||s.continuosValidation;t.watch(()=>s.modelValue,v=>{if(v){const m=t.isProxy(v)?t.toRaw(v):v;r.value=typeof(m==null?void 0:m.clone)=="function"?m.clone():JSON.parse(JSON.stringify(m))}},{deep:!0}),N.watchThrottled(r,v=>{(i.value||f)&&n(),(!v||!s.modelValue||JSON.stringify(v)!==JSON.stringify(s.modelValue))&&u("update:modelValue",v)},{deep:!0,throttle:(l==null?void 0:l.updateThrottle)??500});const n=(v=r.value)=>{const m=e.safeParse(v);return m.success?(i.value=void 0,a.value="valid",r.value=m.data,u("valid",m.data),!0):(i.value=m.error.format(),a.value="invalid",u("invalid",i.value),!1)},h=()=>n()?(u("submit",r.value),!0):!1;return t.provide(o,{modelValue:r,submit:h,errors:t.readonly(i)}),{submit:h}},render(){return t.h("form",{onSubmit:t.withModifiers(this.submit,["prevent"])},this.$slots)}})}},M=(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:i}){const a=t.inject(e),r=t.inject(o,void 0),s=t.ref(new Set),u=t.ref(new Map),{name:f}=t.toRefs(l);t.provide(o,{name:t.readonly(f),errors:u,fields:s}),t.watch(s,h=>{r!=null&&r.fields&&h.forEach(v=>{r==null||r.fields.value.add(v)})},{deep:!0}),t.watch(()=>new Map(u.value),(h,v)=>{r!=null&&r.errors&&(Array.from(v.keys()).forEach(m=>{r.errors.value.delete(m)}),Array.from(h.keys()).forEach(m=>{const V=h.get(m);V&&r.errors.value.set(m,V)}))},{deep:!0});const n=t.computed(()=>a!=null&&a.errors.value?u.value.size>0:!1);return t.watch(n,()=>{n.value?i("invalid"):i("valid")}),{formProvided:a,invalid:n,fields:s,errors:u}},render(){var l,i,a,r,s,u,f,n;return this.tag?t.h(this.tag,null,((r=(a=this.$slots).default)==null?void 0:r.call(a,{invalid:this.invalid,formData:(l=this.formProvided)==null?void 0:l.modelValue.value,errors:(i=this.formProvided)==null?void 0:i.errors.value,fieldsErrors:this.errors}))??this.$slots.defalut):((n=(f=this.$slots).default)==null?void 0:n.call(f,{invalid:this.invalid,formData:(s=this.formProvided)==null?void 0:s.modelValue.value,errors:(u=this.formProvided)==null?void 0:u.errors.value,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,o={})=>{const l=Symbol(),i=Symbol(),a=Symbol(),{component:r,errors:s,status:u,formData:f}=K(e,l,o),n=M(l,i),h=_(l,i,a,o);return{VvForm:r,VvFormWrapper:n,VvFormField:h,formInjectionKey:l,formWrapperInjectionKey:i,formFieldInjectionKey:a,errors:s,status:u,formData:f}},k=Symbol(),W=e=>{let o={};return e.schema&&(o=w(e.schema,e)),{...o,install(l,{global:i=!1}={}){l.provide(k,e),i&&(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(k,{}),...o};return w(e,l)};p.FormFieldType=c,p.createForm=W,p.defaultObjectBySchema=S,p.formFactory=w,p.pluginInjectionKey=k,p.useForm=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(function(p,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):(p=typeof globalThis<"u"?globalThis:p||self,t(p["@volverjs/form-vue"]={},p.Vue,p.VueUseCore,p.zod))})(this,function(p,t,A,b){"use strict";function x(e){return Array.isArray(e)}function B(e){return typeof e<"u"}function O(e){return e===null}function C(e){return typeof e=="object"}function E(e){return typeof e=="string"}function g(e){return typeof e>"u"}const W=/^[0-9]+$/,_=["__proto__","prototype","constructor"];function $(e,a,s){const l=B(s)?s:void 0;if(!C(e)||!E(a))return l;const n=I(a);if(n.length!==0){for(const r of n){if(r==="*")continue;const u=function(c){return c.map(f=>g(f)||O(f)?f:x(f)?u(f):f[r])};if(x(e)&&!W.test(r)?e=u(e):e=e[r],g(e)||O(e))break}return g(e)?l:e}}function G(e,a,s){if(!C(e)||!E(a))return;const l=I(a);if(l.length===0)return;const n=l.length;for(let r=0;r<n;r++){const u=l[r];if(r===n-1){e[u]=s;return}if(u==="*"&&x(e)){const c=l.slice(r+1).join(".");for(const f of e)G(f,c,s);return}g(e[u])&&(e[u]={}),e=e[u]}}function I(e){const a=e.split(/[.]|(?:\[(\d|\*)\])/).filter(s=>!!s);return a.some(s=>_.indexOf(s)!==-1)?[]:a}var i=(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))(i||{});const K=(e,a,s,l={})=>t.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:n=>Object.values(i).includes(n),default:i.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:r,emit:u}){const c=t.computed({get(){if(o!=null&&o.modelValue)return $(Object(o.modelValue.value),String(n.name))},set(d){o!=null&&o.modelValue&&(G(Object(o.modelValue.value),String(n.name),d),u("update:modelValue",{newValue:c.value,formData:o==null?void 0:o.modelValue}))}});t.onMounted(()=>{c.value===void 0&&n.defaultValue!==void 0&&(c.value=n.defaultValue)}),t.onBeforeUnmount(()=>{U(),J()});const f=t.inject(a,void 0);f&&f.fields.value.add(n.name);const o=t.inject(e),{props:h,name:v}=t.toRefs(n),m=t.computed(()=>{if(o!=null&&o.errors.value)return $(o.errors.value,String(n.name))}),V=t.computed(()=>{var d;return(d=m.value)==null?void 0:d._errors}),y=t.computed(()=>m.value!==void 0),U=t.watch(y,()=>{y.value?(u("invalid",V.value),f&&f.errors.value.set(n.name,{_errors:V.value})):(u("valid",c.value),f&&f.errors.value.delete(n.name))}),J=t.watch(()=>o==null?void 0:o.modelValue,()=>{u("update:formData",o==null?void 0:o.modelValue)},{deep:!0}),L=d=>{c.value=d},N=t.computed(()=>typeof h.value=="function"?h.value(o==null?void 0:o.modelValue):h.value),R=t.computed(()=>({...N.value,name:N.value.name??n.name,invalid:y.value,valid:n.showValid?!!(!y.value&&c.value):void 0,type:(d=>{if([i.text,i.number,i.email,i.password,i.tel,i.url,i.search,i.date,i.time,i.datetimeLocal,i.month,i.week,i.color].includes(d))return d})(n.type),invalidLabel:V.value,modelValue:c.value,errors:n.is?m.value:void 0,"onUpdate:modelValue":L}));return t.provide(s,{name:t.readonly(v),errors:t.readonly(m)}),{component:t.computed(()=>{if(n.type===i.custom)return{render(){var d;return((d=r.default)==null?void 0:d.call(r,{modelValue:c.value,onUpdate:L,invalid:y.value,invalidLabel:V.value,formData:o==null?void 0:o.modelValue.value,formErrors:o==null?void 0:o.errors.value,errors:m.value}))??r.defalut}};if(!l.lazyLoad){let d;switch(n.type){case i.select:d=t.resolveComponent("VvSelect");break;case i.checkbox:d=t.resolveComponent("VvCheckbox");break;case i.radio:d=t.resolveComponent("VvRadio");break;case i.textarea:d=t.resolveComponent("VvTextarea");break;case i.radioGroup:d=t.resolveComponent("VvRadioGroup");break;case i.checkboxGroup:d=t.resolveComponent("VvCheckboxGroup");break;case i.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(l.sideEffects&&await Promise.resolve(l.sideEffects(n.type)),n.type){case i.textarea:return import("@volverjs/ui-vue/vv-textarea");case i.radio:return import("@volverjs/ui-vue/vv-radio");case i.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case i.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case i.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case i.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:R,invalid:y}},render(){return this.is?t.h(this.is,this.hasProps,this.$slots):this.type===i.custom?t.h(this.component,null,this.$slots):t.h(this.component,this.hasProps,this.$slots)}}),S=(e,a={})=>{const s=r=>{let u=r;for(;u instanceof b.ZodEffects;)u=u.innerType();return u},l=s(e);return{...(l instanceof b.ZodObject?l._def.unknownKeys==="passthrough":!1)?a:{},...Object.fromEntries(Object.entries(l.shape).map(([r,u])=>{const c=a[r],f=s(u);let o;if(f instanceof b.ZodDefault&&(o=f._def.defaultValue()),c===null&&f instanceof b.ZodNullable)return[r,c];if(f instanceof b.ZodSchema){const h=f.safeParse(a[r]);if(h.success)return[r,h.data??o]}return f instanceof b.ZodObject?[r,S(f,c&&typeof c=="object"?c:{})]:[r,o]}))}},M=(e,a,s)=>{const l=t.ref(),n=t.ref(),r=t.ref();return{errors:l,status:n,formData:r,component: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:c}){r.value=S(e,u.modelValue);const f=(s==null?void 0:s.continuosValidation)||u.continuosValidation;t.watch(()=>u.modelValue,v=>{if(v){const m=t.isProxy(v)?t.toRaw(v):v;r.value=typeof(m==null?void 0:m.clone)=="function"?m.clone():JSON.parse(JSON.stringify(m))}},{deep:!0}),A.watchThrottled(r,v=>{(l.value||f)&&o(),(!v||!u.modelValue||JSON.stringify(v)!==JSON.stringify(u.modelValue))&&c("update:modelValue",v)},{deep:!0,throttle:(s==null?void 0:s.updateThrottle)??500});const o=(v=r.value)=>{const m=e.safeParse(v);return m.success?(l.value=void 0,n.value="valid",r.value=m.data,c("update:modelValue",r.value),c("valid",m.data),!0):(l.value=m.error.format(),n.value="invalid",c("invalid",l.value),!1)},h=()=>o()?(c("submit",r.value),!0):!1;return t.provide(a,{modelValue:r,submit:h,errors:t.readonly(l)}),{submit:h}},render(){return t.h("form",{onSubmit:t.withModifiers(this.submit,["prevent"])},this.$slots)}})}},P=(e,a)=>t.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(s,{emit:l}){const n=t.inject(e),r=t.inject(a,void 0),u=t.ref(new Set),c=t.ref(new Map),{name:f}=t.toRefs(s);t.provide(a,{name:t.readonly(f),errors:c,fields:u}),t.watch(u,h=>{r!=null&&r.fields&&h.forEach(v=>{r==null||r.fields.value.add(v)})},{deep:!0}),t.watch(()=>new Map(c.value),(h,v)=>{r!=null&&r.errors&&(Array.from(v.keys()).forEach(m=>{r.errors.value.delete(m)}),Array.from(h.keys()).forEach(m=>{const V=h.get(m);V&&r.errors.value.set(m,V)}))},{deep:!0});const o=t.computed(()=>n!=null&&n.errors.value?c.value.size>0:!1);return t.watch(o,()=>{o.value?l("invalid"):l("valid")}),{formData:n==null?void 0:n.modelValue,errors:n==null?void 0:n.errors,invalid:o,fields:u,fieldsErrors:c}},render(){var s,l,n,r;return this.tag?t.h(this.tag,null,((l=(s=this.$slots).default)==null?void 0:l.call(s,{invalid:this.invalid,formData:this.formData,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut):((r=(n=this.$slots).default)==null?void 0:r.call(n,{invalid:this.invalid,formData:this.formData,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}),k=(e,a={})=>{const s=Symbol(),l=Symbol(),n=Symbol(),{component:r,errors:u,status:c,formData:f}=M(e,s,a),o=P(s,l),h=K(s,l,n,a);return{VvForm:r,VvFormWrapper:o,VvFormField:h,formInjectionKey:s,formWrapperInjectionKey:l,formFieldInjectionKey:n,errors:u,status:c,formData:f}},w=Symbol(),Z=e=>{let a={};return e.schema&&(a=k(e.schema,e)),{...a,install(s,{global:l=!1}={}){s.provide(w,e),l&&(s.config.globalProperties.$vvForm=e,a!=null&&a.VvForm&&s.component("VvForm",a.VvForm),a!=null&&a.VvFormWrapper&&s.component("VvFormWrapper",a.VvFormWrapper),a!=null&&a.VvFormField&&s.component("VvFormField",a.VvFormField))}}},q=(e,a={})=>{const s={...t.inject(w,{}),...a};return k(e,s)};p.FormFieldType=i,p.createForm=Z,p.defaultObjectBySchema=S,p.formFactory=k,p.pluginInjectionKey=w,p.useForm=q,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.10-beta.2",
+  "version": "0.0.10-beta.4",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,8 +35,8 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "0.0.6-beta.6",
-    "@vueuse/core": "^9.13.0",
+    "@volverjs/ui-vue": "0.0.6-beta.7",
+    "@vueuse/core": "^10.0.2",
     "ts-dot-prop": "^2.1.2",
     "vue": "^3.2.47",
     "zod": "^3.21.4"
@@ -55,7 +55,7 @@
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^9.1.9",
+    "happy-dom": "^9.6.1",
     "prettier": "^2.8.7",
     "typescript": "^5.0.4",
     "vite": "^4.2.1",

package/src/VvForm.ts

@@ -118,6 +118,7 @@ export const defineForm = <
 					errors.value = undefined
 					status.value = FormStatus.valid
 					localModelValue.value = parseResult.data
+					emit('update:modelValue', localModelValue.value)
 					emit('valid', parseResult.data)
 					return true
 				}

package/src/VvFormField.ts

@@ -84,22 +84,22 @@ export const defineFormField = <
 			// v-model
 			const modelValue = computed({
 				get() {
-					if (!formProvided?.modelValue) return
+					if (!injectedFormData?.modelValue) return
 					return get(
-						Object(formProvided.modelValue.value),
+						Object(injectedFormData.modelValue.value),
 						String(props.name),
 					)
 				},
 				set(value) {
-					if (!formProvided?.modelValue) return
+					if (!injectedFormData?.modelValue) return
 					set(
-						Object(formProvided.modelValue.value),
+						Object(injectedFormData.modelValue.value),
 						String(props.name),
 						value,
 					)
 					emit('update:modelValue', {
 						newValue: modelValue.value,
-						formData: formProvided?.modelValue,
+						formData: injectedFormData?.modelValue,
 					})
 				},
 			})
@@ -114,24 +114,24 @@ export const defineFormField = <
 
 			onBeforeUnmount(() => {
 				unwatchInvalid()
-				unwatchFormProvided()
+				unwatchInjectedFormData()
 			})
 
 			// inject data from parent form wrapper
-			const wrapperProvided = inject(wrapperProvideKey, undefined)
-			if (wrapperProvided) {
-				wrapperProvided.fields.value.add(props.name as string)
+			const injectedWrapperData = inject(wrapperProvideKey, undefined)
+			if (injectedWrapperData) {
+				injectedWrapperData.fields.value.add(props.name as string)
 			}
 
 			// inject data from parent form
-			const formProvided = inject(formProvideKey)
+			const injectedFormData = inject(formProvideKey)
 			const { props: fieldProps, name: fieldName } = toRefs(props)
 
 			const errors = computed(() => {
-				if (!formProvided?.errors.value) {
+				if (!injectedFormData?.errors.value) {
 					return undefined
 				}
-				return get(formProvided.errors.value, String(props.name))
+				return get(injectedFormData.errors.value, String(props.name))
 			})
 			const invalidLabel = computed(() => {
 				return errors.value?._errors
@@ -142,24 +142,27 @@ export const defineFormField = <
 			const unwatchInvalid = watch(invalid, () => {
 				if (invalid.value) {
 					emit('invalid', invalidLabel.value)
-					if (wrapperProvided) {
-						wrapperProvided.errors.value.set(props.name as string, {
-							_errors: invalidLabel.value,
-						})
+					if (injectedWrapperData) {
+						injectedWrapperData.errors.value.set(
+							props.name as string,
+							{
+								_errors: invalidLabel.value,
+							},
+						)
 					}
 				} else {
 					emit('valid', modelValue.value)
-					if (wrapperProvided) {
-						wrapperProvided.errors.value.delete(
+					if (injectedWrapperData) {
+						injectedWrapperData.errors.value.delete(
 							props.name as string,
 						)
 					}
 				}
 			})
-			const unwatchFormProvided = watch(
-				() => formProvided?.modelValue,
+			const unwatchInjectedFormData = watch(
+				() => injectedFormData?.modelValue,
 				() => {
-					emit('update:formData', formProvided?.modelValue)
+					emit('update:formData', injectedFormData?.modelValue)
 				},
 				{ deep: true },
 			)
@@ -168,7 +171,7 @@ export const defineFormField = <
 			}
 			const hasFieldProps = computed(() => {
 				if (typeof fieldProps.value === 'function') {
-					return fieldProps.value(formProvided?.modelValue)
+					return fieldProps.value(injectedFormData?.modelValue)
 				}
 				return fieldProps.value
 			})
@@ -222,8 +225,9 @@ export const defineFormField = <
 									onUpdate,
 									invalid: invalid.value,
 									invalidLabel: invalidLabel.value,
-									formData: formProvided?.modelValue.value,
-									formErrors: formProvided?.errors.value,
+									formData:
+										injectedFormData?.modelValue.value,
+									formErrors: injectedFormData?.errors.value,
 									errors: errors.value,
 								}) ?? slots.defalut
 							)

package/src/VvFormWrapper.ts

@@ -38,10 +38,10 @@ export const defineFormWrapper = <
 		emits: ['invalid', 'valid'],
 		expose: ['fields', 'invalid'],
 		setup(props, { emit }) {
-			const formProvided = inject(formProvideKey)
+			const injectedFormData = inject(formProvideKey)
 			const wrapperProvided = inject(wrapperProvideKey, undefined)
 			const fields = ref(new Set<string>())
-			const errors: Ref<
+			const fieldsErrors: Ref<
 				Map<string, Record<string, { _errors: string[] }>>
 			> = ref(new Map())
 			const { name } = toRefs(props)
@@ -49,7 +49,7 @@ export const defineFormWrapper = <
 			// provide data to child fields
 			provide(wrapperProvideKey, {
 				name: readonly(name),
-				errors,
+				errors: fieldsErrors,
 				fields,
 			})
 
@@ -68,7 +68,7 @@ export const defineFormWrapper = <
 
 			// add fields to parent wrapper
 			watch(
-				() => new Map(errors.value),
+				() => new Map(fieldsErrors.value),
 				(newValue, oldValue) => {
 					if (wrapperProvided?.errors) {
 						Array.from(oldValue.keys()).forEach((key) => {
@@ -86,10 +86,10 @@ export const defineFormWrapper = <
 			)
 
 			const invalid = computed(() => {
-				if (!formProvided?.errors.value) {
+				if (!injectedFormData?.errors.value) {
 					return false
 				}
-				return errors.value.size > 0
+				return fieldsErrors.value.size > 0
 			})
 
 			watch(invalid, () => {
@@ -100,7 +100,13 @@ export const defineFormWrapper = <
 				}
 			})
 
-			return { formProvided, invalid, fields, errors }
+			return {
+				formData: injectedFormData?.modelValue,
+				errors: injectedFormData?.errors,
+				invalid,
+				fields,
+				fieldsErrors,
+			}
 		},
 		render() {
 			if (this.tag) {
@@ -109,18 +115,18 @@ export const defineFormWrapper = <
 					null,
 					this.$slots.default?.({
 						invalid: this.invalid,
-						formData: this.formProvided?.modelValue.value,
-						errors: this.formProvided?.errors.value,
-						fieldsErrors: this.errors,
+						formData: this.formData,
+						errors: this.errors,
+						fieldsErrors: this.fieldsErrors,
 					}) ?? this.$slots.defalut,
 				)
 			}
 			return (
 				this.$slots.default?.({
 					invalid: this.invalid,
-					formData: this.formProvided?.modelValue.value,
-					errors: this.formProvided?.errors.value,
-					fieldsErrors: this.errors,
+					formData: this.formData,
+					errors: this.errors,
+					fieldsErrors: this.fieldsErrors,
 				}) ?? this.$slots.defalut
 			)
 		},