@teamnovu/kit-vue-forms 0.0.15 → 0.0.17

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

@@ -1,45 +1,45 @@
-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 +53,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 +65,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 +82,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 +106,7 @@ function H(e, r) {
           }
         })
       });
-      return s(i), i;
+      return s(n), n;
     }
     return t[c];
   };
@@ -118,19 +118,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 +140,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 +161,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 +185,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 +212,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 +233,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 +246,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 +340,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 Er(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 wr = /* @__PURE__ */ S({
   __name: "Field",
   props: {
     form: {},
@@ -430,11 +430,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)));
+  }
+}), Pr = /* @__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"]);
+    };
+  }
+}), _r = /* @__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
+  wr as Field,
+  Pr as FormFieldWrapper,
+  _r as FormPart,
+  Er 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

@@ -10,9 +10,12 @@ export type PickProps<Entity, PropertyKeys extends string> = Entity extends NonN
 /**
  * Resolves to a union of dot-connected paths of all nested properties of T.
  */
-export type Paths<T, Seen = never> = T extends Seen ? never : T extends Array<infer ArrayType> ? `${number}` | `${number}.${Paths<ArrayType, Seen | T>}` : T extends object ? {
-    [K in keyof T]-?: `${Exclude<K, symbol>}${'' | `.${Paths<T[K], Seen | T>}`}`;
+type AntiCollapse = '__anticollapse__';
+type CleanupAntiCollapse<T extends string> = T extends `${infer Left}${AntiCollapse}${infer Right}` ? `${Left}${CleanupAntiCollapse<Right>}` : T;
+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>>;
 /**
  * Removes the last part of a dot-connected path.
  */
@@ -28,3 +31,4 @@ export type RootPath<P extends string> = P extends `${infer TRoot}.${string}` ?
 export type ObjectOf<TPath extends string, T> = {
     [K in RootPath<TPath>]: RestPath<K, TPath> extends never ? T : ObjectOf<RestPath<K, TPath>, T>;
 };
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamnovu/kit-vue-forms",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "",
   "main": "index.js",
   "exports": {
@@ -29,6 +29,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/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

@@ -45,15 +45,22 @@ export type PickProps<Entity, PropertyKeys extends string> =
 /**
  * Resolves to a union of dot-connected paths of all nested properties of T.
  */
-export type Paths<T, Seen = never> =
+
+type AntiCollapse = '__anticollapse__'
+type CleanupAntiCollapse<T extends string> =
+  T extends `${infer Left}${AntiCollapse}${infer Right}` ? `${Left}${CleanupAntiCollapse<Right>}` : T
+
+type RecursePaths<T, Seen = never> =
   T extends Seen ? never :
-    T extends Array<infer ArrayType> ? `${number}` | `${number}.${Paths<ArrayType, Seen | T>}` :
+    T extends Array<infer ArrayType> ? `${number}` | `${number}.${RecursePaths<ArrayType, Seen | T>}` :
       T extends object
         ? {
-            [K in keyof T]-?: `${Exclude<K, symbol>}${'' | `.${Paths<T[K], Seen | T>}`}`
+            [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>>
+
 /**
  * Removes the last part of a dot-connected path.
  */