@vtj/designer
Version:
VTJ 是一款基于 Vue3 + Typescript 的低代码页面可视化设计器。内置低代码引擎、渲染器和代码生成器,面向前端开发者,开箱即用。 无缝嵌入本地开发工程,不改变前端开发流程和编码习惯。
68 lines (67 loc) • 2.49 kB
JavaScript
import { defineComponent as p, ref as f, onMounted as y, nextTick as g, onUnmounted as h, watch as w, createElementBlock as v, openBlock as V, normalizeStyle as k, withKeys as B, normalizeClass as E, withModifiers as x } from "vue";
import { editor as _ } from "monaco-editor";
const T = /* @__PURE__ */ p({
__name: "Editor",
props: {
lang: { default: "typescript" },
modelValue: { default: "" },
options: { default: () => ({}) },
height: { default: "300px" },
readonly: { type: Boolean, default: !1 },
dark: { type: Boolean, default: !1 },
border: { type: Boolean },
minimap: { type: Boolean, default: !1 }
},
emits: ["change", "blur", "update:modelValue"],
setup(l, { expose: s, emit: d }) {
const t = l;
self.MonacoEnvironment = {
createTrustedTypesPolicy: void 0,
async getWorker(o, a) {
let n;
return a === "json" && (n = await import("./json.worker-DCDqLFYI.js")), ["css", "scss", "less"].includes(a) && (n = await import("./css.worker-DhE07keG.js")), ["html", "handlebars", "razor", "vue"].includes(a) && (n = await import("./html.worker-C5hxLCyX.js")), ["typescript", "javascript"].includes(a) && (n = await import("./ts.worker-Bjq4oI3m.js")), n = n || await import("./editor.worker-DKpUct5n.js"), new n.default();
}
};
const r = d, i = f();
let e = null;
const u = async () => {
e && (await e.getAction("editor.action.formatDocument")?.run(), e.setValue(e.getValue()));
}, c = async () => {
await u();
const o = e?.getValue();
r("update:modelValue", o), r("blur", o);
}, m = () => {
e = _.create(i.value, {
value: t.modelValue,
language: t.lang,
readOnly: t.readonly,
theme: t.dark ? "vs-dark" : "vs",
automaticLayout: !0,
minimap: { enabled: t.minimap },
...t.options
}), e.onDidChangeModelContent((o) => {
r("change", e?.getValue(), o);
}), e.onDidBlurEditorText(c);
};
return y(() => {
g(m);
}), h(() => {
e && e.dispose();
}), w(
() => t.modelValue,
(o) => {
e && e.setValue(o);
}
), s({ getEditor: () => e }), (o, a) => (V(), v("div", {
class: E(["v-code-editor", { "is-border": t.border }]),
ref_key: "container",
ref: i,
onKeyup: a[0] || (a[0] = B(x(() => {
}, ["stop"]), ["enter"])),
style: k({ height: t.height })
}, null, 38));
}
});
export {
T as default
};