epic-designer/dist/ui-kit/panel-ui/src/components/MonacoEditor/index.vue2.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as y, ref as s, onMounted as V, watch as b, nextTick as x, createElementBlock as m, openBlock as f, normalizeStyle as T, normalizeClass as N, createCommentVNode as k, createVNode as C, unref as B } from "vue";
/* empty css                                 */
import _ from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css                                             */
/* empty css                                                  */
import "../../../../../manager/src/pluginManager.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { useTheme as F } from "../../../../../hooks/src/common/theme.js";
/* empty css                                           */
import "vue-draggable-plus";
import * as u from "monaco-editor";
const O = `position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2999;`, G = /* @__PURE__ */ y({
  __name: "index",
  props: {
    allowFullscreen: { type: Boolean, default: !0 },
    autoToggleTheme: { type: Boolean },
    bordered: { type: Boolean },
    config: { default: () => ({
      minimap: {
        enabled: !1
      },
      selectOnLineNumbers: !0
    }) },
    language: { default: "json" },
    lineNumbers: { default: "on" },
    modelValue: { default: "" },
    readOnly: { type: Boolean, default: !1 },
    theme: { default: "vs-light" },
    valueFormat: { default: "string" }
  },
  emits: ["update:modelValue"],
  setup(p, { expose: c, emit: d }) {
    const l = p, a = d, o = s(!1), r = s(null);
    let e = null;
    const { isDark: i } = F();
    function g() {
      i.value ? u.editor.setTheme("vs-dark") : u.editor.setTheme("vs-light");
    }
    function v(n) {
      e == null || e.setValue(n || "");
    }
    function h(n) {
      const t = e == null ? void 0 : e.getPosition();
      t && (e == null || e.executeEdits("", [
        {
          range: new u.Range(
            t.lineNumber,
            t.column,
            t.lineNumber,
            t.column
          ),
          text: n
        }
      ]), e == null || e.setPosition({
        ...t,
        column: t.column + n.length
      }), e == null || e.focus());
    }
    return V(() => {
      e = u.editor.create(r.value, {
        value: n(),
        ...l.config,
        automaticLayout: !0,
        language: l.language,
        lineNumbers: l.lineNumbers,
        readOnly: l.readOnly,
        scrollBeyondLastLine: !1,
        theme: l.theme
      }), l.autoToggleTheme && b(
        () => i.value,
        () => {
          x(() => g());
        },
        {
          immediate: !0
        }
      );
      function n() {
        return l.valueFormat === "json" && l.modelValue ? JSON.stringify(l.modelValue, null, 2) : l.modelValue ?? "";
      }
      e.onDidChangeModelContent(() => {
        const t = e == null ? void 0 : e.getValue();
        if (l.valueFormat === "json" && t) {
          a("update:modelValue", JSON.parse(t));
          return;
        }
        a("update:modelValue", t ?? "");
      });
    }), c({
      insertText: h,
      setValue: v
    }), (n, t) => (f(), m("div", {
      ref_key: "editContainer",
      ref: r,
      class: N([{ bordered: l.bordered }, "epic-code-editor relative"]),
      style: T(o.value ? O : "")
    }, [
      l.allowFullscreen ? (f(), m("div", {
        key: 0,
        class: "z-999 text-$ep-text-helper absolute right-4 top-2 cursor-pointer text-xl",
        onClick: t[0] || (t[0] = (S) => o.value = !o.value)
      }, [
        C(B(_), {
          name: o.value ? "icon--epic--close-fullscreen" : "icon--epic--open-fullscreen"
        }, null, 8, ["name"])
      ])) : k("", !0)
    ], 6));
  }
});
export {
  G as default
};