@volverjs/form-vue 0.0.12 → 0.0.13-beta.1

package/dist/VvFormField.d.ts

@@ -39,7 +39,21 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         __isTeleport?: undefined;
         __isSuspense?: undefined;
     } | ConcreteComponent>;
-    hasProps: import("vue").ComputedRef<any>;
+    hasProps: import("vue").ComputedRef<{
+        name: {} | ([{
+            type: PropType<Path<z.TypeOf<Schema>>>;
+            required: true;
+        }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+            type: PropType<Path<z.TypeOf<Schema>>>;
+            required: true;
+        });
+        invalid: boolean;
+        valid: boolean | undefined;
+        type: FormFieldType | undefined;
+        invalidLabel: any;
+        modelValue: any;
+        'onUpdate:modelValue': (value: unknown) => void;
+    }>;
     invalid: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "update:formData")[], "invalid" | "valid" | "update:modelValue" | "update:formData", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {

package/dist/index.d.ts

@@ -408,7 +408,21 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             __isTeleport?: undefined;
             __isSuspense?: undefined;
         } | import("vue").ConcreteComponent>;
-        hasProps: import("vue").ComputedRef<any>;
+        hasProps: import("vue").ComputedRef<{
+            name: {} | ([{
+                type: import("vue").PropType<Path<import("zod").TypeOf<Schema>>>;
+                required: true;
+            }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+                type: import("vue").PropType<Path<import("zod").TypeOf<Schema>>>;
+                required: true;
+            });
+            invalid: boolean;
+            valid: boolean | undefined;
+            type: import("./enums").FormFieldType | undefined;
+            invalidLabel: any;
+            modelValue: any;
+            'onUpdate:modelValue': (value: unknown) => void;
+        }>;
         invalid: import("vue").ComputedRef<boolean>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "update:formData")[], "invalid" | "valid" | "update:modelValue" | "update:formData", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         type: {
@@ -895,7 +909,21 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             __isTeleport?: undefined;
             __isSuspense?: undefined;
         } | import("vue").ConcreteComponent>;
-        hasProps: import("vue").ComputedRef<any>;
+        hasProps: import("vue").ComputedRef<{
+            name: {} | ([{
+                type: import("vue").PropType<Path<import("zod").TypeOf<Schema>>>;
+                required: true;
+            }] extends [import("vue").Prop<infer V, infer D>] ? unknown extends V ? import("@vue/shared").IfAny<V, V, D> : V : {
+                type: import("vue").PropType<Path<import("zod").TypeOf<Schema>>>;
+                required: true;
+            });
+            invalid: boolean;
+            valid: boolean | undefined;
+            type: import("./enums").FormFieldType | undefined;
+            invalidLabel: any;
+            modelValue: any;
+            'onUpdate:modelValue': (value: unknown) => void;
+        }>;
         invalid: import("vue").ComputedRef<boolean>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "update:formData")[], "invalid" | "valid" | "update:modelValue" | "update:formData", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         type: {

package/dist/index.es.js

@@ -1,47 +1,47 @@
-import { defineComponent as G, computed as y, onMounted as R, onBeforeUnmount as T, inject as O, toRefs as U, watch as w, provide as z, readonly as k, resolveComponent as g, defineAsyncComponent as D, h as x, ref as E, toRaw as Z, isProxy as j, withModifiers as F, unref as C, getCurrentInstance as ee } from "vue";
-import { watchThrottled as re } from "@vueuse/core";
-import { ZodObject as J, ZodDefault as te, ZodNullable as ae, ZodSchema as ne, ZodEffects as se, ZodOptional as oe } from "zod";
+import { defineComponent as W, computed as y, onMounted as T, onBeforeUnmount as D, inject as S, toRefs as q, watch as O, unref as I, provide as z, readonly as k, resolveComponent as g, defineAsyncComponent as j, h as x, ref as C, toRaw as J, isProxy as F, withModifiers as ee, getCurrentInstance as re } from "vue";
+import { watchThrottled as te } from "@vueuse/core";
+import { ZodObject as M, ZodDefault as ae, ZodNullable as ne, ZodSchema as se, ZodEffects as oe, ZodOptional as ue } from "zod";
 function A(e) {
   return Array.isArray(e);
 }
-function ue(e) {
+function ie(e) {
   return typeof e < "u";
 }
-function M(e) {
+function U(e) {
   return e === null;
 }
-function q(e) {
+function P(e) {
   return typeof e == "object";
 }
-function P(e) {
+function H(e) {
   return typeof e == "string";
 }
-function $(e) {
+function L(e) {
   return typeof e > "u";
 }
-const ie = /^[0-9]+$/, le = ["__proto__", "prototype", "constructor"];
-function N(e, s, l) {
-  const u = ue(l) ? l : void 0;
-  if (!q(e) || !P(s))
+const le = /^[0-9]+$/, fe = ["__proto__", "prototype", "constructor"];
+function B(e, s, l) {
+  const u = ie(l) ? l : void 0;
+  if (!P(e) || !H(s))
     return u;
-  const n = Q(s);
+  const n = R(s);
   if (n.length !== 0) {
     for (const r of n) {
       if (r === "*")
         continue;
       const o = function(a) {
-        return a.map((i) => $(i) || M(i) ? i : A(i) ? o(i) : i[r]);
+        return a.map((i) => L(i) || U(i) ? i : A(i) ? o(i) : i[r]);
       };
-      if (A(e) && !ie.test(r) ? e = o(e) : e = e[r], $(e) || M(e))
+      if (A(e) && !le.test(r) ? e = o(e) : e = e[r], L(e) || U(e))
         break;
     }
-    return $(e) ? u : e;
+    return L(e) ? u : e;
   }
 }
-function H(e, s, l) {
-  if (!q(e) || !P(s))
+function Q(e, s, l) {
+  if (!P(e) || !H(s))
     return;
-  const u = Q(s);
+  const u = R(s);
   if (u.length === 0)
     return;
   const n = u.length;
@@ -54,24 +54,24 @@ function H(e, s, l) {
     if (o === "*" && A(e)) {
       const a = u.slice(r + 1).join(".");
       for (const i of e)
-        H(i, a, l);
+        Q(i, a, l);
       return;
     }
-    $(e[o]) && (e[o] = {}), e = e[o];
+    L(e[o]) && (e[o] = {}), e = e[o];
   }
 }
-function Q(e) {
+function R(e) {
   const s = e.split(/[.]|(?:\[(\d|\*)\])/).filter((l) => !!l);
-  return s.some((l) => le.indexOf(l) !== -1) ? [] : s;
+  return s.some((l) => fe.indexOf(l) !== -1) ? [] : s;
 }
-var f = /* @__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))(f || {}), L = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(L || {});
-const fe = (e, s, l, u) => G({
+var v = /* @__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))(v || {}), N = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(N || {});
+const ve = (e, s, l, u) => W({
   name: "FieldComponent",
   props: {
     type: {
       type: String,
-      validator: (n) => Object.values(f).includes(n),
-      default: f.custom
+      validator: (n) => Object.values(v).includes(n),
+      default: v.custom
     },
     is: {
       type: [Object, String],
@@ -104,36 +104,36 @@ const fe = (e, s, l, u) => G({
     const a = y({
       get() {
         if (t != null && t.formData)
-          return N(
+          return B(
             Object(t.formData.value),
             String(n.name)
           );
       },
-      set(v) {
-        t != null && t.formData && (H(
+      set(f) {
+        t != null && t.formData && (Q(
           Object(t.formData.value),
           String(n.name),
-          v
+          f
         ), o("update:modelValue", {
           newValue: a.value,
           formData: t == null ? void 0 : t.formData
         }));
       }
     });
-    R(() => {
+    T(() => {
       a.value === void 0 && n.defaultValue !== void 0 && (a.value = n.defaultValue);
-    }), T(() => {
-      S(), V();
+    }), D(() => {
+      E(), V();
     });
-    const i = O(s, void 0);
+    const i = S(s, void 0);
     i && i.fields.value.add(n.name);
-    const t = O(e), { props: m, name: h } = U(n), d = y(() => {
+    const t = S(e), { props: m, name: h } = q(n), d = y(() => {
       if (t != null && t.errors.value)
-        return N(t.errors.value, String(n.name));
+        return B(t.errors.value, String(n.name));
     }), c = y(() => {
-      var v;
-      return (v = d.value) == null ? void 0 : v._errors;
-    }), b = y(() => d.value !== void 0), S = w(b, () => {
+      var f;
+      return (f = d.value) == null ? void 0 : f._errors;
+    }), b = y(() => d.value !== void 0), E = O(b, () => {
       b.value ? (o("invalid", c.value), i && i.errors.value.set(
         n.name,
         {
@@ -142,36 +142,42 @@ const fe = (e, s, l, u) => G({
       )) : (o("valid", a.value), i && i.errors.value.delete(
         n.name
       ));
-    }), V = w(
+    }), V = O(
       () => t == null ? void 0 : t.formData,
       () => {
         o("update:formData", t == null ? void 0 : t.formData);
       },
       { deep: !0 }
-    ), p = (v) => {
-      a.value = v;
-    }, I = y(() => typeof m.value == "function" ? m.value(t == null ? void 0 : t.formData) : m.value), W = y(() => ({
-      ...I.value,
-      name: I.value.name ?? n.name,
+    ), p = (f) => {
+      a.value = f;
+    }, $ = y(() => {
+      let f = m.value;
+      return typeof f == "function" && (f = f(t == null ? void 0 : t.formData)), Object.keys(f).reduce(
+        (w, Z) => (w[Z] = I(f[Z]), w),
+        {}
+      );
+    }), _ = y(() => ({
+      ...$.value,
+      name: $.value.name ?? n.name,
       invalid: b.value,
       valid: n.showValid ? !!(!b.value && a.value) : void 0,
-      type: ((v) => {
+      type: ((f) => {
         if ([
-          f.text,
-          f.number,
-          f.email,
-          f.password,
-          f.tel,
-          f.url,
-          f.search,
-          f.date,
-          f.time,
-          f.datetimeLocal,
-          f.month,
-          f.week,
-          f.color
-        ].includes(v))
-          return v;
+          v.text,
+          v.number,
+          v.email,
+          v.password,
+          v.tel,
+          v.url,
+          v.search,
+          v.date,
+          v.time,
+          v.datetimeLocal,
+          v.month,
+          v.week,
+          v.color
+        ].includes(f))
+          return f;
       })(n.type),
       invalidLabel: c.value,
       modelValue: a.value,
@@ -181,11 +187,11 @@ const fe = (e, s, l, u) => G({
       name: k(h),
       errors: k(d)
     }), { component: y(() => {
-      if (n.type === f.custom)
+      if (n.type === v.custom)
         return {
           render() {
-            var v;
-            return ((v = r.default) == null ? void 0 : v.call(r, {
+            var f;
+            return ((f = r.default) == null ? void 0 : f.call(r, {
               modelValue: a.value,
               onUpdate: p,
               submit: t == null ? void 0 : t.submit,
@@ -199,86 +205,86 @@ const fe = (e, s, l, u) => G({
           }
         };
       if (!((u == null ? void 0 : u.lazyLoad) ?? n.lazyLoad)) {
-        let v;
+        let f;
         switch (n.type) {
-          case f.select:
-            v = g("VvSelect");
+          case v.select:
+            f = g("VvSelect");
             break;
-          case f.checkbox:
-            v = g("VvCheckbox");
+          case v.checkbox:
+            f = g("VvCheckbox");
             break;
-          case f.radio:
-            v = g("VvRadio");
+          case v.radio:
+            f = g("VvRadio");
             break;
-          case f.textarea:
-            v = g("VvTextarea");
+          case v.textarea:
+            f = g("VvTextarea");
             break;
-          case f.radioGroup:
-            v = g("VvRadioGroup");
+          case v.radioGroup:
+            f = g("VvRadioGroup");
             break;
-          case f.checkboxGroup:
-            v = g("VvCheckboxGroup");
+          case v.checkboxGroup:
+            f = g("VvCheckboxGroup");
             break;
-          case f.combobox:
-            v = g("VvCombobox");
+          case v.combobox:
+            f = g("VvCombobox");
             break;
           default:
-            v = g("VvInputText");
+            f = g("VvInputText");
         }
-        if (typeof v != "string")
-          return v;
+        if (typeof f != "string")
+          return f;
         console.warn(
-          `[form-vue warn]: ${v} 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 D(async () => {
+      return j(async () => {
         switch (u != null && u.sideEffects && await Promise.resolve(u.sideEffects(n.type)), n.type) {
-          case f.textarea:
+          case v.textarea:
             return import("@volverjs/ui-vue/vv-textarea");
-          case f.radio:
+          case v.radio:
             return import("@volverjs/ui-vue/vv-radio");
-          case f.radioGroup:
+          case v.radioGroup:
             return import("@volverjs/ui-vue/vv-radio-group");
-          case f.checkbox:
+          case v.checkbox:
             return import("@volverjs/ui-vue/vv-checkbox");
-          case f.checkboxGroup:
+          case v.checkboxGroup:
             return import("@volverjs/ui-vue/vv-checkbox-group");
-          case f.select:
+          case v.select:
             return import("@volverjs/ui-vue/vv-select");
-          case f.combobox:
+          case v.combobox:
             return import("@volverjs/ui-vue/vv-combobox");
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: W, invalid: b };
+    }), hasProps: _, invalid: b };
   },
   render() {
-    return this.is ? x(this.is, this.hasProps, this.$slots) : this.type === f.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 === v.custom ? x(this.component, null, this.$slots) : x(this.component, this.hasProps, this.$slots);
   }
 }), X = (e, s = {}) => {
   const l = (r) => {
     let o = r;
-    for (; o instanceof se; )
-      o = o.innerType();
     for (; o instanceof oe; )
+      o = o.innerType();
+    for (; o instanceof ue; )
       o = o._def.innerType;
     return o;
   }, u = l(e);
   return {
-    ...(u instanceof J ? u._def.unknownKeys === "passthrough" : !1) ? s : {},
+    ...(u instanceof M ? u._def.unknownKeys === "passthrough" : !1) ? s : {},
     ...Object.fromEntries(
       Object.entries(u.shape).map(
         ([r, o]) => {
           const a = s[r], i = l(o);
           let t;
-          if (i instanceof te && (t = i._def.defaultValue()), a === null && i instanceof ae)
+          if (i instanceof ae && (t = i._def.defaultValue()), a === null && i instanceof ne)
             return [r, a];
-          if (i instanceof ne) {
+          if (i instanceof se) {
             const m = o.safeParse(a);
             if (m.success)
               return [r, m.data ?? t];
           }
-          return i instanceof J ? [
+          return i instanceof M ? [
             r,
             X(
               i,
@@ -289,8 +295,8 @@ const fe = (e, s, l, u) => G({
       )
     )
   };
-}, ve = (e, s, l) => {
-  const u = E(), n = E(), r = E(), o = G({
+}, de = (e, s, l) => {
+  const u = C(), n = C(), r = C(), o = W({
     name: "FormComponent",
     props: {
       modelValue: {
@@ -311,17 +317,17 @@ const fe = (e, s, l, u) => G({
     setup(a, { emit: i }) {
       r.value = X(
         e,
-        Z(a.modelValue)
-      ), w(
+        J(a.modelValue)
+      ), O(
         () => a.modelValue,
         (d) => {
           if (d) {
-            const c = j(d) ? Z(d) : d;
+            const c = F(d) ? J(d) : d;
             r.value = typeof (c == null ? void 0 : c.clone) == "function" ? c.clone() : JSON.parse(JSON.stringify(c));
           }
         },
         { deep: !0 }
-      ), re(
+      ), te(
         r,
         (d) => {
           ((u.value || (l == null ? void 0 : l.continuosValidation)) ?? a.continuosValidation) && t(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && i("update:modelValue", d);
@@ -333,8 +339,8 @@ const fe = (e, s, l, u) => G({
       );
       const t = (d = r.value) => {
         const c = e.safeParse(d);
-        return c.success ? (u.value = void 0, n.value = L.valid, r.value = c.data, i("update:modelValue", r.value), i("valid", c.data), !0) : (u.value = c.error.format(), n.value = L.invalid, i("invalid", u.value), !1);
-      }, m = () => t() ? (i("submit", r.value), !0) : !1, h = y(() => n.value === L.invalid);
+        return c.success ? (u.value = void 0, n.value = N.valid, r.value = c.data, i("update:modelValue", r.value), i("valid", c.data), !0) : (u.value = c.error.format(), n.value = N.invalid, i("invalid", u.value), !1);
+      }, m = () => t() ? (i("submit", r.value), !0) : !1, h = y(() => n.value === N.invalid);
       return z(s, {
         formData: r,
         submit: m,
@@ -355,7 +361,7 @@ const fe = (e, s, l, u) => G({
       return x(
         "form",
         {
-          onSubmit: F(this.submit, ["prevent"])
+          onSubmit: ee(this.submit, ["prevent"])
         },
         {
           default: () => {
@@ -382,7 +388,7 @@ const fe = (e, s, l, u) => G({
      */
     VvForm: o
   };
-}, de = (e, s) => G({
+}, ce = (e, s) => W({
   name: "WrapperComponent",
   props: {
     name: {
@@ -397,12 +403,12 @@ const fe = (e, s, l, u) => G({
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
   setup(u, { emit: n }) {
-    const r = O(e), o = O(s, void 0), a = E(/* @__PURE__ */ new Set()), i = E(/* @__PURE__ */ new Map()), { name: t } = U(u);
+    const r = S(e), o = S(s, void 0), a = C(/* @__PURE__ */ new Set()), i = C(/* @__PURE__ */ new Map()), { name: t } = q(u);
     z(s, {
       name: k(t),
       errors: i,
       fields: a
-    }), w(
+    }), O(
       a,
       (h) => {
         o != null && o.fields && h.forEach((d) => {
@@ -410,7 +416,7 @@ const fe = (e, s, l, u) => G({
         });
       },
       { deep: !0 }
-    ), w(
+    ), O(
       () => new Map(i.value),
       (h, d) => {
         o != null && o.errors && (Array.from(d.keys()).forEach((c) => {
@@ -423,7 +429,7 @@ const fe = (e, s, l, u) => G({
       { deep: !0 }
     );
     const m = y(() => r != null && r.invalid.value ? i.value.size > 0 : !1);
-    return w(m, () => {
+    return O(m, () => {
       m.value ? n("invalid") : n("valid");
     }), {
       formData: r == null ? void 0 : r.formData,
@@ -458,8 +464,8 @@ const fe = (e, s, l, u) => G({
       fieldsErrors: this.fieldsErrors
     })) ?? this.$slots.defalut;
   }
-}), ce = (e, s) => {
-  const l = G({
+}), me = (e, s) => {
+  const l = W({
     props: {
       schema: {
         type: [Array, Function],
@@ -467,7 +473,7 @@ const fe = (e, s, l, u) => G({
       }
     },
     setup(u, { slots: n }) {
-      const r = O(e);
+      const r = S(e);
       if (!(r != null && r.formData))
         return;
       const o = typeof u.schema == "function" ? u.schema(r) : u.schema;
@@ -480,30 +486,30 @@ const fe = (e, s, l, u) => G({
               vvIs: d,
               vvName: c,
               vvSlots: b,
-              vvChildren: S,
+              vvChildren: E,
               vvIf: V,
               vvElseIf: p,
-              vvType: I,
-              vvDefaultValue: W,
+              vvType: $,
+              vvDefaultValue: _,
               vvShowValid: K,
-              ...v
+              ...f
             } = h;
             if (V !== void 0) {
-              if (typeof V == "string" ? a = !!N(
+              if (typeof V == "string" ? a = !!B(
                 Object(r.formData.value),
                 V
-              ) : typeof V == "function" ? a = C(V(r)) : a = C(V), !a)
+              ) : typeof V == "function" ? a = I(V(r)) : a = I(V), !a)
                 return t;
             } else if (p !== void 0 && a !== void 0) {
-              if (a || (typeof p == "string" ? a = !!N(
+              if (a || (typeof p == "string" ? a = !!B(
                 Object(r.formData.value),
                 p
-              ) : typeof p == "function" ? a = C(p(r)) : a = C(p), !a))
+              ) : typeof p == "function" ? a = I(p(r)) : a = I(p), !a))
                 return t;
             } else
               a = void 0;
-            const _ = S ? x(l, {
-              schema: S
+            const w = E ? x(l, {
+              schema: E
             }) : void 0;
             return c ? (t.push(
               x(
@@ -511,20 +517,20 @@ const fe = (e, s, l, u) => G({
                 {
                   name: c,
                   is: d,
-                  type: I,
-                  defaultValue: W,
+                  type: $,
+                  defaultValue: _,
                   showValid: K,
-                  props: v
+                  props: f
                 },
-                b ?? _
+                b ?? w
               )
             ), t) : d ? (t.push(
               x(
                 d,
-                v,
-                b ?? _
+                f,
+                b ?? w
               )
-            ), t) : (S && t.push(_), t);
+            ), t) : (E && t.push(w), t);
           },
           [
             (i = n == null ? void 0 : n.default) == null ? void 0 : i.call(n, {
@@ -541,20 +547,20 @@ const fe = (e, s, l, u) => G({
     }
   });
   return l;
-}, B = (e, s = {}) => {
-  const l = Symbol(), u = Symbol(), n = Symbol(), { VvForm: r, errors: o, status: a, formData: i } = ve(
+}, G = (e, s = {}) => {
+  const l = Symbol(), u = Symbol(), n = Symbol(), { VvForm: r, errors: o, status: a, formData: i } = de(
     e,
     l,
     s
-  ), t = de(
+  ), t = ce(
     l,
     u
-  ), m = fe(
+  ), m = ve(
     l,
     u,
     n,
     s
-  ), h = ce(l, m);
+  ), h = me(l, m);
   return {
     VvForm: r,
     VvFormWrapper: t,
@@ -567,23 +573,23 @@ const fe = (e, s, l, u) => G({
     status: a,
     formData: i
   };
-}, Y = Symbol(), pe = (e) => {
+}, Y = Symbol(), ye = (e) => {
   let s = {};
-  return e.schema && (s = B(e.schema, e)), {
+  return e.schema && (s = G(e.schema, e)), {
     ...s,
     install(l, { global: u = !1 } = {}) {
       l.provide(Y, e), u && (l.config.globalProperties.$vvForm = e, s != null && s.VvForm && l.component("VvForm", s.VvForm), s != null && s.VvFormWrapper && l.component("VvFormWrapper", s.VvFormWrapper), s != null && s.VvFormField && l.component("VvFormField", s.VvFormField), s != null && s.VvFormTemplate && l.component("VvFormTemplate", s.VvFormTemplate));
     }
   };
-}, ye = (e, s = {}) => ee() ? B(e, {
-  ...O(Y, {}),
+}, Ve = (e, s = {}) => re() ? G(e, {
+  ...S(Y, {}),
   ...s
-}) : B(e, s), Ve = (e, s = {}) => B(e, s);
+}) : G(e, s), ge = (e, s = {}) => G(e, s);
 export {
-  f as FormFieldType,
-  pe as createForm,
+  v as FormFieldType,
+  ye as createForm,
   X as defaultObjectBySchema,
-  Ve as formFactory,
+  ge as formFactory,
   Y as pluginInjectionKey,
-  ye as useForm
+  Ve as useForm
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(p,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],r):(p=typeof globalThis<"u"?globalThis:p||self,r(p["@volverjs/form-vue"]={},p.Vue,p.VueUseCore,p.zod))})(this,function(p,r,q,x){"use strict";function I(e){return Array.isArray(e)}function M(e){return typeof e<"u"}function G(e){return e===null}function W(e){return typeof e=="object"}function _(e){return typeof e=="string"}function k(e){return typeof e>"u"}const U=/^[0-9]+$/,z=["__proto__","prototype","constructor"];function C(e,s,f){const l=M(f)?f:void 0;if(!W(e)||!_(s))return l;const o=K(s);if(o.length!==0){for(const t of o){if(t==="*")continue;const i=function(a){return a.map(u=>k(u)||G(u)?u:I(u)?i(u):u[t])};if(I(e)&&!U.test(t)?e=i(e):e=e[t],k(e)||G(e))break}return k(e)?l:e}}function A(e,s,f){if(!W(e)||!_(s))return;const l=K(s);if(l.length===0)return;const o=l.length;for(let t=0;t<o;t++){const i=l[t];if(t===o-1){e[i]=f;return}if(i==="*"&&I(e)){const a=l.slice(t+1).join(".");for(const u of e)A(u,a,f);return}k(e[i])&&(e[i]={}),e=e[i]}}function K(e){const s=e.split(/[.]|(?:\[(\d|\*)\])/).filter(f=>!!f);return s.some(f=>z.indexOf(f)!==-1)?[]:s}var d=(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))(d||{}),O=(e=>(e.invalid="invalid",e.valid="valid",e))(O||{});const J=(e,s,f,l)=>r.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:o=>Object.values(d).includes(o),default:d.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},lazyLoad:{type:Boolean,default:!1}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(o,{slots:t,emit:i}){const a=r.computed({get(){if(n!=null&&n.formData)return C(Object(n.formData.value),String(o.name))},set(c){n!=null&&n.formData&&(A(Object(n.formData.value),String(o.name),c),i("update:modelValue",{newValue:a.value,formData:n==null?void 0:n.formData}))}});r.onMounted(()=>{a.value===void 0&&o.defaultValue!==void 0&&(a.value=o.defaultValue)}),r.onBeforeUnmount(()=>{w(),g()});const u=r.inject(s,void 0);u&&u.fields.value.add(o.name);const n=r.inject(e),{props:h,name:y}=r.toRefs(o),m=r.computed(()=>{if(n!=null&&n.errors.value)return C(n.errors.value,String(o.name))}),v=r.computed(()=>{var c;return(c=m.value)==null?void 0:c._errors}),b=r.computed(()=>m.value!==void 0),w=r.watch(b,()=>{b.value?(i("invalid",v.value),u&&u.errors.value.set(o.name,{_errors:v.value})):(i("valid",a.value),u&&u.errors.value.delete(o.name))}),g=r.watch(()=>n==null?void 0:n.formData,()=>{i("update:formData",n==null?void 0:n.formData)},{deep:!0}),V=c=>{a.value=c},E=r.computed(()=>typeof h.value=="function"?h.value(n==null?void 0:n.formData):h.value),L=r.computed(()=>({...E.value,name:E.value.name??o.name,invalid:b.value,valid:o.showValid?!!(!b.value&&a.value):void 0,type:(c=>{if([d.text,d.number,d.email,d.password,d.tel,d.url,d.search,d.date,d.time,d.datetimeLocal,d.month,d.week,d.color].includes(c))return c})(o.type),invalidLabel:v.value,modelValue:a.value,"onUpdate:modelValue":V}));return r.provide(f,{name:r.readonly(y),errors:r.readonly(m)}),{component:r.computed(()=>{if(o.type===d.custom)return{render(){var c;return((c=t.default)==null?void 0:c.call(t,{modelValue:a.value,onUpdate:V,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,invalid:b.value,invalidLabel:v.value,formData:n==null?void 0:n.formData.value,formErrors:n==null?void 0:n.errors.value,errors:m.value}))??t.defalut}};if(!((l==null?void 0:l.lazyLoad)??o.lazyLoad)){let c;switch(o.type){case d.select:c=r.resolveComponent("VvSelect");break;case d.checkbox:c=r.resolveComponent("VvCheckbox");break;case d.radio:c=r.resolveComponent("VvRadio");break;case d.textarea:c=r.resolveComponent("VvTextarea");break;case d.radioGroup:c=r.resolveComponent("VvRadioGroup");break;case d.checkboxGroup:c=r.resolveComponent("VvCheckboxGroup");break;case d.combobox:c=r.resolveComponent("VvCombobox");break;default:c=r.resolveComponent("VvInputText")}if(typeof c!="string")return c;console.warn(`[form-vue warn]: ${c} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return r.defineAsyncComponent(async()=>{switch(l!=null&&l.sideEffects&&await Promise.resolve(l.sideEffects(o.type)),o.type){case d.textarea:return import("@volverjs/ui-vue/vv-textarea");case d.radio:return import("@volverjs/ui-vue/vv-radio");case d.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case d.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case d.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case d.select:return import("@volverjs/ui-vue/vv-select");case d.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:L,invalid:b}},render(){return this.is?r.h(this.is,this.hasProps,this.$slots):this.type===d.custom?r.h(this.component,null,this.$slots):r.h(this.component,this.hasProps,this.$slots)}}),$=(e,s={})=>{const f=t=>{let i=t;for(;i instanceof x.ZodEffects;)i=i.innerType();for(;i instanceof x.ZodOptional;)i=i._def.innerType;return i},l=f(e);return{...(l instanceof x.ZodObject?l._def.unknownKeys==="passthrough":!1)?s:{},...Object.fromEntries(Object.entries(l.shape).map(([t,i])=>{const a=s[t],u=f(i);let n;if(u instanceof x.ZodDefault&&(n=u._def.defaultValue()),a===null&&u instanceof x.ZodNullable)return[t,a];if(u instanceof x.ZodSchema){const h=i.safeParse(a);if(h.success)return[t,h.data??n]}return u instanceof x.ZodObject?[t,$(u,a&&typeof a=="object"?a:{})]:[t,n]}))}},P=(e,s,f)=>{const l=r.ref(),o=r.ref(),t=r.ref(),i=r.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})},updateThrottle:{type:Number,default:500},continuosValidation:{type:Boolean,default:!1}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","validate","errors","status","valid","invalid"],setup(a,{emit:u}){t.value=$(e,r.toRaw(a.modelValue)),r.watch(()=>a.modelValue,m=>{if(m){const v=r.isProxy(m)?r.toRaw(m):m;t.value=typeof(v==null?void 0:v.clone)=="function"?v.clone():JSON.parse(JSON.stringify(v))}},{deep:!0}),q.watchThrottled(t,m=>{((l.value||(f==null?void 0:f.continuosValidation))??a.continuosValidation)&&n(),(!m||!a.modelValue||JSON.stringify(m)!==JSON.stringify(a.modelValue))&&u("update:modelValue",m)},{deep:!0,throttle:(f==null?void 0:f.updateThrottle)??a.updateThrottle});const n=(m=t.value)=>{const v=e.safeParse(m);return v.success?(l.value=void 0,o.value=O.valid,t.value=v.data,u("update:modelValue",t.value),u("valid",v.data),!0):(l.value=v.error.format(),o.value=O.invalid,u("invalid",l.value),!1)},h=()=>n()?(u("submit",t.value),!0):!1,y=r.computed(()=>o.value===O.invalid);return r.provide(s,{formData:t,submit:h,validate:n,errors:r.readonly(l),status:r.readonly(o),invalid:y}),{formData:t,submit:h,validate:n,errors:r.readonly(l),status:r.readonly(o),invalid:y}},render(){return r.h("form",{onSubmit:r.withModifiers(this.submit,["prevent"])},{default:()=>{var a,u;return((u=(a=this.$slots)==null?void 0:a.default)==null?void 0:u.call(a,{formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,status:this.status,invalid:this.invalid}))??this.$slots.default}})}});return{errors:l,status:o,formData:t,VvForm:i}},T=(e,s)=>r.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(l,{emit:o}){const t=r.inject(e),i=r.inject(s,void 0),a=r.ref(new Set),u=r.ref(new Map),{name:n}=r.toRefs(l);r.provide(s,{name:r.readonly(n),errors:u,fields:a}),r.watch(a,y=>{i!=null&&i.fields&&y.forEach(m=>{i==null||i.fields.value.add(m)})},{deep:!0}),r.watch(()=>new Map(u.value),(y,m)=>{i!=null&&i.errors&&(Array.from(m.keys()).forEach(v=>{i.errors.value.delete(v)}),Array.from(y.keys()).forEach(v=>{const b=y.get(v);b&&i.errors.value.set(v,b)}))},{deep:!0});const h=r.computed(()=>t!=null&&t.invalid.value?u.value.size>0:!1);return r.watch(h,()=>{h.value?o("invalid"):o("valid")}),{formData:t==null?void 0:t.formData,errors:t==null?void 0:t.errors,submit:t==null?void 0:t.submit,validate:t==null?void 0:t.validate,invalid:h,fields:a,fieldsErrors:u}},render(){var l,o;return this.tag?r.h(this.tag,null,{default:()=>{var t,i;return((i=(t=this.$slots).default)==null?void 0:i.call(t,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}):((o=(l=this.$slots).default)==null?void 0:o.call(l,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}),R=(e,s)=>{const f=r.defineComponent({props:{schema:{type:[Array,Function],required:!0}},setup(l,{slots:o}){const t=r.inject(e);if(!(t!=null&&t.formData))return;const i=typeof l.schema=="function"?l.schema(t):l.schema;let a;return()=>{var u;return i.reduce((n,h)=>{const y=typeof h=="function"?h(t):h,{vvIs:m,vvName:v,vvSlots:b,vvChildren:w,vvIf:g,vvElseIf:V,vvType:E,vvDefaultValue:L,vvShowValid:Z,...c}=y;if(g!==void 0){if(typeof g=="string"?a=!!C(Object(t.formData.value),g):typeof g=="function"?a=r.unref(g(t)):a=r.unref(g),!a)return n}else if(V!==void 0&&a!==void 0){if(a||(typeof V=="string"?a=!!C(Object(t.formData.value),V):typeof V=="function"?a=r.unref(V(t)):a=r.unref(V),!a))return n}else a=void 0;const N=w?r.h(f,{schema:w}):void 0;return v?(n.push(r.h(s,{name:v,is:m,type:E,defaultValue:L,showValid:Z,props:c},b??N)),n):m?(n.push(r.h(m,c,b??N)),n):(w&&n.push(N),n)},[(u=o==null?void 0:o.default)==null?void 0:u.call(o,{formData:t==null?void 0:t.formData.value,submit:t==null?void 0:t.submit,validate:t==null?void 0:t.validate,errors:t==null?void 0:t.errors.value,status:t==null?void 0:t.status.value,invalid:t==null?void 0:t.invalid.value})])}}});return f},S=(e,s={})=>{const f=Symbol(),l=Symbol(),o=Symbol(),{VvForm:t,errors:i,status:a,formData:u}=P(e,f,s),n=T(f,l),h=J(f,l,o,s),y=R(f,h);return{VvForm:t,VvFormWrapper:n,VvFormField:h,VvFormTemplate:y,formInjectionKey:f,formWrapperInjectionKey:l,formFieldInjectionKey:o,errors:i,status:a,formData:u}},B=Symbol(),H=e=>{let s={};return e.schema&&(s=S(e.schema,e)),{...s,install(f,{global:l=!1}={}){f.provide(B,e),l&&(f.config.globalProperties.$vvForm=e,s!=null&&s.VvForm&&f.component("VvForm",s.VvForm),s!=null&&s.VvFormWrapper&&f.component("VvFormWrapper",s.VvFormWrapper),s!=null&&s.VvFormField&&f.component("VvFormField",s.VvFormField),s!=null&&s.VvFormTemplate&&f.component("VvFormTemplate",s.VvFormTemplate))}}},Q=(e,s={})=>r.getCurrentInstance()?S(e,{...r.inject(B,{}),...s}):S(e,s),X=(e,s={})=>S(e,s);p.FormFieldType=d,p.createForm=H,p.defaultObjectBySchema=$,p.formFactory=X,p.pluginInjectionKey=B,p.useForm=Q,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(function(p,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],r):(p=typeof globalThis<"u"?globalThis:p||self,r(p["@volverjs/form-vue"]={},p.Vue,p.VueUseCore,p.zod))})(this,function(p,r,M,x){"use strict";function $(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function G(e){return e===null}function W(e){return typeof e=="object"}function _(e){return typeof e=="string"}function k(e){return typeof e>"u"}const z=/^[0-9]+$/,J=["__proto__","prototype","constructor"];function C(e,s,f){const l=U(f)?f:void 0;if(!W(e)||!_(s))return l;const a=K(s);if(a.length!==0){for(const t of a){if(t==="*")continue;const i=function(o){return o.map(u=>k(u)||G(u)?u:$(u)?i(u):u[t])};if($(e)&&!z.test(t)?e=i(e):e=e[t],k(e)||G(e))break}return k(e)?l:e}}function A(e,s,f){if(!W(e)||!_(s))return;const l=K(s);if(l.length===0)return;const a=l.length;for(let t=0;t<a;t++){const i=l[t];if(t===a-1){e[i]=f;return}if(i==="*"&&$(e)){const o=l.slice(t+1).join(".");for(const u of e)A(u,o,f);return}k(e[i])&&(e[i]={}),e=e[i]}}function K(e){const s=e.split(/[.]|(?:\[(\d|\*)\])/).filter(f=>!!f);return s.some(f=>J.indexOf(f)!==-1)?[]:s}var d=(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))(d||{}),S=(e=>(e.invalid="invalid",e.valid="valid",e))(S||{});const P=(e,s,f,l)=>r.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:a=>Object.values(d).includes(a),default:d.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},lazyLoad:{type:Boolean,default:!1}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(a,{slots:t,emit:i}){const o=r.computed({get(){if(n!=null&&n.formData)return C(Object(n.formData.value),String(a.name))},set(c){n!=null&&n.formData&&(A(Object(n.formData.value),String(a.name),c),i("update:modelValue",{newValue:o.value,formData:n==null?void 0:n.formData}))}});r.onMounted(()=>{o.value===void 0&&a.defaultValue!==void 0&&(o.value=a.defaultValue)}),r.onBeforeUnmount(()=>{O(),g()});const u=r.inject(s,void 0);u&&u.fields.value.add(a.name);const n=r.inject(e),{props:h,name:y}=r.toRefs(a),m=r.computed(()=>{if(n!=null&&n.errors.value)return C(n.errors.value,String(a.name))}),v=r.computed(()=>{var c;return(c=m.value)==null?void 0:c._errors}),b=r.computed(()=>m.value!==void 0),O=r.watch(b,()=>{b.value?(i("invalid",v.value),u&&u.errors.value.set(a.name,{_errors:v.value})):(i("valid",o.value),u&&u.errors.value.delete(a.name))}),g=r.watch(()=>n==null?void 0:n.formData,()=>{i("update:formData",n==null?void 0:n.formData)},{deep:!0}),V=c=>{o.value=c},I=r.computed(()=>{let c=h.value;return typeof c=="function"&&(c=c(n==null?void 0:n.formData)),Object.keys(c).reduce((w,q)=>(w[q]=r.unref(c[q]),w),{})}),N=r.computed(()=>({...I.value,name:I.value.name??a.name,invalid:b.value,valid:a.showValid?!!(!b.value&&o.value):void 0,type:(c=>{if([d.text,d.number,d.email,d.password,d.tel,d.url,d.search,d.date,d.time,d.datetimeLocal,d.month,d.week,d.color].includes(c))return c})(a.type),invalidLabel:v.value,modelValue:o.value,"onUpdate:modelValue":V}));return r.provide(f,{name:r.readonly(y),errors:r.readonly(m)}),{component:r.computed(()=>{if(a.type===d.custom)return{render(){var c;return((c=t.default)==null?void 0:c.call(t,{modelValue:o.value,onUpdate:V,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,invalid:b.value,invalidLabel:v.value,formData:n==null?void 0:n.formData.value,formErrors:n==null?void 0:n.errors.value,errors:m.value}))??t.defalut}};if(!((l==null?void 0:l.lazyLoad)??a.lazyLoad)){let c;switch(a.type){case d.select:c=r.resolveComponent("VvSelect");break;case d.checkbox:c=r.resolveComponent("VvCheckbox");break;case d.radio:c=r.resolveComponent("VvRadio");break;case d.textarea:c=r.resolveComponent("VvTextarea");break;case d.radioGroup:c=r.resolveComponent("VvRadioGroup");break;case d.checkboxGroup:c=r.resolveComponent("VvCheckboxGroup");break;case d.combobox:c=r.resolveComponent("VvCombobox");break;default:c=r.resolveComponent("VvInputText")}if(typeof c!="string")return c;console.warn(`[form-vue warn]: ${c} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return r.defineAsyncComponent(async()=>{switch(l!=null&&l.sideEffects&&await Promise.resolve(l.sideEffects(a.type)),a.type){case d.textarea:return import("@volverjs/ui-vue/vv-textarea");case d.radio:return import("@volverjs/ui-vue/vv-radio");case d.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case d.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case d.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case d.select:return import("@volverjs/ui-vue/vv-select");case d.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:N,invalid:b}},render(){return this.is?r.h(this.is,this.hasProps,this.$slots):this.type===d.custom?r.h(this.component,null,this.$slots):r.h(this.component,this.hasProps,this.$slots)}}),B=(e,s={})=>{const f=t=>{let i=t;for(;i instanceof x.ZodEffects;)i=i.innerType();for(;i instanceof x.ZodOptional;)i=i._def.innerType;return i},l=f(e);return{...(l instanceof x.ZodObject?l._def.unknownKeys==="passthrough":!1)?s:{},...Object.fromEntries(Object.entries(l.shape).map(([t,i])=>{const o=s[t],u=f(i);let n;if(u instanceof x.ZodDefault&&(n=u._def.defaultValue()),o===null&&u instanceof x.ZodNullable)return[t,o];if(u instanceof x.ZodSchema){const h=i.safeParse(o);if(h.success)return[t,h.data??n]}return u instanceof x.ZodObject?[t,B(u,o&&typeof o=="object"?o:{})]:[t,n]}))}},T=(e,s,f)=>{const l=r.ref(),a=r.ref(),t=r.ref(),i=r.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})},updateThrottle:{type:Number,default:500},continuosValidation:{type:Boolean,default:!1}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","validate","errors","status","valid","invalid"],setup(o,{emit:u}){t.value=B(e,r.toRaw(o.modelValue)),r.watch(()=>o.modelValue,m=>{if(m){const v=r.isProxy(m)?r.toRaw(m):m;t.value=typeof(v==null?void 0:v.clone)=="function"?v.clone():JSON.parse(JSON.stringify(v))}},{deep:!0}),M.watchThrottled(t,m=>{((l.value||(f==null?void 0:f.continuosValidation))??o.continuosValidation)&&n(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&u("update:modelValue",m)},{deep:!0,throttle:(f==null?void 0:f.updateThrottle)??o.updateThrottle});const n=(m=t.value)=>{const v=e.safeParse(m);return v.success?(l.value=void 0,a.value=S.valid,t.value=v.data,u("update:modelValue",t.value),u("valid",v.data),!0):(l.value=v.error.format(),a.value=S.invalid,u("invalid",l.value),!1)},h=()=>n()?(u("submit",t.value),!0):!1,y=r.computed(()=>a.value===S.invalid);return r.provide(s,{formData:t,submit:h,validate:n,errors:r.readonly(l),status:r.readonly(a),invalid:y}),{formData:t,submit:h,validate:n,errors:r.readonly(l),status:r.readonly(a),invalid:y}},render(){return r.h("form",{onSubmit:r.withModifiers(this.submit,["prevent"])},{default:()=>{var o,u;return((u=(o=this.$slots)==null?void 0:o.default)==null?void 0:u.call(o,{formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,status:this.status,invalid:this.invalid}))??this.$slots.default}})}});return{errors:l,status:a,formData:t,VvForm:i}},R=(e,s)=>r.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(l,{emit:a}){const t=r.inject(e),i=r.inject(s,void 0),o=r.ref(new Set),u=r.ref(new Map),{name:n}=r.toRefs(l);r.provide(s,{name:r.readonly(n),errors:u,fields:o}),r.watch(o,y=>{i!=null&&i.fields&&y.forEach(m=>{i==null||i.fields.value.add(m)})},{deep:!0}),r.watch(()=>new Map(u.value),(y,m)=>{i!=null&&i.errors&&(Array.from(m.keys()).forEach(v=>{i.errors.value.delete(v)}),Array.from(y.keys()).forEach(v=>{const b=y.get(v);b&&i.errors.value.set(v,b)}))},{deep:!0});const h=r.computed(()=>t!=null&&t.invalid.value?u.value.size>0:!1);return r.watch(h,()=>{h.value?a("invalid"):a("valid")}),{formData:t==null?void 0:t.formData,errors:t==null?void 0:t.errors,submit:t==null?void 0:t.submit,validate:t==null?void 0:t.validate,invalid:h,fields:o,fieldsErrors:u}},render(){var l,a;return this.tag?r.h(this.tag,null,{default:()=>{var t,i;return((i=(t=this.$slots).default)==null?void 0:i.call(t,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}):((a=(l=this.$slots).default)==null?void 0:a.call(l,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}),H=(e,s)=>{const f=r.defineComponent({props:{schema:{type:[Array,Function],required:!0}},setup(l,{slots:a}){const t=r.inject(e);if(!(t!=null&&t.formData))return;const i=typeof l.schema=="function"?l.schema(t):l.schema;let o;return()=>{var u;return i.reduce((n,h)=>{const y=typeof h=="function"?h(t):h,{vvIs:m,vvName:v,vvSlots:b,vvChildren:O,vvIf:g,vvElseIf:V,vvType:I,vvDefaultValue:N,vvShowValid:Z,...c}=y;if(g!==void 0){if(typeof g=="string"?o=!!C(Object(t.formData.value),g):typeof g=="function"?o=r.unref(g(t)):o=r.unref(g),!o)return n}else if(V!==void 0&&o!==void 0){if(o||(typeof V=="string"?o=!!C(Object(t.formData.value),V):typeof V=="function"?o=r.unref(V(t)):o=r.unref(V),!o))return n}else o=void 0;const w=O?r.h(f,{schema:O}):void 0;return v?(n.push(r.h(s,{name:v,is:m,type:I,defaultValue:N,showValid:Z,props:c},b??w)),n):m?(n.push(r.h(m,c,b??w)),n):(O&&n.push(w),n)},[(u=a==null?void 0:a.default)==null?void 0:u.call(a,{formData:t==null?void 0:t.formData.value,submit:t==null?void 0:t.submit,validate:t==null?void 0:t.validate,errors:t==null?void 0:t.errors.value,status:t==null?void 0:t.status.value,invalid:t==null?void 0:t.invalid.value})])}}});return f},E=(e,s={})=>{const f=Symbol(),l=Symbol(),a=Symbol(),{VvForm:t,errors:i,status:o,formData:u}=T(e,f,s),n=R(f,l),h=P(f,l,a,s),y=H(f,h);return{VvForm:t,VvFormWrapper:n,VvFormField:h,VvFormTemplate:y,formInjectionKey:f,formWrapperInjectionKey:l,formFieldInjectionKey:a,errors:i,status:o,formData:u}},L=Symbol(),Q=e=>{let s={};return e.schema&&(s=E(e.schema,e)),{...s,install(f,{global:l=!1}={}){f.provide(L,e),l&&(f.config.globalProperties.$vvForm=e,s!=null&&s.VvForm&&f.component("VvForm",s.VvForm),s!=null&&s.VvFormWrapper&&f.component("VvFormWrapper",s.VvFormWrapper),s!=null&&s.VvFormField&&f.component("VvFormField",s.VvFormField),s!=null&&s.VvFormTemplate&&f.component("VvFormTemplate",s.VvFormTemplate))}}},X=(e,s={})=>r.getCurrentInstance()?E(e,{...r.inject(L,{}),...s}):E(e,s),Y=(e,s={})=>E(e,s);p.FormFieldType=d,p.createForm=Q,p.defaultObjectBySchema=B,p.formFactory=Y,p.pluginInjectionKey=L,p.useForm=X,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.12",
+  "version": "0.0.13-beta.1",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,33 +35,33 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "0.0.6-beta.7",
+    "@volverjs/ui-vue": "0.0.7",
     "@vueuse/core": "^10.1.2",
     "ts-dot-prop": "^2.1.2",
-    "vue": "^3.3.2",
+    "vue": "^3.3.4",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.32.3",
+    "@playwright/experimental-ct-vue": "1.33.0",
     "@testing-library/vue": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.6",
     "@typescript-eslint/parser": "^5.59.6",
     "@vitejs/plugin-vue": "^4.2.3",
     "@volverjs/style": "^0.1.10",
-    "@vue/compiler-sfc": "^3.3.2",
-    "@vue/runtime-core": "^3.3.2",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/runtime-core": "^3.3.4",
     "@vue/test-utils": "^2.3.2",
     "copy": "^0.3.2",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^9.18.3",
+    "happy-dom": "^9.19.2",
     "prettier": "^2.8.8",
     "typescript": "^5.0.4",
-    "vite": "^4.3.7",
+    "vite": "^4.3.8",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.6.0",
-    "vitest": "^0.31.0",
+    "vitest": "^0.31.1",
     "vue-tsc": "^1.6.5"
   },
   "typesVersions": {

package/src/VvFormField.ts

@@ -17,6 +17,7 @@ import {
 	watch,
 	defineComponent,
 	onBeforeUnmount,
+	unref,
 } from 'vue'
 import type { z } from 'zod'
 import { FormFieldType } from './enums'
@@ -173,10 +174,17 @@ export const defineFormField = <Schema extends FormSchema>(
 				modelValue.value = value
 			}
 			const hasFieldProps = computed(() => {
-				if (typeof fieldProps.value === 'function') {
-					return fieldProps.value(injectedFormData?.formData)
+				let toReturn = fieldProps.value
+				if (typeof toReturn === 'function') {
+					toReturn = toReturn(injectedFormData?.formData)
 				}
-				return fieldProps.value
+				return Object.keys(toReturn).reduce<Record<string, unknown>>(
+					(acc, key) => {
+						acc[key] = unref(toReturn[key])
+						return acc
+					},
+					{},
+				)
 			})
 			const hasProps = computed(() => ({
 				...hasFieldProps.value,

package/src/VvFormTemplate.ts

@@ -58,6 +58,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 							vvShowValid,
 							...props
 						} = normalizedField
+
 						// conditions
 						if (vvIf !== undefined) {
 							if (typeof vvIf === 'string') {