@teamnovu/kit-vue-forms 0.1.10 → 0.1.12

package/dist/index.js

@@ -1,7 +1,7 @@
 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 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";
+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) {
@@ -21,9 +21,9 @@ function te(t, e, r) {
   const s = Array.isArray(e) ? e : I(e), o = s.at(-1);
   if (o) {
     const i = s.slice(0, -1).reduce(
-      (p, h) => p[h],
+      (h, v) => h[v],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      d(t)
+      f(t)
     );
     i[o] = r;
   } else {
@@ -32,12 +32,12 @@ function te(t, e, r) {
     t.value = r;
   }
 }
-const K = (t, e) => u({
+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) {
@@ -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,61 +70,69 @@ 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));
+    },
+    { flush: "sync" }
+  );
+  const r = D({
     value: t.value,
     path: t.path,
-    initialValue: u(() => Object.freeze(g(t.initialValue))),
+    initialValue: e,
     errors: t.errors,
     touched: !1
-  }), r = u(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (c) => {
-    e.value = c;
-  }, o = () => {
-    e.touched = !0;
+  }), s = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), o = (u) => {
+    r.value = u;
   }, i = () => {
-  }, p = () => {
-    e.value = g(e.initialValue), e.touched = !1, e.errors = [];
-  }, h = (c) => {
-    r.value || s(g(c)), e.initialValue = c;
-  }, V = (c) => {
-    e.errors = c;
-  }, n = () => {
-    e.errors = [];
-  }, a = W(e);
+    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: a.value,
-    path: a.path,
-    initialValue: a.initialValue,
-    errors: a.errors,
-    touched: a.touched,
-    dirty: r,
-    setData: s,
-    setInitialData: h,
-    onBlur: o,
-    onFocus: i,
-    reset: p,
-    setErrors: V,
-    clearErrors: n
+    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 ie(t, e) {
   const r = /* @__PURE__ */ new Map(), s = q(/* @__PURE__ */ new Map()), o = (a) => {
-    const c = d(a.path);
+    const c = f(a.path);
     s.set(c, a);
   }, i = (a) => {
     s.delete(a);
-  }, p = (a) => {
+  }, h = (a) => {
     var c;
     r.has(a) ? (c = r.get(a)) == null || c.inc() : r.set(a, new ae(() => i(a)));
-  }, h = (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: K(_(t, "data"), a),
-        initialValue: u(() => P(t.initialData, a)),
-        errors: u({
+        initialValue: d(() => P(t.initialData, a)),
+        errors: d({
           get() {
             return e.errors.value.propertyErrors[a] || [];
           },
@@ -133,15 +141,15 @@ function ie(t, e) {
           }
         })
       });
-      o(v);
+      o(u);
     }
     const c = s.get(a);
-    return p(a), H(() => {
-      h(a);
+    return h(a), H(() => {
+      v(a);
     }), c;
   }, n = (a) => V(a.path);
   return {
-    fields: u(() => [...s.values()]),
+    fields: d(() => [...s.values()]),
     getField: V,
     registerField: o,
     deregisterField: i,
@@ -149,7 +157,7 @@ function ie(t, e) {
   };
 }
 function ne(t) {
-  const e = u(() => t.fields.value.some((s) => d(s.dirty))), r = u(() => t.fields.value.some((s) => d(s.touched)));
+  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
@@ -265,8 +273,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) {
@@ -281,26 +289,26 @@ class pe {
   }
 }
 function b(t) {
-  return u(() => 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
+    errors: f(e.errors) ?? m.errors
   }), s = (n = m.errors) => {
-    r.errors = S(d(e.errors) ?? m.errors, n);
+    r.errors = S(f(e.errors) ?? m.errors, n);
   };
-  w(() => d(e.errors), async () => {
+  E(() => f(e.errors), async () => {
     if (r.isValidated) {
       const n = await i();
       s(n.errors);
     } else
       s();
-  }, { immediate: !0 }), w(
+  }, { immediate: !0 }), E(
     [() => r.validators],
     async (n) => {
       if (r.isValidated)
@@ -311,8 +319,8 @@ function he(t, e) {
           r.errors = m.errors;
     },
     { immediate: !0 }
-  ), w(() => t.data, () => {
-    r.isValidated && p();
+  ), E(() => t.data, () => {
+    r.isValidated && h();
   });
   const o = (n) => {
     const a = O(n) ? n : b(n);
@@ -324,32 +332,32 @@ function he(t, e) {
   };
   async function i() {
     const n = await Promise.all(
-      r.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(t.data))
-    ), a = n.every((v) => v.isValid);
+      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 = n.map((F) => F.errors);
-      c = S(...v);
+      const u = n.map((F) => F.errors);
+      c = S(...u);
     }
     return {
       errors: c,
       isValid: a
     };
   }
-  const p = async () => {
+  const h = async () => {
     const n = await i();
     return s(n.errors), r.isValidated = !0, {
       isValid: !N(n.errors),
       errors: r.errors
     };
-  }, h = u(() => !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
   };
 }
@@ -377,65 +385,65 @@ class ve {
   }
 }
 function me(t, e, r) {
-  const s = K(t.data, e), o = u(() => P(t.initialData.value, e)), i = (l) => ({
+  const s = K(t.data, e), o = d(() => P(t.initialData.value, e)), i = (l) => ({
     ...l,
-    path: u(() => 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);
+  }), h = (l) => {
+    const p = R(e, l), y = t.getField(p);
     return y ? i(y) : {};
-  }, h = (l) => {
-    const f = R(e, l.path), y = t.defineField({
+  }, v = (l) => {
+    const p = R(e, l.path), y = t.defineField({
       ...l,
-      path: f
+      path: p
     });
     return i(y);
-  }, V = u(() => t.fields.value.filter((l) => {
-    const f = l.path.value;
-    return f.startsWith(e + ".") || f === e;
+  }, 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 f = l.path.value;
-    return f.startsWith(e + ".") || f === 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));
+    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: c,
-    isValid: v,
+    isValid: u,
     isValidated: F,
     errors: J,
     defineValidator: (l) => {
-      const f = O(l) ? l : b(l), y = u(
-        () => 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: () => 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 = u(() => 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), i = ie(s, o), p = ne(i), h = () => {
+  }, { flush: "sync" });
+  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()
     );
@@ -446,8 +454,8 @@ function Pe(t) {
   const n = {
     ...i,
     ...o,
-    ...p,
-    reset: h,
+    ...h,
+    reset: v,
     getSubForm: V,
     initialData: _(s, "initialData"),
     data: _(s, "data")
@@ -467,7 +475,7 @@ const _e = /* @__PURE__ */ $({
     const e = t, r = e.form.defineField({
       path: e.path
     }), s = D(r);
-    return (o, i) => j(o.$slots, "default", z(B(s)));
+    return (o, i) => A(o.$slots, "default", k(B(s)));
   }
 }), Se = /* @__PURE__ */ $({
   inheritAttrs: !1,
@@ -481,19 +489,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: i, setData: p }) => [
-          (C(), A(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
+        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"]))
@@ -509,8 +517,8 @@ const _e = /* @__PURE__ */ $({
     path: {}
   },
   setup(t) {
-    const e = t, r = u(() => 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,10 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "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,20 @@ 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))
+    },
+    { flush: 'sync' },
+  )
+
   const state = reactive({
     value: options.value,
     path: options.path,
-    initialValue: computed(() => Object.freeze(cloneRefValue(options.initialValue))),
+    initialValue,
     errors: options.errors,
     touched: false,
   })
@@ -41,10 +51,6 @@ 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))

package/src/composables/useForm.ts

@@ -28,7 +28,7 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
 
   watch(initialData, (newValue) => {
     state.data = cloneRefValue(newValue)
-  })
+  }, { flush: 'sync' })
 
   const validationState = useValidation(state, options)
   const fieldRegistry = useFieldRegistry(state, validationState)

package/src/types/form.ts

@@ -15,6 +15,10 @@ 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

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')
+  })
 })

package/tests/useForm.test.ts

@@ -290,4 +290,37 @@ describe('useForm', () => {
 
     expect(form.fields.value.length).toBe(0)
   })
+
+  it('it should take over the new initial data from the form', { timeout: 500 }, async () => {
+    const initialData = ref({
+      name: 'foo',
+    })
+
+    const form = useForm({
+      initialData,
+    })
+
+    const nameField = form.getField('name')
+
+    expect(form.isDirty.value).toBe(false)
+    expect(nameField.dirty.value).toBe(false)
+
+    nameField.setData('modified')
+
+    expect(form.isDirty.value).toBe(true)
+    expect(nameField.dirty.value).toBe(true)
+
+    initialData.value = {
+      name: 'bar',
+    }
+
+    expect(form.initialData.value.name).toBe('bar')
+    expect(nameField.initialValue.value).toBe('bar')
+    expect(nameField.data.value).toBe('bar')
+
+    nameField.setInitialData('another')
+
+    expect(nameField.initialValue.value).toBe('another')
+    expect(nameField.data.value).toBe('another')
+  })
 })