@teamnovu/kit-vue-forms 0.1.22 → 0.1.23

package/dist/composables/useFieldArray.d.ts

@@ -10,4 +10,4 @@ export declare class HashStore<T, Item = unknown> {
     get(item: Item): T | undefined;
     set(item: Item, value: T): void;
 }
-export declare function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(form: Form<T>, path: PickProps<T, K> extends unknown[] ? K : never, options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>): FieldArray<PickProps<T, K> extends (infer U)[] ? U : never>;
+export declare function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(form: Form<T>, path: PickProps<T, K> extends unknown[] ? K : never, options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>): FieldArray<PickProps<T, K> extends (infer U)[] ? U : never, typeof path>;

package/dist/index.js

@@ -1,7 +1,7 @@
 var Q = Object.defineProperty;
 var X = (r, t, e) => t in r ? Q(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
 var R = (r, t, e) => X(r, typeof t != "symbol" ? t + "" : t, e);
-import { toValue as Y, toRaw as ee, unref as d, shallowRef as I, watch as D, computed as V, isRef as O, reactive as A, toRefs as K, shallowReactive as te, toRef as U, onScopeDispose as re, triggerRef as ae, ref as J, getCurrentScope as se, onBeforeUnmount as ne, defineComponent as C, renderSlot as k, normalizeProps as T, guardReactiveProps as N, resolveComponent as ie, createBlock as z, openBlock as H, withCtx as B, resolveDynamicComponent as oe, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
+import { toValue as Y, toRaw as ee, unref as f, shallowRef as $, watch as D, computed as m, isRef as x, reactive as k, toRefs as K, shallowReactive as te, toRef as j, onScopeDispose as re, triggerRef as ae, ref as J, getCurrentScope as se, onBeforeUnmount as ne, defineComponent as C, renderSlot as b, normalizeProps as T, guardReactiveProps as N, resolveComponent as ie, createBlock as z, openBlock as H, withCtx as U, resolveDynamicComponent as oe, mergeProps as le, createSlots as ce, renderList as ue } from "vue";
 import { cloneDeep as de } from "lodash-es";
 import "zod";
 function g(r) {
@@ -10,7 +10,7 @@ function g(r) {
 }
 function L(r, t) {
   return (e) => async (a) => {
-    a.preventDefault(), d(t.validationStrategy) !== "none" && await r.validateForm(), r.isValid.value && await e(r.data.value);
+    a.preventDefault(), f(t.validationStrategy) !== "none" && await r.validateForm(), r.isValid.value && await e(r.data.value);
   };
 }
 class fe {
@@ -36,51 +36,50 @@ class fe {
     this.isReferenceType(a) ? this.weakMap.set(a, e) : this.map.set(a, e);
   }
 }
-function he(r, t) {
-  const e = /* @__PURE__ */ new Set();
-  return t.map((a) => {
-    const s = [...r.get(a) ?? []], n = s.findIndex((c) => !e.has(c)), p = (n === -1 ? [] : s.slice(n))[0];
-    if (p)
-      return e.add(p), {
-        id: p,
-        item: a
+function he(r, t, e) {
+  const a = /* @__PURE__ */ new Set();
+  return t.map((s, n) => {
+    const d = [...r.get(s) ?? []], V = d.findIndex((p) => !a.has(p)), c = (V === -1 ? [] : d.slice(V))[0];
+    if (c)
+      return a.add(c), {
+        id: c,
+        item: s,
+        path: `${e}.${n}`
       };
-    const v = crypto.randomUUID();
-    return r.set(a, s.concat([v])), e.add(v), {
-      id: v,
-      item: a
+    const o = crypto.randomUUID();
+    return r.set(s, d.concat([o])), a.add(o), {
+      id: o,
+      item: s,
+      path: `${e}.${n}`
     };
   });
 }
 function G(r, t, e) {
-  const a = new fe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = I([]);
+  const a = new fe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = $([]);
   return D(
     s.data,
-    (c) => {
-      n.value = he(a, c);
+    (h) => {
+      n.value = he(a, h, t);
     },
     {
       immediate: !0,
       flush: "sync"
     }
   ), {
-    fields: n,
-    push: (c) => {
-      const i = s.data.value ?? [];
-      s.setData([...i, c]);
+    items: n,
+    push: (h) => {
+      const c = s.data.value ?? [];
+      return s.setData([...c, h]), n.value.at(-1);
     },
-    remove: (c) => {
-      const i = s.data.value ?? [];
-      s.setData(
-        (i == null ? void 0 : i.filter((h) => h !== d(c))) ?? []
+    remove: (h) => {
+      const c = s.data.value ?? [], o = n.value.findIndex(
+        ({ id: p }) => p === h
+      );
+      o !== -1 && s.setData(
+        c.slice(0, o).concat(c.slice(o + 1))
       );
     },
-    removeByIndex: (c) => {
-      const i = s.data.value ?? [];
-      s.setData((i == null ? void 0 : i.filter((h, l) => l !== c)) ?? []);
-    },
-    errors: s.errors,
-    dirty: s.dirty
+    field: s
   };
 }
 function W(r) {
@@ -100,26 +99,26 @@ function ve(r, t, e) {
   const a = Array.isArray(t) ? t : W(t), s = a.at(-1);
   if (s) {
     const n = a.slice(0, -1).reduce(
-      (f, p) => ((f == null ? void 0 : f[p]) === void 0 && (f[p] = {}), f == null ? void 0 : f[p]),
+      (d, V) => ((d == null ? void 0 : d[V]) === void 0 && (d[V] = {}), d == null ? void 0 : d[V]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      d(r)
+      f(r)
     );
     n[s] = e;
   } else {
-    if (!O(r))
+    if (!x(r))
       return;
     r.value = e;
   }
 }
-const Z = (r, t) => V({
+const Z = (r, t) => m({
   get() {
-    return S(d(r), d(t));
+    return S(f(r), f(t));
   },
   set(e) {
-    ve(r, d(t), e);
+    ve(r, f(t), e);
   }
 });
-function b(r, t) {
+function I(r, t) {
   return !r && !t ? "" : !r && t ? t : !t && r ? r : `${r}.${t}`;
 }
 function me(r, t) {
@@ -149,13 +148,13 @@ class Ve {
     this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
   }
 }
-function ye(r) {
+function Fe(r) {
   const e = {
     ...{
       existsInForm: !0
     },
     ...r
-  }, a = I(Object.freeze(g(e.initialValue))), s = A({
+  }, a = $(Object.freeze(g(e.initialValue))), s = k({
     value: e.value,
     path: e.path,
     initialValue: a,
@@ -163,51 +162,51 @@ function ye(r) {
     touched: !1
   });
   D(
-    I(e.initialValue),
+    $(e.initialValue),
     () => {
-      a.value = Object.freeze(g(e.initialValue)), s.value !== d(e.initialValue) && (s.value = g(e.initialValue));
+      a.value = Object.freeze(g(e.initialValue)), s.value !== f(e.initialValue) && (s.value = g(e.initialValue));
     },
     { flush: "sync" }
   );
-  const n = V(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), f = (m) => {
-    s.value = m;
-  }, p = () => {
-    var m;
-    s.touched = !0, s.errors = [], (m = e.onBlur) == null || m.call(e);
-  }, v = () => {
-    var m;
-    (m = e.onFocus) == null || m.call(e);
+  const n = m(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), d = (v) => {
+    s.value = v;
+  }, V = () => {
+    var v;
+    s.touched = !0, s.errors = [], (v = e.onBlur) == null || v.call(e);
+  }, h = () => {
+    var v;
+    (v = e.onFocus) == null || v.call(e);
   }, c = () => {
-    const m = s.path.split(".").at(-1) || "";
-    d(e.existsInForm) && !/^\d+$/.test(m) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
-  }, i = (m) => {
-    n.value || f(g(m)), s.initialValue = m;
-  }, h = (m) => {
-    s.errors = m;
+    const v = s.path.split(".").at(-1) || "";
+    f(e.existsInForm) && !/^\d+$/.test(v) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
+  }, o = (v) => {
+    n.value || d(g(v)), s.initialValue = v;
+  }, p = (v) => {
+    s.errors = v;
   }, l = () => {
     s.errors = [];
-  }, o = K(s);
+  }, i = K(s);
   return {
-    data: o.value,
-    path: o.path,
-    initialValue: o.initialValue,
-    errors: o.errors,
-    touched: o.touched,
+    data: i.value,
+    path: i.path,
+    initialValue: i.initialValue,
+    errors: i.errors,
+    touched: i.touched,
     dirty: n,
-    setData: f,
-    setInitialData: i,
-    onBlur: p,
-    onFocus: v,
+    setData: d,
+    setInitialData: o,
+    onBlur: V,
+    onFocus: h,
     reset: c,
-    setErrors: h,
+    setErrors: p,
     clearErrors: l
   };
 }
-const Fe = {
+const ye = {
   keepValuesOnUnmount: !0
 };
 function ge(r, t) {
-  const e = () => S(r.initialData, t), a = I(e());
+  const e = () => S(r.initialData, t), a = $(e());
   return D(
     () => r.initialData,
     () => {
@@ -218,68 +217,68 @@ function ge(r, t) {
 }
 function Ee(r, t, e) {
   const a = /* @__PURE__ */ new Map(), s = te(/* @__PURE__ */ new Map()), n = {
-    ...Fe,
+    ...ye,
     ...e
-  }, f = (l) => {
-    const o = d(l.path);
-    s.set(o, l);
-  }, p = (l) => {
-    var o;
-    n != null && n.keepValuesOnUnmount || (o = s.get(l)) == null || o.reset(), s.delete(l);
-  }, v = (l) => {
-    var o;
-    a.has(l) ? (o = a.get(l)) == null || o.inc() : a.set(l, new Ve(() => p(l)));
+  }, d = (l) => {
+    const i = f(l.path);
+    s.set(i, l);
+  }, V = (l) => {
+    var i;
+    n != null && n.keepValuesOnUnmount || (i = s.get(l)) == null || i.reset(), s.delete(l);
+  }, h = (l) => {
+    var i;
+    a.has(l) ? (i = a.get(l)) == null || i.inc() : a.set(l, new Ve(() => V(l)));
   }, c = (l) => {
-    var o;
-    a.has(l) && ((o = a.get(l)) == null || o.dec());
-  }, i = (l) => {
-    const { path: o } = l;
-    if (!s.has(o)) {
-      const M = ye({
-        path: o,
-        value: Z(U(r, "data"), o),
-        initialValue: ge(r, o),
-        existsInForm: V(() => pe(r.data, d(o))),
-        errors: V({
+    var i;
+    a.has(l) && ((i = a.get(l)) == null || i.dec());
+  }, o = (l) => {
+    const { path: i } = l;
+    if (!s.has(i)) {
+      const A = Fe({
+        path: i,
+        value: Z(j(r, "data"), i),
+        initialValue: ge(r, i),
+        existsInForm: m(() => pe(r.data, f(i))),
+        errors: m({
           get() {
-            return t.errors.value.propertyErrors[o] || [];
+            return t.errors.value.propertyErrors[i] || [];
           },
           set(E) {
-            t.errors.value.propertyErrors[o] = E;
+            t.errors.value.propertyErrors[i] = E;
           }
         }),
         onBlur: async () => {
           var E, P;
           await Promise.all([
-            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, d(o)),
+            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, f(i)),
             (P = l.onBlur) == null ? void 0 : P.call(l)
           ]);
         },
         onFocus: async () => {
           var E, P;
           await Promise.all([
-            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, d(o)),
+            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, f(i)),
             (P = l.onFocus) == null ? void 0 : P.call(l)
           ]);
         }
       });
-      f(M);
+      d(A);
     }
-    const m = s.get(o);
-    return v(o), re(() => {
-      c(o);
-    }), m;
-  }, h = (l) => i(l);
+    const v = s.get(i);
+    return h(i), re(() => {
+      c(i);
+    }), v;
+  }, p = (l) => o(l);
   return {
-    fields: V(() => [...s.values()]),
-    getField: (l) => i({ path: l }),
-    registerField: f,
-    deregisterField: p,
-    defineField: h
+    fields: m(() => [...s.values()]),
+    getField: (l) => o({ path: l }),
+    registerField: d,
+    deregisterField: V,
+    defineField: p
   };
 }
 function we(r) {
-  const t = V(() => r.fields.value.some((a) => d(a.dirty))), e = V(() => r.fields.value.some((a) => d(a.touched)));
+  const t = m(() => r.fields.value.some((a) => f(a.dirty))), e = m(() => r.fields.value.some((a) => f(a.touched)));
   return {
     isDirty: t,
     isTouched: e
@@ -312,7 +311,7 @@ function De(...r) {
     };
   }, {});
 }
-function j(...r) {
+function B(...r) {
   if (!r.length)
     return {
       general: [],
@@ -345,7 +344,7 @@ function Pe(r) {
     propertyErrors: e
   };
 }
-const F = {
+const y = {
   isValid: !0,
   errors: {
     general: [],
@@ -358,10 +357,10 @@ class Se {
   }
   async validate(t) {
     if (!this.schema)
-      return F;
+      return y;
     const e = await this.schema.safeParseAsync(t);
     if (e.success)
-      return F;
+      return y;
     const a = Pe(e.error);
     return {
       isValid: !1,
@@ -372,16 +371,16 @@ class Se {
     };
   }
 }
-class be {
+class Ie {
   constructor(t) {
     this.validateFn = t;
   }
   async validate(t) {
     if (!this.validateFn)
-      return F;
+      return y;
     try {
       const e = await this.validateFn(t);
-      return e.isValid ? F : e;
+      return e.isValid ? y : e;
     } catch (e) {
       return {
         isValid: !1,
@@ -393,11 +392,11 @@ class be {
     }
   }
 }
-class Ie {
+class $e {
   constructor(t, e) {
     R(this, "schemaValidator");
     R(this, "functionValidator");
-    this.schema = t, this.validateFn = e, this.schemaValidator = new Se(this.schema), this.functionValidator = new be(this.validateFn);
+    this.schema = t, this.validateFn = e, this.schemaValidator = new Se(this.schema), this.functionValidator = new Ie(this.validateFn);
   }
   async validate(t) {
     const [e, a] = await Promise.all([
@@ -406,103 +405,103 @@ class Ie {
     ]);
     return {
       isValid: e.isValid && a.isValid,
-      errors: j(e.errors, a.errors)
+      errors: B(e.errors, a.errors)
     };
   }
 }
-function x(r) {
-  return V(() => new Ie(
-    d(r.schema),
-    d(r.validateFn)
+function O(r) {
+  return m(() => new $e(
+    f(r.schema),
+    f(r.validateFn)
   ));
 }
-function ke(r, t) {
-  const e = A({
-    validators: J([x(t)]),
+function be(r, t) {
+  const e = k({
+    validators: J([O(t)]),
     isValidated: !1,
-    errors: d(t.errors) ?? F.errors
-  }), a = (i = F.errors) => {
-    e.errors = j(d(t.errors) ?? F.errors, i);
+    errors: f(t.errors) ?? y.errors
+  }), a = (o = y.errors) => {
+    e.errors = B(f(t.errors) ?? y.errors, o);
   };
-  D(() => d(t.errors), async () => {
+  D(() => f(t.errors), async () => {
     if (e.isValidated) {
-      const i = await n();
-      a(i.errors);
+      const o = await n();
+      a(o.errors);
     } else
       a();
   }, { immediate: !0 }), D(
     [() => e.validators],
-    async (i) => {
+    async (o) => {
       if (e.isValidated)
-        if (i) {
-          const h = await n();
-          e.errors = h.errors;
+        if (o) {
+          const p = await n();
+          e.errors = p.errors;
         } else
-          e.errors = F.errors;
+          e.errors = y.errors;
     },
     { immediate: !0 }
-  ), D([() => r.data, () => d(t.schema)], () => {
-    e.isValidated && f();
+  ), D([() => r.data, () => f(t.schema)], () => {
+    e.isValidated && d();
   });
-  const s = (i) => {
-    const h = O(i) ? i : x(i);
-    return e.validators.push(h), se() && ne(() => {
+  const s = (o) => {
+    const p = x(o) ? o : O(o);
+    return e.validators.push(p), se() && ne(() => {
       e.validators = e.validators.filter(
-        (l) => l !== h
+        (l) => l !== p
       );
-    }), h;
+    }), p;
   };
   async function n() {
-    const i = await Promise.all(
-      e.validators.filter((o) => d(o) !== void 0).map((o) => d(o).validate(r.data))
-    ), h = i.every((o) => o.isValid);
-    let { errors: l } = F;
-    if (!h) {
-      const o = i.map((m) => m.errors);
-      l = j(...o);
+    const o = await Promise.all(
+      e.validators.filter((i) => f(i) !== void 0).map((i) => f(i).validate(r.data))
+    ), p = o.every((i) => i.isValid);
+    let { errors: l } = y;
+    if (!p) {
+      const i = o.map((v) => v.errors);
+      l = B(...i);
     }
     return {
       errors: l,
-      isValid: h
+      isValid: p
     };
   }
-  const f = async () => {
-    const i = await n();
-    return a(i.errors), e.isValidated = !0, {
-      isValid: !_(i.errors),
+  const d = async () => {
+    const o = await n();
+    return a(o.errors), e.isValidated = !0, {
+      isValid: !_(o.errors),
       errors: e.errors
     };
-  }, p = async (i) => {
-    const h = await n();
+  }, V = async (o) => {
+    const p = await n();
     return a({
-      general: h.errors.general,
+      general: p.errors.general,
       propertyErrors: {
-        [i]: h.errors.propertyErrors[i]
+        [o]: p.errors.propertyErrors[o]
       }
     }), {
-      isValid: !_(h.errors),
+      isValid: !_(p.errors),
       errors: e.errors
     };
-  }, v = V(() => !_(e.errors)), c = () => {
-    e.isValidated = !1, e.errors = d(t.errors) ?? F.errors;
+  }, h = m(() => !_(e.errors)), c = () => {
+    e.isValidated = !1, e.errors = f(t.errors) ?? y.errors;
   };
   return {
     ...K(e),
-    validateForm: f,
-    validateField: p,
+    validateForm: d,
+    validateField: V,
     defineValidator: s,
-    isValid: v,
+    isValid: h,
     reset: c
   };
 }
-class Ae {
+class ke {
   constructor(t, e) {
     this.path = t, this.validator = e;
   }
   async validate(t) {
     const e = S(t, this.path);
     if (!this.validator)
-      return F;
+      return y;
     const a = await this.validator.validate(e);
     return {
       isValid: a.isValid,
@@ -510,68 +509,68 @@ class Ae {
         general: a.errors.general || [],
         propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
           Object.entries(a.errors.propertyErrors).map(
-            ([s, n]) => [b(this.path, s), n]
+            ([s, n]) => [I(this.path, s), n]
           )
         ) : {}
       }
     };
   }
 }
-function Me(r, t, e, a) {
-  const s = Z(r.data, t), n = V(() => S(r.initialData.value, t)), f = (u) => ({
+function Ae(r, t, e, a) {
+  const s = Z(r.data, t), n = m(() => S(r.initialData.value, t)), d = (u) => ({
     ...u,
-    path: V(() => d(u.path).replace(t + ".", "")),
-    setData: (y) => {
-      u.setData(y);
+    path: m(() => f(u.path).replace(t + ".", "")),
+    setData: (F) => {
+      u.setData(F);
     }
-  }), p = (u) => {
-    const y = b(t, u), w = r.getField(y);
-    return w ? f(w) : {};
-  }, v = (u) => {
-    const y = b(t, u.path), w = r.defineField({
+  }), V = (u) => {
+    const F = I(t, u), w = r.getField(F);
+    return w ? d(w) : {};
+  }, h = (u) => {
+    const F = I(t, u.path), w = r.defineField({
       ...u,
-      path: y
+      path: F
     });
-    return f(w);
-  }, c = V(() => r.fields.value.filter((u) => {
-    const y = u.path.value;
-    return y.startsWith(t + ".") || y === t;
-  }).map((u) => f(u))), i = () => r.fields.value.filter((u) => {
-    const y = u.path.value;
-    return y.startsWith(t + ".") || y === t;
-  }), h = V(() => i().some((u) => u.dirty.value)), l = V(() => i().some((u) => u.touched.value)), o = V(() => r.isValid.value), m = V(() => r.isValidated.value), M = V(() => me(d(r.errors), t)), $ = {
+    return d(w);
+  }, c = m(() => r.fields.value.filter((u) => {
+    const F = u.path.value;
+    return F.startsWith(t + ".") || F === t;
+  }).map((u) => d(u))), o = () => r.fields.value.filter((u) => {
+    const F = u.path.value;
+    return F.startsWith(t + ".") || F === t;
+  }), p = m(() => o().some((u) => u.dirty.value)), l = m(() => o().some((u) => u.touched.value)), i = m(() => r.isValid.value), v = m(() => r.isValidated.value), A = m(() => me(f(r.errors), t)), M = {
     data: s,
     fields: c,
     initialData: n,
-    defineField: v,
-    getField: p,
-    isDirty: h,
+    defineField: h,
+    getField: V,
+    isDirty: p,
     isTouched: l,
-    isValid: o,
-    isValidated: m,
-    errors: M,
+    isValid: i,
+    isValidated: v,
+    errors: A,
     defineValidator: (u) => {
-      const y = O(u) ? u : x(u), w = V(
-        () => new Ae(t, d(y))
+      const F = x(u) ? u : O(u), w = m(
+        () => new ke(t, f(F))
       );
-      return r.defineValidator(w), y;
+      return r.defineValidator(w), F;
     },
-    reset: () => i().forEach((u) => u.reset()),
+    reset: () => o().forEach((u) => u.reset()),
     validateForm: () => r.validateForm(),
-    getSubForm: (u, y) => {
-      const w = b(t, u);
+    getSubForm: (u, F) => {
+      const w = I(t, u);
       return r.getSubForm(
         w,
-        y
+        F
       );
     },
-    submitHandler: (u) => L($, e ?? {})(u),
-    useFieldArray: (u, y) => G($, u, y)
+    submitHandler: (u) => L(M, e ?? {})(u),
+    useFieldArray: (u, F) => G(M, u, F)
   };
-  return $;
+  return M;
 }
-function Oe(r) {
-  const t = V(() => g(r.initialData)), e = J(g(t)), a = A({
+function xe(r) {
+  const t = m(() => g(r.initialData)), e = J(g(t)), a = k({
     initialData: t,
     data: e
   });
@@ -582,29 +581,29 @@ function Oe(r) {
     },
     { flush: "sync" }
   );
-  const s = ke(a, r), n = Ee(a, s, {
+  const s = be(a, r), n = Ee(a, s, {
     keepValuesOnUnmount: r.keepValuesOnUnmount,
     onBlur: async (c) => {
-      d(r.validationStrategy) === "onTouch" && s.validateField(c);
+      f(r.validationStrategy) === "onTouch" && s.validateField(c);
     }
-  }), f = we(n), p = () => {
+  }), d = we(n), V = () => {
     e.value = g(t), s.reset();
     for (const c of n.fields.value)
       c.reset();
   };
-  d(r.validationStrategy) === "onFormOpen" && s.validateForm();
-  const v = {
+  f(r.validationStrategy) === "onFormOpen" && s.validateForm();
+  const h = {
     ...n,
     ...s,
-    ...f,
-    reset: p,
-    initialData: U(a, "initialData"),
-    data: U(a, "data"),
-    submitHandler: (c) => L(v, r)(c),
-    getSubForm: (c, i) => Me(v, c, r),
-    useFieldArray: (c, i) => G(v, c, i)
+    ...d,
+    reset: V,
+    initialData: j(a, "initialData"),
+    data: j(a, "data"),
+    submitHandler: (c) => L(h, r)(c),
+    getSubForm: (c, o) => Ae(h, c, r),
+    useFieldArray: (c, o) => G(h, c, o)
   };
-  return v;
+  return h;
 }
 const Ce = /* @__PURE__ */ C({
   __name: "Field",
@@ -621,8 +620,8 @@ const Ce = /* @__PURE__ */ C({
   setup(r) {
     const t = r, e = t.form.defineField({
       path: t.path
-    }), a = A(e);
-    return (s, n) => k(s.$slots, "default", T(N(a)));
+    }), a = k(e);
+    return (s, n) => b(s.$slots, "default", T(N(a)));
   }
 }), Te = /* @__PURE__ */ C({
   inheritAttrs: !1,
@@ -640,22 +639,22 @@ const Ce = /* @__PURE__ */ C({
         form: r.form,
         path: r.path
       }, {
-        default: B(({ errors: s, data: n, setData: f }) => [
+        default: U(({ errors: s, data: n, setData: d }) => [
           (H(), z(oe(r.component), le({ ...r.componentProps, ...t.$attrs }, {
             "model-value": n,
             errors: s,
             name: r.path,
-            "onUpdate:modelValue": f
+            "onUpdate:modelValue": d
           }), ce({
-            default: B(() => [
-              k(t.$slots, "default")
+            default: U(() => [
+              b(t.$slots, "default")
             ]),
             _: 2
           }, [
-            ue(t.$slots, (p, v) => ({
-              name: v,
-              fn: B((c) => [
-                k(t.$slots, v, T(N(c ?? {})))
+            ue(t.$slots, (V, h) => ({
+              name: h,
+              fn: U((c) => [
+                b(t.$slots, h, T(N(c ?? {})))
               ])
             }))
           ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -671,13 +670,13 @@ const Ce = /* @__PURE__ */ C({
     path: {}
   },
   setup(r) {
-    const t = r, e = V(() => t.form.getSubForm(t.path));
-    return (a, s) => k(a.$slots, "default", T(N({ subform: e.value })));
+    const t = r, e = m(() => t.form.getSubForm(t.path));
+    return (a, s) => b(a.$slots, "default", T(N({ subform: e.value })));
   }
 });
 export {
   Ce as Field,
   Te as FormFieldWrapper,
   Ne as FormPart,
-  Oe as useForm
+  xe as useForm
 };

package/dist/types/form.d.ts

@@ -1,5 +1,5 @@
 import { Awaitable } from '@vueuse/core';
-import { Ref } from 'vue';
+import { Ref, ShallowRef } from 'vue';
 import { DefineFieldOptions } from '../composables/useFieldRegistry';
 import { SubformOptions } from '../composables/useSubform';
 import { ValidatorOptions } from '../composables/useValidation';
@@ -10,16 +10,16 @@ export type HashFn<H, I> = (item: I) => H;
 export interface FieldArrayOptions<Item> {
     hashFn?: HashFn<unknown, Item>;
 }
-export interface FieldArray<Item> {
-    fields: Ref<{
-        id: string;
-        item: Item;
-    }[]>;
-    push: (item: Item) => void;
-    remove: (item: Item) => void;
-    removeByIndex: (index: number) => void;
-    errors: Ref<ValidationErrors>;
-    dirty: Ref<boolean>;
+export interface FieldItem<Item, Path extends string> {
+    id: string;
+    item: Item;
+    path: `${Path}.${number}`;
+}
+export interface FieldArray<Item, Path extends string> {
+    items: ShallowRef<FieldItem<Item, Path>[]>;
+    push: (item: Item) => FieldItem<Item, Path>;
+    remove: (id: string) => void;
+    field: FormField<Item[], Path>;
 }
 export interface FormField<T, P extends string> {
     data: Ref<T>;

package/package.json

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

package/src/composables/useFieldArray.ts

@@ -1,9 +1,11 @@
-import { shallowRef, unref, watch } from 'vue'
+import { shallowRef, watch } from 'vue'
 import type {
   FieldArray,
   FieldArrayOptions,
+  FieldItem,
   Form,
   FormDataDefault,
+  FormField,
   HashFn,
 } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
@@ -49,13 +51,15 @@ export class HashStore<T, Item = unknown> {
   }
 }
 
-function mapIds<Item>(
-  hashStore: HashStore<string[], Item>,
+function mapIds<Item, Path extends string>(
+  hashStore: HashStore<string[],
+    Item>,
   items: Item[],
-) {
+  basePath: Path,
+): FieldItem<Item, Path>[] {
   const mappedIds = new Set<string>()
 
-  return items.map((item) => {
+  return items.map((item, i) => {
     const storeIds = [...(hashStore.get(item) ?? [])]
 
     // Remove all used ids
@@ -70,6 +74,7 @@ function mapIds<Item>(
       return {
         id: matchingId,
         item,
+        path: `${basePath}.${i}`,
       }
     }
 
@@ -82,6 +87,7 @@ function mapIds<Item>(
     return {
       id: newId,
       item,
+      path: `${basePath}.${i}`,
     }
   })
 }
@@ -90,25 +96,28 @@ export function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(
   form: Form<T>,
   path: PickProps<T, K> extends unknown[] ? K : never,
   options?: FieldArrayOptions<PickProps<T, K> extends (infer U)[] ? U : never>,
-): FieldArray<PickProps<T, K> extends (infer U)[] ? U : never> {
+): FieldArray<PickProps<T, K> extends (infer U)[] ? U : never, typeof path> {
   type Items = PickProps<T, K>
   type Item = Items extends (infer U)[] ? U : never
   type Id = string
+  type Path = typeof path
   type Field = {
     id: Id
     item: Item
+    path: `${Path}.${number}`
   }
 
   const hashStore = new HashStore<string[], Item>(options?.hashFn)
 
-  const arrayField = form.getField(path)
+  // We only cast to unknown because we know that the constriant holds true
+  const arrayField = form.getField(path) as unknown as FormField<Item[], Path>
 
-  const fields = shallowRef<Field[]>([])
+  const items = shallowRef<Field[]>([])
 
   watch(
     arrayField.data,
     (newItems) => {
-      fields.value = mapIds(hashStore, newItems) as Field[]
+      items.value = mapIds(hashStore, newItems, path) as Field[]
     },
     {
       immediate: true,
@@ -119,26 +128,31 @@ export function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(
   const push = (item: Item) => {
     const current = (arrayField.data.value ?? []) as Item[]
     arrayField.setData([...current, item] as Items)
+
+    return items.value.at(-1)!
   }
 
-  const remove = (value: Item) => {
-    const current = (arrayField.data.value ?? []) as Item[]
-    arrayField.setData(
-      (current?.filter(item => item !== unref(value)) ?? []) as Items,
+  const remove = (id: Id) => {
+    const currentData = (arrayField.data.value ?? []) as Item[]
+    const currentItem = items.value.findIndex(
+      ({ id: itemId }) => itemId === id,
     )
-  }
 
-  const removeByIndex = (index: number) => {
-    const current = (arrayField.data.value ?? []) as Item[]
-    arrayField.setData((current?.filter((_, i) => i !== index) ?? []) as Items)
+    if (currentItem === -1) {
+      return
+    }
+
+    arrayField.setData(
+      currentData
+        .slice(0, currentItem)
+        .concat(currentData.slice(currentItem + 1)) as Items,
+    )
   }
 
   return {
-    fields,
+    items,
     push,
     remove,
-    removeByIndex,
-    errors: arrayField.errors,
-    dirty: arrayField.dirty,
+    field: arrayField,
   }
 }

package/src/types/form.ts

@@ -1,5 +1,5 @@
 import type { Awaitable } from '@vueuse/core'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 import type { DefineFieldOptions } from '../composables/useFieldRegistry'
 import type { SubformOptions } from '../composables/useSubform'
 import type { ValidatorOptions } from '../composables/useValidation'
@@ -20,16 +20,17 @@ export interface FieldArrayOptions<Item> {
   hashFn?: HashFn<unknown, Item>
 }
 
-export interface FieldArray<Item> {
-  fields: Ref<{
-    id: string
-    item: Item
-  }[]>
-  push: (item: Item) => void
-  remove: (item: Item) => void
-  removeByIndex: (index: number) => void
-  errors: Ref<ValidationErrors>
-  dirty: Ref<boolean>
+export interface FieldItem<Item, Path extends string> {
+  id: string
+  item: Item
+  path: `${Path}.${number}`
+}
+
+export interface FieldArray<Item, Path extends string> {
+  items: ShallowRef<FieldItem<Item, Path>[]>
+  push: (item: Item) => FieldItem<Item, Path>
+  remove: (id: string) => void
+  field: FormField<Item[], Path>
 }
 
 export interface FormField<T, P extends string> {

package/tests/useFieldArray.test.ts

@@ -70,121 +70,6 @@ describe('useFieldArray', () => {
     })
   })
 
-  describe('Core Functionality', () => {
-    it('should initialize with array data and generate IDs', () => {
-      const form = useForm({
-        initialData: {
-          items: [
-            {
-              id: 1,
-              name: 'Item 1',
-            },
-            {
-              id: 2,
-              name: 'Item 2',
-            },
-          ],
-        },
-      })
-      const fieldArray = useFieldArray(form, 'items')
-
-      expect(fieldArray.fields.value).toHaveLength(2)
-      expect(fieldArray.fields.value[0]).toHaveProperty('id')
-      expect(fieldArray.fields.value[0]).toHaveProperty('item')
-      expect(fieldArray.fields.value[0].item).toEqual({
-        id: 1,
-        name: 'Item 1',
-      })
-      expect(typeof fieldArray.fields.value[0].id).toBe('string')
-      expect(fieldArray.errors.value).toEqual([])
-      expect(fieldArray.dirty.value).toBe(false)
-    })
-
-    it('should push new items to the array', async () => {
-      const form = useForm({
-        initialData: {
-          items: [
-            {
-              id: 1,
-              name: 'First',
-            },
-          ],
-        },
-      })
-      const fieldArray = useFieldArray(form, 'items')
-
-      expect(fieldArray.fields.value).toHaveLength(1)
-
-      fieldArray.push({
-        id: 2,
-        name: 'Second',
-      })
-      await nextTick()
-
-      expect(fieldArray.fields.value).toHaveLength(2)
-      expect(fieldArray.fields.value[1].item).toEqual({
-        id: 2,
-        name: 'Second',
-      })
-      expect(fieldArray.dirty.value).toBe(true)
-    })
-
-    it('should remove item by reference', async () => {
-      const form = useForm({
-        initialData: {
-          items: [
-            {
-              id: 1,
-              name: 'Keep',
-            },
-            {
-              id: 2,
-              name: 'Remove',
-            },
-          ],
-        },
-      })
-      const fieldArray = useFieldArray(form, 'items')
-      const itemToRemove = fieldArray.fields.value[1].item
-
-      fieldArray.remove(itemToRemove)
-      await nextTick()
-
-      expect(fieldArray.fields.value).toHaveLength(1)
-      expect(fieldArray.fields.value[0].item.name).toBe('Keep')
-      expect(fieldArray.dirty.value).toBe(true)
-    })
-
-    it('should remove item by index', async () => {
-      const form = useForm({
-        initialData: {
-          items: [
-            {
-              id: 1,
-              name: 'First',
-            },
-            {
-              id: 2,
-              name: 'Second',
-            },
-            {
-              id: 3,
-              name: 'Third',
-            },
-          ],
-        },
-      })
-      const fieldArray = useFieldArray(form, 'items')
-
-      fieldArray.removeByIndex(1)
-      await nextTick()
-
-      expect(fieldArray.fields.value).toHaveLength(2)
-      expect(fieldArray.fields.value[0].item.name).toBe('First')
-      expect(fieldArray.fields.value[1].item.name).toBe('Third')
-    })
-  })
-
   describe('ID Persistence', () => {
     it('should maintain IDs when items are reordered', async () => {
       const form = useForm({
@@ -210,9 +95,9 @@ describe('useFieldArray', () => {
       })
 
       // Capture initial IDs
-      const id1 = fieldArray.fields.value[0].id
-      const id2 = fieldArray.fields.value[1].id
-      const id3 = fieldArray.fields.value[2].id
+      const id1 = fieldArray.items.value[0].id
+      const id2 = fieldArray.items.value[1].id
+      const id3 = fieldArray.items.value[2].id
 
       // Reverse the array
       const arrayField = form.getField('items')
@@ -220,12 +105,15 @@ describe('useFieldArray', () => {
       await nextTick()
 
       // Verify order changed but IDs followed the items
-      expect(fieldArray.fields.value[0].item.name).toBe('Third')
-      expect(fieldArray.fields.value[0].id).toBe(id3)
-      expect(fieldArray.fields.value[1].item.name).toBe('Second')
-      expect(fieldArray.fields.value[1].id).toBe(id2)
-      expect(fieldArray.fields.value[2].item.name).toBe('First')
-      expect(fieldArray.fields.value[2].id).toBe(id1)
+      expect(fieldArray.items.value[0].item.name).toBe('Third')
+      expect(fieldArray.items.value[0].id).toBe(id3)
+      expect(fieldArray.items.value[0].path).toBe('items.0')
+      expect(fieldArray.items.value[1].item.name).toBe('Second')
+      expect(fieldArray.items.value[1].id).toBe(id2)
+      expect(fieldArray.items.value[1].path).toBe('items.1')
+      expect(fieldArray.items.value[2].item.name).toBe('First')
+      expect(fieldArray.items.value[2].id).toBe(id1)
+      expect(fieldArray.items.value[2].path).toBe('items.2')
     })
 
     it('should maintain IDs based on custom hash function', async () => {
@@ -249,8 +137,8 @@ describe('useFieldArray', () => {
         hashFn: (item: { sku: string }) => item.sku,
       })
 
-      const idABC = fieldArray.fields.value[0].id
-      const idDEF = fieldArray.fields.value[1].id
+      const idABC = fieldArray.items.value[0].id
+      const idDEF = fieldArray.items.value[1].id
 
       // Update price and swap order
       const arrayField = form.getField('products')
@@ -269,8 +157,8 @@ describe('useFieldArray', () => {
       await nextTick()
 
       // IDs should persist because SKUs didn't change
-      expect(fieldArray.fields.value[0].id).toBe(idDEF)
-      expect(fieldArray.fields.value[1].id).toBe(idABC)
+      expect(fieldArray.items.value[0].id).toBe(idDEF)
+      expect(fieldArray.items.value[1].id).toBe(idABC)
 
       // Change SKU - should get new ID
       arrayField.setData([
@@ -287,8 +175,8 @@ describe('useFieldArray', () => {
       ])
       await nextTick()
 
-      expect(fieldArray.fields.value[0].id).not.toBe(idABC)
-      expect(fieldArray.fields.value[1].id).toBe(idDEF)
+      expect(fieldArray.items.value[0].id).not.toBe(idABC)
+      expect(fieldArray.items.value[1].id).toBe(idDEF)
     })
 
     it('should assign IDs in order for items with same hash', async () => {
@@ -319,7 +207,7 @@ describe('useFieldArray', () => {
       })
 
       // All items get unique IDs despite same hash
-      const [id1, id2, id3] = fieldArray.fields.value.map(f => f.id)
+      const [id1, id2, id3] = fieldArray.items.value.map(f => f.id)
       expect(new Set([id1, id2, id3]).size).toBe(3)
 
       // Reorder: move last item to first position
@@ -342,40 +230,14 @@ describe('useFieldArray', () => {
 
       // IDs are assigned in order from stored list, NOT following items
       // This is expected behavior with hash collisions
-      expect(fieldArray.fields.value[0].id).toBe(id1) // svelte gets id1 (was vue's)
-      expect(fieldArray.fields.value[1].id).toBe(id2) // vue gets id2 (was react's)
-      expect(fieldArray.fields.value[2].id).toBe(id3) // react gets id3 (was svelte's)
+      expect(fieldArray.items.value[0].id).toBe(id1) // svelte gets id1 (was vue's)
+      expect(fieldArray.items.value[1].id).toBe(id2) // vue gets id2 (was react's)
+      expect(fieldArray.items.value[2].id).toBe(id3) // react gets id3 (was svelte's)
 
       // The values confirm the reorder happened
-      expect(fieldArray.fields.value[0].item.value).toBe('svelte')
-      expect(fieldArray.fields.value[1].item.value).toBe('vue')
-      expect(fieldArray.fields.value[2].item.value).toBe('react')
-    })
-  })
-
-  describe('Form Integration', () => {
-    it('should track dirty state correctly', async () => {
-      const form = useForm({
-        initialData: { items: [{ name: 'Item' }] },
-      })
-      const fieldArray = useFieldArray(form, 'items')
-
-      expect(form.isDirty.value).toBe(false)
-      expect(fieldArray.dirty.value).toBe(false)
-
-      // Make a change
-      fieldArray.push({ name: 'New Item' })
-      await nextTick()
-
-      expect(form.isDirty.value).toBe(true)
-      expect(fieldArray.dirty.value).toBe(true)
-
-      // Reset form
-      form.reset()
-      await nextTick()
-
-      expect(form.isDirty.value).toBe(false)
-      expect(fieldArray.dirty.value).toBe(false)
+      expect(fieldArray.items.value[0].item.value).toBe('svelte')
+      expect(fieldArray.items.value[1].item.value).toBe('vue')
+      expect(fieldArray.items.value[2].item.value).toBe('react')
     })
   })
 })