@teamnovu/kit-vue-forms 0.1.2 → 0.1.4

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, onUnmounted as q, markRaw as H, toRef as D, ref as W, watch as E, isRef as z, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as U, resolveComponent as Y, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as x, mergeProps as rr } from "vue";
-import { cloneDeep as er } 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 er(t);
+function y(r) {
+  const e = L(r), t = Z(e);
+  return re(t);
 }
-function k(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 : k(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 tr(e, r, t) {
-  const a = Array.isArray(r) ? r : k(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(
-    (h, l) => h[l],
+  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 B = (e, r) => u({
+const U = (r, e) => d({
   get() {
-    return w(d(e), d(r));
+    return D(f(r), f(e));
   },
   set(t) {
-    tr(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 ar(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 sr(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 = () => {
-  }, h = () => {
-    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, l = (f) => {
-    r.errors = f;
+    e.touched = !0;
   }, n = () => {
-    r.errors = [];
-  }, c = N(r);
+  }, h = () => {
+    e.value = y(e.initialValue), e.touched = !1, e.errors = [];
+  }, v = (a) => {
+    e.errors = a;
+  }, l = () => {
+    e.errors = [];
+  }, c = N(e);
   return {
     data: c.value,
     path: c.path,
@@ -79,116 +91,120 @@ function sr(e) {
     errors: c.errors,
     touched: c.touched,
     dirty: t,
-    setData: a,
-    onBlur: s,
-    onFocus: o,
+    setData: s,
+    onBlur: o,
+    onFocus: n,
     reset: h,
-    setErrors: l,
-    clearErrors: n
+    setErrors: v,
+    clearErrors: l
   };
 }
-function or(e, r) {
-  const t = g({}), a = (l) => {
-    const n = d(l.path);
-    t[n] = H(l);
-  }, s = (l) => {
-    delete t[l];
-  }, o = (l) => {
-    if (!t[l]) {
-      const n = sr({
-        path: l,
-        value: B(D(e, "data"), l),
-        initialValue: u(() => w(e.initialData, l)),
-        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[l] || [];
+            return e.errors.value.propertyErrors[a] || [];
           },
-          set(c) {
-            r.errors.value.propertyErrors[l] = c;
+          set(P) {
+            e.errors.value.propertyErrors[a] = P;
           }
         })
       });
-      return a(n), n;
+      o(g);
     }
-    return t[l];
-  }, h = (l) => {
-    const n = o(l.path);
-    return q(() => {
-      s(d(n.path));
-    }), n;
-  };
+    const u = s.get(a);
+    return h(a), H(() => {
+      v(a);
+    }), u;
+  }, c = (a) => l(a.path);
   return {
-    fields: u(() => Object.values(t)),
-    getField: o,
-    registerField: a,
-    deregisterField: s,
-    defineField: h
+    fields: d(() => [...s.values()]),
+    getField: l,
+    registerField: o,
+    deregisterField: n,
+    defineField: c
   };
 }
-function nr(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 ir(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 K(...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 ir(s);
-  }, e[0]);
+    if (!s)
+      return e;
+    const o = (e ?? []).concat(t);
+    return le(o);
+  }, r[0]);
 }
-function lr(...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]: K(...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: K(t.general, a.general),
-      propertyErrors: lr(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 cr(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
   };
 }
@@ -199,35 +215,35 @@ const m = {
     propertyErrors: {}
   }
 };
-class ur {
-  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 = cr(t.error);
+    const s = ue(t.error);
     return {
       isValid: !1,
       errors: {
-        general: a.general ?? [],
-        propertyErrors: a.propertyErrors ?? {}
+        general: s.general ?? [],
+        propertyErrors: s.propertyErrors ?? {}
       }
     };
   }
 }
-class dr {
-  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 {
@@ -240,192 +256,195 @@ class dr {
     }
   }
 }
-class fr {
-  constructor(r, t) {
-    R(this, "schemaValidator");
-    R(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new ur(this.schema), this.functionValidator = new dr(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 fr(
-    d(e.schema),
-    d(e.validateFn)
+function b(r) {
+  return d(() => new pe(
+    f(r.schema),
+    f(r.validateFn)
   ));
 }
-function pr(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 n = await s();
-    o(n.errors);
-  }, { immediate: !0 }), E(
+  F(() => f(e.errors), async () => {
+    if (t.isValidated) {
+      const l = await o();
+      n(l.errors);
+    } else
+      n();
+  }, { immediate: !0 }), F(
     [() => t.validators],
-    async (n) => {
+    async (l) => {
       if (t.isValidated)
-        if (n) {
-          const c = await s();
+        if (l) {
+          const c = await o();
           t.errors = c.errors;
         } else
           t.errors = m.errors;
     },
     { immediate: !0 }
-  ), E(() => e.data, () => {
+  ), F(() => r.data, () => {
     t.isValidated && h();
   });
-  const a = (n) => {
-    const c = z(n) ? n : b(n);
+  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() {
-    const n = await Promise.all(
-      t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), c = n.every((v) => v.isValid);
-    let { errors: f } = m;
+  async function o() {
+    const l = await Promise.all(
+      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 = n.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 = (n) => {
-    t.errors = _(d(r.errors) ?? m.errors, n);
+  const n = (l = m.errors) => {
+    t.errors = S(f(e.errors) ?? m.errors, l);
   }, h = async () => {
-    const n = await s();
-    return o(n.errors), t.isValidated = !0, {
-      isValid: !C(n.errors),
+    const l = await o();
+    return n(l.errors), t.isValidated = !0, {
+      isValid: !M(l.errors),
       errors: t.errors
     };
-  }, l = u(() => !C(t.errors));
+  }, v = d(() => !M(t.errors));
   return {
     ...N(t),
     validateForm: h,
-    defineValidator: a,
-    isValid: l
+    defineValidator: s,
+    isValid: v
   };
 }
-class hr {
-  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 vr(e, r, t) {
-  const a = B(e.data, r), s = u(() => w(e.initialData.value, r)), o = (i) => ({
+function me(r, e, t) {
+  const s = U(r.data, e), o = d(() => D(r.initialData.value, e)), n = (i) => ({
     ...i,
-    path: u(() => d(i.path).replace(r + ".", "")),
+    path: d(() => f(i.path).replace(e + ".", "")),
     setData: (p) => {
       i.setData(p);
     }
   }), h = (i) => {
-    const p = F(r, i), V = e.getField(p);
-    return V ? o(V) : {};
-  }, l = (i) => {
-    const p = F(r, i.path), V = e.defineField({
+    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);
-  }, n = u(() => e.fields.value.filter((i) => {
+    return n(V);
+  }, l = d(() => r.fields.value.filter((i) => {
     const p = i.path.value;
-    return p.startsWith(r + ".") || p === r;
-  }).map((i) => o(i))), c = () => e.fields.value.filter((i) => {
+    return p.startsWith(e + ".") || p === e;
+  }).map((i) => n(i))), c = () => r.fields.value.filter((i) => {
     const p = i.path.value;
-    return p.startsWith(r + ".") || p === r;
-  }), f = u(() => c().some((i) => i.dirty.value)), v = u(() => c().some((i) => i.touched.value)), P = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => ar(d(e.errors), r));
+    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,
-    fields: n,
-    initialData: s,
-    defineField: l,
+    data: s,
+    fields: l,
+    initialData: o,
+    defineField: v,
     getField: h,
-    isDirty: f,
-    isTouched: v,
-    isValid: P,
-    isValidated: I,
+    isDirty: a,
+    isTouched: u,
+    isValid: g,
+    isValidated: P,
     errors: J,
     defineValidator: (i) => {
-      const p = z(i) ? i : b(i), V = u(
-        () => new hr(r, d(p))
+      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((i) => i.reset()),
-    validateForm: () => e.validateForm(),
+    validateForm: () => r.validateForm(),
     getSubForm: (i, p) => {
-      const V = F(r, i);
-      return e.getSubForm(
+      const V = w(e, i);
+      return r.getSubForm(
         V,
         p
       );
     }
   };
 }
-function Rr(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 = pr(a, e), o = or(a, s), h = nr(o), l = () => {
-    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 n(f, v) {
-    return vr(c, f);
+  function l(a, u) {
+    return me(c, a);
   }
   const c = {
+    ...n,
     ...o,
-    ...s,
     ...h,
-    reset: l,
-    getSubForm: n,
-    initialData: D(a, "initialData"),
-    data: D(a, "data")
+    reset: v,
+    getSubForm: l,
+    initialData: _(s, "initialData"),
+    data: _(s, "data")
   };
   return c;
 }
-const Dr = /* @__PURE__ */ S({
+const _e = /* @__PURE__ */ j({
   __name: "Field",
   props: {
     form: {},
@@ -434,13 +453,13 @@ const Dr = /* @__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(U(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)));
   }
-}), _r = /* @__PURE__ */ S({
+}), Se = /* @__PURE__ */ j({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -449,22 +468,22 @@ const Dr = /* @__PURE__ */ S({
     form: {},
     path: {}
   },
-  setup(e) {
-    return (r, t) => {
-      const a = Y("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: h }) => [
-          ($(), O(x(r.component), rr({ ...r.componentProps, ...r.$attrs }, {
-            "model-value": o,
-            errors: s,
-            name: r.path,
+        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"]))
@@ -473,20 +492,20 @@ const Dr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), br = /* @__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(U({ 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 {
-  Dr as Field,
-  _r as FormFieldWrapper,
-  br as FormPart,
-  Rr as useForm
+  _e as Field,
+  Se as FormFieldWrapper,
+  be as FormPart,
+  Pe as useForm
 };

package/dist/utils/rc.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Reference counter for fields
+ */
+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.2",
+  "version": "0.1.4",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/composables/useFieldRegistry.ts

@@ -1,12 +1,13 @@
-import { computed, markRaw, onUnmounted, 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,19 +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>) => {
-    delete fields[path]
+    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),
@@ -49,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> => {
@@ -61,17 +84,12 @@ export function useFieldRegistry<T extends FormDataDefault>(
 
     // TODO: If more options are ever needed than only the path we have to update the field
     // here with the new options
-    
-    onUnmounted(() => {
-      // Clean up field on unmount
-      deregisterField(unref(field.path))
-    })
 
     return field
   }
 
   return {
-    fields: computed(() => Object.values(fields) as FieldsTuple<T>),
+    fields: computed(() => [...fields.values()] as FieldsTuple<T>),
     getField,
     registerField,
     deregisterField,

package/src/composables/useValidation.ts

@@ -124,9 +124,13 @@ export function useValidation<T extends FormDataDefault>(
 
   // Watch for changes in the error bag and update validation state
   watch(() => unref(options.errors), async () => {
-    const validationResults = await getValidationResults()
+    if (validationState.isValidated) {
+      const validationResults = await getValidationResults()
 
-    updateErrors(validationResults.errors)
+      updateErrors(validationResults.errors)
+    } else {
+      updateErrors()
+    }
   }, { immediate: true })
 
   // Watch for changes in validation function or schema
@@ -194,7 +198,7 @@ export function useValidation<T extends FormDataDefault>(
     }
   }
 
-  const updateErrors = (newErrors: ErrorBag) => {
+  const updateErrors = (newErrors: ErrorBag = SuccessValidationResult.errors) => {
     validationState.errors = mergeErrors(unref(options.errors) ?? SuccessValidationResult.errors, newErrors)
   }
 

package/src/utils/rc.ts

@@ -0,0 +1,22 @@
+/**
+ * Reference counter for fields
+ */
+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)
+  })
 })