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

package/README.md

@@ -1,207 +1,207 @@
 # @bach.software/vue-dynamic-form
 
-`@bach.software/vue-dynamic-form` is a schema-driven form library for Vue that extends `vee-validate` with a metadata model for fields, groups, arrays, choices, templates, and XSD-inspired validation rules.
+[![npm](https://img.shields.io/npm/v/@bach.software/vue-dynamic-form)](https://www.npmjs.com/package/@bach.software/vue-dynamic-form)
 
-For the manual site and runnable demos, start with [../../docs/index.md](../../docs/index.md).
+**Complex forms, without the complexity.**
 
-## What The Library Solves
+An opinionated extension on top of `vee-validate` — it handles the structure, arrays, choices, and validation wiring, while you keep full control over the HTML.
 
-The library lets you describe a form as metadata instead of hard-coding the full form tree in templates. The metadata is then rendered by `DynamicForm` and your chosen `DynamicFormTemplate`.
+## Install
 
-This is useful when:
-
-- form structure comes from configuration or backend metadata
-- repeated sections and optional groups need to be created dynamically
-- mutually exclusive input branches should be enforced consistently
-- the same logical form must be rendered with different UI templates
-
-## Core Building Blocks
-
-### `DynamicForm`
-
-`DynamicForm` is the runtime entry point. It:
-
-- accepts metadata and a template component
-- normalizes the metadata tree
-- fills in defaults like `minOccurs`, `maxOccurs`, `type`, `name`, and `path`
-- provides settings to all nested form items
-
-### `DynamicFormTemplate`
-
-`DynamicFormTemplate` is the rendering contract between the core engine and your UI layer. Instead of coupling the library to a specific design system, the library exposes slots for:
-
-- simple inputs
-- grouped fields
-- array fields
-- choice fields
-- attributes
-
-That means the form logic stays in the library, while the visual implementation stays in your app or component library.
-
-### Metadata Tree
-
-Each metadata item can represent one of a few structural shapes:
-
-- input field: a single value
-- parent/group: `children`
-- choice: `choice`
-- array/repeatable field: `maxOccurs > 1`
-- attribute-bearing field: `attributes`
-
-The engine walks the tree recursively and decides per node whether it should render:
-
-- as a direct input
-- as a repeatable array
-- as a mutually exclusive choice
-- as a group containing nested children
-
-## How Dynamic Rendering Works
-
-At runtime the library derives behavior from metadata.
-
-### Paths
-
-Every field gets a normalized path. If you do not provide one, the library derives it from parent path plus field name.
-
-Examples:
+```bash
+npm install @bach.software/vue-dynamic-form vee-validate @vee-validate/rules vue
+```
 
-- `person.firstName`
-- `person.contacts[0].email`
-- `invoice.lines[2].price`
+## How It Works
 
-These paths are used both for rendered `id`s and for `vee-validate` field registration.
+A dynamic form has three parts that you assemble once and reuse across every form in your app:
 
-### Groups
+Steps 1 and 2 are done **once per app** (or once per design system). Step 3 is repeated for each form you build.
 
-A metadata item with `children` is treated as a parent/group. The group itself may be optional or repeatable, and its children inherit constraints when needed.
+1. **Define your field types** — a `defineMetadata()` call that declares which types exist and what properties they support
+2. **Build a template** — a `DynamicFormTemplate` component that maps each type to your own UI components
+3. **Wire up a form page** — pass a metadata array and your template to `DynamicForm`
 
-### Arrays
+### 1. Define your field types
 
-A field becomes repeatable when `maxOccurs > 1`, unless runtime overrides force different behavior. The array implementation:
+```ts
+// MyFormTemplate.ts
+import type { GetMetadataType } from '@bach.software/vue-dynamic-form';
+import { defineMetadata } from '@bach.software/vue-dynamic-form';
 
-- manages placeholders and add/remove behavior
-- tracks occurrences independently from validation state
-- applies `minOccurs` and `maxOccurs`
-- allows nested groups and nested arrays inside each occurrence
+export const metadata = defineMetadata<
+  {
+    text: string
+    checkbox: boolean
+    heading: never // display-only, no form value
+  },
+  {
+    label?: string
+    description?: string
+  }
+>();
 
-### Choices
+export type Metadata = GetMetadataType<typeof metadata>;
+```
 
-A metadata item with `choice` is treated as a mutually exclusive branch selector. The choice engine:
+### 2. Build a template
 
-- tracks which branch currently has values
-- disables sibling branches when one branch becomes active
-- supports nested choices
-- supports array-based branches
-- calculates per-branch `minOccurs` and `maxOccurs` overrides dynamically
+Map each field type to your own components. The library provides the structure — you own every element of the HTML:
 
-This is the part that gives you XSD-like `<choice>` behavior in a Vue form.
+```vue
+<!-- MyFormTemplate.vue -->
+<script lang="ts" setup>
+import { DynamicFormTemplate } from '@bach.software/vue-dynamic-form';
+import { metadata } from './MyFormTemplate';
+</script>
 
-## Validation Model
+<template>
+  <DynamicFormTemplate :metadata-configuration="metadata">
+    <template #heading="{ fieldContext: { label } }">
+      <h3>{{ label }}</h3>
+      <slot />
+    </template>
+
+    <template #default="{ fieldMetadata, fieldContext: { errorMessage, label }, required }">
+      <label :for="fieldMetadata.path">{{ label }}<span v-if="required"> *</span></label>
+      <slot />
+      <span v-if="errorMessage.value">{{ errorMessage.value }}</span>
+    </template>
+
+    <template #text-input="{ fieldMetadata, fieldContext: { value, handleChange, handleBlur } }">
+      <input :id="fieldMetadata.path" :value="value.value" @input="handleChange" @blur="handleBlur">
+    </template>
+
+    <template #checkbox-input="{ fieldMetadata, fieldContext: { value, handleChange, handleBlur } }">
+      <input :id="fieldMetadata.path" type="checkbox" :checked="value.value" @change="handleChange" @blur="handleBlur">
+    </template>
+  </DynamicFormTemplate>
+</template>
+```
 
-The library builds on `vee-validate` rather than replacing it.
+### 3. Wire up a form page
 
-### Built-in Rules
+```vue
+<!-- MyPage.vue -->
+<script setup lang="ts">
+import type { Metadata } from './MyFormTemplate';
+import { DynamicForm, useDynamicForm } from '@bach.software/vue-dynamic-form';
+import MyFormTemplate from './MyFormTemplate.vue';
 
-The core package defines XSD-inspired rules such as:
+const { handleSubmit } = useDynamicForm();
 
-- `xsd_required`
-- `xsd_minOccurs`
-- `xsd_choiceMinOccurs`
-- `xsd_minLength`
-- `xsd_maxLength`
-- `xsd_length`
-- `xsd_pattern`
-- `xsd_minInclusive`
-- `xsd_maxInclusive`
-- `xsd_minExclusive`
-- `xsd_maxExclusive`
-- `xsd_enumeration`
-- `xsd_whiteSpace`
-- `xsd_fractionDigits`
-- `xsd_totalDigits`
+const fields: Metadata[] = [
+  {
+    name: 'person',
+    type: 'heading',
+    fieldOptions: { label: 'Person' },
+    children: [
+      { name: 'firstName', type: 'text', fieldOptions: { label: 'First name' } },
+      { name: 'lastName', type: 'text', fieldOptions: { label: 'Last name' } },
+    ],
+  },
+];
+</script>
 
-### Message Resolution
+<template>
+  <form @submit.prevent="handleSubmit(values => console.log(values))">
+    <DynamicForm :metadata="fields" :template="MyFormTemplate" />
+  </form>
+</template>
+```
 
-Validation messages can come from:
+## Key Features
 
-1. `settings.messages`
-2. `vee-validate` `configure({ generateMessage })`
-3. default rule output
+### Fields that adapt automatically
 
-The message resolver supports both positional placeholders like `{0}` and semantic placeholders like `{min}`, `{length}`, `{digits}`, and `{field}`.
+Instead of writing watchers and side effects, describe what each field looks like given the current state. The library re-evaluates on every relevant change:
 
-### Custom Validation
+```ts
+const field = {
+  name: 'vatNumber',
+  type: 'text',
+  fieldOptions: { label: 'VAT Number' },
+  computedProps: [
+    (field) => {
+      field.disabled = accountType.value !== 'business';
+    }
+  ]
+};
+```
 
-Metadata can also include custom `vee-validate` validation expressions:
+No watchers, no event handlers. Change `accountType` and the field responds instantly. Works for visibility, options, validation rules, labels — anything on the field.
 
-- a single function
-- an array of functions
-- a pipe-separated string
-- an object expression
+### Repeatable sections
 
-The library splits multi-rule expressions into separate validation functions so multiple errors can be collected consistently.
+Control repetition with `minOccurs` and `maxOccurs`. The library manages array indexing, add/remove, and validates each occurrence independently:
 
-## Template Strategy
+```ts
+const field = {
+  name: 'contacts',
+  type: 'heading',
+  minOccurs: 1,
+  maxOccurs: 5,
+  arrayItemName: 'contact',
+  children: [
+    { name: 'name', type: 'text', fieldOptions: { label: 'Name' } },
+    { name: 'email', type: 'text', fieldOptions: { label: 'Email' } },
+  ],
+};
+```
 
-The recommended workflow is:
+### Mutually exclusive choices
 
-1. Use `defineMetadata()` to strongly type your form field types and custom metadata extensions.
-2. Create one `DynamicFormTemplate` implementation for your design system.
-3. Pass metadata plus template into `DynamicForm`.
+Branches that disable their siblings the moment one becomes active. Nested validation only applies to the active branch:
 
-This separation is important:
+```ts
+const field = {
+  name: 'payment',
+  type: 'heading',
+  choice: [
+    {
+      name: 'card',
+      fieldOptions: { label: 'Credit card' },
+      children: [
+        { name: 'number', type: 'text', fieldOptions: { label: 'Card number' } },
+      ],
+    },
+    {
+      name: 'transfer',
+      fieldOptions: { label: 'Bank transfer' },
+      children: [
+        { name: 'iban', type: 'text', fieldOptions: { label: 'IBAN' } },
+      ],
+    },
+  ],
+};
+```
 
-- the core package owns behavior
-- your template owns layout and styling
-- your app owns business-specific metadata
+### XSD-inspired validation rules
 
-## Example
+Built-in rules derived from the XSD specification, with human-readable message overrides:
 
 ```ts
-import { defineMetadata } from '@bach.software/vue-dynamic-form';
-
-const metadata = defineMetadata<
-  {
-    text: string
-    checkbox: boolean
-    heading: never
+const field = {
+  name: 'username',
+  type: 'text',
+  restriction: {
+    minLength: 3,
+    maxLength: 30,
+    pattern: '^[a-z0-9_]+$',
   },
-  {
-    label?: string
-    description?: string
-  }
->();
+};
 ```
 
-```vue
-<script setup lang="ts">
-import { DynamicForm, useDynamicForm } from '@bach.software/vue-dynamic-form';
-import MyFormTemplate from './MyFormTemplate.vue';
+Pass `settings.messages` to `DynamicForm` to customise any message globally.
 
-const { handleSubmit } = useDynamicForm();
-
-const formMetadata = [{
-  name: 'person',
-  type: 'heading',
-  children: [
-    { name: 'firstName', type: 'text', fieldOptions: { label: 'First name' } },
-    { name: 'lastName', type: 'text', fieldOptions: { label: 'Last name' } },
-  ],
-}];
-</script>
-
-<template>
-  <form @submit="handleSubmit(values => console.log(values))">
-    <DynamicForm :metadata="formMetadata" :template="MyFormTemplate" />
-  </form>
-</template>
-```
+## Documentation
 
-## Recommended Reading Order
+Full manual, API reference, and interactive demos at **[vue-dynamic-form.bach.software](https://vue-dynamic-form.bach.software)**.
 
-- Overview and demos: [../../docs/index.md](../../docs/index.md)
-- Getting started: [../../docs/guide/getting-started.md](../../docs/guide/getting-started.md)
-- How the model works: [../../docs/guide/how-it-works.md](../../docs/guide/how-it-works.md)
-- Templates: [../../docs/guide/templates.md](../../docs/guide/templates.md)
-- Validation: [../../docs/guide/validation.md](../../docs/guide/validation.md)
-- Interactive examples: [../../docs/examples/index.md](../../docs/examples/index.md)
+- [Getting started](https://vue-dynamic-form.bach.software/guide/getting-started)
+- [How it works](https://vue-dynamic-form.bach.software/guide/how-it-works)
+- [Building templates](https://vue-dynamic-form.bach.software/guide/building-templates)
+- [Dynamic fields](https://vue-dynamic-form.bach.software/guide/dynamic-fields)
+- [Validation](https://vue-dynamic-form.bach.software/guide/validation)
+- [Examples](https://vue-dynamic-form.bach.software/examples/)
+- [Reference](https://vue-dynamic-form.bach.software/reference/)

package/dist/examples.cjs.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("./useDynamicForm-3E1RNkVq.cjs"),C={key:0,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"size-3"},v={key:1,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"size-3"},h=e.defineComponent({__name:"IconButton",props:{icon:{},color:{default:"blue"}},emits:["click"],setup(f){return(c,i)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800",{"bg-blue-200 hover:bg-blue-300":c.color==="blue","bg-red-200 hover:bg-red-300":c.color==="red"}]),onClick:i[0]||(i[0]=k=>c.$emit("click"))},[c.icon==="plus"?(e.openBlock(),e.createElementBlock("svg",C,i[1]||(i[1]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 4.5v15m7.5-7.5h-15"},null,-1)]))):e.createCommentVNode("",!0),c.icon==="minus"?(e.openBlock(),e.createElementBlock("svg",v,i[2]||(i[2]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M5 12h14"},null,-1)]))):e.createCommentVNode("",!0)],2))}}),B={class:"text-sm whitespace-pre-wrap"},N=["data-testid"],V={class:"grid grid-cols-1 md:grid-cols-2 gap-6"},O={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},_={class:"text-sm whitespace-pre-wrap"},E=["data-testid"],w={key:0,class:"-ml-0.5 text-red-500"},S={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},D={class:"text-sm whitespace-pre-wrap"},$=["data-testid"],T=["for"],F={key:0,class:"-ml-0.5 text-red-500"},W={class:"text-sm whitespace-pre-wrap"},q=["data-testid"],z={key:0,class:"-ml-0.5 text-red-500"},P={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},R={class:"text-sm whitespace-pre-wrap"},L=["data-testid"],I=["for"],U={key:0,class:"-ml-0.5 text-red-500"},j={class:"flex gap-2 items-center"},A={class:"flex flex-col grow"},G={class:"text-sm whitespace-pre-wrap"},H=["data-testid"],J=["id","value","disabled","onChange","onBlur"],Y=["value"],Q=["id","onUpdate:modelValue","disabled","onBlur"],X=["value"],Z=["id","checked","disabled","onChange","onBlur"],K=["id","onUpdate:modelValue","disabled","onBlur"],M=["id","onUpdate:modelValue","disabled","onBlur"],ee=["id","value","disabled","onInput","onBlur"],y=e.defineComponent({__name:"TestFormTemplate",props:{slotProps:{}},setup(f){const c=g.defineMetadata();return(i,k)=>(e.openBlock(),e.createBlock(g._sfc_main$4,{"metadata-configuration":e.unref(c)},{heading:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:n,canAddItems:s,addItem:a,canRemoveItems:u,removeItem:m})=>[e.createElementVNode("div",{class:e.normalizeClass(["mt-4",{"md:col-span-2":t.fullWidth}])},[o?(e.openBlock(),e.createElementBlock("h3",{key:0,class:e.normalizeClass(["flex text-xl font-bold gap-2 items-center mb-2",{"text-gray-500":t.disabled||n}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),s?(e.openBlock(),e.createBlock(h,{key:0,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:a},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0),u?(e.openBlock(),e.createBlock(h,{key:1,icon:"minus",tabindex:"-1",color:"red","data-testid":`${t.path}-remove-button`,onClick:m},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("pre",B,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",V,[e.renderSlot(i.$slots,"default",{level:(i.slotProps?.level??0)+1})])],2)]),choice:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:n,required:s})=>[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[e.createElementVNode("span",{class:e.normalizeClass(["flex gap-2 items-center",{"text-gray-500":n,"after:content-['*'] after:-ml-0.5 after:text-red-500":s}])},e.toDisplayString(o),3),e.createElementVNode("div",O,[e.renderSlot(i.$slots,"default",{level:(i.slotProps?.level??0)+1,belowChoiceField:!0})]),e.createElementVNode("pre",_,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,E)):e.createCommentVNode("",!0)],2)]),array:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:n,required:s,canAddItems:a,addItem:u})=>[i.slotProps?.belowChoiceField?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass({"md:col-span-2":t.fullWidth})},[e.createElementVNode("span",{class:e.normalizeClass(["flex gap-2 items-center mb-2",{"text-gray-500":t.disabled||n}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),s?(e.openBlock(),e.createElementBlock("span",w,"*")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(h,{key:1,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:u},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",S,[e.renderSlot(i.$slots,"default",{level:(i.slotProps?.level??0)+1})]),e.createElementVNode("pre",D,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,$)):e.createCommentVNode("",!0)],2)):t.children?.length?e.renderSlot(i.$slots,"default",{key:1}):(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[e.createElementVNode("label",{for:`${t.path}[0]`,class:e.normalizeClass([{"text-gray-500":t.disabled||n},"flex gap-2 items-center"])},[e.createTextVNode(e.toDisplayString(o)+" ",1),s?(e.openBlock(),e.createElementBlock("span",F,"*")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(h,{key:1,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:u},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],10,T),e.renderSlot(i.$slots,"default",{hideLabel:!0}),e.createElementVNode("pre",W,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,q)):e.createCommentVNode("",!0)],2))]),default:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:n,required:s,canAddItems:a,canRemoveItems:u,addItem:m,removeItem:d})=>[t.children?.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass({"md:col-span-2":t.fullWidth})},[i.slotProps?.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["flex gap-2 items-center mb-2",{"text-gray-500":t.disabled||n}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),s?(e.openBlock(),e.createElementBlock("span",z,"*")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(h,{key:1,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:m},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0),u?(e.openBlock(),e.createBlock(h,{key:2,icon:"minus",tabindex:"-1","data-testid":`${t.path}-remove-button`,color:"red",onClick:d},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2)),e.createElementVNode("div",P,[e.renderSlot(i.$slots,"default",{level:(i.slotProps?.level??0)+1})]),e.createElementVNode("pre",R,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,L)):e.createCommentVNode("",!0)],2)):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[i.slotProps?.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("label",{key:0,for:t.path,class:e.normalizeClass({"text-gray-500":t.disabled||n})},[e.createTextVNode(e.toDisplayString(o)+" ",1),s?(e.openBlock(),e.createElementBlock("span",U,"*")):e.createCommentVNode("",!0)],10,I)),e.createElementVNode("div",j,[e.createElementVNode("div",A,[e.renderSlot(i.$slots,"default")]),e.createVNode(h,{class:e.normalizeClass({invisible:!u}),icon:"minus",tabindex:"-1",color:"red","data-testid":`${t.path}-remove-button`,onClick:d},null,8,["class","data-testid","onClick"])]),e.createElementVNode("pre",G,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,H)):e.createCommentVNode("",!0)],2)),e.renderSlot(i.$slots,"attributes")]),"select-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:n},disabled:s})=>[e.createElementVNode("select",{id:t.path,value:l.value,disabled:t.disabled||s,class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onChange:n,onBlur:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,({key:a,value:u})=>(e.openBlock(),e.createElementBlock("option",{key:a,value:a},e.toDisplayString(u),9,Y))),128))],40,J)]),"selectBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:n})=>[e.withDirectives(e.createElementVNode("select",{id:t.path,"onUpdate:modelValue":s=>l.value=s,disabled:t.disabled||n,class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,({key:s,value:a})=>(e.openBlock(),e.createElementBlock("option",{key:s,value:s},e.toDisplayString(a),9,X))),128))],40,Q),[[e.vModelSelect,l.value]])]),"checkbox-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:n},disabled:s})=>[e.createElementVNode("input",{id:t.path,checked:l.value,disabled:t.disabled||s,type:"checkbox",class:"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onChange:a=>n(a.target.checked),onBlur:o},null,40,Z)]),"checkboxBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:n})=>[e.withDirectives(e.createElementVNode("input",{id:t.path,"onUpdate:modelValue":s=>l.value=s,disabled:t.disabled||n,type:"checkbox",class:"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},null,40,K),[[e.vModelCheckbox,l.value]])]),"textBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:n})=>[e.withDirectives(e.createElementVNode("input",{id:t.path,"onUpdate:modelValue":s=>l.value=s,disabled:t.disabled||n,type:"text",class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},null,40,M),[[e.vModelText,l.value]])]),"default-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:n},disabled:s})=>[e.createElementVNode("input",{id:t.path,value:l.value,disabled:t.disabled||s,type:"text",class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onInput:n,onBlur:o},null,40,ee)]),_:3},8,["metadata-configuration"]))}}),te={class:"flex justify-end gap-2"},le={key:1,type:"submit",class:"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded","data-testid":"submit"},oe={key:0,"data-testid":"errors",class:"col-12 text-red-600"},ne=["innerHTML"],se={key:1,"data-testid":"isSubmitted"},ie={key:2,class:"bg-gray-100 p-4 rounded-lg text-sm overflow-auto"},re=e.defineComponent({__name:"TestForm",props:{metadata:{},settings:{},showDebugState:{type:Boolean,default:!1}},setup(f){const{values:c,handleSubmit:i,errors:k,meta:t}=g.useDynamicForm(),l=e.ref(),o=e.ref(!0),n=e.ref(!1),s=e.computed(()=>f.metadata?.map(d=>m(d,r=>(r.computedProps=r.computedProps??[],r.computedProps?.push(p=>{o.value||(p.disabled=!0)}),r)))),a=e.computed(()=>({analytics:!0,messages:{required:"{field} is required",minOccurs:"At least {min} items required",choiceMinOccurs:"The following fields need to occur at least {min} time(s): {field}",minLength:"The minimum length of {field} is {length}",maxLength:"The maximum length of {field} is {length}",length:"{field} must be exactly {length} characters",pattern:"{field} does not match the required pattern",minInclusive:"{field} must be at least {min}",maxInclusive:"{field} must be at most {max}",minExclusive:"{field} must be greater than {min}",maxExclusive:"{field} must be less than {max}",enumeration:"{field} must be one of the allowed values",whiteSpace:"{field} contains invalid whitespace (mode: {mode})",fractionDigits:"{field} may have at most {digits} decimal place(s)",totalDigits:"{field} may have at most {digits} significant digit(s)"},...f.settings??{}}));function u(d){i(r=>{n.value=!0},({errors:r})=>{n.value=!1})(d)}function m(d,r){return!d||!r||(d=r?.({...d}),d.children=d?.children?.map(p=>m(p,r)),d.choice=d?.choice?.map(p=>m(p,r))),d}return(d,r)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:u},[e.createElementVNode("div",te,[o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded","data-testid":"submit",onClick:r[0]||(r[0]=p=>o.value=!0)}," Edit ")),o.value?(e.openBlock(),e.createElementBlock("button",le," Submit ")):e.createCommentVNode("",!0),o.value?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded","data-testid":"cancel",onClick:r[1]||(r[1]=p=>o.value=!1)}," Cancel ")):e.createCommentVNode("",!0)]),Object.values(e.unref(k)).length?(e.openBlock(),e.createElementBlock("div",oe,[r[3]||(r[3]=e.createTextVNode(" Errors: ",-1)),e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(p,x)=>(e.openBlock(),e.createElementBlock("li",{key:x},[e.createElementVNode("span",{innerHTML:p},null,8,ne)]))),128))])])):e.createCommentVNode("",!0),e.createVNode(g._sfc_main,{template:y,metadata:s.value,settings:a.value,"onUpdate:modelValue":r[2]||(r[2]=p=>l.value=p)},null,8,["metadata","settings"]),n.value?(e.openBlock(),e.createElementBlock("span",se)):e.createCommentVNode("",!0),d.showDebugState?(e.openBlock(),e.createElementBlock("pre",ie,"IsDirty: "+e.toDisplayString(e.unref(t).dirty)+`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("./useDynamicForm-CIS8GwHy.cjs");function y(d,u){return!d||!u||(d=u?.({...d}),d.children=d?.children?.map(r=>y(r,u)),d.choice=d?.choice?.map(r=>y(r,u))),d}const v={key:0,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"size-3"},N={key:1,xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",class:"size-3"},k=e.defineComponent({__name:"IconButton",props:{icon:{},color:{default:"blue"}},emits:["click"],setup(d){return(u,r)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(["cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800 cursor-pointer",{"bg-blue-200 hover:bg-blue-300":u.color==="blue","bg-red-200 hover:bg-red-300":u.color==="red"}]),onClick:r[0]||(r[0]=b=>u.$emit("click"))},[u.icon==="plus"?(e.openBlock(),e.createElementBlock("svg",v,r[1]||(r[1]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 4.5v15m7.5-7.5h-15"},null,-1)]))):e.createCommentVNode("",!0),u.icon==="minus"?(e.openBlock(),e.createElementBlock("svg",N,r[2]||(r[2]=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M5 12h14"},null,-1)]))):e.createCommentVNode("",!0)],2))}}),V={class:"text-sm whitespace-pre-wrap"},_=["data-testid"],E={class:"grid grid-cols-1 md:grid-cols-2 gap-6"},O={key:0,class:"text-red-500 dark:text-rose-400"},w={key:1,class:"text-sm text-gray-400"},S={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},$={class:"text-sm whitespace-pre-wrap"},D=["data-testid"],T=["for"],F={key:0,class:"text-red-500 dark:text-rose-400"},W={key:1,class:"text-sm text-gray-400"},z={class:"text-sm whitespace-pre-wrap"},L=["data-testid"],q=["for"],I={key:0,class:"text-red-500 dark:text-rose-400"},R={key:1,class:"text-sm text-gray-400"},A={class:"flex gap-2 items-center"},U={class:"flex flex-col grow"},j={class:"text-sm whitespace-pre-wrap"},P=["data-testid"],G={key:0,class:"text-red-500 dark:text-rose-400"},H={key:1,class:"text-sm text-gray-400"},J={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},Y={class:"text-sm whitespace-pre-wrap"},Q=["data-testid"],X={key:0,class:"text-red-500 dark:text-rose-400"},Z={key:1,class:"text-sm text-gray-400"},K={class:"grid grid-cols-1 md:grid-cols-2 gap-6 ms-6"},M={class:"text-sm whitespace-pre-wrap"},ee=["data-testid"],te=["id","value","disabled","onChange","onBlur"],le=["value"],oe=["id","onUpdate:modelValue","disabled","onBlur"],ne=["value"],ie=["id","checked","disabled","onChange","onBlur"],se=["id","onUpdate:modelValue","disabled","onBlur"],re=["id","onUpdate:modelValue","disabled","onBlur"],ae=["id","value","disabled","onInput","onBlur"],C=e.defineComponent({__name:"TestFormTemplate",setup(d){const u=g.defineMetadata();return(r,b)=>(e.openBlock(),e.createBlock(g._sfc_main$4,{"metadata-configuration":e.unref(u)},{heading:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,canAddItems:n,addItem:a,canRemoveItems:p,removeItem:c,slotProps:s})=>[t.hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["mt-4",{"md:col-span-2":t.fullWidth}])},[o?(e.openBlock(),e.createElementBlock("h3",{key:0,class:e.normalizeClass(["flex text-xl font-bold gap-2 items-center mb-2",{"text-gray-500":t.disabled||i}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n?(e.openBlock(),e.createBlock(k,{key:0,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:a},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0),p?(e.openBlock(),e.createBlock(k,{key:1,icon:"minus",tabindex:"-1",color:"red","data-testid":`${t.path}-remove-button`,onClick:c},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("pre",V,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,_)):e.createCommentVNode("",!0),e.createElementVNode("div",E,[e.renderSlot(r.$slots,"default",{level:(s?.level??0)+1})])],2))]),"heading-array":e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),"default-choice":e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,required:n,slotProps:a,settings:{showOptionalInsteadOfRequired:p}})=>[t.hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[e.createElementVNode("span",{class:e.normalizeClass(["flex gap-2 items-center",{"text-gray-500":i}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n&&!p?(e.openBlock(),e.createElementBlock("span",O,"*")):e.createCommentVNode("",!0),!n&&p?(e.openBlock(),e.createElementBlock("span",w,"(optional)")):e.createCommentVNode("",!0)],2),e.createElementVNode("div",S,[e.renderSlot(r.$slots,"default",{level:(a?.level??0)+1,belowChoiceField:!0})]),e.createElementVNode("pre",$,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,D)):e.createCommentVNode("",!0)],2))]),"default-array":e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,required:n,canAddItems:a,addItem:p,settings:{showOptionalInsteadOfRequired:c}})=>[t.hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[e.createElementVNode("label",{for:`${t.path}[0]`,class:e.normalizeClass([{"text-gray-500":t.disabled||i},"flex gap-2 items-center"])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n&&!c?(e.openBlock(),e.createElementBlock("span",F,"*")):e.createCommentVNode("",!0),!n&&c?(e.openBlock(),e.createElementBlock("span",W,"(optional)")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(k,{key:2,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:p},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],10,T),e.renderSlot(r.$slots,"default",{hideLabel:!0}),e.createElementVNode("pre",z,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,L)):e.createCommentVNode("",!0)],2))]),default:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,required:n,canRemoveItems:a,removeItem:p,slotProps:c,settings:{showOptionalInsteadOfRequired:s}})=>[t.hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["flex flex-col gap-2",{"md:col-span-2":t.fullWidth}])},[c?.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("label",{key:0,for:t.path,class:e.normalizeClass([{"text-gray-500":t.disabled||i},"flex gap-1 items-center"])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n&&!s?(e.openBlock(),e.createElementBlock("span",I,"*")):e.createCommentVNode("",!0),!n&&s?(e.openBlock(),e.createElementBlock("span",R,"(optional)")):e.createCommentVNode("",!0)],10,q)),e.createElementVNode("div",A,[e.createElementVNode("div",U,[e.renderSlot(r.$slots,"default")]),e.createVNode(k,{class:e.normalizeClass({invisible:!a}),icon:"minus",tabindex:"-1",color:"red","data-testid":`${t.path}-remove-button`,onClick:p},null,8,["class","data-testid","onClick"])]),e.createElementVNode("pre",j,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,P)):e.createCommentVNode("",!0)],2)),e.renderSlot(r.$slots,"attributes")]),"group-array":e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,required:n,canAddItems:a,addItem:p,slotProps:c,settings:{showOptionalInsteadOfRequired:s}})=>[t.hidden?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[],64)):c?.belowChoiceField?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass({"md:col-span-2":t.fullWidth})},[e.createElementVNode("span",{class:e.normalizeClass(["flex gap-2 items-center mb-2",{"text-gray-500":t.disabled||i}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n&&!s?(e.openBlock(),e.createElementBlock("span",G,"*")):e.createCommentVNode("",!0),!n&&s?(e.openBlock(),e.createElementBlock("span",H,"(optional)")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(k,{key:2,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:p},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2),e.createElementVNode("div",J,[e.renderSlot(r.$slots,"default",{level:(c?.level??0)+1})]),e.createElementVNode("pre",Y,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,Q)):e.createCommentVNode("",!0)],2)):e.renderSlot(r.$slots,"default",{key:2})]),group:e.withCtx(({fieldMetadata:t,fieldContext:{errorMessage:l,label:o},disabled:i,required:n,canAddItems:a,canRemoveItems:p,addItem:c,removeItem:s,slotProps:m,settings:{showOptionalInsteadOfRequired:h}})=>[t.hidden?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass({"md:col-span-2":t.fullWidth})},[m?.hideLabel?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["flex gap-2 items-center mb-2",{"text-gray-500":t.disabled||i}])},[e.createTextVNode(e.toDisplayString(o)+" ",1),n&&!h?(e.openBlock(),e.createElementBlock("span",X,"*")):e.createCommentVNode("",!0),!n&&h?(e.openBlock(),e.createElementBlock("span",Z,"(optional)")):e.createCommentVNode("",!0),a?(e.openBlock(),e.createBlock(k,{key:2,icon:"plus",tabindex:"-1","data-testid":`${t.path}-add-button`,onClick:c},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0),p?(e.openBlock(),e.createBlock(k,{key:3,icon:"minus",tabindex:"-1","data-testid":`${t.path}-remove-button`,color:"red",onClick:s},null,8,["data-testid","onClick"])):e.createCommentVNode("",!0)],2)),e.createElementVNode("div",K,[e.renderSlot(r.$slots,"default",{level:(m?.level??0)+1})]),e.createElementVNode("pre",M,e.toDisplayString(t.description),1),l.value?(e.openBlock(),e.createElementBlock("span",{key:1,class:"text-red-600 text-sm","data-testid":`${t.path}-error-message`},e.toDisplayString(l.value),9,ee)):e.createCommentVNode("",!0)],2)),e.renderSlot(r.$slots,"attributes")]),"select-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:i},disabled:n})=>[e.createElementVNode("select",{id:t.path,value:l.value,disabled:t.disabled||n,class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onChange:i,onBlur:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,({key:a,value:p})=>(e.openBlock(),e.createElementBlock("option",{key:a,value:a},e.toDisplayString(p),9,le))),128))],40,te)]),"selectBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:i})=>[e.withDirectives(e.createElementVNode("select",{id:t.path,"onUpdate:modelValue":n=>l.value=n,disabled:t.disabled||i,class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,({key:n,value:a})=>(e.openBlock(),e.createElementBlock("option",{key:n,value:n},e.toDisplayString(a),9,ne))),128))],40,oe),[[e.vModelSelect,l.value]])]),"checkbox-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:i},disabled:n})=>[e.createElementVNode("input",{id:t.path,checked:l.value,disabled:t.disabled||n,type:"checkbox",class:"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onChange:a=>i(a.target.checked),onBlur:o},null,40,ie)]),"checkboxBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:i})=>[e.withDirectives(e.createElementVNode("input",{id:t.path,"onUpdate:modelValue":n=>l.value=n,disabled:t.disabled||i,type:"checkbox",class:"h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},null,40,se),[[e.vModelCheckbox,l.value]])]),"textBoundByVModel-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o},disabled:i})=>[e.withDirectives(e.createElementVNode("input",{id:t.path,"onUpdate:modelValue":n=>l.value=n,disabled:t.disabled||i,type:"text",class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onBlur:o},null,40,re),[[e.vModelText,l.value]])]),"default-input":e.withCtx(({fieldMetadata:t,fieldContext:{value:l,handleBlur:o,handleChange:i},disabled:n})=>[e.createElementVNode("input",{id:t.path,value:l.value,disabled:t.disabled||n,type:"text",class:"h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",onInput:i,onBlur:o},null,40,ae)]),_:3},8,["metadata-configuration"]))}}),de={class:"flex justify-end gap-2"},ce={key:1,type:"submit",class:"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded","data-testid":"submit"},ue={key:0,"data-testid":"errors",class:"col-12 text-red-600"},pe=["innerHTML"],me={key:1,"data-testid":"isSubmitted"},he={key:2,class:"bg-gray-100 p-4 rounded-lg text-sm overflow-auto"},ke=e.defineComponent({__name:"TestForm",props:{metadata:{},settings:{},showDebugState:{type:Boolean,default:!1},initialEdit:{type:Boolean,default:!0},hideFieldsWithoutValue:{type:Boolean,default:!1},initialValues:{}},setup(d){const{values:u,handleSubmit:r,errors:b,meta:t}=g.useDynamicForm({initialValues:d.initialValues}),l=e.ref(),o=e.ref(d.initialEdit),i=e.ref(!1),n=e.computed(()=>d.metadata?.map(c=>y(c,s=>(s.computedProps=s.computedProps??[],s.computedProps.push(m=>{o.value||(m.disabled=!0)}),d.hideFieldsWithoutValue&&(s.computedProps.push((m,h)=>{!o.value&&!g.checkTreeHasValue(h.value)&&(m.hidden=!0)}),s.computedProps.push((m,h,x)=>{!o.value&&x.value.length>0&&x.value.every(B=>B.hidden)&&(m.hidden=!0)})),s)))),a=e.computed(()=>({analytics:!0,messages:{required:"{field} is required",minOccurs:"At least {min} items required",choiceMinOccurs:"The following fields need to occur at least {min} time(s): {field}",minLength:"The minimum length of {field} is {length}",maxLength:"The maximum length of {field} is {length}",length:"{field} must be exactly {length} characters",pattern:"{field} does not match the required pattern",minInclusive:"{field} must be at least {min}",maxInclusive:"{field} must be at most {max}",minExclusive:"{field} must be greater than {min}",maxExclusive:"{field} must be less than {max}",enumeration:"{field} must be one of the allowed values",whiteSpace:"{field} contains invalid whitespace (mode: {mode})",fractionDigits:"{field} may have at most {digits} decimal place(s)",totalDigits:"{field} may have at most {digits} significant digit(s)"},...d.settings??{}}));function p(c){r(s=>{i.value=!0,o.value=!1},({errors:s})=>{i.value=!1})(c)}return(c,s)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(p,["prevent"])},[e.createElementVNode("div",de,[o.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded","data-testid":"submit",onClick:s[0]||(s[0]=m=>o.value=!0)}," Edit ")),o.value?(e.openBlock(),e.createElementBlock("button",ce," Submit ")):e.createCommentVNode("",!0),o.value?(e.openBlock(),e.createElementBlock("button",{key:2,type:"button",class:"cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded","data-testid":"cancel",onClick:s[1]||(s[1]=m=>o.value=!1)}," Cancel ")):e.createCommentVNode("",!0)]),Object.values(e.unref(b)).length?(e.openBlock(),e.createElementBlock("div",ue,[s[3]||(s[3]=e.createTextVNode(" Errors: ",-1)),e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(b),(m,h)=>(e.openBlock(),e.createElementBlock("li",{key:h},[e.createElementVNode("span",{innerHTML:m},null,8,pe)]))),128))])])):e.createCommentVNode("",!0),e.createVNode(g._sfc_main,{template:C,metadata:n.value,settings:a.value,"onUpdate:modelValue":s[2]||(s[2]=m=>l.value=m)},null,8,["metadata","settings"]),i.value?(e.openBlock(),e.createElementBlock("span",me)):e.createCommentVNode("",!0),c.showDebugState?(e.openBlock(),e.createElementBlock("pre",he,"IsDirty: "+e.toDisplayString(e.unref(t).dirty)+`
 Pending: `+e.toDisplayString(e.unref(t).pending)+`
 Touched: `+e.toDisplayString(e.unref(t).touched)+`
 Valid: `+e.toDisplayString(e.unref(t).valid)+`
-Submitted: `+e.toDisplayString(n.value)+`
+Submitted: `+e.toDisplayString(i.value)+`
 
 // form values:
-`+e.toDisplayString(JSON.stringify(e.unref(c),null,2))+`
-    `,1)):e.createCommentVNode("",!0)],32))}}),de=b([{name:"text",type:"text",fieldOptions:{label:"Text Input"},path:"with.custom.structure",restriction:{maxLength:10}}]),ae=b([{fieldOptions:{label:"Array Fields"},type:"heading",children:[{fieldOptions:{label:"Optional field (max 3)"},minOccurs:0,maxOccurs:3},{fieldOptions:{label:"Required field (max 3)"},maxOccurs:3},{fieldOptions:{label:"2 Fields required"},minOccurs:2,maxOccurs:4},{fieldOptions:{label:"Section (2 sections required)"},type:"heading",minOccurs:2,maxOccurs:4,fullWidth:!0,children:[{fieldOptions:{label:"Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"},type:"select",options:[{key:"option1",value:"Option 1"},{key:"option2",value:"Option 2"},{key:"option3",value:"Option 3"}]},{fieldOptions:{label:"Nested field 3"},type:"checkbox"}]}]}]),ce=b([{fieldOptions:{label:"Grouped Fields"},type:"heading",children:[{fieldOptions:{label:"Required group"},children:[{fieldOptions:{label:"Required Nested field 1"},fullWidth:!0},{fieldOptions:{label:"Required Nested field 2"},fullWidth:!0}]},{fieldOptions:{label:"Optional group"},minOccurs:0,description:`The group is optional, therefore the children will only be required once 1 value is filled in.
+`+e.toDisplayString(JSON.stringify(e.unref(u),null,2))+`
+    `,1)):e.createCommentVNode("",!0)],32))}}),fe=f([{name:"text",type:"text",fieldOptions:{label:"Text Input"},path:"with.custom.structure",restriction:{maxLength:10}}]),ge=f([{fieldOptions:{label:"Array Fields"},type:"heading",children:[{fieldOptions:{label:"Optional field (max 3)"},minOccurs:0,maxOccurs:3},{fieldOptions:{label:"Required field (max 3)"},maxOccurs:3},{fieldOptions:{label:"2 Fields required"},minOccurs:2,maxOccurs:4},{fieldOptions:{label:"Section (2 sections required)"},type:"heading",minOccurs:2,maxOccurs:4,fullWidth:!0,children:[{fieldOptions:{label:"Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"},type:"select",options:[{key:"option1",value:"Option 1"},{key:"option2",value:"Option 2"},{key:"option3",value:"Option 3"}]},{fieldOptions:{label:"Nested field 3"},type:"checkbox"}]}]}]),be=f([{fieldOptions:{label:"Grouped Fields"},type:"heading",children:[{fieldOptions:{label:"Required group"},type:"group",children:[{fieldOptions:{label:"Required Nested field 1"},fullWidth:!0},{fieldOptions:{label:"Required Nested field 2"},fullWidth:!0}]},{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.
       
-You can test it by filling in one of the fields.`,children:[{fieldOptions:{label:"Required Nested field 1"},fullWidth:!0},{fieldOptions:{label:"Required Nested field 2"},fullWidth:!0}]}]},{fieldOptions:{label:"Grouped Array Fields"},type:"heading",children:[{fieldOptions:{label:"Required group"},maxOccurs:5,fullWidth:!0,children:[{fieldOptions:{label:"Required Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"}}]},{fieldOptions:{label:"Optional group"},minOccurs:0,maxOccurs:5,fullWidth:!0,children:[{fieldOptions:{label:"Required Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"}}]}]}]),ue=b([{fieldOptions:{label:"Choice Fields (minOccurs 1, maxOccurs 1)"},type:"heading",children:[{fieldOptions:{label:"Simple Choice Field"},fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"}},{fieldOptions:{label:"Nested Field 2"}}]}]},{fieldOptions:{label:"Choice Grouped Fields (minOccurs 1, maxOccurs 3)"},type:"heading",children:[{fieldOptions:{label:"Array Choice Field"},maxOccurs:3,fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"},children:[{fieldOptions:{label:"Nested Child Field 1"},fullWidth:!0},{fieldOptions:{label:"Nested Child Field 2"},fullWidth:!0}]},{fieldOptions:{label:"Nested Field 2"},children:[{fieldOptions:{label:"Nested Child Field 1"},fullWidth:!0},{fieldOptions:{label:"Nested Child Field 2"},fullWidth:!0}]}]}]},{fieldOptions:{label:"Choice Array Fields (minOccurs 1, maxOccurs 3)"},type:"heading",children:[{fieldOptions:{label:"Array Choice Field"},maxOccurs:3,fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"},maxOccurs:3},{fieldOptions:{label:"Nested Field 2"},maxOccurs:3}]}]}]),pe=b([{name:"items",type:"text",fieldOptions:{label:"Items"},maxOccurs:3,attributes:[{name:"lang",type:"text",minOccurs:0}]}],{});function b(f,c){return e.markRaw(e.defineComponent({render:()=>e.h(re,{metadata:f,settings:c,showDebugState:!0})}))}exports.TestFormTemplate=y;exports.arrayTestCase=ae;exports.choiceTestCase=ue;exports.createTestCase=b;exports.defaultTestCase=de;exports.groupTestCase=ce;exports.individualTestCase=pe;
+You can test it by filling in one of the fields.`,children:[{fieldOptions:{label:"Required Nested field 1"},fullWidth:!0},{fieldOptions:{label:"Required Nested field 2"},fullWidth:!0}]}]},{fieldOptions:{label:"Grouped Array Fields"},type:"heading",children:[{fieldOptions:{label:"Required group"},type:"group",maxOccurs:5,fullWidth:!0,children:[{fieldOptions:{label:"Required Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"}}]},{fieldOptions:{label:"Optional group"},type:"group",minOccurs:0,maxOccurs:5,fullWidth:!0,children:[{fieldOptions:{label:"Required Nested field 1"}},{fieldOptions:{label:"Required Nested field 2"}}]}]}]),ye=f([{fieldOptions:{label:"Choice Fields (minOccurs 1, maxOccurs 1)"},type:"heading",children:[{fieldOptions:{label:"Simple Choice Field"},fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"}},{fieldOptions:{label:"Nested Field 2"}}]}]},{fieldOptions:{label:"Choice Grouped Fields (minOccurs 1, maxOccurs 3)"},type:"heading",children:[{fieldOptions:{label:"Array Choice Field"},type:"group",maxOccurs:3,fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"},type:"group",children:[{fieldOptions:{label:"Nested Child Field 1"},fullWidth:!0},{fieldOptions:{label:"Nested Child Field 2"},fullWidth:!0}]},{fieldOptions:{label:"Nested Field 2"},type:"group",children:[{fieldOptions:{label:"Nested Child Field 1"},fullWidth:!0},{fieldOptions:{label:"Nested Child Field 2"},fullWidth:!0}]}]}]},{fieldOptions:{label:"Choice Array Fields (minOccurs 1, maxOccurs 3)"},type:"heading",children:[{fieldOptions:{label:"Array Choice Field"},type:"group",maxOccurs:3,fullWidth:!0,description:"In a choice field, only 1 of the fields can be filled in.",choice:[{fieldOptions:{label:"Nested Field 1"},maxOccurs:3},{fieldOptions:{label:"Nested Field 2"},maxOccurs:3}]}]}]),xe=f([{fieldOptions:{label:"Personal Info"},type:"heading",name:"person",description:"Only showing the fields that have a value. Click edit to change.",fullWidth:!0,children:[{name:"firstName",fieldOptions:{label:"First Name"}},{name:"lastName",fieldOptions:{label:"Last Name"}},{name:"email",fieldOptions:{label:"Email"}}]},{fieldOptions:{label:"Address"},type:"heading",name:"address",fullWidth:!0,children:[{name:"street",fieldOptions:{label:"Street"},minOccurs:0},{name:"city",fieldOptions:{label:"City"},minOccurs:0},{name:"country",fieldOptions:{label:"Country"},minOccurs:0}]}],void 0,{initialEdit:!1,hideFieldsWithoutValue:!0,initialValues:{person:{firstName:"Jack",lastName:"Smit"}}}),Ce=f([{name:"items",type:"text",fieldOptions:{label:"Items"},maxOccurs:3,attributes:[{name:"lang",type:"text",minOccurs:0}]}],{});function f(d,u,r={}){return e.markRaw(e.defineComponent({render:()=>e.h(ke,{...r,metadata:d,settings:u,showDebugState:!0})}))}exports.TestFormTemplate=C;exports.arrayTestCase=ge;exports.childFieldsTestCase=xe;exports.choiceTestCase=ye;exports.createTestCase=f;exports.defaultTestCase=fe;exports.groupTestCase=be;exports.individualTestCase=Ce;
 //# sourceMappingURL=examples.cjs.js.map