@web-utils/component 2.9.6 → 2.9.8

package/flow-designer/style.css

@@ -1 +1 @@
-.process-panel__container{box-sizing:border-box;max-height:100%;padding:0 8px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #eee;box-shadow:0 0 8px #ccc;transition:width .25s ease-in}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{font-size:20px;cursor:pointer;text-align:center;color:#606266}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{display:flex;align-items:flex-start;width:100%;margin:8px 0}.process-panel__container .element-property .element-property__label{display:block;box-sizing:border-box;width:90px;padding-right:12px;overflow:hidden;font-size:14px;line-height:32px;text-align:right}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{display:inline-grid;grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.panel-tab__title{padding:0 8px;font-weight:600;font-size:1.1em;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #eee}.panel-tab__content .panel-tab__content--title{display:flex;justify-content:space-between;padding-bottom:8px}.panel-tab__content .panel-tab__content--title span{flex:1;text-align:left}.listener-filed__title{display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-top:0}.listener-filed__title span{width:200px;font-size:14px;text-align:left}.listener-filed__title i{margin-right:8px}.element-drawer__button{display:inline-flex;justify-content:space-around;width:100%;margin-top:8px}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.my-process-designer{display:flex;flex:1;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{position:absolute;top:0;right:-10px;bottom:0;z-index:100;display:inline-block;box-sizing:border-box;width:max-content;padding:0 16px;overflow:hidden;font-size:.5em;font-variant:normal;text-transform:none;text-decoration:inherit;vertical-align:text-bottom;background:#fafafa;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px #eee;transform:translate(100%);content:attr(title)}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{width:100%;padding-right:8px;padding-left:8px;text-align:left}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:rgba(64,158,255,.8)}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{position:absolute;transform:rotate(90deg) translate(200%,60%);content:"|"}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__container{display:inline-flex;flex:1;width:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas{position:relative;flex:1;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+) repeat!important}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll;overflow-y:auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{display:flex;width:100%;height:100%;background-color:#fff}
+.process-panel__container{box-sizing:border-box;max-height:100%;padding:0 8px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #eee;box-shadow:0 0 8px #ccc;transition:width .25s ease-in}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{font-size:20px;cursor:pointer;text-align:center;color:#606266}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{display:flex;align-items:flex-start;width:100%;margin:8px 0}.process-panel__container .element-property .element-property__label{display:block;box-sizing:border-box;width:90px;padding-right:12px;overflow:hidden;font-size:14px;line-height:32px;text-align:right}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{display:inline-grid;grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.panel-tab__title{padding:0 8px;font-weight:600;font-size:1.1em;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #eee}.panel-tab__content .panel-tab__content--title{display:flex;justify-content:space-between;padding-bottom:8px}.panel-tab__content .panel-tab__content--title span{flex:1;text-align:left}.listener-filed__title{display:inline-flex;align-items:center;justify-content:space-between;width:100%;margin-top:0}.listener-filed__title span{width:200px;font-size:14px;text-align:left}.listener-filed__title i{margin-right:8px}.element-drawer__button{display:inline-flex;justify-content:space-around;width:100%;margin-top:8px}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.my-process-designer{display:flex;flex:1;flex-direction:column;box-sizing:border-box;width:100%;height:100%}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{position:absolute;top:0;right:-10px;bottom:0;z-index:100;display:inline-block;box-sizing:border-box;width:max-content;padding:0 16px;overflow:hidden;font-size:.5em;font-variant:normal;text-transform:none;text-decoration:inherit;vertical-align:text-bottom;background:#fafafa;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 6px #eee;transform:translate(100%);content:attr(title)}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{width:100%;padding-right:8px;padding-left:8px;text-align:left}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:rgba(64,158,255,.8)}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{position:absolute;transform:rotate(90deg) translate(200%,60%);content:"|"}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg) translateY(60%)}.my-process-designer .my-process-designer__container{display:inline-flex;flex:1;width:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas{position:relative;flex:1;height:100%}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll;overflow-y:auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{display:flex;width:100%;height:100%;background-color:#fff}

package/flow-viewer/index.mjs

@@ -1,41 +1,41 @@
-var _ = Object.defineProperty, d = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
-var p = Object.getOwnPropertySymbols;
-var y = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var c = (e, t, i) => t in e ? _(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t) => {
+var _ = Object.defineProperty, v = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var c = Object.getOwnPropertySymbols;
+var b = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var u = (e, t, i) => t in e ? _(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, g = (e, t) => {
   for (var i in t || (t = {}))
-    y.call(t, i) && c(e, i, t[i]);
-  if (p)
-    for (var i of p(t))
-      b.call(t, i) && c(e, i, t[i]);
+    b.call(t, i) && u(e, i, t[i]);
+  if (c)
+    for (var i of c(t))
+      V.call(t, i) && u(e, i, t[i]);
   return e;
-}, g = (e, t) => d(e, v(t));
-var f = (e, t, i) => new Promise((n, o) => {
-  var s = (r) => {
+}, f = (e, t) => v(e, y(t));
+var d = (e, t, i) => new Promise((n, o) => {
+  var l = (r) => {
     try {
-      h(i.next(r));
+      a(i.next(r));
     } catch (m) {
       o(m);
     }
-  }, l = (r) => {
+  }, h = (r) => {
     try {
-      h(i.throw(r));
+      a(i.throw(r));
     } catch (m) {
       o(m);
     }
-  }, h = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(s, l);
-  h((i = i.apply(e, t)).next());
+  }, a = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(l, h);
+  a((i = i.apply(e, t)).next());
 });
-import V from "bpmn-js/lib/NavigatedViewer";
-import a from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
-import x from "@web-utils/component/easy-popup";
+import x from "bpmn-js/lib/NavigatedViewer";
+import s from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
+import F from "@web-utils/component/easy-popup";
 import "@web-utils/component/easy-popup/style.css";
-import { n as F } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var M = function() {
+import { n as M } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var $ = function() {
   var e = this, t = e.$createElement, i = e._self._c || t;
   return i("div", {
     ref: "container",
-    staticClass: "flow-viewer"
+    staticClass: "flow-viewer flow-background-image"
   }, [i("EasyPopup", {
     ref: "popup"
   }, [e._t("default", function() {
@@ -43,30 +43,14 @@ var M = function() {
   }, {
     element: e.element
   })], 2)], 1);
-}, $ = [];
-const S = a.prototype._handleWheel;
-a.prototype._handleWheel = function(e) {
-  const { target: t, deltaMode: i, clientX: n, clientY: o, deltaX: s, deltaY: l } = e;
-  S.call(this, {
-    target: t,
-    deltaMode: i,
-    clientX: n,
-    clientY: o,
-    deltaX: s,
-    deltaY: l,
-    preventDefault() {
-      e.preventDefault();
-    },
-    ctrlKey: !0
-  });
-};
-const A = {
+}, S = [];
+const p = s.prototype._handleWheel, k = {
   __init__: ["zoomScroll"],
-  zoomScroll: ["type", a]
-}, k = {
+  zoomScroll: ["type", s]
+}, A = {
   name: "FlowViewer",
   components: {
-    EasyPopup: x
+    EasyPopup: F
   },
   props: {
     xml: {
@@ -83,7 +67,8 @@ const A = {
     flows: {
       type: Array,
       default: () => []
-    }
+    },
+    ctrlKey: Boolean
   },
   data() {
     return {
@@ -99,14 +84,28 @@ const A = {
     flows: "highlightFlow"
   },
   mounted() {
-    this.bpmnViewer = new V(g(u({}, this.options), {
+    s.prototype._handleWheel = this.ctrlKey ? p : function(e) {
+      const { target: t, deltaMode: i, clientX: n, clientY: o, deltaX: l, deltaY: h } = e;
+      p.call(this, {
+        target: t,
+        deltaMode: i,
+        clientX: n,
+        clientY: o,
+        deltaX: l,
+        deltaY: h,
+        preventDefault() {
+          e.preventDefault();
+        },
+        ctrlKey: !0
+      });
+    }, this.bpmnViewer = new x(f(g({}, this.options), {
       container: this.$refs.container,
-      additionalModules: [A]
+      additionalModules: [k]
     })), this.bpmnViewer.on("import.done", (e) => {
       const t = e.error, i = e.warnings;
       t ? this.$emit("error", t) : this.$emit("shown", i), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
       const n = this.bpmnViewer.get("eventBus");
-      n.on("element.mousemove", (o) => f(this, null, function* () {
+      n.on("element.mousemove", (o) => d(this, null, function* () {
         o.element.type === "bpmn:UserTask" && (this.$emit("node-mousemove", o.element), this.element = o.element, yield this.$nextTick(), this.$refs.popup.show(o.originalEvent));
       })), n.on("element.out", () => {
         this.$refs.popup.hide(), this.element = {};
@@ -115,7 +114,7 @@ const A = {
   },
   beforeDestroy() {
     var e;
-    (e = this.bpmnViewer) == null || e.destroy();
+    s.prototype._handleWheel = p, (e = this.bpmnViewer) == null || e.destroy();
   },
   methods: {
     highlight(e, t, i) {
@@ -131,23 +130,23 @@ const A = {
     }
   }
 }, w = {};
-var E = /* @__PURE__ */ F(
-  k,
-  M,
+var E = /* @__PURE__ */ M(
+  A,
   $,
+  S,
   !1,
-  R,
+  B,
   null,
   null,
   null
 );
-function R(e) {
+function B(e) {
   for (let t in w)
     this[t] = w[t];
 }
-const q = /* @__PURE__ */ function() {
+const j = /* @__PURE__ */ function() {
   return E.exports;
 }();
 export {
-  q as default
+  j as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "2.9.6",
+  "version": "2.9.8",
   "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.6",
+  "version": "2.9.8",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2611,6 +2611,14 @@
                 "type": "array"
               },
               "default": "[]"
+            },
+            {
+              "name": "ctrlKey",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
             }
           ],
           "events": [