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

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

@@ -1,20 +1,9 @@
+import type { GetDynamicFormSettingsType } from '../types/GetDynamicFormSettingsType';
 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;
-    };
-}
+export type DynamicFormSettings = GetDynamicFormSettingsType<typeof metadata>;
 declare const metadata: {
-    fieldTypes: readonly ("default" | "checkbox" | "select" | "text" | "textBoundByVModel" | "selectBoundByVModel" | "checkboxBoundByVModel" | "heading")[];
+    fieldTypes: readonly ("default" | "checkbox" | "select" | "text" | "textBoundByVModel" | "selectBoundByVModel" | "checkboxBoundByVModel" | "heading" | "group")[];
     extendedProperties: {
         description?: string;
         options?: {
@@ -23,6 +12,18 @@ declare const metadata: {
         }[];
         fullWidth?: boolean;
         disabled?: boolean;
+        hidden?: boolean;
+    };
+    slotProperties: {
+        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;
+        hidden?: boolean;
+    };
+    extendedSettingsProperties: {
+        showOptionalInsteadOfRequired?: boolean;
     };
     valueTypes: {
         text: string;
@@ -32,40 +33,45 @@ declare const metadata: {
         checkbox: boolean;
         checkboxBoundByVModel: boolean;
         heading: never;
+        group: never;
     } & {
         default: string;
     };
 };
 declare var __VLS_21: {
     level: number;
-}, __VLS_24: {
+}, __VLS_24: {}, __VLS_27: {
     level: number;
     belowChoiceField: boolean;
-}, __VLS_34: {
-    level: number;
-}, __VLS_36: {}, __VLS_45: {
+}, __VLS_37: {
     hideLabel: boolean;
-}, __VLS_62: {
+}, __VLS_40: {}, __VLS_49: {}, __VLS_59: {
+    level: number;
+}, __VLS_61: {}, __VLS_78: {
     level: number;
-}, __VLS_64: {}, __VLS_73: {};
+}, __VLS_80: {};
 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_27) => any;
+} & {
+    default?: (props: typeof __VLS_37) => any;
+} & {
+    default?: (props: typeof __VLS_40) => any;
 } & {
-    default?: (props: typeof __VLS_36) => any;
+    attributes?: (props: typeof __VLS_49) => any;
 } & {
-    default?: (props: typeof __VLS_45) => any;
+    default?: (props: typeof __VLS_59) => any;
 } & {
-    default?: (props: typeof __VLS_62) => any;
+    default?: (props: typeof __VLS_61) => any;
 } & {
-    default?: (props: typeof __VLS_64) => any;
+    default?: (props: typeof __VLS_78) => any;
 } & {
-    attributes?: (props: typeof __VLS_73) => any;
+    attributes?: (props: typeof __VLS_80) => 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 __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/src/examples/{TestFormTemplate.testcases.d.ts → __tests__/TestFormTemplate.testcases.d.ts}

@@ -1,8 +1,13 @@
-import type { Metadata } from './TestFormTemplate.vue';
-import type { DynamicFormSettings } from '../types/DynamicFormSettings';
+import type { GenericObject } from 'vee-validate';
+import type { DynamicFormSettings, Metadata } from '../../examples/TestFormTemplate.vue';
 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 childFieldsTestCase: 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>>;
+export declare function createTestCase(metadata: Metadata[], settings?: DynamicFormSettings, testCaseConfig?: {
+    initialEdit?: boolean;
+    hideFieldsWithoutValue?: boolean;
+    initialValues?: GenericObject;
+}): 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/index.d.ts

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

package/dist/src/index.d.ts

@@ -5,11 +5,11 @@ export { default as DynamicFormItemChoice } from './components/DynamicFormItemCh
 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 './core/useValidatePartialForm';
 export * from './types/DynamicFormItemProps';
 export * from './types/DynamicFormSettings';
 export * from './types/FieldMetadata';
+export * from './types/GetDynamicFormSettingsType';
 export * from './types/GetMetadataType';
 export * from './types/MetadataConfiguration';
 export * from './types/RequireOnly';

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

@@ -3,11 +3,8 @@ import type { FieldMetadata } from '../types/FieldMetadata';
 import type { InternalFieldMetadata } from '../types/InternalFieldMetadata';
 export interface DynamicFormItemProps<InternalMetadata extends InternalFieldMetadata<FieldMetadata>> {
     template: DefineComponent<object, object, {
-        input?: ((props: object) => any) | undefined;
-        children?: ((props: object) => any) | undefined;
+        default?: ((props: object) => any) | undefined;
         attributes?: ((props: object) => any) | undefined;
-        choice?: ((props: object) => any) | undefined;
-        array?: ((props: object) => any) | undefined;
     }>;
     fieldMetadata: InternalMetadata;
     /**

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

@@ -1,6 +1,6 @@
 import type { ValidationMessage } from '../types/ValidationMessage';
 export declare const dynamicFormSettingsKey: unique symbol;
-export interface DynamicFormSettings {
+export type DynamicFormSettings<ExtendedProperties extends object = object> = {
     /**
      * Enables diagnostic data output via concealed DOM elements for reactivity testing
      */
@@ -33,7 +33,7 @@ export interface DynamicFormSettings {
     /**
      * When true, validates fields on every value change when the field has an error.
      *
-     * Defaults to false.
+     * Defaults to true (applied by DynamicForm).
      */
     validateWhenInError?: boolean;
     /**
@@ -86,4 +86,4 @@ export interface DynamicFormSettings {
         /** XSD: totalDigits. Available placeholders: `{field}`, `{0}` or `{digits}` (max total digits) */
         totalDigits?: ValidationMessage;
     };
-}
+} & ExtendedProperties;

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

@@ -15,6 +15,19 @@ export type FieldMetadata<ExtendedFieldTypes extends string = string, ExtendedPr
      * The maximal occurrence of a value.
      */
     maxOccurs?: number;
+    /**
+     * Controls whether the array automatically pre-fills empty placeholder items up to `minOccurs`
+     * when the form is first rendered and the array is still empty.
+     *
+     * Defaults to `true` — omitting this property has the same effect as setting it to `true`.
+     * Set it explicitly to `false` to suppress auto-filling, which is useful when you want the
+     * user to explicitly add the first item themselves even though `minOccurs` is 1 or higher.
+     *
+     * @example
+     * // Will NOT auto-add an initial item, even though minOccurs is 1:
+     * { name: 'emails', type: 'text', maxOccurs: 5, minOccurs: 1, autoAddMinOccurs: false }
+     */
+    autoAddMinOccurs?: boolean;
     /**
      * Simple restrictions to the data, these are available in XSD and can be applied easily.
      * For more advance validation use the validation property.
@@ -158,14 +171,23 @@ export type FieldMetadata<ExtendedFieldTypes extends string = string, ExtendedPr
      * is re-computed every time the value changes. If you don't use it, a change in value will not re-trigger the reactivity of the computed.
      * @returns A transformed FieldMetadata
      */
-    computedProps?: ((thisField: ComputedPropsType<FieldMetadata<ExtendedFieldTypes, ExtendedProperties>>, fieldValue: Ref<unknown>) => void)[];
+    computedProps?: ((thisField: ComputedPropsFieldType<ExtendedFieldTypes, ExtendedProperties>, fieldValue: Ref<unknown>, childFields: Ref<ReadOnlyFieldType<ExtendedFieldTypes, ExtendedProperties>[]>) => void)[];
     /**
      * Normally the computedProps are not re-calculate if a child value changes. If you need this functionality, you can enable this by
      * setting this property to true.
      */
     computeOnChildValueChange?: boolean;
 } & ExtendedProperties;
-export type ComputedPropsType<T> = Omit<T, 'name' | 'path' | 'children' | 'choice' | 'attributes' | 'fieldOptions' | 'computedProps' | 'maxOccurs'> & Readonly<{
+export type ComputedPropsFieldType<ExtendedFieldTypes extends string = string, ExtendedProperties extends object = object> = Omit<FieldMetadata<ExtendedFieldTypes, ExtendedProperties>, 'name' | 'path' | 'parent' | 'children' | 'choice' | 'attributes' | 'fieldOptions' | 'computedProps' | 'maxOccurs' | 'isComplexType' | 'computeOnChildValueChange'> & Readonly<{
+    name: string;
+    path: string;
+    parent: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>;
+}>;
+export type ReadOnlyFieldType<ExtendedFieldTypes extends string = string, ExtendedProperties extends object = object> = Readonly<Omit<FieldMetadata<ExtendedFieldTypes, ExtendedProperties>, 'name' | 'path' | 'children' | 'choice'> & {
     name: string;
     path: string;
+    children: ReadOnlyFieldType<ExtendedFieldTypes, ExtendedProperties>[];
+    choice: ReadOnlyFieldType<ExtendedFieldTypes, ExtendedProperties>[];
 }>;
+export type ComputedPropsFieldOf<T extends FieldMetadata<any, any>> = T extends FieldMetadata<infer FT, infer EP> ? ComputedPropsFieldType<FT, EP> : never;
+export type ReadOnlyFieldOf<T extends FieldMetadata<any, any>> = T extends FieldMetadata<infer FT, infer EP> ? ReadOnlyFieldType<FT, EP> : never;

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

@@ -0,0 +1,3 @@
+import type { DynamicFormSettings } from './DynamicFormSettings';
+import type { MetadataConfiguration } from '../types/MetadataConfiguration';
+export type GetDynamicFormSettingsType<T extends MetadataConfiguration> = DynamicFormSettings<T['extendedSettingsProperties']>;

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

@@ -1,3 +1,9 @@
 import type { FieldMetadata } from '../types/FieldMetadata.js';
 import type { RequireOnly } from '../types/RequireOnly.js';
-export type InternalFieldMetadata<Metadata extends FieldMetadata> = RequireOnly<Metadata, 'name' | 'type' | 'minOccurs' | 'maxOccurs'>;
+export type InternalFieldMetadata<Metadata extends FieldMetadata> = RequireOnly<Metadata, 'name' | 'type' | 'minOccurs' | 'maxOccurs'> & {
+    /**
+     * Internal hash computed by the system to track meaningful changes to the computed field.
+     * Do not set this manually — it is overwritten after every computedProps run.
+     */
+    _hash?: string;
+};

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

@@ -1,5 +1,7 @@
 export interface MetadataConfiguration {
     fieldTypes: readonly string[];
     extendedProperties: object;
+    slotProperties: object;
+    extendedSettingsProperties: object;
     valueTypes: Record<string, any>;
 }

package/dist/src/utils/__tests__/createValidation.test.d.ts

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

package/dist/src/utils/__tests__/mapEachMetadataItem.test.d.ts

@@ -0,0 +1,17 @@
+import type { GetMetadataType } from '../../types/GetMetadataType';
+export type TestMetadata = GetMetadataType<typeof _metadata>;
+declare const _metadata: {
+    fieldTypes: readonly ("default" | "text")[];
+    extendedProperties: {
+        visited?: boolean;
+        visitOrder?: number;
+    };
+    slotProperties: object;
+    extendedSettingsProperties: object;
+    valueTypes: {
+        text: string;
+    } & {
+        default: string;
+    };
+};
+export {};

package/dist/src/utils/hashField.d.ts

@@ -0,0 +1,7 @@
+import type { FieldMetadata } from '../types/FieldMetadata';
+/**
+ * Creates a deterministic hash of all mutable field properties (those that computedProps can change).
+ * Excludes structural/immutable properties: name, path, children, choice, attributes,
+ * fieldOptions, computedProps, maxOccurs, parent, and _hash itself.
+ */
+export declare function hashField(field: FieldMetadata): string;

package/dist/src/utils/mapEachMetadataItem.d.ts

@@ -0,0 +1,10 @@
+import type { FieldMetadata } from '../types/FieldMetadata';
+/**
+ * Recursively walks a `FieldMetadata` tree (visiting `children` and `choice`) and applies
+ * `callbackFunc` to every node, returning the transformed tree.
+ *
+ * The callback receives a shallow clone of each node, so mutations inside the callback do not
+ * affect the original metadata. `children` and `choice` on the returned node are replaced with
+ * the recursively-mapped results after the callback runs.
+ */
+export declare function mapEachMetadataItem<ExtendedFieldTypes extends string = string, ExtendedProperties extends object = object>(metadata: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>, callbackFunc: (item: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>) => FieldMetadata<ExtendedFieldTypes, ExtendedProperties>): FieldMetadata<ExtendedFieldTypes, ExtendedProperties>;