@teamnovu/kit-vue-forms 0.1.13 → 0.1.14

package/dist/composables/useFormData.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+import { FormDataDefault } from '../types/form';
+export declare function useFormData<T extends FormDataDefault>(initialData: Ref<T>): {
+    data: Ref<T, T>;
+};

package/dist/index.js

@@ -1,7 +1,7 @@
 var G = Object.defineProperty;
 var L = (t, e, r) => e in t ? G(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var w = (t, e, r) => L(t, typeof e != "symbol" ? e + "" : e, r);
-import { toValue as Z, toRaw as q, computed as u, unref as f, isRef as j, shallowRef as _, reactive as D, watch as F, toRefs as W, shallowReactive as H, toRef as S, onScopeDispose as Q, watchEffect as X, triggerRef as Y, ref as k, getCurrentScope as x, onBeforeUnmount as ee, defineComponent as $, renderSlot as C, normalizeProps as B, guardReactiveProps as I, resolveComponent as re, createBlock as A, openBlock as M, withCtx as z, resolveDynamicComponent as te, mergeProps as se } from "vue";
+import { toValue as Z, toRaw as q, computed as u, unref as d, isRef as j, shallowRef as _, reactive as D, watch as F, toRefs as W, shallowReactive as H, toRef as S, onScopeDispose as Q, watchEffect as X, triggerRef as Y, ref as k, getCurrentScope as x, onBeforeUnmount as ee, defineComponent as $, renderSlot as C, normalizeProps as B, guardReactiveProps as I, resolveComponent as re, createBlock as A, openBlock as M, withCtx as z, resolveDynamicComponent as te, mergeProps as se } from "vue";
 import { cloneDeep as ae } from "lodash-es";
 import "zod";
 function y(t) {
@@ -20,12 +20,12 @@ function P(t, e) {
 function ie(t, e, r) {
   const s = Array.isArray(e) ? e : K(e), i = s.at(-1);
   if (i) {
-    const o = s.slice(0, -1).reduce(
-      (p, v) => p == null ? void 0 : p[v],
+    const n = s.slice(0, -1).reduce(
+      (h, v) => h == null ? void 0 : h[v],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      f(t)
+      d(t)
     );
-    o[i] = r;
+    n[i] = r;
   } else {
     if (!j(t))
       return;
@@ -34,21 +34,21 @@ function ie(t, e, r) {
 }
 const U = (t, e) => u({
   get() {
-    return P(f(t), f(e));
+    return P(d(t), d(e));
   },
   set(r) {
-    ie(t, f(e), r);
+    ie(t, d(e), r);
   }
 });
 function R(t, e) {
   return !t && !e ? "" : !t && e ? e : !e && t ? t : `${t}.${e}`;
 }
-function oe(t, e) {
+function ne(t, e) {
   if (!e)
     return t;
   const r = `${e}.`, s = Object.fromEntries(
     Object.entries(t.propertyErrors).filter(([i]) => i.startsWith(r)).map(
-      ([i, o]) => [i.slice(r.length), o]
+      ([i, n]) => [i.slice(r.length), n]
     )
   );
   return {
@@ -57,7 +57,7 @@ function oe(t, e) {
     propertyErrors: s
   };
 }
-class ne {
+class oe {
   constructor(e) {
     w(this, "rc", 1);
     this.drop = e;
@@ -84,17 +84,17 @@ function le(t) {
     },
     { flush: "sync" }
   );
-  const s = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), i = (d) => {
-    r.value = d;
-  }, o = () => {
+  const s = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), i = (f) => {
+    r.value = f;
+  }, n = () => {
     r.touched = !0;
-  }, p = () => {
+  }, h = () => {
   }, v = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, V = (d) => {
-    s.value || i(y(d)), r.initialValue = d;
-  }, n = (d) => {
-    r.errors = d;
+  }, V = (f) => {
+    s.value || i(y(f)), r.initialValue = f;
+  }, o = (f) => {
+    r.errors = f;
   }, a = () => {
     r.errors = [];
   }, c = W(r);
@@ -107,10 +107,10 @@ function le(t) {
     dirty: s,
     setData: i,
     setInitialData: V,
-    onBlur: o,
-    onFocus: p,
+    onBlur: n,
+    onFocus: h,
     reset: v,
-    setErrors: n,
+    setErrors: o,
     clearErrors: a
   };
 }
@@ -125,19 +125,19 @@ function ce(t) {
 }
 function ue(t, e) {
   const r = /* @__PURE__ */ new Map(), s = H(/* @__PURE__ */ new Map()), i = (a) => {
-    const c = f(a.path);
+    const c = d(a.path);
     s.set(c, a);
-  }, o = (a) => {
+  }, n = (a) => {
     s.delete(a);
-  }, p = (a) => {
+  }, h = (a) => {
     var c;
-    r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new ne(() => o(a)));
+    r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new oe(() => n(a)));
   }, v = (a) => {
     var c;
     r.has(a) && ((c = r.get(a)) == null || c.dec());
   }, V = (a) => {
     if (!s.has(a)) {
-      const d = le({
+      const f = le({
         path: a,
         value: U(S(t, "data"), a),
         initialValue: ce(
@@ -152,23 +152,23 @@ function ue(t, e) {
           }
         })
       });
-      i(d);
+      i(f);
     }
     const c = s.get(a);
-    return p(a), Q(() => {
+    return h(a), Q(() => {
       v(a);
     }), c;
-  }, n = (a) => V(a.path);
+  }, o = (a) => V(a.path);
   return {
     fields: u(() => [...s.values()]),
     getField: V,
     registerField: i,
-    deregisterField: o,
-    defineField: n
+    deregisterField: n,
+    defineField: o
   };
 }
 function de(t) {
-  const e = u(() => t.fields.value.some((s) => f(s.dirty))), r = u(() => t.fields.value.some((s) => f(s.touched)));
+  const e = u(() => t.fields.value.some((s) => d(s.dirty))), r = u(() => t.fields.value.some((s) => d(s.touched)));
   return {
     isDirty: e,
     isTouched: r
@@ -192,9 +192,9 @@ function J(...t) {
     return fe(i);
   }, t[0]);
 }
-function pe(...t) {
+function he(...t) {
   return t.map((r) => Object.keys(r)).flat().reduce((r, s) => {
-    const i = t.map((o) => o[s]).filter(Boolean);
+    const i = t.map((n) => n[s]).filter(Boolean);
     return {
       ...r,
       [s]: J(...i)
@@ -211,7 +211,7 @@ function b(...t) {
   return t.length === 1 ? e : t.slice(1).reduce(
     (r, s) => ({
       general: J(r.general, s.general),
-      propertyErrors: pe(r.propertyErrors ?? {}, s.propertyErrors ?? {})
+      propertyErrors: he(r.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     e
   );
@@ -221,12 +221,12 @@ function N(t) {
   const e = (((s = t.general) == null ? void 0 : s.length) ?? 0) > 0, r = Object.entries(t.propertyErrors).filter(([, i]) => i == null ? void 0 : i.length).length > 0;
   return e || r;
 }
-function he(t) {
+function pe(t) {
   const e = t.issues.filter((s) => s.path.length === 0).map((s) => s.message), r = t.issues.filter((s) => s.path.length > 0).reduce((s, i) => {
-    const o = i.path.join(".");
+    const n = i.path.join(".");
     return {
       ...s,
-      [o]: [...s[o] ?? [], i.message]
+      [n]: [...s[n] ?? [], i.message]
     };
   }, {});
   return {
@@ -251,7 +251,7 @@ class ve {
     const r = await this.schema.safeParseAsync(e);
     if (r.success)
       return m;
-    const s = he(r.error);
+    const s = pe(r.error);
     return {
       isValid: !1,
       errors: {
@@ -301,72 +301,72 @@ class Ve {
 }
 function O(t) {
   return u(() => new Ve(
-    f(t.schema),
-    f(t.validateFn)
+    d(t.schema),
+    d(t.validateFn)
   ));
 }
 function ye(t, e) {
   const r = D({
     validators: k([O(e)]),
     isValidated: !1,
-    errors: f(e.errors) ?? m.errors
-  }), s = (n = m.errors) => {
-    r.errors = b(f(e.errors) ?? m.errors, n);
+    errors: d(e.errors) ?? m.errors
+  }), s = (o = m.errors) => {
+    r.errors = b(d(e.errors) ?? m.errors, o);
   };
-  F(() => f(e.errors), async () => {
+  F(() => d(e.errors), async () => {
     if (r.isValidated) {
-      const n = await o();
-      s(n.errors);
+      const o = await n();
+      s(o.errors);
     } else
       s();
   }, { immediate: !0 }), F(
     [() => r.validators],
-    async (n) => {
+    async (o) => {
       if (r.isValidated)
-        if (n) {
-          const a = await o();
+        if (o) {
+          const a = await n();
           r.errors = a.errors;
         } else
           r.errors = m.errors;
     },
     { immediate: !0 }
-  ), F(() => t.data, () => {
-    r.isValidated && p();
+  ), F([() => t.data, () => d(e.schema)], () => {
+    r.isValidated && h();
   });
-  const i = (n) => {
-    const a = j(n) ? n : O(n);
+  const i = (o) => {
+    const a = j(o) ? o : O(o);
     return r.validators.push(a), x() && ee(() => {
       r.validators = r.validators.filter(
         (c) => c !== a
       );
     }), a;
   };
-  async function o() {
-    const n = await Promise.all(
-      r.validators.filter((d) => f(d) !== void 0).map((d) => f(d).validate(t.data))
-    ), a = n.every((d) => d.isValid);
+  async function n() {
+    const o = await Promise.all(
+      r.validators.filter((f) => d(f) !== void 0).map((f) => d(f).validate(t.data))
+    ), a = o.every((f) => f.isValid);
     let { errors: c } = m;
     if (!a) {
-      const d = n.map((E) => E.errors);
-      c = b(...d);
+      const f = o.map((E) => E.errors);
+      c = b(...f);
     }
     return {
       errors: c,
       isValid: a
     };
   }
-  const p = async () => {
-    const n = await o();
-    return s(n.errors), r.isValidated = !0, {
-      isValid: !N(n.errors),
+  const h = async () => {
+    const o = await n();
+    return s(o.errors), r.isValidated = !0, {
+      isValid: !N(o.errors),
       errors: r.errors
     };
   }, v = u(() => !N(r.errors)), V = () => {
-    r.isValidated = !1, r.errors = f(e.errors) ?? m.errors;
+    r.isValidated = !1, r.errors = d(e.errors) ?? m.errors;
   };
   return {
     ...W(r),
-    validateForm: p,
+    validateForm: h,
     defineValidator: i,
     isValid: v,
     reset: V
@@ -386,9 +386,9 @@ class ge {
       errors: {
         general: s.errors.general || [],
         propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([i, o]) => [
+          Object.entries(s.errors.propertyErrors).map(([i, n]) => [
             R(this.path, i),
-            o
+            n
           ])
         ) : {}
       }
@@ -396,52 +396,52 @@ class ge {
   }
 }
 function Ee(t, e, r) {
-  const s = U(t.data, e), i = u(() => P(t.initialData.value, e)), o = (l) => ({
+  const s = U(t.data, e), i = u(() => P(t.initialData.value, e)), n = (l) => ({
     ...l,
-    path: u(() => f(l.path).replace(e + ".", "")),
-    setData: (h) => {
-      l.setData(h);
+    path: u(() => d(l.path).replace(e + ".", "")),
+    setData: (p) => {
+      l.setData(p);
     }
-  }), p = (l) => {
-    const h = R(e, l), g = t.getField(h);
-    return g ? o(g) : {};
+  }), h = (l) => {
+    const p = R(e, l), g = t.getField(p);
+    return g ? n(g) : {};
   }, v = (l) => {
-    const h = R(e, l.path), g = t.defineField({
+    const p = R(e, l.path), g = t.defineField({
       ...l,
-      path: h
+      path: p
     });
-    return o(g);
+    return n(g);
   }, V = u(() => t.fields.value.filter((l) => {
-    const h = l.path.value;
-    return h.startsWith(e + ".") || h === e;
-  }).map((l) => o(l))), n = () => t.fields.value.filter((l) => {
-    const h = l.path.value;
-    return h.startsWith(e + ".") || h === e;
-  }), a = u(() => n().some((l) => l.dirty.value)), c = u(() => n().some((l) => l.touched.value)), d = u(() => t.isValid.value), E = u(() => t.isValidated.value), T = u(() => oe(f(t.errors), e));
+    const p = l.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }).map((l) => n(l))), o = () => t.fields.value.filter((l) => {
+    const p = l.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }), a = u(() => o().some((l) => l.dirty.value)), c = u(() => o().some((l) => l.touched.value)), f = u(() => t.isValid.value), E = u(() => t.isValidated.value), T = u(() => ne(d(t.errors), e));
   return {
     data: s,
     fields: V,
     initialData: i,
     defineField: v,
-    getField: p,
+    getField: h,
     isDirty: a,
     isTouched: c,
-    isValid: d,
+    isValid: f,
     isValidated: E,
     errors: T,
     defineValidator: (l) => {
-      const h = j(l) ? l : O(l), g = u(
-        () => new ge(e, f(h))
+      const p = j(l) ? l : O(l), g = u(
+        () => new ge(e, d(p))
       );
-      return t.defineValidator(g), h;
+      return t.defineValidator(g), p;
     },
-    reset: () => n().forEach((l) => l.reset()),
+    reset: () => o().forEach((l) => l.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (l, h) => {
+    getSubForm: (l, p) => {
       const g = R(e, l);
       return t.getSubForm(
         g,
-        h
+        p
       );
     }
   };
@@ -454,24 +454,24 @@ function Oe(t) {
   F(e, (a) => {
     s.data = y(a);
   }, { flush: "sync" });
-  const i = ye(s, t), o = ue(s, i), p = de(o), v = () => {
-    r.value = y(e), i.reset(), o.fields.value.forEach(
+  const i = ye(s, t), n = ue(s, i), h = de(n), v = () => {
+    r.value = y(e), i.reset(), n.fields.value.forEach(
       (a) => a.reset()
     );
   };
   function V(a, c) {
-    return Ee(n, a);
+    return Ee(o, a);
   }
-  const n = {
-    ...o,
+  const o = {
+    ...n,
     ...i,
-    ...p,
+    ...h,
     reset: v,
     getSubForm: V,
     initialData: S(s, "initialData"),
     data: S(s, "data")
   };
-  return n;
+  return o;
 }
 const je = /* @__PURE__ */ $({
   __name: "Field",
@@ -486,7 +486,7 @@ const je = /* @__PURE__ */ $({
     const e = t, r = e.form.defineField({
       path: e.path
     }), s = D(r);
-    return (i, o) => C(i.$slots, "default", B(I(s)));
+    return (i, n) => C(i.$slots, "default", B(I(s)));
   }
 }), $e = /* @__PURE__ */ $({
   inheritAttrs: !1,
@@ -504,12 +504,12 @@ const je = /* @__PURE__ */ $({
         form: e.form,
         path: e.path
       }, {
-        default: z(({ errors: i, data: o, setData: p }) => [
+        default: z(({ errors: i, data: n, setData: h }) => [
           (M(), A(te(e.component), se({ ...e.componentProps, ...e.$attrs }, {
-            "model-value": o,
+            "model-value": n,
             errors: i,
             name: e.path,
-            "onUpdate:modelValue": p
+            "onUpdate:modelValue": h
           }), {
             default: z(() => [
               C(e.$slots, "default")

package/package.json

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

package/src/composables/useFormData.ts

@@ -4,7 +4,7 @@ import type { FormDataDefault } from '../types/form'
 export function useFormData<T extends FormDataDefault>(
   initialData: Ref<T>,
 ) {
-  const data = ref(unref(initialData))
+  const data = ref(unref(initialData)) as Ref<T>
 
   watch(initialData, (newData) => {
     if (newData !== data.value) {

package/src/composables/useValidation.ts

@@ -157,7 +157,7 @@ export function useValidation<T extends FormDataDefault>(
   )
 
   // Watch for changes in form data to trigger validation
-  watch(() => formState.data, () => {
+  watch([() => formState.data, () => unref(options.schema)], () => {
     if (validationState.isValidated) {
       validateForm()
     }