@teamnovu/kit-vue-forms 0.1.1 → 0.1.3

package/dist/composables/useFieldRegistry.d.ts

@@ -13,6 +13,7 @@ export declare function useFieldRegistry<T extends FormDataDefault>(formState: F
     fields: ComputedRef<FieldsTuple<T>>;
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
     registerField: <K extends Paths<T>>(field: ResolvedFormField<T, K>) => void;
+    deregisterField: (path: Paths<T>) => void;
     defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => ResolvedFormField<T, K>;
 };
 export type FieldRegistry<T extends FormDataDefault> = ReturnType<typeof useFieldRegistry<T>>;

package/dist/index.js

@@ -1,77 +1,89 @@
 var T = Object.defineProperty;
-var G = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var R = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as g, toRefs as N, markRaw as q, toRef as D, ref as W, watch as E, isRef as z, getCurrentScope as H, onBeforeUnmount as Q, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as k, resolveComponent as X, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as Y, mergeProps as x } from "vue";
-import { cloneDeep as rr } from "lodash-es";
+var G = (r, e, t) => e in r ? T(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var E = (r, e, t) => G(r, typeof e != "symbol" ? e + "" : e, t);
+import { toValue as L, toRaw as Z, computed as d, unref as f, reactive as R, toRefs as N, shallowReactive as q, toRef as _, onScopeDispose as H, ref as W, watch as F, isRef as k, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as j, renderSlot as O, normalizeProps as z, guardReactiveProps as B, resolveComponent as Y, createBlock as $, openBlock as A, withCtx as C, resolveDynamicComponent as x, mergeProps as ee } from "vue";
+import { cloneDeep as re } from "lodash-es";
 import "zod";
-function y(e) {
-  const r = L(e), t = Z(r);
-  return rr(t);
+function y(r) {
+  const e = L(r), t = Z(e);
+  return re(t);
 }
-function B(e) {
-  return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
+function K(r) {
+  return r === "" ? [] : r.split(/\s*\.\s*/).filter(Boolean);
 }
-function w(e, r) {
-  return (Array.isArray(r) ? r : B(r)).reduce(
-    (a, s) => a == null ? void 0 : a[s],
-    e
+function D(r, e) {
+  return (Array.isArray(e) ? e : K(e)).reduce(
+    (s, o) => s == null ? void 0 : s[o],
+    r
   );
 }
-function er(e, r, t) {
-  const a = Array.isArray(r) ? r : B(r);
-  if (a.length === 0)
+function te(r, e, t) {
+  const s = Array.isArray(e) ? e : K(e);
+  if (s.length === 0)
     throw new Error("Path cannot be empty");
-  const s = a.at(-1), o = a.slice(0, -1).reduce(
-    (i, h) => i[h],
+  const o = s.at(-1), n = s.slice(0, -1).reduce(
+    (h, v) => h[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    e
+    r
   );
-  o[s] = t;
+  n[o] = t;
 }
-const K = (e, r) => u({
+const U = (r, e) => d({
   get() {
-    return w(d(e), d(r));
+    return D(f(r), f(e));
   },
   set(t) {
-    er(d(e), d(r), t);
+    te(f(r), f(e), t);
   }
 });
-function F(e, r) {
-  return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
+function w(r, e) {
+  return !r && !e ? "" : !r && e ? e : !e && r ? r : `${r}.${e}`;
 }
-function tr(e, r) {
-  if (!r)
-    return e;
-  const t = `${r}.`, a = Object.fromEntries(
-    Object.entries(e.propertyErrors).filter(([s]) => s.startsWith(t)).map(
-      ([s, o]) => [s.slice(t.length), o]
+function se(r, e) {
+  if (!e)
+    return r;
+  const t = `${e}.`, s = Object.fromEntries(
+    Object.entries(r.propertyErrors).filter(([o]) => o.startsWith(t)).map(
+      ([o, n]) => [o.slice(t.length), n]
     )
   );
   return {
-    general: e.general,
+    general: r.general,
     // Keep general errors
-    propertyErrors: a
+    propertyErrors: s
   };
 }
-function ar(e) {
-  const r = g({
-    value: e.value,
-    path: e.path,
-    initialValue: u(() => Object.freeze(y(e.initialValue))),
-    errors: e.errors,
+class ae {
+  constructor(e) {
+    E(this, "rc", 1);
+    this.drop = e;
+  }
+  inc() {
+    this.rc += 1;
+  }
+  dec() {
+    this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
+  }
+}
+function oe(r) {
+  const e = R({
+    value: r.value,
+    path: r.path,
+    initialValue: d(() => Object.freeze(y(r.initialValue))),
+    errors: r.errors,
     touched: !1
-  }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
-    r.value = f;
-  }, s = () => {
-    r.touched = !0;
+  }), t = d(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (a) => {
+    e.value = a;
   }, o = () => {
-  }, i = () => {
-    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, h = (f) => {
-    r.errors = f;
+    e.touched = !0;
+  }, n = () => {
+  }, h = () => {
+    e.value = y(e.initialValue), e.touched = !1, e.errors = [];
+  }, v = (a) => {
+    e.errors = a;
   }, l = () => {
-    r.errors = [];
-  }, c = N(r);
+    e.errors = [];
+  }, c = N(e);
   return {
     data: c.value,
     path: c.path,
@@ -79,108 +91,120 @@ function ar(e) {
     errors: c.errors,
     touched: c.touched,
     dirty: t,
-    setData: a,
-    onBlur: s,
-    onFocus: o,
-    reset: i,
-    setErrors: h,
+    setData: s,
+    onBlur: o,
+    onFocus: n,
+    reset: h,
+    setErrors: v,
     clearErrors: l
   };
 }
-function sr(e, r) {
-  const t = g({}), a = (i) => {
-    const h = d(i.path);
-    t[h] = q(i);
-  }, s = (i) => {
-    if (!t[i]) {
-      const h = ar({
-        path: i,
-        value: K(D(e, "data"), i),
-        initialValue: u(() => w(e.initialData, i)),
-        errors: u({
+function ne(r, e) {
+  const t = /* @__PURE__ */ new Map(), s = q(/* @__PURE__ */ new Map()), o = (a) => {
+    const u = f(a.path);
+    s.set(u, a);
+  }, n = (a) => {
+    s.delete(a);
+  }, h = (a) => {
+    var u;
+    t.has(a) ? (u = t.get(a)) == null || u.inc() : t.set(a, new ae(() => n(a)));
+  }, v = (a) => {
+    var u;
+    t.has(a) && ((u = t.get(a)) == null || u.dec());
+  }, l = (a) => {
+    if (!s.has(a)) {
+      const g = oe({
+        path: a,
+        value: U(_(r, "data"), a),
+        initialValue: d(() => D(r.initialData, a)),
+        errors: d({
           get() {
-            return r.errors.value.propertyErrors[i] || [];
+            return e.errors.value.propertyErrors[a] || [];
           },
-          set(l) {
-            r.errors.value.propertyErrors[i] = l;
+          set(P) {
+            e.errors.value.propertyErrors[a] = P;
           }
         })
       });
-      return a(h), h;
+      o(g);
     }
-    return t[i];
-  }, o = (i) => s(i.path);
+    const u = s.get(a);
+    return h(a), H(() => {
+      v(a);
+    }), u;
+  }, c = (a) => l(a.path);
   return {
-    fields: u(() => Object.values(t)),
-    getField: s,
-    registerField: a,
-    defineField: o
+    fields: d(() => [...s.values()]),
+    getField: l,
+    registerField: o,
+    deregisterField: n,
+    defineField: c
   };
 }
-function or(e) {
-  const r = u(() => e.fields.value.some((a) => d(a.dirty))), t = u(() => e.fields.value.some((a) => d(a.touched)));
+function ie(r) {
+  const e = d(() => r.fields.value.some((s) => f(s.dirty))), t = d(() => r.fields.value.some((s) => f(s.touched)));
   return {
-    isDirty: r,
+    isDirty: e,
     isTouched: t
   };
 }
-function nr(e) {
-  return e.filter(
-    (r, t, a) => a.indexOf(r) === t
+function le(r) {
+  return r.filter(
+    (e, t, s) => s.indexOf(e) === t
   );
 }
-function U(...e) {
-  return e.slice(1).reduce((r, t) => {
-    if (!r && !t)
+function I(...r) {
+  return r.slice(1).reduce((e, t) => {
+    if (!e && !t)
       return;
-    const a = ((t == null ? void 0 : t.length) ?? 0) > 0;
-    if (!r && ((t == null ? void 0 : t.length) ?? 0) > 0)
+    const s = ((t == null ? void 0 : t.length) ?? 0) > 0;
+    if (!e && ((t == null ? void 0 : t.length) ?? 0) > 0)
       return t;
-    if (!a)
-      return r;
-    const s = (r ?? []).concat(t);
-    return nr(s);
-  }, e[0]);
+    if (!s)
+      return e;
+    const o = (e ?? []).concat(t);
+    return le(o);
+  }, r[0]);
 }
-function ir(...e) {
-  return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
-    const s = e.map((o) => o[a]).filter(Boolean);
+function ce(...r) {
+  return r.map((t) => Object.keys(t)).flat().reduce((t, s) => {
+    const o = r.map((n) => n[s]).filter(Boolean);
     return {
       ...t,
-      [a]: U(...s)
+      [s]: I(...o)
     };
   }, {});
 }
-function _(...e) {
-  if (!e.length)
+function S(...r) {
+  if (!r.length)
     return {
       general: [],
       propertyErrors: {}
     };
-  const r = e[0];
-  return e.length === 1 ? r : e.slice(1).reduce(
-    (t, a) => ({
-      general: U(t.general, a.general),
-      propertyErrors: ir(t.propertyErrors ?? {}, a.propertyErrors ?? {})
+  const e = r[0];
+  return r.length === 1 ? e : r.slice(1).reduce(
+    (t, s) => ({
+      general: I(t.general, s.general),
+      propertyErrors: ce(t.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
-    r
+    e
   );
 }
-function C(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 M(r) {
+  var s;
+  const e = (((s = r.general) == null ? void 0 : s.length) ?? 0) > 0, t = Object.entries(r.propertyErrors).filter(([, o]) => o == null ? void 0 : o.length).length > 0;
+  return e || t;
 }
-function lr(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 o = s.path.join(".");
+function ue(r) {
+  const e = r.issues.filter((s) => s.path.length === 0).map((s) => s.message), t = r.issues.filter((s) => s.path.length > 0).reduce((s, o) => {
+    const n = o.path.join(".");
     return {
-      ...a,
-      [o]: [...a[o] ?? [], s.message]
+      ...s,
+      [n]: [...s[n] ?? [], o.message]
     };
   }, {});
   return {
-    general: r,
+    general: e,
     propertyErrors: t
   };
 }
@@ -191,35 +215,35 @@ const m = {
     propertyErrors: {}
   }
 };
-class cr {
-  constructor(r) {
-    this.schema = r;
+class de {
+  constructor(e) {
+    this.schema = e;
   }
-  async validate(r) {
+  async validate(e) {
     if (!this.schema)
       return m;
-    const t = await this.schema.safeParseAsync(r);
+    const t = await this.schema.safeParseAsync(e);
     if (t.success)
       return m;
-    const a = lr(t.error);
+    const s = ue(t.error);
     return {
       isValid: !1,
       errors: {
-        general: a.general ?? [],
-        propertyErrors: a.propertyErrors ?? {}
+        general: s.general ?? [],
+        propertyErrors: s.propertyErrors ?? {}
       }
     };
   }
 }
-class ur {
-  constructor(r) {
-    this.validateFn = r;
+class fe {
+  constructor(e) {
+    this.validateFn = e;
   }
-  async validate(r) {
+  async validate(e) {
     if (!this.validateFn)
       return m;
     try {
-      const t = await this.validateFn(r);
+      const t = await this.validateFn(e);
       return t.isValid ? m : t;
     } catch (t) {
       return {
@@ -232,192 +256,192 @@ class ur {
     }
   }
 }
-class dr {
-  constructor(r, t) {
-    R(this, "schemaValidator");
-    R(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new cr(this.schema), this.functionValidator = new ur(this.validateFn);
+class pe {
+  constructor(e, t) {
+    E(this, "schemaValidator");
+    E(this, "functionValidator");
+    this.schema = e, this.validateFn = t, this.schemaValidator = new de(this.schema), this.functionValidator = new fe(this.validateFn);
   }
-  async validate(r) {
-    const [t, a] = await Promise.all([
-      this.schemaValidator.validate(r),
-      this.functionValidator.validate(r)
+  async validate(e) {
+    const [t, s] = await Promise.all([
+      this.schemaValidator.validate(e),
+      this.functionValidator.validate(e)
     ]);
     return {
-      isValid: t.isValid && a.isValid,
-      errors: _(t.errors, a.errors)
+      isValid: t.isValid && s.isValid,
+      errors: S(t.errors, s.errors)
     };
   }
 }
-function b(e) {
-  return u(() => new dr(
-    d(e.schema),
-    d(e.validateFn)
+function b(r) {
+  return d(() => new pe(
+    f(r.schema),
+    f(r.validateFn)
   ));
 }
-function fr(e, r) {
-  const t = g({
-    validators: W([b(r)]),
+function he(r, e) {
+  const t = R({
+    validators: W([b(e)]),
     isValidated: !1,
-    errors: d(r.errors) ?? m.errors
+    errors: f(e.errors) ?? m.errors
   });
-  E(() => d(r.errors), async () => {
-    const l = await s();
-    o(l.errors);
-  }, { immediate: !0 }), E(
+  F(() => f(e.errors), async () => {
+    const l = await o();
+    n(l.errors);
+  }, { immediate: !0 }), F(
     [() => t.validators],
     async (l) => {
       if (t.isValidated)
         if (l) {
-          const c = await s();
+          const c = await o();
           t.errors = c.errors;
         } else
           t.errors = m.errors;
     },
     { immediate: !0 }
-  ), E(() => e.data, () => {
-    t.isValidated && i();
+  ), F(() => r.data, () => {
+    t.isValidated && h();
   });
-  const a = (l) => {
-    const c = z(l) ? l : b(l);
-    return t.validators.push(c), H() && Q(() => {
+  const s = (l) => {
+    const c = k(l) ? l : b(l);
+    return t.validators.push(c), Q() && X(() => {
       t.validators = t.validators.filter(
-        (f) => f !== c
+        (a) => a !== c
       );
     }), c;
   };
-  async function s() {
+  async function o() {
     const l = await Promise.all(
-      t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), c = l.every((v) => v.isValid);
-    let { errors: f } = m;
+      t.validators.filter((u) => f(u) !== void 0).map((u) => f(u).validate(r.data))
+    ), c = l.every((u) => u.isValid);
+    let { errors: a } = m;
     if (!c) {
-      const v = l.map((P) => P.errors);
-      f = _(...v);
+      const u = l.map((g) => g.errors);
+      a = S(...u);
     }
     return {
-      errors: f,
+      errors: a,
       isValid: c
     };
   }
-  const o = (l) => {
-    t.errors = _(d(r.errors) ?? m.errors, l);
-  }, i = async () => {
-    const l = await s();
-    return o(l.errors), t.isValidated = !0, {
-      isValid: !C(l.errors),
+  const n = (l) => {
+    t.errors = S(f(e.errors) ?? m.errors, l);
+  }, h = async () => {
+    const l = await o();
+    return n(l.errors), t.isValidated = !0, {
+      isValid: !M(l.errors),
       errors: t.errors
     };
-  }, h = u(() => !C(t.errors));
+  }, v = d(() => !M(t.errors));
   return {
     ...N(t),
-    validateForm: i,
-    defineValidator: a,
-    isValid: h
+    validateForm: h,
+    defineValidator: s,
+    isValid: v
   };
 }
-class pr {
-  constructor(r, t) {
-    this.path = r, this.validator = t;
+class ve {
+  constructor(e, t) {
+    this.path = e, this.validator = t;
   }
-  async validate(r) {
-    const t = w(r, this.path);
+  async validate(e) {
+    const t = D(e, this.path);
     if (!this.validator)
       return m;
-    const a = await this.validator.validate(t);
+    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, o]) => [
-            F(this.path, s),
-            o
+        general: s.errors.general || [],
+        propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
+          Object.entries(s.errors.propertyErrors).map(([o, n]) => [
+            w(this.path, o),
+            n
           ])
         ) : {}
       }
     };
   }
 }
-function hr(e, r, t) {
-  const a = K(e.data, r), s = u(() => w(e.initialData.value, r)), o = (n) => ({
-    ...n,
-    path: u(() => d(n.path).replace(r + ".", "")),
+function me(r, e, t) {
+  const s = U(r.data, e), o = d(() => D(r.initialData.value, e)), n = (i) => ({
+    ...i,
+    path: d(() => f(i.path).replace(e + ".", "")),
     setData: (p) => {
-      n.setData(p);
+      i.setData(p);
     }
-  }), i = (n) => {
-    const p = F(r, n), V = e.getField(p);
-    return V ? o(V) : {};
-  }, h = (n) => {
-    const p = F(r, n.path), V = e.defineField({
-      ...n,
+  }), h = (i) => {
+    const p = w(e, i), V = r.getField(p);
+    return V ? n(V) : {};
+  }, v = (i) => {
+    const p = w(e, i.path), V = r.defineField({
+      ...i,
       path: p
     });
-    return o(V);
-  }, l = u(() => e.fields.value.filter((n) => {
-    const p = n.path.value;
-    return p.startsWith(r + ".") || p === r;
-  }).map((n) => o(n))), c = () => e.fields.value.filter((n) => {
-    const p = n.path.value;
-    return p.startsWith(r + ".") || p === r;
-  }), f = u(() => c().some((n) => n.dirty.value)), v = u(() => c().some((n) => n.touched.value)), P = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => tr(d(e.errors), r));
+    return n(V);
+  }, l = d(() => r.fields.value.filter((i) => {
+    const p = i.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }).map((i) => n(i))), c = () => r.fields.value.filter((i) => {
+    const p = i.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }), a = d(() => c().some((i) => i.dirty.value)), u = d(() => c().some((i) => i.touched.value)), g = d(() => r.isValid.value), P = d(() => r.isValidated.value), J = d(() => se(f(r.errors), e));
   return {
-    data: a,
+    data: s,
     fields: l,
-    initialData: s,
-    defineField: h,
-    getField: i,
-    isDirty: f,
-    isTouched: v,
-    isValid: P,
-    isValidated: I,
+    initialData: o,
+    defineField: v,
+    getField: h,
+    isDirty: a,
+    isTouched: u,
+    isValid: g,
+    isValidated: P,
     errors: J,
-    defineValidator: (n) => {
-      const p = z(n) ? n : b(n), V = u(
-        () => new pr(r, d(p))
+    defineValidator: (i) => {
+      const p = k(i) ? i : b(i), V = d(
+        () => new ve(e, f(p))
       );
-      return e.defineValidator(V), p;
+      return r.defineValidator(V), p;
     },
-    reset: () => c().forEach((n) => n.reset()),
-    validateForm: () => e.validateForm(),
-    getSubForm: (n, p) => {
-      const V = F(r, n);
-      return e.getSubForm(
+    reset: () => c().forEach((i) => i.reset()),
+    validateForm: () => r.validateForm(),
+    getSubForm: (i, p) => {
+      const V = w(e, i);
+      return r.getSubForm(
         V,
         p
       );
     }
   };
 }
-function Pr(e) {
-  const r = u(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = g({
-    initialData: r,
+function Pe(r) {
+  const e = d(() => Object.freeze(y(r.initialData))), t = W(y(e)), s = R({
+    initialData: e,
     data: t
   });
-  E(r, (f) => {
-    a.data = y(f);
+  F(e, (a) => {
+    s.data = y(a);
   });
-  const s = fr(a, e), o = sr(a, s), i = or(o), h = () => {
-    t.value = y(r), o.fields.value.forEach(
-      (f) => f.reset()
+  const o = he(s, r), n = ne(s, o), h = ie(n), v = () => {
+    t.value = y(e), n.fields.value.forEach(
+      (a) => a.reset()
     );
   };
-  function l(f, v) {
-    return hr(c, f);
+  function l(a, u) {
+    return me(c, a);
   }
   const c = {
+    ...n,
     ...o,
-    ...s,
-    ...i,
-    reset: h,
+    ...h,
+    reset: v,
     getSubForm: l,
-    initialData: D(a, "initialData"),
-    data: D(a, "data")
+    initialData: _(s, "initialData"),
+    data: _(s, "data")
   };
   return c;
 }
-const Rr = /* @__PURE__ */ S({
+const _e = /* @__PURE__ */ j({
   __name: "Field",
   props: {
     form: {},
@@ -426,13 +450,13 @@ const Rr = /* @__PURE__ */ S({
     path: {},
     errors: {}
   },
-  setup(e) {
-    const r = e, t = r.form.defineField({
-      path: r.path
-    }), a = g(t);
-    return (s, o) => j(s.$slots, "default", M(k(a)));
+  setup(r) {
+    const e = r, t = e.form.defineField({
+      path: e.path
+    }), s = R(t);
+    return (o, n) => O(o.$slots, "default", z(B(s)));
   }
-}), Dr = /* @__PURE__ */ S({
+}), Se = /* @__PURE__ */ j({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -441,22 +465,22 @@ const Rr = /* @__PURE__ */ S({
     form: {},
     path: {}
   },
-  setup(e) {
-    return (r, t) => {
-      const a = X("Field");
-      return $(), O(a, {
-        form: r.form,
-        path: r.path
+  setup(r) {
+    return (e, t) => {
+      const s = Y("Field");
+      return A(), $(s, {
+        form: e.form,
+        path: e.path
       }, {
-        default: A(({ errors: s, data: o, setData: i }) => [
-          ($(), O(Y(r.component), x({ ...r.componentProps, ...r.$attrs }, {
-            "model-value": o,
-            errors: s,
-            name: r.path,
-            "onUpdate:modelValue": i
+        default: C(({ errors: o, data: n, setData: h }) => [
+          (A(), $(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
+            "model-value": n,
+            errors: o,
+            name: e.path,
+            "onUpdate:modelValue": h
           }), {
-            default: A(() => [
-              j(r.$slots, "default")
+            default: C(() => [
+              O(e.$slots, "default")
             ]),
             _: 2
           }, 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -465,20 +489,20 @@ const Rr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), _r = /* @__PURE__ */ S({
+}), be = /* @__PURE__ */ j({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
-  setup(e) {
-    const r = e, t = u(() => r.form.getSubForm(r.path));
-    return (a, s) => j(a.$slots, "default", M(k({ subform: t.value })));
+  setup(r) {
+    const e = r, t = d(() => e.form.getSubForm(e.path));
+    return (s, o) => O(s.$slots, "default", z(B({ subform: t.value })));
   }
 });
 export {
-  Rr as Field,
-  Dr as FormFieldWrapper,
-  _r as FormPart,
-  Pr as useForm
+  _e as Field,
+  Se as FormFieldWrapper,
+  be as FormPart,
+  Pe as useForm
 };

package/dist/utils/rc.d.ts

@@ -0,0 +1,7 @@
+export declare class Rc {
+    private drop?;
+    private rc;
+    constructor(drop?: (() => void) | undefined);
+    inc(): void;
+    dec(): void;
+}

package/package.json

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

package/src/composables/useFieldRegistry.ts

@@ -1,12 +1,13 @@
-import { computed, markRaw, reactive, toRef, unref, watch } from 'vue'
+import { computed, onScopeDispose, shallowReactive, 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 { Rc } from '../utils/rc'
 import { useField, type UseFieldOptions } from './useField'
 import type { ValidationState } from './useValidation'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>
+type FieldRegistryCache<T> = Map<Paths<T>, FormField<any, string>>
 
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>, K>
 
@@ -21,15 +22,34 @@ export function useFieldRegistry<T extends FormDataDefault>(
   formState: FormState<T>,
   validationState: ValidationState<T>,
 ) {
-  const fields = reactive({}) as FieldRegistryCache<T>
+  const fieldReferenceCounter = new Map<Paths<T>, Rc>()
+  const fields = shallowReactive(new Map()) as FieldRegistryCache<T>
 
   const registerField = <K extends Paths<T>>(field: ResolvedFormField<T, K>) => {
     const path = unref(field.path) as Paths<T>
-    fields[path] = markRaw(field)
+    fields.set(path, field)
+  }
+
+  const deregisterField = (path: Paths<T>) => {
+    fields.delete(path)
+  }
+
+  const track = (path: Paths<T>) => {
+    if (!fieldReferenceCounter.has(path)) {
+      fieldReferenceCounter.set(path, new Rc(() => deregisterField(path)))
+    } else {
+      fieldReferenceCounter.get(path)?.inc()
+    }
+  }
+
+  const untrack = (path: Paths<T>) => {
+    if (fieldReferenceCounter.has(path)) {
+      fieldReferenceCounter.get(path)?.dec()
+    }
   }
 
   const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
-    if (!fields[path]) {
+    if (!fields.has(path)) {
       const field = useField({
         path,
         value: getLens(toRef(formState, 'data'), path),
@@ -45,11 +65,18 @@ export function useFieldRegistry<T extends FormDataDefault>(
       })
 
       registerField(field)
-
-      return field
     }
 
-    return fields[path] as ResolvedFormField<T, K>
+    const field = fields.get(path) as ResolvedFormField<T, K>
+
+    track(path)
+
+    // Clean up field on unmount
+    onScopeDispose(() => {
+      untrack(path)
+    })
+
+    return field
   }
 
   const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>): ResolvedFormField<T, K> => {
@@ -62,9 +89,10 @@ export function useFieldRegistry<T extends FormDataDefault>(
   }
 
   return {
-    fields: computed(() => Object.values(fields) as FieldsTuple<T>),
+    fields: computed(() => [...fields.values()] as FieldsTuple<T>),
     getField,
     registerField,
+    deregisterField,
     defineField,
   }
 }

package/src/utils/rc.ts

@@ -0,0 +1,19 @@
+export class Rc {
+  private rc: number = 1
+
+  constructor(private drop?: () => void) {}
+
+  inc() {
+    this.rc += 1
+  }
+
+  dec() {
+    if (this.rc > 0) {
+      this.rc -= 1
+
+      if (this.rc === 0 && this.drop) {
+        this.drop()
+      }
+    }
+  }
+}

package/tests/useForm.test.ts

@@ -1,9 +1,14 @@
-import { describe, it, expect } from 'vitest'
-import { ref, nextTick, effectScope, watch, unref, reactive, toRef } from 'vue'
-import { useForm } from '../src/composables/useForm'
+import { describe, expect, it } from 'vitest'
+import { effectScope, isReactive, nextTick, reactive, ref } from 'vue'
 import { z } from 'zod'
+import { useForm } from '../src/composables/useForm'
+
+const scope = effectScope()
 
 describe('useForm', () => {
+  beforeAll(() => {
+
+  })
   it('should initialize form with initial data', () => {
     const initialData = {
       name: 'John',
@@ -230,7 +235,6 @@ describe('useForm', () => {
 
     const nameField = form.defineField({ path: 'name' })
 
-
     expect(form.fields.value.length).toBe(1)
     expect(form.isDirty.value).toBe(false)
 
@@ -238,4 +242,52 @@ describe('useForm', () => {
 
     expect(form.isDirty.value).toBe(true)
   })
+
+  it('fields can be made reactive', async () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        age: 30,
+      },
+    })
+
+    const nameField = form.defineField({ path: 'name' })
+
+    expect(isReactive(reactive(nameField))).toBe(true)
+  })
+
+  it('fields should only be removed when all references are gone', async () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        age: 30,
+      },
+    })
+
+    expect(form.fields.value).toEqual([])
+
+    const scope1 = effectScope()
+
+    scope1.run(() => {
+      form.defineField({ path: 'name' })
+    })
+
+    expect(form.fields.value.length).toBe(1)
+
+    const scope2 = effectScope()
+
+    scope2.run(() => {
+      form.defineField({ path: 'name' })
+    })
+
+    expect(form.fields.value.length).toBe(1)
+
+    scope1.stop()
+
+    expect(form.fields.value.length).toBe(1)
+
+    scope2.stop()
+
+    expect(form.fields.value.length).toBe(0)
+  })
 })