@web-utils/component 3.7.0 → 3.7.2

package/monaco-editor/index.mjs

@@ -1,28 +1,43 @@
-var u = Object.defineProperty;
-var d = Object.getOwnPropertySymbols;
-var c = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
-var r = (t, e, i) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, h = (t, e) => {
-  for (var i in e || (e = {}))
-    c.call(e, i) && r(t, i, e[i]);
-  if (d)
-    for (var i of d(e))
-      f.call(e, i) && r(t, i, e[i]);
-  return t;
+var y = Object.defineProperty;
+var u = Object.getOwnPropertySymbols;
+var _ = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable;
+var c = (e, t, i) => t in e ? y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, f = (e, t) => {
+  for (var i in t || (t = {}))
+    _.call(t, i) && c(e, i, t[i]);
+  if (u)
+    for (var i of u(t))
+      M.call(t, i) && c(e, i, t[i]);
+  return e;
 };
+var a = (e, t, i) => new Promise((d, s) => {
+  var r = (n) => {
+    try {
+      l(i.next(n));
+    } catch (h) {
+      s(h);
+    }
+  }, p = (n) => {
+    try {
+      l(i.throw(n));
+    } catch (h) {
+      s(h);
+    }
+  }, l = (n) => n.done ? d(n.value) : Promise.resolve(n.value).then(r, p);
+  l((i = i.apply(e, t)).next());
+});
 import * as o from "monaco-editor/esm/vs/editor/editor.api";
-import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution";
-import { c as l } from "../chunks/json-beautifier.Bp3GslGm.mjs";
-import { NOOP as a } from "@web-utils/core";
-import { n as g } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const m = {
+import { c as g } from "../chunks/json-beautifier.Bp3GslGm.mjs";
+import { NOOP as m } from "@web-utils/core";
+import { n as E } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
+const v = {
   name: "MonacoEditor",
   props: {
     diffEditor: { type: Boolean, default: !1 },
-    // 是否使用diff模式
+    // 是否使用 diff 模式
     width: { type: [String, Number], default: "100%" },
     height: { type: [String, Number], default: "100%" },
     original: String,
-    // 只有在diff模式下有效
+    // 只有在 diff 模式下有效
     value: [String, Object],
     language: { type: String, default: "javascript" },
     theme: { type: String, default: "vs" },
@@ -33,13 +48,18 @@ const m = {
         return {};
       }
     },
-    editorMounted: { type: Function, default: a },
-    editorBeforeMount: { type: Function, default: a },
+    editorMounted: { type: Function, default: m },
+    editorBeforeMount: { type: Function, default: m },
     keyIndex: { type: String }
   },
+  data() {
+    return {
+      fullscreen: !1
+    };
+  },
   computed: {
     style() {
-      return {
+      return this.fullscreen ? {} : {
         width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width,
         height: /^\d+$/.test(this.height) ? `${this.height}px` : this.height,
         position: "relative"
@@ -49,20 +69,20 @@ const m = {
   watch: {
     options: {
       deep: !0,
-      handler(t) {
-        var e;
-        (e = this.editor) == null || e.updateOptions(t);
+      handler(e) {
+        var t;
+        (t = this.editor) == null || t.updateOptions(e);
       }
     },
     keyIndex() {
-      let t = this.value;
-      typeof t == "object" && (t = l(t)), this.editor && t !== this._getValue() && this._setValue(t);
+      let e = this.value;
+      typeof e == "object" && (e = g(e)), this.editor && e !== this._getValue() && this._setValue(e);
     },
     language() {
       if (this.editor)
         if (this.diffEditor) {
-          const { original: t, modified: e } = this.editor.getModel();
-          o.editor.setModelLanguage(t, this.language), o.editor.setModelLanguage(e, this.language);
+          const { original: e, modified: t } = this.editor.getModel();
+          o.editor.setModelLanguage(e, this.language), o.editor.setModelLanguage(t, this.language);
         } else
           o.editor.setModelLanguage(this.editor.getModel(), this.language);
     },
@@ -71,30 +91,59 @@ const m = {
     },
     style() {
       this.$nextTick(() => {
-        var t;
-        (t = this.editor) == null || t.layout();
+        var e;
+        (e = this.editor) == null || e.layout();
       });
     },
-    value(t) {
-      this.editor && t !== this._getValue() && this._setValue(t);
+    value(e) {
+      this.editor && e !== this._getValue() && this._setValue(e);
     }
   },
   mounted() {
-    this.initMonaco();
+    this.initMonaco(), window.addEventListener("resize", this.onResize);
   },
   beforeDestroy() {
-    var t;
-    (t = this.editor) == null || t.dispose();
+    var e;
+    window.removeEventListener("resize", this.onResize), (e = this.editor) == null || e.dispose();
   },
   methods: {
     initMonaco() {
-      const { value: t, language: e, theme: i, readOnly: n, options: s } = this;
-      Object.assign(s, this._editorBeforeMount()), this.editor = o.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, h({
-        value: typeof t == "string" ? t : l(t),
-        language: e,
+      const { value: e, language: t, theme: i, readOnly: d, options: s } = this;
+      Object.assign(s, this._editorBeforeMount()), this.editor = o.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, f({
+        value: typeof e == "string" ? e : g(e),
+        language: t,
         theme: i,
-        readOnly: n
-      }, s)), this.diffEditor && this._setModel(this.value, this.original), this._editorMounted(this.editor);
+        readOnly: d
+      }, s)), this.diffEditor && this._setModel(this.value, this.original), this._editorMounted(this.editor), this.editor.addAction({
+        id: "f1",
+        label: "full screen",
+        keybindings: [o.KeyCode.F1],
+        run: (r) => {
+          this.toggleFullScreen();
+        }
+      }), this.editor.addAction({
+        id: "escape",
+        label: "exit full screen",
+        keybindings: [o.KeyCode.Escape],
+        run: (r) => {
+          this.fullscreen = !1;
+        }
+      });
+    },
+    toggleFullScreen() {
+      return a(this, null, function* () {
+        this.fullscreen = !this.fullscreen;
+      });
+    },
+    onResize() {
+      return a(this, null, function* () {
+        yield this.$nextTick();
+        const e = this.$el;
+        this.editor.layout({
+          width: e.clientWidth,
+          height: e.clientHeight
+        });
+      });
     },
     _handleFullScreen() {
       this.isMaximum ? this.minEditor() : this.maxEditor();
@@ -102,17 +151,17 @@ const m = {
     // 放大
     maxEditor() {
       this.isMaximum = !0;
-      const t = this.$el;
+      const e = this.$el;
       this.originSize = {
-        width: t.clientWidth,
-        height: t.clientHeight
-      }, t.classList.add("editor-fullscreen"), this.editor.layout({
+        width: e.clientWidth,
+        height: e.clientHeight
+      }, e.classList.add("editor-fullscreen"), this.editor.layout({
         height: document.body.clientHeight,
         width: document.body.clientWidth
       }), document.addEventListener("keyup", this.handleEsc);
     },
-    handleEsc(t) {
-      t.keyCode === 27 && this.minEditor();
+    handleEsc(e) {
+      e.keyCode === 27 && this.minEditor();
     },
     // 缩小
     minEditor() {
@@ -124,41 +173,41 @@ const m = {
     _getEditor() {
       return this.editor ? this.diffEditor ? this.editor.modifiedEditor : this.editor : null;
     },
-    _setModel(t, e) {
-      const { language: i } = this, n = o.editor.createModel(e, i), s = o.editor.createModel(t, i);
+    _setModel(e, t) {
+      const { language: i } = this, d = o.editor.createModel(t, i), s = o.editor.createModel(e, i);
       this.editor.setModel({
-        original: n,
+        original: d,
         modified: s
       });
     },
-    _setValue(t) {
-      const e = this._getEditor();
-      if (e) return e.setValue(t);
+    _setValue(e) {
+      const t = this._getEditor();
+      if (t) return t.setValue(e);
     },
     _getValue() {
-      const t = this._getEditor();
-      return t ? t.getValue() : "";
+      const e = this._getEditor();
+      return e ? e.getValue() : "";
     },
     _editorBeforeMount() {
       return this.editorBeforeMount(o) || {};
     },
-    _editorMounted(t) {
-      this.editorMounted(t, o), this.diffEditor ? t.onDidUpdateDiff((e) => {
+    _editorMounted(e) {
+      this.editorMounted(e, o), this.diffEditor ? e.onDidUpdateDiff((t) => {
         const i = this._getValue();
-        this._emitChange(i, e);
-      }) : t.onDidChangeModelContent((e) => {
+        this._emitChange(i, t);
+      }) : e.onDidChangeModelContent((t) => {
         const i = this._getValue();
-        this._emitChange(i, e);
+        this._emitChange(i, t);
       });
     },
-    _emitChange(t, e) {
-      this.$emit("change", t, e), this.$emit("input", t);
+    _emitChange(e, t) {
+      this.$emit("change", e, t), this.$emit("input", e);
     }
   },
-  render(t) {
-    const e = this.options.fullScreen;
-    return t("div", { class: "monaco_editor_container", style: this.style }, [
-      e ? t("i", {
+  render(e) {
+    const t = this.options.fullScreen;
+    return e("div", { class: ["monaco_editor_container", this.fullscreen ? "fullscreen" : ""], style: this.style }, [
+      t ? e("i", {
         class: "el-icon-full-screen",
         style: {
           width: "1.2em",
@@ -173,16 +222,16 @@ const m = {
       }) : ""
     ]);
   }
-}, p = null, _ = null;
-var y = /* @__PURE__ */ g(
-  m,
-  p,
-  _,
+}, w = null, x = null;
+var S = /* @__PURE__ */ E(
+  v,
+  w,
+  x,
   !1,
   null,
   null
 );
-const w = y.exports;
+const V = S.exports;
 export {
-  w as default
+  V as default
 };

package/monaco-editor/style.css

@@ -0,0 +1 @@
+.monaco_editor_container.fullscreen{z-index:9999;background:#fff;width:100%;height:100%;position:fixed;top:0;left:0}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "3.7.0",
+  "version": "3.7.2",
   "author": "Simple",
   "license": "MIT",
   "type": "module",
@@ -24,6 +24,7 @@
     "bpmn-js-token-simulation": "^0.38.1",
     "codemirror": "^5.65.15",
     "countup.js": "^2.8.2",
+    "cronosjs": "^1.7.1",
     "dayjs": "^1.11.13",
     "diagram-js": "15.3.0",
     "echarts": "^5.6.0",