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

package/dist/examples.es.js

@@ -0,0 +1,612 @@
+import { defineComponent as B, createElementBlock as l, openBlock as t, normalizeClass as g, createCommentVNode as d, createElementVNode as r, createBlock as k, unref as O, withCtx as x, withDirectives as W, vModelText as L, vModelCheckbox as D, Fragment as F, renderList as T, toDisplayString as a, vModelSelect as A, renderSlot as v, createTextVNode as C, createVNode as R, ref as V, computed as I, withModifiers as U, markRaw as j, h as P } from "vue";
+import { d as z, e as G, u as H, _ as J, i as Y } from "./useDynamicForm-C6-0mGw4.js";
+function q(h, m) {
+  return !h || !m || (h = m?.({ ...h }), h.children = h?.children?.map((u) => q(u, m)), h.choice = h?.choice?.map((u) => q(u, m))), h;
+}
+const Q = {
+  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"
+}, X = {
+  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"
+}, _ = /* @__PURE__ */ B({
+  __name: "IconButton",
+  props: {
+    icon: {},
+    color: { default: "blue" }
+  },
+  emits: ["click"],
+  setup(h) {
+    return (m, u) => (t(), l("button", {
+      type: "button",
+      class: g(["cursor-pointer inline-flex items-center justify-center rounded-full size-5 text-white-800 cursor-pointer", {
+        "bg-blue-200 hover:bg-blue-300": m.color === "blue",
+        "bg-red-200 hover:bg-red-300": m.color === "red"
+      }]),
+      onClick: u[0] || (u[0] = ($) => m.$emit("click"))
+    }, [
+      m.icon === "plus" ? (t(), l("svg", Q, u[1] || (u[1] = [
+        r("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M12 4.5v15m7.5-7.5h-15"
+        }, null, -1)
+      ]))) : d("", !0),
+      m.icon === "minus" ? (t(), l("svg", X, u[2] || (u[2] = [
+        r("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M5 12h14"
+        }, null, -1)
+      ]))) : d("", !0)
+    ], 2));
+  }
+}), Z = { class: "text-sm whitespace-pre-wrap" }, K = ["data-testid"], M = { class: "grid grid-cols-1 md:grid-cols-2 gap-6" }, ee = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, te = { class: "text-sm whitespace-pre-wrap" }, le = ["data-testid"], ie = ["for"], se = {
+  key: 0,
+  class: "-ml-0.5 text-red-500"
+}, de = { class: "text-sm whitespace-pre-wrap" }, ne = ["data-testid"], oe = ["for"], re = {
+  key: 0,
+  class: "-ml-0.5 text-red-500"
+}, ae = { class: "flex gap-2 items-center" }, ue = { class: "flex flex-col grow" }, ce = { class: "text-sm whitespace-pre-wrap" }, pe = ["data-testid"], he = {
+  key: 0,
+  class: "-ml-0.5 text-red-500"
+}, me = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, fe = { class: "text-sm whitespace-pre-wrap" }, be = ["data-testid"], ge = {
+  key: 0,
+  class: "-ml-0.5 text-red-500"
+}, ye = { class: "grid grid-cols-1 md:grid-cols-2 gap-6 ms-6" }, xe = { class: "text-sm whitespace-pre-wrap" }, ve = ["data-testid"], Oe = ["id", "value", "disabled", "onChange", "onBlur"], ke = ["value"], _e = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Ce = ["value"], we = ["id", "checked", "disabled", "onChange", "onBlur"], $e = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Ne = ["id", "onUpdate:modelValue", "disabled", "onBlur"], Fe = ["id", "value", "disabled", "onInput", "onBlur"], Be = /* @__PURE__ */ B({
+  __name: "TestFormTemplate",
+  setup(h) {
+    const m = G();
+    return (u, $) => (t(), k(z, { "metadata-configuration": O(m) }, {
+      heading: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, canAddItems: o, addItem: p, canRemoveItems: y, removeItem: f, slotProps: c }) => [
+        e.hidden ? d("", !0) : (t(), l("div", {
+          key: 0,
+          class: g(["mt-4", { "md:col-span-2": e.fullWidth }])
+        }, [
+          s ? (t(), l("h3", {
+            key: 0,
+            class: g(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || n }])
+          }, [
+            C(a(s) + " ", 1),
+            o ? (t(), k(_, {
+              key: 0,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-button`,
+              onClick: p
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0),
+            y ? (t(), k(_, {
+              key: 1,
+              icon: "minus",
+              tabindex: "-1",
+              color: "red",
+              "data-testid": `${e.path}-remove-button`,
+              onClick: f
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0)
+          ], 2)) : d("", !0),
+          r("pre", Z, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 1,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, K)) : d("", !0),
+          r("div", M, [
+            v(u.$slots, "default", {
+              level: (c?.level ?? 0) + 1
+            })
+          ])
+        ], 2))
+      ]),
+      "heading-array": x(() => [
+        v(u.$slots, "default")
+      ]),
+      "default-choice": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, required: o, slotProps: p }) => [
+        e.hidden ? d("", !0) : (t(), l("div", {
+          key: 0,
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          r("span", {
+            class: g(["flex gap-2 items-center", { "text-gray-500": n, "after:content-['*'] after:-ml-0.5 after:text-red-500": o }])
+          }, a(s), 3),
+          r("div", ee, [
+            v(u.$slots, "default", {
+              level: (p?.level ?? 0) + 1,
+              belowChoiceField: !0
+            })
+          ]),
+          r("pre", te, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 0,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, le)) : d("", !0)
+        ], 2))
+      ]),
+      "default-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, required: o, canAddItems: p, addItem: y }) => [
+        e.hidden ? d("", !0) : (t(), l("div", {
+          key: 0,
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          r("label", {
+            for: `${e.path}[0]`,
+            class: g([{ "text-gray-500": e.disabled || n }, "flex gap-2 items-center"])
+          }, [
+            C(a(s) + " ", 1),
+            o ? (t(), l("span", se, "*")) : d("", !0),
+            p ? (t(), k(_, {
+              key: 1,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-button`,
+              onClick: y
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0)
+          ], 10, ie),
+          v(u.$slots, "default", { hideLabel: !0 }),
+          r("pre", de, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 0,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, ne)) : d("", !0)
+        ], 2))
+      ]),
+      default: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, required: o, canRemoveItems: p, removeItem: y, slotProps: f }) => [
+        e.hidden ? d("", !0) : (t(), l("div", {
+          key: 0,
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+        }, [
+          f?.hideLabel ? d("", !0) : (t(), l("label", {
+            key: 0,
+            for: e.path,
+            class: g({ "text-gray-500": e.disabled || n })
+          }, [
+            C(a(s) + " ", 1),
+            o ? (t(), l("span", re, "*")) : d("", !0)
+          ], 10, oe)),
+          r("div", ae, [
+            r("div", ue, [
+              v(u.$slots, "default")
+            ]),
+            R(_, {
+              class: g({ invisible: !p }),
+              icon: "minus",
+              tabindex: "-1",
+              color: "red",
+              "data-testid": `${e.path}-remove-button`,
+              onClick: y
+            }, null, 8, ["class", "data-testid", "onClick"])
+          ]),
+          r("pre", ce, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 1,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, pe)) : d("", !0)
+        ], 2)),
+        v(u.$slots, "attributes")
+      ]),
+      "group-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, required: o, canAddItems: p, addItem: y, slotProps: f }) => [
+        e.hidden ? (t(), l(F, { key: 0 }, [], 64)) : f?.belowChoiceField ? (t(), l("div", {
+          key: 1,
+          class: g({ "md:col-span-2": e.fullWidth })
+        }, [
+          r("span", {
+            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || n }])
+          }, [
+            C(a(s) + " ", 1),
+            o ? (t(), l("span", he, "*")) : d("", !0),
+            p ? (t(), k(_, {
+              key: 1,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-button`,
+              onClick: y
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0)
+          ], 2),
+          r("div", me, [
+            v(u.$slots, "default", {
+              level: (f?.level ?? 0) + 1
+            })
+          ]),
+          r("pre", fe, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 0,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, be)) : d("", !0)
+        ], 2)) : v(u.$slots, "default", { key: 2 })
+      ]),
+      group: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: s }, disabled: n, required: o, canAddItems: p, canRemoveItems: y, addItem: f, removeItem: c, slotProps: b }) => [
+        e.hidden ? d("", !0) : (t(), l("div", {
+          key: 0,
+          class: g({ "md:col-span-2": e.fullWidth })
+        }, [
+          b?.hideLabel ? d("", !0) : (t(), l("span", {
+            key: 0,
+            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || n }])
+          }, [
+            C(a(s) + " ", 1),
+            o ? (t(), l("span", ge, "*")) : d("", !0),
+            p ? (t(), k(_, {
+              key: 1,
+              icon: "plus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-add-button`,
+              onClick: f
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0),
+            y ? (t(), k(_, {
+              key: 2,
+              icon: "minus",
+              tabindex: "-1",
+              "data-testid": `${e.path}-remove-button`,
+              color: "red",
+              onClick: c
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0)
+          ], 2)),
+          r("div", ye, [
+            v(u.$slots, "default", {
+              level: (b?.level ?? 0) + 1
+            })
+          ]),
+          r("pre", xe, a(e.description), 1),
+          i.value ? (t(), l("span", {
+            key: 1,
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, a(i.value), 9, ve)) : d("", !0)
+        ], 2)),
+        v(u.$slots, "attributes")
+      ]),
+      "select-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("select", {
+          id: e.path,
+          value: i.value,
+          disabled: e.disabled || o,
+          class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onChange: n,
+          onBlur: s
+        }, [
+          (t(!0), l(F, null, T(e.options, ({ key: p, value: y }) => (t(), l("option", {
+            key: p,
+            value: p
+          }, a(y), 9, ke))), 128))
+        ], 40, Oe)
+      ]),
+      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("select", {
+          id: e.path,
+          "onUpdate:modelValue": (o) => i.value = o,
+          disabled: e.disabled || n,
+          class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onBlur: s
+        }, [
+          (t(!0), l(F, null, T(e.options, ({ key: o, value: p }) => (t(), l("option", {
+            key: o,
+            value: o
+          }, a(p), 9, Ce))), 128))
+        ], 40, _e), [
+          [A, i.value]
+        ])
+      ]),
+      "checkbox-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("input", {
+          id: e.path,
+          checked: i.value,
+          disabled: e.disabled || o,
+          type: "checkbox",
+          class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onChange: (p) => n(p.target.checked),
+          onBlur: s
+        }, null, 40, we)
+      ]),
+      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("input", {
+          id: e.path,
+          "onUpdate:modelValue": (o) => i.value = o,
+          disabled: e.disabled || n,
+          type: "checkbox",
+          class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onBlur: s
+        }, null, 40, $e), [
+          [D, i.value]
+        ])
+      ]),
+      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("input", {
+          id: e.path,
+          "onUpdate:modelValue": (o) => i.value = o,
+          disabled: e.disabled || n,
+          type: "text",
+          class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onBlur: s
+        }, null, 40, Ne), [
+          [L, i.value]
+        ])
+      ]),
+      "default-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("input", {
+          id: e.path,
+          value: i.value,
+          disabled: e.disabled || o,
+          type: "text",
+          class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
+          onInput: n,
+          onBlur: s
+        }, null, 40, Fe)
+      ]),
+      _: 3
+    }, 8, ["metadata-configuration"]));
+  }
+}), We = { class: "flex justify-end gap-2" }, Ve = {
+  key: 1,
+  type: "submit",
+  class: "cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded",
+  "data-testid": "submit"
+}, Te = {
+  key: 0,
+  "data-testid": "errors",
+  class: "col-12 text-red-600"
+}, qe = ["innerHTML"], Se = {
+  key: 1,
+  "data-testid": "isSubmitted"
+}, Ie = {
+  key: 2,
+  class: "bg-gray-100 p-4 rounded-lg text-sm overflow-auto"
+}, Re = /* @__PURE__ */ B({
+  __name: "TestForm",
+  props: {
+    metadata: {},
+    settings: {},
+    showDebugState: { type: Boolean, default: !1 },
+    initialEdit: { type: Boolean, default: !0 },
+    hideFieldsWithoutValue: { type: Boolean, default: !1 },
+    initialValues: {}
+  },
+  setup(h) {
+    const { values: m, handleSubmit: u, errors: $, meta: e } = H({
+      initialValues: h.initialValues
+    }), i = V(), s = V(h.initialEdit), n = V(!1), o = I(() => h.metadata?.map((f) => q(f, (c) => (c.computedProps = c.computedProps ?? [], c.computedProps.push((b) => {
+      s.value || (b.disabled = !0);
+    }), h.hideFieldsWithoutValue && (c.computedProps.push((b, N) => {
+      !s.value && !Y(N.value) && (b.hidden = !0);
+    }), c.computedProps.push((b, N, S) => {
+      !s.value && S.value.length > 0 && S.value.every((E) => E.hidden) && (b.hidden = !0);
+    })), c)))), p = I(() => ({
+      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)"
+      },
+      ...h.settings ?? {}
+    }));
+    function y(f) {
+      u(
+        (c) => {
+          n.value = !0, s.value = !1;
+        },
+        ({ errors: c }) => {
+          n.value = !1;
+        }
+      )(f);
+    }
+    return (f, c) => (t(), l("form", {
+      onSubmit: U(y, ["prevent"])
+    }, [
+      r("div", We, [
+        s.value ? d("", !0) : (t(), l("button", {
+          key: 0,
+          type: "button",
+          class: "cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded",
+          "data-testid": "submit",
+          onClick: c[0] || (c[0] = (b) => s.value = !0)
+        }, " Edit ")),
+        s.value ? (t(), l("button", Ve, " Submit ")) : d("", !0),
+        s.value ? (t(), l("button", {
+          key: 2,
+          type: "button",
+          class: "cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded",
+          "data-testid": "cancel",
+          onClick: c[1] || (c[1] = (b) => s.value = !1)
+        }, " Cancel ")) : d("", !0)
+      ]),
+      Object.values(O($)).length ? (t(), l("div", Te, [
+        c[3] || (c[3] = C(" Errors: ", -1)),
+        r("ul", null, [
+          (t(!0), l(F, null, T(O($), (b, N) => (t(), l("li", { key: N }, [
+            r("span", { innerHTML: b }, null, 8, qe)
+          ]))), 128))
+        ])
+      ])) : d("", !0),
+      R(J, {
+        template: Be,
+        metadata: o.value,
+        settings: p.value,
+        "onUpdate:modelValue": c[2] || (c[2] = (b) => i.value = b)
+      }, null, 8, ["metadata", "settings"]),
+      n.value ? (t(), l("span", Se)) : d("", !0),
+      f.showDebugState ? (t(), l("pre", Ie, "IsDirty: " + a(O(e).dirty) + `
+Pending: ` + a(O(e).pending) + `
+Touched: ` + a(O(e).touched) + `
+Valid: ` + a(O(e).valid) + `
+Submitted: ` + a(n.value) + `
+
+// form values:
+` + a(JSON.stringify(O(m), null, 2)) + `
+    `, 1)) : d("", !0)
+    ], 32));
+  }
+}), De = w([{
+  name: "text",
+  type: "text",
+  fieldOptions: { label: "Text Input" },
+  path: "with.custom.structure",
+  restriction: { maxLength: 10 }
+}]), Ae = w([{
+  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" }
+    ] }
+  ]
+}]), Ue = w([{
+  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" }, 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" } }
+    ] }
+  ]
+}]), je = w([
+  {
+    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 }
+      ] }
+    ]
+  }
+]), Pe = w([
+  {
+    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"
+    }
+  }
+}), ze = w(
+  [{
+    name: "items",
+    type: "text",
+    fieldOptions: { label: "Items" },
+    maxOccurs: 3,
+    attributes: [{ name: "lang", type: "text", minOccurs: 0 }]
+  }],
+  {
+    // validateOnValueUpdate: false,
+    // validateOnValueUpdateAfterSubmit: false,
+    // validateWhenInError: true,
+    // validateOnBlur: true,
+  }
+);
+function w(h, m, u = {}) {
+  return j(B({
+    render: () => P(Re, { ...u, metadata: h, settings: m, showDebugState: !0 })
+  }));
+}
+export {
+  Be as TestFormTemplate,
+  Ae as arrayTestCase,
+  Pe as childFieldsTestCase,
+  je as choiceTestCase,
+  w as createTestCase,
+  De as defaultTestCase,
+  Ue as groupTestCase,
+  ze as individualTestCase
+};
+//# sourceMappingURL=examples.es.js.map