tdesign-vue-next 1.9.8-alpha.1 → 1.9.8-alpha.2

package/dist/tdesign.js

@@ -1,5 +1,5 @@
 /**
- * tdesign v1.9.8-alpha.1
+ * tdesign v1.9.8-alpha.2
  * (c) 2024 tdesign
  * @license MIT
  */
@@ -4000,7 +4000,7 @@
     if (null == r) return {};
     var t = {};
     for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-      if (e.indexOf(n) >= 0) continue;
+      if (e.includes(n)) continue;
       t[n] = r[n];
     }
     return t;
@@ -4012,8 +4012,8 @@
       r,
       i = _objectWithoutPropertiesLoose$1(e, t);
     if (Object.getOwnPropertySymbols) {
-      var n = Object.getOwnPropertySymbols(e);
-      for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+      var s = Object.getOwnPropertySymbols(e);
+      for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
     return i;
   }
@@ -6835,6 +6835,22 @@
     }
     return defaultNode;
   }
+  function getChildren(content) {
+    var childList = [];
+    var innerGetChildren = function innerGetChildren(content2) {
+      if (!isArray_1(content2)) return;
+      content2.forEach(function (item) {
+        if (item.children && isArray_1(item.children)) {
+          if (item.type !== Vue.Fragment) return;
+          innerGetChildren(item.children);
+        } else {
+          childList.push(item);
+        }
+      });
+      return childList;
+    };
+    return innerGetChildren(content);
+  }
   function getParams(options) {
     return isObject_1(options) && "params" in options ? options.params : {};
   }
@@ -12055,7 +12071,7 @@
     return target;
   }
   var classPrefix = ConfigContext$1.classPrefix;
-  var CDN_ICONFONT_URL = "https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js";
+  var CDN_ICONFONT_URL = "https://tdesign.gtimg.com/icon/0.2.1/fonts/index.js";
   var _Icon = Vue.defineComponent({
     name: "Icon",
     props: props$1p,
@@ -12750,19 +12766,6 @@
         slots = instance.slots;
       }
       var content = ((_slots = slots) === null || _slots === void 0 || (_slots$default = _slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(_slots)) || [];
-      var childList = [];
-      var getChildren = function getChildren(content2) {
-        if (!isArray_1(content2)) return;
-        content2.forEach(function (item) {
-          if (item.children && isArray_1(item.children)) {
-            if (item.type !== Vue.Fragment) return;
-            getChildren(item.children);
-          } else {
-            childList.push(item);
-          }
-        });
-        return childList;
-      };
       return getChildren(content).filter(function (item) {
         var _item$type$name;
         return (_item$type$name = item.type.name) === null || _item$type$name === void 0 ? void 0 : _item$type$name.endsWith(childComponentName);
@@ -22182,6 +22185,7 @@
       innerClickElement.value = e.target;
     };
     var emitPassword = function emitPassword() {
+      if (disabled.value) return;
       var toggleType = renderType.value === "password" ? "text" : "password";
       renderType.value = toggleType;
     };
@@ -22574,14 +22578,15 @@
           "class": "".concat(COMPONENT_NAME.value, "__suffix")
         }, [suffix, limitNode]) : null;
         if (props2.type === "password") {
+          var passwordClass = [_defineProperty$3({}, "".concat(COMPONENT_NAME.value, "__suffix-clear"), !disabled.value)];
           if (renderType.value === "password") {
             suffixIcon = Vue.createVNode(BrowseOffIcon, {
-              "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
+              "class": passwordClass,
               "onClick": inputHandle.emitPassword
             }, null);
           } else if (renderType.value === "text") {
             suffixIcon = Vue.createVNode(BrowseIcon, {
-              "class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
+              "class": passwordClass,
               "onClick": inputHandle.emitPassword
             }, null);
           }
@@ -37271,7 +37276,10 @@
     disableDate: {
       type: [Object, Array, Function]
     },
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      "default": void 0
+    },
     enableTimePicker: Boolean,
     firstDayOfWeek: {
       type: Number,
@@ -44880,459 +44888,184 @@
     return vm;
   }
 
-  var props$s = {
-    activable: Boolean,
-    activeMultiple: Boolean,
-    actived: {
-      type: Array,
-      "default": void 0
-    },
-    defaultActived: {
-      type: Array
-    },
-    allowDrop: {
-      type: Function
-    },
-    allowFoldNodeOnFilter: Boolean,
-    checkProps: {
-      type: Object
-    },
-    checkStrictly: Boolean,
-    checkable: Boolean,
-    data: {
-      type: Array,
-      "default": function _default() {
-        return [];
-      }
-    },
-    disableCheck: {
-      type: [Boolean, Function],
-      "default": false
-    },
-    disabled: Boolean,
-    draggable: Boolean,
-    empty: {
-      type: [String, Function],
-      "default": ""
-    },
-    expandAll: Boolean,
-    expandLevel: {
-      type: Number,
-      "default": 0
-    },
-    expandMutex: Boolean,
-    expandOnClickNode: Boolean,
-    expandParent: Boolean,
-    expanded: {
-      type: Array,
-      "default": void 0
-    },
-    defaultExpanded: {
-      type: Array,
-      "default": function _default() {
-        return [];
-      }
-    },
-    filter: {
-      type: Function
-    },
-    height: {
-      type: [String, Number]
-    },
-    hover: Boolean,
-    icon: {
-      type: [Boolean, Function],
-      "default": true
-    },
-    keys: {
-      type: Object
-    },
-    label: {
-      type: [String, Boolean, Function],
-      "default": true
-    },
-    lazy: {
-      type: Boolean,
-      "default": true
-    },
-    line: {
-      type: [Boolean, Function],
-      "default": false
-    },
-    load: {
-      type: Function
-    },
-    maxHeight: {
-      type: [String, Number]
-    },
-    operations: {
-      type: Function
-    },
-    scroll: {
-      type: Object
-    },
-    transition: {
-      type: Boolean,
-      "default": true
-    },
-    value: {
-      type: Array,
-      "default": void 0
-    },
-    modelValue: {
-      type: Array,
-      "default": void 0
-    },
-    defaultValue: {
-      type: Array,
-      "default": function _default() {
-        return [];
+  var DragPosition = /* @__PURE__ */function (DragPosition2) {
+    DragPosition2[DragPosition2["Before"] = -1] = "Before";
+    DragPosition2[DragPosition2["Inside"] = 0] = "Inside";
+    DragPosition2[DragPosition2["After"] = 1] = "After";
+    return DragPosition2;
+  }(DragPosition || {});
+  function useDraggable(state) {
+    var treeItemRef = state.treeItemRef;
+    var dragStates = Vue.reactive({
+      isDragOver: false,
+      isDragging: false,
+      dropPosition: 0 /* Inside */
+    });
+    var updateDropPosition = function updateDropPosition(dragEvent) {
+      var _rootNode$getBounding;
+      var rootNode = treeItemRef.value;
+      if (!rootNode) return;
+      var rect = rootNode === null || rootNode === void 0 || (_rootNode$getBounding = rootNode.getBoundingClientRect) === null || _rootNode$getBounding === void 0 ? void 0 : _rootNode$getBounding.call(rootNode);
+      var offsetY = window.scrollY + rect.top;
+      var pageY = dragEvent.pageY;
+      var gapHeight = rect.height / 4;
+      var diff = pageY - offsetY;
+      if (diff < gapHeight) {
+        dragStates.dropPosition = -1 /* Before */;
+      } else if (diff < rect.height - gapHeight) {
+        dragStates.dropPosition = 0 /* Inside */;
+      } else {
+        dragStates.dropPosition = 1 /* After */;
       }
-    },
-    valueMode: {
-      type: String,
-      "default": "onlyLeaf",
-      validator: function validator(val) {
-        if (!val) return true;
-        return ["onlyLeaf", "parentFirst", "all"].includes(val);
+    };
+    var setDragStatus = function setDragStatus(status, dragEvent) {
+      var _drag$handleDragStart, _drag$handleDragEnd, _drag$handleDragOver, _drag$handleDragLeave, _drag$handleDrop;
+      var node = state.node,
+        treeScope = state.treeScope;
+      var drag = treeScope.drag;
+      if (!drag) return;
+      switch (status) {
+        case "dragStart":
+          dragStates.isDragging = true;
+          dragStates.dropPosition = 0 /* Inside */;
+          (_drag$handleDragStart = drag.handleDragStart) === null || _drag$handleDragStart === void 0 || _drag$handleDragStart.call(drag, {
+            node: node,
+            dragEvent: dragEvent
+          });
+          break;
+        case "dragEnd":
+          dragStates.isDragging = false;
+          dragStates.isDragOver = false;
+          dragStates.dropPosition = 0 /* Inside */;
+          throttleUpdateDropPosition.cancel();
+          (_drag$handleDragEnd = drag.handleDragEnd) === null || _drag$handleDragEnd === void 0 || _drag$handleDragEnd.call(drag, {
+            node: node,
+            dragEvent: dragEvent
+          });
+          break;
+        case "dragOver":
+          dragStates.isDragOver = true;
+          throttleUpdateDropPosition(dragEvent);
+          (_drag$handleDragOver = drag.handleDragOver) === null || _drag$handleDragOver === void 0 || _drag$handleDragOver.call(drag, {
+            node: node,
+            dragEvent: dragEvent
+          });
+          break;
+        case "dragLeave":
+          dragStates.isDragOver = false;
+          dragStates.dropPosition = 0 /* Inside */;
+          throttleUpdateDropPosition.cancel();
+          (_drag$handleDragLeave = drag.handleDragLeave) === null || _drag$handleDragLeave === void 0 || _drag$handleDragLeave.call(drag, {
+            node: node,
+            dragEvent: dragEvent
+          });
+          break;
+        case "drop":
+          (_drag$handleDrop = drag.handleDrop) === null || _drag$handleDrop === void 0 || _drag$handleDrop.call(drag, {
+            node: node,
+            dropPosition: dragStates.dropPosition,
+            dragEvent: dragEvent
+          });
+          dragStates.isDragOver = false;
+          throttleUpdateDropPosition.cancel();
+          break;
       }
-    },
-    onActive: Function,
-    onChange: Function,
-    onClick: Function,
-    onDragEnd: Function,
-    onDragLeave: Function,
-    onDragOver: Function,
-    onDragStart: Function,
-    onDrop: Function,
-    onExpand: Function,
-    onLoad: Function,
-    onScroll: Function
-  };
-
-  function useTreeStore(state) {
-    var props = state.props,
-      context = state.context,
-      refProps = state.refProps;
-    var valueMode = props.valueMode,
-      filter = props.filter,
-      keys = props.keys;
-    var store = new TreeStore({
-      valueMode: valueMode,
-      filter: filter
-    });
-    var tValue = state.vmValue[0];
-    var tActived = state.vmActived[0];
-    var tExpanded = state.vmExpanded[0];
-    var updateStoreConfig = function updateStoreConfig() {
-      var storeProps = pick_1(props, ["expandAll", "expandLevel", "expandMutex", "expandParent", "activable", "activeMultiple", "disabled", "disableCheck", "checkable", "draggable", "checkStrictly", "load", "lazy", "valueMode", "filter", "allowFoldNodeOnFilter"]);
-      store.setConfig(storeProps);
     };
-    var updateExpanded = function updateExpanded() {
-      var expandParent = props.expandParent;
-      if (!Array.isArray(tExpanded.value)) return;
-      var expandedMap = /* @__PURE__ */new Map();
-      tExpanded.value.forEach(function (val) {
-        expandedMap.set(val, true);
-        if (expandParent) {
-          var node = store.getNode(val);
-          if (node) {
-            node.getModel().getParents().forEach(function (tn) {
-              expandedMap.set(tn.value, true);
-            });
-          }
-        }
-      });
-      var expandedArr = Array.from(expandedMap.keys());
-      store.setExpanded(expandedArr);
+    var handleDragStart = function handleDragStart(evt) {
+      var node = state.node;
+      if (!node.isDraggable()) return;
+      evt.stopPropagation();
+      setDragStatus("dragStart", evt);
+      try {
+        var _evt$dataTransfer;
+        (_evt$dataTransfer = evt.dataTransfer) === null || _evt$dataTransfer === void 0 || _evt$dataTransfer.setData("text/plain", "");
+      } catch (e) {}
     };
-    var filterChanged = false;
-    var prevExpanded = null;
-    var expandFilterPath = function expandFilterPath() {
-      if (!props.allowFoldNodeOnFilter) return;
-      if (!filterChanged) return;
-      filterChanged = false;
-      if (props.filter) {
-        if (!prevExpanded) {
-          prevExpanded = store.getExpanded();
-        }
-        var pathValues = [];
-        var allNodes = store.getNodes();
-        allNodes.forEach(function (node) {
-          if (node.vmIsLocked) {
-            pathValues.push(node.value);
-          }
-        });
-        store.setExpanded(pathValues);
-      } else if (prevExpanded) {
-        store.replaceExpanded(prevExpanded);
-        prevExpanded = null;
-      }
+    var handleDragEnd = function handleDragEnd(evt) {
+      var node = state.node;
+      if (!node.isDraggable()) return;
+      evt.stopPropagation();
+      setDragStatus("dragEnd", evt);
     };
-    var checkFilterExpand = function checkFilterExpand(newFilter, previousFilter) {
-      if (!props.allowFoldNodeOnFilter) return;
-      filterChanged = newFilter !== previousFilter;
+    var handleDragOver = function handleDragOver(evt) {
+      var node = state.node;
+      if (!node.isDraggable()) return;
+      evt.stopPropagation();
+      evt.preventDefault();
+      setDragStatus("dragOver", evt);
     };
-    var handleLoad = function handleLoad(info) {
-      var node = info.node;
-      var evtCtx = {
-        node: node.getModel()
-      };
-      if (Array.isArray(tValue.value) && tValue.value.length > 0) {
-        store.replaceChecked(tValue.value);
-      }
-      if (Array.isArray(tExpanded.value) && tExpanded.value.length > 0) {
-        store.replaceExpanded(tExpanded.value);
-      }
-      if (Array.isArray(tActived.value) && tActived.value.length > 0) {
-        store.replaceActived(tActived.value);
-      }
-      if (props !== null && props !== void 0 && props.onLoad) {
-        props === null || props === void 0 || props.onLoad(evtCtx);
-      }
-      context.emit("load", evtCtx);
+    var handleDragLeave = function handleDragLeave(evt) {
+      var node = state.node;
+      if (!node.isDraggable()) return;
+      evt.stopPropagation();
+      setDragStatus("dragLeave", evt);
     };
-    var rebuild = function rebuild(list) {
-      store.reload(list || []);
-      store.refreshNodes();
-      if (Array.isArray(tValue.value)) {
-        store.setChecked(tValue.value);
-      }
-      updateExpanded();
-      if (Array.isArray(tActived.value)) {
-        store.setActived(tActived.value);
-      }
-      store.refreshState();
+    var handleDrop = function handleDrop(evt) {
+      var node = state.node;
+      if (!node.isDraggable()) return;
+      evt.stopPropagation();
+      evt.preventDefault();
+      setDragStatus("drop", evt);
     };
-    function initStore() {
-      store.setConfig({
-        keys: keys
-      });
-      updateStoreConfig();
-      store.append(props.data || []);
-      store.refreshNodes();
-      if (Array.isArray(tValue.value)) {
-        store.setChecked(tValue.value);
-      }
-      updateExpanded();
-      if (Array.isArray(tActived.value)) {
-        store.setActived(tActived.value);
-      }
-      store.emitter.on("load", handleLoad);
-      store.emitter.on("update", expandFilterPath);
-    }
-    initStore();
-    state.setStore(store);
-    Vue.watch(function () {
-      return _toConsumableArray(tValue.value || []);
-    }, function (nVal) {
-      store.replaceChecked(nVal);
-    });
-    Vue.watch(function () {
-      return _toConsumableArray(tExpanded.value || []);
-    }, function (nVal) {
-      store.replaceExpanded(nVal);
-    });
-    Vue.watch(function () {
-      return _toConsumableArray(tActived.value || []);
-    }, function (nVal) {
-      store.replaceActived(nVal);
-    });
-    Vue.watch(refProps.filter, function (nVal, previousVal) {
-      checkFilterExpand(nVal, previousVal);
-    });
-    Vue.watch(refProps.keys, function (keys2) {
-      store.setConfig({
-        keys: keys2
-      });
+    var throttleUpdateDropPosition = throttle_1(function (dragEvent) {
+      updateDropPosition(dragEvent);
     });
     return {
-      store: store,
-      rebuild: rebuild,
-      checkFilterExpand: checkFilterExpand,
-      updateStoreConfig: updateStoreConfig,
-      updateExpanded: updateExpanded,
-      expandFilterPath: expandFilterPath
+      dragStates: dragStates,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd,
+      handleDragOver: handleDragOver,
+      handleDragLeave: handleDragLeave,
+      handleDrop: handleDrop
     };
   }
 
-  function formatCSSUnit$1(unit) {
-    if (!unit) return unit;
-    return isNaN(Number(unit)) ? unit : "".concat(unit, "px");
+  function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function emitEvent(props, context, evtName) {
+    var apiName = camelCase_1("on-".concat(evtName));
+    evtName.replace(/^on/, "").toLowerCase();
+    for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
+      args[_key - 3] = arguments[_key];
+    }
+    if (typeof props[apiName] === "function") {
+      props[apiName].apply(props, args);
+    }
   }
-  function useTreeStyles(state) {
-    var props = state.props;
-    var componentName = usePrefixClass("tree").value;
-    var classPrefix = usePrefixClass().value;
-    var virtualConfig = state.virtualConfig,
-      isScrolling = state.isScrolling,
-      refProps = state.refProps;
-    var height = refProps.height,
-      maxHeight = refProps.maxHeight;
-    var treeClasses = Vue.computed(function () {
-      var list = [componentName];
-      var disabled = props.disabled,
-        hover = props.hover,
-        transition = props.transition,
-        checkable = props.checkable,
-        draggable = props.draggable,
-        expandOnClickNode = props.expandOnClickNode,
-        scroll = props.scroll;
-      if (disabled) {
-        list.push("".concat(classPrefix, "-is-disabled"));
-      }
-      if (hover) {
-        list.push("".concat(componentName, "--hoverable"));
-      }
-      if (checkable) {
-        list.push("".concat(componentName, "--checkable"));
-      }
-      if (draggable) {
-        list.push("".concat(componentName, "--draggable"));
-      }
-      if (transition) {
-        list.push("".concat(componentName, "--transition"));
-      }
-      if (expandOnClickNode) {
-        list.push("".concat(componentName, "--block-node"));
-      }
-      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
-      if (isVirtual) {
-        list.push("".concat(componentName, "__vscroll"));
-        if (isScrolling.value) {
-          list.push("".concat(componentName, "--scrolling"));
-        }
-      } else if (scroll && scroll.type === "lazy") {
-        list.push("".concat(componentName, "__lazyload"));
+  function getParentsToRoot(element, root) {
+    var list = [];
+    var el = element;
+    while (el && el.parentNode) {
+      list.push(el);
+      if (el === root) {
+        break;
       }
-      return list;
-    });
-    var treeContentStyles = Vue.computed(function () {
-      return {
-        height: formatCSSUnit$1(height.value),
-        maxHeight: formatCSSUnit$1(maxHeight.value),
-        overflowY: formatCSSUnit$1(height.value) || formatCSSUnit$1(maxHeight.value) ? "auto" : void 0
+      el = el.parentNode;
+    }
+    return list;
+  }
+  function getParentMarks(name, element, root) {
+    var list = getParentsToRoot(element, root);
+    return list.map(function (el) {
+      var mark = {
+        name: name,
+        value: (el === null || el === void 0 ? void 0 : el.getAttribute(name)) || "",
+        el: el
       };
+      return mark;
+    }).filter(function (mark) {
+      return mark.value;
     });
-    var scrollStyles = Vue.computed(function () {
-      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
-      var translateY = isVirtual ? virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.translateY.value : 0;
-      var transform = "translateY(".concat(translateY, "px)");
-      var posStyle = {
-        transform: transform,
-        "-ms-transform": transform,
-        "-moz-transform": transform,
-        "-webkit-transform": transform
-      };
-      return posStyle;
-    });
-    var cursorStyles = Vue.computed(function () {
-      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
-      var translateY = isVirtual ? virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.translateY.value : 0;
-      var translate = "translate(0, ".concat(translateY, "px)");
-      return {
-        transform: translate,
-        "-ms-transform": translate,
-        "-moz-transform": translate,
-        "-webkit-transform": translate
-      };
-    });
-    return {
-      treeClasses: treeClasses,
-      treeContentStyles: treeContentStyles,
-      scrollStyles: scrollStyles,
-      cursorStyles: cursorStyles
-    };
-  }
-
-  function useTreeState(props, context) {
-    var treeContentRef = Vue.ref();
-    var nodes = Vue.ref([]);
-    var allNodes = Vue.ref([]);
-    var isScrolling = Vue.ref(false);
-    var refProps = Vue.toRefs(props);
-    var vmValue = useVModel(props, refProps, "value", "defaultValue", "onChange", "change");
-    var vmActived = useVModel(props, refProps, "actived", "defaultActived", "onActive", "active");
-    var vmExpanded = useVModel(props, refProps, "expanded", "defaultExpanded", "onExpand", "expand");
-    function setStore(store) {
-      state.store = store;
-      state.scope.store = store;
-      allNodes.value = store.getNodes();
-    }
-    var state = {
-      props: props,
-      context: context,
-      store: null,
-      treeContentRef: treeContentRef,
-      nodes: nodes,
-      allNodes: allNodes,
-      isScrolling: isScrolling,
-      mouseEvent: null,
-      virtualConfig: null,
-      scope: {
-        store: null,
-        treeContentRef: treeContentRef,
-        treeProps: props,
-        scopedSlots: {},
-        virtualConfig: null
-      },
-      setStore: setStore,
-      refProps: refProps,
-      vmValue: vmValue,
-      vmActived: vmActived,
-      vmExpanded: vmExpanded
-    };
-    return {
-      state: state
-    };
-  }
-
-  function ownKeys$1d(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread$1c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1d(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  function emitEvent(props, context, evtName) {
-    var apiName = camelCase_1("on-".concat(evtName));
-    evtName.replace(/^on/, "").toLowerCase();
-    for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      args[_key - 3] = arguments[_key];
-    }
-    if (typeof props[apiName] === "function") {
-      props[apiName].apply(props, args);
-    }
-  }
-  function getParentsToRoot(element, root) {
-    var list = [];
-    var el = element;
-    while (el && el.parentNode) {
-      list.push(el);
-      if (el === root) {
-        break;
-      }
-      el = el.parentNode;
-    }
-    return list;
-  }
-  function getParentMarks(name, element, root) {
-    var list = getParentsToRoot(element, root);
-    return list.map(function (el) {
-      var mark = {
-        name: name,
-        value: (el === null || el === void 0 ? void 0 : el.getAttribute(name)) || "",
-        el: el
-      };
-      return mark;
-    }).filter(function (mark) {
-      return mark.value;
-    });
-  }
-  function getMark(name, element, root) {
-    var list = getParentMarks(name, element, root);
-    var info = list.pop() || null;
-    return info;
-  }
-  function pathMatchClass(name, element, root) {
-    var list = getParentsToRoot(element, root);
-    var rs = list.some(function (el) {
-      return el.classList.contains(name);
+  }
+  function getMark(name, element, root) {
+    var list = getParentMarks(name, element, root);
+    var info = list.pop() || null;
+    return info;
+  }
+  function pathMatchClass(name, element, root) {
+    var list = getParentsToRoot(element, root);
+    var rs = list.some(function (el) {
+      return el.classList.contains(name);
     });
     return rs;
   }
@@ -45368,6 +45101,94 @@
     return node;
   }
 
+  function useDragHandle(state) {
+    var props = state.props,
+      context = state.context,
+      scope = state.scope,
+      store = state.store;
+    var dragNode = null;
+    var handleDragStart = function handleDragStart(state2) {
+      var dragEvent = state2.dragEvent,
+        node = state2.node;
+      dragNode = node;
+      var ctx = {
+        node: node.getModel(),
+        e: dragEvent
+      };
+      emitEvent(props, context, "drag-start", ctx);
+    };
+    var handleDragEnd = function handleDragEnd(state2) {
+      var dragEvent = state2.dragEvent,
+        node = state2.node;
+      dragNode = node;
+      var ctx = {
+        node: node.getModel(),
+        e: dragEvent
+      };
+      emitEvent(props, context, "drag-end", ctx);
+    };
+    var handleDragOver = function handleDragOver(state2) {
+      var dragEvent = state2.dragEvent,
+        node = state2.node;
+      var ctx = {
+        node: node.getModel(),
+        e: dragEvent
+      };
+      emitEvent(props, context, "drag-over", ctx);
+    };
+    var handleDragLeave = function handleDragLeave(state2) {
+      var dragEvent = state2.dragEvent,
+        node = state2.node;
+      var ctx = {
+        node: node.getModel(),
+        e: dragEvent
+      };
+      emitEvent(props, context, "drag-leave", ctx);
+    };
+    var handleDrop = function handleDrop(state2) {
+      var _props$allowDrop;
+      var dragEvent = state2.dragEvent,
+        node = state2.node,
+        dropPosition = state2.dropPosition;
+      if (node.value === dragNode.value || node.getParents().some(function (_node) {
+        return _node.value === dragNode.value;
+      })) return;
+      var ctx = {
+        dropNode: node.getModel(),
+        dragNode: dragNode.getModel(),
+        dropPosition: dropPosition,
+        e: dragEvent
+      };
+      if (((_props$allowDrop = props.allowDrop) === null || _props$allowDrop === void 0 ? void 0 : _props$allowDrop.call(props, ctx)) === false) return;
+      var nodes = store.getNodes();
+      nodes.some(function (_node) {
+        if (_node.value === node.value) {
+          if (dropPosition === DragPosition.Inside) {
+            dragNode.appendTo(store, _node);
+          } else if (dropPosition === DragPosition.Before) {
+            node.insertBefore(dragNode);
+          } else {
+            node.insertAfter(dragNode);
+          }
+          return true;
+        }
+        return false;
+      });
+      emitEvent(props, context, "drop", ctx);
+    };
+    var drag = {
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd,
+      handleDragOver: handleDragOver,
+      handleDragLeave: handleDragLeave,
+      handleDrop: handleDrop
+    };
+    scope.drag = drag;
+    return {
+      drag: drag
+    };
+  }
+
   function useTreeAction(state) {
     var treeState = state;
     var store = treeState.store;
@@ -45474,107 +45295,6 @@
     };
   }
 
-  function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  function useTreeScroll(state) {
-    var treeState = state;
-    var props = treeState.props,
-      context = treeState.context,
-      allNodes = treeState.allNodes,
-      nodes = treeState.nodes,
-      scope = treeState.scope,
-      treeContentRef = treeState.treeContentRef,
-      isScrolling = treeState.isScrolling;
-    var scrollProps = Vue.computed(function () {
-      return _objectSpread$1b({
-        rowHeight: 34
-      }, props.scroll);
-    });
-    scope.scrollProps = scrollProps;
-    var virtualScrollParams = Vue.computed(function () {
-      var list = allNodes.value.filter(function (node) {
-        return node.visible;
-      });
-      return {
-        data: list,
-        scroll: scrollProps.value
-      };
-    });
-    var virtualConfig = useVirtualScroll(treeContentRef, virtualScrollParams);
-    scope.virtualConfig = virtualConfig;
-    treeState.virtualConfig = virtualConfig;
-    Vue.onMounted(function () {
-      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
-      if (isVirtual) {
-        virtualConfig.handleScroll();
-      }
-    });
-    var emitScrollEvent = function emitScrollEvent(e) {
-      var _props$onScroll;
-      (_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, {
-        e: e
-      });
-      context.emit("scroll", {
-        e: e
-      });
-    };
-    var scrollStopTimer = null;
-    var setScrolling = function setScrolling() {
-      isScrolling.value = true;
-      if (scrollStopTimer) {
-        clearTimeout(scrollStopTimer);
-        scrollStopTimer = null;
-      }
-      scrollStopTimer = setTimeout(function () {
-        scrollStopTimer = null;
-        isScrolling.value = false;
-      }, 100);
-    };
-    var lastScrollY = 0;
-    var onInnerVirtualScroll = function onInnerVirtualScroll(e) {
-      setScrolling();
-      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
-      var target = e.target || e.srcElement;
-      var top = target.scrollTop;
-      if (lastScrollY !== top) {
-        if (isVirtual) {
-          virtualConfig.handleScroll();
-          nodes.value = virtualConfig.visibleData.value;
-        }
-      } else {
-        lastScrollY = 0;
-      }
-      lastScrollY = top;
-      emitScrollEvent(e);
-    };
-    var handleScrollTo = function handleScrollTo(params) {
-      var index = params.index;
-      if (!index && index !== 0) {
-        var _allNodes$value;
-        if (!params.key) {
-          log.error("Tree", "scrollToElement: one of `index` or `key` must exist.");
-          return;
-        }
-        index = (_allNodes$value = allNodes.value) === null || _allNodes$value === void 0 ? void 0 : _allNodes$value.findIndex(function (item) {
-          return [get_1(item.data, "key"), get_1(item.data, "value")].includes(params.key);
-        });
-        if (index < 0) {
-          log.error("Tree", "".concat(params.key, " does not exist in data, check `key` or `data` please."));
-          return;
-        }
-      }
-      virtualConfig.scrollToElement(_objectSpread$1b(_objectSpread$1b({}, params), {}, {
-        index: index - 1
-      }));
-    };
-    return {
-      treeContentRef: treeContentRef,
-      onInnerVirtualScroll: onInnerVirtualScroll,
-      virtualConfig: virtualConfig,
-      scrollToElement: handleScrollTo
-    };
-  }
-
   function useItemState(props, context) {
     var refProps = Vue.toRefs(props);
     var treeItemRef = Vue.ref(null);
@@ -45691,8 +45411,8 @@
     };
   }
 
-  function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function ownKeys$1c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$1b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1c(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   function _isSlot$i(s) {
     return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !Vue.isVNode(s);
   }
@@ -45741,7 +45461,7 @@
         if (node.isDisabled()) {
           checkboxDisabled = true;
         }
-        var itemCheckProps = _objectSpread$1a(_objectSpread$1a({}, checkProps), {}, {
+        var itemCheckProps = _objectSpread$1b(_objectSpread$1b({}, checkProps), {}, {
           disabled: checkboxDisabled
         });
         var _labelNode = function () {
@@ -45873,140 +45593,8 @@
     };
   }
 
-  var DragPosition = /* @__PURE__ */function (DragPosition2) {
-    DragPosition2[DragPosition2["Before"] = -1] = "Before";
-    DragPosition2[DragPosition2["Inside"] = 0] = "Inside";
-    DragPosition2[DragPosition2["After"] = 1] = "After";
-    return DragPosition2;
-  }(DragPosition || {});
-  function useDraggable(state) {
-    var treeItemRef = state.treeItemRef;
-    var dragStates = Vue.reactive({
-      isDragOver: false,
-      isDragging: false,
-      dropPosition: 0 /* Inside */
-    });
-    var updateDropPosition = function updateDropPosition(dragEvent) {
-      var _rootNode$getBounding;
-      var rootNode = treeItemRef.value;
-      if (!rootNode) return;
-      var rect = rootNode === null || rootNode === void 0 || (_rootNode$getBounding = rootNode.getBoundingClientRect) === null || _rootNode$getBounding === void 0 ? void 0 : _rootNode$getBounding.call(rootNode);
-      var offsetY = window.scrollY + rect.top;
-      var pageY = dragEvent.pageY;
-      var gapHeight = rect.height / 4;
-      var diff = pageY - offsetY;
-      if (diff < gapHeight) {
-        dragStates.dropPosition = -1 /* Before */;
-      } else if (diff < rect.height - gapHeight) {
-        dragStates.dropPosition = 0 /* Inside */;
-      } else {
-        dragStates.dropPosition = 1 /* After */;
-      }
-    };
-    var setDragStatus = function setDragStatus(status, dragEvent) {
-      var _drag$handleDragStart, _drag$handleDragEnd, _drag$handleDragOver, _drag$handleDragLeave, _drag$handleDrop;
-      var node = state.node,
-        treeScope = state.treeScope;
-      var drag = treeScope.drag;
-      if (!drag) return;
-      switch (status) {
-        case "dragStart":
-          dragStates.isDragging = true;
-          dragStates.dropPosition = 0 /* Inside */;
-          (_drag$handleDragStart = drag.handleDragStart) === null || _drag$handleDragStart === void 0 || _drag$handleDragStart.call(drag, {
-            node: node,
-            dragEvent: dragEvent
-          });
-          break;
-        case "dragEnd":
-          dragStates.isDragging = false;
-          dragStates.isDragOver = false;
-          dragStates.dropPosition = 0 /* Inside */;
-          throttleUpdateDropPosition.cancel();
-          (_drag$handleDragEnd = drag.handleDragEnd) === null || _drag$handleDragEnd === void 0 || _drag$handleDragEnd.call(drag, {
-            node: node,
-            dragEvent: dragEvent
-          });
-          break;
-        case "dragOver":
-          dragStates.isDragOver = true;
-          throttleUpdateDropPosition(dragEvent);
-          (_drag$handleDragOver = drag.handleDragOver) === null || _drag$handleDragOver === void 0 || _drag$handleDragOver.call(drag, {
-            node: node,
-            dragEvent: dragEvent
-          });
-          break;
-        case "dragLeave":
-          dragStates.isDragOver = false;
-          dragStates.dropPosition = 0 /* Inside */;
-          throttleUpdateDropPosition.cancel();
-          (_drag$handleDragLeave = drag.handleDragLeave) === null || _drag$handleDragLeave === void 0 || _drag$handleDragLeave.call(drag, {
-            node: node,
-            dragEvent: dragEvent
-          });
-          break;
-        case "drop":
-          (_drag$handleDrop = drag.handleDrop) === null || _drag$handleDrop === void 0 || _drag$handleDrop.call(drag, {
-            node: node,
-            dropPosition: dragStates.dropPosition,
-            dragEvent: dragEvent
-          });
-          dragStates.isDragOver = false;
-          throttleUpdateDropPosition.cancel();
-          break;
-      }
-    };
-    var handleDragStart = function handleDragStart(evt) {
-      var node = state.node;
-      if (!node.isDraggable()) return;
-      evt.stopPropagation();
-      setDragStatus("dragStart", evt);
-      try {
-        var _evt$dataTransfer;
-        (_evt$dataTransfer = evt.dataTransfer) === null || _evt$dataTransfer === void 0 || _evt$dataTransfer.setData("text/plain", "");
-      } catch (e) {}
-    };
-    var handleDragEnd = function handleDragEnd(evt) {
-      var node = state.node;
-      if (!node.isDraggable()) return;
-      evt.stopPropagation();
-      setDragStatus("dragEnd", evt);
-    };
-    var handleDragOver = function handleDragOver(evt) {
-      var node = state.node;
-      if (!node.isDraggable()) return;
-      evt.stopPropagation();
-      evt.preventDefault();
-      setDragStatus("dragOver", evt);
-    };
-    var handleDragLeave = function handleDragLeave(evt) {
-      var node = state.node;
-      if (!node.isDraggable()) return;
-      evt.stopPropagation();
-      setDragStatus("dragLeave", evt);
-    };
-    var handleDrop = function handleDrop(evt) {
-      var node = state.node;
-      if (!node.isDraggable()) return;
-      evt.stopPropagation();
-      evt.preventDefault();
-      setDragStatus("drop", evt);
-    };
-    var throttleUpdateDropPosition = throttle_1(function (dragEvent) {
-      updateDropPosition(dragEvent);
-    });
-    return {
-      dragStates: dragStates,
-      handleDragStart: handleDragStart,
-      handleDragEnd: handleDragEnd,
-      handleDragOver: handleDragOver,
-      handleDragLeave: handleDragLeave,
-      handleDrop: handleDrop
-    };
-  }
-
-  function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function ownKeys$1b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$1a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1b(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   function useTreeItem(state) {
     var treeScope = state.treeScope,
       treeItemRef = state.treeItemRef;
@@ -46032,7 +45620,7 @@
       handleDragOver = _useDraggable.handleDragOver,
       handleDragLeave = _useDraggable.handleDragLeave,
       handleDrop = _useDraggable.handleDrop;
-    var _useLazyLoad = useLazyLoad$1(treeContentRef, treeItemRef, Vue.reactive(_objectSpread$19({}, scrollProps === null || scrollProps === void 0 ? void 0 : scrollProps.value))),
+    var _useLazyLoad = useLazyLoad$1(treeContentRef, treeItemRef, Vue.reactive(_objectSpread$1a({}, scrollProps === null || scrollProps === void 0 ? void 0 : scrollProps.value))),
       hasLazyLoadHolder = _useLazyLoad.hasLazyLoadHolder,
       tRowHeight = _useLazyLoad.tRowHeight;
     function tryNotifyVirtualScrollRowUpdate() {
@@ -46149,8 +45737,8 @@
     };
   }
 
-  function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-  function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function ownKeys$1a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$19(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1a(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var treeItemProps = {
     stateId: {
       type: String
@@ -46165,7 +45753,7 @@
       type: Object
     }
   };
-  var TreeItem = Vue.defineComponent(_objectSpread$18(_objectSpread$18({
+  var TreeItem = Vue.defineComponent(_objectSpread$19(_objectSpread$19({
     props: treeItemProps
   }, TreeItemDefinition), {}, {
     setup: function setup(props, context) {
@@ -46324,94 +45912,514 @@
     };
   }
 
-  function useDragHandle(state) {
-    var props = state.props,
-      context = state.context,
-      scope = state.scope,
-      store = state.store;
-    var dragNode = null;
-    var handleDragStart = function handleDragStart(state2) {
-      var dragEvent = state2.dragEvent,
-        node = state2.node;
-      dragNode = node;
-      var ctx = {
-        node: node.getModel(),
-        e: dragEvent
+  function ownKeys$19(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+  function _objectSpread$18(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$19(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$19(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+  function useTreeScroll(state) {
+    var treeState = state;
+    var props = treeState.props,
+      context = treeState.context,
+      allNodes = treeState.allNodes,
+      nodes = treeState.nodes,
+      scope = treeState.scope,
+      treeContentRef = treeState.treeContentRef,
+      isScrolling = treeState.isScrolling;
+    var scrollProps = Vue.computed(function () {
+      return _objectSpread$18({
+        rowHeight: 34
+      }, props.scroll);
+    });
+    scope.scrollProps = scrollProps;
+    var virtualScrollParams = Vue.computed(function () {
+      var list = allNodes.value.filter(function (node) {
+        return node.visible;
+      });
+      return {
+        data: list,
+        scroll: scrollProps.value
       };
-      emitEvent(props, context, "drag-start", ctx);
+    });
+    var virtualConfig = useVirtualScroll(treeContentRef, virtualScrollParams);
+    scope.virtualConfig = virtualConfig;
+    treeState.virtualConfig = virtualConfig;
+    Vue.onMounted(function () {
+      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
+      if (isVirtual) {
+        virtualConfig.handleScroll();
+      }
+    });
+    var emitScrollEvent = function emitScrollEvent(e) {
+      var _props$onScroll;
+      (_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, {
+        e: e
+      });
+      context.emit("scroll", {
+        e: e
+      });
     };
-    var handleDragEnd = function handleDragEnd(state2) {
-      var dragEvent = state2.dragEvent,
-        node = state2.node;
-      dragNode = node;
-      var ctx = {
-        node: node.getModel(),
-        e: dragEvent
-      };
-      emitEvent(props, context, "drag-end", ctx);
+    var scrollStopTimer = null;
+    var setScrolling = function setScrolling() {
+      isScrolling.value = true;
+      if (scrollStopTimer) {
+        clearTimeout(scrollStopTimer);
+        scrollStopTimer = null;
+      }
+      scrollStopTimer = setTimeout(function () {
+        scrollStopTimer = null;
+        isScrolling.value = false;
+      }, 100);
     };
-    var handleDragOver = function handleDragOver(state2) {
-      var dragEvent = state2.dragEvent,
-        node = state2.node;
-      var ctx = {
-        node: node.getModel(),
-        e: dragEvent
-      };
-      emitEvent(props, context, "drag-over", ctx);
+    var lastScrollY = 0;
+    var onInnerVirtualScroll = function onInnerVirtualScroll(e) {
+      setScrolling();
+      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
+      var target = e.target || e.srcElement;
+      var top = target.scrollTop;
+      if (lastScrollY !== top) {
+        if (isVirtual) {
+          virtualConfig.handleScroll();
+          nodes.value = virtualConfig.visibleData.value;
+        }
+      } else {
+        lastScrollY = 0;
+      }
+      lastScrollY = top;
+      emitScrollEvent(e);
     };
-    var handleDragLeave = function handleDragLeave(state2) {
-      var dragEvent = state2.dragEvent,
-        node = state2.node;
-      var ctx = {
-        node: node.getModel(),
-        e: dragEvent
-      };
-      emitEvent(props, context, "drag-leave", ctx);
+    var handleScrollTo = function handleScrollTo(params) {
+      var index = params.index;
+      if (!index && index !== 0) {
+        var _allNodes$value;
+        if (!params.key) {
+          log.error("Tree", "scrollToElement: one of `index` or `key` must exist.");
+          return;
+        }
+        index = (_allNodes$value = allNodes.value) === null || _allNodes$value === void 0 ? void 0 : _allNodes$value.findIndex(function (item) {
+          return [get_1(item.data, "key"), get_1(item.data, "value")].includes(params.key);
+        });
+        if (index < 0) {
+          log.error("Tree", "".concat(params.key, " does not exist in data, check `key` or `data` please."));
+          return;
+        }
+      }
+      virtualConfig.scrollToElement(_objectSpread$18(_objectSpread$18({}, params), {}, {
+        index: index - 1
+      }));
     };
-    var handleDrop = function handleDrop(state2) {
-      var _props$allowDrop;
-      var dragEvent = state2.dragEvent,
-        node = state2.node,
-        dropPosition = state2.dropPosition;
-      if (node.value === dragNode.value || node.getParents().some(function (_node) {
-        return _node.value === dragNode.value;
-      })) return;
-      var ctx = {
-        dropNode: node.getModel(),
-        dragNode: dragNode.getModel(),
-        dropPosition: dropPosition,
-        e: dragEvent
-      };
-      if (((_props$allowDrop = props.allowDrop) === null || _props$allowDrop === void 0 ? void 0 : _props$allowDrop.call(props, ctx)) === false) return;
-      var nodes = store.getNodes();
-      nodes.some(function (_node) {
-        if (_node.value === node.value) {
-          if (dropPosition === DragPosition.Inside) {
-            dragNode.appendTo(store, _node);
-          } else if (dropPosition === DragPosition.Before) {
-            node.insertBefore(dragNode);
-          } else {
-            node.insertAfter(dragNode);
+    return {
+      treeContentRef: treeContentRef,
+      onInnerVirtualScroll: onInnerVirtualScroll,
+      virtualConfig: virtualConfig,
+      scrollToElement: handleScrollTo
+    };
+  }
+
+  function useTreeState(props, context) {
+    var treeContentRef = Vue.ref();
+    var nodes = Vue.ref([]);
+    var allNodes = Vue.ref([]);
+    var isScrolling = Vue.ref(false);
+    var refProps = Vue.toRefs(props);
+    var vmValue = useVModel(props, refProps, "value", "defaultValue", "onChange", "change");
+    var vmActived = useVModel(props, refProps, "actived", "defaultActived", "onActive", "active");
+    var vmExpanded = useVModel(props, refProps, "expanded", "defaultExpanded", "onExpand", "expand");
+    function setStore(store) {
+      state.store = store;
+      state.scope.store = store;
+      allNodes.value = store.getNodes();
+    }
+    var state = {
+      props: props,
+      context: context,
+      store: null,
+      treeContentRef: treeContentRef,
+      nodes: nodes,
+      allNodes: allNodes,
+      isScrolling: isScrolling,
+      mouseEvent: null,
+      virtualConfig: null,
+      scope: {
+        store: null,
+        treeContentRef: treeContentRef,
+        treeProps: props,
+        scopedSlots: {},
+        virtualConfig: null
+      },
+      setStore: setStore,
+      refProps: refProps,
+      vmValue: vmValue,
+      vmActived: vmActived,
+      vmExpanded: vmExpanded
+    };
+    return {
+      state: state
+    };
+  }
+
+  function useTreeStore(state) {
+    var props = state.props,
+      context = state.context,
+      refProps = state.refProps;
+    var valueMode = props.valueMode,
+      filter = props.filter,
+      keys = props.keys;
+    var store = new TreeStore({
+      valueMode: valueMode,
+      filter: filter
+    });
+    var tValue = state.vmValue[0];
+    var tActived = state.vmActived[0];
+    var tExpanded = state.vmExpanded[0];
+    var updateStoreConfig = function updateStoreConfig() {
+      var storeProps = pick_1(props, ["expandAll", "expandLevel", "expandMutex", "expandParent", "activable", "activeMultiple", "disabled", "disableCheck", "checkable", "draggable", "checkStrictly", "load", "lazy", "valueMode", "filter", "allowFoldNodeOnFilter"]);
+      store.setConfig(storeProps);
+    };
+    var updateExpanded = function updateExpanded() {
+      var expandParent = props.expandParent;
+      if (!Array.isArray(tExpanded.value)) return;
+      var expandedMap = /* @__PURE__ */new Map();
+      tExpanded.value.forEach(function (val) {
+        expandedMap.set(val, true);
+        if (expandParent) {
+          var node = store.getNode(val);
+          if (node) {
+            node.getModel().getParents().forEach(function (tn) {
+              expandedMap.set(tn.value, true);
+            });
           }
-          return true;
         }
-        return false;
       });
-      emitEvent(props, context, "drop", ctx);
+      var expandedArr = Array.from(expandedMap.keys());
+      store.setExpanded(expandedArr);
     };
-    var drag = {
-      handleDragStart: handleDragStart,
-      handleDragEnd: handleDragEnd,
-      handleDragOver: handleDragOver,
-      handleDragLeave: handleDragLeave,
-      handleDrop: handleDrop
+    var filterChanged = false;
+    var prevExpanded = null;
+    var expandFilterPath = function expandFilterPath() {
+      if (!props.allowFoldNodeOnFilter) return;
+      if (!filterChanged) return;
+      filterChanged = false;
+      if (props.filter) {
+        if (!prevExpanded) {
+          prevExpanded = store.getExpanded();
+        }
+        var pathValues = [];
+        var allNodes = store.getNodes();
+        allNodes.forEach(function (node) {
+          if (node.vmIsLocked) {
+            pathValues.push(node.value);
+          }
+        });
+        store.setExpanded(pathValues);
+      } else if (prevExpanded) {
+        store.replaceExpanded(prevExpanded);
+        prevExpanded = null;
+      }
     };
-    scope.drag = drag;
+    var checkFilterExpand = function checkFilterExpand(newFilter, previousFilter) {
+      if (!props.allowFoldNodeOnFilter) return;
+      filterChanged = newFilter !== previousFilter;
+    };
+    var handleLoad = function handleLoad(info) {
+      var node = info.node;
+      var evtCtx = {
+        node: node.getModel()
+      };
+      if (Array.isArray(tValue.value) && tValue.value.length > 0) {
+        store.replaceChecked(tValue.value);
+      }
+      if (Array.isArray(tExpanded.value) && tExpanded.value.length > 0) {
+        store.replaceExpanded(tExpanded.value);
+      }
+      if (Array.isArray(tActived.value) && tActived.value.length > 0) {
+        store.replaceActived(tActived.value);
+      }
+      if (props !== null && props !== void 0 && props.onLoad) {
+        props === null || props === void 0 || props.onLoad(evtCtx);
+      }
+      context.emit("load", evtCtx);
+    };
+    var rebuild = function rebuild(list) {
+      store.reload(list || []);
+      store.refreshNodes();
+      if (Array.isArray(tValue.value)) {
+        store.setChecked(tValue.value);
+      }
+      updateExpanded();
+      if (Array.isArray(tActived.value)) {
+        store.setActived(tActived.value);
+      }
+      store.refreshState();
+    };
+    function initStore() {
+      store.setConfig({
+        keys: keys
+      });
+      updateStoreConfig();
+      store.append(props.data || []);
+      store.refreshNodes();
+      if (Array.isArray(tValue.value)) {
+        store.setChecked(tValue.value);
+      }
+      updateExpanded();
+      if (Array.isArray(tActived.value)) {
+        store.setActived(tActived.value);
+      }
+      store.emitter.on("load", handleLoad);
+      store.emitter.on("update", expandFilterPath);
+    }
+    initStore();
+    state.setStore(store);
+    Vue.watch(function () {
+      return _toConsumableArray(tValue.value || []);
+    }, function (nVal) {
+      store.replaceChecked(nVal);
+    });
+    Vue.watch(function () {
+      return _toConsumableArray(tExpanded.value || []);
+    }, function (nVal) {
+      store.replaceExpanded(nVal);
+    });
+    Vue.watch(function () {
+      return _toConsumableArray(tActived.value || []);
+    }, function (nVal) {
+      store.replaceActived(nVal);
+    });
+    Vue.watch(refProps.filter, function (nVal, previousVal) {
+      checkFilterExpand(nVal, previousVal);
+    });
+    Vue.watch(refProps.keys, function (keys2) {
+      store.setConfig({
+        keys: keys2
+      });
+    });
     return {
-      drag: drag
+      store: store,
+      rebuild: rebuild,
+      checkFilterExpand: checkFilterExpand,
+      updateStoreConfig: updateStoreConfig,
+      updateExpanded: updateExpanded,
+      expandFilterPath: expandFilterPath
+    };
+  }
+
+  function formatCSSUnit$1(unit) {
+    if (!unit) return unit;
+    return isNaN(Number(unit)) ? unit : "".concat(unit, "px");
+  }
+  function useTreeStyles(state) {
+    var props = state.props;
+    var componentName = usePrefixClass("tree").value;
+    var classPrefix = usePrefixClass().value;
+    var virtualConfig = state.virtualConfig,
+      isScrolling = state.isScrolling,
+      refProps = state.refProps;
+    var height = refProps.height,
+      maxHeight = refProps.maxHeight;
+    var treeClasses = Vue.computed(function () {
+      var list = [componentName];
+      var disabled = props.disabled,
+        hover = props.hover,
+        transition = props.transition,
+        checkable = props.checkable,
+        draggable = props.draggable,
+        expandOnClickNode = props.expandOnClickNode,
+        scroll = props.scroll;
+      if (disabled) {
+        list.push("".concat(classPrefix, "-is-disabled"));
+      }
+      if (hover) {
+        list.push("".concat(componentName, "--hoverable"));
+      }
+      if (checkable) {
+        list.push("".concat(componentName, "--checkable"));
+      }
+      if (draggable) {
+        list.push("".concat(componentName, "--draggable"));
+      }
+      if (transition) {
+        list.push("".concat(componentName, "--transition"));
+      }
+      if (expandOnClickNode) {
+        list.push("".concat(componentName, "--block-node"));
+      }
+      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
+      if (isVirtual) {
+        list.push("".concat(componentName, "__vscroll"));
+        if (isScrolling.value) {
+          list.push("".concat(componentName, "--scrolling"));
+        }
+      } else if (scroll && scroll.type === "lazy") {
+        list.push("".concat(componentName, "__lazyload"));
+      }
+      return list;
+    });
+    var treeContentStyles = Vue.computed(function () {
+      return {
+        height: formatCSSUnit$1(height.value),
+        maxHeight: formatCSSUnit$1(maxHeight.value),
+        overflowY: formatCSSUnit$1(height.value) || formatCSSUnit$1(maxHeight.value) ? "auto" : void 0
+      };
+    });
+    var scrollStyles = Vue.computed(function () {
+      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
+      var translateY = isVirtual ? virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.translateY.value : 0;
+      var transform = "translateY(".concat(translateY, "px)");
+      var posStyle = {
+        transform: transform,
+        "-ms-transform": transform,
+        "-moz-transform": transform,
+        "-webkit-transform": transform
+      };
+      return posStyle;
+    });
+    var cursorStyles = Vue.computed(function () {
+      var isVirtual = virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.isVirtualScroll.value;
+      var translateY = isVirtual ? virtualConfig === null || virtualConfig === void 0 ? void 0 : virtualConfig.translateY.value : 0;
+      var translate = "translate(0, ".concat(translateY, "px)");
+      return {
+        transform: translate,
+        "-ms-transform": translate,
+        "-moz-transform": translate,
+        "-webkit-transform": translate
+      };
+    });
+    return {
+      treeClasses: treeClasses,
+      treeContentStyles: treeContentStyles,
+      scrollStyles: scrollStyles,
+      cursorStyles: cursorStyles
     };
   }
 
+  var props$s = {
+    activable: Boolean,
+    activeMultiple: Boolean,
+    actived: {
+      type: Array,
+      "default": void 0
+    },
+    defaultActived: {
+      type: Array
+    },
+    allowDrop: {
+      type: Function
+    },
+    allowFoldNodeOnFilter: Boolean,
+    checkProps: {
+      type: Object
+    },
+    checkStrictly: Boolean,
+    checkable: Boolean,
+    data: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    disableCheck: {
+      type: [Boolean, Function],
+      "default": false
+    },
+    disabled: Boolean,
+    draggable: Boolean,
+    empty: {
+      type: [String, Function],
+      "default": ""
+    },
+    expandAll: Boolean,
+    expandLevel: {
+      type: Number,
+      "default": 0
+    },
+    expandMutex: Boolean,
+    expandOnClickNode: Boolean,
+    expandParent: Boolean,
+    expanded: {
+      type: Array,
+      "default": void 0
+    },
+    defaultExpanded: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    filter: {
+      type: Function
+    },
+    height: {
+      type: [String, Number]
+    },
+    hover: Boolean,
+    icon: {
+      type: [Boolean, Function],
+      "default": true
+    },
+    keys: {
+      type: Object
+    },
+    label: {
+      type: [String, Boolean, Function],
+      "default": true
+    },
+    lazy: {
+      type: Boolean,
+      "default": true
+    },
+    line: {
+      type: [Boolean, Function],
+      "default": false
+    },
+    load: {
+      type: Function
+    },
+    maxHeight: {
+      type: [String, Number]
+    },
+    operations: {
+      type: Function
+    },
+    scroll: {
+      type: Object
+    },
+    transition: {
+      type: Boolean,
+      "default": true
+    },
+    value: {
+      type: Array,
+      "default": void 0
+    },
+    modelValue: {
+      type: Array,
+      "default": void 0
+    },
+    defaultValue: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    valueMode: {
+      type: String,
+      "default": "onlyLeaf",
+      validator: function validator(val) {
+        if (!val) return true;
+        return ["onlyLeaf", "parentFirst", "all"].includes(val);
+      }
+    },
+    onActive: Function,
+    onChange: Function,
+    onClick: Function,
+    onDragEnd: Function,
+    onDragLeave: Function,
+    onDragOver: Function,
+    onDragStart: Function,
+    onDrop: Function,
+    onExpand: Function,
+    onLoad: Function,
+    onScroll: Function
+  };
+
   function ownKeys$18(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$17(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$18(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$18(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   function _isSlot$h(s) {
@@ -46600,7 +46608,9 @@
           var itemData = _objectSpread$17(_objectSpread$17({}, item.data), {}, {
             value: value2
           });
-          delete itemData.children;
+          if (itemData.children !== true) {
+            delete itemData.children;
+          }
           nodeMap[value2] = itemData;
           var parent = item.getParent();
           if (!parent) {
@@ -50232,9 +50242,9 @@
               return [content];
             }
           }));
-          return [outAvatar];
+          return outAvatar;
         }
-        return [children];
+        return children;
       };
       var getEllipsisContent = function getEllipsisContent(children) {
         return renderTNodeJSX("collapseAvatar") || "+".concat(children.length - props2.max);
@@ -50244,7 +50254,7 @@
         var cascading = props2.cascading,
           max = props2.max;
         var groupClass = ["".concat(COMPONENT_NAME.value), _defineProperty$3(_defineProperty$3({}, "".concat(AVATAR_NAME.value, "--offset-right"), cascading === "right-up"), "".concat(AVATAR_NAME.value, "--offset-left"), cascading === "left-up")];
-        var content = max && max >= 0 ? [renderEllipsisAvatar(children)] : [children];
+        var content = max && max >= 0 ? [renderEllipsisAvatar(getChildren(children))] : [children];
         return Vue.createVNode("div", {
           "class": groupClass
         }, [content]);
@@ -52976,6 +52986,10 @@
   var Dialog = withInstall$1(_Dialog);
 
   var props$h = {
+    attach: {
+      type: [String, Function],
+      "default": "body"
+    },
     closeBtn: {
       type: [Boolean, Function],
       "default": true
@@ -53346,6 +53360,9 @@
         setVisibleValue = _useVModel2[1];
       var animationEnd = Vue.ref(true);
       var animationTimer = Vue.ref();
+      var teleportElement = useTeleport(function () {
+        return props2.attach;
+      });
       var wrapClass = Vue.computed(function () {
         return [COMPONENT_NAME.value, "".concat(COMPONENT_NAME.value, "-preview-image"), _defineProperty$3({}, "".concat(classPrefix.value, "-is-hide"), !visibleValue.value)];
       });
@@ -53570,7 +53587,8 @@
             open: openHandler
           }
         }), Vue.createVNode(Vue.Teleport, {
-          "to": "body"
+          "disabled": !props2.attach || !teleportElement.value,
+          "to": teleportElement.value
         }, {
           "default": function _default() {
             return [Vue.createVNode(Vue.Transition, null, {
@@ -57839,10 +57857,13 @@
             var customClasses = formatClassNames(col.className, _objectSpread$x(_objectSpread$x({}, colParams), {}, {
               type: "th"
             }));
+            var thCustomClasses = formatClassNames(col.thClassName, _objectSpread$x(_objectSpread$x({}, colParams), {}, {
+              type: "th"
+            }));
             var isLeftFixedActive = _this.showColumnShadow.left && col.fixed === "left";
             var isRightFixedActive = _this.showColumnShadow.right && col.fixed === "right";
             var canDragSort = _this.thDraggable && !(isLeftFixedActive || isRightFixedActive);
-            var thClasses = [thStyles.classes, customClasses, col.thClassName, _defineProperty$3(_defineProperty$3(_defineProperty$3(_defineProperty$3({}, _this.tableHeaderClasses.thBordered, thBorderMap.get(col)), "".concat(_this.classPrefix, "-table__th-").concat(col.colKey), col.colKey), _this.tdAlignClasses[col.align], col.align && col.align !== "left"), _this.tableDraggableClasses.dragSortTh, canDragSort)];
+            var thClasses = [thStyles.classes, customClasses, thCustomClasses, _defineProperty$3(_defineProperty$3(_defineProperty$3(_defineProperty$3({}, _this.tableHeaderClasses.thBordered, thBorderMap.get(col)), "".concat(_this.classPrefix, "-table__th-").concat(col.colKey), col.colKey), _this.tdAlignClasses[col.align], col.align && col.align !== "left"), _this.tableDraggableClasses.dragSortTh, canDragSort)];
             var withoutChildren = !((_col$children = col.children) !== null && _col$children !== void 0 && _col$children.length);
             var width = withoutChildren && thWidthList !== null && thWidthList !== void 0 && thWidthList[col.colKey] ? "".concat(thWidthList === null || thWidthList === void 0 ? void 0 : thWidthList[col.colKey], "px") : void 0;
             var styles = _objectSpread$x(_objectSpread$x({}, thStyles.style || {}), {}, {
@@ -71327,7 +71348,7 @@
   }
   var tdesign = {
     install: install,
-    version: "1.9.8-alpha.1"
+    version: "1.9.8-alpha.2"
   };
 
   if (typeof console !== "undefined" && console.warn && typeof window !== "undefined") {