vue-devui 1.0.0-rc.1 → 1.0.0-rc.2

package/vue-devui.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, createTextVNode, provide, onMounted, watch, ref, Transition, withDirectives, vShow, nextTick, h, render, resolveDirective, unref, onUnmounted, reactive, onBeforeUnmount, Comment as Comment$1, toRef, onUpdated, onBeforeMount, readonly, Teleport, createApp, renderSlot, withModifiers, useSlots, shallowRef } from "vue";
+import { createVNode, getCurrentInstance, defineComponent, toRefs, inject, computed, Fragment, mergeProps, resolveComponent, isVNode, createTextVNode, provide, onMounted, watch, ref, Transition, withDirectives, vShow, nextTick, h, render, resolveDirective, unref, onUnmounted, Teleport, onBeforeUnmount, Comment as Comment$1, reactive, toRef, onUpdated, onBeforeMount, readonly, createApp, renderSlot, withModifiers, useSlots, shallowRef } from "vue";
 import { useRoute } from "vue-router";
 import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
@@ -1185,18 +1185,9 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
-  appendToBody: {
-    type: Boolean,
-    default: false
-  },
-  appendToBodyDirections: {
-    type: Object,
-    default: () => ({
-      originX: "left",
-      originY: "bottom",
-      overlayX: "left",
-      overlayY: "top"
-    })
+  position: {
+    type: Array,
+    default: ["bottom-end"]
   },
   disabled: {
     type: Boolean,
@@ -1242,9 +1233,9 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
-  dAutoCompleteWidth: {
+  width: {
     type: Number,
-    default: null
+    default: 400
   },
   showAnimation: {
     type: Boolean,
@@ -1271,32 +1262,32 @@ const DropdownPropsKey = Symbol("DropdownPropsKey");
 function useCustomTemplate(ctx2, modelValue) {
   const itemTemplate = (item2, index2) => {
     const arr = { item: item2, index: index2 };
-    if (ctx2.slots.itemTemplate) {
-      return ctx2.slots.itemTemplate(arr);
+    if (ctx2.slots.item) {
+      return ctx2.slots.item(arr);
     }
     return null;
   };
   const noResultItemTemplate = () => {
-    if (ctx2.slots.noResultItemTemplate) {
-      return ctx2.slots.noResultItemTemplate(modelValue.value);
+    if (ctx2.slots.nothing) {
+      return ctx2.slots.nothing(modelValue.value);
     }
     return null;
   };
   const searchingTemplate = () => {
-    if (ctx2.slots.searchingTemplate) {
-      return ctx2.slots.searchingTemplate(modelValue.value);
+    if (ctx2.slots.searching) {
+      return ctx2.slots.searching(modelValue.value);
     }
     return null;
   };
   const customRenderSolts = () => {
     const slots = {};
-    if (ctx2.slots.itemTemplate) {
+    if (ctx2.slots.item) {
       slots["itemTemplate"] = itemTemplate;
     }
-    if (ctx2.slots.noResultItemTemplate) {
+    if (ctx2.slots.nothing) {
       slots["noResultItemTemplate"] = noResultItemTemplate;
     }
-    if (ctx2.slots.searchingTemplate) {
+    if (ctx2.slots.searching) {
       slots["searchingTemplate"] = searchingTemplate;
     }
     return slots;
@@ -1304,10 +1295,10 @@ function useCustomTemplate(ctx2, modelValue) {
   return { customRenderSolts };
 }
 function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
-  const searchList = ref([]);
+  const searchList = ref();
   const showNoResultItemTemplate = ref(false);
   const handleSearch = async (term, enableLazyLoad) => {
-    if (term == "" && !allowEmptyValueSearch.value) {
+    if (term === "" && !allowEmptyValueSearch.value) {
       searchList.value = [];
       showNoResultItemTemplate.value = false;
       return;
@@ -1328,7 +1319,7 @@ function useSearchFn(ctx2, allowEmptyValueSearch, source, searchFn, formatter) {
       arr = await searchFn.value(term);
     }
     searchList.value = arr;
-    if (searchList.value.length == 0) {
+    if (searchList.value.length === 0) {
       showNoResultItemTemplate.value = true;
     } else {
       showNoResultItemTemplate.value = false;
@@ -1391,7 +1382,7 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
         handleClose();
       } else {
         visible.value = true;
-        if (ctx2.slots.noResultItemTemplate && searchList.value.length == 0 && modelValue.value.trim() != "") {
+        if (ctx2.slots.noResultItemTemplate && searchList.value.length === 0 && modelValue.value.trim() !== "") {
           showNoResultItemTemplate.value = true;
         }
       }
@@ -1410,11 +1401,11 @@ function useInputHandle(ctx2, searchList, showNoResultItemTemplate, modelValue,
 function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter, handleClose) {
   const selectedIndex = ref(0);
   const getListIndex = (item2) => {
-    if (searchList.value.length == 0) {
+    if (searchList.value.length === 0) {
       return 0;
     }
     const ind = searchList.value.indexOf(item2);
-    return ind == -1 ? 0 : ind;
+    return ind === -1 ? 0 : ind;
   };
   const selectOptionClick = async (item2) => {
     const cur = formatter.value(item2);
@@ -1422,7 +1413,7 @@ function useSelectHandle(ctx2, searchList, selectValue, handleSearch, formatter,
     handleClose();
     await handleSearch(cur);
     selectedIndex.value = getListIndex(cur);
-    selectValue.value && selectValue.value();
+    selectValue.value && selectValue.value(cur);
   };
   return {
     selectedIndex,
@@ -1730,7 +1721,6 @@ var DAutoCompleteDropdown = defineComponent({
     const {
       disabled,
       maxHeight,
-      appendToBody,
       formatter,
       disabledKey,
       isSearching
@@ -1743,7 +1733,7 @@ var DAutoCompleteDropdown = defineComponent({
     };
     return () => {
       return withDirectives(createVNode("div", {
-        "class": ["devui-dropdown-menu", appendToBody && "devui-dropdown-menu-cdk", disabled && "disabled", latestSource.value && "devui-dropdown-latestSource"]
+        "class": ["devui-dropdown-menu", "devui-dropdown-menu-cdk", disabled && "disabled", latestSource.value && "devui-dropdown-latestSource"]
       }, [createVNode("ul", {
         "ref": dropDownRef,
         "class": "devui-list-unstyled scroll-height",
@@ -1751,28 +1741,28 @@ var DAutoCompleteDropdown = defineComponent({
           maxHeight: `${maxHeight}px`
         },
         "onScroll": loadMore
-      }, [isSearching && ctx2.slots.searchingTemplate && searchStatus.value && createVNode("li", {
+      }, [isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value) && createVNode("li", {
         "class": "devui-is-searching-template"
       }, [createVNode("div", {
         "class": "devui-no-data-tip"
       }, [ctx2.slots.searchingTemplate()])]), latestSource.value && !modelValue.value && createVNode("li", {
         "class": "devui-popup-tips"
-      }, [createTextVNode("\u6700\u8FD1\u8F93\u5165")]), !showNoResultItemTemplate.value && !searchStatus.value && searchList != null && searchList.value.length > 0 && searchList.value.map((item2, index2) => {
+      }, [createTextVNode("\u6700\u8FD1\u8F93\u5165")]), !showNoResultItemTemplate.value && !(searchStatus == null ? void 0 : searchStatus.value) && searchList != null && searchList.value.length > 0 && searchList.value.map((item2, index2) => {
         return createVNode("li", {
           "onClick": () => onSelect(item2),
-          "class": ["devui-dropdown-item", selectedIndex.value == index2 && "selected", {
+          "class": ["devui-dropdown-item", selectedIndex.value === index2 && "selected", {
             "disabled": disabledKey && item2[disabledKey]
           }, {
-            "devui-dropdown-bg": hoverIndex.value == index2
+            "devui-dropdown-bg": hoverIndex.value === index2
           }],
           "title": formatter(item2),
           "key": formatter(item2)
         }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(item2, index2) : formatter(item2)]);
-      }), !searchStatus.value && searchList.value.length == 0 && ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value && createVNode("li", {
+      }), !(searchStatus == null ? void 0 : searchStatus.value) && searchList.value.length === 0 && ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value && createVNode("li", {
         "class": "devui-no-result-template"
       }, [createVNode("div", {
         "class": "devui-no-data-tip"
-      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && searchStatus.value]]);
+      }, [ctx2.slots.noResultItemTemplate()])])])]), [[resolveDirective("dLoading"), showLoading.value], [vShow, visible.value && searchList.value.length > 0 || ctx2.slots.noResultItemTemplate && showNoResultItemTemplate.value || isSearching && ctx2.slots.searchingTemplate && (searchStatus == null ? void 0 : searchStatus.value)]]);
     };
   }
 });
@@ -2007,8 +1997,7 @@ var AutoComplete = defineComponent({
     const {
       disabled,
       modelValue,
-      appendToBody,
-      dAutoCompleteWidth,
+      width,
       delay,
       allowEmptyValueSearch,
       formatter,
@@ -2016,7 +2005,7 @@ var AutoComplete = defineComponent({
       selectValue,
       source,
       searchFn,
-      appendToBodyDirections,
+      position,
       latestSource,
       showAnimation
     } = toRefs(props);
@@ -2068,51 +2057,40 @@ var AutoComplete = defineComponent({
       hoverIndex
     });
     const origin = ref();
-    const position = reactive({
-      appendToBodyDirections: {}
-    });
-    position.appendToBodyDirections = appendToBodyDirections;
     const renderDropdown = () => {
-      if (appendToBody.value) {
-        let _slot;
-        return createVNode(FlexibleOverlay, {
-          "hasBackdrop": false,
-          "origin": origin,
-          "position": position.appendToBodyDirections,
-          "visible": visible.value,
-          "onUpdate:visible": ($event) => visible.value = $event
-        }, {
-          default: () => [createVNode("div", {
-            "class": "devui-dropdown devui-auto-complete-menu",
-            "style": {
-              width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
-            }
-          }, [createVNode(DAutoCompleteDropdown, null, _isSlot$6(_slot = customRenderSolts()) ? _slot : {
-            default: () => [_slot]
-          })])]
-        });
-      } else {
-        let _slot2;
-        return createVNode("div", {
-          "class": "devui-dropdown",
-          "style": {
-            width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
-          }
-        }, [createVNode(Transition, {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode(Transition, {
           "name": showAnimation ? "fade" : ""
         }, {
-          default: () => [createVNode(DAutoCompleteDropdown, null, _isSlot$6(_slot2 = customRenderSolts()) ? _slot2 : {
-            default: () => [_slot2]
+          default: () => [createVNode(FlexibleOverlay, {
+            "origin": origin.value,
+            "position": position.value,
+            "modelValue": visible.value,
+            "onUpdate:modelValue": ($event) => visible.value = $event
+          }, {
+            default: () => [createVNode("div", {
+              "class": "devui-auto-complete-menu",
+              "style": {
+                width: `
+                    ${width.value + "px"}
+                  `
+              }
+            }, [createVNode(DAutoCompleteDropdown, null, _isSlot$6(_slot = customRenderSolts()) ? _slot : {
+              default: () => [_slot]
+            })])]
           })]
-        })]);
-      }
+        })]
+      });
     };
     return () => {
       return withDirectives(createVNode("div", {
         "class": ["devui-auto-complete", "devui-form-group", "devui-has-feedback", visible.value && "devui-select-open"],
         "ref": origin,
         "style": {
-          width: dAutoCompleteWidth.value > 0 && dAutoCompleteWidth.value + "px"
+          width: `${width.value + "px"}`
         }
       }, [createVNode("input", {
         "disabled": disabled.value,
@@ -14633,9 +14611,6 @@ var DropdownInstall = {
   }
 };
 const editableSelectProps = {
-  appendToBody: {
-    type: Boolean
-  },
   options: {
     type: Array,
     default: () => []
@@ -14665,9 +14640,6 @@ const editableSelectProps = {
   },
   filterOption: {
     type: [Function, Boolean]
-  },
-  loadMore: {
-    type: Function
   }
 };
 function className$2(classStr, classOpt) {
@@ -14707,18 +14679,21 @@ const useInput = (inputValue, ctx2) => {
     handleInput
   };
 };
-const useLazyLoad = (dropdownRef, inputValue, filterOtion, load) => {
+const useLazyLoad = (dropdownRef, inputValue, filterOtion, ctx2) => {
   const loadMore = () => {
+    const dropdownVal = dropdownRef.value;
     if (filterOtion !== false) {
       return;
     }
-    if (dropdownRef.value.clientHeight + dropdownRef.value.scrollTop >= dropdownRef.value.scrollHeight) {
-      load(inputValue.value);
+    if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
+      ctx2.emit("loadMore", inputValue.value);
     }
   };
   return { loadMore };
 };
-const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedIndex, options, toggleMenu, closeMenu, handleClick) => {
+const useKeyboardSelect = (dropdownRef, visible, inputValue, filteredOptions, optionDisabledKey, filterOption, loading2, handleClick, closeMenu, toggleMenu) => {
+  const hoverIndex = ref(0);
+  const selectedIndex = ref(0);
   const updateHoveringIndex = (index2) => {
     hoverIndex.value = index2;
   };
@@ -14737,66 +14712,71 @@ const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedI
       }
     });
   };
-  const onKeyboardNavigation = (direction, newIndex) => {
-    if (!newIndex) {
-      newIndex = hoverIndex.value;
+  const handleEscape = () => {
+    if (inputValue.value) {
+      inputValue.value = "";
+    } else {
+      closeMenu();
+    }
+  };
+  const handleEnter = () => {
+    const len = filteredOptions.value.length;
+    if (!visible.value) {
+      toggleMenu();
+    } else if (!len || len === 1) {
+      closeMenu();
+    } else if (len && len !== 1) {
+      handleClick(filteredOptions.value[hoverIndex.value]);
+      closeMenu();
+    }
+  };
+  const handleKeyboardNavigation = (direction) => {
+    const len = filteredOptions.value.length;
+    if (!len || len === 1) {
+      return;
     }
     if (!["ArrowDown", "ArrowUp"].includes(direction)) {
       return;
     }
+    if (filterOption === false && loading2.value) {
+      return;
+    }
+    let newIndex = 0;
+    newIndex = hoverIndex.value;
     if (direction === "ArrowUp") {
-      if (newIndex === 0) {
-        newIndex = options.value.length - 1;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
+      newIndex -= 1;
+      if (newIndex === -1) {
+        newIndex = len - 1;
       }
-      newIndex = newIndex - 1;
     } else if (direction === "ArrowDown") {
-      if (newIndex === options.value.length - 1) {
+      newIndex += 1;
+      if (newIndex === len) {
         newIndex = 0;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
       }
-      newIndex = newIndex + 1;
     }
-    const option2 = options.value[newIndex];
-    if (option2[disabled]) {
-      return onKeyboardNavigation(direction, newIndex);
+    hoverIndex.value = newIndex;
+    const option2 = filteredOptions.value[newIndex];
+    if (option2[optionDisabledKey]) {
+      return handleKeyboardNavigation(direction);
     }
-    scrollToItem(newIndex);
     updateHoveringIndex(newIndex);
+    scrollToItem(newIndex);
   };
   const handleKeydown = (event) => {
     const keyCode = event.key || event.code;
-    if (options.value.length === 0) {
-      return;
-    }
-    if (!visible.value) {
-      return toggleMenu();
-    }
-    const onKeydownEnter = () => {
-      handleClick(options.value[hoverIndex.value]);
-      closeMenu();
-    };
-    const onKeydownEsc = () => {
-      closeMenu();
-    };
     switch (keyCode) {
-      case "Enter":
-        onKeydownEnter();
-        break;
       case "Escape":
-        onKeydownEsc();
+        event.preventDefault();
+        handleEscape();
+        break;
+      case "Enter":
+        handleEnter();
         break;
       default:
-        onKeyboardNavigation(keyCode);
+        handleKeyboardNavigation(keyCode);
     }
   };
-  return {
-    handleKeydown
-  };
+  return { handleKeydown, hoverIndex, selectedIndex };
 };
 var EditableSelect = defineComponent({
   name: "DEditableSelect",
@@ -14806,101 +14786,19 @@ var EditableSelect = defineComponent({
   props: editableSelectProps,
   emits: ["update:modelValue", "search", "loadMore"],
   setup(props, ctx2) {
-    const getItemCls = (option2, index2) => {
-      const {
-        optionDisabledKey: disabledKey
-      } = props;
-      return className$2("devui-dropdown-item", {
-        disabled: disabledKey ? !!option2[disabledKey] : false,
-        selected: index2 === selectIndex.value,
-        "devui-dropdown-bg": index2 === hoverIndex.value
-      });
-    };
-    const renderDropdown = () => {
-      if (props.appendToBody) {
-        return createVNode(resolveComponent("d-flexible-overlay"), {
-          "origin": origin,
-          "visible": visible.value,
-          "onUpdate:visible": ($event) => visible.value = $event,
-          "position": position,
-          "hasBackdrop": false
-        }, {
-          default: () => [createVNode("div", {
-            "class": "devui-editable-select-dropdown",
-            "style": {
-              width: props.width + "px"
-            }
-          }, [withDirectives(createVNode("div", {
-            "class": "devui-dropdown-menu"
-          }, [createVNode("ul", {
-            "ref": dopdownRef,
-            "class": "devui-list-unstyled scroll-height",
-            "style": {
-              maxHeight: props.maxHeight + "px"
-            },
-            "onScroll": loadMore
-          }, [filteredOptions.value.map((option2, index2) => {
-            return createVNode("li", {
-              "class": getItemCls(option2, index2),
-              "onClick": (e) => {
-                e.stopPropagation();
-                handleClick(option2);
-              }
-            }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(option2) : option2.label]);
-          }), withDirectives(createVNode("li", {
-            "class": "devui-no-result-template"
-          }, [createVNode("div", {
-            "class": "devui-no-data-tip"
-          }, [emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[resolveDirective("dLoading"), props.loading], [vShow, visible.value]])])]
-        });
-      } else {
-        return createVNode(Transition, {
-          "name": "fade"
-        }, {
-          default: () => [withDirectives(createVNode("div", {
-            "class": "devui-dropdown-menu"
-          }, [createVNode("ul", {
-            "ref": dopdownRef,
-            "class": "devui-list-unstyled scroll-height",
-            "style": {
-              maxHeight: props.maxHeight + "px"
-            },
-            "onScroll": loadMore
-          }, [filteredOptions.value.map((option2, index2) => {
-            return createVNode("li", {
-              "class": getItemCls(option2, index2),
-              "onClick": (e) => {
-                e.stopPropagation();
-                handleClick(option2);
-              }
-            }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(option2) : option2.label]);
-          }), withDirectives(createVNode("li", {
-            "class": "devui-no-result-template"
-          }, [createVNode("div", {
-            "class": "devui-no-data-tip"
-          }, [emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[vShow, visible.value]])]
-        });
-      }
-    };
-    const dopdownRef = ref();
+    const dropdownRef = ref();
     const origin = ref();
-    const position = reactive({
-      originX: "left",
-      originY: "bottom",
-      overlayX: "left",
-      overlayY: "top"
-    });
+    const position = ref(["bottom", "left"]);
     const visible = ref(false);
-    const inputValue = ref(props.modelValue);
-    const hoverIndex = ref(0);
-    const selectIndex = ref(0);
+    const inputValue = ref(props.modelValue || "");
+    const loading2 = ref(props.loading);
     const normalizeOptions = computed(() => {
       return props.options.map((option2) => {
         if (typeof option2 === "object") {
-          return __spreadValues({
+          return Object.assign({}, option2, {
             label: option2.label ? option2.label : option2.value,
             value: option2.value
-          }, option2);
+          });
         }
         return {
           label: option2 + "",
@@ -14910,13 +14808,16 @@ var EditableSelect = defineComponent({
     });
     const filteredOptions = userFilterOptions(normalizeOptions, inputValue, props.filterOption);
     const emptyText = computed(() => {
-      let text;
+      let text = "";
       if (props.filterOption !== false && !filteredOptions.value.length) {
         text = "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55";
       } else if (props.filterOption === false && !filteredOptions.value.length) {
         text = "\u6CA1\u6709\u6570\u636E";
       }
-      return ctx2.slots.noResultItemTemplate ? ctx2.slots.noResultItemTemplate() : text;
+      return text;
+    });
+    watch(() => props.loading, (newVal) => {
+      loading2.value = newVal;
     });
     const toggleMenu = () => {
       visible.value = !visible.value;
@@ -14926,7 +14827,7 @@ var EditableSelect = defineComponent({
     };
     const {
       loadMore
-    } = useLazyLoad(dopdownRef, inputValue, props.filterOption, props.loadMore);
+    } = useLazyLoad(dropdownRef, inputValue, props.filterOption, ctx2);
     const {
       handleInput
     } = useInput(inputValue, ctx2);
@@ -14934,17 +14835,32 @@ var EditableSelect = defineComponent({
       const {
         optionDisabledKey: disabledKey
       } = props;
-      if (disabledKey && !!option2[disabledKey])
+      if (disabledKey && !!option2[disabledKey]) {
         return;
+      }
       ctx2.emit("update:modelValue", option2.label);
       closeMenu();
     };
     const {
-      handleKeydown
-    } = useKeyboardSelect(dopdownRef, props.optionDisabledKey, visible, hoverIndex, selectIndex, filteredOptions, toggleMenu, closeMenu, handleClick);
+      handleKeydown,
+      hoverIndex,
+      selectedIndex
+    } = useKeyboardSelect(dropdownRef, visible, inputValue, filteredOptions, props.optionDisabledKey, props.filterOption, loading2, handleClick, closeMenu, toggleMenu);
     watch(() => props.modelValue, (newVal) => {
-      inputValue.value = newVal;
+      if (newVal) {
+        inputValue.value = newVal;
+      }
     });
+    const getItemCls = (option2, index2) => {
+      const {
+        optionDisabledKey: disabledKey
+      } = props;
+      return className$2("devui-dropdown-item", {
+        disabled: disabledKey ? !!option2[disabledKey] : false,
+        selected: index2 === selectedIndex.value,
+        "devui-dropdown-bg": index2 === hoverIndex.value
+      });
+    };
     return () => {
       const selectCls = className$2("devui-editable-select devui-form-group devui-has-feedback", {
         "devui-select-open": visible.value === true
@@ -14970,7 +14886,41 @@ var EditableSelect = defineComponent({
         "class": "devui-select-chevron-icon"
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "select-arrow"
-      }, null)])]), renderDropdown()]), [[resolveDirective("click-outside"), closeMenu]]);
+      }, null)])]), createVNode(resolveComponent("d-flexible-overlay"), {
+        "origin": origin.value,
+        "modelValue": visible.value,
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "position": position.value,
+        "hasBackdrop": false
+      }, {
+        default: () => [createVNode("div", {
+          "class": "devui-editable-select-dropdown",
+          "style": {
+            width: props.width + "px"
+          }
+        }, [withDirectives(createVNode("div", {
+          "class": "devui-dropdown-menu"
+        }, [createVNode("ul", {
+          "ref": dropdownRef,
+          "class": "devui-list-unstyled scroll-height",
+          "style": {
+            maxHeight: props.maxHeight + "px"
+          },
+          "onScroll": loadMore
+        }, [filteredOptions.value.map((option2, index2) => {
+          return createVNode("li", {
+            "class": getItemCls(option2, index2),
+            "onClick": (e) => {
+              e.stopPropagation();
+              handleClick(option2);
+            }
+          }, [ctx2.slots.item ? ctx2.slots.item(option2) : option2.label]);
+        }), withDirectives(createVNode("li", {
+          "class": "devui-no-result-template"
+        }, [createVNode("div", {
+          "class": "devui-no-data-tip"
+        }, [ctx2.slots.noResultItem ? ctx2.slots.noResultItem() : emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[resolveDirective("dLoading"), props.loading], [vShow, visible.value]])])]
+      })]), [[resolveDirective("click-outside"), closeMenu]]);
     };
   }
 });
@@ -15142,8 +15092,8 @@ function usePopover(props, visible, placement, origin, popoverRef) {
     transformOrigin: TransformOriginMap$1[placement.value]
   }));
   const onDocumentClick = (e) => {
-    var _a;
-    if (!origin.value.contains(e.target) && !((_a = popoverRef.value.$el) == null ? void 0 : _a.contains(e.target))) {
+    var _a, _b;
+    if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
       visible.value = false;
     }
   };
@@ -19131,7 +19081,7 @@ var Progress = defineComponent({
       a ${radius},${radius} 0 1 1 0,${endPositionY}`;
       const len = Math.PI * 2 * radius;
       data.trailPath = {
-        stroke: "#dfe1e6",
+        stroke: "var(--devui-dividing-line, #dfe1e6)",
         strokeDasharray: `${len}px ${len}px`,
         strokeDashoffset: `0`,
         transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
@@ -19656,13 +19606,19 @@ var Radio = defineComponent({
       "viewBox": "0 0 1024 1024",
       "xmlns": "http://www.w3.org/2000/svg"
     }, [createVNode("circle", {
-      "class": "devui-radio-material-outer",
+      "class": {
+        "devui-radio-material-outer": true,
+        disabled
+      },
       "cx": "512",
       "cy": "512",
       "r": "486.5",
       "stroke-width": "51"
     }, null), createVNode("circle", {
-      "class": "devui-radio-material-inner",
+      "class": {
+        "devui-radio-material-inner": true,
+        disabled
+      },
       "cx": "512",
       "fill-rule": "nonzero",
       "cy": "512",
@@ -20255,9 +20211,9 @@ const DEFAULT_PLUGIN_OPTIONS = {
   color: "currentColor",
   initialOpacity: 0.2,
   finalOpacity: 0.1,
-  duration: 0.8,
+  duration: 400,
   easing: "ease-out",
-  delayTime: 75,
+  delay: 75,
   disabled: false
 };
 const createContainer = ({
@@ -20289,7 +20245,7 @@ const createrippleElement = (x, y, size, options) => {
   rippleElement.style.borderRadius = "50%";
   rippleElement.style.opacity = `${options.initialOpacity}`;
   rippleElement.style.transform = `translate(-50%,-50%) scale(0)`;
-  rippleElement.style.transition = `transform ${options.duration}s ${options.easing}, opacity ${options.duration}s ${options.easing}`;
+  rippleElement.style.transition = `transform ${options.duration / 1e3}s ${options.easing}, opacity ${options.duration / 1e3}s ${options.easing}`;
   return rippleElement;
 };
 function magnitude(x1, y1, x2, y2) {
@@ -20309,6 +20265,13 @@ const getRelativePointer = ({ x, y }, { top, left }) => ({
   y: y - top
 });
 const RIPPLE_COUNT = "vRippleCountInternal";
+function setRippleCount(el, count) {
+  el.dataset[RIPPLE_COUNT] = count.toString();
+}
+function getRippleCount(el) {
+  var _a;
+  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
+}
 function incrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count + 1);
@@ -20317,13 +20280,6 @@ function decrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count - 1);
 }
-function setRippleCount(el, count) {
-  el.dataset[RIPPLE_COUNT] = count.toString();
-}
-function getRippleCount(el) {
-  var _a;
-  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
-}
 function deleteRippleCount(el) {
   delete el.dataset[RIPPLE_COUNT];
 }
@@ -20335,29 +20291,10 @@ const ripple = (event, el, options) => {
   const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect);
   const rippleContainer = createContainer(computedStyles);
   const rippleEl = createrippleElement(x, y, size, options);
-  incrementRippleCount(el);
   let originalPositionValue = "";
-  if (computedStyles.position === "static") {
-    if (el.style.position) {
-      originalPositionValue = el.style.position;
-    }
-    el.style.position = "relative";
-  }
-  rippleContainer.appendChild(rippleEl);
-  el.appendChild(rippleContainer);
   let shouldDissolveripple = false;
-  const releaseripple = (e) => {
-    if (typeof e !== "undefined") {
-      document.removeEventListener("pointerup", releaseripple);
-      document.removeEventListener("pointercancel", releaseripple);
-    }
-    if (shouldDissolveripple) {
-      dissolveripple();
-    } else {
-      shouldDissolveripple = true;
-    }
-  };
-  const dissolveripple = () => {
+  let token = null;
+  function dissolveripple() {
     rippleEl.style.transition = "opacity 150ms linear";
     rippleEl.style.opacity = "0";
     setTimeout(() => {
@@ -20368,24 +20305,44 @@ const ripple = (event, el, options) => {
         el.style.position = originalPositionValue;
       }
     }, 150);
-  };
+  }
+  function releaseripple(e) {
+    if (typeof e !== "undefined") {
+      document.removeEventListener("pointerup", releaseripple);
+      document.removeEventListener("pointercancel", releaseripple);
+    }
+    if (shouldDissolveripple) {
+      dissolveripple();
+    } else {
+      shouldDissolveripple = true;
+    }
+  }
+  function cancelripple() {
+    clearTimeout(token);
+    rippleContainer.remove();
+    document.removeEventListener("pointerup", releaseripple);
+    document.removeEventListener("pointercancel", releaseripple);
+    document.removeEventListener("pointercancel", cancelripple);
+  }
+  incrementRippleCount(el);
+  if (computedStyles.position === "static") {
+    if (el.style.position) {
+      originalPositionValue = el.style.position;
+    }
+    el.style.position = "relative";
+  }
+  rippleContainer.appendChild(rippleEl);
+  el.appendChild(rippleContainer);
   document.addEventListener("pointerup", releaseripple);
   document.addEventListener("pointercancel", releaseripple);
-  const token = setTimeout(() => {
+  token = setTimeout(() => {
     document.removeEventListener("pointercancel", cancelripple);
     requestAnimationFrame(() => {
       rippleEl.style.transform = `translate(-50%,-50%) scale(1)`;
       rippleEl.style.opacity = `${options.finalOpacity}`;
-      setTimeout(() => releaseripple(), options.duration * 1e3);
+      setTimeout(() => releaseripple(), options.duration);
     });
-  }, options.delayTime);
-  const cancelripple = () => {
-    clearTimeout(token);
-    rippleContainer.remove();
-    document.removeEventListener("pointerup", releaseripple);
-    document.removeEventListener("pointercancel", releaseripple);
-    document.removeEventListener("pointercancel", cancelripple);
-  };
+  }, options.delay);
   document.addEventListener("pointercancel", cancelripple);
 };
 const optionMap = /* @__PURE__ */ new WeakMap();
@@ -20715,7 +20672,6 @@ var Select = defineComponent({
         if (typeof item2 === "object") {
           option2 = __spreadValues({
             name: item2.name ? item2.name : item2.value + "",
-            value: item2.value,
             _checked: false
           }, item2);
         } else {
@@ -20740,7 +20696,7 @@ var Select = defineComponent({
       var _a;
       if (props.multiple && Array.isArray(props.modelValue)) {
         const selectedOptions = getValuesOption(props.modelValue);
-        return selectedOptions.map((item2) => item2.name).join(",");
+        return selectedOptions.map((item2) => (item2 == null ? void 0 : item2.name) || "").join(",");
       } else if (!Array.isArray(props.modelValue)) {
         return ((_a = getValuesOption([props.modelValue])[0]) == null ? void 0 : _a.name) || "";
       }
@@ -20762,7 +20718,7 @@ var Select = defineComponent({
       }
       if (multiple) {
         item2._checked = !item2._checked;
-        modelValue = mergeOptions.value.filter((item3) => item3._checked).map((item3) => item3.value);
+        modelValue = mergeOptions.value.filter((item1) => item1._checked).map((item22) => item22.value);
         ctx2.emit("update:modelValue", modelValue);
       } else {
         ctx2.emit("update:modelValue", item2.value);
@@ -20879,15 +20835,12 @@ var Select = defineComponent({
     })]);
   }
 });
-Select.install = function(app) {
-  app.component(Select.name, Select);
-};
 var SelectInstall = {
   title: "Select \u4E0B\u62C9\u6846",
   category: "\u6570\u636E\u5F55\u5165",
   status: "10%",
   install(app) {
-    app.use(Select);
+    app.component(Select.name, Select);
   }
 };
 var skeleton = "";
@@ -21230,34 +21183,41 @@ var Slider = defineComponent({
     const currentPosition = ref(0);
     const newPostion = ref(0);
     const percentDispaly = ref("");
-    const renderShowInput = () => {
-      return props.showInput ? createVNode("div", {
-        "class": "devui-input__out-wrap"
-      }, [createVNode("input", {
-        "onInput": handleOnInput,
-        "value": inputValue.value + ""
-      }, null)]) : "";
-    };
-    if (props.modelValue > props.max) {
-      percentDispaly.value = "100%";
-    } else if (props.modelValue < props.min) {
-      percentDispaly.value = "0%";
-    } else {
-      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+    function handleOnInput(event) {
+      inputValue.value = parseInt(event.target.value);
+      if (!inputValue.value) {
+        inputValue.value = props.min;
+        percentDispaly.value = "0%";
+      } else {
+        if (inputValue.value < props.min || inputValue.value > props.max) {
+          return;
+        }
+        const re = /^(?:[1-9]?\d|100)$/;
+        if (re.test(`${inputValue.value}`)) {
+          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
+          ctx2.emit("update:modelValue", inputValue.value);
+        }
+      }
     }
-    onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
-      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
-    });
-    function handleButtonMousedown(event) {
-      popoverShow.value = true;
-      if (props.disabled) {
+    function setPostion(newPosition) {
+      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      if (newPosition < 0) {
+        newPosition = 0;
+      }
+      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
+      const steps = Math.round(newPosition / LengthPerStep);
+      const value = steps * LengthPerStep;
+      if (Math.round(value) >= sliderWidth) {
+        currentPosition.value = sliderWidth;
+        inputValue.value = props.max;
+        percentDispaly.value = "100%";
+        ctx2.emit("update:modelValue", props.max);
         return;
       }
-      event.preventDefault();
-      dragStart(event);
-      window.addEventListener("mousemove", onDragging);
-      window.addEventListener("mouseup", onDragEnd);
+      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
+      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
+      currentPosition.value = newPosition;
+      ctx2.emit("update:modelValue", inputValue.value);
     }
     function dragStart(event) {
       isClick = false;
@@ -21280,25 +21240,34 @@ var Slider = defineComponent({
       window.removeEventListener("mousemove", onDragging);
       window.removeEventListener("mouseup", onDragEnd);
     }
-    function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
-      if (newPosition < 0) {
-        newPosition = 0;
-      }
-      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
-      const steps = Math.round(newPosition / LengthPerStep);
-      const value = steps * LengthPerStep;
-      if (Math.round(value) >= sliderWidth) {
-        currentPosition.value = sliderWidth;
-        inputValue.value = props.max;
-        percentDispaly.value = "100%";
-        ctx2.emit("update:modelValue", props.max);
+    const renderShowInput = () => {
+      return props.showInput ? createVNode("div", {
+        "class": "devui-input__out-wrap"
+      }, [createVNode("input", {
+        "onInput": handleOnInput,
+        "value": inputValue.value + ""
+      }, null)]) : "";
+    };
+    if (props.modelValue > props.max) {
+      percentDispaly.value = "100%";
+    } else if (props.modelValue < props.min) {
+      percentDispaly.value = "0%";
+    } else {
+      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+    }
+    onMounted(() => {
+      const sliderWidth = sliderRunway.value.clientWidth;
+      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
+    });
+    function handleButtonMousedown(event) {
+      popoverShow.value = true;
+      if (props.disabled) {
         return;
       }
-      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
-      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
-      currentPosition.value = newPosition;
-      ctx2.emit("update:modelValue", inputValue.value);
+      event.preventDefault();
+      dragStart(event);
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
@@ -21310,22 +21279,6 @@ var Slider = defineComponent({
         return;
       }
     }
-    function handleOnInput(event) {
-      inputValue.value = parseInt(event.target.value);
-      if (!inputValue.value) {
-        inputValue.value = props.min;
-        percentDispaly.value = "0%";
-      } else {
-        if (inputValue.value < props.min || inputValue.value > props.max) {
-          return;
-        }
-        const re = /^(?:[1-9]?\d|100)$/;
-        if (re.test(`${inputValue.value}`)) {
-          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
-          ctx2.emit("update:modelValue", inputValue.value);
-        }
-      }
-    }
     const disableClass = computed(() => {
       return props.disabled ? " disabled" : "";
     });
@@ -21377,25 +21330,7 @@ var SliderInstall = {
   category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(Slider);
-  }
-};
-const splitterProps = {
-  orientation: {
-    type: String,
-    default: "horizontal"
-  },
-  splitBarSize: {
-    type: String,
-    default: "2px"
-  },
-  disabledBarSize: {
-    type: String,
-    default: "1px"
-  },
-  showCollapseButton: {
-    type: Boolean,
-    default: true
+    app.component(Slider.name, Slider);
   }
 };
 const tooltipProps = {
@@ -21547,58 +21482,58 @@ function removeClass(el, className2) {
     }
   }
 }
-const resize = {
-  mounted(el, { value }) {
-    el.$value = value;
-    if (value.enableResize) {
-      bindEvent(el);
-    }
-  },
-  unmounted(el, { value }) {
-    if (value.enableResize) {
-      unbind(el, "mousedown", onMousedown);
-    }
-  }
-};
-function bindEvent(el) {
-  bind(el, "mousedown", onMousedown);
+function normalizeEvent(evt) {
+  return {
+    pageX: evt.pageX,
+    pageY: evt.pageY,
+    clientX: evt.clientX,
+    clientY: evt.clientY,
+    offsetX: evt.offsetX,
+    offsetY: evt.offsetY,
+    type: evt.type,
+    originalEvent: evt
+  };
 }
-function bind(el, event, callback) {
-  el.addEventListener && el.addEventListener(event, callback);
+function bind(el, eventName, callback) {
+  el.addEventListener && el.addEventListener(eventName, callback);
 }
-function unbind(el, event, callback) {
-  el.removeEventListener && el.removeEventListener(event, callback);
+function unbind(el, eventName, callback) {
+  el.removeEventListener && el.removeEventListener(eventName, callback);
 }
 function onMousedown(e) {
   var _a;
-  const $value = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.$value;
-  if (!$value) {
+  const resizeProps = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.resizeProps;
+  if (!resizeProps) {
     return;
   }
-  bind(document, "mousemove", onMousemove);
-  bind(document, "mouseup", onMouseup);
-  $value.onPressEvent(normalizeEvent(e));
-  function onMousemove(e2) {
-    $value.onDragEvent(normalizeEvent(e2));
+  function onMousemove(evt) {
+    resizeProps.onDragEvent(normalizeEvent(evt));
   }
-  function onMouseup(e2) {
+  function onMouseup(evt) {
     unbind(document, "mousemove", onMousemove);
     unbind(document, "mouseup", onMouseup);
-    $value.onReleaseEvent(normalizeEvent(e2));
+    resizeProps.onReleaseEvent(normalizeEvent(evt));
   }
+  bind(document, "mousemove", onMousemove);
+  bind(document, "mouseup", onMouseup);
+  resizeProps.onPressEvent(normalizeEvent(e));
 }
-function normalizeEvent(e) {
-  return {
-    pageX: e.pageX,
-    pageY: e.pageY,
-    clientX: e.clientX,
-    clientY: e.clientY,
-    offsetX: e.offsetX,
-    offsetY: e.offsetY,
-    type: e.type,
-    originalEvent: e
-  };
+function bindEvent(el) {
+  bind(el, "mousedown", onMousedown);
 }
+const resize = {
+  mounted(el, { value }) {
+    el.resizeProps = value;
+    if (value.enableResize) {
+      bindEvent(el);
+    }
+  },
+  unmounted(el, { value }) {
+    if (value.enableResize) {
+      unbind(el, "mousedown", onMousedown);
+    }
+  }
+};
 const splitterBarProps = {
   index: {
     type: Number
@@ -21642,10 +21577,13 @@ var DSplitterBar = defineComponent({
     }, {
       immediate: true
     });
-    watch([() => store.state.panes, domRef], ([panes, ele]) => {
+    watch([() => store == null ? void 0 : store.state.panes, domRef], ([, ele]) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       if (!store.isStaticBar(props.index)) {
         state.wrapperClass += " resizable";
-      } else {
+      } else if (ele) {
         setStyle(ele, {
           flexBasis: props.disabledBarSize
         });
@@ -21653,62 +21591,10 @@ var DSplitterBar = defineComponent({
     }, {
       deep: true
     });
-    const coordinate = {
-      pageX: 0,
-      pageY: 0,
-      originalX: 0,
-      originalY: 0
-    };
-    let initState2;
-    const resizeProp = {
-      enableResize: true,
-      onPressEvent: function({
-        originalEvent
-      }) {
-        originalEvent.stopPropagation();
-        if (!store.isResizable(props.index)) {
-          return;
-        }
-        initState2 = store.dragState(props.index);
-        coordinate.originalX = originalEvent.pageX;
-        coordinate.originalY = originalEvent.pageY;
-      },
-      onDragEvent: function({
-        originalEvent
-      }) {
-        originalEvent.stopPropagation();
-        if (!store.isResizable(props.index)) {
-          return;
-        }
-        coordinate.pageX = originalEvent.pageX;
-        coordinate.pageY = originalEvent.pageY;
-        let distance;
-        if (props.orientation === "vertical") {
-          distance = coordinate.pageY - coordinate.originalY;
-        } else {
-          distance = coordinate.pageX - coordinate.originalX;
-        }
-        store.setSize(initState2, distance);
-      },
-      onReleaseEvent: function({
-        originalEvent
-      }) {
-        originalEvent.stopPropagation();
-        if (!store.isResizable(props.index)) {
-          return;
-        }
-        coordinate.pageX = originalEvent.pageX;
-        coordinate.pageY = originalEvent.pageY;
-        let distance;
-        if (props.orientation === "vertical") {
-          distance = coordinate.pageY - coordinate.originalY;
-        } else {
-          distance = coordinate.pageX - coordinate.originalX;
-        }
-        store.setSize(initState2, distance);
-      }
-    };
     const queryPanes = (index2, nearIndex) => {
+      if (!store) {
+        return {};
+      }
       const pane = store.getPane(index2);
       const nearPane = store.getPane(nearIndex);
       return {
@@ -21720,7 +21606,7 @@ var DSplitterBar = defineComponent({
       var _a, _b, _c, _d;
       const isCollapsible = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsible) && showIcon;
       const isCollapsed = (_d = (_c = pane == null ? void 0 : pane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed;
-      const isNearPaneCollapsed = nearPane.collapsed;
+      const isNearPaneCollapsed = nearPane == null ? void 0 : nearPane.collapsed;
       return {
         "devui-collapse": isCollapsible,
         collapsed: isCollapsed,
@@ -21729,6 +21615,9 @@ var DSplitterBar = defineComponent({
     };
     const prevClass = computed(() => {
       var _a, _b;
+      if (!props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -21738,6 +21627,9 @@ var DSplitterBar = defineComponent({
     });
     const nextClass = computed(() => {
       var _a, _b;
+      if (!store || !props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -21747,6 +21639,9 @@ var DSplitterBar = defineComponent({
     });
     const toggleResize = () => {
       var _a, _b, _c, _d;
+      if (!domRef.value || !props || props.index === void 0) {
+        return;
+      }
       const {
         pane,
         nearPane
@@ -21759,10 +21654,16 @@ var DSplitterBar = defineComponent({
       }
     };
     const handleCollapsePrePane = (lockStatus) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       store.tooglePane(props.index, props.index + 1, lockStatus);
       toggleResize();
     };
     const handleCollapseNextPane = (lockStatus) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       store.tooglePane(props.index + 1, props.index, lockStatus);
       toggleResize();
     };
@@ -21770,11 +21671,78 @@ var DSplitterBar = defineComponent({
       handleCollapsePrePane(true);
       handleCollapseNextPane(true);
     };
+    const coordinate = {
+      pageX: 0,
+      pageY: 0,
+      originalX: 0,
+      originalY: 0
+    };
+    let initState2;
+    const resizeProp = {
+      enableResize: true,
+      onPressEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store || !props || props.index === void 0) {
+          return;
+        }
+        if (!store.isResizable(props.index)) {
+          return;
+        }
+        initState2 = store.dragState(props.index);
+        coordinate.originalX = originalEvent.pageX;
+        coordinate.originalY = originalEvent.pageY;
+      },
+      onDragEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store || !props || props.index === void 0) {
+          return;
+        }
+        if (!store.isResizable(props.index)) {
+          return;
+        }
+        coordinate.pageX = originalEvent.pageX;
+        coordinate.pageY = originalEvent.pageY;
+        let distance;
+        if (props.orientation === "vertical") {
+          distance = coordinate.pageY - coordinate.originalY;
+        } else {
+          distance = coordinate.pageX - coordinate.originalX;
+        }
+        store.setSize(initState2, distance);
+      },
+      onReleaseEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store || !props || props.index === void 0) {
+          return;
+        }
+        if (!store.isResizable(props.index)) {
+          return;
+        }
+        coordinate.pageX = originalEvent.pageX;
+        coordinate.pageY = originalEvent.pageY;
+        let distance;
+        if (props.orientation === "vertical") {
+          distance = coordinate.pageY - coordinate.originalY;
+        } else {
+          distance = coordinate.pageX - coordinate.originalX;
+        }
+        store.setSize(initState2, distance);
+      }
+    };
     onMounted(() => {
       initialCollapseStatus();
     });
     const renderCollapsedTip = () => {
       var _a, _b, _c, _d;
+      if (!props || props.index === void 0) {
+        return "\u6536\u8D77";
+      }
       const {
         pane,
         nearPane
@@ -21918,6 +21886,24 @@ class SplitterStore {
     }
   }
 }
+const splitterProps = {
+  orientation: {
+    type: String,
+    default: "horizontal"
+  },
+  splitBarSize: {
+    type: String,
+    default: "2px"
+  },
+  disabledBarSize: {
+    type: String,
+    default: "1px"
+  },
+  showCollapseButton: {
+    type: Boolean,
+    default: true
+  }
+};
 var splitter = "";
 var Splitter = defineComponent({
   name: "DSplitter",
@@ -21959,7 +21945,9 @@ var Splitter = defineComponent({
         return;
       }
       refreshSplitterContainerSize();
-      observer.observe(domRef.value);
+      if (domRef.value) {
+        observer.observe(domRef.value);
+      }
     });
     onUnmounted(() => {
       observer.disconnect();
@@ -22055,27 +22043,35 @@ var SplitterPane = defineComponent({
       }
     };
     watch([() => props.size, domRef], ([size, ele]) => {
-      setSizeStyle(size, ele);
+      if (size && ele) {
+        setSizeStyle(size, ele);
+      }
     }, {
       immediate: true
     });
     const orientation = inject("orientation");
     let initialSize = "";
     onMounted(() => {
-      initialSize = props.size;
-      store.setPanes({
-        panes: store.state.panes
-      });
+      if (props.size) {
+        initialSize = props.size;
+      }
+      if (store) {
+        store.setPanes({
+          panes: store.state.panes
+        });
+      }
     });
     onUpdated(() => {
-      store.setPanes({
-        panes: store.state.panes
-      });
+      if (store) {
+        store.setPanes({
+          panes: store.state.panes
+        });
+      }
     });
     const getPaneSize = () => {
       const ele = domRef.value;
       if (!ele) {
-        return;
+        return 0;
       }
       if (orientation === "vertical") {
         return ele.offsetHeight;
@@ -23002,7 +22998,8 @@ const TableProps = {
     type: String,
     validator(value) {
       return value === "sm" || value === "md" || value === "lg";
-    }
+    },
+    default: "sm"
   },
   rowHoveredHighlight: {
     type: Boolean,
@@ -23014,7 +23011,7 @@ const TableProps = {
   },
   checkable: {
     type: Boolean,
-    default: true
+    default: false
   },
   tableLayout: {
     type: String,
@@ -23030,15 +23027,48 @@ const TableProps = {
   headerBg: {
     type: Boolean,
     default: false
+  },
+  spanMethod: {
+    type: Function
+  },
+  borderType: {
+    type: String,
+    default: ""
   }
 };
 const TABLE_TOKEN = Symbol();
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 function useTable(props) {
+  const ns = useNamespace("table");
   const classes = computed(() => ({
-    "devui-table": true,
-    "devui-table-striped": props.striped,
-    "header-bg": props.headerBg,
-    "table-layout-auto": props.tableLayout === "auto"
+    [ns.e("view")]: true,
+    [ns.m("striped")]: props.striped,
+    [ns.m("header-bg")]: props.headerBg,
+    [ns.m("layout-auto")]: props.tableLayout === "auto",
+    [ns.m(`${props.size}`)]: true,
+    [ns.m(`${props.borderType}`)]: props.borderType
   }));
   const style2 = computed(() => ({
     maxHeight: props.maxHeight,
@@ -23049,13 +23079,14 @@ function useTable(props) {
   return { classes, style: style2 };
 }
 const useFixedColumn = (column) => {
+  const ns = useNamespace("table");
   const stickyCell = computed(() => {
     const col2 = column.value;
     if (col2.fixedLeft) {
-      return `devui-sticky-cell left`;
+      return `${ns.m("sticky-cell")} left`;
     }
     if (col2.fixedRight) {
-      return `devui-sticky-cell right`;
+      return `${ns.m("sticky-cell")} right`;
     }
     return void 0;
   });
@@ -23198,10 +23229,10 @@ var ColGroup = defineComponent({
   name: "DColGroup",
   setup() {
     const parent = inject(TABLE_TOKEN);
-    const columns = parent.store.states._columns;
-    return () => parent.props.tableLayout === "fixed" ? createVNode("colgroup", null, [parent.props.checkable ? createVNode("col", {
+    const columns = parent == null ? void 0 : parent.store.states._columns;
+    return () => (parent == null ? void 0 : parent.props.tableLayout) === "fixed" ? createVNode("colgroup", null, [parent.props.checkable ? createVNode("col", {
       "width": 36
-    }, null) : null, columns.value.map((column, index2) => {
+    }, null) : null, columns == null ? void 0 : columns.value.map((column, index2) => {
       return createVNode("col", {
         "key": index2,
         "width": column.realWidth
@@ -23381,8 +23412,6 @@ const Filter = defineComponent({
     })]);
   }
 });
-var header = "";
-var body = "";
 const useSort = (store, column) => {
   const directionRef = ref("DESC");
   watch([directionRef, column], ([direction, column2]) => {
@@ -23392,13 +23421,53 @@ const useSort = (store, column) => {
   }, { immediate: true });
   return directionRef;
 };
-const useFliter = (store, column) => {
+const useFilter = (store, column) => {
   const filteredRef = shallowRef();
   watch(filteredRef, (results2) => {
     store.filterData(column.value.field, results2);
   });
   return filteredRef;
 };
+var TH = defineComponent({
+  name: "DTableHeaderTh",
+  props: {
+    column: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const table2 = inject(TABLE_TOKEN);
+    const {
+      column
+    } = toRefs(props);
+    const directionRef = useSort(table2.store, column);
+    const filteredRef = useFilter(table2.store, column);
+    const {
+      stickyCell,
+      offsetStyle
+    } = useFixedColumn(column);
+    return () => {
+      var _a, _b;
+      return createVNode("th", {
+        "class": stickyCell.value,
+        "style": offsetStyle.value
+      }, [createVNode("div", {
+        "class": "header-container"
+      }, [(_b = (_a = props.column).renderHeader) == null ? void 0 : _b.call(_a), props.column.filterable && createVNode(Filter, {
+        "modelValue": filteredRef.value,
+        "onUpdate:modelValue": ($event) => filteredRef.value = $event,
+        "filterList": props.column.filterList,
+        "customTemplate": props.column.customFilterTemplate
+      }, null)]), props.column.sortable && createVNode(Sort, {
+        "modelValue": directionRef.value,
+        "onUpdate:modelValue": ($event) => directionRef.value = $event
+      }, null)]);
+    };
+  }
+});
+var header = "";
+var body = "";
 var TableHeader = defineComponent({
   name: "DTableHeader",
   setup() {
@@ -23409,60 +23478,111 @@ var TableHeader = defineComponent({
       _columns: columns,
       isFixedLeft
     } = table2.store.states;
+    const ns = useNamespace("table");
     const thAttrs = computed(() => isFixedLeft.value ? {
-      class: "devui-sticky-cell left",
+      class: `${ns.m("sticky-cell")} left`,
       style: "left:0;"
     } : null);
-    const checkbox2 = computed(() => table2.props.checkable ? createVNode("th", thAttrs.value, [createVNode(Checkbox, {
-      "style": "padding:10px;",
+    const checkbox2 = computed(() => table2.props.checkable ? createVNode("th", mergeProps({
+      "class": ns.e("checkable-cell")
+    }, thAttrs.value), [createVNode(Checkbox, {
       "modelValue": checkAll.value,
       "onUpdate:modelValue": ($event) => checkAll.value = $event,
       "halfchecked": halfChecked.value
     }, null)]) : null);
     return () => {
       return createVNode("thead", {
-        "class": "devui-thead"
-      }, [createVNode("tr", null, [checkbox2.value, columns.value.map((column, index2) => createVNode(Th, {
+        "class": ns.e("thead")
+      }, [createVNode("tr", null, [checkbox2.value, columns.value.map((column, index2) => createVNode(TH, {
         "key": index2,
         "column": column
       }, null))])]);
     };
   }
 });
-const Th = defineComponent({
+var TD = defineComponent({
+  name: "DTableBodyTd",
   props: {
     column: {
       type: Object,
-      required: true
+      default: () => ({})
+    },
+    row: {
+      type: Object,
+      default: () => ({})
+    },
+    index: {
+      type: Number,
+      default: 0
     }
   },
   setup(props) {
-    const table2 = inject(TABLE_TOKEN);
-    const {
-      column
-    } = toRefs(props);
-    const directionRef = useSort(table2.store, column);
-    const filteredRef = useFliter(table2.store, column);
+    const column = toRef(props, "column");
     const {
       stickyCell,
       offsetStyle
     } = useFixedColumn(column);
-    return () => createVNode("th", {
-      "class": stickyCell.value,
-      "style": offsetStyle.value
-    }, [createVNode("div", {
-      "class": "header-container"
-    }, [props.column.renderHeader(), props.column.filterable && createVNode(Filter, {
-      "modelValue": filteredRef.value,
-      "onUpdate:modelValue": ($event) => filteredRef.value = $event,
-      "filterList": props.column.filterList,
-      "customTemplate": props.column.customFilterTemplate
-    }, null)]), props.column.sortable && createVNode(Sort, {
-      "modelValue": directionRef.value,
-      "onUpdate:modelValue": ($event) => directionRef.value = $event
-    }, null)]);
+    return () => {
+      var _a, _b;
+      return createVNode("td", {
+        "class": stickyCell.value,
+        "style": offsetStyle.value
+      }, [(_b = (_a = column.value).renderCell) == null ? void 0 : _b.call(_a, props.row, props.index)]);
+    };
   }
 });
+function useMergeCell() {
+  const table2 = inject(TABLE_TOKEN);
+  const { _data: data, _columns: columns } = table2.store.states;
+  const getSpan = (row2, column, rowIndex, columnIndex) => {
+    const fn = table2 == null ? void 0 : table2.props.spanMethod;
+    let rowspan = 1;
+    let colspan = 1;
+    if (typeof fn === "function") {
+      const result2 = fn({ row: row2, column, rowIndex, columnIndex });
+      if (Array.isArray(result2)) {
+        rowspan = result2[0];
+        colspan = result2[1];
+      } else if (typeof result2 === "object") {
+        rowspan = result2.rowspan;
+        colspan = result2.colspan;
+      }
+    }
+    return { rowspan, colspan };
+  };
+  const tableSpans = computed(() => {
+    const result2 = {};
+    if (table2 == null ? void 0 : table2.props.spanMethod) {
+      data.value.forEach((row2, rowIndex) => {
+        columns.value.forEach((column, columnIndex) => {
+          const { rowspan, colspan } = getSpan(row2, column, rowIndex, columnIndex);
+          if (rowspan > 1 || colspan > 1) {
+            result2[`${rowIndex}-${columnIndex}`] = [rowspan, colspan];
+          }
+        });
+      });
+    }
+    return result2;
+  });
+  const removeCells = computed(() => {
+    const result2 = [];
+    for (const indexKey of Object.keys(tableSpans.value)) {
+      const indexArray = indexKey.split("-").map((item2) => Number(item2));
+      const spans = tableSpans.value[indexKey];
+      for (let i = 1; i < spans[0]; i++) {
+        result2.push(`${indexArray[0] + i}-${indexArray[1]}`);
+        for (let j = 1; j < spans[1]; j++) {
+          result2.push(`${indexArray[0] + i}-${indexArray[1] + j}`);
+        }
+      }
+      for (let i = 1; i < spans[1]; i++) {
+        result2.push(`${indexArray[0]}-${indexArray[1] + i}`);
+      }
+    }
+    return result2;
+  });
+  return { tableSpans, removeCells };
+}
 var TableBody = defineComponent({
   name: "DTableBody",
   setup() {
@@ -23473,55 +23593,48 @@ var TableBody = defineComponent({
       _checkList: checkList,
       isFixedLeft
     } = table2.store.states;
+    const ns = useNamespace("table");
     const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
+    const {
+      tableSpans,
+      removeCells
+    } = useMergeCell();
     const tdAttrs = computed(() => isFixedLeft.value ? {
-      class: "devui-sticky-cell left",
+      class: `${ns.m("sticky-cell")} left`,
       style: "left:0;"
     } : null);
-    const renderCheckbox = (index2) => table2.props.checkable ? createVNode("td", tdAttrs.value, [createVNode(Checkbox, {
+    const renderCheckbox = (index2) => table2.props.checkable ? createVNode("td", mergeProps({
+      "class": ns.e("checkable-cell")
+    }, tdAttrs.value), [createVNode(Checkbox, {
       "modelValue": checkList.value[index2],
       "onUpdate:modelValue": ($event) => checkList.value[index2] = $event
     }, null)]) : null;
     return () => createVNode("tbody", {
-      "class": "devui-tbody"
+      "class": ns.e("tbody")
     }, [data.value.map((row2, rowIndex) => {
       return createVNode("tr", {
         "key": rowIndex,
         "class": {
           "hover-enabled": hoverEnabled.value
         }
-      }, [renderCheckbox(rowIndex), columns.value.map((column, index2) => createVNode(TD, {
-        "column": column,
-        "index": index2,
-        "row": row2
-      }, null))]);
+      }, [renderCheckbox(rowIndex), columns.value.map((column, columnIndex) => {
+        var _a;
+        const cellId = `${rowIndex}-${columnIndex}`;
+        const [rowspan, colspan] = (_a = tableSpans.value[cellId]) != null ? _a : [1, 1];
+        if (removeCells.value.includes(cellId)) {
+          return null;
+        }
+        return createVNode(TD, {
+          "column": column,
+          "index": columnIndex,
+          "row": row2,
+          "rowspan": rowspan,
+          "colspan": colspan
+        }, null);
+      })]);
     })]);
   }
 });
-const TD = defineComponent({
-  props: {
-    column: {
-      type: Object
-    },
-    row: {
-      type: Object
-    },
-    index: {
-      type: Number
-    }
-  },
-  setup(props) {
-    const column = toRef(props, "column");
-    const {
-      stickyCell,
-      offsetStyle
-    } = useFixedColumn(column);
-    return () => createVNode("td", {
-      "class": stickyCell.value,
-      "style": offsetStyle.value
-    }, [column.value.renderCell(props.row, props.index)]);
-  }
-});
 var FixHeader = defineComponent({
   props: {
     classes: {
@@ -23533,9 +23646,10 @@ var FixHeader = defineComponent({
     }
   },
   setup(props) {
+    const ns = useNamespace("table");
     return () => {
       return createVNode("div", {
-        "class": "devui-table-view"
+        "class": ns.e("fix-header")
       }, [createVNode("div", {
         "style": "overflow:hidden scroll;"
       }, [createVNode("table", {
@@ -23543,7 +23657,7 @@ var FixHeader = defineComponent({
         "cellpadding": "0",
         "cellspacing": "0"
       }, [createVNode(ColGroup, null, null), createVNode(TableHeader, null, null)])]), createVNode("div", {
-        "class": "scroll-view"
+        "class": ns.e("scroll-view")
       }, [createVNode("table", {
         "class": props.classes,
         "cellpadding": "0",
@@ -23579,6 +23693,9 @@ var NormalHeader = defineComponent({
 var table = "";
 var Table = defineComponent({
   name: "DTable",
+  directives: {
+    dLoading: loadingDirective
+  },
   props: TableProps,
   setup(props, ctx2) {
     const table2 = getCurrentInstance();
@@ -23590,23 +23707,27 @@ var Table = defineComponent({
       style: style2
     } = useTable(props);
     const isEmpty2 = computed(() => props.data.length === 0);
+    const ns = useNamespace("table");
     ctx2.expose({
       getCheckedRows() {
         return store.getCheckedRows();
       }
     });
-    return () => withDirectives(createVNode("div", {
-      "class": "devui-table-wrapper",
-      "style": style2.value
-    }, [ctx2.slots.default(), props.fixHeader ? createVNode(FixHeader, {
-      "classes": classes.value,
-      "is-empty": isEmpty2.value
-    }, null) : createVNode(NormalHeader, {
-      "classes": classes.value,
-      "is-empty": isEmpty2.value
-    }, null), isEmpty2.value && createVNode("div", {
-      "class": "devui-table-empty"
-    }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
+    return () => {
+      var _a, _b;
+      return withDirectives(createVNode("div", {
+        "class": ns.b(),
+        "style": style2.value
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a), props.fixHeader ? createVNode(FixHeader, {
+        "classes": classes.value,
+        "is-empty": isEmpty2.value
+      }, null) : createVNode(NormalHeader, {
+        "classes": classes.value,
+        "is-empty": isEmpty2.value
+      }, null), isEmpty2.value && createVNode("div", {
+        "class": ns.e("empty")
+      }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
+    };
   }
 });
 const TableColumnProps = {
@@ -23739,30 +23860,26 @@ var Column = defineComponent({
     const column = createColumn(toRefs(props), ctx2.slots);
     const parent = inject(TABLE_TOKEN);
     onMounted(() => {
-      parent.store.insertColumn(column);
+      parent == null ? void 0 : parent.store.insertColumn(column);
       watch(() => column.order, () => {
-        parent.store.sortColumn();
+        parent == null ? void 0 : parent.store.sortColumn();
       });
     });
     onBeforeUnmount(() => {
-      parent.store.removeColumn(column);
+      parent == null ? void 0 : parent.store.removeColumn(column);
     });
   },
   render() {
     return null;
   }
 });
-Table.install = function(app) {
-  app.directive("dLoading", loadingDirective);
-  app.component(Table.name, Table);
-  app.component(Column.name, Column);
-};
 var TableInstall = {
   title: "Table \u8868\u683C",
   category: "\u6570\u636E\u5C55\u793A",
   status: "10%",
   install(app) {
-    app.use(Table);
+    app.component(Table.name, Table);
+    app.component(Column.name, Column);
   }
 };
 const tagProps = {
@@ -23790,17 +23907,17 @@ const tagProps = {
 function useClass(props) {
   return computed(() => {
     const { type: type4, color: color2, deletable } = props;
-    return `devui-tag devui-tag-${type4 || (color2 ? "colorful" : "") || "default"} ${deletable ? "devui-tag-deletable" : ""}`;
+    return `devui-tag-item devui-tag-${type4 || (color2 ? "colorful" : "") || "default"}${deletable ? " devui-tag-deletable" : ""}`;
   });
 }
 function useColor(props) {
   return computed(() => {
     const { color: color2, type: type4 } = props;
     const typeMap = {
-      primary: "#5e7ce0",
-      success: "#50d4ab",
-      warning: "#fac20a",
-      danger: "#f66f6a"
+      primary: "var(--devui-primary, #5e7ce0)",
+      success: "var(--devui-success, #50d4ab)",
+      warning: "var(--devui-warning, #fac20a)",
+      danger: "var(--devui-danger, #f66f6a)"
     };
     const colorMap = {
       "blue-w98": "#3383ff",
@@ -23841,12 +23958,12 @@ var Tag = defineComponent({
     const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type4.value && !color2.value;
     const isShow = ref(true);
-    const handleClick = () => {
-      emit("click");
+    const handleClick = (e) => {
+      emit("click", e);
     };
-    const handleDelete = () => {
+    const handleDelete = (e) => {
       isShow.value = false;
-      emit("tagDelete");
+      emit("tagDelete", e);
     };
     const closeIconEl = () => {
       return deletable.value ? createVNode("a", {
@@ -23863,7 +23980,6 @@ var Tag = defineComponent({
       }, null)]) : null;
     };
     const unWatch = watch(checked, (newVal) => {
-      console.log("checkedChange");
       emit("checkedChange", newVal);
     });
     onUnmounted(() => unWatch());
@@ -23877,22 +23993,19 @@ var Tag = defineComponent({
         "style": {
           display: "block",
           color: checked.value ? "#fff" : themeColor.value,
-          backgroundColor: checked.value ? themeColor.value : !color2.value ? "" : "#fff"
+          backgroundColor: checked.value ? themeColor.value : !color2.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
         "title": tagTitle
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]), [[vShow, isShow.value]]);
     };
   }
 });
-Tag.install = function(app) {
-  app.component(Tag.name, Tag);
-};
 var TagInstall = {
   title: "Tag \u6807\u7B7E",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "70%",
+  status: "100%",
   install(app) {
-    app.use(Tag);
+    app.component(Tag.name, Tag);
   }
 };
 var removeBtnSvg = createVNode("svg", mergeProps({
@@ -26293,7 +26406,7 @@ const deleteNode = (id, data) => {
 };
 function useToggle$1(data) {
   const openedTree = (tree2) => {
-    return tree2.reduce((acc, item2) => item2.open ? acc.concat(item2, openedTree(item2.children)) : acc.concat(item2), []);
+    return tree2.reduce((acc, item2) => item2.open ? acc.concat(item2, item2.children ? openedTree(item2.children) : []) : acc.concat(item2), []);
   };
   const openedData = ref(openedTree(data.value));
   watch(() => data.value, (d) => openedData.value = openedTree(d), { deep: true });
@@ -26315,7 +26428,7 @@ function useMergeNode(data) {
     const { [childName]: children, [labelName]: label } = treeItem;
     if (Array.isArray(children) && children.length === 1 && children[0][childName] && children[0][childName].length === 1) {
       return mergeObject(Object.assign({}, children[0], {
-        [labelName]: `${label} \\ ${children[0][labelName]}`
+        [labelName]: `${label} / ${children[0][labelName]}`
       }));
     }
     return treeItem;
@@ -26462,7 +26575,7 @@ function useChecked(cbr, ctx2, data) {
       currentSelected = Object.assign(currentSelected, Object.fromEntries(childLevel.map((key) => [key, isSelected ? "select" : "none"])), { [id]: isSelected ? "select" : "none" });
     }
     selected.value = currentSelected;
-    const currentSelectedItem = flatData.filter(({ id: id2 }) => currentSelected[id2] && currentSelected[id2] !== "none");
+    const currentSelectedItem = flatData.filter(({ id: itemId }) => currentSelected[itemId] && currentSelected[itemId] !== "none");
     ctx2.emit("nodeSelected", currentSelectedItem);
   };
   return {
@@ -26507,9 +26620,9 @@ const useLazy = () => {
   };
 };
 const reflectIconWithHandle = (data, operator) => {
-  const handleAdd = (payload) => operator.handleAdd();
-  const handleEdit = (payload) => operator.handleEdit();
-  const handleDelete = (payload) => operator.handleDelete();
+  const handleAdd = () => operator.handleAdd();
+  const handleEdit = () => operator.handleEdit();
+  const handleDelete = () => operator.handleDelete();
   return createVNode(Fragment, null, [operator.addable && createVNode("span", {
     "class": "op-icons icon icon-add",
     "onClick": handleAdd
@@ -26521,13 +26634,13 @@ const reflectIconWithHandle = (data, operator) => {
     "onClick": handleDelete
   }, null)]);
 };
-const useOperate = (treeData) => {
+const useOperate = () => {
   const operateIconReflect = ref([]);
   const editStatusReflect = ref({});
   const handleReflectIdToIcon = (id, operator) => {
     const isNotExistedReflectItem = operateIconReflect.value.every(({
       id: d
-    }) => d != id);
+    }) => d !== id);
     if (isNotExistedReflectItem) {
       editStatusReflect.value[id] = false;
       operateIconReflect.value.push({
@@ -26545,7 +26658,7 @@ const useOperate = (treeData) => {
 const ACTIVE_NODE = "devui-tree-node__content--value-wrapper";
 function useDraggable(draggable, dropType, node, renderData, data) {
   const dragState = reactive({
-    dropType: null,
+    dropType: void 0,
     draggingNode: null
   });
   const treeIdMapValue = ref({});
@@ -26554,7 +26667,7 @@ function useDraggable(draggable, dropType, node, renderData, data) {
   }, { deep: true, immediate: true });
   const removeDraggingStyle = (target) => {
     var _a;
-    (_a = target.querySelector(`.${ACTIVE_NODE}`)) == null ? void 0 : _a.classList.remove(...["prev", "next", "inner"].map((item2) => `devui-drop-${item2}`));
+    (_a = target == null ? void 0 : target.querySelector(`.${ACTIVE_NODE}`)) == null ? void 0 : _a.classList.remove(...["prev", "next", "inner"].map((item2) => `devui-drop-${item2}`));
   };
   const checkIsParent = (childNodeId, parentNodeId) => {
     const realParentId = treeIdMapValue.value[childNodeId].parentId;
@@ -26566,7 +26679,7 @@ function useDraggable(draggable, dropType, node, renderData, data) {
       return false;
     }
   };
-  const handlerDropData = (dragNodeId, dropNodeId, dropType2) => {
+  const handlerDropData = (dragNodeId, dropNodeId, currentDropType) => {
     const cloneData = lodash.exports.cloneDeep(data.value);
     let nowDragNode;
     let nowDropNode;
@@ -26590,13 +26703,13 @@ function useDraggable(draggable, dropType, node, renderData, data) {
       });
     };
     findDragAndDropNode(cloneData);
-    if (nowDragNode && nowDropNode && dropType2) {
+    if (nowDragNode && nowDropNode && currentDropType) {
       const cloneDrapNode = lodash.exports.cloneDeep(nowDragNode.target[nowDragNode.index]);
-      if (dropType2 === "prev") {
+      if (currentDropType === "prev") {
         nowDropNode.target.splice(nowDropNode.index, 0, cloneDrapNode);
-      } else if (dropType2 === "next") {
+      } else if (currentDropType === "next") {
         nowDropNode.target.splice(nowDropNode.index + 1, 0, cloneDrapNode);
-      } else if (dropType2 === "inner") {
+      } else if (currentDropType === "inner") {
         const children = nowDropNode.target[nowDropNode.index].children;
         if (Array.isArray(children)) {
           children.unshift(cloneDrapNode);
@@ -26612,18 +26725,21 @@ function useDraggable(draggable, dropType, node, renderData, data) {
     return cloneData;
   };
   const onDragstart = (event, treeNode) => {
+    var _a;
     dragState.draggingNode = event.target;
-    const data2 = {
+    const treeInfo = {
       type: "tree-node",
       nodeId: treeNode.id
     };
-    event.dataTransfer.setData("Text", JSON.stringify(data2));
+    (_a = event.dataTransfer) == null ? void 0 : _a.setData("Text", JSON.stringify(treeInfo));
   };
   const onDragover = (event) => {
     var _a;
     if (draggable) {
       event.preventDefault();
-      event.dataTransfer.dropEffect = "move";
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
       if (!node) {
         return;
       }
@@ -26656,12 +26772,13 @@ function useDraggable(draggable, dropType, node, renderData, data) {
     removeDraggingStyle(event.currentTarget);
   };
   const onDrop2 = (event, dropNode) => {
+    var _a;
     removeDraggingStyle(event.currentTarget);
     if (!draggable) {
       return;
     }
     event.preventDefault();
-    const transferDataStr = event.dataTransfer.getData("Text");
+    const transferDataStr = (_a = event.dataTransfer) == null ? void 0 : _a.getData("Text");
     if (transferDataStr) {
       try {
         const transferData = JSON.parse(transferDataStr);
@@ -26690,8 +26807,54 @@ function useDraggable(draggable, dropType, node, renderData, data) {
     dragState
   };
 }
-var IconOpen$1 = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24gc3ZnLWljb24tY2xvc2UiCj4KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjNWU3Y2UwIj48L3JlY3Q+CiAgICA8cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBmaWxsPSIjNWU3Y2UwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=";
-var IconClose$1 = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24iCj4KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSIyIiBzdHJva2U9IiMyNTJiM2EiPjwvcmVjdD4KICAgIDxwYXRoCiAgICAgIGZpbGw9IiMyNTJiM2EiCiAgICAgIGQ9Ik04Ljc1LDQgTDguNzUsNy4yNSBMMTIsNy4yNSBMMTIsOC43NSBMOC43NDksOC43NSBMOC43NSwxMiBMNy4yNSwxMiBMNy4yNDksOC43NSBMNCw4Ljc1IEw0LDcuMjUgTDcuMjUsNy4yNSBMNy4yNSw0IEw4Ljc1LDQgWiIKICAgID48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K";
+const IconOpen$1 = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon svg-icon-close"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#5e7ce0"
+}, null), createVNode("rect", {
+  "x": "4",
+  "y": "7",
+  "width": "8",
+  "height": "2",
+  "fill": "#5e7ce0"
+}, null)])]);
+const IconClose$1 = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#252b3a"
+}, null), createVNode("path", {
+  "fill": "#252b3a",
+  "d": "M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
+}, null)])]);
 var NodeContent = defineComponent({
   name: "DTreeNodeContent",
   props: {
@@ -26853,21 +27016,21 @@ var Tree = defineComponent({
             }, 4e3);
           });
         },
-        renderLoading: (id2) => {
+        renderLoading: (elementId) => {
           return loading.open({
-            target: document.getElementById(id2),
+            target: document.getElementById(elementId),
             message: "\u52A0\u8F7D\u4E2D...",
             positionType: "relative",
             zIndex: 1
           });
         }
       });
-      const renderFoldIcon = (item3) => {
+      const renderFoldIcon = (treeItem) => {
         const handleClick = async (target) => {
-          if (item3.isParent) {
-            item3.children = await getLazyData(id);
+          if (treeItem.isParent) {
+            treeItem.children = await getLazyData(id);
           }
-          return toggle(target, item3);
+          return toggle(target, treeItem);
         };
         return createVNode("div", {
           "class": "devui-tree-node__folder",
@@ -26917,15 +27080,12 @@ var Tree = defineComponent({
     };
   }
 });
-Tree.install = function(app) {
-  app.component(Tree.name, Tree);
-};
 var TreeInstall = {
   title: "Tree \u6811",
   category: "\u6570\u636E\u5C55\u793A",
   status: "20%",
   install(app) {
-    app.use(Tree);
+    app.component(Tree.name, Tree);
   }
 };
 var treeSelect = "";
@@ -27123,8 +27283,8 @@ function useClear(props, ctx2, data) {
     handleClearItem
   };
 }
-var IconOpen = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24gc3ZnLWljb24tY2xvc2UiCj4KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjNWU3Y2UwIj48L3JlY3Q+CiAgICA8cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBmaWxsPSIjNWU3Y2UwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=";
-var IconClose = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24iCj4KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSIyIiBzdHJva2U9IiMyNTJiM2EiPjwvcmVjdD4KICAgIDxwYXRoCiAgICAgIGZpbGw9IiMyNTJiM2EiCiAgICAgIGQ9Ik04Ljc1LDQgTDguNzUsNy4yNSBMMTIsNy4yNSBMMTIsOC43NSBMOC43NDksOC43NSBMOC43NSwxMiBMNy4yNSwxMiBMNy4yNDksOC43NSBMNCw4Ljc1IEw0LDcuMjUgTDcuMjUsNy4yNSBMNy4yNSw0IEw4Ljc1LDQgWiIKICAgID48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K";
+var IconOpen = "data:image/svg+xml;base64,PHN2Zw0KICB3aWR0aD0iMTZweCINCiAgaGVpZ2h0PSIxNnB4Ig0KICB2aWV3Qm94PSIwIDAgMTYgMTYiDQogIHZlcnNpb249IjEuMSINCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayINCiAgY2xhc3M9InN2Zy1pY29uIHN2Zy1pY29uLWNsb3NlIg0KPg0KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgcng9IjIiIHN0cm9rZT0iIzVlN2NlMCI+PC9yZWN0Pg0KICAgIDxyZWN0IHg9IjQiIHk9IjciIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIGZpbGw9IiM1ZTdjZTAiPjwvcmVjdD4NCiAgPC9nPg0KPC9zdmc+";
+var IconClose = "data:image/svg+xml;base64,PHN2Zw0KICB3aWR0aD0iMTZweCINCiAgaGVpZ2h0PSIxNnB4Ig0KICB2aWV3Qm94PSIwIDAgMTYgMTYiDQogIHZlcnNpb249IjEuMSINCiAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayINCiAgY2xhc3M9InN2Zy1pY29uIg0KPg0KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjMjUyYjNhIj48L3JlY3Q+DQogICAgPHBhdGgNCiAgICAgIGZpbGw9IiMyNTJiM2EiDQogICAgICBkPSJNOC43NSw0IEw4Ljc1LDcuMjUgTDEyLDcuMjUgTDEyLDguNzUgTDguNzQ5LDguNzUgTDguNzUsMTIgTDcuMjUsMTIgTDcuMjQ5LDguNzUgTDQsOC43NSBMNCw3LjI1IEw3LjI1LDcuMjUgTDcuMjUsNCBMOC43NSw0IFoiDQogICAgPjwvcGF0aD4NCiAgPC9nPg0KPC9zdmc+DQo=";
 var TreeSelect = defineComponent({
   name: "DTreeSelect",
   directives: {