@web-utils/component 2.0.13 → 2.2.0

package/flex-column/index.mjs

@@ -0,0 +1,62 @@
+var u = Object.defineProperty, f = Object.defineProperties;
+var _ = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var s = (t, e, n) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, a = (t, e) => {
+  for (var n in e || (e = {}))
+    C.call(e, n) && s(t, n, e[n]);
+  if (o)
+    for (var n of o(e))
+      v.call(e, n) && s(t, n, e[n]);
+  return t;
+}, c = (t, e) => f(t, _(e));
+import { g as h } from "../chunks/index.LGsb2aDq.mjs";
+import { n as m } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const d = {
+  name: "FlexColumn",
+  functional: !0,
+  props: {
+    verticalCenter: {
+      type: Boolean,
+      default: !1
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: !1
+    },
+    center: {
+      type: Boolean,
+      default: !1
+    },
+    textCenter: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  render(t, { data: e, children: n, props: l }) {
+    const r = h(e.class, "flex-column");
+    return l.center || l.horizonCenter && l.verticalCenter ? (r.push("horizon-center"), r.push("vertical-center")) : (l.horizonCenter && r.push("horizon-center"), l.verticalCenter && r.push("vertical-center")), l.textCenter && r.push("text-center"), t("div", c(a({}, e), { class: r }), n);
+  }
+};
+let x, p;
+const i = {};
+var z = /* @__PURE__ */ m(
+  d,
+  x,
+  p,
+  !1,
+  y,
+  null,
+  null,
+  null
+);
+function y(t) {
+  for (let e in i)
+    this[e] = i[e];
+}
+const j = /* @__PURE__ */ function() {
+  return z.exports;
+}();
+export {
+  j as default
+};

package/flex-item/index.mjs

@@ -0,0 +1,81 @@
+var u = Object.defineProperty, c = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var _ = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var r = (t, e, l) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: l }) : t[e] = l, a = (t, e) => {
+  for (var l in e || (e = {}))
+    _.call(e, l) && r(t, l, e[l]);
+  if (s)
+    for (var l of s(e))
+      x.call(e, l) && r(t, l, e[l]);
+  return t;
+}, f = (t, e) => c(t, v(e));
+import { g as m } from "../chunks/index.LGsb2aDq.mjs";
+import { n as d } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const h = {
+  name: "FlexItem",
+  functional: !0,
+  props: {
+    flexRow: {
+      type: Boolean,
+      default: !1
+    },
+    flexColumn: {
+      type: Boolean,
+      default: !1
+    },
+    verticalCenter: {
+      type: Boolean,
+      default: !1
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: !1
+    },
+    center: {
+      type: Boolean,
+      default: !1
+    },
+    textCenter: {
+      type: Boolean,
+      default: !1
+    },
+    relative: {
+      type: Boolean,
+      default: !1
+    },
+    absolute: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  render(t, { children: e, data: l, props: n }) {
+    const o = m(l.class, n.relative ? "flex-item-relative" : "flex-item");
+    return n.absolute && !n.relative && o.push("flex-item-relative"), n.center || n.horizonCenter && n.verticalCenter ? (o.push("horizon-center"), o.push("vertical-center")) : (n.horizonCenter && o.push("horizon-center"), n.verticalCenter && o.push("vertical-center")), n.textCenter && o.push("text-center"), n.flexColumn && o.push("flex-column"), n.flexRow && o.push("flex-row"), n.absolute ? t("div", f(a({}, l), { class: o }), [t("div", {
+      class: "absolute",
+      style: "overflow:auto"
+    }, e)]) : t("div", f(a({}, l), { class: o }), e);
+  }
+};
+let C, y;
+const i = {};
+var B = /* @__PURE__ */ d(
+  h,
+  C,
+  y,
+  !1,
+  z,
+  null,
+  null,
+  null
+);
+function z(t) {
+  for (let e in i)
+    this[e] = i[e];
+}
+const F = /* @__PURE__ */ function() {
+  return B.exports;
+}();
+export {
+  F as default
+};

package/flex-row/index.mjs

@@ -0,0 +1,62 @@
+var u = Object.defineProperty, f = Object.defineProperties;
+var _ = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, h = Object.prototype.propertyIsEnumerable;
+var s = (t, e, n) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, a = (t, e) => {
+  for (var n in e || (e = {}))
+    v.call(e, n) && s(t, n, e[n]);
+  if (o)
+    for (var n of o(e))
+      h.call(e, n) && s(t, n, e[n]);
+  return t;
+}, c = (t, e) => f(t, _(e));
+import { g as C } from "../chunks/index.LGsb2aDq.mjs";
+import { n as d } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const x = {
+  name: "FlexRow",
+  functional: !0,
+  props: {
+    verticalCenter: {
+      type: Boolean,
+      default: !1
+    },
+    horizonCenter: {
+      type: Boolean,
+      default: !1
+    },
+    center: {
+      type: Boolean,
+      default: !1
+    },
+    textCenter: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  render(t, { data: e, children: n, props: r }) {
+    const l = C(e.class, "flex-row");
+    return r.center || r.horizonCenter && r.verticalCenter ? (l.push("horizon-center"), l.push("vertical-center")) : (r.horizonCenter && l.push("horizon-center"), r.verticalCenter && l.push("vertical-center")), r.textCenter && l.push("text-center"), t("div", c(a({}, e), { class: l }), n);
+  }
+};
+let m, p;
+const i = {};
+var z = /* @__PURE__ */ d(
+  x,
+  m,
+  p,
+  !1,
+  y,
+  null,
+  null,
+  null
+);
+function y(t) {
+  for (let e in i)
+    this[e] = i[e];
+}
+const R = /* @__PURE__ */ function() {
+  return z.exports;
+}();
+export {
+  R as default
+};

package/flex-scroller/index.mjs

@@ -0,0 +1,47 @@
+import { n as o } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var r = function() {
+  var e = this, l = e.$createElement, n = e._self._c || l;
+  return n("div", {
+    staticClass: "flex-scroller-wrapper"
+  }, [n("div", {
+    class: ["flex-scroller", {
+      "flex-column": e.flexColumn,
+      "flex-row": e.flexRow,
+      "content-scroll": e.contentScroll
+    }, e.contentClass]
+  }, [e._t("default")], 2)]);
+}, c = [];
+const s = {
+  name: "FlexScroller",
+  props: {
+    flexColumn: Boolean,
+    flexRow: Boolean,
+    contentClass: {
+      type: String
+    },
+    contentScroll: {
+      type: Boolean,
+      default: !0
+    }
+  }
+}, t = {};
+var a = /* @__PURE__ */ o(
+  s,
+  r,
+  c,
+  !1,
+  f,
+  null,
+  null,
+  null
+);
+function f(e) {
+  for (let l in t)
+    this[l] = t[l];
+}
+const _ = /* @__PURE__ */ function() {
+  return a.exports;
+}();
+export {
+  _ as default
+};

package/flex-scroller/style.css

@@ -0,0 +1 @@
+.flex-scroller-wrapper{flex:auto;position:relative}.flex-scroller-wrapper .flex-scroller{position:absolute;top:0;bottom:0;left:0;right:0}.flex-scroller-wrapper .flex-scroller.content-scroll{overflow:auto}

package/flow/index.mjs

@@ -0,0 +1,277 @@
+import { s as l, r as c } from "../chunks/util.C2Bhx22L.mjs";
+import { n as u } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+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 f = {
+  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 = c(), this.jsplumbSetting.Container = this.id;
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.jsPlumb = window.jsPlumb.getInstance(), this.$nextTick(() => {
+        this.jsPlumbInit();
+      });
+    },
+    handleClick(t) {
+      this.$emit("click", t);
+    },
+    // 是否具有该线
+    hasLine(t, e) {
+      for (let n = 0; n < this.data.lineList.length; n++) {
+        const 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 (let i = 0; i < this.option.nodeList.length; 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, 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 (let t = 0; t < this.option.nodeList.length; t++) {
+        const 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 (let t = 0; t < this.option.lineList.length; t++) {
+        const e = this.option.lineList[t];
+        this.jsPlumb.connect({
+          source: e.from,
+          target: e.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) {
+          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);
+          const 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);
+          const 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 m = /* @__PURE__ */ u(
+  f,
+  h,
+  d,
+  !1,
+  p,
+  null,
+  null,
+  null
+);
+function p(t) {
+  for (let e in r)
+    this[e] = r[e];
+}
+const j = /* @__PURE__ */ function() {
+  return m.exports;
+}();
+export {
+  j as default
+};

package/flow/style.css

@@ -0,0 +1 @@
+.avue-flow{position:relative}.avue-flow .avue-draggable{padding:0}.avue-flow__node{box-sizing:border-box;border:1px solid #eee;border-radius:5px;flex-direction:column;width:200px;height:80px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 12px #66a6e0}.avue-flow__node--active{border-width:2px;border-color:#f56c6c}.avue-flow__node-drag{margin:0 5px;display:inline-block}.avue-flow__node-header{background-color:#66a6e0;flex:1}.avue-flow__node-body{text-align:center;background:#fff;flex:1.5;justify-content:center;align-items:center;display:flex}