@bach.software/vue-dynamic-form 0.1.2 → 0.2.0

package/dist/src/components/DynamicFormItem.test-helpers.d.ts

@@ -0,0 +1,21 @@
+import type { mount } from '@vue/test-utils';
+/** Reads the render count for a field from the analytics DOM span. */
+export declare function renderCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/**
+ * Accesses the internal `<script setup>` state of the DynamicFormItem for a given field path.
+ * Uses `vm.$.setupState` — an internal Vue API that exposes all setup variables, including
+ * private `let` declarations that are not exposed via `defineExpose`.
+ */
+export declare function setupState(wrapper: ReturnType<typeof mount>, path: string): Record<string, any> | undefined;
+/** Reads the number of times `combinedValidation` was recomputed for a given field. Returns -1 if the field is not found. */
+export declare function constructValidationCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/** Reads the number of times `computedField` was recomputed for a given field. Returns -1 if the field is not found. */
+export declare function fieldComputeCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/** Reads the number of times the `field` computed (bound to `props.fieldMetadata`) was recomputed. Returns -1 if the field is not found. */
+export declare function fieldChangedCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/** Reads the number of times the value watcher fired for a given field. Returns -1 if the field is not found. */
+export declare function valueChangedCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/** Reads the number of times the notify value change fired for a given field. Returns -1 if the field is not found. */
+export declare function notifyValueUpdateCount(wrapper: ReturnType<typeof mount>, path: string): number;
+/** Returns the current vee-validate form values from the TestForm wrapper. */
+export declare function formValues(wrapper: ReturnType<typeof mount>): Record<string, any>;

package/dist/src/components/DynamicFormItem.validation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicFormItem.vue.d.ts

@@ -1,12 +1,19 @@
 import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
 import type { FieldMetadata } from '../types/FieldMetadata';
 import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+export interface Emit {
+    (e: 'update:modelValue', value: unknown): void;
+    (e: 'blur', event?: Event | undefined, shouldValidate?: boolean | undefined): void;
+}
 declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+        readonly onBlur?: ((event?: Event | undefined, shouldValidate?: boolean | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onBlur"> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: Emit;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/src/components/DynamicFormItemArray.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicFormItemArray.validation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicFormItemArray.vue.d.ts

@@ -1,12 +1,17 @@
 import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
 import type { FieldMetadata } from '../types/FieldMetadata';
 import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+export interface Emit {
+    (e: 'update:modelValue', value: unknown): void;
+}
 declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: Emit;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/src/components/DynamicFormItemChoice.logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicFormItemChoice.validation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/DynamicFormItemChoice.vue.d.ts

@@ -1,12 +1,17 @@
 import type { DynamicFormItemProps } from '../types/DynamicFormItemProps';
 import type { FieldMetadata } from '../types/FieldMetadata';
 import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
+export interface Emit {
+    (e: 'update:modelValue', value: unknown): void;
+}
 declare const _default: <InternalMetadata extends InternalFieldMetadata<FieldMetadata>>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & DynamicFormItemProps<InternalMetadata> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: Emit;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/src/components/DynamicFormTemplate.vue.d.ts

@@ -1,36 +1,94 @@
+import type { FieldContext as _FieldContext } from 'vee-validate';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
 import type { FieldMetadata } from '../types/FieldMetadata';
 import type { MetadataConfiguration } from '../types/MetadataConfiguration';
+export interface FieldContext<TValue = unknown> extends _FieldContext<TValue> {
+    /**
+     * Whether this field (or any of its descendants) has a value.
+     * Lazily evaluated — only computed when accessed, so safe to use on deep field trees.
+     */
+    hasValue: ComputedRef<boolean>;
+}
 export interface DynamicFormConfigurationProps<TMetadataConfiguration extends MetadataConfiguration> {
-    type?: TMetadataConfiguration['fieldTypes'][number] | 'default';
+    /**
+     * Use defineMetadata to create a strongly-typed metadata configuration.
+     * This metadata configuration can be provided here to type the DynamicFormTemplate component.
+     */
     metadataConfiguration: TMetadataConfiguration;
-    field?: FieldMetadata<TMetadataConfiguration['fieldTypes'][number], TMetadataConfiguration['extendedProperties']>;
+}
+export interface LimitedFieldContext {
+    errors: Ref<string[]>;
+    errorMessage: Ref<string | undefined>;
+    label?: MaybeRefOrGetter<string | undefined>;
+}
+/**
+ * We define the attributes here instead of the props. This way the user don't see them
+ * when using the DynamicFormConfiguration component.
+ * The attributes will be passed internally by the other components of the library.
+ */
+export interface Attributes<TMetadataConfiguration extends MetadataConfiguration> {
+    type: TMetadataConfiguration['fieldTypes'][number] | 'default' | 'array' | 'choice';
+    /**
+     * The metadata that you configured for this field
+     */
+    fieldMetadata: FieldMetadata<TMetadataConfiguration['fieldTypes'][number], TMetadataConfiguration['extendedProperties']>;
+    /**
+     * Indicates if a field is required.
+     */
+    required: boolean;
+    /**
+     * Indicates whether a field is disabled
+     */
+    disabled: boolean;
+    /**
+     * If the field is part of an arrayField, this is its index in the array
+     */
+    index: number;
+    /**
+     * If the field is part of an arrayField, this boolean lets you know whether
+     * new items can be added. For example: when the maxOccurs is 2 and there are already
+     * 2 items, this will be false.
+     */
+    canAddItems: boolean;
+    /**
+     * If the field is part of an arrayField, this boolean lets you konw whether
+     * an item can be removed. For example: when the minOccurs is 2 and there are already
+     * 2 items, this will be false.
+     */
+    canRemoveItems: boolean;
+    /**
+     * if the field is part of an arrayField, this method will add another item.
+     */
+    addItem: () => void;
+    /**
+     * if the field is part of an arrayField, this method will remove an item.
+     */
+    removeItem: () => void;
+}
+export interface ItemAttributes<TMetadataConfiguration extends MetadataConfiguration, FieldType extends string = string> extends Attributes<TMetadataConfiguration> {
+    /**
+     * The extended Vee-Validate context, coming from the useField.
+     * A computed hasValue is added, indicating whether the current field or any of its children
+     * has a value.
+     */
+    fieldContext: FieldContext<FieldType extends keyof TMetadataConfiguration['valueTypes'] ? TMetadataConfiguration['valueTypes'][FieldType] : unknown>;
+}
+export interface ArrayChoiceAttributes<TMetadataConfiguration extends MetadataConfiguration> extends Attributes<TMetadataConfiguration> {
+    fieldContext: LimitedFieldContext;
 }
 declare const _default: <TMetadataConfiguration extends MetadataConfiguration>(__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<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormConfigurationProps<TMetadataConfiguration> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
-        default: (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-            type: "default" | TMetadataConfiguration["fieldTypes"][number] | undefined;
-        }) => any;
+        default: (props: ItemAttributes<TMetadataConfiguration, string>) => any;
     } & {
-        'default-input': (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-        }) => any;
+        'default-input': (props: ItemAttributes<TMetadataConfiguration, string>) => any;
     } & {
-        array: (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-        }) => any;
+        array: (props: ArrayChoiceAttributes<TMetadataConfiguration>) => any;
     } & {
-        choice: (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-        }) => any;
-    } & { [K in TMetadataConfiguration["fieldTypes"][number]]: (props: {
-        field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-    }) => any; } & { [K_1 in `${TMetadataConfiguration["fieldTypes"][number]}-input`]: (props: {
-        field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-    }) => any; };
+        choice: (props: ArrayChoiceAttributes<TMetadataConfiguration>) => any;
+    } & { [K in TMetadataConfiguration["fieldTypes"][number]]: (props: ItemAttributes<TMetadataConfiguration, K>) => any; } & { [K_1 in `${TMetadataConfiguration["fieldTypes"][number]}-input`]: (props: ItemAttributes<TMetadataConfiguration, K_1 extends `${infer FieldType}-input` ? FieldType : never>) => any; };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/src/core/defineMetadata.d.ts

@@ -1,10 +1,34 @@
 /**
- * Creates metadata based on your configuration.
- * @param fieldTypes an array of fields that you would like to define. (Note: you can't use 'input' or 'children', they're reserved)
- * @param extendedProperties extra properties that you would like to include in your metadata
- * @returns a metadata object that can be passed to the DynamicFormTemplate component
+ * Helps you to create a metadata configuration with strongly-typed field definitions.
+ * Field value types are directly inferred from the provided type interface.
+ *
+ * Simply pass an interface where keys are field names and values are the expected value types.
+ * Use `never` for fields that don't hold values (like headings).
+ * Note: you can't use the following reserved field names: 'input', 'children', 'choice', 'array'.
+ *
+ * Use the extended properties to add custom metadata to each field definition. *
+ * @returns Typed configuration object for DynamicFormTemplate consumption
+ *
+ * @example
+ * const config = defineMetadata<
+ *   {
+ *     text: string;
+ *     checkbox: boolean;
+ *     age: number;
+ *     address: { street: string; city: string };
+ *     heading: never;
+ *   },
+ *   {
+ *     // This will add a label and options property to each field's metadata
+ *     label?: string;
+ *     options?: Array<{ key: string; value: string }>;
+ *   }
+ * >();
  */
-export declare function defineMetadata<ExtendedProperties extends object, const FieldTypes extends readonly string[]>(fieldTypes: FieldTypes, extendedProperties: ExtendedProperties): {
-    fieldTypes: readonly ("text" | Exclude<FieldTypes[number], "children" | "choice" | "input" | "array" | "text">)[];
-    extendedProperties: ExtendedProperties;
+export declare function defineMetadata<const FieldValueTypes extends Record<string, any>, ExtendedFieldProperties extends object = object>(): {
+    fieldTypes: readonly ("default" | Exclude<keyof FieldValueTypes, "children" | "choice" | "array" | "input">)[];
+    extendedProperties: ExtendedFieldProperties;
+    valueTypes: FieldValueTypes & {
+        default: string;
+    };
 };

package/dist/src/core/useDynamicForm.d.ts

@@ -0,0 +1,14 @@
+import type { PartialDeep } from 'type-fest';
+import type { FlattenAndSetPathsType, FormContext, GenericObject, Path, PathValue } from 'vee-validate';
+import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+export interface FormOptions<TValues extends GenericObject> {
+    initialValues?: PartialDeep<TValues> | undefined | null;
+    initialErrors?: FlattenAndSetPathsType<TValues, string | undefined>;
+    initialTouched?: FlattenAndSetPathsType<TValues, boolean>;
+    validateOnMount?: boolean;
+    keepValuesOnUnmount?: MaybeRef<boolean>;
+    name?: string;
+}
+export declare function useDynamicForm<TValues extends GenericObject = GenericObject>(opts?: FormOptions<TValues>): FormContext<TValues> & {
+    useFieldValue: <TPath extends Path<TValues>>(path?: MaybeRefOrGetter<TPath>) => Ref<PathValue<TValues, TPath>>;
+};

package/dist/src/core/useFieldArrayExtended.d.ts

@@ -0,0 +1,16 @@
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * Extended useFieldArray, with the childrens values included.
+ */
+export declare function useFieldArrayExtended(arrayPath: MaybeRefOrGetter<string>): {
+    remove(idx: number): void;
+    replace(newArray: unknown[]): void;
+    update(idx: number, value: unknown): void;
+    push(value: unknown): void;
+    swap(indexA: number, indexB: number): void;
+    insert(idx: number, value: unknown): void;
+    prepend(value: unknown): void;
+    move(oldIdx: number, newIdx: number): void;
+    fields: import("vue").Ref<import("vee-validate").FieldEntry<unknown>[], import("vee-validate").FieldEntry<unknown>[]>;
+    values: import("vue").ComputedRef<unknown[]>;
+};

package/dist/src/core/validation.d.ts

@@ -0,0 +1,7 @@
+export { resolveMessage } from '../utils/resolveMessage';
+export type ValidationRule = 'xsd_required' | 'xsd_minOccurs' | 'xsd_choiceMinOccurs' | 'xsd_minLength' | 'xsd_maxLength' | 'xsd_pattern' | 'xsd_minInclusive' | 'xsd_maxInclusive' | 'xsd_minExclusive' | 'xsd_maxExclusive' | 'xsd_enumeration' | 'xsd_length' | 'xsd_whiteSpace' | 'xsd_fractionDigits' | 'xsd_totalDigits';
+/**
+ * Maps each rule to its semantic parameter name, enabling named placeholder
+ * interpolation (e.g. `{length}`, `{min}`) alongside positional `{0}` in messages.
+ */
+export declare const ruleParamNames: Partial<Record<ValidationRule, string>>;

package/dist/src/core/validation.test.d.ts

@@ -0,0 +1 @@
+import '../core/validation';

package/dist/src/examples/DynamicForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/examples/TestForm.vue.d.ts

@@ -0,0 +1,9 @@
+import type { Metadata } from './TestFormTemplate.vue';
+import type { DynamicFormSettings } from '../types/DynamicFormSettings';
+export interface Props {
+    metadata: Metadata[];
+    settings?: DynamicFormSettings;
+    showDebugState?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/src/examples/TestFormTemplate.testcases.d.ts

@@ -0,0 +1,8 @@
+import type { Metadata } from './TestFormTemplate.vue';
+import type { DynamicFormSettings } from '../types/DynamicFormSettings';
+export declare const defaultTestCase: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const arrayTestCase: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const groupTestCase: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const choiceTestCase: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const individualTestCase: import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare function createTestCase(metadata: Metadata[], settings?: DynamicFormSettings): import("vue").Raw<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;

package/dist/src/examples/TestFormTemplate.vue.d.ts

@@ -0,0 +1,75 @@
+import type { GetMetadataType } from '../types/GetMetadataType';
+export type Metadata = GetMetadataType<typeof metadata>;
+export interface Props {
+    /**
+     * Free to decide what attributes you want to pass internally between your templates.
+     * You can add any attribute to a <slot /> and then it will be accessible in props.slotProps.
+     */
+    slotProps?: {
+        hideLabel?: boolean;
+        /** Example on how to keep track of the levels */
+        level?: number;
+        /** Helps identifying that we're below a choice field, so if we're rendering an array we can adjust our layout */
+        belowChoiceField?: boolean;
+    };
+}
+declare const metadata: {
+    fieldTypes: readonly ("default" | "checkbox" | "select" | "text" | "textBoundByVModel" | "selectBoundByVModel" | "checkboxBoundByVModel" | "heading")[];
+    extendedProperties: {
+        description?: string;
+        options?: {
+            key: string;
+            value: string;
+        }[];
+        fullWidth?: boolean;
+        disabled?: boolean;
+    };
+    valueTypes: {
+        text: string;
+        textBoundByVModel: string;
+        select: string;
+        selectBoundByVModel: string;
+        checkbox: boolean;
+        checkboxBoundByVModel: boolean;
+        heading: never;
+    } & {
+        default: string;
+    };
+};
+declare var __VLS_21: {
+    level: number;
+}, __VLS_24: {
+    level: number;
+    belowChoiceField: boolean;
+}, __VLS_34: {
+    level: number;
+}, __VLS_36: {}, __VLS_45: {
+    hideLabel: boolean;
+}, __VLS_62: {
+    level: number;
+}, __VLS_64: {}, __VLS_73: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    default?: (props: typeof __VLS_34) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
+} & {
+    default?: (props: typeof __VLS_45) => any;
+} & {
+    default?: (props: typeof __VLS_62) => any;
+} & {
+    default?: (props: typeof __VLS_64) => any;
+} & {
+    attributes?: (props: typeof __VLS_73) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/examples/components/IconButton.vue.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    icon: 'plus' | 'minus';
+    color?: 'blue' | 'red';
+}
+declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/src/examples/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TestFormTemplate.testcases';
+export { default as TestFormTemplate } from './TestFormTemplate.vue';
+export { type Metadata } from './TestFormTemplate.vue';

package/dist/src/index.d.ts

@@ -4,7 +4,13 @@ export { default as DynamicFormItemArray } from './components/DynamicFormItemArr
 export { default as DynamicFormItemChoice } from './components/DynamicFormItemChoice.vue';
 export { default as DynamicFormTemplate } from './components/DynamicFormTemplate.vue';
 export * from './core/defineMetadata';
+export * from './core/useDynamicForm';
+export * from './core/useFieldArrayExtended';
+export * from './core/validation';
 export * from './types/DynamicFormItemProps';
+export * from './types/DynamicFormSettings';
 export * from './types/FieldMetadata';
 export * from './types/GetMetadataType';
+export * from './types/MetadataConfiguration';
 export * from './types/RequireOnly';
+export * from './types/ValidationMessage';

package/dist/src/test-setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/types/DynamicFormItemProps.d.ts

@@ -9,5 +9,60 @@ export interface DynamicFormItemProps<InternalMetadata extends InternalFieldMeta
         choice?: ((props: object) => any) | undefined;
         array?: ((props: object) => any) | undefined;
     }>;
-    field: InternalMetadata;
+    fieldMetadata: InternalMetadata;
+    /**
+     * In case a parent can occur multiple times, its path will have an index in it.
+     * This needs to be passed to the child items so they can adjust their own path accordingly.
+     *
+     * Example scenario:
+     * - field.path = root.collections.item.nested.deepItems
+     * - pathOverride = root.collections[3]
+     * - Result: root.collections[3].item.nested.deepItems
+     * Full path specification is unnecessary; partial override suffices.
+     */
+    pathOverride?: string;
+    /**
+     * Runtime adjustment of minimum occurrence constraint for this field.
+     * Controls requirement level: 0 makes optional, 1 enforces presence, higher values demand repetition.
+     *
+     * For example: Conditional sections where child validation activates only after
+     * user interaction with any descendant field.
+     */
+    minOccursOverride?: number;
+    /**
+     * Runtime adjustment of maximum occurrence constraint for this field.
+     * Values exceeding 1 transform the field into a repeatable collection with multiple instances.
+     *
+     * For example: Within choice groups, disable add button when any option
+     * reaches the shared occurrence limit.
+     */
+    maxOccursOverride?: number;
+    /**
+     * In case this field is part of a array field, it needs to co-operate with that array field and
+     * mark all children optional if no value has been filled in.
+     */
+    partOfArrayField?: boolean;
+    /**
+     * In case this field is part of a choice field, it needs to co-operate with that choice field and
+     * behave differently in some situations.
+     */
+    partOfChoiceField?: boolean;
+    /**
+     * We check the maxOccurs to see if the field is an Array. If we want to override this, we can do so with this property.
+     * In case the field is a child of a choice field, it needs to be made repeatable and we can set this to true.
+     */
+    isArrayOverride?: 'auto' | 'array' | 'single';
+    /**
+     * In case this item is part of a field array, we need some extra info
+     */
+    index?: number;
+    canAddItems?: boolean;
+    canRemoveItems?: boolean;
+    addItem?: () => void;
+    removeItem?: (index?: number) => void;
+    /**
+     * You can provide additional attributes to the slots in your template. They will be passed to the
+     * component below.
+     */
+    slotProps?: object;
 }

package/dist/src/types/DynamicFormSettings.d.ts

@@ -0,0 +1,89 @@
+import type { ValidationMessage } from '../types/ValidationMessage';
+export declare const dynamicFormSettingsKey: unique symbol;
+export interface DynamicFormSettings {
+    /**
+     * Enables diagnostic data output via concealed DOM elements for reactivity testing
+     */
+    analytics?: boolean;
+    /**
+     * In case of a complex type the value is stored in a value property, i.e. { value: 'the actual value' }
+     * Use complexTypeValueProperty to change the property name, for example 'myValue' will result in { myValue: 'the actual value' }
+     */
+    complexTypeValueProperty?: string;
+    /**
+     * When true, validates fields on every value change.
+     * When false, only validates on submit.
+     *
+     * Defaults to true.
+     */
+    validateOnValueUpdate?: boolean;
+    /**
+     * When true, validates fields on every value change after the first submit.
+     * When false, listen to the validateOnValueUpdate.
+     *
+     * Defaults to false.
+     */
+    validateOnValueUpdateAfterSubmit?: boolean;
+    /**
+     * When true, validates fields on blur.
+     *
+     * Defaults to false.
+     */
+    validateOnBlur?: boolean;
+    /**
+     * When true, validates fields on every value change when the field has an error.
+     *
+     * Defaults to false.
+     */
+    validateWhenInError?: boolean;
+    /**
+     * Use this setting to override the default text of the validation messages.
+     *
+     * Each message accepts either a `string` template or a `(ctx) => string` function.
+     *
+     * String templates support the following placeholders:
+     * - `{field}` — the field label
+     * - `{value}` — the current field value
+     * - `{0}`, `{1}`, ... — rule params by position (e.g. `{0}` = the limit value)
+     * - Named params where supported (e.g. `{min}`, `{max}`)
+     *
+     * Examples:
+     * ```ts
+     * required: 'The {field} field is required'
+     * minLength: 'The {field} must be at least {0} characters'
+     * minLength: (ctx) => `${ctx.field} is too short`
+     * ```
+     */
+    messages?: {
+        /** XSD: required. Available placeholders: `{field}` */
+        required?: ValidationMessage;
+        /** XSD: minOccurs. Available placeholders: `{field}`, `{0}` or `{min}` (min number of filled items) */
+        minOccurs?: ValidationMessage;
+        /** XSD: choiceMinOccurs. Available placeholders: `{field}`, `{0}` or `{min}` (min number of filled items) */
+        choiceMinOccurs?: ValidationMessage;
+        /** XSD: minLength. Available placeholders: `{field}`, `{0}` or `{length}` (min length) */
+        minLength?: ValidationMessage;
+        /** XSD: maxLength. Available placeholders: `{field}`, `{0}` or `{length}` (max length) */
+        maxLength?: ValidationMessage;
+        /** XSD: length. Available placeholders: `{field}`, `{0}` or `{length}` (exact length) */
+        length?: ValidationMessage;
+        /** XSD: pattern. Available placeholders: `{field}`, `{0}` or `{pattern}` (regex pattern) */
+        pattern?: ValidationMessage;
+        /** XSD: minInclusive. Available placeholders: `{field}`, `{0}` or `{min}` (min value, inclusive) */
+        minInclusive?: ValidationMessage;
+        /** XSD: maxInclusive. Available placeholders: `{field}`, `{0}` or `{max}` (max value, inclusive) */
+        maxInclusive?: ValidationMessage;
+        /** XSD: minExclusive. Available placeholders: `{field}`, `{0}` or `{min}` (min value, exclusive) */
+        minExclusive?: ValidationMessage;
+        /** XSD: maxExclusive. Available placeholders: `{field}`, `{0}` or `{max}` (max value, exclusive) */
+        maxExclusive?: ValidationMessage;
+        /** XSD: enumeration. Available placeholders: `{field}` */
+        enumeration?: ValidationMessage;
+        /** XSD: whiteSpace. Available placeholders: `{field}`, `{0}` or `{mode}` (preserve | replace | collapse) */
+        whiteSpace?: ValidationMessage;
+        /** XSD: fractionDigits. Available placeholders: `{field}`, `{0}` or `{digits}` (max decimal places) */
+        fractionDigits?: ValidationMessage;
+        /** XSD: totalDigits. Available placeholders: `{field}`, `{0}` or `{digits}` (max total digits) */
+        totalDigits?: ValidationMessage;
+    };
+}