@web-utils/component 2.7.36 → 2.8.0

package/dist/components/flow/index.js

@@ -1,329 +0,0 @@
-import { s as setPx, r as randomId } from "../../chunks/util.b0d0b0ad.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "avue-flow",
-    style: _vm.styleName
-  }, [_c("div", {
-    style: _vm.styleName,
-    attrs: {
-      "id": _vm.id
-    }
-  }, [_c("div", {
-    staticClass: "avue-grid"
-  }), _vm._l(_vm.option.nodeList, function(node, index) {
-    return [!node.display ? _c("FlowNode", {
-      key: index,
-      attrs: {
-        "id": node.id,
-        "node": node,
-        "index": index,
-        "active": _vm.active
-      },
-      on: {
-        "changeNodeSite": _vm.changeNodeSite
-      },
-      nativeOn: {
-        "click": function($event) {
-          return _vm.handleClick(node);
-        }
-      },
-      scopedSlots: _vm._u([{
-        key: "header",
-        fn: function(_ref) {
-          var s = _ref.node;
-          return [_vm._t("header", null, {
-            "node": s
-          })];
-        }
-      }], null, true)
-    }, [_vm._t("default", null, {
-      "node": node
-    })], 2) : _vm._e()];
-  })], 2)]);
-};
-var staticRenderFns = [];
-const Flow_vue_vue_type_style_index_0_lang = "";
-const __vue2_script = {
-  name: "Flow",
-  props: {
-    value: {
-      type: String
-    },
-    option: {
-      type: Object
-    },
-    width: {
-      type: [Number, String],
-      default: "100%"
-    },
-    height: {
-      type: [Number, String],
-      default: "100%"
-    }
-  },
-  data() {
-    return {
-      jsPlumb: {},
-      id: "",
-      // 默认设置参数
-      jsplumbSetting: {
-        // 动态锚点、位置自适应
-        Anchors: ["Top", "TopCenter", "TopRight", "TopLeft", "Right", "RightMiddle", "Bottom", "BottomCenter", "BottomRight", "BottomLeft", "Left", "LeftMiddle"],
-        Container: "",
-        // 连线的样式 StateMachine、Flowchart
-        Connector: "Flowchart",
-        // 鼠标不能拖动删除线
-        ConnectionsDetachable: false,
-        // 删除线的时候节点不删除
-        DeleteEndpointsOnDetach: false,
-        // 连线的端点
-        // Endpoint: ["Dot", {radius: 5}],
-        Endpoint: ["Rectangle", { height: 10, width: 10 }],
-        // 线端点的样式
-        EndpointStyle: { fill: "rgba(255,255,255,0)", outlineWidth: 1 },
-        LogEnabled: true,
-        // 是否打开jsPlumb的内部日志记录
-        // 绘制线
-        PaintStyle: { stroke: "black", strokeWidth: 3 },
-        // 绘制箭头
-        Overlays: [["Arrow", { width: 12, length: 12, location: 1 }]],
-        RenderMode: "svg"
-      },
-      // jsplumb连接参数
-      jsplumbConnectOptions: {
-        isSource: true,
-        isTarget: true,
-        // 动态锚点、提供了4个方向 Continuous、AutoDefault
-        anchor: "Continuous"
-      },
-      jsplumbSourceOptions: {
-        filter: ".avue-flow__node-drag",
-        /* "span"表示标签，".className"表示类，"#id"表示元素id */
-        filterExclude: false,
-        anchor: "Continuous",
-        allowLoopback: false
-      },
-      jsplumbTargetOptions: {
-        filter: ".avue-flow__node-drag",
-        /* "span"表示标签，".className"表示类，"#id"表示元素id */
-        filterExclude: false,
-        anchor: "Continuous",
-        allowLoopback: false
-      },
-      loadEasyFlowFinish: false
-    };
-  },
-  computed: {
-    active: {
-      get() {
-        return this.value;
-      },
-      set(val) {
-        this.$emit("input", val);
-        this.$emit("change", val);
-      }
-    },
-    styleName() {
-      return {
-        position: "relative",
-        width: setPx(this.width),
-        height: setPx(this.height)
-      };
-    }
-  },
-  created() {
-    this.id = randomId();
-    this.jsplumbSetting.Container = this.id;
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.jsPlumb = jsPlumb.getInstance();
-      this.$nextTick(() => {
-        this.jsPlumbInit();
-      });
-    },
-    handleClick(node) {
-      this.$emit("click", node);
-    },
-    // 是否具有该线
-    hasLine(from, to) {
-      for (let i = 0; i < this.data.lineList.length; i++) {
-        const line = this.data.lineList[i];
-        if (line.from === from && line.to === to) {
-          return true;
-        }
-      }
-      return false;
-    },
-    // 是否含有相反的线
-    hashOppositeLine(from, to) {
-      return this.hasLine(to, from);
-    },
-    // 删除线
-    deleteLine(from, to) {
-      this.option.lineList = this.option.lineList.filter(function(line) {
-        return line.from !== from && line.to !== to;
-      });
-    },
-    // 改变连线
-    changeLine(oldFrom, oldTo) {
-      this.deleteLine(oldFrom, oldTo);
-    },
-    // 改变节点的位置
-    changeNodeSite({ index, left, top }) {
-      for (let i = 0; i < this.option.nodeList.length; i++) {
-        if (i === index) {
-          this.$set(this.option.nodeList[i], "left", left);
-          this.$set(this.option.nodeList[i], "top", top);
-        }
-      }
-    },
-    // 删除节点
-    deleteNode(nodeId) {
-      this.$confirm(`确定要删除节点${nodeId}?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        closeOnClickModal: false
-      }).then(() => {
-        this.option.nodeList.forEach((node) => {
-          if (node.id === nodeId) {
-            node.display = true;
-          }
-        });
-        this.$nextTick(function() {
-          this.jsPlumb.removeAllEndpoints(nodeId);
-        });
-      }).catch(() => {
-      });
-      return true;
-    },
-    // 添加新的节点
-    addNode(name) {
-      const index = this.option.nodeList.length;
-      const nodeId = `node${index}`;
-      this.option.nodeList.push({
-        id: `node${index}`,
-        name,
-        left: 0,
-        top: 0
-      });
-      this.$nextTick(function() {
-        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions);
-        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions);
-        this.jsPlumb.draggable(nodeId, {
-          containment: "parent"
-        });
-      });
-    },
-    loadEasyFlow() {
-      for (var i = 0; i < this.option.nodeList.length; i++) {
-        const node = this.option.nodeList[i];
-        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions);
-        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
-        this.jsPlumb.draggable(node.id);
-      }
-      for (var i = 0; i < this.option.lineList.length; i++) {
-        const line = this.option.lineList[i];
-        this.jsPlumb.connect({
-          source: line.from,
-          target: line.to
-        }, this.jsplumbConnectOptions);
-      }
-      this.$nextTick(function() {
-        this.loadEasyFlowFinish = true;
-      });
-    },
-    jsPlumbInit() {
-      const _this = this;
-      this.jsPlumb.ready(function() {
-        _this.jsPlumb.importDefaults(_this.jsplumbSetting);
-        _this.jsPlumb.setSuspendDrawing(false, true);
-        _this.loadEasyFlow();
-        _this.jsPlumb.bind("click", function(conn) {
-          console.log("click", conn);
-          _this.$confirm("确定删除所点击的线吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          }).then(() => {
-            _this.jsPlumb.deleteConnection(conn);
-          }).catch(() => {
-          });
-        });
-        _this.jsPlumb.bind("connection", function(evt) {
-          console.log("connection", evt);
-          const from = evt.source.id;
-          const to = evt.target.id;
-          if (_this.loadEasyFlowFinish) {
-            _this.option.lineList.push({
-              from,
-              to
-            });
-          }
-        });
-        _this.jsPlumb.bind("connectionDetached", function(evt) {
-          console.log("connectionDetached", evt);
-          _this.deleteLine(evt.sourceId, evt.targetId);
-        });
-        _this.jsPlumb.bind("connectionMoved", function(evt) {
-          console.log("connectionMoved", evt);
-          _this.changeLine(evt.originalSourceId, evt.originalTargetId);
-        });
-        _this.jsPlumb.bind("contextmenu", function(evt) {
-          console.log("contextmenu", evt);
-        });
-        _this.jsPlumb.bind("beforeDrop", function(evt) {
-          console.log("beforeDrop", evt);
-          const from = evt.sourceId;
-          const to = evt.targetId;
-          if (from === to) {
-            _this.$message.error("不能连接自己");
-            return false;
-          }
-          if (_this.hasLine(from, to)) {
-            _this.$message.error("不能重复连线");
-            return false;
-          }
-          if (_this.hashOppositeLine(from, to)) {
-            _this.$message.error("不能回环哦");
-            return false;
-          }
-          return true;
-        });
-        _this.jsPlumb.bind("beforeDetach", function(evt) {
-          console.log("beforeDetach", evt);
-        });
-      });
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const Flow = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  Flow as default
-};

package/dist/components/flow/style.css

@@ -1,44 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.avue-flow {
-  position: relative;
-}
-.avue-flow .avue-draggable {
-  padding: 0;
-}
-.avue-flow__node {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  height: 80px;
-  border-radius: 5px;
-  box-shadow: "#66a6e0 0px 0px 12px 0px";
-  border: 1px solid #eee;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.avue-flow__node--active {
-  border-width: 2px;
-  border-color: #f56c6c;
-}
-.avue-flow__node-drag {
-  margin: 0 5px;
-  display: inline-block;
-}
-.avue-flow__node-header {
-  flex: 1;
-  background-color: #66a6e0;
-}
-.avue-flow__node-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1.5;
-  text-align: center;
-  background: #fff;
-}

package/dist/components/flow-node/index.js

@@ -1,110 +0,0 @@
-import { s as setPx } from "../../chunks/util.b0d0b0ad.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    ref: "node",
-    style: _vm.flowNodeContainer,
-    attrs: {
-      "left": _vm.node.left,
-      "top": _vm.node.top,
-      "disabled": "",
-      "mask": false
-    },
-    on: {
-      "mouseenter": _vm.showDelete,
-      "mouseleave": _vm.hideDelete,
-      "mouseup": _vm.changeNodeSite
-    }
-  }, [_c("div", {
-    class: ["avue-flow__node", {
-      "active": _vm.active === _vm.node.id
-    }]
-  }, [_c("div", {
-    staticClass: "avue-flow__node-header"
-  }, [_c("i", {
-    staticClass: "el-icon-rank",
-    class: _vm.b("node-drag")
-  }), _vm._t("header", null, {
-    "node": _vm.node
-  })], 2), _c("div", {
-    staticClass: "avue-flow__node-body"
-  }, [_vm._t("default", null, {
-    "node": _vm.node
-  })], 2)])]);
-};
-var staticRenderFns = [];
-const __vue2_script = {
-  name: "FlowNode",
-  props: {
-    active: [String, Number],
-    index: [String, Number],
-    node: Object
-  },
-  data() {
-    return {
-      // 控制节点操作显示
-      mouseEnter: false
-    };
-  },
-  computed: {
-    // 节点容器样式
-    flowNodeContainer: {
-      get() {
-        return {
-          position: "absolute",
-          width: "200px",
-          top: setPx(this.node.top),
-          left: setPx(this.node.left),
-          boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
-          backgroundColor: "transparent"
-        };
-      }
-    }
-  },
-  methods: {
-    // 鼠标进入
-    showDelete() {
-      this.mouseEnter = true;
-    },
-    // 鼠标离开
-    hideDelete() {
-      this.mouseEnter = false;
-    },
-    // 鼠标移动后抬起
-    changeNodeSite() {
-      if (this.node.left == this.$refs.node.style.left && this.node.top == this.$refs.node.style.top) {
-        return;
-      }
-      this.$emit("changeNodeSite", {
-        index: this.index,
-        left: Number(this.$refs.node.style.left.replace("px", "")),
-        top: Number(this.$refs.node.style.top.replace("px", ""))
-      });
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const FlowNode = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  FlowNode as default
-};

package/dist/components/flow-viewer/index.js

@@ -1,207 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import BpmnViewer from "bpmn-js/lib/NavigatedViewer";
-import ZoomScroll from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    ref: "container",
-    staticClass: "flow-viewer"
-  }, [_c("EasyPopup", {
-    ref: "popup"
-  }, [_vm._t("default", function() {
-    return [_vm._v(" " + _vm._s(_vm.element) + " ")];
-  }, {
-    "element": _vm.element
-  })], 2)], 1);
-};
-var staticRenderFns = [];
-const FlowViewer_vue_vue_type_style_index_0_lang = "";
-const handleWheel = ZoomScroll.prototype._handleWheel;
-ZoomScroll.prototype._handleWheel = function(e) {
-  const { target, deltaMode, clientX, clientY, deltaX, deltaY } = e;
-  handleWheel.call(this, {
-    target,
-    deltaMode,
-    clientX,
-    clientY,
-    deltaX,
-    deltaY,
-    preventDefault() {
-      e.preventDefault();
-    },
-    ctrlKey: true
-  });
-};
-const ZoomScrollModule = {
-  __init__: ["zoomScroll"],
-  zoomScroll: ["type", ZoomScroll]
-};
-const __vue2_script = {
-  name: "FlowViewer",
-  props: {
-    xml: {
-      type: String,
-      required: true
-    },
-    options: {
-      type: Object
-    },
-    activities: {
-      type: Array,
-      default: () => []
-    },
-    flows: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      element: null
-    };
-  },
-  watch: {
-    xml(val) {
-      var _a;
-      (_a = this.bpmnViewer) == null ? void 0 : _a.importXML(val);
-    },
-    activities: "highlightActivity",
-    flows: "highlightFlow"
-  },
-  mounted() {
-    var _a;
-    const container = this.$refs.container;
-    this.bpmnViewer = new BpmnViewer(__spreadProps(__spreadValues({}, this.options), {
-      container,
-      additionalModules: [ZoomScrollModule]
-    }));
-    this.bpmnViewer.on("import.done", (event) => {
-      const error = event.error;
-      const warnings = event.warnings;
-      if (error) {
-        this.$emit("error", error);
-      } else {
-        this.$emit("shown", warnings);
-      }
-      this.bpmnViewer.get("canvas").zoom("fit-viewport", "center");
-      const eventBus = this.bpmnViewer.get("eventBus");
-      this.canvas = this.bpmnViewer.get("canvas");
-      eventBus.on("element.mousemove", (e) => __async(this, null, function* () {
-        if (e.element.type === "bpmn:UserTask") {
-          this.element = e.element;
-          yield this.$nextTick();
-          this.$refs.popup.show(e.originalEvent);
-        }
-      }));
-      eventBus.on("element.out", () => {
-        this.$refs.popup.hide();
-        this.element = {};
-      });
-      this.highlightFlow(this.flows);
-      this.highlightActivity(this.activities);
-    });
-    (_a = this.bpmnViewer) == null ? void 0 : _a.importXML(this.xml);
-  },
-  beforeDestroy() {
-    var _a;
-    (_a = this.bpmnViewer) == null ? void 0 : _a.destroy();
-  },
-  methods: {
-    getElementById(id) {
-      return this.canvas.getRootElement().children.find((value) => value.id === id);
-    },
-    highlightFlow(flows) {
-      this.canvas.getRootElement().children.filter((value) => value.type === "bpmn:SequenceFlow" && this.canvas.hasMarker(value, "highlight-line")).forEach((value) => {
-        var _a;
-        return (_a = this.canvas) == null ? void 0 : _a.removeMarker(value, "highlight-line");
-      });
-      if (flows.length > 0) {
-        flows.forEach((value) => {
-          var _a;
-          const element = this.getElementById(value);
-          if (element) {
-            (_a = this.canvas) == null ? void 0 : _a.addMarker(element, "highlight-line");
-          }
-        });
-      }
-    },
-    highlightActivity(activities) {
-      this.canvas.getRootElement().children.filter((value) => value.type === "bpmn:UserTask" && this.canvas.hasMarker(value, "highlight")).forEach((value) => {
-        var _a;
-        return (_a = this.canvas) == null ? void 0 : _a.removeMarker(value, "highlight");
-      });
-      if (activities.length > 0) {
-        activities.forEach((value) => {
-          var _a;
-          const element = this.getElementById(value);
-          if (element) {
-            (_a = this.canvas) == null ? void 0 : _a.addMarker(element, "highlight");
-          }
-        });
-      }
-    }
-  }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
-}
-const FlowViewer = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
-export {
-  FlowViewer as default
-};

package/dist/components/flow-viewer/style.css

@@ -1,19 +0,0 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.flow-viewer {
-  width: 100%;
-  height: 400px;
-}
-.flow-viewer .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: rgb(251, 233, 209) !important;
-}
-.flow-viewer .highlight g.djs-visual > :nth-child(1) {
-  stroke: rgb(214, 126, 125) !important;
-}
-.flow-viewer .highlight-line g.djs-visual > :nth-child(1) {
-  stroke: rgb(0, 190, 0) !important;
-}