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

package/dist/examples.es.js

@@ -1,6 +1,9 @@
-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 = {
+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",
@@ -8,7 +11,7 @@ const G = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, H = {
+}, X = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -23,344 +26,362 @@ const G = {
     color: { default: "blue" }
   },
   emits: ["click"],
-  setup(C) {
-    return (b, u) => (t(), l("button", {
+  setup(h) {
+    return (m, 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"
+      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] = (N) => b.$emit("click"))
+      onClick: u[0] || (u[0] = ($) => m.$emit("click"))
     }, [
-      b.icon === "plus" ? (t(), l("svg", G, u[1] || (u[1] = [
-        o("path", {
+      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)
-      ]))) : n("", !0),
-      b.icon === "minus" ? (t(), l("svg", H, u[2] || (u[2] = [
-        o("path", {
+      ]))) : 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)
-      ]))) : n("", !0)
+      ]))) : d("", !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 = {
+}), 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"
-}, 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 = {
+}, de = { class: "text-sm whitespace-pre-wrap" }, ne = ["data-testid"], oe = ["for"], re = {
   key: 0,
   class: "-ml-0.5 text-red-500"
-}, oe = { class: "text-sm whitespace-pre-wrap" }, ne = ["data-testid"], de = {
+}, 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"
-}, 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 = {
+}, 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"
-}, 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({
+}, 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",
-  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 }])
+  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 }])
         }, [
-          i ? (t(), l("h3", {
+          s ? (t(), l("h3", {
             key: 0,
-            class: m(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
+            class: g(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || n }])
           }, [
-            w(a(i) + " ", 1),
-            r ? (t(), O(_, {
+            C(a(s) + " ", 1),
+            o ? (t(), k(_, {
               key: 0,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: h
-            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            f ? (t(), O(_, {
+              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: k
-            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
-          ], 2)) : n("", !0),
-          o("pre", J, a(e.description), 1),
-          s.value ? (t(), l("span", {
+              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(s.value), 9, Y)) : n("", !0),
-          o("div", Q, [
-            y(u.$slots, "default", {
-              level: (u.slotProps?.level ?? 0) + 1
+          }, a(i.value), 9, K)) : d("", !0),
+          r("div", M, [
+            v(u.$slots, "default", {
+              level: (c?.level ?? 0) + 1
             })
           ])
-        ], 2)
+        ], 2))
+      ]),
+      "heading-array": x(() => [
+        v(u.$slots, "default")
       ]),
-      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 }])
+      "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 }])
         }, [
-          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,
+          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
             })
           ]),
-          o("pre", Z, a(e.description), 1),
-          s.value ? (t(), l("span", {
+          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(s.value), 9, K)) : n("", !0)
-        ], 2)
+          }, a(i.value), 9, le)) : d("", !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", {
+      "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: m({ "md:col-span-2": e.fullWidth })
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          o("span", {
-            class: m(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
+          r("label", {
+            for: `${e.path}[0]`,
+            class: g([{ "text-gray-500": e.disabled || n }, "flex gap-2 items-center"])
           }, [
-            w(a(i) + " ", 1),
-            r ? (t(), l("span", M, "*")) : n("", !0),
-            h ? (t(), O(_, {
+            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: 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", {
+              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(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 }])
+          }, 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 }])
         }, [
-          o("label", {
-            for: `${e.path}[0]`,
-            class: m([{ "text-gray-500": e.disabled || d }, "flex gap-2 items-center"])
+          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 }])
           }, [
-            w(a(i) + " ", 1),
-            r ? (t(), l("span", ie, "*")) : n("", !0),
-            h ? (t(), O(_, {
+            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: 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", {
+              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(s.value), 9, ne)) : n("", !0)
-        ], 2))
+          }, a(i.value), 9, be)) : d("", !0)
+        ], 2)) : v(u.$slots, "default", { key: 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", {
+      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: m({ "md:col-span-2": e.fullWidth })
+          class: g({ "md:col-span-2": e.fullWidth })
         }, [
-          u.slotProps?.hideLabel ? n("", !0) : (t(), l("span", {
+          b?.hideLabel ? d("", !0) : (t(), l("span", {
             key: 0,
-            class: m(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
+            class: g(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || n }])
           }, [
-            w(a(i) + " ", 1),
-            r ? (t(), l("span", de, "*")) : n("", !0),
-            h ? (t(), O(_, {
+            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: k
-            }, null, 8, ["data-testid", "onClick"])) : n("", !0),
-            f ? (t(), O(_, {
+              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: p
-            }, null, 8, ["data-testid", "onClick"])) : n("", !0)
+              onClick: c
+            }, null, 8, ["data-testid", "onClick"])) : d("", !0)
           ], 2)),
-          o("div", re, [
-            y(u.$slots, "default", {
-              level: (u.slotProps?.level ?? 0) + 1
+          r("div", ye, [
+            v(u.$slots, "default", {
+              level: (b?.level ?? 0) + 1
             })
           ]),
-          o("pre", ae, a(e.description), 1),
-          s.value ? (t(), l("span", {
+          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(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)
+          }, a(i.value), 9, ve)) : d("", !0)
         ], 2)),
-        y(u.$slots, "attributes")
+        v(u.$slots, "attributes")
       ]),
-      "select-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i, handleChange: d }, disabled: r }) => [
-        o("select", {
+      "select-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("select", {
           id: e.path,
-          value: s.value,
-          disabled: e.disabled || r,
+          value: i.value,
+          disabled: e.disabled || o,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: d,
-          onBlur: i
+          onChange: n,
+          onBlur: s
         }, [
-          (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)
+          (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: s, handleBlur: i }, disabled: d }) => [
-        F(o("select", {
+      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("select", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
-          disabled: e.disabled || d,
+          "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: i
+          onBlur: s
         }, [
-          (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]
+          (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: s, handleBlur: i, handleChange: d }, disabled: r }) => [
-        o("input", {
+      "checkbox-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("input", {
           id: e.path,
-          checked: s.value,
-          disabled: e.disabled || r,
+          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: (h) => d(h.target.checked),
-          onBlur: i
-        }, null, 40, ke)
+          onChange: (p) => n(p.target.checked),
+          onBlur: s
+        }, null, 40, we)
       ]),
-      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i }, disabled: d }) => [
-        F(o("input", {
+      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
-          disabled: e.disabled || d,
+          "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: i
-        }, null, 40, Oe), [
-          [D, s.value]
+          onBlur: s
+        }, null, 40, $e), [
+          [D, i.value]
         ])
       ]),
-      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i }, disabled: d }) => [
-        F(o("input", {
+      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s }, disabled: n }) => [
+        W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
-          disabled: e.disabled || d,
+          "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: i
-        }, null, 40, _e), [
-          [R, s.value]
+          onBlur: s
+        }, null, 40, Ne), [
+          [L, i.value]
         ])
       ]),
-      "default-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i, handleChange: d }, disabled: r }) => [
-        o("input", {
+      "default-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: s, handleChange: n }, disabled: o }) => [
+        r("input", {
           id: e.path,
-          value: s.value,
-          disabled: e.disabled || r,
+          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: d,
-          onBlur: i
-        }, null, 40, Ce)
+          onInput: n,
+          onBlur: s
+        }, null, 40, Fe)
       ]),
       _: 3
     }, 8, ["metadata-configuration"]));
   }
-}), $e = { class: "flex justify-end gap-2" }, Ne = {
+}), 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"
-}, Be = {
+}, Te = {
   key: 0,
   "data-testid": "errors",
   class: "col-12 text-red-600"
-}, Fe = ["innerHTML"], Te = {
+}, qe = ["innerHTML"], Se = {
   key: 1,
   "data-testid": "isSubmitted"
-}, We = {
+}, Ie = {
   key: 2,
   class: "bg-gray-100 p-4 rounded-lg text-sm overflow-auto"
-}, qe = /* @__PURE__ */ B({
+}, Re = /* @__PURE__ */ B({
   __name: "TestForm",
   props: {
     metadata: {},
     settings: {},
-    showDebugState: { type: Boolean, default: !1 }
+    showDebugState: { type: Boolean, default: !1 },
+    initialEdit: { type: Boolean, default: !0 },
+    hideFieldsWithoutValue: { type: Boolean, default: !1 },
+    initialValues: {}
   },
-  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(() => ({
+  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",
@@ -379,72 +400,71 @@ const G = {
         fractionDigits: "{field} may have at most {digits} decimal place(s)",
         totalDigits: "{field} may have at most {digits} significant digit(s)"
       },
-      ...C.settings ?? {}
+      ...h.settings ?? {}
     }));
-    function f(p) {
+    function y(f) {
       u(
         (c) => {
-          d.value = !0;
+          n.value = !0, s.value = !1;
         },
         ({ errors: c }) => {
-          d.value = !1;
+          n.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;
+      )(f);
     }
-    return (p, c) => (t(), l("form", { onSubmit: f }, [
-      o("div", $e, [
-        i.value ? n("", !0) : (t(), l("button", {
+    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] = (g) => i.value = !0)
+          onClick: c[0] || (c[0] = (b) => s.value = !0)
         }, " Edit ")),
-        i.value ? (t(), l("button", Ne, " Submit ")) : n("", !0),
-        i.value ? (t(), l("button", {
+        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] = (g) => i.value = !1)
-        }, " Cancel ")) : n("", !0)
+          onClick: c[1] || (c[1] = (b) => s.value = !1)
+        }, " Cancel ")) : d("", !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)
+      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))
         ])
-      ])) : n("", !0),
-      V(z, {
-        template: we,
-        metadata: r.value,
-        settings: h.value,
-        "onUpdate:modelValue": c[2] || (c[2] = (g) => s.value = g)
+      ])) : 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"]),
-      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) + `
+      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(v(b), null, 2)) + `
-    `, 1)) : n("", !0)
+` + a(JSON.stringify(O(m), null, 2)) + `
+    `, 1)) : d("", !0)
     ], 32));
   }
-}), Pe = $([{
+}), De = w([{
   name: "text",
   type: "text",
   fieldOptions: { label: "Text Input" },
   path: "with.custom.structure",
   restriction: { maxLength: 10 }
-}]), Re = $([{
+}]), Ae = w([{
   fieldOptions: { label: "Array Fields" },
   type: "heading",
   children: [
@@ -461,15 +481,15 @@ Submitted: ` + a(d.value) + `
       { fieldOptions: { label: "Nested field 3" }, type: "checkbox" }
     ] }
   ]
-}]), De = $([{
+}]), Ue = w([{
   fieldOptions: { label: "Grouped Fields" },
   type: "heading",
   children: [
-    { fieldOptions: { label: "Required group" }, 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" }, minOccurs: 0, description: `The group is optional, therefore the children will only be required once 1 value is filled in.
+    { 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 },
@@ -480,16 +500,16 @@ You can test it by filling in one of the fields.`, children: [
   fieldOptions: { label: "Grouped Array Fields" },
   type: "heading",
   children: [
-    { fieldOptions: { label: "Required group" }, maxOccurs: 5, fullWidth: !0, 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" }, minOccurs: 0, maxOccurs: 5, fullWidth: !0, children: [
+    { 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" } }
     ] }
   ]
-}]), Le = $([
+}]), je = w([
   {
     fieldOptions: { label: "Choice Fields (minOccurs 1, maxOccurs 1)" },
     type: "heading",
@@ -504,9 +524,15 @@ You can test it by filling in one of the fields.`, children: [
     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: "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 }
+        ] }
       ] }
     ]
   },
@@ -514,13 +540,46 @@ You can test it by filling in one of the fields.`, children: [
     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: "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 }
       ] }
     ]
   }
-]), Ee = $(
+]), 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",
@@ -535,18 +594,19 @@ You can test it by filling in one of the fields.`, children: [
     // validateOnBlur: true,
   }
 );
-function $(C, b) {
-  return E(B({
-    render: () => I(qe, { metadata: C, settings: b, showDebugState: !0 })
+function w(h, m, u = {}) {
+  return j(B({
+    render: () => P(Re, { ...u, metadata: h, settings: m, showDebugState: !0 })
   }));
 }
 export {
-  we as TestFormTemplate,
-  Re as arrayTestCase,
-  Le as choiceTestCase,
-  $ as createTestCase,
-  Pe as defaultTestCase,
-  De as groupTestCase,
-  Ee as individualTestCase
+  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