@smallwei/avue 3.8.5 → 3.8.6

package/es/packages/element-plus/flow/index2.mjs

@@ -0,0 +1,312 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import create from '../../../src/core/create.mjs';
+import locale from '../../../src/core/locale.mjs';
+import './node.mjs';
+import { randomId } from '../../../src/utils/util.mjs';
+import script$1 from './node2.mjs';
+
+var script = create({
+  name: "flow",
+  mixins: [locale],
+  components: {
+    flowNode: script$1
+  },
+  data () {
+    return {
+      active: '',
+      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,
+    }
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: () => {
+        return {}
+      }
+    },
+    option: {
+      type: Object
+    },
+    width: {
+      type: [Number, String],
+      default: '100%'
+    },
+    height: {
+      type: [Number, String],
+      default: '100%'
+    }
+  },
+  created () {
+    this.id = randomId();
+    this.jsplumbSetting.Container = this.id;
+  },
+  mounted () {
+    this.init();
+  },
+  watch: {
+    modelValue: {
+      handler (val) {
+        this.active = val;
+      },
+      immediate: true
+    },
+    active (val) {
+      this.$emit('update:modelValue', val);
+    }
+  },
+  computed: {
+    styleName () {
+      return {
+        position: 'relative',
+        width: this.setPx(this.width),
+        height: this.setPx(this.height)
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.jsPlumb = jsPlumb.getInstance();
+      this.$nextTick(() => {
+        this.jsPlumbInit();
+      });
+    },
+    handleClick (node) {
+      this.$emit('click', node);
+    },
+    // 是否具有该线
+    hasLine (from, to) {
+      for (var i = 0; i < this.data.lineList.length; i++) {
+        var 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 (var i = 0; i < this.option.nodeList.length; i++) {
+        this.option.nodeList[i];
+        if (i === index) {
+          this.option.nodeList[i].left = left;
+          this.option.nodeList[i].top = top;
+        }
+      }
+    },
+    //删除节点
+    deleteNode (nodeId) {
+      this.$confirm(this.t('flow.deleteNodeConfirm', { nodeId }), this.t('common.tip'), {
+        confirmButtonText: this.t('common.submitBtn'),
+        cancelButtonText: this.t('common.cancelBtn'),
+        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;
+      let nodeId = 'node' + index;
+      this.option.nodeList.push({
+        id: 'node' + index,
+        name: 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++) {
+        let 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++) {
+        let 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);
+        // 会使整个jsPlumb立即重绘。
+        _this.jsPlumb.setSuspendDrawing(false, true);
+        // 初始化节点
+        _this.loadEasyFlow();
+
+        // 单点击了连接线,
+        _this.jsPlumb.bind('click', function (conn, originalEvent) {
+          console.log('click', conn);
+
+          _this.$confirm(_this.t('flow.deleteLineConfirm'), _this.t('common.tip'), {
+            confirmButtonText: _this.t('common.submitBtn'),
+            cancelButtonText: _this.t('common.cancelBtn'),
+            type: 'warning'
+          }).then(() => {
+            _this.jsPlumb.deleteConnection(conn);
+          }).catch(() => {
+          });
+        });
+        // 连线
+        _this.jsPlumb.bind('connection', function (evt) {
+          console.log('connection', evt);
+          let from = evt.source.id;
+          let to = evt.target.id;
+          if (_this.loadEasyFlowFinish) {
+            _this.option.lineList.push({
+              from: from,
+              to: 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);
+        });
+
+        // 单击endpoint
+        // jsPlumb.bind("endpointClick", function (evt) {
+        //   console.log('endpointClick', evt)
+        // })
+        //
+        // // 双击endpoint
+        // jsPlumb.bind("endpointDblClick", function (evt) {
+        //   console.log('endpointDblClick', evt)
+        // })
+
+        // contextmenu
+        _this.jsPlumb.bind('contextmenu', function (evt) {
+          console.log('contextmenu', evt);
+        });
+
+        // beforeDrop
+        _this.jsPlumb.bind('beforeDrop', function (evt) {
+          console.log('beforeDrop', evt);
+          let from = evt.sourceId;
+          let to = evt.targetId;
+          if (from === to) {
+            _this.$message.error(_this.t('flow.noSelfConnect'));
+            return false
+          }
+          if (_this.hasLine(from, to)) {
+            _this.$message.error(_this.t('flow.noDuplicateConnect'));
+            return false
+          }
+          if (_this.hashOppositeLine(from, to)) {
+            _this.$message.error(_this.t('flow.noLoopConnect'));
+            return false
+          }
+          return true
+        });
+
+        // beforeDetach
+        _this.jsPlumb.bind('beforeDetach', function (evt) {
+          console.log('beforeDetach', evt);
+        });
+      });
+    }
+  }
+});
+
+export { script as default };

package/es/packages/element-plus/flow/index3.mjs

@@ -0,0 +1,45 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withCtx, renderSlot, createCommentVNode } from 'vue';
+
+const _hoisted_1 = ["id"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_flow_node = resolveComponent("flow-node");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.b()),
+    style: normalizeStyle(_ctx.styleName)
+  }, [
+    createElementVNode("div", {
+      id: _ctx.id,
+      style: normalizeStyle(_ctx.styleName)
+    }, [
+      _cache[0] || (_cache[0] = createElementVNode("div", { class: "avue-grid" }, null, -1 /* HOISTED */)),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.option.nodeList, (node, index) => {
+        return (openBlock(), createElementBlock(Fragment, null, [
+          (!node.display)
+            ? (openBlock(), createBlock(_component_flow_node, {
+                node: node,
+                id: node.id,
+                onClick: $event => (_ctx.handleClick(node)),
+                onChangeNodeSite: _ctx.changeNodeSite,
+                index: index,
+                active: _ctx.active,
+                key: index
+              }, {
+                header: withCtx(({node}) => [
+                  renderSlot(_ctx.$slots, "header", { node: node })
+                ]),
+                default: withCtx(({node}) => [
+                  renderSlot(_ctx.$slots, "default", { node: node })
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["node", "id", "onClick", "onChangeNodeSite", "index", "active"]))
+            : createCommentVNode("v-if", true)
+        ], 64 /* STABLE_FRAGMENT */))
+      }), 256 /* UNKEYED_FRAGMENT */))
+    ], 12 /* STYLE, PROPS */, _hoisted_1)
+  ], 6 /* CLASS, STYLE */))
+}
+
+export { render };

package/es/packages/element-plus/flow/node.mjs

@@ -0,0 +1,8 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import script from './node2.mjs';
+import { render } from './node3.mjs';
+
+script.render = render;
+script.__file = "packages/element-plus/flow/node.vue";
+
+export { script as default };

package/es/packages/element-plus/flow/node2.mjs

@@ -0,0 +1,56 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import create from '../../../src/core/create.mjs';
+
+var script = create({
+  name: 'flow',
+  props: {
+    active: [String, Number],
+    index: [String, Number],
+    node: Object
+  },
+  data () {
+    return {
+      // 控制节点操作显示
+      mouseEnter: false
+    }
+  },
+  computed: {
+    // 节点容器样式
+    flowNodeContainer: {
+      get () {
+        return {
+          position: 'absolute',
+          width: '200px',
+          top: this.setPx(this.node.top),
+          left: this.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', '')),
+      });
+    }
+  }
+});
+
+export { script as default };

package/es/packages/element-plus/flow/node3.mjs

@@ -0,0 +1,47 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, createVNode, withCtx, renderSlot } from 'vue';
+
+const _hoisted_1 = ["left", "top"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon_rank = resolveComponent("el-icon-rank");
+  const _component_el_icon = resolveComponent("el-icon");
+
+  return (openBlock(), createElementBlock("div", {
+    ref: "node",
+    style: normalizeStyle(_ctx.flowNodeContainer),
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => (_ctx.showDelete && _ctx.showDelete(...args))),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => (_ctx.hideDelete && _ctx.hideDelete(...args))),
+    onMouseup: _cache[2] || (_cache[2] = (...args) => (_ctx.changeNodeSite && _ctx.changeNodeSite(...args))),
+    left: _ctx.node.left,
+    top: _ctx.node.top,
+    disabled: "",
+    mask: false
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.b('node',{'active':_ctx.active===_ctx.node.id}))
+    }, [
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.b('node-header'))
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.b('node-drag'))
+        }, null, 2 /* CLASS */),
+        createVNode(_component_el_icon, null, {
+          default: withCtx(() => [
+            createVNode(_component_el_icon_rank)
+          ]),
+          _: 1 /* STABLE */
+        }),
+        renderSlot(_ctx.$slots, "header", { node: _ctx.node })
+      ], 2 /* CLASS */),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.b('node-body'))
+      }, [
+        renderSlot(_ctx.$slots, "default", { node: _ctx.node })
+      ], 2 /* CLASS */)
+    ], 2 /* CLASS */)
+  ], 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_1))
+}
+
+export { render };

package/es/packages/element-plus/form/config.mjs

@@ -1,6 +1,9 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 // form 配置文件
-export default {
+var config = {
     labelWidth: 90,
     span: 12,
     xsSpan: 24,
 };
+
+export { config as default };

package/es/packages/element-plus/form/index.mjs

@@ -0,0 +1,8 @@
+/*! Avue.js v3.8.6 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import script from './index2.mjs';
+import { render } from './index3.mjs';
+
+script.render = render;
+script.__file = "packages/element-plus/form/index.vue";
+
+export { script as default };