@teamnovu/kit-vue-forms 0.2.10 → 0.2.12

package/dist/composables/useField.d.ts

@@ -10,5 +10,6 @@ export interface UseFieldOptions<T, K extends string> {
     existsInForm?: MaybeRef<boolean>;
     onBlur?: () => Awaitable<void>;
     onFocus?: () => Awaitable<void>;
+    onChange?: (value: T) => Awaitable<void>;
 }
 export declare function useField<T, K extends string>(fieldOptions: UseFieldOptions<T, K>): FormField<T, K>;

package/dist/composables/useFieldRegistry.d.ts

@@ -8,6 +8,7 @@ export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>
 export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path'> & {
     onBlur?: () => void;
     onFocus?: () => void;
+    onChange?: <T>(value: T) => void;
 };
 interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
     data: T;
@@ -17,6 +18,7 @@ interface FieldRegistryOptions {
     keepValuesOnUnmount?: MaybeRef<boolean>;
     onBlur?: (path: string) => Awaitable<void>;
     onFocus?: (path: string) => Awaitable<void>;
+    onChange?: <T>(path: string, value: T) => Awaitable<void>;
 }
 export declare function useFieldRegistry<T extends FormDataDefault, TOut = T>(formState: FormState<T>, validationState: ValidationState<T, TOut>, fieldRegistryOptions?: FieldRegistryOptions): {
     fields: ComputedRef<FieldsTuple<T>>;

package/dist/index.js

@@ -1,19 +1,19 @@
-var X = Object.defineProperty;
-var Y = (r, t, e) => t in r ? X(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var R = (r, t, e) => Y(r, typeof t != "symbol" ? t + "" : t, e);
-import { toValue as ee, toRaw as te, unref as h, shallowRef as $, watch as D, computed as m, isRef as _, reactive as A, toRefs as K, shallowReactive as re, toRef as j, onScopeDispose as ae, triggerRef as se, ref as L, getCurrentScope as ne, onBeforeUnmount as oe, defineComponent as T, renderSlot as k, normalizeProps as x, guardReactiveProps as C, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as ie, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
-import { cloneDeep as de } from "lodash-es";
+var Y = Object.defineProperty;
+var ee = (r, t, e) => t in r ? Y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var S = (r, t, e) => ee(r, typeof t != "symbol" ? t + "" : t, e);
+import { toValue as te, toRaw as re, unref as h, shallowRef as $, watch as P, computed as p, isRef as T, reactive as A, toRefs as J, shallowReactive as ae, toRef as j, onScopeDispose as se, triggerRef as ne, ref as G, getCurrentScope as oe, onBeforeUnmount as ie, defineComponent as x, renderSlot as C, normalizeProps as N, guardReactiveProps as W, createBlock as K, openBlock as L, withCtx as U, resolveDynamicComponent as le, mergeProps as ce, createSlots as ue, renderList as de } from "vue";
+import { cloneDeep as fe } from "lodash-es";
 import "zod";
-function g(r) {
-  const t = ee(r), e = te(t);
-  return de(e);
+function E(r) {
+  const t = te(r), e = re(t);
+  return fe(e);
 }
-function fe(r) {
+function he(r) {
   return r.filter(
     (t, e, a) => a.indexOf(t) === e
   );
 }
-function J(...r) {
+function Z(...r) {
   return r.slice(1).reduce((t, e) => {
     if (!t && !e)
       return;
@@ -23,15 +23,15 @@ function J(...r) {
     if (!a)
       return t;
     const s = (t ?? []).concat(e);
-    return fe(s);
-  }, r[0]);
+    return he(s);
+  }, r[0]) ?? [];
 }
-function he(...r) {
+function ve(...r) {
   return r.map((e) => Object.keys(e)).flat().reduce((e, a) => {
-    const s = r.map((n) => n[a]).filter(Boolean);
+    const s = r.map((n) => n[a]).filter((n) => !!n);
     return {
       ...e,
-      [a]: J(...s)
+      [a]: Z(e[a], ...s)
     };
   }, {});
 }
@@ -44,38 +44,38 @@ function B(...r) {
   const t = r[0];
   return r.length === 1 ? t : r.slice(1).reduce(
     (e, a) => ({
-      general: J(e.general, a.general),
-      propertyErrors: he(e.propertyErrors ?? {}, a.propertyErrors ?? {})
+      general: Z(e.general, a.general),
+      propertyErrors: ve(e.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     t
   );
 }
-function G(r) {
+function q(r) {
   var a;
   const t = (((a = r.general) == null ? void 0 : a.length) ?? 0) > 0, e = Object.entries(r.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
   return t || e;
 }
-function N(r) {
-  return !G(r.errors);
+function z(r) {
+  return !q(r.errors);
 }
-function Z(r, t) {
+function O(r, t) {
   return (e) => async (a) => {
     if (a == null || a.preventDefault(), h(t.validationStrategy) === "none") {
       await e(r.data.value);
       return;
     }
     const n = await r.validateForm();
-    if (!N(n))
+    if (!z(n))
       return;
     const u = n.data ?? r.data.value;
     await e(u);
   };
 }
-class pe {
+class me {
   constructor(t = (e) => e) {
-    R(this, "weakMap", /* @__PURE__ */ new WeakMap());
-    R(this, "map", /* @__PURE__ */ new Map());
-    R(this, "hashFn");
+    S(this, "weakMap", /* @__PURE__ */ new WeakMap());
+    S(this, "map", /* @__PURE__ */ new Map());
+    S(this, "hashFn");
     this.hashFn = t;
   }
   isReferenceType(t) {
@@ -94,13 +94,13 @@ class pe {
     this.isReferenceType(a) ? this.weakMap.set(a, e) : this.map.set(a, e);
   }
 }
-function ve(r, t, e) {
+function pe(r, t, e) {
   const a = /* @__PURE__ */ new Set();
   return t.map((s, n) => {
-    const u = [...r.get(s) ?? []], v = u.findIndex((p) => !a.has(p)), c = (v === -1 ? [] : u.slice(v))[0];
-    if (c)
-      return a.add(c), {
-        id: c,
+    const u = [...r.get(s) ?? []], m = u.findIndex((v) => !a.has(v)), l = (m === -1 ? [] : u.slice(m))[0];
+    if (l)
+      return a.add(l), {
+        id: l,
         item: s,
         path: `${e}.${n}`
       };
@@ -112,12 +112,12 @@ function ve(r, t, e) {
     };
   });
 }
-function q(r, t, e) {
-  const a = new pe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = $([]);
-  return D(
+function Q(r, t, e) {
+  const a = new me(e == null ? void 0 : e.hashFn), s = r.getField(t), n = $([]);
+  return P(
     s.data,
-    (c) => {
-      n.value = ve(a, c, t);
+    (l) => {
+      n.value = pe(a, l, t);
     },
     {
       immediate: !0,
@@ -125,56 +125,56 @@ function q(r, t, e) {
     }
   ), {
     items: n,
-    push: (c) => {
+    push: (l) => {
       const o = s.data.value ?? [];
-      return s.setData([...o, c]), n.value.at(-1);
+      return s.setData([...o, l]), n.value.at(-1);
     },
-    remove: (c) => {
-      const o = s.data.value ?? [], p = n.value.findIndex(
-        ({ id: i }) => i === c
+    remove: (l) => {
+      const o = s.data.value ?? [], v = n.value.findIndex(
+        ({ id: i }) => i === l
       );
-      p !== -1 && s.setData(
-        o.slice(0, p).concat(o.slice(p + 1))
+      v !== -1 && s.setData(
+        o.slice(0, v).concat(o.slice(v + 1))
       );
     },
-    insert: (c, o) => {
-      const p = s.data.value ?? [];
+    insert: (l, o) => {
+      const v = s.data.value ?? [];
       return s.setData(
-        p.slice(0, o).concat([c]).concat(p.slice(o))
+        v.slice(0, o).concat([l]).concat(v.slice(o))
       ), n.value[o];
     },
     field: s
   };
 }
-function W(r) {
+function H(r) {
   return r === "" ? [] : r.split(/\s*\.\s*/).filter(Boolean);
 }
-function me(r, t) {
-  const e = Array.isArray(t) ? t : W(t);
+function Fe(r, t) {
+  const e = Array.isArray(t) ? t : H(t);
   return !!b(r, e.slice(0, -1));
 }
 function b(r, t) {
-  return (Array.isArray(t) ? t : W(t)).reduce(
+  return (Array.isArray(t) ? t : H(t)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     r
   );
 }
 function ye(r, t, e) {
-  const a = Array.isArray(t) ? t : W(t), s = a.at(-1);
+  const a = Array.isArray(t) ? t : H(t), s = a.at(-1);
   if (s) {
     const n = a.slice(0, -1).reduce(
-      (u, v) => ((u == null ? void 0 : u[v]) === void 0 && (u[v] = {}), u == null ? void 0 : u[v]),
+      (u, m) => ((u == null ? void 0 : u[m]) === void 0 && (u[m] = {}), u == null ? void 0 : u[m]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       h(r)
     );
     n[s] = e;
   } else {
-    if (!_(r))
+    if (!T(r))
       return;
     r.value = e;
   }
 }
-const Q = (r, t) => m({
+const X = (r, t) => p({
   get() {
     return b(h(r), h(t));
   },
@@ -185,7 +185,7 @@ const Q = (r, t) => m({
 function I(r, t) {
   return !r && !t ? "" : !r && t ? t : !t && r ? r : `${r}.${t}`;
 }
-function Fe(r, t) {
+function ge(r, t) {
   if (!t)
     return r;
   const e = `${t}.`, a = Object.fromEntries(
@@ -202,7 +202,7 @@ function Fe(r, t) {
 }
 class Ve {
   constructor(t) {
-    R(this, "rc", 1);
+    S(this, "rc", 1);
     this.drop = t;
   }
   inc() {
@@ -212,143 +212,153 @@ class Ve {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function ge(r) {
+function we(r) {
   const e = {
     ...{
       existsInForm: !0
     },
     ...r
-  }, a = $(Object.freeze(g(e.initialValue))), s = A({
+  }, a = $(Object.freeze(E(e.initialValue))), s = A({
     value: e.value,
     path: e.path,
     initialValue: a,
     errors: e.errors,
     touched: !1
   });
-  D(
+  P(
     $(e.initialValue),
     () => {
-      a.value = Object.freeze(g(e.initialValue)), s.value !== h(e.initialValue) && (s.value = g(e.initialValue));
+      a.value = Object.freeze(E(e.initialValue)), s.value !== h(e.initialValue) && (s.value = E(e.initialValue));
     },
     { flush: "sync" }
-  );
-  const n = m(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (f) => {
-    s.value = f;
-  }, v = () => {
-    var f;
-    s.touched = !0, s.errors = [], (f = e.onBlur) == null || f.call(e);
-  }, F = () => {
-    var f;
-    (f = e.onFocus) == null || f.call(e);
-  }, c = () => {
-    const f = s.path.split(".").at(-1) || "";
-    h(e.existsInForm) && !/^\d+$/.test(f) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
-  }, o = (f) => {
-    n.value || u(g(f)), s.initialValue = f;
-  }, p = (f) => {
-    s.errors = f;
+  ), P(() => s.value, (d) => {
+    var D;
+    (D = r.onChange) == null || D.call(r, d);
+  }, { deep: !0 });
+  const n = p(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (d) => {
+    s.value = d;
+  }, m = () => {
+    var d;
+    s.touched = !0, s.errors = [], (d = e.onBlur) == null || d.call(e);
+  }, y = () => {
+    var d;
+    (d = e.onFocus) == null || d.call(e);
+  }, l = () => {
+    const d = s.path.split(".").at(-1) || "";
+    h(e.existsInForm) && !/^\d+$/.test(d) && (s.value = E(s.initialValue)), s.touched = !1, s.errors = [];
+  }, o = (d) => {
+    n.value || u(E(d)), s.initialValue = d;
+  }, v = (d) => {
+    s.errors = d;
   }, i = () => {
     s.errors = [];
-  }, l = K(s);
+  }, c = J(s);
   return {
-    data: l.value,
-    path: l.path,
-    initialValue: l.initialValue,
-    errors: l.errors,
-    touched: l.touched,
+    data: c.value,
+    path: c.path,
+    initialValue: c.initialValue,
+    errors: c.errors,
+    touched: c.touched,
     dirty: n,
     setData: u,
     setInitialData: o,
-    onBlur: v,
-    onFocus: F,
-    reset: c,
-    setErrors: p,
+    onBlur: m,
+    onFocus: y,
+    reset: l,
+    setErrors: v,
     clearErrors: i
   };
 }
-const we = {
+const Ee = {
   keepValuesOnUnmount: !0
 };
-function Ee(r, t) {
+function De(r, t) {
   const e = () => b(r.initialData, t), a = $(e());
-  return D(
+  return P(
     () => r.initialData,
     () => {
-      a.value = e(), se(a);
+      a.value = e(), ne(a);
     },
     { flush: "sync" }
   ), a;
 }
 function Re(r, t, e) {
-  const a = /* @__PURE__ */ new Map(), s = re(/* @__PURE__ */ new Map()), n = {
-    ...we,
+  const a = /* @__PURE__ */ new Map(), s = ae(/* @__PURE__ */ new Map()), n = {
+    ...Ee,
     ...e
   }, u = (i) => {
-    const l = h(i.path);
-    s.set(l, i);
-  }, v = (i) => {
-    var l;
-    n != null && n.keepValuesOnUnmount || (l = s.get(i)) == null || l.reset(), s.delete(i);
-  }, F = (i) => {
-    var l;
-    a.has(i) ? (l = a.get(i)) == null || l.inc() : a.set(i, new Ve(() => v(i)));
-  }, c = (i) => {
-    var l;
-    a.has(i) && ((l = a.get(i)) == null || l.dec());
+    const c = h(i.path);
+    s.set(c, i);
+  }, m = (i) => {
+    var c;
+    n != null && n.keepValuesOnUnmount || (c = s.get(i)) == null || c.reset(), s.delete(i);
+  }, y = (i) => {
+    var c;
+    a.has(i) ? (c = a.get(i)) == null || c.inc() : a.set(i, new Ve(() => m(i)));
+  }, l = (i) => {
+    var c;
+    a.has(i) && ((c = a.get(i)) == null || c.dec());
   }, o = (i) => {
-    const { path: l } = i;
-    if (!s.has(l)) {
-      const S = ge({
-        path: l,
-        value: Q(j(r, "data"), l),
-        initialValue: Ee(r, l),
-        existsInForm: m(() => me(r.data, h(l))),
-        errors: m({
+    const { path: c } = i;
+    if (!s.has(c)) {
+      const D = we({
+        path: c,
+        value: X(j(r, "data"), c),
+        initialValue: De(r, c),
+        existsInForm: p(() => Fe(r.data, h(c))),
+        errors: p({
           get() {
-            return t.errors.value.propertyErrors[l] || [];
+            return t.errors.value.propertyErrors[c] || [];
           },
-          set(w) {
-            t.errors.value.propertyErrors[l] = w;
+          set(V) {
+            t.errors.value.propertyErrors[c] = V;
           }
         }),
         onBlur: async () => {
-          var w, P;
+          var V, w;
           await Promise.all([
-            (w = n == null ? void 0 : n.onBlur) == null ? void 0 : w.call(n, h(l)),
-            (P = i.onBlur) == null ? void 0 : P.call(i)
+            (V = n == null ? void 0 : n.onBlur) == null ? void 0 : V.call(n, h(c)),
+            (w = i.onBlur) == null ? void 0 : w.call(i)
           ]);
         },
         onFocus: async () => {
-          var w, P;
+          var V, w;
           await Promise.all([
-            (w = n == null ? void 0 : n.onFocus) == null ? void 0 : w.call(n, h(l)),
-            (P = i.onFocus) == null ? void 0 : P.call(i)
+            (V = n == null ? void 0 : n.onFocus) == null ? void 0 : V.call(n, h(c)),
+            (w = i.onFocus) == null ? void 0 : w.call(i)
+          ]);
+        },
+        onChange: async (V) => {
+          var w, M;
+          await Promise.all([
+            (w = n == null ? void 0 : n.onChange) == null ? void 0 : w.call(n, h(c), V),
+            (M = i.onChange) == null ? void 0 : M.call(i, V)
           ]);
         }
       });
-      u(S);
+      u(D);
     }
-    const f = s.get(l);
-    return F(l), ae(() => {
-      c(l);
-    }), f;
-  }, p = (i) => o(i);
+    const d = s.get(c);
+    return y(c), se(() => {
+      l(c);
+    }), d;
+  }, v = (i) => o(i);
   return {
-    fields: m(() => [...s.values()]),
+    fields: p(() => [...s.values()]),
     getField: (i) => o({ path: i }),
     registerField: u,
-    deregisterField: v,
-    defineField: p
+    deregisterField: m,
+    defineField: v
   };
 }
-function De(r) {
-  const t = m(() => r.fields.value.some((a) => h(a.dirty))), e = m(() => r.fields.value.some((a) => h(a.touched)));
+function Pe(r) {
+  const t = p(() => r.fields.value.some((a) => h(a.dirty))), e = p(() => r.fields.value.some((a) => h(a.touched)));
   return {
     isDirty: t,
     isTouched: e
   };
 }
-function Pe(r) {
+function Se(r) {
   const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
     const n = s.path.join(".");
     return {
@@ -361,23 +371,23 @@ function Pe(r) {
     propertyErrors: e
   };
 }
-const V = {
+const g = {
   errors: {
     general: [],
     propertyErrors: {}
   }
 };
-class Se {
+class be {
   constructor(t) {
     this.schema = t;
   }
   async validate(t) {
     if (!this.schema)
-      return V;
+      return g;
     const e = await this.schema.safeParseAsync(t);
     if (e.success)
-      return V;
-    const a = Pe(e.error);
+      return g;
+    const a = Se(e.error);
     return {
       data: e.data,
       errors: {
@@ -387,16 +397,16 @@ class Se {
     };
   }
 }
-class be {
+class Ie {
   constructor(t) {
     this.validateFn = t;
   }
   async validate(t) {
     if (!this.validateFn)
-      return V;
+      return g;
     try {
       const e = await this.validateFn(t);
-      return N(e) ? V : e;
+      return z(e) ? g : e;
     } catch (e) {
       return {
         errors: {
@@ -407,11 +417,11 @@ class be {
     }
   }
 }
-class Ie {
+class $e {
   constructor(t, e) {
-    R(this, "schemaValidator");
-    R(this, "functionValidator");
-    this.schema = t, this.validateFn = e, this.schemaValidator = new Se(this.schema), this.functionValidator = new be(this.validateFn);
+    S(this, "schemaValidator");
+    S(this, "functionValidator");
+    this.schema = t, this.validateFn = e, this.schemaValidator = new be(this.schema), this.functionValidator = new Ie(this.validateFn);
   }
   async validate(t) {
     const [e, a] = await Promise.all([
@@ -424,62 +434,62 @@ class Ie {
     };
   }
 }
-function O(r) {
-  return m(() => new Ie(
+function _(r) {
+  return p(() => new $e(
     h(r.schema),
     h(r.validateFn)
   ));
 }
-function $e(r, t) {
+function Ce(r, t) {
   const e = A({
-    validators: L([O(t)]),
+    validators: G([_(t)]),
     isValidated: !1,
-    errors: h(t.errors) ?? V.errors
-  }), a = (o = V.errors) => {
-    e.errors = B(h(t.errors) ?? V.errors, o);
+    errors: h(t.errors) ?? g.errors
+  }), a = (o = g.errors) => {
+    e.errors = B(h(t.errors) ?? g.errors, o);
   };
-  D(() => h(t.errors), async () => {
+  P(() => h(t.errors), async () => {
     if (e.isValidated) {
       const o = await n();
       a(o.errors);
     } else
       a();
-  }, { immediate: !0 }), D(
+  }, { immediate: !0 }), P(
     [() => e.validators],
     async (o) => {
       if (e.isValidated)
         if (o) {
-          const p = await n();
-          e.errors = p.errors;
+          const v = await n();
+          e.errors = v.errors;
         } else
-          e.errors = V.errors;
+          e.errors = g.errors;
     },
     { immediate: !0 }
-  ), D([() => r.data, () => h(t.schema)], () => {
+  ), P([() => r.data, () => h(t.schema)], () => {
     e.isValidated && u();
   });
   const s = (o) => {
-    const p = _(o) ? o : O(o);
-    return e.validators.push(p), ne() && oe(() => {
+    const v = T(o) ? o : _(o);
+    return e.validators.push(v), oe() && ie(() => {
       e.validators = e.validators.filter(
-        (i) => i !== p
+        (i) => i !== v
       );
-    }), p;
+    }), v;
   };
   async function n() {
-    var l;
+    var c;
     const o = await Promise.all(
-      e.validators.filter((f) => h(f) !== void 0).map((f) => h(f).validate(r.data))
-    ), p = o.every((f) => N(f));
-    let { errors: i } = V;
-    if (!p) {
-      const f = o.map((S) => S.errors);
-      i = B(...f);
+      e.validators.filter((d) => h(d) !== void 0).map((d) => h(d).validate(r.data))
+    ), v = o.every((d) => z(d));
+    let { errors: i } = g;
+    if (!v) {
+      const d = o.map((D) => D.errors);
+      i = B(...d);
     }
     return {
       errors: i,
       // TODO: Implement data disambiguation strategy
-      data: (l = o.findLast((f) => !!f.data)) == null ? void 0 : l.data
+      data: (c = o.findLast((d) => !!d.data)) == null ? void 0 : c.data
     };
   }
   const u = async () => {
@@ -487,37 +497,40 @@ function $e(r, t) {
     return a(o.errors), e.isValidated = !0, {
       errors: e.errors
     };
-  }, v = async (o) => {
-    const p = await n();
+  }, m = async (o) => {
+    if (!e.isValidated)
+      return g;
+    const v = await n();
     return a({
-      general: p.errors.general,
+      general: v.errors.general,
       propertyErrors: {
-        [o]: p.errors.propertyErrors[o]
+        ...e.errors.propertyErrors,
+        [o]: v.errors.propertyErrors[o] ?? []
       }
     }), {
-      data: p.data,
+      data: v.data,
       errors: e.errors
     };
-  }, F = m(() => !G(e.errors)), c = () => {
-    e.isValidated = !1, e.errors = h(t.errors) ?? V.errors;
+  }, y = p(() => !q(e.errors)), l = () => {
+    e.isValidated = !1, e.errors = h(t.errors) ?? g.errors;
   };
   return {
-    ...K(e),
+    ...J(e),
     validateForm: u,
-    validateField: v,
+    validateField: m,
     defineValidator: s,
-    isValid: F,
-    reset: c
+    isValid: y,
+    reset: l
   };
 }
-class ke {
+class Ae {
   constructor(t, e) {
     this.path = t, this.validator = e;
   }
   async validate(t) {
     const e = b(t, this.path);
     if (!this.validator)
-      return V;
+      return g;
     const a = await this.validator.validate(e);
     return {
       errors: {
@@ -531,97 +544,100 @@ class ke {
     };
   }
 }
-function Ae(r, t, e, a) {
-  const s = Q(r.data, t), n = m(() => b(r.initialData.value, t)), u = (d) => ({
-    ...d,
-    path: m(() => h(d.path).replace(t + ".", "")),
-    setData: (y) => {
-      d.setData(y);
+function Me(r, t, e, a) {
+  const s = X(r.data, t), n = p(() => b(r.initialData.value, t)), u = (f) => ({
+    ...f,
+    path: p(() => h(f.path).replace(t + ".", "")),
+    setData: (F) => {
+      f.setData(F);
     }
-  }), v = (d) => {
-    const y = I(t, d), E = r.getField(y);
-    return E ? u(E) : {};
-  }, F = (d) => {
-    const y = I(t, d.path), E = r.defineField({
-      ...d,
-      path: y
+  }), m = (f) => {
+    const F = I(t, f), R = r.getField(F);
+    return R ? u(R) : {};
+  }, y = (f) => {
+    const F = I(t, f.path), R = r.defineField({
+      ...f,
+      path: F
     });
-    return u(E);
-  }, c = m(() => r.fields.value.filter((d) => {
-    const y = d.path.value;
-    return y.startsWith(t + ".") || y === t;
-  }).map((d) => u(d))), o = () => r.fields.value.filter((d) => {
-    const y = d.path.value;
-    return y.startsWith(t + ".") || y === t;
-  }), p = m(() => o().some((d) => d.dirty.value)), i = m(() => o().some((d) => d.touched.value)), l = m(() => r.isValid.value), f = m(() => r.isValidated.value), S = m(() => Fe(h(r.errors), t)), M = {
+    return u(R);
+  }, l = p(() => r.fields.value.filter((f) => {
+    const F = f.path.value;
+    return F.startsWith(t + ".") || F === t;
+  }).map((f) => u(f))), o = () => r.fields.value.filter((f) => {
+    const F = f.path.value;
+    return F.startsWith(t + ".") || F === t;
+  }), v = p(() => o().some((f) => f.dirty.value)), i = p(() => o().some((f) => f.touched.value)), c = p(() => r.isValid.value), d = p(() => r.isValidated.value), D = p(() => ge(h(r.errors), t)), k = {
     data: s,
-    fields: c,
+    fields: l,
     initialData: n,
-    defineField: F,
-    getField: v,
-    isDirty: p,
+    defineField: y,
+    getField: m,
+    isDirty: v,
     isTouched: i,
-    isValid: l,
-    isValidated: f,
-    errors: S,
-    defineValidator: (d) => {
-      const y = _(d) ? d : O(d), E = m(
-        () => new ke(t, h(y))
+    isValid: c,
+    isValidated: d,
+    errors: D,
+    defineValidator: (f) => {
+      const F = T(f) ? f : _(f), R = p(
+        () => new Ae(t, h(F))
       );
-      return r.defineValidator(E), y;
+      return r.defineValidator(R), F;
     },
-    reset: () => o().forEach((d) => d.reset()),
+    reset: () => o().forEach((f) => f.reset()),
     validateForm: () => r.validateForm(),
-    getSubForm: (d, y) => {
-      const E = I(t, d);
+    getSubForm: (f, F) => {
+      const R = I(t, f);
       return r.getSubForm(
-        E,
-        y
+        R,
+        F
       );
     },
-    submitHandler: (d) => Z(M, e ?? {})(d),
-    getFieldArray: (d, y) => q(M, d, y)
+    submitHandler: (f) => O(k, e ?? {})(f),
+    getFieldArray: (f, F) => Q(k, f, F)
   };
-  return M;
+  return k;
 }
 function xe(r) {
-  const t = m(() => g(r.initialData)), e = L(g(t)), a = A({
+  const t = p(() => E(r.initialData)), e = G(E(t)), a = A({
     initialData: t,
     data: e
   });
-  D(
+  P(
     t,
-    (c) => {
-      a.data = g(c);
+    (l) => {
+      a.data = E(l);
     },
     { flush: "sync" }
   );
-  const s = $e(a, r), n = Re(a, s, {
+  const s = Ce(a, r), n = Re(a, s, {
     keepValuesOnUnmount: r.keepValuesOnUnmount,
-    onBlur: async (c) => {
-      h(r.validationStrategy) === "onTouch" && s.validateField(c);
+    onBlur: async (l) => {
+      h(r.validationStrategy) === "onTouch" && s.validateField(l);
+    },
+    onChange: async (l) => {
+      h(r.validationStrategy) === "onDataChange" && s.validateField(l);
     }
-  }), u = De(n), v = () => {
-    e.value = g(t), s.reset();
-    for (const c of n.fields.value)
-      c.reset();
+  }), u = Pe(n), m = () => {
+    e.value = E(t), s.reset();
+    for (const l of n.fields.value)
+      l.reset();
   };
   h(r.validationStrategy) === "onFormOpen" && s.validateForm();
-  const F = {
+  const y = {
     ...n,
     ...s,
     ...u,
-    reset: v,
+    reset: m,
     initialData: j(a, "initialData"),
     data: j(a, "data"),
     validateForm: s.validateForm,
-    submitHandler: (c) => Z(F, r)(c),
-    getSubForm: (c, o) => Ae(F, c, r),
-    getFieldArray: (c, o) => q(F, c, o)
+    submitHandler: (l) => O(y, r)(l),
+    getSubForm: (l, o) => Me(y, l, r),
+    getFieldArray: (l, o) => Q(y, l, o)
   };
-  return F;
+  return y;
 }
-const Me = /* @__PURE__ */ T({
+const ke = /* @__PURE__ */ x({
   __name: "Field",
   props: {
     form: {},
@@ -631,15 +647,16 @@ const Me = /* @__PURE__ */ T({
     errors: {},
     existsInForm: {},
     onBlur: { type: Function },
-    onFocus: { type: Function }
+    onFocus: { type: Function },
+    onChange: { type: Function }
   },
   setup(r) {
     const t = r, e = t.form.defineField({
       path: t.path
     }), a = A(e);
-    return (s, n) => k(s.$slots, "default", x(C(a)));
+    return (s, n) => C(s.$slots, "default", N(W(a)));
   }
-}), Ce = /* @__PURE__ */ T({
+}), Ne = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -649,28 +666,28 @@ const Me = /* @__PURE__ */ T({
     path: {}
   },
   setup(r) {
-    return (t, e) => (H(), z(Me, {
+    return (t, e) => (L(), K(ke, {
       form: r.form,
       path: r.path
     }, {
-      default: U(({ errors: a, data: s, setData: n, onBlur: u, onFocus: v }) => [
-        (H(), z(ie(r.component), le({ ...r.componentProps, ...t.$attrs }, {
+      default: U(({ errors: a, data: s, setData: n, onBlur: u, onFocus: m }) => [
+        (L(), K(le(r.component), ce({ ...r.componentProps, ...t.$attrs }, {
           "on-blur": u,
-          "on-focus": v,
+          "on-focus": m,
           "model-value": s,
           errors: a,
           name: r.path,
           "onUpdate:modelValue": n
-        }), ce({
+        }), ue({
           default: U(() => [
-            k(t.$slots, "default")
+            C(t.$slots, "default")
           ]),
           _: 2
         }, [
-          ue(t.$slots, (F, c) => ({
-            name: c,
+          de(t.$slots, (y, l) => ({
+            name: l,
             fn: U((o) => [
-              k(t.$slots, c, x(C(o ?? {})))
+              C(t.$slots, l, N(W(o ?? {})))
             ])
           }))
         ]), 1040, ["on-blur", "on-focus", "model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -678,20 +695,20 @@ const Me = /* @__PURE__ */ T({
       _: 3
     }, 8, ["form", "path"]));
   }
-}), Ne = /* @__PURE__ */ T({
+}), We = /* @__PURE__ */ x({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(r) {
-    const t = r, e = m(() => t.form.getSubForm(t.path));
-    return (a, s) => k(a.$slots, "default", x(C({ subform: e.value })));
+    const t = r, e = p(() => t.form.getSubForm(t.path));
+    return (a, s) => C(a.$slots, "default", N(W({ subform: e.value })));
   }
 });
 export {
-  Me as Field,
-  Ce as FormFieldWrapper,
-  Ne as FormPart,
+  ke as Field,
+  Ne as FormFieldWrapper,
+  We as FormPart,
   xe as useForm
 };

package/dist/types/validation.d.ts

@@ -1,5 +1,5 @@
 import { FormDataDefault } from './form';
-export type ValidationStrategy = 'onTouch' | 'onFormOpen' | 'none' | 'preSubmit';
+export type ValidationStrategy = 'onTouch' | 'onFormOpen' | 'none' | 'preSubmit' | 'onDataChange';
 export type ValidationErrorMessage = string;
 export type ValidationErrors = ValidationErrorMessage[] | undefined;
 export interface ErrorBag {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/composables/useField.ts

@@ -12,6 +12,7 @@ export interface UseFieldOptions<T, K extends string> {
   existsInForm?: MaybeRef<boolean>
   onBlur?: () => Awaitable<void>
   onFocus?: () => Awaitable<void>
+  onChange?: (value: T) => Awaitable<void>
 }
 
 export function useField<T, K extends string>(fieldOptions: UseFieldOptions<T, K>): FormField<T, K> {
@@ -44,6 +45,10 @@ export function useField<T, K extends string>(fieldOptions: UseFieldOptions<T, K
     { flush: 'sync' },
   )
 
+  watch(() => state.value, (newData) => {
+    fieldOptions.onChange?.(newData as T)
+  }, { deep: true })
+
   const dirty = computed(() => {
     return JSON.stringify(state.value) !== JSON.stringify(state.initialValue)
   })

package/src/composables/useFieldRegistry.ts

@@ -31,6 +31,7 @@ export type DefineFieldOptions<F, K extends string> = Pick<
 > & {
   onBlur?: () => void
   onFocus?: () => void
+  onChange?: <T>(value: T) => void
 }
 
 interface FormState<
@@ -45,6 +46,7 @@ interface FieldRegistryOptions {
   keepValuesOnUnmount?: MaybeRef<boolean>
   onBlur?: (path: string) => Awaitable<void>
   onFocus?: (path: string) => Awaitable<void>
+  onChange?: <T>(path: string, value: T) => Awaitable<void>
 }
 
 const optionDefaults = {
@@ -143,6 +145,12 @@ export function useFieldRegistry<T extends FormDataDefault, TOut = T>(
             options.onFocus?.(),
           ])
         },
+        onChange: async (value: PickProps<T, K>) => {
+          await Promise.all([
+            registryOptions?.onChange?.(unref(path), value),
+            options.onChange?.(value),
+          ])
+        },
       })
 
       registerField(field)

package/src/composables/useForm.ts

@@ -30,10 +30,11 @@ export interface UseFormOptions<T extends FormDataDefault, TOut = T>
 /* eslint-disable no-redeclare */
 // Overload: with schema - infer types from schema
 // initialData can be partial, but provided fields must match schema types
-export function useForm<
-  T extends FormDataDefault,
-  TOut = T,
->(options: UseFormOptions<T, TOut> & { schema: MaybeRef<z.ZodType<TOut, unknown>> }): Form<T, TOut>
+export function useForm<T extends FormDataDefault, TOut = T>(
+  options: UseFormOptions<T, TOut> & {
+    schema: MaybeRef<z.ZodType<TOut, unknown>>
+  },
+): Form<T, TOut>
 
 // Overload: without schema - infer types from initialData
 export function useForm<T extends FormDataDefault>(
@@ -70,6 +71,11 @@ export function useForm<T extends FormDataDefault, TOut = T>(
         validationState.validateField(path)
       }
     },
+    onChange: async (path: string) => {
+      if (unref(options.validationStrategy) === 'onDataChange') {
+        validationState.validateField(path)
+      }
+    },
   })
   const formState = useFormState(fieldRegistry)
 

package/src/composables/useValidation.ts

@@ -214,12 +214,17 @@ export function useValidation<T extends FormDataDefault, TOut = T>(
   }
 
   const validateField = async (path: string): Promise<ValidationResult<TOut>> => {
+    if (!validationState.isValidated) {
+      return SuccessValidationResult
+    }
+
     const validationResults = await getValidationResults()
 
     updateErrors({
       general: validationResults.errors.general,
       propertyErrors: {
-        [path]: validationResults.errors.propertyErrors[path],
+        ...validationState.errors.propertyErrors,
+        [path]: validationResults.errors.propertyErrors[path] ?? [],
       },
     })
 

package/src/types/validation.ts

@@ -1,6 +1,6 @@
 import type { FormDataDefault } from './form'
 
-export type ValidationStrategy = 'onTouch' | 'onFormOpen' | 'none' | 'preSubmit'
+export type ValidationStrategy = 'onTouch' | 'onFormOpen' | 'none' | 'preSubmit' | 'onDataChange'
 
 export type ValidationErrorMessage = string
 export type ValidationErrors = ValidationErrorMessage[] | undefined

package/src/utils/validation.ts

@@ -20,18 +20,18 @@ function mergeErrorMessages(...msgs: ValidationErrors[]) {
     }
     const allMessages = (acc ?? []).concat(msg!)
     return deduplicate(allMessages)
-  }, msgs[0] as ValidationErrors)
+  }, msgs[0] as ValidationErrors) ?? []
 }
 
 function mergePropertyErrors(...propertyErrors: Record<string, ValidationErrors>[]): Record<string, ValidationErrors> {
   const allKeys = propertyErrors.map(errs => Object.keys(errs)).flat()
 
   return allKeys.reduce((acc, key) => {
-    const values = propertyErrors.map(errs => errs[key]).filter(Boolean) as ValidationErrors[]
+    const values = propertyErrors.map(errs => errs[key]).filter((v): v is NonNullable<typeof v> => !!v)
 
     return {
       ...acc,
-      [key]: mergeErrorMessages(...values),
+      [key]: mergeErrorMessages(acc[key], ...values),
     }
   }, {} as Record<string, ValidationErrors>)
 }

package/tests/useValidation.test.ts

@@ -280,6 +280,30 @@ describe('useValidation', () => {
     expect(validation.errors.value).toEqual(SuccessValidationResult.errors)
   })
 
+  it('should not the form on blur if configured but the form was never validated yet', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+    })
+
+    const initialData = { name: 'A' }
+    const form = useForm({
+      initialData,
+      schema,
+      validationStrategy: 'onTouch',
+    })
+
+    const nameField = form.getField('name')
+
+    // Simulate blur event
+    nameField.onBlur()
+
+    // onBlur is not async but the validation runs async
+    await delay()
+
+    expect(form.isValid.value).toBe(true)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(0)
+  })
+
   it('should validate the form on blur if configured', async () => {
     const schema = z.object({
       name: z.string().min(2),
@@ -294,6 +318,8 @@ describe('useValidation', () => {
 
     const nameField = form.getField('name')
 
+    await form.validateForm()
+
     // Simulate blur event
     nameField.onBlur()
 
@@ -324,6 +350,17 @@ describe('useValidation', () => {
     const nameField = form.getField('name')
     form.getField('email')
 
+    await form.validateForm()
+
+    nameField.data.value = 'ab'
+
+    await delay()
+
+    // Data changed, but validation not triggered yet
+    expect(form.isValid.value).toBe(false)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(1)
+    expect(form.errors.value.propertyErrors.email ?? []).toHaveLength(1)
+
     // Simulate blur event
     nameField.onBlur()
 
@@ -331,8 +368,8 @@ describe('useValidation', () => {
     await delay()
 
     expect(form.isValid.value).toBe(false)
-    expect(form.errors.value.propertyErrors.name).toHaveLength(1)
-    expect(form.errors.value.propertyErrors.email ?? []).toHaveLength(0)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(0)
+    expect(form.errors.value.propertyErrors.email ?? []).toHaveLength(1)
   })
 
   it('should validate the form on form open if configured', async () => {
@@ -379,4 +416,63 @@ describe('useValidation', () => {
     expect(form.isValidated.value).toBe(false)
     expect(form.isValid.value).toBe(true)
   })
+
+  it('should validate the form on data change if configured', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+    })
+
+    const initialData = { name: 'ABC' }
+    const form = useForm({
+      initialData,
+      schema,
+      validationStrategy: 'onDataChange',
+    })
+
+    const nameField = form.getField('name')
+
+    await form.validateForm()
+
+    expect(form.isValid.value).toBe(true)
+
+    nameField.data.value = 'a'
+
+    await delay()
+
+    expect(form.isValid.value).toBe(false)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(1)
+  })
+
+  it('should not validate other fields on data change', async () => {
+    const schema = z.object({
+      name: z.string().min(2),
+      foo: z.string().min(2),
+    })
+
+    const initialData = {
+      name: 'b',
+      foo: 'c',
+    }
+    const form = useForm({
+      initialData,
+      schema,
+      validationStrategy: 'onDataChange',
+    })
+
+    const nameField = form.getField('name')
+
+    await form.validateForm()
+
+    expect(form.isValid.value).toBe(false)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(1)
+    expect(form.errors.value.propertyErrors.foo).toHaveLength(1)
+
+    nameField.data.value = 'abc'
+
+    await delay()
+
+    expect(form.isValid.value).toBe(false)
+    expect(form.errors.value.propertyErrors.name).toHaveLength(0)
+    expect(form.errors.value.propertyErrors.foo).toHaveLength(1)
+  })
 })