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

package/vue-devui.es.js

@@ -8147,7 +8147,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;
     });
   };
@@ -8849,7 +8849,8 @@ function useIconDom(props, ctx2) {
       "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
       "style": {
         width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
       }
     }, ctx2.attrs), null);
   };
@@ -11692,7 +11693,6 @@ const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTim
   };
   const resetTimeValue = (time) => {
     const timeValueArr = time.split(":");
-    minTime.split(":");
     let hh = 0;
     let mm = 0;
     let ss = 0;
@@ -11782,11 +11782,15 @@ const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTim
     }
   };
   const activeTimeFun = (e, item, index2) => {
+    var _a, _b;
     if (item.isDisabled) {
       return false;
     } else {
       setTimeActive(item, index2);
-      e.target.parentElement.parentElement.scrollTop = index2 * itemHeight;
+      if ((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.parentElement) {
+        const pdom = (_b = e == null ? void 0 : e.target) == null ? void 0 : _b.parentElement;
+        pdom && pdom.parentElement && (pdom.parentElement.scrollTop = index2 * itemHeight);
+      }
     }
     ctx2.emit("change", { activeHour, activeMinute, activeSecond });
   };
@@ -11856,33 +11860,38 @@ const timePickerProps = {
   }
 };
 function useTimeScroll() {
-  const scrollBoxDom = ref();
-  const scrollContentDom = ref();
-  const scrollThumbDom = ref();
-  const scrollTrackDom = ref();
+  const scrollBoxDom = ref(null);
+  const scrollContentDom = ref(null);
+  const scrollThumbDom = ref(null);
+  const scrollTrackDom = ref(null);
   const isDown = ref(false);
   const getScrollHeight = () => {
-    const thumbHeight = scrollContentDom.value.clientHeight / scrollContentDom.value.scrollHeight * 100;
-    scrollThumbDom.value.style.height = thumbHeight + "%";
+    var _a, _b;
+    const thumbHeight = (((_a = scrollContentDom.value) == null ? void 0 : _a.clientHeight) || 0) / (((_b = scrollContentDom.value) == null ? void 0 : _b.scrollHeight) || 0) * 100;
+    scrollThumbDom.value && (scrollThumbDom.value.style.height = thumbHeight + "%");
   };
   const setVirtualScroll = () => {
-    const thumbMoveY = scrollContentDom.value.scrollTop * 100 / scrollContentDom.value.clientHeight;
-    scrollThumbDom.value.style.transform = `translateY(${thumbMoveY}%)`;
+    var _a, _b;
+    const thumbMoveY = (((_a = scrollContentDom.value) == null ? void 0 : _a.scrollTop) || 0) * 100 / (((_b = scrollContentDom.value) == null ? void 0 : _b.clientHeight) || 0);
+    scrollThumbDom.value && (scrollThumbDom.value.style.transform = `translateY(${thumbMoveY}%)`);
   };
   const clickTrackFun = (e) => {
-    const offsetNum = scrollTrackDom.value.getBoundingClientRect().top - e.clientY;
+    var _a, _b, _c, _d, _e;
+    const offsetNum = (((_c = (_b = (_a = scrollTrackDom.value) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a)) == null ? void 0 : _c.top) || 0) - e.clientY;
     const offset2 = Math.abs(offsetNum > 0 ? 0 : offsetNum);
-    const thumbCenter = scrollThumbDom.value.offsetHeight / 2;
-    const thumbPosition = (offset2 - thumbCenter) * 100 / scrollContentDom.value.offsetHeight;
-    scrollContentDom.value.scrollTop = thumbPosition * scrollContentDom.value.scrollHeight / 100;
-    scrollContentDom.value.style.top = scrollContentDom.value.scrollTop + "px";
+    const thumbCenter = (((_d = scrollThumbDom.value) == null ? void 0 : _d.offsetHeight) || 0) / 2;
+    const thumbPosition = (offset2 - thumbCenter) * 100 / (((_e = scrollContentDom.value) == null ? void 0 : _e.offsetHeight) || 0);
+    if (scrollContentDom.value) {
+      scrollContentDom.value.scrollTop = thumbPosition * scrollContentDom.value.scrollHeight / 100;
+      scrollContentDom.value.style.top = scrollContentDom.value.scrollTop + "px";
+    }
   };
   const thumbMouseMove = (e) => {
     const path = e.composedPath && e.composedPath() || e.path;
-    if (path.includes(scrollBoxDom.value) || isDown.value) {
-      scrollTrackDom.value.style.opacity = 1;
+    if (scrollBoxDom.value && path.includes(scrollBoxDom.value) || isDown.value) {
+      scrollTrackDom.value && (scrollTrackDom.value.style.opacity = "1");
     } else {
-      scrollTrackDom.value.style.opacity = 0;
+      scrollTrackDom.value && (scrollTrackDom.value.style.opacity = "0");
     }
     if (!isDown.value) {
       return;
@@ -11891,7 +11900,7 @@ function useTimeScroll() {
   };
   const mouseDownThum = () => {
     isDown.value = true;
-    scrollTrackDom.value.style.opacity = 1;
+    scrollTrackDom.value && (scrollTrackDom.value.style.opacity = "1");
   };
   const mouseOutThum = (e) => {
     isDown.value = false;
@@ -11959,18 +11968,20 @@ var TimeScroll = defineComponent({
     } = useTimeScroll();
     const marginRight = getScrollWidth();
     onMounted(() => {
+      var _a, _b, _c;
       getScrollWidth();
       getScrollHeight();
-      scrollBoxDom.value.addEventListener("click", setVirtualScroll);
-      scrollContentDom.value.addEventListener("scroll", setVirtualScroll);
-      scrollThumbDom.value.addEventListener("mousedown", mouseDownThum);
+      (_a = scrollBoxDom.value) == null ? void 0 : _a.addEventListener("click", setVirtualScroll);
+      (_b = scrollContentDom.value) == null ? void 0 : _b.addEventListener("scroll", setVirtualScroll);
+      (_c = scrollThumbDom.value) == null ? void 0 : _c.addEventListener("mousedown", mouseDownThum);
       document.addEventListener("mouseup", mouseOutThum);
       document.addEventListener("mousemove", thumbMouseMove);
     });
     onBeforeUnmount(() => {
-      scrollBoxDom.value.removeEventListener("click", setVirtualScroll);
-      scrollContentDom.value.removeEventListener("scroll", setVirtualScroll);
-      scrollThumbDom.value.removeEventListener("mousedown", mouseDownThum);
+      var _a, _b, _c;
+      (_a = scrollBoxDom.value) == null ? void 0 : _a.removeEventListener("click", setVirtualScroll);
+      (_b = scrollContentDom.value) == null ? void 0 : _b.removeEventListener("scroll", setVirtualScroll);
+      (_c = scrollThumbDom.value) == null ? void 0 : _c.removeEventListener("mousedown", mouseDownThum);
     });
     onUnmounted(() => {
       document.removeEventListener("mouseup", mouseOutThum);
@@ -12865,7 +12876,7 @@ var DatePickerPro = defineComponent({
       onSelectedDate,
       handlerClearTime
     } = usePickerPro(props, ctx2, t);
-    const position = ref(["bottom-start"]);
+    const position = ref(["bottom-start", "top-start"]);
     return () => {
       var _a, _b;
       const vSlots = {
@@ -13092,7 +13103,7 @@ var DRangeDatePickerPro = defineComponent({
       handlerClearTime,
       onChangeRangeFocusType
     } = useRangePickerPro(props, ctx2);
-    const position = ref(["bottom-start"]);
+    const position = ref(["bottom-start", "top-start"]);
     return () => {
       var _a, _b;
       const vSlots = {
@@ -13439,7 +13450,14 @@ function subscribeEvent(dom, type4, callback) {
     dom == null ? void 0 : dom.removeEventListener(type4, callback);
   };
 }
-const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
+const useDropdownEvent = ({
+  id,
+  isOpen,
+  origin,
+  dropdownRef,
+  props,
+  emit
+}) => {
   let overlayEnter = false;
   let originEnter = false;
   const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
@@ -13852,7 +13870,7 @@ const useInput = (inputValue, ctx2) => {
     handleInput
   };
 };
-const useLazyLoad = (dropdownRef, inputValue, filterOtion, ctx2) => {
+const useLazyLoad$1 = (dropdownRef, inputValue, filterOtion, ctx2) => {
   const loadMore = () => {
     const dropdownVal = dropdownRef.value;
     if (filterOtion !== false) {
@@ -13948,11 +13966,11 @@ const useCacheFilteredOptions = (filteredOptions) => {
   const cacheFilteredOptions = computed(() => {
     const map = /* @__PURE__ */ new Map();
     filteredOptions.value.forEach((item) => {
-      map.set(item.label, item.value);
+      map.set(item, item.value);
     });
     return map;
   });
-  const getOptionValue = (label) => cacheFilteredOptions.value.get(label);
+  const getOptionValue = (option2) => cacheFilteredOptions.value.get(option2);
   return {
     getOptionValue
   };
@@ -14015,11 +14033,11 @@ var EditableSelect = defineComponent({
     };
     const {
       loadMore
-    } = useLazyLoad(dropdownRef, inputValue, props.filterOption, ctx2);
+    } = useLazyLoad$1(dropdownRef, inputValue, props.filterOption, ctx2);
     const {
       handleInput
     } = useInput(inputValue, ctx2);
-    const handleClick = (option2, index2) => {
+    const handleClick = (option2, index2, curSelectedIndex) => {
       const {
         optionDisabledKey: disabledKey
       } = props;
@@ -14028,8 +14046,8 @@ var EditableSelect = defineComponent({
       }
       inputValue.value = option2.label;
       cacheInput.value = option2.label;
-      selectedIndex.value = index2;
-      const value = getOptionValue(option2.label);
+      curSelectedIndex.value = index2;
+      const value = getOptionValue(option2);
       ctx2.emit("update:modelValue", value + "");
       closeMenu();
     };
@@ -14037,7 +14055,7 @@ var EditableSelect = defineComponent({
       handleKeydown,
       hoverIndex,
       selectedIndex
-    } = useKeyboardSelect(dropdownRef, visible, inputValue, cacheInput, filteredOptions, props.optionDisabledKey, props.filterOption, loading2, handleClick, closeMenu, toggleMenu);
+    } = useKeyboardSelect(dropdownRef, visible, inputValue, cacheInput, filteredOptions, props.optionDisabledKey, props.filterOption, loading2, (option2, index2) => handleClick(option2, index2, selectedIndex), closeMenu, toggleMenu);
     const getItemCls = (option2, index2) => {
       const {
         optionDisabledKey: disabledKey
@@ -14107,7 +14125,7 @@ var EditableSelect = defineComponent({
                 "class": getItemCls(option2, index2),
                 "onClick": (e) => {
                   e.stopPropagation();
-                  handleClick(option2, index2);
+                  handleClick(option2, index2, selectedIndex);
                 }
               }, [ctx2.slots.item ? ctx2.slots.item(option2) : option2.label]);
             }), withDirectives(createVNode("li", {
@@ -15333,15 +15351,12 @@ var InputNumber = defineComponent({
     }), null)])]);
   }
 });
-InputNumber.install = function(app) {
-  app.component(InputNumber.name, InputNumber);
-};
 var InputNumberInstall = {
   title: "InputNumber \u6570\u5B57\u8F93\u5165\u6846",
   category: "\u6570\u636E\u5F55\u5165",
   status: "50%",
   install(app) {
-    app.use(InputNumber);
+    app.component(InputNumber.name, InputNumber);
   }
 };
 var layout = "";
@@ -15792,15 +15807,20 @@ var Close = defineComponent({
   }
 });
 const ns$6 = useNamespace("notification");
+const XLINK = {
+  "xmlns:xlink": "http://www.w3.org/1999/xlink"
+};
+const XLINK_HREF$1 = {
+  "xlink:href": "#path-s"
+};
 function SuccessIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
     "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  }, [createVNode("defs", null, [createVNode("polygon", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, XLINK), [createVNode("defs", null, [createVNode("polygon", {
     "id": "path-s",
     "points": "6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391            6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
   }, null)]), createVNode("g", {
@@ -15812,30 +15832,26 @@ function SuccessIcon() {
   }, [createVNode("mask", {
     "id": "mask-2",
     "fill": "white"
-  }, [createVNode("use", {
-    "xlink:href": "#path-s"
-  }, null)]), createVNode("use", {
+  }, [createVNode("use", XLINK_HREF$1, null)]), createVNode("use", mergeProps({
     "id": "Mask",
-    "class": ns$6.e("image-success-path"),
-    "xlink:href": "#path-s"
-  }, null)])]);
+    "class": ns$6.e("image-success-path")
+  }, XLINK_HREF$1), null)])]);
 }
 function WarningIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
     "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  }, [createVNode("g", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, XLINK), [createVNode("g", {
     "stroke": "none",
     "stroke-width": "1",
     "fill": "none",
     "fill-rule": "evenodd"
   }, [createVNode("path", {
     "class": ns$6.e("warning-outer"),
-    "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
+    "d": "M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117            15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,           15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873            0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,           0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,           0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
   }, null), createVNode("path", {
     "class": ns$6.e("warning-inner"),
     "stroke-width": "0.3",
@@ -15844,14 +15860,13 @@ function WarningIcon() {
   }, null)])]);
 }
 function InfoIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
     "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  }, [createVNode("g", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, XLINK), [createVNode("g", {
     "id": "info",
     "stroke": "none",
     "stroke-width": "1",
@@ -15864,14 +15879,13 @@ function InfoIcon() {
   }, null)])]);
 }
 function ErrorIcon() {
-  return createVNode("svg", {
+  return createVNode("svg", mergeProps({
     "width": "16px",
     "height": "16px",
     "viewBox": "0 0 16 16",
     "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg",
-    "xmlns:xlink": "http://www.w3.org/1999/xlink"
-  }, [createVNode("defs", null, [createVNode("polygon", {
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, XLINK), [createVNode("defs", null, [createVNode("polygon", {
     "id": "path-e",
     "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085            10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425            8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
   }, null)]), createVNode("g", {
@@ -15883,13 +15897,10 @@ function ErrorIcon() {
   }, [createVNode("mask", {
     "id": "mask-2",
     "fill": "white"
-  }, [createVNode("use", {
-    "xlink:href": "#path-e"
-  }, null)]), createVNode("use", {
+  }, [createVNode("use", XLINK_HREF$1, null)]), createVNode("use", mergeProps({
     "id": "Mask",
-    "class": ns$6.e("image-error-path"),
-    "xlink:href": "#path-e"
-  }, null)])]);
+    "class": ns$6.e("image-error-path")
+  }, XLINK_HREF$1), null)])]);
 }
 var TypeIcon = defineComponent({
   props: {
@@ -15924,7 +15935,7 @@ function useEvent(props, emit) {
   let timestamp;
   const close2 = () => {
     var _a;
-    clearTimeout(timer);
+    timer && clearTimeout(timer);
     timer = null;
     (_a = props.onClose) == null ? void 0 : _a.call(props);
     emit("update:modelValue", false);
@@ -16051,7 +16062,7 @@ class NotificationService {
     initInstance(props, content2);
     props.modelValue = true;
     clearTimeout(timer);
-    if (options.duration) {
+    if (options.duration && props.onClose) {
       timer = setTimeout(props.onClose, options.duration);
     }
   }
@@ -17930,7 +17941,7 @@ var Search = defineComponent({
         onFocus,
         onBlur
       };
-      return createVNode("div", {
+      return createVNode("label", {
         "class": rootClasses.value
       }, [props.iconPosition === "left" && createVNode("div", {
         "class": ns2.e("icon"),
@@ -17983,6 +17994,14 @@ function useSelect$1(props, ctx2, focus, blur, isSelectFocus, t) {
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
   const selectSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
   const isObjectOption = ref(false);
+  const originRef = ref();
+  const dropdownWidth = computed(() => {
+    var _a;
+    if (!((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth)) {
+      return "100%";
+    }
+    return originRef.value.clientWidth + "px";
+  });
   const isOpen = ref(false);
   const toggleChange = (bool) => {
     if (selectDisabled.value) {
@@ -18132,8 +18151,8 @@ function useSelect$1(props, ctx2, focus, blur, isSelectFocus, t) {
       getMultipleSelected(checkedItems);
     } else {
       ctx2.emit("update:modelValue", item.value);
-      toggleChange(false);
       getSingleSelected(item);
+      toggleChange(false);
     }
   };
   const handleClose = () => {
@@ -18236,6 +18255,7 @@ function useSelect$1(props, ctx2, focus, blur, isSelectFocus, t) {
     selectDisabled,
     selectSize,
     containerRef,
+    originRef,
     dropdownRef,
     isOpen,
     selectCls,
@@ -18246,6 +18266,7 @@ function useSelect$1(props, ctx2, focus, blur, isSelectFocus, t) {
     emptyText,
     isLoading,
     isShowEmptyText,
+    dropdownWidth,
     onClick,
     handleClear,
     valueChange,
@@ -18762,7 +18783,9 @@ var SelectContent = defineComponent({
         "trigger": "hover",
         "disabled": isDisabledTooltip.value
       }, {
-        default: () => createVNode(Tag, null, {
+        default: () => createVNode(Tag, {
+          "size": tagSize.value
+        }, {
           default: () => [`+${selectedData.value.length - 1}`]
         }),
         content: () => createVNode("div", null, [selectedData.value.map((item) => createVNode(Tag, {
@@ -18851,6 +18874,7 @@ var Select = defineComponent({
       selectDisabled,
       selectSize,
       containerRef,
+      originRef,
       dropdownRef,
       isOpen,
       selectCls,
@@ -18861,6 +18885,7 @@ var Select = defineComponent({
       emptyText,
       isLoading,
       isShowEmptyText,
+      dropdownWidth,
       onClick,
       valueChange,
       handleClear,
@@ -18886,6 +18911,11 @@ var Select = defineComponent({
       blur,
       toggleChange
     });
+    const isRender = ref(false);
+    const position = ref(["bottom-start", "top-start"]);
+    onMounted(() => {
+      isRender.value = true;
+    });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
       selectSize,
@@ -18905,43 +18935,61 @@ var Select = defineComponent({
         "class": selectCls.value,
         "ref": containerRef,
         "onClick": onClick
+      }, [createVNode("div", {
+        "ref": originRef
       }, [createVNode(SelectContent, {
         "ref": selectRef,
         "value": inputValue.value
-      }, null), createVNode(Transition, {
-        "name": "fade",
-        "ref": dropdownRef
+      }, null)]), createVNode(Transition, {
+        "name": "fade"
       }, {
-        default: () => {
-          var _a, _b, _c, _d;
-          return [withDirectives(createVNode("div", {
-            "class": dropdownCls
-          }, [withDirectives(createVNode("ul", {
-            "class": listCls
-          }, [isShowCreateOption.value && createVNode(Option, {
-            "value": filterQuery.value,
-            "name": filterQuery.value,
-            "create": true
-          }, {
-            default: () => [props.multiple ? createVNode(Checkbox, {
-              "modelValue": false,
-              "label": filterQuery.value
-            }, null) : filterQuery.value]
-          }), ((_a = ctx2.slots) == null ? void 0 : _a.default) && ctx2.slots.default(), !((_b = ctx2.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item, i) => createVNode(Option, {
-            "key": i,
-            "value": item.value,
-            "name": item.name,
-            "disabled": isDisabled(item)
-          }, {
-            default: () => [props.multiple ? createVNode(Checkbox, {
-              "modelValue": item._checked,
-              "label": item.name,
+        default: () => [createVNode(FlexibleOverlay, {
+          "modelValue": isRender.value,
+          "onUpdate:modelValue": ($event) => isRender.value = $event,
+          "ref": dropdownRef,
+          "origin": originRef.value,
+          "align": "start",
+          "position": position.value,
+          "style": {
+            visibility: isOpen.value ? "visible" : "hidden",
+            "z-index": isOpen.value ? 1e3 : -1
+          }
+        }, {
+          default: () => {
+            var _a, _b, _c, _d;
+            return [createVNode("div", {
+              "class": dropdownCls,
+              "style": {
+                width: `${dropdownWidth.value}`,
+                visibility: isOpen.value ? "visible" : "hidden"
+              }
+            }, [withDirectives(createVNode("ul", {
+              "class": listCls
+            }, [isShowCreateOption.value && createVNode(Option, {
+              "value": filterQuery.value,
+              "name": filterQuery.value,
+              "create": true
+            }, {
+              default: () => [props.multiple ? createVNode(Checkbox, {
+                "modelValue": false,
+                "label": filterQuery.value
+              }, null) : filterQuery.value]
+            }), ((_a = ctx2.slots) == null ? void 0 : _a.default) && ctx2.slots.default(), !((_b = ctx2.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item, i) => createVNode(Option, {
+              "key": i,
+              "value": item.value,
+              "name": item.name,
               "disabled": isDisabled(item)
-            }, null) : item.name || item.value]
-          }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx2.slots) == null ? void 0 : _c.empty) && ctx2.slots.empty(), !((_d = ctx2.slots) == null ? void 0 : _d.empty) && createVNode("p", {
-            "class": dropdownEmptyCls
-          }, [emptyText.value])])]), [[vShow, isOpen.value]])];
-        }
+            }, {
+              default: () => [props.multiple ? createVNode(Checkbox, {
+                "modelValue": item._checked,
+                "label": item.name,
+                "disabled": isDisabled(item)
+              }, null) : item.name || item.value]
+            }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx2.slots) == null ? void 0 : _c.empty) && ctx2.slots.empty(), !((_d = ctx2.slots) == null ? void 0 : _d.empty) && createVNode("p", {
+              "class": dropdownEmptyCls
+            }, [emptyText.value])])])];
+          }
+        })]
       })]);
     };
   }
@@ -21160,6 +21208,32 @@ function useExpand(dataSource, table2) {
     toggleRowExpansion
   };
 }
+function useEditTableCell() {
+  const tableInstance = getCurrentInstance();
+  const rowKey = tableInstance.props.rowKey || "";
+  const tableCellModeMap = ref(/* @__PURE__ */ new Map());
+  const setCellMode = (row2, rowIndex, fields, cellMode) => {
+    if (Array.isArray(fields)) {
+      fields.forEach((item) => {
+        const cellKey = `${getRowIdentity(row2, rowKey, rowIndex)}-${item}-cell`;
+        tableCellModeMap.value.set(cellKey, cellMode);
+      });
+    } else {
+      const cellKey = `${getRowIdentity(row2, rowKey, rowIndex)}-${fields}-cell`;
+      tableCellModeMap.value.set(cellKey, cellMode);
+    }
+  };
+  const resetCellMode = () => {
+    for (const item of tableCellModeMap.value.keys()) {
+      tableCellModeMap.value.set(item, "readonly");
+    }
+  };
+  return {
+    tableCellModeMap,
+    setCellMode,
+    resetCellMode
+  };
+}
 function replaceColumn(array4, column2) {
   return array4.map((item) => {
     var _a;
@@ -21192,6 +21266,7 @@ function createColumnGenerator() {
     });
   };
   const insertColumn = (column2, parent) => {
+    var _a;
     const array4 = unref(_columns);
     let newColumns = [];
     if (!parent) {
@@ -21201,7 +21276,7 @@ function createColumnGenerator() {
       if (parent && !parent.children) {
         parent.children = [];
       }
-      parent.children.push(column2);
+      (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.push(column2);
       newColumns = replaceColumn(array4, parent);
     }
     sortColumn();
@@ -21370,6 +21445,7 @@ function createStore(dataSource, table2) {
   const { sortData, thList } = createSorter(dataSource, flatRows);
   const { isFixedLeft } = createFixedLogic(_columns);
   const { isRowExpanded, updateExpandRows, setExpandRows, toggleRowExpansion } = useExpand(_data, table2);
+  const { tableCellModeMap, setCellMode, resetCellMode } = useEditTableCell();
   watch(dataSource, (value) => {
     _data.value = [...value];
     updateExpandRows();
@@ -21388,7 +21464,8 @@ function createStore(dataSource, table2) {
       _halfChecked,
       isFixedLeft,
       thList,
-      firstDefaultColumn
+      firstDefaultColumn,
+      tableCellModeMap
     },
     insertColumn,
     sortColumn,
@@ -21403,7 +21480,9 @@ function createStore(dataSource, table2) {
     setExpandRows,
     toggleRowExpansion,
     toggleRowSelection,
-    updateFirstDefaultColumn
+    updateFirstDefaultColumn,
+    setCellMode,
+    resetCellMode
   };
 }
 var ColGroup = defineComponent({
@@ -21428,6 +21507,9 @@ const sortProps = {
   }
 };
 var sort = "";
+const XLINK_HREF = {
+  "xlink:href": "#sort-svg-path-1"
+};
 var Sort = defineComponent({
   props: sortProps,
   emits: ["sort"],
@@ -21486,10 +21568,9 @@ var Sort = defineComponent({
       "stroke-width": "1",
       "fill": "none",
       "fill-rule": "evenodd"
-    }, [createVNode("use", {
-      "fill-rule": "evenodd",
-      "xlink:href": "#sort-svg-path-1"
-    }, null), createVNode("polygon", {
+    }, [createVNode("use", mergeProps({
+      "fill-rule": "evenodd"
+    }, XLINK_HREF), null), createVNode("polygon", {
       "points": "8 4 11 7 5 7"
     }, null), createVNode("polygon", {
       "points": "8 12 5 9 11 9"
@@ -21879,14 +21960,21 @@ function useDragColumnWidth(elementRef, column2) {
   };
   return { resizing, dragClass, onMousedown: onMousedown2 };
 }
+const headerThProps = {
+  column: {
+    type: Object,
+    required: true
+  },
+  colspan: {
+    type: Number
+  },
+  rowspan: {
+    type: Number
+  }
+};
 var TH = defineComponent({
   name: "DTableHeaderTh",
-  props: {
-    column: {
-      type: Object,
-      required: true
-    }
-  },
+  props: headerThProps,
   setup(props, {
     expose
   }) {
@@ -21972,7 +22060,7 @@ function convertToRows(originColumns) {
       let colSpan = 0;
       column2.children.forEach((subColumn) => {
         traverse(subColumn, column2);
-        colSpan += subColumn.colSpan;
+        colSpan += subColumn.colSpan || 0;
       });
       column2.colSpan = colSpan;
     } else {
@@ -21990,7 +22078,7 @@ function convertToRows(originColumns) {
   const allColumns = getAllColumns(originColumns);
   allColumns.forEach((column2) => {
     if (!column2.children) {
-      column2.rowSpan = maxLevel - column2.level + 1;
+      column2.rowSpan = maxLevel - (column2.level || 0) + 1;
     } else {
       column2.rowSpan = 1;
       column2.children.forEach((col2) => col2.isSubColumn = true);
@@ -22034,6 +22122,12 @@ const bodyTdProps = {
     type: Object,
     default: () => ({})
   },
+  rowspan: {
+    type: Number
+  },
+  colspan: {
+    type: Number
+  },
   index: {
     type: Number,
     default: 0
@@ -22047,11 +22141,12 @@ var TooltipInstall = {
     app.component(Tooltip.name, Tooltip);
   }
 };
-function useBodyTd(props) {
+function useBodyTd(props, ctx2) {
   const tooltipContent = ref();
   const isShowTooltip = ref(false);
   const tdRef = ref();
   let observer;
+  const table2 = inject(TABLE_TOKEN);
   function getTooltipContent() {
     var _a, _b;
     return ((_a = tdRef.value) == null ? void 0 : _a.innerText) || ((_b = tdRef.value) == null ? void 0 : _b.textContent);
@@ -22065,24 +22160,50 @@ function useBodyTd(props) {
     range3.setEnd(tdRef.value, tdRef.value.childNodes.length);
     const rangeWidth = range3.getBoundingClientRect().width;
     const padding = parseInt(window.getComputedStyle(tdRef.value)["paddingLeft"], 10) + parseInt(window.getComputedStyle(tdRef.value)["paddingRight"], 10);
-    isShowTooltip.value = props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth;
+    isShowTooltip.value = !!(props.column.showOverflowTooltip && rangeWidth + padding > tdRef.value.offsetWidth);
   }
   onMounted(() => {
     if (inBrowser && window.ResizeObserver && props.column.showOverflowTooltip) {
-      const observer2 = new window.ResizeObserver(shouldShowTooltip);
-      tdRef.value && observer2.observe(tdRef.value);
+      const innerObserver = new window.ResizeObserver(shouldShowTooltip);
+      tdRef.value && innerObserver.observe(tdRef.value);
     }
     tooltipContent.value = getTooltipContent();
   });
   onBeforeMount(() => {
     tdRef.value && observer.unobserve(tdRef.value);
   });
-  return { tdRef, isShowTooltip, tooltipContent };
+  onUpdated(() => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+  });
+  const getCellKsy = () => {
+    return `${getRowIdentity(props.row, table2.props.rowKey, props.index)}-${props.column.field}-cell`;
+  };
+  const cellMode = computed(() => {
+    const cellKey = getCellKsy();
+    const mode = table2.store.states.tableCellModeMap.value.get(cellKey);
+    return mode || "readonly";
+  });
+  const onCellClick = () => {
+    const modeMap = table2.store.states.tableCellModeMap.value;
+    const cellKey = getCellKsy();
+    for (const child of modeMap.keys()) {
+      modeMap.set(child, "readonly");
+    }
+    if (props.column.type === "editable" && modeMap.get(cellKey) === "edit") {
+      return;
+    }
+    ctx2.emit("cellClick");
+  };
+  return { tdRef, isShowTooltip, tooltipContent, cellMode, onCellClick };
 }
 var TD = defineComponent({
   name: "DTableBodyTd",
   inheritAttrs: false,
   props: bodyTdProps,
+  emits: ["cellClick"],
   setup(props, ctx2) {
     const column2 = toRef(props, "column");
     const table2 = inject(TABLE_TOKEN);
@@ -22093,8 +22214,10 @@ var TD = defineComponent({
     const {
       tdRef,
       isShowTooltip,
-      tooltipContent
-    } = useBodyTd(props);
+      tooltipContent,
+      cellMode,
+      onCellClick
+    } = useBodyTd(props, ctx2);
     return () => {
       return createVNode(Tooltip, {
         "content": tooltipContent.value,
@@ -22106,7 +22229,9 @@ var TD = defineComponent({
             "ref": tdRef,
             "class": stickyClass.value,
             "style": stickyStyle.value
-          }, ctx2.attrs), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index, table2.props)])];
+          }, ctx2.attrs, {
+            "onClick": onCellClick
+          }), [(_b = (_a = props.column).renderCell) == null ? void 0 : _b.call(_a, props.row, props.column, table2.store, props.index, table2.props, cellMode)])];
         }
       });
     };
@@ -22227,7 +22352,7 @@ var TableBody = defineComponent({
           "row": row2,
           "rowspan": rowspan,
           "colspan": colspan,
-          "onClick": () => onCellClick({
+          "onCellClick": () => onCellClick({
             rowIndex,
             columnIndex,
             column: column2,
@@ -22527,7 +22652,7 @@ const cellMap = {
     renderHeader() {
       return createVNode("span", null, null);
     },
-    renderCell(rowData, column2, store, rowIndex) {
+    renderCell(rowData, column2, store) {
       return createVNode(DIcon, {
         "name": "chevron-right",
         "class": "icon-expand-row",
@@ -22537,6 +22662,44 @@ const cellMap = {
       }, null);
     }
   },
+  editable: {
+    renderHeader(column2) {
+      var _a;
+      return h("span", {
+        class: "title"
+      }, (_a = column2.header) != null ? _a : "");
+    },
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx2) {
+      var _a, _b;
+      let columnValue;
+      if (cellMode.value === "edit") {
+        columnValue = ctx2.slots.cellEdit ? ctx2.slots.cellEdit({
+          row: rowData,
+          rowIndex
+        }) : "";
+      } else {
+        if (ctx2.slots.cell) {
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [ctx2.slots.cell({
+            row: rowData,
+            rowIndex
+          })]);
+        } else {
+          const value = column2.field ? rowData[column2.field] : "";
+          if (column2.formatter) {
+            columnValue = column2.formatter(rowData, column2, value, rowIndex);
+          }
+          columnValue = createVNode("div", {
+            "class": "cell-text"
+          }, [(_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : ""]);
+        }
+      }
+      return h("div", {
+        class: [ns$3.e("cell"), column2.type === "editable" && (cellMode == null ? void 0 : cellMode.value) === "readonly" && "editable-cell"]
+      }, columnValue);
+    }
+  },
   default: {
     renderHeader(column2) {
       var _a;
@@ -22544,7 +22707,7 @@ const cellMap = {
         class: "title"
       }, (_a = column2.header) != null ? _a : "");
     },
-    renderCell(rowData, column2, store, rowIndex, props, ctx2) {
+    renderCell(rowData, column2, store, rowIndex, props, cellMode, ctx2) {
       var _a, _b, _c;
       let columnValue;
       if (ctx2.slots.default) {
@@ -22625,11 +22788,11 @@ function createColumn(id, props, ctx2) {
     }
     return cellMap[type4.value || "default"].renderHeader(columnItem, store);
   }
-  function renderCell(rowData, columnItem, store, rowIndex, tableProps2) {
+  function renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode) {
     if (ctx2.slots.default && columnItem.type === "index") {
       return ctx2.slots.default({ row: rowData, rowIndex });
     }
-    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex, tableProps2, ctx2);
+    return cellMap[type4.value || "default"].renderCell(rowData, columnItem, store, rowIndex, tableProps2, cellMode, ctx2);
   }
   watch([field, header2, order], ([fieldVal, headerVal, orderVal]) => {
     column2.field = fieldVal;
@@ -22697,7 +22860,6 @@ var Column = defineComponent({
   props: tableColumnProps,
   emits: ["filter-change", "resize-start", "resizing", "resize-end"],
   setup(props, ctx2) {
-    toRefs(props);
     const owner = inject(TABLE_TOKEN);
     const isSubColumn = ref(false);
     const {
@@ -22713,8 +22875,8 @@ var Column = defineComponent({
       isSubColumn.value = owner !== parent;
     });
     onMounted(() => {
-      var _a;
-      const children = isSubColumn.value ? parent.vnode.el.children : (_a = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _a.children;
+      var _a, _b, _c;
+      const children = isSubColumn.value ? (_b = (_a = parent == null ? void 0 : parent.vnode) == null ? void 0 : _a.el) == null ? void 0 : _b.children : (_c = owner == null ? void 0 : owner.hiddenColumns.value) == null ? void 0 : _c.children;
       const columnIndex = getColumnIndex(children || [], instance.vnode.el);
       columnIndex > -1 && (owner == null ? void 0 : owner.store.insertColumn(column2, isSubColumn.value ? parent.columnConfig : null));
       if (typeof props.checkable === "function") {
@@ -22738,7 +22900,7 @@ var Column = defineComponent({
         column: {},
         $index: -1
       });
-      return createVNode("div", null, [Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
+      return createVNode("div", null, [defaultSlot && Array.isArray(defaultSlot) ? defaultSlot.filter((child) => child.type.name === "DColumn").map((child) => createVNode(Fragment, null, [child])) : createVNode("div", null, null)]);
     };
   }
 });
@@ -22832,8 +22994,9 @@ function useTabNavFunction(props, tabs2, data, ctx2, tabsEle) {
   const update = () => {
     if (props.type === "slider") {
       setTimeout(() => {
-        const tabEle = tabsEle.value.querySelector("#" + props.modelValue + ".active");
-        if (tabEle) {
+        var _a;
+        const tabEle = (_a = tabsEle.value) == null ? void 0 : _a.querySelector("#" + props.modelValue + ".active");
+        if (tabEle && tabsEle.value) {
           if (["top", "bottom"].includes(props.tabPosition)) {
             data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
           } else {
@@ -22864,13 +23027,14 @@ function useTabNavFunction(props, tabs2, data, ctx2, tabsEle) {
       return;
     }
     canChange(item.id).then((change) => {
+      var _a, _b;
       if (!change) {
         return;
       }
-      const tab2 = tabs2.state.data.find((itemOption) => itemOption.id === item.id);
-      if (tab2 && !tab2.disabled) {
+      const tab2 = (_b = (_a = tabs2 == null ? void 0 : tabs2.state) == null ? void 0 : _a.data) == null ? void 0 : _b.find((itemOption) => itemOption.id === item.id);
+      if (tabs2 && tab2 && !tab2.disabled) {
         tabs2.state.active = item.id;
-        if (props.type === "slider" && tabEl && tabsEle) {
+        if (props.type === "slider" && tabEl && tabsEle && tabsEle.value) {
           if (["left", "right"].includes(props.tabPosition)) {
             data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
           } else {
@@ -22884,13 +23048,17 @@ function useTabNavFunction(props, tabs2, data, ctx2, tabsEle) {
     });
   };
   const beforeMount = () => {
-    if (props.type !== "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0) {
+    if (props.type !== "slider" && props.modelValue === void 0 && (tabs2 == null ? void 0 : tabs2.state.data) && tabs2.state.data.length > 0) {
       activeClick(tabs2.state.data[0]);
     }
   };
   const mounted = () => {
-    if (props.type === "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
-      activeClick(tabs2.state.data[0].tabsEle.value.getElementById(tabs2.state.data[0].tabId));
+    var _a;
+    if (props.type === "slider" && props.modelValue === void 0 && (tabs2 == null ? void 0 : tabs2.state.data) && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
+      const tabsStateData = tabs2.state.data[0];
+      const dom = (_a = tabsStateData.tabsEle) == null ? void 0 : _a.value;
+      const ele = dom == null ? void 0 : dom.getElementById(tabsStateData.tabId);
+      activeClick(ele);
     }
   };
   const tabCanClose = (item) => {
@@ -22974,6 +23142,7 @@ var TabNav = defineComponent({
         "role": "tablist",
         "class": ulClasses.value
       }, [((tabs2 == null ? void 0 : tabs2.state.data) || []).map((item, i) => {
+        var _a, _b;
         return createVNode("li", {
           "role": "presentation",
           "onClick": () => {
@@ -22989,7 +23158,7 @@ var TabNav = defineComponent({
           "aria-expanded": props.modelValue === (item.id || item.tabId),
           "class": aClasses.value,
           "style": customStyle
-        }, [(tabs2 == null ? void 0 : tabs2.state.slots[i]) ? tabs2.state.slots[i]() : createVNode("span", null, [item.title])]), closeIconEl(item)])]);
+        }, [(tabs2 == null ? void 0 : tabs2.state.slots[i]) ? (_b = (_a = tabs2.state.slots)[i]) == null ? void 0 : _b.call(_a) : createVNode("span", null, [item.title])]), closeIconEl(item)])]);
       }), newButton, createVNode("div", {
         "class": ns2.e(`nav-${props.type}-animation`),
         "style": sliderAnimationStyle.value
@@ -23098,14 +23267,17 @@ var Tab = defineComponent({
     (_a = tabs2 == null ? void 0 : tabs2.state.data) == null ? void 0 : _a.push(props);
     const ns2 = useNamespace("tab");
     onUnmounted(() => {
-      tabs2.state.data = tabs2.state.data.filter((tab2) => tab2.id !== props.id);
+      var _a2;
+      if (tabs2) {
+        tabs2.state.data = (_a2 = tabs2.state.data) == null ? void 0 : _a2.filter((tab2) => tab2.id !== props.id);
+      }
     });
     return () => {
       var _a2;
       const {
         id
       } = props;
-      const content2 = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
+      const content2 = (tabs2 == null ? void 0 : tabs2.state.showContent) && tabs2.state.active === id ? createVNode("div", {
         "class": ns2.e("content")
       }, [createVNode("div", {
         "role": "tabpanel"
@@ -23634,6 +23806,7 @@ var TimePicker = defineComponent({
     const activeMinute = ref("00");
     const activeSecond = ref("00");
     const format2 = props.format.toLowerCase();
+    const position = ref(["bottom-start", "top-start"]);
     const {
       showPopup,
       trueTimeValue,
@@ -23702,7 +23875,9 @@ var TimePicker = defineComponent({
           "modelValue": showPopup.value,
           "onUpdate:modelValue": ($event) => showPopup.value = $event,
           "ref": overlayRef,
-          "origin": inputDom.value
+          "origin": inputDom.value,
+          "position": position.value,
+          "align": "start"
         }, {
           default: () => [createVNode(TimePopup, {
             "ref": timePopupDom,
@@ -24195,6 +24370,19 @@ var DTreeNodeToggle = defineComponent({
     };
   }
 });
+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 ns = useNamespace("tree");
 function useTreeNode(data) {
   const nodeClass = computed(() => {
@@ -24213,9 +24401,9 @@ function useTreeNode(data) {
     if (!data.value || data.value.level === 1) {
       return [];
     }
-    const { currentIndex = 0, parentChildNode = 0, level, expanded, isLeaf } = data.value;
+    const { currentIndex = 0, parentChildNodeCount = 0, level, expanded, isLeaf } = data.value;
     return Array.from({ length: data.value.level - 1 }).map((_, index2) => ({
-      height: `${currentIndex + 1 === parentChildNode && index2 === 0 ? isLeaf || !expanded ? NODE_HEIGHT / 2 : NODE_HEIGHT : NODE_HEIGHT}px`,
+      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`
     }));
@@ -24302,7 +24490,8 @@ var DTreeNode = defineComponent({
       toggleNode,
       getChildren,
       insertBefore,
-      removeNode
+      removeNode,
+      getNode
     } = inject(USE_TREE_TOKEN);
     const treeInstance = inject(TREE_INSTANCE);
     const ns2 = useNamespace("tree");
@@ -24352,6 +24541,7 @@ var DTreeNode = defineComponent({
       isShowOperationArea.value = false;
     };
     return () => {
+      var _a;
       return createVNode("div", {
         "class": nodeClass.value,
         "style": nodeStyle.value,
@@ -24382,7 +24572,7 @@ var DTreeNode = defineComponent({
         nodeData: data
       }) : createVNode(DTreeNodeContent, {
         "data": data.value
-      }, null)]), operate.value && isShowOperationArea.value && createVNode("div", {
+      }, 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",
@@ -25371,24 +25561,25 @@ var VirtualList = defineComponent({
   }
 });
 function useToggle() {
-  return function useToggle2(data, core, context) {
+  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) {
@@ -25396,6 +25587,7 @@ function useToggle() {
       } else {
         expandNode(node);
       }
+      lazyLoadNodes(node);
     };
     const expandAllNodes = () => {
       data.value.forEach((node) => {
@@ -25416,17 +25608,18 @@ function omit(obj, ...keys) {
 function generateInnerTree(tree2, key = "children", level = 0, path = []) {
   level++;
   return tree2.reduce((acc, item, currentIndex) => {
-    var _a, _b;
+    var _a, _b, _c;
     const newItem = Object.assign({}, item);
     if (newItem.id === void 0) {
       newItem.id = randomId();
       newItem.idType = "random";
     }
     newItem.level = level;
-    newItem.parentChildNode = tree2.length;
+    newItem.parentChildNodeCount = tree2.length;
     newItem.currentIndex = currentIndex;
-    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.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();
       }
     }
@@ -25436,7 +25629,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));
     }
@@ -25554,12 +25747,50 @@ function useCore() {
     };
   };
 }
+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 = (result2) => {
+      const node = getNode(result2.node);
+      setNodeValue(node, "loading", false);
+      const childNodes = ref(generateInnerTree(result2.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 = [], 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, context));
+    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core, context, lazyLode));
   }, {});
   return __spreadValues({
     treeData
@@ -25688,13 +25919,13 @@ function useOperate() {
       setNodeValue(parentNode, "expanded", true);
       setNodeValue(parentNode, "isLeaf", false);
       if (lastChild) {
-        setNodeValue(lastChild, "parentChildNode", children.length + 1);
+        setNodeValue(lastChild, "parentChildNodeCount", children.length + 1);
       }
       const currentNode = ref(__spreadProps(__spreadValues({}, node), {
         level: getLevel(parentNode) + 1,
         parentId: parentNode.id,
         isLeaf: true,
-        parentChildNode: children.length + 1,
+        parentChildNodeCount: children.length + 1,
         currentIndex: (lastChild == null ? void 0 : lastChild.currentIndex) + 1
       }));
       if (currentNode.value.id === void 0) {
@@ -25782,7 +26013,7 @@ var tree = "";
 var Tree = defineComponent({
   name: "DTree",
   props: treeProps,
-  emits: ["toggle-change", "check-change", "select-change", "node-click"],
+  emits: ["toggle-change", "check-change", "select-change", "node-click", "lazy-load"],
   setup(props, context) {
     const {
       slots,
@@ -25835,13 +26066,16 @@ var Tree = defineComponent({
         toggleNode
       }) : createVNode(DTreeNodeToggle, {
         "data": treeNode
-      }, null)
+      }, null),
+      loading: () => slots.loading ? renderSlot(useSlots(), "loading", {
+        nodeData: treeNode
+      }) : createVNode(DTreeNodeLoading, null, null)
     });
     return () => {
       const Component = props.height ? VirtualList : "div";
       const treeData = getExpendedTree == null ? void 0 : getExpendedTree().value;
       const vSlotsProps = {
-        default: props.height || (() => treeData == null ? void 0 : treeData.map(renderDTreeNode)),
+        default: () => treeData == null ? void 0 : treeData.map(renderDTreeNode),
         item: props.height && ((treeNode) => renderDTreeNode(treeNode))
       };
       let virtualListProps2 = {};