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

package/dist/examples.es.js

@@ -1,8 +1,5 @@
-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;
-}
+import { defineComponent as B, createElementBlock as l, openBlock as t, normalizeClass as g, createCommentVNode as s, createElementVNode as r, createBlock as O, unref as v, withCtx as x, withDirectives as W, vModelText as D, vModelCheckbox as I, Fragment as F, renderList as T, toDisplayString as u, vModelSelect as R, renderSlot as y, createTextVNode as w, createVNode as L, ref as V, computed as E, withModifiers as A, markRaw as U, h as j } from "vue";
+import { d as P, e as z, u as G, m as H, _ as J, h as Y } from "./mapEachMetadataItem-B4xJvJDj.js";
 const Q = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
@@ -26,29 +23,29 @@ const Q = {
     color: { default: "blue" }
   },
   emits: ["click"],
-  setup(h) {
-    return (f, c) => (t(), l("button", {
+  setup(b) {
+    return (k, c) => (t(), l("button", {
       type: "button",
-      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"
+      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": b.color === "blue",
+        "bg-red-200 hover:bg-red-300": b.color === "red"
       }]),
-      onClick: c[0] || (c[0] = (N) => f.$emit("click"))
+      onClick: c[0] || (c[0] = (N) => k.$emit("click"))
     }, [
-      f.icon === "plus" ? (t(), l("svg", Q, c[1] || (c[1] = [
+      b.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)
-      ]))) : s("", !0),
-      f.icon === "minus" ? (t(), l("svg", X, c[2] || (c[2] = [
+      ])])) : s("", !0),
+      b.icon === "minus" ? (t(), l("svg", X, [...c[2] || (c[2] = [
         r("path", {
           "stroke-linecap": "round",
           "stroke-linejoin": "round",
           d: "M5 12h14"
         }, null, -1)
-      ]))) : s("", !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 = {
@@ -57,10 +54,10 @@ const Q = {
 }, 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 = {
+}, 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"], de = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, de = {
+}, oe = {
   key: 1,
   class: "text-sm text-gray-400"
 }, ae = { class: "text-sm whitespace-pre-wrap" }, re = ["data-testid"], ue = ["for"], ce = {
@@ -69,13 +66,13 @@ const Q = {
 }, 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 = {
+}, he = { class: "flex gap-2 items-center" }, me = { class: "flex flex-col grow" }, be = { class: "text-sm whitespace-pre-wrap" }, fe = ["data-testid"], ge = {
   key: 0,
   class: "text-red-500 dark:text-rose-400"
-}, ye = {
+}, xe = {
   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 = {
+}, ye = { 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: "text-red-500 dark:text-rose-400"
 }, Oe = {
@@ -83,27 +80,27 @@ const Q = {
   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 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 }) => [
+  setup(b) {
+    const k = z();
+    return (c, N) => (t(), O(P, { "metadata-configuration": v(k) }, {
+      heading: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, canAddItems: d, addItem: p, canRemoveItems: h, removeItem: m, slotProps: a }) => [
         e.hidden ? s("", !0) : (t(), l("div", {
           key: 0,
-          class: y(["mt-4", { "md:col-span-2": e.fullWidth }])
+          class: g(["mt-4", { "md:col-span-2": e.fullWidth }])
         }, [
           n ? (t(), l("h3", {
             key: 0,
-            class: y(["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 || o }])
           }, [
             w(u(n) + " ", 1),
-            o ? (t(), O(C, {
+            d ? (t(), O(C, {
               key: 0,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
               onClick: p
             }, null, 8, ["data-testid", "onClick"])) : s("", !0),
-            b ? (t(), O(C, {
+            h ? (t(), O(C, {
               key: 1,
               icon: "minus",
               tabindex: "-1",
@@ -119,29 +116,29 @@ const Q = {
             "data-testid": `${e.path}-error-message`
           }, u(i.value), 9, K)) : s("", !0),
           r("div", M, [
-            v(c.$slots, "default", {
+            y(c.$slots, "default", {
               level: (a?.level ?? 0) + 1
             })
           ])
         ], 2))
       ]),
       "heading-array": x(() => [
-        v(c.$slots, "default")
+        y(c.$slots, "default")
       ]),
-      "default-choice": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: d, required: o, slotProps: p, settings: { showOptionalInsteadOfRequired: b } }) => [
+      "default-choice": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, slotProps: p, settings: { showOptionalInsteadOfRequired: h } }) => [
         e.hidden ? s("", !0) : (t(), l("div", {
           key: 0,
-          class: y(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
           r("span", {
-            class: y(["flex gap-2 items-center", { "text-gray-500": d }])
+            class: g(["flex gap-2 items-center", { "text-gray-500": o }])
           }, [
             w(u(n) + " ", 1),
-            o && !b ? (t(), l("span", ee, "*")) : s("", !0),
-            !o && b ? (t(), l("span", te, "(optional)")) : s("", !0)
+            d && !h ? (t(), l("span", ee, "*")) : s("", !0),
+            !d && h ? (t(), l("span", te, "(optional)")) : s("", !0)
           ], 2),
           r("div", le, [
-            v(c.$slots, "default", {
+            y(c.$slots, "default", {
               level: (p?.level ?? 0) + 1,
               belowChoiceField: !0
             })
@@ -154,27 +151,27 @@ const Q = {
           }, 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 } }) => [
+      "default-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, addItem: h, 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 }])
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
           r("label", {
             for: `${e.path}[0]`,
-            class: y([{ "text-gray-500": e.disabled || d }, "flex gap-2 items-center"])
+            class: g([{ "text-gray-500": e.disabled || o }, "flex gap-2 items-center"])
           }, [
             w(u(n) + " ", 1),
-            o && !m ? (t(), l("span", oe, "*")) : s("", !0),
-            !o && m ? (t(), l("span", de, "(optional)")) : s("", !0),
+            d && !m ? (t(), l("span", de, "*")) : s("", !0),
+            !d && m ? (t(), l("span", oe, "(optional)")) : s("", !0),
             p ? (t(), O(C, {
               key: 2,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: b
+              onClick: h
             }, null, 8, ["data-testid", "onClick"])) : s("", !0)
           ], 10, ne),
-          v(c.$slots, "default", { hideLabel: !0 }),
+          y(c.$slots, "default", { hideLabel: !0 }),
           r("pre", ae, u(e.description), 1),
           i.value ? (t(), l("span", {
             key: 0,
@@ -183,63 +180,63 @@ const Q = {
           }, u(i.value), 9, re)) : s("", !0)
         ], 2))
       ]),
-      default: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: d, required: o, canRemoveItems: p, removeItem: b, slotProps: m, settings: { showOptionalInsteadOfRequired: a } }) => [
+      default: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canRemoveItems: p, removeItem: h, slotProps: m, settings: { showOptionalInsteadOfRequired: a } }) => [
         e.hidden ? s("", !0) : (t(), l("div", {
           key: 0,
-          class: y(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
+          class: g(["flex flex-col gap-2", { "md:col-span-2": e.fullWidth }])
         }, [
           m?.hideLabel ? s("", !0) : (t(), l("label", {
             key: 0,
             for: e.path,
-            class: y([{ "text-gray-500": e.disabled || d }, "flex gap-1 items-center"])
+            class: g([{ "text-gray-500": e.disabled || o }, "flex gap-1 items-center"])
           }, [
             w(u(n) + " ", 1),
-            o && !a ? (t(), l("span", ce, "*")) : s("", !0),
-            !o && a ? (t(), l("span", pe, "(optional)")) : s("", !0)
+            d && !a ? (t(), l("span", ce, "*")) : s("", !0),
+            !d && a ? (t(), l("span", pe, "(optional)")) : s("", !0)
           ], 10, ue)),
           r("div", he, [
             r("div", me, [
-              v(c.$slots, "default")
+              y(c.$slots, "default")
             ]),
-            q(C, {
-              class: y({ invisible: !p }),
+            L(C, {
+              class: g({ invisible: !p }),
               icon: "minus",
               tabindex: "-1",
               color: "red",
               "data-testid": `${e.path}-remove-button`,
-              onClick: b
+              onClick: h
             }, null, 8, ["class", "data-testid", "onClick"])
           ]),
-          r("pre", fe, u(e.description), 1),
+          r("pre", be, u(e.description), 1),
           i.value ? (t(), l("span", {
             key: 1,
             class: "text-red-600 text-sm",
             "data-testid": `${e.path}-error-message`
-          }, u(i.value), 9, be)) : s("", !0)
+          }, u(i.value), 9, fe)) : s("", !0)
         ], 2)),
-        v(c.$slots, "attributes")
+        y(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 } }) => [
+      "group-array": x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, addItem: h, slotProps: m, settings: { showOptionalInsteadOfRequired: a } }) => [
         e.hidden ? (t(), l(F, { key: 0 }, [], 64)) : m?.belowChoiceField ? (t(), l("div", {
           key: 1,
-          class: y({ "md:col-span-2": e.fullWidth })
+          class: g({ "md:col-span-2": e.fullWidth })
         }, [
           r("span", {
-            class: y(["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 || o }])
           }, [
             w(u(n) + " ", 1),
-            o && !a ? (t(), l("span", ge, "*")) : s("", !0),
-            !o && a ? (t(), l("span", ye, "(optional)")) : s("", !0),
+            d && !a ? (t(), l("span", ge, "*")) : s("", !0),
+            !d && a ? (t(), l("span", xe, "(optional)")) : s("", !0),
             p ? (t(), O(C, {
               key: 2,
               icon: "plus",
               tabindex: "-1",
               "data-testid": `${e.path}-add-button`,
-              onClick: b
+              onClick: h
             }, null, 8, ["data-testid", "onClick"])) : s("", !0)
           ], 2),
-          r("div", xe, [
-            v(c.$slots, "default", {
+          r("div", ye, [
+            y(c.$slots, "default", {
               level: (m?.level ?? 0) + 1
             })
           ]),
@@ -249,20 +246,20 @@ const Q = {
             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 })
+        ], 2)) : y(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: _ } }) => [
+      group: x(({ fieldMetadata: e, fieldContext: { errorMessage: i, label: n }, disabled: o, required: d, canAddItems: p, canRemoveItems: h, addItem: m, removeItem: a, slotProps: f, settings: { showOptionalInsteadOfRequired: _ } }) => [
         e.hidden ? s("", !0) : (t(), l("div", {
           key: 0,
-          class: y({ "md:col-span-2": e.fullWidth })
+          class: g({ "md:col-span-2": e.fullWidth })
         }, [
-          g?.hideLabel ? s("", !0) : (t(), l("span", {
+          f?.hideLabel ? s("", !0) : (t(), l("span", {
             key: 0,
-            class: y(["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 || o }])
           }, [
             w(u(n) + " ", 1),
-            o && !_ ? (t(), l("span", _e, "*")) : s("", !0),
-            !o && _ ? (t(), l("span", Oe, "(optional)")) : s("", !0),
+            d && !_ ? (t(), l("span", _e, "*")) : s("", !0),
+            !d && _ ? (t(), l("span", Oe, "(optional)")) : s("", !0),
             p ? (t(), O(C, {
               key: 2,
               icon: "plus",
@@ -270,7 +267,7 @@ const Q = {
               "data-testid": `${e.path}-add-button`,
               onClick: m
             }, null, 8, ["data-testid", "onClick"])) : s("", !0),
-            b ? (t(), O(C, {
+            h ? (t(), O(C, {
               key: 3,
               icon: "minus",
               tabindex: "-1",
@@ -280,8 +277,8 @@ const Q = {
             }, null, 8, ["data-testid", "onClick"])) : s("", !0)
           ], 2)),
           r("div", Ce, [
-            v(c.$slots, "default", {
-              level: (g?.level ?? 0) + 1
+            y(c.$slots, "default", {
+              level: (f?.level ?? 0) + 1
             })
           ]),
           r("pre", we, u(e.description), 1),
@@ -291,82 +288,82 @@ const Q = {
             "data-testid": `${e.path}-error-message`
           }, u(i.value), 9, $e)) : s("", !0)
         ], 2)),
-        v(c.$slots, "attributes")
+        y(c.$slots, "attributes")
       ]),
-      "select-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: d }, disabled: o }) => [
+      "select-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
         r("select", {
           id: e.path,
           value: i.value,
-          disabled: e.disabled || o,
+          disabled: e.disabled || d,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: d,
+          onChange: o,
           onBlur: n
         }, [
-          (t(!0), l(F, null, T(e.options, ({ key: p, value: b }) => (t(), l("option", {
+          (t(!0), l(F, null, T(e.options, ({ key: p, value: h }) => (t(), l("option", {
             key: p,
             value: p
-          }, u(b), 9, Fe))), 128))
+          }, u(h), 9, Fe))), 128))
         ], 40, Ne)
       ]),
-      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: d }) => [
+      "selectBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
         W(r("select", {
           id: e.path,
-          "onUpdate:modelValue": (o) => i.value = o,
-          disabled: e.disabled || d,
+          "onUpdate:modelValue": (d) => i.value = d,
+          disabled: e.disabled || o,
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
           onBlur: n
         }, [
-          (t(!0), l(F, null, T(e.options, ({ key: o, value: p }) => (t(), l("option", {
-            key: o,
-            value: o
+          (t(!0), l(F, null, T(e.options, ({ key: d, value: p }) => (t(), l("option", {
+            key: d,
+            value: d
           }, u(p), 9, We))), 128))
         ], 40, Be), [
-          [A, i.value]
+          [R, i.value]
         ])
       ]),
-      "checkbox-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: d }, disabled: o }) => [
+      "checkbox-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
         r("input", {
           id: e.path,
           checked: i.value,
-          disabled: e.disabled || o,
+          disabled: e.disabled || d,
           type: "checkbox",
           class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onChange: (p) => d(p.target.checked),
+          onChange: (p) => o(p.target.checked),
           onBlur: n
         }, null, 40, Ve)
       ]),
-      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: d }) => [
+      "checkboxBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
         W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (o) => i.value = o,
-          disabled: e.disabled || d,
+          "onUpdate:modelValue": (d) => i.value = d,
+          disabled: e.disabled || o,
           type: "checkbox",
           class: "h-6 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
           onBlur: n
         }, null, 40, Te), [
-          [R, i.value]
+          [I, i.value]
         ])
       ]),
-      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: d }) => [
+      "textBoundByVModel-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n }, disabled: o }) => [
         W(r("input", {
           id: e.path,
-          "onUpdate:modelValue": (o) => i.value = o,
-          disabled: e.disabled || d,
+          "onUpdate:modelValue": (d) => i.value = d,
+          disabled: e.disabled || o,
           type: "text",
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
           onBlur: n
         }, null, 40, Se), [
-          [I, i.value]
+          [D, i.value]
         ])
       ]),
-      "default-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: d }, disabled: o }) => [
+      "default-input": x(({ fieldMetadata: e, fieldContext: { value: i, handleBlur: n, handleChange: o }, disabled: d }) => [
         r("input", {
           id: e.path,
           value: i.value,
-          disabled: e.disabled || o,
+          disabled: e.disabled || d,
           type: "text",
           class: "h-9 bg-gray-100 border-gray-200 border rounded px-3 text-sm",
-          onInput: d,
+          onInput: o,
           onBlur: n
         }, null, 40, Ee)
       ]),
@@ -398,16 +395,16 @@ const Q = {
     hideFieldsWithoutValue: { type: Boolean, default: !1 },
     initialValues: {}
   },
-  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(() => ({
+  setup(b) {
+    const { values: k, handleSubmit: c, errors: N, meta: e } = G({
+      initialValues: b.initialValues
+    }), i = V(), n = V(b.initialEdit), o = V(!1), d = E(() => b.metadata?.map((m) => H(m, (a) => (a.computedProps = a.computedProps ?? [], a.computedProps.push((f) => {
+      n.value || (f.disabled = !0);
+    }), b.hideFieldsWithoutValue && (a.computedProps.push((f, _) => {
+      !n.value && !Y(_.value) && (f.hidden = !0);
+    }), a.computedProps.push((f, _, S) => {
+      !n.value && S.value.length > 0 && S.value.every((q) => q.hidden) && (f.hidden = !0);
+    })), a)))), p = E(() => ({
       analytics: !0,
       messages: {
         required: "{field} is required",
@@ -426,20 +423,20 @@ const Q = {
         fractionDigits: "{field} may have at most {digits} decimal place(s)",
         totalDigits: "{field} may have at most {digits} significant digit(s)"
       },
-      ...h.settings ?? {}
+      ...b.settings ?? {}
     }));
-    function b(m) {
+    function h(m) {
       c(
         (a) => {
-          d.value = !0, n.value = !1;
+          o.value = !0, n.value = !1;
         },
         ({ errors: a }) => {
-          d.value = !1;
+          o.value = !1;
         }
       )(m);
     }
     return (m, a) => (t(), l("form", {
-      onSubmit: U(b, ["prevent"])
+      onSubmit: A(h, ["prevent"])
     }, [
       r("div", qe, [
         n.value ? s("", !0) : (t(), l("button", {
@@ -447,7 +444,7 @@ const Q = {
           type: "button",
           class: "cursor-pointer mt-4 bg-blue-500 text-white px-4 py-2 rounded",
           "data-testid": "submit",
-          onClick: a[0] || (a[0] = (g) => n.value = !0)
+          onClick: a[0] || (a[0] = (f) => n.value = !0)
         }, " Edit ")),
         n.value ? (t(), l("button", De, " Submit ")) : s("", !0),
         n.value ? (t(), l("button", {
@@ -455,32 +452,32 @@ const Q = {
           type: "button",
           class: "cursor-pointer mt-4 bg-gray-200 text-black px-4 py-2 rounded",
           "data-testid": "cancel",
-          onClick: a[1] || (a[1] = (g) => n.value = !1)
+          onClick: a[1] || (a[1] = (f) => n.value = !1)
         }, " Cancel ")) : s("", !0)
       ]),
-      Object.values(k(N)).length ? (t(), l("div", Ie, [
+      Object.values(v(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)
+          (t(!0), l(F, null, T(v(N), (f, _) => (t(), l("li", { key: _ }, [
+            r("span", { innerHTML: f }, null, 8, Re)
           ]))), 128))
         ])
       ])) : s("", !0),
-      q(J, {
+      L(J, {
         template: Le,
-        metadata: o.value,
+        metadata: d.value,
         settings: p.value,
-        "onUpdate:modelValue": a[2] || (a[2] = (g) => i.value = g)
+        "onUpdate:modelValue": a[2] || (a[2] = (f) => i.value = f)
       }, null, 8, ["metadata", "settings"]),
-      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) + `
+      o.value ? (t(), l("span", Ae)) : s("", !0),
+      b.showDebugState ? (t(), l("pre", Ue, "IsDirty: " + u(v(e).dirty) + `
+Pending: ` + u(v(e).pending) + `
+Touched: ` + u(v(e).touched) + `
+Valid: ` + u(v(e).valid) + `
+Submitted: ` + u(o.value) + `
 
 // form values:
-` + u(JSON.stringify(k(f), null, 2)) + `
+` + u(JSON.stringify(v(k), null, 2)) + `
     `, 1)) : s("", !0)
     ], 32));
   }
@@ -620,9 +617,9 @@ You can test it by filling in one of the fields.`, children: [
     // validateOnBlur: true,
   }
 );
-function $(h, f, c = {}) {
-  return j(B({
-    render: () => P(je, { ...c, metadata: h, settings: f, showDebugState: !0 })
+function $(b, k, c = {}) {
+  return U(B({
+    render: () => j(je, { ...c, metadata: b, settings: k, showDebugState: !0 })
   }));
 }
 export {