@teamnovu/kit-vue-forms 0.1.16 → 0.1.17

package/dist/components/FormPart.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: <TData extends object, TPath extends EntityPaths<TData>>
     attrs: any;
     slots: {
         default?(_: {
-            subform: Form< PickEntity<TData, TPath>>;
+            subform: Omit<Form< PickEntity<TData, TPath>>, "submitHandler">;
         }): any;
     };
     emit: {};

package/dist/composables/useFieldRegistry.d.ts

@@ -1,11 +1,11 @@
+import { Awaitable } from '@vueuse/core';
 import { MaybeRef, ComputedRef } from 'vue';
 import { FieldsTuple, FormDataDefault, FormField } from '../types/form';
 import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
 import { ValidationState } from './useValidation';
-import { Awaitable } from '@vueuse/core';
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>, K>;
-export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path'> & {
+export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, "path"> & {
     onBlur?: () => void;
     onFocus?: () => void;
 };

package/dist/composables/useSubform.d.ts

@@ -2,4 +2,4 @@ import { Form, FormDataDefault } from '../types/form';
 import { EntityPaths, PickEntity } from '../types/util';
 export interface SubformOptions<_T extends FormDataDefault> {
 }
-export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>>(mainForm: Form<T>, path: K, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>>;
+export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>>(mainForm: Form<T>, path: K, _options?: SubformOptions<PickEntity<T, K>>): Omit<Form<PickEntity<T, K>>, 'submitHandler'>;

package/dist/index.js

@@ -1,28 +1,28 @@
 var H = Object.defineProperty;
 var Z = (t, e, r) => e in t ? H(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var S = (t, e, r) => Z(t, typeof e != "symbol" ? e + "" : e, r);
-import { toValue as q, toRaw as Q, computed as p, unref as d, isRef as U, shallowRef as B, reactive as $, watch as P, toRefs as J, shallowReactive as X, toRef as O, onScopeDispose as Y, watchEffect as ee, triggerRef as re, ref as L, getCurrentScope as te, onBeforeUnmount as ae, defineComponent as k, renderSlot as b, normalizeProps as M, guardReactiveProps as z, resolveComponent as se, createBlock as K, openBlock as T, withCtx as j, resolveDynamicComponent as ne, mergeProps as oe, createSlots as ie, renderList as le } from "vue";
-import { cloneDeep as ce } from "lodash-es";
+import { toValue as q, toRaw as Q, computed as v, unref as d, isRef as U, shallowRef as j, reactive as _, watch as P, toRefs as T, shallowReactive as X, toRef as O, onScopeDispose as Y, triggerRef as ee, ref as J, getCurrentScope as re, onBeforeUnmount as te, defineComponent as k, renderSlot as b, normalizeProps as x, guardReactiveProps as M, resolveComponent as ae, createBlock as z, openBlock as K, withCtx as A, resolveDynamicComponent as se, mergeProps as ne, createSlots as ie, renderList as oe } from "vue";
+import { cloneDeep as le } from "lodash-es";
 import "zod";
 function g(t) {
   const e = q(t), r = Q(e);
-  return ce(r);
+  return le(r);
 }
-function W(t) {
+function N(t) {
   return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
 }
-function ue(t, e) {
-  const r = Array.isArray(e) ? e : W(e);
+function ce(t, e) {
+  const r = Array.isArray(e) ? e : N(e);
   return !!D(t, r.slice(0, -1));
 }
 function D(t, e) {
-  return (Array.isArray(e) ? e : W(e)).reduce(
+  return (Array.isArray(e) ? e : N(e)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     t
   );
 }
-function de(t, e, r) {
-  const a = Array.isArray(e) ? e : W(e), s = a.at(-1);
+function ue(t, e, r) {
+  const a = Array.isArray(e) ? e : N(e), s = a.at(-1);
   if (s) {
     const n = a.slice(0, -1).reduce(
       (f, m) => ((f == null ? void 0 : f[m]) === void 0 && (f[m] = {}), f == null ? void 0 : f[m]),
@@ -36,18 +36,18 @@ function de(t, e, r) {
     t.value = r;
   }
 }
-const x = (t, e) => p({
+const L = (t, e) => v({
   get() {
     return D(d(t), d(e));
   },
   set(r) {
-    de(t, d(e), r);
+    ue(t, d(e), r);
   }
 });
-function _(t, e) {
+function $(t, e) {
   return !t && !e ? "" : !t && e ? e : !e && t ? t : `${t}.${e}`;
 }
-function fe(t, e) {
+function de(t, e) {
   if (!e)
     return t;
   const r = `${e}.`, a = Object.fromEntries(
@@ -62,7 +62,7 @@ function fe(t, e) {
     propertyErrors: a
   };
 }
-class he {
+class fe {
   constructor(e) {
     S(this, "rc", 1);
     this.drop = e;
@@ -74,13 +74,13 @@ class he {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function pe(t) {
+function he(t) {
   const r = {
     ...{
       existsInForm: !0
     },
     ...t
-  }, a = B(Object.freeze(g(r.initialValue))), s = $({
+  }, a = j(Object.freeze(g(r.initialValue))), s = _({
     value: r.value,
     path: r.path,
     initialValue: a,
@@ -88,13 +88,13 @@ function pe(t) {
     touched: !1
   });
   P(
-    B(r.initialValue),
+    j(r.initialValue),
     () => {
       a.value = Object.freeze(g(r.initialValue)), s.value = g(r.initialValue);
     },
     { flush: "sync" }
   );
-  const n = p(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), f = (h) => {
+  const n = v(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), f = (h) => {
     s.value = h;
   }, m = () => {
     var h;
@@ -109,15 +109,15 @@ function pe(t) {
     n.value || f(g(h)), s.initialValue = h;
   }, c = (h) => {
     s.errors = h;
-  }, i = () => {
+  }, o = () => {
     s.errors = [];
-  }, o = J(s);
+  }, i = T(s);
   return {
-    data: o.value,
-    path: o.path,
-    initialValue: o.initialValue,
-    errors: o.errors,
-    touched: o.touched,
+    data: i.value,
+    path: i.path,
+    initialValue: i.initialValue,
+    errors: i.errors,
+    touched: i.touched,
     dirty: n,
     setData: f,
     setInitialData: l,
@@ -125,95 +125,92 @@ function pe(t) {
     onFocus: y,
     reset: V,
     setErrors: c,
-    clearErrors: i
+    clearErrors: o
   };
 }
 const ve = {
   keepValuesOnUnmount: !0
 };
-function me(t) {
-  const e = B(t());
-  return ee(
+function pe(t, e) {
+  const r = () => D(t.initialData, e), a = j(r());
+  return P(
+    () => t.initialData,
     () => {
-      e.value = t(), re(e);
+      a.value = r(), ee(a);
     },
     { flush: "sync" }
-  ), e;
+  ), a;
 }
-function Ve(t, e, r) {
+function me(t, e, r) {
   const a = /* @__PURE__ */ new Map(), s = X(/* @__PURE__ */ new Map()), n = {
     ...ve,
     ...r
-  }, f = (i) => {
-    const o = d(i.path);
-    s.set(o, i);
-  }, m = (i) => {
-    var o;
-    n != null && n.keepValuesOnUnmount || (o = s.get(i)) == null || o.reset(), s.delete(i);
-  }, y = (i) => {
-    var o;
-    a.has(i) ? (o = a.get(i)) == null || o.inc() : a.set(i, new he(() => m(i)));
-  }, V = (i) => {
-    var o;
-    a.has(i) && ((o = a.get(i)) == null || o.dec());
-  }, l = (i) => {
-    const { path: o } = i;
-    if (!s.has(o)) {
-      const N = pe({
-        path: o,
-        value: x(O(t, "data"), o),
-        initialValue: me(() => D(t.initialData, o)),
-        existsInForm: p(() => ue(t.data, d(o))),
-        errors: p({
+  }, f = (o) => {
+    const i = d(o.path);
+    s.set(i, o);
+  }, m = (o) => {
+    var i;
+    n != null && n.keepValuesOnUnmount || (i = s.get(o)) == null || i.reset(), s.delete(o);
+  }, y = (o) => {
+    var i;
+    a.has(o) ? (i = a.get(o)) == null || i.inc() : a.set(o, new fe(() => m(o)));
+  }, V = (o) => {
+    var i;
+    a.has(o) && ((i = a.get(o)) == null || i.dec());
+  }, l = (o) => {
+    const { path: i } = o;
+    if (!s.has(i)) {
+      const W = he({
+        path: i,
+        value: L(O(t, "data"), i),
+        initialValue: pe(t, i),
+        existsInForm: v(() => ce(t.data, d(i))),
+        errors: v({
           get() {
-            return e.errors.value.propertyErrors[o] || [];
+            return e.errors.value.propertyErrors[i] || [];
           },
           set(E) {
-            e.errors.value.propertyErrors[o] = E;
+            e.errors.value.propertyErrors[i] = E;
           }
         }),
         onBlur: async () => {
           var E, R;
-          await Promise.all(
-            [
-              (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, d(o)),
-              (R = i.onBlur) == null ? void 0 : R.call(i)
-            ]
-          );
+          await Promise.all([
+            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, d(i)),
+            (R = o.onBlur) == null ? void 0 : R.call(o)
+          ]);
         },
         onFocus: async () => {
           var E, R;
-          await Promise.all(
-            [
-              (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, d(o)),
-              (R = i.onFocus) == null ? void 0 : R.call(i)
-            ]
-          );
+          await Promise.all([
+            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, d(i)),
+            (R = o.onFocus) == null ? void 0 : R.call(o)
+          ]);
         }
       });
-      f(N);
+      f(W);
     }
-    const h = s.get(o);
-    return y(o), Y(() => {
-      V(o);
+    const h = s.get(i);
+    return y(i), Y(() => {
+      V(i);
     }), h;
-  }, c = (i) => l(i);
+  }, c = (o) => l(o);
   return {
-    fields: p(() => [...s.values()]),
-    getField: (i) => l({ path: i }),
+    fields: v(() => [...s.values()]),
+    getField: (o) => l({ path: o }),
     registerField: f,
     deregisterField: m,
     defineField: c
   };
 }
-function ye(t) {
-  const e = p(() => t.fields.value.some((a) => d(a.dirty))), r = p(() => t.fields.value.some((a) => d(a.touched)));
+function Ve(t) {
+  const e = v(() => t.fields.value.some((a) => d(a.dirty))), r = v(() => t.fields.value.some((a) => d(a.touched)));
   return {
     isDirty: e,
     isTouched: r
   };
 }
-function Fe(t) {
+function ye(t) {
   return t.filter(
     (e, r, a) => a.indexOf(e) === r
   );
@@ -228,10 +225,10 @@ function G(...t) {
     if (!a)
       return e;
     const s = (e ?? []).concat(r);
-    return Fe(s);
+    return ye(s);
   }, t[0]);
 }
-function ge(...t) {
+function Fe(...t) {
   return t.map((r) => Object.keys(r)).flat().reduce((r, a) => {
     const s = t.map((n) => n[a]).filter(Boolean);
     return {
@@ -250,17 +247,17 @@ function C(...t) {
   return t.length === 1 ? e : t.slice(1).reduce(
     (r, a) => ({
       general: G(r.general, a.general),
-      propertyErrors: ge(r.propertyErrors ?? {}, a.propertyErrors ?? {})
+      propertyErrors: Fe(r.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     e
   );
 }
-function A(t) {
+function B(t) {
   var a;
   const e = (((a = t.general) == null ? void 0 : a.length) ?? 0) > 0, r = Object.entries(t.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
   return e || r;
 }
-function Ee(t) {
+function ge(t) {
   const e = t.issues.filter((a) => a.path.length === 0).map((a) => a.message), r = t.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
     const n = s.path.join(".");
     return {
@@ -280,7 +277,7 @@ const F = {
     propertyErrors: {}
   }
 };
-class we {
+class Ee {
   constructor(e) {
     this.schema = e;
   }
@@ -290,7 +287,7 @@ class we {
     const r = await this.schema.safeParseAsync(e);
     if (r.success)
       return F;
-    const a = Ee(r.error);
+    const a = ge(r.error);
     return {
       isValid: !1,
       errors: {
@@ -300,7 +297,7 @@ class we {
     };
   }
 }
-class Re {
+class we {
   constructor(e) {
     this.validateFn = e;
   }
@@ -321,11 +318,11 @@ class Re {
     }
   }
 }
-class Pe {
+class Re {
   constructor(e, r) {
     S(this, "schemaValidator");
     S(this, "functionValidator");
-    this.schema = e, this.validateFn = r, this.schemaValidator = new we(this.schema), this.functionValidator = new Re(this.validateFn);
+    this.schema = e, this.validateFn = r, this.schemaValidator = new Ee(this.schema), this.functionValidator = new we(this.validateFn);
   }
   async validate(e) {
     const [r, a] = await Promise.all([
@@ -339,14 +336,14 @@ class Pe {
   }
 }
 function I(t) {
-  return p(() => new Pe(
+  return v(() => new Re(
     d(t.schema),
     d(t.validateFn)
   ));
 }
-function De(t, e) {
-  const r = $({
-    validators: L([I(e)]),
+function Pe(t, e) {
+  const r = _({
+    validators: J([I(e)]),
     isValidated: !1,
     errors: d(e.errors) ?? F.errors
   }), a = (l = F.errors) => {
@@ -374,30 +371,30 @@ function De(t, e) {
   });
   const s = (l) => {
     const c = U(l) ? l : I(l);
-    return r.validators.push(c), te() && ae(() => {
+    return r.validators.push(c), re() && te(() => {
       r.validators = r.validators.filter(
-        (i) => i !== c
+        (o) => o !== c
       );
     }), c;
   };
   async function n() {
     const l = await Promise.all(
-      r.validators.filter((o) => d(o) !== void 0).map((o) => d(o).validate(t.data))
-    ), c = l.every((o) => o.isValid);
-    let { errors: i } = F;
+      r.validators.filter((i) => d(i) !== void 0).map((i) => d(i).validate(t.data))
+    ), c = l.every((i) => i.isValid);
+    let { errors: o } = F;
     if (!c) {
-      const o = l.map((h) => h.errors);
-      i = C(...o);
+      const i = l.map((h) => h.errors);
+      o = C(...i);
     }
     return {
-      errors: i,
+      errors: o,
       isValid: c
     };
   }
   const f = async () => {
     const l = await n();
     return a(l.errors), r.isValidated = !0, {
-      isValid: !A(l.errors),
+      isValid: !B(l.errors),
       errors: r.errors
     };
   }, m = async (l) => {
@@ -408,14 +405,14 @@ function De(t, e) {
         [l]: c.errors.propertyErrors[l]
       }
     }), {
-      isValid: !A(c.errors),
+      isValid: !B(c.errors),
       errors: r.errors
     };
-  }, y = p(() => !A(r.errors)), V = () => {
+  }, y = v(() => !B(r.errors)), V = () => {
     r.isValidated = !1, r.errors = d(e.errors) ?? F.errors;
   };
   return {
-    ...J(r),
+    ...T(r),
     validateForm: f,
     validateField: m,
     defineValidator: s,
@@ -423,7 +420,7 @@ function De(t, e) {
     reset: V
   };
 }
-class Se {
+class De {
   constructor(e, r) {
     this.path = e, this.validator = r;
   }
@@ -438,7 +435,7 @@ class Se {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            _(this.path, s),
+            $(this.path, s),
             n
           ])
         ) : {}
@@ -446,29 +443,29 @@ class Se {
     };
   }
 }
-function _e(t, e, r) {
-  const a = x(t.data, e), s = p(() => D(t.initialData.value, e)), n = (u) => ({
+function Se(t, e, r) {
+  const a = L(t.data, e), s = v(() => D(t.initialData.value, e)), n = (u) => ({
     ...u,
-    path: p(() => d(u.path).replace(e + ".", "")),
-    setData: (v) => {
-      u.setData(v);
+    path: v(() => d(u.path).replace(e + ".", "")),
+    setData: (p) => {
+      u.setData(p);
     }
   }), f = (u) => {
-    const v = _(e, u), w = t.getField(v);
+    const p = $(e, u), w = t.getField(p);
     return w ? n(w) : {};
   }, m = (u) => {
-    const v = _(e, u.path), w = t.defineField({
+    const p = $(e, u.path), w = t.defineField({
       ...u,
-      path: v
+      path: p
     });
     return n(w);
-  }, y = p(() => t.fields.value.filter((u) => {
-    const v = u.path.value;
-    return v.startsWith(e + ".") || v === e;
+  }, y = v(() => t.fields.value.filter((u) => {
+    const p = u.path.value;
+    return p.startsWith(e + ".") || p === e;
   }).map((u) => n(u))), V = () => t.fields.value.filter((u) => {
-    const v = u.path.value;
-    return v.startsWith(e + ".") || v === e;
-  }), l = p(() => V().some((u) => u.dirty.value)), c = p(() => V().some((u) => u.touched.value)), i = p(() => t.isValid.value), o = p(() => t.isValidated.value), h = p(() => fe(d(t.errors), e));
+    const p = u.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }), l = v(() => V().some((u) => u.dirty.value)), c = v(() => V().some((u) => u.touched.value)), o = v(() => t.isValid.value), i = v(() => t.isValidated.value), h = v(() => de(d(t.errors), e));
   return {
     data: a,
     fields: y,
@@ -477,30 +474,28 @@ function _e(t, e, r) {
     getField: f,
     isDirty: l,
     isTouched: c,
-    isValid: i,
-    isValidated: o,
+    isValid: o,
+    isValidated: i,
     errors: h,
     defineValidator: (u) => {
-      const v = U(u) ? u : I(u), w = p(
-        () => new Se(e, d(v))
+      const p = U(u) ? u : I(u), w = v(
+        () => new De(e, d(p))
       );
-      return t.defineValidator(w), v;
+      return t.defineValidator(w), p;
     },
     reset: () => V().forEach((u) => u.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (u, v) => {
-      const w = _(e, u);
+    getSubForm: (u, p) => {
+      const w = $(e, u);
       return t.getSubForm(
         w,
-        v
+        p
       );
     }
   };
 }
-function Oe(t) {
-  const e = p(
-    () => Object.freeze(g(t.initialData))
-  ), r = L(g(e)), a = $({
+function je(t) {
+  const e = v(() => g(t.initialData)), r = J(g(e)), a = _({
     initialData: e,
     data: r
   });
@@ -511,20 +506,20 @@ function Oe(t) {
     },
     { flush: "sync" }
   );
-  const s = De(a, t), n = Ve(a, s, {
+  const s = Pe(a, t), n = me(a, s, {
     keepValuesOnUnmount: t.keepValuesOnUnmount,
     onBlur: async (c) => {
       d(t.validationStrategy) === "onTouch" && s.validateField(c);
     }
-  }), f = ye(n), m = (c) => async (i) => {
-    i.preventDefault(), d(t.validationStrategy) !== "none" && await s.validateForm(), s.isValid.value && await c(a.data);
+  }), f = Ve(n), m = (c) => async (o) => {
+    o.preventDefault(), d(t.validationStrategy) !== "none" && await s.validateForm(), s.isValid.value && await c(a.data);
   }, y = () => {
     r.value = g(e), s.reset();
     for (const c of n.fields.value)
       c.reset();
   };
-  function V(c, i) {
-    return _e(l, c);
+  function V(c, o) {
+    return Se(l, c);
   }
   const l = {
     ...n,
@@ -538,7 +533,7 @@ function Oe(t) {
   };
   return d(t.validationStrategy) === "onFormOpen" && s.validateForm(), l;
 }
-const Ce = /* @__PURE__ */ k({
+const Oe = /* @__PURE__ */ k({
   __name: "Field",
   props: {
     form: {},
@@ -553,10 +548,10 @@ const Ce = /* @__PURE__ */ k({
   setup(t) {
     const e = t, r = e.form.defineField({
       path: e.path
-    }), a = $(r);
-    return (s, n) => b(s.$slots, "default", M(z(a)));
+    }), a = _(r);
+    return (s, n) => b(s.$slots, "default", x(M(a)));
   }
-}), Ie = /* @__PURE__ */ k({
+}), Ce = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -567,27 +562,27 @@ const Ce = /* @__PURE__ */ k({
   },
   setup(t) {
     return (e, r) => {
-      const a = se("Field");
-      return T(), K(a, {
-        form: e.form,
-        path: e.path
+      const a = ae("Field");
+      return K(), z(a, {
+        form: t.form,
+        path: t.path
       }, {
-        default: j(({ errors: s, data: n, setData: f }) => [
-          (T(), K(ne(e.component), oe({ ...e.componentProps, ...e.$attrs }, {
+        default: A(({ errors: s, data: n, setData: f }) => [
+          (K(), z(se(t.component), ne({ ...t.componentProps, ...e.$attrs }, {
             "model-value": n,
             errors: s,
-            name: e.path,
+            name: t.path,
             "onUpdate:modelValue": f
           }), ie({
-            default: j(() => [
+            default: A(() => [
               b(e.$slots, "default")
             ]),
             _: 2
           }, [
-            le(e.$slots, (m, y) => ({
+            oe(e.$slots, (m, y) => ({
               name: y,
-              fn: j((V) => [
-                b(e.$slots, y, M(z(V ?? {})))
+              fn: A((V) => [
+                b(e.$slots, y, x(M(V ?? {})))
               ])
             }))
           ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -596,20 +591,20 @@ const Ce = /* @__PURE__ */ k({
       }, 8, ["form", "path"]);
     };
   }
-}), Ue = /* @__PURE__ */ k({
+}), Ie = /* @__PURE__ */ k({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(t) {
-    const e = t, r = p(() => e.form.getSubForm(e.path));
-    return (a, s) => b(a.$slots, "default", M(z({ subform: r.value })));
+    const e = t, r = v(() => e.form.getSubForm(e.path));
+    return (a, s) => b(a.$slots, "default", x(M({ subform: r.value })));
   }
 });
 export {
-  Ce as Field,
-  Ie as FormFieldWrapper,
-  Ue as FormPart,
-  Oe as useForm
+  Oe as Field,
+  Ce as FormFieldWrapper,
+  Ie as FormPart,
+  je as useForm
 };

package/dist/types/form.d.ts

@@ -44,5 +44,5 @@ export interface Form<T extends FormDataDefault> {
     reset: () => void;
     validateForm: () => Promise<ValidationResult>;
     submitHandler: (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
-    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Form<PickEntity<T, P>>;
+    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Omit<Form<PickEntity<T, P>>, 'submitHandler'>;
 }

package/dist/utils/path.d.ts

@@ -8,7 +8,7 @@ export declare function existsFieldPath<T, K extends Paths<T>>(field: FormField<
 export declare function getNestedValue<T, K extends Paths<T>>(obj: T, path: K | SplitPath<K>): PickProps<T, K>;
 export declare function setNestedValue<T, K extends Paths<T>>(obj: MaybeRef<T>, path: K | SplitPath<K>, value: PickProps<T, K>): void;
 export declare const getLens: <T, K extends Paths<T>>(data: MaybeRef<T>, key: MaybeRef<K | SplitPath<K>>) => WritableComputedRef<PickProps<T, K>, PickProps<T, K>>;
-type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends "" ? "" : Sub extends "" ? "" : "."}${Sub}`;
+type JoinPath<Base extends string, Sub extends string> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`;
 export declare function joinPath<Base extends string, Sub extends string>(basePath: Base, subPath: Sub): JoinPath<Base, Sub>;
 export declare function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "",
   "main": "dist/index.js",
   "type": "module",
@@ -26,7 +26,7 @@
     "@vitest/ui": "^2.0.0",
     "happy-dom": "^12.0.0",
     "vitest": "^2.0.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.25"
   },
   "dependencies": {
     "@vueuse/core": "^13.5.0",

package/src/composables/useFieldRegistry.ts

@@ -1,3 +1,4 @@
+import type { Awaitable } from "@vueuse/core";
 import {
   computed,
   onScopeDispose,
@@ -6,65 +7,69 @@ import {
   toRef,
   triggerRef,
   unref,
-  watchEffect,
+  watch,
   type MaybeRef,
-} from 'vue'
-import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
-import type { Paths, PickProps } from '../types/util'
-import { existsPath, getLens, getNestedValue } from '../utils/path'
-import { Rc } from '../utils/rc'
-import { useField, type UseFieldOptions } from './useField'
-import type { ValidationState } from './useValidation'
-import type { Awaitable } from '@vueuse/core'
+} from "vue";
+import type { FieldsTuple, FormDataDefault, FormField } from "../types/form";
+import type { Paths, PickProps } from "../types/util";
+import { existsPath, getLens, getNestedValue } from "../utils/path";
+import { Rc } from "../utils/rc";
+import { useField, type UseFieldOptions } from "./useField";
+import type { ValidationState } from "./useValidation";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FieldRegistryCache<T> = Map<Paths<T>, FormField<any, string>>
+type FieldRegistryCache<T> = Map<Paths<T>, FormField<any, string>>;
 
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<
   PickProps<T, K>,
   K
->
+>;
 
 export type DefineFieldOptions<F, K extends string> = Pick<
   UseFieldOptions<F, K>,
-  'path'
+  "path"
 > & {
-  onBlur?: () => void
-  onFocus?: () => void
-}
+  onBlur?: () => void;
+  onFocus?: () => void;
+};
 
 interface FormState<
   T extends FormDataDefault,
   TIn extends FormDataDefault = T,
 > {
-  data: T
-  initialData: TIn
+  data: T;
+  initialData: TIn;
 }
 
 interface FieldRegistryOptions {
-  keepValuesOnUnmount?: MaybeRef<boolean>
-  onBlur?: (path: string) => Awaitable<void>
-  onFocus?: (path: string) => Awaitable<void>
+  keepValuesOnUnmount?: MaybeRef<boolean>;
+  onBlur?: (path: string) => Awaitable<void>;
+  onFocus?: (path: string) => Awaitable<void>;
 }
 
 const optionDefaults = {
   keepValuesOnUnmount: true,
-}
+};
 
 // A computed that always reflects the latest value from the getter
 // This computed forces updates even if the value is the same (to trigger watchers)
-function alwaysComputed<T>(getter: () => T) {
-  const initialValueRef = shallowRef(getter())
+function initialDataSync<T extends FormDataDefault>(
+  formState: FormState<T>,
+  path: Paths<T>,
+) {
+  const getNewValue = () => getNestedValue(formState.initialData, path);
+  const initialValueRef = shallowRef(getNewValue());
 
-  watchEffect(
+  watch(
+    () => formState.initialData,
     () => {
-      initialValueRef.value = getter()
-      triggerRef(initialValueRef)
+      initialValueRef.value = getNewValue();
+      triggerRef(initialValueRef);
     },
-    { flush: 'sync' },
-  )
+    { flush: "sync" },
+  );
 
-  return initialValueRef
+  return initialValueRef;
 }
 
 export function useFieldRegistry<T extends FormDataDefault>(
@@ -72,104 +77,99 @@ export function useFieldRegistry<T extends FormDataDefault>(
   validationState: ValidationState<T>,
   fieldRegistryOptions?: FieldRegistryOptions,
 ) {
-  const fieldReferenceCounter = new Map<Paths<T>, Rc>()
-  const fields = shallowReactive(new Map()) as FieldRegistryCache<T>
+  const fieldReferenceCounter = new Map<Paths<T>, Rc>();
+  const fields = shallowReactive(new Map()) as FieldRegistryCache<T>;
   const registryOptions = {
     ...optionDefaults,
     ...fieldRegistryOptions,
-  }
+  };
 
   const registerField = <K extends Paths<T>>(
     field: ResolvedFormField<T, K>,
   ) => {
-    const path = unref(field.path) as Paths<T>
-    fields.set(path, field)
-  }
+    const path = unref(field.path) as Paths<T>;
+    fields.set(path, field);
+  };
 
   const deregisterField = (path: Paths<T>) => {
     if (!registryOptions?.keepValuesOnUnmount) {
-      fields.get(path)?.reset()
+      fields.get(path)?.reset();
     }
-    fields.delete(path)
-  }
+    fields.delete(path);
+  };
 
   const track = (path: Paths<T>) => {
     if (!fieldReferenceCounter.has(path)) {
-      fieldReferenceCounter.set(path, new Rc(() => deregisterField(path)))
+      fieldReferenceCounter.set(path, new Rc(() => deregisterField(path)));
     } else {
-      fieldReferenceCounter.get(path)?.inc()
+      fieldReferenceCounter.get(path)?.inc();
     }
-  }
+  };
 
   const untrack = (path: Paths<T>) => {
     if (fieldReferenceCounter.has(path)) {
-      fieldReferenceCounter.get(path)?.dec()
+      fieldReferenceCounter.get(path)?.dec();
     }
-  }
+  };
 
   const getField = <K extends Paths<T>>(
     options: DefineFieldOptions<PickProps<T, K>, K>,
   ): ResolvedFormField<T, K> => {
-    const { path } = options
+    const { path } = options;
 
     if (!fields.has(path)) {
       const field = useField({
         path,
-        value: getLens(toRef(formState, 'data'), path),
-        initialValue: alwaysComputed(() =>
-          getNestedValue(formState.initialData, path)),
+        value: getLens(toRef(formState, "data"), path),
+        initialValue: initialDataSync(formState, path),
         existsInForm: computed(() => existsPath(formState.data, unref(path))),
         errors: computed({
           get() {
-            return validationState.errors.value.propertyErrors[path] || []
+            return validationState.errors.value.propertyErrors[path] || [];
           },
           set(newErrors) {
-            validationState.errors.value.propertyErrors[path] = newErrors
+            validationState.errors.value.propertyErrors[path] = newErrors;
           },
         }),
         onBlur: async () => {
-          await Promise.all(
-            [
-              registryOptions?.onBlur?.(unref(path)),
-              options.onBlur?.(),
-            ],
-          )
+          await Promise.all([
+            registryOptions?.onBlur?.(unref(path)),
+            options.onBlur?.(),
+          ]);
         },
         onFocus: async () => {
-          await Promise.all(
-            [
-              registryOptions?.onFocus?.(unref(path)),
-              options.onFocus?.(),
-            ],
-          )
+          await Promise.all([
+            registryOptions?.onFocus?.(unref(path)),
+            options.onFocus?.(),
+          ]);
         },
-      })
+      });
 
-      registerField(field)
+      registerField(field);
     }
 
-    const field = fields.get(path) as ResolvedFormField<T, K>
+    const field = fields.get(path) as ResolvedFormField<T, K>;
 
-    track(path)
+    track(path);
 
     // Clean up field on unmount
     onScopeDispose(() => {
-      untrack(path)
-    })
+      untrack(path);
+    });
 
-    return field
-  }
+    return field;
+  };
 
   const defineField = <K extends Paths<T>>(
     options: DefineFieldOptions<PickProps<T, K>, K>,
   ): ResolvedFormField<T, K> => {
-    const field = getField(options)
+    const field = getField(options);
 
     // TODO: If more options are ever needed than only the path we have to update the field
     // here with the new options
 
-    return field
-  }
+    return field;
+  };
 
   return {
     fields: computed(() => [...fields.values()] as FieldsTuple<T>),
@@ -177,9 +177,9 @@ export function useFieldRegistry<T extends FormDataDefault>(
     registerField,
     deregisterField,
     defineField,
-  }
+  };
 }
 
 export type FieldRegistry<T extends FormDataDefault> = ReturnType<
   typeof useFieldRegistry<T>
->
+>;

package/src/composables/useForm.ts

@@ -1,4 +1,4 @@
-import type { Awaitable } from "@vueuse/core";
+import type { Awaitable } from '@vueuse/core'
 import {
   computed,
   reactive,
@@ -9,86 +9,81 @@ import {
   type MaybeRef,
   type MaybeRefOrGetter,
   type Ref,
-} from "vue";
-import type { Form, FormDataDefault } from "../types/form";
-import type { EntityPaths, PickEntity } from "../types/util";
-import type { ValidationStrategy } from "../types/validation";
-import { cloneRefValue } from "../utils/general";
-import { useFieldRegistry } from "./useFieldRegistry";
-import { useFormState } from "./useFormState";
-import { createSubformInterface, type SubformOptions } from "./useSubform";
-import { useValidation, type ValidationOptions } from "./useValidation";
-
-// TODO @Elias implement validation strategy handling
+} from 'vue'
+import type { Form, FormDataDefault } from '../types/form'
+import type { EntityPaths, PickEntity } from '../types/util'
+import type { ValidationStrategy } from '../types/validation'
+import { cloneRefValue } from '../utils/general'
+import { useFieldRegistry } from './useFieldRegistry'
+import { useFormState } from './useFormState'
+import { createSubformInterface, type SubformOptions } from './useSubform'
+import { useValidation, type ValidationOptions } from './useValidation'
 
 export interface UseFormOptions<T extends FormDataDefault>
   extends ValidationOptions<T> {
-  initialData: MaybeRefOrGetter<T>;
-  validationStrategy?: MaybeRef<ValidationStrategy>;
-  keepValuesOnUnmount?: MaybeRef<boolean>;
+  initialData: MaybeRefOrGetter<T>
+  validationStrategy?: MaybeRef<ValidationStrategy>
+  keepValuesOnUnmount?: MaybeRef<boolean>
 }
 
 export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
-  const initialData = computed(() =>
-    Object.freeze(cloneRefValue(options.initialData)),
-  );
+  const initialData = computed(() => cloneRefValue(options.initialData))
 
-  const data = ref<T>(cloneRefValue(initialData)) as Ref<T>;
+  const data = ref<T>(cloneRefValue(initialData)) as Ref<T>
 
   const state = reactive({
     initialData,
     data,
-  });
+  })
 
   watch(
     initialData,
     (newValue) => {
-      state.data = cloneRefValue(newValue);
+      state.data = cloneRefValue(newValue)
     },
-    { flush: "sync" },
-  );
+    { flush: 'sync' },
+  )
 
-  const validationState = useValidation(state, options);
+  const validationState = useValidation(state, options)
   const fieldRegistry = useFieldRegistry(state, validationState, {
     keepValuesOnUnmount: options.keepValuesOnUnmount,
     onBlur: async (path: string) => {
-      if (unref(options.validationStrategy) === "onTouch") {
-        // TODO: Only validate the specific field that was touched
-        validationState.validateField(path);
+      if (unref(options.validationStrategy) === 'onTouch') {
+        validationState.validateField(path)
       }
     },
-  });
-  const formState = useFormState(fieldRegistry);
+  })
+  const formState = useFormState(fieldRegistry)
 
   const submitHandler = (onSubmit: (data: T) => Awaitable<void>) => {
     return async (event: SubmitEvent) => {
-      event.preventDefault();
+      event.preventDefault()
 
-      if (unref(options.validationStrategy) !== "none") {
-        await validationState.validateForm();
+      if (unref(options.validationStrategy) !== 'none') {
+        await validationState.validateForm()
       }
 
       if (!validationState.isValid.value) {
-        return;
+        return
       }
 
-      await onSubmit(state.data);
-    };
-  };
+      await onSubmit(state.data)
+    }
+  }
 
   const reset = () => {
-    data.value = cloneRefValue(initialData);
-    validationState.reset();
+    data.value = cloneRefValue(initialData)
+    validationState.reset()
     for (const field of fieldRegistry.fields.value) {
-      field.reset();
+      field.reset()
     }
-  };
+  }
 
   function getSubForm<K extends EntityPaths<T>>(
     path: K,
     options?: SubformOptions<PickEntity<T, K>>,
-  ): Form<PickEntity<T, K>> {
-    return createSubformInterface(formInterface, path, options);
+  ): Omit<Form<PickEntity<T, K>>, 'submitHandler'> {
+    return createSubformInterface(formInterface, path, options)
   }
 
   const formInterface: Form<T> = {
@@ -98,13 +93,13 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
     reset,
     getSubForm,
     submitHandler,
-    initialData: toRef(state, "initialData") as Form<T>["initialData"],
-    data: toRef(state, "data") as Form<T>["data"],
-  };
+    initialData: toRef(state, 'initialData') as Form<T>['initialData'],
+    data: toRef(state, 'data') as Form<T>['data'],
+  }
 
-  if (unref(options.validationStrategy) === "onFormOpen") {
-    validationState.validateForm();
+  if (unref(options.validationStrategy) === 'onFormOpen') {
+    validationState.validateForm()
   }
 
-  return formInterface;
+  return formInterface
 }

package/src/composables/useSubform.ts

@@ -50,7 +50,7 @@ export function createSubformInterface<
   mainForm: Form<T>,
   path: K,
   _options?: SubformOptions<PickEntity<T, K>>,
-): Form<PickEntity<T, K>> {
+): Omit<Form<PickEntity<T, K>>, 'submitHandler'> {
   type ST = PickEntity<T, K>
   type SP = Paths<ST>
   type MP<P extends SP> = `${K}.${P}`

package/src/types/form.ts

@@ -80,5 +80,5 @@ export interface Form<T extends FormDataDefault> {
   getSubForm: <P extends EntityPaths<T>>(
     path: P,
     options?: SubformOptions<PickEntity<T, P>>,
-  ) => Form<PickEntity<T, P>>
+  ) => Omit<Form<PickEntity<T, P>>, 'submitHandler'>
 }

package/src/utils/path.ts

@@ -1,21 +1,21 @@
-import { computed, isRef, unref, type MaybeRef } from "vue";
-import type { Paths, PickProps, SplitPath } from "../types/util";
-import type { ErrorBag, ValidationErrors } from "../types/validation";
-import type { FormField } from "../types/form";
+import { computed, isRef, unref, type MaybeRef } from 'vue'
+import type { Paths, PickProps, SplitPath } from '../types/util'
+import type { ErrorBag, ValidationErrors } from '../types/validation'
+import type { FormField } from '../types/form'
 
 export function splitPath(path: string): string[] {
-  if (path === "") {
-    return [];
+  if (path === '') {
+    return []
   }
-  return path.split(/\s*\.\s*/).filter(Boolean);
+  return path.split(/\s*\.\s*/).filter(Boolean)
 }
 
 export function existsPath<T, K extends Paths<T>>(
   obj: T,
   path: K | SplitPath<K>,
 ): boolean {
-  const splittedPath = Array.isArray(path) ? path : splitPath(path) as SplitPath<K>;
-  return !!getNestedValue(obj, splittedPath.slice(0, -1) as SplitPath<K>);
+  const splittedPath = Array.isArray(path) ? path : splitPath(path) as SplitPath<K>
+  return !!getNestedValue(obj, splittedPath.slice(0, -1) as SplitPath<K>)
 }
 
 export function existsFieldPath<T, K extends Paths<T>>(field: FormField<T, K>) {
@@ -26,11 +26,11 @@ export function getNestedValue<T, K extends Paths<T>>(
   obj: T,
   path: K | SplitPath<K>,
 ) {
-  const splittedPath = Array.isArray(path) ? path : splitPath(path);
+  const splittedPath = Array.isArray(path) ? path : splitPath(path)
   return splittedPath.reduce(
     (current, key) => current?.[key],
     obj as Record<string, never>,
-  ) as PickProps<T, K>;
+  ) as PickProps<T, K>
 }
 
 export function setNestedValue<T, K extends Paths<T>>(
@@ -38,31 +38,31 @@ export function setNestedValue<T, K extends Paths<T>>(
   path: K | SplitPath<K>,
   value: PickProps<T, K>,
 ): void {
-  const keys = Array.isArray(path) ? path : splitPath(path);
+  const keys = Array.isArray(path) ? path : splitPath(path)
 
-  const lastKey = keys.at(-1)!;
+  const lastKey = keys.at(-1)!
 
   if (!lastKey) {
     if (!isRef(obj)) {
       // We cannot do anything here as we have nothing we can assign to
-      return;
+      return
     }
 
-    obj.value = value;
+    obj.value = value
   } else {
     const target = keys.slice(0, -1).reduce(
       (current, key) => {
         if (current?.[key] === undefined) {
           // Create the nested object if it doesn't exist
-          current[key] = {};
+          current[key] = {}
         }
-        return current?.[key];
+        return current?.[key]
       },
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       unref(obj) as Record<string, any>,
-    );
+    )
 
-    target[lastKey] = value;
+    target[lastKey] = value
   }
 }
 
@@ -72,58 +72,57 @@ export const getLens = <T, K extends Paths<T>>(
 ) => {
   return computed({
     get() {
-      return getNestedValue(unref(data), unref(key));
+      return getNestedValue(unref(data), unref(key))
     },
     set(value: PickProps<T, K>) {
-      setNestedValue(data, unref(key), value);
+      setNestedValue(data, unref(key), value)
     },
-  });
-};
+  })
+}
 
 type JoinPath<
   Base extends string,
   Sub extends string,
-> = `${Base}${Base extends "" ? "" : Sub extends "" ? "" : "."}${Sub}`;
+> = `${Base}${Base extends '' ? '' : Sub extends '' ? '' : '.'}${Sub}`
 export function joinPath<Base extends string, Sub extends string>(
   basePath: Base,
   subPath: Sub,
 ): JoinPath<Base, Sub> {
   if (!basePath && !subPath) {
-    return "" as JoinPath<Base, Sub>;
+    return '' as JoinPath<Base, Sub>
   }
 
   if (!basePath && subPath) {
-    return subPath as JoinPath<Base, Sub>;
+    return subPath as JoinPath<Base, Sub>
   }
 
   if (!subPath && basePath) {
-    return basePath as JoinPath<Base, Sub>;
+    return basePath as JoinPath<Base, Sub>
   }
 
-  return `${basePath}.${subPath}` as JoinPath<Base, Sub>;
+  return `${basePath}.${subPath}` as JoinPath<Base, Sub>
 }
 
 export function filterErrorsForPath(errors: ErrorBag, path: string): ErrorBag {
   // Handle empty path - return all errors
   if (!path) {
-    return errors;
+    return errors
   }
 
-  const pathPrefix = `${path}.`;
-  const filteredPropertyErrors: Record<string, ValidationErrors> =
-    Object.fromEntries(
-      Object.entries(errors.propertyErrors)
-        .filter(([errorPath]) => {
-          return errorPath.startsWith(pathPrefix);
-        })
-        .map(([errorPath, errorMessages]) => [
-          errorPath.slice(pathPrefix.length),
-          errorMessages,
-        ]),
-    );
+  const pathPrefix = `${path}.`
+  const filteredPropertyErrors: Record<string, ValidationErrors> = Object.fromEntries(
+    Object.entries(errors.propertyErrors)
+      .filter(([errorPath]) => {
+        return errorPath.startsWith(pathPrefix)
+      })
+      .map(([errorPath, errorMessages]) => [
+        errorPath.slice(pathPrefix.length),
+        errorMessages,
+      ]),
+  )
 
   return {
     general: errors.general, // Keep general errors
     propertyErrors: filteredPropertyErrors,
-  };
+  }
 }