@teamnovu/kit-vue-forms 0.0.16 → 0.0.18

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

@@ -0,0 +1,25 @@
+import { Component, VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { Paths } from '../types/util.ts';
+import { Form } from '../types/form.ts';
+export interface FormFieldWrapperProps<TData extends object, TPath extends string, TComponent> {
+    component: TComponent;
+    componentProps: Omit<ComponentProps<TComponent>, 'modelValue' | 'update:modelValue' | 'errors'>;
+    form: Form<TData>;
+    path: TPath;
+}
+declare const _default: <TData extends object, TPath extends Paths<TData>, TComponent extends Component>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & FormFieldWrapperProps<TData, TPath, TComponent> & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {}): any;
+    };
+    emit: {};
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,24 @@
+import { Form } from '../types/form.ts';
+import { EntityPaths, PickEntity } from '../types/util.ts';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+export interface FormPartProps<TData extends object, TPath> {
+    form: Form<TData>;
+    path: TPath;
+}
+declare const _default: <TData extends object, TPath extends EntityPaths<TData>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, never> & FormPartProps<TData, TPath> & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {
+            subform: Form< PickEntity<TData, TPath>>;
+        }): any;
+    };
+    emit: {};
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.d.ts

@@ -5,5 +5,10 @@ export type { ValidationStrategy, ValidationErrorMessage as ErrorMessage, Valida
 export type { DeepPartial } from './utils/type-helpers';
 export type { Form, FormField } from './types/form';
 export type { SplitPath, Paths, PickProps, ObjectOf, EntityPaths } from './types/util';
+export type { FormComponentProps, ExcludedFieldProps } from './types/FormComponentProps';
 export { default as Field } from './components/Field.vue';
 export type { FieldProps } from './components/Field.vue';
+export { default as FormFieldWrapper } from './components/FormFieldWrapper.vue';
+export type { FormFieldWrapperProps } from './components/FormFieldWrapper.vue';
+export { default as FormPart } from './components/FormPart.vue';
+export type { FormPartProps } from './components/FormPart.vue';

package/dist/{index.mjs → index.js}

@@ -1,45 +1,44 @@
-var x = Object.defineProperty;
-var K = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
-var D = (e, r, t) => K(e, typeof r != "symbol" ? r + "" : r, t);
-import { toValue as W, toRaw as I, computed as u, unref as d, reactive as m, toRefs as O, toRef as S, ref as A, watch as E, isRef as _, getCurrentScope as J, onBeforeUnmount as T, defineComponent as B, renderSlot as G, normalizeProps as L, guardReactiveProps as U } from "vue";
+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 _ = (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 D, 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 "zod";
-import "@vueuse/core";
-function y(e) {
-  const r = W(e), t = I(r);
+function g(e) {
+  const r = L(e), t = Z(r);
   return structuredClone(t);
 }
-function N(e) {
+function K(e) {
   return e === "" ? [] : e.split(/\s*\.\s*/).filter(Boolean);
 }
 function w(e, r) {
-  return (Array.isArray(r) ? r : N(r)).reduce(
+  return (Array.isArray(r) ? r : K(r)).reduce(
     (s, a) => s == null ? void 0 : s[a],
     e
   );
 }
-function Z(e, r, t) {
-  const s = Array.isArray(r) ? r : N(r);
+function x(e, r, t) {
+  const s = Array.isArray(r) ? r : K(r);
   if (s.length === 0)
     throw new Error("Path cannot be empty");
   const a = s.at(-1), o = s.slice(0, -1).reduce(
-    (v, c) => v[c],
+    (h, c) => h[c],
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     e
   );
   o[a] = t;
 }
-const z = (e, r) => u({
+const U = (e, r) => u({
   get() {
     return w(d(e), d(r));
   },
   set(t) {
-    Z(d(e), d(r), t);
+    x(d(e), d(r), t);
   }
 });
 function F(e, r) {
   return !e && !r ? "" : !e && r ? r : !r && e ? e : `${e}.${r}`;
 }
-function k(e, r) {
+function rr(e, r) {
   if (!r)
     return e;
   const t = `${r}.`, s = Object.fromEntries(
@@ -53,11 +52,11 @@ function k(e, r) {
     propertyErrors: s
   };
 }
-function q(e) {
-  const r = m({
+function er(e) {
+  const r = E({
     value: e.value,
     path: e.path,
-    initialValue: u(() => Object.freeze(y(e.initialValue))),
+    initialValue: u(() => Object.freeze(g(e.initialValue))),
     errors: e.errors,
     touched: !1
   }), t = u(() => JSON.stringify(r.value) !== JSON.stringify(r.initialValue)), s = (f) => {
@@ -65,13 +64,13 @@ function q(e) {
   }, a = () => {
     r.touched = !0;
   }, o = () => {
-  }, v = () => {
-    r.value = y(r.initialValue), r.touched = !1, r.errors = [];
+  }, h = () => {
+    r.value = g(r.initialValue), r.touched = !1, r.errors = [];
   }, c = (f) => {
     r.errors = f;
-  }, i = () => {
+  }, n = () => {
     r.errors = [];
-  }, l = O(r);
+  }, l = N(r);
   return {
     data: l.value,
     path: l.path,
@@ -82,20 +81,20 @@ function q(e) {
     setData: s,
     onBlur: a,
     onFocus: o,
-    reset: v,
+    reset: h,
     setErrors: c,
-    clearErrors: i
+    clearErrors: n
   };
 }
-function H(e, r) {
+function tr(e, r) {
   const t = {}, s = (c) => {
-    const i = d(c.path);
-    t[i] = c;
+    const n = d(c.path);
+    t[n] = c;
   }, a = (c) => {
     if (!t[c]) {
-      const i = q({
+      const n = er({
         path: c,
-        value: z(S(e, "data"), c),
+        value: U(D(e, "data"), c),
         initialValue: u(() => w(e.initialData, c)),
         errors: u({
           get() {
@@ -106,7 +105,7 @@ function H(e, r) {
           }
         })
       });
-      return s(i), i;
+      return s(n), n;
     }
     return t[c];
   };
@@ -118,19 +117,19 @@ function H(e, r) {
     defineField: (c) => a(c.path)
   };
 }
-function Q(e) {
+function sr(e) {
   const r = u(() => e.getFields().some((s) => d(s.dirty))), t = u(() => e.getFields().some((s) => d(s.touched)));
   return {
     isDirty: r,
     isTouched: t
   };
 }
-function X(e) {
+function ar(e) {
   return e.filter(
     (r, t, s) => s.indexOf(r) === t
   );
 }
-function C(...e) {
+function k(...e) {
   return e.slice(1).reduce((r, t) => {
     if (!r && !t)
       return;
@@ -140,19 +139,19 @@ function C(...e) {
     if (!s)
       return r;
     const a = (r ?? []).concat(t);
-    return X(a);
+    return ar(a);
   }, e[0]);
 }
-function Y(...e) {
+function or(...e) {
   return e.map((t) => Object.keys(t)).flat().reduce((t, s) => {
     const a = e.map((o) => o[s]).filter(Boolean);
     return {
       ...t,
-      [s]: C(...a)
+      [s]: k(...a)
     };
   }, {});
 }
-function P(...e) {
+function R(...e) {
   if (!e.length)
     return {
       general: [],
@@ -161,18 +160,18 @@ function P(...e) {
   const r = e[0];
   return e.length === 1 ? r : e.slice(1).reduce(
     (t, s) => ({
-      general: C(t.general, s.general),
-      propertyErrors: Y(t.propertyErrors ?? {}, s.propertyErrors ?? {})
+      general: k(t.general, s.general),
+      propertyErrors: or(t.propertyErrors ?? {}, s.propertyErrors ?? {})
     }),
     r
   );
 }
-function j(e) {
+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;
   return r || t;
 }
-function rr(e) {
+function nr(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(".");
     return {
@@ -185,24 +184,24 @@ function rr(e) {
     propertyErrors: t
   };
 }
-const V = {
+const m = {
   isValid: !0,
   errors: {
     general: [],
     propertyErrors: {}
   }
 };
-class er {
+class ir {
   constructor(r) {
     this.schema = r;
   }
   async validate(r) {
     if (!this.schema)
-      return V;
+      return m;
     const t = await this.schema.safeParseAsync(r);
     if (t.success)
-      return V;
-    const s = rr(t.error);
+      return m;
+    const s = nr(t.error);
     return {
       isValid: !1,
       errors: {
@@ -212,16 +211,16 @@ class er {
     };
   }
 }
-class tr {
+class lr {
   constructor(r) {
     this.validateFn = r;
   }
   async validate(r) {
     if (!this.validateFn)
-      return V;
+      return m;
     try {
       const t = await this.validateFn(r);
-      return t.isValid ? V : t;
+      return t.isValid ? m : t;
     } catch (t) {
       return {
         isValid: !1,
@@ -233,11 +232,11 @@ class tr {
     }
   }
 }
-class sr {
+class cr {
   constructor(r, t) {
-    D(this, "schemaValidator");
-    D(this, "functionValidator");
-    this.schema = r, this.validateFn = t, this.schemaValidator = new er(this.schema), this.functionValidator = new tr(this.validateFn);
+    _(this, "schemaValidator");
+    _(this, "functionValidator");
+    this.schema = r, this.validateFn = t, this.schemaValidator = new ir(this.schema), this.functionValidator = new lr(this.validateFn);
   }
   async validate(r) {
     const [t, s] = await Promise.all([
@@ -246,85 +245,85 @@ class sr {
     ]);
     return {
       isValid: t.isValid && s.isValid,
-      errors: P(t.errors, s.errors)
+      errors: R(t.errors, s.errors)
     };
   }
 }
 function b(e) {
-  return u(() => new sr(
+  return u(() => new cr(
     d(e.schema),
     d(e.validateFn)
   ));
 }
-function ar(e, r) {
-  const t = m({
-    validators: A([b(r)]),
+function ur(e, r) {
+  const t = E({
+    validators: W([b(r)]),
     isValidated: !1,
-    errors: d(r.errors) ?? V.errors
+    errors: d(r.errors) ?? m.errors
   });
-  E(() => d(r.errors), async () => {
-    const i = await a();
-    o(i.errors);
-  }, { immediate: !0 }), E(
+  y(() => d(r.errors), async () => {
+    const n = await a();
+    o(n.errors);
+  }, { immediate: !0 }), y(
     [() => t.validators],
-    async (i) => {
+    async (n) => {
       if (t.isValidated)
-        if (i) {
+        if (n) {
           const l = await a();
           t.errors = l.errors;
         } else
-          t.errors = V.errors;
+          t.errors = m.errors;
     },
     { immediate: !0 }
-  ), E(() => e.data, () => {
-    t.isValidated && v();
+  ), y(() => e.data, () => {
+    t.isValidated && h();
   });
-  const s = (i) => {
-    const l = _(i) ? i : b(i);
-    return t.validators.push(l), J() && T(() => {
+  const s = (n) => {
+    const l = z(n) ? n : b(n);
+    return t.validators.push(l), q() && H(() => {
       t.validators = t.validators.filter(
         (f) => f !== l
       );
     }), l;
   };
   async function a() {
-    const i = await Promise.all(
-      t.validators.filter((p) => d(p) !== void 0).map((p) => d(p).validate(e.data))
-    ), l = i.every((p) => p.isValid);
-    let { errors: f } = V;
+    const n = await Promise.all(
+      t.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(e.data))
+    ), l = n.every((v) => v.isValid);
+    let { errors: f } = m;
     if (!l) {
-      const p = i.map((R) => R.errors);
-      f = P(...p);
+      const v = n.map((P) => P.errors);
+      f = R(...v);
     }
     return {
       errors: f,
       isValid: l
     };
   }
-  const o = (i) => {
-    t.errors = P(d(r.errors) ?? V.errors, i);
-  }, v = async () => {
-    const i = await a();
-    return o(i.errors), t.isValidated = !0, {
-      isValid: !j(i.errors),
+  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),
       errors: t.errors
     };
-  }, c = u(() => !j(t.errors));
+  }, c = u(() => !C(t.errors));
   return {
-    ...O(t),
-    validateForm: v,
+    ...N(t),
+    validateForm: h,
     defineValidator: s,
     isValid: c
   };
 }
-class ir {
+class dr {
   constructor(r, t) {
     this.path = r, this.validator = t;
   }
   async validate(r) {
     const t = w(r, this.path);
     if (!this.validator)
-      return V;
+      return m;
     const s = await this.validator.validate(t);
     return {
       isValid: s.isValid,
@@ -340,85 +339,85 @@ class ir {
     };
   }
 }
-function nr(e, r, t) {
-  const s = z(e.data, r), a = u(() => w(e.initialData.value, r)), o = (n) => ({
-    ...n,
-    path: u(() => d(n.path).replace(r + ".", "")),
-    setData: (h) => {
-      n.setData(h);
+function fr(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 + ".", "")),
+    setData: (p) => {
+      i.setData(p);
     }
-  }), v = (n) => {
-    const h = F(r, n), g = e.getField(h);
-    return g ? o(g) : {};
-  }, c = (n) => {
-    const h = F(r, n.path), g = e.defineField({
-      ...n,
-      path: h
+  }), h = (i) => {
+    const p = F(r, i), V = e.getField(p);
+    return V ? o(V) : {};
+  }, c = (i) => {
+    const p = F(r, i.path), V = e.defineField({
+      ...i,
+      path: p
     });
-    return o(g);
-  }, i = () => e.getFields().filter((n) => {
-    const h = n.path.value;
-    return h.startsWith(r + ".") || h === r;
-  }).map((n) => o(n)), l = () => e.getFields().filter((n) => {
-    const h = n.path.value;
-    return h.startsWith(r + ".") || h === r;
-  }), f = u(() => l().some((n) => n.dirty.value)), p = u(() => l().some((n) => n.touched.value)), R = u(() => e.isValid.value), M = u(() => e.isValidated.value), $ = u(() => k(d(e.errors), r));
+    return o(V);
+  }, n = () => e.getFields().filter((i) => {
+    const p = i.path.value;
+    return p.startsWith(r + ".") || p === r;
+  }).map((i) => o(i)), l = () => e.getFields().filter((i) => {
+    const p = i.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(() => rr(d(e.errors), r));
   return {
     data: s,
     initialData: a,
     defineField: c,
-    getField: v,
-    getFields: i,
+    getField: h,
+    getFields: n,
     isDirty: f,
-    isTouched: p,
-    isValid: R,
-    isValidated: M,
-    errors: $,
-    defineValidator: (n) => {
-      const h = _(n) ? n : b(n), g = u(
-        () => new ir(r, d(h))
+    isTouched: v,
+    isValid: P,
+    isValidated: I,
+    errors: J,
+    defineValidator: (i) => {
+      const p = z(i) ? i : b(i), V = u(
+        () => new dr(r, d(p))
       );
-      return e.defineValidator(g), h;
+      return e.defineValidator(V), p;
     },
-    reset: () => l().forEach((n) => n.reset()),
+    reset: () => l().forEach((i) => i.reset()),
     validateForm: () => e.validateForm(),
-    getSubForm: (n, h) => {
-      const g = F(r, n);
+    getSubForm: (i, p) => {
+      const V = F(r, i);
       return e.getSubForm(
-        g,
-        h
+        V,
+        p
       );
     }
   };
 }
-function pr(e) {
-  const r = u(() => Object.freeze(y(e.initialData))), t = A(y(r)), s = m({
+function Fr(e) {
+  const r = u(() => Object.freeze(g(e.initialData))), t = W(g(r)), s = E({
     initialData: r,
     data: t
   });
-  E(r, (f) => {
-    s.data = y(f);
+  y(r, (f) => {
+    s.data = g(f);
   });
-  const a = ar(s, e), o = H(s, a), v = Q(o), c = () => {
-    t.value = y(r), o.getFields().forEach(
+  const a = ur(s, e), o = tr(s, a), h = sr(o), c = () => {
+    t.value = g(r), o.getFields().forEach(
       (f) => f.reset()
     );
   };
-  function i(f, p) {
-    return nr(l, f);
+  function n(f, v) {
+    return fr(l, f);
   }
   const l = {
     ...o,
     ...a,
-    ...v,
+    ...h,
     reset: c,
-    getSubForm: i,
-    initialData: S(s, "initialData"),
-    data: S(s, "data")
+    getSubForm: n,
+    initialData: D(s, "initialData"),
+    data: D(s, "data")
   };
   return l;
 }
-const Vr = /* @__PURE__ */ B({
+const Er = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -430,11 +429,56 @@ const Vr = /* @__PURE__ */ B({
   setup(e) {
     const r = e, t = r.form.defineField({
       path: r.path
-    }), s = m(t);
-    return (a, o) => G(a.$slots, "default", L(U(s)));
+    }), s = E(t);
+    return (a, o) => j(a.$slots, "default", M(B(s)));
+  }
+}), wr = /* @__PURE__ */ S({
+  inheritAttrs: !1,
+  __name: "FormFieldWrapper",
+  props: {
+    component: {},
+    componentProps: {},
+    form: {},
+    path: {}
+  },
+  setup(e) {
+    return (r, t) => {
+      const s = Q("Field");
+      return $(), O(s, {
+        form: r.form,
+        path: r.path
+      }, {
+        default: A(({ errors: a, data: o, setData: h }) => [
+          ($(), O(X(r.component), Y({ ...r.componentProps, ...r.$attrs }, {
+            "model-value": o,
+            errors: a,
+            name: r.path,
+            "onUpdate:modelValue": h
+          }), {
+            default: A(() => [
+              j(r.$slots, "default")
+            ]),
+            _: 2
+          }, 1040, ["model-value", "errors", "name", "onUpdate:modelValue"]))
+        ]),
+        _: 3
+      }, 8, ["form", "path"]);
+    };
+  }
+}), Pr = /* @__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 })));
   }
 });
 export {
-  Vr as Field,
-  pr as useForm
+  Er as Field,
+  wr as FormFieldWrapper,
+  Pr as FormPart,
+  Fr as useForm
 };

package/dist/types/FormComponentProps.d.ts

@@ -0,0 +1,8 @@
+import { ObjectOf, Paths } from './util';
+import { Form } from './form';
+import { DeepPartial } from '../utils/type-helpers';
+export interface FormComponentProps<TData extends object, TPath extends Paths<TData>, TModelValueType> {
+    form: Form<TData & DeepPartial<ObjectOf<TPath, TModelValueType>>>;
+    path: TPath;
+}
+export type ExcludedFieldProps = 'modelValue' | 'onUpdate:modelValue' | 'errors';

package/dist/types/util.d.ts

@@ -15,7 +15,7 @@ type CleanupAntiCollapse<T extends string> = T extends `${infer Left}${AntiColla
 type RecursePaths<T, Seen = never> = T extends Seen ? never : T extends Array<infer ArrayType> ? `${number}` | `${number}.${RecursePaths<ArrayType, Seen | T>}` : T extends object ? {
     [K in keyof T]-?: `${AntiCollapse}${Exclude<K, symbol>}${'' | `.${RecursePaths<T[K], Seen | T>}`}`;
 }[keyof T] : never;
-export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>>;
+export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>> | '';
 /**
  * Removes the last part of a dot-connected path.
  */

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -29,6 +30,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.5.0",
+    "vue-component-type-helpers": "^3.0.5",
     "zod": "^4"
   },
   "scripts": {

package/src/components/FormFieldWrapper.vue

@@ -0,0 +1,42 @@
+<template>
+  <Field
+    v-slot="{ errors, data, setData }"
+    :form="form"
+    :path="path"
+  >
+    <component
+      :is="component"
+      v-bind="{...componentProps, ...$attrs}"
+      :model-value="data"
+      :errors="errors"
+      :name="path"
+      @update:model-value="setData"
+    >
+      <slot />
+    </component>
+  </Field>
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="TData extends object, TPath extends Paths<TData>, TComponent extends Component"
+>
+import { type Component } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { Paths } from '../types/util.ts'
+import type { Form } from '../types/form.ts'
+
+export interface FormFieldWrapperProps<TData extends object, TPath extends string, TComponent> {
+  component: TComponent
+  componentProps: Omit<ComponentProps<TComponent>, 'modelValue' | 'update:modelValue' | 'errors'>
+  form: Form<TData>
+  path: TPath
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<FormFieldWrapperProps<TData, TPath, TComponent>>()
+</script>

package/src/components/FormPart.vue

@@ -0,0 +1,22 @@
+<template>
+  <slot v-bind="{ subform }" />
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="TData extends object, TPath extends EntityPaths<TData>"
+>
+import { computed } from 'vue'
+import type { Form } from '../types/form.ts'
+import type { EntityPaths } from '../types/util.ts'
+
+export interface FormPartProps<TData extends object, TPath> {
+  form: Form<TData>
+  path: TPath
+}
+
+const props = defineProps<FormPartProps<TData, TPath>>()
+
+const subform = computed(() => props.form.getSubForm(props.path))
+</script>

package/src/composables/useForm.ts

@@ -7,7 +7,6 @@ import { useFieldRegistry } from './useFieldRegistry'
 import { useFormState } from './useFormState'
 import { createSubformInterface, type SubformOptions } from './useSubform'
 import { useValidation, type ValidationOptions } from './useValidation'
-import { syncRef } from '@vueuse/core'
 
 // TODO @Elias implement validation strategy handling
 

package/src/index.ts

@@ -12,5 +12,14 @@ export type { DeepPartial } from './utils/type-helpers'
 export type { Form, FormField } from './types/form'
 export type { SplitPath, Paths, PickProps, ObjectOf, EntityPaths } from './types/util'
 
+export type { FormComponentProps, ExcludedFieldProps } from './types/FormComponentProps'
+
+// Vue Components
 export { default as Field } from './components/Field.vue'
 export type { FieldProps } from './components/Field.vue'
+
+export { default as FormFieldWrapper } from './components/FormFieldWrapper.vue'
+export type { FormFieldWrapperProps } from './components/FormFieldWrapper.vue'
+
+export { default as FormPart } from './components/FormPart.vue'
+export type { FormPartProps } from './components/FormPart.vue'

package/src/types/FormComponentProps.ts

@@ -0,0 +1,14 @@
+import type { ObjectOf, Paths } from './util'
+import type { Form } from './form'
+import type { DeepPartial } from '../utils/type-helpers'
+
+export interface FormComponentProps<
+  TData extends object,
+  TPath extends Paths<TData>,
+  TModelValueType,
+> {
+  form: Form<TData & DeepPartial<ObjectOf<TPath, TModelValueType>>>
+  path: TPath
+}
+
+export type ExcludedFieldProps = 'modelValue' | 'onUpdate:modelValue' | 'errors'

package/src/types/util.ts

@@ -59,7 +59,7 @@ type RecursePaths<T, Seen = never> =
           }[keyof T]
         : never
 
-export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>>
+export type Paths<T, Seen = never> = CleanupAntiCollapse<RecursePaths<T, Seen>> | ''
 
 /**
  * Removes the last part of a dot-connected path.

package/tests/formState.test.ts

@@ -3,6 +3,7 @@ import { reactive } from 'vue'
 import { useFieldRegistry } from '../src/composables/useFieldRegistry'
 import { useFormState } from '../src/composables/useFormState'
 import { useForm } from '../src'
+import { useValidation } from '../src/composables/useValidation'
 
 describe('useFormState', () => {
   it('should detect dirty state when form data changes', () => {
@@ -45,10 +46,12 @@ describe('useFormState', () => {
       email: 'john@example.com',
     }
     const data = reactive(initialData)
-    const fields = useFieldRegistry({
+    const state = reactive({
       data,
       initialData,
     })
+    const validationState = useValidation(state, {})
+    const fields = useFieldRegistry(state, validationState)
 
     const nameField = fields.defineField({ path: 'name' })
     fields.defineField({ path: 'email' })
@@ -62,12 +65,16 @@ describe('useFormState', () => {
   })
 
   it('should handle empty fields map', () => {
-    const initialData = { name: 'John' }
+    const initialData = {
+      name: 'John',
+    }
     const data = reactive(initialData)
-    const fields = useFieldRegistry({
+    const state = reactive({
       data,
       initialData,
     })
+    const validationState = useValidation(state, {})
+    const fields = useFieldRegistry(state, validationState)
 
     const formState = useFormState(fields)
 

package/tests/subform.test.ts

@@ -1345,4 +1345,23 @@ describe('Subform Implementation', () => {
       })
     })
   })
+
+  describe('Toplevel array subform', () => {
+    it('can handle arrays on top level', async () => {
+      const schema = z.array(z.string())
+
+      const form = useForm({
+        initialData: { test: ['item1', 'item2'] },
+        schema,
+      })
+
+      const subform = form.getSubForm('test')
+
+      const rootField = subform.defineField({ path: '' })
+      const itemField = subform.defineField({ path: '0' })
+
+      expect(rootField.data.value).toEqual(['item1', 'item2'])
+      expect(itemField.data.value).toEqual('item1')
+    })
+  })
 })

package/tests/useForm.test.ts

@@ -193,4 +193,26 @@ describe('useForm', () => {
     expect(form.errors.value.general).toEqual([])
     expect(form.errors.value.propertyErrors).toEqual({})
   })
+
+  it('can handle arrays on top level', async () => {
+    const schema = z.array(z.string())
+
+    const form = useForm({
+      initialData: ['item1', 'item2'],
+      schema,
+    })
+
+    const result = await form.validateForm()
+
+    expect(result.isValid).toBe(true)
+    expect(form.isValidated.value).toBe(true)
+    expect(form.errors.value.general).toEqual([])
+    expect(form.errors.value.propertyErrors).toEqual({})
+
+    const rootField = form.defineField({ path: '' })
+    const itemField = form.defineField({ path: '1' })
+
+    expect(rootField.data.value).toEqual(['item1', 'item2'])
+    expect(itemField.data.value).toBe('item2')
+  })
 })

package/vitest.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vitest/config'
 import { resolve } from 'path'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+  plugins: [vue()],
   test: {
     environment: 'happy-dom',
     globals: true,