@teamnovu/kit-vue-forms 0.1.1 → 0.1.2

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,45 +1,45 @@
 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";
+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";
 import "zod";
 function y(e) {
   const r = L(e), t = Z(r);
-  return rr(t);
+  return er(t);
 }
-function B(e) {
+function k(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
 function w(e, r) {
-  return (Array.isArray(r) ? r : B(r)).reduce(
+  return (Array.isArray(r) ? r : k(r)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     e
   );
 }
-function er(e, r, t) {
-  const a = Array.isArray(r) ? r : B(r);
+function tr(e, r, t) {
+  const a = Array.isArray(r) ? r : k(r);
   if (a.length === 0)
     throw new Error("Path cannot be empty");
   const s = a.at(-1), o = a.slice(0, -1).reduce(
-    (i, h) => i[h],
+    (h, l) => h[l],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
   o[s] = t;
 }
-const K = (e, r) => u({
+const B = (e, r) => u({
   get() {
     return w(d(e), d(r));
   },
   set(t) {
-    er(d(e), d(r), t);
+    tr(d(e), d(r), t);
   }
 });
 function F(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function tr(e, r) {
+function ar(e, r) {
   if (!r)
     return e;
   const t = `${r}.`, a = Object.fromEntries(
@@ -53,7 +53,7 @@ function tr(e, r) {
     propertyErrors: a
   };
 }
-function ar(e) {
+function sr(e) {
   const r = g({
     value: e.value,
     path: e.path,
@@ -65,11 +65,11 @@ function ar(e) {
   }, s = () => {
     r.touched = !0;
   }, o = () => {
-  }, i = () => {
+  }, h = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, h = (f) => {
+  }, l = (f) => {
     r.errors = f;
-  }, l = () => {
+  }, n = () => {
     r.errors = [];
   }, c = N(r);
   return {
@@ -82,54 +82,62 @@ function ar(e) {
     setData: a,
     onBlur: s,
     onFocus: o,
-    reset: i,
-    setErrors: h,
-    clearErrors: l
+    reset: h,
+    setErrors: l,
+    clearErrors: n
   };
 }
-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)),
+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({
           get() {
-            return r.errors.value.propertyErrors[i] || [];
+            return r.errors.value.propertyErrors[l] || [];
           },
-          set(l) {
-            r.errors.value.propertyErrors[i] = l;
+          set(c) {
+            r.errors.value.propertyErrors[l] = c;
           }
         })
       });
-      return a(h), h;
+      return a(n), n;
     }
-    return t[i];
-  }, o = (i) => s(i.path);
+    return t[l];
+  }, h = (l) => {
+    const n = o(l.path);
+    return q(() => {
+      s(d(n.path));
+    }), n;
+  };
   return {
     fields: u(() => Object.values(t)),
-    getField: s,
+    getField: o,
     registerField: a,
-    defineField: o
+    deregisterField: s,
+    defineField: h
   };
 }
-function or(e) {
+function nr(e) {
   const r = u(() => e.fields.value.some((a) => d(a.dirty))), t = u(() => e.fields.value.some((a) => d(a.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function nr(e) {
+function ir(e) {
   return e.filter(
     (r, t, a) => a.indexOf(r) === t
   );
 }
-function U(...e) {
+function K(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
@@ -139,15 +147,15 @@ function U(...e) {
     if (!a)
       return r;
     const s = (r ?? []).concat(t);
-    return nr(s);
+    return ir(s);
   }, e[0]);
 }
-function ir(...e) {
+function lr(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
     const s = e.map((o) => o[a]).filter(Boolean);
     return {
       ...t,
-      [a]: U(...s)
+      [a]: K(...s)
     };
   }, {});
 }
@@ -160,8 +168,8 @@ function _(...e) {
   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 ?? {})
+      general: K(t.general, a.general),
+      propertyErrors: lr(t.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
@@ -171,7 +179,7 @@ function C(e) {
   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 lr(e) {
+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(".");
     return {
@@ -191,7 +199,7 @@ const m = {
     propertyErrors: {}
   }
 };
-class cr {
+class ur {
   constructor(r) {
     this.schema = r;
   }
@@ -201,7 +209,7 @@ class cr {
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
       return m;
-    const a = lr(t.error);
+    const a = cr(t.error);
     return {
       isValid: !1,
       errors: {
@@ -211,7 +219,7 @@ class cr {
     };
   }
 }
-class ur {
+class dr {
   constructor(r) {
     this.validateFn = r;
   }
@@ -232,11 +240,11 @@ class ur {
     }
   }
 }
-class dr {
+class fr {
   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);
+    this.schema = r, this.validateFn = t, this.schemaValidator = new ur(this.schema), this.functionValidator = new dr(this.validateFn);
   }
   async validate(r) {
     const [t, a] = await Promise.all([
@@ -250,25 +258,25 @@ class dr {
   }
 }
 function b(e) {
-  return u(() => new dr(
+  return u(() => new fr(
     d(e.schema),
     d(e.validateFn)
   ));
 }
-function fr(e, r) {
+function pr(e, r) {
   const t = g({
     validators: W([b(r)]),
     isValidated: !1,
     errors: d(r.errors) ?? m.errors
   });
   E(() => d(r.errors), async () => {
-    const l = await s();
-    o(l.errors);
+    const n = await s();
+    o(n.errors);
   }, { immediate: !0 }), E(
     [() => t.validators],
-    async (l) => {
+    async (n) => {
       if (t.isValidated)
-        if (l) {
+        if (n) {
           const c = await s();
           t.errors = c.errors;
         } else
@@ -276,23 +284,23 @@ function fr(e, r) {
     },
     { immediate: !0 }
   ), E(() => e.data, () => {
-    t.isValidated && i();
+    t.isValidated && h();
   });
-  const a = (l) => {
-    const c = z(l) ? l : b(l);
-    return t.validators.push(c), H() && Q(() => {
+  const a = (n) => {
+    const c = z(n) ? n : b(n);
+    return t.validators.push(c), Q() && X(() => {
       t.validators = t.validators.filter(
         (f) => f !== c
       );
     }), c;
   };
   async function s() {
-    const l = await Promise.all(
+    const n = await Promise.all(
       t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), c = l.every((v) => v.isValid);
+    ), c = n.every((v) => v.isValid);
     let { errors: f } = m;
     if (!c) {
-      const v = l.map((P) => P.errors);
+      const v = n.map((P) => P.errors);
       f = _(...v);
     }
     return {
@@ -300,23 +308,23 @@ function fr(e, r) {
       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 o = (n) => {
+    t.errors = _(d(r.errors) ?? m.errors, n);
+  }, h = async () => {
+    const n = await s();
+    return o(n.errors), t.isValidated = !0, {
+      isValid: !C(n.errors),
       errors: t.errors
     };
-  }, h = u(() => !C(t.errors));
+  }, l = u(() => !C(t.errors));
   return {
     ...N(t),
-    validateForm: i,
+    validateForm: h,
     defineValidator: a,
-    isValid: h
+    isValid: l
   };
 }
-class pr {
+class hr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
@@ -339,50 +347,50 @@ class pr {
     };
   }
 }
-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 vr(e, r, t) {
+  const a = B(e.data, r), s = u(() => w(e.initialData.value, r)), o = (i) => ({
+    ...i,
+    path: u(() => d(i.path).replace(r + ".", "")),
     setData: (p) => {
-      n.setData(p);
+      i.setData(p);
     }
-  }), i = (n) => {
-    const p = F(r, n), V = e.getField(p);
+  }), h = (i) => {
+    const p = F(r, i), V = e.getField(p);
     return V ? o(V) : {};
-  }, h = (n) => {
-    const p = F(r, n.path), V = e.defineField({
-      ...n,
+  }, l = (i) => {
+    const p = F(r, i.path), V = e.defineField({
+      ...i,
       path: p
     });
     return o(V);
-  }, l = u(() => e.fields.value.filter((n) => {
-    const p = n.path.value;
+  }, n = u(() => e.fields.value.filter((i) => {
+    const p = i.path.value;
     return p.startsWith(r + ".") || p === r;
-  }).map((n) => o(n))), c = () => e.fields.value.filter((n) => {
-    const p = n.path.value;
+  }).map((i) => o(i))), c = () => e.fields.value.filter((i) => {
+    const p = i.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));
+  }), 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 {
     data: a,
-    fields: l,
+    fields: n,
     initialData: s,
-    defineField: h,
-    getField: i,
+    defineField: l,
+    getField: h,
     isDirty: f,
     isTouched: v,
     isValid: P,
     isValidated: I,
     errors: J,
-    defineValidator: (n) => {
-      const p = z(n) ? n : b(n), V = u(
-        () => new pr(r, d(p))
+    defineValidator: (i) => {
+      const p = z(i) ? i : b(i), V = u(
+        () => new hr(r, d(p))
       );
       return e.defineValidator(V), p;
     },
-    reset: () => c().forEach((n) => n.reset()),
+    reset: () => c().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
-    getSubForm: (n, p) => {
-      const V = F(r, n);
+    getSubForm: (i, p) => {
+      const V = F(r, i);
       return e.getSubForm(
         V,
         p
@@ -390,7 +398,7 @@ function hr(e, r, t) {
     }
   };
 }
-function Pr(e) {
+function Rr(e) {
   const r = u(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = g({
     initialData: r,
     data: t
@@ -398,26 +406,26 @@ function Pr(e) {
   E(r, (f) => {
     a.data = y(f);
   });
-  const s = fr(a, e), o = sr(a, s), i = or(o), h = () => {
+  const s = pr(a, e), o = or(a, s), h = nr(o), l = () => {
     t.value = y(r), o.fields.value.forEach(
       (f) => f.reset()
     );
   };
-  function l(f, v) {
-    return hr(c, f);
+  function n(f, v) {
+    return vr(c, f);
   }
   const c = {
     ...o,
     ...s,
-    ...i,
-    reset: h,
-    getSubForm: l,
+    ...h,
+    reset: l,
+    getSubForm: n,
     initialData: D(a, "initialData"),
     data: D(a, "data")
   };
   return c;
 }
-const Rr = /* @__PURE__ */ S({
+const Dr = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -430,9 +438,9 @@ const Rr = /* @__PURE__ */ S({
     const r = e, t = r.form.defineField({
       path: r.path
     }), a = g(t);
-    return (s, o) => j(s.$slots, "default", M(k(a)));
+    return (s, o) => j(s.$slots, "default", M(U(a)));
   }
-}), Dr = /* @__PURE__ */ S({
+}), _r = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -443,17 +451,17 @@ const Rr = /* @__PURE__ */ S({
   },
   setup(e) {
     return (r, t) => {
-      const a = X("Field");
+      const a = Y("Field");
       return $(), O(a, {
         form: r.form,
         path: r.path
       }, {
-        default: A(({ errors: s, data: o, setData: i }) => [
-          ($(), O(Y(r.component), x({ ...r.componentProps, ...r.$attrs }, {
+        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,
-            "onUpdate:modelValue": i
+            "onUpdate:modelValue": h
           }), {
             default: A(() => [
               j(r.$slots, "default")
@@ -465,7 +473,7 @@ const Rr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), _r = /* @__PURE__ */ S({
+}), br = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
@@ -473,12 +481,12 @@ const Rr = /* @__PURE__ */ S({
   },
   setup(e) {
     const r = e, t = u(() => r.form.getSubForm(r.path));
-    return (a, s) => j(a.$slots, "default", M(k({ subform: t.value })));
+    return (a, s) => j(a.$slots, "default", M(U({ subform: t.value })));
   }
 });
 export {
-  Rr as Field,
-  Dr as FormFieldWrapper,
-  _r as FormPart,
-  Pr as useForm
+  Dr as Field,
+  _r as FormFieldWrapper,
+  br as FormPart,
+  Rr as useForm
 };

package/package.json

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

package/src/composables/useFieldRegistry.ts

@@ -1,4 +1,4 @@
-import { computed, markRaw, reactive, toRef, unref, watch } from 'vue'
+import { computed, markRaw, onUnmounted, reactive, toRef, unref, watch } from 'vue'
 import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
 import { getLens, getNestedValue } from '../utils/path'
@@ -28,6 +28,10 @@ export function useFieldRegistry<T extends FormDataDefault>(
     fields[path] = markRaw(field)
   }
 
+  const deregisterField = (path: Paths<T>) => {
+    delete fields[path]
+  }
+
   const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
     if (!fields[path]) {
       const field = useField({
@@ -57,6 +61,11 @@ 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
   }
@@ -65,6 +74,7 @@ export function useFieldRegistry<T extends FormDataDefault>(
     fields: computed(() => Object.values(fields) as FieldsTuple<T>),
     getField,
     registerField,
+    deregisterField,
     defineField,
   }
 }