@opentinyvue/vue-flowchart 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,2 @@
+import Flowchart from './src/index';
+export default Flowchart;

package/lib/index.js

@@ -0,0 +1,731 @@
+import { defineComponent, props, directive, setup, emitter, h, isVue3, $prefix, $props, $setup } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/flowchart/vue';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import { IconYes, IconClose, iconNotStartedMini, iconNotStarted, iconOnGoingMini, iconOnGoing, iconExceptionMiniO, iconExceptionO, iconDoneMini, iconDone } from '@opentinyvue/vue-icon';
+import Popover from '@opentinyvue/vue-popover';
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/flowchart/node';
+import ResizeObserver from '@opentinyvue/vue-renderless/common/deps/ResizeObserver';
+import '@opentinyvue/vue-theme/flowchart/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script$2 = defineComponent({
+  emits: ["click-node", "click-link", "click-blank"],
+  props: [].concat(props, ["data", "config"]),
+  directives: directive({
+    Clickoutside
+  }),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        emitter
+      }
+    });
+  },
+  render: function render() {
+    var slots = this.slots, state = this.state, clearHoverAfterLink = this.clearHoverAfterLink, clickNode = this.clickNode, config = this.config, getVars = this.getVars, omitText = this.omitText;
+    var afterData = state.afterData, dropdowns = state.dropdowns, refreshKey = state.refreshKey, wrapperStyle = state.wrapperStyle;
+    var afterNodes = afterData.afterNodes, allItem = afterData.allItem;
+    var nodes = afterNodes.map(function(afterNode) {
+      var ret = getVars(afterNode, config);
+      var background = ret.background, borderColor = ret.borderColor, half = ret.half, isCompleteFn = ret.isCompleteFn, isFailFn = ret.isFailFn, isOngoingFn = ret.isOngoingFn, statusName = ret.statusName, white = ret.white;
+      var halfIconWrapperSize = half(config.iconWrapperSize);
+      var wrapperStyle2 = "left:" + afterNode.x + "px;top:" + afterNode.y + "px;width:" + config.iconWrapperSize + "px;height:" + config.iconWrapperSize + "px;transform:translate(-" + halfIconWrapperSize + "px,-" + halfIconWrapperSize + "px);background:" + config.background + ";";
+      var halfIconSize = half(config.iconSize);
+      var iconWrapperPadding = halfIconWrapperSize - halfIconSize;
+      var iconStyle = "width:" + config.iconSize + "px;height:" + config.iconSize + "px;border-radius:" + halfIconSize + "px;border-color:" + borderColor + ";transform:translate(" + iconWrapperPadding + "px," + iconWrapperPadding + "px);background:" + background + ";";
+      var svgFill = isCompleteFn() ? borderColor : isFailFn() ? white : "";
+      var svgStyle = "font-size:" + config.iconSvgSize + "px;fill:" + svgFill + ";";
+      var iconComp = isCompleteFn() ? IconYes() : isFailFn() ? IconClose() : null;
+      var labelWidth = config.labelWidth || afterData.widths[1] - config.labelSpacing;
+      var labelHeight = config.labelHeight || afterData.heights[1] - config.labelSpacing;
+      var halfLabelWidth = half(labelWidth);
+      var labelTransform = config.anchor === "center" ? "translateX(" + (halfIconWrapperSize - halfLabelWidth) + "px)" : "";
+      var labelStyle = "width:" + labelWidth + "px;height:" + labelHeight + "px;transform:" + labelTransform + ";";
+      var baseStyle = "text-align:" + (config.anchor === "center" ? "center" : "left") + ";";
+      var titleStyle = baseStyle + ("color:" + (isOngoingFn() ? config.colors[config.statusOngoing] : "") + ";");
+      var dateStyle = baseStyle + ("color:" + config.labelDateColor + ";");
+      var valid = function valid2(arr) {
+        return Array.isArray(arr) && arr.length > config.listThreshold;
+      };
+      var showItem = slots.content && valid(afterNode.raw.info.items);
+      var itemStyle = "width:" + config.listWidth + "px;height:" + config.iconWrapperSize + "px;background:" + config.background + ";";
+      var params = {
+        afterNode,
+        node: afterNode.raw,
+        config,
+        allItem,
+        dropdowns,
+        showPop: dropdowns[afterNode.raw.name]
+      };
+      var iconVnode, lableVnodes;
+      if (slots.icon) {
+        iconVnode = slots.icon(params);
+      } else {
+        iconVnode = h("div", {
+          class: "tiny-flow-chart__node-icon " + statusName,
+          style: iconStyle
+        }, [iconComp ? h(iconComp, {
+          class: "tiny-flow-chart__node-svg",
+          style: svgStyle
+        }) : null]);
+      }
+      if (slots.label) {
+        lableVnodes = [slots.label(params)];
+      } else {
+        var property = {
+          class: "label-item label-title",
+          style: titleStyle
+        };
+        var t = omitText(afterNode.raw.info.label, config.font, labelWidth);
+        if (t.o) {
+          property.attrs = {
+            title: afterNode.raw.info.label
+          };
+        }
+        lableVnodes = [h("div", property, t.t), h("div", {
+          class: "label-item label-date",
+          style: dateStyle
+        }, afterNode.raw.info.date)];
+      }
+      return h("div", {
+        class: "tiny-flow-chart__node-icon-wrapper",
+        style: wrapperStyle2,
+        on: {
+          mousemove: clearHoverAfterLink,
+          click: function click(e) {
+            return clickNode(params, e);
+          }
+        }
+      }, [iconVnode, h("div", {
+        class: "tiny-flow-chart__node-label",
+        style: labelStyle
+      }, lableVnodes), showItem ? h("div", {
+        class: "tiny-flow-chart__node-item",
+        style: itemStyle
+      }, [slots.content(params)]) : null]);
+    });
+    return h("div", {
+      class: "tiny-flow-chart",
+      style: wrapperStyle,
+      key: refreshKey,
+      directives: [{
+        name: "clickoutside",
+        expression: "clearDropdown"
+      }]
+    }, [h("canvas", {
+      class: "tiny-flow-chart__canvas",
+      attrs: {
+        width: config.width,
+        height: config.height
+      },
+      ref: "canvas"
+    })].concat(nodes));
+  }
+});
+var __vue2_render$1, __vue2_staticRenderFns$1;
+var __cssModules$2 = {};
+var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, __vue2_render$1, __vue2_staticRenderFns$1, false, __vue2_injectStyles$2);
+function __vue2_injectStyles$2(context) {
+  for (var o in __cssModules$2) {
+    this[o] = __cssModules$2[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__$2.exports;
+}();
+
+var getRenderLabel = function getRenderLabel2(_ref) {
+  var omitText = _ref.omitText, font = _ref.font, width = _ref.width, padding = _ref.padding, popoverProps = _ref.popoverProps;
+  return function(label, type) {
+    if (!label) return null;
+    var t = omitText(label, font, width - padding[1]);
+    var fontClass = type === "main" ? "font-semibold text-color-text-primary" : "text-color-text-secondary";
+    var labelClass = "w-full text-center whitespace-nowrap overflow-hidden text-ellipsis " + padding[0] + " " + fontClass;
+    var lableVnode = h("div", {
+      slot: "reference",
+      class: labelClass
+    }, label);
+    if (!t.o) return lableVnode;
+    var def = h("span", label);
+    var childNodes = isVue3 ? {
+      default: function _default() {
+        return def;
+      },
+      reference: function reference() {
+        return lableVnode;
+      }
+    } : [def, lableVnode];
+    return h(Popover, popoverProps, childNodes);
+  };
+};
+var renderShapeChildren = function renderShapeChildren2(_ref2) {
+  var renderInner = _ref2.renderInner, raw = _ref2.raw, renderLabel = _ref2.renderLabel, main = _ref2.main, auxi = _ref2.auxi;
+  var shapeVnodeChildren = null;
+  if (typeof renderInner === "function") {
+    shapeVnodeChildren = [renderInner(h, raw)];
+  } else {
+    var mainVnode = renderLabel(main, "main");
+    var auxiVnode = renderLabel(auxi, "auxi");
+    shapeVnodeChildren = [mainVnode, auxiVnode];
+  }
+  return shapeVnodeChildren;
+};
+var renderShapeVnode = function renderShapeVnode2(args) {
+  var renderOuter = args.renderOuter, raw = args.raw, colors = args.colors, status = args.status, statusOngoing = args.statusOngoing, ongoingBackgroundColor = args.ongoingBackgroundColor;
+  var shape = args.shape, statusFail = args.statusFail, error = args.error, shapeVnodeChildren = args.shapeVnodeChildren, popoverProps = args.popoverProps;
+  var shapeVnode = null;
+  if (typeof renderOuter === "function") {
+    shapeVnode = renderOuter(h, raw);
+  } else {
+    var borderColor = "border-color:" + colors[status] + ";";
+    var backgroundColor = status === statusOngoing ? "background-color:" + ongoingBackgroundColor + ";" : "";
+    var cls = ["w-full h-full border-0.5 sm:border border-solid flex flex-col items-center cursor-pointer", shape === "circle" ? "rounded-full justify-center" : "", shape === "rectangle" ? "rounded justify-evenly" : ""];
+    var styl = borderColor + backgroundColor;
+    if (status === statusFail && error) {
+      var def = h("span", error);
+      var ref = h("div", {
+        class: cls,
+        style: styl,
+        slot: "reference"
+      }, shapeVnodeChildren);
+      var childNodes = isVue3 ? {
+        default: function _default() {
+          return def;
+        },
+        reference: function reference() {
+          return ref;
+        }
+      } : [def, ref];
+      popoverProps.class = "w-full h-full block";
+      shapeVnode = h(Popover, popoverProps, childNodes);
+    } else {
+      shapeVnode = h("div", {
+        class: cls,
+        style: styl,
+        slot: "reference"
+      }, shapeVnodeChildren);
+    }
+  }
+  return shapeVnode;
+};
+var renderCondVnodes = function renderCondVnodes2(_ref3) {
+  var isDot = _ref3.isDot, afterLinks = _ref3.afterLinks, afterConfig = _ref3.afterConfig, config = _ref3.config;
+  if (!isDot) return [];
+  var cfg = afterConfig || config || {};
+  var condClass = cfg.condClass, renderCond = cfg.renderCond;
+  return afterLinks.filter(function(_ref4) {
+    var cond = _ref4.cond;
+    return cond;
+  }).map(function(afterLink) {
+    var rect = afterLink.rect, raw = afterLink.raw;
+    var clazz = "absolute flex justify-center items-center";
+    var style = "left:" + rect.x + "px;top:" + rect.y + "px;width:" + rect.w + "px;height:" + rect.h + "px;";
+    return h("div", {
+      class: clazz,
+      style
+    }, [renderCond ? renderCond(h, afterLink, cfg) : h("div", {
+      attrs: {
+        title: raw.info.other.title
+      },
+      class: condClass || ""
+    }, raw.info.other.title)]);
+  });
+};
+var renderGroupVnodes = function renderGroupVnodes2(_ref5) {
+  var afterGroups = _ref5.afterGroups, clickGroup = _ref5.clickGroup;
+  if (!afterGroups) return [];
+  return afterGroups.map(function(afterGroup) {
+    var _afterGroup$raw = afterGroup.raw, title = _afterGroup$raw.title, titleClass = _afterGroup$raw.titleClass;
+    var vnode = null;
+    if (title) {
+      var titlePosition = afterGroup.raw.titlePosition;
+      var width = afterGroup.width, height = afterGroup.height;
+      var p0 = afterGroup.coords[0];
+      var p3 = afterGroup.coords[3];
+      var pos = {
+        x: 0,
+        y: p3.y + 8
+      };
+      var centerClass = "";
+      if (!titlePosition || titlePosition === "top-left") {
+        pos.x = p0.x + 8;
+      } else {
+        pos.x = p3.x - width / 2;
+        centerClass = "flex justify-center items-center";
+      }
+      vnode = h("div", {
+        class: "absolute " + centerClass,
+        style: {
+          left: pos.x + "px",
+          top: pos.y + "px",
+          width: width + "px",
+          height: height + "px"
+        },
+        on: {
+          click: function click(e) {
+            return clickGroup(afterGroup, e);
+          }
+        }
+      }, [h("div", {
+        class: "truncate",
+        attrs: {
+          title
+        }
+      }, [h("span", {
+        class: titleClass
+      }, title)])]);
+    }
+    return vnode;
+  });
+};
+var __vue2_script$1 = defineComponent({
+  emits: ["click-node", "click-link", "click-blank", "click-group"],
+  props: [].concat(props, ["data", "config"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        emitter
+      }
+    });
+  },
+  render: function render() {
+    var state = this.state, omitText = this.omitText, config = this.config, clickNode = this.clickNode, clickGroup = this.clickGroup;
+    var afterData = state.afterData, wrapperStyle = state.wrapperStyle, refreshKey = state.refreshKey;
+    var graph = afterData.graph, afterNodes = afterData.afterNodes, afterLinks = afterData.afterLinks, afterGroups = afterData.afterGroups, afterConfig = afterData.afterConfig;
+    var font = config.font, popoverPlacement = config.popoverPlacement, colors = config.colors, statusOngoing = config.statusOngoing, statusFail = config.statusFail, ongoingBackgroundColor = config.ongoingBackgroundColor;
+    var ratio = graph.thin ? graph.thinValue : 1;
+    var padding = ["px-1.5", 12];
+    var isDot = config.type === "dot";
+    var condVnodes = renderCondVnodes({
+      isDot,
+      afterLinks,
+      afterConfig,
+      config
+    });
+    var groupVnodes = renderGroupVnodes({
+      afterGroups,
+      clickGroup
+    });
+    return h("div", {
+      attrs: {
+        "data-tag": "tiny-flow-chart"
+      },
+      class: "relative",
+      style: wrapperStyle,
+      key: refreshKey
+    }, [h("canvas", {
+      attrs: {
+        "data-tag": "tiny-flow-chart__canvas",
+        width: graph.width * ratio,
+        height: graph.height * ratio
+      },
+      class: graph.thin ? "scale-50 -translate-x-1/4 -translate-y-1/4" : "absolute top-0 left-0",
+      ref: "canvas"
+    })].concat(afterNodes.map(function(afterNode) {
+      var x = afterNode.x, y = afterNode.y, width = afterNode.width, height = afterNode.height, raw = afterNode.raw;
+      var info = raw.info, renderInner = raw.renderInner;
+      var renderOuter = raw.renderOuter || config.renderOuter;
+      var other = info.other, shape = info.shape, status = info.status;
+      var main = other.main, auxi = other.auxi, error = other.error;
+      var popoverProps = {
+        props: {
+          trigger: "hover",
+          placement: popoverPlacement
+        },
+        class: "w-full block"
+      };
+      var renderLabel = getRenderLabel({
+        omitText,
+        font,
+        width,
+        padding,
+        popoverProps
+      });
+      var shapeVnodeChildren = renderShapeChildren({
+        renderInner,
+        raw,
+        renderLabel,
+        main,
+        auxi
+      });
+      var args = {
+        renderOuter,
+        raw,
+        colors,
+        status,
+        statusOngoing,
+        ongoingBackgroundColor
+      };
+      Object.assign(args, {
+        shape,
+        statusFail,
+        error,
+        shapeVnodeChildren,
+        popoverProps
+      });
+      var shapeVnode = renderShapeVnode(args);
+      var wrapperProps = {
+        attrs: {
+          "data-tag": "tiny-flow-chart__node"
+        },
+        style: "left:" + x + "px;top:" + y + "px;width:" + width + "px;height:" + height + "px;",
+        class: ["absolute", {
+          "flex justify-center items-center": isDot
+        }],
+        on: {
+          click: function click(e) {
+            return clickNode({
+              afterNode
+            }, e);
+          }
+        }
+      };
+      var outerClass = ["absolute w-6 h-6", {
+        "sm:w-4 sm:h-4": config.nodeSize === "mini",
+        "sm:w-8 sm:h-8": config.nodeSize === "medium"
+      }];
+      return h("div", wrapperProps, [isDot ? h("div", {
+        class: outerClass
+      }, [shapeVnode]) : shapeVnode]);
+    }), condVnodes, groupVnodes));
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles$1);
+function __vue2_injectStyles$1(context) {
+  for (var o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var template = function template2(mode) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
+    return pc;
+  }
+  if ("mobile-first" === (tinyMode || mode)) {
+    return mobileFirst;
+  }
+  return pc;
+};
+var $constants = {};
+var createNode = function createNode2(name, status, label, date, items, row, col, other) {
+  var info = {
+    status,
+    label,
+    date,
+    items,
+    row,
+    col,
+    other
+  };
+  return {
+    name,
+    info
+  };
+};
+var createLink = function createLink2(from, to, p, status, style, other) {
+  var info = {
+    status,
+    style: style || "solid",
+    other
+  };
+  return {
+    from,
+    to,
+    p,
+    info
+  };
+};
+var createItem = function createItem2(key, name, role, status, comment, date, other) {
+  return {
+    key,
+    name,
+    role,
+    status,
+    comment,
+    date,
+    other
+  };
+};
+var createConfig = function createConfig2() {
+  return {
+    width: 1024,
+    height: 420,
+    rows: 8,
+    cols: 8,
+    status: {
+      1: "complete",
+      2: "ongoing",
+      3: "pending",
+      4: "fail"
+    },
+    colors: {
+      1: "#1890ff",
+      2: "#096dd9",
+      3: "#d9d9d9",
+      4: "#f5222d"
+    },
+    background: "#fff",
+    statusComplete: 1,
+    statusOngoing: 2,
+    statusFail: 4,
+    anchor: "center",
+    iconWrapperSize: 24,
+    iconSize: 20,
+    iconSvgSize: 14,
+    labelSpacing: 8,
+    labelWidth: 80,
+    labelHeight: 60,
+    labelDateColor: "#999",
+    listWidth: 62,
+    listThreshold: 1,
+    listIconSize: 20,
+    listBorderColor: "#d9d9d9",
+    listIconColor: "#999",
+    headUrl: "",
+    headSize: 20,
+    drawLink: null,
+    styleLink: null,
+    styleHoverLink: null,
+    hoverHit: 3,
+    checkItemStatus: null,
+    font: '12px "Microsoft YaHei"',
+    delay: 10,
+    adjustPos: null,
+    radius: 4,
+    thin: true
+  };
+};
+var Flowchart = defineComponent({
+  name: $prefix + "Flowchart",
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    data: Object,
+    config: Object
+  }),
+  setup: function setup(props2, context) {
+    return $setup({
+      props: props2,
+      context,
+      template
+    });
+  }
+});
+var icons = {
+  "not-started": {
+    mini: iconNotStartedMini,
+    other: iconNotStarted
+  },
+  "ongoing": {
+    mini: iconOnGoingMini,
+    other: iconOnGoing
+  },
+  "fail": {
+    mini: iconExceptionMiniO,
+    other: iconExceptionO
+  },
+  "completed": {
+    mini: iconDoneMini,
+    other: iconDone
+  }
+};
+var __vue2_script = defineComponent({
+  props: [].concat(props, ["node", "config", "titleClass"]),
+  setup: function setup2(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless: renderless$1,
+      api: api$1,
+      mono: true,
+      extendOptions: {
+        icons
+      }
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    key: _vm.state.nodeName,
+    class: ["layout-" + _vm.state.nodeLayout, "size-" + _vm.state.nodeSize, "status-" + _vm.state.nodeStatus, "absolute z-20 h-6", {
+      "sm:h-4": _vm.state.sizeMini,
+      "sm:h-8": _vm.state.sizeMedium
+    }],
+    style: {
+      width: _vm.state.nodeWidth + "px"
+    },
+    attrs: {
+      "data-tag": "tiny-flowchart-node"
+    }
+  }, [_c("div", {
+    ref: "icon",
+    class: ["w-4 h-4 absolute z-0 rounded-full flex items-center justify-center", "translate-x-1 translate-y-1 text-base cursor-pointer", {
+      "sm:w-2 sm:h-2": _vm.state.icon.size === "mini",
+      "sm:w-6 sm:h-6": _vm.state.icon.size === "medium"
+    }]
+  }, [_c(_vm.state.icon.svg(), {
+    tag: "component",
+    attrs: {
+      "custom-class": ["w-4 h-4 inline-block", {
+        "sm:w-2 sm:h-2": _vm.state.icon.size === "mini",
+        "sm:w-6 sm:h-6": _vm.state.icon.size === "medium"
+      }]
+    }
+  })], 1), _c("div", {
+    ref: "title",
+    class: _vm.m("absolute z-0 translate-x-1", _vm.state.layUpdown ? "top-6" : "left-6 translate-y-1", _vm.state.layUpdown ? {
+      "sm:top-4": _vm.state.sizeMini,
+      "sm:top-8": _vm.state.sizeMedium
+    } : {
+      "sm:left-4": _vm.state.sizeMini,
+      "sm:left-8": _vm.state.sizeMedium
+    }, _vm.titleClass || ""),
+    style: {
+      maxWidth: _vm.state.titleMaxWidth + "px",
+      left: _vm.state.layUpdown ? "-" + _vm.state.posLeft + "px" : ""
+    }
+  }, [_vm._l(["title", "subtitle", "auxi"], function(key) {
+    return [_vm.state[key].show ? _c("div", {
+      key,
+      class: ["truncate", _vm.state.layUpdown ? "text-center" : "text-left", key === "title" && _vm.state.sizeMedium ? "text-sm" : "text-xs", _vm.state.isSmall ? {
+        "leading-5": key === "title",
+        "leading-4": key !== "title"
+      } : {
+        "leading-6": key === "title" && _vm.state.sizeMedium,
+        "leading-5": key !== "title" && _vm.state.sizeMedium || key === "title" && _vm.state.sizeSmall,
+        "leading-4": key !== "title" && _vm.state.sizeSmall || _vm.state.sizeMini
+      }, {
+        "text-color-icon-focus": _vm.state.statOngoing,
+        "text-color-text-primary": key === "title" && _vm.state.statCompleted,
+        "text-color-error": key === "title" && _vm.state.statFail,
+        "text-color-icon-secondary": key === "title" && _vm.state.statNotStarted,
+        "text-color-icon-placeholder": key !== "title" && !_vm.state.statOngoing
+      }],
+      attrs: {
+        "title": _vm.state[key].text
+      }
+    }, [_vm._v(" " + _vm._s(_vm.state[key].text) + " ")]) : _vm._e()];
+  })], 2)]);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var Node = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+var resizeMixin = function resizeMixin2(_ref) {
+  var apiPrefix = _ref.apiPrefix, refName = _ref.refName, nodeWrapperSize = _ref.nodeWrapperSize;
+  apiPrefix = apiPrefix || "rszmx";
+  refName = refName || "chart";
+  nodeWrapperSize = nodeWrapperSize || 32;
+  var observer = apiPrefix + "ResizeObserver";
+  var observed = apiPrefix + "ResizeObserved";
+  return {
+    mounted: function mounted() {
+      var _this = this;
+      this.$nextTick(function() {
+        var observedElement = _this.$el.parentNode;
+        if (observedElement) {
+          _this[observer] = new ResizeObserver(function() {
+            window.requestAnimationFrame(function() {
+              if (_this.$refs[refName]) {
+                _this.$refs[refName].refresh({
+                  graphWidth: observedElement.offsetWidth,
+                  adjustX: -nodeWrapperSize / 2
+                });
+              }
+            });
+          });
+          _this[observer].observe(observedElement);
+          _this[observed] = observedElement;
+        }
+      });
+    },
+    beforeUnmount: function beforeUnmount() {
+      if (this[observer]) {
+        this[observer].unobserve(this[observed]);
+        this[observer].disconnect();
+        this[observer] = null;
+        this[observed] = null;
+      }
+    }
+  };
+};
+var version = "2.21.0";
+Flowchart.install = function(Vue) {
+  Vue.component(Flowchart.name, Flowchart);
+};
+Flowchart.version = version;
+Flowchart.createNode = createNode;
+Flowchart.createLink = createLink;
+Flowchart.createItem = createItem;
+Flowchart.createConfig = createConfig;
+Flowchart.Node = Node;
+Flowchart.resizeMixin = resizeMixin;
+
+export { Flowchart as default };

package/lib/mobile-first.js

@@ -0,0 +1,307 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/flowchart/vue';
+import { defineComponent, props, setup, emitter, h, isVue3 } from '@opentinyvue/vue-common';
+import Popover from '@opentinyvue/vue-popover';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var getRenderLabel = function getRenderLabel2(_ref) {
+  var omitText = _ref.omitText, font = _ref.font, width = _ref.width, padding = _ref.padding, popoverProps = _ref.popoverProps;
+  return function(label, type) {
+    if (!label) return null;
+    var t = omitText(label, font, width - padding[1]);
+    var fontClass = type === "main" ? "font-semibold text-color-text-primary" : "text-color-text-secondary";
+    var labelClass = "w-full text-center whitespace-nowrap overflow-hidden text-ellipsis " + padding[0] + " " + fontClass;
+    var lableVnode = h("div", {
+      slot: "reference",
+      class: labelClass
+    }, label);
+    if (!t.o) return lableVnode;
+    var def = h("span", label);
+    var childNodes = isVue3 ? {
+      default: function _default() {
+        return def;
+      },
+      reference: function reference() {
+        return lableVnode;
+      }
+    } : [def, lableVnode];
+    return h(Popover, popoverProps, childNodes);
+  };
+};
+var renderShapeChildren = function renderShapeChildren2(_ref2) {
+  var renderInner = _ref2.renderInner, raw = _ref2.raw, renderLabel = _ref2.renderLabel, main = _ref2.main, auxi = _ref2.auxi;
+  var shapeVnodeChildren = null;
+  if (typeof renderInner === "function") {
+    shapeVnodeChildren = [renderInner(h, raw)];
+  } else {
+    var mainVnode = renderLabel(main, "main");
+    var auxiVnode = renderLabel(auxi, "auxi");
+    shapeVnodeChildren = [mainVnode, auxiVnode];
+  }
+  return shapeVnodeChildren;
+};
+var renderShapeVnode = function renderShapeVnode2(args) {
+  var renderOuter = args.renderOuter, raw = args.raw, colors = args.colors, status = args.status, statusOngoing = args.statusOngoing, ongoingBackgroundColor = args.ongoingBackgroundColor;
+  var shape = args.shape, statusFail = args.statusFail, error = args.error, shapeVnodeChildren = args.shapeVnodeChildren, popoverProps = args.popoverProps;
+  var shapeVnode = null;
+  if (typeof renderOuter === "function") {
+    shapeVnode = renderOuter(h, raw);
+  } else {
+    var borderColor = "border-color:" + colors[status] + ";";
+    var backgroundColor = status === statusOngoing ? "background-color:" + ongoingBackgroundColor + ";" : "";
+    var cls = ["w-full h-full border-0.5 sm:border border-solid flex flex-col items-center cursor-pointer", shape === "circle" ? "rounded-full justify-center" : "", shape === "rectangle" ? "rounded justify-evenly" : ""];
+    var styl = borderColor + backgroundColor;
+    if (status === statusFail && error) {
+      var def = h("span", error);
+      var ref = h("div", {
+        class: cls,
+        style: styl,
+        slot: "reference"
+      }, shapeVnodeChildren);
+      var childNodes = isVue3 ? {
+        default: function _default() {
+          return def;
+        },
+        reference: function reference() {
+          return ref;
+        }
+      } : [def, ref];
+      popoverProps.class = "w-full h-full block";
+      shapeVnode = h(Popover, popoverProps, childNodes);
+    } else {
+      shapeVnode = h("div", {
+        class: cls,
+        style: styl,
+        slot: "reference"
+      }, shapeVnodeChildren);
+    }
+  }
+  return shapeVnode;
+};
+var renderCondVnodes = function renderCondVnodes2(_ref3) {
+  var isDot = _ref3.isDot, afterLinks = _ref3.afterLinks, afterConfig = _ref3.afterConfig, config = _ref3.config;
+  if (!isDot) return [];
+  var cfg = afterConfig || config || {};
+  var condClass = cfg.condClass, renderCond = cfg.renderCond;
+  return afterLinks.filter(function(_ref4) {
+    var cond = _ref4.cond;
+    return cond;
+  }).map(function(afterLink) {
+    var rect = afterLink.rect, raw = afterLink.raw;
+    var clazz = "absolute flex justify-center items-center";
+    var style = "left:" + rect.x + "px;top:" + rect.y + "px;width:" + rect.w + "px;height:" + rect.h + "px;";
+    return h("div", {
+      class: clazz,
+      style
+    }, [renderCond ? renderCond(h, afterLink, cfg) : h("div", {
+      attrs: {
+        title: raw.info.other.title
+      },
+      class: condClass || ""
+    }, raw.info.other.title)]);
+  });
+};
+var renderGroupVnodes = function renderGroupVnodes2(_ref5) {
+  var afterGroups = _ref5.afterGroups, clickGroup = _ref5.clickGroup;
+  if (!afterGroups) return [];
+  return afterGroups.map(function(afterGroup) {
+    var _afterGroup$raw = afterGroup.raw, title = _afterGroup$raw.title, titleClass = _afterGroup$raw.titleClass;
+    var vnode = null;
+    if (title) {
+      var titlePosition = afterGroup.raw.titlePosition;
+      var width = afterGroup.width, height = afterGroup.height;
+      var p0 = afterGroup.coords[0];
+      var p3 = afterGroup.coords[3];
+      var pos = {
+        x: 0,
+        y: p3.y + 8
+      };
+      var centerClass = "";
+      if (!titlePosition || titlePosition === "top-left") {
+        pos.x = p0.x + 8;
+      } else {
+        pos.x = p3.x - width / 2;
+        centerClass = "flex justify-center items-center";
+      }
+      vnode = h("div", {
+        class: "absolute " + centerClass,
+        style: {
+          left: pos.x + "px",
+          top: pos.y + "px",
+          width: width + "px",
+          height: height + "px"
+        },
+        on: {
+          click: function click(e) {
+            return clickGroup(afterGroup, e);
+          }
+        }
+      }, [h("div", {
+        class: "truncate",
+        attrs: {
+          title
+        }
+      }, [h("span", {
+        class: titleClass
+      }, title)])]);
+    }
+    return vnode;
+  });
+};
+var __vue2_script = defineComponent({
+  emits: ["click-node", "click-link", "click-blank", "click-group"],
+  props: [].concat(props, ["data", "config"]),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        emitter
+      }
+    });
+  },
+  render: function render() {
+    var state = this.state, omitText = this.omitText, config = this.config, clickNode = this.clickNode, clickGroup = this.clickGroup;
+    var afterData = state.afterData, wrapperStyle = state.wrapperStyle, refreshKey = state.refreshKey;
+    var graph = afterData.graph, afterNodes = afterData.afterNodes, afterLinks = afterData.afterLinks, afterGroups = afterData.afterGroups, afterConfig = afterData.afterConfig;
+    var font = config.font, popoverPlacement = config.popoverPlacement, colors = config.colors, statusOngoing = config.statusOngoing, statusFail = config.statusFail, ongoingBackgroundColor = config.ongoingBackgroundColor;
+    var ratio = graph.thin ? graph.thinValue : 1;
+    var padding = ["px-1.5", 12];
+    var isDot = config.type === "dot";
+    var condVnodes = renderCondVnodes({
+      isDot,
+      afterLinks,
+      afterConfig,
+      config
+    });
+    var groupVnodes = renderGroupVnodes({
+      afterGroups,
+      clickGroup
+    });
+    return h("div", {
+      attrs: {
+        "data-tag": "tiny-flow-chart"
+      },
+      class: "relative",
+      style: wrapperStyle,
+      key: refreshKey
+    }, [h("canvas", {
+      attrs: {
+        "data-tag": "tiny-flow-chart__canvas",
+        width: graph.width * ratio,
+        height: graph.height * ratio
+      },
+      class: graph.thin ? "scale-50 -translate-x-1/4 -translate-y-1/4" : "absolute top-0 left-0",
+      ref: "canvas"
+    })].concat(afterNodes.map(function(afterNode) {
+      var x = afterNode.x, y = afterNode.y, width = afterNode.width, height = afterNode.height, raw = afterNode.raw;
+      var info = raw.info, renderInner = raw.renderInner;
+      var renderOuter = raw.renderOuter || config.renderOuter;
+      var other = info.other, shape = info.shape, status = info.status;
+      var main = other.main, auxi = other.auxi, error = other.error;
+      var popoverProps = {
+        props: {
+          trigger: "hover",
+          placement: popoverPlacement
+        },
+        class: "w-full block"
+      };
+      var renderLabel = getRenderLabel({
+        omitText,
+        font,
+        width,
+        padding,
+        popoverProps
+      });
+      var shapeVnodeChildren = renderShapeChildren({
+        renderInner,
+        raw,
+        renderLabel,
+        main,
+        auxi
+      });
+      var args = {
+        renderOuter,
+        raw,
+        colors,
+        status,
+        statusOngoing,
+        ongoingBackgroundColor
+      };
+      Object.assign(args, {
+        shape,
+        statusFail,
+        error,
+        shapeVnodeChildren,
+        popoverProps
+      });
+      var shapeVnode = renderShapeVnode(args);
+      var wrapperProps = {
+        attrs: {
+          "data-tag": "tiny-flow-chart__node"
+        },
+        style: "left:" + x + "px;top:" + y + "px;width:" + width + "px;height:" + height + "px;",
+        class: ["absolute", {
+          "flex justify-center items-center": isDot
+        }],
+        on: {
+          click: function click(e) {
+            return clickNode({
+              afterNode
+            }, e);
+          }
+        }
+      };
+      var outerClass = ["absolute w-6 h-6", {
+        "sm:w-4 sm:h-4": config.nodeSize === "mini",
+        "sm:w-8 sm:h-8": config.nodeSize === "medium"
+      }];
+      return h("div", wrapperProps, [isDot ? h("div", {
+        class: outerClass
+      }, [shapeVnode]) : shapeVnode]);
+    }), condVnodes, groupVnodes));
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/lib/pc.js

@@ -0,0 +1,166 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/flowchart/vue';
+import Clickoutside from '@opentinyvue/vue-renderless/common/deps/clickoutside';
+import { defineComponent, props, directive, setup, emitter, h } from '@opentinyvue/vue-common';
+import { IconYes, IconClose } from '@opentinyvue/vue-icon';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script = defineComponent({
+  emits: ["click-node", "click-link", "click-blank"],
+  props: [].concat(props, ["data", "config"]),
+  directives: directive({
+    Clickoutside
+  }),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        emitter
+      }
+    });
+  },
+  render: function render() {
+    var slots = this.slots, state = this.state, clearHoverAfterLink = this.clearHoverAfterLink, clickNode = this.clickNode, config = this.config, getVars = this.getVars, omitText = this.omitText;
+    var afterData = state.afterData, dropdowns = state.dropdowns, refreshKey = state.refreshKey, wrapperStyle = state.wrapperStyle;
+    var afterNodes = afterData.afterNodes, allItem = afterData.allItem;
+    var nodes = afterNodes.map(function(afterNode) {
+      var ret = getVars(afterNode, config);
+      var background = ret.background, borderColor = ret.borderColor, half = ret.half, isCompleteFn = ret.isCompleteFn, isFailFn = ret.isFailFn, isOngoingFn = ret.isOngoingFn, statusName = ret.statusName, white = ret.white;
+      var halfIconWrapperSize = half(config.iconWrapperSize);
+      var wrapperStyle2 = "left:" + afterNode.x + "px;top:" + afterNode.y + "px;width:" + config.iconWrapperSize + "px;height:" + config.iconWrapperSize + "px;transform:translate(-" + halfIconWrapperSize + "px,-" + halfIconWrapperSize + "px);background:" + config.background + ";";
+      var halfIconSize = half(config.iconSize);
+      var iconWrapperPadding = halfIconWrapperSize - halfIconSize;
+      var iconStyle = "width:" + config.iconSize + "px;height:" + config.iconSize + "px;border-radius:" + halfIconSize + "px;border-color:" + borderColor + ";transform:translate(" + iconWrapperPadding + "px," + iconWrapperPadding + "px);background:" + background + ";";
+      var svgFill = isCompleteFn() ? borderColor : isFailFn() ? white : "";
+      var svgStyle = "font-size:" + config.iconSvgSize + "px;fill:" + svgFill + ";";
+      var iconComp = isCompleteFn() ? IconYes() : isFailFn() ? IconClose() : null;
+      var labelWidth = config.labelWidth || afterData.widths[1] - config.labelSpacing;
+      var labelHeight = config.labelHeight || afterData.heights[1] - config.labelSpacing;
+      var halfLabelWidth = half(labelWidth);
+      var labelTransform = config.anchor === "center" ? "translateX(" + (halfIconWrapperSize - halfLabelWidth) + "px)" : "";
+      var labelStyle = "width:" + labelWidth + "px;height:" + labelHeight + "px;transform:" + labelTransform + ";";
+      var baseStyle = "text-align:" + (config.anchor === "center" ? "center" : "left") + ";";
+      var titleStyle = baseStyle + ("color:" + (isOngoingFn() ? config.colors[config.statusOngoing] : "") + ";");
+      var dateStyle = baseStyle + ("color:" + config.labelDateColor + ";");
+      var valid = function valid2(arr) {
+        return Array.isArray(arr) && arr.length > config.listThreshold;
+      };
+      var showItem = slots.content && valid(afterNode.raw.info.items);
+      var itemStyle = "width:" + config.listWidth + "px;height:" + config.iconWrapperSize + "px;background:" + config.background + ";";
+      var params = {
+        afterNode,
+        node: afterNode.raw,
+        config,
+        allItem,
+        dropdowns,
+        showPop: dropdowns[afterNode.raw.name]
+      };
+      var iconVnode, lableVnodes;
+      if (slots.icon) {
+        iconVnode = slots.icon(params);
+      } else {
+        iconVnode = h("div", {
+          class: "tiny-flow-chart__node-icon " + statusName,
+          style: iconStyle
+        }, [iconComp ? h(iconComp, {
+          class: "tiny-flow-chart__node-svg",
+          style: svgStyle
+        }) : null]);
+      }
+      if (slots.label) {
+        lableVnodes = [slots.label(params)];
+      } else {
+        var property = {
+          class: "label-item label-title",
+          style: titleStyle
+        };
+        var t = omitText(afterNode.raw.info.label, config.font, labelWidth);
+        if (t.o) {
+          property.attrs = {
+            title: afterNode.raw.info.label
+          };
+        }
+        lableVnodes = [h("div", property, t.t), h("div", {
+          class: "label-item label-date",
+          style: dateStyle
+        }, afterNode.raw.info.date)];
+      }
+      return h("div", {
+        class: "tiny-flow-chart__node-icon-wrapper",
+        style: wrapperStyle2,
+        on: {
+          mousemove: clearHoverAfterLink,
+          click: function click(e) {
+            return clickNode(params, e);
+          }
+        }
+      }, [iconVnode, h("div", {
+        class: "tiny-flow-chart__node-label",
+        style: labelStyle
+      }, lableVnodes), showItem ? h("div", {
+        class: "tiny-flow-chart__node-item",
+        style: itemStyle
+      }, [slots.content(params)]) : null]);
+    });
+    return h("div", {
+      class: "tiny-flow-chart",
+      style: wrapperStyle,
+      key: refreshKey,
+      directives: [{
+        name: "clickoutside",
+        expression: "clearDropdown"
+      }]
+    }, [h("canvas", {
+      class: "tiny-flow-chart__canvas",
+      attrs: {
+        width: config.width,
+        height: config.height
+      },
+      ref: "canvas"
+    })].concat(nodes));
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@opentinyvue/vue-flowchart",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-popover": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,80 @@
+export declare const createNode: (name: any, status: any, label: any, date: any, items: any, row: any, col: any, other: any) => {
+    name: any;
+    info: {
+        status: any;
+        label: any;
+        date: any;
+        items: any;
+        row: any;
+        col: any;
+        other: any;
+    };
+};
+export declare const createLink: (from: any, to: any, p: any, status: any, style: any, other: any) => {
+    from: any;
+    to: any;
+    p: any;
+    info: {
+        status: any;
+        style: any;
+        other: any;
+    };
+};
+export declare const createItem: (key: any, name: any, role: any, status: any, comment: any, date: any, other: any) => {
+    key: any;
+    name: any;
+    role: any;
+    status: any;
+    comment: any;
+    date: any;
+    other: any;
+};
+export declare const createConfig: () => {
+    width: number;
+    height: number;
+    rows: number;
+    cols: number;
+    status: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    colors: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    background: string;
+    statusComplete: number;
+    statusOngoing: number;
+    statusFail: number;
+    anchor: string;
+    iconWrapperSize: number;
+    iconSize: number;
+    iconSvgSize: number;
+    labelSpacing: number;
+    labelWidth: number;
+    labelHeight: number;
+    labelDateColor: string;
+    listWidth: number;
+    listThreshold: number;
+    listIconSize: number;
+    listBorderColor: string;
+    listIconColor: string;
+    headUrl: string;
+    headSize: number;
+    drawLink: null;
+    styleLink: null;
+    styleHoverLink: null;
+    hoverHit: number;
+    checkItemStatus: null;
+    font: string;
+    delay: number;
+    adjustPos: null;
+    radius: number;
+    thin: boolean;
+};
+declare const _default: any;
+export default _default;

package/src/mobile-first.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/node.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/resize-mixin.d.ts

@@ -0,0 +1,9 @@
+declare const resizeMixin: ({ apiPrefix, refName, nodeWrapperSize }: {
+    apiPrefix: any;
+    refName: any;
+    nodeWrapperSize: any;
+}) => {
+    mounted(): void;
+    beforeUnmount(): void;
+};
+export default resizeMixin;