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

package/dist/examples.es.js

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

package/dist/examples.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.es.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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"}

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

@@ -1,8 +1,10 @@
 import type { DefineComponent } from 'vue';
+import type { DynamicFormSettings } from '../types/DynamicFormSettings';
 import type { FieldMetadata } from '../types/FieldMetadata';
 export interface DynamicFormProps<Metadata extends FieldMetadata> {
     metadata: Metadata | Metadata[];
     template: DefineComponent<object, object, any>;
+    settings?: DynamicFormSettings;
 }
 declare const _default: <Metadata extends FieldMetadata>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & DynamicFormProps<Metadata> & Partial<{}>> & import("vue").PublicProps;

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

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

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

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