@teamnovu/kit-vue-forms 0.0.9 → 0.0.11

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

@@ -1,7 +1,7 @@
 import { Form } from '../types/form.ts';
 import { Paths, PickProps } from '../types/util.ts';
 import { UseFieldOptions } from '../composables/useField.ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, Ref, VNode } from 'vue';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 import { ValidationErrors, ErrorMessage } from '../index.js';
 export interface FieldProps<TData extends object, TPath extends string> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
     form: Form<TData>;
@@ -12,12 +12,12 @@ declare const _default: <TData extends object, TPath extends Paths<TData>>(__VLS
     attrs: any;
     slots: {
         default?(_: {
-            data: Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>;
-            path: Ref<TPath, TPath>;
-            initialValue: Readonly< Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>>;
-            errors: Ref<ValidationErrors>;
-            touched: Ref<boolean>;
-            dirty: Ref<boolean>;
+            data: PickProps<TData, TPath>;
+            path: TPath;
+            initialValue: PickProps<TData, TPath>;
+            errors: ValidationErrors;
+            touched: boolean;
+            dirty: boolean;
             setData: (newData: PickProps<TData, TPath>) => void;
             onBlur: () => void;
             onFocus: () => void;

package/dist/composables/useField.d.ts

@@ -7,4 +7,5 @@ export interface UseFieldOptions<T, K extends string> {
     path: K;
     errors?: MaybeRef<ValidationErrors>;
 }
+export declare function getEmptyField(): FormField<unknown, string>;
 export declare function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K>;

package/dist/composables/useFieldRegistry.d.ts

@@ -1,4 +1,4 @@
-import { FormDataDefault, FormField } from '../types/form';
+import { FieldsTuple, FormDataDefault, FormField } from '../types/form';
 import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
 type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>;
@@ -11,7 +11,7 @@ interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T>
 export declare function useFieldRegistry<T extends FormDataDefault>(formState: FormState<T>): {
     fields: FieldRegistryCache<T>;
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
-    getFields: () => ResolvedFormField<T, Paths<T>>[];
+    getFields: <TData extends T>() => FieldsTuple<TData>;
     registerField: <K extends Paths<T>>(field: ResolvedFormField<T, K>) => void;
     defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => FormField<K extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_1 ? T_1 extends TRest ? T_1 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_2 ? T_2 extends TRest ? T_2 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_3 ? T_3 extends TRest ? T_3 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_4 ? T_4 extends TRest ? T_4 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_5 ? T_5 extends TRest ? T_5 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_6 ? T_6 extends TRest ? T_6 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_7 ? T_7 extends TRest ? T_7 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_8 ? T_8 extends TRest ? T_8 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_9 ? T_9 extends TRest ? T_9 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_10 ? T_10 extends TRest ? T_10 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? /*elided*/ any : never : TRoot extends `${number}` ? never : never : T_10 extends string | number | symbol ? Required<any>[T_10] : T_10 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_9 extends string | number | symbol ? Required<any>[T_9] : T_9 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_8 extends string | number | symbol ? Required<any>[T_8] : T_8 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_7 extends string | number | symbol ? Required<any>[T_7] : T_7 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_6 extends string | number | symbol ? Required<any>[T_6] : T_6 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_5 extends string | number | symbol ? Required<any>[T_5] : T_5 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_4 extends string | number | symbol ? Required<any>[T_4] : T_4 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_3 extends string | number | symbol ? Required<any>[T_3] : T_3 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_2 extends string | number | symbol ? Required<any>[T_2] : T_2 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_1 extends string | number | symbol ? Required<any>[T_1] : T_1 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : K extends string | number | symbol ? any : K extends `${number}` ? never : never, K>;
 };

package/dist/composables/useValidation.d.ts

@@ -16,7 +16,7 @@ export declare function useValidation<T extends FormDataDefault>(formState: {
     data: T;
 }, options: ValidationOptions<T>): {
     validateForm: () => Promise<ValidationResult>;
-    defineValidator: (options: ValidatorOptions<T> | Ref<Validator<T>>) => Ref<Validator<T> | undefined, Validator<T> | undefined>;
+    defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => Ref<Validator<TData> | undefined, Validator<TData> | undefined>;
     isValid: ComputedRef<boolean>;
     validators: Ref<Ref<Validator<T> | undefined, Validator<T> | undefined>[], Ref<Validator<T> | undefined, Validator<T> | undefined>[]>;
     isValidated: Ref<boolean, boolean>;

package/dist/index.mjs

@@ -1,44 +1,44 @@
 var x = Object.defineProperty;
 var K = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var R = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as W, toRaw as q, computed as d, unref as c, reactive as b, watch as F, toRefs as O, toRef as S, ref as A, isRef as _, getCurrentScope as I, onBeforeUnmount as J, defineComponent as T, renderSlot as B, normalizeProps as G, guardReactiveProps as L } from "vue";
+var S = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
+import { toValue as W, toRaw as B, computed as d, unref as u, reactive as w, watch as E, toRefs as A, ref as y, toRef as P, isRef as _, getCurrentScope as I, onBeforeUnmount as J, defineComponent as T, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
 import "zod";
-function y(e) {
-  const r = W(e), t = q(r);
+function F(e) {
+  const r = W(e), t = B(r);
   return structuredClone(t);
 }
 function N(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
-function m(e, r) {
+function R(e, r) {
   return (Array.isArray(r) ? r : N(r)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     e
   );
 }
-function U(e, r, t) {
+function Z(e, r, t) {
   const a = Array.isArray(r) ? r : N(r);
   if (a.length === 0)
     throw new Error("Path cannot be empty");
   const s = a.at(-1), n = a.slice(0, -1).reduce(
-    (u, v) => u[v],
+    (o, v) => o[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
   n[s] = t;
 }
-const z = (e, r) => d({
+const $ = (e, r) => d({
   get() {
-    return m(c(e), c(r));
+    return R(u(e), u(r));
   },
   set(t) {
-    U(c(e), c(r), t);
+    Z(u(e), u(r), t);
   }
 });
-function E(e, r) {
+function m(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function Z(e, r) {
+function k(e, r) {
   if (!r)
     return e;
   const t = `${r}.`, a = Object.fromEntries(
@@ -52,15 +52,37 @@ function Z(e, r) {
     propertyErrors: a
   };
 }
-function k(e) {
-  const r = b({
+function q() {
+  return {
+    setData: () => {
+    },
+    onBlur: () => {
+    },
+    onFocus: () => {
+    },
+    reset: () => {
+    },
+    setErrors: () => {
+    },
+    clearErrors: () => {
+    },
+    data: y(void 0),
+    initialValue: y(void 0),
+    path: y(""),
+    errors: y([]),
+    touched: y(!1),
+    dirty: d(() => !1)
+  };
+}
+function H(e) {
+  const r = w({
     value: e.value,
     path: e.path,
-    initialValue: d(() => Object.freeze(y(e.initialValue))),
-    errors: c(e.errors) || [],
+    initialValue: d(() => Object.freeze(F(e.initialValue))),
+    errors: u(e.errors) || [],
     touched: !1
   });
-  F(() => c(e.errors), (f) => {
+  E(() => u(e.errors), (f) => {
     r.errors = f || [];
   });
   const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
@@ -68,61 +90,61 @@ function k(e) {
   }, s = () => {
     r.touched = !0;
   }, n = () => {
-  }, u = () => {
-    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
+  }, o = () => {
+    r.value = F(r.initialValue), r.touched = !1, r.errors = [];
   }, v = (f) => {
     r.errors = f;
-  }, o = () => {
+  }, l = () => {
     r.errors = [];
-  }, l = O(r);
+  }, c = A(r);
   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: t,
     setData: a,
     onBlur: s,
     onFocus: n,
-    reset: u,
+    reset: o,
     setErrors: v,
-    clearErrors: o
+    clearErrors: l
   };
 }
-function H(e) {
-  const r = {}, t = (u) => {
-    const v = c(u.path);
-    r[v] = u;
+function Q(e) {
+  const r = {}, t = (o) => {
+    const v = u(o.path);
+    r[v] = o;
   };
   return {
     fields: r,
-    getField: (u) => r[u] ?? {},
+    getField: (o) => o in r ? r[o] : (console.warn(`Field with path "${o}" is not registered.`), q()),
     getFields: () => Object.values(r),
     registerField: t,
-    defineField: (u) => {
-      const v = k({
-        ...u,
-        value: z(S(e, "data"), u.path),
-        initialValue: d(() => m(e.initialData, c(u.path)))
+    defineField: (o) => {
+      const v = H({
+        ...o,
+        value: $(P(e, "data"), o.path),
+        initialValue: d(() => R(e.initialData, u(o.path)))
       });
       return t(v), v;
     }
   };
 }
-function Q(e) {
-  const r = d(() => e.getFields().some((a) => c(a.dirty))), t = d(() => e.getFields().some((a) => c(a.touched)));
+function X(e) {
+  const r = d(() => e.getFields().some((a) => u(a.dirty))), t = d(() => e.getFields().some((a) => u(a.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function X(e) {
+function Y(e) {
   return e.filter(
     (r, t, a) => a.indexOf(r) === t
   );
 }
-function C(...e) {
+function z(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
@@ -132,19 +154,19 @@ function C(...e) {
     if (!a)
       return r;
     const s = (r ?? []).concat(t);
-    return X(s);
+    return Y(s);
   }, e[0]);
 }
-function Y(...e) {
+function rr(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
     const s = e.map((n) => n[a]).filter(Boolean);
     return {
       ...t,
-      [a]: C(...s)
+      [a]: z(...s)
     };
   }, {});
 }
-function D(...e) {
+function b(...e) {
   if (!e.length)
     return {
       general: [],
@@ -153,18 +175,18 @@ function D(...e) {
   const r = e[0];
   return e.length === 1 ? r : e.slice(1).reduce(
     (t, a) => ({
-      general: C(t.general, a.general),
-      propertyErrors: Y(t.propertyErrors ?? {}, a.propertyErrors ?? {})
+      general: z(t.general, a.general),
+      propertyErrors: rr(t.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
 }
-function j(e) {
+function O(e) {
   var a;
   const r = (((a = e.general) == null ? void 0 : a.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
   return r || t;
 }
-function rr(e) {
+function er(e) {
   const r = e.issues.filter((a) => a.path.length === 0).map((a) => a.message), t = e.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
     const n = s.path.join(".");
     return {
@@ -184,7 +206,7 @@ const V = {
     propertyErrors: {}
   }
 };
-class er {
+class tr {
   constructor(r) {
     this.schema = r;
   }
@@ -194,7 +216,7 @@ class er {
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
       return V;
-    const a = rr(t.error);
+    const a = er(t.error);
     return {
       isValid: !1,
       errors: {
@@ -204,7 +226,7 @@ class er {
     };
   }
 }
-class tr {
+class ar {
   constructor(r) {
     this.validateFn = r;
   }
@@ -225,11 +247,11 @@ class tr {
     }
   }
 }
-class ar {
+class sr {
   constructor(r, t) {
-    R(this, "schemaValidator");
-    R(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
+    S(this, "schemaValidator");
+    S(this, "functionValidator");
+    this.schema = r, this.validateFn = t, this.schemaValidator = new tr(this.schema), this.functionValidator = new ar(this.validateFn);
   }
   async validate(r) {
     const [t, a] = await Promise.all([
@@ -238,83 +260,83 @@ class ar {
     ]);
     return {
       isValid: t.isValid && a.isValid,
-      errors: D(t.errors, a.errors)
+      errors: b(t.errors, a.errors)
     };
   }
 }
-function P(e) {
-  return d(() => new ar(
-    c(e.schema),
-    c(e.validateFn)
+function j(e) {
+  return d(() => new sr(
+    u(e.schema),
+    u(e.validateFn)
   ));
 }
-function sr(e, r) {
-  const t = b({
-    validators: A([P(r)]),
+function ir(e, r) {
+  const t = w({
+    validators: y([j(r)]),
     isValidated: !1,
-    errors: c(r.errors) ?? V.errors
+    errors: u(r.errors) ?? V.errors
   });
-  F(() => c(r.errors), async () => {
-    const o = await s();
-    n(o.errors);
-  }, { immediate: !0 }), F(
+  E(() => u(r.errors), async () => {
+    const l = await s();
+    n(l.errors);
+  }, { immediate: !0 }), E(
     [() => t.validators],
-    async (o) => {
+    async (l) => {
       if (t.isValidated)
-        if (o) {
-          const l = await s();
-          t.errors = l.errors;
+        if (l) {
+          const c = await s();
+          t.errors = c.errors;
         } else
           t.errors = V.errors;
     },
     { immediate: !0 }
-  ), F(() => e.data, () => {
-    t.isValidated && u();
+  ), E(() => e.data, () => {
+    t.isValidated && o();
   });
-  const a = (o) => {
-    const l = _(o) ? o : P(o);
-    return t.validators.push(l), I() && J(() => {
+  const a = (l) => {
+    const c = _(l) ? l : j(l);
+    return t.validators.push(c), I() && J(() => {
       t.validators = t.validators.filter(
-        (f) => f !== l
+        (f) => f !== c
       );
-    }), l;
+    }), c;
   };
   async function s() {
-    const o = await Promise.all(
-      t.validators.filter((p) => c(p) !== void 0).map((p) => c(p).validate(e.data))
-    ), l = o.every((p) => p.isValid);
+    const l = await Promise.all(
+      t.validators.filter((p) => u(p) !== void 0).map((p) => u(p).validate(e.data))
+    ), c = l.every((p) => p.isValid);
     let { errors: f } = V;
-    if (!l) {
-      const p = o.map((w) => w.errors);
-      f = D(...p);
+    if (!c) {
+      const p = l.map((D) => D.errors);
+      f = b(...p);
     }
     return {
       errors: f,
-      isValid: l
+      isValid: c
     };
   }
-  const n = (o) => {
-    t.errors = D(c(r.errors) ?? V.errors, o);
-  }, u = async () => {
-    const o = await s();
-    return n(o.errors), t.isValidated = !0, {
-      isValid: !j(o.errors),
+  const n = (l) => {
+    t.errors = b(u(r.errors) ?? V.errors, l);
+  }, o = async () => {
+    const l = await s();
+    return n(l.errors), t.isValidated = !0, {
+      isValid: !O(l.errors),
       errors: t.errors
     };
-  }, v = d(() => !j(t.errors));
+  }, v = d(() => !O(t.errors));
   return {
-    ...O(t),
-    validateForm: u,
+    ...A(t),
+    validateForm: o,
     defineValidator: a,
     isValid: v
   };
 }
-class ir {
+class nr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
   async validate(r) {
-    const t = m(r, this.path);
+    const t = R(r, this.path);
     if (!this.validator)
       return V;
     const a = await this.validator.validate(t);
@@ -324,7 +346,7 @@ class ir {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            E(this.path, s),
+            m(this.path, s),
             n
           ])
         ) : {}
@@ -332,51 +354,50 @@ class ir {
     };
   }
 }
-function nr(e, r, t) {
-  const a = z(e.data, r), s = d(() => m(e.initialData.value, r)), n = (i) => ({
+function or(e, r, t) {
+  const a = $(e.data, r), s = d(() => R(e.initialData.value, r)), n = (i) => ({
     ...i,
-    path: d(() => c(i.path).replace(r + ".", "")),
+    path: d(() => u(i.path).replace(r + ".", "")),
     setData: (h) => {
       i.setData(h);
     }
-  }), u = (i) => {
-    const h = E(r, i), g = e.getField(h);
-    if (g)
-      return n(g);
+  }), o = (i) => {
+    const h = m(r, i), g = e.getField(h);
+    return g ? n(g) : {};
   }, v = (i) => {
-    const h = E(r, i.path), g = e.defineField({
+    const h = m(r, i.path), g = e.defineField({
       ...i,
       path: h
     });
     return n(g);
-  }, o = () => e.getFields().filter((i) => {
+  }, l = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }).map((i) => n(i)), l = () => e.getFields().filter((i) => {
+  }).map((i) => n(i)), c = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), f = d(() => l().some((i) => i.dirty.value)), p = d(() => l().some((i) => i.touched.value)), w = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => Z(c(e.errors), r));
+  }), f = d(() => c().some((i) => i.dirty.value)), p = d(() => c().some((i) => i.touched.value)), D = d(() => e.isValid.value), C = d(() => e.isValidated.value), M = d(() => k(u(e.errors), r));
   return {
     data: a,
     initialData: s,
     defineField: v,
-    getField: u,
-    getFields: o,
+    getField: o,
+    getFields: l,
     isDirty: f,
     isTouched: p,
-    isValid: w,
-    isValidated: M,
-    errors: $,
+    isValid: D,
+    isValidated: C,
+    errors: M,
     defineValidator: (i) => {
-      const h = _(i) ? i : P(i), g = d(
-        () => new ir(r, c(h))
+      const h = _(i) ? i : j(i), g = d(
+        () => new nr(r, u(h))
       );
       return e.defineValidator(g), h;
     },
-    reset: () => l().forEach((i) => i.reset()),
+    reset: () => c().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
     getSubForm: (i, h) => {
-      const g = E(r, i);
+      const g = m(r, i);
       return e.getSubForm(
         g,
         h
@@ -384,28 +405,30 @@ function nr(e, r, t) {
     }
   };
 }
-function vr(e) {
-  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), a = b({
+function pr(e) {
+  const r = d(() => Object.freeze(F(e.initialData))), t = y(F(r)), a = w({
     initialData: r,
     data: t
-  }), s = H(a), n = sr(a, e), u = Q(s), v = () => {
-    t.value = y(r), s.getFields().forEach((f) => f.reset());
+  }), s = Q(a), n = ir(a, e), o = X(s), v = () => {
+    t.value = F(r), s.getFields().forEach(
+      (f) => f.reset()
+    );
   };
-  function o(f, p) {
-    return nr(l, f);
+  function l(f, p) {
+    return or(c, f);
   }
-  const l = {
+  const c = {
     ...s,
     ...n,
-    ...u,
+    ...o,
     reset: v,
-    getSubForm: o,
-    initialData: S(a, "initialData"),
-    data: S(a, "data")
+    getSubForm: l,
+    initialData: P(a, "initialData"),
+    data: P(a, "data")
   };
-  return l;
+  return c;
 }
-const pr = /* @__PURE__ */ T({
+const Vr = /* @__PURE__ */ T({
   __name: "Field",
   props: {
     form: {},
@@ -416,13 +439,12 @@ const pr = /* @__PURE__ */ T({
   },
   setup(e) {
     const r = e, t = r.form.defineField({
-      path: r.path,
-      required: r.required
+      path: r.path
     });
-    return (a, s) => B(a.$slots, "default", G(L(c(t))));
+    return (a, s) => G(a.$slots, "default", L(U(w(u(t)))));
   }
 });
 export {
-  pr as Field,
-  vr as useForm
+  Vr as Field,
+  pr as useForm
 };

package/dist/types/form.d.ts

@@ -19,18 +19,22 @@ export interface FormField<T, P extends string> {
     setErrors: (newErrors: ValidationErrorMessage[]) => void;
     clearErrors: () => void;
 }
+export type FieldsTuple<T, TPaths = Paths<T>> = [
+    ...(TPaths extends infer P ? P extends string ? FormField<PickProps<T, P>, P> : never : never)[]
+];
+export type AnyField<T> = FormField<PickProps<T, Paths<T>>, Paths<T>>;
 export interface Form<T extends FormDataDefault> {
     data: Ref<T>;
     initialData: Readonly<Ref<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> | undefined;
-    getFields: () => FormField<PickProps<T, Paths<T>>, Paths<T>>[];
+    getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>;
+    getFields: <TData extends T>() => FieldsTuple<TData>;
     isDirty: Ref<boolean>;
     isTouched: Ref<boolean>;
     isValid: Ref<boolean>;
     isValidated: Ref<boolean>;
     errors: Ref<ErrorBag>;
-    defineValidator: (options: ValidatorOptions<T> | Ref<Validator<T>>) => Ref<Validator<T> | undefined>;
+    defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => Ref<Validator<TData> | undefined>;
     reset: () => void;
     validateForm: () => Promise<ValidationResult>;
     getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Form<PickEntity<T, P>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "",
   "main": "index.js",
   "exports": {

package/src/components/Field.vue

@@ -1,11 +1,12 @@
 <template>
-  <slot v-bind="field" />
+  <slot v-bind="reactive(field)" />
 </template>
 
 <script
   setup lang="ts"
   generic="TData extends object, TPath extends Paths<TData>"
 >
+import { reactive } from 'vue'
 import type { Form } from '../types/form.ts'
 import type { Paths, PickProps } from '../types/util.ts'
 import type { UseFieldOptions } from '../composables/useField.ts'
@@ -18,6 +19,5 @@ const props = defineProps<FieldProps<TData, TPath>>()
 
 const field = props.form.defineField({
   path: props.path,
-  required: props.required,
 })
 </script>

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -10,6 +10,23 @@ export interface UseFieldOptions<T, K extends string> {
   errors?: MaybeRef<ValidationErrors>
 }
 
+export function getEmptyField(): FormField<unknown, string> {
+  return {
+    setData: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    reset: () => {},
+    setErrors: () => {},
+    clearErrors: () => {},
+    data: ref(undefined),
+    initialValue: ref(undefined),
+    path: ref(''),
+    errors: ref([]),
+    touched: ref(false),
+    dirty: computed(() => false),
+  }
+}
+
 export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
   const state = reactive({
     value: options.value,

package/src/composables/useFieldRegistry.ts

@@ -1,8 +1,8 @@
 import { computed, toRef, unref } from 'vue'
-import type { FormDataDefault, FormField } from '../types/form'
+import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
 import { getLens, getNestedValue } from '../utils/path'
-import { useField, type UseFieldOptions } from './useField'
+import { getEmptyField, useField, type UseFieldOptions } from './useField'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>
@@ -26,12 +26,18 @@ export function useFieldRegistry<T extends FormDataDefault>(
     fields[path] = field
   }
 
-  const getField = <K extends Paths<T>>(path: K) => {
-    return (fields[path] ?? {}) as ResolvedFormField<T, K>
+  const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
+    if (!(path in fields)) {
+      console.warn(`Field with path "${path}" is not registered.`)
+
+      return getEmptyField() as ResolvedFormField<T, K>
+    }
+
+    return fields[path] as ResolvedFormField<T, K>
   }
 
-  const getFields = () => {
-    return Object.values(fields) as ResolvedFormField<T, Paths<T>>[]
+  const getFields = <TData extends T>() => {
+    return Object.values(fields) as FieldsTuple<TData>
   }
 
   const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => {

package/src/composables/useForm.ts

@@ -1,5 +1,5 @@
 import { computed, reactive, ref, toRef, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
-import type { Form, FormDataDefault } from '../types/form'
+import type { AnyField, Form, FormDataDefault } from '../types/form'
 import type { EntityPaths, PickEntity } from '../types/util'
 import type { ValidationStrategy } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -32,7 +32,9 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
 
   const reset = () => {
     data.value = cloneRefValue(initialData)
-    fields.getFields().forEach(field => field.reset())
+    fields.getFields().forEach(
+      (field: AnyField<T>) => field.reset(),
+    )
   }
 
   function getSubForm<K extends EntityPaths<T>>(

package/src/composables/useFormState.ts

@@ -1,16 +1,16 @@
 import { computed, unref } from 'vue'
-import type { FormDataDefault } from '../types/form'
+import type { AnyField, FormDataDefault } from '../types/form'
 import type { FieldRegistry } from './useFieldRegistry'
 
 export function useFormState<T extends FormDataDefault>(
   formFieldRegistry: FieldRegistry<T>,
 ) {
   const isDirty = computed(() => {
-    return formFieldRegistry.getFields().some(field => unref(field.dirty))
+    return formFieldRegistry.getFields().some((field: AnyField<T>) => unref(field.dirty))
   })
 
   const isTouched = computed(() => {
-    return formFieldRegistry.getFields().some(field => unref(field.touched))
+    return formFieldRegistry.getFields().some((field: AnyField<T>) => unref(field.touched))
   })
 
   return {

package/src/composables/useSubform.ts

@@ -1,5 +1,5 @@
 import { computed, isRef, unref, type Ref } from 'vue'
-import type { Form, FormDataDefault, FormField } from '../types/form'
+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'
@@ -81,7 +81,7 @@ export function createSubformInterface<
     const mainFormField = mainForm.getField(fullPath as ScopedMainPaths)
 
     if (!mainFormField) {
-      return
+      return {} as FormField<PickProps<ST, P>, P>
     }
 
     return adaptMainFormField<P>(mainFormField)
@@ -99,13 +99,13 @@ export function createSubformInterface<
     return adaptMainFormField<P>(mainField)
   }
 
-  const getFields = <P extends SP>(): FormField<PickProps<ST, P>, P>[] => {
+  const getFields = <P extends SP>() => {
     return (mainForm.getFields() as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
       .filter((field) => {
         const fieldPath = field.path.value
         return fieldPath.startsWith(path + '.') || fieldPath === path
       })
-      .map(field => adaptMainFormField(field))
+      .map(field => adaptMainFormField(field)) as FieldsTuple<ST, P>
   }
 
   // Helper function to get all fields without type parameter

package/src/composables/useValidation.ts

@@ -155,10 +155,10 @@ export function useValidation<T extends FormDataDefault>(
     }
   })
 
-  const defineValidator = (options: ValidatorOptions<T> | Ref<Validator<T>>) => {
+  const defineValidator = <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => {
     const validator = isRef(options) ? options : createValidator(options)
 
-    validationState.validators.push(validator)
+    validationState.validators.push(validator as Ref<Validator<T> | undefined>)
 
     if (getCurrentScope()) {
       onBeforeUnmount(() => {

package/src/types/form.ts

@@ -22,6 +22,16 @@ export interface FormField<T, P extends string> {
   clearErrors: () => void
 }
 
+export type FieldsTuple<T, TPaths = Paths<T>> = [...(
+  TPaths extends infer P
+    ? P extends string
+      ? FormField<PickProps<T, P>, P>
+      : never
+    : never
+)[]]
+
+export type AnyField<T> = FormField<PickProps<T, Paths<T>>, Paths<T>>
+
 export interface Form<T extends FormDataDefault> {
   // Data properties
   data: Ref<T>
@@ -29,8 +39,8 @@ export interface Form<T extends FormDataDefault> {
 
   // Field operations
   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> | undefined
-  getFields: () => FormField<PickProps<T, Paths<T>>, Paths<T>>[]
+  getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>
+  getFields: <TData extends T>() => FieldsTuple<TData>
 
   // State properties
   isDirty: Ref<boolean>
@@ -39,7 +49,7 @@ export interface Form<T extends FormDataDefault> {
   isValidated: Ref<boolean>
   errors: Ref<ErrorBag>
 
-  defineValidator: (options: ValidatorOptions<T> | Ref<Validator<T>>) => Ref<Validator<T> | undefined>
+  defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => Ref<Validator<TData> | undefined>
 
   // Operations
   reset: () => void

package/tsconfig.json

@@ -4,12 +4,11 @@
     "outDir": "dist",
     "verbatimModuleSyntax": true,
     "types": [
-      "vue",
-      "vite/client",
-    ],
+      "vite/client"
+    ]
   },
   "include": [
-    "src/**/*",
+    "src/**/*"
   ],
   "exclude": [
     "dist",