@bach.software/vue-dynamic-form 0.2.0 → 0.4.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 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,
   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",
@@ -16,351 +19,395 @@ const G = {
   "stroke-width": "1.5",
   stroke: "currentColor",
   class: "size-3"
-}, _ = /* @__PURE__ */ B({
+}, C = /* @__PURE__ */ B({
   __name: "IconButton",
   props: {
     icon: {},
     color: { default: "blue" }
   },
   emits: ["click"],
-  setup(C) {
-    return (b, u) => (t(), l("button", {
+  setup(h) {
+    return (f, c) => (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: 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] = (N) => b.$emit("click"))
+      onClick: c[0] || (c[0] = (N) => f.$emit("click"))
     }, [
-      b.icon === "plus" ? (t(), l("svg", G, u[1] || (u[1] = [
-        o("path", {
+      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)
-      ]))) : n("", !0),
-      b.icon === "minus" ? (t(), l("svg", H, u[2] || (u[2] = [
-        o("path", {
+      ]))) : 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)
-      ]))) : n("", !0)
+      ]))) : s("", !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 = {
+  key: 0,
+  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"
-}, 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 = {
+  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"
-}, oe = { class: "text-sm whitespace-pre-wrap" }, ne = ["data-testid"], de = {
+  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: "-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 = {
+  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"
-}, 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({
+  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",
-  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 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: y(["mt-4", { "md:col-span-2": e.fullWidth }])
         }, [
-          i ? (t(), l("h3", {
+          n ? (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: y(["flex text-xl font-bold gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
           }, [
-            w(a(i) + " ", 1),
-            r ? (t(), O(_, {
+            w(u(n) + " ", 1),
+            o ? (t(), O(C, {
               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"])) : s("", !0),
+            b ? (t(), O(C, {
               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: 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(s.value), 9, Y)) : n("", !0),
-          o("div", Q, [
-            y(u.$slots, "default", {
-              level: (u.slotProps?.level ?? 0) + 1
+          }, u(i.value), 9, K)) : s("", !0),
+          r("div", M, [
+            v(c.$slots, "default", {
+              level: (a?.level ?? 0) + 1
             })
           ])
-        ], 2)
+        ], 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)
+      "heading-array": x(() => [
+        v(c.$slots, "default")
       ]),
-      array: x(({ fieldMetadata: e, fieldContext: { errorMessage: s, label: i }, disabled: d, required: r, canAddItems: h, addItem: f }) => [
-        u.slotProps?.belowChoiceField ? (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: m({ "md:col-span-2": e.fullWidth })
+          class: y(["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("span", {
+            class: y(["flex gap-2 items-center", { "text-gray-500": 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)
+            w(u(n) + " ", 1),
+            o && !b ? (t(), l("span", ee, "*")) : s("", !0),
+            !o && b ? (t(), l("span", te, "(optional)")) : s("", !0)
           ], 2),
-          o("div", ee, [
-            y(u.$slots, "default", {
-              level: (u.slotProps?.level ?? 0) + 1
+          r("div", le, [
+            v(c.$slots, "default", {
+              level: (p?.level ?? 0) + 1,
+              belowChoiceField: !0
             })
           ]),
-          o("pre", te, a(e.description), 1),
-          s.value ? (t(), l("span", {
+          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(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 }])
+          }, u(i.value), 9, ie)) : s("", !0)
+        ], 2))
+      ]),
+      "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: y(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          o("label", {
+          r("label", {
             for: `${e.path}[0]`,
-            class: m([{ "text-gray-500": e.disabled || d }, "flex gap-2 items-center"])
+            class: y([{ "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,
+            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: 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: 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(s.value), 9, ne)) : n("", !0)
+          }, u(i.value), 9, re)) : s("", !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", {
+      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: m({ "md:col-span-2": e.fullWidth })
+          class: y(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
-          u.slotProps?.hideLabel ? n("", !0) : (t(), l("span", {
+          m?.hideLabel ? s("", !0) : (t(), l("label", {
             key: 0,
-            class: m(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
+            for: e.path,
+            class: y([{ "text-gray-500": e.disabled || d }, "flex gap-1 items-center"])
           }, [
-            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,
+            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")
+            ]),
+            q(C, {
+              class: y({ invisible: !p }),
               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
-            })
+              "data-testid": `${e.path}-remove-button`,
+              onClick: b
+            }, null, 8, ["class", "data-testid", "onClick"])
           ]),
-          o("pre", ae, a(e.description), 1),
-          s.value ? (t(), l("span", {
+          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(s.value), 9, ue)) : n("", !0)
-        ], 2)) : (t(), l("div", {
+          }, u(i.value), 9, be)) : s("", !0)
+        ], 2)),
+        v(c.$slots, "attributes")
+      ]),
+      "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: m(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: y({ "md:col-span-2": e.fullWidth })
         }, [
-          u.slotProps?.hideLabel ? n("", !0) : (t(), l("label", {
+          r("span", {
+            class: y(["flex gap-2 items-center mb-2", { "text-gray-500": e.disabled || d }])
+          }, [
+            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: b
+            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
+          ], 2),
+          r("div", xe, [
+            v(c.$slots, "default", {
+              level: (m?.level ?? 0) + 1
+            })
+          ]),
+          r("pre", ve, u(e.description), 1),
+          i.value ? (t(), l("span", {
             key: 0,
-            for: e.path,
-            class: m({ "text-gray-500": e.disabled || d })
+            class: "text-red-600 text-sm",
+            "data-testid": `${e.path}-error-message`
+          }, u(i.value), 9, ke)) : s("", !0)
+        ], 2)) : v(c.$slots, "default", { key: 2 })
+      ]),
+      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: y({ "md:col-span-2": e.fullWidth })
+        }, [
+          g?.hideLabel ? s("", !0) : (t(), l("span", {
+            key: 0,
+            class: y(["flex gap-2 items-center mb-2", { "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 }),
+            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: m
+            }, null, 8, ["data-testid", "onClick"])) : s("", !0),
+            b ? (t(), O(C, {
+              key: 3,
               icon: "minus",
               tabindex: "-1",
-              color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: p
-            }, null, 8, ["class", "data-testid", "onClick"])
+              color: "red",
+              onClick: a
+            }, null, 8, ["data-testid", "onClick"])) : s("", !0)
+          ], 2)),
+          r("div", Ce, [
+            v(c.$slots, "default", {
+              level: (g?.level ?? 0) + 1
+            })
           ]),
-          o("pre", be, a(e.description), 1),
-          s.value ? (t(), l("span", {
+          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(s.value), 9, fe)) : n("", !0)
+          }, u(i.value), 9, $e)) : s("", !0)
         ], 2)),
-        y(u.$slots, "attributes")
+        v(c.$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: n, handleChange: d }, 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
+          onBlur: n
         }, [
-          (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: b }) => (t(), l("option", {
+            key: p,
+            value: p
+          }, u(b), 9, Fe))), 128))
+        ], 40, Ne)
       ]),
-      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i }, disabled: d }) => [
-        F(o("select", {
+      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: d }) => [
+        W(r("select", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
+          "onUpdate:modelValue": (o) => i.value = o,
           disabled: e.disabled || d,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onBlur: i
+          onBlur: n
         }, [
-          (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
+          }, u(p), 9, We))), 128))
+        ], 40, Be), [
+          [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: n, handleChange: d }, 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) => d(p.target.checked),
+          onBlur: n
+        }, null, 40, Ve)
       ]),
-      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: s, handleBlur: i }, disabled: d }) => [
-        F(o("input", {
+      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: d }) => [
+        W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
+          "onUpdate:modelValue": (o) => i.value = o,
           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]
+          onBlur: n
+        }, null, 40, Te), [
+          [R, 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: n }, disabled: d }) => [
+        W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (r) => s.value = r,
+          "onUpdate:modelValue": (o) => i.value = o,
           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]
+          onBlur: n
+        }, null, 40, Se), [
+          [I, 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: n, handleChange: d }, 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)
+          onBlur: n
+        }, null, 40, Ee)
       ]),
       _: 3
     }, 8, ["metadata-configuration"]));
   }
-}), $e = { class: "flex justify-end gap-2" }, Ne = {
+}), 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"
-}, Be = {
+}, Ie = {
   key: 0,
   "data-testid": "errors",
   class: "col-12 text-red-600"
-}, Fe = ["innerHTML"], Te = {
+}, Re = ["innerHTML"], Ae = {
   key: 1,
   "data-testid": "isSubmitted"
-}, We = {
+}, Ue = {
   key: 2,
   class: "bg-gray-100 p-4 rounded-lg text-sm overflow-auto"
-}, qe = /* @__PURE__ */ B({
+}, je = /* @__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: f, handleSubmit: c, errors: N, meta: e } = H({
+      initialValues: h.initialValues
+    }), 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",
@@ -379,72 +426,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) {
-      u(
-        (c) => {
-          d.value = !0;
+    function b(m) {
+      c(
+        (a) => {
+          d.value = !0, n.value = !1;
         },
-        ({ errors: c }) => {
+        ({ errors: a }) => {
           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;
+      )(m);
     }
-    return (p, c) => (t(), l("form", { onSubmit: f }, [
-      o("div", $e, [
-        i.value ? n("", !0) : (t(), l("button", {
+    return (m, a) => (t(), l("form", {
+      onSubmit: U(b, ["prevent"])
+    }, [
+      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] = (g) => i.value = !0)
+          onClick: a[0] || (a[0] = (g) => n.value = !0)
         }, " Edit ")),
-        i.value ? (t(), l("button", Ne, " Submit ")) : n("", !0),
-        i.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] = (g) => i.value = !1)
-        }, " Cancel ")) : n("", !0)
+          onClick: a[1] || (a[1] = (g) => n.value = !1)
+        }, " Cancel ")) : s("", !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(k(N)).length ? (t(), l("div", Ie, [
+        a[3] || (a[3] = w(" Errors: ", -1)),
+        r("ul", null, [
+          (t(!0), l(F, null, T(k(N), (g, _) => (t(), l("li", { key: _ }, [
+            r("span", { innerHTML: g }, null, 8, Re)
           ]))), 128))
         ])
-      ])) : n("", !0),
-      V(z, {
-        template: we,
-        metadata: r.value,
-        settings: h.value,
-        "onUpdate:modelValue": c[2] || (c[2] = (g) => s.value = g)
+      ])) : s("", !0),
+      q(J, {
+        template: Le,
+        metadata: o.value,
+        settings: p.value,
+        "onUpdate:modelValue": a[2] || (a[2] = (g) => i.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) + `
+      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(v(b), null, 2)) + `
-    `, 1)) : n("", !0)
+` + u(JSON.stringify(k(f), null, 2)) + `
+    `, 1)) : s("", !0)
     ], 32));
   }
-}), Pe = $([{
+}), Ge = $([{
   name: "text",
   type: "text",
   fieldOptions: { label: "Text Input" },
   path: "with.custom.structure",
   restriction: { maxLength: 10 }
-}]), Re = $([{
+}]), He = $([{
   fieldOptions: { label: "Array Fields" },
   type: "heading",
   children: [
@@ -461,15 +507,15 @@ Submitted: ` + a(d.value) + `
       { fieldOptions: { label: "Nested field 3" }, type: "checkbox" }
     ] }
   ]
-}]), De = $([{
+}]), Je = $([{
   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 +526,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 = $([
+}]), Ye = $([
   {
     fieldOptions: { label: "Choice Fields (minOccurs 1, maxOccurs 1)" },
     type: "heading",
@@ -504,9 +550,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 +566,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 = $(
+]), Qe = $([
+  {
+    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"
+    }
+  }
+}), Xe = $(
   [{
     name: "items",
     type: "text",
@@ -535,18 +620,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 $(h, f, c = {}) {
+  return j(B({
+    render: () => P(je, { ...c, metadata: h, settings: f, showDebugState: !0 })
   }));
 }
 export {
-  we as TestFormTemplate,
-  Re as arrayTestCase,
-  Le as choiceTestCase,
+  Le as TestFormTemplate,
+  He as arrayTestCase,
+  Qe as childFieldsTestCase,
+  Ye as choiceTestCase,
   $ as createTestCase,
-  Pe as defaultTestCase,
-  De as groupTestCase,
-  Ee as individualTestCase
+  Ge as defaultTestCase,
+  Je as groupTestCase,
+  Xe as individualTestCase
 };
 //# sourceMappingURL=examples.es.js.map