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

package/dist/examples.es.js

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