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

package/README.md

@@ -1,11 +1,207 @@
-# Vue Dynamic Form - Under development (Not ready to use)
+# @bach.software/vue-dynamic-form
 
-A simple yet highly extendable dynamic form system, inspired by the flexibility of XSD and powered by Vee-Validate.
+`@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.
 
-## Create a new release
+For the manual site and runnable demos, start with [../../docs/index.md](../../docs/index.md).
 
-To create a new release for you PR, follow these steps:
+## What The Library Solves
 
-1. Create a new changeset by running `pnpm changeset`.
-2. Create your PR into the main branch.
-3. The release workflow will automatically be triggered.
+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`.
+
+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:
+
+- `person.firstName`
+- `person.contacts[0].email`
+- `invoice.lines[2].price`
+
+These paths are used both for rendered `id`s and for `vee-validate` field registration.
+
+### Groups
+
+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.
+
+### Arrays
+
+A field becomes repeatable when `maxOccurs > 1`, unless runtime overrides force different behavior. The array implementation:
+
+- 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
+
+### Choices
+
+A metadata item with `choice` is treated as a mutually exclusive branch selector. The choice engine:
+
+- 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
+
+This is the part that gives you XSD-like `<choice>` behavior in a Vue form.
+
+## Validation Model
+
+The library builds on `vee-validate` rather than replacing it.
+
+### Built-in Rules
+
+The core package defines XSD-inspired rules such as:
+
+- `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`
+
+### Message Resolution
+
+Validation messages can come from:
+
+1. `settings.messages`
+2. `vee-validate` `configure({ generateMessage })`
+3. default rule output
+
+The message resolver supports both positional placeholders like `{0}` and semantic placeholders like `{min}`, `{length}`, `{digits}`, and `{field}`.
+
+### Custom Validation
+
+Metadata can also include custom `vee-validate` validation expressions:
+
+- a single function
+- an array of functions
+- a pipe-separated string
+- an object expression
+
+The library splits multi-rule expressions into separate validation functions so multiple errors can be collected consistently.
+
+## Template Strategy
+
+The recommended workflow is:
+
+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`.
+
+This separation is important:
+
+- the core package owns behavior
+- your template owns layout and styling
+- your app owns business-specific metadata
+
+## Example
+
+```ts
+import { defineMetadata } from '@bach.software/vue-dynamic-form';
+
+const metadata = defineMetadata<
+  {
+    text: string
+    checkbox: boolean
+    heading: never
+  },
+  {
+    label?: string
+    description?: string
+  }
+>();
+```
+
+```vue
+<script setup lang="ts">
+import { DynamicForm, useDynamicForm } from '@bach.software/vue-dynamic-form';
+import MyFormTemplate from './MyFormTemplate.vue';
+
+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>
+```
+
+## Recommended Reading Order
+
+- 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)

package/dist/examples.cjs.js

@@ -0,0 +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)+`
+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)+`
+
+// 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.
+      
+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;
+//# sourceMappingURL=examples.cjs.js.map

package/dist/examples.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.cjs.js","sources":["../src/examples/components/IconButton.vue","../src/examples/TestFormTemplate.vue","../src/examples/TestForm.vue","../src/examples/TestFormTemplate.testcases.ts"],"sourcesContent":["<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\"\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\nexport interface Props {\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  slotProps?: {\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  }\n}\n\ndefineProps<Props>();\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  },\n  {\n    description?: string\n    options?: { key: string, value: string }[]\n    fullWidth?: boolean\n    disabled?: 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 }\">\n      <div 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 #choice=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required }\">\n      <div 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 #array=\"{ fieldMetadata, fieldContext: { errorMessage, label }, disabled, required, canAddItems, addItem }\">\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-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 the array has multiple fields, just show those fields, no extra label -->\n      <slot v-else-if=\"fieldMetadata.children?.length\" />\n      <!-- In case we show an input directly, show a label and buttons -->\n      <div v-else 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, canAddItems, canRemoveItems, addItem, removeItem }\">\n      <!-- In case we have multiple children, this is a grouped field and we adjust how it is displayed -->\n      <div v-if=\"fieldMetadata.children?.length\" :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      <!-- Otherwise load only the slot with the input -->\n      <div v-else 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 #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 { Metadata } from './TestFormTemplate.vue';\n\nimport type { DynamicFormSettings } from '@/types/DynamicFormSettings';\nimport { computed, ref } from 'vue';\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}\n\nconst { metadata, settings: _settings, showDebugState = false } = defineProps<Props>();\n\nconst { values, handleSubmit, errors, meta } = useDynamicForm();\nconst manualValues = ref();\nconst editMode = ref(true);\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  item.computedProps?.push((thisField) => {\n    // Re-compute the disabled property of each field, when editMode changes\n    if (!editMode.value)\n      thisField.disabled = true;\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    },\n    ({ errors: _errors }) => {\n      isSubmitted.value = false;\n    },\n  )(e);\n};\n\nfunction mapEachMetadataItem(metadata: Metadata, callbackFunc: (item: Metadata) => Metadata) {\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>\n\n<template>\n  <form @submit=\"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 { Metadata } from './TestFormTemplate.vue';\nimport type { DynamicFormSettings } from '@/types/DynamicFormSettings';\n\nimport { defineComponent, h, markRaw } from 'vue';\nimport TestForm from './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' }, 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' }, 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' }, 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' }, 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' }, 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' }, children: [{ fieldOptions: { label: 'Nested Child Field 1' }, fullWidth: true }, { fieldOptions: { label: 'Nested Child Field 2' }, fullWidth: true }] },\n        { fieldOptions: { label: 'Nested Field 2' }, children: [{ fieldOptions: { label: 'Nested Child Field 1' }, fullWidth: true }, { fieldOptions: { label: 'Nested Child Field 2' }, fullWidth: true }] },\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' }, 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 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) {\n  return markRaw(defineComponent({\n    render: () => h(TestForm, { metadata, settings, showDebugState: true }),\n  }));\n}\n"],"names":["_createElementBlock","color","$emit","icon","_openBlock","_hoisted_1","_cache","_createElementVNode","_hoisted_2","metadata","defineMetadata","_createBlock","DynamicFormTemplate","_unref","fieldMetadata","errorMessage","label","disabled","canAddItems","addItem","canRemoveItems","removeItem","_normalizeClass","_createTextVNode","_toDisplayString","IconButton","_hoisted_3","_renderSlot","_ctx","slotProps","_withCtx","required","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_20","_hoisted_21","_hoisted_22","_createVNode","_hoisted_23","_hoisted_24","value","handleBlur","handleChange","_Fragment","optionKey","optionValue","_hoisted_26","$event","_hoisted_28","_vModelSelect","_vModelCheckbox","_vModelText","values","handleSubmit","errors","meta","useDynamicForm","manualValues","ref","editMode","isSubmitted","metadataWithEdit","computed","__props","x","mapEachMetadataItem","item","thisField","settings","submit","e","_values","_errors","callbackFunc","_renderList","error","key","DynamicForm","TestFormTemplate","showDebugState","defaultTestCase","createTestCase","arrayTestCase","groupTestCase","choiceTestCase","individualTestCase","markRaw","defineComponent","h","TestForm"],"mappings":"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"}