@bach.software/vue-dynamic-form 0.1.3 → 0.3.0

package/dist/examples.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.es.js","sources":["../src/utils/mapEachMetadataItem.ts","../src/examples/components/IconButton.vue","../src/examples/TestFormTemplate.vue","../src/examples/TestForm.vue","../src/examples/__tests__/TestFormTemplate.testcases.ts"],"sourcesContent":["import type { FieldMetadata } from '@/types/FieldMetadata';\n\n/**\n * Recursively walks a `FieldMetadata` tree (visiting `children` and `choice`) and applies\n * `callbackFunc` to every node, returning the transformed tree.\n *\n * The callback receives a shallow clone of each node, so mutations inside the callback do not\n * affect the original metadata. `children` and `choice` on the returned node are replaced with\n * the recursively-mapped results after the callback runs.\n */\nexport function mapEachMetadataItem<\n  ExtendedFieldTypes extends string = string,\n  ExtendedProperties extends object = object,\n>(\n  metadata: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>,\n  callbackFunc: (item: FieldMetadata<ExtendedFieldTypes, ExtendedProperties>) => FieldMetadata<ExtendedFieldTypes, ExtendedProperties>,\n): FieldMetadata<ExtendedFieldTypes, ExtendedProperties> {\n  if (!metadata || !callbackFunc)\n    return metadata;\n\n  metadata = callbackFunc?.({ ...metadata });\n  metadata.children = metadata?.children?.map(x => mapEachMetadataItem(x, callbackFunc));\n  metadata.choice = metadata?.choice?.map(x => mapEachMetadataItem(x, callbackFunc));\n  return metadata;\n}\n","<script lang=\"ts\" setup>\ninterface Props {\n  icon: 'plus' | 'minus'\n  color?: 'blue' | 'red'\n}\ninterface Emits {\n  (e: 'click'): void\n}\nconst {\n  icon,\n  color = 'blue',\n} = defineProps<Props>();\ndefineEmits<Emits>();\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800 cursor-pointer\"\n    :class=\"{\n      'bg-blue-200 hover:bg-blue-300': color === 'blue',\n      'bg-red-200 hover:bg-red-300': color === 'red',\n    }\"\n    @click=\"$emit('click')\"\n  >\n    <svg v-if=\"icon === 'plus'\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\" />\n    </svg>\n    <svg v-if=\"icon === 'minus'\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 12h14\" />\n    </svg>\n  </button>\n</template>\n","<script lang=\"ts\" setup>\nimport type { GetMetadataType } from '@/types/GetMetadataType';\nimport DynamicFormTemplate from '@/components/DynamicFormTemplate.vue';\nimport { defineMetadata } from '@/core/defineMetadata';\nimport IconButton from './components/IconButton.vue';\n\nexport type Metadata = GetMetadataType<typeof metadata>;\n\nconst metadata = defineMetadata<\n  {\n    text: string\n    textBoundByVModel: string\n    select: string\n    selectBoundByVModel: string\n    checkbox: boolean\n    checkboxBoundByVModel: boolean\n    heading: never\n    group: never\n  },\n  {\n    description?: string\n    options?: { key: string, value: string }[]\n    fullWidth?: boolean\n    disabled?: boolean\n    hidden?: boolean\n  },\n  /**\n   * Free to decide what attributes you want to pass internally between your templates.\n   * You can add any attribute to a <slot /> and then it will be accessible in props.slotProps.\n   */\n  {\n    hideLabel?: boolean\n    /** Example on how to keep track of the levels */\n    level?: number\n    /** Helps identifying that we're below a choice field, so if we're rendering an array we can adjust our layout */\n    belowChoiceField?: boolean\n    hidden?: boolean\n  }\n>();\n</script>\n\n<template>\n  <DynamicFormTemplate :metadata-configuration=\"metadata\">\n    <template #heading=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, canAddItems, addItem, canRemoveItems, removeItem, slotProps }\">\n      <div v-if=\"!fieldMetadata.hidden\" class=\"mt-4\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <h3 v-if=\"label\" class=\"flex text-xl font-bold gap-2 items-center mb-2\" :class=\"{ 'text-gray-500': fieldMetadata.disabled || disabled }\">\n          {{ label }}\n          <IconButton v-if=\"canAddItems\" icon=\"plus\" tabindex=\"-1\" :data-testid=\"`${fieldMetadata.path}-add-button`\" @click=\"addItem\" />\n          <IconButton v-if=\"canRemoveItems\" icon=\"minus\" tabindex=\"-1\" color=\"red\" :data-testid=\"`${fieldMetadata.path}-remove-button`\" @click=\"removeItem\" />\n        </h3>\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n          <slot :level=\"(slotProps?.level ?? 0) + 1\" />\n        </div>\n      </div>\n    </template>\n\n    <template #heading-array>\n      <!-- Don't show any extra elements for the heading -->\n      <slot />\n    </template>\n\n    <template #default-choice=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, slotProps }\">\n      <div v-if=\"!fieldMetadata.hidden\" class=\"flex flex-col gap-2\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <span class=\"flex gap-2 items-center\" :class=\"{ 'text-gray-500': disabled, 'after:content-[\\'*\\'] after:-ml-0.5 after:text-red-500': required }\">\n          {{ label }}\n        </span>\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6\">\n          <slot :level=\"(slotProps?.level ?? 0) + 1\" :below-choice-field=\"true\" />\n        </div>\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n      </div>\n    </template>\n\n    <template #default-array=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, canAddItems, addItem }\">\n      <div v-if=\"!fieldMetadata.hidden\" class=\"flex flex-col gap-2\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <label :for=\"`${fieldMetadata.path}[0]`\" :class=\"{ 'text-gray-500': fieldMetadata.disabled || disabled }\" class=\"flex gap-2 items-center\">\n          {{ label }}\n          <span v-if=\"required\" class=\"-ml-0.5 text-red-500\">*</span>\n          <IconButton v-if=\"canAddItems\" icon=\"plus\" tabindex=\"-1\" :data-testid=\"`${fieldMetadata.path}-add-button`\" @click=\"addItem\" />\n        </label>\n        <slot :hide-label=\"true\" />\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n      </div>\n    </template>\n\n    <template #default=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, canRemoveItems, removeItem, slotProps }\">\n      <div v-if=\"!fieldMetadata.hidden\" class=\"flex flex-col gap-2\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <label v-if=\"!slotProps?.hideLabel\" :for=\"fieldMetadata.path\" :class=\"{ 'text-gray-500': fieldMetadata.disabled || disabled }\">\n          {{ label }}\n          <span v-if=\"required\" class=\"-ml-0.5 text-red-500\">*</span>\n        </label>\n        <div class=\"flex gap-2 items-center\">\n          <div class=\"flex flex-col grow\">\n            <slot />\n          </div>\n          <IconButton :class=\"{ invisible: !canRemoveItems }\" icon=\"minus\" tabindex=\"-1\" color=\"red\" :data-testid=\"`${fieldMetadata.path}-remove-button`\" @click=\"removeItem\" />\n        </div>\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n      </div>\n      <slot name=\"attributes\" />\n    </template>\n\n    <template #group-array=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, canAddItems, addItem, slotProps }\">\n      <template v-if=\"fieldMetadata.hidden\" />\n      <!-- In case we're below a choice field, the first array item is not automatically added, so show a label with buttons -->\n      <div v-else-if=\"slotProps?.belowChoiceField\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <span class=\"flex gap-2 items-center mb-2\" :class=\"{ 'text-gray-500': fieldMetadata.disabled || disabled }\">\n          {{ label }}\n          <span v-if=\"required\" class=\"-ml-0.5 text-red-500\">*</span>\n          <IconButton v-if=\"canAddItems\" icon=\"plus\" tabindex=\"-1\" :data-testid=\"`${fieldMetadata.path}-add-button`\" @click=\"addItem\" />\n        </span>\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6\">\n          <slot :level=\"(slotProps?.level ?? 0) + 1\" />\n        </div>\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n      </div>\n      <!-- In case we show an input directly, show a label and buttons -->\n      <slot v-else />\n    </template>\n\n    <template #group=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, canAddItems, canRemoveItems, addItem, removeItem, slotProps }\">\n      <!-- In case of a grouped field we render the field differently -->\n      <div v-if=\"!fieldMetadata.hidden\" :class=\"{ 'md:col-span-2': fieldMetadata.fullWidth }\">\n        <span v-if=\"!slotProps?.hideLabel\" class=\"flex gap-2 items-center mb-2\" :class=\"{ 'text-gray-500': fieldMetadata.disabled || disabled }\">\n          {{ label }}\n          <span v-if=\"required\" class=\"-ml-0.5 text-red-500\">*</span>\n          <IconButton v-if=\"canAddItems\" icon=\"plus\" tabindex=\"-1\" :data-testid=\"`${fieldMetadata.path}-add-button`\" @click=\"addItem\" />\n          <IconButton v-if=\"canRemoveItems\" icon=\"minus\" tabindex=\"-1\" :data-testid=\"`${fieldMetadata.path}-remove-button`\" color=\"red\" @click=\"removeItem\" />\n        </span>\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6\">\n          <slot :level=\"(slotProps?.level ?? 0) + 1\" />\n        </div>\n        <pre class=\"text-sm whitespace-pre-wrap\">{{ fieldMetadata.description }}</pre>\n        <span\n          v-if=\"errorMessage.value\"\n          class=\"text-red-600 text-sm\"\n          :data-testid=\"`${fieldMetadata.path}-error-message`\"\n        >{{ errorMessage.value }}</span>\n      </div>\n      <slot name=\"attributes\" />\n    </template>\n\n    <template #select-input=\"{ fieldMetadata, fieldContext: { value, handleBlur, handleChange }, disabled }\">\n      <select\n        :id=\"fieldMetadata.path\"\n        :value=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        class=\"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @change=\"handleChange\"\n        @blur=\"handleBlur\"\n      >\n        <option v-for=\"{ key: optionKey, value: optionValue } in fieldMetadata.options\" :key=\"optionKey\" :value=\"optionKey\">\n          {{ optionValue }}\n        </option>\n      </select>\n    </template>\n\n    <template #selectBoundByVModel-input=\"{ fieldMetadata, fieldContext: { value, handleBlur }, disabled }\">\n      <select\n        :id=\"fieldMetadata.path\"\n        v-model=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        class=\"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @blur=\"handleBlur\"\n      >\n        <option v-for=\"{ key: optionKey, value: optionValue } in fieldMetadata.options\" :key=\"optionKey\" :value=\"optionKey\">\n          {{ optionValue }}\n        </option>\n      </select>\n    </template>\n\n    <template #checkbox-input=\"{ fieldMetadata, fieldContext: { value, handleBlur, handleChange }, disabled }\">\n      <input\n        :id=\"fieldMetadata.path\"\n        :checked=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        type=\"checkbox\"\n        class=\"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @change=\"handleChange(($event.target as HTMLInputElement).checked)\"\n        @blur=\"handleBlur\"\n      >\n    </template>\n\n    <template #checkboxBoundByVModel-input=\"{ fieldMetadata, fieldContext: { value, handleBlur }, disabled }\">\n      <input\n        :id=\"fieldMetadata.path\"\n        v-model=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        type=\"checkbox\"\n        class=\"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @blur=\"handleBlur\"\n      >\n    </template>\n\n    <template #textBoundByVModel-input=\"{ fieldMetadata, fieldContext: { value, handleBlur }, disabled }\">\n      <input\n        :id=\"fieldMetadata.path\"\n        v-model=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        type=\"text\"\n        class=\"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @blur=\"handleBlur\"\n      >\n    </template>\n\n    <template #default-input=\"{ fieldMetadata, fieldContext: { value, handleBlur, handleChange }, disabled }\">\n      <input\n        :id=\"fieldMetadata.path\"\n        :value=\"value.value\"\n        :disabled=\"fieldMetadata.disabled || disabled\"\n        type=\"text\"\n        class=\"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm\"\n        @input=\"handleChange\"\n        @blur=\"handleBlur\"\n      >\n    </template>\n  </DynamicFormTemplate>\n</template>\n","<script setup lang=\"ts\">\nimport type { GenericObject } from 'vee-validate';\n\nimport type { Metadata } from './TestFormTemplate.vue';\nimport type { DynamicFormSettings } from '@/types/DynamicFormSettings';\nimport { computed, ref } from 'vue';\nimport { checkTreeHasValue } from '@/utils/checkTreeHasValue';\nimport { mapEachMetadataItem } from '@/utils/mapEachMetadataItem';\nimport DynamicForm from '../components/DynamicForm.vue';\nimport { useDynamicForm } from '../core/useDynamicForm';\nimport TestFormTemplate from './TestFormTemplate.vue';\n\nexport interface Props {\n  metadata: Metadata[]\n  settings?: DynamicFormSettings\n  showDebugState?: boolean\n  initialEdit?: boolean\n  hideFieldsWithoutValue?: boolean\n  initialValues?: GenericObject\n}\n\nconst { metadata, settings: _settings, initialEdit = true, hideFieldsWithoutValue = false, showDebugState = false, initialValues } = defineProps<Props>();\n\nconst { values, handleSubmit, errors, meta } = useDynamicForm({\n  initialValues,\n});\nconst manualValues = ref();\nconst editMode = ref(initialEdit);\nconst isSubmitted = ref(false);\n\n// Add edit mode functionality to the form. In case we're not in edit mode, disable all items.\nconst metadataWithEdit = computed(() => metadata?.map(x => mapEachMetadataItem(x, (item) => {\n  item.computedProps = item.computedProps ?? [];\n\n  // Disable all fields when not in edit mode\n  item.computedProps.push((thisField) => {\n    if (!editMode.value)\n      thisField.disabled = true;\n  });\n\n  if (hideFieldsWithoutValue) {\n  // In view mode, hide fields that have no value\n    item.computedProps.push((thisField, fieldValue) => {\n      if (!editMode.value && !checkTreeHasValue(fieldValue.value))\n        thisField.hidden = true;\n    });\n\n    // In view mode, hide a parent field when all of its children are hidden\n    item.computedProps.push((thisField, _fieldValue, childFields) => {\n      if (!editMode.value && childFields.value.length > 0 && childFields.value.every(c => c.hidden))\n        thisField.hidden = true;\n    });\n  }\n\n  return item;\n})));\n\nconst settings = computed(() => ({\n  analytics: true,\n  messages: {\n    required: '{field} is required',\n    minOccurs: 'At least {min} items required',\n    choiceMinOccurs: 'The following fields need to occur at least {min} time(s): {field}',\n    minLength: 'The minimum length of {field} is {length}',\n    maxLength: 'The maximum length of {field} is {length}',\n    length: '{field} must be exactly {length} characters',\n    pattern: '{field} does not match the required pattern',\n    minInclusive: '{field} must be at least {min}',\n    maxInclusive: '{field} must be at most {max}',\n    minExclusive: '{field} must be greater than {min}',\n    maxExclusive: '{field} must be less than {max}',\n    enumeration: '{field} must be one of the allowed values',\n    whiteSpace: '{field} contains invalid whitespace (mode: {mode})',\n    fractionDigits: '{field} may have at most {digits} decimal place(s)',\n    totalDigits: '{field} may have at most {digits} significant digit(s)',\n  },\n  ...(_settings ?? {}),\n}));\n\nfunction submit(e?: Event) {\n  handleSubmit(\n    (_values) => {\n      isSubmitted.value = true;\n      editMode.value = false;\n    },\n    ({ errors: _errors }) => {\n      isSubmitted.value = false;\n    },\n  )(e);\n};\n</script>\n\n<template>\n  <form @submit.prevent=\"submit\">\n    <div class=\"flex justify-end gap-2\">\n      <button v-if=\"!editMode\" type=\"button\" class=\"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded\" data-testid=\"submit\" @click=\"editMode = true\">\n        Edit\n      </button>\n      <button v-if=\"editMode\" type=\"submit\" class=\"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded\" data-testid=\"submit\">\n        Submit\n      </button>\n      <button v-if=\"editMode\" type=\"button\" class=\"cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded\" data-testid=\"cancel\" @click=\"editMode = false\">\n        Cancel\n      </button>\n    </div>\n    <div v-if=\"Object.values(errors).length\" data-testid=\"errors\" class=\"col-12 text-red-600\">\n      Errors:\n      <ul>\n        <li v-for=\"(error, key) in errors\" :key=\"key\">\n          <span v-html=\"error\" />\n        </li>\n      </ul>\n    </div>\n    <DynamicForm\n      :template=\"TestFormTemplate\"\n      :metadata=\"metadataWithEdit\"\n      :settings\n      @update:model-value=\"manualValues = $event\"\n    />\n    <span v-if=\"isSubmitted\" data-testid=\"isSubmitted\" />\n    <pre v-if=\"showDebugState\" class=\"bg-gray-100 p-4 rounded-lg text-sm overflow-auto\">\nIsDirty: {{ meta.dirty }}\nPending: {{ meta.pending }}\nTouched: {{ meta.touched }}\nValid: {{ meta.valid }}\nSubmitted: {{ isSubmitted }}\n\n// form values:\n{{ JSON.stringify(values, null, 2) }}\n    </pre>\n  </form>\n</template>\n","import type { GenericObject } from 'vee-validate';\nimport type { Metadata } from '@/examples/TestFormTemplate.vue';\n\nimport type { DynamicFormSettings } from '@/types/DynamicFormSettings';\nimport { defineComponent, h, markRaw } from 'vue';\nimport TestForm from '@/examples/TestForm.vue';\n\nexport const defaultTestCase = createTestCase([{\n  name: 'text',\n  type: 'text',\n  fieldOptions: { label: 'Text Input' },\n  path: 'with.custom.structure',\n  restriction: { maxLength: 10 },\n}]);\n\nexport const arrayTestCase = createTestCase([{\n  fieldOptions: { label: 'Array Fields' },\n  type: 'heading',\n  children: [\n    { fieldOptions: { label: 'Optional field (max 3)' }, minOccurs: 0, maxOccurs: 3 },\n    { fieldOptions: { label: 'Required field (max 3)' }, maxOccurs: 3 },\n    { fieldOptions: { label: '2 Fields required' }, minOccurs: 2, maxOccurs: 4 },\n    { fieldOptions: { label: 'Section (2 sections required)' }, type: 'heading', minOccurs: 2, maxOccurs: 4, fullWidth: true, children: [\n      { fieldOptions: { label: 'Nested field 1' } },\n      { fieldOptions: { label: 'Required Nested field 2' }, type: 'select', options: [\n        { key: 'option1', value: 'Option 1' },\n        { key: 'option2', value: 'Option 2' },\n        { key: 'option3', value: 'Option 3' },\n      ] },\n      { fieldOptions: { label: 'Nested field 3' }, type: 'checkbox' },\n    ] },\n  ],\n}]);\n\nexport const groupTestCase = createTestCase([{\n  fieldOptions: { label: 'Grouped Fields' },\n  type: 'heading',\n  children: [\n    { fieldOptions: { label: 'Required group' }, type: 'group', children: [\n      { fieldOptions: { label: 'Required Nested field 1' }, fullWidth: true },\n      { fieldOptions: { label: 'Required Nested field 2' }, fullWidth: true },\n    ] },\n    { fieldOptions: { label: 'Optional group' }, type: 'group', minOccurs: 0, description: `The group is optional, therefore the children will only be required once 1 value is filled in.\n      \nYou can test it by filling in one of the fields.`, children: [\n      { fieldOptions: { label: 'Required Nested field 1' }, fullWidth: true },\n      { fieldOptions: { label: 'Required Nested field 2' }, fullWidth: true },\n    ] },\n  ],\n}, {\n  fieldOptions: { label: 'Grouped Array Fields' },\n  type: 'heading',\n  children: [\n    { fieldOptions: { label: 'Required group' }, type: 'group', maxOccurs: 5, fullWidth: true, children: [\n      { fieldOptions: { label: 'Required Nested field 1' } },\n      { fieldOptions: { label: 'Required Nested field 2' } },\n    ] },\n    { fieldOptions: { label: 'Optional group' }, type: 'group', minOccurs: 0, maxOccurs: 5, fullWidth: true, children: [\n      { fieldOptions: { label: 'Required Nested field 1' } },\n      { fieldOptions: { label: 'Required Nested field 2' } },\n    ] },\n  ],\n}]);\n\nexport const choiceTestCase = createTestCase([\n  {\n    fieldOptions: { label: 'Choice Fields (minOccurs 1, maxOccurs 1)' },\n    type: 'heading',\n    children: [\n      { fieldOptions: { label: 'Simple Choice Field' }, fullWidth: true, description: `In a choice field, only 1 of the fields can be filled in.`, choice: [\n        { fieldOptions: { label: 'Nested Field 1' } },\n        { fieldOptions: { label: 'Nested Field 2' } },\n      ] },\n    ],\n  },\n  {\n    fieldOptions: { label: 'Choice Grouped Fields (minOccurs 1, maxOccurs 3)' },\n    type: 'heading',\n    children: [\n      { fieldOptions: { label: 'Array Choice Field' }, type: 'group', maxOccurs: 3, fullWidth: true, description: `In a choice field, only 1 of the fields can be filled in.`, choice: [\n        { fieldOptions: { label: 'Nested Field 1' }, type: 'group', children: [\n          { fieldOptions: { label: 'Nested Child Field 1' }, fullWidth: true },\n          { fieldOptions: { label: 'Nested Child Field 2' }, fullWidth: true },\n        ] },\n        { fieldOptions: { label: 'Nested Field 2' }, type: 'group', children: [\n          { fieldOptions: { label: 'Nested Child Field 1' }, fullWidth: true },\n          { fieldOptions: { label: 'Nested Child Field 2' }, fullWidth: true },\n        ] },\n      ] },\n    ],\n  },\n  {\n    fieldOptions: { label: 'Choice Array Fields (minOccurs 1, maxOccurs 3)' },\n    type: 'heading',\n    children: [\n      { fieldOptions: { label: 'Array Choice Field' }, type: 'group', maxOccurs: 3, fullWidth: true, description: `In a choice field, only 1 of the fields can be filled in.`, choice: [\n        { fieldOptions: { label: 'Nested Field 1' }, maxOccurs: 3 },\n        { fieldOptions: { label: 'Nested Field 2' }, maxOccurs: 3 },\n      ] },\n    ],\n  },\n]);\n\nexport const childFieldsTestCase = createTestCase([\n  {\n    fieldOptions: { label: 'Personal Info' },\n    type: 'heading',\n    name: 'person',\n    description: 'Only showing the fields that have a value. Click edit to change.',\n    fullWidth: true,\n    children: [\n      { name: 'firstName', fieldOptions: { label: 'First Name' } },\n      { name: 'lastName', fieldOptions: { label: 'Last Name' } },\n      { name: 'email', fieldOptions: { label: 'Email' } },\n    ],\n  },\n  {\n    fieldOptions: { label: 'Address' },\n    type: 'heading',\n    name: 'address',\n    fullWidth: true,\n    children: [\n      { name: 'street', fieldOptions: { label: 'Street' }, minOccurs: 0 },\n      { name: 'city', fieldOptions: { label: 'City' }, minOccurs: 0 },\n      { name: 'country', fieldOptions: { label: 'Country' }, minOccurs: 0 },\n    ],\n  },\n], undefined, {\n  initialEdit: false,\n  hideFieldsWithoutValue: true,\n  initialValues: {\n    person: {\n      firstName: 'Jack',\n      lastName: 'Smit',\n    },\n  },\n});\n\nexport const individualTestCase = createTestCase(\n  [{\n    name: 'items',\n    type: 'text',\n    fieldOptions: { label: 'Items' },\n    maxOccurs: 3,\n    attributes: [{ name: 'lang', type: 'text', minOccurs: 0 }],\n  }],\n  {\n    // validateOnValueUpdate: false,\n    // validateOnValueUpdateAfterSubmit: false,\n    // validateWhenInError: true,\n    // validateOnBlur: true,\n  },\n);\n\nexport function createTestCase(\n  metadata: Metadata[],\n  settings?: DynamicFormSettings,\n  testCaseConfig: {\n    initialEdit?: boolean\n    hideFieldsWithoutValue?: boolean\n    initialValues?: GenericObject\n  } = {},\n) {\n  return markRaw(defineComponent({\n    render: () => h(TestForm, { ...testCaseConfig, metadata, settings, showDebugState: true }),\n  }));\n}\n"],"names":["mapEachMetadataItem","metadata","callbackFunc","x","_createElementBlock","color","$emit","icon","_openBlock","_hoisted_1","_cache","_createElementVNode","_hoisted_2","defineMetadata","_createBlock","DynamicFormTemplate","_unref","fieldMetadata","errorMessage","label","disabled","canAddItems","addItem","canRemoveItems","removeItem","slotProps","_normalizeClass","_createTextVNode","_toDisplayString","IconButton","_hoisted_3","_renderSlot","_ctx","_withCtx","required","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_12","_hoisted_13","_hoisted_14","_createVNode","_hoisted_15","_hoisted_16","_Fragment","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","value","handleBlur","handleChange","optionKey","optionValue","_hoisted_26","$event","_hoisted_28","_vModelSelect","_vModelCheckbox","_vModelText","values","handleSubmit","errors","meta","useDynamicForm","__props","manualValues","ref","editMode","isSubmitted","metadataWithEdit","computed","item","thisField","fieldValue","checkTreeHasValue","_fieldValue","childFields","c","settings","submit","e","_values","_errors","_renderList","error","key","DynamicForm","TestFormTemplate","showDebugState","defaultTestCase","createTestCase","arrayTestCase","groupTestCase","choiceTestCase","childFieldsTestCase","individualTestCase","testCaseConfig","markRaw","defineComponent","h","TestForm"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
 import type { DefineComponent } from 'vue';
+import type { DynamicFormSettings } from '../types/DynamicFormSettings';
 import type { FieldMetadata } from '../types/FieldMetadata';
 export interface DynamicFormProps<Metadata extends FieldMetadata> {
     metadata: Metadata | Metadata[];
     template: DefineComponent<object, object, any>;
+    settings?: DynamicFormSettings;
 }
 declare const _default: <Metadata extends 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> & DynamicFormProps<Metadata> & Partial<{}>> & import("vue").PublicProps;

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

@@ -1,12 +1,21 @@
 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;
+    (e: 'update:computedField', field: InternalFieldMetadata<FieldMetadata>): 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 "onUpdate:computedField"?: ((field: InternalFieldMetadata<FieldMetadata>) => any) | undefined;
+        readonly onBlur?: ((event?: Event | undefined, shouldValidate?: boolean | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:computedField" | "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.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: 'update:computedField', field: InternalFieldMetadata<FieldMetadata>): 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 "onUpdate:computedField"?: ((field: InternalFieldMetadata<FieldMetadata>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:computedField"> & 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.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: 'update:computedField', field: InternalFieldMetadata<FieldMetadata>): 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 "onUpdate:computedField"?: ((field: InternalFieldMetadata<FieldMetadata>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onUpdate:computedField"> & 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,87 @@
-import type { FieldMetadata } from '../types/FieldMetadata';
+import type { FieldContext as _FieldContext } from 'vee-validate';
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { ReadOnlyFieldType } 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<TValue = unknown> {
+    value: ComputedRef<TValue>;
+    errors: Ref<string[]>;
+    errorMessage: Ref<string | undefined>;
+    label?: MaybeRefOrGetter<string | undefined>;
+}
+/**
+ * Props passed to the template component by the library internals.
+ * Defined as an interface (rather than actual props) so they don't appear in the
+ * public prop signature of the user-facing DynamicFormTemplate component.
+ */
+export interface Attributes<TMetadataConfiguration extends MetadataConfiguration> {
+    type: TMetadataConfiguration['fieldTypes'][number] | 'default' | 'default-array' | 'default-array-item' | 'default-choice';
+    /** The metadata you configured for this field. */
+    fieldMetadata: ReadOnlyFieldType<TMetadataConfiguration['fieldTypes'][number], TMetadataConfiguration['extendedProperties']>;
+    /** Whether the field is required. */
+    required: boolean;
+    /** Whether the field is disabled (maxOccurs = 0). */
+    disabled: boolean;
+    /** The position of this item within its parent, that can be its position in the children or choice collection or its index in an array field. */
+    index: number;
+    /**
+     * Whether a new array item can be added.
+     * False when the current count has already reached maxOccurs.
+     */
+    canAddItems: boolean;
+    /**
+     * Whether an array item can be removed.
+     * False when the current count has already reached minOccurs.
+     */
+    canRemoveItems: boolean;
+    /** Adds a new item to the parent array field. */
+    addItem: () => void;
+    /** Removes this item from the parent array field. */
+    removeItem: () => void;
+    /**
+     * The user defined properties that are passed between templates by adding attributes on the <slot /> elements.
+     * With these properties you can set values that can be read by components "living" further down the tree.
+     */
+    slotProps: TMetadataConfiguration['slotProperties'];
+}
+export interface ItemAttributes<TMetadataConfiguration extends MetadataConfiguration, FieldType extends string = string> extends Attributes<TMetadataConfiguration> {
+    /**
+     * The extended vee-validate field context from useField.
+     * Includes a `hasValue` computed that is true when this field or any descendant 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<unknown[]>;
 }
 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: ItemAttributes<TMetadataConfiguration, string>) => any;
     } & {
-        'default-input': (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-        }) => any;
+        'default-array': (props: ArrayChoiceAttributes<TMetadataConfiguration>) => any;
     } & {
-        array: (props: {
-            field: NonNullable<FieldMetadata<TMetadataConfiguration["fieldTypes"][number], TMetadataConfiguration["extendedProperties"]> | undefined>;
-        }) => any;
+        'default-array-item': (props: ItemAttributes<TMetadataConfiguration, string>) => 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; };
+        'default-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; } & { [K_2 in `${TMetadataConfiguration["fieldTypes"][number]}-array`]: (props: ArrayChoiceAttributes<TMetadataConfiguration>) => any; } & { [K_3 in `${TMetadataConfiguration["fieldTypes"][number]}-array-item`]: (props: ItemAttributes<TMetadataConfiguration, K_3 extends `${infer FieldType}-input` ? FieldType : never>) => any; } & { [K_4 in `${TMetadataConfiguration["fieldTypes"][number]}-choice`]: (props: ArrayChoiceAttributes<TMetadataConfiguration>) => any; };
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;

package/dist/src/components/__tests__/DynamicFormItem.analytics.test.d.ts

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

package/dist/src/components/__tests__/DynamicFormItem.logic.test.d.ts

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

package/dist/src/components/__tests__/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/__tests__/DynamicFormItem.validation.test.d.ts

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

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

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

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

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

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

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

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

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

package/dist/src/core/__tests__/useValidatePartialForm.test.d.ts

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

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

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

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

@@ -1,10 +1,35 @@
 /**
- * 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, SlotProperties extends object = object>(): {
+    fieldTypes: readonly ("default" | Exclude<keyof FieldValueTypes, "children" | "choice" | "input" | "array">)[];
+    extendedProperties: ExtendedFieldProperties;
+    slotProperties: SlotProperties;
+    valueTypes: FieldValueTypes & {
+        default: string;
+    };
 };

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

@@ -0,0 +1,16 @@
+import type { PartialDeep } from 'type-fest';
+import type { FlattenAndSetPathsType, FormContext, GenericObject, Path, PathValue } from 'vee-validate';
+import type { MaybeRef, MaybeRefOrGetter, Ref } from 'vue';
+import { useValidatePartialForm } from '../core/useValidatePartialForm';
+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>>;
+    validateSection: ReturnType<typeof useValidatePartialForm>['validateSection'];
+};

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/useValidatePartialForm.d.ts

@@ -0,0 +1,4 @@
+import type { FormValidationResult, GenericObject } from 'vee-validate';
+export declare function useValidatePartialForm(): {
+    validateSection: (sectionPath: string) => Promise<FormValidationResult<GenericObject>>;
+};

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/examples/TestForm.vue.d.ts

@@ -0,0 +1,13 @@
+import type { GenericObject } from 'vee-validate';
+import type { Metadata } from './TestFormTemplate.vue';
+import type { DynamicFormSettings } from '../types/DynamicFormSettings';
+export interface Props {
+    metadata: Metadata[];
+    settings?: DynamicFormSettings;
+    showDebugState?: boolean;
+    initialEdit?: boolean;
+    hideFieldsWithoutValue?: boolean;
+    initialValues?: GenericObject;
+}
+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.vue.d.ts

@@ -0,0 +1,76 @@
+import type { GetMetadataType } from '../types/GetMetadataType';
+export type Metadata = GetMetadataType<typeof metadata>;
+declare const metadata: {
+    fieldTypes: readonly ("default" | "checkbox" | "select" | "text" | "textBoundByVModel" | "selectBoundByVModel" | "checkboxBoundByVModel" | "heading" | "group")[];
+    extendedProperties: {
+        description?: string;
+        options?: {
+            key: string;
+            value: string;
+        }[];
+        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;
+    };
+    valueTypes: {
+        text: string;
+        textBoundByVModel: string;
+        select: string;
+        selectBoundByVModel: string;
+        checkbox: boolean;
+        checkboxBoundByVModel: boolean;
+        heading: never;
+        group: never;
+    } & {
+        default: string;
+    };
+};
+declare var __VLS_21: {
+    level: number;
+}, __VLS_24: {}, __VLS_27: {
+    level: number;
+    belowChoiceField: boolean;
+}, __VLS_37: {
+    hideLabel: boolean;
+}, __VLS_40: {}, __VLS_49: {}, __VLS_59: {
+    level: number;
+}, __VLS_61: {}, __VLS_78: {
+    level: number;
+}, __VLS_80: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    default?: (props: typeof __VLS_27) => any;
+} & {
+    default?: (props: typeof __VLS_37) => any;
+} & {
+    default?: (props: typeof __VLS_40) => any;
+} & {
+    attributes?: (props: typeof __VLS_49) => any;
+} & {
+    default?: (props: typeof __VLS_59) => any;
+} & {
+    default?: (props: typeof __VLS_61) => any;
+} & {
+    default?: (props: typeof __VLS_78) => any;
+} & {
+    attributes?: (props: typeof __VLS_80) => 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 & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,14 @@
+import type { GenericObject } from 'vee-validate';
+import type { Metadata } from '../../examples/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 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, 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/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 './__tests__/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/useValidatePartialForm';
+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/tests/test-setup.d.ts

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