vue-devui 1.0.0-rc.10 → 1.0.0-rc.13

package/tree/index.es.js

@@ -29,9 +29,10 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { createVNode, defineComponent, toRefs, inject, watch, provide, reactive, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, renderSlot, useSlots } from "vue";
+import { createVNode, defineComponent, toRefs, inject, getCurrentInstance, watch, provide, reactive, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, renderSlot, useSlots, resolveComponent, isVNode, onUpdated, shallowRef, toRaw, watchEffect } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const USE_TREE_TOKEN = "use-tree-token";
+const TREE_INSTANCE = "tree-instance";
 const NODE_HEIGHT = 30;
 const NODE_INDENT = 24;
 const IconClose = () => createVNode("svg", {
@@ -141,6 +142,37 @@ var DTreeNodeToggle = defineComponent({
     };
   }
 });
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object4, path) {
+  const keys = path.split(".");
+  let result = object4;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    const messages2 = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
+var DTreeNodeLoading = defineComponent({
+  name: "DTreeNodeLoading",
+  setup() {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTree", app);
+    const ns2 = useNamespace("loading-children ");
+    return () => {
+      return createVNode("span", {
+        "class": ns2.b()
+      }, [`${t("loading") || "Loading"}...`]);
+    };
+  }
+});
 const commonProps = {
   name: {
     type: String,
@@ -1384,7 +1416,7 @@ var lodash = { exports: {} };
       function baseAt(object4, paths) {
         var index2 = -1, length = paths.length, result2 = Array2(length), skip = object4 == null;
         while (++index2 < length) {
-          result2[index2] = skip ? undefined$1 : get(object4, paths[index2]);
+          result2[index2] = skip ? undefined$1 : get2(object4, paths[index2]);
         }
         return result2;
       }
@@ -1483,7 +1515,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() {
+        return setTimeout2(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -1829,7 +1861,7 @@ var lodash = { exports: {} };
           return matchesStrictComparable(toKey(path), srcValue);
         }
         return function(object4) {
-          var objValue = get(object4, path);
+          var objValue = get2(object4, path);
           return objValue === undefined$1 && objValue === srcValue ? hasIn(object4, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
         };
       }
@@ -2263,7 +2295,7 @@ var lodash = { exports: {} };
         end = end === undefined$1 ? length : end;
         return !start && end >= length ? array4 : baseSlice(array4, start, end);
       }
-      var clearTimeout = ctxClearTimeout || function(id) {
+      var clearTimeout2 = ctxClearTimeout || function(id) {
         return root.clearTimeout(id);
       };
       function cloneBuffer(buffer, isDeep) {
@@ -3292,7 +3324,7 @@ var lodash = { exports: {} };
         return object4[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout = ctxSetTimeout || function(func, wait) {
+      var setTimeout2 = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -4084,7 +4116,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout(timerExpired, wait);
+          timerId = setTimeout2(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -4100,7 +4132,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout(timerExpired, remainingWait(time));
+          timerId = setTimeout2(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -4112,7 +4144,7 @@ var lodash = { exports: {} };
         }
         function cancel() {
           if (timerId !== undefined$1) {
-            clearTimeout(timerId);
+            clearTimeout2(timerId);
           }
           lastInvokeTime = 0;
           lastArgs = lastCallTime = lastThis = timerId = undefined$1;
@@ -4130,13 +4162,13 @@ var lodash = { exports: {} };
               return leadingEdge(lastCallTime);
             }
             if (maxing) {
-              clearTimeout(timerId);
-              timerId = setTimeout(timerExpired, wait);
+              clearTimeout2(timerId);
+              timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
           }
           return result2;
         }
@@ -4562,7 +4594,7 @@ var lodash = { exports: {} };
       function functionsIn(object4) {
         return object4 == null ? [] : baseFunctions(object4, keysIn(object4));
       }
-      function get(object4, path, defaultValue) {
+      function get2(object4, path, defaultValue) {
         var result2 = object4 == null ? undefined$1 : baseGet(object4, path);
         return result2 === undefined$1 ? defaultValue : result2;
       }
@@ -5417,7 +5449,7 @@ var lodash = { exports: {} };
       lodash2.forInRight = forInRight;
       lodash2.forOwn = forOwn;
       lodash2.forOwnRight = forOwnRight;
-      lodash2.get = get;
+      lodash2.get = get2;
       lodash2.gt = gt;
       lodash2.gte = gte;
       lodash2.has = has;
@@ -7676,6 +7708,16 @@ Schema.register = function register(type4, validator) {
 Schema.warning = warning;
 Schema.messages = messages;
 Schema.validators = validators;
+function getFieldValue(obj, path) {
+  return {
+    get value() {
+      return lodash.exports.get(obj, path);
+    },
+    set value(val) {
+      lodash.exports.set(obj, path, val);
+    }
+  };
+}
 function useFormItem(messageType, _rules, validateState) {
   const formContext = inject(FORM_TOKEN);
   const ns2 = useNamespace("form");
@@ -7714,17 +7756,12 @@ function useFormItemValidate(props, _rules) {
   const computedField = computed(() => {
     return typeof props.field === "string" ? props.field : "";
   });
-  const fieldValue = computed({
-    get: () => {
-      const formData = formContext.data;
-      if (!formData || !props.field) {
-        return;
-      }
-      return formData[props.field];
-    },
-    set: (val) => {
-      formContext.data[props.field] = val;
+  const fieldValue = computed(() => {
+    const formData = formContext.data;
+    if (!formData || !props.field) {
+      return;
     }
+    return getFieldValue(formData, props.field).value;
   });
   const getRuleByTrigger = (triggerVal) => {
     return _rules.value.filter((rule) => {
@@ -7737,7 +7774,7 @@ function useFormItemValidate(props, _rules) {
         return rule.trigger === triggerVal;
       }
     }).map((_a) => {
-      var _b = _a, { trigger } = _b, rule = __objRest(_b, ["trigger"]);
+      var rule = __objRest(_a, []);
       return rule;
     });
   };
@@ -7793,13 +7830,16 @@ function useFormItemValidate(props, _rules) {
     if (!formContext.data || !props.field) {
       return;
     }
-    isResetting = true;
-    fieldValue.value = initFieldValue;
+    const currentValue = getFieldValue(formContext.data, props.field);
+    if (!lodash.exports.isEqual(currentValue.value, initFieldValue)) {
+      isResetting = true;
+    }
+    currentValue.value = initFieldValue;
     await nextTick();
     clearValidate();
   };
   onMounted(() => {
-    initFieldValue = lodash.exports.cloneDeep(formContext.data[props.field]);
+    initFieldValue = lodash.exports.clone(fieldValue.value);
   });
   return { validateState, validateMessage, validate, resetField, clearValidate };
 }
@@ -8258,7 +8298,6 @@ defineComponent({
 });
 const ns = useNamespace("tree");
 function useTreeNode(data) {
-  const { getChildren } = inject(USE_TREE_TOKEN);
   const nodeClass = computed(() => {
     var _a;
     return [ns.e("node"), ((_a = data.value) == null ? void 0 : _a.expanded) && ns.em("node", "open")];
@@ -8268,16 +8307,19 @@ function useTreeNode(data) {
     return { paddingLeft: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1)}px` };
   });
   const nodeVLineClass = computed(() => {
-    var _a, _b;
-    return [!((_a = data.value) == null ? void 0 : _a.isLeaf) && ((_b = data.value) == null ? void 0 : _b.expanded) && ns.e("node-vline")];
-  });
-  const nodeVLineStyle = computed(() => {
     var _a;
-    return {
-      height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`,
-      left: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1) + 9}px`,
-      top: `${NODE_HEIGHT}px`
-    };
+    return [((_a = data.value) == null ? void 0 : _a.level) !== 1 && ns.e("node-vline")];
+  });
+  const nodeVLineStyles = computed(() => {
+    if (!data.value || data.value.level === 1) {
+      return [];
+    }
+    const { currentIndex = 0, parentChildNodeCount = 0, level, expanded, isLeaf } = data.value;
+    return Array.from({ length: data.value.level - 1 }).map((_, index2) => ({
+      height: `${currentIndex + 1 === parentChildNodeCount && index2 === 0 ? isLeaf || !expanded ? NODE_HEIGHT / 2 : NODE_HEIGHT : NODE_HEIGHT}px`,
+      left: `${NODE_INDENT * (level - index2 - 2) + 9}px`,
+      top: `0px`
+    }));
   });
   const nodeHLineClass = computed(() => {
     var _a;
@@ -8291,14 +8333,16 @@ function useTreeNode(data) {
     var _a;
     return [ns.e("node-title"), ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"];
   });
+  const nodeOperationAreaClass = computed(() => ns.e("node-operation-area"));
   return {
     nodeClass,
     nodeStyle,
     nodeContentClass,
     nodeTitleClass,
     nodeVLineClass,
-    nodeVLineStyle,
-    nodeHLineClass
+    nodeVLineStyles,
+    nodeHLineClass,
+    nodeOperationAreaClass
   };
 }
 var DTreeNodeContent = defineComponent({
@@ -8324,6 +8368,9 @@ var DTreeNodeContent = defineComponent({
     };
   }
 });
+const formatCheckStatus = (check) => {
+  return typeof check === "boolean" ? check ? "both" : "none" : check;
+};
 var DTreeNode = defineComponent({
   name: "DTreeNode",
   props: {
@@ -8332,65 +8379,95 @@ var DTreeNode = defineComponent({
       default: () => ({})
     },
     check: {
-      type: Boolean,
+      type: [Boolean, String],
+      default: false
+    },
+    operate: {
+      type: [Boolean, String, Array],
       default: false
     }
   },
   setup(props, {
     slots
   }) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTree", app);
     const {
       data,
-      check
+      check,
+      operate
     } = toRefs(props);
     const {
       toggleSelectNode,
       toggleCheckNode,
       toggleNode,
-      getChildren
+      getChildren,
+      insertBefore,
+      removeNode,
+      getNode
     } = inject(USE_TREE_TOKEN);
+    const treeInstance = inject(TREE_INSTANCE);
     const ns2 = useNamespace("tree");
     const {
       nodeClass,
       nodeStyle,
       nodeContentClass,
       nodeVLineClass,
-      nodeVLineStyle,
-      nodeHLineClass
+      nodeVLineStyles,
+      nodeHLineClass,
+      nodeOperationAreaClass
     } = useTreeNode(data);
     const halfChecked = computed(() => {
-      const children = getChildren == null ? void 0 : getChildren(data.value);
-      const checkedChildren = children == null ? void 0 : children.filter((item) => item.checked);
-      if (["upward", "both"].includes(check.value)) {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.checked)) {
+        return false;
+      }
+      const checkFormat = formatCheckStatus(check.value);
+      if (["upward", "both"].includes(checkFormat)) {
+        const children = (getChildren == null ? void 0 : getChildren(data.value)) || [];
+        const checkedChildren = children == null ? void 0 : children.filter((item) => item.checked);
         return checkedChildren.length > 0 && checkedChildren.length < children.length;
       } else {
         return false;
       }
     });
-    return () => {
+    const checkboxProps2 = computed(() => {
       var _a, _b, _c;
-      const checkboxProps2 = {
+      return {
         key: (_a = data.value) == null ? void 0 : _a.id,
         disabled: (_b = data.value) == null ? void 0 : _b.disableCheck,
-        halfchecked: halfChecked.value,
+        halfChecked: halfChecked.value,
         modelValue: (_c = data.value) == null ? void 0 : _c.checked,
         "onUpdate:modelValue": () => {
-          toggleCheckNode(data.value);
+          toggleCheckNode == null ? void 0 : toggleCheckNode(data.value);
         },
         onClick: (event) => {
           event.stopPropagation();
         }
       };
+    });
+    const isShowOperationArea = ref(false);
+    const showOperationArea = () => {
+      isShowOperationArea.value = true;
+    };
+    const hideOperationArea = () => {
+      isShowOperationArea.value = false;
+    };
+    return () => {
+      var _a;
       return createVNode("div", {
         "class": nodeClass.value,
-        "style": nodeStyle.value
-      }, [createVNode("span", {
+        "style": nodeStyle.value,
+        "onMouseenter": showOperationArea,
+        "onMouseleave": hideOperationArea
+      }, [nodeVLineStyles.value.map((item) => createVNode("span", {
         "class": nodeVLineClass.value,
-        "style": nodeVLineStyle.value
-      }, null), createVNode("div", {
+        "style": item
+      }, null)), createVNode("div", {
         "class": nodeContentClass.value,
         "onClick": () => {
-          toggleSelectNode(data.value);
+          toggleSelectNode == null ? void 0 : toggleSelectNode(data.value);
+          treeInstance.emit("node-click", data.value);
         }
       }, [createVNode("span", {
         "class": nodeHLineClass.value
@@ -8404,38 +8481,1026 @@ var DTreeNode = defineComponent({
         "style": {
           height: `${NODE_HEIGHT}px`
         }
-      }, [check.value && createVNode(Checkbox, checkboxProps2, null), slots.default ? renderSlot(useSlots(), "default", {
+      }, [check.value && createVNode(Checkbox, checkboxProps2.value, null), slots.default ? renderSlot(useSlots(), "default", {
         nodeData: data
       }) : createVNode(DTreeNodeContent, {
-        "data": data
+        "data": data.value
+      }, null), ((_a = getNode == null ? void 0 : getNode(data.value)) == null ? void 0 : _a.loading) ? slots.loading ? renderSlot(useSlots(), "loading") : createVNode(DTreeNodeLoading, null, null) : ""]), operate.value && isShowOperationArea.value && createVNode("div", {
+        "class": nodeOperationAreaClass.value
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "add",
+        "onClick": () => {
+          insertBefore(data.value, {
+            label: t("newNode") || "New node"
+          });
+        }
+      }, null), createVNode(resolveComponent("d-icon"), {
+        "name": "delete",
+        "onClick": () => {
+          removeNode(data.value);
+        }
       }, null)])])]);
     };
   }
 });
+const virtualListProps = {
+  data: {
+    type: Array,
+    default: () => []
+  },
+  component: {
+    type: String,
+    default: "div"
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  itemHeight: {
+    type: Number,
+    default: 0
+  },
+  virtual: {
+    type: Boolean,
+    default: true
+  },
+  fullHeight: {
+    type: Boolean
+  },
+  itemKey: {
+    type: [String, Number, Function]
+  }
+};
+const resizeObserverContainerProps = {
+  height: {
+    type: Number
+  },
+  offset: {
+    type: Number || void 0
+  },
+  disabled: {
+    type: Function
+  },
+  onInnerResize: {
+    type: Function
+  }
+};
+const scrollBarProps = {
+  scrollTop: {
+    type: Number
+  },
+  scrollHeight: {
+    type: Number
+  },
+  height: {
+    type: Number
+  },
+  count: {
+    type: Number
+  },
+  onScroll: {
+    type: Function
+  },
+  onStartMove: {
+    type: Function
+  },
+  onStopMove: {
+    type: Function
+  }
+};
+const resizeObserverProps = {
+  disabled: {
+    type: Boolean
+  },
+  onResize: {
+    type: Function
+  }
+};
+function useVirtual(props) {
+  const isVirtual = computed(() => {
+    const {
+      height,
+      virtual
+    } = props;
+    return !!(virtual !== false && height);
+  });
+  const inVirtual = computed(() => {
+    const {
+      height,
+      data
+    } = props;
+    return isVirtual.value && data && 20 * data.length > height;
+  });
+  return {
+    isVirtual,
+    inVirtual
+  };
+}
+function useHeights(mergedData, getKey) {
+  const instance = /* @__PURE__ */ new Map();
+  let heights = /* @__PURE__ */ new Map();
+  const updatedMark = ref(Symbol("update"));
+  watch(mergedData, () => {
+    heights = /* @__PURE__ */ new Map();
+    updatedMark.value = Symbol("update");
+  });
+  let heightUpdateId = 0;
+  function collectHeight() {
+    heightUpdateId += 1;
+    const currentId = heightUpdateId;
+    Promise.resolve().then(() => {
+      if (currentId !== heightUpdateId) {
+        return;
+      }
+      instance.forEach((element, key) => {
+        if (element && element.offsetParent) {
+          const {
+            offsetHeight
+          } = element;
+          if (heights.get(key) !== offsetHeight) {
+            updatedMark.value = Symbol("update");
+            heights.set(key, element.offsetHeight);
+          }
+        }
+      });
+    });
+  }
+  function setInstance(item, ins) {
+    const key = getKey(item);
+    if (ins) {
+      instance.set(key, ins.$el || ins);
+      collectHeight();
+    } else {
+      instance.delete(key);
+    }
+  }
+  return [setInstance, collectHeight, heights, updatedMark];
+}
+var useOriginScroll = (isScrollAtTop, isScrollAtBottom) => {
+  let lock = false;
+  let lockTimeout = null;
+  function lockScroll2() {
+    if (lockTimeout) {
+      clearTimeout(lockTimeout);
+    }
+    lock = true;
+    lockTimeout = setTimeout(() => {
+      lock = false;
+    }, 50);
+  }
+  return (deltaY, smoothOffset = false) => {
+    const originScroll = deltaY < 0 && isScrollAtTop.value || deltaY > 0 && isScrollAtBottom.value;
+    if (smoothOffset && originScroll) {
+      if (lockTimeout) {
+        clearTimeout(lockTimeout);
+      }
+      lock = false;
+    } else if (!originScroll || lock) {
+      lockScroll2();
+    }
+    return !lock && originScroll;
+  };
+};
+const isValid = (value) => {
+  return value !== void 0 && value !== null && value !== "";
+};
+const isEmptyElement = (c) => {
+  var _a, _b;
+  return !!c && (c.type === Comment || c.type === Fragment && ((_a = c == null ? void 0 : c.children) == null ? void 0 : _a.length) === 0 || c.type === Text && ((_b = c == null ? void 0 : c.children) == null ? void 0 : _b.trim()) === "");
+};
+const flattenChildren = (children, filterEmpty = true) => {
+  const temp = Array.isArray(children) ? children : [children];
+  const res = [];
+  temp.forEach((child) => {
+    if (Array.isArray(child)) {
+      res.push(...flattenChildren(child, filterEmpty));
+    } else if (child && child.type === Fragment) {
+      res.push(...flattenChildren(child.children, filterEmpty));
+    } else if (child && isVNode(child)) {
+      if (filterEmpty && !isEmptyElement(child)) {
+        res.push(child);
+      } else if (!filterEmpty) {
+        res.push(child);
+      }
+    } else if (isValid(child)) {
+      res.push(child);
+    }
+  });
+  return res;
+};
+const findDOMNode = (instance) => {
+  var _a;
+  let node = ((_a = instance == null ? void 0 : instance.vnode) == null ? void 0 : _a.el) || instance && ((instance == null ? void 0 : instance.$el) || instance);
+  while (node && !node.tagName) {
+    node = node.nextSibling;
+  }
+  return node;
+};
+const isFF = typeof navigator === "object" && /Firefox/i.test(navigator.userAgent);
+function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, onWheelDelta) {
+  let offsetRef = 0;
+  let nextFrame = null;
+  let wheelValue = null;
+  let isMouseScroll = false;
+  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+  const onRawWheel = (event) => {
+    var _a;
+    if (!inVirtual.value) {
+      return;
+    }
+    if (nextFrame) {
+      window.cancelAnimationFrame(nextFrame);
+    }
+    const {
+      deltaY
+    } = event;
+    offsetRef += deltaY;
+    wheelValue = deltaY;
+    if (originScroll(deltaY, false)) {
+      return;
+    }
+    if (!isFF) {
+      (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
+    }
+    nextFrame = window.requestAnimationFrame(() => {
+      const patchMultiple = isMouseScroll ? 10 : 1;
+      onWheelDelta(offsetRef * patchMultiple);
+      offsetRef = 0;
+    });
+  };
+  const onFireFoxScroll = (event) => {
+    if (!inVirtual.value) {
+      return;
+    }
+    isMouseScroll = event.detail === wheelValue;
+  };
+  return [onRawWheel, onFireFoxScroll];
+}
+const SMOOTH_PTG = 14 / 15;
+function useMobileTouchMove(inVirtual, listRef, callback) {
+  let touched = false;
+  let touchY = 0;
+  let element = null;
+  let interval = null;
+  const onTouchMove = (e) => {
+    if (touched) {
+      const currentY = Math.ceil(e.touches[0].pageY);
+      let offsetY = touchY - currentY;
+      touchY = currentY;
+      if (callback(offsetY)) {
+        e.preventDefault();
+      }
+      if (interval) {
+        clearInterval(interval);
+      }
+      interval = setInterval(() => {
+        offsetY *= SMOOTH_PTG;
+        if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
+          if (interval) {
+            clearInterval(interval);
+          }
+        }
+      }, 16);
+    }
+  };
+  const cleanUpEvents = () => {
+    if (element) {
+      element.removeEventListener("touchmove", onTouchMove);
+      element.removeEventListener("touchend", () => {
+        touched = false;
+        cleanUpEvents();
+      });
+    }
+  };
+  const onTouchEnd = () => {
+    touched = false;
+    cleanUpEvents();
+  };
+  const onTouchStart = (e) => {
+    cleanUpEvents();
+    if (e.touches.length === 1 && !touched) {
+      touched = true;
+      touchY = Math.ceil(e.touches[0].pageY);
+      element = e.target;
+      element.addEventListener("touchmove", onTouchMove, {
+        passive: false
+      });
+      element.addEventListener("touchend", onTouchEnd);
+    }
+  };
+  onMounted(() => {
+    watch(inVirtual, (val) => {
+      var _a, _b;
+      (_a = listRef.value) == null ? void 0 : _a.removeEventListener("touchstart", onTouchStart);
+      cleanUpEvents();
+      if (interval) {
+        clearInterval(interval);
+      }
+      if (val) {
+        (_b = listRef.value) == null ? void 0 : _b.addEventListener("touchstart", onTouchStart, {
+          passive: false
+        });
+      }
+    }, {
+      immediate: true
+    });
+  });
+}
+var ResizeObserver$1 = defineComponent({
+  name: "ResizeObserver",
+  props: resizeObserverProps,
+  emits: ["resize"],
+  setup(props, {
+    slots
+  }) {
+    const state = reactive({
+      width: 0,
+      height: 0,
+      offsetHeight: 0,
+      offsetWidth: 0
+    });
+    const currentElement = ref(null);
+    const resizeObserver = ref(null);
+    const destroyObserver = () => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+        resizeObserver.value = null;
+      }
+    };
+    const onTriggerResize = (entries) => {
+      const {
+        onResize
+      } = props;
+      const target = entries[0].target;
+      const {
+        width,
+        height
+      } = target.getBoundingClientRect();
+      const {
+        offsetWidth,
+        offsetHeight
+      } = target;
+      const fixedWidth = Math.floor(width);
+      const fixedHeight = Math.floor(height);
+      if (state.width !== fixedWidth || state.height !== fixedHeight || state.offsetWidth !== offsetWidth || state.offsetHeight !== offsetHeight) {
+        const size = {
+          width: fixedWidth,
+          height: fixedHeight,
+          offsetWidth,
+          offsetHeight
+        };
+        Object.assign(state, size);
+        if (onResize) {
+          Promise.resolve().then(() => {
+            onResize(__spreadProps(__spreadValues({}, size), {
+              offsetWidth,
+              offsetHeight
+            }), target);
+          });
+        }
+      }
+    };
+    const instance = getCurrentInstance();
+    const registerObserver = () => {
+      const {
+        disabled
+      } = props;
+      if (disabled) {
+        destroyObserver();
+        return;
+      }
+      if (instance) {
+        const element = findDOMNode(instance);
+        const elementChanged = element !== currentElement.value;
+        if (elementChanged) {
+          destroyObserver();
+          currentElement.value = element;
+        }
+        if (!resizeObserver.value && element) {
+          resizeObserver.value = new ResizeObserver(onTriggerResize);
+          resizeObserver.value.observe(element);
+        }
+      }
+    };
+    onMounted(() => {
+      registerObserver();
+    });
+    onUpdated(() => {
+      registerObserver();
+    });
+    onUnmounted(() => {
+      destroyObserver();
+    });
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots)[0];
+    };
+  }
+});
+const INIT_INNER_STYLE = {
+  display: "flex",
+  flexDirection: "column"
+};
+var ResizeObserverContainer = defineComponent({
+  name: "ResizeObserverContainer",
+  props: resizeObserverContainerProps,
+  setup(props, ctx) {
+    const {
+      height,
+      offset: offset2
+    } = toRefs(props);
+    const outerStyle = ref({});
+    const innerStyle = ref(INIT_INNER_STYLE);
+    watch([() => height.value, () => offset2.value], () => {
+      if (props.offset !== void 0) {
+        outerStyle.value = {
+          height: `${height.value}px`,
+          position: "relative",
+          overflow: "hidden"
+        };
+        innerStyle.value = __spreadProps(__spreadValues({}, innerStyle.value), {
+          transform: `translateY(${offset2.value}px)`,
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0
+        });
+      }
+    }, {
+      immediate: true
+    });
+    return () => createVNode("div", {
+      "style": outerStyle.value
+    }, [createVNode(ResizeObserver$1, {
+      "onResize": ({
+        offsetHeight
+      }) => {
+        if (offsetHeight && props.onInnerResize) {
+          props.onInnerResize();
+        }
+      }
+    }, {
+      default: () => {
+        var _a, _b;
+        return [createVNode("div", {
+          "style": innerStyle.value
+        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
+    })]);
+  }
+});
+function getPageY(e) {
+  return "touches" in e ? e.touches[0].pageY : e.pageY;
+}
+var ScrollBar = defineComponent({
+  name: "ScrollBar",
+  props: scrollBarProps,
+  setup(props, ctx) {
+    const scrollbarRef = ref(null);
+    const thumbRef = ref(null);
+    const moveRaf = ref(0);
+    const state = reactive({
+      dragging: false,
+      pageY: null,
+      startTop: null,
+      visible: false
+    });
+    const visibleTimeout = ref(null);
+    const canScroll = computed(() => {
+      return (props.scrollHeight || 0) > (props.height || 0);
+    });
+    const getSpinHeight = () => {
+      const {
+        height = 0,
+        count = 0
+      } = props;
+      let baseHeight = height / count * 10;
+      baseHeight = Math.max(baseHeight, 20);
+      baseHeight = Math.min(baseHeight, height / 2);
+      return Math.floor(baseHeight);
+    };
+    const getEnableScrollRange = () => {
+      const {
+        scrollHeight = 0,
+        height = 0
+      } = props;
+      return scrollHeight - height || 0;
+    };
+    const getEnableHeightRange = () => {
+      const {
+        height = 0
+      } = props;
+      const spinHeight = getSpinHeight();
+      return height - spinHeight || 0;
+    };
+    const getTop = () => {
+      const {
+        scrollTop = 0
+      } = props;
+      const enableScrollRange = getEnableScrollRange();
+      const enableHeightRange = getEnableHeightRange();
+      if (scrollTop === 0 || enableScrollRange === 0) {
+        return 0;
+      }
+      const ptg = scrollTop / enableScrollRange;
+      return ptg * enableHeightRange;
+    };
+    const onMouseMove = (e) => {
+      const {
+        dragging,
+        pageY,
+        startTop
+      } = state;
+      const {
+        onScroll
+      } = props;
+      window.cancelAnimationFrame(moveRaf.value);
+      if (dragging) {
+        const offsetY = getPageY(e) - (pageY || 0);
+        const newTop = (startTop || 0) + offsetY;
+        const enableScrollRange = getEnableScrollRange();
+        const enableHeightRange = getEnableHeightRange();
+        const ptg = enableHeightRange ? newTop / enableHeightRange : 0;
+        const newScrollTop = Math.ceil(ptg * enableScrollRange);
+        moveRaf.value = window.requestAnimationFrame(() => {
+          if (onScroll) {
+            onScroll(newScrollTop);
+          }
+        });
+      }
+    };
+    const onMouseUp = (callback) => {
+      const {
+        onStopMove
+      } = props;
+      state.dragging = false;
+      if (onStopMove) {
+        onStopMove();
+      }
+      if (callback) {
+        callback();
+      }
+    };
+    const onMouseDown = (e, callback) => {
+      var _a, _b;
+      const {
+        onStartMove
+      } = props;
+      Object.assign(state, {
+        dragging: true,
+        pageY: getPageY(e),
+        startTop: getTop()
+      });
+      if (onStartMove) {
+        onStartMove();
+      }
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", () => onMouseUp(callback));
+      (_a = thumbRef == null ? void 0 : thumbRef.value) == null ? void 0 : _a.addEventListener("touchmove", onMouseMove, {
+        passive: false
+      });
+      (_b = thumbRef == null ? void 0 : thumbRef.value) == null ? void 0 : _b.addEventListener("touchend", () => onMouseUp(callback));
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    const removeEvents = () => {
+      var _a, _b, _c, _d;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", () => onMouseUp(removeEvents));
+      (_a = scrollbarRef == null ? void 0 : scrollbarRef.value) == null ? void 0 : _a.removeEventListener("touchstart", (e) => {
+        e.preventDefault();
+      }, {
+        passive: false
+      });
+      (_b = thumbRef == null ? void 0 : thumbRef.value) == null ? void 0 : _b.removeEventListener("touchstart", (e) => onMouseDown(e, removeEvents), {
+        passive: false
+      });
+      (_c = thumbRef == null ? void 0 : thumbRef.value) == null ? void 0 : _c.removeEventListener("touchmove", onMouseMove, {
+        passive: false
+      });
+      (_d = thumbRef == null ? void 0 : thumbRef.value) == null ? void 0 : _d.removeEventListener("touchend", () => onMouseUp(removeEvents));
+      window.cancelAnimationFrame(moveRaf.value);
+    };
+    const onContainerMouseDown = (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+    onBeforeUnmount(() => {
+      removeEvents();
+      if (visibleTimeout.value) {
+        clearTimeout(visibleTimeout.value);
+      }
+    });
+    onMounted(() => {
+      var _a, _b;
+      (_a = scrollbarRef == null ? void 0 : scrollbarRef.value) == null ? void 0 : _a.addEventListener("touchstart", (e) => {
+        e.preventDefault();
+      }, {
+        passive: false
+      });
+      (_b = thumbRef.value) == null ? void 0 : _b.addEventListener("touchstart", (e) => onMouseDown(e, removeEvents), {
+        passive: false
+      });
+    });
+    const onShowBar = () => {
+      if (visibleTimeout.value) {
+        clearTimeout(visibleTimeout.value);
+      }
+      state.visible = true;
+      visibleTimeout.value = setTimeout(() => {
+        state.visible = false;
+      }, 1e3);
+    };
+    ctx.expose({
+      onShowBar
+    });
+    return () => {
+      const display = canScroll.value && state.visible ? void 0 : "none";
+      return createVNode("div", {
+        "ref": scrollbarRef,
+        "style": {
+          width: "8px",
+          top: 0,
+          bottom: 0,
+          right: 0,
+          position: "absolute",
+          display
+        },
+        "onMousedown": onContainerMouseDown,
+        "onMousemove": onShowBar
+      }, [createVNode("div", {
+        "ref": thumbRef,
+        "style": {
+          width: "100%",
+          height: getSpinHeight() + "px",
+          top: getTop() + "px",
+          left: 0,
+          position: "absolute",
+          background: "rgba(0, 0, 0, 0.5)",
+          borderRadius: "99px",
+          cursor: "pointer",
+          userSelect: "none"
+        },
+        "onMousedown": (e) => onMouseDown(e, removeEvents)
+      }, null)]);
+    };
+  }
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const Item = ({
+  setRef
+}, {
+  slots
+}) => {
+  var _a;
+  const children = flattenChildren((_a = slots.default) == null ? void 0 : _a.call(slots));
+  return children && children.length ? cloneVNode(children[0], {
+    ref: setRef
+  }) : children;
+};
+Item.props = {
+  setRef: {
+    type: Function
+  }
+};
+function renderChildren(list, startIndex, endIndex, setNodeRef, {
+  getKey
+}, renderFunc) {
+  if (renderFunc === void 0) {
+    return "";
+  }
+  return list.slice(startIndex, endIndex + 1).map((item, index2) => {
+    const eleIndex = startIndex + index2;
+    const node = renderFunc(item, eleIndex, {});
+    const key = getKey(item);
+    return createVNode(Item, {
+      "key": key,
+      "setRef": (ele) => setNodeRef(item, ele)
+    }, _isSlot(node) ? node : {
+      default: () => [node]
+    });
+  });
+}
+const ScrollStyle = {
+  overflowY: "auto",
+  overflowAnchor: "none"
+};
+const DEFAULT_HEIGHT = 20;
+var VirtualList = defineComponent({
+  name: "DVirtualList",
+  props: virtualListProps,
+  setup(props, ctx) {
+    const {
+      isVirtual,
+      inVirtual
+    } = useVirtual(props);
+    const state = reactive({
+      scrollTop: 0,
+      scrollMoving: false
+    });
+    const data = computed(() => {
+      return props.data || [];
+    });
+    const mergedData = shallowRef([]);
+    watch(data, () => {
+      mergedData.value = toRaw(data.value).slice();
+    }, {
+      immediate: true
+    });
+    const itemKey = shallowRef(null);
+    watch(() => props.itemKey, (val) => {
+      if (typeof val === "function") {
+        itemKey.value = val;
+      } else {
+        if (val) {
+          itemKey.value = (item) => item == null ? void 0 : item[val];
+        }
+      }
+    }, {
+      immediate: true
+    });
+    const componentRef = ref();
+    const fillerInnerRef = ref();
+    const barRef = ref();
+    const getKey = (item) => {
+      if (!itemKey.value || !props.itemKey) {
+        return;
+      }
+      return itemKey.value(item);
+    };
+    const [setInstance, collectHeight, heights, updatedMark] = useHeights(mergedData, getKey);
+    const calRes = reactive({
+      scrollHeight: void 0,
+      start: 0,
+      end: 0,
+      offset: void 0
+    });
+    const offsetHeight = ref(0);
+    onMounted(() => {
+      nextTick(() => {
+        var _a;
+        offsetHeight.value = ((_a = fillerInnerRef.value) == null ? void 0 : _a.offsetHeight) || 0;
+      });
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        var _a;
+        offsetHeight.value = ((_a = fillerInnerRef.value) == null ? void 0 : _a.offsetHeight) || 0;
+      });
+    });
+    watch([isVirtual, mergedData], () => {
+      if (!isVirtual.value) {
+        Object.assign(calRes, {
+          scrollHeight: void 0,
+          start: 0,
+          end: mergedData.value.length - 1,
+          offset: void 0
+        });
+      }
+    }, {
+      immediate: true
+    });
+    watch([isVirtual, mergedData, offsetHeight, inVirtual], () => {
+      if (isVirtual.value && !inVirtual.value) {
+        Object.assign(calRes, {
+          scrollHeight: offsetHeight.value,
+          start: 0,
+          end: mergedData.value.length - 1,
+          offset: void 0
+        });
+      }
+    }, {
+      immediate: true
+    });
+    watch([inVirtual, isVirtual, () => state.scrollTop, mergedData, updatedMark, () => props.height, offsetHeight], () => {
+      if (!isVirtual.value || !inVirtual.value) {
+        return;
+      }
+      let itemTop = 0;
+      let startIndex;
+      let startOffset;
+      let endIndex;
+      const mergedDataValue = unref(mergedData);
+      const scrollTop = state.scrollTop;
+      const {
+        height
+      } = props;
+      const scrollTopHeight = scrollTop + height;
+      for (let i = 0; i < mergedDataValue.length; i += 1) {
+        const mergedDataItem = mergedDataValue[i];
+        let cacheHeight;
+        if (props.itemKey) {
+          const key = getKey(mergedDataItem);
+          cacheHeight = heights.get(key);
+        }
+        if (cacheHeight === void 0) {
+          cacheHeight = props.itemHeight || DEFAULT_HEIGHT;
+        }
+        const currentItemBottom = itemTop + cacheHeight;
+        if (startIndex === void 0 && currentItemBottom >= scrollTop) {
+          startIndex = i;
+          startOffset = itemTop;
+        }
+        if (endIndex === void 0 && currentItemBottom > scrollTopHeight) {
+          endIndex = i;
+        }
+        itemTop = currentItemBottom;
+      }
+      if (startIndex === void 0) {
+        startIndex = 0;
+        startOffset = 0;
+      }
+      if (endIndex === void 0) {
+        endIndex = mergedDataValue.length - 1;
+      }
+      endIndex = Math.min(endIndex + 1, mergedDataValue.length);
+      Object.assign(calRes, {
+        scrollHeight: itemTop,
+        start: startIndex,
+        end: endIndex,
+        offset: startOffset
+      });
+    }, {
+      immediate: true
+    });
+    const maxScrollHeight = computed(() => (calRes.scrollHeight || 0) - props.height);
+    const keepInRange = (newScrollTop) => {
+      let newTop = newScrollTop;
+      if (!Number.isNaN(maxScrollHeight.value)) {
+        newTop = Math.min(newTop, maxScrollHeight.value);
+      }
+      newTop = Math.max(newTop, 0);
+      return newTop;
+    };
+    const isScrollAtTop = computed(() => state.scrollTop <= 0);
+    const isScrollAtBottom = computed(() => state.scrollTop >= maxScrollHeight.value);
+    const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+    const syncScrollTop = (newTop) => {
+      let value;
+      if (typeof newTop === "function") {
+        value = newTop(state.scrollTop);
+      } else {
+        value = newTop;
+      }
+      const alignedTop = keepInRange(value);
+      if (componentRef.value) {
+        componentRef.value.scrollTop = alignedTop;
+      }
+      state.scrollTop = alignedTop;
+    };
+    const onScrollBar = (newScrollTop) => {
+      const newTop = newScrollTop;
+      syncScrollTop(newTop);
+    };
+    const onComponentScroll = (e) => {
+      var _a, _b;
+      const {
+        scrollTop: newScrollTop
+      } = e.currentTarget;
+      if (Math.abs(newScrollTop - state.scrollTop) >= 1) {
+        syncScrollTop(newScrollTop);
+      }
+      (_b = (_a = barRef == null ? void 0 : barRef.value) == null ? void 0 : _a.onShowBar) == null ? void 0 : _b.call(_a);
+      ctx.emit("scroll", e);
+    };
+    const [onRawWheel, onFireFoxScroll] = useFrameWheel(isVirtual, isScrollAtTop, isScrollAtBottom, (offsetY) => {
+      syncScrollTop((top) => {
+        const newTop = top + offsetY;
+        return newTop;
+      });
+    });
+    useMobileTouchMove(isVirtual, componentRef, (deltaY, smoothOffset) => {
+      if (originScroll(deltaY, !!smoothOffset)) {
+        return false;
+      }
+      onRawWheel({
+        deltaY
+      });
+      return true;
+    });
+    const onMozMousePixelScroll = (e) => {
+      if (isVirtual.value) {
+        e.preventDefault();
+      }
+    };
+    const removeEventListener = () => {
+      if (componentRef.value) {
+        componentRef.value.removeEventListener("wheel", onRawWheel, {
+          passive: false
+        });
+        componentRef.value.removeEventListener("DOMMouseScroll", onFireFoxScroll);
+        componentRef.value.removeEventListener("MozMousePixelScroll", onMozMousePixelScroll);
+      }
+    };
+    watchEffect(() => {
+      nextTick(() => {
+        if (componentRef.value) {
+          removeEventListener();
+          componentRef.value.addEventListener("wheel", onRawWheel, {
+            passive: false
+          });
+          componentRef.value.addEventListener("DOMMouseScroll", onFireFoxScroll);
+          componentRef.value.addEventListener("MozMousePixelScroll", onMozMousePixelScroll);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      removeEventListener();
+    });
+    const componentStyle = computed(() => {
+      let cs = null;
+      if (props.height) {
+        cs = __spreadValues({
+          maxHeight: isVirtual.value ? props.height + "px" : void 0
+        }, ScrollStyle);
+        if (isVirtual.value) {
+          cs.overflowY = "hidden";
+          if (state.scrollMoving) {
+            cs.pointerEvents = "none";
+          }
+        }
+      }
+      return cs;
+    });
+    watch([() => calRes.start, () => calRes.end, mergedData], () => {
+      const renderList = mergedData.value.slice(calRes.start, calRes.end + 1);
+      ctx.emit("show-change", renderList, mergedData.value);
+    }, {
+      flush: "post"
+    });
+    ctx.expose({
+      scrollTo(index2) {
+        syncScrollTop(index2 * (props.itemHeight || DEFAULT_HEIGHT));
+      }
+    });
+    return () => {
+      const Component = props.component;
+      return createVNode("div", {
+        "style": {
+          position: "relative"
+        }
+      }, [createVNode(Component, {
+        "style": componentStyle.value,
+        "ref": componentRef,
+        "onScroll": onComponentScroll
+      }, {
+        default: () => [createVNode(ResizeObserverContainer, {
+          "height": calRes.scrollHeight,
+          "offset": calRes.offset,
+          "onInnerResize": collectHeight,
+          "ref": fillerInnerRef
+        }, {
+          default: () => renderChildren(mergedData.value, calRes.start, calRes.end, setInstance, {
+            getKey
+          }, ctx.slots.item)
+        })]
+      }), isVirtual.value && createVNode(ScrollBar, {
+        "ref": barRef,
+        "scrollTop": state.scrollTop,
+        "height": props.height,
+        "scrollHeight": calRes.scrollHeight,
+        "count": mergedData.value.length,
+        "onScroll": onScrollBar,
+        "onStartMove": () => {
+          state.scrollMoving = true;
+        },
+        "onStopMove": () => {
+          state.scrollMoving = false;
+        }
+      }, null)]);
+    };
+  }
+});
 function useToggle() {
-  return function useToggle2(data, core) {
+  return function useToggle2(data, core, context, lazyLode) {
     const { getNode, setNodeValue } = core;
+    const { lazyLoadNodes } = lazyLode;
     const expandNode = (node) => {
-      if (node.disableToggle) {
+      if (node.disableToggle || node.loading) {
         return;
       }
       setNodeValue(node, "expanded", true);
+      context.emit("toggle-change", node);
     };
     const collapseNode = (node) => {
-      if (node.disableToggle) {
+      if (node.disableToggle || node.loading) {
         return;
       }
       setNodeValue(node, "expanded", false);
+      context.emit("toggle-change", node);
     };
     const toggleNode = (node) => {
-      if (node.disableToggle) {
+      if (node.disableToggle || node.loading) {
         return;
       }
       if (getNode(node).expanded) {
-        setNodeValue(node, "expanded", false);
+        collapseNode(node);
       } else {
-        setNodeValue(node, "expanded", true);
+        expandNode(node);
       }
+      lazyLoadNodes(node);
     };
     const expandAllNodes = () => {
       data.value.forEach((node) => {
@@ -8463,16 +9528,19 @@ function omit(obj, ...keys) {
 }
 function generateInnerTree(tree2, key = "children", level = 0, path = []) {
   level++;
-  return tree2.reduce((acc, item) => {
-    var _a, _b;
+  return tree2.reduce((acc, item, currentIndex) => {
+    var _a, _b, _c;
     const newItem = Object.assign({}, item);
     if (newItem.id === void 0) {
       newItem.id = randomId();
       newItem.idType = "random";
     }
     newItem.level = level;
-    if (path.length > 0 && ((_a = path[path.length - 1]) == null ? void 0 : _a.level) >= level) {
-      while (((_b = path[path.length - 1]) == null ? void 0 : _b.level) >= level) {
+    newItem.parentChildNodeCount = tree2.length;
+    newItem.currentIndex = currentIndex;
+    newItem.childNodeCount = ((_a = newItem.children) == null ? void 0 : _a.length) || 0;
+    if (path.length > 0 && ((_b = path[path.length - 1]) == null ? void 0 : _b.level) >= level) {
+      while (((_c = path[path.length - 1]) == null ? void 0 : _c.level) >= level) {
         path.pop();
       }
     }
@@ -8482,7 +9550,7 @@ function generateInnerTree(tree2, key = "children", level = 0, path = []) {
       newItem.parentId = parentNode.id;
     }
     if (!newItem[key]) {
-      return acc.concat(__spreadProps(__spreadValues({}, newItem), { isLeaf: true }));
+      return acc.concat(__spreadProps(__spreadValues({}, newItem), { isLeaf: newItem.isLeaf === false ? false : true }));
     } else {
       return acc.concat(omit(newItem, "children"), generateInnerTree(newItem[key], key, level, path));
     }
@@ -8492,12 +9560,23 @@ const DEFAULT_CONFIG = {
   expanded: false,
   recursive: true
 };
+const nodeMap = /* @__PURE__ */ new Map();
 function useCore() {
   return function useCore2(data) {
     const getLevel = (node) => {
-      return data.value.find((item) => item.id === node.id).level;
+      var _a;
+      return (_a = data.value.find((item) => item.id === node.id)) == null ? void 0 : _a.level;
     };
     const getChildren = (node, userConfig = DEFAULT_CONFIG) => {
+      if (node.isLeaf) {
+        return [];
+      }
+      if (node.id && nodeMap.has(node.id)) {
+        const cacheNode = nodeMap.get(node.id);
+        if (cacheNode) {
+          return cacheNode;
+        }
+      }
       const getInnerExpendedTree = () => {
         return computed(() => {
           let excludeNodes = [];
@@ -8507,7 +9586,7 @@ function useCore() {
             if (excludeNodes.map((innerNode) => innerNode.id).includes(item.id)) {
               continue;
             }
-            if (item.expanded !== true) {
+            if (item.expanded !== true && !item.isLeaf) {
               excludeNodes = getChildren(item);
             }
             result2.push(item);
@@ -8526,6 +9605,9 @@ function useCore() {
           result.push(treeData.value[i]);
         }
       }
+      if (node.id) {
+        nodeMap.set(node.id, result);
+      }
       return result;
     };
     const getParent = (node) => {
@@ -8549,17 +9631,30 @@ function useCore() {
       });
     };
     const getIndex = (node) => {
+      if (!node) {
+        return -1;
+      }
       return data.value.findIndex((item) => item.id === node.id);
     };
     const getNode = (node) => {
       return data.value.find((item) => item.id === node.id);
     };
     const setNodeValue = (node, key, value) => {
-      data.value[getIndex(node)][key] = value;
+      nodeMap.clear();
+      if (getIndex(node) !== -1) {
+        data.value[getIndex(node)][key] = value;
+      }
     };
     const setTree = (newTree) => {
+      nodeMap.clear();
       data.value = generateInnerTree(newTree);
     };
+    const getTree = () => {
+      return data.value;
+    };
+    onUnmounted(() => {
+      nodeMap.clear();
+    });
     return {
       getLevel,
       getChildren,
@@ -8568,76 +9663,130 @@ function useCore() {
       getIndex,
       getNode,
       setNodeValue,
-      setTree
+      setTree,
+      getTree
+    };
+  };
+}
+function useLazyLoad() {
+  return function useLazyLoad2(data, core, context) {
+    const { getNode, setNodeValue, getIndex, getChildren } = core;
+    const setCommonParent = (node, nodes) => {
+      nodes.value.forEach((item) => {
+        if (item.level - 1 === node.level && !item.parentId) {
+          item.parentId = node.id;
+        }
+      });
+    };
+    const insertChildrenNodes = (parent, nodes) => {
+      const parentIndex = getIndex(parent);
+      if (parentIndex !== -1) {
+        data.value.splice(parentIndex + 1, 0, ...nodes.value);
+      }
+    };
+    const dealChildNodes = (result) => {
+      const node = getNode(result.node);
+      setNodeValue(node, "loading", false);
+      const childNodes = ref(generateInnerTree(result.treeItems, "children", node.level));
+      setCommonParent(node, childNodes);
+      insertChildrenNodes(node, childNodes);
+      const childrenNodes = getChildren(node);
+      setNodeValue(node, "childNodeCount", childrenNodes.length);
+    };
+    const lazyLoadNodes = (node) => {
+      const innerNode = getNode(node);
+      if (!innerNode.isLeaf && !innerNode.childNodeCount) {
+        setNodeValue(node, "loading", true);
+        context.emit("lazy-load", node, dealChildNodes);
+      }
+    };
+    return {
+      lazyLoadNodes
     };
   };
 }
 const DEFAULT_TREE_PLUGINS = [useCore(), useToggle()];
-function useTree(tree2, plugins = []) {
+function useTree(tree2, plugins = [], context) {
   const treeData = ref(generateInnerTree(tree2));
   const core = useCore()(treeData);
+  const lazyLode = useLazyLoad()(treeData, core, context);
   const pluginMethods = DEFAULT_TREE_PLUGINS.concat(plugins).reduce((acc, plugin) => {
-    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core));
+    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core, context, lazyLode));
   }, {});
   return __spreadValues({
     treeData
   }, pluginMethods);
 }
 function useCheck(options = ref({ checkStrategy: "both" })) {
-  return function useCheck2(data, core) {
+  return function useCheck2(data, core, context) {
     const { setNodeValue, getNode, getChildren, getParent } = core;
     const checkNode = (node) => {
       setNodeValue(node, "checked", true);
+      context.emit("check-change", node);
     };
     const uncheckNode = (node) => {
       setNodeValue(node, "checked", false);
+      context.emit("check-change", node);
     };
-    const controlParentNodeChecked = (node) => {
+    const controlParentNodeChecked = (node, checked) => {
+      if (!node.parentId) {
+        return;
+      }
       const parentNode = getParent(node);
       if (!parentNode) {
         return;
       }
-      const siblingNodes = getChildren(parentNode, { recursive: false });
-      const checkedSiblingNodes = siblingNodes.filter((item) => item.checked);
-      const toggleParentChecked = () => {
+      let childChecked = checked;
+      if (checked) {
+        if (!parentNode.checked) {
+          setNodeValue(parentNode, "checked", true);
+        }
+      } else {
+        const siblingNodes = getChildren(parentNode);
+        const checkedSiblingNodes = siblingNodes.filter((item) => item.checked && item.id !== node.id);
         if (checkedSiblingNodes.length === 0) {
           setNodeValue(parentNode, "checked", false);
-        } else if (checkedSiblingNodes.length === siblingNodes.length) {
+        } else {
           setNodeValue(parentNode, "checked", true);
+          childChecked = true;
         }
-      };
+      }
       if (parentNode.parentId) {
-        toggleParentChecked();
-        controlParentNodeChecked(parentNode);
-      } else {
-        toggleParentChecked();
+        controlParentNodeChecked(parentNode, childChecked);
       }
     };
     const toggleCheckNode = (node) => {
-      if (getNode(node).checked) {
+      const checked = getNode(node).checked;
+      if (checked) {
         setNodeValue(node, "checked", false);
+        context.emit("check-change", node);
         if (["downward", "both"].includes(options.value.checkStrategy)) {
           getChildren(node).forEach((item) => setNodeValue(item, "checked", false));
         }
       } else {
         setNodeValue(node, "checked", true);
+        context.emit("check-change", node);
         if (["downward", "both"].includes(options.value.checkStrategy)) {
           getChildren(node).forEach((item) => setNodeValue(item, "checked", true));
         }
       }
       if (["upward", "both"].includes(options.value.checkStrategy)) {
-        controlParentNodeChecked(node);
+        controlParentNodeChecked(node, !checked);
       }
     };
+    const getCheckedNodes = () => {
+      return data.value.filter((node) => node.checked);
+    };
     return {
       checkNode,
       uncheckNode,
-      toggleCheckNode
+      toggleCheckNode,
+      getCheckedNodes
     };
   };
 }
 function useSelect() {
-  return function useSelect2(data, core) {
+  return function useSelect2(data, core, context) {
     const { setNodeValue } = core;
     let prevActiveNode;
     const selectNode = (node) => {
@@ -8649,10 +9798,12 @@ function useSelect() {
         setNodeValue(data.value[prevActiveNodeIndex], "selected", false);
       }
       setNodeValue(node, "selected", true);
+      context.emit("select-change", node);
       prevActiveNode = node;
     };
     const deselectNode = (node) => {
       setNodeValue(node, "selected", false);
+      context.emit("select-change", node);
     };
     const toggleSelectNode = (node) => {
       if (node.selected) {
@@ -8661,10 +9812,14 @@ function useSelect() {
         selectNode(node);
       }
     };
+    const getSelectedNode = () => {
+      return data.value.find((node) => node.selected);
+    };
     return {
       selectNode,
       deselectNode,
-      toggleSelectNode
+      toggleSelectNode,
+      getSelectedNode
     };
   };
 }
@@ -8672,7 +9827,9 @@ function useOperate() {
   return function useOperate2(data, core) {
     const { setNodeValue, getChildren, getIndex, getLevel } = core;
     const insertBefore = (parentNode, node, referenceNode) => {
-      const children = getChildren(parentNode);
+      const children = getChildren(parentNode, {
+        recursive: false
+      });
       const lastChild = children[children.length - 1];
       let insertedIndex = getIndex(parentNode) + 1;
       if (referenceNode) {
@@ -8682,12 +9839,20 @@ function useOperate() {
       }
       setNodeValue(parentNode, "expanded", true);
       setNodeValue(parentNode, "isLeaf", false);
-      const currentNode = __spreadProps(__spreadValues({}, node), {
+      if (lastChild) {
+        setNodeValue(lastChild, "parentChildNodeCount", children.length + 1);
+      }
+      const currentNode = ref(__spreadProps(__spreadValues({}, node), {
         level: getLevel(parentNode) + 1,
         parentId: parentNode.id,
-        isLeaf: true
-      });
-      data.value = data.value.slice(0, insertedIndex).concat(currentNode, data.value.slice(insertedIndex, data.value.length));
+        isLeaf: true,
+        parentChildNodeCount: children.length + 1,
+        currentIndex: (lastChild == null ? void 0 : lastChild.currentIndex) + 1
+      }));
+      if (currentNode.value.id === void 0) {
+        currentNode.value.id = randomId();
+      }
+      data.value = data.value.slice(0, insertedIndex).concat(currentNode.value, data.value.slice(insertedIndex, data.value.length));
     };
     const removeNode = (node, config = { recursive: true }) => {
       if (!config.recursive) {
@@ -8756,32 +9921,43 @@ const treeProps = {
   check: {
     type: [Boolean, String],
     default: false
+  },
+  operate: {
+    type: [Boolean, String, Array],
+    default: false
+  },
+  height: {
+    type: [Number, String]
   }
 };
 var tree = "";
 var Tree = defineComponent({
   name: "DTree",
   props: treeProps,
-  setup(props, {
-    slots,
-    expose
-  }) {
+  emits: ["toggle-change", "check-change", "select-change", "node-click", "lazy-load"],
+  setup(props, context) {
+    const {
+      slots,
+      expose
+    } = context;
+    const treeInstance = getCurrentInstance();
     const {
       data,
-      check
+      check,
+      operate
     } = toRefs(props);
     const ns2 = useNamespace("tree");
     const userPlugins = [useSelect(), useOperate(), useMergeNodes()];
     const checkOptions = ref({
-      checkStrategy: check.value || "both"
+      checkStrategy: formatCheckStatus(check.value)
     });
     watch(check, (newVal) => {
-      checkOptions.value.checkStrategy = newVal;
+      checkOptions.value.checkStrategy = formatCheckStatus(newVal);
     });
     if (check.value) {
       userPlugins.push(useCheck(checkOptions));
     }
-    const treeFactory = useTree(data.value, userPlugins);
+    const treeFactory = useTree(data.value, userPlugins, context);
     const {
       setTree,
       getExpendedTree,
@@ -8789,38 +9965,58 @@ var Tree = defineComponent({
     } = treeFactory;
     watch(data, setTree);
     provide(USE_TREE_TOKEN, treeFactory);
+    provide(TREE_INSTANCE, treeInstance);
     expose({
       treeFactory
     });
+    const renderDTreeNode = (treeNode) => slots.default ? renderSlot(useSlots(), "default", {
+      treeFactory,
+      nodeData: treeNode
+    }) : createVNode(DTreeNode, {
+      "data": treeNode,
+      "check": check.value,
+      "operate": operate.value
+    }, {
+      default: () => slots.content ? renderSlot(useSlots(), "content", {
+        nodeData: treeNode
+      }) : createVNode(DTreeNodeContent, {
+        "data": treeNode
+      }, null),
+      icon: () => slots.icon ? renderSlot(useSlots(), "icon", {
+        nodeData: treeNode,
+        toggleNode
+      }) : createVNode(DTreeNodeToggle, {
+        "data": treeNode
+      }, null),
+      loading: () => slots.loading ? renderSlot(useSlots(), "loading", {
+        nodeData: treeNode
+      }) : createVNode(DTreeNodeLoading, null, null)
+    });
     return () => {
-      return createVNode("div", {
+      const Component = props.height ? VirtualList : "div";
+      const treeData = getExpendedTree == null ? void 0 : getExpendedTree().value;
+      const vSlotsProps = {
+        default: () => treeData == null ? void 0 : treeData.map(renderDTreeNode),
+        item: props.height && ((treeNode) => renderDTreeNode(treeNode))
+      };
+      let virtualListProps2 = {};
+      if (props.height) {
+        virtualListProps2 = {
+          height: props.height,
+          data: treeData,
+          itemHeight: NODE_HEIGHT
+        };
+      }
+      return createVNode(Component, mergeProps({
         "class": ns2.b()
-      }, [getExpendedTree == null ? void 0 : getExpendedTree().value.map((treeNode) => slots.default ? renderSlot(useSlots(), "default", {
-        treeFactory,
-        nodeData: treeNode
-      }) : createVNode(DTreeNode, {
-        "data": treeNode,
-        "check": check.value
-      }, {
-        default: () => slots.content ? renderSlot(useSlots(), "content", {
-          nodeData: treeNode
-        }) : createVNode(DTreeNodeContent, {
-          "data": treeNode
-        }, null),
-        icon: () => slots.icon ? renderSlot(useSlots(), "icon", {
-          nodeData: treeNode,
-          toggleNode
-        }) : createVNode(DTreeNodeToggle, {
-          "data": treeNode
-        }, null)
-      }))]);
+      }, virtualListProps2), vSlotsProps);
     };
   }
 });
 var index = {
   title: "Tree \u6811",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "20%",
+  status: "50%",
   install(app) {
     app.component(Tree.name, Tree);
   }