@web-utils/component 2.0.13 → 2.7.0

package/dist/components/flow/index.js

@@ -0,0 +1,278 @@
+import { s as l, r as u } from "../../chunks/util.5053d54e.js";
+import { n as c } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var h = function() {
+  var t = this, e = t.$createElement, n = t._self._c || e;
+  return n("div", {
+    staticClass: "avue-flow",
+    style: t.styleName
+  }, [n("div", {
+    style: t.styleName,
+    attrs: {
+      id: t.id
+    }
+  }, [n("div", {
+    staticClass: "avue-grid"
+  }), t._l(t.option.nodeList, function(i, o) {
+    return i.display ? t._e() : n("FlowNode", {
+      key: o,
+      attrs: {
+        id: i.id,
+        node: i,
+        index: o,
+        active: t.active
+      },
+      on: {
+        changeNodeSite: t.changeNodeSite
+      },
+      nativeOn: {
+        click: function(s) {
+          return t.handleClick(i);
+        }
+      },
+      scopedSlots: t._u([{
+        key: "header",
+        fn: function(s) {
+          var a = s.node;
+          return [t._t("header", null, {
+            node: a
+          })];
+        }
+      }], null, !0)
+    }, [t._t("default", null, {
+      node: i
+    })], 2);
+  })], 2)]);
+}, d = [];
+const m = {
+  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: !1,
+        // 删除线的时候节点不删除
+        DeleteEndpointsOnDetach: !1,
+        // 连线的端点
+        // Endpoint: ["Dot", {radius: 5}],
+        Endpoint: ["Rectangle", { height: 10, width: 10 }],
+        // 线端点的样式
+        EndpointStyle: { fill: "rgba(255,255,255,0)", outlineWidth: 1 },
+        LogEnabled: !0,
+        // 是否打开jsPlumb的内部日志记录
+        // 绘制线
+        PaintStyle: { stroke: "black", strokeWidth: 3 },
+        // 绘制箭头
+        Overlays: [["Arrow", { width: 12, length: 12, location: 1 }]],
+        RenderMode: "svg"
+      },
+      // jsplumb连接参数
+      jsplumbConnectOptions: {
+        isSource: !0,
+        isTarget: !0,
+        // 动态锚点、提供了4个方向 Continuous、AutoDefault
+        anchor: "Continuous"
+      },
+      jsplumbSourceOptions: {
+        filter: ".avue-flow__node-drag",
+        /* "span"表示标签，".className"表示类，"#id"表示元素id*/
+        filterExclude: !1,
+        anchor: "Continuous",
+        allowLoopback: !1
+      },
+      jsplumbTargetOptions: {
+        filter: ".avue-flow__node-drag",
+        /*"span"表示标签，".className"表示类，"#id"表示元素id */
+        filterExclude: !1,
+        anchor: "Continuous",
+        allowLoopback: !1
+      },
+      loadEasyFlowFinish: !1
+    };
+  },
+  computed: {
+    active: {
+      get() {
+        return this.value;
+      },
+      set(t) {
+        this.$emit("input", t), this.$emit("change", t);
+      }
+    },
+    styleName() {
+      return {
+        position: "relative",
+        width: l(this.width),
+        height: l(this.height)
+      };
+    }
+  },
+  created() {
+    this.id = u(), this.jsplumbSetting.Container = this.id;
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.jsPlumb = jsPlumb.getInstance(), this.$nextTick(() => {
+        this.jsPlumbInit();
+      });
+    },
+    handleClick(t) {
+      this.$emit("click", t);
+    },
+    // 是否具有该线
+    hasLine(t, e) {
+      for (var n = 0; n < this.data.lineList.length; n++) {
+        var i = this.data.lineList[n];
+        if (i.from === t && i.to === e)
+          return !0;
+      }
+      return !1;
+    },
+    // 是否含有相反的线
+    hashOppositeLine(t, e) {
+      return this.hasLine(e, t);
+    },
+    // 删除线
+    deleteLine(t, e) {
+      this.option.lineList = this.option.lineList.filter(function(n) {
+        return n.from !== t && n.to !== e;
+      });
+    },
+    // 改变连线
+    changeLine(t, e) {
+      this.deleteLine(t, e);
+    },
+    // 改变节点的位置
+    changeNodeSite({ index: t, left: e, top: n }) {
+      for (var i = 0; i < this.option.nodeList.length; i++)
+        this.option.nodeList[i], i === t && (this.$set(this.option.nodeList[i], "left", e), this.$set(this.option.nodeList[i], "top", n));
+    },
+    //删除节点
+    deleteNode(t) {
+      return this.$confirm("确定要删除节点" + t + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        closeOnClickModal: !1
+      }).then(() => {
+        this.option.nodeList.forEach((e) => {
+          e.id === t && (e.display = !0);
+        }), this.$nextTick(function() {
+          this.jsPlumb.removeAllEndpoints(t);
+        });
+      }).catch(() => {
+      }), !0;
+    },
+    // 添加新的节点
+    addNode(t) {
+      const e = this.option.nodeList.length;
+      let n = "node" + e;
+      this.option.nodeList.push({
+        id: "node" + e,
+        name: t,
+        left: 0,
+        top: 0
+      }), this.$nextTick(function() {
+        this.jsPlumb.makeSource(n, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(n, this.jsplumbTargetOptions), this.jsPlumb.draggable(n, {
+          containment: "parent"
+        });
+      });
+    },
+    loadEasyFlow() {
+      for (var t = 0; t < this.option.nodeList.length; t++) {
+        let e = this.option.nodeList[t];
+        this.jsPlumb.makeSource(e.id, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(e.id, this.jsplumbTargetOptions), this.jsPlumb.draggable(e.id);
+      }
+      for (var t = 0; t < this.option.lineList.length; t++) {
+        let n = this.option.lineList[t];
+        this.jsPlumb.connect({
+          source: n.from,
+          target: n.to
+        }, this.jsplumbConnectOptions);
+      }
+      this.$nextTick(function() {
+        this.loadEasyFlowFinish = !0;
+      });
+    },
+    jsPlumbInit() {
+      const t = this;
+      this.jsPlumb.ready(function() {
+        t.jsPlumb.importDefaults(t.jsplumbSetting), t.jsPlumb.setSuspendDrawing(!1, !0), t.loadEasyFlow(), t.jsPlumb.bind("click", function(e, n) {
+          console.log("click", e), t.$confirm("确定删除所点击的线吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(() => {
+            t.jsPlumb.deleteConnection(e);
+          }).catch(() => {
+          });
+        }), t.jsPlumb.bind("connection", function(e) {
+          console.log("connection", e);
+          let n = e.source.id, i = e.target.id;
+          t.loadEasyFlowFinish && t.option.lineList.push({
+            from: n,
+            to: i
+          });
+        }), t.jsPlumb.bind("connectionDetached", function(e) {
+          console.log("connectionDetached", e), t.deleteLine(e.sourceId, e.targetId);
+        }), t.jsPlumb.bind("connectionMoved", function(e) {
+          console.log("connectionMoved", e), t.changeLine(e.originalSourceId, e.originalTargetId);
+        }), t.jsPlumb.bind("contextmenu", function(e) {
+          console.log("contextmenu", e);
+        }), t.jsPlumb.bind("beforeDrop", function(e) {
+          console.log("beforeDrop", e);
+          let n = e.sourceId, i = e.targetId;
+          return n === i ? (t.$message.error("不能连接自己"), !1) : t.hasLine(n, i) ? (t.$message.error("不能重复连线"), !1) : t.hashOppositeLine(n, i) ? (t.$message.error("不能回环哦"), !1) : !0;
+        }), t.jsPlumb.bind("beforeDetach", function(e) {
+          console.log("beforeDetach", e);
+        });
+      });
+    }
+  }
+}, r = {};
+var f = /* @__PURE__ */ c(
+  m,
+  h,
+  d,
+  !1,
+  p,
+  null,
+  null,
+  null
+);
+function p(t) {
+  for (let e in r)
+    this[e] = r[e];
+}
+const j = /* @__PURE__ */ function() {
+  return f.exports;
+}();
+export {
+  j as default
+};

package/dist/components/flow/style.css

@@ -0,0 +1 @@
+.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

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

package/dist/components/form-button/index.js

@@ -1,30 +1,28 @@
-import { c as confirmableMixin } from "../../chunks/a0bb327b.js";
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-const __vue2_script$1 = {
+import { c as r } from "../../chunks/confirmable-mixin.3a79781b.js";
+import { n as o } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+const i = {
   name: "Confirmable",
-  mixins: [confirmableMixin]
+  mixins: [r]
 };
-let __vue2_render$1, __vue2_staticRenderFns$1;
-const __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$1,
-  __vue2_render$1,
-  __vue2_staticRenderFns$1,
-  false,
-  __vue2_injectStyles$1,
+let s, _;
+const t = {};
+var a = /* @__PURE__ */ o(
+  i,
+  s,
+  _,
+  !1,
+  u,
   null,
   null,
   null
 );
-function __vue2_injectStyles$1(context) {
-  for (let o in __cssModules$1) {
-    this[o] = __cssModules$1[o];
-  }
+function u(l) {
+  for (let n in t)
+    this[n] = t[n];
 }
-const Confirmable = /* @__PURE__ */ function() {
-  return __component__$1.exports;
-}();
-const props = {
+const c = /* @__PURE__ */ function() {
+  return a.exports;
+}(), p = {
   props: {
     type: {
       type: String,
@@ -54,31 +52,29 @@ const props = {
       default: "AwesomeButton"
     }
   }
-};
-const __vue2_script = {
+}, f = {
   name: "FormButton",
-  mixins: [Confirmable, props]
+  mixins: [c, p]
 };
-let __vue2_render, __vue2_staticRenderFns;
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  __vue2_render,
-  __vue2_staticRenderFns,
-  false,
-  __vue2_injectStyles,
+let m, d;
+const e = {};
+var v = /* @__PURE__ */ o(
+  f,
+  m,
+  d,
+  !1,
+  g,
   null,
   null,
   null
 );
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+function g(l) {
+  for (let n in e)
+    this[n] = e[n];
 }
-const FormButton = /* @__PURE__ */ function() {
-  return __component__.exports;
+const B = /* @__PURE__ */ function() {
+  return v.exports;
 }();
 export {
-  FormButton as default
+  B as default
 };

package/dist/components/form-cascader/index.js

@@ -1,72 +1,68 @@
-import { f as formInputMixin } from "../../chunks/de9fe802.js";
-import { f as formPickMixin } from "../../chunks/822300f3.js";
-import { Cascader } from "element-ui";
-import { i as filterProperties, n as normalizeProps } from "../../chunks/c69d5628.js";
-import { findTreeChildren, cloneDeep, setParent } from "@web-utils/core";
-import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
-var render = function() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("FormItem", _vm._b({
+import { f as s } from "../../chunks/form-input-mixin.ff5b58f7.js";
+import { f as a } from "../../chunks/form-pick-mixin.61ad06b2.js";
+import { Cascader as i } from "element-ui";
+import { i as u, n as p } from "../../chunks/utils.fa73de78.js";
+import { findTreeChildren as c, cloneDeep as d, setParent as m } from "@web-utils/core";
+import { n as f } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
+var h = function() {
+  var e = this, t = e.$createElement, r = e._self._c || t;
+  return r("FormItem", e._b({
     attrs: {
-      "rules": _vm.computeRules,
-      "disabled": _vm.inputDisabled
+      rules: e.computeRules,
+      disabled: e.inputDisabled
     },
-    scopedSlots: _vm._u([{
+    scopedSlots: e._u([{
       key: "default",
       fn: function() {
-        return [_vm._t("default", function() {
-          return [_c("ElCascader", _vm._g(_vm._b({
+        return [e._t("default", function() {
+          return [r("ElCascader", e._g(e._b({
             class: {
-              "is-readonly": _vm.readonly
+              "is-readonly": e.readonly
             },
             staticStyle: {
-              "width": "100%"
+              width: "100%"
             },
             attrs: {
-              "value": _vm.inputVal,
-              "show-all-levels": _vm.showAllLevels,
-              "separator": _vm.separator,
-              "readonly": _vm.readonly,
-              "options": _vm.innerOptions,
-              "props": {
-                checkStrictly: _vm.checkStrictly,
-                label: _vm.labelKey,
-                value: _vm.valueKey
+              value: e.inputVal,
+              "show-all-levels": e.showAllLevels,
+              separator: e.separator,
+              readonly: e.readonly,
+              options: e.innerOptions,
+              props: {
+                checkStrictly: e.checkStrictly,
+                label: e.labelKey,
+                value: e.valueKey
               },
-              "disabled": _vm.inputDisabled,
-              "placeholder": _vm.computePlaceholder
+              disabled: e.inputDisabled,
+              placeholder: e.computePlaceholder
             },
             on: {
-              "input": _vm.emitInput
+              input: e.emitInput
             }
-          }, "ElCascader", _vm.inputProps, false), _vm.listeners))];
+          }, "ElCascader", e.inputProps, !1), e.listeners))];
         })];
       },
-      proxy: true
+      proxy: !0
     }, {
       key: "error",
-      fn: function(_ref) {
-        var error = _ref.error;
-        return [_vm._t("error", null, {
-          "error": error
+      fn: function(l) {
+        var o = l.error;
+        return [e._t("error", null, {
+          error: o
         })];
       }
     }, {
       key: "label",
       fn: function() {
-        return [_vm._t("label")];
+        return [e._t("label")];
       },
-      proxy: true
-    }], null, true)
-  }, "FormItem", _vm.formItemProps, false));
-};
-var staticRenderFns = [];
-const autoBindKeys = Object.keys(Cascader.props).filter((key) => !["value", "placeholder", "disabled", "options", "showAllLevels", "show-all-levels", "separator"].includes(key));
-const __vue2_script = {
+      proxy: !0
+    }], null, !0)
+  }, "FormItem", e.formItemProps, !1));
+}, y = [];
+const v = Object.keys(i.props).filter((e) => !["value", "placeholder", "disabled", "options", "showAllLevels", "show-all-levels", "separator"].includes(e)), _ = {
   name: "FormCascader",
-  mixins: [formInputMixin, formPickMixin],
+  mixins: [s, a],
   props: {
     value: {
       type: [String, Number]
@@ -82,11 +78,11 @@ const __vue2_script = {
     },
     last: {
       type: Boolean,
-      default: true
+      default: !0
     },
     checkStrictly: {
       type: Boolean,
-      default: true
+      default: !0
     },
     labelKey: {
       type: String,
@@ -104,58 +100,52 @@ const __vue2_script = {
   },
   computed: {
     inputProps() {
-      return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys);
+      return u({ ...p(this.$attrs), ...this.$props }, v);
     },
     inputVal() {
-      let [parent] = findTreeChildren(this.innerOptions, (node) => node[this.valueKey] === this.value);
-      const val = [];
-      while (parent) {
-        val.push(parent[this.valueKey]);
-        parent = parent.parent;
-      }
-      return val.reverse();
+      let [e] = c(this.innerOptions, (r) => r[this.valueKey] === this.value);
+      const t = [];
+      for (; e; )
+        t.push(e[this.valueKey]), e = e.parent;
+      return t.reverse();
     }
   },
   watch: {
     options: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          const options = cloneDeep(newVal);
-          setParent(options);
-          this.innerOptions = options;
-        } else {
+      immediate: !0,
+      handler(e) {
+        if (e) {
+          const t = d(e);
+          m(t), this.innerOptions = t;
+        } else
           this.innerOptions = [];
-        }
       }
     }
   },
   methods: {
-    emitInput(val) {
-      const v = this.last ? val[val.length - 1] : val;
-      this.$emit("input", v);
+    emitInput(e) {
+      const t = this.last ? e[e.length - 1] : e;
+      this.$emit("input", t);
     }
   }
-};
-const __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  __vue2_script,
-  render,
-  staticRenderFns,
-  false,
-  __vue2_injectStyles,
+}, n = {};
+var b = /* @__PURE__ */ f(
+  _,
+  h,
+  y,
+  !1,
+  S,
   null,
   null,
   null
 );
-function __vue2_injectStyles(context) {
-  for (let o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+function S(e) {
+  for (let t in n)
+    this[t] = n[t];
 }
-const FormCascader = /* @__PURE__ */ function() {
-  return __component__.exports;
+const g = /* @__PURE__ */ function() {
+  return b.exports;
 }();
 export {
-  FormCascader as default
+  g as default
 };