@teamnovu/kit-vue-forms 0.0.20 → 0.1.0

package/dist/components/Field.vue.d.ts

@@ -1,7 +1,7 @@
 import { Form } from '../types/form.ts';
 import { Paths, PickProps } from '../types/util.ts';
 import { UseFieldOptions } from '../composables/useField.ts';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, Ref, VNode } from 'vue';
 import { ValidationErrors, ErrorMessage } from '../index.js';
 export interface FieldProps<TData extends object, TPath extends string> extends UseFieldOptions<PickProps<TData, TPath>, TPath> {
     form: Form<TData>;
@@ -12,12 +12,12 @@ declare const _default: <TData extends object, TPath extends Paths<TData>>(__VLS
     attrs: any;
     slots: {
         default?(_: {
-            data: PickProps<TData, TPath>;
-            path: TPath;
-            initialValue: PickProps<TData, TPath>;
-            errors: ValidationErrors;
-            touched: boolean;
-            dirty: boolean;
+            data: Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>;
+            path: Ref<TPath, TPath>;
+            initialValue: Readonly< Ref<PickProps<TData, TPath>, PickProps<TData, TPath>>>;
+            errors: Ref<ValidationErrors>;
+            touched: Ref<boolean>;
+            dirty: Ref<boolean>;
             setData: (newData: PickProps<TData, TPath>) => void;
             onBlur: () => void;
             onFocus: () => void;

package/dist/composables/useFieldRegistry.d.ts

@@ -2,7 +2,7 @@ import { FieldsTuple, FormDataDefault, FormField } from '../types/form';
 import { Paths, PickProps } from '../types/util';
 import { UseFieldOptions } from './useField';
 import { ValidationState } from './useValidation';
-type FieldRegistryCache<T> = Record<Paths<T>, FormField<any, string>>;
+import { ComputedRef } from 'vue';
 export type ResolvedFormField<T, K extends Paths<T>> = FormField<PickProps<T, K>, K>;
 export type DefineFieldOptions<F, K extends string> = Pick<UseFieldOptions<F, K>, 'path'>;
 interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T> {
@@ -10,9 +10,8 @@ interface FormState<T extends FormDataDefault, TIn extends FormDataDefault = T>
     initialData: TIn;
 }
 export declare function useFieldRegistry<T extends FormDataDefault>(formState: FormState<T>, validationState: ValidationState<T>): {
-    fields: FieldRegistryCache<T>;
+    fields: ComputedRef<FieldsTuple<T>>;
     getField: <K extends Paths<T>>(path: K) => ResolvedFormField<T, K>;
-    getFields: <TData extends T>() => FieldsTuple<TData>;
     registerField: <K extends Paths<T>>(field: ResolvedFormField<T, K>) => void;
     defineField: <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>) => ResolvedFormField<T, K>;
 };

package/dist/index.js

@@ -1,158 +1,157 @@
 var T = Object.defineProperty;
 var G = (e, r, t) => r in e ? T(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var D = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as L, toRaw as Z, computed as u, unref as d, reactive as E, toRefs as N, toRef as _, ref as W, watch as y, isRef as z, getCurrentScope as q, onBeforeUnmount as H, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as B, resolveComponent as Q, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as X, mergeProps as Y } from "vue";
-import { cloneDeep as x } from "lodash-es";
+var R = (e, r, t) => G(e, typeof r != "symbol" ? r + "" : r, t);
+import { toValue as L, toRaw as Z, computed as c, unref as d, reactive as F, toRefs as N, markRaw as q, toRef as _, ref as W, watch as g, isRef as z, getCurrentScope as H, onBeforeUnmount as Q, defineComponent as S, renderSlot as j, normalizeProps as M, guardReactiveProps as k, resolveComponent as X, createBlock as O, openBlock as $, withCtx as A, resolveDynamicComponent as Y, mergeProps as x } from "vue";
+import { cloneDeep as rr } from "lodash-es";
 import "zod";
-function g(e) {
+function y(e) {
   const r = L(e), t = Z(r);
-  return x(t);
+  return rr(t);
 }
-function K(e) {
+function B(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
 function w(e, r) {
-  return (Array.isArray(r) ? r : K(r)).reduce(
-    (s, a) => s == null ? void 0 : s[a],
+  return (Array.isArray(r) ? r : B(r)).reduce(
+    (a, s) => a == null ? void 0 : a[s],
     e
   );
 }
-function rr(e, r, t) {
-  const s = Array.isArray(r) ? r : K(r);
-  if (s.length === 0)
+function er(e, r, t) {
+  const a = Array.isArray(r) ? r : B(r);
+  if (a.length === 0)
     throw new Error("Path cannot be empty");
-  const a = s.at(-1), o = s.slice(0, -1).reduce(
-    (h, c) => h[c],
+  const s = a.at(-1), o = a.slice(0, -1).reduce(
+    (i, h) => i[h],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
-  o[a] = t;
+  o[s] = t;
 }
-const U = (e, r) => u({
+const K = (e, r) => c({
   get() {
     return w(d(e), d(r));
   },
   set(t) {
-    rr(d(e), d(r), t);
+    er(d(e), d(r), t);
   }
 });
-function F(e, r) {
+function E(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function er(e, r) {
+function tr(e, r) {
   if (!r)
     return e;
-  const t = `${r}.`, s = Object.fromEntries(
-    Object.entries(e.propertyErrors).filter(([a]) => a.startsWith(t)).map(
-      ([a, o]) => [a.slice(t.length), o]
+  const t = `${r}.`, a = Object.fromEntries(
+    Object.entries(e.propertyErrors).filter(([s]) => s.startsWith(t)).map(
+      ([s, o]) => [s.slice(t.length), o]
     )
   );
   return {
     general: e.general,
     // Keep general errors
-    propertyErrors: s
+    propertyErrors: a
   };
 }
-function tr(e) {
-  const r = E({
+function ar(e) {
+  const r = F({
     value: e.value,
     path: e.path,
-    initialValue: u(() => Object.freeze(g(e.initialValue))),
+    initialValue: c(() => Object.freeze(y(e.initialValue))),
     errors: e.errors,
     touched: !1
-  }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
+  }), t = c(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), a = (f) => {
     r.value = f;
-  }, a = () => {
+  }, s = () => {
     r.touched = !0;
   }, o = () => {
-  }, h = () => {
-    r.value = g(r.initialValue), r.touched = !1, r.errors = [];
-  }, c = (f) => {
+  }, i = () => {
+    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
+  }, h = (f) => {
     r.errors = f;
-  }, n = () => {
+  }, l = () => {
     r.errors = [];
-  }, l = N(r);
+  }, u = N(r);
   return {
-    data: l.value,
-    path: l.path,
-    initialValue: l.initialValue,
-    errors: l.errors,
-    touched: l.touched,
+    data: u.value,
+    path: u.path,
+    initialValue: u.initialValue,
+    errors: u.errors,
+    touched: u.touched,
     dirty: t,
-    setData: s,
-    onBlur: a,
+    setData: a,
+    onBlur: s,
     onFocus: o,
-    reset: h,
-    setErrors: c,
-    clearErrors: n
+    reset: i,
+    setErrors: h,
+    clearErrors: l
   };
 }
 function sr(e, r) {
-  const t = {}, s = (c) => {
-    const n = d(c.path);
-    t[n] = c;
-  }, a = (c) => {
-    if (!t[c]) {
-      const n = tr({
-        path: c,
-        value: U(_(e, "data"), c),
-        initialValue: u(() => w(e.initialData, c)),
-        errors: u({
+  const t = F({}), a = (i) => {
+    const h = d(i.path);
+    t[h] = q(i);
+  }, s = (i) => {
+    if (!t[i]) {
+      const h = ar({
+        path: i,
+        value: K(_(e, "data"), i),
+        initialValue: c(() => w(e.initialData, i)),
+        errors: c({
           get() {
-            return r.errors.value.propertyErrors[c] || [];
+            return r.errors.value.propertyErrors[i] || [];
           },
           set(l) {
-            r.errors.value.propertyErrors[c] = l;
+            r.errors.value.propertyErrors[i] = l;
           }
         })
       });
-      return s(n), n;
+      return a(h), h;
     }
-    return t[c];
-  };
+    return t[i];
+  }, o = (i) => s(i.path);
   return {
-    fields: t,
-    getField: a,
-    getFields: () => Object.values(t),
-    registerField: s,
-    defineField: (c) => a(c.path)
+    fields: c(() => Object.values(t)),
+    getField: s,
+    registerField: a,
+    defineField: o
   };
 }
-function ar(e) {
-  const r = u(() => e.getFields().some((s) => d(s.dirty))), t = u(() => e.getFields().some((s) => d(s.touched)));
+function or(e) {
+  const r = c(() => e.fields.value.some((a) => d(a.dirty))), t = c(() => e.fields.value.some((a) => d(a.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function or(e) {
+function nr(e) {
   return e.filter(
-    (r, t, s) => s.indexOf(r) === t
+    (r, t, a) => a.indexOf(r) === t
   );
 }
-function k(...e) {
+function U(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
-    const s = ((t == null ? void 0 : t.length) ?? 0) > 0;
+    const a = ((t == null ? void 0 : t.length) ?? 0) > 0;
     if (!r && ((t == null ? void 0 : t.length) ?? 0) > 0)
       return t;
-    if (!s)
+    if (!a)
       return r;
-    const a = (r ?? []).concat(t);
-    return or(a);
+    const s = (r ?? []).concat(t);
+    return nr(s);
   }, e[0]);
 }
-function nr(...e) {
-  return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
-    const a = e.map((o) => o[s]).filter(Boolean);
+function ir(...e) {
+  return e.map((t) => Object.keys(t)).flat().reduce((t, a) => {
+    const s = e.map((o) => o[a]).filter(Boolean);
     return {
       ...t,
-      [s]: k(...a)
+      [a]: U(...s)
     };
   }, {});
 }
-function R(...e) {
+function D(...e) {
   if (!e.length)
     return {
       general: [],
@@ -160,24 +159,24 @@ function R(...e) {
     };
   const r = e[0];
   return e.length === 1 ? r : e.slice(1).reduce(
-    (t, s) => ({
-      general: k(t.general, s.general),
-      propertyErrors: nr(t.propertyErrors ?? {}, s.propertyErrors ?? {})
+    (t, a) => ({
+      general: U(t.general, a.general),
+      propertyErrors: ir(t.propertyErrors ?? {}, a.propertyErrors ?? {})
     }),
     r
   );
 }
 function C(e) {
-  var s;
-  const r = (((s = e.general) == null ? void 0 : s.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, a]) => a == null ? void 0 : a.length).length > 0;
+  var a;
+  const r = (((a = e.general) == null ? void 0 : a.length) ?? 0) > 0, t = Object.entries(e.propertyErrors).filter(([, s]) => s == null ? void 0 : s.length).length > 0;
   return r || t;
 }
-function ir(e) {
-  const r = e.issues.filter((s) => s.path.length === 0).map((s) => s.message), t = e.issues.filter((s) => s.path.length > 0).reduce((s, a) => {
-    const o = a.path.join(".");
+function lr(e) {
+  const r = e.issues.filter((a) => a.path.length === 0).map((a) => a.message), t = e.issues.filter((a) => a.path.length > 0).reduce((a, s) => {
+    const o = s.path.join(".");
     return {
-      ...s,
-      [o]: [...s[o] ?? [], a.message]
+      ...a,
+      [o]: [...a[o] ?? [], s.message]
     };
   }, {});
   return {
@@ -192,7 +191,7 @@ const m = {
     propertyErrors: {}
   }
 };
-class lr {
+class ur {
   constructor(r) {
     this.schema = r;
   }
@@ -202,12 +201,12 @@ class lr {
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
       return m;
-    const s = ir(t.error);
+    const a = lr(t.error);
     return {
       isValid: !1,
       errors: {
-        general: s.general ?? [],
-        propertyErrors: s.propertyErrors ?? {}
+        general: a.general ?? [],
+        propertyErrors: a.propertyErrors ?? {}
       }
     };
   }
@@ -233,91 +232,91 @@ class cr {
     }
   }
 }
-class ur {
+class dr {
   constructor(r, t) {
-    D(this, "schemaValidator");
-    D(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new lr(this.schema), this.functionValidator = new cr(this.validateFn);
+    R(this, "schemaValidator");
+    R(this, "functionValidator");
+    this.schema = r, this.validateFn = t, this.schemaValidator = new ur(this.schema), this.functionValidator = new cr(this.validateFn);
   }
   async validate(r) {
-    const [t, s] = await Promise.all([
+    const [t, a] = await Promise.all([
       this.schemaValidator.validate(r),
       this.functionValidator.validate(r)
     ]);
     return {
-      isValid: t.isValid && s.isValid,
-      errors: R(t.errors, s.errors)
+      isValid: t.isValid && a.isValid,
+      errors: D(t.errors, a.errors)
     };
   }
 }
 function b(e) {
-  return u(() => new ur(
+  return c(() => new dr(
     d(e.schema),
     d(e.validateFn)
   ));
 }
-function dr(e, r) {
-  const t = E({
+function fr(e, r) {
+  const t = F({
     validators: W([b(r)]),
     isValidated: !1,
     errors: d(r.errors) ?? m.errors
   });
-  y(() => d(r.errors), async () => {
-    const n = await a();
-    o(n.errors);
-  }, { immediate: !0 }), y(
+  g(() => d(r.errors), async () => {
+    const l = await s();
+    o(l.errors);
+  }, { immediate: !0 }), g(
     [() => t.validators],
-    async (n) => {
+    async (l) => {
       if (t.isValidated)
-        if (n) {
-          const l = await a();
-          t.errors = l.errors;
+        if (l) {
+          const u = await s();
+          t.errors = u.errors;
         } else
           t.errors = m.errors;
     },
     { immediate: !0 }
-  ), y(() => e.data, () => {
-    t.isValidated && h();
+  ), g(() => e.data, () => {
+    t.isValidated && i();
   });
-  const s = (n) => {
-    const l = z(n) ? n : b(n);
-    return t.validators.push(l), q() && H(() => {
+  const a = (l) => {
+    const u = z(l) ? l : b(l);
+    return t.validators.push(u), H() && Q(() => {
       t.validators = t.validators.filter(
-        (f) => f !== l
+        (f) => f !== u
       );
-    }), l;
+    }), u;
   };
-  async function a() {
-    const n = await Promise.all(
+  async function s() {
+    const l = await Promise.all(
       t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
-    ), l = n.every((v) => v.isValid);
+    ), u = l.every((v) => v.isValid);
     let { errors: f } = m;
-    if (!l) {
-      const v = n.map((P) => P.errors);
-      f = R(...v);
+    if (!u) {
+      const v = l.map((P) => P.errors);
+      f = D(...v);
     }
     return {
       errors: f,
-      isValid: l
+      isValid: u
     };
   }
-  const o = (n) => {
-    t.errors = R(d(r.errors) ?? m.errors, n);
-  }, h = async () => {
-    const n = await a();
-    return o(n.errors), t.isValidated = !0, {
-      isValid: !C(n.errors),
+  const o = (l) => {
+    t.errors = D(d(r.errors) ?? m.errors, l);
+  }, i = async () => {
+    const l = await s();
+    return o(l.errors), t.isValidated = !0, {
+      isValid: !C(l.errors),
       errors: t.errors
     };
-  }, c = u(() => !C(t.errors));
+  }, h = c(() => !C(t.errors));
   return {
     ...N(t),
-    validateForm: h,
-    defineValidator: s,
-    isValid: c
+    validateForm: i,
+    defineValidator: a,
+    isValid: h
   };
 }
-class fr {
+class pr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
@@ -325,14 +324,14 @@ class fr {
     const t = w(r, this.path);
     if (!this.validator)
       return m;
-    const s = await this.validator.validate(t);
+    const a = await this.validator.validate(t);
     return {
-      isValid: s.isValid,
+      isValid: a.isValid,
       errors: {
-        general: s.errors.general || [],
-        propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
-          Object.entries(s.errors.propertyErrors).map(([a, o]) => [
-            F(this.path, a),
+        general: a.errors.general || [],
+        propertyErrors: a.errors.propertyErrors ? Object.fromEntries(
+          Object.entries(a.errors.propertyErrors).map(([s, o]) => [
+            E(this.path, s),
             o
           ])
         ) : {}
@@ -340,50 +339,50 @@ class fr {
     };
   }
 }
-function pr(e, r, t) {
-  const s = U(e.data, r), a = u(() => w(e.initialData.value, r)), o = (i) => ({
-    ...i,
-    path: u(() => d(i.path).replace(r + ".", "")),
+function hr(e, r, t) {
+  const a = K(e.data, r), s = c(() => w(e.initialData.value, r)), o = (n) => ({
+    ...n,
+    path: c(() => d(n.path).replace(r + ".", "")),
     setData: (p) => {
-      i.setData(p);
+      n.setData(p);
     }
-  }), h = (i) => {
-    const p = F(r, i), V = e.getField(p);
+  }), i = (n) => {
+    const p = E(r, n), V = e.getField(p);
     return V ? o(V) : {};
-  }, c = (i) => {
-    const p = F(r, i.path), V = e.defineField({
-      ...i,
+  }, h = (n) => {
+    const p = E(r, n.path), V = e.defineField({
+      ...n,
       path: p
     });
     return o(V);
-  }, n = () => e.getFields().filter((i) => {
-    const p = i.path.value;
+  }, l = c(() => e.fields.value.filter((n) => {
+    const p = n.path.value;
     return p.startsWith(r + ".") || p === r;
-  }).map((i) => o(i)), l = () => e.getFields().filter((i) => {
-    const p = i.path.value;
+  }).map((n) => o(n))), u = () => e.fields.value.filter((n) => {
+    const p = n.path.value;
     return p.startsWith(r + ".") || p === r;
-  }), f = u(() => l().some((i) => i.dirty.value)), v = u(() => l().some((i) => i.touched.value)), P = u(() => e.isValid.value), I = u(() => e.isValidated.value), J = u(() => er(d(e.errors), r));
+  }), f = c(() => u().some((n) => n.dirty.value)), v = c(() => u().some((n) => n.touched.value)), P = c(() => e.isValid.value), I = c(() => e.isValidated.value), J = c(() => tr(d(e.errors), r));
   return {
-    data: s,
-    initialData: a,
-    defineField: c,
-    getField: h,
-    getFields: n,
+    data: a,
+    fields: l,
+    initialData: s,
+    defineField: h,
+    getField: i,
     isDirty: f,
     isTouched: v,
     isValid: P,
     isValidated: I,
     errors: J,
-    defineValidator: (i) => {
-      const p = z(i) ? i : b(i), V = u(
-        () => new fr(r, d(p))
+    defineValidator: (n) => {
+      const p = z(n) ? n : b(n), V = c(
+        () => new pr(r, d(p))
       );
       return e.defineValidator(V), p;
     },
-    reset: () => l().forEach((i) => i.reset()),
+    reset: () => u().forEach((n) => n.reset()),
     validateForm: () => e.validateForm(),
-    getSubForm: (i, p) => {
-      const V = F(r, i);
+    getSubForm: (n, p) => {
+      const V = E(r, n);
       return e.getSubForm(
         V,
         p
@@ -391,34 +390,34 @@ function pr(e, r, t) {
     }
   };
 }
-function wr(e) {
-  const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = E({
+function Pr(e) {
+  const r = c(() => Object.freeze(y(e.initialData))), t = W(y(r)), a = F({
     initialData: r,
     data: t
   });
-  y(r, (f) => {
-    s.data = g(f);
+  g(r, (f) => {
+    a.data = y(f);
   });
-  const a = dr(s, e), o = sr(s, a), h = ar(o), c = () => {
-    t.value = g(r), o.getFields().forEach(
+  const s = fr(a, e), o = sr(a, s), i = or(o), h = () => {
+    t.value = y(r), o.fields.value.forEach(
       (f) => f.reset()
     );
   };
-  function n(f, v) {
-    return pr(l, f);
+  function l(f, v) {
+    return hr(u, f);
   }
-  const l = {
+  const u = {
     ...o,
-    ...a,
-    ...h,
-    reset: c,
-    getSubForm: n,
-    initialData: _(s, "initialData"),
-    data: _(s, "data")
+    ...s,
+    ...i,
+    reset: h,
+    getSubForm: l,
+    initialData: _(a, "initialData"),
+    data: _(a, "data")
   };
-  return l;
+  return u;
 }
-const Pr = /* @__PURE__ */ S({
+const Rr = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -430,10 +429,10 @@ const Pr = /* @__PURE__ */ S({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    }), s = E(t);
-    return (a, o) => j(a.$slots, "default", M(B(s)));
+    });
+    return (a, s) => j(a.$slots, "default", M(k(d(t))));
   }
-}), Dr = /* @__PURE__ */ S({
+}), _r = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "FormFieldWrapper",
   props: {
@@ -444,17 +443,17 @@ const Pr = /* @__PURE__ */ S({
   },
   setup(e) {
     return (r, t) => {
-      const s = Q("Field");
-      return $(), O(s, {
+      const a = X("Field");
+      return $(), O(a, {
         form: r.form,
         path: r.path
       }, {
-        default: A(({ errors: a, data: o, setData: h }) => [
-          ($(), O(X(r.component), Y({ ...r.componentProps, ...r.$attrs }, {
+        default: A(({ errors: s, data: o, setData: i }) => [
+          ($(), O(Y(r.component), x({ ...r.componentProps, ...r.$attrs }, {
             "model-value": o,
-            errors: a,
+            errors: s,
             name: r.path,
-            "onUpdate:modelValue": h
+            "onUpdate:modelValue": i
           }), {
             default: A(() => [
               j(r.$slots, "default")
@@ -466,20 +465,20 @@ const Pr = /* @__PURE__ */ S({
       }, 8, ["form", "path"]);
     };
   }
-}), _r = /* @__PURE__ */ S({
+}), Dr = /* @__PURE__ */ S({
   __name: "FormPart",
   props: {
     form: {},
     path: {}
   },
   setup(e) {
-    const r = e, t = u(() => r.form.getSubForm(r.path));
-    return (s, a) => j(s.$slots, "default", M(B({ subform: t.value })));
+    const r = e, t = c(() => r.form.getSubForm(r.path));
+    return (a, s) => j(a.$slots, "default", M(k({ subform: t.value })));
   }
 });
 export {
-  Pr as Field,
-  Dr as FormFieldWrapper,
-  _r as FormPart,
-  wr as useForm
+  Rr as Field,
+  _r as FormFieldWrapper,
+  Dr as FormPart,
+  Pr as useForm
 };

package/dist/types/form.d.ts

@@ -26,9 +26,9 @@ export type AnyField<T> = FormField<PickProps<T, Paths<T>>, Paths<T>>;
 export interface Form<T extends FormDataDefault> {
     data: Ref<T>;
     initialData: Readonly<Ref<T>>;
+    fields: Ref<FieldsTuple<T>>;
     defineField: <P extends Paths<T>>(options: DefineFieldOptions<PickProps<T, P>, P>) => FormField<PickProps<T, P>, P>;
     getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>;
-    getFields: <TData extends T>() => FieldsTuple<TData>;
     isDirty: Ref<boolean>;
     isTouched: Ref<boolean>;
     isValid: Ref<boolean>;

package/package.json

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

package/src/components/Field.vue

@@ -1,12 +1,11 @@
 <template>
-  <slot v-bind="slotData" />
+  <slot v-bind="field" />
 </template>
 
 <script
   setup lang="ts"
   generic="TData extends object, TPath extends Paths<TData>"
 >
-import { reactive } from 'vue'
 import type { Form } from '../types/form.ts'
 import type { Paths, PickProps } from '../types/util.ts'
 import type { UseFieldOptions } from '../composables/useField.ts'
@@ -20,6 +19,4 @@ const props = defineProps<FieldProps<TData, TPath>>()
 const field = props.form.defineField({
   path: props.path,
 })
-
-const slotData = reactive(field)
 </script>

package/src/composables/useField.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, toRefs, watch, type MaybeRef, type MaybeRefOrGetter, type WritableComputedRef } from 'vue'
+import { computed, reactive, toRefs, type MaybeRef, type MaybeRefOrGetter, type WritableComputedRef } from 'vue'
 import type { FormField } from '../types/form'
 import type { ValidationErrorMessage, ValidationErrors } from '../types/validation'
 import { cloneRefValue } from '../utils/general'

package/src/composables/useFieldRegistry.ts

@@ -1,4 +1,4 @@
-import { computed, toRef, unref } from 'vue'
+import { computed, markRaw, reactive, toRef, unref, watch } from 'vue'
 import type { FieldsTuple, FormDataDefault, FormField } from '../types/form'
 import type { Paths, PickProps } from '../types/util'
 import { getLens, getNestedValue } from '../utils/path'
@@ -21,11 +21,11 @@ export function useFieldRegistry<T extends FormDataDefault>(
   formState: FormState<T>,
   validationState: ValidationState<T>,
 ) {
-  const fields = {} as FieldRegistryCache<T>
+  const fields = reactive({}) as FieldRegistryCache<T>
 
   const registerField = <K extends Paths<T>>(field: ResolvedFormField<T, K>) => {
     const path = unref(field.path) as Paths<T>
-    fields[path] = field
+    fields[path] = markRaw(field)
   }
 
   const getField = <K extends Paths<T>>(path: K): ResolvedFormField<T, K> => {
@@ -52,10 +52,6 @@ export function useFieldRegistry<T extends FormDataDefault>(
     return fields[path] as ResolvedFormField<T, K>
   }
 
-  const getFields = <TData extends T>() => {
-    return Object.values(fields) as FieldsTuple<TData>
-  }
-
   const defineField = <K extends Paths<T>>(options: DefineFieldOptions<PickProps<T, K>, K>): ResolvedFormField<T, K> => {
     const field = getField(options.path)
 
@@ -66,9 +62,8 @@ export function useFieldRegistry<T extends FormDataDefault>(
   }
 
   return {
-    fields,
+    fields: computed(() => Object.values(fields) as FieldsTuple<T>),
     getField,
-    getFields,
     registerField,
     defineField,
   }

package/src/composables/useForm.ts

@@ -31,12 +31,12 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   })
 
   const validationState = useValidation(state, options)
-  const fields = useFieldRegistry(state, validationState)
-  const formState = useFormState(fields)
+  const fieldRegistry = useFieldRegistry(state, validationState)
+  const formState = useFormState(fieldRegistry)
 
   const reset = () => {
     data.value = cloneRefValue(initialData)
-    fields.getFields().forEach(
+    fieldRegistry.fields.value.forEach(
       (field: AnyField<T>) => field.reset(),
     )
   }
@@ -49,7 +49,7 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
   }
 
   const formInterface: Form<T> = {
-    ...fields,
+    ...fieldRegistry,
     ...validationState,
     ...formState,
     reset,

package/src/composables/useFormState.ts

@@ -6,11 +6,11 @@ export function useFormState<T extends FormDataDefault>(
   formFieldRegistry: FieldRegistry<T>,
 ) {
   const isDirty = computed(() => {
-    return formFieldRegistry.getFields().some((field: AnyField<T>) => unref(field.dirty))
+    return formFieldRegistry.fields.value.some((field: AnyField<T>) => unref(field.dirty))
   })
 
   const isTouched = computed(() => {
-    return formFieldRegistry.getFields().some((field: AnyField<T>) => unref(field.touched))
+    return formFieldRegistry.fields.value.some((field: AnyField<T>) => unref(field.touched))
   })
 
   return {

package/src/composables/useSubform.ts

@@ -99,18 +99,18 @@ export function createSubformInterface<
     return adaptMainFormField<P>(mainField)
   }
 
-  const getFields = <P extends SP>() => {
-    return (mainForm.getFields() as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
+  const fields = computed(<P extends SP>() => {
+    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
       .filter((field) => {
         const fieldPath = field.path.value
         return fieldPath.startsWith(path + '.') || fieldPath === path
       })
       .map(field => adaptMainFormField(field)) as FieldsTuple<ST, P>
-  }
+  })
 
   // Helper function to get all fields without type parameter
   const getAllSubformFields = () => {
-    return (mainForm.getFields() as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
+    return (mainForm.fields.value as FormField<PickProps<T, ScopedMainPaths>, ScopedMainPaths>[])
       .filter((field) => {
         const fieldPath = field.path.value
         return fieldPath.startsWith(path + '.') || fieldPath === path
@@ -156,10 +156,10 @@ export function createSubformInterface<
 
   return {
     data: data,
+    fields,
     initialData,
     defineField,
     getField,
-    getFields,
     isDirty,
     isTouched,
     isValid,

package/src/types/form.ts

@@ -37,10 +37,11 @@ export interface Form<T extends FormDataDefault> {
   data: Ref<T>
   initialData: Readonly<Ref<T>>
 
+  fields: Ref<FieldsTuple<T>>
+
   // Field operations
   defineField: <P extends Paths<T>>(options: DefineFieldOptions<PickProps<T, P>, P>) => FormField<PickProps<T, P>, P>
   getField: <P extends Paths<T>>(path: P) => FormField<PickProps<T, P>, P>
-  getFields: <TData extends T>() => FieldsTuple<TData>
 
   // State properties
   isDirty: Ref<boolean>

package/src/utils/path.ts

@@ -1,4 +1,4 @@
-import { computed, unref, type MaybeRef } from 'vue'
+import { computed, isRef, reactive, shallowRef, triggerRef, unref, watch, type MaybeRef } from 'vue'
 import type { Paths, PickProps, SplitPath } from '../types/util'
 import type { ErrorBag, ValidationErrors } from '../types/validation'
 

package/tests/integration.test.ts

@@ -187,7 +187,7 @@ describe('Integration Tests', () => {
     form.defineField({ path: 'email' })
 
     // Check registry
-    expect(form.getFields().length).toBe(2)
+    expect(form.fields.value.length).toBe(2)
 
     // Get specific field
     const retrievedNameField = form.getField('name')

package/tests/nestedPath.test.ts

@@ -564,7 +564,7 @@ describe('Nested Path Handling', () => {
       }
 
       expect(fields.length).toBeGreaterThan(0)
-      expect(form.getFields().length).toBeGreaterThan(0)
+      expect(form.fields.value.length).toBeGreaterThan(0)
     })
   })
 

package/tests/useField.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
-import { ref, nextTick } from 'vue'
+import { watch, ref, nextTick, effectScope } from 'vue'
 import { useField } from '../src/composables/useField'
+import { cloneDeep } from 'lodash-es'
 
 describe('useField', () => {
   it('should initialize field with path', () => {
@@ -144,4 +145,25 @@ describe('useField', () => {
     field.setData(['a', 'b', 'c', 'd'])
     expect(field.dirty.value).toBe(true)
   })
+
+  it('should trigger reactivity', { timeout: 500 }, () => new Promise((resolve) => {
+    effectScope().run(() => {
+      const initialValue = ref(['a', 'b', 'c'])
+      const field = useField({
+        path: 'array',
+        value: initialValue,
+        initialValue: cloneDeep(initialValue.value),
+      })
+
+      expect(field.data.value).toEqual(initialValue.value)
+      expect(field.dirty.value).toBe(false)
+
+      watch(initialValue, () => {
+        resolve(true)
+      }, { once: true, deep: true })
+
+      field.setData(['a', 'b', 'c', 'd'])
+      expect(field.dirty.value).toBe(true)
+    })
+  }))
 })

package/tests/useForm.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, effectScope, watch, unref, reactive, toRef } from 'vue'
 import { useForm } from '../src/composables/useForm'
 import { z } from 'zod'
 
@@ -87,7 +87,7 @@ describe('useForm', () => {
 
     expect(nameField.path.value).toBe('name')
     expect(emailField.path.value).toBe('email')
-    expect(form.getFields().length).toBe(2)
+    expect(form.fields.value.length).toBe(2)
   })
 
   it('should get registered fields', () => {

package/PLAN.md

@@ -1,211 +0,0 @@
-# DEPRECATED
-
-# Vue Forms Library - MVP Plan
-
-## Overview
-
-A type-safe Vue 3 form library with immutable state management, validation, and subform support. The library uses a direct form instance pattern (no provide/inject) to maintain full type safety throughout the component tree.
-
-## Core Architecture
-
-### Direct Form Instance Pattern
-- Forms are created with `createForm<T>()` and passed directly to components
-- Full TypeScript type safety maintained throughout the component tree
-- No context loss from provide/inject patterns
-
-### Subform Extraction Pattern
-```typescript
-// Reusable components work with subforms
-const addressSubform = form.getSubform('address')
-// addressSubform has type FormInstance<Address>
-
-<AddressForm :form="addressSubform" />
-```
-
-This allows components to be reusable across different parent forms while maintaining type safety.
-
-## API Design
-
-### Form Creation
-```typescript
-const form = createForm<UserData>({
-  initialData: { name: '', email: '', address: { street: '', city: '' } },
-  validationSchema: userSchema,
-  strategy: 'onTouch'
-})
-```
-
-### Form Instance Interface
-```typescript
-interface FormInstance<T> {
-  // Data access
-  getValue<K extends keyof T>(path: K): T[K]
-  setValue<K extends keyof T>(path: K, value: T[K]): void
-  
-  // Field management
-  getField<K extends keyof T>(path: K): FieldInstance<T[K]>
-  
-  // Subform extraction
-  getSubform<K extends keyof T>(path: K): FormInstance<T[K]>
-  
-  // State queries
-  isDirty(): boolean
-  isTouched(): boolean
-  isValid(): boolean
-  
-  // Operations
-  validate(): Promise<ValidationResult>
-  reset(): void
-  submit(): Promise<void>
-  
-  // Error access
-  getErrors(path?: keyof T): ErrorMessage[]
-  hasErrors(path?: keyof T): boolean
-}
-```
-
-### Field Instance Interface
-```typescript
-interface FieldInstance<T> {
-  // Reactive value with getter/setter
-  value: Ref<T>
-  
-  // State
-  touched: Ref<boolean>
-  dirty: Ref<boolean>
-  errors: Ref<ErrorMessage[]>
-  
-  // Handlers
-  onBlur(): void
-  onFocus(): void
-  
-  // Field-specific validation
-  validate(): Promise<ValidationResult>
-}
-```
-
-## Directory Structure
-
-```
-src/
-├── types/
-│   ├── form.ts              # Form instance types
-│   ├── field.ts             # Field instance types
-│   ├── validation.ts        # Validation types
-│   └── index.ts
-├── core/
-│   ├── form-instance.ts     # Form instance implementation
-│   ├── field-instance.ts    # Field instance implementation
-│   ├── subform-instance.ts  # Subform implementation
-│   └── validation-engine.ts # Validation logic
-├── factories/
-│   └── create-form.ts       # Main form factory
-├── utils/
-│   ├── immutable.ts         # Immutable helpers
-│   ├── path.ts              # Object path utilities
-│   └── type-helpers.ts      # TypeScript utility types
-└── index.ts                 # Main exports
-```
-
-## Core Features
-
-### 1. Immutable State Management
-- Store initial data as immutable
-- Working copy is immutable from outside (readonly)
-- Computed getter/setter on working copy
-- Full clone on creation
-
-### 2. Form State Tracking
-- **Touched**: Field has been interacted with at least once
-- **Dirty**: Computed property checking if value ≠ initial state
-- State propagation from subforms to parent forms
-
-### 3. Validation System
-- **Strategies**: `onTouch`, `onFormOpen`, `none`, `preSubmit`
-- **Zod Integration**: Primary validation with Zod schemas
-- **Backend Validation**: API errors merged with Zod errors
-- **Error Bag Structure**:
-  ```typescript
-  {
-    general: ErrorMessage[],
-    propertyErrors: Record<string, ErrorMessage[]>
-  }
-  ```
-
-### 4. Subform Support
-- Extract subforms with `getSubform(path)`
-- Type-safe subform instances
-- Automatic value propagation from subforms to parent
-- Reusable components across different parent forms
-
-### 5. Array Functionality (Future)
-- `pushValue()`, `removeValue()`, `getKeys()`
-- Similar to vee-validate's field array API
-
-## MVP Implementation Order
-
-### Phase 1: Core Infrastructure
-1. **Project Setup**
-   - Package.json with proper exports
-   - TypeScript configuration
-   - Vite build setup
-   - Basic documentation structure
-
-2. **Type System**
-   - Core interfaces and types
-   - Validation types
-   - Error handling types
-
-3. **Basic Form Instance**
-   - Form creation factory
-   - Basic field management
-   - Immutable state handling
-
-### Phase 2: Essential Features
-1. **Field Management**
-   - Field instance implementation
-   - Touch and dirty state tracking
-   - Basic event handlers
-
-2. **Validation Engine**
-   - Zod integration
-   - Error collection and formatting
-   - Basic validation strategies
-
-3. **Subform System**
-   - Subform extraction
-   - Type-safe subform instances
-   - Value propagation
-
-### Phase 3: Polish & Testing
-1. **Edge Cases**
-   - Error handling
-   - Reset functionality
-   - Validation edge cases
-
-2. **Documentation**
-   - API documentation
-   - Usage examples
-   - Migration guides
-
-3. **Testing**
-   - Unit tests
-   - Integration tests
-   - Type safety tests
-
-## Key Benefits
-
-- **Type Safety**: Full TypeScript support with no type loss
-- **Immutable State**: Predictable state management
-- **Reusable Components**: Subforms enable component reuse
-- **Validation Flexibility**: Multiple validation strategies
-- **Performance**: Reactive updates only where needed
-- **Developer Experience**: Excellent IDE support and debugging
-
-## Notes
-
-- No provide/inject pattern to avoid type information loss
-- Direct form instance passing maintains type safety
-- Subform extraction enables component reusability
-- Validation strategies can be overridden per field
-- Backend validation seamlessly integrates with Zod