@teamnovu/kit-vue-forms 0.2.8 → 0.2.10

package/dist/index.js

@@ -1,14 +1,14 @@
 var X = Object.defineProperty;
 var Y = (r, t, e) => t in r ? X(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var R = (r, t, e) => Y(r, typeof t != "symbol" ? t + "" : t, e);
-import { toValue as ee, toRaw as te, unref as h, shallowRef as b, watch as D, computed as v, isRef as O, reactive as A, toRefs as K, shallowReactive as re, toRef as _, onScopeDispose as ae, triggerRef as se, ref as L, getCurrentScope as ne, onBeforeUnmount as oe, defineComponent as C, renderSlot as k, normalizeProps as T, guardReactiveProps as x, resolveComponent as ie, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as le, mergeProps as ce, createSlots as ue, renderList as de } from "vue";
-import { cloneDeep as fe } from "lodash-es";
+import { toValue as ee, toRaw as te, unref as h, shallowRef as $, watch as D, computed as m, isRef as _, reactive as A, toRefs as K, shallowReactive as re, toRef as j, onScopeDispose as ae, triggerRef as se, ref as L, getCurrentScope as ne, onBeforeUnmount as oe, defineComponent as T, renderSlot as k, normalizeProps as x, guardReactiveProps as C, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as ie, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
+import { cloneDeep as de } from "lodash-es";
 import "zod";
 function g(r) {
   const t = ee(r), e = te(t);
-  return fe(e);
+  return de(e);
 }
-function he(r) {
+function fe(r) {
   return r.filter(
     (t, e, a) => a.indexOf(t) === e
   );
@@ -23,10 +23,10 @@ function J(...r) {
     if (!a)
       return t;
     const s = (t ?? []).concat(e);
-    return he(s);
+    return fe(s);
   }, r[0]);
 }
-function pe(...r) {
+function he(...r) {
   return r.map((e) => Object.keys(e)).flat().reduce((e, a) => {
     const s = r.map((n) => n[a]).filter(Boolean);
     return {
@@ -35,7 +35,7 @@ function pe(...r) {
     };
   }, {});
 }
-function j(...r) {
+function B(...r) {
   if (!r.length)
     return {
       general: [],
@@ -45,7 +45,7 @@ function j(...r) {
   return r.length === 1 ? t : r.slice(1).reduce(
     (e, a) => ({
       general: J(e.general, a.general),
-      propertyErrors: pe(e.propertyErrors ?? {}, a.propertyErrors ?? {})
+      propertyErrors: he(e.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     t
   );
@@ -71,7 +71,7 @@ function Z(r, t) {
     await e(u);
   };
 }
-class ve {
+class pe {
   constructor(t = (e) => e) {
     R(this, "weakMap", /* @__PURE__ */ new WeakMap());
     R(this, "map", /* @__PURE__ */ new Map());
@@ -94,10 +94,10 @@ class ve {
     this.isReferenceType(a) ? this.weakMap.set(a, e) : this.map.set(a, e);
   }
 }
-function me(r, t, e) {
+function ve(r, t, e) {
   const a = /* @__PURE__ */ new Set();
   return t.map((s, n) => {
-    const u = [...r.get(s) ?? []], m = u.findIndex((p) => !a.has(p)), c = (m === -1 ? [] : u.slice(m))[0];
+    const u = [...r.get(s) ?? []], v = u.findIndex((p) => !a.has(p)), c = (v === -1 ? [] : u.slice(v))[0];
     if (c)
       return a.add(c), {
         id: c,
@@ -113,11 +113,11 @@ function me(r, t, e) {
   });
 }
 function q(r, t, e) {
-  const a = new ve(e == null ? void 0 : e.hashFn), s = r.getField(t), n = b([]);
+  const a = new pe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = $([]);
   return D(
     s.data,
     (c) => {
-      n.value = me(a, c, t);
+      n.value = ve(a, c, t);
     },
     {
       immediate: !0,
@@ -149,11 +149,11 @@ function q(r, t, e) {
 function W(r) {
   return r === "" ? [] : r.split(/\s*\.\s*/).filter(Boolean);
 }
-function Fe(r, t) {
+function me(r, t) {
   const e = Array.isArray(t) ? t : W(t);
-  return !!I(r, e.slice(0, -1));
+  return !!b(r, e.slice(0, -1));
 }
-function I(r, t) {
+function b(r, t) {
   return (Array.isArray(t) ? t : W(t)).reduce(
     (a, s) => a == null ? void 0 : a[s],
     r
@@ -163,29 +163,29 @@ function ye(r, t, e) {
   const a = Array.isArray(t) ? t : W(t), s = a.at(-1);
   if (s) {
     const n = a.slice(0, -1).reduce(
-      (u, m) => ((u == null ? void 0 : u[m]) === void 0 && (u[m] = {}), u == null ? void 0 : u[m]),
+      (u, v) => ((u == null ? void 0 : u[v]) === void 0 && (u[v] = {}), u == null ? void 0 : u[v]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       h(r)
     );
     n[s] = e;
   } else {
-    if (!O(r))
+    if (!_(r))
       return;
     r.value = e;
   }
 }
-const Q = (r, t) => v({
+const Q = (r, t) => m({
   get() {
-    return I(h(r), h(t));
+    return b(h(r), h(t));
   },
   set(e) {
     ye(r, h(t), e);
   }
 });
-function $(r, t) {
+function I(r, t) {
   return !r && !t ? "" : !r && t ? t : !t && r ? r : `${r}.${t}`;
 }
-function Ve(r, t) {
+function Fe(r, t) {
   if (!t)
     return r;
   const e = `${t}.`, a = Object.fromEntries(
@@ -200,7 +200,7 @@ function Ve(r, t) {
     propertyErrors: a
   };
 }
-class ge {
+class Ve {
   constructor(t) {
     R(this, "rc", 1);
     this.drop = t;
@@ -212,13 +212,13 @@ class ge {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function we(r) {
+function ge(r) {
   const e = {
     ...{
       existsInForm: !0
     },
     ...r
-  }, a = b(Object.freeze(g(e.initialValue))), s = A({
+  }, a = $(Object.freeze(g(e.initialValue))), s = A({
     value: e.value,
     path: e.path,
     initialValue: a,
@@ -226,18 +226,18 @@ function we(r) {
     touched: !1
   });
   D(
-    b(e.initialValue),
+    $(e.initialValue),
     () => {
       a.value = Object.freeze(g(e.initialValue)), s.value !== h(e.initialValue) && (s.value = g(e.initialValue));
     },
     { flush: "sync" }
   );
-  const n = v(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (f) => {
+  const n = m(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), u = (f) => {
     s.value = f;
-  }, m = () => {
+  }, v = () => {
     var f;
     s.touched = !0, s.errors = [], (f = e.onBlur) == null || f.call(e);
-  }, y = () => {
+  }, F = () => {
     var f;
     (f = e.onFocus) == null || f.call(e);
   }, c = () => {
@@ -259,18 +259,18 @@ function we(r) {
     dirty: n,
     setData: u,
     setInitialData: o,
-    onBlur: m,
-    onFocus: y,
+    onBlur: v,
+    onFocus: F,
     reset: c,
     setErrors: p,
     clearErrors: i
   };
 }
-const Ee = {
+const we = {
   keepValuesOnUnmount: !0
 };
-function Re(r, t) {
-  const e = () => I(r.initialData, t), a = b(e());
+function Ee(r, t) {
+  const e = () => b(r.initialData, t), a = $(e());
   return D(
     () => r.initialData,
     () => {
@@ -279,31 +279,31 @@ function Re(r, t) {
     { flush: "sync" }
   ), a;
 }
-function De(r, t, e) {
+function Re(r, t, e) {
   const a = /* @__PURE__ */ new Map(), s = re(/* @__PURE__ */ new Map()), n = {
-    ...Ee,
+    ...we,
     ...e
   }, u = (i) => {
     const l = h(i.path);
     s.set(l, i);
-  }, m = (i) => {
+  }, v = (i) => {
     var l;
     n != null && n.keepValuesOnUnmount || (l = s.get(i)) == null || l.reset(), s.delete(i);
-  }, y = (i) => {
+  }, F = (i) => {
     var l;
-    a.has(i) ? (l = a.get(i)) == null || l.inc() : a.set(i, new ge(() => m(i)));
+    a.has(i) ? (l = a.get(i)) == null || l.inc() : a.set(i, new Ve(() => v(i)));
   }, c = (i) => {
     var l;
     a.has(i) && ((l = a.get(i)) == null || l.dec());
   }, o = (i) => {
     const { path: l } = i;
     if (!s.has(l)) {
-      const S = we({
+      const S = ge({
         path: l,
-        value: Q(_(r, "data"), l),
-        initialValue: Re(r, l),
-        existsInForm: v(() => Fe(r.data, h(l))),
-        errors: v({
+        value: Q(j(r, "data"), l),
+        initialValue: Ee(r, l),
+        existsInForm: m(() => me(r.data, h(l))),
+        errors: m({
           get() {
             return t.errors.value.propertyErrors[l] || [];
           },
@@ -329,26 +329,26 @@ function De(r, t, e) {
       u(S);
     }
     const f = s.get(l);
-    return y(l), ae(() => {
+    return F(l), ae(() => {
       c(l);
     }), f;
   }, p = (i) => o(i);
   return {
-    fields: v(() => [...s.values()]),
+    fields: m(() => [...s.values()]),
     getField: (i) => o({ path: i }),
     registerField: u,
-    deregisterField: m,
+    deregisterField: v,
     defineField: p
   };
 }
-function Pe(r) {
-  const t = v(() => r.fields.value.some((a) => h(a.dirty))), e = v(() => r.fields.value.some((a) => h(a.touched)));
+function De(r) {
+  const t = m(() => r.fields.value.some((a) => h(a.dirty))), e = m(() => r.fields.value.some((a) => h(a.touched)));
   return {
     isDirty: t,
     isTouched: e
   };
 }
-function Se(r) {
+function Pe(r) {
   const t = r.issues.filter((a) => a.path.length === 0).map((a) => a.message), e = r.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
     const n = s.path.join(".");
     return {
@@ -367,7 +367,7 @@ const V = {
     propertyErrors: {}
   }
 };
-class Ie {
+class Se {
   constructor(t) {
     this.schema = t;
   }
@@ -377,7 +377,7 @@ class Ie {
     const e = await this.schema.safeParseAsync(t);
     if (e.success)
       return V;
-    const a = Se(e.error);
+    const a = Pe(e.error);
     return {
       data: e.data,
       errors: {
@@ -387,7 +387,7 @@ class Ie {
     };
   }
 }
-class $e {
+class be {
   constructor(t) {
     this.validateFn = t;
   }
@@ -407,11 +407,11 @@ class $e {
     }
   }
 }
-class be {
+class Ie {
   constructor(t, e) {
     R(this, "schemaValidator");
     R(this, "functionValidator");
-    this.schema = t, this.validateFn = e, this.schemaValidator = new Ie(this.schema), this.functionValidator = new $e(this.validateFn);
+    this.schema = t, this.validateFn = e, this.schemaValidator = new Se(this.schema), this.functionValidator = new be(this.validateFn);
   }
   async validate(t) {
     const [e, a] = await Promise.all([
@@ -420,23 +420,23 @@ class be {
     ]);
     return {
       data: e.data,
-      errors: j(e.errors, a.errors)
+      errors: B(e.errors, a.errors)
     };
   }
 }
-function B(r) {
-  return v(() => new be(
+function O(r) {
+  return m(() => new Ie(
     h(r.schema),
     h(r.validateFn)
   ));
 }
-function ke(r, t) {
+function $e(r, t) {
   const e = A({
-    validators: L([B(t)]),
+    validators: L([O(t)]),
     isValidated: !1,
     errors: h(t.errors) ?? V.errors
   }), a = (o = V.errors) => {
-    e.errors = j(h(t.errors) ?? V.errors, o);
+    e.errors = B(h(t.errors) ?? V.errors, o);
   };
   D(() => h(t.errors), async () => {
     if (e.isValidated) {
@@ -459,7 +459,7 @@ function ke(r, t) {
     e.isValidated && u();
   });
   const s = (o) => {
-    const p = O(o) ? o : B(o);
+    const p = _(o) ? o : O(o);
     return e.validators.push(p), ne() && oe(() => {
       e.validators = e.validators.filter(
         (i) => i !== p
@@ -474,7 +474,7 @@ function ke(r, t) {
     let { errors: i } = V;
     if (!p) {
       const f = o.map((S) => S.errors);
-      i = j(...f);
+      i = B(...f);
     }
     return {
       errors: i,
@@ -487,7 +487,7 @@ function ke(r, t) {
     return a(o.errors), e.isValidated = !0, {
       errors: e.errors
     };
-  }, m = async (o) => {
+  }, v = async (o) => {
     const p = await n();
     return a({
       general: p.errors.general,
@@ -498,24 +498,24 @@ function ke(r, t) {
       data: p.data,
       errors: e.errors
     };
-  }, y = v(() => !G(e.errors)), c = () => {
+  }, F = m(() => !G(e.errors)), c = () => {
     e.isValidated = !1, e.errors = h(t.errors) ?? V.errors;
   };
   return {
     ...K(e),
     validateForm: u,
-    validateField: m,
+    validateField: v,
     defineValidator: s,
-    isValid: y,
+    isValid: F,
     reset: c
   };
 }
-class Ae {
+class ke {
   constructor(t, e) {
     this.path = t, this.validator = e;
   }
   async validate(t) {
-    const e = I(t, this.path);
+    const e = b(t, this.path);
     if (!this.validator)
       return V;
     const a = await this.validator.validate(e);
@@ -524,68 +524,68 @@ class Ae {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(
-            ([s, n]) => [$(this.path, s), n]
+            ([s, n]) => [I(this.path, s), n]
           )
         ) : {}
       }
     };
   }
 }
-function Me(r, t, e, a) {
-  const s = Q(r.data, t), n = v(() => I(r.initialData.value, t)), u = (d) => ({
+function Ae(r, t, e, a) {
+  const s = Q(r.data, t), n = m(() => b(r.initialData.value, t)), u = (d) => ({
     ...d,
-    path: v(() => h(d.path).replace(t + ".", "")),
-    setData: (F) => {
-      d.setData(F);
+    path: m(() => h(d.path).replace(t + ".", "")),
+    setData: (y) => {
+      d.setData(y);
     }
-  }), m = (d) => {
-    const F = $(t, d), E = r.getField(F);
+  }), v = (d) => {
+    const y = I(t, d), E = r.getField(y);
     return E ? u(E) : {};
-  }, y = (d) => {
-    const F = $(t, d.path), E = r.defineField({
+  }, F = (d) => {
+    const y = I(t, d.path), E = r.defineField({
       ...d,
-      path: F
+      path: y
     });
     return u(E);
-  }, c = v(() => r.fields.value.filter((d) => {
-    const F = d.path.value;
-    return F.startsWith(t + ".") || F === t;
+  }, c = m(() => r.fields.value.filter((d) => {
+    const y = d.path.value;
+    return y.startsWith(t + ".") || y === t;
   }).map((d) => u(d))), o = () => r.fields.value.filter((d) => {
-    const F = d.path.value;
-    return F.startsWith(t + ".") || F === t;
-  }), p = v(() => o().some((d) => d.dirty.value)), i = v(() => o().some((d) => d.touched.value)), l = v(() => r.isValid.value), f = v(() => r.isValidated.value), S = v(() => Ve(h(r.errors), t)), M = {
+    const y = d.path.value;
+    return y.startsWith(t + ".") || y === t;
+  }), p = m(() => o().some((d) => d.dirty.value)), i = m(() => o().some((d) => d.touched.value)), l = m(() => r.isValid.value), f = m(() => r.isValidated.value), S = m(() => Fe(h(r.errors), t)), M = {
     data: s,
     fields: c,
     initialData: n,
-    defineField: y,
-    getField: m,
+    defineField: F,
+    getField: v,
     isDirty: p,
     isTouched: i,
     isValid: l,
     isValidated: f,
     errors: S,
     defineValidator: (d) => {
-      const F = O(d) ? d : B(d), E = v(
-        () => new Ae(t, h(F))
+      const y = _(d) ? d : O(d), E = m(
+        () => new ke(t, h(y))
       );
-      return r.defineValidator(E), F;
+      return r.defineValidator(E), y;
     },
     reset: () => o().forEach((d) => d.reset()),
     validateForm: () => r.validateForm(),
-    getSubForm: (d, F) => {
-      const E = $(t, d);
+    getSubForm: (d, y) => {
+      const E = I(t, d);
       return r.getSubForm(
         E,
-        F
+        y
       );
     },
     submitHandler: (d) => Z(M, e ?? {})(d),
-    getFieldArray: (d, F) => q(M, d, F)
+    getFieldArray: (d, y) => q(M, d, y)
   };
   return M;
 }
-function Te(r) {
-  const t = v(() => g(r.initialData)), e = L(g(t)), a = A({
+function xe(r) {
+  const t = m(() => g(r.initialData)), e = L(g(t)), a = A({
     initialData: t,
     data: e
   });
@@ -596,32 +596,32 @@ function Te(r) {
     },
     { flush: "sync" }
   );
-  const s = ke(a, r), n = De(a, s, {
+  const s = $e(a, r), n = Re(a, s, {
     keepValuesOnUnmount: r.keepValuesOnUnmount,
     onBlur: async (c) => {
       h(r.validationStrategy) === "onTouch" && s.validateField(c);
     }
-  }), u = Pe(n), m = () => {
+  }), u = De(n), v = () => {
     e.value = g(t), s.reset();
     for (const c of n.fields.value)
       c.reset();
   };
   h(r.validationStrategy) === "onFormOpen" && s.validateForm();
-  const y = {
+  const F = {
     ...n,
     ...s,
     ...u,
-    reset: m,
-    initialData: _(a, "initialData"),
-    data: _(a, "data"),
+    reset: v,
+    initialData: j(a, "initialData"),
+    data: j(a, "data"),
     validateForm: s.validateForm,
-    submitHandler: (c) => Z(y, r)(c),
-    getSubForm: (c, o) => Me(y, c, r),
-    getFieldArray: (c, o) => q(y, c, o)
+    submitHandler: (c) => Z(F, r)(c),
+    getSubForm: (c, o) => Ae(F, c, r),
+    getFieldArray: (c, o) => q(F, c, o)
   };
-  return y;
+  return F;
 }
-const xe = /* @__PURE__ */ C({
+const Me = /* @__PURE__ */ T({
   __name: "Field",
   props: {
     form: {},
@@ -637,9 +637,9 @@ const xe = /* @__PURE__ */ C({
     const t = r, e = t.form.defineField({
       path: t.path
     }), a = A(e);
-    return (s, n) => k(s.$slots, "default", T(x(a)));
+    return (s, n) => k(s.$slots, "default", x(C(a)));
   }
-}), Ne = /* @__PURE__ */ C({
+}), Ce = /* @__PURE__ */ T({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -649,50 +649,49 @@ const xe = /* @__PURE__ */ C({
     path: {}
   },
   setup(r) {
-    return (t, e) => {
-      const a = ie("Field");
-      return H(), z(a, {
-        form: r.form,
-        path: r.path
-      }, {
-        default: U(({ errors: s, data: n, setData: u }) => [
-          (H(), z(le(r.component), ce({ ...r.componentProps, ...t.$attrs }, {
-            "model-value": n,
-            errors: s,
-            name: r.path,
-            "onUpdate:modelValue": u
-          }), ue({
-            default: U(() => [
-              k(t.$slots, "default")
-            ]),
-            _: 2
-          }, [
-            de(t.$slots, (m, y) => ({
-              name: y,
-              fn: U((c) => [
-                k(t.$slots, y, T(x(c ?? {})))
-              ])
-            }))
-          ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
-        ]),
-        _: 3
-      }, 8, ["form", "path"]);
-    };
+    return (t, e) => (H(), z(Me, {
+      form: r.form,
+      path: r.path
+    }, {
+      default: U(({ errors: a, data: s, setData: n, onBlur: u, onFocus: v }) => [
+        (H(), z(ie(r.component), le({ ...r.componentProps, ...t.$attrs }, {
+          "on-blur": u,
+          "on-focus": v,
+          "model-value": s,
+          errors: a,
+          name: r.path,
+          "onUpdate:modelValue": n
+        }), ce({
+          default: U(() => [
+            k(t.$slots, "default")
+          ]),
+          _: 2
+        }, [
+          ue(t.$slots, (F, c) => ({
+            name: c,
+            fn: U((o) => [
+              k(t.$slots, c, x(C(o ?? {})))
+            ])
+          }))
+        ]), 1040, ["on-blur", "on-focus", "model-value", "errors", "name", "onUpdate:modelValue"]))
+      ]),
+      _: 3
+    }, 8, ["form", "path"]));
   }
-}), We = /* @__PURE__ */ C({
+}), Ne = /* @__PURE__ */ T({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(r) {
-    const t = r, e = v(() => t.form.getSubForm(t.path));
-    return (a, s) => k(a.$slots, "default", T(x({ subform: e.value })));
+    const t = r, e = m(() => t.form.getSubForm(t.path));
+    return (a, s) => k(a.$slots, "default", x(C({ subform: e.value })));
   }
 });
 export {
-  xe as Field,
-  Ne as FormFieldWrapper,
-  We as FormPart,
-  Te as useForm
+  Me as Field,
+  Ce as FormFieldWrapper,
+  Ne as FormPart,
+  xe as useForm
 };

package/package.json

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

package/src/components/FormFieldWrapper.vue

@@ -1,12 +1,14 @@
 <template>
   <Field
-    v-slot="{ errors, data, setData }"
+    v-slot="{ errors, data, setData, onBlur, onFocus }"
     :form="form"
     :path="path"
   >
     <component
       :is="component"
       v-bind="{...componentProps, ...$attrs}"
+      :on-blur="onBlur"
+      :on-focus="onFocus"
       :model-value="data"
       :errors="errors"
       :name="path"
@@ -39,6 +41,7 @@ import { type Component } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 import type { Paths } from '../types/util.ts'
 import type { Form, FormDataDefault } from '../types/form.ts'
+import Field from './Field.vue'
 
 export interface FormFieldWrapperProps<
   TData extends FormDataDefault,