@volverjs/form-vue 1.0.0-beta.33 → 1.0.0-beta.34

package/dist/index.es.js

@@ -1,15 +1,15 @@
-import { ref as C, computed as I, readonly as N, defineComponent as J, toRaw as L, watch as U, isProxy as ce, onMounted as j, provide as F, h as R, withModifiers as ae, toRefs as te, useId as ie, inject as P, onBeforeUnmount as W, unref as K, resolveComponent as _, defineAsyncComponent as he, getCurrentInstance as ye } from "vue";
+import { ref as C, computed as I, readonly as L, defineComponent as W, h as $, withModifiers as ae, toRaw as _, watch as U, isProxy as ce, onMounted as j, provide as F, toRefs as te, useId as ie, inject as P, onBeforeUnmount as J, unref as K, resolveComponent as N, defineAsyncComponent as ye, getCurrentInstance as he } from "vue";
 import { watchIgnorable as me, throttleFilter as be } from "@vueuse/core";
 import { ZodObject as H, ZodDefault as pe, ZodNullable as Ve, ZodSchema as ge, ZodArray as we, ZodRecord as Oe, ZodEffects as le, ZodOptional as ne, ZodError as xe } from "zod";
 var p = /* @__PURE__ */ ((r) => (r.text = "text", r.number = "number", r.email = "email", r.password = "password", r.tel = "tel", r.url = "url", r.search = "search", r.date = "date", r.time = "time", r.datetimeLocal = "datetime-local", r.month = "month", r.week = "week", r.color = "color", r.select = "select", r.checkbox = "checkbox", r.radio = "radio", r.textarea = "textarea", r.radioGroup = "radioGroup", r.checkboxGroup = "checkboxGroup", r.combobox = "combobox", r.custom = "custom", r))(p || {}), G = /* @__PURE__ */ ((r) => (r.invalid = "invalid", r.valid = "valid", r.submitting = "submitting", r.reset = "reset", r.updated = "updated", r.unknown = "unknown", r))(G || {});
 function X(r, i = {}) {
-  const e = (v) => {
-    let f = v;
+  const e = (d) => {
+    let f = d;
     for (; f instanceof le; )
       f = f.innerType();
     return f instanceof ne && (f = f._def.innerType), f;
-  }, c = (v) => {
-    let f = v;
+  }, c = (d) => {
+    let f = d;
     for (; f instanceof le; )
       f = f.innerType();
     return f instanceof ne;
@@ -18,51 +18,51 @@ function X(r, i = {}) {
     ...(t instanceof H ? t._def.unknownKeys === "passthrough" : !1) ? i : {},
     ...Object.fromEntries(
       Object.entries(t.shape).map(
-        ([v, f]) => {
-          const o = i[v], g = c(f);
-          let d = e(f), n;
-          if (d instanceof pe && (n = d._def.defaultValue(), d = d._def.innerType), o === null && d instanceof Ve)
-            return [v, o];
-          if (o == null && g)
-            return [v, n];
-          if (d instanceof ge) {
-            const m = f.safeParse(o);
-            if (m.success)
-              return [v, m.data ?? n];
+        ([d, f]) => {
+          const o = i[d], w = c(f);
+          let v = e(f), n;
+          if (v instanceof pe && (n = v._def.defaultValue(), v = v._def.innerType), o === null && v instanceof Ve)
+            return [d, o];
+          if (o == null && w)
+            return [d, n];
+          if (v instanceof ge) {
+            const h = f.safeParse(o);
+            if (h.success)
+              return [d, h.data ?? n];
           }
-          if (d instanceof we && Array.isArray(o) && o.length) {
-            const m = e(d._def.type);
-            if (m instanceof H)
+          if (v instanceof we && Array.isArray(o) && o.length) {
+            const h = e(v._def.type);
+            if (h instanceof H)
               return [
-                v,
+                d,
                 o.map(
-                  (y) => X(
-                    m,
-                    y && typeof y == "object" ? y : void 0
+                  (V) => X(
+                    h,
+                    V && typeof V == "object" ? V : void 0
                   )
                 )
               ];
           }
-          if (d instanceof Oe && o) {
-            const m = e(d._def.valueType);
-            if (m instanceof H)
-              return [v, Object.keys(o).reduce((y, b) => (y[b] = X(m, o[b]), y), {})];
+          if (v instanceof Oe && o) {
+            const h = e(v._def.valueType);
+            if (h instanceof H)
+              return [d, Object.keys(o).reduce((V, m) => (V[m] = X(h, o[m]), V), {})];
           }
-          return d instanceof H ? [
-            v,
+          return v instanceof H ? [
+            d,
             X(
-              d,
+              v,
               o && typeof o == "object" ? o : n
             )
-          ] : [v, n];
+          ] : [d, n];
         }
       )
     )
   };
 }
 function Ie(r, i, e, c, t) {
-  const u = C(), v = C(), f = I(() => v.value === G.invalid), o = C(), g = C(!1);
-  let d;
+  const u = C(), d = C(), f = I(() => d.value === G.invalid), o = C(), w = C(!1);
+  let v;
   const n = (S) => {
     const O = X(r, S);
     if (e != null && e.class) {
@@ -70,31 +70,31 @@ function Ie(r, i, e, c, t) {
       return new l(O);
     }
     return O;
-  }, m = async (S = o.value, O) => {
-    if (d = O, g.value)
+  }, h = async (S = o.value, O) => {
+    if (v = O, w.value)
       return !0;
     const l = await r.safeParseAsync(S);
     if (!l.success) {
-      if (v.value = G.invalid, !O)
+      if (d.value = G.invalid, !O)
         return u.value = l.error.format(), !1;
-      const x = l.error.issues.filter(($) => O.has($.path.join(".")));
+      const x = l.error.issues.filter((R) => O.has(R.path.join(".")));
       return x.length ? (u.value = new xe(x).format(), !1) : (u.value = void 0, !0);
     }
-    return u.value = void 0, v.value = G.valid, o.value = n(l.data), !0;
-  }, y = () => {
-    u.value = void 0, v.value = void 0, d = void 0;
-  }, b = () => {
-    o.value = n(), y(), v.value = G.reset;
-  }, s = async () => g.value || !await m() ? !1 : (v.value = G.submitting, !0), { ignoreUpdates: V, stop: w } = me(
+    return u.value = void 0, d.value = G.valid, o.value = n(l.data), !0;
+  }, V = () => {
+    u.value = void 0, d.value = void 0, v = void 0;
+  }, m = () => {
+    o.value = n(), V(), d.value = G.reset;
+  }, s = async () => w.value || !await h() ? !1 : (d.value = G.submitting, !0), { ignoreUpdates: g, stop: b } = me(
     o,
     () => {
-      v.value = G.updated;
+      d.value = G.updated;
     },
     {
       deep: !0,
       eventFilter: be((e == null ? void 0 : e.updateThrottle) ?? 500)
     }
-  ), E = N(u), A = N(v), B = J({
+  ), E = L(u), A = L(d), B = W({
     name: "VvForm",
     props: {
       continuousValidation: {
@@ -141,21 +141,21 @@ function Ie(r, i, e, c, t) {
     ],
     slots: Object,
     setup(S, { emit: O }) {
-      return o.value = n(L(S.modelValue)), U(
+      return o.value = n(_(S.modelValue)), U(
         () => S.modelValue,
         (l) => {
           if (l) {
-            const x = ce(l) ? L(l) : l;
-            if (JSON.stringify(x) === JSON.stringify(L(o.value)))
+            const x = ce(l) ? _(l) : l;
+            if (JSON.stringify(x) === JSON.stringify(_(o.value)))
               return;
             o.value = typeof (x == null ? void 0 : x.clone) == "function" ? x.clone() : JSON.parse(JSON.stringify(x));
           }
         },
         { deep: !0 }
-      ), U(v, async (l) => {
-        var x, $, Z, q, T, ee;
+      ), U(d, async (l) => {
+        var x, R, Z, q, T, ee;
         if (l === G.invalid) {
-          const a = L(u.value);
+          const a = _(u.value);
           O("invalid", a), (x = e == null ? void 0 : e.onInvalid) == null || x.call(
             e,
             a
@@ -163,61 +163,61 @@ function Ie(r, i, e, c, t) {
           return;
         }
         if (l === G.valid) {
-          const a = L(o.value);
-          O("valid", a), ($ = e == null ? void 0 : e.onValid) == null || $.call(e, a), O("update:modelValue", a), (Z = e == null ? void 0 : e.onUpdate) == null || Z.call(e, a);
+          const a = _(o.value);
+          O("valid", a), (R = e == null ? void 0 : e.onValid) == null || R.call(e, a), O("update:modelValue", a), (Z = e == null ? void 0 : e.onUpdate) == null || Z.call(e, a);
           return;
         }
         if (l === G.submitting) {
-          const a = L(o.value);
+          const a = _(o.value);
           O("submit", a), (q = e == null ? void 0 : e.onSubmit) == null || q.call(e, a);
           return;
         }
         if (l === G.reset) {
-          const a = L(o.value);
+          const a = _(o.value);
           O("reset", a), (T = e == null ? void 0 : e.onReset) == null || T.call(e, a);
           return;
         }
         if (l === G.updated) {
-          if ((u.value || e != null && e.continuousValidation || S.continuousValidation) && await m(void 0, d), !o.value || !S.modelValue || JSON.stringify(o.value) !== JSON.stringify(S.modelValue)) {
-            const a = L(o.value);
+          if ((u.value || e != null && e.continuousValidation || S.continuousValidation) && await h(void 0, v), !o.value || !S.modelValue || JSON.stringify(o.value) !== JSON.stringify(S.modelValue)) {
+            const a = _(o.value);
             O("update:modelValue", a), (ee = e == null ? void 0 : e.onUpdate) == null || ee.call(e, a);
           }
-          v.value === G.updated && (v.value = G.unknown);
+          d.value === G.updated && (d.value = G.unknown);
         }
       }), j(() => {
-        g.value = S.readonly;
+        w.value = S.readonly;
       }), U(
         () => S.readonly,
         (l) => {
-          g.value = l;
+          w.value = l;
         }
-      ), U(g, (l) => {
-        l !== S.readonly && O("update:readonly", g.value);
+      ), U(w, (l) => {
+        l !== S.readonly && O("update:readonly", w.value);
       }), F(i, {
-        clear: y,
+        clear: V,
         errors: E,
         formData: o,
-        ignoreUpdates: V,
+        ignoreUpdates: g,
         invalid: f,
-        readonly: g,
-        reset: b,
+        readonly: w,
+        reset: m,
         status: A,
-        stopUpdatesWatch: w,
+        stopUpdatesWatch: b,
         submit: s,
-        validate: m,
+        validate: h,
         wrappers: t
       }), {
-        clear: y,
+        clear: V,
         errors: E,
         formData: o,
-        ignoreUpdates: V,
+        ignoreUpdates: g,
         invalid: f,
-        isReadonly: g,
-        reset: b,
+        isReadonly: w,
+        reset: m,
         status: A,
-        stopUpdatesWatch: w,
+        stopUpdatesWatch: b,
         submit: s,
-        validate: m,
+        validate: h,
         wrappers: t
       };
     },
@@ -228,25 +228,25 @@ function Ie(r, i, e, c, t) {
           errors: E.value,
           formData: o.value,
           invalid: f.value,
-          readonly: g.value,
+          readonly: w.value,
           status: A.value,
           wrappers: t,
-          clear: y,
-          ignoreUpdates: V,
-          reset: b,
-          stopUpdatesWatch: w,
+          clear: V,
+          ignoreUpdates: g,
+          reset: m,
+          stopUpdatesWatch: b,
           submit: s,
-          validate: m
+          validate: h
         })) ?? this.$slots.default;
       };
-      return R(
+      return $(
         this.tag,
         {
           onSubmit: ae(this.submit, ["prevent"]),
           onReset: ae(this.reset, ["prevent"])
         },
         (this.template ?? (e == null ? void 0 : e.template)) && c ? [
-          R(
+          $(
             c,
             {
               schema: this.template ?? (e == null ? void 0 : e.template)
@@ -262,18 +262,18 @@ function Ie(r, i, e, c, t) {
     }
   });
   return {
-    clear: y,
+    clear: V,
     errors: u,
     formData: o,
-    ignoreUpdates: V,
+    ignoreUpdates: g,
     invalid: f,
-    readonly: g,
-    reset: b,
-    status: v,
+    readonly: w,
+    reset: m,
+    status: d,
     wrappers: t,
-    stopUpdatesWatch: w,
+    stopUpdatesWatch: b,
     submit: s,
-    validate: m,
+    validate: h,
     VvForm: B
   };
 }
@@ -281,7 +281,7 @@ function re(r) {
   return Array.isArray(r);
 }
 function Se(r) {
-  return typeof r < "u";
+  return !1;
 }
 function se(r) {
   return r === null;
@@ -297,7 +297,7 @@ function Y(r) {
 }
 const ke = /^[0-9]+$/, Ee = ["__proto__", "prototype", "constructor"];
 function M(r, i, e) {
-  const c = Se(e) ? e : void 0;
+  const c = Se() ? e : void 0;
   if (!oe(r) || !fe(i))
     return c;
   const t = ve(i);
@@ -305,10 +305,10 @@ function M(r, i, e) {
     for (const u of t) {
       if (u === "*")
         continue;
-      const v = function(f) {
-        return f.map((o) => Y(o) || se(o) ? o : re(o) ? v(o) : o[u]);
+      const d = function(f) {
+        return f.map((o) => Y(o) || se(o) ? o : re(o) ? d(o) : o[u]);
       };
-      if (re(r) && !ke.test(u) ? r = v(r) : r = r[u], Y(r) || se(r))
+      if (re(r) && !ke.test(u) ? r = d(r) : r = r[u], Y(r) || se(r))
         break;
     }
     return Y(r) ? c : r;
@@ -322,18 +322,18 @@ function ue(r, i, e) {
     return;
   const t = c.length;
   for (let u = 0; u < t; u++) {
-    const v = c[u];
+    const d = c[u];
     if (u === t - 1) {
-      r[v] = e;
+      r[d] = e;
       return;
     }
-    if (v === "*" && re(r)) {
+    if (d === "*" && re(r)) {
       const f = c.slice(u + 1).join(".");
       for (const o of r)
         ue(o, f, e);
       return;
     }
-    Y(r[v]) && (r[v] = {}), r = r[v];
+    Y(r[d]) && (r[d] = {}), r = r[d];
   }
 }
 function ve(r) {
@@ -341,7 +341,7 @@ function ve(r) {
   return i.some((e) => Ee.indexOf(e) !== -1) ? [] : i;
 }
 function Ae(r, i, e, c) {
-  return J({
+  return W({
     name: "VvFormField",
     props: {
       type: {
@@ -394,10 +394,10 @@ function Ae(r, i, e, c) {
       "type"
     ],
     slots: Object,
-    setup(t, { slots: u, emit: v }) {
-      const { props: f, name: o } = te(t), g = ie(), d = P(i, void 0);
-      d && d.fields.value.set(g, t.name);
-      const n = P(r), m = I({
+    setup(t, { slots: u, emit: d }) {
+      const { props: f, name: o } = te(t), w = ie(), v = P(i, void 0);
+      v && v.fields.value.set(w, t.name);
+      const n = P(r), h = I({
         get() {
           if (n != null && n.formData)
             return M(
@@ -410,57 +410,57 @@ function Ae(r, i, e, c) {
             new Object(n.formData.value),
             String(t.name),
             l
-          ), v("update:modelValue", {
-            newValue: m.value,
+          ), d("update:modelValue", {
+            newValue: h.value,
             formData: n == null ? void 0 : n.formData
           }));
         }
       });
       j(() => {
-        m.value === void 0 && t.defaultValue !== void 0 && (m.value = t.defaultValue);
-      }), W(() => {
-        d && d.fields.value.delete(g);
+        h.value === void 0 && t.defaultValue !== void 0 && (h.value = t.defaultValue);
+      }), J(() => {
+        v && v.fields.value.delete(w);
       });
-      const y = I(() => {
+      const V = I(() => {
         if (n != null && n.errors.value)
           return M(n.errors.value, String(t.name));
-      }), b = I(() => {
+      }), m = I(() => {
         var l;
-        return (l = y.value) == null ? void 0 : l._errors;
-      }), s = I(() => y.value !== void 0), V = U(s, () => {
-        if (s.value) {
-          v("invalid", y.value), d && d.errors.value.set(
+        return (l = V.value) == null ? void 0 : l._errors;
+      }), s = I(() => V.value !== void 0), g = U(s, (l) => {
+        if (l) {
+          d("invalid", V.value), v && v.errors.value.set(
             String(t.name),
-            y.value
+            V.value
           );
           return;
         }
-        v("valid", m.value), d && d.errors.value.delete(
+        d("valid", h.value), v && v.errors.value.delete(
           t.name
         );
-      }), w = U(
+      }), b = U(
         () => n == null ? void 0 : n.formData,
         () => {
-          v("update:formData", n == null ? void 0 : n.formData);
+          d("update:formData", n == null ? void 0 : n.formData);
         },
         { deep: !0 }
       );
-      W(() => {
-        V(), w();
+      J(() => {
+        g(), b();
       });
       const E = (l) => {
-        l instanceof InputEvent && (l = l.target.value), m.value = l;
+        l instanceof InputEvent && (l = l.target.value), h.value = l;
       }, A = I(() => {
         let l = f.value;
         return typeof l == "function" && (l = l(n == null ? void 0 : n.formData)), Object.keys(l).reduce(
-          (x, $) => (x[$] = K(l[$]), x),
+          (x, R) => (x[R] = K(l[R]), x),
           {}
         );
-      }), B = I(() => n != null && n.readonly.value ? !0 : A.value.readonly ?? t.readonly), S = I(() => ({
+      }), B = I(() => n != null && n.readonly.value || v != null && v.readonly.value ? !0 : A.value.readonly ?? t.readonly), S = I(() => ({
         ...A.value,
         name: A.value.name ?? t.name,
         invalid: s.value,
-        valid: t.showValid ? !!(!s.value && m.value) : void 0,
+        valid: t.showValid ? !!(!s.value && h.value) : void 0,
         type: ((l) => {
           if ([
             p.color,
@@ -479,26 +479,26 @@ function Ae(r, i, e, c) {
           ].includes(l))
             return l;
         })(t.type),
-        invalidLabel: b.value,
-        modelValue: m.value,
+        invalidLabel: m.value,
+        modelValue: h.value,
         readonly: B.value,
         "onUpdate:modelValue": E
       }));
       return F(e, {
-        name: N(o),
-        errors: N(y)
+        name: L(o),
+        errors: L(V)
       }), { component: I(() => {
         if (t.type === p.custom)
           return {
             render() {
               var l;
               return ((l = u.default) == null ? void 0 : l.call(u, {
-                errors: y.value,
+                errors: V.value,
                 formData: n == null ? void 0 : n.formData.value,
                 formErrors: n == null ? void 0 : n.errors.value,
                 invalid: s.value,
-                invalidLabel: b.value,
-                modelValue: m.value,
+                invalidLabel: m.value,
+                modelValue: h.value,
                 readonly: B.value,
                 onUpdate: E,
                 submit: n == null ? void 0 : n.submit,
@@ -510,28 +510,28 @@ function Ae(r, i, e, c) {
           let l;
           switch (t.type) {
             case p.select:
-              l = _("VvSelect");
+              l = N("VvSelect");
               break;
             case p.checkbox:
-              l = _("VvCheckbox");
+              l = N("VvCheckbox");
               break;
             case p.radio:
-              l = _("VvRadio");
+              l = N("VvRadio");
               break;
             case p.textarea:
-              l = _("VvTextarea");
+              l = N("VvTextarea");
               break;
             case p.radioGroup:
-              l = _("VvRadioGroup");
+              l = N("VvRadioGroup");
               break;
             case p.checkboxGroup:
-              l = _("VvCheckboxGroup");
+              l = N("VvCheckboxGroup");
               break;
             case p.combobox:
-              l = _("VvCombobox");
+              l = N("VvCombobox");
               break;
             default:
-              l = _("VvInputText");
+              l = N("VvInputText");
           }
           if (typeof l != "string")
             return l;
@@ -539,7 +539,7 @@ function Ae(r, i, e, c) {
             `[@volverjs/form-vue]: ${l} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
           );
         }
-        return he(async () => {
+        return ye(async () => {
           switch (c != null && c.sideEffects && await Promise.resolve(c.sideEffects(t.type)), t.type) {
             case p.textarea:
               return import("@volverjs/ui-vue/vv-textarea");
@@ -561,12 +561,12 @@ function Ae(r, i, e, c) {
       }), hasProps: S, invalid: s };
     },
     render() {
-      return this.is ? R(this.is, this.hasProps, this.$slots) : this.type === p.custom ? R(this.component, null, this.$slots) : R(this.component, this.hasProps, this.$slots);
+      return this.is ? $(this.is, this.hasProps, this.$slots) : this.type === p.custom ? $(this.component, null, this.$slots) : $(this.component, this.hasProps, this.$slots);
     }
   });
 }
 function Ge(r, i, e) {
-  return J({
+  return W({
     name: "VvFormFieldsGroup",
     props: {
       is: {
@@ -610,87 +610,87 @@ function Ge(r, i, e) {
     ],
     slots: Object,
     setup(c, { slots: t, emit: u }) {
-      const { props: v, names: f, defaultValues: o } = te(c), g = ie(), d = I(() => Array.isArray(f.value) ? f.value : Object.values(f.value)), n = I(() => Array.isArray(f.value) ? f.value : Object.keys(f.value)), m = I(() => Array.isArray(f.value) ? f.value.reduce((a, h) => (a[String(h)] = h, a), {}) : f.value), y = I(() => Object.keys(m.value).reduce((a, h) => (a[String(m.value[h])] = h, a), {})), b = P(i, void 0);
-      b && d.value.forEach((a) => {
-        b.fields.value.set(`${g}-${a}`, a);
+      const { props: d, names: f, defaultValues: o } = te(c), w = ie(), v = I(() => Array.isArray(f.value) ? f.value : Object.values(f.value)), n = I(() => Array.isArray(f.value) ? f.value : Object.keys(f.value)), h = I(() => Array.isArray(f.value) ? f.value.reduce((a, y) => (a[String(y)] = y, a), {}) : f.value), V = I(() => Object.keys(h.value).reduce((a, y) => (a[String(h.value[y])] = y, a), {})), m = P(i, void 0);
+      m && v.value.forEach((a) => {
+        m.fields.value.set(`${w}-${a}`, a);
       });
-      const s = P(r), V = I({
+      const s = P(r), g = I({
         get() {
-          return s != null && s.formData ? n.value.reduce((a, h) => (a[h] = M(
+          return s != null && s.formData ? n.value.reduce((a, y) => (a[y] = M(
             new Object(s.formData.value),
-            m.value[h]
+            h.value[y]
           ), a), {}) : {};
         },
         set(a) {
-          s != null && s.formData && (n.value.forEach((h) => {
+          s != null && s.formData && (n.value.forEach((y) => {
             ue(
               new Object(s.formData.value),
-              m.value[h],
-              a == null ? void 0 : a[h]
+              h.value[y],
+              a == null ? void 0 : a[y]
             );
           }), u("update:modelValue", {
-            newValue: V.value,
+            newValue: g.value,
             formData: s == null ? void 0 : s.formData
           }));
         }
       });
       j(() => {
-        o.value && d.value.forEach((a) => {
-          var h, k;
-          ((h = o.value) == null ? void 0 : h[a]) !== void 0 && V.value[a] === void 0 && (V.value = {
-            ...V.value,
+        o.value && v.value.forEach((a) => {
+          var y, k;
+          ((y = o.value) == null ? void 0 : y[a]) !== void 0 && g.value[a] === void 0 && (g.value = {
+            ...g.value,
             [a]: (k = o.value) == null ? void 0 : k[a]
           });
         });
-      }), W(() => {
-        b && d.value.forEach((a) => {
-          b.fields.value.delete(
-            `${g}-${a}`
+      }), J(() => {
+        m && v.value.forEach((a) => {
+          m.fields.value.delete(
+            `${w}-${a}`
           );
         });
       });
-      const w = I(() => {
+      const b = I(() => {
         if (!(s != null && s.errors.value))
           return;
-        const a = d.value.reduce((h, k) => {
+        const a = v.value.reduce((y, k) => {
           if (!s.errors.value)
-            return h;
+            return y;
           const z = M(s.errors.value, String(k));
-          return z === void 0 || (h[String(k)] = z), h;
+          return z === void 0 || (y[String(k)] = z), y;
         }, {});
         if (Object.keys(a).length !== 0)
           return a;
       }), E = I(() => {
-        if (!w.value)
+        if (!b.value)
           return;
-        const a = Object.keys(w.value).reduce((h, k) => {
+        const a = Object.keys(b.value).reduce((y, k) => {
           var z;
-          return (z = w.value) != null && z[k] && (h[y.value[k]] = w.value[k]._errors), h;
+          return (z = b.value) != null && z[k] && (y[V.value[k]] = b.value[k]._errors), y;
         }, {});
         if (Object.keys(a).length !== 0)
           return a;
-      }), A = I(() => w.value !== void 0), B = I(() => n.value.reduce((a, h) => {
+      }), A = I(() => b.value !== void 0), B = I(() => n.value.reduce((a, y) => {
         var k;
-        return a[h] = !!((k = w.value) != null && k[y.value[h]]), a;
+        return a[y] = !!((k = b.value) != null && k[V.value[y]]), a;
       }, {})), S = U(A, () => {
         if (A.value) {
-          u("invalid", w.value), b && d.value.forEach((a) => {
-            var h, k;
-            if (!((h = w.value) != null && h[a])) {
-              b.errors.value.delete(
+          u("invalid", b.value), m && v.value.forEach((a) => {
+            var y, k;
+            if (!((y = b.value) != null && y[a])) {
+              m.errors.value.delete(
                 a
               );
               return;
             }
-            b.errors.value.set(
+            m.errors.value.set(
               a,
-              (k = w.value) == null ? void 0 : k[a]
+              (k = b.value) == null ? void 0 : k[a]
             );
           });
           return;
         }
-        u("valid", V.value), b && d.value.forEach((a) => {
-          b.errors.value.delete(
+        u("valid", g.value), m && v.value.forEach((a) => {
+          m.errors.value.delete(
             a
           );
         });
@@ -701,51 +701,51 @@ function Ge(r, i, e) {
         },
         { deep: !0 }
       );
-      W(() => {
+      J(() => {
         S(), O();
       });
       const l = (a) => {
-        V.value = a;
-      }, x = (a, h) => {
-        h instanceof InputEvent && (h = h.target.value), n.value.includes(a) && (V.value = {
-          ...V.value,
-          [a]: h
+        g.value = a;
+      }, x = (a, y) => {
+        y instanceof InputEvent && (y = y.target.value), n.value.includes(a) && (g.value = {
+          ...g.value,
+          [a]: y
         });
-      }, $ = I(() => {
-        let a = v.value;
+      }, R = I(() => {
+        let a = d.value;
         return typeof a == "function" && (a = a(s == null ? void 0 : s.formData)), Object.keys(a).reduce(
-          (h, k) => (h[k] = K(a[k]), h),
+          (y, k) => (y[k] = K(a[k]), y),
           {}
         );
-      }), Z = I(() => s != null && s.readonly.value ? !0 : $.value.readonly ?? c.readonly), q = I(() => n.value.reduce((a, h) => (a[`onUpdate:${h}`] = (k) => {
-        x(h, k);
+      }), Z = I(() => s != null && s.readonly.value ? !0 : R.value.readonly ?? c.readonly), q = I(() => n.value.reduce((a, y) => (a[`onUpdate:${y}`] = (k) => {
+        x(y, k);
       }, a), {
         "onUpdate:modelValue": l
       })), T = I(() => ({
         ...q.value,
-        ...$.value,
-        names: $.value.name ?? d.value,
+        ...R.value,
+        names: R.value.name ?? v.value,
         invalid: A.value,
         invalids: B.value,
-        valid: c.showValid ? !!(!A.value && V.value) : void 0,
+        valid: c.showValid ? !!(!A.value && g.value) : void 0,
         invalidLabels: E.value,
-        modelValue: V.value,
+        modelValue: g.value,
         readonly: Z.value
       }));
       return F(e, {
-        names: N(f),
-        errors: N(w)
+        names: L(f),
+        errors: L(b)
       }), { component: I(() => ({
         render() {
           var a;
           return ((a = t.default) == null ? void 0 : a.call(t, {
-            errors: w.value,
+            errors: b.value,
             formData: s == null ? void 0 : s.formData.value,
             formErrors: s == null ? void 0 : s.errors.value,
             invalid: A.value,
             invalids: B.value,
             invalidLabels: E.value,
-            modelValue: V.value,
+            modelValue: g.value,
             onUpdate: l,
             onUpdateField: x,
             readonly: Z.value,
@@ -756,12 +756,12 @@ function Ge(r, i, e) {
       })), hasProps: T, invalid: A };
     },
     render() {
-      return this.is ? R(this.is, this.hasProps, this.$slots) : R(this.component, null, this.$slots);
+      return this.is ? $(this.is, this.hasProps, this.$slots) : $(this.component, null, this.$slots);
     }
   });
 }
-function $e(r, i) {
-  return J({
+function Re(r, i) {
+  return W({
     name: "VvFormWrapper",
     props: {
       name: {
@@ -771,6 +771,10 @@ function $e(r, i) {
       tag: {
         type: String,
         default: void 0
+      },
+      readonly: {
+        type: Boolean,
+        default: !1
       }
     },
     emits: ["invalid", "valid"],
@@ -781,6 +785,7 @@ function $e(r, i) {
       "fieldsErrors",
       "formData",
       "invalid",
+      "readonly",
       "reset",
       "submit",
       "tag",
@@ -789,39 +794,40 @@ function $e(r, i) {
     ],
     slots: Object,
     setup(e, { emit: c }) {
-      const t = P(r), u = P(i, void 0), v = C(/* @__PURE__ */ new Map()), f = C(/* @__PURE__ */ new Map()), { name: o } = te(e), g = I(() => t != null && t.invalid.value ? f.value.size > 0 : !1);
-      U(g, () => {
-        if (g.value) {
+      const t = P(r), u = P(i, void 0), d = C(/* @__PURE__ */ new Map()), f = C(/* @__PURE__ */ new Map()), { name: o } = te(e), w = I(() => t != null && t.invalid.value ? f.value.size > 0 : !1);
+      U(w, (m) => {
+        if (m) {
           c("invalid");
           return;
         }
         c("valid");
       });
-      const d = {
-        name: N(o),
+      const v = I(() => (t == null ? void 0 : t.readonly.value) || e.readonly), n = {
+        name: L(o),
         errors: f,
-        invalid: N(g),
-        fields: v
+        invalid: L(w),
+        readonly: L(v),
+        fields: d
       };
-      F(i, d);
-      const n = I(() => new Map(v.value));
+      F(i, n);
+      const h = I(() => new Map(d.value));
       U(
-        n,
-        (y, b) => {
-          u != null && u.fields && (b.forEach((s, V) => {
-            y.has(V) || u == null || u.fields.value.delete(V);
-          }), y.forEach((s, V) => {
-            u != null && u.fields.value.has(V) || u == null || u.fields.value.set(V, s);
+        h,
+        (m, s) => {
+          u != null && u.fields && (s.forEach((g, b) => {
+            m.has(b) || u == null || u.fields.value.delete(b);
+          }), m.forEach((g, b) => {
+            u != null && u.fields.value.has(b) || u == null || u.fields.value.set(b, g);
           }));
         },
         { deep: !0 }
       ), U(
         f,
-        (y) => {
-          u != null && u.errors && v.value.forEach((b) => {
-            if (y.has(b) || u.errors.value.delete(b), y.has(b)) {
-              const s = y.get(b);
-              s && u.errors.value.set(b, s);
+        (m) => {
+          u != null && u.errors && d.value.forEach((s) => {
+            if (m.has(s) || u.errors.value.delete(s), m.has(s)) {
+              const g = m.get(s);
+              g && u.errors.value.set(s, g);
             }
           });
         },
@@ -835,22 +841,23 @@ function $e(r, i) {
           console.warn(`[@volverjs/form-vue]: wrapper name "${o.value}" is already used`);
           return;
         }
-        t.wrappers.set(o.value, d);
-      }), W(() => {
+        t.wrappers.set(o.value, n);
+      }), J(() => {
         t != null && t.wrappers && o.value && t.wrappers.delete(o.value);
       });
-      const m = () => (t == null ? void 0 : t.validate(void 0, new Set(v.value.values()))) ?? Promise.resolve(!0);
+      const V = () => (t == null ? void 0 : t.validate(void 0, new Set(d.value.values()))) ?? Promise.resolve(!0);
       return {
         errors: t == null ? void 0 : t.errors,
-        fields: v,
+        fields: d,
         fieldsErrors: f,
         formData: t == null ? void 0 : t.formData,
-        invalid: g,
+        invalid: w,
+        readonly: v,
         clear: t == null ? void 0 : t.clear,
         reset: t == null ? void 0 : t.reset,
         submit: t == null ? void 0 : t.submit,
         validate: t == null ? void 0 : t.validate,
-        validateWrapper: m
+        validateWrapper: V
       };
     },
     render() {
@@ -861,6 +868,7 @@ function $e(r, i) {
           fieldsErrors: this.fieldsErrors,
           formData: this.formData,
           invalid: this.invalid,
+          readonly: this.readonly,
           clear: this.clear,
           reset: this.reset,
           submit: this.submit,
@@ -868,14 +876,14 @@ function $e(r, i) {
           validateWrapper: this.validateWrapper
         });
       };
-      return this.tag ? R(this.tag, null, {
+      return this.tag ? $(this.tag, null, {
         default: e
       }) : e();
     }
   });
 }
-function Re(r, i) {
-  const e = J({
+function $e(r, i) {
+  const e = W({
     name: "VvFormTemplate",
     props: {
       schema: {
@@ -892,54 +900,54 @@ function Re(r, i) {
       const u = P(r);
       if (u != null && u.formData)
         return () => {
-          var g;
-          const v = typeof c.schema == "function" ? c.schema(
+          var w;
+          const d = typeof c.schema == "function" ? c.schema(
             u,
             c.scope
           ) : c.schema;
           let f;
-          const o = v.reduce((d, n) => {
-            const m = typeof n == "function" ? n(u, c.scope) : n, {
-              vvIs: y,
-              vvName: b,
+          const o = d.reduce((v, n) => {
+            const h = typeof n == "function" ? n(u, c.scope) : n, {
+              vvIs: V,
+              vvName: m,
               vvSlots: s,
-              vvChildren: V,
-              vvIf: w,
+              vvChildren: g,
+              vvIf: b,
               vvElseIf: E,
               vvType: A,
               vvDefaultValue: B,
               vvShowValid: S,
               vvContent: O,
               ...l
-            } = m;
-            if (w !== void 0) {
-              if (typeof w == "string" ? f = !!M(
+            } = h;
+            if (b !== void 0) {
+              if (typeof b == "string" ? f = !!M(
                 new Object(u.formData.value),
-                w
-              ) : typeof w == "function" ? f = K(w(u)) : f = K(w), !f)
-                return d;
+                b
+              ) : typeof b == "function" ? f = K(b(u)) : f = K(b), !f)
+                return v;
             } else if (E !== void 0 && f !== void 0) {
               if (f || (typeof E == "string" ? f = !!M(
                 new Object(u.formData.value),
                 E
               ) : typeof E == "function" ? f = K(E(u)) : f = K(E), !f))
-                return d;
+                return v;
             } else
               f = void 0;
             let x;
-            return V && (typeof y == "string" ? x = R(e, {
-              schema: V
+            return g && (typeof V == "string" ? x = $(e, {
+              schema: g
             }) : x = {
-              default: ($) => R(e, {
-                schema: V,
-                scope: $
+              default: (R) => $(e, {
+                schema: g,
+                scope: R
               })
-            }), b ? (d.push(
-              R(
+            }), m ? (v.push(
+              $(
                 i,
                 {
-                  name: b,
-                  is: y,
+                  name: m,
+                  is: V,
                   type: A,
                   defaultValue: B,
                   showValid: S,
@@ -947,16 +955,16 @@ function Re(r, i) {
                 },
                 s ?? x ?? O
               )
-            ), d) : y ? (d.push(
-              R(
-                y,
+            ), v) : V ? (v.push(
+              $(
+                V,
                 l,
                 s ?? x ?? O
               )
-            ), d) : (x && ("default" in x ? d.push(x.default(c.scope)) : d.push(x)), d);
+            ), v) : (x && ("default" in x ? v.push(x.default(c.scope)) : v.push(x)), v);
           }, []);
           return o.push(
-            (g = t == null ? void 0 : t.default) == null ? void 0 : g.call(t, {
+            (w = t == null ? void 0 : t.default) == null ? void 0 : w.call(t, {
               errors: u == null ? void 0 : u.errors.value,
               formData: u == null ? void 0 : u.formData.value,
               invalid: u == null ? void 0 : u.invalid.value,
@@ -973,7 +981,7 @@ function Re(r, i) {
   return e;
 }
 function D(r, i = {}) {
-  const e = Symbol("formInjectionKey"), c = Symbol("formWrapperInjectionKey"), t = Symbol("formFieldInjectionKey"), u = Symbol("formFieldsGroupInjectionKey"), v = $e(
+  const e = Symbol("formInjectionKey"), c = Symbol("formWrapperInjectionKey"), t = Symbol("formFieldInjectionKey"), u = Symbol("formFieldsGroupInjectionKey"), d = Re(
     e,
     c
   ), f = Ae(
@@ -985,41 +993,41 @@ function D(r, i = {}) {
     e,
     c,
     u
-  ), g = Re(e, f), d = /* @__PURE__ */ new Map(), {
+  ), w = $e(e, f), v = /* @__PURE__ */ new Map(), {
     clear: n,
-    errors: m,
-    formData: y,
-    ignoreUpdates: b,
+    errors: h,
+    formData: V,
+    ignoreUpdates: m,
     invalid: s,
-    readonly: V,
-    reset: w,
+    readonly: g,
+    reset: b,
     status: E,
     stopUpdatesWatch: A,
     submit: B,
     validate: S,
     VvForm: O
-  } = Ie(r, e, i, g, d);
+  } = Ie(r, e, i, w, v);
   return {
     clear: n,
-    errors: m,
-    formData: y,
+    errors: h,
+    formData: V,
     formFieldInjectionKey: t,
     formInjectionKey: e,
     formWrapperInjectionKey: c,
-    ignoreUpdates: b,
+    ignoreUpdates: m,
     invalid: s,
-    readonly: V,
-    reset: w,
+    readonly: g,
+    reset: b,
     status: E,
     stopUpdatesWatch: A,
     submit: B,
     validate: S,
-    wrappers: d,
+    wrappers: v,
     VvForm: O,
     VvFormField: f,
     VvFormFieldsGroup: o,
-    VvFormTemplate: g,
-    VvFormWrapper: v
+    VvFormTemplate: w,
+    VvFormWrapper: d
   };
 }
 const de = Symbol("pluginInjectionKey");
@@ -1036,7 +1044,7 @@ const Q = /* @__PURE__ */ new Map();
 function Ne(r, i = {}) {
   if (i.scope && Q.has(i.scope))
     return Q.get(i.scope);
-  if (!ye()) {
+  if (!he()) {
     const c = D(r, i);
     return i.scope && Q.set(i.scope, c), c;
   }