@volverjs/form-vue 0.0.14 → 1.0.0-beta.10

package/dist/index.es.js

@@ -1,77 +1,77 @@
-import { defineComponent as W, computed as g, onMounted as D, onBeforeUnmount as j, inject as I, toRefs as R, watch as E, unref as _, provide as M, readonly as p, resolveComponent as O, defineAsyncComponent as F, h as x, ref as $, toRaw as S, isProxy as ee, withModifiers as re, getCurrentInstance as te } from "vue";
-import { watchThrottled as ae } from "@vueuse/core";
-import { ZodObject as K, ZodDefault as ue, ZodNullable as ne, ZodSchema as le, ZodArray as se, ZodEffects as ie, ZodOptional as fe } from "zod";
-function U(e) {
+import { defineComponent as z, computed as w, onMounted as H, onBeforeUnmount as F, inject as B, toRefs as P, watch as O, unref as C, provide as M, readonly as U, resolveComponent as S, defineAsyncComponent as ee, h as p, ref as $, toRaw as E, isProxy as re, withModifiers as te, getCurrentInstance as ae } from "vue";
+import { watchIgnorable as ne, throttleFilter as ue } from "@vueuse/core";
+import { ZodObject as Z, ZodDefault as le, ZodNullable as se, ZodSchema as ie, ZodArray as fe, ZodEffects as oe, ZodOptional as de } from "zod";
+function J(e) {
   return Array.isArray(e);
 }
-function oe(e) {
+function ve(e) {
   return typeof e < "u";
 }
-function P(e) {
+function q(e) {
   return e === null;
 }
-function H(e) {
+function Q(e) {
   return typeof e == "object";
 }
-function Q(e) {
+function X(e) {
   return typeof e == "string";
 }
-function N(e) {
+function G(e) {
   return typeof e > "u";
 }
-const de = /^[0-9]+$/, ve = ["__proto__", "prototype", "constructor"];
-function G(e, l, t) {
-  const f = oe(t) ? t : void 0;
-  if (!H(e) || !Q(l))
-    return f;
-  const n = X(l);
-  if (n.length !== 0) {
-    for (const r of n) {
+const ce = /^[0-9]+$/, me = ["__proto__", "prototype", "constructor"];
+function L(e, s, t) {
+  const o = ve(t) ? t : void 0;
+  if (!Q(e) || !X(s))
+    return o;
+  const u = T(s);
+  if (u.length !== 0) {
+    for (const r of u) {
       if (r === "*")
         continue;
-      const u = function(i) {
-        return i.map((s) => N(s) || P(s) ? s : U(s) ? u(s) : s[r]);
+      const l = function(n) {
+        return n.map((f) => G(f) || q(f) ? f : J(f) ? l(f) : f[r]);
       };
-      if (U(e) && !de.test(r) ? e = u(e) : e = e[r], N(e) || P(e))
+      if (J(e) && !ce.test(r) ? e = l(e) : e = e[r], G(e) || q(e))
         break;
     }
-    return N(e) ? f : e;
+    return G(e) ? o : e;
   }
 }
-function T(e, l, t) {
-  if (!H(e) || !Q(l))
+function Y(e, s, t) {
+  if (!Q(e) || !X(s))
     return;
-  const f = X(l);
-  if (f.length === 0)
+  const o = T(s);
+  if (o.length === 0)
     return;
-  const n = f.length;
-  for (let r = 0; r < n; r++) {
-    const u = f[r];
-    if (r === n - 1) {
-      e[u] = t;
+  const u = o.length;
+  for (let r = 0; r < u; r++) {
+    const l = o[r];
+    if (r === u - 1) {
+      e[l] = t;
       return;
     }
-    if (u === "*" && U(e)) {
-      const i = f.slice(r + 1).join(".");
-      for (const s of e)
-        T(s, i, t);
+    if (l === "*" && J(e)) {
+      const n = o.slice(r + 1).join(".");
+      for (const f of e)
+        Y(f, n, t);
       return;
     }
-    N(e[u]) && (e[u] = {}), e = e[u];
+    G(e[l]) && (e[l] = {}), e = e[l];
   }
 }
-function X(e) {
-  const l = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
-  return l.some((t) => ve.indexOf(t) !== -1) ? [] : l;
+function T(e) {
+  const s = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
+  return s.some((t) => me.indexOf(t) !== -1) ? [] : s;
 }
-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 = "datetime-local", 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 || {}), B = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(B || {});
-const ce = (e, l, t, f) => W({
-  name: "FieldComponent",
+var d = /* @__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 = "datetime-local", 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 || {}), k = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e.submitting = "submitting", e.updated = "updated", e.unknown = "unknown", e))(k || {});
+const he = (e, s, t, o) => z({
+  name: "VvFormField",
   props: {
     type: {
       type: String,
-      validator: (n) => Object.values(v).includes(n),
-      default: v.custom
+      validator: (u) => Object.values(d).includes(u),
+      default: d.custom
     },
     is: {
       type: [Object, String],
@@ -96,331 +96,399 @@ const ce = (e, l, t, f) => W({
     lazyLoad: {
       type: Boolean,
       default: !1
+    },
+    readonly: {
+      type: Boolean,
+      default: void 0
     }
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(n, { slots: r, emit: u }) {
-    const i = g({
+  setup(u, { slots: r, emit: l }) {
+    const n = w({
       get() {
         if (a != null && a.formData)
-          return G(
+          return L(
             Object(a.formData.value),
-            String(n.name)
+            String(u.name)
           );
       },
-      set(d) {
-        a != null && a.formData && (T(
+      set(i) {
+        a != null && a.formData && (Y(
           Object(a.formData.value),
-          String(n.name),
-          d
-        ), u("update:modelValue", {
-          newValue: i.value,
+          String(u.name),
+          i
+        ), l("update:modelValue", {
+          newValue: n.value,
           formData: a == null ? void 0 : a.formData
         }));
       }
     });
-    D(() => {
-      i.value === void 0 && n.defaultValue !== void 0 && (i.value = n.defaultValue);
-    }), j(() => {
-      w(), k();
+    H(() => {
+      n.value === void 0 && u.defaultValue !== void 0 && (n.value = u.defaultValue);
+    }), F(() => {
+      h(), m();
     });
-    const s = I(l, void 0);
-    s && s.fields.value.add(n.name);
-    const a = I(e), { props: o, name: h } = R(n), b = g(() => {
+    const f = B(s, void 0);
+    f && f.fields.value.add(u.name);
+    const a = B(e), { props: v, name: b } = P(u), g = w(() => {
       if (a != null && a.errors.value)
-        return G(a.errors.value, String(n.name));
-    }), c = g(() => {
-      var d;
-      return (d = b.value) == null ? void 0 : d._errors;
-    }), m = g(() => b.value !== void 0), w = E(m, () => {
-      m.value ? (u("invalid", c.value), s && s.errors.value.set(
-        n.name,
+        return L(a.errors.value, String(u.name));
+    }), V = w(() => {
+      var i;
+      return (i = g.value) == null ? void 0 : i._errors;
+    }), c = w(() => g.value !== void 0), h = O(c, () => {
+      c.value ? (l("invalid", V.value), f && f.errors.value.set(
+        u.name,
         {
-          _errors: c.value
+          _errors: V.value
         }
-      )) : (u("valid", i.value), s && s.errors.value.delete(
-        n.name
+      )) : (l("valid", n.value), f && f.errors.value.delete(
+        u.name
       ));
-    }), k = E(
+    }), m = O(
       () => a == null ? void 0 : a.formData,
       () => {
-        u("update:formData", a == null ? void 0 : a.formData);
+        l("update:formData", a == null ? void 0 : a.formData);
       },
       { deep: !0 }
-    ), y = (d) => {
-      i.value = d;
-    }, V = g(() => {
-      let d = o.value;
-      return typeof d == "function" && (d = d(a == null ? void 0 : a.formData)), Object.keys(d).reduce(
-        (A, C) => (A[C] = _(d[C]), A),
+    ), y = (i) => {
+      n.value = i;
+    }, x = w(() => {
+      let i = v.value;
+      return typeof i == "function" && (i = i(a == null ? void 0 : a.formData)), Object.keys(i).reduce(
+        (_, A) => (_[A] = C(i[A]), _),
         {}
       );
-    }), z = g(() => ({
-      ...V.value,
-      name: V.value.name ?? n.name,
-      invalid: m.value,
-      valid: n.showValid ? !!(!m.value && i.value) : void 0,
-      type: ((d) => {
+    }), I = w(() => a != null && a.readonly.value ? !0 : x.value.readonly ?? u.readonly), W = w(() => ({
+      ...x.value,
+      name: x.value.name ?? u.name,
+      invalid: c.value,
+      valid: u.showValid ? !!(!c.value && n.value) : void 0,
+      type: ((i) => {
         if ([
-          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(d))
-          return d;
-      })(n.type),
-      invalidLabel: c.value,
-      modelValue: i.value,
+          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(i))
+          return i;
+      })(u.type),
+      invalidLabel: V.value,
+      modelValue: n.value,
+      readonly: I.value,
       "onUpdate:modelValue": y
     }));
     return M(t, {
-      name: p(h),
-      errors: p(b)
-    }), { component: g(() => {
-      if (n.type === v.custom)
+      name: U(b),
+      errors: U(g)
+    }), { component: w(() => {
+      if (u.type === d.custom)
         return {
           render() {
-            var d;
-            return ((d = r.default) == null ? void 0 : d.call(r, {
-              modelValue: i.value,
+            var i;
+            return ((i = r.default) == null ? void 0 : i.call(r, {
+              modelValue: n.value,
               onUpdate: y,
               submit: a == null ? void 0 : a.submit,
               validate: a == null ? void 0 : a.validate,
-              invalid: m.value,
-              invalidLabel: c.value,
+              invalid: c.value,
+              invalidLabel: V.value,
               formData: a == null ? void 0 : a.formData.value,
               formErrors: a == null ? void 0 : a.errors.value,
-              errors: b.value
+              errors: g.value,
+              readonly: I.value
             })) ?? r.defalut;
           }
         };
-      if (!((f == null ? void 0 : f.lazyLoad) ?? n.lazyLoad)) {
-        let d;
-        switch (n.type) {
-          case v.select:
-            d = O("VvSelect");
+      if (!((o == null ? void 0 : o.lazyLoad) ?? u.lazyLoad)) {
+        let i;
+        switch (u.type) {
+          case d.select:
+            i = S("VvSelect");
             break;
-          case v.checkbox:
-            d = O("VvCheckbox");
+          case d.checkbox:
+            i = S("VvCheckbox");
             break;
-          case v.radio:
-            d = O("VvRadio");
+          case d.radio:
+            i = S("VvRadio");
             break;
-          case v.textarea:
-            d = O("VvTextarea");
+          case d.textarea:
+            i = S("VvTextarea");
             break;
-          case v.radioGroup:
-            d = O("VvRadioGroup");
+          case d.radioGroup:
+            i = S("VvRadioGroup");
             break;
-          case v.checkboxGroup:
-            d = O("VvCheckboxGroup");
+          case d.checkboxGroup:
+            i = S("VvCheckboxGroup");
             break;
-          case v.combobox:
-            d = O("VvCombobox");
+          case d.combobox:
+            i = S("VvCombobox");
             break;
           default:
-            d = O("VvInputText");
+            i = S("VvInputText");
         }
-        if (typeof d != "string")
-          return d;
+        if (typeof i != "string")
+          return i;
         console.warn(
-          `[form-vue warn]: ${d} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
+          `[form-vue warn]: ${i} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
         );
       }
-      return F(async () => {
-        switch (f != null && f.sideEffects && await Promise.resolve(f.sideEffects(n.type)), n.type) {
-          case v.textarea:
+      return ee(async () => {
+        switch (o != null && o.sideEffects && await Promise.resolve(o.sideEffects(u.type)), u.type) {
+          case d.textarea:
             return import("@volverjs/ui-vue/vv-textarea");
-          case v.radio:
+          case d.radio:
             return import("@volverjs/ui-vue/vv-radio");
-          case v.radioGroup:
+          case d.radioGroup:
             return import("@volverjs/ui-vue/vv-radio-group");
-          case v.checkbox:
+          case d.checkbox:
             return import("@volverjs/ui-vue/vv-checkbox");
-          case v.checkboxGroup:
+          case d.checkboxGroup:
             return import("@volverjs/ui-vue/vv-checkbox-group");
-          case v.select:
+          case d.select:
             return import("@volverjs/ui-vue/vv-select");
-          case v.combobox:
+          case d.combobox:
             return import("@volverjs/ui-vue/vv-combobox");
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: z, invalid: m };
+    }), hasProps: W, invalid: c };
   },
   render() {
-    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);
+    return this.is ? p(this.is, this.hasProps, this.$slots) : this.type === d.custom ? p(this.component, null, this.$slots) : p(this.component, this.hasProps, this.$slots);
   }
-}), J = (e, l = {}) => {
+}), K = (e, s = {}) => {
   const t = (r) => {
-    let u = r;
-    for (; u instanceof ie; )
-      u = u.innerType();
-    return u instanceof fe && (u = u._def.innerType), u;
-  }, f = t(e);
+    let l = r;
+    for (; l instanceof oe; )
+      l = l.innerType();
+    return l instanceof de && (l = l._def.innerType), l;
+  }, o = t(e);
   return {
-    ...(f instanceof K ? f._def.unknownKeys === "passthrough" : !1) ? l : {},
+    ...(o instanceof Z ? o._def.unknownKeys === "passthrough" : !1) ? s : {},
     ...Object.fromEntries(
-      Object.entries(f.shape).map(
-        ([r, u]) => {
-          const i = l[r];
-          let s = t(u), a;
-          if (s instanceof ue && (a = s._def.defaultValue(), s = s._def.innerType), i === null && s instanceof ne)
-            return [r, i];
-          if (s instanceof le) {
-            const o = u.safeParse(i);
-            if (o.success)
-              return [r, o.data ?? a];
+      Object.entries(o.shape).map(
+        ([r, l]) => {
+          const n = s[r];
+          let f = t(l), a;
+          if (f instanceof le && (a = f._def.defaultValue(), f = f._def.innerType), n === null && f instanceof se)
+            return [r, n];
+          if (f instanceof ie) {
+            const v = l.safeParse(n);
+            if (v.success)
+              return [r, v.data ?? a];
           }
-          if (s instanceof se && Array.isArray(i) && i.length) {
-            const o = t(s._def.type);
-            if (o instanceof K)
+          if (f instanceof fe && Array.isArray(n) && n.length) {
+            const v = t(f._def.type);
+            if (v instanceof Z)
               return [
                 r,
-                i.map(
-                  (h) => J(
-                    o,
-                    h && typeof h == "object" ? h : void 0
+                n.map(
+                  (b) => K(
+                    v,
+                    b && typeof b == "object" ? b : void 0
                   )
                 ) ?? a
               ];
           }
-          return s instanceof K ? [
+          return f instanceof Z ? [
             r,
-            J(
-              s,
-              i && typeof i == "object" ? i : a
+            K(
+              f,
+              n && typeof n == "object" ? n : a
             )
           ] : [r, a];
         }
       )
     )
   };
-}, me = (e, l, t, f) => {
-  const n = $(), r = $(), u = $(), i = W({
-    name: "FormComponent",
+}, ye = (e, s, t, o) => {
+  const u = $(), r = $(), l = w(() => r.value === k.invalid), n = $(), f = $(!1), a = async (c = n.value) => {
+    if (f.value)
+      return !0;
+    const h = await e.safeParseAsync(c);
+    return h.success ? (u.value = void 0, r.value = k.valid, n.value = h.data, !0) : (u.value = h.error.format(), r.value = k.invalid, !1);
+  }, v = async () => f.value || !await a() ? !1 : (r.value = k.submitting, !0), { ignoreUpdates: b, stop: g } = ne(
+    n,
+    () => {
+      r.value = k.updated;
+    },
+    {
+      deep: !0,
+      eventFilter: ue((t == null ? void 0 : t.updateThrottle) ?? 500)
+    }
+  ), V = z({
+    name: "VvForm",
     props: {
+      continuosValidation: {
+        type: Boolean,
+        default: !1
+      },
       modelValue: {
         type: Object,
         default: () => ({})
       },
-      updateThrottle: {
-        type: Number,
-        default: 500
-      },
-      continuosValidation: {
+      readonly: {
         type: Boolean,
-        default: !1
+        default: (t == null ? void 0 : t.readonly) ?? !1
+      },
+      tag: {
+        type: String,
+        default: "form"
       },
       template: {
         type: [Array, Function],
         default: void 0
       }
     },
-    emits: ["invalid", "valid", "submit", "update:modelValue"],
-    expose: ["submit", "validate", "errors", "status", "valid", "invalid"],
-    setup(s, { emit: a }) {
-      u.value = J(
+    emits: [
+      "invalid",
+      "valid",
+      "submit",
+      "update:modelValue",
+      "update:readonly"
+    ],
+    expose: [
+      "submit",
+      "validate",
+      "errors",
+      "status",
+      "valid",
+      "invalid",
+      "readonly"
+    ],
+    setup(c, { emit: h }) {
+      return n.value = K(
         e,
-        S(s.modelValue)
-      ), E(
-        () => s.modelValue,
-        (c) => {
-          if (c) {
-            const m = ee(c) ? S(c) : c;
-            u.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
+        E(c.modelValue)
+      ), O(
+        () => c.modelValue,
+        (m) => {
+          if (m) {
+            const y = re(m) ? E(m) : m;
+            if (JSON.stringify(y) === JSON.stringify(E(n.value)))
+              return;
+            n.value = typeof (y == null ? void 0 : y.clone) == "function" ? y.clone() : JSON.parse(JSON.stringify(y));
           }
         },
         { deep: !0 }
-      ), ae(
-        u,
-        (c) => {
-          var m;
-          ((n.value || (t == null ? void 0 : t.continuosValidation)) ?? s.continuosValidation) && o(), (!c || !s.modelValue || JSON.stringify(c) !== JSON.stringify(s.modelValue)) && (a("update:modelValue", c), (m = t == null ? void 0 : t.onUpdate) == null || m.call(t, S(c)));
-        },
-        {
-          deep: !0,
-          throttle: (t == null ? void 0 : t.updateThrottle) ?? s.updateThrottle
+      ), O(r, async (m) => {
+        var y, x, I, W, N;
+        if (m === k.invalid) {
+          const i = E(u.value);
+          h("invalid", i), (y = t == null ? void 0 : t.onInvalid) == null || y.call(t, i);
+          return;
         }
-      );
-      const o = (c = u.value) => {
-        var w, k, y;
-        const m = e.safeParse(c);
-        return m.success ? (n.value = void 0, r.value = B.valid, u.value = m.data, a("update:modelValue", u.value), (k = t == null ? void 0 : t.onUpdate) == null || k.call(t, S(u.value)), a("valid", m.data), (y = t == null ? void 0 : t.onValid) == null || y.call(t, S(u.value)), !0) : (n.value = m.error.format(), r.value = B.invalid, a("invalid", n.value), (w = t == null ? void 0 : t.onInvalid) == null || w.call(t, S(n.value)), !1);
-      }, h = () => {
-        var c;
-        return o() ? (a("submit", u.value), (c = t == null ? void 0 : t.onSubmit) == null || c.call(t, S(u.value)), !0) : !1;
-      }, b = g(() => r.value === B.invalid);
-      return M(l, {
-        formData: u,
-        submit: h,
-        validate: o,
-        errors: p(n),
-        status: p(r),
-        invalid: b
+        if (m === k.valid) {
+          const i = E(n.value);
+          h("valid", i), (x = t == null ? void 0 : t.onValid) == null || x.call(t, i), h("update:modelValue", i), (I = t == null ? void 0 : t.onUpdate) == null || I.call(t, i);
+          return;
+        }
+        if (m === k.submitting) {
+          const i = E(n.value);
+          h("submit", i), (W = t == null ? void 0 : t.onSubmit) == null || W.call(t, i);
+        }
+        if (m === k.updated) {
+          if ((u.value || t != null && t.continuosValidation || c.continuosValidation) && await a(), !n.value || !c.modelValue || JSON.stringify(n.value) !== JSON.stringify(c.modelValue)) {
+            const i = E(n.value);
+            h("update:modelValue", i), (N = t == null ? void 0 : t.onUpdate) == null || N.call(t, i);
+          }
+          r.value === k.updated && (r.value = k.unknown);
+        }
+      }), H(() => {
+        f.value = c.readonly;
+      }), O(
+        () => c.readonly,
+        (m) => {
+          f.value = m;
+        }
+      ), O(f, (m) => {
+        m !== c.readonly && h("update:readonly", f.value);
+      }), M(s, {
+        formData: n,
+        submit: v,
+        validate: a,
+        ignoreUpdates: b,
+        stopUpdatesWatch: g,
+        errors: U(u),
+        status: U(r),
+        invalid: l,
+        readonly: f
       }), {
-        formData: u,
-        submit: h,
-        validate: o,
-        errors: p(n),
-        status: p(r),
-        invalid: b
+        formData: n,
+        submit: v,
+        validate: a,
+        ignoreUpdates: b,
+        stopUpdatesWatch: g,
+        errors: U(u),
+        status: U(r),
+        invalid: l,
+        isReadonly: f
       };
     },
     render() {
-      const s = () => {
-        var a, o;
-        return ((o = (a = this.$slots) == null ? void 0 : a.default) == null ? void 0 : o.call(a, {
+      const c = () => {
+        var h, m;
+        return ((m = (h = this.$slots) == null ? void 0 : h.default) == null ? void 0 : m.call(h, {
           formData: this.formData,
           submit: this.submit,
           validate: this.validate,
+          ignoreUpdates: this.ignoreUpdates,
+          stopUpdatesWatch: this.stopUpdatesWatch,
           errors: this.errors,
           status: this.status,
-          invalid: this.invalid
+          invalid: this.invalid,
+          readonly: this.isReadonly
         })) ?? this.$slots.default;
       };
-      return x(
-        "form",
+      return p(
+        this.tag,
         {
-          onSubmit: re(this.submit, ["prevent"])
+          onSubmit: te(this.submit, ["prevent"])
         },
-        (this.template ?? (t == null ? void 0 : t.template)) && f ? [
-          x(
-            f,
+        (this.template ?? (t == null ? void 0 : t.template)) && o ? [
+          p(
+            o,
             {
               schema: this.template ?? (t == null ? void 0 : t.template)
             },
             {
-              default: s
+              default: c
             }
           )
         ] : {
-          default: s
+          default: c
         }
       );
     }
   });
   return {
-    errors: n,
+    errors: u,
     status: r,
-    formData: u,
+    invalid: l,
+    readonly: f,
+    formData: n,
+    validate: a,
+    submit: v,
+    ignoreUpdates: b,
+    stopUpdatesWatch: g,
     /**
      * An hack to add types to the default slot
      */
-    VvForm: i
+    VvForm: V
   };
-}, he = (e, l) => W({
-  name: "WrapperComponent",
+}, be = (e, s) => z({
+  name: "VvFormWrapper",
   props: {
     name: {
       type: String,
@@ -433,51 +501,51 @@ const ce = (e, l, t, f) => W({
   },
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
-  setup(f, { emit: n }) {
-    const r = I(e), u = I(l, void 0), i = $(/* @__PURE__ */ new Set()), s = $(/* @__PURE__ */ new Map()), { name: a } = R(f);
-    M(l, {
-      name: p(a),
-      errors: s,
-      fields: i
-    }), E(
-      i,
-      (h) => {
-        u != null && u.fields && h.forEach((b) => {
-          u == null || u.fields.value.add(b);
+  setup(o, { emit: u }) {
+    const r = B(e), l = B(s, void 0), n = $(/* @__PURE__ */ new Set()), f = $(/* @__PURE__ */ new Map()), { name: a } = P(o);
+    M(s, {
+      name: U(a),
+      errors: f,
+      fields: n
+    }), O(
+      n,
+      (b) => {
+        l != null && l.fields && b.forEach((g) => {
+          l == null || l.fields.value.add(g);
         });
       },
       { deep: !0 }
-    ), E(
-      () => new Map(s.value),
-      (h, b) => {
-        u != null && u.errors && (Array.from(b.keys()).forEach((c) => {
-          u.errors.value.delete(c);
-        }), Array.from(h.keys()).forEach((c) => {
-          const m = h.get(c);
-          m && u.errors.value.set(c, m);
+    ), O(
+      () => new Map(f.value),
+      (b, g) => {
+        l != null && l.errors && (Array.from(g.keys()).forEach((V) => {
+          l.errors.value.delete(V);
+        }), Array.from(b.keys()).forEach((V) => {
+          const c = b.get(V);
+          c && l.errors.value.set(V, c);
         }));
       },
       { deep: !0 }
     );
-    const o = g(() => r != null && r.invalid.value ? s.value.size > 0 : !1);
-    return E(o, () => {
-      o.value ? n("invalid") : n("valid");
+    const v = w(() => r != null && r.invalid.value ? f.value.size > 0 : !1);
+    return O(v, () => {
+      v.value ? u("invalid") : u("valid");
     }), {
       formData: r == null ? void 0 : r.formData,
       errors: r == null ? void 0 : r.errors,
       submit: r == null ? void 0 : r.submit,
       validate: r == null ? void 0 : r.validate,
-      invalid: o,
-      fields: i,
-      fieldsErrors: s
+      invalid: v,
+      fields: n,
+      fieldsErrors: f
     };
   },
   render() {
-    var f, n;
-    return this.tag ? x(this.tag, null, {
+    var o, u;
+    return this.tag ? p(this.tag, null, {
       default: () => {
-        var r, u;
-        return ((u = (r = this.$slots).default) == null ? void 0 : u.call(r, {
+        var r, l;
+        return ((l = (r = this.$slots).default) == null ? void 0 : l.call(r, {
           invalid: this.invalid,
           formData: this.formData,
           submit: this.submit,
@@ -486,7 +554,7 @@ const ce = (e, l, t, f) => W({
           fieldsErrors: this.fieldsErrors
         })) ?? this.$slots.defalut;
       }
-    }) : ((n = (f = this.$slots).default) == null ? void 0 : n.call(f, {
+    }) : ((u = (o = this.$slots).default) == null ? void 0 : u.call(o, {
       invalid: this.invalid,
       formData: this.formData,
       submit: this.submit,
@@ -495,75 +563,86 @@ const ce = (e, l, t, f) => W({
       fieldsErrors: this.fieldsErrors
     })) ?? this.$slots.defalut;
   }
-}), be = (e, l) => {
-  const t = W({
+}), Ve = (e, s) => {
+  const t = z({
+    name: "VvFormTemplate",
     props: {
       schema: {
         type: [Array, Function],
         required: !0
+      },
+      scope: {
+        type: Object,
+        default: () => ({})
       }
     },
-    setup(f, { slots: n }) {
-      const r = I(e);
+    setup(o, { slots: u }) {
+      const r = B(e);
       if (r != null && r.formData)
         return () => {
           var a;
-          const u = typeof f.schema == "function" ? f.schema(r) : f.schema;
-          let i;
-          const s = u.reduce((o, h) => {
-            const b = typeof h == "function" ? h(r) : h, {
-              vvIs: c,
-              vvName: m,
-              vvSlots: w,
-              vvChildren: k,
+          const l = typeof o.schema == "function" ? o.schema(
+            r,
+            o.scope
+          ) : o.schema;
+          let n;
+          const f = l.reduce((v, b) => {
+            const g = typeof b == "function" ? b(r, o.scope) : b, {
+              vvIs: V,
+              vvName: c,
+              vvSlots: h,
+              vvChildren: m,
               vvIf: y,
-              vvElseIf: V,
-              vvType: z,
-              vvDefaultValue: q,
-              vvShowValid: d,
-              vvContent: A,
-              ...C
-            } = b;
+              vvElseIf: x,
+              vvType: I,
+              vvDefaultValue: W,
+              vvShowValid: N,
+              vvContent: i,
+              ..._
+            } = g;
             if (y !== void 0) {
-              if (typeof y == "string" ? i = !!G(
+              if (typeof y == "string" ? n = !!L(
                 Object(r.formData.value),
                 y
-              ) : typeof y == "function" ? i = _(y(r)) : i = _(y), !i)
-                return o;
-            } else if (V !== void 0 && i !== void 0) {
-              if (i || (typeof V == "string" ? i = !!G(
+              ) : typeof y == "function" ? n = C(y(r)) : n = C(y), !n)
+                return v;
+            } else if (x !== void 0 && n !== void 0) {
+              if (n || (typeof x == "string" ? n = !!L(
                 Object(r.formData.value),
-                V
-              ) : typeof V == "function" ? i = _(V(r)) : i = _(V), !i))
-                return o;
+                x
+              ) : typeof x == "function" ? n = C(x(r)) : n = C(x), !n))
+                return v;
             } else
-              i = void 0;
-            const Z = k ? x(t, {
-              schema: k
-            }) : void 0;
-            return m ? (o.push(
-              x(
-                l,
+              n = void 0;
+            const A = m ? {
+              default: (j) => p(t, {
+                schema: m,
+                scope: j
+              })
+            } : void 0;
+            return c ? (v.push(
+              p(
+                s,
                 {
-                  name: m,
-                  is: c,
-                  type: z,
-                  defaultValue: q,
-                  showValid: d,
-                  props: C
+                  name: c,
+                  is: V,
+                  type: I,
+                  defaultValue: W,
+                  showValid: N,
+                  props: _
                 },
-                w ?? Z ?? A
+                h ?? A ?? i
               )
-            ), o) : c ? (o.push(
-              x(
-                c,
-                C,
-                w ?? Z ?? A
+            ), v) : V ? (v.push(
+              p(
+                V,
+                _,
+                h ?? A ?? i
               )
-            ), o) : (k && o.push(Z), o);
+            ), v) : (A && v.push(A.default(o.scope)), v);
           }, []);
-          return s.push(
-            (a = n == null ? void 0 : n.default) == null ? void 0 : a.call(n, {
+          return f.push(
+            (a = u == null ? void 0 : u.default) == null ? void 0 : a.call(u, {
               formData: r == null ? void 0 : r.formData.value,
               submit: r == null ? void 0 : r.submit,
               validate: r == null ? void 0 : r.validate,
@@ -571,58 +650,70 @@ const ce = (e, l, t, f) => W({
               status: r == null ? void 0 : r.status.value,
               invalid: r == null ? void 0 : r.invalid.value
             })
-          ), s;
+          ), f;
         };
     }
   });
   return t;
-}, L = (e, l = {}) => {
-  const t = Symbol(), f = Symbol(), n = Symbol(), r = he(
-    t,
-    f
-  ), u = ce(
+}, R = (e, s = {}) => {
+  const t = Symbol(), o = Symbol(), u = Symbol(), r = be(
     t,
-    f,
-    n,
-    l
-  ), i = be(t, u), { VvForm: s, errors: a, status: o, formData: h } = me(
-    e,
+    o
+  ), l = he(
     t,
-    l,
-    i
-  );
+    o,
+    u,
+    s
+  ), n = Ve(t, l), {
+    VvForm: f,
+    errors: a,
+    status: v,
+    invalid: b,
+    readonly: g,
+    formData: V,
+    validate: c,
+    submit: h,
+    ignoreUpdates: m,
+    stopUpdatesWatch: y
+  } = ye(e, t, s, n);
   return {
-    VvForm: s,
+    VvForm: f,
     VvFormWrapper: r,
-    VvFormField: u,
-    VvFormTemplate: i,
+    VvFormField: l,
+    VvFormTemplate: n,
     formInjectionKey: t,
-    formWrapperInjectionKey: f,
-    formFieldInjectionKey: n,
+    formWrapperInjectionKey: o,
+    formFieldInjectionKey: u,
     errors: a,
-    status: o,
-    formData: h
+    status: v,
+    invalid: b,
+    readonly: g,
+    formData: V,
+    validate: c,
+    submit: h,
+    ignoreUpdates: m,
+    stopUpdatesWatch: y
   };
-}, Y = Symbol(), xe = (e) => {
-  let l = {};
-  return e.schema && (l = L(e.schema, e)), {
-    ...l,
-    install(t, { global: f = !1 } = {}) {
-      t.provide(Y, e), f && (t.config.globalProperties.$vvForm = e, l != null && l.VvForm && t.component("VvForm", l.VvForm), l != null && l.VvFormWrapper && t.component("VvFormWrapper", l.VvFormWrapper), l != null && l.VvFormField && t.component("VvFormField", l.VvFormField), l != null && l.VvFormTemplate && t.component("VvFormTemplate", l.VvFormTemplate));
+}, D = Symbol(), we = (e) => {
+  let s = {};
+  return e.schema && (s = R(e.schema, e)), {
+    ...s,
+    install(t, { global: o = !1 } = {}) {
+      t.provide(D, e), o && (t.config.globalProperties.$vvForm = e, s != null && s.VvForm && t.component("VvForm", s.VvForm), s != null && s.VvFormWrapper && t.component("VvFormWrapper", s.VvFormWrapper), s != null && s.VvFormField && t.component("VvFormField", s.VvFormField), s != null && s.VvFormTemplate && t.component("VvFormTemplate", s.VvFormTemplate));
     }
   };
-}, ke = (e, l = {}) => te() ? L(
+}, Oe = (e, s = {}) => ae() ? R(
   e,
   {
-    ...I(Y, {}),
-    ...l
+    ...B(D, {}),
+    ...s
   }
-) : L(e, l), Oe = (e, l = {}) => L(e, l);
+) : R(e, s), pe = (e, s = {}) => R(e, s);
 export {
-  v as FormFieldType,
-  xe as createForm,
-  J as defaultObjectBySchema,
-  Oe as formFactory,
-  Y as pluginInjectionKey,
-  ke as useForm
+  d as FormFieldType,
+  we as createForm,
+  K as defaultObjectBySchema,
+  pe as formFactory,
+  D as pluginInjectionKey,
+  Oe as useForm
 };