@teamnovu/kit-vue-forms 0.0.11 → 0.0.12

package/dist/composables/useFieldRegistry.d.ts

@@ -13,7 +13,7 @@ export declare function useFieldRegistry<T extends FormDataDefault>(formState: F
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
     getFields: <TData extends T>() => FieldsTuple<TData>;
     registerField: <K extends Paths<T>>(field: ResolvedFormField<T, K>) => void;
-    defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => FormField<K extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_1 ? T_1 extends TRest ? T_1 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_2 ? T_2 extends TRest ? T_2 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_3 ? T_3 extends TRest ? T_3 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_4 ? T_4 extends TRest ? T_4 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_5 ? T_5 extends TRest ? T_5 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_6 ? T_6 extends TRest ? T_6 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_7 ? T_7 extends TRest ? T_7 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_8 ? T_8 extends TRest ? T_8 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_9 ? T_9 extends TRest ? T_9 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? TRest extends infer T_10 ? T_10 extends TRest ? T_10 extends `${infer TRoot}.${infer TRest}` ? TRoot extends string | number | symbol ? TRest extends string ? /*elided*/ any : never : TRoot extends `${number}` ? never : never : T_10 extends string | number | symbol ? Required<any>[T_10] : T_10 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_9 extends string | number | symbol ? Required<any>[T_9] : T_9 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_8 extends string | number | symbol ? Required<any>[T_8] : T_8 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_7 extends string | number | symbol ? Required<any>[T_7] : T_7 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_6 extends string | number | symbol ? Required<any>[T_6] : T_6 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_5 extends string | number | symbol ? Required<any>[T_5] : T_5 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_4 extends string | number | symbol ? Required<any>[T_4] : T_4 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_3 extends string | number | symbol ? Required<any>[T_3] : T_3 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_2 extends string | number | symbol ? Required<any>[T_2] : T_2 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : T_1 extends string | number | symbol ? Required<any>[T_1] : T_1 extends `${number}` ? never : never : never : never : never : TRoot extends `${number}` ? never : never : K extends string | number | symbol ? any : K extends `${number}` ? never : never, K>;
+    defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => ResolvedFormField<T, K>;
 };
 export type FieldRegistry<T extends FormDataDefault> = ReturnType<typeof useFieldRegistry<T>>;
 export {};

package/dist/index.mjs

@@ -1,102 +1,80 @@
 var x = Object.defineProperty;
 var K = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var S = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as W, toRaw as B, computed as d, unref as u, reactive as w, watch as E, toRefs as A, ref as y, toRef as P, isRef as _, getCurrentScope as I, onBeforeUnmount as J, defineComponent as T, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
+import { toValue as W, toRaw as I, computed as d, unref as u, reactive as m, watch as F, toRefs as O, toRef as D, ref as A, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
 import "zod";
-function F(e) {
-  const r = W(e), t = B(r);
+function y(e) {
+  const r = W(e), t = I(r);
   return structuredClone(t);
 }
 function N(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
-function R(e, r) {
+function w(e, r) {
   return (Array.isArray(r) ? r : N(r)).reduce(
-    (a, s) => a == null ? void 0 : a[s],
+    (s, a) => s == null ? void 0 : s[a],
     e
   );
 }
 function Z(e, r, t) {
-  const a = Array.isArray(r) ? r : N(r);
-  if (a.length === 0)
+  const s = Array.isArray(r) ? r : N(r);
+  if (s.length === 0)
     throw new Error("Path cannot be empty");
-  const s = a.at(-1), n = a.slice(0, -1).reduce(
+  const a = s.at(-1), n = s.slice(0, -1).reduce(
     (o, v) => o[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
-  n[s] = t;
+  n[a] = t;
 }
-const $ = (e, r) => d({
+const z = (e, r) => d({
   get() {
-    return R(u(e), u(r));
+    return w(u(e), u(r));
   },
   set(t) {
     Z(u(e), u(r), t);
   }
 });
-function m(e, r) {
+function E(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
 function k(e, r) {
   if (!r)
     return e;
-  const t = `${r}.`, a = Object.fromEntries(
-    Object.entries(e.propertyErrors).filter(([s]) => s.startsWith(t)).map(
-      ([s, n]) => [s.slice(t.length), n]
+  const t = `${r}.`, s = Object.fromEntries(
+    Object.entries(e.propertyErrors).filter(([a]) => a.startsWith(t)).map(
+      ([a, n]) => [a.slice(t.length), n]
     )
   );
   return {
     general: e.general,
     // Keep general errors
-    propertyErrors: a
+    propertyErrors: s
   };
 }
-function q() {
-  return {
-    setData: () => {
-    },
-    onBlur: () => {
-    },
-    onFocus: () => {
-    },
-    reset: () => {
-    },
-    setErrors: () => {
-    },
-    clearErrors: () => {
-    },
-    data: y(void 0),
-    initialValue: y(void 0),
-    path: y(""),
-    errors: y([]),
-    touched: y(!1),
-    dirty: d(() => !1)
-  };
-}
-function H(e) {
-  const r = w({
+function q(e) {
+  const r = m({
     value: e.value,
     path: e.path,
-    initialValue: d(() => Object.freeze(F(e.initialValue))),
+    initialValue: d(() => Object.freeze(y(e.initialValue))),
     errors: u(e.errors) || [],
     touched: !1
   });
-  E(() => u(e.errors), (f) => {
+  F(() => u(e.errors), (f) => {
     r.errors = f || [];
   });
-  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
+  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
     r.value = f;
-  }, s = () => {
+  }, a = () => {
     r.touched = !0;
   }, n = () => {
   }, o = () => {
-    r.value = F(r.initialValue), r.touched = !1, r.errors = [];
+    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
   }, v = (f) => {
     r.errors = f;
   }, l = () => {
     r.errors = [];
-  }, c = A(r);
+  }, c = O(r);
   return {
     data: c.value,
     path: c.path,
@@ -104,69 +82,72 @@ function H(e) {
     errors: c.errors,
     touched: c.touched,
     dirty: t,
-    setData: a,
-    onBlur: s,
+    setData: s,
+    onBlur: a,
     onFocus: n,
     reset: o,
     setErrors: v,
     clearErrors: l
   };
 }
-function Q(e) {
+function H(e) {
   const r = {}, t = (o) => {
     const v = u(o.path);
     r[v] = o;
+  }, s = (o) => {
+    if (!r[o]) {
+      const v = q({
+        path: o,
+        value: z(D(e, "data"), o),
+        initialValue: d(() => w(e.initialData, o))
+      });
+      return t(v), v;
+    }
+    return r[o];
   };
   return {
     fields: r,
-    getField: (o) => o in r ? r[o] : (console.warn(`Field with path "${o}" is not registered.`), q()),
+    getField: s,
     getFields: () => Object.values(r),
     registerField: t,
-    defineField: (o) => {
-      const v = H({
-        ...o,
-        value: $(P(e, "data"), o.path),
-        initialValue: d(() => R(e.initialData, u(o.path)))
-      });
-      return t(v), v;
-    }
+    defineField: (o) => s(o.path)
   };
 }
-function X(e) {
-  const r = d(() => e.getFields().some((a) => u(a.dirty))), t = d(() => e.getFields().some((a) => u(a.touched)));
+function Q(e) {
+  const r = d(() => e.getFields().some((s) => u(s.dirty))), t = d(() => e.getFields().some((s) => u(s.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function Y(e) {
+function X(e) {
   return e.filter(
-    (r, t, a) => a.indexOf(r) === t
+    (r, t, s) => s.indexOf(r) === t
   );
 }
-function z(...e) {
+function C(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
-    const a = ((t == null ? void 0 : t.length) ?? 0) > 0;
+    const s = ((t == null ? void 0 : t.length) ?? 0) > 0;
     if (!r && ((t == null ? void 0 : t.length) ?? 0) > 0)
       return t;
-    if (!a)
+    if (!s)
       return r;
-    const s = (r ?? []).concat(t);
-    return Y(s);
+    const a = (r ?? []).concat(t);
+    return X(a);
   }, e[0]);
 }
-function rr(...e) {
-  return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
-    const s = e.map((n) => n[a]).filter(Boolean);
+function Y(...e) {
+  return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
+    const a = e.map((n) => n[s]).filter(Boolean);
     return {
       ...t,
-      [a]: z(...s)
+      [s]: C(...a)
     };
   }, {});
 }
-function b(...e) {
+function P(...e) {
   if (!e.length)
     return {
       general: [],
@@ -174,24 +155,24 @@ function b(...e) {
     };
   const r = e[0];
   return e.length === 1 ? r : e.slice(1).reduce(
-    (t, a) => ({
-      general: z(t.general, a.general),
-      propertyErrors: rr(t.propertyErrors ?? {}, a.propertyErrors ?? {})
+    (t, s) => ({
+      general: C(t.general, s.general),
+      propertyErrors: Y(t.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     r
   );
 }
-function O(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;
+function j(e) {
+  var s;
+  const r = (((s = e.general) == null ? void 0 : s.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, a]) => a == null ? void 0 : a.length).length > 0;
   return r || t;
 }
-function er(e) {
-  const r = e.issues.filter((a) => a.path.length === 0).map((a) => a.message), t = e.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
-    const n = s.path.join(".");
+function rr(e) {
+  const r = e.issues.filter((s) => s.path.length === 0).map((s) => s.message), t = e.issues.filter((s) => s.path.length > 0).reduce((s, a) => {
+    const n = a.path.join(".");
     return {
-      ...a,
-      [n]: [...a[n] ?? [], s.message]
+      ...s,
+      [n]: [...s[n] ?? [], a.message]
     };
   }, {});
   return {
@@ -199,43 +180,43 @@ function er(e) {
     propertyErrors: t
   };
 }
-const V = {
+const p = {
   isValid: !0,
   errors: {
     general: [],
     propertyErrors: {}
   }
 };
-class tr {
+class er {
   constructor(r) {
     this.schema = r;
   }
   async validate(r) {
     if (!this.schema)
-      return V;
+      return p;
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
-      return V;
-    const a = er(t.error);
+      return p;
+    const s = rr(t.error);
     return {
       isValid: !1,
       errors: {
-        general: a.general ?? [],
-        propertyErrors: a.propertyErrors ?? {}
+        general: s.general ?? [],
+        propertyErrors: s.propertyErrors ?? {}
       }
     };
   }
 }
-class ar {
+class tr {
   constructor(r) {
     this.validateFn = r;
   }
   async validate(r) {
     if (!this.validateFn)
-      return V;
+      return p;
     try {
       const t = await this.validateFn(r);
-      return t.isValid ? V : t;
+      return t.isValid ? p : t;
     } catch (t) {
       return {
         isValid: !1,
@@ -251,64 +232,64 @@ class sr {
   constructor(r, t) {
     S(this, "schemaValidator");
     S(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new tr(this.schema), this.functionValidator = new ar(this.validateFn);
+    this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
   }
   async validate(r) {
-    const [t, a] = await Promise.all([
+    const [t, s] = await Promise.all([
       this.schemaValidator.validate(r),
       this.functionValidator.validate(r)
     ]);
     return {
-      isValid: t.isValid && a.isValid,
-      errors: b(t.errors, a.errors)
+      isValid: t.isValid && s.isValid,
+      errors: P(t.errors, s.errors)
     };
   }
 }
-function j(e) {
+function b(e) {
   return d(() => new sr(
     u(e.schema),
     u(e.validateFn)
   ));
 }
-function ir(e, r) {
-  const t = w({
-    validators: y([j(r)]),
+function ar(e, r) {
+  const t = m({
+    validators: A([b(r)]),
     isValidated: !1,
-    errors: u(r.errors) ?? V.errors
+    errors: u(r.errors) ?? p.errors
   });
-  E(() => u(r.errors), async () => {
-    const l = await s();
+  F(() => u(r.errors), async () => {
+    const l = await a();
     n(l.errors);
-  }, { immediate: !0 }), E(
+  }, { immediate: !0 }), F(
     [() => t.validators],
     async (l) => {
       if (t.isValidated)
         if (l) {
-          const c = await s();
+          const c = await a();
           t.errors = c.errors;
         } else
-          t.errors = V.errors;
+          t.errors = p.errors;
     },
     { immediate: !0 }
-  ), E(() => e.data, () => {
+  ), F(() => e.data, () => {
     t.isValidated && o();
   });
-  const a = (l) => {
-    const c = _(l) ? l : j(l);
-    return t.validators.push(c), I() && J(() => {
+  const s = (l) => {
+    const c = _(l) ? l : b(l);
+    return t.validators.push(c), J() && T(() => {
       t.validators = t.validators.filter(
         (f) => f !== c
       );
     }), c;
   };
-  async function s() {
+  async function a() {
     const l = await Promise.all(
-      t.validators.filter((p) => u(p) !== void 0).map((p) => u(p).validate(e.data))
-    ), c = l.every((p) => p.isValid);
-    let { errors: f } = V;
+      t.validators.filter((V) => u(V) !== void 0).map((V) => u(V).validate(e.data))
+    ), c = l.every((V) => V.isValid);
+    let { errors: f } = p;
     if (!c) {
-      const p = l.map((D) => D.errors);
-      f = b(...p);
+      const V = l.map((R) => R.errors);
+      f = P(...V);
     }
     return {
       errors: f,
@@ -316,37 +297,37 @@ function ir(e, r) {
     };
   }
   const n = (l) => {
-    t.errors = b(u(r.errors) ?? V.errors, l);
+    t.errors = P(u(r.errors) ?? p.errors, l);
   }, o = async () => {
-    const l = await s();
+    const l = await a();
     return n(l.errors), t.isValidated = !0, {
-      isValid: !O(l.errors),
+      isValid: !j(l.errors),
       errors: t.errors
     };
-  }, v = d(() => !O(t.errors));
+  }, v = d(() => !j(t.errors));
   return {
-    ...A(t),
+    ...O(t),
     validateForm: o,
-    defineValidator: a,
+    defineValidator: s,
     isValid: v
   };
 }
-class nr {
+class ir {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
   async validate(r) {
-    const t = R(r, this.path);
+    const t = w(r, this.path);
     if (!this.validator)
-      return V;
-    const a = await this.validator.validate(t);
+      return p;
+    const s = await this.validator.validate(t);
     return {
-      isValid: a.isValid,
+      isValid: s.isValid,
       errors: {
-        general: a.errors.general || [],
-        propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            m(this.path, s),
+        general: s.errors.general || [],
+        propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
+          Object.entries(s.errors.propertyErrors).map(([a, n]) => [
+            E(this.path, a),
             n
           ])
         ) : {}
@@ -354,18 +335,18 @@ class nr {
     };
   }
 }
-function or(e, r, t) {
-  const a = $(e.data, r), s = d(() => R(e.initialData.value, r)), n = (i) => ({
+function nr(e, r, t) {
+  const s = z(e.data, r), a = d(() => w(e.initialData.value, r)), n = (i) => ({
     ...i,
     path: d(() => u(i.path).replace(r + ".", "")),
     setData: (h) => {
       i.setData(h);
     }
   }), o = (i) => {
-    const h = m(r, i), g = e.getField(h);
+    const h = E(r, i), g = e.getField(h);
     return g ? n(g) : {};
   }, v = (i) => {
-    const h = m(r, i.path), g = e.defineField({
+    const h = E(r, i.path), g = e.defineField({
       ...i,
       path: h
     });
@@ -376,28 +357,28 @@ function or(e, r, t) {
   }).map((i) => n(i)), c = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), f = d(() => c().some((i) => i.dirty.value)), p = d(() => c().some((i) => i.touched.value)), D = d(() => e.isValid.value), C = d(() => e.isValidated.value), M = d(() => k(u(e.errors), r));
+  }), f = d(() => c().some((i) => i.dirty.value)), V = d(() => c().some((i) => i.touched.value)), R = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => k(u(e.errors), r));
   return {
-    data: a,
-    initialData: s,
+    data: s,
+    initialData: a,
     defineField: v,
     getField: o,
     getFields: l,
     isDirty: f,
-    isTouched: p,
-    isValid: D,
-    isValidated: C,
-    errors: M,
+    isTouched: V,
+    isValid: R,
+    isValidated: M,
+    errors: $,
     defineValidator: (i) => {
-      const h = _(i) ? i : j(i), g = d(
-        () => new nr(r, u(h))
+      const h = _(i) ? i : b(i), g = d(
+        () => new ir(r, u(h))
       );
       return e.defineValidator(g), h;
     },
     reset: () => c().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
     getSubForm: (i, h) => {
-      const g = m(r, i);
+      const g = E(r, i);
       return e.getSubForm(
         g,
         h
@@ -405,30 +386,30 @@ function or(e, r, t) {
     }
   };
 }
-function pr(e) {
-  const r = d(() => Object.freeze(F(e.initialData))), t = y(F(r)), a = w({
+function vr(e) {
+  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
     initialData: r,
     data: t
-  }), s = Q(a), n = ir(a, e), o = X(s), v = () => {
-    t.value = F(r), s.getFields().forEach(
+  }), a = H(s), n = ar(s, e), o = Q(a), v = () => {
+    t.value = y(r), a.getFields().forEach(
       (f) => f.reset()
     );
   };
-  function l(f, p) {
-    return or(c, f);
+  function l(f, V) {
+    return nr(c, f);
   }
   const c = {
-    ...s,
+    ...a,
     ...n,
     ...o,
     reset: v,
     getSubForm: l,
-    initialData: P(a, "initialData"),
-    data: P(a, "data")
+    initialData: D(s, "initialData"),
+    data: D(s, "data")
   };
   return c;
 }
-const Vr = /* @__PURE__ */ T({
+const Vr = /* @__PURE__ */ B({
   __name: "Field",
   props: {
     form: {},
@@ -441,10 +422,10 @@ const Vr = /* @__PURE__ */ T({
     const r = e, t = r.form.defineField({
       path: r.path
     });
-    return (a, s) => G(a.$slots, "default", L(U(w(u(t)))));
+    return (s, a) => G(s.$slots, "default", L(U(m(u(t)))));
   }
 });
 export {
   Vr as Field,
-  pr as useForm
+  vr as useForm
 };

package/package.json

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

package/src/composables/useFieldRegistry.ts

@@ -27,10 +27,16 @@ export function useFieldRegistry<T extends FormDataDefault>(
   }
 
   const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
-    if (!(path in fields)) {
-      console.warn(`Field with path "${path}" is not registered.`)
+    if (!fields[path]) {
+      const field = useField({
+        path,
+        value: getLens(toRef(formState, 'data'), path),
+        initialValue: computed(() => getNestedValue(formState.initialData, path)),
+      })
 
-      return getEmptyField() as ResolvedFormField<T, K>
+      registerField(field)
+
+      return field
     }
 
     return fields[path] as ResolvedFormField<T, K>
@@ -40,14 +46,11 @@ export function useFieldRegistry<T extends FormDataDefault>(
     return Object.values(fields) as FieldsTuple<TData>
   }
 
-  const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => {
-    const field = useField({
-      ...options,
-      value: getLens(toRef(formState, 'data'), options.path),
-      initialValue: computed(() => getNestedValue(formState.initialData, unref(options.path))),
-    })
+  const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>): ResolvedFormField<T, K> => {
+    const field = getField(options.path)
 
-    registerField(field)
+    // TODO: If more options are ever needed than only the path we have to update the field
+    // here with the new options
 
     return field
   }