@teamnovu/kit-vue-forms 0.2.9 → 0.2.11

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 b, 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 ie, defineComponent as T, renderSlot as k, normalizeProps as x, guardReactiveProps as C, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as oe, 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 k, 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);
+    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);
     return {
       ...e,
-      [a]: J(...s)
+      [a]: Z(...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,30 +94,30 @@ 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}`
       };
-    const i = crypto.randomUUID();
-    return r.set(s, u.concat([i])), a.add(i), {
-      id: i,
+    const o = crypto.randomUUID();
+    return r.set(s, u.concat([o])), a.add(o), {
+      id: o,
       item: s,
       path: `${e}.${n}`
     };
   });
 }
-function q(r, t, e) {
-  const a = new pe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = b([]);
-  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,67 +125,67 @@ function q(r, t, e) {
     }
   ), {
     items: n,
-    push: (c) => {
-      const i = s.data.value ?? [];
-      return s.setData([...i, c]), n.value.at(-1);
+    push: (l) => {
+      const o = s.data.value ?? [];
+      return s.setData([...o, l]), n.value.at(-1);
     },
-    remove: (c) => {
-      const i = s.data.value ?? [], p = n.value.findIndex(
-        ({ id: o }) => o === c
+    remove: (l) => {
+      const o = s.data.value ?? [], v = n.value.findIndex(
+        ({ id: i }) => i === l
       );
-      p !== -1 && s.setData(
-        i.slice(0, p).concat(i.slice(p + 1))
+      v !== -1 && s.setData(
+        o.slice(0, v).concat(o.slice(v + 1))
       );
     },
-    insert: (c, i) => {
-      const p = s.data.value ?? [];
+    insert: (l, o) => {
+      const v = s.data.value ?? [];
       return s.setData(
-        p.slice(0, i).concat([c]).concat(p.slice(i))
-      ), n.value[i];
+        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);
-  return !!I(r, e.slice(0, -1));
+function Fe(r, t) {
+  const e = Array.isArray(t) ? t : H(t);
+  return !!b(r, e.slice(0, -1));
 }
-function I(r, t) {
-  return (Array.isArray(t) ? t : W(t)).reduce(
+function b(r, t) {
+  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 I(h(r), h(t));
+    return b(h(r), h(t));
   },
   set(e) {
     ye(r, h(t), e);
   }
 });
-function $(r, t) {
+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 = b(Object.freeze(g(e.initialValue))), s = A({
+  }, a = $(Object.freeze(E(e.initialValue))), s = k({
     value: e.value,
     path: e.path,
     initialValue: a,
     errors: e.errors,
     touched: !1
   });
-  D(
-    b(e.initialValue),
+  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 = [];
-  }, i = (f) => {
-    n.value || u(g(f)), s.initialValue = f;
-  }, p = (f) => {
-    s.errors = f;
-  }, o = () => {
+  ), 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: i,
-    onBlur: v,
-    onFocus: F,
-    reset: c,
-    setErrors: p,
-    clearErrors: o
+    setInitialData: o,
+    onBlur: m,
+    onFocus: y,
+    reset: l,
+    setErrors: v,
+    clearErrors: i
   };
 }
-const we = {
+const Ee = {
   keepValuesOnUnmount: !0
 };
-function Ee(r, t) {
-  const e = () => I(r.initialData, t), a = b(e());
-  return D(
+function De(r, t) {
+  const e = () => b(r.initialData, t), a = $(e());
+  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 = (o) => {
-    const l = h(o.path);
-    s.set(l, o);
-  }, v = (o) => {
-    var l;
-    n != null && n.keepValuesOnUnmount || (l = s.get(o)) == null || l.reset(), s.delete(o);
-  }, F = (o) => {
-    var l;
-    a.has(o) ? (l = a.get(o)) == null || l.inc() : a.set(o, new Ve(() => v(o)));
-  }, c = (o) => {
-    var l;
-    a.has(o) && ((l = a.get(o)) == null || l.dec());
-  }, i = (o) => {
-    const { path: l } = o;
-    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({
+  }, u = (i) => {
+    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: 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 = o.onBlur) == null ? void 0 : P.call(o)
+            (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 = o.onFocus) == null ? void 0 : P.call(o)
+            (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, A;
+          await Promise.all([
+            (w = n == null ? void 0 : n.onChange) == null ? void 0 : w.call(n, h(c), V),
+            (A = i.onChange) == null ? void 0 : A.call(i, V)
           ]);
         }
       });
-      u(S);
+      u(D);
     }
-    const f = s.get(l);
-    return F(l), ae(() => {
-      c(l);
-    }), f;
-  }, p = (o) => i(o);
+    const d = s.get(c);
+    return y(c), se(() => {
+      l(c);
+    }), d;
+  }, v = (i) => o(i);
   return {
-    fields: m(() => [...s.values()]),
-    getField: (o) => i({ path: o }),
+    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: {
@@ -393,10 +403,10 @@ class Ie {
   }
   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: {
@@ -409,9 +419,9 @@ 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 Ie(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,90 +434,92 @@ class $e {
     };
   }
 }
-function O(r) {
-  return m(() => new $e(
+function _(r) {
+  return p(() => new $e(
     h(r.schema),
     h(r.validateFn)
   ));
 }
-function be(r, t) {
-  const e = A({
-    validators: L([O(t)]),
+function Ce(r, t) {
+  const e = k({
+    validators: G([_(t)]),
     isValidated: !1,
-    errors: h(t.errors) ?? V.errors
-  }), a = (i = V.errors) => {
-    e.errors = B(h(t.errors) ?? V.errors, i);
+    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 i = await n();
-      a(i.errors);
+      const o = await n();
+      a(o.errors);
     } else
       a();
-  }, { immediate: !0 }), D(
+  }, { immediate: !0 }), P(
     [() => e.validators],
-    async (i) => {
+    async (o) => {
       if (e.isValidated)
-        if (i) {
-          const p = await n();
-          e.errors = p.errors;
+        if (o) {
+          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 = (i) => {
-    const p = _(i) ? i : O(i);
-    return e.validators.push(p), ne() && ie(() => {
+  const s = (o) => {
+    const v = T(o) ? o : _(o);
+    return e.validators.push(v), oe() && ie(() => {
       e.validators = e.validators.filter(
-        (o) => o !== p
+        (i) => i !== v
       );
-    }), p;
+    }), v;
   };
   async function n() {
-    var l;
-    const i = await Promise.all(
-      e.validators.filter((f) => h(f) !== void 0).map((f) => h(f).validate(r.data))
-    ), p = i.every((f) => N(f));
-    let { errors: o } = V;
-    if (!p) {
-      const f = i.map((S) => S.errors);
-      o = B(...f);
+    var c;
+    const o = await Promise.all(
+      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: o,
+      errors: i,
       // TODO: Implement data disambiguation strategy
-      data: (l = i.findLast((f) => !!f.data)) == null ? void 0 : l.data
+      data: (c = o.findLast((d) => !!d.data)) == null ? void 0 : c.data
     };
   }
   const u = async () => {
-    const i = await n();
-    return a(i.errors), e.isValidated = !0, {
+    const o = await n();
+    return a(o.errors), e.isValidated = !0, {
       errors: e.errors
     };
-  }, v = async (i) => {
-    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: {
-        [i]: p.errors.propertyErrors[i]
+        [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 {
@@ -515,16 +527,16 @@ class ke {
     this.path = t, this.validator = e;
   }
   async validate(t) {
-    const e = I(t, this.path);
+    const e = b(t, this.path);
     if (!this.validator)
-      return V;
+      return g;
     const a = await this.validator.validate(e);
     return {
       errors: {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(
-            ([s, n]) => [$(this.path, s), n]
+            ([s, n]) => [I(this.path, s), n]
           )
         ) : {}
       }
@@ -532,96 +544,99 @@ class ke {
   }
 }
 function Ae(r, t, e, a) {
-  const s = Q(r.data, t), n = m(() => I(r.initialData.value, t)), u = (d) => ({
-    ...d,
-    path: m(() => h(d.path).replace(t + ".", "")),
-    setData: (y) => {
-      d.setData(y);
+  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 = $(t, d), E = r.getField(y);
-    return E ? u(E) : {};
-  }, F = (d) => {
-    const y = $(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))), i = () => r.fields.value.filter((d) => {
-    const y = d.path.value;
-    return y.startsWith(t + ".") || y === t;
-  }), p = m(() => i().some((d) => d.dirty.value)), o = m(() => i().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)), M = {
     data: s,
-    fields: c,
+    fields: l,
     initialData: n,
-    defineField: F,
-    getField: v,
-    isDirty: p,
-    isTouched: o,
-    isValid: l,
-    isValidated: f,
-    errors: S,
-    defineValidator: (d) => {
-      const y = _(d) ? d : O(d), E = m(
-        () => new ke(t, h(y))
+    defineField: y,
+    getField: m,
+    isDirty: v,
+    isTouched: i,
+    isValid: c,
+    isValidated: d,
+    errors: D,
+    defineValidator: (f) => {
+      const F = T(f) ? f : _(f), R = p(
+        () => new ke(t, h(F))
       );
-      return r.defineValidator(E), y;
+      return r.defineValidator(R), F;
     },
-    reset: () => i().forEach((d) => d.reset()),
+    reset: () => o().forEach((f) => f.reset()),
     validateForm: () => r.validateForm(),
-    getSubForm: (d, y) => {
-      const E = $(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(M, e ?? {})(f),
+    getFieldArray: (f, F) => Q(M, f, F)
   };
   return M;
 }
 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 = k({
     initialData: t,
     data: e
   });
-  D(
+  P(
     t,
-    (c) => {
-      a.data = g(c);
+    (l) => {
+      a.data = E(l);
     },
     { flush: "sync" }
   );
-  const s = be(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, i) => Ae(F, c, r),
-    getFieldArray: (c, i) => q(F, c, i)
+    submitHandler: (l) => O(y, r)(l),
+    getSubForm: (l, o) => Ae(y, l, r),
+    getFieldArray: (l, o) => Q(y, l, o)
   };
-  return F;
+  return y;
 }
-const Me = /* @__PURE__ */ T({
+const Me = /* @__PURE__ */ x({
   __name: "Field",
   props: {
     form: {},
@@ -631,15 +646,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)));
+    }), a = k(e);
+    return (s, n) => C(s.$slots, "default", N(W(a)));
   }
-}), Ce = /* @__PURE__ */ T({
+}), Ne = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -649,47 +665,49 @@ const Me = /* @__PURE__ */ T({
     path: {}
   },
   setup(r) {
-    return (t, e) => (H(), z(Me, {
+    return (t, e) => (L(), K(Me, {
       form: r.form,
       path: r.path
     }, {
-      default: U(({ errors: a, data: s, setData: n }) => [
-        (H(), z(oe(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": 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, (u, v) => ({
-            name: v,
-            fn: U((F) => [
-              k(t.$slots, v, x(C(F ?? {})))
+          de(t.$slots, (y, l) => ({
+            name: l,
+            fn: U((o) => [
+              C(t.$slots, l, N(W(o ?? {})))
             ])
           }))
-        ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
+        ]), 1040, ["on-blur", "on-focus", "model-value", "errors", "name", "onUpdate:modelValue"]))
       ]),
       _: 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,
+  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.9",
+  "version": "0.2.11",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/components/FormFieldWrapper.vue

@@ -1,12 +1,14 @@
 <template>
   <Field
-    v-slot="{ errors, data, setData }"
+    v-slot="{ errors, data, setData, onBlur, onFocus }"
     :form="form"
     :path="path"
   >
     <component
       :is="component"
       v-bind="{...componentProps, ...$attrs}"
+      :on-blur="onBlur"
+      :on-focus="onFocus"
       :model-value="data"
       :errors="errors"
       :name="path"

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,6 +214,10 @@ 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({

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/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,8 @@ describe('useValidation', () => {
     const nameField = form.getField('name')
     form.getField('email')
 
+    await form.validateForm()
+
     // Simulate blur event
     nameField.onBlur()
 
@@ -379,4 +407,30 @@ 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)
+  })
 })