@teamnovu/kit-vue-forms 0.1.23 → 0.1.25

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 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";
+var D = (r, t, e) => X(r, typeof t != "symbol" ? t + "" : t, e);
+import { toValue as Y, toRaw as ee, unref as h, shallowRef as $, watch as R, computed as v, isRef as C, 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 T, renderSlot as b, normalizeProps as x, 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,14 +10,14 @@ function g(r) {
 }
 function L(r, t) {
   return (e) => async (a) => {
-    a.preventDefault(), f(t.validationStrategy) !== "none" && await r.validateForm(), r.isValid.value && await e(r.data.value);
+    a.preventDefault(), h(t.validationStrategy) !== "none" && await r.validateForm(), r.isValid.value && await e(r.data.value);
   };
 }
 class fe {
   constructor(t = (e) => e) {
-    R(this, "weakMap", /* @__PURE__ */ new WeakMap());
-    R(this, "map", /* @__PURE__ */ new Map());
-    R(this, "hashFn");
+    D(this, "weakMap", /* @__PURE__ */ new WeakMap());
+    D(this, "map", /* @__PURE__ */ new Map());
+    D(this, "hashFn");
     this.hashFn = t;
   }
   isReferenceType(t) {
@@ -39,16 +39,16 @@ class fe {
 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];
+    const d = [...r.get(s) ?? []], m = d.findIndex((f) => !a.has(f)), c = (m === -1 ? [] : d.slice(m))[0];
     if (c)
       return a.add(c), {
         id: c,
         item: s,
         path: `${e}.${n}`
       };
-    const o = crypto.randomUUID();
-    return r.set(s, d.concat([o])), a.add(o), {
-      id: o,
+    const i = crypto.randomUUID();
+    return r.set(s, d.concat([i])), a.add(i), {
+      id: i,
       item: s,
       path: `${e}.${n}`
     };
@@ -56,10 +56,10 @@ function he(r, t, e) {
 }
 function G(r, t, e) {
   const a = new fe(e == null ? void 0 : e.hashFn), s = r.getField(t), n = $([]);
-  return D(
+  return R(
     s.data,
-    (h) => {
-      n.value = he(a, h, t);
+    (c) => {
+      n.value = he(a, c, t);
     },
     {
       immediate: !0,
@@ -67,18 +67,24 @@ function G(r, t, e) {
     }
   ), {
     items: n,
-    push: (h) => {
-      const c = s.data.value ?? [];
-      return s.setData([...c, h]), n.value.at(-1);
+    push: (c) => {
+      const i = s.data.value ?? [];
+      return s.setData([...i, c]), n.value.at(-1);
     },
-    remove: (h) => {
-      const c = s.data.value ?? [], o = n.value.findIndex(
-        ({ id: p }) => p === h
+    remove: (c) => {
+      const i = s.data.value ?? [], f = n.value.findIndex(
+        ({ id: l }) => l === c
       );
-      o !== -1 && s.setData(
-        c.slice(0, o).concat(c.slice(o + 1))
+      f !== -1 && s.setData(
+        i.slice(0, f).concat(i.slice(f + 1))
       );
     },
+    insert: (c, i) => {
+      const f = s.data.value ?? [];
+      return s.setData(
+        f.slice(0, i).concat([c]).concat(f.slice(i))
+      ), n.value[i];
+    },
     field: s
   };
 }
@@ -99,23 +105,23 @@ 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(
-      (d, V) => ((d == null ? void 0 : d[V]) === void 0 && (d[V] = {}), d == null ? void 0 : d[V]),
+      (d, m) => ((d == null ? void 0 : d[m]) === void 0 && (d[m] = {}), d == null ? void 0 : d[m]),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      f(r)
+      h(r)
     );
     n[s] = e;
   } else {
-    if (!x(r))
+    if (!C(r))
       return;
     r.value = e;
   }
 }
-const Z = (r, t) => m({
+const Z = (r, t) => v({
   get() {
-    return S(f(r), f(t));
+    return S(h(r), h(t));
   },
   set(e) {
-    ve(r, f(t), e);
+    ve(r, h(t), e);
   }
 });
 function I(r, t) {
@@ -138,7 +144,7 @@ function me(r, t) {
 }
 class Ve {
   constructor(t) {
-    R(this, "rc", 1);
+    D(this, "rc", 1);
     this.drop = t;
   }
   inc() {
@@ -161,44 +167,44 @@ function Fe(r) {
     errors: e.errors,
     touched: !1
   });
-  D(
+  R(
     $(e.initialValue),
     () => {
-      a.value = Object.freeze(g(e.initialValue)), s.value !== f(e.initialValue) && (s.value = g(e.initialValue));
+      a.value = Object.freeze(g(e.initialValue)), s.value !== h(e.initialValue) && (s.value = g(e.initialValue));
     },
     { flush: "sync" }
   );
-  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);
+  const n = v(() => JSON.stringify(s.value) !== JSON.stringify(s.initialValue)), d = (p) => {
+    s.value = p;
+  }, m = () => {
+    var p;
+    s.touched = !0, s.errors = [], (p = e.onBlur) == null || p.call(e);
+  }, F = () => {
+    var p;
+    (p = e.onFocus) == null || p.call(e);
   }, c = () => {
-    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;
+    const p = s.path.split(".").at(-1) || "";
+    h(e.existsInForm) && !/^\d+$/.test(p) && (s.value = g(s.initialValue)), s.touched = !1, s.errors = [];
+  }, i = (p) => {
+    n.value || d(g(p)), s.initialValue = p;
+  }, f = (p) => {
+    s.errors = p;
   }, l = () => {
     s.errors = [];
-  }, i = K(s);
+  }, o = K(s);
   return {
-    data: i.value,
-    path: i.path,
-    initialValue: i.initialValue,
-    errors: i.errors,
-    touched: i.touched,
+    data: o.value,
+    path: o.path,
+    initialValue: o.initialValue,
+    errors: o.errors,
+    touched: o.touched,
     dirty: n,
     setData: d,
-    setInitialData: o,
-    onBlur: V,
-    onFocus: h,
+    setInitialData: i,
+    onBlur: m,
+    onFocus: F,
     reset: c,
-    setErrors: p,
+    setErrors: f,
     clearErrors: l
   };
 }
@@ -207,7 +213,7 @@ const ye = {
 };
 function ge(r, t) {
   const e = () => S(r.initialData, t), a = $(e());
-  return D(
+  return R(
     () => r.initialData,
     () => {
       a.value = e(), ae(a);
@@ -220,71 +226,71 @@ function Ee(r, t, e) {
     ...ye,
     ...e
   }, 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)));
+    const o = h(l.path);
+    s.set(o, l);
+  }, m = (l) => {
+    var o;
+    n != null && n.keepValuesOnUnmount || (o = s.get(l)) == null || o.reset(), s.delete(l);
+  }, F = (l) => {
+    var o;
+    a.has(l) ? (o = a.get(l)) == null || o.inc() : a.set(l, new Ve(() => m(l)));
   }, c = (l) => {
-    var i;
-    a.has(l) && ((i = a.get(l)) == null || i.dec());
-  }, o = (l) => {
-    const { path: i } = l;
-    if (!s.has(i)) {
+    var o;
+    a.has(l) && ((o = a.get(l)) == null || o.dec());
+  }, i = (l) => {
+    const { path: o } = l;
+    if (!s.has(o)) {
       const A = Fe({
-        path: i,
-        value: Z(j(r, "data"), i),
-        initialValue: ge(r, i),
-        existsInForm: m(() => pe(r.data, f(i))),
-        errors: m({
+        path: o,
+        value: Z(j(r, "data"), o),
+        initialValue: ge(r, o),
+        existsInForm: v(() => pe(r.data, h(o))),
+        errors: v({
           get() {
-            return t.errors.value.propertyErrors[i] || [];
+            return t.errors.value.propertyErrors[o] || [];
           },
           set(E) {
-            t.errors.value.propertyErrors[i] = E;
+            t.errors.value.propertyErrors[o] = E;
           }
         }),
         onBlur: async () => {
           var E, P;
           await Promise.all([
-            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, f(i)),
+            (E = n == null ? void 0 : n.onBlur) == null ? void 0 : E.call(n, h(o)),
             (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, f(i)),
+            (E = n == null ? void 0 : n.onFocus) == null ? void 0 : E.call(n, h(o)),
             (P = l.onFocus) == null ? void 0 : P.call(l)
           ]);
         }
       });
       d(A);
     }
-    const v = s.get(i);
-    return h(i), re(() => {
-      c(i);
-    }), v;
-  }, p = (l) => o(l);
+    const p = s.get(o);
+    return F(o), re(() => {
+      c(o);
+    }), p;
+  }, f = (l) => i(l);
   return {
-    fields: m(() => [...s.values()]),
-    getField: (l) => o({ path: l }),
+    fields: v(() => [...s.values()]),
+    getField: (l) => i({ path: l }),
     registerField: d,
-    deregisterField: V,
-    defineField: p
+    deregisterField: m,
+    defineField: f
   };
 }
 function we(r) {
-  const t = m(() => r.fields.value.some((a) => f(a.dirty))), e = m(() => r.fields.value.some((a) => f(a.touched)));
+  const t = v(() => r.fields.value.some((a) => h(a.dirty))), e = v(() => r.fields.value.some((a) => h(a.touched)));
   return {
     isDirty: t,
     isTouched: e
   };
 }
-function Re(r) {
+function De(r) {
   return r.filter(
     (t, e, a) => a.indexOf(t) === e
   );
@@ -299,10 +305,10 @@ function q(...r) {
     if (!a)
       return t;
     const s = (t ?? []).concat(e);
-    return Re(s);
+    return De(s);
   }, r[0]);
 }
-function De(...r) {
+function Re(...r) {
   return r.map((e) => Object.keys(e)).flat().reduce((e, a) => {
     const s = r.map((n) => n[a]).filter(Boolean);
     return {
@@ -321,7 +327,7 @@ function B(...r) {
   return r.length === 1 ? t : r.slice(1).reduce(
     (e, a) => ({
       general: q(e.general, a.general),
-      propertyErrors: De(e.propertyErrors ?? {}, a.propertyErrors ?? {})
+      propertyErrors: Re(e.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     t
   );
@@ -394,8 +400,8 @@ class Ie {
 }
 class $e {
   constructor(t, e) {
-    R(this, "schemaValidator");
-    R(this, "functionValidator");
+    D(this, "schemaValidator");
+    D(this, "functionValidator");
     this.schema = t, this.validateFn = e, this.schemaValidator = new Se(this.schema), this.functionValidator = new Ie(this.validateFn);
   }
   async validate(t) {
@@ -410,87 +416,87 @@ class $e {
   }
 }
 function O(r) {
-  return m(() => new $e(
-    f(r.schema),
-    f(r.validateFn)
+  return v(() => new $e(
+    h(r.schema),
+    h(r.validateFn)
   ));
 }
 function be(r, t) {
   const e = k({
     validators: J([O(t)]),
     isValidated: !1,
-    errors: f(t.errors) ?? y.errors
-  }), a = (o = y.errors) => {
-    e.errors = B(f(t.errors) ?? y.errors, o);
+    errors: h(t.errors) ?? y.errors
+  }), a = (i = y.errors) => {
+    e.errors = B(h(t.errors) ?? y.errors, i);
   };
-  D(() => f(t.errors), async () => {
+  R(() => h(t.errors), async () => {
     if (e.isValidated) {
-      const o = await n();
-      a(o.errors);
+      const i = await n();
+      a(i.errors);
     } else
       a();
-  }, { immediate: !0 }), D(
+  }, { immediate: !0 }), R(
     [() => e.validators],
-    async (o) => {
+    async (i) => {
       if (e.isValidated)
-        if (o) {
-          const p = await n();
-          e.errors = p.errors;
+        if (i) {
+          const f = await n();
+          e.errors = f.errors;
         } else
           e.errors = y.errors;
     },
     { immediate: !0 }
-  ), D([() => r.data, () => f(t.schema)], () => {
+  ), R([() => r.data, () => h(t.schema)], () => {
     e.isValidated && d();
   });
-  const s = (o) => {
-    const p = x(o) ? o : O(o);
-    return e.validators.push(p), se() && ne(() => {
+  const s = (i) => {
+    const f = C(i) ? i : O(i);
+    return e.validators.push(f), se() && ne(() => {
       e.validators = e.validators.filter(
-        (l) => l !== p
+        (l) => l !== f
       );
-    }), p;
+    }), f;
   };
   async function n() {
-    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);
+    const i = await Promise.all(
+      e.validators.filter((o) => h(o) !== void 0).map((o) => h(o).validate(r.data))
+    ), f = i.every((o) => o.isValid);
     let { errors: l } = y;
-    if (!p) {
-      const i = o.map((v) => v.errors);
-      l = B(...i);
+    if (!f) {
+      const o = i.map((p) => p.errors);
+      l = B(...o);
     }
     return {
       errors: l,
-      isValid: p
+      isValid: f
     };
   }
   const d = async () => {
-    const o = await n();
-    return a(o.errors), e.isValidated = !0, {
-      isValid: !_(o.errors),
+    const i = await n();
+    return a(i.errors), e.isValidated = !0, {
+      isValid: !_(i.errors),
       errors: e.errors
     };
-  }, V = async (o) => {
-    const p = await n();
+  }, m = async (i) => {
+    const f = await n();
     return a({
-      general: p.errors.general,
+      general: f.errors.general,
       propertyErrors: {
-        [o]: p.errors.propertyErrors[o]
+        [i]: f.errors.propertyErrors[i]
       }
     }), {
-      isValid: !_(p.errors),
+      isValid: !_(f.errors),
       errors: e.errors
     };
-  }, h = m(() => !_(e.errors)), c = () => {
-    e.isValidated = !1, e.errors = f(t.errors) ?? y.errors;
+  }, F = v(() => !_(e.errors)), c = () => {
+    e.isValidated = !1, e.errors = h(t.errors) ?? y.errors;
   };
   return {
     ...K(e),
     validateForm: d,
-    validateField: V,
+    validateField: m,
     defineValidator: s,
-    isValid: h,
+    isValid: F,
     reset: c
   };
 }
@@ -517,64 +523,64 @@ class ke {
   }
 }
 function Ae(r, t, e, a) {
-  const s = Z(r.data, t), n = m(() => S(r.initialData.value, t)), d = (u) => ({
+  const s = Z(r.data, t), n = v(() => S(r.initialData.value, t)), d = (u) => ({
     ...u,
-    path: m(() => f(u.path).replace(t + ".", "")),
-    setData: (F) => {
-      u.setData(F);
+    path: v(() => h(u.path).replace(t + ".", "")),
+    setData: (V) => {
+      u.setData(V);
     }
-  }), V = (u) => {
-    const F = I(t, u), w = r.getField(F);
+  }), m = (u) => {
+    const V = I(t, u), w = r.getField(V);
     return w ? d(w) : {};
-  }, h = (u) => {
-    const F = I(t, u.path), w = r.defineField({
+  }, F = (u) => {
+    const V = I(t, u.path), w = r.defineField({
       ...u,
-      path: F
+      path: V
     });
     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 = {
+  }, c = v(() => r.fields.value.filter((u) => {
+    const V = u.path.value;
+    return V.startsWith(t + ".") || V === t;
+  }).map((u) => d(u))), i = () => r.fields.value.filter((u) => {
+    const V = u.path.value;
+    return V.startsWith(t + ".") || V === t;
+  }), f = v(() => i().some((u) => u.dirty.value)), l = v(() => i().some((u) => u.touched.value)), o = v(() => r.isValid.value), p = v(() => r.isValidated.value), A = v(() => me(h(r.errors), t)), M = {
     data: s,
     fields: c,
     initialData: n,
-    defineField: h,
-    getField: V,
-    isDirty: p,
+    defineField: F,
+    getField: m,
+    isDirty: f,
     isTouched: l,
-    isValid: i,
-    isValidated: v,
+    isValid: o,
+    isValidated: p,
     errors: A,
     defineValidator: (u) => {
-      const F = x(u) ? u : O(u), w = m(
-        () => new ke(t, f(F))
+      const V = C(u) ? u : O(u), w = v(
+        () => new ke(t, h(V))
       );
-      return r.defineValidator(w), F;
+      return r.defineValidator(w), V;
     },
-    reset: () => o().forEach((u) => u.reset()),
+    reset: () => i().forEach((u) => u.reset()),
     validateForm: () => r.validateForm(),
-    getSubForm: (u, F) => {
+    getSubForm: (u, V) => {
       const w = I(t, u);
       return r.getSubForm(
         w,
-        F
+        V
       );
     },
     submitHandler: (u) => L(M, e ?? {})(u),
-    useFieldArray: (u, F) => G(M, u, F)
+    useFieldArray: (u, V) => G(M, u, V)
   };
   return M;
 }
-function xe(r) {
-  const t = m(() => g(r.initialData)), e = J(g(t)), a = k({
+function Ce(r) {
+  const t = v(() => g(r.initialData)), e = J(g(t)), a = k({
     initialData: t,
     data: e
   });
-  D(
+  R(
     t,
     (c) => {
       a.data = g(c);
@@ -584,28 +590,28 @@ function xe(r) {
   const s = be(a, r), n = Ee(a, s, {
     keepValuesOnUnmount: r.keepValuesOnUnmount,
     onBlur: async (c) => {
-      f(r.validationStrategy) === "onTouch" && s.validateField(c);
+      h(r.validationStrategy) === "onTouch" && s.validateField(c);
     }
-  }), d = we(n), V = () => {
+  }), d = we(n), m = () => {
     e.value = g(t), s.reset();
     for (const c of n.fields.value)
       c.reset();
   };
-  f(r.validationStrategy) === "onFormOpen" && s.validateForm();
-  const h = {
+  h(r.validationStrategy) === "onFormOpen" && s.validateForm();
+  const F = {
     ...n,
     ...s,
     ...d,
-    reset: V,
+    reset: m,
     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)
+    submitHandler: (c) => L(F, r)(c),
+    getSubForm: (c, i) => Ae(F, c, r),
+    useFieldArray: (c, i) => G(F, c, i)
   };
-  return h;
+  return F;
 }
-const Ce = /* @__PURE__ */ C({
+const Te = /* @__PURE__ */ T({
   __name: "Field",
   props: {
     form: {},
@@ -621,9 +627,9 @@ const Ce = /* @__PURE__ */ C({
     const t = r, e = t.form.defineField({
       path: t.path
     }), a = k(e);
-    return (s, n) => b(s.$slots, "default", T(N(a)));
+    return (s, n) => b(s.$slots, "default", x(N(a)));
   }
-}), Te = /* @__PURE__ */ C({
+}), xe = /* @__PURE__ */ T({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -651,10 +657,10 @@ const Ce = /* @__PURE__ */ C({
             ]),
             _: 2
           }, [
-            ue(t.$slots, (V, h) => ({
-              name: h,
+            ue(t.$slots, (m, F) => ({
+              name: F,
               fn: U((c) => [
-                b(t.$slots, h, T(N(c ?? {})))
+                b(t.$slots, F, x(N(c ?? {})))
               ])
             }))
           ]), 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
@@ -663,20 +669,20 @@ const Ce = /* @__PURE__ */ C({
       }, 8, ["form", "path"]);
     };
   }
-}), Ne = /* @__PURE__ */ C({
+}), Ne = /* @__PURE__ */ T({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(r) {
-    const t = r, e = m(() => t.form.getSubForm(t.path));
-    return (a, s) => b(a.$slots, "default", T(N({ subform: e.value })));
+    const t = r, e = v(() => t.form.getSubForm(t.path));
+    return (a, s) => b(a.$slots, "default", x(N({ subform: e.value })));
   }
 });
 export {
-  Ce as Field,
-  Te as FormFieldWrapper,
+  Te as Field,
+  xe as FormFieldWrapper,
   Ne as FormPart,
-  xe as useForm
+  Ce as useForm
 };

package/dist/types/form.d.ts

@@ -19,6 +19,7 @@ export interface FieldArray<Item, Path extends string> {
     items: ShallowRef<FieldItem<Item, Path>[]>;
     push: (item: Item) => FieldItem<Item, Path>;
     remove: (id: string) => void;
+    insert: (item: Item, index: number) => FieldItem<Item, Path>;
     field: FormField<Item[], Path>;
 }
 export interface FormField<T, P extends string> {
@@ -60,5 +61,5 @@ export interface Form<T extends FormDataDefault> {
     validateForm: () => Promise<ValidationResult>;
     submitHandler: (onSubmit: (data: T) => Awaitable<void>) => (event: SubmitEvent) => Promise<void>;
     getSubForm: <P extends EntityPaths<T>>(path: P, options?: SubformOptions<PickEntity<T, P>>) => Form<PickEntity<T, P>>;
-    useFieldArray: <K extends Paths<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>;
+    useFieldArray: <K extends Paths<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/package.json

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

package/src/composables/useFieldArray.ts

@@ -149,10 +149,24 @@ export function useFieldArray<T extends FormDataDefault, K extends Paths<T>>(
     )
   }
 
+  const insert = (item: Item, index: number) => {
+    const currentData = (arrayField.data.value ?? []) as Item[]
+
+    arrayField.setData(
+      currentData
+        .slice(0, index)
+        .concat([item])
+        .concat(currentData.slice(index)) as Items,
+    )
+
+    return items.value[index]!
+  }
+
   return {
     items,
     push,
     remove,
+    insert,
     field: arrayField,
   }
 }

package/src/types/form.ts

@@ -30,6 +30,7 @@ export interface FieldArray<Item, Path extends string> {
   items: ShallowRef<FieldItem<Item, Path>[]>
   push: (item: Item) => FieldItem<Item, Path>
   remove: (id: string) => void
+  insert: (item: Item, index: number) => FieldItem<Item, Path>
   field: FormField<Item[], Path>
 }
 
@@ -107,5 +108,5 @@ export interface Form<T extends FormDataDefault> {
     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>
 }

package/tests/useFieldArray.test.ts

@@ -1,185 +1,185 @@
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import { useForm } from '../src/composables/useForm'
-import { HashStore, useFieldArray } from '../src/composables/useFieldArray'
-
-describe('useFieldArray', () => {
-  describe('HashStore', () => {
-    it('should store and retrieve primitive values with identity hash', () => {
-      const store = new HashStore<string[]>()
-
-      store.set(5, ['id-1'])
-      expect(store.has(5)).toBe(true)
-      expect(store.get(5)).toEqual(['id-1'])
-
-      store.set(10, ['id-2'])
-      expect(store.get(10)).toEqual(['id-2'])
-      expect(store.get(5)).toEqual(['id-1'])
-    })
-
-    it('should store objects by reference with identity hash', () => {
-      const store = new HashStore<string[]>()
+import { describe, expect, it } from "vitest";
+import { nextTick } from "vue";
+import { useForm } from "../src/composables/useForm";
+import { HashStore, useFieldArray } from "../src/composables/useFieldArray";
+
+describe("useFieldArray", () => {
+  describe("HashStore", () => {
+    it("should store and retrieve primitive values with identity hash", () => {
+      const store = new HashStore<string[]>();
+
+      store.set(5, ["id-1"]);
+      expect(store.has(5)).toBe(true);
+      expect(store.get(5)).toEqual(["id-1"]);
+
+      store.set(10, ["id-2"]);
+      expect(store.get(10)).toEqual(["id-2"]);
+      expect(store.get(5)).toEqual(["id-1"]);
+    });
+
+    it("should store objects by reference with identity hash", () => {
+      const store = new HashStore<string[]>();
       const obj1 = {
         id: 1,
-        name: 'A',
-      }
+        name: "A",
+      };
       const obj2 = {
         id: 1,
-        name: 'A',
-      } // Same content, different reference
+        name: "A",
+      }; // Same content, different reference
 
-      store.set(obj1, ['uuid-1'])
+      store.set(obj1, ["uuid-1"]);
 
-      expect(store.has(obj1)).toBe(true)
-      expect(store.has(obj2)).toBe(false)
-      expect(store.get(obj1)).toEqual(['uuid-1'])
-      expect(store.get(obj2)).toBeUndefined()
-    })
+      expect(store.has(obj1)).toBe(true);
+      expect(store.has(obj2)).toBe(false);
+      expect(store.get(obj1)).toEqual(["uuid-1"]);
+      expect(store.get(obj2)).toBeUndefined();
+    });
 
-    it('should use custom hash function for semantic equality', () => {
-      const store = new HashStore<string[], { id: number }>(item => item.id)
+    it("should use custom hash function for semantic equality", () => {
+      const store = new HashStore<string[], { id: number }>((item) => item.id);
       const obj1 = {
         id: 1,
-        name: 'A',
-      }
+        name: "A",
+      };
       const obj2 = {
         id: 1,
-        name: 'B',
-      } // Same ID, different name
+        name: "B",
+      }; // Same ID, different name
       const obj3 = {
         id: 2,
-        name: 'A',
-      }
+        name: "A",
+      };
 
-      store.set(obj1, ['uuid-1'])
+      store.set(obj1, ["uuid-1"]);
 
-      expect(store.has(obj2)).toBe(true)
-      expect(store.get(obj2)).toEqual(['uuid-1'])
-      expect(store.has(obj3)).toBe(false)
-    })
+      expect(store.has(obj2)).toBe(true);
+      expect(store.get(obj2)).toEqual(["uuid-1"]);
+      expect(store.has(obj3)).toBe(false);
+    });
 
-    it('should overwrite value on subsequent set calls', () => {
-      const store = new HashStore<string[]>()
-      const item = { id: 1 }
+    it("should overwrite value on subsequent set calls", () => {
+      const store = new HashStore<string[]>();
+      const item = { id: 1 };
 
-      store.set(item, ['id-1'])
-      expect(store.get(item)).toEqual(['id-1'])
+      store.set(item, ["id-1"]);
+      expect(store.get(item)).toEqual(["id-1"]);
 
-      store.set(item, ['id-1', 'id-2'])
-      expect(store.get(item)).toEqual(['id-1', 'id-2'])
-    })
-  })
+      store.set(item, ["id-1", "id-2"]);
+      expect(store.get(item)).toEqual(["id-1", "id-2"]);
+    });
+  });
 
-  describe('ID Persistence', () => {
-    it('should maintain IDs when items are reordered', async () => {
+  describe("ID Persistence", () => {
+    it("should maintain IDs when items are reordered", async () => {
       const form = useForm({
         initialData: {
           items: [
             {
               id: 1,
-              name: 'First',
+              name: "First",
             },
             {
               id: 2,
-              name: 'Second',
+              name: "Second",
             },
             {
               id: 3,
-              name: 'Third',
+              name: "Third",
             },
           ],
         },
-      })
-      const fieldArray = useFieldArray(form, 'items', {
+      });
+      const fieldArray = useFieldArray(form, "items", {
         hashFn: (item: { id: number }) => item.id,
-      })
+      });
 
       // Capture initial IDs
-      const id1 = fieldArray.items.value[0].id
-      const id2 = fieldArray.items.value[1].id
-      const id3 = fieldArray.items.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')
-      arrayField.setData([...arrayField.data.value].reverse())
-      await nextTick()
+      const arrayField = form.getField("items");
+      arrayField.setData([...arrayField.data.value].reverse());
+      await nextTick();
 
       // Verify order changed but IDs followed the items
-      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 () => {
+      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 () => {
       const form = useForm({
         initialData: {
           products: [
             {
-              sku: 'ABC',
-              name: 'Widget',
+              sku: "ABC",
+              name: "Widget",
               price: 10,
             },
             {
-              sku: 'DEF',
-              name: 'Gadget',
+              sku: "DEF",
+              name: "Gadget",
               price: 20,
             },
           ],
         },
-      })
-      const fieldArray = useFieldArray(form, 'products', {
+      });
+      const fieldArray = useFieldArray(form, "products", {
         hashFn: (item: { sku: string }) => item.sku,
-      })
+      });
 
-      const idABC = fieldArray.items.value[0].id
-      const idDEF = fieldArray.items.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')
+      const arrayField = form.getField("products");
       arrayField.setData([
         {
-          sku: 'DEF',
-          name: 'Gadget',
+          sku: "DEF",
+          name: "Gadget",
           price: 25,
         },
         {
-          sku: 'ABC',
-          name: 'Widget',
+          sku: "ABC",
+          name: "Widget",
           price: 15,
         },
-      ])
-      await nextTick()
+      ]);
+      await nextTick();
 
       // IDs should persist because SKUs didn't change
-      expect(fieldArray.items.value[0].id).toBe(idDEF)
-      expect(fieldArray.items.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([
         {
-          sku: 'XYZ',
-          name: 'Widget',
+          sku: "XYZ",
+          name: "Widget",
           price: 15,
         },
         {
-          sku: 'DEF',
-          name: 'Gadget',
+          sku: "DEF",
+          name: "Gadget",
           price: 25,
         },
-      ])
-      await nextTick()
+      ]);
+      await nextTick();
 
-      expect(fieldArray.items.value[0].id).not.toBe(idABC)
-      expect(fieldArray.items.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 () => {
+    it("should assign IDs in order for items with same hash", async () => {
       // When multiple items share the same hash, IDs are assigned in order
       // from the stored ID list. This means reordering items with same hash
       // will NOT preserve ID-to-item mapping (IDs follow position, not identity).
@@ -187,57 +187,164 @@ describe('useFieldArray', () => {
         initialData: {
           items: [
             {
-              type: 'tag',
-              value: 'vue',
+              type: "tag",
+              value: "vue",
             },
             {
-              type: 'tag',
-              value: 'react',
+              type: "tag",
+              value: "react",
             },
             {
-              type: 'tag',
-              value: 'svelte',
+              type: "tag",
+              value: "svelte",
             },
           ],
         },
-      })
+      });
       // Hash by type only - all items have same hash 'tag'
-      const fieldArray = useFieldArray(form, 'items', {
+      const fieldArray = useFieldArray(form, "items", {
         hashFn: (item: { type: string }) => item.type,
-      })
+      });
 
       // All items get unique IDs despite same hash
-      const [id1, id2, id3] = fieldArray.items.value.map(f => f.id)
-      expect(new Set([id1, id2, id3]).size).toBe(3)
+      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
-      const arrayField = form.getField('items')
+      const arrayField = form.getField("items");
       arrayField.setData([
         {
-          type: 'tag',
-          value: 'svelte',
+          type: "tag",
+          value: "svelte",
         },
         {
-          type: 'tag',
-          value: 'vue',
+          type: "tag",
+          value: "vue",
         },
         {
-          type: 'tag',
-          value: 'react',
+          type: "tag",
+          value: "react",
         },
-      ])
-      await nextTick()
+      ]);
+      await nextTick();
 
       // IDs are assigned in order from stored list, NOT following items
       // This is expected behavior with hash collisions
-      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)
+      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.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')
-    })
-  })
-})
+      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");
+    });
+
+    it("should push an item to the array", async () => {
+      const form = useForm({
+        initialData: {
+          items: [
+            {
+              id: 1,
+              name: "First",
+            },
+          ],
+        },
+      });
+      const fieldArray = useFieldArray(form, "items", {
+        hashFn: (item: { id: number }) => item.id,
+      });
+
+      // Capture initial IDs
+      const id1 = fieldArray.items.value[0].id;
+
+      // Push a new item
+      const newItem = fieldArray.push({
+        id: 2,
+        name: "Second",
+      });
+
+      expect(newItem.item.name).toBe("Second");
+      expect(newItem.path).toBe("items.1");
+      expect(newItem.id).toBeDefined();
+
+      await nextTick();
+
+      // Verify existing item's ID is unchanged
+      expect(fieldArray.items.value[0].id).toBe(id1);
+      expect(fieldArray.items.value[1].id).toBe(newItem.id);
+    });
+
+    it("should remove an item from the array", async () => {
+      const form = useForm({
+        initialData: {
+          items: [
+            {
+              id: 1,
+              name: "First",
+            },
+            {
+              id: 2,
+              name: "Second",
+            },
+          ],
+        },
+      });
+      const fieldArray = useFieldArray(form, "items", {
+        hashFn: (item: { id: number }) => item.id,
+      });
+
+      // Capture initial IDs
+      const id1 = fieldArray.items.value[0].id;
+
+      // Remove an item
+      fieldArray.remove(id1);
+
+      await nextTick();
+
+      // Verify the correct item was removed
+      expect(fieldArray.items.value.length).toBe(1);
+      expect(fieldArray.items.value[0].item.name).toBe("Second");
+    });
+
+    it("should insert an item into the array", async () => {
+      const form = useForm({
+        initialData: {
+          items: [
+            {
+              id: 1,
+              name: "First",
+            },
+            {
+              id: 3,
+              name: "Third",
+            },
+          ],
+        },
+      });
+      const fieldArray = useFieldArray(form, "items", {
+        hashFn: (item: { id: number }) => item.id,
+      });
+
+      // Capture initial IDs
+      const id1 = fieldArray.items.value[0].id;
+      const id3 = fieldArray.items.value[1].id;
+
+      // Insert an item
+      const insertedItem = fieldArray.insert({ id: 2, name: "Second" }, 1);
+      expect(insertedItem.item.name).toBe("Second");
+      expect(insertedItem.path).toBe("items.1");
+      expect(insertedItem.id).toBeDefined();
+
+      await nextTick();
+
+      // Verify the item was inserted correctly
+      expect(fieldArray.items.value.length).toBe(3);
+      expect(fieldArray.items.value[0].id).toBe(id1);
+      expect(fieldArray.items.value[0].item.name).toBe("First");
+      expect(fieldArray.items.value[1].item.name).toBe("Second");
+      expect(fieldArray.items.value[2].id).toBe(id3);
+      expect(fieldArray.items.value[2].item.name).toBe("Third");
+    });
+  });
+});