@opentiny/vue-renderless 3.13.1 → 3.14.0

package/float-button/vue.js

@@ -0,0 +1,101 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, clearTimer, handleScroll } from "./index";
+const api = ["state", "handleClick"];
+const watchVariable = ({ watch, props, state, nextTick, vm, emit }) => {
+  watch(
+    () => props.disabled,
+    (value) => {
+      state.disabled = value;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.open,
+    (value) => {
+      state.open = value;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.open,
+    (value) => {
+      if (value) {
+        let beforeRootDom = vm.$refs.tinyFloatButton;
+        let beforeRootDomStyle = (beforeRootDom == null ? void 0 : beforeRootDom.getClientRects()[0]) || 0;
+        nextTick(() => {
+          if (!beforeRootDomStyle) {
+            beforeRootDom = vm.$refs.tinyFloatButton;
+            beforeRootDomStyle = beforeRootDom.getClientRects()[0];
+          }
+          const dom = vm.$refs.tinyFloatButtonOpen;
+          const style = `left:0px;bottom:${beforeRootDomStyle.height + 4 + "px"};`;
+          dom == null ? void 0 : dom.setAttribute("style", style);
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.trigger,
+    (value) => {
+      if (value === "hover" && !state.hasEvent) {
+        nextTick(() => {
+          const dom = vm.$refs.tinyFloatButton;
+          dom.addEventListener("mouseover", (event) => {
+            state.open = true;
+            emit("mouseover", event);
+          });
+          dom.addEventListener("mouseout", (event) => {
+            state.open = false;
+            emit("mouseout", event);
+          });
+          state.hasEvent = true;
+        });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.backTop,
+    (value) => {
+      if (value) {
+        handleScroll({ props, vm, state });
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.element,
+    () => {
+      if (props.backTop) {
+        handleScroll({ props, vm, state });
+      }
+    }
+  );
+};
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject, nextTick }, { emit, parent, vm }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    timer: 0,
+    disabled: props.disabled,
+    open: props.open,
+    hasEvent: false,
+    show: true,
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    buttonDisabled: computed(
+      () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
+    )
+  });
+  watchVariable({ props, vm, watch, state, nextTick, emit });
+  const api2 = {
+    state,
+    clearTimer: clearTimer(state),
+    handleClick: handleClick({ emit, props, state })
+  };
+  onBeforeUnmount(api2.clearTimer);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/floating-button/index.js

@@ -1,10 +1,11 @@
 import "../chunk-G2ADBYYC.js";
+import { off, on } from "../common/deps/dom";
 const getClientWidth = ({ state, vm }) => () => {
-  if (vm.$el) {
-    state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+  if (vm.$refs.floatingButton) {
+    state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
   }
 };
-const handleClick = ({ props, state, emit }) => (event) => {
+const handleClick = ({ props, state, emit }) => (event, index) => {
   if (state.disabled)
     return;
   if (props.resetTime > 0) {
@@ -13,33 +14,56 @@ const handleClick = ({ props, state, emit }) => (event) => {
       state.disabled = false;
     }, props.resetTime);
   }
-  emit("touchstart", event);
+  if (state.isExpand) {
+    state.isExpand = !state.isExpand;
+  } else if (props.isExpand) {
+    state.isExpand = true;
+  }
+  emit("click", event, index);
 };
-const clearTimer = (state) => () => clearTimeout(state.initTimer);
-const useTouchEvent = ({ state, vm, props }) => () => {
-  const screenHeight = window.innerHeight;
-  state.scrolling = false;
-  window.addEventListener("scroll", function() {
-    clearTimeout(state.stayTime);
-    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+const clearTimer = ({ state, api }) => () => {
+  clearTimeout(state.initTimer);
+  off(window, "resize", api.getClientWidth);
+  off(window, "scroll", api.onScroll);
+  off(window, "scroll", api.getScrollListener);
+};
+const getScrollListener = ({ vm, props, state }) => () => {
+  const scrollElement = props.elementSelector ? state.scrollElement : window;
+  const screenHeight = props.elementSelector ? state.elementHeight : state.screenHeight;
+  clearTimeout(state.stayTime);
+  const scrollTop = props.elementSelector ? scrollElement.scrollTop : document.documentElement.scrollTop || document.body.scrollTop;
+  if (vm.$refs.floatingButton) {
     if (props.animated && scrollTop > screenHeight / 2) {
-      state.commHiddenSpace = vm.$el.clientWidth * 0.7;
+      state.commHiddenSpace = vm.$refs.floatingButton.clientWidth * 0.7;
       state.centerSpace = -state.commHiddenSpace;
-      state.specialHiddenSpace = window.innerWidth - vm.$el.clientWidth * 0.3;
+      state.specialHiddenSpace = -vm.$refs.floatingButton.clientWidth * 0.7;
       state.stayTime = setTimeout(function() {
         if (scrollTop === state.lastScrollTop) {
-          state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+          state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
           state.commHiddenSpace = "";
           state.specialHiddenSpace = "";
         }
       }, 1e3);
       state.lastScrollTop = scrollTop;
     } else {
-      state.centerSpace = (document.documentElement.clientWidth - vm.$el.clientWidth) / 2;
+      state.centerSpace = (document.documentElement.clientWidth - vm.$refs.floatingButton.clientWidth) / 2;
       state.commHiddenSpace = "";
       state.specialHiddenSpace = "";
     }
-  });
+  }
+};
+const useTouchEvent = ({ state, props, nextTick, api }) => () => {
+  state.scrolling = false;
+  if (props.elementSelector) {
+    nextTick(() => {
+      state.scrollElement = document.querySelector(props.elementSelector);
+      state.elementHeight = state.scrollElement.scrollHeight;
+      state.scrollElement.addEventListener("scroll", api.getScrollListener);
+    });
+  } else {
+    state.screenHeight = window.innerHeight;
+    window.addEventListener("scroll", api.getScrollListener);
+  }
 };
 const onScroll = ({ state, api }) => () => {
   if (state.scrolling) {
@@ -63,11 +87,33 @@ const computedStyle = ({ props, state }) => () => {
   }
   return styleObj;
 };
+const getExpandList = ({ props, state }) => () => {
+  if (props.expandList && props.expandList.length > 0) {
+    const expandList = props.expandList.map((item) => {
+      item.title = item.title.slice(0, 4);
+      return item;
+    });
+    if (props.expandList.length > 3) {
+      state.expandList = expandList.slice(0, 3);
+    } else {
+      state.expandList = expandList;
+    }
+  }
+};
+const mounted = (api) => () => {
+  api.getClientWidth();
+  api.onScroll();
+  api.getExpandList();
+  on(window, "resize", api.getClientWidth);
+};
 export {
   clearTimer,
   computedStyle,
   getClientWidth,
+  getExpandList,
+  getScrollListener,
   handleClick,
+  mounted,
   onScroll,
   useTouchEvent
 };

package/floating-button/vue.js

@@ -1,7 +1,17 @@
 import "../chunk-G2ADBYYC.js";
-import { getClientWidth, handleClick, clearTimer, useTouchEvent, onScroll, computedStyle } from "./index";
+import {
+  getClientWidth,
+  handleClick,
+  clearTimer,
+  useTouchEvent,
+  onScroll,
+  computedStyle,
+  getExpandList,
+  mounted,
+  getScrollListener
+} from "./index";
 const api = ["state", "handleClick"];
-const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, { vm, emit }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount, watch }, { vm, emit, nextTick }) => {
   const state = reactive({
     centerSpace: 0,
     disabled: false,
@@ -11,22 +21,30 @@ const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, {
     specialHiddenSpace: "",
     stayTime: null,
     lastScrollTop: 0,
-    style: computed(() => api2.computedStyle())
+    style: computed(() => api2.computedStyle()),
+    expandList: null,
+    itemTitle: "",
+    isExpand: false,
+    scrollElement: "",
+    elementHeight: 0,
+    screenHeight: 0
   });
   const api2 = {};
   Object.assign(api2, {
     state,
     getClientWidth: getClientWidth({ state, vm }),
     handleClick: handleClick({ props, state, emit }),
-    clearTimer: clearTimer(state),
-    useTouchEvent: useTouchEvent({ state, vm, props }),
+    clearTimer: clearTimer({ state, api: api2 }),
+    useTouchEvent: useTouchEvent({ state, props, nextTick, api: api2 }),
     onScroll: onScroll({ state, api: api2 }),
-    computedStyle: computedStyle({ props, state })
-  });
-  onMounted(() => {
-    api2.getClientWidth(), api2.onScroll();
+    computedStyle: computedStyle({ props, state }),
+    getExpandList: getExpandList({ state, props }),
+    mounted: mounted(api2),
+    getScrollListener: getScrollListener({ vm, props, state })
   });
+  onMounted(api2.mounted);
   onBeforeUnmount(api2.clearTimer);
+  watch(() => props.expandList, api2.getExpandList);
   return api2;
 };
 export {

package/flowchart/index.js

@@ -1,6 +1,10 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import debounce from "../common/deps/debounce";
 import { omitText as omit } from "../common/string";
+import { fastdom } from "../common/deps/fastdom";
 const compute = ({ api, markRaw, props, state }) => () => {
   const { data, config } = props;
   const { nodes, links } = data;
@@ -170,14 +174,16 @@ const realDraw = ({ afterLink, afterNodes, config, ctx, state }) => {
   } else if (Array.isArray(config.drawLink)) {
     if (config.drawLink.length) {
       for (let i = 0; i < config.drawLink.length; i++) {
-        if (drawn = hitMatch(config.drawLink[i], afterLink)) {
+        drawn = hitMatch(config.drawLink[i], afterLink);
+        if (drawn) {
           config.drawLink[i].method({ ctx, afterLink, afterNodes });
           break;
         }
       }
     }
   } else if (config.drawLink && typeof config.drawLink.method === "function") {
-    if (drawn = hitMatch(config.drawLink, afterLink)) {
+    drawn = hitMatch(config.drawLink, afterLink);
+    if (drawn) {
       config.drawLink.method({ ctx, afterLink, afterNodes });
     }
   }
@@ -242,6 +248,7 @@ const refresh = ({ api, nextTick, state }) => ({ graphWidth = 0, adjustX = 0 } =
   }
   state.refreshKey++;
   nextTick(() => {
+    api.antialiasing();
     api.drawAfterLink();
     api.addListeners();
     state.temporary.emitter.emit("after-graph-refresh");
@@ -251,9 +258,9 @@ const getAllItem = (props) => (nodes) => {
   const allItem = {};
   const { config } = props;
   const { headUrl } = config;
-  nodes.map(({ info: { items } }) => {
+  nodes.forEach(({ info: { items } }) => {
     if (Array.isArray(items) && items.length) {
-      items.map(({ key }) => {
+      items.forEach(({ key }) => {
         allItem[key] = (headUrl || "").replace("{0}", String(key));
       });
     }
@@ -272,7 +279,7 @@ const getVars = () => (afterNode, config) => {
   const isFailFn = () => statusFn() === config.statusFail;
   const half = (qty) => qty >>> 1;
   const white = "#fff";
-  let { background, borderColor, statusName } = {};
+  let background, borderColor, statusName;
   background = borderColor = config.colors[statusFn()];
   statusName = config.status[statusFn()];
   isCompleteFn() && (background = white);
@@ -327,10 +334,10 @@ const buildLinkHoverState = ({ afterLinks, hoverMap, hoverList, config }) => {
       hoverMap.set(tri2, afterLink);
     }
   };
-  afterLinks.map((afterLink) => {
+  afterLinks.forEach((afterLink) => {
     const { p } = afterLink;
     let cur, next;
-    p.map((p2) => {
+    p.forEach((p2) => {
       const parts = p2.split(",");
       if (parts[0] === "m") {
         cur = parts.slice(1).map(Number);
@@ -397,7 +404,8 @@ const setListeners = ({ api, emit, props, state, vm }) => () => {
     api.clearDropdown();
   });
 };
-const pointInTriangle = (x0, y0, x1, y1, x2, y2, px, py) => {
+const pointInTriangle = (points, px, py) => {
+  const [x0, y0, x1, y1, x2, y2] = points;
   const v0 = [x2 - x0, y2 - y0];
   const v1 = [x1 - x0, y1 - y0];
   const v2 = [px - x0, py - y0];
@@ -422,10 +430,10 @@ const hitTest = ({ api, state, vm }) => (x, y) => {
   const { afterData } = state;
   const { hoverState } = afterData;
   const { hoverMap, hoverList, groupHoverMap, groupHoverList } = hoverState;
-  let tri = hoverList.find((item) => pointInTriangle(...item, x, y));
+  let tri = hoverList.find((item) => pointInTriangle(item, x, y));
   state.hoverAfterLink = tri ? hoverMap.get(tri) : null;
   if (!tri) {
-    tri = groupHoverList.find((item) => pointInTriangle(...item, x, y));
+    tri = groupHoverList.find((item) => pointInTriangle(item, x, y));
     state.hoverAfterGroup = tri ? groupHoverMap.get(tri) : null;
   }
   if (hoverAfterLink !== state.hoverAfterLink || hoverAfterGroup !== state.hoverAfterGroup) {
@@ -453,7 +461,7 @@ const clickNode = ({ api, emit }) => (params, e) => {
 };
 const clearDropdown = (state) => (nodeName) => {
   const { dropdowns } = state;
-  Object.keys(dropdowns).map((item) => {
+  Object.keys(dropdowns).forEach((item) => {
     if (dropdowns[item] && (nodeName && item !== nodeName || !nodeName)) {
       dropdowns[item] = false;
     }
@@ -466,10 +474,10 @@ const computeMf = ({ api, markRaw, props, state }) => () => {
   const getCol = buildGetCol({ afterConfig, api });
   const rectRow = buildRectRow({ afterConfig, getRow });
   const rectNode = buildRectNode({ afterConfig, api, getRow, rectRow });
-  let args = { afterConfig, api, getCol, getRow, groups, nodes, rectNode, state };
-  const { afterGroups, afterNodes, graph } = buildAfterNodeGraph(args);
-  args = { afterConfig, afterNodes, graph, links };
-  const { afterLinks, arrows } = buildAfterLinkArrow(args);
+  const buildAfterNodeGraphArgs = { afterConfig, api, getCol, getRow, groups, nodes, rectNode, state };
+  const { afterGroups, afterNodes, graph } = buildAfterNodeGraph(buildAfterNodeGraphArgs);
+  const buildAfterLinkArrowArgs = { afterConfig, afterNodes, graph, links };
+  const { afterLinks, arrows } = buildAfterLinkArrow(buildAfterLinkArrowArgs);
   const hoverState = api.buildHoverState({ afterGroups, afterLinks });
   state.afterData = markRaw({ afterConfig, afterGroups, afterLinks, afterNodes, arrows, graph, hoverState });
   state.wrapperStyle = { width: `${graph.width}px`, height: `${graph.height}px` };
@@ -571,7 +579,7 @@ const normalRowCol = ({ afterConfig, nodes }) => {
   rows = [...rows].sort((a, b) => a - b);
   rows.forEach((row, i) => rowMap.set(row, autoAdjustPos ? i : row));
   const afterNodes = nodes.map((node) => {
-    return { type: "node", row: rowMap.get(node.info.row), col: 0, raw: node };
+    return { type: "node", row: rowMap.get(node.info.row), col: 0, raw: node, lastCol: false, lastRow: false };
   });
   rows.forEach((r, row) => {
     const rowAfterNodes = afterNodes.filter((afterNode) => afterNode.row === row);
@@ -588,14 +596,23 @@ const defaultLayout = ({ afterConfig, afterNodes, getCol, getRow, graph, maxCol,
   const { height, padding, width } = afterConfig;
   let tmp;
   for (let i = 0; i <= maxRow; i++) {
-    if ((tmp = getRow(afterNodes, i, "width")) > graph.width)
+    tmp = getRow(afterNodes, i, "width");
+    if (tmp > graph.width)
       graph.width = tmp;
   }
   for (let i = 0; i <= maxCol; i++) {
-    if ((tmp = getCol(afterNodes, i, "height")) > graph.height)
+    tmp = getCol(afterNodes, i, "height");
+    if (tmp > graph.height)
       graph.height = tmp;
   }
-  afterNodes.forEach((afterNode) => Object.assign(afterNode, rectNode(afterNode, afterNodes, graph)));
+  afterNodes.forEach((afterNode) => {
+    Object.assign(afterNode, rectNode(afterNode, afterNodes, graph));
+    afterNode.lastCol = afterNode.lastRow = false;
+    if (afterNode.col === maxCol)
+      afterNode.lastCol = true;
+    if (afterNode.row === maxRow)
+      afterNode.lastRow = true;
+  });
   if (padding > 0) {
     tmp = 2 * padding;
     graph.width += tmp;
@@ -623,6 +640,7 @@ const dotModeAdjust = ({ afterConfig, afterNodes, graph, maxCol, state }) => {
     const colSize = (graph.width - 2 * padding) / (maxCol + 1);
     afterNodes.forEach((afterNode) => {
       afterNode.x = ~~((afterNode.col + 0.5) * colSize + padding) + state.temporary.adjustX;
+      afterNode.y += state.temporary.adjustY;
     });
   }
 };
@@ -646,10 +664,12 @@ const calcGraphMinSize = ({ afterConfig, afterNodes, api, graph, maxCol, maxRow
   const maxNodeSize = { width: 0, height: 0 };
   let tempSize;
   afterNodes.forEach((afterNode) => {
-    if ((tempSize = api.getNode(afterNode.raw, "width")) > maxNodeSize.width) {
+    tempSize = api.getNode(afterNode.raw, "width");
+    if (tempSize > maxNodeSize.width) {
       maxNodeSize.width = tempSize;
     }
-    if ((tempSize = api.getNode(afterNode.raw, "height")) > maxNodeSize.height) {
+    tempSize = api.getNode(afterNode.raw, "height");
+    if (tempSize > maxNodeSize.height) {
       maxNodeSize.height = tempSize;
     }
   });
@@ -818,13 +838,41 @@ const validLinkPath = (res) => {
   }
   return { points, midpoint, middir, linear, flag };
 };
+const getFromToRect = ({ afterLink, afterNodes }) => {
+  const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map(
+    (name) => afterNodes.find((afterNode) => afterNode.raw.name === name)
+  );
+  const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0];
+  const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1];
+  return {
+    from: { x: x0, y: y0, width: w0, height: h0 },
+    to: { x: x1, y: y1, width: w1, height: h1 }
+  };
+};
+const linkPathApis = {
+  getTop: (rect) => ({ x: rect.x + rect.width / 2, y: rect.y }),
+  getRight: (rect) => ({ x: rect.x + rect.width, y: rect.y + rect.height / 2 }),
+  getBottom: (rect) => ({
+    x: rect.x + rect.width / 2,
+    y: rect.y + rect.height
+  }),
+  getLeft: (rect) => ({ x: rect.x, y: rect.y + rect.height / 2 })
+};
 const customRoute = ({ adjust, afterConfig, afterLink, afterNodes, arrow }) => {
   const { linkPath, radius } = afterConfig;
   let valid = false;
   if (Array.isArray(linkPath)) {
     for (let i = 0; i < linkPath.length; i++) {
       if (hitMatch(linkPath[i], afterLink)) {
-        const { points, midpoint, middir, linear, flag } = validLinkPath(linkPath[i].method({ afterLink, afterNodes }));
+        const fromToRect = getFromToRect({ afterLink, afterNodes });
+        const { points, midpoint, middir, linear, flag } = validLinkPath(
+          linkPath[i].method(__spreadProps(__spreadValues({
+            afterLink,
+            afterNodes
+          }, fromToRect), {
+            api: linkPathApis
+          }))
+        );
         if (flag) {
           valid = true;
           pathParser({ adjust, afterLink, arrow, linear, midpoint, middir, points, radius });
@@ -834,7 +882,15 @@ const customRoute = ({ adjust, afterConfig, afterLink, afterNodes, arrow }) => {
     }
   } else if (linkPath && typeof linkPath.method === "function") {
     if (hitMatch(linkPath, afterLink)) {
-      const { points, midpoint, middir, linear, flag } = validLinkPath(linkPath.method({ afterLink, afterNodes }));
+      const fromToRect = getFromToRect({ afterLink, afterNodes });
+      const { points, midpoint, middir, linear, flag } = validLinkPath(
+        linkPath.method(__spreadProps(__spreadValues({
+          afterLink,
+          afterNodes
+        }, fromToRect), {
+          api: linkPathApis
+        }))
+      );
       if (flag) {
         valid = true;
         pathParser({ adjust, afterLink, arrow, linear, midpoint, middir, points, radius });
@@ -1113,6 +1169,55 @@ const handleNodeResize = ({ state, vm }) => () => {
     state.nodeWidth = vm.$refs.title.offsetWidth + paddingLeft + padding;
   }
 };
+const runAdjustYTask = ({ api, state }) => () => {
+  if (state.temporary.adjustYTask) {
+    fastdom.clear(state.temporary.adjustYTask);
+    state.temporary.adjustYTask = null;
+  }
+  state.temporary.adjustYTask = fastdom.measure(() => {
+    state.temporary.adjustYTask = null;
+    api.refresh();
+  });
+};
+const setAdjustY = ({ api, state }) => (param) => {
+  let { lastRowAfterNodes, adjustY } = state.temporary;
+  if (!lastRowAfterNodes.length) {
+    lastRowAfterNodes = state.temporary.lastRowAfterNodes = state.afterData.afterNodes.filter(
+      (afterNode) => afterNode.lastRow
+    );
+  }
+  const lastRowNodeNames = lastRowAfterNodes.map((afterNode) => afterNode.raw.name);
+  if (Array.isArray(lastRowNodeNames) && lastRowNodeNames.includes(param.node) && param.value < adjustY) {
+    state.temporary.adjustY = param.value;
+    api.runAdjustYTask();
+  }
+};
+const setNodeAdjustY = ({ vm, state }) => () => {
+  const elRect = vm.$el.getBoundingClientRect();
+  const titleRect = vm.$refs.title.getBoundingClientRect();
+  if (state.layUpdown) {
+    state.temporary.graphInstance.setAdjustY({ node: state.nodeName, value: -titleRect.height / 2 });
+  } else {
+    state.temporary.graphInstance.setAdjustY({
+      node: state.nodeName,
+      value: titleRect.height > elRect.height ? (elRect.height - titleRect.height) / 2 : 0
+    });
+  }
+};
+const computedIcon = ({ state, icons }) => () => {
+  let svg, size;
+  if (state.isSmall) {
+    svg = icons[state.nodeStatus].other;
+    size = "small";
+  } else if (state.sizeMini) {
+    svg = icons[state.nodeStatus].mini;
+    size = "mini";
+  } else {
+    svg = icons[state.nodeStatus].other;
+    size = state.nodeSize;
+  }
+  return { svg, size };
+};
 export {
   addListeners,
   antialiasing,
@@ -1125,6 +1230,7 @@ export {
   clickNode,
   compute,
   computeMf,
+  computedIcon,
   drawAfterLink,
   getAllItem,
   getNode,
@@ -1138,5 +1244,8 @@ export {
   omitText,
   refresh,
   removeListeners,
-  setListeners
+  runAdjustYTask,
+  setAdjustY,
+  setListeners,
+  setNodeAdjustY
 };

package/flowchart/node.js

@@ -1,9 +1,10 @@
 import "../chunk-G2ADBYYC.js";
-import { handleNodeResize } from "./index";
+import { handleNodeResize, setNodeAdjustY, computedIcon } from "./index";
 const api = ["state"];
-const renderless = (props, { reactive, computed, inject, onBeforeUnmount }, { vm }) => {
+const renderless = (props, { reactive, computed, inject, onMounted, onBeforeUnmount }, { vm }, { icons }) => {
   const { node, config } = props;
   const state = reactive({
+    icon: computed(() => api2.computedIcon()),
     nodeName: node.name,
     nodeLayout: computed(() => node.layout || config.nodeLayout || "up-down"),
     nodeSize: computed(() => config.nodeSize || "small"),
@@ -35,12 +36,20 @@ const renderless = (props, { reactive, computed, inject, onBeforeUnmount }, { vm
     statFail: computed(() => state.nodeStatus === "fail"),
     statNotStarted: computed(() => state.nodeStatus === "not-started")
   });
-  state.temporary = { padding: 8, height: 24, graphEmitter: inject("graphEmitter") };
+  state.temporary = {
+    padding: 8,
+    height: 24,
+    graphEmitter: inject("graphEmitter"),
+    graphInstance: inject("graphInstance")
+  };
   const api2 = {
     state,
-    handleNodeResize: handleNodeResize({ state, vm })
+    handleNodeResize: handleNodeResize({ state, vm }),
+    setNodeAdjustY: setNodeAdjustY({ vm, state }),
+    computedIcon: computedIcon({ state, icons })
   };
   state.temporary.graphEmitter.on("after-graph-refresh", api2.handleNodeResize);
+  onMounted(() => api2.setNodeAdjustY());
   onBeforeUnmount(() => {
     state.temporary.graphEmitter.off("after-graph-refresh", api2.handleNodeResize);
   });

package/flowchart/vue.js

@@ -23,7 +23,9 @@ import {
   antialiasing,
   getNodeDef,
   getNode,
-  clickGroup
+  clickGroup,
+  setAdjustY,
+  runAdjustYTask
 } from "./index";
 import throttle from "../common/deps/throttle";
 const api = [
@@ -43,8 +45,14 @@ const renderless = (props, { reactive, markRaw, onMounted, onBeforeUnmount, prov
     wrapperStyle: "",
     dropdowns: {}
   });
-  state.temporary = { graphWidth: 0, adjustX: 0, emitter: emitter(), customLinks: [] };
-  provide("graphEmitter", state.temporary.emitter);
+  state.temporary = {
+    graphWidth: 0,
+    adjustX: 0,
+    emitter: emitter(),
+    customLinks: [],
+    lastRowAfterNodes: [],
+    adjustY: 0
+  };
   const api2 = {
     state,
     omitText,
@@ -72,8 +80,12 @@ const renderless = (props, { reactive, markRaw, onMounted, onBeforeUnmount, prov
     hitTest: hitTest({ api: api2, state, vm }),
     clearHoverAfterLink: throttle(10, clearHoverAfterLink({ api: api2, state, vm })),
     clickNode: clickNode({ api: api2, emit }),
-    getNode: getNode(api2)
+    getNode: getNode(api2),
+    setAdjustY: setAdjustY({ api: api2, state }),
+    runAdjustYTask: runAdjustYTask({ api: api2, state })
   });
+  provide("graphEmitter", state.temporary.emitter);
+  provide("graphInstance", { setAdjustY: api2.setAdjustY });
   if (api2.isMf()) {
     api2.computeMf();
   } else {

package/form/vue.js

@@ -60,6 +60,14 @@ const renderless = (props, { computed, inject, provide, reactive, watch, onBefor
       } else {
         return false;
       }
+    }),
+    labelWidth: computed(() => {
+      var _a;
+      return props.labelWidth || ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.labelWidth) || "80px";
+    }),
+    tooltipType: computed(() => {
+      var _a;
+      return ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.tooltipType) || "normal";
     })
   });
   Object.assign(api2, {