@volverjs/form-vue 1.0.0-beta.23 → 1.0.0-beta.24

package/README.md

@@ -239,14 +239,16 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 ```vue
 <template>
     <VvForm>
+        <!-- main VvFormWrapper -->
         <VvFormWrapper v-slot="{ invalid }">
+            <!-- add VvFormFields to wrapper -->
             <div class="form-section">
                 <span v-if="invalid">There is a validation error</span>
-                <!-- form fields of section -->
+                <!-- nested VvFormWrapper -->
                 <VvFormWrapper v-slot="{ invalid: groupInvalid }">
                     <div class="form-section__group">
                         <span v-if="groupInvalid">There is a validation error</span>
-                        <!-- form fields of the group -->
+                        <!-- add VvFormFields to nested wrapper -->
                     </div>
                 </VvFormWrapper>
             </div>
@@ -279,7 +281,7 @@ It automatically bind the form data through the `name` attribute. For nested obj
                 @input="onUpdate"
             >
             <small v-if="invalid" id="last-name-alert" role="alert">
-                {{ invalidLabel.join(', ') }}
+                {{ invalidLabel }}
             </small>
         </VvFormField>
     </VvForm>
@@ -311,7 +313,7 @@ It automatically bind the form data through the `names` attribute. For nested ob
     <VvForm>
         <VvFormFieldsGroup
             v-slot="{ modelValue, invalids, invalidLabels, onUpdateField }"
-            :name="['firstName', 'lastName']"
+            :names="['firstName', 'lastName']"
         >
             <fieldset>
                 <p>
@@ -326,7 +328,7 @@ It automatically bind the form data through the `names` attribute. For nested ob
                         @input="onUpdateField('firstName', $event)"
                     >
                     <small v-if="invalids.firstName" id="first-name-alert" role="alert">
-                        {{ invalidLabels?.firstName.join(', ') }}
+                        {{ invalidLabels?.firstName }}
                     </small>
                 </p>
                 <p>
@@ -341,7 +343,7 @@ It automatically bind the form data through the `names` attribute. For nested ob
                         @input="onUpdateField('lastName', $event)"
                     >
                     <small v-if="invalids.lastName" id="last-name-alert" role="alert">
-                        {{ invalidLabels?.lastName.join(', ') }}
+                        {{ invalidLabels?.lastName }}
                     </small>
                 </p>
             </fieldset>

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import { InjectionKey, Plugin } from 'vue';
 import { AnyZodObject } from 'zod';
 import { defineForm } from './VvForm';
 import { defineFormField } from './VvFormField';
+import { defineFormFieldsGroup } from './VvFormFieldsGroup';
 import { defineFormWrapper } from './VvFormWrapper';
-import { defineFormTemplate } from './VvFormTemplate';
 import { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormTemplateItem, Path, PathValue, FormSchema, FormTemplate } from './types';
 export declare const pluginInjectionKey: InjectionKey<FormPluginOptions>;
 export declare function createForm(options: FormPluginOptions): Plugin & Partial<ReturnType<typeof useForm>>;
@@ -934,8 +934,9 @@ export { defaultObjectBySchema } from './utils';
 type FormComponent = ReturnType<typeof defineForm>;
 type FormWrapperComponent = ReturnType<typeof defineFormWrapper>;
 type FormFieldComponent = ReturnType<typeof defineFormField>;
-type FormTemplateComponent = ReturnType<typeof defineFormTemplate>;
-export type { FormComponent, FormComposableOptions, FormFieldComponent, FormPluginOptions, FormSchema, FormTemplate, FormTemplateComponent, FormTemplateItem, FormWrapperComponent, InjectedFormData, InjectedFormFieldData, InjectedFormWrapperData, Path, PathValue, };
+type FormFieldsGroupComponent = ReturnType<typeof defineFormFieldsGroup>;
+type FormTemplateComponent = ReturnType<typeof defineFormFieldsGroup>;
+export type { FormComponent, FormComposableOptions, FormFieldComponent, FormFieldsGroupComponent, FormPluginOptions, FormSchema, FormTemplate, FormTemplateComponent, FormTemplateItem, FormWrapperComponent, InjectedFormData, InjectedFormFieldData, InjectedFormWrapperData, Path, PathValue, };
 /**
  * @deprecated Use `useForm()` instead
  */

package/dist/index.es.js

@@ -1,8 +1,8 @@
-import { ref as C, computed as O, readonly as K, defineComponent as M, toRaw as L, watch as U, isProxy as fe, onMounted as j, provide as Y, h as G, withModifiers as re, toRefs as F, inject as _, onBeforeUnmount as le, unref as Z, resolveComponent as N, defineAsyncComponent as ve, getCurrentInstance as de } from "vue";
+import { ref as C, computed as O, readonly as K, defineComponent as M, toRaw as R, watch as L, isProxy as fe, onMounted as j, provide as Y, h as U, withModifiers as re, toRefs as F, inject as _, onBeforeUnmount as le, unref as Z, resolveComponent as N, defineAsyncComponent as ve, getCurrentInstance as de } from "vue";
 import { watchIgnorable as ce, throttleFilter as ye } from "@vueuse/core";
-import { ZodObject as H, ZodDefault as he, ZodNullable as me, ZodSchema as be, ZodArray as pe, ZodRecord as Ve, ZodEffects as te, ZodOptional as ae, ZodError as ge } from "zod";
-var m = /* @__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))(m || {}), R = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e.submitting = "submitting", e.reset = "reset", e.updated = "updated", e.unknown = "unknown", e))(R || {});
-function J(e, o = {}) {
+import { ZodObject as H, ZodDefault as me, ZodNullable as he, ZodSchema as be, ZodArray as pe, ZodRecord as Ve, ZodEffects as te, ZodOptional as ae, ZodError as ge } from "zod";
+var h = /* @__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))(h || {}), B = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e.submitting = "submitting", e.reset = "reset", e.updated = "updated", e.unknown = "unknown", e))(B || {});
+function J(e, s = {}) {
   const r = (d) => {
     let l = d;
     for (; l instanceof te; )
@@ -15,13 +15,13 @@ function J(e, o = {}) {
     return l instanceof ae;
   }, t = r(e);
   return {
-    ...(t instanceof H ? t._def.unknownKeys === "passthrough" : !1) ? o : {},
+    ...(t instanceof H ? t._def.unknownKeys === "passthrough" : !1) ? s : {},
     ...Object.fromEntries(
       Object.entries(t.shape).map(
         ([d, l]) => {
-          const f = o[d], p = v(l);
+          const f = s[d], p = v(l);
           let u = r(l), y;
-          if (u instanceof he && (y = u._def.defaultValue(), u = u._def.innerType), f === null && u instanceof me)
+          if (u instanceof me && (y = u._def.defaultValue(), u = u._def.innerType), f === null && u instanceof he)
             return [d, f];
           if (f == null && p)
             return [d, y];
@@ -36,9 +36,9 @@ function J(e, o = {}) {
               return [
                 d,
                 f.map(
-                  (h) => J(
+                  (m) => J(
                     b,
-                    h && typeof h == "object" ? h : void 0
+                    m && typeof m == "object" ? m : void 0
                   )
                 )
               ];
@@ -46,7 +46,7 @@ function J(e, o = {}) {
           if (u instanceof Ve && f) {
             const b = r(u._def.valueType);
             if (b instanceof H)
-              return [d, Object.keys(f).reduce((h, n) => (h[n] = J(b, f[n]), h), {})];
+              return [d, Object.keys(f).reduce((m, n) => (m[n] = J(b, f[n]), m), {})];
           }
           return u instanceof H ? [
             d,
@@ -60,28 +60,28 @@ function J(e, o = {}) {
     )
   };
 }
-function Oe(e, o, r, v) {
-  const t = C(), a = C(), d = O(() => a.value === R.invalid), l = C(), f = C(!1);
+function Oe(e, s, r, v) {
+  const t = C(), a = C(), d = O(() => a.value === B.invalid), l = C(), f = C(!1);
   let p;
   const u = async (k = l.value, g) => {
     if (p = g, f.value)
       return !0;
     const V = await e.safeParseAsync(k);
     if (!V.success) {
-      if (a.value = R.invalid, !g)
+      if (a.value = B.invalid, !g)
         return t.value = V.error.format(), !1;
-      const s = V.error.issues.filter((W) => g.has(W.path.join(".")));
-      return s.length ? (t.value = new ge(s).format(), !1) : (t.value = void 0, !0);
+      const i = V.error.issues.filter((W) => g.has(W.path.join(".")));
+      return i.length ? (t.value = new ge(i).format(), !1) : (t.value = void 0, !0);
     }
-    return t.value = void 0, a.value = R.valid, l.value = V.data, !0;
+    return t.value = void 0, a.value = B.valid, l.value = V.data, !0;
   }, y = () => {
     t.value = void 0, a.value = void 0, p = void 0;
   }, b = () => {
-    l.value = J(e), y(), a.value = R.reset;
-  }, h = async () => f.value || !await u() ? !1 : (a.value = R.submitting, !0), { ignoreUpdates: n, stop: w } = ce(
+    l.value = J(e), y(), a.value = B.reset;
+  }, m = async () => f.value || !await u() ? !1 : (a.value = B.submitting, !0), { ignoreUpdates: n, stop: w } = ce(
     l,
     () => {
-      a.value = R.updated;
+      a.value = B.updated;
     },
     {
       deep: !0,
@@ -136,60 +136,60 @@ function Oe(e, o, r, v) {
     setup(k, { emit: g }) {
       return l.value = J(
         e,
-        L(k.modelValue)
-      ), U(
+        R(k.modelValue)
+      ), L(
         () => k.modelValue,
         (V) => {
           if (V) {
-            const s = fe(V) ? L(V) : V;
-            if (JSON.stringify(s) === JSON.stringify(L(l.value)))
+            const i = fe(V) ? R(V) : V;
+            if (JSON.stringify(i) === JSON.stringify(R(l.value)))
               return;
-            l.value = typeof (s == null ? void 0 : s.clone) == "function" ? s.clone() : JSON.parse(JSON.stringify(s));
+            l.value = typeof (i == null ? void 0 : i.clone) == "function" ? i.clone() : JSON.parse(JSON.stringify(i));
           }
         },
         { deep: !0 }
-      ), U(a, async (V) => {
-        var s, W, A, $, q, T;
-        if (V === R.invalid) {
-          const B = L(t.value);
-          g("invalid", B), (s = r == null ? void 0 : r.onInvalid) == null || s.call(
+      ), L(a, async (V) => {
+        var i, W, A, $, q, T;
+        if (V === B.invalid) {
+          const G = R(t.value);
+          g("invalid", G), (i = r == null ? void 0 : r.onInvalid) == null || i.call(
             r,
-            B
+            G
           );
           return;
         }
-        if (V === R.valid) {
-          const B = L(l.value);
-          g("valid", B), (W = r == null ? void 0 : r.onValid) == null || W.call(r, B), g("update:modelValue", B), (A = r == null ? void 0 : r.onUpdate) == null || A.call(r, B);
+        if (V === B.valid) {
+          const G = R(l.value);
+          g("valid", G), (W = r == null ? void 0 : r.onValid) == null || W.call(r, G), g("update:modelValue", G), (A = r == null ? void 0 : r.onUpdate) == null || A.call(r, G);
           return;
         }
-        if (V === R.submitting) {
-          const B = L(l.value);
-          g("submit", B), ($ = r == null ? void 0 : r.onSubmit) == null || $.call(r, B);
+        if (V === B.submitting) {
+          const G = R(l.value);
+          g("submit", G), ($ = r == null ? void 0 : r.onSubmit) == null || $.call(r, G);
           return;
         }
-        if (V === R.reset) {
-          const B = L(l.value);
-          g("reset", B), (q = r == null ? void 0 : r.onReset) == null || q.call(r, B);
+        if (V === B.reset) {
+          const G = R(l.value);
+          g("reset", G), (q = r == null ? void 0 : r.onReset) == null || q.call(r, G);
           return;
         }
-        if (V === R.updated) {
+        if (V === B.updated) {
           if ((t.value || r != null && r.continuousValidation || k.continuousValidation) && await u(void 0, p), !l.value || !k.modelValue || JSON.stringify(l.value) !== JSON.stringify(k.modelValue)) {
-            const B = L(l.value);
-            g("update:modelValue", B), (T = r == null ? void 0 : r.onUpdate) == null || T.call(r, B);
+            const G = R(l.value);
+            g("update:modelValue", G), (T = r == null ? void 0 : r.onUpdate) == null || T.call(r, G);
           }
-          a.value === R.updated && (a.value = R.unknown);
+          a.value === B.updated && (a.value = B.unknown);
         }
       }), j(() => {
         f.value = k.readonly;
-      }), U(
+      }), L(
         () => k.readonly,
         (V) => {
           f.value = V;
         }
-      ), U(f, (V) => {
+      ), L(f, (V) => {
         V !== k.readonly && g("update:readonly", f.value);
-      }), Y(o, {
+      }), Y(s, {
         clear: y,
         errors: x,
         formData: l,
@@ -199,7 +199,7 @@ function Oe(e, o, r, v) {
         reset: b,
         status: E,
         stopUpdatesWatch: w,
-        submit: h,
+        submit: m,
         validate: u
       }), {
         clear: y,
@@ -211,7 +211,7 @@ function Oe(e, o, r, v) {
         reset: b,
         status: E,
         stopUpdatesWatch: w,
-        submit: h,
+        submit: m,
         validate: u
       };
     },
@@ -228,18 +228,18 @@ function Oe(e, o, r, v) {
           reset: b,
           status: E,
           stopUpdatesWatch: w,
-          submit: h,
+          submit: m,
           validate: u
         })) ?? this.$slots.default;
       };
-      return G(
+      return U(
         this.tag,
         {
           onSubmit: re(this.submit, ["prevent"]),
           onReset: re(this.reset, ["prevent"])
         },
         (this.template ?? (r == null ? void 0 : r.template)) && v ? [
-          G(
+          U(
             v,
             {
               schema: this.template ?? (r == null ? void 0 : r.template)
@@ -264,7 +264,7 @@ function Oe(e, o, r, v) {
     reset: b,
     status: a,
     stopUpdatesWatch: w,
-    submit: h,
+    submit: m,
     validate: u,
     VvForm: S
   };
@@ -288,11 +288,11 @@ function Q(e) {
   return typeof e > "u";
 }
 const xe = /^[0-9]+$/, ke = ["__proto__", "prototype", "constructor"];
-function z(e, o, r) {
+function z(e, s, r) {
   const v = we(r) ? r : void 0;
-  if (!ne(e) || !se(o))
+  if (!ne(e) || !se(s))
     return v;
-  const t = ie(o);
+  const t = ie(s);
   if (t.length !== 0) {
     for (const a of t) {
       if (a === "*")
@@ -306,10 +306,10 @@ function z(e, o, r) {
     return Q(e) ? v : e;
   }
 }
-function ee(e, o, r) {
-  if (!ne(e) || !se(o))
+function ee(e, s, r) {
+  if (!ne(e) || !se(s))
     return;
-  const v = ie(o);
+  const v = ie(s);
   if (v.length === 0)
     return;
   const t = v.length;
@@ -329,17 +329,17 @@ function ee(e, o, r) {
   }
 }
 function ie(e) {
-  const o = e.split(/[.]|(?:\[(\d|\*)\])/).filter((r) => !!r);
-  return o.some((r) => ke.indexOf(r) !== -1) ? [] : o;
+  const s = e.split(/[.]|(?:\[(\d|\*)\])/).filter((r) => !!r);
+  return s.some((r) => ke.indexOf(r) !== -1) ? [] : s;
 }
-function Se(e, o, r, v) {
+function Se(e, s, r, v) {
   return M({
     name: "VvFormField",
     props: {
       type: {
         type: String,
-        validator: (t) => Object.values(m).includes(t),
-        default: m.custom
+        validator: (t) => Object.values(h).includes(t),
+        default: h.custom
       },
       is: {
         type: [Object, String],
@@ -387,7 +387,7 @@ function Se(e, o, r, v) {
     ],
     slots: Object,
     setup(t, { slots: a, emit: d }) {
-      const { props: l, name: f } = F(t), p = _(o, void 0);
+      const { props: l, name: f } = F(t), p = _(s, void 0);
       p && p.fields.value.add(t.name);
       const u = _(e), y = O({
         get() {
@@ -397,11 +397,11 @@ function Se(e, o, r, v) {
               String(t.name)
             );
         },
-        set(s) {
+        set(i) {
           u != null && u.formData && (ee(
             new Object(u.formData.value),
             String(t.name),
-            s
+            i
           ), d("update:modelValue", {
             newValue: y.value,
             formData: u == null ? void 0 : u.formData
@@ -414,10 +414,10 @@ function Se(e, o, r, v) {
       const b = O(() => {
         if (u != null && u.errors.value)
           return z(u.errors.value, String(t.name));
-      }), h = O(() => {
-        var s;
-        return (s = b.value) == null ? void 0 : s._errors;
-      }), n = O(() => b.value !== void 0), w = U(n, () => {
+      }), m = O(() => {
+        var i;
+        return (i = b.value) == null ? void 0 : i._errors;
+      }), n = O(() => b.value !== void 0), w = L(n, () => {
         if (n.value) {
           d("invalid", b.value), p && p.errors.value.set(
             String(t.name),
@@ -428,7 +428,7 @@ function Se(e, o, r, v) {
         d("valid", y.value), p && p.errors.value.delete(
           t.name
         );
-      }), x = U(
+      }), x = L(
         () => u == null ? void 0 : u.formData,
         () => {
           d("update:formData", u == null ? void 0 : u.formData);
@@ -438,12 +438,12 @@ function Se(e, o, r, v) {
       le(() => {
         w(), x();
       });
-      const E = (s) => {
-        s instanceof InputEvent && (s = s.target.value), y.value = s;
+      const E = (i) => {
+        i instanceof InputEvent && (i = i.target.value), y.value = i;
       }, S = O(() => {
-        let s = l.value;
-        return typeof s == "function" && (s = s(u == null ? void 0 : u.formData)), Object.keys(s).reduce(
-          (W, A) => (W[A] = Z(s[A]), W),
+        let i = l.value;
+        return typeof i == "function" && (i = i(u == null ? void 0 : u.formData)), Object.keys(i).reduce(
+          (W, A) => (W[A] = Z(i[A]), W),
           {}
         );
       }), k = O(() => u != null && u.readonly.value ? !0 : S.value.readonly ?? t.readonly), g = O(() => ({
@@ -451,25 +451,25 @@ function Se(e, o, r, v) {
         name: S.value.name ?? t.name,
         invalid: n.value,
         valid: t.showValid ? !!(!n.value && y.value) : void 0,
-        type: ((s) => {
+        type: ((i) => {
           if ([
-            m.color,
-            m.date,
-            m.datetimeLocal,
-            m.email,
-            m.month,
-            m.number,
-            m.password,
-            m.search,
-            m.tel,
-            m.text,
-            m.time,
-            m.url,
-            m.week
-          ].includes(s))
-            return s;
+            h.color,
+            h.date,
+            h.datetimeLocal,
+            h.email,
+            h.month,
+            h.number,
+            h.password,
+            h.search,
+            h.tel,
+            h.text,
+            h.time,
+            h.url,
+            h.week
+          ].includes(i))
+            return i;
         })(t.type),
-        invalidLabel: h.value,
+        invalidLabel: m.value,
         modelValue: y.value,
         readonly: k.value,
         "onUpdate:modelValue": E
@@ -478,16 +478,16 @@ function Se(e, o, r, v) {
         name: K(f),
         errors: K(b)
       }), { component: O(() => {
-        if (t.type === m.custom)
+        if (t.type === h.custom)
           return {
             render() {
-              var s;
-              return ((s = a.default) == null ? void 0 : s.call(a, {
+              var i;
+              return ((i = a.default) == null ? void 0 : i.call(a, {
                 errors: b.value,
                 formData: u == null ? void 0 : u.formData.value,
                 formErrors: u == null ? void 0 : u.errors.value,
                 invalid: n.value,
-                invalidLabel: h.value,
+                invalidLabel: m.value,
                 modelValue: y.value,
                 onUpdate: E,
                 readonly: k.value,
@@ -497,53 +497,53 @@ function Se(e, o, r, v) {
             }
           };
         if (!((v == null ? void 0 : v.lazyLoad) ?? t.lazyLoad)) {
-          let s;
+          let i;
           switch (t.type) {
-            case m.select:
-              s = N("VvSelect");
+            case h.select:
+              i = N("VvSelect");
               break;
-            case m.checkbox:
-              s = N("VvCheckbox");
+            case h.checkbox:
+              i = N("VvCheckbox");
               break;
-            case m.radio:
-              s = N("VvRadio");
+            case h.radio:
+              i = N("VvRadio");
               break;
-            case m.textarea:
-              s = N("VvTextarea");
+            case h.textarea:
+              i = N("VvTextarea");
               break;
-            case m.radioGroup:
-              s = N("VvRadioGroup");
+            case h.radioGroup:
+              i = N("VvRadioGroup");
               break;
-            case m.checkboxGroup:
-              s = N("VvCheckboxGroup");
+            case h.checkboxGroup:
+              i = N("VvCheckboxGroup");
               break;
-            case m.combobox:
-              s = N("VvCombobox");
+            case h.combobox:
+              i = N("VvCombobox");
               break;
             default:
-              s = N("VvInputText");
+              i = N("VvInputText");
           }
-          if (typeof s != "string")
-            return s;
+          if (typeof i != "string")
+            return i;
           console.warn(
-            `[form-vue warn]: ${s} 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 ve(async () => {
           switch (v != null && v.sideEffects && await Promise.resolve(v.sideEffects(t.type)), t.type) {
-            case m.textarea:
+            case h.textarea:
               return import("@volverjs/ui-vue/vv-textarea");
-            case m.radio:
+            case h.radio:
               return import("@volverjs/ui-vue/vv-radio");
-            case m.radioGroup:
+            case h.radioGroup:
               return import("@volverjs/ui-vue/vv-radio-group");
-            case m.checkbox:
+            case h.checkbox:
               return import("@volverjs/ui-vue/vv-checkbox");
-            case m.checkboxGroup:
+            case h.checkboxGroup:
               return import("@volverjs/ui-vue/vv-checkbox-group");
-            case m.select:
+            case h.select:
               return import("@volverjs/ui-vue/vv-select");
-            case m.combobox:
+            case h.combobox:
               return import("@volverjs/ui-vue/vv-combobox");
           }
           return import("@volverjs/ui-vue/vv-input-text");
@@ -551,11 +551,11 @@ function Se(e, o, r, v) {
       }), hasProps: g, invalid: n };
     },
     render() {
-      return this.is ? G(this.is, this.hasProps, this.$slots) : this.type === m.custom ? G(this.component, null, this.$slots) : G(this.component, this.hasProps, this.$slots);
+      return this.is ? U(this.is, this.hasProps, this.$slots) : this.type === h.custom ? U(this.component, null, this.$slots) : U(this.component, this.hasProps, this.$slots);
     }
   });
 }
-function Ie(e, o, r) {
+function Ie(e, s, r) {
   return M({
     name: "VvFormFieldsGroup",
     props: {
@@ -564,7 +564,7 @@ function Ie(e, o, r) {
         default: void 0
       },
       names: {
-        type: [Array],
+        type: [Array, Object],
         required: !0
       },
       props: {
@@ -600,23 +600,23 @@ function Ie(e, o, r) {
     ],
     slots: Object,
     setup(v, { slots: t, emit: a }) {
-      const { props: d, names: l, defaultValues: f } = F(v), p = O(() => Array.isArray(l.value) ? l.value : Object.values(l.value)), u = O(() => Array.isArray(l.value) ? l.value : Object.keys(l.value)), y = O(() => Array.isArray(l.value) ? l.value.reduce((i, c) => (i[String(c)] = c, i), {}) : l.value), b = O(() => Object.keys(y.value).reduce((i, c) => (i[String(y.value[c])] = c, i), {})), h = _(o, void 0);
-      h && p.value.forEach((i) => {
-        h.fields.value.add(i);
+      const { props: d, names: l, defaultValues: f } = F(v), p = O(() => Array.isArray(l.value) ? l.value : Object.values(l.value)), u = O(() => Array.isArray(l.value) ? l.value : Object.keys(l.value)), y = O(() => Array.isArray(l.value) ? l.value.reduce((o, c) => (o[String(c)] = c, o), {}) : l.value), b = O(() => Object.keys(y.value).reduce((o, c) => (o[String(y.value[c])] = c, o), {})), m = _(s, void 0);
+      m && p.value.forEach((o) => {
+        m.fields.value.add(o);
       });
       const n = _(e), w = O({
         get() {
-          return n != null && n.formData ? u.value.reduce((i, c) => (i[c] = z(
+          return n != null && n.formData ? u.value.reduce((o, c) => (o[c] = z(
             new Object(n.formData.value),
             y.value[c]
-          ), i), {}) : {};
+          ), o), {}) : {};
         },
-        set(i) {
+        set(o) {
           n != null && n.formData && (u.value.forEach((c) => {
             ee(
               new Object(n.formData.value),
               y.value[c],
-              i == null ? void 0 : i[c]
+              o == null ? void 0 : o[c]
             );
           }), a("update:modelValue", {
             newValue: w.value,
@@ -625,60 +625,60 @@ function Ie(e, o, r) {
         }
       });
       j(() => {
-        f.value && p.value.forEach((i) => {
+        f.value && p.value.forEach((o) => {
           var c, I;
-          ((c = f.value) == null ? void 0 : c[i]) !== void 0 && w.value[i] === void 0 && (w.value = {
+          ((c = f.value) == null ? void 0 : c[o]) !== void 0 && w.value[o] === void 0 && (w.value = {
             ...w.value,
-            [i]: (I = f.value) == null ? void 0 : I[i]
+            [o]: (I = f.value) == null ? void 0 : I[o]
           });
         });
       });
       const x = O(() => {
         if (!(n != null && n.errors.value))
           return;
-        const i = p.value.reduce((c, I) => {
+        const o = p.value.reduce((c, I) => {
           if (!n.errors.value)
             return c;
           const P = z(n.errors.value, String(I));
           return P === void 0 || (c[String(I)] = P), c;
         }, {});
-        if (Object.keys(i).length !== 0)
-          return i;
+        if (Object.keys(o).length !== 0)
+          return o;
       }), E = O(() => {
         if (!x.value)
           return;
-        const i = Object.keys(x.value).reduce((c, I) => {
+        const o = Object.keys(x.value).reduce((c, I) => {
           var P;
           return (P = x.value) != null && P[I] && (c[b.value[I]] = x.value[I]._errors), c;
         }, {});
-        if (Object.keys(i).length !== 0)
-          return i;
-      }), S = O(() => x.value !== void 0), k = O(() => u.value.reduce((i, c) => {
+        if (Object.keys(o).length !== 0)
+          return o;
+      }), S = O(() => x.value !== void 0), k = O(() => u.value.reduce((o, c) => {
         var I;
-        return i[c] = !!((I = x.value) != null && I[b.value[c]]), i;
-      }, {})), g = U(S, () => {
+        return o[c] = !!((I = x.value) != null && I[b.value[c]]), o;
+      }, {})), g = L(S, () => {
         if (S.value) {
-          a("invalid", x.value), h && p.value.forEach((i) => {
+          a("invalid", x.value), m && p.value.forEach((o) => {
             var c, I;
-            if (!((c = x.value) != null && c[i])) {
-              h.errors.value.delete(
-                i
+            if (!((c = x.value) != null && c[o])) {
+              m.errors.value.delete(
+                o
               );
               return;
             }
-            h.errors.value.set(
-              i,
-              (I = x.value) == null ? void 0 : I[i]
+            m.errors.value.set(
+              o,
+              (I = x.value) == null ? void 0 : I[o]
             );
           });
           return;
         }
-        a("valid", w.value), h && p.value.forEach((i) => {
-          h.errors.value.delete(
-            i
+        a("valid", w.value), m && p.value.forEach((o) => {
+          m.errors.value.delete(
+            o
           );
         });
-      }), V = U(
+      }), V = L(
         () => n == null ? void 0 : n.formData,
         () => {
           a("update:formData", n == null ? void 0 : n.formData);
@@ -688,23 +688,23 @@ function Ie(e, o, r) {
       le(() => {
         g(), V();
       });
-      const s = (i) => {
-        w.value = i;
-      }, W = (i, c) => {
-        c instanceof InputEvent && (c = c.target.value), u.value.includes(i) && (w.value = {
+      const i = (o) => {
+        w.value = o;
+      }, W = (o, c) => {
+        c instanceof InputEvent && (c = c.target.value), u.value.includes(o) && (w.value = {
           ...w.value,
-          [i]: c
+          [o]: c
         });
       }, A = O(() => {
-        let i = d.value;
-        return typeof i == "function" && (i = i(n == null ? void 0 : n.formData)), Object.keys(i).reduce(
-          (c, I) => (c[I] = Z(i[I]), c),
+        let o = d.value;
+        return typeof o == "function" && (o = o(n == null ? void 0 : n.formData)), Object.keys(o).reduce(
+          (c, I) => (c[I] = Z(o[I]), c),
           {}
         );
-      }), $ = O(() => n != null && n.readonly.value ? !0 : A.value.readonly ?? v.readonly), q = O(() => u.value.reduce((i, c) => (i[`onUpdate:${c}`] = (I) => {
+      }), $ = O(() => n != null && n.readonly.value ? !0 : A.value.readonly ?? v.readonly), q = O(() => u.value.reduce((o, c) => (o[`onUpdate:${c}`] = (I) => {
         W(c, I);
-      }, i), {
-        "onUpdate:modelValue": s
+      }, o), {
+        "onUpdate:modelValue": i
       })), T = O(() => ({
         ...q.value,
         ...A.value,
@@ -721,8 +721,8 @@ function Ie(e, o, r) {
         errors: K(x)
       }), { component: O(() => ({
         render() {
-          var i;
-          return ((i = t.default) == null ? void 0 : i.call(t, {
+          var o;
+          return ((o = t.default) == null ? void 0 : o.call(t, {
             errors: x.value,
             formData: n == null ? void 0 : n.formData.value,
             formErrors: n == null ? void 0 : n.errors.value,
@@ -730,7 +730,7 @@ function Ie(e, o, r) {
             invalids: k.value,
             invalidLabels: E.value,
             modelValue: w.value,
-            onUpdate: s,
+            onUpdate: i,
             onUpdateField: W,
             readonly: $.value,
             submit: n == null ? void 0 : n.submit,
@@ -740,11 +740,11 @@ function Ie(e, o, r) {
       })), hasProps: T, invalid: S };
     },
     render() {
-      return this.is ? G(this.is, this.hasProps, this.$slots) : G(this.component, null, this.$slots);
+      return this.is ? U(this.is, this.hasProps, this.$slots) : U(this.component, null, this.$slots);
     }
   });
 }
-function Ee(e, o) {
+function Ee(e, s) {
   return M({
     name: "VvFormWrapper",
     props: {
@@ -773,12 +773,12 @@ function Ee(e, o) {
     ],
     slots: Object,
     setup(r, { emit: v }) {
-      const t = _(e), a = _(o, void 0), d = C(/* @__PURE__ */ new Set()), l = C(/* @__PURE__ */ new Map()), { name: f } = F(r);
-      Y(o, {
+      const t = _(e), a = _(s, void 0), d = C(/* @__PURE__ */ new Set()), l = C(/* @__PURE__ */ new Map()), { name: f } = F(r);
+      Y(s, {
         name: K(f),
         errors: l,
         fields: d
-      }), U(
+      }), L(
         d,
         (y) => {
           a != null && a.fields && y.forEach((b) => {
@@ -786,20 +786,20 @@ function Ee(e, o) {
           });
         },
         { deep: !0 }
-      ), U(
+      ), L(
         () => new Map(l.value),
         (y, b) => {
-          a != null && a.errors && (Array.from(b.keys()).forEach((h) => {
-            a.errors.value.delete(h);
-          }), Array.from(y.keys()).forEach((h) => {
-            const n = y.get(h);
-            n && a.errors.value.set(h, n);
+          a != null && a.errors && (Array.from(b.keys()).forEach((m) => {
+            a.errors.value.delete(m);
+          }), Array.from(y.keys()).forEach((m) => {
+            const n = y.get(m);
+            n && a.errors.value.set(m, n);
           }));
         },
         { deep: !0 }
       );
       const p = O(() => t != null && t.invalid.value ? l.value.size > 0 : !1);
-      U(p, () => {
+      L(p, () => {
         p.value ? v("invalid") : v("valid");
       });
       const u = () => (t == null ? void 0 : t.validate(void 0, d.value)) ?? Promise.resolve(!0);
@@ -831,13 +831,13 @@ function Ee(e, o) {
           validateWrapper: this.validateWrapper
         });
       };
-      return this.tag ? G(this.tag, null, {
+      return this.tag ? U(this.tag, null, {
         default: r
       }) : r();
     }
   });
 }
-function Ae(e, o) {
+function Ae(e, s) {
   const r = M({
     name: "VvFormTemplate",
     props: {
@@ -863,7 +863,7 @@ function Ae(e, o) {
           let l;
           const f = d.reduce((u, y) => {
             const b = typeof y == "function" ? y(a, v.scope) : y, {
-              vvIs: h,
+              vvIs: m,
               vvName: n,
               vvSlots: w,
               vvChildren: x,
@@ -872,7 +872,7 @@ function Ae(e, o) {
               vvType: k,
               vvDefaultValue: g,
               vvShowValid: V,
-              vvContent: s,
+              vvContent: i,
               ...W
             } = b;
             if (E !== void 0) {
@@ -890,31 +890,31 @@ function Ae(e, o) {
             } else
               l = void 0;
             let A;
-            return x && (typeof h == "string" ? A = G(r, {
+            return x && (typeof m == "string" ? A = U(r, {
               schema: x
             }) : A = {
-              default: ($) => G(r, {
+              default: ($) => U(r, {
                 schema: x,
                 scope: $
               })
             }), n ? (u.push(
-              G(
-                o,
+              U(
+                s,
                 {
                   name: n,
-                  is: h,
+                  is: m,
                   type: k,
                   defaultValue: g,
                   showValid: V,
                   props: W
                 },
-                w ?? A ?? s
+                w ?? A ?? i
               )
-            ), u) : h ? (u.push(
-              G(
-                h,
+            ), u) : m ? (u.push(
+              U(
+                m,
                 W,
-                w ?? A ?? s
+                w ?? A ?? i
               )
             ), u) : (A && ("default" in A ? u.push(A.default(v.scope)) : u.push(A)), u);
           }, []);
@@ -935,7 +935,7 @@ function Ae(e, o) {
   });
   return r;
 }
-function X(e, o = {}) {
+function X(e, s = {}) {
   const r = Symbol("formInjectionKey"), v = Symbol("formWrapperInjectionKey"), t = Symbol("formFieldInjectionKey"), a = Symbol("formFieldsGroupInjectionKey"), d = Ee(
     r,
     v
@@ -943,7 +943,7 @@ function X(e, o = {}) {
     r,
     v,
     t,
-    o
+    s
   ), f = Ie(
     r,
     v,
@@ -952,7 +952,7 @@ function X(e, o = {}) {
     clear: u,
     errors: y,
     formData: b,
-    ignoreUpdates: h,
+    ignoreUpdates: m,
     invalid: n,
     readonly: w,
     reset: x,
@@ -961,7 +961,7 @@ function X(e, o = {}) {
     submit: k,
     validate: g,
     VvForm: V
-  } = Oe(e, r, o, p);
+  } = Oe(e, r, s, p);
   return {
     clear: u,
     errors: y,
@@ -969,7 +969,7 @@ function X(e, o = {}) {
     formFieldInjectionKey: t,
     formInjectionKey: r,
     formWrapperInjectionKey: v,
-    ignoreUpdates: h,
+    ignoreUpdates: m,
     invalid: n,
     readonly: w,
     reset: x,
@@ -985,32 +985,32 @@ function X(e, o = {}) {
   };
 }
 const oe = Symbol("pluginInjectionKey");
-function Ge(e) {
-  let o = {};
-  return e.schema && (o = X(e.schema, e)), {
-    ...o,
+function Ue(e) {
+  let s = {};
+  return e.schema && (s = X(e.schema, e)), {
+    ...s,
     install(r, { global: v = !1 } = {}) {
-      r.provide(oe, e), v && (r.config.globalProperties.$vvForm = e, o != null && o.VvForm && r.component("VvForm", o.VvForm), o != null && o.VvFormWrapper && r.component("VvFormWrapper", o.VvFormWrapper), o != null && o.VvFormField && r.component("VvFormField", o.VvFormField), o != null && o.VvFormTemplate && r.component("VvFormTemplate", o.VvFormTemplate));
+      r.provide(oe, e), v && (r.config.globalProperties.$vvForm = e, s != null && s.VvForm && r.component("VvForm", s.VvForm), s != null && s.VvFormWrapper && r.component("VvFormWrapper", s.VvFormWrapper), s != null && s.VvFormField && r.component("VvFormField", s.VvFormField), s != null && s.VvFormFieldsGroup && r.component("VvFormFieldsGroup", s.VvFormFieldsGroup), s != null && s.VvFormTemplate && r.component("VvFormTemplate", s.VvFormTemplate));
     }
   };
 }
-function Ue(e, o = {}) {
+function Le(e, s = {}) {
   return de() ? X(
     e,
     {
       ..._(oe, {}),
-      ...o
+      ...s
     }
-  ) : X(e, o);
+  ) : X(e, s);
 }
-function Le(e, o = {}) {
-  return X(e, o);
+function Re(e, s = {}) {
+  return X(e, s);
 }
 export {
-  m as FormFieldType,
-  Ge as createForm,
+  h as FormFieldType,
+  Ue as createForm,
   J as defaultObjectBySchema,
-  Le as formFactory,
+  Re as formFactory,
   oe as pluginInjectionKey,
-  Ue as useForm
+  Le as useForm
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(A,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(A=typeof globalThis<"u"?globalThis:A||self,e(A["@volverjs/form-vue"]={},A.Vue,A.VueUseCore,A.zod))})(this,function(A,e,T,B){"use strict";var p=(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||{}),U=(r=>(r.invalid="invalid",r.valid="valid",r.submitting="submitting",r.reset="reset",r.updated="updated",r.unknown="unknown",r))(U||{});function L(r,f={}){const t=v=>{let u=v;for(;u instanceof B.ZodEffects;)u=u.innerType();return u instanceof B.ZodOptional&&(u=u._def.innerType),u},c=v=>{let u=v;for(;u instanceof B.ZodEffects;)u=u.innerType();return u instanceof B.ZodOptional},a=t(r);return{...(a instanceof B.ZodObject?a._def.unknownKeys==="passthrough":!1)?f:{},...Object.fromEntries(Object.entries(a.shape).map(([v,u])=>{const d=f[v],V=c(u);let l=t(u),h;if(l instanceof B.ZodDefault&&(h=l._def.defaultValue(),l=l._def.innerType),d===null&&l instanceof B.ZodNullable)return[v,d];if(d==null&&V)return[v,h];if(l instanceof B.ZodSchema){const b=u.safeParse(d);if(b.success)return[v,b.data??h]}if(l instanceof B.ZodArray&&Array.isArray(d)&&d.length){const b=t(l._def.type);if(b instanceof B.ZodObject)return[v,d.map(y=>L(b,y&&typeof y=="object"?y:void 0))]}if(l instanceof B.ZodRecord&&d){const b=t(l._def.valueType);if(b instanceof B.ZodObject)return[v,Object.keys(d).reduce((y,o)=>(y[o]=L(b,d[o]),y),{})]}return l instanceof B.ZodObject?[v,L(l,d&&typeof d=="object"?d:h)]:[v,h]}))}}function z(r,f,t,c){const a=e.ref(),n=e.ref(),v=e.computed(()=>n.value===U.invalid),u=e.ref(),d=e.ref(!1);let V;const l=async(x=u.value,w)=>{if(V=w,d.value)return!0;const g=await r.safeParseAsync(x);if(!g.success){if(n.value=U.invalid,!w)return a.value=g.error.format(),!1;const s=g.error.issues.filter(W=>w.has(W.path.join(".")));return s.length?(a.value=new B.ZodError(s).format(),!1):(a.value=void 0,!0)}return a.value=void 0,n.value=U.valid,u.value=g.data,!0},h=()=>{a.value=void 0,n.value=void 0,V=void 0},b=()=>{u.value=L(r),h(),n.value=U.reset},y=async()=>d.value||!await l()?!1:(n.value=U.submitting,!0),{ignoreUpdates:o,stop:O}=T.watchIgnorable(u,()=>{n.value=U.updated},{deep:!0,eventFilter:T.throttleFilter((t==null?void 0:t.updateThrottle)??500)}),S=e.readonly(a),E=e.readonly(n),k=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(t==null?void 0:t.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","submit","update:modelValue","update:readonly","valid","reset"],expose:["errors","invalid","readonly","status","submit","tag","template","valid","validate","clear","reset"],slots:Object,setup(x,{emit:w}){return u.value=L(r,e.toRaw(x.modelValue)),e.watch(()=>x.modelValue,g=>{if(g){const s=e.isProxy(g)?e.toRaw(g):g;if(JSON.stringify(s)===JSON.stringify(e.toRaw(u.value)))return;u.value=typeof(s==null?void 0:s.clone)=="function"?s.clone():JSON.parse(JSON.stringify(s))}},{deep:!0}),e.watch(n,async g=>{var s,W,R,G,$,M;if(g===U.invalid){const C=e.toRaw(a.value);w("invalid",C),(s=t==null?void 0:t.onInvalid)==null||s.call(t,C);return}if(g===U.valid){const C=e.toRaw(u.value);w("valid",C),(W=t==null?void 0:t.onValid)==null||W.call(t,C),w("update:modelValue",C),(R=t==null?void 0:t.onUpdate)==null||R.call(t,C);return}if(g===U.submitting){const C=e.toRaw(u.value);w("submit",C),(G=t==null?void 0:t.onSubmit)==null||G.call(t,C);return}if(g===U.reset){const C=e.toRaw(u.value);w("reset",C),($=t==null?void 0:t.onReset)==null||$.call(t,C);return}if(g===U.updated){if((a.value||t!=null&&t.continuousValidation||x.continuousValidation)&&await l(void 0,V),!u.value||!x.modelValue||JSON.stringify(u.value)!==JSON.stringify(x.modelValue)){const C=e.toRaw(u.value);w("update:modelValue",C),(M=t==null?void 0:t.onUpdate)==null||M.call(t,C)}n.value===U.updated&&(n.value=U.unknown)}}),e.onMounted(()=>{d.value=x.readonly}),e.watch(()=>x.readonly,g=>{d.value=g}),e.watch(d,g=>{g!==x.readonly&&w("update:readonly",d.value)}),e.provide(f,{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}),{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,isReadonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}},render(){const x=()=>{var w,g;return((g=(w=this.$slots)==null?void 0:w.default)==null?void 0:g.call(w,{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??(t==null?void 0:t.template))&&c?[e.h(c,{schema:this.template??(t==null?void 0:t.template)},{default:x})]:{default:x})}});return{clear:h,errors:a,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:n,stopUpdatesWatch:O,submit:y,validate:l,VvForm:k}}function P(r){return Array.isArray(r)}function j(r){return typeof r<"u"}function H(r){return r===null}function Q(r){return typeof r=="object"}function X(r){return typeof r=="string"}function _(r){return typeof r>"u"}const D=/^[0-9]+$/,F=["__proto__","prototype","constructor"];function Z(r,f,t){const c=j(t)?t:void 0;if(!Q(r)||!X(f))return c;const a=Y(f);if(a.length!==0){for(const n of a){if(n==="*")continue;const v=function(u){return u.map(d=>_(d)||H(d)?d:P(d)?v(d):d[n])};if(P(r)&&!D.test(n)?r=v(r):r=r[n],_(r)||H(r))break}return _(r)?c:r}}function q(r,f,t){if(!Q(r)||!X(f))return;const c=Y(f);if(c.length===0)return;const a=c.length;for(let n=0;n<a;n++){const v=c[n];if(n===a-1){r[v]=t;return}if(v==="*"&&P(r)){const u=c.slice(n+1).join(".");for(const d of r)q(d,u,t);return}_(r[v])&&(r[v]={}),r=r[v]}}function Y(r){const f=r.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return f.some(t=>F.indexOf(t)!==-1)?[]:f}function ee(r,f,t,c){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:a=>Object.values(p).includes(a),default:p.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},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabel","is","type"],slots:Object,setup(a,{slots:n,emit:v}){const{props:u,name:d}=e.toRefs(a),V=e.inject(f,void 0);V&&V.fields.value.add(a.name);const l=e.inject(r),h=e.computed({get(){if(l!=null&&l.formData)return Z(new Object(l.formData.value),String(a.name))},set(s){l!=null&&l.formData&&(q(new Object(l.formData.value),String(a.name),s),v("update:modelValue",{newValue:h.value,formData:l==null?void 0:l.formData}))}});e.onMounted(()=>{h.value===void 0&&a.defaultValue!==void 0&&(h.value=a.defaultValue)});const b=e.computed(()=>{if(l!=null&&l.errors.value)return Z(l.errors.value,String(a.name))}),y=e.computed(()=>{var s;return(s=b.value)==null?void 0:s._errors}),o=e.computed(()=>b.value!==void 0),O=e.watch(o,()=>{if(o.value){v("invalid",b.value),V&&V.errors.value.set(String(a.name),b.value);return}v("valid",h.value),V&&V.errors.value.delete(a.name)}),S=e.watch(()=>l==null?void 0:l.formData,()=>{v("update:formData",l==null?void 0:l.formData)},{deep:!0});e.onBeforeUnmount(()=>{O(),S()});const E=s=>{s instanceof InputEvent&&(s=s.target.value),h.value=s},k=e.computed(()=>{let s=u.value;return typeof s=="function"&&(s=s(l==null?void 0:l.formData)),Object.keys(s).reduce((W,R)=>(W[R]=e.unref(s[R]),W),{})}),x=e.computed(()=>l!=null&&l.readonly.value?!0:k.value.readonly??a.readonly),w=e.computed(()=>({...k.value,name:k.value.name??a.name,invalid:o.value,valid:a.showValid?!!(!o.value&&h.value):void 0,type:(s=>{if([p.color,p.date,p.datetimeLocal,p.email,p.month,p.number,p.password,p.search,p.tel,p.text,p.time,p.url,p.week].includes(s))return s})(a.type),invalidLabel:y.value,modelValue:h.value,readonly:x.value,"onUpdate:modelValue":E}));return e.provide(t,{name:e.readonly(d),errors:e.readonly(b)}),{component:e.computed(()=>{if(a.type===p.custom)return{render(){var s;return((s=n.default)==null?void 0:s.call(n,{errors:b.value,formData:l==null?void 0:l.formData.value,formErrors:l==null?void 0:l.errors.value,invalid:o.value,invalidLabel:y.value,modelValue:h.value,onUpdate:E,readonly:x.value,submit:l==null?void 0:l.submit,validate:l==null?void 0:l.validate}))??n.default}};if(!((c==null?void 0:c.lazyLoad)??a.lazyLoad)){let s;switch(a.type){case p.select:s=e.resolveComponent("VvSelect");break;case p.checkbox:s=e.resolveComponent("VvCheckbox");break;case p.radio:s=e.resolveComponent("VvRadio");break;case p.textarea:s=e.resolveComponent("VvTextarea");break;case p.radioGroup:s=e.resolveComponent("VvRadioGroup");break;case p.checkboxGroup:s=e.resolveComponent("VvCheckboxGroup");break;case p.combobox:s=e.resolveComponent("VvCombobox");break;default:s=e.resolveComponent("VvInputText")}if(typeof s!="string")return s;console.warn(`[form-vue warn]: ${s} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(c!=null&&c.sideEffects&&await Promise.resolve(c.sideEffects(a.type)),a.type){case p.textarea:return import("@volverjs/ui-vue/vv-textarea");case p.radio:return import("@volverjs/ui-vue/vv-radio");case p.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case p.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case p.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case p.select:return import("@volverjs/ui-vue/vv-select");case p.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:w,invalid:o}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===p.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function re(r,f,t){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(c,{slots:a,emit:n}){const{props:v,names:u,defaultValues:d}=e.toRefs(c),V=e.computed(()=>Array.isArray(u.value)?u.value:Object.values(u.value)),l=e.computed(()=>Array.isArray(u.value)?u.value:Object.keys(u.value)),h=e.computed(()=>Array.isArray(u.value)?u.value.reduce((i,m)=>(i[String(m)]=m,i),{}):u.value),b=e.computed(()=>Object.keys(h.value).reduce((i,m)=>(i[String(h.value[m])]=m,i),{})),y=e.inject(f,void 0);y&&V.value.forEach(i=>{y.fields.value.add(i)});const o=e.inject(r),O=e.computed({get(){return o!=null&&o.formData?l.value.reduce((i,m)=>(i[m]=Z(new Object(o.formData.value),h.value[m]),i),{}):{}},set(i){o!=null&&o.formData&&(l.value.forEach(m=>{q(new Object(o.formData.value),h.value[m],i==null?void 0:i[m])}),n("update:modelValue",{newValue:O.value,formData:o==null?void 0:o.formData}))}});e.onMounted(()=>{d.value&&V.value.forEach(i=>{var m,I;((m=d.value)==null?void 0:m[i])!==void 0&&O.value[i]===void 0&&(O.value={...O.value,[i]:(I=d.value)==null?void 0:I[i]})})});const S=e.computed(()=>{if(!(o!=null&&o.errors.value))return;const i=V.value.reduce((m,I)=>{if(!o.errors.value)return m;const N=Z(o.errors.value,String(I));return N===void 0||(m[String(I)]=N),m},{});if(Object.keys(i).length!==0)return i}),E=e.computed(()=>{if(!S.value)return;const i=Object.keys(S.value).reduce((m,I)=>{var N;return(N=S.value)!=null&&N[I]&&(m[b.value[I]]=S.value[I]._errors),m},{});if(Object.keys(i).length!==0)return i}),k=e.computed(()=>S.value!==void 0),x=e.computed(()=>l.value.reduce((i,m)=>{var I;return i[m]=!!((I=S.value)!=null&&I[b.value[m]]),i},{})),w=e.watch(k,()=>{if(k.value){n("invalid",S.value),y&&V.value.forEach(i=>{var m,I;if(!((m=S.value)!=null&&m[i])){y.errors.value.delete(i);return}y.errors.value.set(i,(I=S.value)==null?void 0:I[i])});return}n("valid",O.value),y&&V.value.forEach(i=>{y.errors.value.delete(i)})}),g=e.watch(()=>o==null?void 0:o.formData,()=>{n("update:formData",o==null?void 0:o.formData)},{deep:!0});e.onBeforeUnmount(()=>{w(),g()});const s=i=>{O.value=i},W=(i,m)=>{m instanceof InputEvent&&(m=m.target.value),l.value.includes(i)&&(O.value={...O.value,[i]:m})},R=e.computed(()=>{let i=v.value;return typeof i=="function"&&(i=i(o==null?void 0:o.formData)),Object.keys(i).reduce((m,I)=>(m[I]=e.unref(i[I]),m),{})}),G=e.computed(()=>o!=null&&o.readonly.value?!0:R.value.readonly??c.readonly),$=e.computed(()=>l.value.reduce((i,m)=>(i[`onUpdate:${m}`]=I=>{W(m,I)},i),{"onUpdate:modelValue":s})),M=e.computed(()=>({...$.value,...R.value,names:R.value.name??V.value,invalid:k.value,invalids:x.value,valid:c.showValid?!!(!k.value&&O.value):void 0,invalidLabels:E.value,modelValue:O.value,readonly:G.value}));return e.provide(t,{names:e.readonly(u),errors:e.readonly(S)}),{component:e.computed(()=>({render(){var i;return((i=a.default)==null?void 0:i.call(a,{errors:S.value,formData:o==null?void 0:o.formData.value,formErrors:o==null?void 0:o.errors.value,invalid:k.value,invalids:x.value,invalidLabels:E.value,modelValue:O.value,onUpdate:s,onUpdateField:W,readonly:G.value,submit:o==null?void 0:o.submit,validate:o==null?void 0:o.validate}))??a.default}})),hasProps:M,invalid:k}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function te(r,f){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(t,{emit:c}){const a=e.inject(r),n=e.inject(f,void 0),v=e.ref(new Set),u=e.ref(new Map),{name:d}=e.toRefs(t);e.provide(f,{name:e.readonly(d),errors:u,fields:v}),e.watch(v,h=>{n!=null&&n.fields&&h.forEach(b=>{n==null||n.fields.value.add(b)})},{deep:!0}),e.watch(()=>new Map(u.value),(h,b)=>{n!=null&&n.errors&&(Array.from(b.keys()).forEach(y=>{n.errors.value.delete(y)}),Array.from(h.keys()).forEach(y=>{const o=h.get(y);o&&n.errors.value.set(y,o)}))},{deep:!0});const V=e.computed(()=>a!=null&&a.invalid.value?u.value.size>0:!1);e.watch(V,()=>{V.value?c("invalid"):c("valid")});const l=()=>(a==null?void 0:a.validate(void 0,v.value))??Promise.resolve(!0);return{clear:a==null?void 0:a.clear,errors:a==null?void 0:a.errors,fields:v,fieldsErrors:u,formData:a==null?void 0:a.formData,invalid:V,reset:a==null?void 0:a.reset,submit:a==null?void 0:a.submit,validate:a==null?void 0:a.validate,validateWrapper:l}},render(){const t=()=>{var c,a;return(a=(c=this.$slots).default)==null?void 0:a.call(c,{clear:this.clear,errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper})};return this.tag?e.h(this.tag,null,{default:t}):t()}})}function ae(r,f){const t=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(c,{slots:a}){const n=e.inject(r);if(n!=null&&n.formData)return()=>{var V;const v=typeof c.schema=="function"?c.schema(n,c.scope):c.schema;let u;const d=v.reduce((l,h)=>{const b=typeof h=="function"?h(n,c.scope):h,{vvIs:y,vvName:o,vvSlots:O,vvChildren:S,vvIf:E,vvElseIf:k,vvType:x,vvDefaultValue:w,vvShowValid:g,vvContent:s,...W}=b;if(E!==void 0){if(typeof E=="string"?u=!!Z(new Object(n.formData.value),E):typeof E=="function"?u=e.unref(E(n)):u=e.unref(E),!u)return l}else if(k!==void 0&&u!==void 0){if(u||(typeof k=="string"?u=!!Z(new Object(n.formData.value),k):typeof k=="function"?u=e.unref(k(n)):u=e.unref(k),!u))return l}else u=void 0;let R;return S&&(typeof y=="string"?R=e.h(t,{schema:S}):R={default:G=>e.h(t,{schema:S,scope:G})}),o?(l.push(e.h(f,{name:o,is:y,type:x,defaultValue:w,showValid:g,props:W},O??R??s)),l):y?(l.push(e.h(y,W,O??R??s)),l):(R&&("default"in R?l.push(R.default(c.scope)):l.push(R)),l)},[]);return d.push((V=a==null?void 0:a.default)==null?void 0:V.call(a,{errors:n==null?void 0:n.errors.value,formData:n==null?void 0:n.formData.value,invalid:n==null?void 0:n.invalid.value,status:n==null?void 0:n.status.value,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,clear:n==null?void 0:n.clear,reset:n==null?void 0:n.reset})),d}}});return t}function K(r,f={}){const t=Symbol("formInjectionKey"),c=Symbol("formWrapperInjectionKey"),a=Symbol("formFieldInjectionKey"),n=Symbol("formFieldsGroupInjectionKey"),v=te(t,c),u=ee(t,c,a,f),d=re(t,c,n),V=ae(t,u),{clear:l,errors:h,formData:b,ignoreUpdates:y,invalid:o,readonly:O,reset:S,status:E,stopUpdatesWatch:k,submit:x,validate:w,VvForm:g}=z(r,t,f,V);return{clear:l,errors:h,formData:b,formFieldInjectionKey:a,formInjectionKey:t,formWrapperInjectionKey:c,ignoreUpdates:y,invalid:o,readonly:O,reset:S,status:E,stopUpdatesWatch:k,submit:x,validate:w,VvForm:g,VvFormField:u,VvFormFieldsGroup:d,VvFormTemplate:V,VvFormWrapper:v}}const J=Symbol("pluginInjectionKey");function ne(r){let f={};return r.schema&&(f=K(r.schema,r)),{...f,install(t,{global:c=!1}={}){t.provide(J,r),c&&(t.config.globalProperties.$vvForm=r,f!=null&&f.VvForm&&t.component("VvForm",f.VvForm),f!=null&&f.VvFormWrapper&&t.component("VvFormWrapper",f.VvFormWrapper),f!=null&&f.VvFormField&&t.component("VvFormField",f.VvFormField),f!=null&&f.VvFormTemplate&&t.component("VvFormTemplate",f.VvFormTemplate))}}}function le(r,f={}){return e.getCurrentInstance()?K(r,{...e.inject(J,{}),...f}):K(r,f)}function ue(r,f={}){return K(r,f)}A.FormFieldType=p,A.createForm=ne,A.defaultObjectBySchema=L,A.formFactory=ue,A.pluginInjectionKey=J,A.useForm=le,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
+(function(A,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(A=typeof globalThis<"u"?globalThis:A||self,e(A["@volverjs/form-vue"]={},A.Vue,A.VueUseCore,A.zod))})(this,function(A,e,T,B){"use strict";var p=(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=(r=>(r.invalid="invalid",r.valid="valid",r.submitting="submitting",r.reset="reset",r.updated="updated",r.unknown="unknown",r))(G||{});function L(r,s={}){const t=v=>{let u=v;for(;u instanceof B.ZodEffects;)u=u.innerType();return u instanceof B.ZodOptional&&(u=u._def.innerType),u},c=v=>{let u=v;for(;u instanceof B.ZodEffects;)u=u.innerType();return u instanceof B.ZodOptional},a=t(r);return{...(a instanceof B.ZodObject?a._def.unknownKeys==="passthrough":!1)?s:{},...Object.fromEntries(Object.entries(a.shape).map(([v,u])=>{const d=s[v],V=c(u);let l=t(u),h;if(l instanceof B.ZodDefault&&(h=l._def.defaultValue(),l=l._def.innerType),d===null&&l instanceof B.ZodNullable)return[v,d];if(d==null&&V)return[v,h];if(l instanceof B.ZodSchema){const b=u.safeParse(d);if(b.success)return[v,b.data??h]}if(l instanceof B.ZodArray&&Array.isArray(d)&&d.length){const b=t(l._def.type);if(b instanceof B.ZodObject)return[v,d.map(y=>L(b,y&&typeof y=="object"?y:void 0))]}if(l instanceof B.ZodRecord&&d){const b=t(l._def.valueType);if(b instanceof B.ZodObject)return[v,Object.keys(d).reduce((y,o)=>(y[o]=L(b,d[o]),y),{})]}return l instanceof B.ZodObject?[v,L(l,d&&typeof d=="object"?d:h)]:[v,h]}))}}function z(r,s,t,c){const a=e.ref(),n=e.ref(),v=e.computed(()=>n.value===G.invalid),u=e.ref(),d=e.ref(!1);let V;const l=async(x=u.value,w)=>{if(V=w,d.value)return!0;const g=await r.safeParseAsync(x);if(!g.success){if(n.value=G.invalid,!w)return a.value=g.error.format(),!1;const i=g.error.issues.filter(U=>w.has(U.path.join(".")));return i.length?(a.value=new B.ZodError(i).format(),!1):(a.value=void 0,!0)}return a.value=void 0,n.value=G.valid,u.value=g.data,!0},h=()=>{a.value=void 0,n.value=void 0,V=void 0},b=()=>{u.value=L(r),h(),n.value=G.reset},y=async()=>d.value||!await l()?!1:(n.value=G.submitting,!0),{ignoreUpdates:o,stop:O}=T.watchIgnorable(u,()=>{n.value=G.updated},{deep:!0,eventFilter:T.throttleFilter((t==null?void 0:t.updateThrottle)??500)}),S=e.readonly(a),E=e.readonly(n),k=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(t==null?void 0:t.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","submit","update:modelValue","update:readonly","valid","reset"],expose:["errors","invalid","readonly","status","submit","tag","template","valid","validate","clear","reset"],slots:Object,setup(x,{emit:w}){return u.value=L(r,e.toRaw(x.modelValue)),e.watch(()=>x.modelValue,g=>{if(g){const i=e.isProxy(g)?e.toRaw(g):g;if(JSON.stringify(i)===JSON.stringify(e.toRaw(u.value)))return;u.value=typeof(i==null?void 0:i.clone)=="function"?i.clone():JSON.parse(JSON.stringify(i))}},{deep:!0}),e.watch(n,async g=>{var i,U,R,W,$,M;if(g===G.invalid){const C=e.toRaw(a.value);w("invalid",C),(i=t==null?void 0:t.onInvalid)==null||i.call(t,C);return}if(g===G.valid){const C=e.toRaw(u.value);w("valid",C),(U=t==null?void 0:t.onValid)==null||U.call(t,C),w("update:modelValue",C),(R=t==null?void 0:t.onUpdate)==null||R.call(t,C);return}if(g===G.submitting){const C=e.toRaw(u.value);w("submit",C),(W=t==null?void 0:t.onSubmit)==null||W.call(t,C);return}if(g===G.reset){const C=e.toRaw(u.value);w("reset",C),($=t==null?void 0:t.onReset)==null||$.call(t,C);return}if(g===G.updated){if((a.value||t!=null&&t.continuousValidation||x.continuousValidation)&&await l(void 0,V),!u.value||!x.modelValue||JSON.stringify(u.value)!==JSON.stringify(x.modelValue)){const C=e.toRaw(u.value);w("update:modelValue",C),(M=t==null?void 0:t.onUpdate)==null||M.call(t,C)}n.value===G.updated&&(n.value=G.unknown)}}),e.onMounted(()=>{d.value=x.readonly}),e.watch(()=>x.readonly,g=>{d.value=g}),e.watch(d,g=>{g!==x.readonly&&w("update:readonly",d.value)}),e.provide(s,{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}),{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,isReadonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}},render(){const x=()=>{var w,g;return((g=(w=this.$slots)==null?void 0:w.default)==null?void 0:g.call(w,{clear:h,errors:S,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:E,stopUpdatesWatch:O,submit:y,validate:l}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??(t==null?void 0:t.template))&&c?[e.h(c,{schema:this.template??(t==null?void 0:t.template)},{default:x})]:{default:x})}});return{clear:h,errors:a,formData:u,ignoreUpdates:o,invalid:v,readonly:d,reset:b,status:n,stopUpdatesWatch:O,submit:y,validate:l,VvForm:k}}function P(r){return Array.isArray(r)}function j(r){return typeof r<"u"}function H(r){return r===null}function Q(r){return typeof r=="object"}function X(r){return typeof r=="string"}function _(r){return typeof r>"u"}const D=/^[0-9]+$/,F=["__proto__","prototype","constructor"];function Z(r,s,t){const c=j(t)?t:void 0;if(!Q(r)||!X(s))return c;const a=Y(s);if(a.length!==0){for(const n of a){if(n==="*")continue;const v=function(u){return u.map(d=>_(d)||H(d)?d:P(d)?v(d):d[n])};if(P(r)&&!D.test(n)?r=v(r):r=r[n],_(r)||H(r))break}return _(r)?c:r}}function q(r,s,t){if(!Q(r)||!X(s))return;const c=Y(s);if(c.length===0)return;const a=c.length;for(let n=0;n<a;n++){const v=c[n];if(n===a-1){r[v]=t;return}if(v==="*"&&P(r)){const u=c.slice(n+1).join(".");for(const d of r)q(d,u,t);return}_(r[v])&&(r[v]={}),r=r[v]}}function Y(r){const s=r.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return s.some(t=>F.indexOf(t)!==-1)?[]:s}function ee(r,s,t,c){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:a=>Object.values(p).includes(a),default:p.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},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabel","is","type"],slots:Object,setup(a,{slots:n,emit:v}){const{props:u,name:d}=e.toRefs(a),V=e.inject(s,void 0);V&&V.fields.value.add(a.name);const l=e.inject(r),h=e.computed({get(){if(l!=null&&l.formData)return Z(new Object(l.formData.value),String(a.name))},set(i){l!=null&&l.formData&&(q(new Object(l.formData.value),String(a.name),i),v("update:modelValue",{newValue:h.value,formData:l==null?void 0:l.formData}))}});e.onMounted(()=>{h.value===void 0&&a.defaultValue!==void 0&&(h.value=a.defaultValue)});const b=e.computed(()=>{if(l!=null&&l.errors.value)return Z(l.errors.value,String(a.name))}),y=e.computed(()=>{var i;return(i=b.value)==null?void 0:i._errors}),o=e.computed(()=>b.value!==void 0),O=e.watch(o,()=>{if(o.value){v("invalid",b.value),V&&V.errors.value.set(String(a.name),b.value);return}v("valid",h.value),V&&V.errors.value.delete(a.name)}),S=e.watch(()=>l==null?void 0:l.formData,()=>{v("update:formData",l==null?void 0:l.formData)},{deep:!0});e.onBeforeUnmount(()=>{O(),S()});const E=i=>{i instanceof InputEvent&&(i=i.target.value),h.value=i},k=e.computed(()=>{let i=u.value;return typeof i=="function"&&(i=i(l==null?void 0:l.formData)),Object.keys(i).reduce((U,R)=>(U[R]=e.unref(i[R]),U),{})}),x=e.computed(()=>l!=null&&l.readonly.value?!0:k.value.readonly??a.readonly),w=e.computed(()=>({...k.value,name:k.value.name??a.name,invalid:o.value,valid:a.showValid?!!(!o.value&&h.value):void 0,type:(i=>{if([p.color,p.date,p.datetimeLocal,p.email,p.month,p.number,p.password,p.search,p.tel,p.text,p.time,p.url,p.week].includes(i))return i})(a.type),invalidLabel:y.value,modelValue:h.value,readonly:x.value,"onUpdate:modelValue":E}));return e.provide(t,{name:e.readonly(d),errors:e.readonly(b)}),{component:e.computed(()=>{if(a.type===p.custom)return{render(){var i;return((i=n.default)==null?void 0:i.call(n,{errors:b.value,formData:l==null?void 0:l.formData.value,formErrors:l==null?void 0:l.errors.value,invalid:o.value,invalidLabel:y.value,modelValue:h.value,onUpdate:E,readonly:x.value,submit:l==null?void 0:l.submit,validate:l==null?void 0:l.validate}))??n.default}};if(!((c==null?void 0:c.lazyLoad)??a.lazyLoad)){let i;switch(a.type){case p.select:i=e.resolveComponent("VvSelect");break;case p.checkbox:i=e.resolveComponent("VvCheckbox");break;case p.radio:i=e.resolveComponent("VvRadio");break;case p.textarea:i=e.resolveComponent("VvTextarea");break;case p.radioGroup:i=e.resolveComponent("VvRadioGroup");break;case p.checkboxGroup:i=e.resolveComponent("VvCheckboxGroup");break;case p.combobox:i=e.resolveComponent("VvCombobox");break;default:i=e.resolveComponent("VvInputText")}if(typeof i!="string")return i;console.warn(`[form-vue warn]: ${i} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(c!=null&&c.sideEffects&&await Promise.resolve(c.sideEffects(a.type)),a.type){case p.textarea:return import("@volverjs/ui-vue/vv-textarea");case p.radio:return import("@volverjs/ui-vue/vv-radio");case p.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case p.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case p.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case p.select:return import("@volverjs/ui-vue/vv-select");case p.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:w,invalid:o}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===p.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function re(r,s,t){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array,Object],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(c,{slots:a,emit:n}){const{props:v,names:u,defaultValues:d}=e.toRefs(c),V=e.computed(()=>Array.isArray(u.value)?u.value:Object.values(u.value)),l=e.computed(()=>Array.isArray(u.value)?u.value:Object.keys(u.value)),h=e.computed(()=>Array.isArray(u.value)?u.value.reduce((f,m)=>(f[String(m)]=m,f),{}):u.value),b=e.computed(()=>Object.keys(h.value).reduce((f,m)=>(f[String(h.value[m])]=m,f),{})),y=e.inject(s,void 0);y&&V.value.forEach(f=>{y.fields.value.add(f)});const o=e.inject(r),O=e.computed({get(){return o!=null&&o.formData?l.value.reduce((f,m)=>(f[m]=Z(new Object(o.formData.value),h.value[m]),f),{}):{}},set(f){o!=null&&o.formData&&(l.value.forEach(m=>{q(new Object(o.formData.value),h.value[m],f==null?void 0:f[m])}),n("update:modelValue",{newValue:O.value,formData:o==null?void 0:o.formData}))}});e.onMounted(()=>{d.value&&V.value.forEach(f=>{var m,I;((m=d.value)==null?void 0:m[f])!==void 0&&O.value[f]===void 0&&(O.value={...O.value,[f]:(I=d.value)==null?void 0:I[f]})})});const S=e.computed(()=>{if(!(o!=null&&o.errors.value))return;const f=V.value.reduce((m,I)=>{if(!o.errors.value)return m;const N=Z(o.errors.value,String(I));return N===void 0||(m[String(I)]=N),m},{});if(Object.keys(f).length!==0)return f}),E=e.computed(()=>{if(!S.value)return;const f=Object.keys(S.value).reduce((m,I)=>{var N;return(N=S.value)!=null&&N[I]&&(m[b.value[I]]=S.value[I]._errors),m},{});if(Object.keys(f).length!==0)return f}),k=e.computed(()=>S.value!==void 0),x=e.computed(()=>l.value.reduce((f,m)=>{var I;return f[m]=!!((I=S.value)!=null&&I[b.value[m]]),f},{})),w=e.watch(k,()=>{if(k.value){n("invalid",S.value),y&&V.value.forEach(f=>{var m,I;if(!((m=S.value)!=null&&m[f])){y.errors.value.delete(f);return}y.errors.value.set(f,(I=S.value)==null?void 0:I[f])});return}n("valid",O.value),y&&V.value.forEach(f=>{y.errors.value.delete(f)})}),g=e.watch(()=>o==null?void 0:o.formData,()=>{n("update:formData",o==null?void 0:o.formData)},{deep:!0});e.onBeforeUnmount(()=>{w(),g()});const i=f=>{O.value=f},U=(f,m)=>{m instanceof InputEvent&&(m=m.target.value),l.value.includes(f)&&(O.value={...O.value,[f]:m})},R=e.computed(()=>{let f=v.value;return typeof f=="function"&&(f=f(o==null?void 0:o.formData)),Object.keys(f).reduce((m,I)=>(m[I]=e.unref(f[I]),m),{})}),W=e.computed(()=>o!=null&&o.readonly.value?!0:R.value.readonly??c.readonly),$=e.computed(()=>l.value.reduce((f,m)=>(f[`onUpdate:${m}`]=I=>{U(m,I)},f),{"onUpdate:modelValue":i})),M=e.computed(()=>({...$.value,...R.value,names:R.value.name??V.value,invalid:k.value,invalids:x.value,valid:c.showValid?!!(!k.value&&O.value):void 0,invalidLabels:E.value,modelValue:O.value,readonly:W.value}));return e.provide(t,{names:e.readonly(u),errors:e.readonly(S)}),{component:e.computed(()=>({render(){var f;return((f=a.default)==null?void 0:f.call(a,{errors:S.value,formData:o==null?void 0:o.formData.value,formErrors:o==null?void 0:o.errors.value,invalid:k.value,invalids:x.value,invalidLabels:E.value,modelValue:O.value,onUpdate:i,onUpdateField:U,readonly:W.value,submit:o==null?void 0:o.submit,validate:o==null?void 0:o.validate}))??a.default}})),hasProps:M,invalid:k}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function te(r,s){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(t,{emit:c}){const a=e.inject(r),n=e.inject(s,void 0),v=e.ref(new Set),u=e.ref(new Map),{name:d}=e.toRefs(t);e.provide(s,{name:e.readonly(d),errors:u,fields:v}),e.watch(v,h=>{n!=null&&n.fields&&h.forEach(b=>{n==null||n.fields.value.add(b)})},{deep:!0}),e.watch(()=>new Map(u.value),(h,b)=>{n!=null&&n.errors&&(Array.from(b.keys()).forEach(y=>{n.errors.value.delete(y)}),Array.from(h.keys()).forEach(y=>{const o=h.get(y);o&&n.errors.value.set(y,o)}))},{deep:!0});const V=e.computed(()=>a!=null&&a.invalid.value?u.value.size>0:!1);e.watch(V,()=>{V.value?c("invalid"):c("valid")});const l=()=>(a==null?void 0:a.validate(void 0,v.value))??Promise.resolve(!0);return{clear:a==null?void 0:a.clear,errors:a==null?void 0:a.errors,fields:v,fieldsErrors:u,formData:a==null?void 0:a.formData,invalid:V,reset:a==null?void 0:a.reset,submit:a==null?void 0:a.submit,validate:a==null?void 0:a.validate,validateWrapper:l}},render(){const t=()=>{var c,a;return(a=(c=this.$slots).default)==null?void 0:a.call(c,{clear:this.clear,errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper})};return this.tag?e.h(this.tag,null,{default:t}):t()}})}function ae(r,s){const t=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(c,{slots:a}){const n=e.inject(r);if(n!=null&&n.formData)return()=>{var V;const v=typeof c.schema=="function"?c.schema(n,c.scope):c.schema;let u;const d=v.reduce((l,h)=>{const b=typeof h=="function"?h(n,c.scope):h,{vvIs:y,vvName:o,vvSlots:O,vvChildren:S,vvIf:E,vvElseIf:k,vvType:x,vvDefaultValue:w,vvShowValid:g,vvContent:i,...U}=b;if(E!==void 0){if(typeof E=="string"?u=!!Z(new Object(n.formData.value),E):typeof E=="function"?u=e.unref(E(n)):u=e.unref(E),!u)return l}else if(k!==void 0&&u!==void 0){if(u||(typeof k=="string"?u=!!Z(new Object(n.formData.value),k):typeof k=="function"?u=e.unref(k(n)):u=e.unref(k),!u))return l}else u=void 0;let R;return S&&(typeof y=="string"?R=e.h(t,{schema:S}):R={default:W=>e.h(t,{schema:S,scope:W})}),o?(l.push(e.h(s,{name:o,is:y,type:x,defaultValue:w,showValid:g,props:U},O??R??i)),l):y?(l.push(e.h(y,U,O??R??i)),l):(R&&("default"in R?l.push(R.default(c.scope)):l.push(R)),l)},[]);return d.push((V=a==null?void 0:a.default)==null?void 0:V.call(a,{errors:n==null?void 0:n.errors.value,formData:n==null?void 0:n.formData.value,invalid:n==null?void 0:n.invalid.value,status:n==null?void 0:n.status.value,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,clear:n==null?void 0:n.clear,reset:n==null?void 0:n.reset})),d}}});return t}function K(r,s={}){const t=Symbol("formInjectionKey"),c=Symbol("formWrapperInjectionKey"),a=Symbol("formFieldInjectionKey"),n=Symbol("formFieldsGroupInjectionKey"),v=te(t,c),u=ee(t,c,a,s),d=re(t,c,n),V=ae(t,u),{clear:l,errors:h,formData:b,ignoreUpdates:y,invalid:o,readonly:O,reset:S,status:E,stopUpdatesWatch:k,submit:x,validate:w,VvForm:g}=z(r,t,s,V);return{clear:l,errors:h,formData:b,formFieldInjectionKey:a,formInjectionKey:t,formWrapperInjectionKey:c,ignoreUpdates:y,invalid:o,readonly:O,reset:S,status:E,stopUpdatesWatch:k,submit:x,validate:w,VvForm:g,VvFormField:u,VvFormFieldsGroup:d,VvFormTemplate:V,VvFormWrapper:v}}const J=Symbol("pluginInjectionKey");function ne(r){let s={};return r.schema&&(s=K(r.schema,r)),{...s,install(t,{global:c=!1}={}){t.provide(J,r),c&&(t.config.globalProperties.$vvForm=r,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.VvFormFieldsGroup&&t.component("VvFormFieldsGroup",s.VvFormFieldsGroup),s!=null&&s.VvFormTemplate&&t.component("VvFormTemplate",s.VvFormTemplate))}}}function le(r,s={}){return e.getCurrentInstance()?K(r,{...e.inject(J,{}),...s}):K(r,s)}function ue(r,s={}){return K(r,s)}A.FormFieldType=p,A.createForm=ne,A.defaultObjectBySchema=L,A.formFactory=ue,A.pluginInjectionKey=J,A.useForm=le,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volverjs/form-vue",
   "type": "module",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.24",
   "description": "Vue 3 Forms with @volverjs/ui-vue",
   "author": "8 Wave S.r.l.",
   "license": "MIT",
@@ -68,7 +68,7 @@
     "@vue/test-utils": "^2.4.6",
     "copy": "^0.3.2",
     "eslint": "^9.14.0",
-    "happy-dom": "^15.10.1",
+    "happy-dom": "^15.11.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",

package/src/VvFormFieldsGroup.ts

@@ -36,7 +36,7 @@ export function defineFormFieldsGroup<Schema extends FormSchema>(formProvideKey:
                 default: undefined,
             },
             names: {
-                type: [Array] as PropType<
+                type: [Array, Object] as PropType<
                     Path<z.infer<Schema>>[] | Record<string, Path<z.infer<Schema>>>
                 >,
                 required: true,

package/src/index.ts

@@ -117,6 +117,9 @@ export function createForm(options: FormPluginOptions): Plugin & Partial<ReturnT
                 if (toReturn?.VvFormField) {
                     app.component('VvFormField', toReturn.VvFormField)
                 }
+                if (toReturn?.VvFormFieldsGroup) {
+                    app.component('VvFormFieldsGroup', toReturn.VvFormFieldsGroup)
+                }
                 if (toReturn?.VvFormTemplate) {
                     app.component('VvFormTemplate', toReturn.VvFormTemplate)
                 }
@@ -144,12 +147,14 @@ export { defaultObjectBySchema } from './utils'
 type FormComponent = ReturnType<typeof defineForm>
 type FormWrapperComponent = ReturnType<typeof defineFormWrapper>
 type FormFieldComponent = ReturnType<typeof defineFormField>
-type FormTemplateComponent = ReturnType<typeof defineFormTemplate>
+type FormFieldsGroupComponent = ReturnType<typeof defineFormFieldsGroup>
+type FormTemplateComponent = ReturnType<typeof defineFormFieldsGroup>
 
 export type {
     FormComponent,
     FormComposableOptions,
     FormFieldComponent,
+    FormFieldsGroupComponent,
     FormPluginOptions,
     FormSchema,
     FormTemplate,