@teamnovu/kit-vue-forms 0.0.20 → 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,7 +1,7 @@
 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 D = (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 _, 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) {
@@ -11,7 +11,7 @@ function g(e) {
 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
@@ -21,16 +21,16 @@ 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) {
     rr(d(e), d(r), t);
@@ -44,7 +44,7 @@ function er(e, 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 {
@@ -54,7 +54,7 @@ function er(e, r) {
   };
 }
 function tr(e) {
-  const r = E({
+  const r = b({
     value: e.value,
     path: e.path,
     initialValue: u(() => Object.freeze(g(e.initialValue))),
@@ -64,12 +64,12 @@ function tr(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 {
@@ -81,22 +81,22 @@ function tr(e) {
     dirty: t,
     setData: s,
     onBlur: a,
-    onFocus: o,
+    onFocus: n,
     reset: h,
     setErrors: c,
-    clearErrors: n
+    clearErrors: o
   };
 }
 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 = tr({
+      const o = tr({
         path: c,
         value: U(_(e, "data"), c),
-        initialValue: u(() => w(e.initialData, c)),
+        initialValue: u(() => E(e.initialData, c)),
         errors: u({
           get() {
             return r.errors.value.propertyErrors[c] || [];
@@ -106,7 +106,7 @@ function sr(e, r) {
           }
         })
       });
-      return s(n), n;
+      return s(o), o;
     }
     return t[c];
   };
@@ -145,14 +145,14 @@ function k(...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: [],
@@ -174,10 +174,10 @@ function C(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 {
@@ -235,8 +235,8 @@ class cr {
 }
 class ur {
   constructor(r, t) {
-    D(this, "schemaValidator");
-    D(this, "functionValidator");
+    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) {
@@ -246,30 +246,30 @@ class ur {
     ]);
     return {
       isValid: t.isValid && s.isValid,
-      errors: R(t.errors, s.errors)
+      errors: D(t.errors, s.errors)
     };
   }
 }
-function b(e) {
+function R(e) {
   return u(() => new ur(
     d(e.schema),
     d(e.validateFn)
   ));
 }
 function dr(e, r) {
-  const t = E({
-    validators: W([b(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
@@ -279,8 +279,8 @@ function dr(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
@@ -288,25 +288,25 @@ function dr(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));
@@ -322,7 +322,7 @@ class fr {
     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);
@@ -331,9 +331,9 @@ class fr {
       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
           ])
         ) : {}
       }
@@ -341,7 +341,7 @@ class fr {
   }
 }
 function pr(e, r, t) {
-  const s = U(e.data, r), a = u(() => w(e.initialData.value, r)), o = (i) => ({
+  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) => {
@@ -349,33 +349,33 @@ function pr(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(() => er(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(
+      const p = z(i) ? i : R(i), V = u(
         () => new fr(r, d(p))
       );
       return e.defineValidator(V), p;
@@ -392,27 +392,27 @@ function pr(e, r, t) {
   };
 }
 function wr(e) {
-  const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = 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 = dr(s, e), o = sr(s, a), h = ar(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) {
+  function o(f, v) {
     return pr(l, f);
   }
   const l = {
-    ...o,
+    ...n,
     ...a,
     ...h,
     reset: c,
-    getSubForm: n,
+    getSubForm: o,
     initialData: _(s, "initialData"),
     data: _(s, "data")
   };
@@ -430,10 +430,10 @@ const Pr = /* @__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))));
   }
-}), Dr = /* @__PURE__ */ S({
+}), _r = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -449,9 +449,9 @@ const Pr = /* @__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
@@ -466,7 +466,7 @@ const Pr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), _r = /* @__PURE__ */ S({
+}), Dr = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
@@ -479,7 +479,7 @@ const Pr = /* @__PURE__ */ S({
 });
 export {
   Pr as Field,
-  Dr as FormFieldWrapper,
-  _r as FormPart,
+  _r as FormFieldWrapper,
+  Dr as FormPart,
   wr as useForm
 };

package/package.json

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

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>