@teamnovu/kit-vue-forms 0.1.0 → 0.1.2

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

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

package/dist/composables/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 c, unref as d, reactive as F, toRefs as N, markRaw as q, toRef as _, ref as W, watch as g, 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) => c({
+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 E(e, r) {
+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,83 +53,91 @@ function tr(e, r) {
     propertyErrors: a
   };
 }
-function ar(e) {
-  const r = F({
+function sr(e) {
+  const r = g({
     value: e.value,
     path: e.path,
-    initialValue: c(() => Object.freeze(y(e.initialValue))),
+    initialValue: u(() => Object.freeze(y(e.initialValue))),
     errors: e.errors,
     touched: !1
-  }), t = c(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
+  }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
     r.value = f;
   }, 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 = [];
-  }, u = N(r);
+  }, c = N(r);
   return {
-    data: u.value,
-    path: u.path,
-    initialValue: u.initialValue,
-    errors: u.errors,
-    touched: u.touched,
+    data: c.value,
+    path: c.path,
+    initialValue: c.initialValue,
+    errors: c.errors,
+    touched: c.touched,
     dirty: t,
     setData: a,
     onBlur: s,
     onFocus: o,
-    reset: i,
-    setErrors: h,
-    clearErrors: l
+    reset: h,
+    setErrors: l,
+    clearErrors: n
   };
 }
-function sr(e, r) {
-  const t = F({}), a = (i) => {
-    const h = d(i.path);
-    t[h] = q(i);
-  }, s = (i) => {
-    if (!t[i]) {
-      const h = ar({
-        path: i,
-        value: K(_(e, "data"), i),
-        initialValue: c(() => w(e.initialData, i)),
-        errors: c({
+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: c(() => Object.values(t)),
-    getField: s,
+    fields: u(() => Object.values(t)),
+    getField: o,
     registerField: a,
-    defineField: o
+    deregisterField: s,
+    defineField: h
   };
 }
-function or(e) {
-  const r = c(() => e.fields.value.some((a) => d(a.dirty))), t = c(() => e.fields.value.some((a) => d(a.touched)));
+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,19 +147,19 @@ 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)
     };
   }, {});
 }
-function D(...e) {
+function _(...e) {
   if (!e.length)
     return {
       general: [],
@@ -160,8 +168,8 @@ function D(...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 {
@@ -201,7 +209,7 @@ class ur {
     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 ur {
     };
   }
 }
-class cr {
+class dr {
   constructor(r) {
     this.validateFn = r;
   }
@@ -232,11 +240,11 @@ class cr {
     }
   }
 }
-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 cr(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([
@@ -245,78 +253,78 @@ class dr {
     ]);
     return {
       isValid: t.isValid && a.isValid,
-      errors: D(t.errors, a.errors)
+      errors: _(t.errors, a.errors)
     };
   }
 }
 function b(e) {
-  return c(() => new dr(
+  return u(() => new fr(
     d(e.schema),
     d(e.validateFn)
   ));
 }
-function fr(e, r) {
-  const t = F({
+function pr(e, r) {
+  const t = g({
     validators: W([b(r)]),
     isValidated: !1,
     errors: d(r.errors) ?? m.errors
   });
-  g(() => d(r.errors), async () => {
-    const l = await s();
-    o(l.errors);
-  }, { immediate: !0 }), g(
+  E(() => d(r.errors), async () => {
+    const n = await s();
+    o(n.errors);
+  }, { immediate: !0 }), E(
     [() => t.validators],
-    async (l) => {
+    async (n) => {
       if (t.isValidated)
-        if (l) {
-          const u = await s();
-          t.errors = u.errors;
+        if (n) {
+          const c = await s();
+          t.errors = c.errors;
         } else
           t.errors = m.errors;
     },
     { immediate: !0 }
-  ), g(() => e.data, () => {
-    t.isValidated && i();
+  ), E(() => e.data, () => {
+    t.isValidated && h();
   });
-  const a = (l) => {
-    const u = z(l) ? l : b(l);
-    return t.validators.push(u), 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 !== u
+        (f) => f !== c
       );
-    }), u;
+    }), 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))
-    ), u = l.every((v) => v.isValid);
+    ), c = n.every((v) => v.isValid);
     let { errors: f } = m;
-    if (!u) {
-      const v = l.map((P) => P.errors);
-      f = D(...v);
+    if (!c) {
+      const v = n.map((P) => P.errors);
+      f = _(...v);
     }
     return {
       errors: f,
-      isValid: u
+      isValid: c
     };
   }
-  const o = (l) => {
-    t.errors = D(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 = c(() => !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;
   }
@@ -331,7 +339,7 @@ class pr {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, o]) => [
-            E(this.path, s),
+            F(this.path, s),
             o
           ])
         ) : {}
@@ -339,50 +347,50 @@ class pr {
     };
   }
 }
-function hr(e, r, t) {
-  const a = K(e.data, r), s = c(() => w(e.initialData.value, r)), o = (n) => ({
-    ...n,
-    path: c(() => 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 = E(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 = E(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 = c(() => 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))), u = () => 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 = c(() => u().some((n) => n.dirty.value)), v = c(() => u().some((n) => n.touched.value)), P = c(() => e.isValid.value), I = c(() => e.isValidated.value), J = c(() => 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 = c(
-        () => 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: () => u().forEach((n) => n.reset()),
+    reset: () => c().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
-    getSubForm: (n, p) => {
-      const V = E(r, n);
+    getSubForm: (i, p) => {
+      const V = F(r, i);
       return e.getSubForm(
         V,
         p
@@ -390,34 +398,34 @@ function hr(e, r, t) {
     }
   };
 }
-function Pr(e) {
-  const r = c(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = F({
+function Rr(e) {
+  const r = u(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = g({
     initialData: r,
     data: t
   });
-  g(r, (f) => {
+  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(u, f);
+  function n(f, v) {
+    return vr(c, f);
   }
-  const u = {
+  const c = {
     ...o,
     ...s,
-    ...i,
-    reset: h,
-    getSubForm: l,
-    initialData: _(a, "initialData"),
-    data: _(a, "data")
+    ...h,
+    reset: l,
+    getSubForm: n,
+    initialData: D(a, "initialData"),
+    data: D(a, "data")
   };
-  return u;
+  return c;
 }
-const Rr = /* @__PURE__ */ S({
+const Dr = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -429,8 +437,8 @@ const Rr = /* @__PURE__ */ S({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    });
-    return (a, s) => j(a.$slots, "default", M(k(d(t))));
+    }), a = g(t);
+    return (s, o) => j(s.$slots, "default", M(U(a)));
   }
 }), _r = /* @__PURE__ */ S({
   inheritAttrs: !1,
@@ -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,20 +473,20 @@ const Rr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), Dr = /* @__PURE__ */ S({
+}), br = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(e) {
-    const r = e, t = c(() => r.form.getSubForm(r.path));
-    return (a, s) => j(a.$slots, "default", M(k({ subform: t.value })));
+    const r = e, t = u(() => r.form.getSubForm(r.path));
+    return (a, s) => j(a.$slots, "default", M(U({ subform: t.value })));
   }
 });
 export {
-  Rr as Field,
+  Dr as Field,
   _r as FormFieldWrapper,
-  Dr as FormPart,
-  Pr as useForm
+  br as FormPart,
+  Rr as useForm
 };

package/package.json

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

package/src/components/Field.vue

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

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,
   }
 }

package/tests/useForm.test.ts

@@ -215,4 +215,27 @@ describe('useForm', () => {
     expect(rootField.data.value).toEqual(['item1', 'item2'])
     expect(itemField.data.value).toBe('item2')
   })
+
+  it('can handle late initialized fields', async () => {
+    const form = useForm({
+      initialData: {
+        name: 'John',
+        age: 30,
+      },
+    })
+
+    // No fields defined yet
+    expect(form.fields.value).toEqual([])
+    expect(form.isDirty.value).toBe(false)
+
+    const nameField = form.defineField({ path: 'name' })
+
+
+    expect(form.fields.value.length).toBe(1)
+    expect(form.isDirty.value).toBe(false)
+
+    nameField.setData('Bob')
+
+    expect(form.isDirty.value).toBe(true)
+  })
 })