@teamnovu/kit-vue-forms 0.0.10 → 0.0.12

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

@@ -13,7 +13,7 @@ export declare function useFieldRegistry<T extends FormDataDefault>(formState: F
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
     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>;
+    defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => ResolvedFormField<T, K>;
 };
 export type FieldRegistry<T extends FormDataDefault> = ReturnType<typeof useFieldRegistry<T>>;
 export {};

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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 S = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as W, toRaw as I, computed as d, unref as c, reactive as m, watch as F, toRefs as O, toRef as D, ref as A, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
+import { toValue as W, toRaw as I, computed as d, unref as u, reactive as m, watch as F, toRefs as O, toRef as D, ref as A, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
 import "zod";
 function y(e) {
   const r = W(e), t = I(r);
@@ -12,27 +12,27 @@ function N(e) {
 }
 function w(e, r) {
   return (Array.isArray(r) ? r : N(r)).reduce(
-    (a, s) => a == null ? void 0 : a[s],
+    (s, a) => s == null ? void 0 : s[a],
     e
   );
 }
 function Z(e, r, t) {
-  const a = Array.isArray(r) ? r : N(r);
-  if (a.length === 0)
+  const s = Array.isArray(r) ? r : N(r);
+  if (s.length === 0)
     throw new Error("Path cannot be empty");
-  const s = a.at(-1), n = a.slice(0, -1).reduce(
-    (u, v) => u[v],
+  const a = s.at(-1), n = s.slice(0, -1).reduce(
+    (o, v) => o[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
-  n[s] = t;
+  n[a] = t;
 }
 const z = (e, r) => d({
   get() {
-    return w(c(e), c(r));
+    return w(u(e), u(r));
   },
   set(t) {
-    Z(c(e), c(r), t);
+    Z(u(e), u(r), t);
   }
 });
 function E(e, r) {
@@ -41,15 +41,15 @@ function E(e, r) {
 function k(e, r) {
   if (!r)
     return e;
-  const t = `${r}.`, a = Object.fromEntries(
-    Object.entries(e.propertyErrors).filter(([s]) => s.startsWith(t)).map(
-      ([s, n]) => [s.slice(t.length), n]
+  const t = `${r}.`, s = Object.fromEntries(
+    Object.entries(e.propertyErrors).filter(([a]) => a.startsWith(t)).map(
+      ([a, n]) => [a.slice(t.length), n]
     )
   );
   return {
     general: e.general,
     // Keep general errors
-    propertyErrors: a
+    propertyErrors: s
   };
 }
 function q(e) {
@@ -57,61 +57,64 @@ function q(e) {
     value: e.value,
     path: e.path,
     initialValue: d(() => Object.freeze(y(e.initialValue))),
-    errors: c(e.errors) || [],
+    errors: u(e.errors) || [],
     touched: !1
   });
-  F(() => c(e.errors), (f) => {
+  F(() => u(e.errors), (f) => {
     r.errors = f || [];
   });
-  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
+  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
     r.value = f;
-  }, s = () => {
+  }, a = () => {
     r.touched = !0;
   }, n = () => {
-  }, u = () => {
+  }, o = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
   }, v = (f) => {
     r.errors = f;
-  }, o = () => {
+  }, l = () => {
     r.errors = [];
-  }, l = O(r);
+  }, c = O(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,
+    setData: s,
+    onBlur: a,
     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;
+  const r = {}, t = (o) => {
+    const v = u(o.path);
+    r[v] = o;
+  }, s = (o) => {
+    if (!r[o]) {
+      const v = q({
+        path: o,
+        value: z(D(e, "data"), o),
+        initialValue: d(() => w(e.initialData, o))
+      });
+      return t(v), v;
+    }
+    return r[o];
   };
   return {
     fields: r,
-    getField: (u) => r[u] ?? {},
+    getField: s,
     getFields: () => Object.values(r),
     registerField: t,
-    defineField: (u) => {
-      const v = q({
-        ...u,
-        value: z(D(e, "data"), u.path),
-        initialValue: d(() => w(e.initialData, c(u.path)))
-      });
-      return t(v), v;
-    }
+    defineField: (o) => s(o.path)
   };
 }
 function Q(e) {
-  const r = d(() => e.getFields().some((a) => c(a.dirty))), t = d(() => e.getFields().some((a) => c(a.touched)));
+  const r = d(() => e.getFields().some((s) => u(s.dirty))), t = d(() => e.getFields().some((s) => u(s.touched)));
   return {
     isDirty: r,
     isTouched: t
@@ -119,28 +122,28 @@ function Q(e) {
 }
 function X(e) {
   return e.filter(
-    (r, t, a) => a.indexOf(r) === t
+    (r, t, s) => s.indexOf(r) === t
   );
 }
 function C(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
-    const a = ((t == null ? void 0 : t.length) ?? 0) > 0;
+    const s = ((t == null ? void 0 : t.length) ?? 0) > 0;
     if (!r && ((t == null ? void 0 : t.length) ?? 0) > 0)
       return t;
-    if (!a)
+    if (!s)
       return r;
-    const s = (r ?? []).concat(t);
-    return X(s);
+    const a = (r ?? []).concat(t);
+    return X(a);
   }, e[0]);
 }
 function Y(...e) {
-  return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
-    const s = e.map((n) => n[a]).filter(Boolean);
+  return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
+    const a = e.map((n) => n[s]).filter(Boolean);
     return {
       ...t,
-      [a]: C(...s)
+      [s]: C(...a)
     };
   }, {});
 }
@@ -152,24 +155,24 @@ function P(...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 ?? {})
+    (t, s) => ({
+      general: C(t.general, s.general),
+      propertyErrors: Y(t.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     r
   );
 }
 function j(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;
+  var s;
+  const r = (((s = e.general) == null ? void 0 : s.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, a]) => a == null ? void 0 : a.length).length > 0;
   return r || t;
 }
 function rr(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(".");
+  const r = e.issues.filter((s) => s.path.length === 0).map((s) => s.message), t = e.issues.filter((s) => s.path.length > 0).reduce((s, a) => {
+    const n = a.path.join(".");
     return {
-      ...a,
-      [n]: [...a[n] ?? [], s.message]
+      ...s,
+      [n]: [...s[n] ?? [], a.message]
     };
   }, {});
   return {
@@ -177,7 +180,7 @@ function rr(e) {
     propertyErrors: t
   };
 }
-const V = {
+const p = {
   isValid: !0,
   errors: {
     general: [],
@@ -190,16 +193,16 @@ class er {
   }
   async validate(r) {
     if (!this.schema)
-      return V;
+      return p;
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
-      return V;
-    const a = rr(t.error);
+      return p;
+    const s = rr(t.error);
     return {
       isValid: !1,
       errors: {
-        general: a.general ?? [],
-        propertyErrors: a.propertyErrors ?? {}
+        general: s.general ?? [],
+        propertyErrors: s.propertyErrors ?? {}
       }
     };
   }
@@ -210,10 +213,10 @@ class tr {
   }
   async validate(r) {
     if (!this.validateFn)
-      return V;
+      return p;
     try {
       const t = await this.validateFn(r);
-      return t.isValid ? V : t;
+      return t.isValid ? p : t;
     } catch (t) {
       return {
         isValid: !1,
@@ -225,87 +228,87 @@ class tr {
     }
   }
 }
-class ar {
+class sr {
   constructor(r, t) {
     S(this, "schemaValidator");
     S(this, "functionValidator");
     this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
   }
   async validate(r) {
-    const [t, a] = await Promise.all([
+    const [t, s] = await Promise.all([
       this.schemaValidator.validate(r),
       this.functionValidator.validate(r)
     ]);
     return {
-      isValid: t.isValid && a.isValid,
-      errors: P(t.errors, a.errors)
+      isValid: t.isValid && s.isValid,
+      errors: P(t.errors, s.errors)
     };
   }
 }
 function b(e) {
-  return d(() => new ar(
-    c(e.schema),
-    c(e.validateFn)
+  return d(() => new sr(
+    u(e.schema),
+    u(e.validateFn)
   ));
 }
-function sr(e, r) {
+function ar(e, r) {
   const t = m({
     validators: A([b(r)]),
     isValidated: !1,
-    errors: c(r.errors) ?? V.errors
+    errors: u(r.errors) ?? p.errors
   });
-  F(() => c(r.errors), async () => {
-    const o = await s();
-    n(o.errors);
+  F(() => u(r.errors), async () => {
+    const l = await a();
+    n(l.errors);
   }, { immediate: !0 }), F(
     [() => t.validators],
-    async (o) => {
+    async (l) => {
       if (t.isValidated)
-        if (o) {
-          const l = await s();
-          t.errors = l.errors;
+        if (l) {
+          const c = await a();
+          t.errors = c.errors;
         } else
-          t.errors = V.errors;
+          t.errors = p.errors;
     },
     { immediate: !0 }
   ), F(() => e.data, () => {
-    t.isValidated && u();
+    t.isValidated && o();
   });
-  const a = (o) => {
-    const l = _(o) ? o : b(o);
-    return t.validators.push(l), J() && T(() => {
+  const s = (l) => {
+    const c = _(l) ? l : b(l);
+    return t.validators.push(c), J() && T(() => {
       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);
-    let { errors: f } = V;
-    if (!l) {
-      const p = o.map((R) => R.errors);
-      f = P(...p);
+  async function a() {
+    const l = await Promise.all(
+      t.validators.filter((V) => u(V) !== void 0).map((V) => u(V).validate(e.data))
+    ), c = l.every((V) => V.isValid);
+    let { errors: f } = p;
+    if (!c) {
+      const V = l.map((R) => R.errors);
+      f = P(...V);
     }
     return {
       errors: f,
-      isValid: l
+      isValid: c
     };
   }
-  const n = (o) => {
-    t.errors = P(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 = P(u(r.errors) ?? p.errors, l);
+  }, o = async () => {
+    const l = await a();
+    return n(l.errors), t.isValidated = !0, {
+      isValid: !j(l.errors),
       errors: t.errors
     };
   }, v = d(() => !j(t.errors));
   return {
     ...O(t),
-    validateForm: u,
-    defineValidator: a,
+    validateForm: o,
+    defineValidator: s,
     isValid: v
   };
 }
@@ -316,15 +319,15 @@ class ir {
   async validate(r) {
     const t = w(r, this.path);
     if (!this.validator)
-      return V;
-    const a = await this.validator.validate(t);
+      return p;
+    const s = await this.validator.validate(t);
     return {
-      isValid: a.isValid,
+      isValid: s.isValid,
       errors: {
-        general: a.errors.general || [],
-        propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            E(this.path, s),
+        general: s.errors.general || [],
+        propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
+          Object.entries(s.errors.propertyErrors).map(([a, n]) => [
+            E(this.path, a),
             n
           ])
         ) : {}
@@ -333,13 +336,13 @@ class ir {
   }
 }
 function nr(e, r, t) {
-  const a = z(e.data, r), s = d(() => w(e.initialData.value, r)), n = (i) => ({
+  const s = z(e.data, r), a = d(() => w(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) => {
+  }), o = (i) => {
     const h = E(r, i), g = e.getField(h);
     return g ? n(g) : {};
   }, v = (i) => {
@@ -348,31 +351,31 @@ function nr(e, r, t) {
       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)), R = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => k(c(e.errors), r));
+  }), f = d(() => c().some((i) => i.dirty.value)), V = d(() => c().some((i) => i.touched.value)), R = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => k(u(e.errors), r));
   return {
-    data: a,
-    initialData: s,
+    data: s,
+    initialData: a,
     defineField: v,
-    getField: u,
-    getFields: o,
+    getField: o,
+    getFields: l,
     isDirty: f,
-    isTouched: p,
+    isTouched: V,
     isValid: R,
     isValidated: M,
     errors: $,
     defineValidator: (i) => {
       const h = _(i) ? i : b(i), g = d(
-        () => new ir(r, c(h))
+        () => new ir(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);
@@ -384,29 +387,29 @@ function nr(e, r, t) {
   };
 }
 function vr(e) {
-  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), a = m({
+  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
     initialData: r,
     data: t
-  }), s = H(a), n = sr(a, e), u = Q(s), v = () => {
-    t.value = y(r), s.getFields().forEach(
+  }), a = H(s), n = ar(s, e), o = Q(a), v = () => {
+    t.value = y(r), a.getFields().forEach(
       (f) => f.reset()
     );
   };
-  function o(f, p) {
-    return nr(l, f);
+  function l(f, V) {
+    return nr(c, f);
   }
-  const l = {
-    ...s,
+  const c = {
+    ...a,
     ...n,
-    ...u,
+    ...o,
     reset: v,
-    getSubForm: o,
-    initialData: D(a, "initialData"),
-    data: D(a, "data")
+    getSubForm: l,
+    initialData: D(s, "initialData"),
+    data: D(s, "data")
   };
-  return l;
+  return c;
 }
-const pr = /* @__PURE__ */ B({
+const Vr = /* @__PURE__ */ B({
   __name: "Field",
   props: {
     form: {},
@@ -419,10 +422,10 @@ const pr = /* @__PURE__ */ B({
     const r = e, t = r.form.defineField({
       path: r.path
     });
-    return (a, s) => G(a.$slots, "default", L(U(m(c(t)))));
+    return (s, a) => G(s.$slots, "default", L(U(m(u(t)))));
   }
 });
 export {
-  pr as Field,
+  Vr as Field,
   vr as useForm
 };

package/package.json

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

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

@@ -2,7 +2,7 @@ import { computed, toRef, unref } from 'vue'
 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,22 +26,31 @@ 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 (!fields[path]) {
+      const field = useField({
+        path,
+        value: getLens(toRef(formState, 'data'), path),
+        initialValue: computed(() => getNestedValue(formState.initialData, path)),
+      })
+
+      registerField(field)
+
+      return field
+    }
+
+    return fields[path] as ResolvedFormField<T, K>
   }
 
   const getFields = <TData extends T>() => {
     return Object.values(fields) as FieldsTuple<TData>
   }
 
-  const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => {
-    const field = useField({
-      ...options,
-      value: getLens(toRef(formState, 'data'), options.path),
-      initialValue: computed(() => getNestedValue(formState.initialData, unref(options.path))),
-    })
+  const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>): ResolvedFormField<T, K> => {
+    const field = getField(options.path)
 
-    registerField(field)
+    // TODO: If more options are ever needed than only the path we have to update the field
+    // here with the new options
 
     return field
   }