@opentiny/vue-renderless 3.16.0 → 3.17.0

package/split/index.js

@@ -10,13 +10,18 @@ const getComputedThresholdValue = ({ api, props, vm, state }) => (type) => {
 };
 const getleftTopMin = (state) => ({ oldvalue, newvalue }) => state.valueIsPx ? `${Math.min(parseFloat(oldvalue), parseFloat(newvalue))}px` : Math.min(oldvalue, newvalue);
 const getrightBottomMin = (state) => ({ oldvalue, newvalue }) => state.valueIsPx ? `${Math.max(parseFloat(oldvalue), parseFloat(newvalue))}px` : Math.max(oldvalue, newvalue);
-const getAnotherOffset = ({ vm, state }) => (value) => state.valueIsPx ? `${vm.$refs.outerWrapper[state.offsetSize] - parseFloat(value)}px` : 1 - value;
+const getAnotherOffset = ({ vm, state }) => (value, isPercent) => {
+  return isPercent ? 100 - value : state.valueIsPx ? `${vm.$refs.outerWrapper[state.offsetSize] - parseFloat(value)}px` : 1 - value;
+};
 const handleMove = ({ api, emit, props, vm, state }) => (event) => {
   const pageOffset = state.isHorizontal ? event.pageX : event.pageY;
   const offset = pageOffset - state.initOffset;
   const outerWidth = vm.$refs.outerWrapper[state.offsetSize];
   let value = state.valueIsPx ? `${parseFloat(state.oldOffset) + offset}px` : api.px2percent({ numerator: outerWidth * state.oldOffset + offset, denominator: outerWidth });
-  const anotherValue = api.getAnotherOffset(value);
+  const anotherValue = props.rightBottomValue ? value : api.getAnotherOffset(value);
+  if (props.rightBottomValue) {
+    value = api.getAnotherOffset(value);
+  }
   if (parseFloat(value) <= parseFloat(state.computedleftTopMin)) {
     value = api.getrightBottomMin({
       oldvalue: value,
@@ -57,7 +62,7 @@ const handleMousedown = ({ api, emit, on, props, state, vm }) => (event) => {
         state.oldOffset = val;
         emit("update:modelValue", val);
       } else {
-        state.oldOffset = props.modelValue;
+        state.oldOffset = props.rightBottomValue ? api.getAnotherOffset(props.modelValue) : props.modelValue;
       }
     }
     state.isMoving = true;
@@ -75,9 +80,9 @@ const buttonLeftTopClick = ({ emit, props, state }) => () => {
     emit("update:modelValue", state.lastmodelValue);
   } else if (state.offset !== 0) {
     state.lastClickOffset = state.offset;
-    state.offset = 0;
+    state.offset = props.rightBottomValue ? 100 : 0;
     state.lastmodelValue = props.modelValue;
-    emit("update:modelValue", 0);
+    emit("update:modelValue", props.rightBottomValue ? 1 : 0);
   }
   emit("left-top-click");
 };
@@ -87,9 +92,9 @@ const buttonRightBottomClick = ({ emit, props, state }) => () => {
     emit("update:modelValue", state.lastmodelValue);
   } else if (state.offset !== 100) {
     state.lastClickOffset = state.offset;
-    state.offset = 100;
+    state.offset = props.rightBottomValue ? 0 : 100;
     state.lastmodelValue = props.modelValue;
-    emit("update:modelValue", 1);
+    emit("update:modelValue", props.rightBottomValue ? 0 : 1);
   }
   emit("right-bottom-click");
 };
@@ -102,13 +107,15 @@ const computeOffset = ({ api, nextTick, props, vm, state }) => () => {
   });
   if (state.valueIsPx) {
     nextTick(() => {
-      state.offset = api.px2percent({
+      const offset = api.px2percent({
         numerator: props.modelValue,
         denominator: vm.$refs.outerWrapper && vm.$refs.outerWrapper[state.offsetSize]
       }) * 1e4 / 100;
+      state.offset = props.rightBottomValue ? api.getAnotherOffset(offset, true) : offset;
     });
   } else {
-    state.offset = props.modelValue * 1e4 / 100;
+    const offset = props.modelValue * 1e4 / 100;
+    state.offset = props.rightBottomValue ? api.getAnotherOffset(offset, true) : offset;
   }
 };
 export {

package/split/vue.js

@@ -31,7 +31,11 @@ const renderless = (props, hooks, { vm, nextTick, emit, constants }) => {
     prefix: constants.PREFIX,
     computedleftTopMin: computed(() => api2.getComputedThresholdValue("leftTopMin")),
     computedrightBottomMin: computed(() => api2.getComputedThresholdValue("rightBottomMin")),
-    wrapperClasses: computed(() => [`${state.prefix}-wrapper`, state.isMoving ? "no-select" : ""]),
+    wrapperClasses: computed(() => [
+      `${state.prefix}-wrapper`,
+      state.isMoving ? "no-select" : "",
+      props.border ? "" : "no-border"
+    ]),
     paneClasses: computed(() => [
       `${state.prefix}-pane ${props.scrollable ? "tiny-split-scroll" : ""}`,
       { [`${state.prefix}-pane-moving`]: state.isMoving }
@@ -67,7 +71,8 @@ const useOffset = ({ nextTick, props, vm, constants, hooks }) => {
   });
   Object.assign(api2, {
     px2percent,
-    computeOffset: computeOffset({ api: api2, nextTick, props, vm, state })
+    computeOffset: computeOffset({ api: api2, nextTick, props, vm, state }),
+    getAnotherOffset: getAnotherOffset({ vm, state })
   });
   watch(() => props.modelValue, api2.computeOffset, { immediate: true });
   onMounted(() => {

package/statistic/index.js

@@ -14,6 +14,13 @@ const getIntegerAndDecimal = ({ props }) => () => {
   let displayValue = props.value ? String(props.value).split(".") : "";
   let integer = (_a = displayValue[0]) == null ? void 0 : _a.replace(/\B(?=(\d{3})+(?!\d))/g, props.groupSeparator);
   let decimal = (_b = displayValue[1]) == null ? void 0 : _b.padEnd(props.precision, "0").slice(0, props.precision > 0 ? props.precision : 0);
+  if (!displayValue) {
+    integer = "0";
+  }
+  if (!decimal && props.precision) {
+    let display = "0";
+    decimal = display.padEnd(props.precision, "0");
+  }
   return [integer, decimal].join(decimal ? "." : "");
 };
 export {

package/tabs/index.js

@@ -1,4 +1,40 @@
 import "../chunk-G2ADBYYC.js";
+const getOrderedPanes = (parent, panes) => {
+  const slotDefault = parent.$slots.default;
+  let orders;
+  if (typeof slotDefault === "function") {
+    orders = [];
+    const tabVnodes = slotDefault();
+    const handler = ({ type, componentOptions, props }) => {
+      let componentName = type && type.componentName;
+      if (!componentName)
+        componentName = componentOptions && componentOptions.Ctor.extendOptions.componentName;
+      if (componentName === "TabItem") {
+        const paneName = props && props.name || componentOptions && componentOptions.propsData.name;
+        orders.push(paneName);
+      }
+    };
+    tabVnodes.forEach(({ type, componentOptions, props, children }) => {
+      if (type && (type.toString() === "Symbol(Fragment)" || // vue@3.3之前的开发模式
+      type.toString() === "Symbol(v-fgt)" || //   vue@3.3.1 的变更
+      type.toString() === "Symbol()")) {
+        Array.isArray(children) && children.forEach(({ type: type2, componentOptions: componentOptions2, props: props2 }) => handler({ type: type2, componentOptions: componentOptions2, props: props2 }));
+      } else {
+        handler({ type, componentOptions, props });
+      }
+    });
+  }
+  if (orders.length > 0) {
+    let tmpPanes = [];
+    orders.forEach((paneName) => {
+      let pane = panes.find((pane2) => pane2.name === paneName);
+      if (pane)
+        tmpPanes.push(pane);
+    });
+    panes = tmpPanes;
+  }
+  return panes;
+};
 const calcPaneInstances = ({
   constants,
   parent,
@@ -28,19 +64,7 @@ const calcPaneInstances = ({
         index > -1 ? currentPanes[index] = vm : currentPanes.push(vm);
       }
     });
-    const currentPaneStates = currentPanes.map((pane) => pane.state);
-    const paneStates = state.panes.map((pane) => pane.state);
-    let newPanes = [];
-    for (let i = 0; i < paneStates.length; i++) {
-      const paneState = paneStates[i];
-      const index = currentPaneStates.indexOf(paneState);
-      if (index > -1) {
-        newPanes.push(state.panes[i]);
-        currentPanes.splice(index, 1);
-        currentPaneStates.splice(index, 1);
-      }
-    }
-    newPanes = newPanes.concat(currentPanes);
+    const newPanes = getOrderedPanes(parent, currentPanes);
     const panesChanged = !(newPanes.length === state.panes.length && newPanes.every((pane, index) => pane.state === state.panes[index].state));
     if (isForceUpdate || panesChanged) {
       state.panes = newPanes;

package/tabs-mf/index.js

@@ -2,21 +2,42 @@ import "../chunk-G2ADBYYC.js";
 import { random } from "../common/string";
 import debounce from "../common/deps/debounce";
 import { fastdom } from "../common/deps/fastdom";
-const setActive = ({ state, props, api }) => (name) => {
+const setActive = ({ state, api }) => (name) => {
   const current = state.currentItem ? state.currentItem.name : "";
-  if (current && current !== name && props.beforeLeave) {
-    const before = props.beforeLeave(name, current);
-    if (before && before.then) {
-      before.then(() => {
+  if (current && current !== name) {
+    api.canLeave(name, current).then((result) => {
+      if (result) {
         api.changeCurrentName(name);
-      }).catch(() => null);
-    } else if (before !== false) {
-      api.changeCurrentName(name);
-    }
+      }
+    });
   } else {
     api.changeCurrentName(name);
   }
 };
+const canLeave = (props) => (newTab, oldTab) => {
+  if (typeof props.beforeLeave === "function") {
+    const before = props.beforeLeave(newTab, oldTab);
+    if (before && before.then) {
+      return {
+        then: (cb) => {
+          before.then(cb).catch(() => cb(false));
+        }
+      };
+    } else {
+      return {
+        then: (cb) => {
+          cb(before);
+        }
+      };
+    }
+  } else {
+    return {
+      then: (cb) => {
+        cb(true);
+      }
+    };
+  }
+};
 const changeCurrentName = ({ emit, state }) => (name) => {
   state.items.forEach((item) => item.selected = item.name === name);
   emit("update:activeName", name);
@@ -52,10 +73,12 @@ const clickMore = (api) => (name) => {
   api.setActive(name);
   api.scrollTo(name);
 };
-const removeItem = ({ state, emit }) => (name, silent = false) => {
+const removeItem = ({ props, state, emit }) => (name, silent = false) => {
   const itemIndex = state.items.findIndex((item) => item.name === name);
   const navIndex = state.navs.findIndex((item) => item.name === name);
-  if (~itemIndex) {
+  if (!~itemIndex)
+    return;
+  const emitEvent = () => {
     state.items.splice(itemIndex, 1);
     state.items = [...state.items];
     state.navs.splice(navIndex, 1);
@@ -64,6 +87,72 @@ const removeItem = ({ state, emit }) => (name, silent = false) => {
       emit("edit", name, "remove");
       emit("close", name);
     }
+  };
+  if (typeof props.beforeClose === "function") {
+    const beforeCloseResult = props.beforeClose(name);
+    if (beforeCloseResult && beforeCloseResult.then) {
+      beforeCloseResult.then((res) => res && emitEvent());
+    } else {
+      beforeCloseResult && emitEvent();
+    }
+  } else {
+    emitEvent();
+  }
+};
+const beforeCarouselSwipe = ({ api, state, vm }) => (newIndex, oldIndex) => {
+  const [newTab, oldTab] = [newIndex, oldIndex].map((index) => state.items[index] ? state.items[index].name : "");
+  return api.canLeave(newTab, oldTab).then((result) => {
+    if (result) {
+      vm.setActive(newTab);
+    }
+    return result;
+  });
+};
+const clearOtherTabSwipeScroll = ({ state, vm }) => (name) => {
+  if (!state.swipeable)
+    return;
+  state.items.forEach((tab, i) => {
+    const tabName = tab ? tab.name : "";
+    if (tabName !== name) {
+      const tabSwipeVm = vm.$refs[`tabSwipe${i}`];
+      tabSwipeVm && tabSwipeVm.clearScroll();
+    }
+  });
+};
+const computedSwipeable = ({ props, state }) => () => state.items.every((item) => !item.lazy) && props.swipeable;
+const observeTabSwipeSize = ({ state, vm }) => () => {
+  if (!state.swipeable)
+    return;
+  state._resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      let sizeEntry, blockSize;
+      if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
+        sizeEntry = entry.borderBoxSize[0];
+        blockSize = sizeEntry.blockSize;
+      } else {
+        sizeEntry = entry.contentRect;
+        blockSize = sizeEntry.height;
+      }
+      if (blockSize > state.maxTabSwipeHeight) {
+        state.maxTabSwipeHeight = blockSize;
+      }
+    }
+  });
+  state.items.forEach((_, i) => {
+    const tabSwipeVm = vm.$refs[`tabSwipe${i}`];
+    tabSwipeVm && state._resizeObserver.observe(tabSwipeVm.$el);
+  });
+};
+const unobserveTabSwipeSize = ({ state, vm }) => () => {
+  if (!state.swipeable)
+    return;
+  if (state._resizeObserver) {
+    state.items.forEach((_, i) => {
+      const tabSwipeVm = vm.$refs[`tabSwipe${i}`];
+      tabSwipeVm && state._resizeObserver.unobserve(tabSwipeVm.$el);
+    });
+    state._resizeObserver.disconnect();
+    state._resizeObserver = null;
   }
 };
 const wheelListener = ({ vm, api, tabs, state }) => debounce(10, (e) => {
@@ -97,8 +186,16 @@ const emitAdd = (tabs) => () => {
   tabs.$emit("edit", null, "add");
   tabs.$emit("add");
 };
-const handleNavItemClick = ({ tabs, props }) => () => {
-  tabs.setActive(props.navItem.name);
+const handleNavItemClick = ({ tabs, props, vm }) => () => {
+  const index = tabs.state.navs.indexOf(vm);
+  const newTab = props.navItem.name;
+  const oldTab = tabs.state.currentItem ? tabs.state.currentItem.name : "";
+  tabs.setActive(newTab);
+  props.swipeable && tabs.canLeave(newTab, oldTab).then((result) => {
+    if (result) {
+      tabs.$refs.swipe && tabs.$refs.swipe.setActiveItem(index);
+    }
+  });
   tabs.$emit("click", props.navItem);
 };
 const getBoundRectNV = ({ vm, props }) => () => ({
@@ -112,8 +209,12 @@ const handleNavItemClose = ({ tabs, props }) => (e) => {
 export {
   addItem,
   addNav,
+  beforeCarouselSwipe,
+  canLeave,
   changeCurrentName,
+  clearOtherTabSwipeScroll,
   clickMore,
+  computedSwipeable,
   emitAdd,
   getBoundRect,
   getBoundRectNV,
@@ -121,8 +222,10 @@ export {
   handleNavItemClick,
   handleNavItemClose,
   key,
+  observeTabSwipeSize,
   removeItem,
   scrollTo,
   setActive,
+  unobserveTabSwipeSize,
   wheelListener
 };

package/tabs-mf/vue-bar.js

@@ -33,6 +33,12 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject
       state.moreOptions = state.moreList.map((name) => tabs.state.items.find((item) => item.name === name));
     }
   );
+  watch(
+    () => tabs.state.navs,
+    () => {
+      api2.wheelListener();
+    }
+  );
   onMounted(() => {
     addWheelListener(vm.$refs.scroll, api2.wheelListener);
     addResizeListener(vm.$el, api2.wheelListener);

package/tabs-mf/vue-nav-item.js

@@ -11,7 +11,7 @@ const renderless = (props, { inject, markRaw, reactive, computed }, { vm }) => {
   });
   const api2 = {
     state,
-    handleNavItemClick: handleNavItemClick({ tabs, props }),
+    handleNavItemClick: handleNavItemClick({ tabs, props, vm }),
     getBoundRect: getBoundRectNV({ vm, props }),
     handleNavItemClose: handleNavItemClose({ tabs, props })
   };

package/tabs-mf/vue.js

@@ -1,25 +1,58 @@
 import "../chunk-G2ADBYYC.js";
 import { random } from "../common/string";
-import { setActive, addItem, addNav, scrollTo, clickMore, removeItem, changeCurrentName } from "./index";
-const api = ["state", "setActive", "addItem", "addNav", "scrollTo", "clickMore", "removeItem"];
-const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watch, computed }, { vm, emit }) => {
+import {
+  setActive,
+  addItem,
+  addNav,
+  scrollTo,
+  clickMore,
+  removeItem,
+  changeCurrentName,
+  beforeCarouselSwipe,
+  canLeave,
+  clearOtherTabSwipeScroll,
+  computedSwipeable,
+  observeTabSwipeSize,
+  unobserveTabSwipeSize
+} from "./index";
+const api = [
+  "state",
+  "setActive",
+  "addItem",
+  "addNav",
+  "scrollTo",
+  "clickMore",
+  "removeItem",
+  "beforeCarouselSwipe",
+  "canLeave",
+  "clearOtherTabSwipeScroll"
+];
+const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watch, computed, nextTick }, { vm, emit }) => {
   const state = reactive({
     items: [],
     navs: [],
     currentItem: computed(() => state.items.find((item) => item.selected)),
     key: computed(() => state.currentItem ? state.currentItem.name : random()),
-    separator: props.separator
+    separator: props.separator,
+    swipeable: computed(() => api2.computedSwipeable()),
+    maxTabSwipeHeight: 0
   });
   const api2 = {};
   Object.assign(api2, {
     state,
-    setActive: setActive({ api: api2, state, props }),
+    setActive: setActive({ state, api: api2 }),
     addItem: addItem(state),
     addNav: addNav(state),
     scrollTo: scrollTo({ vm, state }),
-    removeItem: removeItem({ state, emit }),
+    removeItem: removeItem({ props, state, emit }),
     changeCurrentName: changeCurrentName({ state, emit }),
-    clickMore: clickMore(api2)
+    clickMore: clickMore(api2),
+    beforeCarouselSwipe: beforeCarouselSwipe({ api: api2, state, vm }),
+    canLeave: canLeave(props),
+    clearOtherTabSwipeScroll: clearOtherTabSwipeScroll({ state, vm }),
+    computedSwipeable: computedSwipeable({ props, state }),
+    observeTabSwipeSize: observeTabSwipeSize({ state, vm }),
+    unobserveTabSwipeSize: unobserveTabSwipeSize({ state, vm })
   });
   provide("tabs", vm);
   watch(
@@ -31,10 +64,12 @@ const renderless = (props, { onMounted, onBeforeUnmount, provide, reactive, watc
     (name) => name && api2.setActive(name)
   );
   onMounted(() => {
+    nextTick(() => api2.observeTabSwipeSize());
     props.activeName && api2.scrollTo(props.activeName);
     props.modelValue && api2.scrollTo(props.modelValue);
   });
   onBeforeUnmount(() => {
+    api2.unobserveTabSwipeSize();
     state.navs.forEach((n, i) => state.navs[i] = null);
     state.navs.length = 0;
   });

package/tag-group/vue.js

@@ -3,7 +3,7 @@ import { addResizeListener, removeResizeListener } from "../common/deps/resize-e
 import debounce from "../common/deps/debounce";
 import { getHiddenTags, handelItemClick } from "./index";
 const api = ["state", "handelItemClick"];
-const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm, emit }) => {
+const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch }, { vm, emit }) => {
   const delay = 100;
   const state = reactive({
     showMore: false,
@@ -19,6 +19,12 @@ const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm, emit
     api2.debouncedGetHiddenTags = debounce(delay, api2.getHiddenTags);
     addResizeListener(vm.$refs.tagGroup, debounce(delay, api2.debouncedGetHiddenTags));
   });
+  watch(
+    () => props.data.length,
+    () => {
+      api2.getHiddenTags();
+    }
+  );
   onBeforeUnmount(() => {
     removeResizeListener(vm.$refs.tagGroup, api2.debouncedGetHiddenTags);
   });

package/time/index.js

@@ -15,8 +15,8 @@ const watchValue = ({ api, nextTick, state }) => (value) => {
 };
 const watchVisible = ({ nextTick, vm, state, api }) => (value) => {
   if (value) {
-    state.oldValue = state.value;
     nextTick(() => {
+      state.oldValue = state.value;
       vm.$refs.spinner.emitSelectRange("hours");
       api.adjustSpinners();
     });

package/time-line/index.js

@@ -39,10 +39,10 @@ const getStatusCls = ({ constants, state }) => (index, node) => {
   return cls;
 };
 const computedData = ({ props, state }) => () => {
-  if (props.data) {
+  if (props.data && props.data.length > 0) {
     return state.isReverse ? props.data.map((item, i) => __spreadProps(__spreadValues({}, props.data[props.data.length - 1 - i]), { index: i })) : props.data.map((item, i) => __spreadProps(__spreadValues({}, item), { index: i }));
   }
-  return state.timelineItems;
+  return state.itemsArray;
 };
 const computedCurrent = ({ props, state }) => () => state.isReverse ? state.nodes.length - props.active - 1 : props.active;
 const computedIsReverse = (props) => () => props.reverse && props.vertical;

package/time-line/vue.js

@@ -14,11 +14,12 @@ import {
   toggleFold
 } from "./index";
 const api = ["state", "handleClick", "getStatusCls", "getStatus", "getDate", "changeStatus", "toggleFold"];
-const renderless = (props, { computed, reactive, provide, watch }, { t, emit, constants, designConfig }) => {
+const renderless = (props, { computed, reactive, provide, watch }, { t, emit, constants }) => {
   const api2 = {};
   const state = reactive({
+    // 当标签式使用时，记录有多少个 item 的标签
+    itemsArray: [],
     nodes: computed(() => api2.computedData()),
-    timelineItems: [],
     current: computed(() => api2.computedCurrent()),
     isReverse: computed(() => api2.computedIsReverse()),
     stackNodes: computed(() => state.showAll ? state.nodes : api2.computedStackNodes()),
@@ -42,17 +43,7 @@ const renderless = (props, { computed, reactive, provide, watch }, { t, emit, co
     computedWrapperClass: computedWrapperClass({ props }),
     toggleFold: toggleFold({ props })
   });
-  provide("nodesInject", { timelineItems: state.timelineItems, nodes: state.nodes, props });
-  watch(
-    () => state.timelineItems,
-    (newVal) => {
-      newVal.forEach((item, i) => item.index = i);
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  );
+  provide("nodesInject", { state, props });
   return api2;
 };
 export {

package/timeline-item/index.js

@@ -11,14 +11,14 @@ const getStatus = ({ state, t }) => (value) => {
 const computedWidth = () => (width) => {
   return /^\d+$/.test(String(width)) ? `${width}px` : width || "";
 };
-const handleClick = ({ emit, state }) => (node) => {
-  const { index } = node || {};
+const handleClick = ({ emit, state, props }) => (node) => {
+  const index = props.nodeIndex;
   if (!node.disabled) {
     emit("click", state.isReverse ? state.nodesLength - index - 1 : index, node);
   }
 };
-const getStatusCls = ({ constants, state }) => (node) => {
-  const { index } = node;
+const getStatusCls = ({ constants, state, props }) => (node) => {
+  const index = props.nodeIndex;
   const { PROCESS_DONE_CLS, PROCESS_CUR_CLS, PROCESS_WAIT_CLS, PROCESS_DISABLED_CLS, PROCESS_ERROR_CLS } = constants;
   const cls = {};
   const reverse = state.isReverse;
@@ -64,7 +64,7 @@ const computedIconClass = ({ props, api }) => () => {
   return iconClass;
 };
 const computedItemStyle = ({ props, state, api }) => () => {
-  const { index } = props.node;
+  const index = props.nodeIndex;
   const { computedSpace, nodesLength } = state;
   const { textPosition, vertical } = api.rootProps;
   if (vertical) {

package/timeline-item/vue.js

@@ -12,12 +12,19 @@ import {
   computedIconClass
 } from "./index";
 const api = ["state", "handleClick", "getStatusCls", "getStatus", "getDate", "rootProps"];
-const renderless = (props, { computed, reactive, inject }, { t, emit, constants }) => {
+const renderless = (props, { computed, reactive, inject, onUnmounted }, { t, emit, constants }) => {
   const api2 = {};
-  const { timelineItems, nodes, props: rootProps } = inject("nodesInject");
-  timelineItems.push(props.node);
+  const { state: rootState, props: rootProps } = inject("nodesInject");
+  if (!rootState.itemsArray.includes(props.node)) {
+    rootState.itemsArray.push(props.node);
+  }
+  onUnmounted(() => {
+    if (rootState.itemsArray.includes(props.node)) {
+      rootState.itemsArray.splice(rootState.itemsArray.indexOf(props.node), 1);
+    }
+  });
   const state = reactive({
-    nodesLength: computed(() => nodes.length),
+    nodesLength: computed(() => rootState.nodes.length),
     current: computed(() => api2.computedCurrent()),
     isReverse: computed(() => api2.computedIsReverse()),
     computedSpace: computed(() => api2.computedWidth(props.space || api2.rootProps.space)),
@@ -36,8 +43,8 @@ const renderless = (props, { computed, reactive, inject }, { t, emit, constants
     computedItemStyle: computedItemStyle({ props, state, api: api2 }),
     computedWidth: computedWidth(),
     getStatus: getStatus({ state, t }),
-    handleClick: handleClick({ emit, state }),
-    getStatusCls: getStatusCls({ constants, state }),
+    handleClick: handleClick({ emit, state, props }),
+    getStatusCls: getStatusCls({ constants, state, props }),
     computedIconClass: computedIconClass({ props, api: api2 })
   });
   return api2;

package/tree/index.js

@@ -6,6 +6,7 @@ import { addClass, removeClass } from "../common/deps/dom";
 import { on, off } from "../common/deps/dom";
 import { getDataset } from "../common/dataset";
 import { copyArray } from "../common/object";
+import { log } from "../common";
 const setChildren = (props) => (data) => props.data = data;
 const getChildren = () => (props) => props.data;
 const computedTreeItemArray = () => (props, state) => Array.prototype.slice.call(state.treeItems);
@@ -540,8 +541,19 @@ const saveNode = ({ state, emit, api }) => () => {
   }
   state.action.node = null;
 };
-const addNode = ({ api }) => (node) => {
-  const newNode = { label: "" };
+const addNode = ({ api, props, state }) => (node) => {
+  let nodeId = 0;
+  if (typeof props.editConfig.initNodeIdMethod === "function") {
+    nodeId = props.editConfig.initNodeIdMethod(node);
+  } else {
+    nodeId = state.newNodeId;
+    state.newNodeId++;
+  }
+  if (state.allNodeKeys.includes(nodeId) && !props.editConfig.noWarning) {
+    log.logger.warn(`the ${props.nodeKey || "id"} ${nodeId} is already exists. Please check.`);
+  }
+  state.allNodeKeys.push(nodeId);
+  const newNode = { label: "", [props.nodeKey || "id"]: nodeId };
   const isLeafField = node.store && node.store.props.isLeaf;
   if (isLeafField) {
     newNode[isLeafField] = true;
@@ -609,9 +621,24 @@ const deleteConfirm = ({ state, props, api }) => (event2, node) => {
 const openEdit = ({ props, state, api, emit }) => () => {
   state.action.show = true;
   state.action.data = copyArray(props.data);
+  if (!state.allNodeKeys.length) {
+    getAllNodeKeys(state.action.data, state.allNodeKeys, props.nodeKey || "id", props.props.children || "children");
+  }
   api.watchData(state.action.data);
   emit("open-edit");
 };
+const getAllNodeKeys = (node, nodeKeys, nodeKey, children) => {
+  if (Array.isArray(node)) {
+    node.forEach((item) => {
+      if (item[nodeKey] || item[nodeKey] !== 0) {
+        nodeKeys.push(item[nodeKey]);
+      }
+      if (item[children]) {
+        getAllNodeKeys(item[children], nodeKeys, nodeKey, children);
+      }
+    });
+  }
+};
 const closeEdit = ({ props, state, api, emit }) => () => {
   state.action.show = false;
   state.action.popoverVisible = false;