@web-utils/component 4.0.10 → 4.0.11

package/monaco-editor/index.mjs

@@ -1,7 +1,207 @@
-import "monaco-editor/esm/vs/editor/editor.api";
-import { M as i } from "../chunks/MonacoEditor.D31t4FTy.mjs";
-import "@web-utils/core";
-import "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
+import * as i from "monaco-editor/esm/vs/editor/editor.api";
+import { c as d } from "../chunks/json-beautifier.Bp3GslGm.mjs";
+import { NOOP as r } from "@web-utils/core";
+import { n as h } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
+const a = {
+  name: "MonacoEditor",
+  props: {
+    diffEditor: { type: Boolean, default: !1 },
+    // 是否使用 diff 模式
+    width: { type: [String, Number], default: "100%" },
+    height: { type: [String, Number], default: "100%" },
+    original: String,
+    // 只有在 diff 模式下有效
+    value: [String, Object],
+    language: { type: String, default: "javascript" },
+    theme: { type: String, default: "vs" },
+    readOnly: { type: Boolean, default: !1 },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    editorMounted: { type: Function, default: r },
+    editorBeforeMount: { type: Function, default: r },
+    keyIndex: { type: String }
+  },
+  data() {
+    return {
+      fullscreen: !1
+    };
+  },
+  computed: {
+    style() {
+      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"
+      };
+    }
+  },
+  watch: {
+    options: {
+      deep: !0,
+      handler(e) {
+        var t;
+        (t = this.editor) == null || t.updateOptions(e);
+      }
+    },
+    keyIndex() {
+      let e = this.value;
+      typeof e == "object" && (e = d(e)), this.editor && e !== this._getValue() && this._setValue(e);
+    },
+    language() {
+      if (this.editor)
+        if (this.diffEditor) {
+          const { original: e, modified: t } = this.editor.getModel();
+          i.editor.setModelLanguage(e, this.language), i.editor.setModelLanguage(t, this.language);
+        } else
+          i.editor.setModelLanguage(this.editor.getModel(), this.language);
+    },
+    theme() {
+      this.editor && i.editor.setTheme(this.theme);
+    },
+    style() {
+      this.$nextTick(() => {
+        var e;
+        (e = this.editor) == null || e.layout();
+      });
+    },
+    value(e) {
+      this.editor && e !== this._getValue() && this._setValue(e);
+    }
+  },
+  mounted() {
+    this.initMonaco(), window.addEventListener("resize", this.onResize);
+  },
+  beforeDestroy() {
+    var e;
+    window.removeEventListener("resize", this.onResize), (e = this.editor) == null || e.dispose();
+  },
+  methods: {
+    initMonaco() {
+      const { value: e, language: t, theme: o, readOnly: n, options: s } = this;
+      Object.assign(s, this._editorBeforeMount()), this.editor = i.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, {
+        value: typeof e == "string" ? e : d(e),
+        language: t,
+        theme: o,
+        readOnly: n,
+        ...s
+      }), this.diffEditor && this._setModel(this.value, this.original), this._editorMounted(this.editor), this.editor.addAction({
+        id: "f1",
+        label: "full screen",
+        keybindings: [i.KeyCode.F1],
+        run: (l) => {
+          this.toggleFullScreen();
+        }
+      }), this.editor.addAction({
+        id: "escape",
+        label: "exit full screen",
+        keybindings: [i.KeyCode.Escape],
+        run: (l) => {
+          this.fullscreen = !1;
+        }
+      });
+    },
+    toggleFullScreen() {
+      this.fullscreen = !this.fullscreen;
+    },
+    async onResize() {
+      await this.$nextTick();
+      const e = this.$el;
+      this.editor.layout({
+        width: e.clientWidth,
+        height: e.clientHeight
+      });
+    },
+    _handleFullScreen() {
+      this.isMaximum ? this.minEditor() : this.maxEditor();
+    },
+    // 放大
+    maxEditor() {
+      this.isMaximum = !0;
+      const e = this.$el;
+      this.originSize = {
+        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(e) {
+      e.keyCode === 27 && this.minEditor();
+    },
+    // 缩小
+    minEditor() {
+      this.isMaximum = !1, this.$el.classList.remove("editor-fullscreen"), this.editor.layout({
+        height: this.originSize.height,
+        width: this.originSize.width
+      }), document.removeEventListener("keyup", this.handleEsc);
+    },
+    _getEditor() {
+      return this.editor ? this.diffEditor ? this.editor.modifiedEditor : this.editor : null;
+    },
+    _setModel(e, t) {
+      const { language: o } = this, n = i.editor.createModel(t, o), s = i.editor.createModel(e, o);
+      this.editor.setModel({
+        original: n,
+        modified: s
+      });
+    },
+    _setValue(e) {
+      const t = this._getEditor();
+      if (t) return t.setValue(e);
+    },
+    _getValue() {
+      const e = this._getEditor();
+      return e ? e.getValue() : "";
+    },
+    _editorBeforeMount() {
+      return this.editorBeforeMount(i) || {};
+    },
+    _editorMounted(e) {
+      this.editorMounted(e, i), this.diffEditor ? e.onDidUpdateDiff((t) => {
+        const o = this._getValue();
+        this._emitChange(o, t);
+      }) : e.onDidChangeModelContent((t) => {
+        const o = this._getValue();
+        this._emitChange(o, t);
+      });
+    },
+    _emitChange(e, t) {
+      this.$emit("change", e, t), this.$emit("input", e);
+    }
+  },
+  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",
+          height: "1.2em",
+          position: "absolute",
+          left: "0px",
+          top: "0px",
+          zIndex: "1",
+          cursor: "pointer"
+        },
+        on: { click: this._handleFullScreen }
+      }) : ""
+    ]);
+  }
+}, u = null, c = null;
+var f = /* @__PURE__ */ h(
+  a,
+  u,
+  c,
+  !1,
+  null,
+  null
+);
+const y = f.exports;
 export {
-  i as default
+  y as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "author": "Simple",
   "license": "MIT",
   "type": "module",

package/page-skeleton/index.mjs

@@ -1,9 +1,9 @@
 import o from "../page/index.mjs";
-import "./page/style.css";
+import "../page/style.css";
 import n from "../nav-bar/index.mjs";
-import "./nav-bar/style.css";
+import "../nav-bar/style.css";
 import r from "../page-header/index.mjs";
-import "./page-header/style.css";
+import "../page-header/style.css";
 import { n as a } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const l = {
   name: "PageSkeleton",

package/pageable-table/index.mjs

@@ -2,7 +2,7 @@ import { copy as v, hasOwn as P } from "@web-utils/core";
 import S from "element-ui/lib/message";
 import { g as _, f as C, i as B, j as A } from "../chunks/index.B2TRddqf.mjs";
 import { merge as f } from "@web-utils/integrations/lodash";
-import { g as K } from "../chunks/dictionary.C6NmC-bT.mjs";
+import { g as K } from "../chunks/dictionary.3O-Io7Vh.mjs";
 import { _ as T } from "../chunks/helper.BiMLcEEk.mjs";
 import "vue";
 import { n as b } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";

package/photo-swipe/index.mjs

@@ -1,5 +1,36 @@
-import { P as a } from "../chunks/PhotoSwipe.BunkqqPu.mjs";
-import "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
+import { p as o } from "../chunks/index.BmYCjxZQ.mjs";
+import { n } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
+const i = {
+  name: "PhotoSwipe",
+  props: {
+    urls: Array,
+    selector: {
+      type: String,
+      default: "img"
+    }
+  },
+  methods: {
+    async preview(e) {
+      await o(e, this.$refs.wrapper, { selector: this.selector });
+    }
+  }
+};
+var a = function() {
+  var r = this, t = r._self._c;
+  return t("div", { ref: "wrapper" }, [r._t("default", function() {
+    return r._l(r.urls, function(s) {
+      return t("img", { key: s.src, staticStyle: { cursor: "pointer" }, attrs: { width: "100", src: s.src, alt: "" }, on: { click: r.preview } });
+    });
+  }, { urls: r.urls, preview: r.preview })], 2);
+}, c = [], p = /* @__PURE__ */ n(
+  i,
+  a,
+  c,
+  !1,
+  null,
+  null
+);
+const _ = p.exports;
 export {
-  a as default
+  _ as default
 };

package/present-view/index.mjs

@@ -1,7 +1,7 @@
 import { isInContainer as u, delay as m, hasOwn as a, toStringArray as h } from "@web-utils/core";
 import { merge as b } from "@web-utils/integrations/lodash";
 import p from "../resize-observer/index.mjs";
-import "./resize-observer/style.css";
+import "../resize-observer/style.css";
 import { n as v } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const f = [
   "back",

package/split-pane/index.mjs

@@ -1,6 +1,6 @@
 import { n as f } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 import l from "../resize-observer/index.mjs";
-import "./resize-observer/style.css";
+import "../resize-observer/style.css";
 function h(e, t) {
   for (let s = 0; s < t.length; s++)
     if (e === t[s])

package/swiper/index.mjs

@@ -1,6 +1,6 @@
 import { getEleWidth as r } from "@web-utils/core";
 import a from "../resize-observer/index.mjs";
-import "./resize-observer/style.css";
+import "../resize-observer/style.css";
 import { n as o } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const h = {
   name: "Swiper",

package/table-column/index.mjs

@@ -1,8 +1,8 @@
 import { _ as T } from "../chunks/helper.BiMLcEEk.mjs";
 import { h as d } from "vue";
-import { g as C } from "../chunks/dictionary.C6NmC-bT.mjs";
+import { g as C } from "../chunks/dictionary.3O-Io7Vh.mjs";
 import { n as B } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-import { f as V } from "../chunks/core.0Exl13Mz.mjs";
+import { f as V } from "../chunks/core.DJEgjQW6.mjs";
 const D = {
   name: "DictRender",
   inheritAttrs: !1,

package/table-view/index.mjs

@@ -2,8 +2,8 @@ import { isFunction as p, toStringArray as f, isString as o, isArray as c, trace
 import { merge as i } from "@web-utils/integrations/lodash";
 import { g as m, h as w } from "../chunks/index.B2TRddqf.mjs";
 import g from "../form-item-config-provider/index.mjs";
-import { r as v, p as _ } from "../chunks/configComponents.DQaqUQFs.mjs";
-import { t as a } from "../chunks/core.0Exl13Mz.mjs";
+import { a as v, p as _ } from "../chunks/configComponents.CpKi15WN.mjs";
+import { b as a } from "../chunks/core.DJEgjQW6.mjs";
 import y from "element-ui/lib/transitions/collapse-transition";
 import { n as S } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const T = [

package/tabs-view/index.mjs

@@ -1,6 +1,6 @@
 import { toStringArray as a } from "@web-utils/core";
 import { merge as n } from "@web-utils/integrations/lodash";
-import { p as l } from "../chunks/configComponents.DQaqUQFs.mjs";
+import { p as l } from "../chunks/configComponents.CpKi15WN.mjs";
 import { n as i } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const u = [
   "back",

package/toolbar/index.mjs

@@ -1,6 +1,6 @@
 import { h as p } from "vue";
 import { copy as m, NOOP as d } from "@web-utils/core";
-import { h as y, g } from "../chunks/configComponents.DQaqUQFs.mjs";
+import { h as y, b as g } from "../chunks/configComponents.CpKi15WN.mjs";
 import { n as B } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const u = {
   back: {

package/toolbar-button/index.mjs

@@ -1,5 +1,5 @@
 import { isFunction as n, isArray as r } from "@web-utils/core";
-import { h as a } from "../chunks/configComponents.DQaqUQFs.mjs";
+import { h as a } from "../chunks/configComponents.CpKi15WN.mjs";
 import { n as l } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
 const s = {
   name: "ToolbarButton",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "contributions": {
     "html": {
       "description-markup": "markdown",