@teamnovu/kit-vue-forms 0.1.9 → 0.1.11

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,43 +1,43 @@
 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";
+var w = (t, e, r) => G(t, typeof e != "symbol" ? e + "" : e, r);
+import { toValue as L, toRaw as Z, computed as d, unref as f, isRef as O, ref as j, watch as E, reactive as D, toRefs as W, shallowReactive as q, toRef as _, onScopeDispose as H, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as $, renderSlot as A, normalizeProps as k, guardReactiveProps as B, resolveComponent as Y, createBlock as C, openBlock as M, withCtx as z, 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(
-      (p, h) => p[h],
+    const i = s.slice(0, -1).reduce(
+      (h, v) => h[v],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      d(t)
+      f(t)
     );
-    n[o] = r;
+    i[o] = r;
   } else {
     if (!O(t))
       return;
     t.value = r;
   }
 }
-const U = (t, e) => c({
+const K = (t, e) => d({
   get() {
-    return P(d(t), d(e));
+    return P(f(t), f(e));
   },
   set(r) {
-    te(t, d(e), r);
+    te(t, f(e), r);
   }
 });
 function R(t, 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 {
@@ -59,7 +59,7 @@ function se(t, e) {
 }
 class ae {
   constructor(e) {
-    E(this, "rc", 1);
+    w(this, "rc", 1);
     this.drop = e;
   }
   inc() {
@@ -70,58 +70,68 @@ class ae {
   }
 }
 function oe(t) {
-  const e = D({
+  const e = j(Object.freeze(g(t.initialValue)));
+  E(
+    () => f(t.initialValue),
+    (u) => {
+      e.value = Object.freeze(g(u));
+    }
+  );
+  const r = D({
     value: t.value,
     path: t.path,
-    initialValue: c(() => Object.freeze(g(t.initialValue))),
+    initialValue: e,
     errors: t.errors,
     touched: !1
-  }), r = c(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (a) => {
-    e.value = a;
-  }, o = () => {
-    e.touched = !0;
-  }, n = () => {
-  }, p = () => {
-    e.value = g(e.initialValue), e.touched = !1, e.errors = [];
-  }, h = (a) => {
-    e.errors = a;
-  }, V = () => {
-    e.errors = [];
-  }, i = W(e);
+  }), s = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), o = (u) => {
+    r.value = u;
+  }, i = () => {
+    r.touched = !0;
+  }, h = () => {
+  }, v = () => {
+    r.value = g(r.initialValue), r.touched = !1, r.errors = [];
+  }, V = (u) => {
+    s.value || o(g(u)), r.initialValue = u;
+  }, n = (u) => {
+    r.errors = u;
+  }, a = () => {
+    r.errors = [];
+  }, c = W(r);
   return {
-    data: i.value,
-    path: i.path,
-    initialValue: i.initialValue,
-    errors: i.errors,
-    touched: i.touched,
-    dirty: r,
-    setData: s,
-    onBlur: o,
-    onFocus: n,
-    reset: p,
-    setErrors: h,
-    clearErrors: V
+    data: c.value,
+    path: c.path,
+    initialValue: c.initialValue,
+    errors: c.errors,
+    touched: c.touched,
+    dirty: s,
+    setData: o,
+    setInitialData: V,
+    onBlur: i,
+    onFocus: h,
+    reset: v,
+    setErrors: n,
+    clearErrors: a
   };
 }
-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 = f(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)));
   }, 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.inc() : r.set(a, new ae(() => i(a)));
+  }, v = (a) => {
+    var c;
+    r.has(a) && ((c = r.get(a)) == null || c.dec());
   }, V = (a) => {
     if (!s.has(a)) {
-      const v = oe({
+      const u = oe({
         path: a,
-        value: U(_(t, "data"), a),
-        initialValue: c(() => P(t.initialData, a)),
-        errors: c({
+        value: K(_(t, "data"), a),
+        initialValue: d(() => P(t.initialData, a)),
+        errors: d({
           get() {
             return e.errors.value.propertyErrors[a] || [];
           },
@@ -130,23 +140,23 @@ function ne(t, e) {
           }
         })
       });
-      o(v);
+      o(u);
     }
-    const u = s.get(a);
-    return p(a), H(() => {
-      h(a);
-    }), u;
-  }, i = (a) => V(a.path);
+    const c = s.get(a);
+    return h(a), H(() => {
+      v(a);
+    }), c;
+  }, n = (a) => V(a.path);
   return {
-    fields: c(() => [...s.values()]),
+    fields: d(() => [...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 = d(() => t.fields.value.some((s) => f(s.dirty))), r = d(() => t.fields.value.some((s) => f(s.touched)));
   return {
     isDirty: e,
     isTouched: r
@@ -157,7 +167,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 +182,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 +198,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 +211,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 {
@@ -262,8 +272,8 @@ class fe {
 }
 class pe {
   constructor(e, r) {
-    E(this, "schemaValidator");
-    E(this, "functionValidator");
+    w(this, "schemaValidator");
+    w(this, "functionValidator");
     this.schema = e, this.validateFn = r, this.schemaValidator = new de(this.schema), this.functionValidator = new fe(this.validateFn);
   }
   async validate(e) {
@@ -278,75 +288,75 @@ class pe {
   }
 }
 function b(t) {
-  return c(() => new pe(
-    d(t.schema),
-    d(t.validateFn)
+  return d(() => new pe(
+    f(t.schema),
+    f(t.validateFn)
   ));
 }
 function he(t, e) {
   const r = D({
-    validators: k([b(e)]),
+    validators: j([b(e)]),
     isValidated: !1,
-    errors: d(e.errors) ?? m.errors
-  }), s = (i = m.errors) => {
-    r.errors = S(d(e.errors) ?? m.errors, i);
+    errors: f(e.errors) ?? m.errors
+  }), s = (n = m.errors) => {
+    r.errors = S(f(e.errors) ?? m.errors, n);
   };
-  w(() => d(e.errors), async () => {
+  E(() => f(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(
+  }, { immediate: !0 }), E(
     [() => 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;
     },
     { immediate: !0 }
-  ), w(() => t.data, () => {
-    r.isValidated && p();
+  ), E(() => t.data, () => {
+    r.isValidated && h();
   });
-  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(
-      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;
+  async function i() {
+    const n = await Promise.all(
+      r.validators.filter((u) => f(u) !== void 0).map((u) => f(u).validate(t.data))
+    ), a = n.every((u) => u.isValid);
+    let { errors: c } = m;
     if (!a) {
-      const v = i.map((F) => F.errors);
-      u = S(...v);
+      const u = n.map((F) => F.errors);
+      c = S(...u);
     }
     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 h = async () => {
+    const n = await i();
+    return s(n.errors), r.isValidated = !0, {
+      isValid: !N(n.errors),
       errors: r.errors
     };
-  }, h = c(() => !N(r.errors)), V = () => {
-    r.isValidated = !1, r.errors = d(e.errors) ?? m.errors;
+  }, v = d(() => !N(r.errors)), V = () => {
+    r.isValidated = !1, r.errors = f(e.errors) ?? m.errors;
   };
   return {
     ...W(r),
-    validateForm: p,
+    validateForm: h,
     defineValidator: o,
-    isValid: h,
+    isValid: v,
     reset: V
   };
 }
@@ -364,9 +374,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,82 +384,82 @@ 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 = d(() => P(t.initialData.value, e)), i = (l) => ({
     ...l,
-    path: c(() => d(l.path).replace(e + ".", "")),
-    setData: (f) => {
-      l.setData(f);
+    path: d(() => f(l.path).replace(e + ".", "")),
+    setData: (p) => {
+      l.setData(p);
     }
-  }), p = (l) => {
-    const f = R(e, l), y = t.getField(f);
-    return y ? n(y) : {};
-  }, h = (l) => {
-    const f = R(e, l.path), y = t.defineField({
+  }), h = (l) => {
+    const p = R(e, l), y = t.getField(p);
+    return y ? i(y) : {};
+  }, v = (l) => {
+    const p = R(e, l.path), y = t.defineField({
       ...l,
-      path: f
+      path: p
     });
-    return n(y);
-  }, V = c(() => 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) => {
-    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));
+    return i(y);
+  }, V = d(() => t.fields.value.filter((l) => {
+    const p = l.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }).map((l) => i(l))), n = () => t.fields.value.filter((l) => {
+    const p = l.path.value;
+    return p.startsWith(e + ".") || p === e;
+  }), a = d(() => n().some((l) => l.dirty.value)), c = d(() => n().some((l) => l.touched.value)), u = d(() => t.isValid.value), F = d(() => t.isValidated.value), J = d(() => se(f(t.errors), e));
   return {
     data: s,
     fields: V,
     initialData: o,
-    defineField: h,
-    getField: p,
+    defineField: v,
+    getField: h,
     isDirty: a,
-    isTouched: u,
-    isValid: v,
+    isTouched: c,
+    isValid: u,
     isValidated: F,
     errors: J,
     defineValidator: (l) => {
-      const f = O(l) ? l : b(l), y = c(
-        () => new ve(e, d(f))
+      const p = O(l) ? l : b(l), y = d(
+        () => new ve(e, f(p))
       );
-      return t.defineValidator(y), f;
+      return t.defineValidator(y), p;
     },
-    reset: () => i().forEach((l) => l.reset()),
+    reset: () => n().forEach((l) => l.reset()),
     validateForm: () => t.validateForm(),
-    getSubForm: (l, f) => {
+    getSubForm: (l, p) => {
       const y = R(e, l);
       return t.getSubForm(
         y,
-        f
+        p
       );
     }
   };
 }
 function Pe(t) {
-  const e = c(() => Object.freeze(g(t.initialData))), r = k(g(e)), s = D({
+  const e = d(() => Object.freeze(g(t.initialData))), r = j(g(e)), s = D({
     initialData: e,
     data: r
   });
-  w(e, (a) => {
+  E(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), h = ne(i), v = () => {
+    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,
+    ...h,
+    reset: v,
     getSubForm: V,
     initialData: _(s, "initialData"),
     data: _(s, "data")
   };
-  return i;
+  return n;
 }
 const _e = /* @__PURE__ */ $({
   __name: "Field",
@@ -464,7 +474,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) => A(o.$slots, "default", k(B(s)));
   }
 }), Se = /* @__PURE__ */ $({
   inheritAttrs: !1,
@@ -478,19 +488,19 @@ const _e = /* @__PURE__ */ $({
   setup(t) {
     return (e, r) => {
       const s = Y("Field");
-      return C(), A(s, {
+      return M(), C(s, {
         form: e.form,
         path: e.path
       }, {
-        default: M(({ errors: o, data: n, setData: p }) => [
-          (C(), A(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
-            "model-value": n,
+        default: z(({ errors: o, data: i, setData: h }) => [
+          (M(), C(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
+            "model-value": i,
             errors: o,
             name: e.path,
-            "onUpdate:modelValue": p
+            "onUpdate:modelValue": h
           }), {
-            default: M(() => [
-              j(e.$slots, "default")
+            default: z(() => [
+              A(e.$slots, "default")
             ]),
             _: 2
           }, 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -506,8 +516,8 @@ const _e = /* @__PURE__ */ $({
     path: {}
   },
   setup(t) {
-    const e = t, r = c(() => e.form.getSubForm(e.path));
-    return (s, o) => j(s.$slots, "default", z(B({ subform: r.value })));
+    const e = t, r = d(() => e.form.getSubForm(e.path));
+    return (s, o) => A(s.$slots, "default", k(B({ subform: r.value })));
   }
 });
 export {

package/dist/types/form.d.ts

@@ -13,6 +13,11 @@ export interface FormField<T, P extends string> {
     touched: Ref<boolean>;
     dirty: Ref<boolean>;
     setData: (newData: T) => void;
+    /**
+     * 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.
+     */
+    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.11",
   "description": "",
   "main": "dist/index.js",
   "type": "module",

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, toRefs, type MaybeRef, type MaybeRefOrGetter, type WritableComputedRef } from 'vue'
+import { computed, reactive, ref, toRefs, unref, watch, type MaybeRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'
@@ -11,10 +11,19 @@ export interface UseFieldOptions<T, K extends string> {
 }
 
 export function useField<T, K extends string>(options: UseFieldOptions<T, K>): FormField<T, K> {
+  const initialValue = ref(Object.freeze(cloneRefValue(options.initialValue))) as Ref<Readonly<T | undefined>>
+
+  watch(
+    () => unref(options.initialValue),
+    (newInitialValue) => {
+      initialValue.value = Object.freeze(cloneRefValue(newInitialValue))
+    },
+  )
+
   const state = reactive({
     value: options.value,
     path: options.path,
-    initialValue: computed(() => Object.freeze(cloneRefValue(options.initialValue))),
+    initialValue,
     errors: options.errors,
     touched: false,
   })
@@ -41,6 +50,13 @@ export function useField<T, K extends string>(options: UseFieldOptions<T, K>): F
     state.errors = []
   }
 
+  const setInitialData = (newData: T): void => {
+    if (!dirty.value) {
+      setData(cloneRefValue(newData))
+    }
+    state.initialValue = newData
+  }
+
   const setErrors = (newErrors: ValidationErrorMessage[]): void => {
     state.errors = newErrors
   }
@@ -59,6 +75,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,11 @@ export interface FormField<T, P extends string> {
   touched: Ref<boolean>
   dirty: Ref<boolean>
   setData: (newData: T) => void
+  /**
+   * 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.
+   */
+  setInitialData: (newData: T) => void
   onBlur: () => void
   onFocus: () => void
   reset: () => void

package/tests/useField.test.ts

@@ -160,10 +160,51 @@ describe('useField', () => {
 
       watch(initialValue, () => {
         resolve(true)
-      }, { once: true, deep: true })
+      }, {
+        once: true,
+        deep: true,
+      })
 
       field.setData(['a', 'b', 'c', 'd'])
       expect(field.dirty.value).toBe(true)
     })
   }))
+
+  it('it should set the initial value if the field is not dirty', { timeout: 500 }, () => {
+    const field = useField({
+      initialValue: 'foo',
+      value: 'foo',
+      path: 'name',
+    })
+
+    expect(field.data.value).toBe('foo')
+    expect(field.path.value).toBe('name')
+    expect(field.touched.value).toBe(false)
+    expect(field.dirty.value).toBe(false)
+
+    field.setInitialData('bar')
+
+    expect(field.initialValue.value).toBe('bar')
+    expect(field.data.value).toBe('bar')
+  })
+
+  it('it should set the initial value but not the data if the field is dirty', { timeout: 500 }, () => {
+    const field = useField({
+      initialValue: 'foo',
+      value: 'foo',
+      path: 'name',
+    })
+
+    expect(field.data.value).toBe('foo')
+    expect(field.path.value).toBe('name')
+    expect(field.touched.value).toBe(false)
+    expect(field.dirty.value).toBe(false)
+
+    field.data.value = 'modified'
+
+    field.setInitialData('bar')
+
+    expect(field.initialValue.value).toBe('bar')
+    expect(field.data.value).toBe('modified')
+  })
 })