epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
100 lines (99 loc) • 2.77 kB
JavaScript
import { defineComponent as g, ref as p, onMounted as h, watch as v, nextTick as V, createElementBlock as T, openBlock as b } from "vue";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
import { useTheme as y } from "../../../../../hooks/src/common/theme.js";
/* empty css */
import "vuedraggable";
import * as u from "monaco-editor";
const B = /* @__PURE__ */ g({
__name: "index",
props: {
autoToggleTheme: { 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(i, { expose: s, emit: m }) {
const t = i, a = m, r = p(null);
let e = null;
const { isDark: o } = y();
function f() {
o.value ? u.editor.setTheme("vs-dark") : u.editor.setTheme("vs-light");
}
function c(n) {
e == null || e.setValue(n || "");
}
function d(n) {
const l = e == null ? void 0 : e.getPosition();
l && (e == null || e.executeEdits("", [
{
range: new u.Range(
l.lineNumber,
l.column,
l.lineNumber,
l.column
),
text: n
}
]), e == null || e.setPosition({
...l,
column: l.column + n.length
}), e == null || e.focus());
}
return h(() => {
e = u.editor.create(r.value, {
value: n(),
...t.config,
automaticLayout: !0,
language: t.language,
lineNumbers: t.lineNumbers,
readOnly: t.readOnly,
scrollbar: {
horizontalScrollbarSize: 10,
verticalScrollbarSize: 10
},
scrollBeyondLastLine: !1,
theme: t.theme
}), t.autoToggleTheme && v(
() => o.value,
() => {
V(() => f());
},
{
immediate: !0
}
);
function n() {
return t.valueFormat === "json" && t.modelValue ? JSON.stringify(t.modelValue, null, 2) : t.modelValue ?? "";
}
e.onDidChangeModelContent(() => {
const l = e == null ? void 0 : e.getValue();
if (t.valueFormat === "json" && l) {
a("update:modelValue", JSON.parse(l));
return;
}
a("update:modelValue", l ?? "");
});
}), s({
insertText: d,
setValue: c
}), (n, l) => (b(), T("div", {
ref_key: "editContainer",
ref: r,
class: "epic-code-editor"
}, null, 512));
}
});
export {
B as default
};