bt-core-app 2.1.36 → 2.2.0

package/dist/components/BT-Form-Builder.vue.mjs

@@ -0,0 +1,762 @@
+import { defineComponent as Me, ref as H, computed as O, watch as te, onMounted as Ae, resolveComponent as c, unref as e, openBlock as s, createElementBlock as m, createVNode as o, withCtx as a, normalizeStyle as I, createElementVNode as y, toDisplayString as C, createCommentVNode as v, withModifiers as k, createBlock as f, Fragment as q, renderList as $, renderSlot as j, mergeProps as x, createTextVNode as U, createSlots as He, normalizeProps as ne, guardReactiveProps as ae } from "vue";
+import { isNullOrEmpty as J, isLengthyArray as Oe } from "../composables/helpers.mjs";
+import Ie from "./BT-Form-Field.vue.mjs";
+import je from "./BT-Form.vue.mjs";
+import { useForms as Je, useFormTemplates as Ke, Fields as Qe, useFormSource as We } from "../composables/forms.mjs";
+import Xe from "./BT-Image-Select.vue.mjs";
+const Ye = { key: 0 }, Ze = { key: 0 }, el = { class: "text-h6" }, ll = {
+  key: 0,
+  class: "text-caption"
+}, ol = { class: "text-h6 ml-3" }, tl = { class: "mr-6" }, nl = ["onClick"], al = { class: "d-flex align-center" }, rl = {
+  style: { "min-height": "65px", "min-width": "64px" },
+  class: "ml-2"
+}, sl = {
+  key: "2",
+  class: "d-flex align-center"
+}, il = { class: "d-flex flex-column" }, dl = {
+  key: 0,
+  class: "mx-4"
+}, ul = {
+  key: 1,
+  class: "d-flex flex-align"
+}, cl = { class: "text-center ma-2" }, ml = { class: "text-h6" }, pl = { key: 0 }, vl = { key: 1 }, fl = { key: 2 }, _l = { class: "text-caption" }, gl = { key: 0 }, yl = { key: 1 }, kl = { key: 2 }, bl = { class: "ml-1" }, Vl = { key: 1 }, Sl = { key: 2 }, hl = { key: 3 }, Cl = {
+  key: 0,
+  class: "text-center"
+}, $l = { class: "d-flex align-center py-1 mx-2" }, El = /* @__PURE__ */ Me({
+  __name: "BT-Form-Builder",
+  props: {
+    actualUsedHeight: {},
+    defaultTemplateName: {},
+    getBackgroundUrl: {},
+    getLogoUrl: {},
+    imgProps: {},
+    isEditing: { type: Boolean },
+    openToggle: { type: Boolean },
+    modelValue: {},
+    onGetSchema: {},
+    overrideSchema: {},
+    refreshToggle: { type: Boolean },
+    requiredProps: {},
+    requirementGroup: {},
+    templateGroup: {},
+    title: { default: "Form Builder" },
+    useSchemaStyles: { type: Boolean },
+    useTemplates: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(re, { emit: se }) {
+    const ie = se, b = re, B = H(!1), de = H({}), {
+      addFieldToSlide: ue,
+      addSlide: ce,
+      applyTemplate: me,
+      clearCurrent: K,
+      currentField: d,
+      currentSlide: _,
+      duplicateField: pe,
+      duplicateSlide: ve,
+      fieldPropRules: fe,
+      isLabelType: _e,
+      isPlaceholderType: ge,
+      isPropType: ye,
+      isRequiredType: ke,
+      loadSchema: Q,
+      moveSlideDown: be,
+      moveSlideUp: Ve,
+      removeCurrent: Se,
+      removeSlide: he,
+      schema: t,
+      schemaString: Ce,
+      selectField: $e,
+      selectSlide: xe
+    } = Je({
+      onGetSchema: b.onGetSchema
+    }), Ue = We(), W = O(() => {
+      var u;
+      var i = b.requiredProps ?? [];
+      if (b.requirementGroup != null) {
+        var l = Ue.requirementSets.find((V) => V.group == b.requirementGroup);
+        (l == null ? void 0 : l.props) != null && i.push(...l.props);
+      }
+      return (u = t.value) == null || u.slides.forEach((V) => {
+        V.fields.forEach((w) => {
+          var T = i.findIndex((M) => M == w.prop);
+          T >= 0 && i.splice(T, 1);
+        });
+      }), i;
+    }), X = H(b.useTemplates ? Ke(b.templateGroup) : void 0), Be = O(() => {
+      var l, u;
+      let i = (l = t.value) == null ? void 0 : l.bgSrc;
+      if (((u = t.value) == null ? void 0 : u.useBgSrc) == !0 && i != null)
+        return `background: url("${i}") no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; min-height: 100%;`;
+    }), we = O(() => {
+      if (t.value != null) {
+        if (t.value.variant == "basic" || t.value.variant == "single-page")
+          return "text";
+        if (t.value.variant == "half-and-half")
+          return "tonal";
+      }
+    });
+    function Y(i, l, u) {
+      if (!(l < 0 || l > u.fields.length - 1)) {
+        var V = u.fields.findIndex((w) => w === i);
+        u.fields.splice(V, 1), u.fields.splice(l, 0, i);
+      }
+    }
+    function Te(i) {
+      me(i), L();
+    }
+    async function L() {
+      ie("update:modelValue", Ce.value), B.value = !1;
+    }
+    function Fe() {
+      B.value = !0;
+    }
+    function Z(i) {
+      i != null && (J(i.logoSrc) && b.getLogoUrl != null && (i.logoSrc = b.getLogoUrl()), J(i.bgSrc) && b.getBackgroundUrl != null && (i.bgSrc = b.getBackgroundUrl()));
+    }
+    return te(() => b.openToggle, () => {
+      B.value = !0;
+    }), te(() => b.modelValue, (i) => {
+      Q(i), Z(t.value);
+    }), Ae(() => {
+      Q(b.modelValue), Z(t.value);
+    }), (i, l) => {
+      const u = c("v-btn"), V = c("v-spacer"), w = c("v-toolbar-items"), T = c("v-toolbar"), M = c("bt-avatar"), ee = c("v-slide-x-transition"), Ee = c("v-card-title"), Pe = c("v-slide-x-reverse-transition"), S = c("v-card"), ze = c("v-col"), qe = c("v-row"), P = c("v-menu"), Le = c("v-hover"), Re = c("v-slide-y-transition"), A = c("v-list"), le = c("v-container"), De = c("v-icon"), h = c("v-text-field"), Ge = c("v-textarea"), z = c("v-switch"), oe = c("v-select"), F = c("v-list-subheader"), R = c("v-color-picker"), Ne = c("v-dialog"), D = c("v-list-item");
+      return e(t) != null ? (s(), m("div", Ye, [
+        o(Ne, {
+          fullscreen: "",
+          "retain-focus": !1,
+          transition: "dialog-bottom-transition",
+          modelValue: B.value,
+          "onUpdate:modelValue": l[18] || (l[18] = (n) => B.value = n)
+        }, {
+          default: a(() => [
+            o(S, null, {
+              default: a(() => [
+                o(le, {
+                  class: "pa-0",
+                  fluid: "",
+                  style: I(Be.value)
+                }, {
+                  default: a(() => [
+                    o(T, { color: "primary" }, {
+                      default: a(() => [
+                        o(u, {
+                          icon: "$close",
+                          onClick: l[0] || (l[0] = (n) => B.value = !1)
+                        }),
+                        i.title != null ? (s(), m("div", Ze, [
+                          y("div", el, C(i.title), 1),
+                          e(t).title != null ? (s(), m("div", ll, C(e(t).title), 1)) : v("", !0)
+                        ])) : v("", !0),
+                        o(V),
+                        o(w, null, {
+                          default: a(() => [
+                            o(u, {
+                              onClick: L,
+                              text: "Done"
+                            })
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }),
+                    o(S, {
+                      class: "d-flex",
+                      theme: e(t).theme
+                    }, {
+                      default: a(() => [
+                        o(le, {
+                          onClick: k(e(K), ["stop"]),
+                          style: I([{ height: "calc(100vh - 64px)" }, `background-color: ${e(t).bgColor}`]),
+                          class: "overflow-y-auto pa-0"
+                        }, {
+                          default: a(() => [
+                            e(t).useLogoSrc && !e(J)(e(t).logoSrc) ? (s(), f(T, {
+                              key: 0,
+                              style: I(`background-color: ${e(t).bgColor}`)
+                            }, {
+                              default: a(() => [
+                                y("div", ol, C(e(t).title), 1),
+                                o(V),
+                                y("div", tl, [
+                                  o(M, {
+                                    src: e(t).logoSrc
+                                  }, null, 8, ["src"])
+                                ])
+                              ]),
+                              _: 1
+                            }, 8, ["style"])) : v("", !0),
+                            o(A, { "bg-color": "transparent" }, {
+                              default: a(() => [
+                                o(Re, {
+                                  group: "",
+                                  "hide-on-leave": ""
+                                }, {
+                                  default: a(() => [
+                                    (s(!0), m(q, null, $(e(t).slides, (n, g) => j(i.$slots, `${n.name}-builder`, {
+                                      key: g,
+                                      slide: n
+                                    }, () => [
+                                      y("div", {
+                                        onClick: k((E) => e(xe)(n), ["stop"])
+                                      }, [
+                                        o(Le, null, {
+                                          default: a(({ isHovering: E, props: G }) => [
+                                            o(S, x({
+                                              class: ["mx-1 my-6 pt-2 pb-5", e(_) === n ? "text-primary" : void 0],
+                                              ripple: !1,
+                                              variant: "outlined",
+                                              ref_for: !0
+                                            }, G), {
+                                              default: a(() => [
+                                                y("div", al, [
+                                                  y("div", rl, [
+                                                    o(ee, null, {
+                                                      default: a(() => [
+                                                        E ? (s(), m("div", sl, [
+                                                          y("div", il, [
+                                                            o(u, {
+                                                              onClick: k((p) => e(Ve)(g), ["stop"]),
+                                                              class: "ma-0 pa-0",
+                                                              disabled: g == 0 || !i.isEditing,
+                                                              icon: "$menu-up",
+                                                              size: "x-small",
+                                                              variant: "text"
+                                                            }, null, 8, ["onClick", "disabled"]),
+                                                            o(u, {
+                                                              onClick: k((p) => e(be)(g), ["stop"]),
+                                                              class: "ma-0 pa-0",
+                                                              disabled: g >= e(t).slides.length - 1 || !i.isEditing,
+                                                              icon: "$menu-down",
+                                                              size: "x-small",
+                                                              variant: "text"
+                                                            }, null, 8, ["onClick", "disabled"])
+                                                          ]),
+                                                          o(u, {
+                                                            onClick: k((p) => e(t).slides.splice(g + 1, 0, e(ve)(n)), ["stop"]),
+                                                            class: "ma-0 pa-0",
+                                                            icon: "$content-duplicate",
+                                                            size: "x-small",
+                                                            title: "Duplicate",
+                                                            variant: "text"
+                                                          }, null, 8, ["onClick"])
+                                                        ])) : v("", !0)
+                                                      ]),
+                                                      _: 2
+                                                    }, 1024)
+                                                  ]),
+                                                  o(Ee, null, {
+                                                    default: a(() => [
+                                                      U(C(n.name), 1)
+                                                    ]),
+                                                    _: 2
+                                                  }, 1024),
+                                                  o(V),
+                                                  o(Pe, null, {
+                                                    default: a(() => [
+                                                      (n == null ? void 0 : n.canDelete) !== !1 && E ? (s(), f(u, {
+                                                        key: 0,
+                                                        class: "ma-0 mr-2 pa-0 text-error",
+                                                        onClick: k((p) => e(he)(n.name), ["stop"]),
+                                                        icon: "$delete",
+                                                        variant: "text"
+                                                      }, null, 8, ["onClick"])) : v("", !0)
+                                                    ]),
+                                                    _: 2
+                                                  }, 1024)
+                                                ]),
+                                                e(Oe)(n.fields) ? (s(), m("div", dl, [
+                                                  (s(!0), m(q, null, $(n.fields, (p, r) => (s(), m("div", null, [
+                                                    (s(), f(Ie, {
+                                                      key: `${r}${p.prop ?? ""}${p.type ?? ""}`,
+                                                      onDuplicate: (N) => n.fields.splice(r + 1, 0, e(pe)(p)),
+                                                      onMovedown: (N) => Y(p, r + 1, n),
+                                                      onMoveup: (N) => Y(p, r - 1, n),
+                                                      onSelect: (N) => e($e)(n, p),
+                                                      field: p,
+                                                      isBuilding: "",
+                                                      isSelected: e(d) === p,
+                                                      variant: we.value
+                                                    }, null, 8, ["onDuplicate", "onMovedown", "onMoveup", "onSelect", "field", "isSelected", "variant"]))
+                                                  ]))), 256))
+                                                ])) : v("", !0),
+                                                n.canEdit !== !1 ? (s(), m("div", ul, [
+                                                  o(P, { "z-index": "2500" }, {
+                                                    activator: a(({ props: p }) => [
+                                                      o(u, x({
+                                                        class: "mx-auto",
+                                                        color: e(t).ctlColor,
+                                                        "prepend-icon": "$plus",
+                                                        text: "Add Field",
+                                                        ref_for: !0
+                                                      }, p), null, 16, ["color"])
+                                                    ]),
+                                                    default: a(() => [
+                                                      o(S, { "max-width": "550" }, {
+                                                        default: a(() => [
+                                                          o(qe, { "no-gutters": "" }, {
+                                                            default: a(() => [
+                                                              (s(!0), m(q, null, $(e(Qe), (p, r) => (s(), f(ze, {
+                                                                key: r,
+                                                                cols: "6"
+                                                              }, {
+                                                                default: a(() => [
+                                                                  o(S, {
+                                                                    class: "ma-1",
+                                                                    onClick: k((N) => e(ue)(p, n), ["stop"]),
+                                                                    color: e(t).ctlColor,
+                                                                    "prepend-icon": p.icon,
+                                                                    subtitle: p.description,
+                                                                    title: p.label
+                                                                  }, null, 8, ["onClick", "color", "prepend-icon", "subtitle", "title"])
+                                                                ]),
+                                                                _: 2
+                                                              }, 1024))), 128))
+                                                            ]),
+                                                            _: 2
+                                                          }, 1024)
+                                                        ]),
+                                                        _: 2
+                                                      }, 1024)
+                                                    ]),
+                                                    _: 2
+                                                  }, 1024)
+                                                ])) : v("", !0)
+                                              ]),
+                                              _: 2
+                                            }, 1040, ["class"])
+                                          ]),
+                                          _: 2
+                                        }, 1024)
+                                      ], 8, nl)
+                                    ])), 128))
+                                  ]),
+                                  _: 3
+                                })
+                              ]),
+                              _: 3
+                            }),
+                            y("div", cl, [
+                              o(u, {
+                                onClick: k(e(ce), ["stop"]),
+                                color: e(t).ctlColor,
+                                "prepend-icon": "$card-plus-outline",
+                                text: "Add Slide"
+                              }, null, 8, ["onClick", "color"])
+                            ])
+                          ]),
+                          _: 3
+                        }, 8, ["onClick", "style"]),
+                        o(S, {
+                          class: "overflow-y-auto",
+                          width: "400",
+                          style: { height: "calc(100vh - 64px)" },
+                          tile: ""
+                        }, {
+                          default: a(() => {
+                            var n, g, E, G, p;
+                            return [
+                              o(T, null, {
+                                default: a(() => [
+                                  e(_) != null || e(d) != null ? (s(), f(u, {
+                                    key: 0,
+                                    icon: "$close",
+                                    onClick: k(e(K), ["stop"])
+                                  }, null, 8, ["onClick"])) : (s(), f(De, {
+                                    key: 1,
+                                    class: "mx-3",
+                                    icon: "$cog"
+                                  })),
+                                  y("div", null, [
+                                    y("div", ml, [
+                                      e(d) != null ? (s(), m("span", pl, "Field")) : e(_) != null ? (s(), m("span", vl, "Slide")) : (s(), m("span", fl, "Form"))
+                                    ]),
+                                    y("div", _l, [
+                                      e(d) != null ? (s(), m("span", gl, C(e(d).type), 1)) : e(_) != null ? (s(), m("span", yl, C(e(_).name), 1)) : (s(), m("span", kl, "Properties"))
+                                    ])
+                                  ]),
+                                  o(V),
+                                  o(w, null, {
+                                    default: a(() => {
+                                      var r;
+                                      return [
+                                        e(d) != null || e(_) != null ? (s(), f(u, {
+                                          key: 0,
+                                          disabled: ((r = e(_)) == null ? void 0 : r.canDelete) == !1,
+                                          class: "text-error",
+                                          onClick: k(e(Se), ["stop"]),
+                                          icon: "$delete"
+                                        }, null, 8, ["disabled", "onClick"])) : v("", !0)
+                                      ];
+                                    }),
+                                    _: 1
+                                  })
+                                ]),
+                                _: 1
+                              }),
+                              W.value.length > 0 ? (s(), f(S, {
+                                key: 0,
+                                subtitle: "This form requires fields with these properties:"
+                              }, {
+                                text: a(() => [
+                                  (s(!0), m(q, null, $(W.value, (r) => (s(), m("div", null, [
+                                    l[25] || (l[25] = y("span", null, "Prop:", -1)),
+                                    y("span", bl, C(r), 1)
+                                  ]))), 256))
+                                ]),
+                                _: 1
+                              })) : v("", !0),
+                              e(d) != null ? (s(), m("div", Vl, [
+                                e(_e) ? (s(), f(h, {
+                                  key: 0,
+                                  "hide-details": "",
+                                  label: "Label",
+                                  modelValue: e(d).label,
+                                  "onUpdate:modelValue": l[1] || (l[1] = (r) => e(d).label = r)
+                                }, null, 8, ["modelValue"])) : v("", !0),
+                                o(Ge, {
+                                  "auto-grow": "",
+                                  "hide-details": "",
+                                  label: "Description",
+                                  lines: "three",
+                                  modelValue: e(d).description,
+                                  "onUpdate:modelValue": l[2] || (l[2] = (r) => e(d).description = r)
+                                }, null, 8, ["modelValue"]),
+                                e(ge) ? (s(), f(h, {
+                                  key: 1,
+                                  "hide-details": "",
+                                  label: "Placeholder",
+                                  modelValue: e(d).placeholder,
+                                  "onUpdate:modelValue": l[3] || (l[3] = (r) => e(d).placeholder = r)
+                                }, null, 8, ["modelValue"])) : v("", !0),
+                                e(ye) ? (s(), f(h, {
+                                  key: 2,
+                                  readonly: ((n = e(_)) == null ? void 0 : n.canEdit) == !1,
+                                  label: "Field Property",
+                                  rules: e(fe),
+                                  modelValue: e(d).prop,
+                                  "onUpdate:modelValue": l[4] || (l[4] = (r) => e(d).prop = r)
+                                }, null, 8, ["readonly", "rules", "modelValue"])) : v("", !0),
+                                e(d).type == "button" ? (s(), f(h, {
+                                  key: 3,
+                                  label: "URL to navigate to",
+                                  modelValue: e(d).url,
+                                  "onUpdate:modelValue": l[5] || (l[5] = (r) => e(d).url = r)
+                                }, null, 8, ["modelValue"])) : v("", !0),
+                                e(ke) ? (s(), f(z, {
+                                  key: 4,
+                                  color: e(d).isRequired ? "primary" : void 0,
+                                  inset: "",
+                                  label: e(d).isRequired ? "Required" : "Not Required",
+                                  readonly: ((g = e(_)) == null ? void 0 : g.canEdit) === !1,
+                                  modelValue: e(d).isRequired,
+                                  "onUpdate:modelValue": l[6] || (l[6] = (r) => e(d).isRequired = r)
+                                }, null, 8, ["color", "label", "readonly", "modelValue"])) : v("", !0),
+                                o(z, {
+                                  color: e(d).remember ? "primary" : void 0,
+                                  inset: "",
+                                  label: e(d).remember ? "Remember On Reset" : "Forget On Reset",
+                                  readonly: ((E = e(_)) == null ? void 0 : E.canEdit) === !1,
+                                  modelValue: e(d).remember,
+                                  "onUpdate:modelValue": l[7] || (l[7] = (r) => e(d).remember = r)
+                                }, null, 8, ["color", "label", "readonly", "modelValue"]),
+                                e(d).type == "button" ? (s(), f(z, {
+                                  key: 5,
+                                  color: e(d).isSubmitButton ? "primary" : void 0,
+                                  inset: "",
+                                  label: "Submit On Click",
+                                  readonly: ((G = e(_)) == null ? void 0 : G.canEdit) === !1,
+                                  modelValue: e(d).isSubmitButton,
+                                  "onUpdate:modelValue": l[8] || (l[8] = (r) => e(d).isSubmitButton = r)
+                                }, null, 8, ["color", "readonly", "modelValue"])) : v("", !0)
+                              ])) : e(_) != null ? (s(), m("div", Sl, [
+                                o(h, {
+                                  canEdit: e(_).canEdit !== !1,
+                                  label: "Slide Name",
+                                  readonly: ((p = e(_)) == null ? void 0 : p.canEdit) === !1,
+                                  modelValue: e(_).name,
+                                  "onUpdate:modelValue": l[9] || (l[9] = (r) => e(_).name = r)
+                                }, null, 8, ["canEdit", "readonly", "modelValue"])
+                              ])) : (s(), m("div", hl, [
+                                o(h, {
+                                  disabled: "",
+                                  "hide-details": "",
+                                  label: "Version",
+                                  modelValue: e(t).version,
+                                  "onUpdate:modelValue": l[10] || (l[10] = (r) => e(t).version = r)
+                                }, null, 8, ["modelValue"]),
+                                o(h, {
+                                  "hide-details": "",
+                                  label: "Form Title",
+                                  modelValue: e(t).title,
+                                  "onUpdate:modelValue": l[11] || (l[11] = (r) => e(t).title = r)
+                                }, null, 8, ["modelValue"]),
+                                o(oe, {
+                                  "hide-details": "",
+                                  label: "Form Variant",
+                                  items: ["basic", "half-and-half", "single-page"],
+                                  modelValue: e(t).variant,
+                                  "onUpdate:modelValue": l[12] || (l[12] = (r) => e(t).variant = r)
+                                }, null, 8, ["modelValue"]),
+                                o(oe, {
+                                  "hide-details": "",
+                                  label: "Theme",
+                                  items: ["light", "dark"],
+                                  modelValue: e(t).theme,
+                                  "onUpdate:modelValue": l[13] || (l[13] = (r) => e(t).theme = r)
+                                }, null, 8, ["modelValue"]),
+                                o(z, {
+                                  color: e(t).useLogoSrc ? "primary" : void 0,
+                                  "hide-details": "",
+                                  inset: "",
+                                  label: "Show My Logo",
+                                  modelValue: e(t).useLogoSrc,
+                                  "onUpdate:modelValue": l[14] || (l[14] = (r) => e(t).useLogoSrc = r)
+                                }, null, 8, ["color", "modelValue"]),
+                                o(z, {
+                                  color: e(t).useBgSrc ? "primary" : void 0,
+                                  "hide-details": "",
+                                  inset: "",
+                                  label: "Use Background Image",
+                                  modelValue: e(t).useBgSrc,
+                                  "onUpdate:modelValue": l[15] || (l[15] = (r) => e(t).useBgSrc = r)
+                                }, null, 8, ["color", "modelValue"]),
+                                e(t).useBgSrc && i.imgProps != null ? (s(), f(F, {
+                                  key: 0,
+                                  class: "ml-2"
+                                }, {
+                                  default: a(() => l[26] || (l[26] = [
+                                    U("Background Image")
+                                  ])),
+                                  _: 1
+                                })) : v("", !0),
+                                o(ee, { "hide-on-leave": "" }, {
+                                  default: a(() => [
+                                    e(t).useBgSrc && i.imgProps != null ? (s(), m("div", Cl, [
+                                      o(Xe, x(i.imgProps, {
+                                        src: e(t).bgSrc
+                                      }), null, 16, ["src"])
+                                    ])) : v("", !0)
+                                  ]),
+                                  _: 1
+                                }),
+                                o(F, { class: "ml-2" }, {
+                                  default: a(() => l[27] || (l[27] = [
+                                    U("Background Color")
+                                  ])),
+                                  _: 1
+                                }),
+                                o(R, {
+                                  width: "100%",
+                                  modelValue: e(t).bgColor,
+                                  "onUpdate:modelValue": l[16] || (l[16] = (r) => e(t).bgColor = r)
+                                }, null, 8, ["modelValue"]),
+                                o(F, { class: "ml-2" }, {
+                                  default: a(() => l[28] || (l[28] = [
+                                    U("Button Color")
+                                  ])),
+                                  _: 1
+                                }),
+                                o(R, {
+                                  width: "100%",
+                                  modelValue: e(t).ctlColor,
+                                  "onUpdate:modelValue": l[17] || (l[17] = (r) => e(t).ctlColor = r)
+                                }, null, 8, ["modelValue"])
+                              ]))
+                            ];
+                          }),
+                          _: 1
+                        })
+                      ]),
+                      _: 3
+                    }, 8, ["theme"])
+                  ]),
+                  _: 3
+                }, 8, ["style"])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 3
+        }, 8, ["modelValue"]),
+        o(je, {
+          actualUsedHeight: i.actualUsedHeight,
+          canSubmit: !1,
+          data: de.value,
+          isEditing: "",
+          onGetSchema: i.onGetSchema,
+          overrideSchema: i.overrideSchema,
+          schema: e(t),
+          useSchemaStyles: i.useSchemaStyles
+        }, He({
+          "form-toolbar-right": a(() => [
+            y("div", $l, [
+              X.value != null ? (s(), f(P, { key: 0 }, {
+                activator: a(({ props: n }) => [
+                  o(u, x({
+                    color: e(t).ctlColor,
+                    size: "x-small",
+                    text: "Use Template"
+                  }, n), null, 16, ["color"])
+                ]),
+                default: a(() => [
+                  o(A, { "min-width": "300" }, {
+                    default: a(() => [
+                      (s(!0), m(q, null, $(X.value, (n) => (s(), f(D, {
+                        onClick: k((g) => Te(n), ["stop"]),
+                        subtitle: n.description,
+                        title: n.templateName
+                      }, null, 8, ["onClick", "subtitle", "title"]))), 256))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : v("", !0),
+              o(P, null, {
+                activator: a(({ props: n }) => [
+                  o(u, x({
+                    color: e(t).ctlColor,
+                    icon: "$view-carousel",
+                    size: "x-small",
+                    title: "Form Variant"
+                  }, n), null, 16, ["color"])
+                ]),
+                default: a(() => [
+                  o(A, null, {
+                    default: a(() => [
+                      o(F, null, {
+                        default: a(() => l[29] || (l[29] = [
+                          U("Form Variant")
+                        ])),
+                        _: 1
+                      }),
+                      o(D, {
+                        onClick: l[19] || (l[19] = k((n) => e(t).variant = "basic", ["stop"])),
+                        active: e(t).variant == "basic",
+                        title: "Basic"
+                      }, null, 8, ["active"]),
+                      o(D, {
+                        onClick: l[20] || (l[20] = k((n) => e(t).variant = "single-page", ["stop"])),
+                        active: e(t).variant == "single-page",
+                        title: "Single Page"
+                      }, null, 8, ["active"]),
+                      o(D, {
+                        onClick: l[21] || (l[21] = k((n) => e(t).variant = "half-and-half", ["stop"])),
+                        active: e(t).variant == "half-and-half",
+                        title: "Half And Half"
+                      }, null, 8, ["active"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              o(P, { "close-on-content-click": !1 }, {
+                activator: a(({ props: n }) => [
+                  o(u, x({
+                    class: "ml-1",
+                    color: e(t).ctlColor,
+                    icon: "$format-color-fill",
+                    size: "x-small",
+                    title: "Background Color"
+                  }, n), null, 16, ["color"])
+                ]),
+                default: a(() => [
+                  o(S, null, {
+                    default: a(() => [
+                      o(F, { class: "ml-2" }, {
+                        default: a(() => l[30] || (l[30] = [
+                          U("Background Color")
+                        ])),
+                        _: 1
+                      }),
+                      o(R, {
+                        "onUpdate:modelValue": [
+                          L,
+                          l[22] || (l[22] = (n) => e(t).bgColor = n)
+                        ],
+                        width: "250",
+                        modelValue: e(t).bgColor
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              o(P, { "close-on-content-click": !1 }, {
+                activator: a(({ props: n }) => [
+                  o(u, x({
+                    class: "ml-1",
+                    color: e(t).ctlColor,
+                    icon: "$palette",
+                    size: "x-small",
+                    title: "Button Color"
+                  }, n), null, 16, ["color"])
+                ]),
+                default: a(() => [
+                  o(S, null, {
+                    default: a(() => [
+                      o(F, { class: "ml-2" }, {
+                        default: a(() => l[31] || (l[31] = [
+                          U("Button Color")
+                        ])),
+                        _: 1
+                      }),
+                      o(R, {
+                        "onUpdate:modelValue": [
+                          L,
+                          l[23] || (l[23] = (n) => e(t).ctlColor = n)
+                        ],
+                        width: "250",
+                        modelValue: e(t).ctlColor
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              o(u, {
+                onClick: l[24] || (l[24] = (n) => e(t).theme = e(t).theme == "light" ? "dark" : "light"),
+                class: "ml-1",
+                color: e(t).ctlColor,
+                icon: "$theme-light-dark",
+                size: "small"
+              }, null, 8, ["color"]),
+              o(u, {
+                onClick: Fe,
+                class: "ml-1",
+                color: e(t).ctlColor,
+                "prepend-icon": "$pencil",
+                size: "small",
+                text: "Edit",
+                title: "Edit Template"
+              }, null, 8, ["color"])
+            ])
+          ]),
+          _: 2
+        }, [
+          $(e(t).slides.flatMap((n) => n.fields), (n) => ({
+            name: `${n.prop}`,
+            fn: a((g) => [
+              j(i.$slots, n.prop, ne(ae(g)))
+            ])
+          })),
+          $(e(t).slides, (n) => ({
+            name: `${n.name}`,
+            fn: a((g) => [
+              j(i.$slots, n.name, ne(ae(g)))
+            ])
+          }))
+        ]), 1032, ["actualUsedHeight", "data", "onGetSchema", "overrideSchema", "schema", "useSchemaStyles"])
+      ])) : v("", !0);
+    };
+  }
+});
+export {
+  El as default
+};