epic-designer-gold 0.0.22 → 0.0.24

package/dist/index-DFc_FT_D.js

@@ -0,0 +1,675 @@
+import { defineComponent as X, inject as L, ref as C, computed as U, watch as G, openBlock as M, createElementBlock as W, Fragment as q, withDirectives as ue, createElementVNode as w, normalizeClass as ee, toDisplayString as be, unref as f, createVNode as z, createCommentVNode as le, vShow as de, createBlock as te, mergeProps as Se, withCtx as oe, useAttrs as we, provide as Ce, onUnmounted as ke, resolveComponent as Ne, createSlots as $e, renderList as ve, shallowRef as Re, watchEffect as Te, nextTick as pe, normalizeStyle as se, renderSlot as Be, onMounted as Oe } from "vue";
+import { p as J } from "./axios-ITY6Uw7A.js";
+import { u as fe, a as Me, f as me, g as Le, b as ae, _ as De, d as ce, c as He, e as Ve, h as We, i as ze, w as Ae, j as Ee } from "./index-Df-u4kqP.js";
+import { _ as ie } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
+import { d as Ie } from "./vuedraggable.umd-D2S7Eo7p.js";
+const Pe = { class: "epic-widget-action-item whitespace-nowrap" }, je = {
+  key: 0,
+  class: "flex items-center"
+}, Fe = /* @__PURE__ */ X({
+  __name: "previewWidgets",
+  setup(Z, { expose: D }) {
+    const u = L("pageManager", {}), _ = L("pageSchema"), a = L("designer"), m = L("designerProps"), r = L("revoke"), d = C(null), N = C(null), g = C(null), H = C(!1), n = C(!1), s = C(!0), i = C("top"), { canvasScale: l, disabledZoom: b } = fe();
+    let t = null;
+    const I = U(() => {
+      const e = a.state.checkedNode;
+      return !(!(e != null && e.id) || m.value.lockDefaultSchemaEdit && u.defaultComponentIds.value.includes(e == null ? void 0 : e.id));
+    }), V = U(() => {
+      var k, $, T, v, A, F;
+      const e = u.componentInstances.value, c = (k = a.state.checkedNode) == null ? void 0 : k.id;
+      if ((T = ($ = a.state.checkedNode) == null ? void 0 : $.componentProps) != null && T.hidden)
+        return null;
+      const y = J.getComponentConfingByType((v = a.state.checkedNode) == null ? void 0 : v.type) ?? null;
+      if (!c || !(e != null && e[c]))
+        return null;
+      if (y != null && y.defaultSchema.input && ((A = a.state.checkedNode) == null ? void 0 : A.noFormItem) !== !0)
+        return (F = e[c + "formItem"]) == null ? void 0 : F.$el;
+      const o = e[c];
+      return !(o != null && o.$el) || (o == null ? void 0 : o.$el.nodeName) === "#text" || !(o != null && o.$el.getBoundingClientRect) ? null : o == null ? void 0 : o.$el;
+    }), R = U(() => {
+      var k, $, T, v;
+      const e = u.componentInstances.value, c = (k = a.state.hoverNode) == null ? void 0 : k.id, y = J.getComponentConfingByType(($ = a.state.hoverNode) == null ? void 0 : $.type) ?? null;
+      if (!c || !(e != null && e[c]))
+        return null;
+      if (y != null && y.defaultSchema.input && ((T = a.state.hoverNode) == null ? void 0 : T.noFormItem) !== !0)
+        return (v = e[c + "formItem"]) == null ? void 0 : v.$el;
+      const o = e[c];
+      return (o == null ? void 0 : o.$el.nodeName) === "#text" ? null : o == null ? void 0 : o.$el;
+    }), { mutationObserver: p, observerConfig: x } = he(E), { startTimedQuery: h, stopTimedQuery: P } = Me(E);
+    G(() => V.value, (e) => {
+      if (e) {
+        H.value = !0, p.observe(e, x);
+        const c = e.parentNode;
+        c && (c.ondragstart = () => {
+          s.value = !1, h();
+        }, c.ondragend = () => {
+          s.value = !0, P();
+        }), E();
+      } else
+        H.value = !1;
+    });
+    const { mutationObserver: Y, observerConfig: B } = he(re);
+    G(() => R.value, (e) => {
+      e && (Y.observe(e, B), re());
+    });
+    let S = 0;
+    G(() => {
+      var e;
+      return (e = a.state.hoverNode) == null ? void 0 : e.id;
+    }, (e) => {
+      if (e) {
+        n.value = !0, clearTimeout(S);
+        return;
+      }
+      S = setTimeout(() => {
+        n.value = !1;
+      }, 300);
+    });
+    let O = 0, j = 0;
+    function E() {
+      const e = V.value;
+      if (!e || !t) return;
+      const { top: c, left: y } = t == null ? void 0 : t.getBoundingClientRect(), { top: o, left: k, width: $, height: T } = e.getBoundingClientRect(), v = b.value ? 1 : l.value, A = o - c + ((t == null ? void 0 : t.scrollTop) ?? 0) * v, F = k - y + ((t == null ? void 0 : t.scrollLeft) ?? 0) * v, K = T / v;
+      d.value && (d.value.style.width = `${$ / v}px`, d.value.style.height = `${K}px`, d.value.style.top = `${A / v}px`, d.value.style.left = `${F / v}px`, Q(A, F)), g.value && (A < 45 && K < 100 ? (g.value.style.top = "", g.value.style.bottom = "-30px", g.value.style["border-radius"] = "0px 0px 4px 4px", i.value = "bottom") : A < 45 ? (g.value.style.top = "0px", g.value.style["border-radius"] = "0px 0px 4px 0", i.value = "center") : (g.value.style.top = "-30px", g.value.style["border-radius"] = "4px 4px 0px 0px", i.value = "top"));
+    }
+    function Q(e, c) {
+      const y = V.value;
+      if (!t || !y) return;
+      const o = t.getBoundingClientRect(), { width: k } = y.getBoundingClientRect(), $ = b.value ? 1 : l.value, T = e / $ - o.top;
+      let v = c / $ - o.left + k / $;
+      v < o.width && (v = 0);
+      const A = t.scrollTop - o.height / 3 + 60, F = t.scrollTop + o.height / 3 * 2, K = t.scrollLeft - o.width + 200, ne = t.scrollLeft + o.width - 200;
+      Math.abs(T - O) < 10 && Math.abs(v - j) < 10 || (O = T, j = v, !(T > A && T < F && v > K && v < ne) && (t.scrollTop = T, t.scrollLeft = v));
+    }
+    function re() {
+      var K, ne;
+      const e = R.value;
+      if (!e) return;
+      const { top: c, left: y } = (t == null ? void 0 : t.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: o, left: k, width: $, height: T } = ((K = e.getBoundingClientRect) == null ? void 0 : K.call(e)) ?? ((ne = e.nextElementSibling) == null ? void 0 : ne.getBoundingClientRect()), v = b.value ? 1 : l.value, A = o - c + ((t == null ? void 0 : t.scrollTop) ?? 0) * v, F = k - y + ((t == null ? void 0 : t.scrollLeft) ?? 0) * v;
+      N.value && (N.value.style.width = `${$ / v}px`, N.value.style.height = `${T / v}px`, N.value.style.top = `${A / v}px`, N.value.style.left = `${F / v}px`);
+    }
+    function he(e) {
+      const c = window.MutationObserver, y = {
+        childList: !0,
+        attributes: !0,
+        subtree: !0
+      };
+      return {
+        mutationObserver: new c(e),
+        observerConfig: y
+      };
+    }
+    function xe() {
+      var $;
+      const e = me(_.schemas, (($ = a.state.checkedNode) == null ? void 0 : $.id) ?? "root");
+      if (!e)
+        return !1;
+      const { list: c, schema: y, index: o } = e, k = Le(y);
+      c.splice(o + 1, 0, k), a.setCheckedNode(k), r.push(_.schemas, "复制组件");
+    }
+    function ye() {
+      var k;
+      const e = me(_.schemas, ((k = a.state.checkedNode) == null ? void 0 : k.id) ?? "root");
+      if (!e)
+        return !1;
+      let { list: c, schema: y, index: o } = e;
+      c.splice(o, 1), o === c.length && o--, a.setCheckedNode(c[o]), r.push(_.schemas, "删除组件");
+    }
+    function _e(e) {
+      t = e, t == null || t.addEventListener("scroll", () => {
+        E();
+      }), ae(V, E), ae(R, re);
+    }
+    return D({
+      handleInit: _e
+    }), (e, c) => {
+      var y, o, k, $, T;
+      return M(), W(q, null, [
+        ue(w("div", {
+          ref_key: "selectorRef",
+          ref: d,
+          class: ee(["epic-checked-widget absolute pointer-events-none z-20", i.value + " " + (s.value ? "transition-all" : "")])
+        }, [
+          w("div", {
+            class: "epic-widget-action-box",
+            ref_key: "actionBoxRef",
+            ref: g
+          }, [
+            w("div", Pe, be((o = f(J).getComponentConfingByType(((y = f(a).state.checkedNode) == null ? void 0 : y.type) ?? "")) == null ? void 0 : o.defaultSchema.label), 1),
+            I.value ? (M(), W("div", je, [
+              w("div", {
+                title: "复制",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: xe
+              }, [
+                z(f(ie), { name: "icon--epic--copy-all-outline-rounded" })
+              ]),
+              w("div", {
+                title: "删除",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: ye
+              }, [
+                z(f(ie), { name: "icon--epic--delete-outline-rounded" })
+              ])
+            ])) : le("", !0)
+          ], 512)
+        ], 2), [
+          [de, H.value && ((k = f(a).state.checkedNode) == null ? void 0 : k.id) !== "root"]
+        ]),
+        ue(w("div", {
+          ref_key: "hoverWidgetRef",
+          ref: N,
+          class: "epic-hover-widget absolute transition-all pointer-events-none z-998"
+        }, null, 512), [
+          [de, n.value && (($ = f(a).state.checkedNode) == null ? void 0 : $.id) !== ((T = f(a).state.hoverNode) == null ? void 0 : T.id)]
+        ])
+      ], 64);
+    };
+  }
+}), Ue = /* @__PURE__ */ X({
+  name: "EditNodeItem",
+  __name: "editNodeItem",
+  props: {
+    schemas: {}
+  },
+  emits: ["update:schemas"],
+  setup(Z, { emit: D }) {
+    const u = L("designer"), _ = L("pageSchema"), a = L("revoke"), m = Z, r = D, d = U({
+      get() {
+        return m.schemas;
+      },
+      set(s) {
+        r("update:schemas", s);
+      }
+    });
+    function N(s) {
+      u.setCheckedNode(d.value[s]), u.setDisableHover(!0);
+    }
+    function g() {
+      u.setDisableHover(), a.push(_.schemas, "拖拽组件");
+    }
+    function H() {
+      a.push(_.schemas, "插入组件");
+    }
+    function n(s) {
+      var i, l, b;
+      return s.id === ((i = _.schemas[0]) == null ? void 0 : i.id) || (b = (l = J.getComponentConfingByType(s.type)) == null ? void 0 : l.editConstraints) != null && b.immovable ? "unmover-item" : "draggable-item";
+    }
+    return (s, i) => (M(), te(f(Ie), Se({
+      modelValue: d.value,
+      "onUpdate:modelValue": i[0] || (i[0] = (l) => d.value = l),
+      "item-key": "id",
+      "component-data": {
+        type: "transition-group"
+      },
+      class: "epic-draggable-range"
+    }, {
+      animation: 200,
+      group: "edit-draggable",
+      handle: ".draggable-item",
+      ghostClass: "moveing"
+    }, {
+      onStart: i[1] || (i[1] = (l) => N(l.oldIndex)),
+      onEnd: i[2] || (i[2] = (l) => g()),
+      onAdd: i[3] || (i[3] = (l) => {
+        N(l.newIndex), H();
+      })
+    }), {
+      item: oe(({ element: l, index: b }) => [
+        (M(), W("div", {
+          class: ee(["widget-box", n(l)]),
+          key: b
+        }, [
+          z(ge, { schema: l }, null, 8, ["schema"])
+        ], 2))
+      ]),
+      _: 1
+    }, 16, ["modelValue"]));
+  }
+}), ge = /* @__PURE__ */ X({
+  name: "ENodeItem",
+  __name: "nodeItem",
+  props: {
+    schema: {},
+    name: {}
+  },
+  setup(Z) {
+    const D = we(), u = L("designer"), _ = L("pageManager", {}), a = L("pageSchema", {}), m = C(null);
+    Ce("nodeAttrs", D);
+    const r = Z, d = U(() => {
+      var b, t, I, V, R;
+      const n = _.componentInstances.value, s = (b = r.schema) == null ? void 0 : b.id, i = J.getComponentConfingByType((t = r.schema) == null ? void 0 : t.type) ?? null;
+      if (!s || !(n != null && n[s]))
+        return null;
+      if (i != null && i.defaultSchema.input && ((I = r.schema) == null ? void 0 : I.noFormItem) !== !0)
+        return (V = n[s + "formItem"]) == null ? void 0 : V.$el;
+      const l = n[s];
+      return ((R = l == null ? void 0 : l.$el) == null ? void 0 : R.nodeName) === "#text" ? null : l == null ? void 0 : l.$el;
+    });
+    G(() => d.value, (n) => {
+      n == null || n.addEventListener("click", N, !1), n == null || n.addEventListener("mouseover", g, !1), n == null || n.addEventListener("mouseout", H, !1);
+    }), ke(() => {
+      var n, s, i;
+      (n = d.value) == null || n.removeEventListener("click", N, !1), (s = d.value) == null || s.removeEventListener("mouseover", g, !1), (i = d.value) == null || i.removeEventListener("mouseout", H, !1);
+    });
+    function N(n) {
+      n.stopPropagation(), u.setCheckedNode(r.schema);
+    }
+    function g(n) {
+      var s;
+      r.schema.id !== ((s = a.schemas[0]) == null ? void 0 : s.id) && (n.stopPropagation(), u.setHoverNode(r.schema));
+    }
+    function H(n) {
+      n.stopPropagation(), u.setHoverNode(null);
+    }
+    return (n, s) => {
+      var l, b;
+      const i = Ne("ENodeItem");
+      return M(), te(f(De), {
+        ref_key: "nodeRef",
+        ref: m,
+        componentSchema: r.schema
+      }, $e({ _: 2 }, [
+        (b = (l = f(J).getComponentConfingByType(r.schema.type)) == null ? void 0 : l.editConstraints) != null && b.childImmovable ? {
+          name: "edit-node",
+          fn: oe(() => [
+            (M(!0), W(q, null, ve(r.schema.children, (t) => (M(), te(i, {
+              key: t.id,
+              schema: t
+            }, null, 8, ["schema"]))), 128))
+          ]),
+          key: "0"
+        } : {
+          name: "edit-node",
+          fn: oe(() => [
+            r.schema.children ? (M(), te(Ue, {
+              key: 0,
+              schemas: r.schema.children,
+              "onUpdate:schemas": s[0] || (s[0] = (t) => r.schema.children = t)
+            }, null, 8, ["schemas"])) : le("", !0)
+          ]),
+          key: "1"
+        }
+      ]), 1032, ["componentSchema"]);
+    };
+  }
+}), Je = { class: "min-w-750px rounded h-full" }, Ze = /* @__PURE__ */ X({
+  __name: "previewJson",
+  setup(Z, { expose: D }) {
+    const u = J.getComponent("modal"), _ = J.getComponent("monacoEditor"), a = {
+      theme: "vs-light",
+      selectOnLineNumbers: !0,
+      minimap: {
+        enabled: !1
+      },
+      readOnly: !0
+    }, m = C(null), r = C(!1), d = L("pageSchema");
+    function N() {
+      r.value = !1;
+    }
+    function g() {
+      r.value = !0, m.value ? m.value.setValue(JSON.stringify(d, null, 2)) : setTimeout(() => {
+        g();
+      }, 300);
+    }
+    function H(n = "epic-data.json") {
+      const s = JSON.stringify(d, null, 2);
+      var i = `data:text/json;charset=utf-8,${encodeURIComponent(s)}`, l = document.createElement("a");
+      l.setAttribute("href", i), l.setAttribute("download", n), l.click();
+    }
+    return D({
+      handleOpen: g
+    }), (n, s) => (M(), te(f(u), {
+      modelValue: r.value,
+      "onUpdate:modelValue": s[0] || (s[0] = (i) => r.value = i),
+      title: "查看数据",
+      class: "w-900px",
+      width: "900px",
+      onClose: N,
+      onOk: H,
+      okText: "导出数据"
+    }, {
+      default: oe(() => [
+        w("div", Je, [
+          z(f(_), {
+            ref_key: "monacoEditorRef",
+            ref: m,
+            class: "editor h-full",
+            autoToggleTheme: "",
+            readOnly: "",
+            config: a,
+            language: "json"
+          }, null, 512)
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}), Qe = { class: "epic-edit-toolbar flex items-center justify-between px-2" }, Ke = { class: "flex-1 h-full flex items-center" }, Xe = {
+  key: 0,
+  class: "epic-divider"
+}, Ye = ["title", "onClick"], qe = { class: "flex-1 h-full flex items-center justify-end" }, Ge = {
+  key: 0,
+  class: "flex items-center ml-12px"
+}, et = { class: "pr-8px w-82px cursor-pointer" }, tt = { class: "epic-device h-28px items-center gap-1 rounded-md border p-2px flex" }, ot = ["title", "onClick"], nt = /* @__PURE__ */ X({
+  __name: "toolbar",
+  setup(Z) {
+    const D = J.getComponent("select"), { canvasScale: u, disabledZoom: _ } = fe(), a = C("pc"), m = L("pageSchema"), r = L("designer"), d = L("revoke"), N = C(null), g = [
+      {
+        icon: "icon--epic--computer-outline-rounded",
+        title: "pc",
+        key: "pc"
+      }
+      // {
+      //   icon: "icon--epic--tablet-android-outline-rounded",
+      //   title: "平板",
+      //   key: "pad",
+      // },
+      // {
+      //   icon: "icon--epic--phone-iphone-outline-sharp",
+      //   title: "手机",
+      //   key: "mobile",
+      // },
+    ], H = U(() => [
+      // {
+      //   icon: "icon--epic--code",
+      //   title: "查看数据",
+      //   on: () => handlePreview(),
+      // },
+      // {
+      //   icon: "icon--epic--exit-to-app-rounded",
+      //   title: "导入数据",
+      //   on: handleOpenFileSelector,
+      // },
+      {
+        icon: "icon--epic--trash",
+        title: "清空",
+        on: t
+      },
+      {
+        icon: "icon--epic--undo",
+        title: "撤销",
+        on: l,
+        disabled: !d.recordList.value.length,
+        divider: !0
+      },
+      {
+        icon: "icon--epic--redo",
+        title: "重做",
+        on: b,
+        disabled: !d.undoList.value.length
+      }
+    ]), n = C(null), s = U({
+      get() {
+        return `${(u.value * 100).toFixed(0)}%`;
+      },
+      set(p) {
+        const x = parseFloat(p);
+        u.value = x / 100;
+      }
+    }), i = [
+      {
+        label: "60%",
+        value: "60%"
+      },
+      {
+        label: "80%",
+        value: "80%"
+      },
+      {
+        label: "100%",
+        value: "100%"
+      },
+      {
+        label: "120%",
+        value: "120%"
+      },
+      {
+        label: "140%",
+        value: "140%"
+      }
+    ];
+    function l() {
+      const p = d.undo();
+      p && (ce(m.schemas, p), r.setCheckedNode(m.schemas[0]));
+    }
+    function b() {
+      const p = d.redo();
+      p && (ce(m.schemas, p), r.setCheckedNode(m.schemas[0]));
+    }
+    function t() {
+      r.reset();
+    }
+    function I(p) {
+      var P;
+      const x = (P = p.target.files) == null ? void 0 : P[0];
+      if (!x) return;
+      p.target.value = null;
+      const h = new FileReader();
+      h.readAsText(x), h.onload = (Y) => {
+        var B;
+        V((B = Y.target) == null ? void 0 : B.result);
+      };
+    }
+    function V(p) {
+      try {
+        let x = JSON.parse(p ?? "");
+        x.schemas || (x = He(x)), ce(m, x);
+      } catch (x) {
+        console.error(x);
+      }
+    }
+    function R(p) {
+      r.handleToggleDeviceMode(p), a.value = p;
+      const x = {
+        pc: {},
+        pad: {
+          width: "780px",
+          mode: p
+        },
+        mobile: {
+          width: "390px",
+          mode: p
+        }
+      };
+      m.canvas = x[p];
+    }
+    return (p, x) => (M(), W(q, null, [
+      w("div", Qe, [
+        w("div", Ke, [
+          (M(!0), W(q, null, ve(H.value, (h, P) => (M(), W(q, { key: P }, [
+            h.divider ? (M(), W("div", Xe)) : le("", !0),
+            w("div", {
+              title: h.title,
+              class: ee(["epic-action-item text-base h-90% px-10px flex items-center cursor-pointer", { disabled: h.disabled }]),
+              onClick: h.on
+            }, [
+              z(f(ie), {
+                name: h.icon
+              }, null, 8, ["name"])
+            ], 10, Ye)
+          ], 64))), 128))
+        ]),
+        ue(w("input", {
+          type: "file",
+          ref_key: "fileRef",
+          ref: n,
+          accept: ".json,.txt",
+          onChange: I
+        }, null, 544), [
+          [de, !1]
+        ]),
+        w("div", qe, [
+          f(_) ? le("", !0) : (M(), W("div", Ge, [
+            w("div", et, [
+              z(f(D), {
+                value: s.value,
+                "onUpdate:value": x[0] || (x[0] = (h) => s.value = h),
+                modelValue: s.value,
+                "onUpdate:modelValue": x[1] || (x[1] = (h) => s.value = h),
+                options: i,
+                size: "small"
+              }, null, 8, ["value", "modelValue"])
+            ])
+          ])),
+          w("div", tt, [
+            (M(), W(q, null, ve(g, (h) => w("div", {
+              key: h.key,
+              title: h.title,
+              class: ee(["epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm", { checked: h.key === a.value }]),
+              onClick: (P) => R(h.key)
+            }, [
+              z(f(ie), {
+                name: h.icon
+              }, null, 8, ["name"])
+            ], 10, ot)), 64))
+          ])
+        ])
+      ]),
+      z(Ze, {
+        ref_key: "previewJson",
+        ref: N
+      }, null, 512)
+    ], 64));
+  }
+}), st = { class: "h-full flex flex-col relative" }, lt = ["draggable"], at = /* @__PURE__ */ X({
+  __name: "editScreenContainer",
+  setup(Z) {
+    const D = L("pageSchema"), u = C(null), _ = C(null), a = C(null), { pressSpace: m, disabledZoom: r } = fe(), {
+      handleElementDragStart: d,
+      handleElementDrag: N,
+      handleElementDragEnd: g
+    } = Ve(u), { width: H, height: n } = We(u), { canvasScale: s, handleZoom: i } = ze(_);
+    let l = 0, b = 0;
+    const t = C({}), I = C({}), V = C({}), R = Re({ width: 0, height: 0 });
+    Te(x), G(V, () => {
+      pe(p);
+    });
+    function p() {
+      a.value && (R.value = {
+        width: a.value.clientWidth,
+        height: a.value.clientHeight
+      });
+    }
+    function x() {
+      var B, S;
+      V.value = {
+        width: ((B = D.canvas) == null ? void 0 : B.width) ?? "0",
+        height: ((S = D.canvas) == null ? void 0 : S.height) ?? "0"
+      };
+    }
+    Ae(H, h), G(R, h);
+    function h() {
+      let B = R.value.width || l, S = R.value.height || b;
+      t.value = {
+        width: H.value + B + "px",
+        // 滚动框宽度，包含额外的宽度
+        height: n.value + S + "px"
+        // 滚动框高度，包含额外的高度
+      }, I.value = {
+        width: B + "px",
+        // 画布宽度
+        height: S + "px"
+        // 画布高度
+      }, P();
+    }
+    function P() {
+      pe(() => {
+        var E;
+        let B = R.value.width || l;
+        const O = (R.value.height || b) / 2, j = B / 2;
+        (E = u.value) == null || E.scrollTo(j, O);
+      });
+    }
+    ae(u, Y), ae(_, Y);
+    function Y() {
+      var S;
+      if (!u.value) return;
+      const B = u.value.getBoundingClientRect();
+      if (l = B.width - 60, b = B.height - 80, !r.value)
+        if (R.value.width === 0)
+          s.value = 1;
+        else {
+          const O = (l - 20) / R.value.width, j = b / (R.value.height || ((S = _.value) == null ? void 0 : S.clientHeight) || 1), E = Math.abs(O - 1) < Math.abs(j - 1);
+          let Q = 1;
+          E ? Q = O : Q = j, (O < 1 || j < 1) && (Q = Math.min(O, j)), Q < 1.4 && Q > 0.5 && (s.value = Q);
+        }
+      Ee(h, 50)();
+    }
+    return (B, S) => (M(), W("div", st, [
+      z(nt),
+      w("div", {
+        ref_key: "editScreenContainerRef",
+        ref: u,
+        class: ee(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container", { "cursor-grab": f(m) }]),
+        draggable: f(m),
+        onWheel: S[0] || (S[0] = //@ts-ignore
+        (...O) => f(i) && f(i)(...O)),
+        onDragstart: S[1] || (S[1] = //@ts-ignore
+        (...O) => f(d) && f(d)(...O)),
+        onDragend: S[2] || (S[2] = //@ts-ignore
+        (...O) => f(g) && f(g)(...O)),
+        onDrag: S[3] || (S[3] = //@ts-ignore
+        (...O) => f(N) && f(N)(...O))
+      }, [
+        w("div", {
+          id: "canvasContainer",
+          class: "flex items-center justify-center",
+          style: se(t.value)
+        }, [
+          w("div", {
+            ref_key: "draggableElRef",
+            ref: _,
+            class: "transition-all"
+          }, [
+            w("div", {
+              class: ee({ "pointer-events-none": f(m) }),
+              style: se(I.value)
+            }, [
+              Be(B.$slots, "default")
+            ], 6)
+          ], 512)
+        ], 4)
+      ], 42, lt),
+      w("div", {
+        ref_key: "sizeBoxRef",
+        ref: a,
+        class: "absolute top-0 pointer-events-none",
+        style: se(V.value)
+      }, null, 4)
+    ]));
+  }
+}), it = { class: "epic-edit-canvas" }, ft = /* @__PURE__ */ X({
+  __name: "index",
+  setup(Z) {
+    const D = C(null), u = C(null), _ = L("pageSchema"), a = U(() => _.schemas[0]), m = U(() => ({
+      width: "100%",
+      height: "100%"
+    }));
+    return Oe(() => {
+      var r;
+      (r = u.value) == null || r.handleInit(D.value);
+    }), (r, d) => (M(), W("section", it, [
+      z(at, null, {
+        default: oe(() => [
+          w("div", {
+            ref_key: "epicEditRangeRef",
+            ref: D,
+            class: "epic-edit-range rounded-md overflow-auto relative",
+            style: se(m.value)
+          }, [
+            z(ge, { schema: a.value }, null, 8, ["schema"]),
+            z(Fe, {
+              ref_key: "ePreviewWidgetsRef",
+              ref: u
+            }, null, 512)
+          ], 4)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  ft as default
+};

package/dist/{index-DitKpeDV.cjs → index-Dd63RYpy.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),p=require("monaco-editor"),b=require("./index-BUkdmwKe.cjs"),h=require("./_plugin-vue_export-helper-BHFhmbuH.cjs");function v(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>l[r]})}}return o.default=l,Object.freeze(o)}const i=v(p),_=a.defineComponent({__name:"index",props:{language:{default:"json"},readOnly:{type:Boolean,default:!1},valueFormat:{default:"string"},modelValue:{},config:{default:()=>({selectOnLineNumbers:!0,minimap:{enabled:!1}})},lineNumbers:{default:"on"},autoToggleTheme:{type:Boolean},theme:{default:"vs-light"}},emits:["update:modelValue"],setup(l,{expose:o,emit:r}){const t=l,s=r,c=a.ref(null);let e=null;const{isDark:f}=b.useTheme();function d(){f.value?i.editor.setTheme("vs-dark"):i.editor.setTheme("vs-light")}function m(u){e==null||e.setValue(u||"")}function g(u){const n=e==null?void 0:e.getPosition();n&&(e==null||e.executeEdits("",[{range:new i.Range(n.lineNumber,n.column,n.lineNumber,n.column),text:u}]),e==null||e.setPosition({...n,column:n.column+u.length}),e==null||e.focus())}return a.onMounted(()=>{e=i.editor.create(c.value,{value:u(),...t.config,language:t.language,readOnly:t.readOnly,lineNumbers:t.lineNumbers,theme:t.theme,scrollBeyondLastLine:!1,scrollbar:{verticalScrollbarSize:10,horizontalScrollbarSize:10},automaticLayout:!0}),t.autoToggleTheme&&a.watch(()=>f.value,()=>{a.nextTick(()=>d())},{immediate:!0});function u(){return t.valueFormat==="json"&&t.modelValue?JSON.stringify(t.modelValue,null,2):t.modelValue??""}e.onDidChangeModelContent(()=>{const n=e==null?void 0:e.getValue();if(t.valueFormat==="json"&&n){s("update:modelValue",JSON.parse(n));return}s("update:modelValue",n??"")})}),o({setValue:m,insertText:g}),(u,n)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"editContainer",ref:c,class:"epic-code-editor"},null,512))}}),y=h._export_sfc(_,[["__scopeId","data-v-3e2e893c"]]);exports.default=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),p=require("monaco-editor"),b=require("./index-C_98Qusp.cjs"),h=require("./_plugin-vue_export-helper-BHFhmbuH.cjs");function v(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>l[r]})}}return o.default=l,Object.freeze(o)}const i=v(p),_=a.defineComponent({__name:"index",props:{language:{default:"json"},readOnly:{type:Boolean,default:!1},valueFormat:{default:"string"},modelValue:{},config:{default:()=>({selectOnLineNumbers:!0,minimap:{enabled:!1}})},lineNumbers:{default:"on"},autoToggleTheme:{type:Boolean},theme:{default:"vs-light"}},emits:["update:modelValue"],setup(l,{expose:o,emit:r}){const t=l,s=r,c=a.ref(null);let e=null;const{isDark:f}=b.useTheme();function d(){f.value?i.editor.setTheme("vs-dark"):i.editor.setTheme("vs-light")}function m(u){e==null||e.setValue(u||"")}function g(u){const n=e==null?void 0:e.getPosition();n&&(e==null||e.executeEdits("",[{range:new i.Range(n.lineNumber,n.column,n.lineNumber,n.column),text:u}]),e==null||e.setPosition({...n,column:n.column+u.length}),e==null||e.focus())}return a.onMounted(()=>{e=i.editor.create(c.value,{value:u(),...t.config,language:t.language,readOnly:t.readOnly,lineNumbers:t.lineNumbers,theme:t.theme,scrollBeyondLastLine:!1,scrollbar:{verticalScrollbarSize:10,horizontalScrollbarSize:10},automaticLayout:!0}),t.autoToggleTheme&&a.watch(()=>f.value,()=>{a.nextTick(()=>d())},{immediate:!0});function u(){return t.valueFormat==="json"&&t.modelValue?JSON.stringify(t.modelValue,null,2):t.modelValue??""}e.onDidChangeModelContent(()=>{const n=e==null?void 0:e.getValue();if(t.valueFormat==="json"&&n){s("update:modelValue",JSON.parse(n));return}s("update:modelValue",n??"")})}),o({setValue:m,insertText:g}),(u,n)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"editContainer",ref:c,class:"epic-code-editor"},null,512))}}),y=h._export_sfc(_,[["__scopeId","data-v-3e2e893c"]]);exports.default=y;