@web-utils/component 2.9.12 → 2.9.14

package/easy-popup/index.mjs

@@ -1,22 +1,22 @@
-var h = (e, t, i) => new Promise((o, a) => {
-  var f = (s) => {
+var d = (e, t, i) => new Promise((o, a) => {
+  var h = (s) => {
     try {
       n(i.next(s));
     } catch (r) {
       a(r);
     }
-  }, l = (s) => {
+  }, f = (s) => {
     try {
       n(i.throw(s));
     } catch (r) {
       a(r);
     }
-  }, n = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(f, l);
+  }, n = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(h, f);
   n((i = i.apply(e, t)).next());
 });
-import { getComputedWidth as u, getComputedHeight as c } from "@web-utils/core";
-import { n as p } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var _ = function() {
+import { getComputedWidth as p, getComputedHeight as u } from "@web-utils/core";
+import { n as c } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var x = function() {
   var e = this, t = e.$createElement, i = e._self._c || t;
   return i("Transition", {
     attrs: {
@@ -32,12 +32,14 @@ var _ = function() {
     ref: "container",
     class: ["easy-popup", {
       "easy-popup__visible": e.visible,
-      "easy-popup__hide": !e.visible
+      "easy-popup__hide": !e.visible,
+      "flex-row": e.flexRow,
+      "flex-column": e.flexColumn
     }],
     style: e.position
   }, [e._t("default")], 2) : e._e()]);
-}, v = [];
-const y = {
+}, y = [];
+const _ = {
   name: "EasyPopup",
   props: {
     // 是否开启边界检测
@@ -54,7 +56,10 @@ const y = {
     borderWidth: {
       type: Number,
       default: 6
-    }
+    },
+    appendToBody: Boolean,
+    flexRow: Boolean,
+    flexColumn: Boolean
   },
   data() {
     return {
@@ -75,41 +80,44 @@ const y = {
   },
   watch: {
     axis() {
-      return h(this, null, function* () {
+      return d(this, null, function* () {
         if (this.border) {
           yield this.$nextTick();
-          const e = u(this.$refs.container), t = c(this.$refs.container), i = document.body.offsetWidth, o = document.body.offsetHeight;
+          const e = p(this.$refs.container), t = u(this.$refs.container), i = document.body.offsetWidth, o = document.body.offsetHeight;
           this.axis.x + this.offset.x + e >= i && (this.axis.x = i - e - this.borderWidth - this.offset.x), this.axis.y + this.offset.y + t >= o && (this.axis.y = o - t - this.borderWidth - this.offset.y);
         }
       });
     }
   },
+  destroyed() {
+    this.$el.remove();
+  },
   methods: {
     show({ clientX: e, clientY: t }) {
-      this.axis = { x: e, y: t }, this.visible || (document.addEventListener("click", this.hide, !0), this.rendered = !0, this.visible = !0);
+      this.axis = { x: e, y: t }, this.visible || (document.addEventListener("click", this.hide, !0), this.rendered = !0, this.visible = !0), this.appendToBody && document.body.appendChild(this.$el);
     },
     hide() {
       this.visible = !1, document.removeEventListener("click", this.hide);
     }
   }
-}, d = {};
-var x = /* @__PURE__ */ p(
-  y,
+}, l = {};
+var m = /* @__PURE__ */ c(
   _,
-  v,
+  x,
+  y,
   !1,
-  m,
+  v,
   null,
   null,
   null
 );
-function m(e) {
-  for (let t in d)
-    this[t] = d[t];
+function v(e) {
+  for (let t in l)
+    this[t] = l[t];
 }
-const E = /* @__PURE__ */ function() {
-  return x.exports;
+const g = /* @__PURE__ */ function() {
+  return m.exports;
 }();
 export {
-  E as default
+  g as default
 };

package/element-dialog/index.mjs

@@ -1,23 +1,24 @@
-var r = (e, l, t) => new Promise((i, n) => {
-  var c = (o) => {
+var s = (e, l, t) => new Promise((i, r) => {
+  var u = (o) => {
     try {
       a(t.next(o));
-    } catch (s) {
-      n(s);
+    } catch (n) {
+      r(n);
     }
-  }, p = (o) => {
+  }, c = (o) => {
     try {
       a(t.throw(o));
-    } catch (s) {
-      n(s);
+    } catch (n) {
+      r(n);
     }
-  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(c, p);
+  }, a = (o) => o.done ? i(o.value) : Promise.resolve(o.value).then(u, c);
   a((t = t.apply(e, l)).next());
 });
 import d from "element-ui/lib/dialog";
 import { dialogDrag as h } from "@web-utils/vue/directives/dialog-drag";
-import { n as f } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var m = function() {
+import { getComputedHeight as f, isDef as m } from "@web-utils/core";
+import { n as g } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var y = function() {
   var e = this, l = e.$createElement, t = e._self._c || l;
   return t("Transition", {
     attrs: {
@@ -57,7 +58,9 @@ var m = function() {
       "el-dialog--flex-row": e.flexRow,
       "el-dialog--flex-column": e.flexColumn
     }, e.customClass],
-    style: e.style,
+    style: Object.assign({}, e.style, {
+      top: e.marginTop
+    }),
     attrs: {
       role: "dialog",
       "aria-modal": "true",
@@ -104,8 +107,8 @@ var m = function() {
   }, [e._t("footer", null, {
     handleClose: e.handleClose
   })], 2) : e._e()])])]);
-}, g = [];
-const y = {
+}, _ = [];
+const v = {
   props: {
     visible: {
       type: Boolean,
@@ -140,12 +143,12 @@ const y = {
       default: "76vh"
     }
   }
-}, _ = {
+}, C = {
   name: "ElementDialog",
   directives: {
     dialogDrag: h
   },
-  mixins: [...d.mixins || d.default.mixins, y],
+  mixins: [...d.mixins || d.default.mixins, v],
   props: {
     title: {
       type: String,
@@ -192,12 +195,15 @@ const y = {
       type: Boolean,
       default: !0
     },
-    embed: Boolean
+    embed: Boolean,
+    verticalCenter: Boolean,
+    offsetTop: Number
   },
   data() {
     return {
       fullScreen: !1,
-      closed: !1
+      closed: !1,
+      marginTop: 0
     };
   },
   computed: {
@@ -205,23 +211,33 @@ const y = {
       const e = {
         maxHeight: "100%"
       };
-      return this.fullScreen || (e.marginTop = this.top, this.width && (e.width = this.width), e.maxHeight = this.maxHeight), e;
+      return this.fullScreen || (this.width && (e.width = this.width), e.maxHeight = this.maxHeight), e;
     }
   },
   watch: {
     visible(e) {
-      return r(this, null, function* () {
-        e ? (this.closed = !1, this.$emit("open"), this.$el.addEventListener("scroll", this.updatePopper), yield this.$nextTick(), this.$refs.dialog.scrollTop = 0, this.appendToBody && document.body.appendChild(this.$el)) : (this.$el.removeEventListener("scroll", this.updatePopper), this.closed || this.$emit("close"));
+      return s(this, null, function* () {
+        e ? (this.closed = !1, this.$emit("open"), this.$el.addEventListener("scroll", this.updatePopper), yield this.$nextTick(), this.$refs.dialog.scrollTop = 0, yield this.computeTop(), this.appendToBody && document.body.appendChild(this.$el)) : (this.$el.removeEventListener("scroll", this.updatePopper), this.closed || this.$emit("close"));
       });
     }
   },
+  created() {
+    this.$watch(() => ({ offsetTop: this.offsetTop, verticalCenter: this.verticalCenter, top: this.top }), this.computeTop, { deep: !0 });
+  },
   mounted() {
-    this.visible && (this.rendered = !0, this.open(), this.appendToBody && document.body.appendChild(this.$el));
+    return s(this, null, function* () {
+      this.visible && (this.rendered = !0, this.open(), yield this.computeTop(), this.appendToBody && document.body.appendChild(this.$el));
+    });
   },
   destroyed() {
     this.appendToBody && this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el);
   },
   methods: {
+    computeTop() {
+      return s(this, null, function* () {
+        yield this.$nextTick(), this.verticalCenter ? this.marginTop = `${(document.body.offsetHeight - f(this.$refs.dialog)) / 2 + (m(this.offsetTop) ? this.offsetTop : 0)}px` : this.marginTop = this.top;
+      });
+    },
     toggleFullScreen() {
       this.fullScreen = !this.fullScreen;
     },
@@ -254,24 +270,24 @@ const y = {
       this.exitFullScreen(), this.$emit("closed");
     }
   }
-}, u = {};
-var v = /* @__PURE__ */ f(
+}, p = {};
+var b = /* @__PURE__ */ g(
+  C,
+  y,
   _,
-  m,
-  g,
   !1,
-  C,
+  S,
   null,
   null,
   null
 );
-function C(e) {
-  for (let l in u)
-    this[l] = u[l];
+function S(e) {
+  for (let l in p)
+    this[l] = p[l];
 }
-const B = /* @__PURE__ */ function() {
-  return v.exports;
+const E = /* @__PURE__ */ function() {
+  return b.exports;
 }();
 export {
-  B as default
+  E as default
 };

package/element-dialog/style.css

@@ -1 +1 @@
-.element-dialog.el-dialog.el-dialog-resizeable{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body{position:relative;flex:1 1 auto;padding:0}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__header{position:relative;font-size:18px}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__footer{padding-bottom:10px;text-align:right}.element-dialog.el-dialog.el-dialog-resizeable .dialog-head-group{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.element-dialog.el-dialog.is-fullscreen{position:absolute;top:0!important;left:0!important;width:100%!important;height:100%!important}.element-dialog.el-dialog.el-dialog--center .el-dialog__header{justify-content:center}.element-dialog.el-dialog.el-dialog--flex-column .el-dialog__body{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog--flex-row .el-dialog__body{display:flex;flex-direction:row}.element-dialog.el-dialog.el-dialog__body-padding .el-dialog__body{padding:10px}.element-dialog.el-dialog .el-dialog__body{padding:0;overflow:auto}.element-dialog.el-dialog .el-dialog__header{display:flex;flex-direction:row;position:relative;align-items:center;padding:4px 10px;font-size:16px;background-color:#409eff}.element-dialog.el-dialog .el-dialog__header .el-dialog__title{color:#fff;font-weight:400;font-size:16px}.element-dialog.el-dialog .header-button-wrapper{position:absolute;top:50%;right:10px;display:flex;transform:translateY(-50%)}.element-dialog.el-dialog .header-button{padding:2px;color:#fff;border:none;outline:0;cursor:pointer}.element-dialog.el-dialog .header-button.header-dialog-close:hover{background:#e34e55}.element-dialog.el-dialog .header-button:hover{background:rgba(0,0,0,.3)}
+.element-dialog.el-dialog{margin:0 auto}.element-dialog.el-dialog.el-dialog-resizeable{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body{position:relative;flex:1 1 auto;padding:0}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__header{position:relative;font-size:18px}.element-dialog.el-dialog.el-dialog-resizeable .el-dialog__footer{padding-bottom:10px;text-align:right}.element-dialog.el-dialog.el-dialog-resizeable .dialog-head-group{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.element-dialog.el-dialog.is-fullscreen{position:absolute;margin-top:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important}.element-dialog.el-dialog.el-dialog--center .el-dialog__header{justify-content:center}.element-dialog.el-dialog.el-dialog--flex-column .el-dialog__body{display:flex;flex-direction:column}.element-dialog.el-dialog.el-dialog--flex-row .el-dialog__body{display:flex;flex-direction:row}.element-dialog.el-dialog.el-dialog__body-padding .el-dialog__body{padding:10px}.element-dialog.el-dialog .el-dialog__body{padding:0;overflow:auto}.element-dialog.el-dialog .el-dialog__header{display:flex;flex-direction:row;position:relative;align-items:center;padding:4px 10px;font-size:16px;background-color:#409eff}.element-dialog.el-dialog .el-dialog__header .el-dialog__title{color:#fff;font-weight:400;font-size:16px}.element-dialog.el-dialog .header-button-wrapper{position:absolute;top:50%;right:10px;display:flex;transform:translateY(-50%)}.element-dialog.el-dialog .header-button{padding:2px;color:#fff;border:none;outline:0;cursor:pointer}.element-dialog.el-dialog .header-button.header-dialog-close:hover{background:#e34e55}.element-dialog.el-dialog .header-button:hover{background:rgba(0,0,0,.3)}

package/flow-viewer/index.mjs

@@ -1,39 +1,39 @@
-var k = Object.defineProperty, b = Object.defineProperties;
-var x = Object.getOwnPropertyDescriptors;
+var b = Object.defineProperty, x = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
 var f = Object.getOwnPropertySymbols;
-var M = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
-var u = (e, i, t) => i in e ? k(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t, w = (e, i) => {
+var V = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
+var u = (e, i, t) => i in e ? b(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t, w = (e, i) => {
   for (var t in i || (i = {}))
-    M.call(i, t) && u(e, t, i[t]);
+    V.call(i, t) && u(e, t, i[t]);
   if (f)
     for (var t of f(i))
-      V.call(i, t) && u(e, t, i[t]);
+      $.call(i, t) && u(e, t, i[t]);
   return e;
-}, v = (e, i) => b(e, x(i));
-var y = (e, i, t) => new Promise((l, o) => {
-  var h = (r) => {
+}, v = (e, i) => x(e, M(i));
+var y = (e, i, t) => new Promise((s, n) => {
+  var h = (o) => {
     try {
-      a(t.next(r));
-    } catch (n) {
-      o(n);
+      a(t.next(o));
+    } catch (r) {
+      n(r);
     }
-  }, s = (r) => {
+  }, l = (o) => {
     try {
-      a(t.throw(r));
-    } catch (n) {
-      o(n);
+      a(t.throw(o));
+    } catch (r) {
+      n(r);
     }
-  }, a = (r) => r.done ? l(r.value) : Promise.resolve(r.value).then(h, s);
+  }, a = (o) => o.done ? s(o.value) : Promise.resolve(o.value).then(h, l);
   a((t = t.apply(e, i)).next());
 });
-import $ from "bpmn-js/lib/NavigatedViewer";
+import E from "bpmn-js/lib/NavigatedViewer";
 import d from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
-import { create as c, attr as m, append as p } from "tiny-svg";
-import { query as E } from "min-dom";
+import { create as c, attr as p, append as m } from "tiny-svg";
+import { query as A } from "min-dom";
 import F from "@web-utils/component/easy-popup";
 import "@web-utils/component/easy-popup/style.css";
 import { n as S } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var A = function() {
+var B = function() {
   var e = this, i = e.$createElement, t = e._self._c || i;
   return t("div", {
     ref: "container",
@@ -44,6 +44,8 @@ var A = function() {
   }, [t("EasyPopup", {
     ref: "popup",
     attrs: {
+      "append-to-body": "",
+      "flex-column": "",
       offset: {
         x: 6,
         y: 6
@@ -54,7 +56,7 @@ var A = function() {
   }, {
     element: e.element
   })], 2)], 1);
-}, B = [];
+}, P = [];
 const g = d.prototype._handleWheel, W = {
   __init__: ["zoomScroll"],
   zoomScroll: ["type", d]
@@ -83,7 +85,9 @@ const g = d.prototype._handleWheel, W = {
       type: String,
       default: "rgb(0 190 0 / 100%)"
     },
-    ctrlKey: Boolean
+    ctrlKey: Boolean,
+    nodePopup: Boolean,
+    events: Array
   },
   data() {
     return {
@@ -98,35 +102,39 @@ const g = d.prototype._handleWheel, W = {
   },
   mounted() {
     d.prototype._handleWheel = this.ctrlKey ? g : function(e) {
-      const { target: i, deltaMode: t, clientX: l, clientY: o, deltaX: h, deltaY: s } = e;
+      const { target: i, deltaMode: t, clientX: s, clientY: n, deltaX: h, deltaY: l } = e;
       g.call(this, {
         target: i,
         deltaMode: t,
-        clientX: l,
-        clientY: o,
+        clientX: s,
+        clientY: n,
         deltaX: h,
-        deltaY: s,
+        deltaY: l,
         preventDefault() {
           e.preventDefault();
         },
         ctrlKey: !0
       });
-    }, this.bpmnViewer = new $(v(w({}, this.options), {
+    }, this.bpmnViewer = new E(v(w({}, this.options), {
       container: this.$refs.container,
       additionalModules: [W]
     })), this.bpmnViewer.on("import.done", (e) => {
       const i = e.error, t = e.warnings;
       i ? this.$emit("error", i) : this.$emit("shown", t), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
-      const l = this.bpmnViewer.get("eventBus");
-      l.on("element.mousemove", (n) => {
-        n.element.type === "bpmn:UserTask" && requestAnimationFrame(() => y(this, null, function* () {
-          this.$emit("node-mousemove", n.element), this.element = n.element, yield this.$nextTick(), this.$refs.popup.show(n.originalEvent);
+      const s = this.bpmnViewer.get("eventBus");
+      this.events && this.events.forEach((r) => {
+        s.on(r, (k) => {
+          this.$emit(r.replace(".", "-"), k.element);
+        });
+      }), this.nodePopup && s.on("element.mousemove", (r) => {
+        r.element.type === "bpmn:UserTask" && requestAnimationFrame(() => y(this, null, function* () {
+          this.$emit("node-mousemove", r.element), this.element = r.element, yield this.$nextTick(), this.$refs.popup.show(r.originalEvent);
         }));
-      }), l.on("element.out", () => {
+      }), this.nodePopup && s.on("element.out", () => {
         this.$refs.popup.hide(), this.element = {};
       }), this.highlightFlow(this.historicActivities, this.activities);
-      const o = c("marker");
-      m(o, {
+      const n = c("marker");
+      p(n, {
         id: "sequenceflow-arrow-green",
         viewBox: "0 0 20 20",
         refX: "11",
@@ -136,12 +144,12 @@ const g = d.prototype._handleWheel, W = {
         orient: "auto"
       });
       const h = c("path");
-      m(h, {
+      p(h, {
         d: "M 1 5 L 11 10 L 1 15 Z",
         style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 1px; fill: var(--highlight-color);"
-      }), p(o, h);
-      const s = c("marker");
-      m(s, {
+      }), m(n, h);
+      const l = c("marker");
+      p(l, {
         id: "conditional-default-flow-marker-green",
         viewBox: "0 0 20 20",
         refX: "0",
@@ -151,12 +159,12 @@ const g = d.prototype._handleWheel, W = {
         orient: "auto"
       });
       const a = c("path");
-      m(a, {
+      p(a, {
         d: "M 6 4 L 10 16",
         style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 2px; fill: var(--highlight-color);"
-      }), p(s, a);
-      const r = E("defs", this.$el);
-      p(r, o), p(r, s);
+      }), m(l, a);
+      const o = A("defs", this.$el);
+      m(o, n), m(o, l);
     }), this.bpmnViewer.importXML(this.xml), this.$watch(() => ({
       activities: this.activities,
       historicActivities: this.historicActivities
@@ -178,8 +186,8 @@ const g = d.prototype._handleWheel, W = {
 }, _ = {};
 var q = /* @__PURE__ */ S(
   X,
-  A,
   B,
+  P,
   !1,
   C,
   null,
@@ -190,9 +198,9 @@ function C(e) {
   for (let i in _)
     this[i] = _[i];
 }
-const P = /* @__PURE__ */ function() {
+const U = /* @__PURE__ */ function() {
   return q.exports;
 }();
 export {
-  P as default
+  U as default
 };

package/package.json

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

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.9.12",
+  "version": "2.9.14",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1428,6 +1428,30 @@
                 "type": "number"
               },
               "default": "6"
+            },
+            {
+              "name": "appendToBody",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
+            },
+            {
+              "name": "flexRow",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
+            },
+            {
+              "name": "flexColumn",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
             }
           ],
           "slots": [
@@ -2094,6 +2118,22 @@
                 "type": "boolean"
               },
               "default": ""
+            },
+            {
+              "name": "verticalCenter",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
+            },
+            {
+              "name": "offsetTop",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": ""
             }
           ],
           "events": [
@@ -2627,6 +2667,22 @@
                 "type": "boolean"
               },
               "default": ""
+            },
+            {
+              "name": "nodePopup",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
+            },
+            {
+              "name": "events",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": ""
             }
           ],
           "events": [
@@ -20358,9 +20414,9 @@
               "description": "The default set of options to show before the user starts searching. Used for async search mode.\nWhen set to `true`, the results for search query as a empty string will be autoloaded.",
               "value": {
                 "kind": "expression",
-                "type": "union"
+                "type": "boolean"
               },
-              "default": ""
+              "default": "false"
             },
             {
               "name": "deleteRemoves",