@teamnovu/kit-vue-forms 0.1.17 → 0.1.18

package/dist/composables/useForm.d.ts

@@ -1,10 +1,31 @@
-import { MaybeRef, MaybeRefOrGetter } from 'vue';
-import { Form, FormDataDefault } from '../types/form';
+import { Awaitable } from '@vueuse/core';
+import { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+import { Form, FormDataDefault, FieldsTuple } from '../types/form';
+import { EntityPaths, PickEntity } from '../types/util';
 import { ValidationStrategy } from '../types/validation';
-import { ValidationOptions } from './useValidation';
+import { SubformOptions } from './useSubform';
+import { ValidationOptions, ValidatorOptions } from './useValidation';
+import { ErrorBag, Paths, PickProps, FormField, Validator, ValidationResult } from '..';
+import { DefineFieldOptions } from './useFieldRegistry';
 export interface UseFormOptions<T extends FormDataDefault> extends ValidationOptions<T> {
     initialData: MaybeRefOrGetter<T>;
     validationStrategy?: MaybeRef<ValidationStrategy>;
     keepValuesOnUnmount?: MaybeRef<boolean>;
 }
-export declare function useForm<T extends FormDataDefault>(options: UseFormOptions<T>): Form<T>;
+export declare function useForm<T extends FormDataDefault>(options: UseFormOptions<T>): {
+    submitHandler: (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
+    errors: Ref< ErrorBag>;
+    data: Ref<T, T>;
+    isValid: Ref<boolean>;
+    isValidated: Ref<boolean>;
+    initialData: Readonly<Ref<T, T>>;
+    fields: Ref< FieldsTuple<T, Paths<T>>, FieldsTuple<T, Paths<T>>>;
+    defineField: <P extends Paths<T>>(options: DefineFieldOptions<PickProps<T, P>, P>) => FormField<PickProps<T, P>, P>;
+    getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>;
+    isDirty: Ref<boolean>;
+    isTouched: Ref<boolean>;
+    defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref< Validator<TData>, Validator<TData>>) => Ref< Validator<TData> | undefined, Validator<TData> | undefined>;
+    reset: () => void;
+    validateForm: () => Promise< ValidationResult>;
+    getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>> | undefined) => Omit<Form<PickEntity<T, P>>, "submitHandler">;
+};

package/dist/composables/useSubform.d.ts

@@ -1,5 +1,6 @@
 import { Form, FormDataDefault } from '../types/form';
 import { EntityPaths, PickEntity } from '../types/util';
+import { UseFormOptions } from './useForm';
 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>>): Omit<Form<PickEntity<T, K>>, 'submitHandler'>;
+export declare function createSubformInterface<T extends FormDataDefault, K extends EntityPaths<T>>(mainForm: Omit<Form<T>, "submitHandler">, path: K, formOptions?: UseFormOptions<T>, _options?: SubformOptions<PickEntity<T, K>>): Form<PickEntity<T, K>>;

package/dist/composables/useSubmitHandler.d.ts

@@ -0,0 +1,8 @@
+import { Awaitable, MaybeRef } from '@vueuse/core';
+import { Form, FormDataDefault } from '../types/form';
+import { ValidationStrategy } from '../types/validation';
+interface SubmitHandlerOptions {
+    validationStrategy?: MaybeRef<ValidationStrategy>;
+}
+export declare function useSubmitHandler<T extends FormDataDefault>(form: Omit<Form<T>, 'submitHandler'>, options: SubmitHandlerOptions): (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
+export {};

package/dist/index.js

@@ -1,37 +1,37 @@
-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 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";
+var Q = Object.defineProperty;
+var X = (t, e, r) => e in t ? Q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var S = (t, e, r) => X(t, typeof e != "symbol" ? e + "" : e, r);
+import { toValue as Y, toRaw as ee, computed as v, unref as d, isRef as k, shallowRef as j, reactive as _, watch as P, toRefs as T, shallowReactive as re, toRef as I, onScopeDispose as te, triggerRef as ae, ref as J, getCurrentScope as se, onBeforeUnmount as ne, defineComponent as x, renderSlot as $, normalizeProps as M, guardReactiveProps as N, resolveComponent as ie, createBlock as H, openBlock as K, withCtx as B, resolveDynamicComponent as oe, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
+import { cloneDeep as de } from "lodash-es";
 import "zod";
 function g(t) {
-  const e = q(t), r = Q(e);
-  return le(r);
+  const e = Y(t), r = ee(e);
+  return de(r);
 }
-function N(t) {
+function W(t) {
   return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
 }
-function ce(t, e) {
-  const r = Array.isArray(e) ? e : N(e);
+function fe(t, e) {
+  const r = Array.isArray(e) ? e : W(e);
   return !!D(t, r.slice(0, -1));
 }
 function D(t, e) {
-  return (Array.isArray(e) ? e : N(e)).reduce(
+  return (Array.isArray(e) ? e : W(e)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     t
   );
 }
-function ue(t, e, r) {
-  const a = Array.isArray(e) ? e : N(e), s = a.at(-1);
+function he(t, e, r) {
+  const a = Array.isArray(e) ? e : W(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]),
+      (f, p) => ((f == null ? void 0 : f[p]) === void 0 && (f[p] = {}), f == null ? void 0 : f[p]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       d(t)
     );
     n[s] = r;
   } else {
-    if (!U(t))
+    if (!k(t))
       return;
     t.value = r;
   }
@@ -41,13 +41,13 @@ const L = (t, e) => v({
     return D(d(t), d(e));
   },
   set(r) {
-    ue(t, d(e), r);
+    he(t, d(e), r);
   }
 });
-function $(t, e) {
+function b(t, e) {
   return !t && !e ? "" : !t && e ? e : !e && t ? t : `${t}.${e}`;
 }
-function de(t, e) {
+function ve(t, e) {
   if (!e)
     return t;
   const r = `${e}.`, a = Object.fromEntries(
@@ -62,7 +62,7 @@ function de(t, e) {
     propertyErrors: a
   };
 }
-class fe {
+class me {
   constructor(e) {
     S(this, "rc", 1);
     this.drop = e;
@@ -74,7 +74,7 @@ class fe {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function he(t) {
+function pe(t) {
   const r = {
     ...{
       existsInForm: !0
@@ -96,10 +96,10 @@ function he(t) {
   );
   const n = v(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), f = (h) => {
     s.value = h;
-  }, m = () => {
+  }, p = () => {
     var h;
     s.touched = !0, s.errors = [], (h = r.onBlur) == null || h.call(r);
-  }, y = () => {
+  }, F = () => {
     var h;
     (h = r.onFocus) == null || h.call(r);
   }, V = () => {
@@ -121,50 +121,50 @@ function he(t) {
     dirty: n,
     setData: f,
     setInitialData: l,
-    onBlur: m,
-    onFocus: y,
+    onBlur: p,
+    onFocus: F,
     reset: V,
     setErrors: c,
     clearErrors: o
   };
 }
-const ve = {
+const Ve = {
   keepValuesOnUnmount: !0
 };
-function pe(t, e) {
+function Fe(t, e) {
   const r = () => D(t.initialData, e), a = j(r());
   return P(
     () => t.initialData,
     () => {
-      a.value = r(), ee(a);
+      a.value = r(), ae(a);
     },
     { flush: "sync" }
   ), a;
 }
-function me(t, e, r) {
-  const a = /* @__PURE__ */ new Map(), s = X(/* @__PURE__ */ new Map()), n = {
-    ...ve,
+function ye(t, e, r) {
+  const a = /* @__PURE__ */ new Map(), s = re(/* @__PURE__ */ new Map()), n = {
+    ...Ve,
     ...r
   }, f = (o) => {
     const i = d(o.path);
     s.set(i, o);
-  }, m = (o) => {
+  }, p = (o) => {
     var i;
     n != null && n.keepValuesOnUnmount || (i = s.get(o)) == null || i.reset(), s.delete(o);
-  }, y = (o) => {
+  }, F = (o) => {
     var i;
-    a.has(o) ? (i = a.get(o)) == null || i.inc() : a.set(o, new fe(() => m(o)));
+    a.has(o) ? (i = a.get(o)) == null || i.inc() : a.set(o, new me(() => p(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({
+      const A = pe({
         path: i,
-        value: L(O(t, "data"), i),
-        initialValue: pe(t, i),
-        existsInForm: v(() => ce(t.data, d(i))),
+        value: L(I(t, "data"), i),
+        initialValue: Fe(t, i),
+        existsInForm: v(() => fe(t.data, d(i))),
         errors: v({
           get() {
             return e.errors.value.propertyErrors[i] || [];
@@ -188,10 +188,10 @@ function me(t, e, r) {
           ]);
         }
       });
-      f(W);
+      f(A);
     }
     const h = s.get(i);
-    return y(i), Y(() => {
+    return F(i), te(() => {
       V(i);
     }), h;
   }, c = (o) => l(o);
@@ -199,23 +199,28 @@ function me(t, e, r) {
     fields: v(() => [...s.values()]),
     getField: (o) => l({ path: o }),
     registerField: f,
-    deregisterField: m,
+    deregisterField: p,
     defineField: c
   };
 }
-function Ve(t) {
+function ge(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 ye(t) {
+function G(t, e) {
+  return (r) => async (a) => {
+    a.preventDefault(), d(e.validationStrategy) !== "none" && await t.validateForm(), t.isValid.value && await r(t.data.value);
+  };
+}
+function Ee(t) {
   return t.filter(
     (e, r, a) => a.indexOf(e) === r
   );
 }
-function G(...t) {
+function Z(...t) {
   return t.slice(1).reduce((e, r) => {
     if (!e && !r)
       return;
@@ -225,15 +230,15 @@ function G(...t) {
     if (!a)
       return e;
     const s = (e ?? []).concat(r);
-    return ye(s);
+    return Ee(s);
   }, t[0]);
 }
-function Fe(...t) {
+function we(...t) {
   return t.map((r) => Object.keys(r)).flat().reduce((r, a) => {
     const s = t.map((n) => n[a]).filter(Boolean);
     return {
       ...r,
-      [a]: G(...s)
+      [a]: Z(...s)
     };
   }, {});
 }
@@ -246,18 +251,18 @@ function C(...t) {
   const e = t[0];
   return t.length === 1 ? e : t.slice(1).reduce(
     (r, a) => ({
-      general: G(r.general, a.general),
-      propertyErrors: Fe(r.propertyErrors ?? {}, a.propertyErrors ?? {})
+      general: Z(r.general, a.general),
+      propertyErrors: we(r.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     e
   );
 }
-function B(t) {
+function O(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 ge(t) {
+function Re(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 {
@@ -270,24 +275,24 @@ function ge(t) {
     propertyErrors: r
   };
 }
-const F = {
+const y = {
   isValid: !0,
   errors: {
     general: [],
     propertyErrors: {}
   }
 };
-class Ee {
+class Pe {
   constructor(e) {
     this.schema = e;
   }
   async validate(e) {
     if (!this.schema)
-      return F;
+      return y;
     const r = await this.schema.safeParseAsync(e);
     if (r.success)
-      return F;
-    const a = ge(r.error);
+      return y;
+    const a = Re(r.error);
     return {
       isValid: !1,
       errors: {
@@ -297,16 +302,16 @@ class Ee {
     };
   }
 }
-class we {
+class De {
   constructor(e) {
     this.validateFn = e;
   }
   async validate(e) {
     if (!this.validateFn)
-      return F;
+      return y;
     try {
       const r = await this.validateFn(e);
-      return r.isValid ? F : r;
+      return r.isValid ? y : r;
     } catch (r) {
       return {
         isValid: !1,
@@ -318,11 +323,11 @@ class we {
     }
   }
 }
-class Re {
+class Se {
   constructor(e, r) {
     S(this, "schemaValidator");
     S(this, "functionValidator");
-    this.schema = e, this.validateFn = r, this.schemaValidator = new Ee(this.schema), this.functionValidator = new we(this.validateFn);
+    this.schema = e, this.validateFn = r, this.schemaValidator = new Pe(this.schema), this.functionValidator = new De(this.validateFn);
   }
   async validate(e) {
     const [r, a] = await Promise.all([
@@ -335,19 +340,19 @@ class Re {
     };
   }
 }
-function I(t) {
-  return v(() => new Re(
+function U(t) {
+  return v(() => new Se(
     d(t.schema),
     d(t.validateFn)
   ));
 }
-function Pe(t, e) {
+function be(t, e) {
   const r = _({
-    validators: J([I(e)]),
+    validators: J([U(e)]),
     isValidated: !1,
-    errors: d(e.errors) ?? F.errors
-  }), a = (l = F.errors) => {
-    r.errors = C(d(e.errors) ?? F.errors, l);
+    errors: d(e.errors) ?? y.errors
+  }), a = (l = y.errors) => {
+    r.errors = C(d(e.errors) ?? y.errors, l);
   };
   P(() => d(e.errors), async () => {
     if (r.isValidated) {
@@ -363,15 +368,15 @@ function Pe(t, e) {
           const c = await n();
           r.errors = c.errors;
         } else
-          r.errors = F.errors;
+          r.errors = y.errors;
     },
     { immediate: !0 }
   ), P([() => t.data, () => d(e.schema)], () => {
     r.isValidated && f();
   });
   const s = (l) => {
-    const c = U(l) ? l : I(l);
-    return r.validators.push(c), re() && te(() => {
+    const c = k(l) ? l : U(l);
+    return r.validators.push(c), se() && ne(() => {
       r.validators = r.validators.filter(
         (o) => o !== c
       );
@@ -381,7 +386,7 @@ function Pe(t, e) {
     const l = await Promise.all(
       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;
+    let { errors: o } = y;
     if (!c) {
       const i = l.map((h) => h.errors);
       o = C(...i);
@@ -394,10 +399,10 @@ function Pe(t, e) {
   const f = async () => {
     const l = await n();
     return a(l.errors), r.isValidated = !0, {
-      isValid: !B(l.errors),
+      isValid: !O(l.errors),
       errors: r.errors
     };
-  }, m = async (l) => {
+  }, p = async (l) => {
     const c = await n();
     return a({
       general: c.errors.general,
@@ -405,96 +410,104 @@ function Pe(t, e) {
         [l]: c.errors.propertyErrors[l]
       }
     }), {
-      isValid: !B(c.errors),
+      isValid: !O(c.errors),
       errors: r.errors
     };
-  }, y = v(() => !B(r.errors)), V = () => {
-    r.isValidated = !1, r.errors = d(e.errors) ?? F.errors;
+  }, F = v(() => !O(r.errors)), V = () => {
+    r.isValidated = !1, r.errors = d(e.errors) ?? y.errors;
   };
   return {
     ...T(r),
     validateForm: f,
-    validateField: m,
+    validateField: p,
     defineValidator: s,
-    isValid: y,
+    isValid: F,
     reset: V
   };
 }
-class De {
+class $e {
   constructor(e, r) {
     this.path = e, this.validator = r;
   }
   async validate(e) {
     const r = D(e, this.path);
     if (!this.validator)
-      return F;
+      return y;
     const a = await this.validator.validate(r);
     return {
       isValid: a.isValid,
       errors: {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            $(this.path, s),
-            n
-          ])
+          Object.entries(a.errors.propertyErrors).map(
+            ([s, n]) => [b(this.path, s), n]
+          )
         ) : {}
       }
     };
   }
 }
-function Se(t, e, r) {
-  const a = L(t.data, e), s = v(() => D(t.initialData.value, e)), n = (u) => ({
+function _e(t, e, r, a) {
+  const s = L(t.data, e), n = v(() => D(t.initialData.value, e)), f = (u) => ({
     ...u,
     path: v(() => d(u.path).replace(e + ".", "")),
-    setData: (p) => {
-      u.setData(p);
+    setData: (m) => {
+      u.setData(m);
     }
-  }), f = (u) => {
-    const p = $(e, u), w = t.getField(p);
-    return w ? n(w) : {};
-  }, m = (u) => {
-    const p = $(e, u.path), w = t.defineField({
+  }), p = (u) => {
+    const m = b(e, u), w = t.getField(m);
+    return w ? f(w) : {};
+  }, F = (u) => {
+    const m = b(e, u.path), w = t.defineField({
       ...u,
-      path: p
+      path: m
     });
-    return n(w);
-  }, 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 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,
-    initialData: s,
-    defineField: m,
-    getField: f,
-    isDirty: l,
-    isTouched: c,
-    isValid: o,
-    isValidated: i,
-    errors: h,
+    return f(w);
+  }, V = v(() => t.fields.value.filter((u) => {
+    const m = u.path.value;
+    return m.startsWith(e + ".") || m === e;
+  }).map((u) => f(u))), l = () => t.fields.value.filter((u) => {
+    const m = u.path.value;
+    return m.startsWith(e + ".") || m === e;
+  }), c = v(
+    () => l().some((u) => u.dirty.value)
+  ), o = v(
+    () => l().some((u) => u.touched.value)
+  ), i = v(() => t.isValid.value), h = v(() => t.isValidated.value), A = v(
+    () => ve(d(t.errors), e)
+  ), z = {
+    data: s,
+    fields: V,
+    initialData: n,
+    defineField: F,
+    getField: p,
+    isDirty: c,
+    isTouched: o,
+    isValid: i,
+    isValidated: h,
+    errors: A,
     defineValidator: (u) => {
-      const p = U(u) ? u : I(u), w = v(
-        () => new De(e, d(p))
+      const m = k(u) ? u : U(u), w = v(
+        () => new $e(e, d(m))
       );
-      return t.defineValidator(w), p;
+      return t.defineValidator(w), m;
     },
-    reset: () => V().forEach((u) => u.reset()),
+    reset: () => l().forEach((u) => u.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (u, p) => {
-      const w = $(e, u);
+    getSubForm: (u, m) => {
+      const w = b(e, u);
       return t.getSubForm(
         w,
-        p
+        m
       );
     }
+  }, q = G(z, r ?? {});
+  return {
+    ...z,
+    submitHandler: q
   };
 }
-function je(t) {
+function Ue(t) {
   const e = v(() => g(t.initialData)), r = J(g(e)), a = _({
     initialData: e,
     data: r
@@ -506,34 +519,34 @@ function je(t) {
     },
     { flush: "sync" }
   );
-  const s = Pe(a, t), n = me(a, s, {
+  const s = be(a, t), n = ye(a, s, {
     keepValuesOnUnmount: t.keepValuesOnUnmount,
     onBlur: async (c) => {
       d(t.validationStrategy) === "onTouch" && s.validateField(c);
     }
-  }), f = Ve(n), m = (c) => async (o) => {
-    o.preventDefault(), d(t.validationStrategy) !== "none" && await s.validateForm(), s.isValid.value && await c(a.data);
-  }, y = () => {
+  }), f = ge(n), p = () => {
     r.value = g(e), s.reset();
     for (const c of n.fields.value)
       c.reset();
   };
-  function V(c, o) {
-    return Se(l, c);
+  function F(c, o) {
+    return _e(V, c, t);
   }
-  const l = {
+  const V = {
     ...n,
     ...s,
     ...f,
-    reset: y,
-    getSubForm: V,
-    submitHandler: m,
-    initialData: O(a, "initialData"),
-    data: O(a, "data")
+    reset: p,
+    getSubForm: F,
+    initialData: I(a, "initialData"),
+    data: I(a, "data")
+  }, l = G(V, t);
+  return d(t.validationStrategy) === "onFormOpen" && s.validateForm(), {
+    ...V,
+    submitHandler: l
   };
-  return d(t.validationStrategy) === "onFormOpen" && s.validateForm(), l;
 }
-const Oe = /* @__PURE__ */ k({
+const ke = /* @__PURE__ */ x({
   __name: "Field",
   props: {
     form: {},
@@ -549,9 +562,9 @@ const Oe = /* @__PURE__ */ k({
     const e = t, r = e.form.defineField({
       path: e.path
     }), a = _(r);
-    return (s, n) => b(s.$slots, "default", x(M(a)));
+    return (s, n) => $(s.$slots, "default", M(N(a)));
   }
-}), Ce = /* @__PURE__ */ k({
+}), xe = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -562,27 +575,27 @@ const Oe = /* @__PURE__ */ k({
   },
   setup(t) {
     return (e, r) => {
-      const a = ae("Field");
-      return K(), z(a, {
+      const a = ie("Field");
+      return K(), H(a, {
         form: t.form,
         path: t.path
       }, {
-        default: A(({ errors: s, data: n, setData: f }) => [
-          (K(), z(se(t.component), ne({ ...t.componentProps, ...e.$attrs }, {
+        default: B(({ errors: s, data: n, setData: f }) => [
+          (K(), H(oe(t.component), le({ ...t.componentProps, ...e.$attrs }, {
             "model-value": n,
             errors: s,
             name: t.path,
             "onUpdate:modelValue": f
-          }), ie({
-            default: A(() => [
-              b(e.$slots, "default")
+          }), ce({
+            default: B(() => [
+              $(e.$slots, "default")
             ]),
             _: 2
           }, [
-            oe(e.$slots, (m, y) => ({
-              name: y,
-              fn: A((V) => [
-                b(e.$slots, y, x(M(V ?? {})))
+            ue(e.$slots, (p, F) => ({
+              name: F,
+              fn: B((V) => [
+                $(e.$slots, F, M(N(V ?? {})))
               ])
             }))
           ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -591,7 +604,7 @@ const Oe = /* @__PURE__ */ k({
       }, 8, ["form", "path"]);
     };
   }
-}), Ie = /* @__PURE__ */ k({
+}), Me = /* @__PURE__ */ x({
   __name: "FormPart",
   props: {
     form: {},
@@ -599,12 +612,12 @@ const Oe = /* @__PURE__ */ k({
   },
   setup(t) {
     const e = t, r = v(() => e.form.getSubForm(e.path));
-    return (a, s) => b(a.$slots, "default", x(M({ subform: r.value })));
+    return (a, s) => $(a.$slots, "default", M(N({ subform: r.value })));
   }
 });
 export {
-  Oe as Field,
-  Ce as FormFieldWrapper,
-  Ie as FormPart,
-  je as useForm
+  ke as Field,
+  xe as FormFieldWrapper,
+  Me as FormPart,
+  Ue as useForm
 };

package/package.json

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

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,97 +9,86 @@ 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'
+} 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";
+import { useSubmitHandler } from "./useSubmitHandler";
 
 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(() => 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') {
-        validationState.validateField(path)
+      if (unref(options.validationStrategy) === "onTouch") {
+        validationState.validateField(path);
       }
     },
-  })
-  const formState = useFormState(fieldRegistry)
-
-  const submitHandler = (onSubmit: (data: T) => Awaitable<void>) => {
-    return async (event: SubmitEvent) => {
-      event.preventDefault()
-
-      if (unref(options.validationStrategy) !== 'none') {
-        await validationState.validateForm()
-      }
-
-      if (!validationState.isValid.value) {
-        return
-      }
-
-      await onSubmit(state.data)
-    }
-  }
+  });
+  const formState = useFormState(fieldRegistry);
 
   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>>,
-  ): Omit<Form<PickEntity<T, K>>, 'submitHandler'> {
-    return createSubformInterface(formInterface, path, options)
+    subformOptions?: SubformOptions<PickEntity<T, K>>,
+  ): Omit<Form<PickEntity<T, K>>, "submitHandler"> {
+    return createSubformInterface(formInterface, path, options, subformOptions);
   }
 
-  const formInterface: Form<T> = {
+  const formInterface: Omit<Form<T>, "submitHandler"> = {
     ...fieldRegistry,
     ...validationState,
     ...formState,
     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"],
+  };
+
+  const submitHandler = useSubmitHandler(formInterface, options);
 
-  if (unref(options.validationStrategy) === 'onFormOpen') {
-    validationState.validateForm()
+  if (unref(options.validationStrategy) === "onFormOpen") {
+    validationState.validateForm();
   }
 
-  return formInterface
+  return {
+    ...formInterface,
+    submitHandler,
+  };
 }

package/src/composables/useSubform.ts

@@ -1,30 +1,47 @@
-import { computed, isRef, unref, type Ref } from 'vue'
-import type { FieldsTuple, Form, FormDataDefault, FormField } from '../types/form'
-import type { EntityPaths, Paths, PickEntity, PickProps } from '../types/util'
-import type { ValidationResult, Validator } from '../types/validation'
-import { filterErrorsForPath, getLens, getNestedValue, joinPath } from '../utils/path'
-import type { DefineFieldOptions } from './useFieldRegistry'
-import { createValidator, SuccessValidationResult, type ValidatorOptions } from './useValidation'
+import { computed, isRef, unref, type Ref } from "vue";
+import type {
+  FieldsTuple,
+  Form,
+  FormDataDefault,
+  FormField,
+} from "../types/form";
+import type { EntityPaths, Paths, PickEntity, PickProps } from "../types/util";
+import type { ValidationResult, Validator } from "../types/validation";
+import {
+  filterErrorsForPath,
+  getLens,
+  getNestedValue,
+  joinPath,
+} from "../utils/path";
+import type { DefineFieldOptions } from "./useFieldRegistry";
+import type { UseFormOptions } from "./useForm";
+import { useSubmitHandler } from "./useSubmitHandler";
+import {
+  createValidator,
+  SuccessValidationResult,
+  type ValidatorOptions,
+} from "./useValidation";
 
 export interface SubformOptions<_T extends FormDataDefault> {
   // Additional subform-specific options can be added here
 }
 
-class NestedValidator<T extends FormDataDefault, P extends Paths<T>> implements Validator<T> {
+class NestedValidator<T extends FormDataDefault, P extends Paths<T>>
+  implements Validator<T>
+{
   constructor(
     private path: P,
     private validator: Validator<PickEntity<T, P>> | undefined,
-  ) {
-  }
+  ) {}
 
   async validate(data: T): Promise<ValidationResult> {
-    const subFormData = getNestedValue(data, this.path) as PickEntity<T, P>
+    const subFormData = getNestedValue(data, this.path) as PickEntity<T, P>;
 
     if (!this.validator) {
-      return SuccessValidationResult
+      return SuccessValidationResult;
     }
 
-    const validationResult = await this.validator.validate(subFormData)
+    const validationResult = await this.validator.validate(subFormData);
 
     return {
       isValid: validationResult.isValid,
@@ -32,14 +49,13 @@ class NestedValidator<T extends FormDataDefault, P extends Paths<T>> implements
         general: validationResult.errors.general || [],
         propertyErrors: validationResult.errors.propertyErrors
           ? Object.fromEntries(
-              Object.entries(validationResult.errors.propertyErrors).map(([key, errors]) => [
-                joinPath(this.path, key),
-                errors,
-              ]),
+              Object.entries(validationResult.errors.propertyErrors).map(
+                ([key, errors]) => [joinPath(this.path, key), errors],
+              ),
             )
           : {},
       },
-    }
+    };
   }
 }
 
@@ -47,21 +63,22 @@ export function createSubformInterface<
   T extends FormDataDefault,
   K extends EntityPaths<T>,
 >(
-  mainForm: Form<T>,
+  mainForm: Omit<Form<T>, "submitHandler">,
   path: K,
+  formOptions?: UseFormOptions<T>,
   _options?: SubformOptions<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}`
-  type ScopedMainPaths = Paths<T> & MP<SP>
+): Form<PickEntity<T, K>> {
+  type ST = PickEntity<T, K>;
+  type SP = Paths<ST>;
+  type MP<P extends SP> = `${K}.${P}`;
+  type ScopedMainPaths = Paths<T> & MP<SP>;
 
   // Create reactive data scoped to subform path
-  const data = getLens(mainForm.data, path) as Ref<ST>
+  const data = getLens(mainForm.data, path) as Ref<ST>;
 
   const initialData = computed(() => {
-    return getNestedValue(mainForm.initialData.value, path) as ST
-  })
+    return getNestedValue(mainForm.initialData.value, path) as ST;
+  });
 
   const adaptMainFormField = <S extends SP>(
     field: FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>,
@@ -69,92 +86,111 @@ export function createSubformInterface<
     // Where P ist the full path in the main form, we need to adapt it to the subform's path
     return {
       ...field,
-      path: computed(() => unref(field.path).replace(path + '.', '')),
+      path: computed(() => unref(field.path).replace(path + ".", "")),
       setData: (newData: PickProps<ST, S>) => {
-        field.setData(newData as PickProps<T, ScopedMainPaths>)
+        field.setData(newData as PickProps<T, ScopedMainPaths>);
       },
-    } as unknown as FormField<PickProps<ST, S>, S>
-  }
+    } as unknown as FormField<PickProps<ST, S>, S>;
+  };
 
   const getField = <P extends SP>(fieldPath: P) => {
-    const fullPath = joinPath(path, fieldPath)
-    const mainFormField = mainForm.getField(fullPath as ScopedMainPaths)
+    const fullPath = joinPath(path, fieldPath);
+    const mainFormField = mainForm.getField(fullPath as ScopedMainPaths);
 
     if (!mainFormField) {
-      return {} as FormField<PickProps<ST, P>, P>
+      return {} as FormField<PickProps<ST, P>, P>;
     }
 
-    return adaptMainFormField<P>(mainFormField)
-  }
+    return adaptMainFormField<P>(mainFormField);
+  };
 
   // Field operations with path transformation
-  const defineField = <P extends SP>(fieldOptions: DefineFieldOptions<ST, P>) => {
-    const fullPath = joinPath(path, fieldOptions.path)
+  const defineField = <P extends SP>(
+    fieldOptions: DefineFieldOptions<ST, P>,
+  ) => {
+    const fullPath = joinPath(path, fieldOptions.path);
 
     const mainField = mainForm.defineField({
       ...fieldOptions,
       path: fullPath as ScopedMainPaths,
-    })
+    });
 
-    return adaptMainFormField<P>(mainField)
-  }
+    return adaptMainFormField<P>(mainField);
+  };
 
   const fields = computed(<P extends SP>() => {
-    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
+    return (
+      mainForm.fields.value as FormField<
+        PickProps<T, ScopedMainPaths>,
+        ScopedMainPaths
+      >[]
+    )
       .filter((field) => {
-        const fieldPath = field.path.value
-        return fieldPath.startsWith(path + '.') || fieldPath === path
+        const fieldPath = field.path.value;
+        return fieldPath.startsWith(path + ".") || fieldPath === path;
       })
-      .map(field => adaptMainFormField(field)) as FieldsTuple<ST, P>
-  })
+      .map((field) => adaptMainFormField(field)) as FieldsTuple<ST, P>;
+  });
 
   // Helper function to get all fields without type parameter
   const getAllSubformFields = () => {
-    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
-      .filter((field) => {
-        const fieldPath = field.path.value
-        return fieldPath.startsWith(path + '.') || fieldPath === path
-      })
-  }
+    return (
+      mainForm.fields.value as FormField<
+        PickProps<T, ScopedMainPaths>,
+        ScopedMainPaths
+      >[]
+    ).filter((field) => {
+      const fieldPath = field.path.value;
+      return fieldPath.startsWith(path + ".") || fieldPath === path;
+    });
+  };
 
   // State computed from main form with path filtering
-  const isDirty = computed(() => getAllSubformFields().some(field => field.dirty.value))
-  const isTouched = computed(() => getAllSubformFields().some(field => field.touched.value))
+  const isDirty = computed(() =>
+    getAllSubformFields().some((field) => field.dirty.value),
+  );
+  const isTouched = computed(() =>
+    getAllSubformFields().some((field) => field.touched.value),
+  );
 
   // Validation delegates to main form
-  const isValid = computed(() => mainForm.isValid.value)
-  const isValidated = computed(() => mainForm.isValidated.value)
-  const errors = computed(() => filterErrorsForPath(unref(mainForm.errors), path))
+  const isValid = computed(() => mainForm.isValid.value);
+  const isValidated = computed(() => mainForm.isValidated.value);
+  const errors = computed(() =>
+    filterErrorsForPath(unref(mainForm.errors), path),
+  );
 
-  const validateForm = () => mainForm.validateForm()
+  const validateForm = () => mainForm.validateForm();
 
   // Nested subforms
   const getSubForm = <P extends EntityPaths<ST>>(
     subPath: P,
     subOptions?: SubformOptions<PickEntity<ST, P>>,
   ) => {
-    const fullPath = joinPath(path, subPath) as EntityPaths<T>
+    const fullPath = joinPath(path, subPath) as EntityPaths<T>;
     return mainForm.getSubForm(
       fullPath,
       subOptions as SubformOptions<PickEntity<T, typeof fullPath>>,
-    ) as Form<PickEntity<ST, P>>
-  }
+    ) as Form<PickEntity<ST, P>>;
+  };
 
   // Reset scoped to this subform
-  const reset = () => getAllSubformFields().forEach(field => field.reset())
+  const reset = () => getAllSubformFields().forEach((field) => field.reset());
 
-  const defineValidator = (options: ValidatorOptions<ST> | Ref<Validator<ST>>) => {
-    const subValidator = isRef(options) ? options : createValidator(options)
+  const defineValidator = (
+    options: ValidatorOptions<ST> | Ref<Validator<ST>>,
+  ) => {
+    const subValidator = isRef(options) ? options : createValidator(options);
     const validator = computed(
       () => new NestedValidator<T, K>(path, unref(subValidator)),
-    )
+    );
 
-    mainForm.defineValidator(validator)
+    mainForm.defineValidator(validator);
 
-    return subValidator
-  }
+    return subValidator;
+  };
 
-  return {
+  const subFormInterface: Omit<Form<ST>, "submitHandler"> = {
     data: data,
     fields,
     initialData,
@@ -169,5 +205,12 @@ export function createSubformInterface<
     reset,
     validateForm,
     getSubForm,
-  }
+  };
+
+  const submitHandler = useSubmitHandler(subFormInterface, formOptions ?? {});
+
+  return {
+    ...subFormInterface,
+    submitHandler,
+  };
 }

package/src/composables/useSubmitHandler.ts

@@ -0,0 +1,29 @@
+import type { Awaitable, MaybeRef } from '@vueuse/core'
+import { unref } from 'vue'
+import type { Form, FormDataDefault } from '../types/form'
+import type { ValidationStrategy } from '../types/validation'
+
+interface SubmitHandlerOptions {
+  validationStrategy?: MaybeRef<ValidationStrategy>
+}
+
+export function useSubmitHandler<T extends FormDataDefault>(
+  form: Omit<Form<T>, 'submitHandler'>,
+  options: SubmitHandlerOptions,
+) {
+  return (onSubmit: (data: T) => Awaitable<void>) => {
+    return async (event: SubmitEvent) => {
+      event.preventDefault()
+
+      if (unref(options.validationStrategy) !== 'none') {
+        await form.validateForm()
+      }
+
+      if (!form.isValid.value) {
+        return
+      }
+
+      await onSubmit(form.data.value)
+    }
+  }
+}