@teamnovu/kit-vue-forms 0.0.19 → 0.0.21

package/dist/components/Field.vue.d.ts

@@ -1,7 +1,7 @@
 import { Form } from '../types/form.ts';
 import { Paths, PickProps } from '../types/util.ts';
 import { UseFieldOptions } from '../composables/useField.ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, Ref, VNode } from 'vue';
 import { ValidationErrors, ErrorMessage } from '../index.js';
 export interface FieldProps<TData extends object, TPath extends string> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
     form: Form<TData>;
@@ -12,12 +12,12 @@ declare const _default: <TData extends object, TPath extends Paths<TData>>(__VLS
     attrs: any;
     slots: {
         default?(_: {
-            data: PickProps<TData, TPath>;
-            path: TPath;
-            initialValue: PickProps<TData, TPath>;
-            errors: ValidationErrors;
-            touched: boolean;
-            dirty: boolean;
+            data: Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>;
+            path: Ref<TPath, TPath>;
+            initialValue: Readonly< Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>>;
+            errors: Ref<ValidationErrors>;
+            touched: Ref<boolean>;
+            dirty: Ref<boolean>;
             setData: (newData: PickProps<TData, TPath>) => void;
             onBlur: () => void;
             onFocus: () => void;

package/dist/index.js

@@ -1,49 +1,50 @@
 var T = Object.defineProperty;
 var G = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var _ = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as E, toRefs as N, toRef as D, ref as W, watch as y, isRef as z, getCurrentScope as q, onBeforeUnmount as H, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as B, resolveComponent as Q, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as X, mergeProps as Y } from "vue";
+var P = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
+import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as b, toRefs as N, toRef as _, ref as W, watch as y, isRef as z, getCurrentScope as q, onBeforeUnmount as H, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as B, resolveComponent as Q, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as X, mergeProps as Y } from "vue";
+import { cloneDeep as x } from "lodash-es";
 import "zod";
 function g(e) {
   const r = L(e), t = Z(r);
-  return structuredClone(t);
+  return x(t);
 }
 function K(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
-function w(e, r) {
+function E(e, r) {
   return (Array.isArray(r) ? r : K(r)).reduce(
     (s, a) => s == null ? void 0 : s[a],
     e
   );
 }
-function x(e, r, t) {
+function rr(e, r, t) {
   const s = Array.isArray(r) ? r : K(r);
   if (s.length === 0)
     throw new Error("Path cannot be empty");
-  const a = s.at(-1), o = s.slice(0, -1).reduce(
+  const a = s.at(-1), n = s.slice(0, -1).reduce(
     (h, c) => h[c],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
-  o[a] = t;
+  n[a] = t;
 }
 const U = (e, r) => u({
   get() {
-    return w(d(e), d(r));
+    return E(d(e), d(r));
   },
   set(t) {
-    x(d(e), d(r), t);
+    rr(d(e), d(r), t);
   }
 });
 function F(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function rr(e, r) {
+function er(e, r) {
   if (!r)
     return e;
   const t = `${r}.`, s = Object.fromEntries(
     Object.entries(e.propertyErrors).filter(([a]) => a.startsWith(t)).map(
-      ([a, o]) => [a.slice(t.length), o]
+      ([a, n]) => [a.slice(t.length), n]
     )
   );
   return {
@@ -52,8 +53,8 @@ function rr(e, r) {
     propertyErrors: s
   };
 }
-function er(e) {
-  const r = E({
+function tr(e) {
+  const r = b({
     value: e.value,
     path: e.path,
     initialValue: u(() => Object.freeze(g(e.initialValue))),
@@ -63,12 +64,12 @@ function er(e) {
     r.value = f;
   }, a = () => {
     r.touched = !0;
-  }, o = () => {
+  }, n = () => {
   }, h = () => {
     r.value = g(r.initialValue), r.touched = !1, r.errors = [];
   }, c = (f) => {
     r.errors = f;
-  }, n = () => {
+  }, o = () => {
     r.errors = [];
   }, l = N(r);
   return {
@@ -80,22 +81,22 @@ function er(e) {
     dirty: t,
     setData: s,
     onBlur: a,
-    onFocus: o,
+    onFocus: n,
     reset: h,
     setErrors: c,
-    clearErrors: n
+    clearErrors: o
   };
 }
-function tr(e, r) {
+function sr(e, r) {
   const t = {}, s = (c) => {
-    const n = d(c.path);
-    t[n] = c;
+    const o = d(c.path);
+    t[o] = c;
   }, a = (c) => {
     if (!t[c]) {
-      const n = er({
+      const o = tr({
         path: c,
-        value: U(D(e, "data"), c),
-        initialValue: u(() => w(e.initialData, c)),
+        value: U(_(e, "data"), c),
+        initialValue: u(() => E(e.initialData, c)),
         errors: u({
           get() {
             return r.errors.value.propertyErrors[c] || [];
@@ -105,7 +106,7 @@ function tr(e, r) {
           }
         })
       });
-      return s(n), n;
+      return s(o), o;
     }
     return t[c];
   };
@@ -117,14 +118,14 @@ function tr(e, r) {
     defineField: (c) => a(c.path)
   };
 }
-function sr(e) {
+function ar(e) {
   const r = u(() => e.getFields().some((s) => d(s.dirty))), t = u(() => e.getFields().some((s) => d(s.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function ar(e) {
+function or(e) {
   return e.filter(
     (r, t, s) => s.indexOf(r) === t
   );
@@ -139,19 +140,19 @@ function k(...e) {
     if (!s)
       return r;
     const a = (r ?? []).concat(t);
-    return ar(a);
+    return or(a);
   }, e[0]);
 }
-function or(...e) {
+function nr(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
-    const a = e.map((o) => o[s]).filter(Boolean);
+    const a = e.map((n) => n[s]).filter(Boolean);
     return {
       ...t,
       [s]: k(...a)
     };
   }, {});
 }
-function R(...e) {
+function D(...e) {
   if (!e.length)
     return {
       general: [],
@@ -161,7 +162,7 @@ function R(...e) {
   return e.length === 1 ? r : e.slice(1).reduce(
     (t, s) => ({
       general: k(t.general, s.general),
-      propertyErrors: or(t.propertyErrors ?? {}, s.propertyErrors ?? {})
+      propertyErrors: nr(t.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     r
   );
@@ -171,12 +172,12 @@ function C(e) {
   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 nr(e) {
+function ir(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 o = a.path.join(".");
+    const n = a.path.join(".");
     return {
       ...s,
-      [o]: [...s[o] ?? [], a.message]
+      [n]: [...s[n] ?? [], a.message]
     };
   }, {});
   return {
@@ -191,7 +192,7 @@ const m = {
     propertyErrors: {}
   }
 };
-class ir {
+class lr {
   constructor(r) {
     this.schema = r;
   }
@@ -201,7 +202,7 @@ class ir {
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
       return m;
-    const s = nr(t.error);
+    const s = ir(t.error);
     return {
       isValid: !1,
       errors: {
@@ -211,7 +212,7 @@ class ir {
     };
   }
 }
-class lr {
+class cr {
   constructor(r) {
     this.validateFn = r;
   }
@@ -232,11 +233,11 @@ class lr {
     }
   }
 }
-class cr {
+class ur {
   constructor(r, t) {
-    _(this, "schemaValidator");
-    _(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new ir(this.schema), this.functionValidator = new lr(this.validateFn);
+    P(this, "schemaValidator");
+    P(this, "functionValidator");
+    this.schema = r, this.validateFn = t, this.schemaValidator = new lr(this.schema), this.functionValidator = new cr(this.validateFn);
   }
   async validate(r) {
     const [t, s] = await Promise.all([
@@ -245,30 +246,30 @@ class cr {
     ]);
     return {
       isValid: t.isValid && s.isValid,
-      errors: R(t.errors, s.errors)
+      errors: D(t.errors, s.errors)
     };
   }
 }
-function b(e) {
-  return u(() => new cr(
+function R(e) {
+  return u(() => new ur(
     d(e.schema),
     d(e.validateFn)
   ));
 }
-function ur(e, r) {
-  const t = E({
-    validators: W([b(r)]),
+function dr(e, r) {
+  const t = b({
+    validators: W([R(r)]),
     isValidated: !1,
     errors: d(r.errors) ?? m.errors
   });
   y(() => d(r.errors), async () => {
-    const n = await a();
-    o(n.errors);
+    const o = await a();
+    n(o.errors);
   }, { immediate: !0 }), y(
     [() => t.validators],
-    async (n) => {
+    async (o) => {
       if (t.isValidated)
-        if (n) {
+        if (o) {
           const l = await a();
           t.errors = l.errors;
         } else
@@ -278,8 +279,8 @@ function ur(e, r) {
   ), y(() => e.data, () => {
     t.isValidated && h();
   });
-  const s = (n) => {
-    const l = z(n) ? n : b(n);
+  const s = (o) => {
+    const l = z(o) ? o : R(o);
     return t.validators.push(l), q() && H(() => {
       t.validators = t.validators.filter(
         (f) => f !== l
@@ -287,25 +288,25 @@ function ur(e, r) {
     }), l;
   };
   async function a() {
-    const n = await Promise.all(
+    const o = await Promise.all(
       t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), l = n.every((v) => v.isValid);
+    ), l = o.every((v) => v.isValid);
     let { errors: f } = m;
     if (!l) {
-      const v = n.map((P) => P.errors);
-      f = R(...v);
+      const v = o.map((w) => w.errors);
+      f = D(...v);
     }
     return {
       errors: f,
       isValid: l
     };
   }
-  const o = (n) => {
-    t.errors = R(d(r.errors) ?? m.errors, n);
+  const n = (o) => {
+    t.errors = D(d(r.errors) ?? m.errors, o);
   }, h = async () => {
-    const n = await a();
-    return o(n.errors), t.isValidated = !0, {
-      isValid: !C(n.errors),
+    const o = await a();
+    return n(o.errors), t.isValidated = !0, {
+      isValid: !C(o.errors),
       errors: t.errors
     };
   }, c = u(() => !C(t.errors));
@@ -316,12 +317,12 @@ function ur(e, r) {
     isValid: c
   };
 }
-class dr {
+class fr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
   async validate(r) {
-    const t = w(r, this.path);
+    const t = E(r, this.path);
     if (!this.validator)
       return m;
     const s = await this.validator.validate(t);
@@ -330,17 +331,17 @@ class dr {
       errors: {
         general: s.errors.general || [],
         propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([a, o]) => [
+          Object.entries(s.errors.propertyErrors).map(([a, n]) => [
             F(this.path, a),
-            o
+            n
           ])
         ) : {}
       }
     };
   }
 }
-function fr(e, r, t) {
-  const s = U(e.data, r), a = u(() => w(e.initialData.value, r)), o = (i) => ({
+function pr(e, r, t) {
+  const s = U(e.data, r), a = u(() => E(e.initialData.value, r)), n = (i) => ({
     ...i,
     path: u(() => d(i.path).replace(r + ".", "")),
     setData: (p) => {
@@ -348,34 +349,34 @@ function fr(e, r, t) {
     }
   }), h = (i) => {
     const p = F(r, i), V = e.getField(p);
-    return V ? o(V) : {};
+    return V ? n(V) : {};
   }, c = (i) => {
     const p = F(r, i.path), V = e.defineField({
       ...i,
       path: p
     });
-    return o(V);
-  }, n = () => e.getFields().filter((i) => {
+    return n(V);
+  }, o = () => e.getFields().filter((i) => {
     const p = i.path.value;
     return p.startsWith(r + ".") || p === r;
-  }).map((i) => o(i)), l = () => e.getFields().filter((i) => {
+  }).map((i) => n(i)), l = () => e.getFields().filter((i) => {
     const p = i.path.value;
     return p.startsWith(r + ".") || p === r;
-  }), f = u(() => l().some((i) => i.dirty.value)), v = u(() => l().some((i) => i.touched.value)), P = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => rr(d(e.errors), r));
+  }), f = u(() => l().some((i) => i.dirty.value)), v = u(() => l().some((i) => i.touched.value)), w = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => er(d(e.errors), r));
   return {
     data: s,
     initialData: a,
     defineField: c,
     getField: h,
-    getFields: n,
+    getFields: o,
     isDirty: f,
     isTouched: v,
-    isValid: P,
+    isValid: w,
     isValidated: I,
     errors: J,
     defineValidator: (i) => {
-      const p = z(i) ? i : b(i), V = u(
-        () => new dr(r, d(p))
+      const p = z(i) ? i : R(i), V = u(
+        () => new fr(r, d(p))
       );
       return e.defineValidator(V), p;
     },
@@ -390,34 +391,34 @@ function fr(e, r, t) {
     }
   };
 }
-function Fr(e) {
-  const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = E({
+function wr(e) {
+  const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = b({
     initialData: r,
     data: t
   });
   y(r, (f) => {
     s.data = g(f);
   });
-  const a = ur(s, e), o = tr(s, a), h = sr(o), c = () => {
-    t.value = g(r), o.getFields().forEach(
+  const a = dr(s, e), n = sr(s, a), h = ar(n), c = () => {
+    t.value = g(r), n.getFields().forEach(
       (f) => f.reset()
     );
   };
-  function n(f, v) {
-    return fr(l, f);
+  function o(f, v) {
+    return pr(l, f);
   }
   const l = {
-    ...o,
+    ...n,
     ...a,
     ...h,
     reset: c,
-    getSubForm: n,
-    initialData: D(s, "initialData"),
-    data: D(s, "data")
+    getSubForm: o,
+    initialData: _(s, "initialData"),
+    data: _(s, "data")
   };
   return l;
 }
-const Er = /* @__PURE__ */ S({
+const Pr = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -429,10 +430,10 @@ const Er = /* @__PURE__ */ S({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    }), s = E(t);
-    return (a, o) => j(a.$slots, "default", M(B(s)));
+    });
+    return (s, a) => j(s.$slots, "default", M(B(d(t))));
   }
-}), wr = /* @__PURE__ */ S({
+}), _r = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -448,9 +449,9 @@ const Er = /* @__PURE__ */ S({
         form: r.form,
         path: r.path
       }, {
-        default: A(({ errors: a, data: o, setData: h }) => [
+        default: A(({ errors: a, data: n, setData: h }) => [
           ($(), O(X(r.component), Y({ ...r.componentProps, ...r.$attrs }, {
-            "model-value": o,
+            "model-value": n,
             errors: a,
             name: r.path,
             "onUpdate:modelValue": h
@@ -465,7 +466,7 @@ const Er = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), Pr = /* @__PURE__ */ S({
+}), Dr = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
@@ -477,8 +478,8 @@ const Er = /* @__PURE__ */ S({
   }
 });
 export {
-  Er as Field,
-  wr as FormFieldWrapper,
-  Pr as FormPart,
-  Fr as useForm
+  Pr as Field,
+  _r as FormFieldWrapper,
+  Dr as FormPart,
+  wr as useForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "",
   "main": "dist/index.js",
   "type": "module",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.5.0",
+    "lodash-es": "^4.17.21",
     "vue-component-type-helpers": "^3.0.5",
     "zod": "^4"
   },

package/src/components/Field.vue

@@ -1,12 +1,11 @@
 <template>
-  <slot v-bind="slotData" />
+  <slot v-bind="field" />
 </template>
 
 <script
   setup lang="ts"
   generic="TData extends object, TPath extends Paths<TData>"
 >
-import { reactive } from 'vue'
 import type { Form } from '../types/form.ts'
 import type { Paths, PickProps } from '../types/util.ts'
 import type { UseFieldOptions } from '../composables/useField.ts'
@@ -20,6 +19,4 @@ const props = defineProps<FieldProps<TData, TPath>>()
 const field = props.form.defineField({
   path: props.path,
 })
-
-const slotData = reactive(field)
 </script>

package/src/utils/general.ts

@@ -1,7 +1,8 @@
-import { toRaw, toValue, type MaybeRefOrGetter } from 'vue'
+import { type MaybeRefOrGetter, toRaw, toValue } from 'vue'
+import { cloneDeep } from 'lodash-es'
 
 export function cloneRefValue<T>(ref: MaybeRefOrGetter<T> | MaybeRefOrGetter<Readonly<T>>): T {
   const unreffed = toValue(ref)
   const raw = toRaw(unreffed)
-  return structuredClone(raw) as T
+  return cloneDeep(raw) as T
 }