@teamnovu/kit-vue-forms 0.0.10 → 0.0.11

package/dist/composables/useField.d.ts

@@ -7,4 +7,5 @@ export interface UseFieldOptions<T, K extends string> {
     path: K;
     errors?: MaybeRef<ValidationErrors>;
 }
+export declare function getEmptyField(): FormField<unknown, string>;
 export declare function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K>;

package/dist/index.mjs

@@ -1,16 +1,16 @@
 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 I, computed as d, unref as c, 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 { 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 "zod";
-function y(e) {
-  const r = W(e), t = I(r);
+function F(e) {
+  const r = W(e), t = B(r);
   return structuredClone(t);
 }
 function N(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
-function w(e, r) {
+function R(e, r) {
   return (Array.isArray(r) ? r : N(r)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     e
@@ -21,21 +21,21 @@ function Z(e, r, t) {
   if (a.length === 0)
     throw new Error("Path cannot be empty");
   const s = a.at(-1), n = a.slice(0, -1).reduce(
-    (u, v) => u[v],
+    (o, v) => o[v],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
   n[s] = t;
 }
-const z = (e, r) => d({
+const $ = (e, r) => d({
   get() {
-    return w(c(e), c(r));
+    return R(u(e), u(r));
   },
   set(t) {
-    Z(c(e), c(r), t);
+    Z(u(e), u(r), t);
   }
 });
-function E(e, r) {
+function m(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
 function k(e, r) {
@@ -52,15 +52,37 @@ function k(e, r) {
     propertyErrors: a
   };
 }
-function q(e) {
-  const r = m({
+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({
     value: e.value,
     path: e.path,
-    initialValue: d(() => Object.freeze(y(e.initialValue))),
-    errors: c(e.errors) || [],
+    initialValue: d(() => Object.freeze(F(e.initialValue))),
+    errors: u(e.errors) || [],
     touched: !1
   });
-  F(() => c(e.errors), (f) => {
+  E(() => u(e.errors), (f) => {
     r.errors = f || [];
   });
   const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
@@ -68,61 +90,61 @@ function q(e) {
   }, s = () => {
     r.touched = !0;
   }, n = () => {
-  }, u = () => {
-    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
+  }, o = () => {
+    r.value = F(r.initialValue), r.touched = !1, r.errors = [];
   }, v = (f) => {
     r.errors = f;
-  }, o = () => {
+  }, l = () => {
     r.errors = [];
-  }, l = O(r);
+  }, c = A(r);
   return {
-    data: l.value,
-    path: l.path,
-    initialValue: l.initialValue,
-    errors: l.errors,
-    touched: l.touched,
+    data: c.value,
+    path: c.path,
+    initialValue: c.initialValue,
+    errors: c.errors,
+    touched: c.touched,
     dirty: t,
     setData: a,
     onBlur: s,
     onFocus: n,
-    reset: u,
+    reset: o,
     setErrors: v,
-    clearErrors: o
+    clearErrors: l
   };
 }
-function H(e) {
-  const r = {}, t = (u) => {
-    const v = c(u.path);
-    r[v] = u;
+function Q(e) {
+  const r = {}, t = (o) => {
+    const v = u(o.path);
+    r[v] = o;
   };
   return {
     fields: r,
-    getField: (u) => r[u] ?? {},
+    getField: (o) => o in r ? r[o] : (console.warn(`Field with path "${o}" is not registered.`), q()),
     getFields: () => Object.values(r),
     registerField: t,
-    defineField: (u) => {
-      const v = q({
-        ...u,
-        value: z(D(e, "data"), u.path),
-        initialValue: d(() => w(e.initialData, c(u.path)))
+    defineField: (o) => {
+      const v = H({
+        ...o,
+        value: $(P(e, "data"), o.path),
+        initialValue: d(() => R(e.initialData, u(o.path)))
       });
       return t(v), v;
     }
   };
 }
-function Q(e) {
-  const r = d(() => e.getFields().some((a) => c(a.dirty))), t = d(() => e.getFields().some((a) => c(a.touched)));
+function X(e) {
+  const r = d(() => e.getFields().some((a) => u(a.dirty))), t = d(() => e.getFields().some((a) => u(a.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function X(e) {
+function Y(e) {
   return e.filter(
     (r, t, a) => a.indexOf(r) === t
   );
 }
-function C(...e) {
+function z(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
@@ -132,19 +154,19 @@ function C(...e) {
     if (!a)
       return r;
     const s = (r ?? []).concat(t);
-    return X(s);
+    return Y(s);
   }, e[0]);
 }
-function Y(...e) {
+function rr(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
     const s = e.map((n) => n[a]).filter(Boolean);
     return {
       ...t,
-      [a]: C(...s)
+      [a]: z(...s)
     };
   }, {});
 }
-function P(...e) {
+function b(...e) {
   if (!e.length)
     return {
       general: [],
@@ -153,18 +175,18 @@ function P(...e) {
   const r = e[0];
   return e.length === 1 ? r : e.slice(1).reduce(
     (t, a) => ({
-      general: C(t.general, a.general),
-      propertyErrors: Y(t.propertyErrors ?? {}, a.propertyErrors ?? {})
+      general: z(t.general, a.general),
+      propertyErrors: rr(t.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
 }
-function j(e) {
+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;
   return r || t;
 }
-function rr(e) {
+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(".");
     return {
@@ -184,7 +206,7 @@ const V = {
     propertyErrors: {}
   }
 };
-class er {
+class tr {
   constructor(r) {
     this.schema = r;
   }
@@ -194,7 +216,7 @@ class er {
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
       return V;
-    const a = rr(t.error);
+    const a = er(t.error);
     return {
       isValid: !1,
       errors: {
@@ -204,7 +226,7 @@ class er {
     };
   }
 }
-class tr {
+class ar {
   constructor(r) {
     this.validateFn = r;
   }
@@ -225,11 +247,11 @@ class tr {
     }
   }
 }
-class ar {
+class sr {
   constructor(r, t) {
     S(this, "schemaValidator");
     S(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
+    this.schema = r, this.validateFn = t, this.schemaValidator = new tr(this.schema), this.functionValidator = new ar(this.validateFn);
   }
   async validate(r) {
     const [t, a] = await Promise.all([
@@ -238,83 +260,83 @@ class ar {
     ]);
     return {
       isValid: t.isValid && a.isValid,
-      errors: P(t.errors, a.errors)
+      errors: b(t.errors, a.errors)
     };
   }
 }
-function b(e) {
-  return d(() => new ar(
-    c(e.schema),
-    c(e.validateFn)
+function j(e) {
+  return d(() => new sr(
+    u(e.schema),
+    u(e.validateFn)
   ));
 }
-function sr(e, r) {
-  const t = m({
-    validators: A([b(r)]),
+function ir(e, r) {
+  const t = w({
+    validators: y([j(r)]),
     isValidated: !1,
-    errors: c(r.errors) ?? V.errors
+    errors: u(r.errors) ?? V.errors
   });
-  F(() => c(r.errors), async () => {
-    const o = await s();
-    n(o.errors);
-  }, { immediate: !0 }), F(
+  E(() => u(r.errors), async () => {
+    const l = await s();
+    n(l.errors);
+  }, { immediate: !0 }), E(
     [() => t.validators],
-    async (o) => {
+    async (l) => {
       if (t.isValidated)
-        if (o) {
-          const l = await s();
-          t.errors = l.errors;
+        if (l) {
+          const c = await s();
+          t.errors = c.errors;
         } else
           t.errors = V.errors;
     },
     { immediate: !0 }
-  ), F(() => e.data, () => {
-    t.isValidated && u();
+  ), E(() => e.data, () => {
+    t.isValidated && o();
   });
-  const a = (o) => {
-    const l = _(o) ? o : b(o);
-    return t.validators.push(l), J() && T(() => {
+  const a = (l) => {
+    const c = _(l) ? l : j(l);
+    return t.validators.push(c), I() && J(() => {
       t.validators = t.validators.filter(
-        (f) => f !== l
+        (f) => f !== c
       );
-    }), l;
+    }), c;
   };
   async function s() {
-    const o = await Promise.all(
-      t.validators.filter((p) => c(p) !== void 0).map((p) => c(p).validate(e.data))
-    ), l = o.every((p) => p.isValid);
+    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;
-    if (!l) {
-      const p = o.map((R) => R.errors);
-      f = P(...p);
+    if (!c) {
+      const p = l.map((D) => D.errors);
+      f = b(...p);
     }
     return {
       errors: f,
-      isValid: l
+      isValid: c
     };
   }
-  const n = (o) => {
-    t.errors = P(c(r.errors) ?? V.errors, o);
-  }, u = async () => {
-    const o = await s();
-    return n(o.errors), t.isValidated = !0, {
-      isValid: !j(o.errors),
+  const n = (l) => {
+    t.errors = b(u(r.errors) ?? V.errors, l);
+  }, o = async () => {
+    const l = await s();
+    return n(l.errors), t.isValidated = !0, {
+      isValid: !O(l.errors),
       errors: t.errors
     };
-  }, v = d(() => !j(t.errors));
+  }, v = d(() => !O(t.errors));
   return {
-    ...O(t),
-    validateForm: u,
+    ...A(t),
+    validateForm: o,
     defineValidator: a,
     isValid: v
   };
 }
-class ir {
+class nr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
   async validate(r) {
-    const t = w(r, this.path);
+    const t = R(r, this.path);
     if (!this.validator)
       return V;
     const a = await this.validator.validate(t);
@@ -324,7 +346,7 @@ class ir {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(([s, n]) => [
-            E(this.path, s),
+            m(this.path, s),
             n
           ])
         ) : {}
@@ -332,50 +354,50 @@ class ir {
     };
   }
 }
-function nr(e, r, t) {
-  const a = z(e.data, r), s = d(() => w(e.initialData.value, r)), n = (i) => ({
+function or(e, r, t) {
+  const a = $(e.data, r), s = d(() => R(e.initialData.value, r)), n = (i) => ({
     ...i,
-    path: d(() => c(i.path).replace(r + ".", "")),
+    path: d(() => u(i.path).replace(r + ".", "")),
     setData: (h) => {
       i.setData(h);
     }
-  }), u = (i) => {
-    const h = E(r, i), g = e.getField(h);
+  }), o = (i) => {
+    const h = m(r, i), g = e.getField(h);
     return g ? n(g) : {};
   }, v = (i) => {
-    const h = E(r, i.path), g = e.defineField({
+    const h = m(r, i.path), g = e.defineField({
       ...i,
       path: h
     });
     return n(g);
-  }, o = () => e.getFields().filter((i) => {
+  }, l = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }).map((i) => n(i)), l = () => e.getFields().filter((i) => {
+  }).map((i) => n(i)), c = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), f = d(() => l().some((i) => i.dirty.value)), p = d(() => l().some((i) => i.touched.value)), R = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => k(c(e.errors), 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));
   return {
     data: a,
     initialData: s,
     defineField: v,
-    getField: u,
-    getFields: o,
+    getField: o,
+    getFields: l,
     isDirty: f,
     isTouched: p,
-    isValid: R,
-    isValidated: M,
-    errors: $,
+    isValid: D,
+    isValidated: C,
+    errors: M,
     defineValidator: (i) => {
-      const h = _(i) ? i : b(i), g = d(
-        () => new ir(r, c(h))
+      const h = _(i) ? i : j(i), g = d(
+        () => new nr(r, u(h))
       );
       return e.defineValidator(g), h;
     },
-    reset: () => l().forEach((i) => i.reset()),
+    reset: () => c().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
     getSubForm: (i, h) => {
-      const g = E(r, i);
+      const g = m(r, i);
       return e.getSubForm(
         g,
         h
@@ -383,30 +405,30 @@ function nr(e, r, t) {
     }
   };
 }
-function vr(e) {
-  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), a = m({
+function pr(e) {
+  const r = d(() => Object.freeze(F(e.initialData))), t = y(F(r)), a = w({
     initialData: r,
     data: t
-  }), s = H(a), n = sr(a, e), u = Q(s), v = () => {
-    t.value = y(r), s.getFields().forEach(
+  }), s = Q(a), n = ir(a, e), o = X(s), v = () => {
+    t.value = F(r), s.getFields().forEach(
       (f) => f.reset()
     );
   };
-  function o(f, p) {
-    return nr(l, f);
+  function l(f, p) {
+    return or(c, f);
   }
-  const l = {
+  const c = {
     ...s,
     ...n,
-    ...u,
+    ...o,
     reset: v,
-    getSubForm: o,
-    initialData: D(a, "initialData"),
-    data: D(a, "data")
+    getSubForm: l,
+    initialData: P(a, "initialData"),
+    data: P(a, "data")
   };
-  return l;
+  return c;
 }
-const pr = /* @__PURE__ */ B({
+const Vr = /* @__PURE__ */ T({
   __name: "Field",
   props: {
     form: {},
@@ -419,10 +441,10 @@ const pr = /* @__PURE__ */ B({
     const r = e, t = r.form.defineField({
       path: r.path
     });
-    return (a, s) => G(a.$slots, "default", L(U(m(c(t)))));
+    return (a, s) => G(a.$slots, "default", L(U(w(u(t)))));
   }
 });
 export {
-  pr as Field,
-  vr as useForm
+  Vr as Field,
+  pr as useForm
 };

package/package.json

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

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter } from 'vue'
+import { computed, reactive, ref, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -10,6 +10,23 @@ export interface UseFieldOptions<T, K extends string> {
   errors?: MaybeRef<ValidationErrors>
 }
 
+export function getEmptyField(): FormField<unknown, string> {
+  return {
+    setData: () => {},
+    onBlur: () => {},
+    onFocus: () => {},
+    reset: () => {},
+    setErrors: () => {},
+    clearErrors: () => {},
+    data: ref(undefined),
+    initialValue: ref(undefined),
+    path: ref(''),
+    errors: ref([]),
+    touched: ref(false),
+    dirty: computed(() => false),
+  }
+}
+
 export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
   const state = reactive({
     value: options.value,

package/src/composables/useFieldRegistry.ts

@@ -2,7 +2,7 @@ import { computed, 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 { useField, type UseFieldOptions } from './useField'
+import { getEmptyField, useField, type UseFieldOptions } from './useField'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>
@@ -26,8 +26,14 @@ export function useFieldRegistry<T extends FormDataDefault>(
     fields[path] = field
   }
 
-  const getField = <K extends Paths<T>>(path: K) => {
-    return (fields[path] ?? {}) as ResolvedFormField<T, K>
+  const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
+    if (!(path in fields)) {
+      console.warn(`Field with path "${path}" is not registered.`)
+
+      return getEmptyField() as ResolvedFormField<T, K>
+    }
+
+    return fields[path] as ResolvedFormField<T, K>
   }
 
   const getFields = <TData extends T>() => {