@volverjs/form-vue 0.0.3 → 0.0.4

package/README.md

@@ -54,6 +54,7 @@ const form = createForm({
   schema
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: boolean - default false
   // sideEffects?: (data: any) => void
 })
 
@@ -131,6 +132,31 @@ The throttle can be changed with the `updateThrottle` option.
 </template>
 ```
 
+The `continuosValidation` can be passed through options or with VvForm prop.
+With this field the validation doesn't stop and continue also after a validaton success.
+
+```vue
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const { VvForm, VvFormField } = useForm(MyZodSchema, {
+    lazyLoad: true
+    // continuosValidation: true
+  })
+
+  const formData = ref({
+    name: '',
+    surname: ''
+  })
+</script>
+
+<template>
+  <VvForm v-model="formData" :continuosValidation="true">
+    <!-- form fields -->
+  </VvForm>
+</template>
+```
+
 ### VvFormWrapper
 
 `VvFormWrapper` gives you the validation status of a part of your form.
@@ -250,6 +276,86 @@ Or a custom component.
 </template>
 ```
 
+## Nested VvFormField
+
+In some use cases can be usefull nest `VvFormField`.
+For example let's assume:
+
+- a shopping list that is a field of our model (ex: ToDo list)
+- the sum of all products of the shopping list cannot be 0
+- we don't know all the products a priori
+
+So our ToDo model and shopping list are structured like:
+
+```javascript
+const toDo = {
+  shoppingList: {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0,
+    ...
+  }
+}
+```
+
+Our Zod schema can be:
+
+```typescript
+const toDoSchema = z.object({
+  shoppingList: z
+    .object({})
+    .default({})
+    .superRefine((value, ctx) => {
+      const shoppingList = value as Record<string, number>
+      if (
+        Object.keys(value).length &&
+        !Object.keys(value).find((key) => shoppingList[key] > 0)
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: i18n.global.t('atLeastOneProduct')
+        })
+      }
+    })
+})
+```
+
+And the Vue component:
+
+```vue
+<script setup lang="ts">
+  const { VvForm, VvFormField } = useForm(toDoSchema, {
+    lazyLoad: true,
+    continuosValidation: true
+  })
+
+  // shopping list data, const or async
+  const shoppingList = {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0
+  }
+</script>
+
+<template>
+  <VvForm>
+    <VvFormField v-slot="{ invalid, invalidLabel }" name="shoppingList">
+      <VvFormField
+        v-for="key in Object.keys(shoppingList)"
+        :key="key"
+        :name="`shoppingList.${key}`"
+        :label="$t(key)"
+      />
+      <small v-if="invalid" class="input-counter__hint">{{
+        invalidLabel[0]
+      }}</small>
+    </VvFormField>
+  </VvForm>
+</template>
+```
+
 ## Composable
 
 `useForm` can be used to create a form programmatically inside a Vue 3 Component.
@@ -268,6 +374,7 @@ The default settings are inherited from the plugin (if it was defined).
   const { VvForm, VvFormWrapper, VvFormField } = useForm(schema, {
     // lazyLoad: boolean - default false
     // updateThrottle: number - default 500
+    // continuosValidation: true - default false
     // sideEffects?: (formData: any) => void
   })
 </script>
@@ -297,6 +404,7 @@ const schema = z.object({
 const { VvForm, VvFormWrapper, VvFormField } = formFactory(schema, {
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: true - default false
   // sideEffects?: (data: any) => void
 })
 

package/dist/VvForm.d.ts

@@ -13,6 +13,10 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
         type: ObjectConstructor;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     submit: () => boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -20,6 +24,10 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
         type: ObjectConstructor;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onValid?: ((...args: any[]) => any) | undefined;
     onInvalid?: ((...args: any[]) => any) | undefined;
@@ -27,4 +35,5 @@ export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
+    continuosValidation: boolean;
 }>;

package/dist/index.d.ts

@@ -10,6 +10,10 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -17,6 +21,10 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -24,6 +32,7 @@ export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObjec
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {
@@ -69,6 +78,10 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -76,6 +89,10 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -83,6 +100,7 @@ export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>,
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, computed as h, onMounted as Z, inject as S, toRefs as G, watch as V, provide as $, readonly as M, resolveComponent as b, defineAsyncComponent as q, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
+import { defineComponent as w, computed as h, onMounted as Z, inject as S, toRefs as G, watch as V, provide as k, readonly as M, resolveComponent as b, defineAsyncComponent as q, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
 import { watchThrottled as X } from "@vueuse/core";
 import { ZodEffects as P, ZodDefault as T, ZodObject as F } from "zod";
 function A(e) {
@@ -26,13 +26,13 @@ function _(e, r, t) {
     return a;
   const n = W(r);
   if (n.length !== 0) {
-    for (const u of n) {
-      if (u === "*")
+    for (const o of n) {
+      if (o === "*")
         continue;
-      const i = function(s) {
-        return s.map((f) => E(f) || N(f) ? f : A(f) ? i(f) : f[u]);
+      const s = function(i) {
+        return i.map((f) => E(f) || N(f) ? f : A(f) ? s(f) : f[o]);
       };
-      if (A(e) && !re.test(u) ? e = i(e) : e = e[u], E(e) || N(e))
+      if (A(e) && !re.test(o) ? e = s(e) : e = e[o], E(e) || N(e))
         break;
     }
     return E(e) ? a : e;
@@ -45,19 +45,19 @@ function U(e, r, t) {
   if (a.length === 0)
     return;
   const n = a.length;
-  for (let u = 0; u < n; u++) {
-    const i = a[u];
-    if (u === n - 1) {
-      e[i] = t;
+  for (let o = 0; o < n; o++) {
+    const s = a[o];
+    if (o === n - 1) {
+      e[s] = t;
       return;
     }
-    if (i === "*" && A(e)) {
-      const s = a.slice(u + 1).join(".");
+    if (s === "*" && A(e)) {
+      const i = a.slice(o + 1).join(".");
       for (const f of e)
-        U(f, s, t);
+        U(f, i, t);
       return;
     }
-    E(e[i]) && (e[i] = {}), e = e[i];
+    E(e[s]) && (e[s] = {}), e = e[s];
   }
 }
 function W(e) {
@@ -96,58 +96,58 @@ const ne = (e, r, t, a = {}) => w({
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(n, { slots: u, emit: i }) {
-    const s = h({
+  setup(n, { slots: o, emit: s }) {
+    const i = h({
       get() {
-        if (o != null && o.modelValue)
+        if (u != null && u.modelValue)
           return _(
-            Object(o.modelValue.value),
+            Object(u.modelValue.value),
             String(n.name)
           );
       },
       set(c) {
-        o != null && o.modelValue && (U(
-          Object(o.modelValue.value),
+        u != null && u.modelValue && (U(
+          Object(u.modelValue.value),
           String(n.name),
           c
-        ), i("update:modelValue", {
-          newValue: s.value,
-          formData: o == null ? void 0 : o.modelValue
+        ), s("update:modelValue", {
+          newValue: i.value,
+          formData: u == null ? void 0 : u.modelValue
         }));
       }
     });
     Z(() => {
-      s.value === void 0 && n.defaultValue !== void 0 && (s.value = n.defaultValue);
+      i.value === void 0 && n.defaultValue !== void 0 && (i.value = n.defaultValue);
     });
     const f = S(r, void 0);
     f && f.fields.value.add(n.name);
-    const o = S(e), { props: d, name: m } = G(n), v = h(() => {
-      if (o != null && o.errors.value)
-        return _(o.errors.value, String(n.name));
+    const u = S(e), { props: v, name: m } = G(n), d = h(() => {
+      if (u != null && u.errors.value)
+        return _(u.errors.value, String(n.name));
     }), y = h(() => {
       var c;
-      return (c = v.value) == null ? void 0 : c._errors;
-    }), p = h(() => v.value !== void 0);
+      return (c = d.value) == null ? void 0 : c._errors;
+    }), p = h(() => d.value !== void 0);
     V(p, () => {
-      p.value ? (i("invalid", y.value), f && f.errors.value.set(n.name, {
+      p.value ? (s("invalid", y.value), f && f.errors.value.set(n.name, {
         _errors: y.value
-      })) : (i("valid", s.value), f && f.errors.value.delete(
+      })) : (s("valid", i.value), f && f.errors.value.delete(
         n.name
       ));
     }), V(
-      () => o == null ? void 0 : o.modelValue,
+      () => u == null ? void 0 : u.modelValue,
       () => {
-        i("update:formData", o == null ? void 0 : o.modelValue);
+        s("update:formData", u == null ? void 0 : u.modelValue);
       },
       { deep: !0 }
     );
-    const k = (c) => {
-      s.value = c;
-    }, I = h(() => typeof d.value == "function" ? d.value(o == null ? void 0 : o.modelValue) : d.value), R = h(() => ({
+    const $ = (c) => {
+      i.value = c;
+    }, I = h(() => typeof v.value == "function" ? v.value(u == null ? void 0 : u.modelValue) : v.value), R = h(() => ({
       ...I.value,
       name: I.value.name ?? n.name,
       invalid: p.value,
-      valid: n.showValid ? Boolean(!p.value && s.value) : void 0,
+      valid: n.showValid ? Boolean(!p.value && i.value) : void 0,
       type: ((c) => {
         if ([
           l.text,
@@ -167,27 +167,27 @@ const ne = (e, r, t, a = {}) => w({
           return c;
       })(n.type),
       invalidLabel: y.value,
-      modelValue: s.value,
-      errors: n.is ? v.value : void 0,
-      "onUpdate:modelValue": k
+      modelValue: i.value,
+      errors: n.is ? d.value : void 0,
+      "onUpdate:modelValue": $
     }));
-    return $(t, {
+    return k(t, {
       name: M(m),
-      errors: M(v)
+      errors: M(d)
     }), { component: h(() => {
       if (n.type === l.custom)
         return {
           render() {
             var c;
-            return ((c = u.default) == null ? void 0 : c.call(u, {
-              modelValue: s.value,
-              onUpdate: k,
+            return ((c = o.default) == null ? void 0 : c.call(o, {
+              modelValue: i.value,
+              onUpdate: $,
               invalid: p.value,
               invalidLabel: y.value,
-              formData: o == null ? void 0 : o.modelValue.value,
-              formErrors: o == null ? void 0 : o.errors.value,
-              errors: v.value
-            })) ?? u.defalut;
+              formData: u == null ? void 0 : u.modelValue.value,
+              formErrors: u == null ? void 0 : u.errors.value,
+              errors: d.value
+            })) ?? o.defalut;
           }
         };
       if (!a.lazyLoad) {
@@ -247,12 +247,12 @@ const ne = (e, r, t, a = {}) => w({
   }
 });
 var ae = function(r) {
-  return ue(r) && !oe(r);
+  return oe(r) && !ue(r);
 };
-function ue(e) {
+function oe(e) {
   return !!e && typeof e == "object";
 }
-function oe(e) {
+function ue(e) {
   var r = Object.prototype.toString.call(e);
   return r === "[object RegExp]" || r === "[object Date]" || se(e);
 }
@@ -305,8 +305,8 @@ function be(e, r, t) {
 }
 function g(e, r, t) {
   t = t || {}, t.arrayMerge = t.arrayMerge || fe, t.isMergeableObject = t.isMergeableObject || ae, t.cloneUnlessOtherwiseSpecified = j;
-  var a = Array.isArray(r), n = Array.isArray(e), u = a === n;
-  return u ? a ? t.arrayMerge(e, r, t) : be(e, r, t) : j(r, t);
+  var a = Array.isArray(r), n = Array.isArray(e), o = a === n;
+  return o ? a ? t.arrayMerge(e, r, t) : be(e, r, t) : j(r, t);
 }
 g.all = function(r, t) {
   if (!Array.isArray(r))
@@ -330,39 +330,43 @@ const J = (e, r = {}) => {
     modelValue: {
       type: Object,
       default: () => ({})
+    },
+    continuosValidation: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["invalid", "valid", "submit", "update:modelValue"],
   expose: ["submit", "errors", "status"],
   setup(a, { emit: n }) {
-    const u = x(
+    const o = x(
       J(e, a.modelValue)
-    );
+    ), s = (t == null ? void 0 : t.continuosValidation) || a.continuosValidation;
     V(
       () => a.modelValue,
-      (d) => {
-        if (d) {
-          const m = Y(d) ? H(d) : d;
-          u.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
+      (m) => {
+        if (m) {
+          const d = Y(m) ? H(m) : m;
+          o.value = typeof (d == null ? void 0 : d.clone) == "function" ? d.clone() : JSON.parse(JSON.stringify(d));
         }
       },
       { deep: !0 }
     ), X(
-      u,
-      (d) => {
-        (i.value || t != null && t.continuosValidation) && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
+      o,
+      (m) => {
+        (i.value || s) && u(), (!m || !a.modelValue || JSON.stringify(m) !== JSON.stringify(a.modelValue)) && n("update:modelValue", m);
       },
       { deep: !0, throttle: (t == null ? void 0 : t.updateThrottle) ?? 500 }
     );
-    const i = x(), s = x(), f = (d = u.value) => {
-      const m = e.safeParse(d);
-      return m.success ? (i.value = void 0, s.value = "valid", u.value = m.data, n("valid", m.data), !0) : (i.value = m.error.format(), s.value = "invalid", n("invalid", i.value), !1);
-    }, o = () => f() ? (n("submit", u.value), !0) : !1;
-    return $(r, {
-      modelValue: u,
-      submit: o,
+    const i = x(), f = x(), u = (m = o.value) => {
+      const d = e.safeParse(m);
+      return d.success ? (i.value = void 0, f.value = "valid", o.value = d.data, n("valid", d.data), !0) : (i.value = d.error.format(), f.value = "invalid", n("invalid", i.value), !1);
+    }, v = () => u() ? (n("submit", o.value), !0) : !1;
+    return k(r, {
+      modelValue: o,
+      submit: v,
       errors: M(i)
-    }), { submit: o };
+    }), { submit: v };
   },
   render() {
     return O(
@@ -388,68 +392,68 @@ const J = (e, r = {}) => {
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
   setup(t, { emit: a }) {
-    const n = S(e), u = S(r, void 0), i = x(/* @__PURE__ */ new Set()), s = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
-    $(r, {
+    const n = S(e), o = S(r, void 0), s = x(/* @__PURE__ */ new Set()), i = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
+    k(r, {
       name: M(f),
-      errors: s,
-      fields: i
+      errors: i,
+      fields: s
     }), V(
-      i,
-      (d) => {
-        u != null && u.fields && d.forEach((m) => {
-          u == null || u.fields.value.add(m);
+      s,
+      (v) => {
+        o != null && o.fields && v.forEach((m) => {
+          o == null || o.fields.value.add(m);
         });
       },
       { deep: !0 }
     ), V(
-      () => new Map(s.value),
-      (d, m) => {
-        u != null && u.errors && (Array.from(m.keys()).forEach((v) => {
-          u.errors.value.delete(v);
-        }), Array.from(d.keys()).forEach((v) => {
-          const y = d.get(v);
-          y && u.errors.value.set(v, y);
+      () => new Map(i.value),
+      (v, m) => {
+        o != null && o.errors && (Array.from(m.keys()).forEach((d) => {
+          o.errors.value.delete(d);
+        }), Array.from(v.keys()).forEach((d) => {
+          const y = v.get(d);
+          y && o.errors.value.set(d, y);
         }));
       },
       { deep: !0 }
     );
-    const o = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
-    return V(o, () => {
-      o.value ? a("invalid") : a("valid");
-    }), { formProvided: n, invalid: o, fields: i, errors: s };
+    const u = h(() => n != null && n.errors.value ? i.value.size > 0 : !1);
+    return V(u, () => {
+      u.value ? a("invalid") : a("valid");
+    }), { formProvided: n, invalid: u, fields: s, errors: i };
   },
   render() {
-    var t, a, n, u, i, s, f, o;
+    var t, a, n, o, s, i, f, u;
     return this.tag ? O(
       this.tag,
       null,
-      ((u = (n = this.$slots).default) == null ? void 0 : u.call(n, {
+      ((o = (n = this.$slots).default) == null ? void 0 : o.call(n, {
         invalid: this.invalid,
         formData: (t = this.formProvided) == null ? void 0 : t.modelValue,
         errors: (a = this.formProvided) == null ? void 0 : a.errors,
         fieldsErrors: this.errors
       })) ?? this.$slots.defalut
-    ) : ((o = (f = this.$slots).default) == null ? void 0 : o.call(f, {
+    ) : ((u = (f = this.$slots).default) == null ? void 0 : u.call(f, {
       invalid: this.invalid,
-      formData: (i = this.formProvided) == null ? void 0 : i.modelValue,
-      errors: (s = this.formProvided) == null ? void 0 : s.errors,
+      formData: (s = this.formProvided) == null ? void 0 : s.modelValue,
+      errors: (i = this.formProvided) == null ? void 0 : i.errors,
       fieldsErrors: this.errors
     })) ?? this.$slots.defalut;
   }
 }), K = (e, r = {}) => {
-  const t = Symbol(), a = Symbol(), n = Symbol(), u = pe(e, t, r), i = Ve(
+  const t = Symbol(), a = Symbol(), n = Symbol(), o = pe(e, t, r), s = Ve(
     t,
     a
-  ), s = ne(
+  ), i = ne(
     t,
     a,
     n,
     r
   );
   return {
-    VvForm: u,
-    VvFormWrapper: i,
-    VvFormField: s,
+    VvForm: o,
+    VvFormWrapper: s,
+    VvFormField: i,
     formInjectionKey: t,
     formWrapperInjectionKey: a,
     formFieldInjectionKey: n

package/dist/index.umd.js

@@ -1 +1 @@
-(function(b,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],a):(b=typeof globalThis<"u"?globalThis:b||self,a(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,a,D,S){"use strict";function j(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function E(e){return e===null}function A(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const W=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,r,t){const o=U(t)?t:void 0;if(!A(e)||!C(r))return o;const n=I(r);if(n.length!==0){for(const l of n){if(l==="*")continue;const c=function(u){return u.map(d=>O(d)||E(d)?d:j(d)?c(d):d[l])};if(j(e)&&!W.test(l)?e=c(e):e=e[l],O(e)||E(e))break}return O(e)?o:e}}function k(e,r,t){if(!A(e)||!C(r))return;const o=I(r);if(o.length===0)return;const n=o.length;for(let l=0;l<n;l++){const c=o[l];if(l===n-1){e[c]=t;return}if(c==="*"&&j(e)){const u=o.slice(l+1).join(".");for(const d of e)k(d,u,t);return}O(e[c])&&(e[c]={}),e=e[c]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>B.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>a.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:n=>Object.values(s).includes(n),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(n,{slots:l,emit:c}){const u=a.computed({get(){if(i!=null&&i.modelValue)return $(Object(i.modelValue.value),String(n.name))},set(f){i!=null&&i.modelValue&&(k(Object(i.modelValue.value),String(n.name),f),c("update:modelValue",{newValue:u.value,formData:i==null?void 0:i.modelValue}))}});a.onMounted(()=>{u.value===void 0&&n.defaultValue!==void 0&&(u.value=n.defaultValue)});const d=a.inject(r,void 0);d&&d.fields.value.add(n.name);const i=a.inject(e),{props:m,name:h}=a.toRefs(n),p=a.computed(()=>{if(i!=null&&i.errors.value)return $(i.errors.value,String(n.name))}),y=a.computed(()=>{var f;return(f=p.value)==null?void 0:f._errors}),V=a.computed(()=>p.value!==void 0);a.watch(V,()=>{V.value?(c("invalid",y.value),d&&d.errors.value.set(n.name,{_errors:y.value})):(c("valid",u.value),d&&d.errors.value.delete(n.name))}),a.watch(()=>i==null?void 0:i.modelValue,()=>{c("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{u.value=f},L=a.computed(()=>typeof m.value=="function"?m.value(i==null?void 0:i.modelValue):m.value),le=a.computed(()=>({...L.value,name:L.value.name??n.name,invalid:V.value,valid:n.showValid?Boolean(!V.value&&u.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(n.type),invalidLabel:y.value,modelValue:u.value,errors:n.is?p.value:void 0,"onUpdate:modelValue":G}));return a.provide(t,{name:a.readonly(h),errors:a.readonly(p)}),{component:a.computed(()=>{if(n.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:u.value,onUpdate:G,invalid:V.value,invalidLabel:y.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:p.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(n.type){case s.select:f=a.resolveComponent("VvSelect");break;case s.checkbox:f=a.resolveComponent("VvCheckbox");break;case s.radio:f=a.resolveComponent("VvRadio");break;case s.textarea:f=a.resolveComponent("VvTextarea");break;case s.radioGroup:f=a.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=a.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=a.resolveComponent("VvCombobox");break;default:f=a.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return a.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(n.type)),n.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?a.h(this.is,this.hasProps,this.$slots):this.type===s.custom?a.h(this.component,null,this.$slots):a.h(this.component,this.hasProps,this.$slots)}});var K=function(r){return z(r)&&!J(r)};function z(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?v(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return v;var t=r.customMerge(e);return typeof t=="function"?t:v}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function T(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function F(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(n){o[n]=g(e[n],t)}),N(r).forEach(function(n){T(e,n)||(_(e,n)&&t.isMergeableObject(r[n])?o[n]=X(n,t)(e[n],r[n],t):o[n]=g(r[n],t))}),o}function v(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||K,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),n=Array.isArray(e),l=o===n;return l?o?t.arrayMerge(e,r,t):F(e,r,t):g(r,t)}v.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,n){return v(o,n,t)},{})};var ee=v,re=ee;const x=(e,r={})=>{const t=e instanceof S.ZodEffects?e.innerType().shape:e.shape;return re(Object.fromEntries(Object.entries(t).map(([o,n])=>n instanceof S.ZodDefault?[o,n._def.defaultValue()]:n instanceof S.ZodObject?[o,x(n)]:[o,void 0])),r)},te=(e,r,t)=>a.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:n}){const l=a.ref(x(e,o.modelValue));a.watch(()=>o.modelValue,m=>{if(m){const h=a.isProxy(m)?a.toRaw(m):m;l.value=typeof(h==null?void 0:h.clone)=="function"?h.clone():JSON.parse(JSON.stringify(h))}},{deep:!0}),D.watchThrottled(l,m=>{(c.value||t!=null&&t.continuosValidation)&&d(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&n("update:modelValue",m)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=a.ref(),u=a.ref(),d=(m=l.value)=>{const h=e.safeParse(m);return h.success?(c.value=void 0,u.value="valid",l.value=h.data,n("valid",h.data),!0):(c.value=h.error.format(),u.value="invalid",n("invalid",c.value),!1)},i=()=>d()?(n("submit",l.value),!0):!1;return a.provide(r,{modelValue:l,submit:i,errors:a.readonly(c)}),{submit:i}},render(){return a.h("form",{onSubmit:a.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>a.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const n=a.inject(e),l=a.inject(r,void 0),c=a.ref(new Set),u=a.ref(new Map),{name:d}=a.toRefs(t);a.provide(r,{name:a.readonly(d),errors:u,fields:c}),a.watch(c,m=>{l!=null&&l.fields&&m.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),a.watch(()=>new Map(u.value),(m,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(p=>{l.errors.value.delete(p)}),Array.from(m.keys()).forEach(p=>{const y=m.get(p);y&&l.errors.value.set(p,y)}))},{deep:!0});const i=a.computed(()=>n!=null&&n.errors.value?u.value.size>0:!1);return a.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:n,invalid:i,fields:c,errors:u}},render(){var t,o,n,l,c,u,d,i;return this.tag?a.h(this.tag,null,((l=(n=this.$slots).default)==null?void 0:l.call(n,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,r={})=>{const t=Symbol(),o=Symbol(),n=Symbol(),l=te(e,t,r),c=ne(t,o),u=q(t,o,n,r);return{VvForm:l,VvFormWrapper:c,VvFormField:u,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:n}},M=Symbol(),ae=e=>{let r={};return e.schema&&(r=w(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(M,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...a.inject(M,{}),...r};return w(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=x,b.formFactory=w,b.pluginInjectionKey=M,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+(function(b,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],a):(b=typeof globalThis<"u"?globalThis:b||self,a(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,a,D,S){"use strict";function j(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function E(e){return e===null}function A(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const B=/^[0-9]+$/,W=["__proto__","prototype","constructor"];function k(e,r,t){const o=U(t)?t:void 0;if(!A(e)||!C(r))return o;const n=I(r);if(n.length!==0){for(const l of n){if(l==="*")continue;const u=function(c){return c.map(d=>O(d)||E(d)?d:j(d)?u(d):d[l])};if(j(e)&&!B.test(l)?e=u(e):e=e[l],O(e)||E(e))break}return O(e)?o:e}}function $(e,r,t){if(!A(e)||!C(r))return;const o=I(r);if(o.length===0)return;const n=o.length;for(let l=0;l<n;l++){const u=o[l];if(l===n-1){e[u]=t;return}if(u==="*"&&j(e)){const c=o.slice(l+1).join(".");for(const d of e)$(d,c,t);return}O(e[u])&&(e[u]={}),e=e[u]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>W.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>a.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:n=>Object.values(s).includes(n),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(n,{slots:l,emit:u}){const c=a.computed({get(){if(i!=null&&i.modelValue)return k(Object(i.modelValue.value),String(n.name))},set(f){i!=null&&i.modelValue&&($(Object(i.modelValue.value),String(n.name),f),u("update:modelValue",{newValue:c.value,formData:i==null?void 0:i.modelValue}))}});a.onMounted(()=>{c.value===void 0&&n.defaultValue!==void 0&&(c.value=n.defaultValue)});const d=a.inject(r,void 0);d&&d.fields.value.add(n.name);const i=a.inject(e),{props:y,name:h}=a.toRefs(n),m=a.computed(()=>{if(i!=null&&i.errors.value)return k(i.errors.value,String(n.name))}),p=a.computed(()=>{var f;return(f=m.value)==null?void 0:f._errors}),V=a.computed(()=>m.value!==void 0);a.watch(V,()=>{V.value?(u("invalid",p.value),d&&d.errors.value.set(n.name,{_errors:p.value})):(u("valid",c.value),d&&d.errors.value.delete(n.name))}),a.watch(()=>i==null?void 0:i.modelValue,()=>{u("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{c.value=f},L=a.computed(()=>typeof y.value=="function"?y.value(i==null?void 0:i.modelValue):y.value),le=a.computed(()=>({...L.value,name:L.value.name??n.name,invalid:V.value,valid:n.showValid?Boolean(!V.value&&c.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(n.type),invalidLabel:p.value,modelValue:c.value,errors:n.is?m.value:void 0,"onUpdate:modelValue":G}));return a.provide(t,{name:a.readonly(h),errors:a.readonly(m)}),{component:a.computed(()=>{if(n.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:c.value,onUpdate:G,invalid:V.value,invalidLabel:p.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:m.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(n.type){case s.select:f=a.resolveComponent("VvSelect");break;case s.checkbox:f=a.resolveComponent("VvCheckbox");break;case s.radio:f=a.resolveComponent("VvRadio");break;case s.textarea:f=a.resolveComponent("VvTextarea");break;case s.radioGroup:f=a.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=a.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=a.resolveComponent("VvCombobox");break;default:f=a.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return a.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(n.type)),n.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?a.h(this.is,this.hasProps,this.$slots):this.type===s.custom?a.h(this.component,null,this.$slots):a.h(this.component,this.hasProps,this.$slots)}});var K=function(r){return z(r)&&!J(r)};function z(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?v(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return v;var t=r.customMerge(e);return typeof t=="function"?t:v}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function T(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function F(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(n){o[n]=g(e[n],t)}),N(r).forEach(function(n){T(e,n)||(_(e,n)&&t.isMergeableObject(r[n])?o[n]=X(n,t)(e[n],r[n],t):o[n]=g(r[n],t))}),o}function v(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||K,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),n=Array.isArray(e),l=o===n;return l?o?t.arrayMerge(e,r,t):F(e,r,t):g(r,t)}v.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,n){return v(o,n,t)},{})};var ee=v,re=ee;const x=(e,r={})=>{const t=e instanceof S.ZodEffects?e.innerType().shape:e.shape;return re(Object.fromEntries(Object.entries(t).map(([o,n])=>n instanceof S.ZodDefault?[o,n._def.defaultValue()]:n instanceof S.ZodObject?[o,x(n)]:[o,void 0])),r)},te=(e,r,t)=>a.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})},continuosValidation:{type:Boolean,default:!1}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:n}){const l=a.ref(x(e,o.modelValue)),u=(t==null?void 0:t.continuosValidation)||o.continuosValidation;a.watch(()=>o.modelValue,h=>{if(h){const m=a.isProxy(h)?a.toRaw(h):h;l.value=typeof(m==null?void 0:m.clone)=="function"?m.clone():JSON.parse(JSON.stringify(m))}},{deep:!0}),D.watchThrottled(l,h=>{(c.value||u)&&i(),(!h||!o.modelValue||JSON.stringify(h)!==JSON.stringify(o.modelValue))&&n("update:modelValue",h)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=a.ref(),d=a.ref(),i=(h=l.value)=>{const m=e.safeParse(h);return m.success?(c.value=void 0,d.value="valid",l.value=m.data,n("valid",m.data),!0):(c.value=m.error.format(),d.value="invalid",n("invalid",c.value),!1)},y=()=>i()?(n("submit",l.value),!0):!1;return a.provide(r,{modelValue:l,submit:y,errors:a.readonly(c)}),{submit:y}},render(){return a.h("form",{onSubmit:a.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>a.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const n=a.inject(e),l=a.inject(r,void 0),u=a.ref(new Set),c=a.ref(new Map),{name:d}=a.toRefs(t);a.provide(r,{name:a.readonly(d),errors:c,fields:u}),a.watch(u,y=>{l!=null&&l.fields&&y.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),a.watch(()=>new Map(c.value),(y,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(m=>{l.errors.value.delete(m)}),Array.from(y.keys()).forEach(m=>{const p=y.get(m);p&&l.errors.value.set(m,p)}))},{deep:!0});const i=a.computed(()=>n!=null&&n.errors.value?c.value.size>0:!1);return a.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:n,invalid:i,fields:u,errors:c}},render(){var t,o,n,l,u,c,d,i;return this.tag?a.h(this.tag,null,((l=(n=this.$slots).default)==null?void 0:l.call(n,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(u=this.formProvided)==null?void 0:u.modelValue,errors:(c=this.formProvided)==null?void 0:c.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,r={})=>{const t=Symbol(),o=Symbol(),n=Symbol(),l=te(e,t,r),u=ne(t,o),c=q(t,o,n,r);return{VvForm:l,VvFormWrapper:u,VvFormField:c,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:n}},M=Symbol(),ae=e=>{let r={};return e.schema&&(r=w(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(M,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...a.inject(M,{}),...r};return w(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=x,b.formFactory=w,b.pluginInjectionKey=M,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.3",
+  "version": "0.0.4",
   "engines": {
     "node": ">= 16.x"
   },

package/src/VvForm.ts

@@ -36,6 +36,10 @@ export const defineForm = (
 				type: Object,
 				default: () => ({}),
 			},
+			continuosValidation: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
 		expose: ['submit', 'errors', 'status'],
@@ -43,6 +47,10 @@ export const defineForm = (
 			const localModelValue = ref(
 				defaultObjectBySchema(schema, props.modelValue),
 			)
+
+			const keepValidation =
+				options?.continuosValidation || props.continuosValidation
+
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -62,7 +70,7 @@ export const defineForm = (
 			watchThrottled(
 				localModelValue,
 				(newValue) => {
-					if (errors.value || options?.continuosValidation) {
+					if (errors.value || keepValidation) {
 						parseModelValue()
 					}
 					if (