@teamnovu/kit-vue-forms 0.0.12 → 0.0.13

package/dist/index.mjs

@@ -1,8 +1,9 @@
 var x = Object.defineProperty;
 var K = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var S = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as W, toRaw as I, computed as d, unref as u, reactive as m, watch as F, toRefs as O, toRef as D, ref as A, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
+import { toValue as W, toRaw as I, computed as f, unref as u, reactive as m, watch as F, toRefs as O, toRef as D, ref as A, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
 import "zod";
+import "@vueuse/core";
 function y(e) {
   const r = W(e), t = I(r);
   return structuredClone(t);
@@ -27,7 +28,7 @@ function Z(e, r, t) {
   );
   n[a] = t;
 }
-const z = (e, r) => d({
+const z = (e, r) => f({
   get() {
     return w(u(e), u(r));
   },
@@ -56,22 +57,22 @@ function q(e) {
   const r = m({
     value: e.value,
     path: e.path,
-    initialValue: d(() => Object.freeze(y(e.initialValue))),
+    initialValue: f(() => Object.freeze(y(e.initialValue))),
     errors: u(e.errors) || [],
     touched: !1
   });
-  F(() => u(e.errors), (f) => {
-    r.errors = f || [];
+  F(() => u(e.errors), (d) => {
+    r.errors = d || [];
   });
-  const t = d(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
-    r.value = f;
+  const t = f(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (d) => {
+    r.value = d;
   }, a = () => {
     r.touched = !0;
   }, n = () => {
   }, o = () => {
     r.value = y(r.initialValue), r.touched = !1, r.errors = [];
-  }, v = (f) => {
-    r.errors = f;
+  }, v = (d) => {
+    r.errors = d;
   }, l = () => {
     r.errors = [];
   }, c = O(r);
@@ -99,7 +100,7 @@ function H(e) {
       const v = q({
         path: o,
         value: z(D(e, "data"), o),
-        initialValue: d(() => w(e.initialData, o))
+        initialValue: f(() => w(e.initialData, o))
       });
       return t(v), v;
     }
@@ -114,7 +115,7 @@ function H(e) {
   };
 }
 function Q(e) {
-  const r = d(() => e.getFields().some((s) => u(s.dirty))), t = d(() => e.getFields().some((s) => u(s.touched)));
+  const r = f(() => e.getFields().some((s) => u(s.dirty))), t = f(() => e.getFields().some((s) => u(s.touched)));
   return {
     isDirty: r,
     isTouched: t
@@ -246,7 +247,7 @@ class sr {
   }
 }
 function b(e) {
-  return d(() => new sr(
+  return f(() => new sr(
     u(e.schema),
     u(e.validateFn)
   ));
@@ -278,7 +279,7 @@ function ar(e, r) {
     const c = _(l) ? l : b(l);
     return t.validators.push(c), J() && T(() => {
       t.validators = t.validators.filter(
-        (f) => f !== c
+        (d) => d !== c
       );
     }), c;
   };
@@ -286,13 +287,13 @@ function ar(e, r) {
     const l = await Promise.all(
       t.validators.filter((V) => u(V) !== void 0).map((V) => u(V).validate(e.data))
     ), c = l.every((V) => V.isValid);
-    let { errors: f } = p;
+    let { errors: d } = p;
     if (!c) {
       const V = l.map((R) => R.errors);
-      f = P(...V);
+      d = P(...V);
     }
     return {
-      errors: f,
+      errors: d,
       isValid: c
     };
   }
@@ -304,7 +305,7 @@ function ar(e, r) {
       isValid: !j(l.errors),
       errors: t.errors
     };
-  }, v = d(() => !j(t.errors));
+  }, v = f(() => !j(t.errors));
   return {
     ...O(t),
     validateForm: o,
@@ -336,9 +337,9 @@ class ir {
   }
 }
 function nr(e, r, t) {
-  const s = z(e.data, r), a = d(() => w(e.initialData.value, r)), n = (i) => ({
+  const s = z(e.data, r), a = f(() => w(e.initialData.value, r)), n = (i) => ({
     ...i,
-    path: d(() => u(i.path).replace(r + ".", "")),
+    path: f(() => u(i.path).replace(r + ".", "")),
     setData: (h) => {
       i.setData(h);
     }
@@ -357,20 +358,20 @@ function nr(e, r, t) {
   }).map((i) => n(i)), c = () => e.getFields().filter((i) => {
     const h = i.path.value;
     return h.startsWith(r + ".") || h === r;
-  }), f = d(() => c().some((i) => i.dirty.value)), V = d(() => c().some((i) => i.touched.value)), R = d(() => e.isValid.value), M = d(() => e.isValidated.value), $ = d(() => k(u(e.errors), r));
+  }), d = f(() => c().some((i) => i.dirty.value)), V = f(() => c().some((i) => i.touched.value)), R = f(() => e.isValid.value), M = f(() => e.isValidated.value), $ = f(() => k(u(e.errors), r));
   return {
     data: s,
     initialData: a,
     defineField: v,
     getField: o,
     getFields: l,
-    isDirty: f,
+    isDirty: d,
     isTouched: V,
     isValid: R,
     isValidated: M,
     errors: $,
     defineValidator: (i) => {
-      const h = _(i) ? i : b(i), g = d(
+      const h = _(i) ? i : b(i), g = f(
         () => new ir(r, u(h))
       );
       return e.defineValidator(g), h;
@@ -386,17 +387,21 @@ function nr(e, r, t) {
     }
   };
 }
-function vr(e) {
-  const r = d(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
+function Vr(e) {
+  const r = f(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
     initialData: r,
     data: t
-  }), a = H(s), n = ar(s, e), o = Q(a), v = () => {
+  });
+  F(r, (d) => {
+    s.data = y(d);
+  });
+  const a = H(s), n = ar(s, e), o = Q(a), v = () => {
     t.value = y(r), a.getFields().forEach(
-      (f) => f.reset()
+      (d) => d.reset()
     );
   };
-  function l(f, V) {
-    return nr(c, f);
+  function l(d, V) {
+    return nr(c, d);
   }
   const c = {
     ...a,
@@ -409,7 +414,7 @@ function vr(e) {
   };
   return c;
 }
-const Vr = /* @__PURE__ */ B({
+const pr = /* @__PURE__ */ B({
   __name: "Field",
   props: {
     form: {},
@@ -426,6 +431,6 @@ const Vr = /* @__PURE__ */ B({
   }
 });
 export {
-  Vr as Field,
-  vr as useForm
+  pr as Field,
+  Vr as useForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "",
   "main": "index.js",
   "exports": {

package/src/composables/useForm.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, toRef, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
+import { computed, reactive, ref, toRef, watch, type MaybeRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import type { AnyField, Form, FormDataDefault } from '../types/form'
 import type { EntityPaths, PickEntity } from '../types/util'
 import type { ValidationStrategy } from '../types/validation'
@@ -7,6 +7,7 @@ import { useFieldRegistry } from './useFieldRegistry'
 import { useFormState } from './useFormState'
 import { createSubformInterface, type SubformOptions } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
+import { syncRef } from '@vueuse/core'
 
 // TODO @Elias implement validation strategy handling
 
@@ -22,10 +23,14 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   const data = ref<T>(cloneRefValue(initialData)) as Ref<T>
 
   const state = reactive({
-    initialData: initialData,
+    initialData,
     data,
   })
 
+  watch(initialData, (newValue) => {
+    state.data = cloneRefValue(newValue)
+  })
+
   const fields = useFieldRegistry(state)
   const validationState = useValidation(state, options)
   const formState = useFormState(fields)

package/tests/integration.test.ts

@@ -195,6 +195,6 @@ describe('Integration Tests', () => {
 
     // Try to get non-existent field
     const nonExistentField = form.getField('nonexistent')
-    expect(nonExistentField).toBeUndefined()
+    expect(nonExistentField).toBeDefined()
   })
 })

package/tests/nestedPath.test.ts

@@ -540,16 +540,14 @@ describe('Nested Path Handling', () => {
   })
 
   describe('Performance and Memory', () => {
-    it('should replace field when defining same path twice', () => {
+    it('should return the same field when defining same path twice', () => {
       const form = useForm({ initialData })
 
       const field1 = form.defineField({ path: 'user.name' })
       const field2 = form.defineField({ path: 'user.name' })
 
-      // Fields are not the same object, but second field replaces the first
-      expect(field1).not.toBe(field2)
-      expect(form.getField('user.name')).toBe(field2)
-      expect(form.getFields().length).toBe(1)
+      // Fields are the same object
+      expect(field1).toBe(field2)
     })
 
     it('should handle large numbers of nested fields', () => {

package/tests/useForm.test.ts

@@ -40,6 +40,31 @@ describe('useForm', () => {
     })
   })
 
+  it('should reinitialize form with new initial data', async () => {
+    const initialData = ref({
+      name: 'John',
+      age: 30,
+    })
+    const form = useForm({ initialData })
+
+    expect(form.data.value).toEqual({
+      name: 'John',
+      age: 30,
+    })
+
+    // Update reactive initial data
+    initialData.value = {
+      name: 'Jane',
+      age: 25,
+    }
+    await nextTick()
+
+    expect(form.data.value).toEqual({
+      name: 'Jane',
+      age: 25,
+    })
+  })
+
   it('should have initial state values', () => {
     const form = useForm({ initialData: { name: 'John' } })
 
@@ -81,13 +106,6 @@ describe('useForm', () => {
     expect(retrievedField).toBe(nameField)
   })
 
-  it('should return undefined for non-existent fields', () => {
-    const form = useForm({ initialData: { name: 'John' } })
-
-    const field = form.getField('nonexistent')
-    expect(field).toBeUndefined()
-  })
-
   it('should handle nested object initial data', () => {
     const initialData = {
       user: {