@teamnovu/kit-vue-forms 0.1.9 → 0.1.10

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

@@ -19,6 +19,7 @@ declare const _default: <TData extends object, TPath extends Paths<TData>>(__VLS
             touched: boolean;
             dirty: boolean;
             setData: (newData: PickProps<TData, TPath>) => void;
+            setInitialData: (newData: PickProps<TData, TPath>) => void;
             onBlur: () => void;
             onFocus: () => void;
             reset: () => void;

package/dist/index.js

@@ -1,38 +1,38 @@
 var T = Object.defineProperty;
 var G = (t, e, r) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var E = (t, e, r) => G(t, typeof e != "symbol" ? e + "" : e, r);
-import { toValue as L, toRaw as Z, computed as c, unref as d, isRef as O, reactive as D, toRefs as W, shallowReactive as q, toRef as _, onScopeDispose as H, ref as k, watch as w, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as $, renderSlot as j, normalizeProps as z, guardReactiveProps as B, resolveComponent as Y, createBlock as A, openBlock as C, withCtx as M, resolveDynamicComponent as x, mergeProps as ee } from "vue";
+import { toValue as L, toRaw as Z, computed as u, unref as d, isRef as O, reactive as D, toRefs as W, shallowReactive as q, toRef as _, onScopeDispose as H, ref as k, watch as w, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as $, renderSlot as j, normalizeProps as z, guardReactiveProps as B, resolveComponent as Y, createBlock as A, openBlock as C, withCtx as M, resolveDynamicComponent as x, mergeProps as ee } from "vue";
 import { cloneDeep as re } from "lodash-es";
 import "zod";
 function g(t) {
   const e = L(t), r = Z(e);
   return re(r);
 }
-function K(t) {
+function I(t) {
   return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
 }
 function P(t, e) {
-  return (Array.isArray(e) ? e : K(e)).reduce(
+  return (Array.isArray(e) ? e : I(e)).reduce(
     (s, o) => s == null ? void 0 : s[o],
     t
   );
 }
 function te(t, e, r) {
-  const s = Array.isArray(e) ? e : K(e), o = s.at(-1);
+  const s = Array.isArray(e) ? e : I(e), o = s.at(-1);
   if (o) {
-    const n = s.slice(0, -1).reduce(
+    const i = s.slice(0, -1).reduce(
       (p, h) => p[h],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       d(t)
     );
-    n[o] = r;
+    i[o] = r;
   } else {
     if (!O(t))
       return;
     t.value = r;
   }
 }
-const U = (t, e) => c({
+const K = (t, e) => u({
   get() {
     return P(d(t), d(e));
   },
@@ -48,7 +48,7 @@ function se(t, e) {
     return t;
   const r = `${e}.`, s = Object.fromEntries(
     Object.entries(t.propertyErrors).filter(([o]) => o.startsWith(r)).map(
-      ([o, n]) => [o.slice(r.length), n]
+      ([o, i]) => [o.slice(r.length), i]
     )
   );
   return {
@@ -73,55 +73,58 @@ function oe(t) {
   const e = D({
     value: t.value,
     path: t.path,
-    initialValue: c(() => Object.freeze(g(t.initialValue))),
+    initialValue: u(() => Object.freeze(g(t.initialValue))),
     errors: t.errors,
     touched: !1
-  }), r = c(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (a) => {
-    e.value = a;
+  }), r = u(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (c) => {
+    e.value = c;
   }, o = () => {
     e.touched = !0;
-  }, n = () => {
+  }, i = () => {
   }, p = () => {
     e.value = g(e.initialValue), e.touched = !1, e.errors = [];
-  }, h = (a) => {
-    e.errors = a;
-  }, V = () => {
+  }, h = (c) => {
+    r.value || s(g(c)), e.initialValue = c;
+  }, V = (c) => {
+    e.errors = c;
+  }, n = () => {
     e.errors = [];
-  }, i = W(e);
+  }, a = W(e);
   return {
-    data: i.value,
-    path: i.path,
-    initialValue: i.initialValue,
-    errors: i.errors,
-    touched: i.touched,
+    data: a.value,
+    path: a.path,
+    initialValue: a.initialValue,
+    errors: a.errors,
+    touched: a.touched,
     dirty: r,
     setData: s,
+    setInitialData: h,
     onBlur: o,
-    onFocus: n,
+    onFocus: i,
     reset: p,
-    setErrors: h,
-    clearErrors: V
+    setErrors: V,
+    clearErrors: n
   };
 }
-function ne(t, e) {
+function ie(t, e) {
   const r = /* @__PURE__ */ new Map(), s = q(/* @__PURE__ */ new Map()), o = (a) => {
-    const u = d(a.path);
-    s.set(u, a);
-  }, n = (a) => {
+    const c = d(a.path);
+    s.set(c, a);
+  }, i = (a) => {
     s.delete(a);
   }, p = (a) => {
-    var u;
-    r.has(a) ? (u = r.get(a)) == null || u.inc() : r.set(a, new ae(() => n(a)));
+    var c;
+    r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new ae(() => i(a)));
   }, h = (a) => {
-    var u;
-    r.has(a) && ((u = r.get(a)) == null || u.dec());
+    var c;
+    r.has(a) && ((c = r.get(a)) == null || c.dec());
   }, V = (a) => {
     if (!s.has(a)) {
       const v = oe({
         path: a,
-        value: U(_(t, "data"), a),
-        initialValue: c(() => P(t.initialData, a)),
-        errors: c({
+        value: K(_(t, "data"), a),
+        initialValue: u(() => P(t.initialData, a)),
+        errors: u({
           get() {
             return e.errors.value.propertyErrors[a] || [];
           },
@@ -132,21 +135,21 @@ function ne(t, e) {
       });
       o(v);
     }
-    const u = s.get(a);
+    const c = s.get(a);
     return p(a), H(() => {
       h(a);
-    }), u;
-  }, i = (a) => V(a.path);
+    }), c;
+  }, n = (a) => V(a.path);
   return {
-    fields: c(() => [...s.values()]),
+    fields: u(() => [...s.values()]),
     getField: V,
     registerField: o,
-    deregisterField: n,
-    defineField: i
+    deregisterField: i,
+    defineField: n
   };
 }
-function ie(t) {
-  const e = c(() => t.fields.value.some((s) => d(s.dirty))), r = c(() => t.fields.value.some((s) => d(s.touched)));
+function ne(t) {
+  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
@@ -157,7 +160,7 @@ function le(t) {
     (e, r, s) => s.indexOf(e) === r
   );
 }
-function I(...t) {
+function U(...t) {
   return t.slice(1).reduce((e, r) => {
     if (!e && !r)
       return;
@@ -172,10 +175,10 @@ function I(...t) {
 }
 function ce(...t) {
   return t.map((r) => Object.keys(r)).flat().reduce((r, s) => {
-    const o = t.map((n) => n[s]).filter(Boolean);
+    const o = t.map((i) => i[s]).filter(Boolean);
     return {
       ...r,
-      [s]: I(...o)
+      [s]: U(...o)
     };
   }, {});
 }
@@ -188,7 +191,7 @@ function S(...t) {
   const e = t[0];
   return t.length === 1 ? e : t.slice(1).reduce(
     (r, s) => ({
-      general: I(r.general, s.general),
+      general: U(r.general, s.general),
       propertyErrors: ce(r.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     e
@@ -201,10 +204,10 @@ function N(t) {
 }
 function ue(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, o) => {
-    const n = o.path.join(".");
+    const i = o.path.join(".");
     return {
       ...s,
-      [n]: [...s[n] ?? [], o.message]
+      [i]: [...s[i] ?? [], o.message]
     };
   }, {});
   return {
@@ -278,7 +281,7 @@ class pe {
   }
 }
 function b(t) {
-  return c(() => new pe(
+  return u(() => new pe(
     d(t.schema),
     d(t.validateFn)
   ));
@@ -288,21 +291,21 @@ function he(t, e) {
     validators: k([b(e)]),
     isValidated: !1,
     errors: d(e.errors) ?? m.errors
-  }), s = (i = m.errors) => {
-    r.errors = S(d(e.errors) ?? m.errors, i);
+  }), s = (n = m.errors) => {
+    r.errors = S(d(e.errors) ?? m.errors, n);
   };
   w(() => d(e.errors), async () => {
     if (r.isValidated) {
-      const i = await n();
-      s(i.errors);
+      const n = await i();
+      s(n.errors);
     } else
       s();
   }, { immediate: !0 }), w(
     [() => r.validators],
-    async (i) => {
+    async (n) => {
       if (r.isValidated)
-        if (i) {
-          const a = await n();
+        if (n) {
+          const a = await i();
           r.errors = a.errors;
         } else
           r.errors = m.errors;
@@ -311,35 +314,35 @@ function he(t, e) {
   ), w(() => t.data, () => {
     r.isValidated && p();
   });
-  const o = (i) => {
-    const a = O(i) ? i : b(i);
+  const o = (n) => {
+    const a = O(n) ? n : b(n);
     return r.validators.push(a), Q() && X(() => {
       r.validators = r.validators.filter(
-        (u) => u !== a
+        (c) => c !== a
       );
     }), a;
   };
-  async function n() {
-    const i = await Promise.all(
+  async function i() {
+    const n = await Promise.all(
       r.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(t.data))
-    ), a = i.every((v) => v.isValid);
-    let { errors: u } = m;
+    ), a = n.every((v) => v.isValid);
+    let { errors: c } = m;
     if (!a) {
-      const v = i.map((F) => F.errors);
-      u = S(...v);
+      const v = n.map((F) => F.errors);
+      c = S(...v);
     }
     return {
-      errors: u,
+      errors: c,
       isValid: a
     };
   }
   const p = async () => {
-    const i = await n();
-    return s(i.errors), r.isValidated = !0, {
-      isValid: !N(i.errors),
+    const n = await i();
+    return s(n.errors), r.isValidated = !0, {
+      isValid: !N(n.errors),
       errors: r.errors
     };
-  }, h = c(() => !N(r.errors)), V = () => {
+  }, h = u(() => !N(r.errors)), V = () => {
     r.isValidated = !1, r.errors = d(e.errors) ?? m.errors;
   };
   return {
@@ -364,9 +367,9 @@ class ve {
       errors: {
         general: s.errors.general || [],
         propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([o, n]) => [
+          Object.entries(s.errors.propertyErrors).map(([o, i]) => [
             R(this.path, o),
-            n
+            i
           ])
         ) : {}
       }
@@ -374,28 +377,28 @@ class ve {
   }
 }
 function me(t, e, r) {
-  const s = U(t.data, e), o = c(() => P(t.initialData.value, e)), n = (l) => ({
+  const s = K(t.data, e), o = u(() => P(t.initialData.value, e)), i = (l) => ({
     ...l,
-    path: c(() => d(l.path).replace(e + ".", "")),
+    path: u(() => d(l.path).replace(e + ".", "")),
     setData: (f) => {
       l.setData(f);
     }
   }), p = (l) => {
     const f = R(e, l), y = t.getField(f);
-    return y ? n(y) : {};
+    return y ? i(y) : {};
   }, h = (l) => {
     const f = R(e, l.path), y = t.defineField({
       ...l,
       path: f
     });
-    return n(y);
-  }, V = c(() => t.fields.value.filter((l) => {
+    return i(y);
+  }, V = u(() => t.fields.value.filter((l) => {
     const f = l.path.value;
     return f.startsWith(e + ".") || f === e;
-  }).map((l) => n(l))), i = () => t.fields.value.filter((l) => {
+  }).map((l) => i(l))), n = () => t.fields.value.filter((l) => {
     const f = l.path.value;
     return f.startsWith(e + ".") || f === e;
-  }), a = c(() => i().some((l) => l.dirty.value)), u = c(() => i().some((l) => l.touched.value)), v = c(() => t.isValid.value), F = c(() => t.isValidated.value), J = c(() => se(d(t.errors), e));
+  }), a = u(() => n().some((l) => l.dirty.value)), c = u(() => n().some((l) => l.touched.value)), v = u(() => t.isValid.value), F = u(() => t.isValidated.value), J = u(() => se(d(t.errors), e));
   return {
     data: s,
     fields: V,
@@ -403,17 +406,17 @@ function me(t, e, r) {
     defineField: h,
     getField: p,
     isDirty: a,
-    isTouched: u,
+    isTouched: c,
     isValid: v,
     isValidated: F,
     errors: J,
     defineValidator: (l) => {
-      const f = O(l) ? l : b(l), y = c(
+      const f = O(l) ? l : b(l), y = u(
         () => new ve(e, d(f))
       );
       return t.defineValidator(y), f;
     },
-    reset: () => i().forEach((l) => l.reset()),
+    reset: () => n().forEach((l) => l.reset()),
     validateForm: () => t.validateForm(),
     getSubForm: (l, f) => {
       const y = R(e, l);
@@ -425,23 +428,23 @@ function me(t, e, r) {
   };
 }
 function Pe(t) {
-  const e = c(() => Object.freeze(g(t.initialData))), r = k(g(e)), s = D({
+  const e = u(() => Object.freeze(g(t.initialData))), r = k(g(e)), s = D({
     initialData: e,
     data: r
   });
   w(e, (a) => {
     s.data = g(a);
   });
-  const o = he(s, t), n = ne(s, o), p = ie(n), h = () => {
-    r.value = g(e), o.reset(), n.fields.value.forEach(
+  const o = he(s, t), i = ie(s, o), p = ne(i), h = () => {
+    r.value = g(e), o.reset(), i.fields.value.forEach(
       (a) => a.reset()
     );
   };
-  function V(a, u) {
-    return me(i, a);
+  function V(a, c) {
+    return me(n, a);
   }
-  const i = {
-    ...n,
+  const n = {
+    ...i,
     ...o,
     ...p,
     reset: h,
@@ -449,7 +452,7 @@ function Pe(t) {
     initialData: _(s, "initialData"),
     data: _(s, "data")
   };
-  return i;
+  return n;
 }
 const _e = /* @__PURE__ */ $({
   __name: "Field",
@@ -464,7 +467,7 @@ const _e = /* @__PURE__ */ $({
     const e = t, r = e.form.defineField({
       path: e.path
     }), s = D(r);
-    return (o, n) => j(o.$slots, "default", z(B(s)));
+    return (o, i) => j(o.$slots, "default", z(B(s)));
   }
 }), Se = /* @__PURE__ */ $({
   inheritAttrs: !1,
@@ -482,9 +485,9 @@ const _e = /* @__PURE__ */ $({
         form: e.form,
         path: e.path
       }, {
-        default: M(({ errors: o, data: n, setData: p }) => [
+        default: M(({ errors: o, data: i, setData: p }) => [
           (C(), A(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
-            "model-value": n,
+            "model-value": i,
             errors: o,
             name: e.path,
             "onUpdate:modelValue": p
@@ -506,7 +509,7 @@ const _e = /* @__PURE__ */ $({
     path: {}
   },
   setup(t) {
-    const e = t, r = c(() => e.form.getSubForm(e.path));
+    const e = t, r = u(() => e.form.getSubForm(e.path));
     return (s, o) => j(s.$slots, "default", z(B({ subform: r.value })));
   }
 });

package/dist/types/form.d.ts

@@ -13,6 +13,7 @@ export interface FormField<T, P extends string> {
     touched: Ref<boolean>;
     dirty: Ref<boolean>;
     setData: (newData: T) => void;
+    setInitialData: (newData: T) => void;
     onBlur: () => void;
     onFocus: () => void;
     reset: () => void;

package/package.json

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

package/src/composables/useField.ts

@@ -41,6 +41,17 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     state.errors = []
   }
 
+  /**
+   * Sets the initial data for the field. If the field is not dirty, it also updates the current data.
+   * @param newData - The new initial data to set.
+   */
+  const setInitialData = (newData: T): void => {
+    if (!dirty.value) {
+      setData(cloneRefValue(newData))
+    }
+    state.initialValue = newData
+  }
+
   const setErrors = (newErrors: ValidationErrorMessage[]): void => {
     state.errors = newErrors
   }
@@ -59,6 +70,7 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     touched: refs.touched as FormField<T, K>['touched'],
     dirty,
     setData,
+    setInitialData,
     onBlur,
     onFocus,
     reset,

package/src/types/form.ts

@@ -15,6 +15,7 @@ export interface FormField<T, P extends string> {
   touched: Ref<boolean>
   dirty: Ref<boolean>
   setData: (newData: T) => void
+  setInitialData: (newData: T) => void
   onBlur: () => void
   onFocus: () => void
   reset: () => void