@teamnovu/kit-vue-forms 0.0.13 → 0.0.14

package/dist/composables/useField.d.ts

@@ -1,11 +1,10 @@
-import { MaybeRef, MaybeRefOrGetter } from 'vue';
+import { MaybeRef, MaybeRefOrGetter, WritableComputedRef } from 'vue';
 import { FormField } from '../types/form';
 import { ValidationErrors } from '../types/validation';
 export interface UseFieldOptions<T, K extends string> {
     value?: MaybeRef<T>;
     initialValue?: MaybeRefOrGetter<Readonly<T>>;
     path: K;
-    errors?: MaybeRef<ValidationErrors>;
+    errors?: WritableComputedRef<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/composables/useFieldRegistry.d.ts

@@ -1,6 +1,7 @@
 import { FieldsTuple, FormDataDefault, FormField } from '../types/form';
 import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
+import { ValidationState } from './useValidation';
 type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>;
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>, K>;
 export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path'>;
@@ -8,7 +9,7 @@ interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T>
     data: T;
     initialData: TIn;
 }
-export declare function useFieldRegistry<T extends FormDataDefault>(formState: FormState<T>): {
+export declare function useFieldRegistry<T extends FormDataDefault>(formState: FormState<T>, validationState: ValidationState<T>): {
     fields: FieldRegistryCache<T>;
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
     getFields: <TData extends T>() => FieldsTuple<TData>;

package/dist/{index.mjs → index.js}

@@ -1,7 +1,7 @@
 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 f, 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";
+var D = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
+import { toValue as W, toRaw as I, computed as u, unref as d, reactive as m, toRefs as O, toRef as S, ref as A, watch as E, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
 import "zod";
 import "@vueuse/core";
 function y(e) {
@@ -21,22 +21,22 @@ function Z(e, r, t) {
   const s = Array.isArray(r) ? r : N(r);
   if (s.length === 0)
     throw new Error("Path cannot be empty");
-  const a = s.at(-1), n = s.slice(0, -1).reduce(
-    (o, v) => o[v],
+  const a = s.at(-1), o = s.slice(0, -1).reduce(
+    (v, c) => v[c],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
-  n[a] = t;
+  o[a] = t;
 }
-const z = (e, r) => f({
+const z = (e, r) => u({
   get() {
-    return w(u(e), u(r));
+    return w(d(e), d(r));
   },
   set(t) {
-    Z(u(e), u(r), t);
+    Z(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 k(e, r) {
@@ -44,7 +44,7 @@ function k(e, r) {
     return e;
   const t = `${r}.`, s = Object.fromEntries(
     Object.entries(e.propertyErrors).filter(([a]) => a.startsWith(t)).map(
-      ([a, n]) => [a.slice(t.length), n]
+      ([a, o]) => [a.slice(t.length), o]
     )
   );
   return {
@@ -57,65 +57,69 @@ function q(e) {
   const r = m({
     value: e.value,
     path: e.path,
-    initialValue: f(() => Object.freeze(y(e.initialValue))),
-    errors: u(e.errors) || [],
+    initialValue: u(() => Object.freeze(y(e.initialValue))),
+    errors: e.errors,
     touched: !1
-  });
-  F(() => u(e.errors), (d) => {
-    r.errors = d || [];
-  });
-  const t = f(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (d) => {
-    r.value = d;
+  }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
+    r.value = f;
   }, a = () => {
     r.touched = !0;
-  }, n = () => {
   }, o = () => {
+  }, v = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, v = (d) => {
-    r.errors = d;
-  }, l = () => {
+  }, c = (f) => {
+    r.errors = f;
+  }, i = () => {
     r.errors = [];
-  }, c = O(r);
+  }, l = O(r);
   return {
-    data: c.value,
-    path: c.path,
-    initialValue: c.initialValue,
-    errors: c.errors,
-    touched: c.touched,
+    data: l.value,
+    path: l.path,
+    initialValue: l.initialValue,
+    errors: l.errors,
+    touched: l.touched,
     dirty: t,
     setData: s,
     onBlur: a,
-    onFocus: n,
-    reset: o,
-    setErrors: v,
-    clearErrors: l
+    onFocus: o,
+    reset: v,
+    setErrors: c,
+    clearErrors: i
   };
 }
-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: f(() => w(e.initialData, o))
+function H(e, r) {
+  const t = {}, s = (c) => {
+    const i = d(c.path);
+    t[i] = c;
+  }, a = (c) => {
+    if (!t[c]) {
+      const i = q({
+        path: c,
+        value: z(S(e, "data"), c),
+        initialValue: u(() => w(e.initialData, c)),
+        errors: u({
+          get() {
+            return r.errors.value.propertyErrors[c] || [];
+          },
+          set(l) {
+            r.errors.value.propertyErrors[c] = l;
+          }
+        })
       });
-      return t(v), v;
+      return s(i), i;
     }
-    return r[o];
+    return t[c];
   };
   return {
-    fields: r,
-    getField: s,
-    getFields: () => Object.values(r),
-    registerField: t,
-    defineField: (o) => s(o.path)
+    fields: t,
+    getField: a,
+    getFields: () => Object.values(t),
+    registerField: s,
+    defineField: (c) => a(c.path)
   };
 }
 function Q(e) {
-  const r = f(() => e.getFields().some((s) => u(s.dirty))), t = f(() => e.getFields().some((s) => u(s.touched)));
+  const r = u(() => e.getFields().some((s) => d(s.dirty))), t = u(() => e.getFields().some((s) => d(s.touched)));
   return {
     isDirty: r,
     isTouched: t
@@ -141,7 +145,7 @@ function C(...e) {
 }
 function Y(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
-    const a = e.map((n) => n[s]).filter(Boolean);
+    const a = e.map((o) => o[s]).filter(Boolean);
     return {
       ...t,
       [s]: C(...a)
@@ -170,10 +174,10 @@ function j(e) {
 }
 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(".");
+    const o = a.path.join(".");
     return {
       ...s,
-      [n]: [...s[n] ?? [], a.message]
+      [o]: [...s[o] ?? [], a.message]
     };
   }, {});
   return {
@@ -181,7 +185,7 @@ function rr(e) {
     propertyErrors: t
   };
 }
-const p = {
+const V = {
   isValid: !0,
   errors: {
     general: [],
@@ -194,10 +198,10 @@ class er {
   }
   async validate(r) {
     if (!this.schema)
-      return p;
+      return V;
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
-      return p;
+      return V;
     const s = rr(t.error);
     return {
       isValid: !1,
@@ -214,10 +218,10 @@ class tr {
   }
   async validate(r) {
     if (!this.validateFn)
-      return p;
+      return V;
     try {
       const t = await this.validateFn(r);
-      return t.isValid ? p : t;
+      return t.isValid ? V : t;
     } catch (t) {
       return {
         isValid: !1,
@@ -231,8 +235,8 @@ class tr {
 }
 class sr {
   constructor(r, t) {
-    S(this, "schemaValidator");
-    S(this, "functionValidator");
+    D(this, "schemaValidator");
+    D(this, "functionValidator");
     this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
   }
   async validate(r) {
@@ -247,70 +251,70 @@ class sr {
   }
 }
 function b(e) {
-  return f(() => new sr(
-    u(e.schema),
-    u(e.validateFn)
+  return u(() => new sr(
+    d(e.schema),
+    d(e.validateFn)
   ));
 }
 function ar(e, r) {
   const t = m({
     validators: A([b(r)]),
     isValidated: !1,
-    errors: u(r.errors) ?? p.errors
+    errors: d(r.errors) ?? V.errors
   });
-  F(() => u(r.errors), async () => {
-    const l = await a();
-    n(l.errors);
-  }, { immediate: !0 }), F(
+  E(() => d(r.errors), async () => {
+    const i = await a();
+    o(i.errors);
+  }, { immediate: !0 }), E(
     [() => t.validators],
-    async (l) => {
+    async (i) => {
       if (t.isValidated)
-        if (l) {
-          const c = await a();
-          t.errors = c.errors;
+        if (i) {
+          const l = await a();
+          t.errors = l.errors;
         } else
-          t.errors = p.errors;
+          t.errors = V.errors;
     },
     { immediate: !0 }
-  ), F(() => e.data, () => {
-    t.isValidated && o();
+  ), E(() => e.data, () => {
+    t.isValidated && v();
   });
-  const s = (l) => {
-    const c = _(l) ? l : b(l);
-    return t.validators.push(c), J() && T(() => {
+  const s = (i) => {
+    const l = _(i) ? i : b(i);
+    return t.validators.push(l), J() && T(() => {
       t.validators = t.validators.filter(
-        (d) => d !== c
+        (f) => f !== l
       );
-    }), c;
+    }), l;
   };
   async function a() {
-    const l = await Promise.all(
-      t.validators.filter((V) => u(V) !== void 0).map((V) => u(V).validate(e.data))
-    ), c = l.every((V) => V.isValid);
-    let { errors: d } = p;
-    if (!c) {
-      const V = l.map((R) => R.errors);
-      d = P(...V);
+    const i = await Promise.all(
+      t.validators.filter((p) => d(p) !== void 0).map((p) => d(p).validate(e.data))
+    ), l = i.every((p) => p.isValid);
+    let { errors: f } = V;
+    if (!l) {
+      const p = i.map((R) => R.errors);
+      f = P(...p);
     }
     return {
-      errors: d,
-      isValid: c
+      errors: f,
+      isValid: l
     };
   }
-  const n = (l) => {
-    t.errors = P(u(r.errors) ?? p.errors, l);
-  }, o = async () => {
-    const l = await a();
-    return n(l.errors), t.isValidated = !0, {
-      isValid: !j(l.errors),
+  const o = (i) => {
+    t.errors = P(d(r.errors) ?? V.errors, i);
+  }, v = async () => {
+    const i = await a();
+    return o(i.errors), t.isValidated = !0, {
+      isValid: !j(i.errors),
       errors: t.errors
     };
-  }, v = f(() => !j(t.errors));
+  }, c = u(() => !j(t.errors));
   return {
     ...O(t),
-    validateForm: o,
+    validateForm: v,
     defineValidator: s,
-    isValid: v
+    isValid: c
   };
 }
 class ir {
@@ -320,16 +324,16 @@ class ir {
   async validate(r) {
     const t = w(r, this.path);
     if (!this.validator)
-      return p;
+      return V;
     const s = await this.validator.validate(t);
     return {
       isValid: s.isValid,
       errors: {
         general: s.errors.general || [],
         propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([a, n]) => [
-            E(this.path, a),
-            n
+          Object.entries(s.errors.propertyErrors).map(([a, o]) => [
+            F(this.path, a),
+            o
           ])
         ) : {}
       }
@@ -337,49 +341,49 @@ class ir {
   }
 }
 function nr(e, r, t) {
-  const s = z(e.data, r), a = f(() => w(e.initialData.value, r)), n = (i) => ({
-    ...i,
-    path: f(() => u(i.path).replace(r + ".", "")),
+  const s = z(e.data, r), a = u(() => w(e.initialData.value, r)), o = (n) => ({
+    ...n,
+    path: u(() => d(n.path).replace(r + ".", "")),
     setData: (h) => {
-      i.setData(h);
+      n.setData(h);
     }
-  }), o = (i) => {
-    const h = E(r, i), g = e.getField(h);
-    return g ? n(g) : {};
-  }, v = (i) => {
-    const h = E(r, i.path), g = e.defineField({
-      ...i,
+  }), v = (n) => {
+    const h = F(r, n), g = e.getField(h);
+    return g ? o(g) : {};
+  }, c = (n) => {
+    const h = F(r, n.path), g = e.defineField({
+      ...n,
       path: h
     });
-    return n(g);
-  }, l = () => e.getFields().filter((i) => {
-    const h = i.path.value;
+    return o(g);
+  }, i = () => e.getFields().filter((n) => {
+    const h = n.path.value;
     return h.startsWith(r + ".") || h === r;
-  }).map((i) => n(i)), c = () => e.getFields().filter((i) => {
-    const h = i.path.value;
+  }).map((n) => o(n)), l = () => e.getFields().filter((n) => {
+    const h = n.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), d = f(() => c().some((i) => i.dirty.value)), V = f(() => c().some((i) => i.touched.value)), R = f(() => e.isValid.value), M = f(() => e.isValidated.value), $ = f(() => k(u(e.errors), r));
+  }), f = u(() => l().some((n) => n.dirty.value)), p = u(() => l().some((n) => n.touched.value)), R = u(() => e.isValid.value), M = u(() => e.isValidated.value), $ = u(() => k(d(e.errors), r));
   return {
     data: s,
     initialData: a,
-    defineField: v,
-    getField: o,
-    getFields: l,
-    isDirty: d,
-    isTouched: V,
+    defineField: c,
+    getField: v,
+    getFields: i,
+    isDirty: f,
+    isTouched: p,
     isValid: R,
     isValidated: M,
     errors: $,
-    defineValidator: (i) => {
-      const h = _(i) ? i : b(i), g = f(
-        () => new ir(r, u(h))
+    defineValidator: (n) => {
+      const h = _(n) ? n : b(n), g = u(
+        () => new ir(r, d(h))
       );
       return e.defineValidator(g), h;
     },
-    reset: () => c().forEach((i) => i.reset()),
+    reset: () => l().forEach((n) => n.reset()),
     validateForm: () => e.validateForm(),
-    getSubForm: (i, h) => {
-      const g = E(r, i);
+    getSubForm: (n, h) => {
+      const g = F(r, n);
       return e.getSubForm(
         g,
         h
@@ -387,34 +391,34 @@ function nr(e, r, t) {
     }
   };
 }
-function Vr(e) {
-  const r = f(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
+function pr(e) {
+  const r = u(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
     initialData: r,
     data: t
   });
-  F(r, (d) => {
-    s.data = y(d);
+  E(r, (f) => {
+    s.data = y(f);
   });
-  const a = H(s), n = ar(s, e), o = Q(a), v = () => {
-    t.value = y(r), a.getFields().forEach(
-      (d) => d.reset()
+  const a = ar(s, e), o = H(s, a), v = Q(o), c = () => {
+    t.value = y(r), o.getFields().forEach(
+      (f) => f.reset()
     );
   };
-  function l(d, V) {
-    return nr(c, d);
+  function i(f, p) {
+    return nr(l, f);
   }
-  const c = {
-    ...a,
-    ...n,
+  const l = {
     ...o,
-    reset: v,
-    getSubForm: l,
-    initialData: D(s, "initialData"),
-    data: D(s, "data")
+    ...a,
+    ...v,
+    reset: c,
+    getSubForm: i,
+    initialData: S(s, "initialData"),
+    data: S(s, "data")
   };
-  return c;
+  return l;
 }
-const pr = /* @__PURE__ */ B({
+const Vr = /* @__PURE__ */ B({
   __name: "Field",
   props: {
     form: {},
@@ -426,11 +430,11 @@ const pr = /* @__PURE__ */ B({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    });
-    return (s, a) => G(s.$slots, "default", L(U(m(u(t)))));
+    }), s = m(t);
+    return (a, o) => G(a.$slots, "default", L(U(s)));
   }
 });
 export {
-  pr as Field,
-  Vr as useForm
+  Vr as Field,
+  pr as useForm
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -21,10 +22,11 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "vue": "^3.0.0",
-    "vitest": "^2.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/ui": "^2.0.0",
-    "happy-dom": "^12.0.0"
+    "happy-dom": "^12.0.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.5.13"
   },
   "dependencies": {
     "@vueuse/core": "^13.5.0",

package/src/components/Field.vue

@@ -1,5 +1,5 @@
 <template>
-  <slot v-bind="reactive(field)" />
+  <slot v-bind="slotData" />
 </template>
 
 <script
@@ -20,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/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter } from 'vue'
+import { computed, reactive, toRefs, watch, type MaybeRef, type MaybeRefOrGetter, type WritableComputedRef } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -7,24 +7,7 @@ export interface UseFieldOptions<T, K extends string> {
   value?: MaybeRef<T>
   initialValue?: MaybeRefOrGetter<Readonly<T>>
   path: K
-  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),
-  }
+  errors?: WritableComputedRef<ValidationErrors>
 }
 
 export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
@@ -32,14 +15,10 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     value: options.value,
     path: options.path,
     initialValue: computed(() => Object.freeze(cloneRefValue(options.initialValue))),
-    errors: unref(options.errors) || [],
+    errors: options.errors,
     touched: false,
   })
 
-  watch(() => unref(options.errors), (newValue) => {
-    state.errors = newValue || []
-  })
-
   const dirty = computed(() => {
     return JSON.stringify(state.value) !== JSON.stringify(state.initialValue)
   })

package/src/composables/useFieldRegistry.ts

@@ -2,7 +2,8 @@ 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 { getEmptyField, useField, type UseFieldOptions } from './useField'
+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>>
@@ -18,6 +19,7 @@ interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T>
 
 export function useFieldRegistry<T extends FormDataDefault>(
   formState: FormState<T>,
+  validationState: ValidationState<T>,
 ) {
   const fields = {} as FieldRegistryCache<T>
 
@@ -32,6 +34,14 @@ export function useFieldRegistry<T extends FormDataDefault>(
         path,
         value: getLens(toRef(formState, 'data'), path),
         initialValue: computed(() => getNestedValue(formState.initialData, path)),
+        errors: computed({
+          get() {
+            return validationState.errors.value.propertyErrors[path] || []
+          },
+          set(newErrors) {
+            validationState.errors.value.propertyErrors[path] = newErrors
+          },
+        }),
       })
 
       registerField(field)

package/src/composables/useForm.ts

@@ -31,8 +31,8 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
     state.data = cloneRefValue(newValue)
   })
 
-  const fields = useFieldRegistry(state)
   const validationState = useValidation(state, options)
+  const fields = useFieldRegistry(state, validationState)
   const formState = useFormState(fields)
 
   const reset = () => {

package/tests/useValidation.test.ts

@@ -1,10 +1,13 @@
 import { describe, expect, it } from 'vitest'
 import { nextTick, ref } from 'vue'
 import { z } from 'zod'
+import { useForm } from '../src/composables/useForm'
 import { SuccessValidationResult, useValidation } from '../src/composables/useValidation'
 import { ErrorBag } from '../src/types/validation'
 import { hasErrors } from '../src/utils/validation'
 
+const delay = (ms: number = 0) => new Promise(resolve => setTimeout(resolve, ms))
+
 describe('useValidation', () => {
   it('should initialize with no errors', () => {
     const formState = { data: { name: 'John' } }
@@ -213,4 +216,26 @@ describe('useValidation', () => {
     expect(result.errors.propertyErrors.name).toEqual(['Too small: expected string to have >=2 characters']) // From schema validation
     expect(result.errors.propertyErrors.email).toEqual(['External email error'])
   })
+
+  it('should pass errors to the field', async () => {
+    const errors = ref<ErrorBag>(SuccessValidationResult.errors)
+
+    const form = useForm({
+      initialData: { name: 'A' },
+      errors,
+    })
+
+    const field = form.getField('name')
+
+    expect(field.errors.value).toEqual([]) // Initially no errors
+
+    errors.value = {
+      general: [],
+      propertyErrors: { name: ['Name error'] },
+    }
+
+    await delay()
+
+    expect(field.errors.value).toEqual(['Name error'])
+  })
 })