vue-devui 1.0.0-pre.0 → 1.0.0-rc.2

package/vue-devui.es.js

@@ -33,9 +33,9 @@ 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, onUnmounted, unref, 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 { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
 import { onClickOutside } from "@vueuse/core";
 const accordionProps = {
   data: {
@@ -150,16 +150,18 @@ var DAccordionMenu = defineComponent({
       accordionCtx.menuToggleFn(itemEvent);
     };
     const hasActiveChildren = (item3) => {
-      if (item3[activeKey.value] === true)
+      if (item3[activeKey.value] === true) {
         return true;
+      }
       if (item3[childrenKey.value]) {
         return hasChildActive(item3[childrenKey.value]);
       }
     };
     const hasChildActive = (arr) => {
       let flag = false;
-      if (!arr.length)
+      if (!arr.length) {
         return false;
+      }
       for (let i = 0; i < arr.length; i++) {
         if (arr[i][activeKey.value] === true) {
           flag = true;
@@ -167,8 +169,9 @@ var DAccordionMenu = defineComponent({
         }
         if (arr[i][childrenKey.value]) {
           flag = hasChildActive(arr[i][childrenKey.value]);
-          if (flag)
+          if (flag) {
             break;
+          }
         }
       }
       return flag;
@@ -750,7 +753,7 @@ const AlertCloseIcon = () => createVNode("svg", {
   "transform": "translate(-3.000000, -3.000000)",
   "fill-rule": "nonzero"
 }, [createVNode("path", {
-  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z"
+  "d": "M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891         12.7352108,3.24751057 C13.0571998,3.5572302 13.0901298,4.03723416         12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416         C13.0645482,11.9370909 13.0605893,12.3571292 12.8158402,12.6640749         L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548         11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858         3.6740594,13.0636532 3.35648225,12.8298003 L3.26478919,12.7524894         C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416         L6.8583349,7.99900183 L3.19126762,4.31965839 C2.93545181,4.06290908         2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057         C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936         L8,6.85411161 L11.6426,3.19816936 Z"
 }, null)])])]);
 const AlertTypeIcon = (props) => createVNode("svg", {
   "width": "16px",
@@ -783,12 +786,12 @@ const AlertTypeIcon = (props) => createVNode("svg", {
         "fill-rule": "evenodd"
       }, [createVNode("path", {
         "class": "devui-icon-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": "devui-icon-warning-inner",
         "stroke-width": "0.3",
         "fill-rule": "nonzero",
-        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
+        "d": "M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263               L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5               L8.96842105,4.5 L8.62102372,9.86842105 Z"
       }, null)]);
     case "info":
       return createVNode("g", {
@@ -826,31 +829,32 @@ const AlertTypeIcon = (props) => createVNode("svg", {
       return null;
   }
 })()]);
+const alertProps = {
+  type: {
+    type: String,
+    default: "info"
+  },
+  cssClass: {
+    type: String,
+    default: ""
+  },
+  closeable: {
+    type: Boolean,
+    default: true
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  dismissTime: {
+    type: Number,
+    default: 0
+  }
+};
 var alert$1 = "";
 var Alert = defineComponent({
   name: "DAlert",
-  props: {
-    type: {
-      type: String,
-      default: "info"
-    },
-    cssClass: {
-      type: String,
-      default: ""
-    },
-    closeable: {
-      type: Boolean,
-      default: true
-    },
-    showIcon: {
-      type: Boolean,
-      default: true
-    },
-    dismissTime: {
-      type: Number,
-      default: 0
-    }
-  },
+  props: alertProps,
   emits: ["close"],
   setup(props, ctx2) {
     const hide = ref(false);
@@ -897,15 +901,12 @@ var Alert = defineComponent({
     };
   }
 });
-Alert.install = function(app) {
-  app.component(Alert.name, Alert);
-};
 var AlertInstall = {
   title: "Alert \u8B66\u544A",
   category: "\u53CD\u9988",
   status: "100%",
   install(app) {
-    app.use(Alert);
+    app.component(Alert.name, Alert);
   }
 };
 var Anchor = defineComponent({
@@ -1184,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,
@@ -1241,9 +1233,9 @@ const autoCompleteProps = {
     type: Boolean,
     default: false
   },
-  dAutoCompleteWidth: {
+  width: {
     type: Number,
-    default: null
+    default: 400
   },
   showAnimation: {
     type: Boolean,
@@ -1270,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;
@@ -1303,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;
@@ -1327,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;
@@ -1390,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;
         }
       }
@@ -1409,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);
@@ -1421,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,
@@ -1432,8 +1424,9 @@ function useLazyHandle(props, ctx2, handleSearch) {
   const showLoading = ref(false);
   const dropDownRef = ref();
   const loadMore = () => {
-    if (!props.enableLazyLoad && showLoading)
+    if (!props.enableLazyLoad && showLoading) {
       return;
+    }
     const dropDownValue = dropDownRef.value;
     const height = dropDownValue.scrollHeight;
     const scrollTop = dropDownValue.clientHeight + dropDownValue.scrollTop;
@@ -1514,7 +1507,7 @@ class View {
     __publicField(this, "left", "50%");
   }
 }
-const componentProps$1 = {
+const componentProps = {
   message: String,
   backdrop: Boolean,
   view: {
@@ -1542,7 +1535,7 @@ var loading$1 = "";
 var Loading = defineComponent({
   name: "DLoading",
   inheritAttrs: false,
-  props: componentProps$1,
+  props: componentProps,
   setup(props) {
     const style2 = {
       top: props.view.top,
@@ -1728,7 +1721,6 @@ var DAutoCompleteDropdown = defineComponent({
     const {
       disabled,
       maxHeight,
-      appendToBody,
       formatter,
       disabledKey,
       isSearching
@@ -1741,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",
@@ -1749,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)]]);
     };
   }
 });
@@ -1839,40 +1831,6 @@ const clickoutsideDirective = {
     delete el[ctx];
   }
 };
-const overlayProps = {
-  visible: {
-    type: Boolean
-  },
-  backgroundBlock: {
-    type: Boolean,
-    default: false
-  },
-  backgroundClass: {
-    type: String,
-    default: ""
-  },
-  backgroundStyle: {
-    type: [String, Object]
-  },
-  onBackdropClick: {
-    type: Function
-  },
-  backdropClose: {
-    type: Boolean,
-    default: true
-  },
-  hasBackdrop: {
-    type: Boolean,
-    default: true
-  }
-};
-const overlayEmits = ["update:visible", "backdropClick"];
-const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
-  overlayStyle: {
-    type: [String, Object],
-    default: void 0
-  }
-});
 const flexibleOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -1956,6 +1914,7 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
+      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -1990,7 +1949,7 @@ function useOverlay(props, emit) {
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
-  return { arrowRef, overlayRef };
+  return { arrowRef, overlayRef, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -2001,12 +1960,17 @@ const FlexibleOverlay = defineComponent({
   setup(props, {
     slots,
     attrs,
-    emit
+    emit,
+    expose
   }) {
     const {
       arrowRef,
-      overlayRef
+      overlayRef,
+      updatePosition
     } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
     return () => {
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
@@ -2033,8 +1997,7 @@ var AutoComplete = defineComponent({
     const {
       disabled,
       modelValue,
-      appendToBody,
-      dAutoCompleteWidth,
+      width,
       delay,
       allowEmptyValueSearch,
       formatter,
@@ -2042,7 +2005,7 @@ var AutoComplete = defineComponent({
       selectValue,
       source,
       searchFn,
-      appendToBodyDirections,
+      position,
       latestSource,
       showAnimation
     } = toRefs(props);
@@ -2094,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,
@@ -2494,8 +2446,9 @@ function useTarget(props, backTopRef) {
   const target = props.target;
   const getTargetEl = () => {
     const targetEl = document.querySelector(target);
-    if (!targetEl)
+    if (!targetEl) {
       throw new Error(`props ${target} is not existed`);
+    }
     targetEl.parentElement.style.position = "relative";
     backTopRef.value.style.position = "absolute";
     return targetEl;
@@ -2518,8 +2471,9 @@ function useVisibility(props, backTopRef) {
   return isVisible;
 }
 function useEventListener(target, event, cb) {
-  if (target)
+  if (target) {
     target.addEventListener(event, cb);
+  }
 }
 function useThrottle(fn, delay) {
   let last = null;
@@ -2572,7 +2526,7 @@ var BackTopInstall = {
     app.use(BackTop);
   }
 };
-const badgeStatusType = ["danger", "warning", "waiting", "success", "info"];
+const badgeStatusType = ["danger", "warning", "waiting", "success", "info", "common"];
 const badgePositionType = ["top-left", "top-right", "bottom-left", "bottom-right"];
 const badgeProps = {
   count: {
@@ -2702,8 +2656,9 @@ var BreadcrumbItem = defineComponent({
     const instance = getCurrentInstance();
     const router = instance.appContext.config.globalProperties.$router;
     const handleClickLink = () => {
-      if (!props.to || !router)
+      if (!props.to || !router) {
         return;
+      }
       props.replace ? router.replace(props.to) : router.push(props.to);
     };
     onMounted(() => {
@@ -2784,61 +2739,59 @@ var BreadcrumbInstall = {
     app.use(Breadcrumb);
   }
 };
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  setup(props) {
-    return __spreadValues({}, props);
+  size: {
+    type: String,
+    default: "inherit"
   },
-  render() {
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
+var DIcon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  setup(props) {
     const {
       name,
       size,
       color: color2,
       classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color: color2
-      }
-    }, null);
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color2.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var IconInstall = {
   title: "Icon \u56FE\u6807",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Icon);
+    app.component(DIcon.name, DIcon);
   }
 };
 const buttonProps = {
@@ -2925,9 +2878,10 @@ var DButton = defineComponent({
         "class": classes.value,
         "disabled": disabled.value,
         "onClick": onClick
-      }, [icon.value && createVNode(Icon, {
+      }, [icon.value && createVNode(DIcon, {
         "name": icon.value,
         "size": "12px",
+        "color": "",
         "class": iconClass.value
       }, null), createVNode("span", {
         "class": "button-content"
@@ -3211,12 +3165,12 @@ var Carousel = defineComponent({
     }, [createVNode("button", {
       "class": "arrow-left",
       "onClick": () => prev()
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "name": "arrow-left"
     }, null)]), createVNode("button", {
       "class": "arrow-right",
       "onClick": () => next()
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "name": "arrow-right"
     }, null)])]) : null, createVNode("div", {
       "class": "devui-carousel-item-wrapper",
@@ -8847,8 +8801,9 @@ const updateCheckOptionStatus = (tagList) => {
     var _a;
     if (((_a = node == null ? void 0 : node.children) == null ? void 0 : _a.length) > 0) {
       node.children.forEach((item2) => {
-        if (item2.disabled)
+        if (item2.disabled) {
           return;
+        }
         if (type4 === "checked") {
           item2[type4] = status2;
           item2["halfChecked"] = false;
@@ -8884,8 +8839,9 @@ const findChildrenCheckedStatusToUpdateParent = (node) => {
   }
 };
 const updateParentNodeStatus = (node, options, ulIndex) => {
-  if (ulIndex < 0)
+  if (ulIndex < 0) {
     return;
+  }
   findChildrenCheckedStatusToUpdateParent(node);
   ulIndex -= 1;
   const parentNode = node == null ? void 0 : node.parent;
@@ -8939,8 +8895,9 @@ const DCascaderItem = (props) => {
   } = updateCheckOptionStatus(tagList);
   const disbaled = computed(() => cascaderItem == null ? void 0 : cascaderItem.disabled);
   const updateValues = () => {
-    if (stopDefault.value)
+    if (stopDefault.value) {
       return;
+    }
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex);
     activeIndexs[ulIndex] = liIndex;
     if (!multiple) {
@@ -8948,8 +8905,9 @@ const DCascaderItem = (props) => {
     }
   };
   const mouseEnter = () => {
-    if (disbaled.value || multiple)
+    if (disbaled.value || multiple) {
       return;
+    }
     updateValues();
   };
   const mouseenter = {
@@ -8957,8 +8915,9 @@ const DCascaderItem = (props) => {
   };
   const mouseClick = () => {
     var _a2;
-    if (disbaled.value)
+    if (disbaled.value) {
       return;
+    }
     updateValues();
     if (!multiple && (!cascaderItem.children || ((_a2 = cascaderItem == null ? void 0 : cascaderItem.children) == null ? void 0 : _a2.length) === 0)) {
       confirmInputValueFlg.value = !confirmInputValueFlg.value;
@@ -9073,8 +9032,9 @@ const popupHandles = (props) => {
     stopDefault.value = !menuShow.value;
   };
   const openPopup = () => {
-    if (disabled.value)
+    if (disabled.value) {
       return;
+    }
     menuShow.value = !menuShow.value;
     updateStopDefaultType();
   };
@@ -9126,8 +9086,9 @@ var Cascader = defineComponent({
       }
     };
     const updateCascaderView = (value, currentOption, index2) => {
-      if (index2 === value.length)
+      if (index2 === value.length) {
         return;
+      }
       const i = value[index2];
       const current = currentOption[i];
       const children = current == null ? void 0 : current.children;
@@ -9140,8 +9101,9 @@ var Cascader = defineComponent({
     };
     const updateCascaderValue = (value, currentOption, index2) => {
       if (!multiple.value) {
-        if (index2 === value.length)
+        if (index2 === value.length) {
           return;
+        }
         const i = value[index2];
         const current = getCurrentOption(currentOption, i);
         const children = current == null ? void 0 : current.children;
@@ -9879,8 +9841,9 @@ class DOMUtils {
     };
     const downFn = (event) => {
       var _a;
-      if (isDragging)
+      if (isDragging) {
         return;
+      }
       document.onselectstart = () => false;
       document.ondragstart = () => false;
       DOMUtils.addEventListener(document, "mousemove", moveFn);
@@ -10001,16 +9964,16 @@ class DOMUtils {
     if (event.clientX > originX && event.clientY > originY) {
       angle = 180 - angle;
     }
-    if (event.clientX == originX && event.clientY > originY) {
+    if (event.clientX === originX && event.clientY > originY) {
       angle = 180;
     }
-    if (event.clientX > originX && event.clientY == originY) {
+    if (event.clientX > originX && event.clientY === originY) {
       angle = 90;
     }
     if (event.clientX < originX && event.clientY > originY) {
       angle = 180 + angle;
     }
-    if (event.clientX < originX && event.clientY == originY) {
+    if (event.clientX < originX && event.clientY === originY) {
       angle = 270;
     }
     if (event.clientX < originX && event.clientY < originY) {
@@ -10057,8 +10020,9 @@ function HSVAtoRGBA(hsva) {
   return { r: rgb[0], g: rgb[1], b: rgb[2], a };
 }
 function RGBAtoHSVA(rgba) {
-  if (!rgba)
+  if (!rgba) {
     return { h: 0, s: 1, v: 1, a: 1 };
+  }
   const r = rgba.r / 255;
   const g = rgba.g / 255;
   const b = rgba.b / 255;
@@ -10074,8 +10038,9 @@ function RGBAtoHSVA(rgba) {
       h2 = 60 * (4 + (r - g) / (max - min));
     }
   }
-  if (h2 < 0)
+  if (h2 < 0) {
     h2 = h2 + 360;
+  }
   const s = max === 0 ? 0 : (max - min) / max;
   const hsv = [h2, s, max];
   return { h: Math.round(hsv[0]), s: hsv[1], v: hsv[2], a: rgba.a };
@@ -10201,8 +10166,9 @@ function fromHex(hex2) {
   return fromHexa(parseHex(hex2));
 }
 function parseColor(color2, oldColor) {
-  if (!color2)
+  if (!color2) {
     return fromRGBA({ r: 0, g: 0, b: 0, a: 1 });
+  }
   if (typeof color2 === "string") {
     if (color2.indexOf("#") !== -1)
       ;
@@ -10234,8 +10200,9 @@ function parseColor(color2, oldColor) {
       }
       return fromHSVA({ h: parts[0], s: parts[1], v: parts[2], a: alpha });
     }
-    if (color2 === "transparent")
+    if (color2 === "transparent") {
       return fromHexa("#00000000");
+    }
     const hex2 = parseHex(color2);
     if (oldColor && hex2 === oldColor.hexa) {
       return oldColor;
@@ -10244,24 +10211,28 @@ function parseColor(color2, oldColor) {
     }
   }
   if (typeof color2 === "object") {
-    if (color2.hasOwnProperty("alpha"))
+    if (color2.hasOwnProperty("alpha")) {
       return color2;
+    }
     const a = color2.hasOwnProperty("a") ? parseFloat(color2.a) : 1;
     if (has(color2, ["r", "g", "b"])) {
-      if (oldColor && color2 === oldColor.rgba)
+      if (oldColor && color2 === oldColor.rgba) {
         return oldColor;
-      else
+      } else {
         return fromRGBA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "l"])) {
-      if (oldColor && color2 === oldColor.hsla)
+      if (oldColor && color2 === oldColor.hsla) {
         return oldColor;
-      else
+      } else {
         return fromHSLA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "v"])) {
-      if (oldColor && color2 === oldColor.hsva)
+      if (oldColor && color2 === oldColor.hsva) {
         return oldColor;
-      else
+      } else {
         return fromHSVA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     }
   }
   return fromRGBA({ r: 255, g: 0, b: 0, a: 1 });
@@ -10282,8 +10253,9 @@ function extractColor(color2, input2, mode, showAlpha) {
   const blue = keepDecimal(color2.rgba.b);
   const hsvSaturation = keepDecimal(color2.hsva.s, 2);
   const value = keepDecimal(color2.hsva.v, 2);
-  if (input2 == null)
+  if (input2 == null) {
     return color2;
+  }
   function isShowAlpha(mode2) {
     return showAlpha ? mode2 + "a" : mode2;
   }
@@ -10301,12 +10273,13 @@ function extractColor(color2, input2, mode, showAlpha) {
   }
   if (typeof input2 === "object") {
     const shouldStrip = typeof input2.a === "number" && input2.a === 0 ? !!input2.a : !input2.a;
-    if (has(input2, ["r", "g", "b"]))
+    if (has(input2, ["r", "g", "b"])) {
       return stripAlpha(color2.rgba, shouldStrip);
-    else if (has(input2, ["h", "s", "l"]))
+    } else if (has(input2, ["h", "s", "l"])) {
       return stripAlpha(color2.hsla, shouldStrip);
-    else if (has(input2, ["h", "s", "v"]))
+    } else if (has(input2, ["h", "s", "v"])) {
       return stripAlpha(color2.hsva, shouldStrip);
+    }
   }
 }
 const colorPickerPaletteProps = {
@@ -10365,20 +10338,6 @@ var colorPalette = defineComponent({
       canvas.fillStyle = valueGradient;
       canvas.fillRect(0, 0, parentWidth, props.height);
     }
-    function clickPalette(event) {
-      const target = event.target;
-      if (target !== paletteElement.value) {
-        handleDrag(event);
-      }
-    }
-    function updatePosition() {
-      var _a, _b;
-      if (paletteInstance) {
-        const parentWidth = paletteElement.value.offsetWidth;
-        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
-        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
-      }
-    }
     function handleDrag(event) {
       const parentWidth = paletteElement.value.offsetWidth;
       if (paletteInstance) {
@@ -10406,6 +10365,20 @@ var colorPalette = defineComponent({
         ctx2.emit("changeTextColor", isChangeTextColor.value);
       }
     }
+    function clickPalette(event) {
+      const target = event.target;
+      if (target !== paletteElement.value) {
+        handleDrag(event);
+      }
+    }
+    function updatePosition() {
+      var _a, _b;
+      if (paletteInstance) {
+        const parentWidth = paletteElement.value.offsetWidth;
+        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
+        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
+      }
+    }
     onMounted(() => {
       renderCanvas();
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
@@ -10491,12 +10464,6 @@ var colorHueSlider = defineComponent({
         top: 0
       }, clickTransfrom.value);
     });
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -10514,6 +10481,12 @@ var colorHueSlider = defineComponent({
         }));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
@@ -10578,12 +10551,6 @@ var colorAlphaSlider = defineComponent({
     const clickTransfrom = ref(DEFAULT_TRANSITION);
     const barElement = ref(null);
     const cursorElement = ref(null);
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -10598,6 +10565,12 @@ var colorAlphaSlider = defineComponent({
         })));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     const getBackgroundStyle = computed(() => {
       return {
         background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})`
@@ -12030,7 +12003,7 @@ function useStore(v, {
 var colorHistory = defineComponent({
   name: "ColorEdit",
   components: {
-    Icon
+    Icon: DIcon
   },
   props: colorPickerHistoryProps,
   emits: ["update:color"],
@@ -12500,8 +12473,9 @@ var Countdown = defineComponent({
     };
     const startTime = () => {
       getTime();
-      if (countdown2.value)
+      if (countdown2.value) {
         return;
+      }
       countdown2.value = setInterval(() => {
         const t = getTime();
         if (t === 0) {
@@ -13050,8 +13024,9 @@ const formatValue = (state, props) => {
   }
 };
 const formatPlaceholder = (props) => {
-  if (!props)
+  if (!props) {
     return "";
+  }
   const format2 = props.format || `y/MM/dd`;
   const sp = props.rangeSpliter || "-";
   return props.range ? `${format2} ${sp} ${format2}` : format2;
@@ -13615,7 +13590,7 @@ var DatePicker = defineComponent({
         "modelValue": state.value,
         "placeholder": state.placeholder,
         "onFocus": () => state.show = true
-      }, null), createVNode(Icon, {
+      }, null), createVNode(DIcon, {
         "size": "small",
         "name": "calendar",
         "class": "datepicker-input-icon"
@@ -14127,6 +14102,18 @@ const dropdownProps = {
   closeOnMouseLeaveMenu: {
     type: Boolean,
     default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
+  },
+  destroyOnHide: {
+    type: Boolean,
+    default: true
   }
 };
 function getElement(element) {
@@ -14153,12 +14140,12 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     isOpen.value = status2;
     emit("toggle", isOpen.value);
   };
-  const handleLeave = async (elementType, e) => {
+  const handleLeave = async (elementType, closeAll) => {
     await new Promise((resolve) => setTimeout(resolve, 50));
     if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
       return;
     }
-    if (e) {
+    if (closeAll) {
       [...dropdownMap.values()].reverse().forEach((item2) => {
         setTimeout(() => {
           var _a;
@@ -14198,7 +14185,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
       subscriptions.push(subscribeEvent(originEl, "click", () => toggle(!isOpen.value)), subscribeEvent(dropdownEl, "mouseleave", (e) => {
         var _a;
         if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
-          handleLeave("dropdown", e);
+          handleLeave("dropdown", true);
         }
       }));
     } else if (triggerVal === "hover") {
@@ -14217,7 +14204,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
         if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
           return;
         }
-        handleLeave("dropdown", e);
+        handleLeave("dropdown", true);
       }));
     }
     onInvalidate(() => subscriptions.forEach((v) => v()));
@@ -14268,9 +14255,30 @@ function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emi
     dropdownMap.delete(id);
   });
 }
-var overlay = "";
-function _isSlot$4(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+function useOverlayProps(props, currentPosition, isOpen) {
+  const { showAnimation, overlayClass, destroyOnHide } = toRefs(props);
+  const overlayModelValue = ref(false);
+  const overlayShowValue = ref(false);
+  const styles = computed(() => ({
+    transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
+  }));
+  const classes = computed(() => ({
+    "fade-in-bottom": showAnimation.value && isOpen.value && currentPosition.value === "bottom",
+    "fade-in-top": showAnimation.value && isOpen.value && currentPosition.value === "top",
+    [`${overlayClass.value}`]: true
+  }));
+  const handlePositionChange = (pos) => {
+    currentPosition.value = pos.includes("top") || pos.includes("end") ? "top" : "bottom";
+  };
+  watch(isOpen, (isOpenVal) => {
+    overlayModelValue.value = destroyOnHide.value ? isOpenVal : true;
+    overlayShowValue.value = isOpenVal;
+  });
+  return { overlayModelValue, overlayShowValue, styles, classes, handlePositionChange };
+}
+var baseOverlay = "";
+function _isSlot$4(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const CommonOverlay = defineComponent({
   setup(props, ctx2) {
@@ -14288,6 +14296,40 @@ const CommonOverlay = defineComponent({
     };
   }
 });
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx2) {
   const backgroundClass = computed(() => {
     return [
@@ -14338,6 +14380,7 @@ function useOverlayLogic(props, ctx2) {
     handleOverlayBubbleCancel
   };
 }
+var fixedOverlay = "";
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
@@ -14390,29 +14433,22 @@ var Dropdown = defineComponent({
   setup(props, {
     slots,
     attrs,
-    emit
+    emit,
+    expose
   }) {
     const {
       visible,
       position,
       align,
-      offset: offset2
+      offset: offset2,
+      showAnimation
     } = toRefs(props);
     const origin = ref();
     const dropdownRef = ref();
+    const overlayRef = ref();
     const id = `dropdown_${dropdownId++}`;
     const isOpen = ref(false);
     const currentPosition = ref("bottom");
-    const handlePositionChange = (pos) => {
-      currentPosition.value = pos.includes("top") || pos.includes("end") ? "top" : "bottom";
-    };
-    const styles = computed(() => ({
-      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
-    }));
-    const classes = computed(() => ({
-      "fade-in-bottom": isOpen.value && currentPosition.value === "bottom",
-      "fade-in-top": isOpen.value && currentPosition.value === "top"
-    }));
     useDropdownEvent({
       id,
       isOpen,
@@ -14422,6 +14458,16 @@ var Dropdown = defineComponent({
       emit
     });
     useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+    const {
+      overlayModelValue,
+      overlayShowValue,
+      styles,
+      classes,
+      handlePositionChange
+    } = useOverlayProps(props, currentPosition, isOpen);
+    expose({
+      updatePosition: () => overlayRef.value.updatePosition()
+    });
     return () => {
       var _a;
       return createVNode(Fragment, null, [createVNode("div", {
@@ -14431,11 +14477,12 @@ var Dropdown = defineComponent({
         "to": "body"
       }, {
         default: () => [createVNode(Transition, {
-          "name": `devui-dropdown-fade-${currentPosition.value}`
+          "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
         }, {
-          default: () => [createVNode(FlexibleOverlay, {
-            "modelValue": isOpen.value,
-            "onUpdate:modelValue": ($event) => isOpen.value = $event,
+          default: () => [withDirectives(createVNode(FlexibleOverlay, {
+            "modelValue": overlayModelValue.value,
+            "onUpdate:modelValue": ($event) => overlayModelValue.value = $event,
+            "ref": overlayRef,
             "origin": origin.value,
             "position": position.value,
             "align": align.value,
@@ -14451,7 +14498,7 @@ var Dropdown = defineComponent({
                 "class": "devui-dropdown-menu-wrap"
               }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
             }
-          })]
+          }), [[vShow, overlayShowValue.value]])]
         })]
       })]);
     };
@@ -14481,6 +14528,14 @@ const dropdownMenuProps = {
   clickOutside: {
     type: Function,
     default: () => true
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
   }
 };
 var DropdownMenu = defineComponent({
@@ -14499,12 +14554,14 @@ var DropdownMenu = defineComponent({
       position,
       align,
       offset: offset2,
-      clickOutside
+      clickOutside,
+      showAnimation,
+      overlayClass
     } = toRefs(props);
     const dropdownMenuRef = ref(null);
     onClickOutside(dropdownMenuRef, (value) => {
-      var _a;
-      if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !origin.value.contains(value.target)) {
+      var _a, _b;
+      if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !((_b = origin == null ? void 0 : origin.value) == null ? void 0 : _b.contains(value.target))) {
         emit("update:modelValue", false);
       }
     });
@@ -14519,7 +14576,7 @@ var DropdownMenu = defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(Transition, {
-        "name": `devui-dropdown-fade-${currentPosition.value}`
+        "name": showAnimation.value ? `devui-dropdown-fade-${currentPosition.value}` : ""
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "modelValue": modelValue.value,
@@ -14529,6 +14586,7 @@ var DropdownMenu = defineComponent({
           "align": align.value,
           "offset": offset2.value,
           "onPositionChange": handlePositionChange,
+          "class": overlayClass.value,
           "style": styles.value
         }, {
           default: () => {
@@ -14553,9 +14611,6 @@ var DropdownInstall = {
   }
 };
 const editableSelectProps = {
-  appendToBody: {
-    type: Boolean
-  },
   options: {
     type: Array,
     default: () => []
@@ -14585,9 +14640,6 @@ const editableSelectProps = {
   },
   filterOption: {
     type: [Function, Boolean]
-  },
-  loadMore: {
-    type: Function
   }
 };
 function className$2(classStr, classOpt) {
@@ -14627,17 +14679,21 @@ const useInput = (inputValue, ctx2) => {
     handleInput
   };
 };
-const useLazyLoad = (dropdownRef, inputValue, filterOtion, load) => {
+const useLazyLoad = (dropdownRef, inputValue, filterOtion, ctx2) => {
   const loadMore = () => {
-    if (filterOtion !== false)
+    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;
   };
@@ -14656,64 +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 (!["ArrowDown", "ArrowUp"].includes(direction))
+    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",
@@ -14723,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 + "",
@@ -14827,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;
@@ -14843,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);
@@ -14851,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
@@ -14887,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]]);
     };
   }
 });
@@ -14924,8 +14957,9 @@ function isObject(obj) {
   return Object.prototype.toString.call(obj).slice(8, -1) === "Object";
 }
 function hasKey(obj, key) {
-  if (!isObject(obj))
+  if (!isObject(obj)) {
     return false;
+  }
   return Object.prototype.hasOwnProperty.call(obj, key);
 }
 function getElOffset(curEl) {
@@ -15058,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;
     }
   };
@@ -15310,7 +15344,7 @@ var FormLabel = defineComponent({
       }, {
         reference: () => createVNode("span", {
           "class": "devui-form-label-help"
-        }, [createVNode(Icon, {
+        }, [createVNode(DIcon, {
           "name": "helping",
           "color": "#252b3a"
         }, null)])
@@ -15522,7 +15556,7 @@ var FormControl = defineComponent({
         "id": uid
       }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]), (feedbackStatus || ((_d = (_c = ctx2.slots).suffixTemplate) == null ? void 0 : _d.call(_c))) && createVNode("span", {
         "class": "devui-feedback-status"
-      }, [((_f = (_e = ctx2.slots).suffixTemplate) == null ? void 0 : _f.call(_e)) ? (_h = (_g = ctx2.slots).suffixTemplate) == null ? void 0 : _h.call(_g) : createVNode(Icon, {
+      }, [((_f = (_e = ctx2.slots).suffixTemplate) == null ? void 0 : _f.call(_e)) ? (_h = (_g = ctx2.slots).suffixTemplate) == null ? void 0 : _h.call(_g) : createVNode(DIcon, {
         "name": iconData.value.name,
         "color": iconData.value.color
       }, null)])]), extraInfo && createVNode("div", {
@@ -15677,8 +15711,9 @@ function handleErrorStrategyPass(el) {
   el.setAttribute("class", classList.join(" "));
 }
 function getFormControlUID(el) {
-  if (el.tagName.toLocaleLowerCase() === "body")
+  if (el.tagName.toLocaleLowerCase() === "body") {
     return "";
+  }
   if (el.parentElement.id.startsWith("dfc-")) {
     return el.parentElement.id;
   } else {
@@ -15721,8 +15756,9 @@ function validateFn({ validator, modelValue, el, tipEl, isFormTag, messageShowTy
     handleValidatePass(el, tipEl);
   }).catch((err) => {
     const { errors } = err;
-    if (!errors || errors.length === 0)
+    if (!errors || errors.length === 0) {
       return;
+    }
     let msg = "";
     if (typeof errors[0].message === "object") {
       msg = errors[0].message.default;
@@ -15914,7 +15950,7 @@ const launchNormalFullscreen = (targetElement, props) => {
 };
 const exitNormalFullscreen = (targetElement) => {
   targetElement.classList.remove("devui-fullscreen");
-  targetElement.style.zIndex = null;
+  targetElement.style.zIndex = "";
 };
 const launchImmersiveFullScreen = async (docElement) => {
   let fullscreenLaunch = null;
@@ -15927,7 +15963,7 @@ const launchImmersiveFullScreen = async (docElement) => {
   } else if (docElement.msRequestFullscreen) {
     fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
   }
-  return await fullscreenLaunch.then(() => !!document.fullscreenElement);
+  return await (fullscreenLaunch == null ? void 0 : fullscreenLaunch.then(() => !!document.fullscreenElement));
 };
 const exitImmersiveFullScreen = async (doc) => {
   let fullscreenExit = null;
@@ -15940,7 +15976,7 @@ const exitImmersiveFullScreen = async (doc) => {
   } else if (doc.msExitFullscreen) {
     fullscreenExit = Promise.resolve(doc.msExitFullscreen());
   }
-  return await fullscreenExit.then(() => !!document.fullscreenElement);
+  return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
 };
 const addFullScreenStyle = () => {
   document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
@@ -15951,14 +15987,6 @@ const removeFullScreenStyle = () => {
 function useFullscreen(props, slotElement, ctx2) {
   const { modelValue, mode } = toRefs(props);
   let exitByKeydown = false;
-  watch(modelValue, (newVal) => {
-    if (mode.value === "normal") {
-      handleNormalFullscreen(newVal);
-    }
-    if (mode.value === "immersive") {
-      handleImmersiveFullscreen(newVal);
-    }
-  });
   const handleNormalFullscreen = (isOpen) => {
     if (isOpen) {
       launchNormalFullscreen(slotElement.value, props);
@@ -15977,6 +16005,14 @@ function useFullscreen(props, slotElement, ctx2) {
       }
     }
   };
+  watch(modelValue, (newVal) => {
+    if (mode.value === "normal") {
+      handleNormalFullscreen(newVal);
+    }
+    if (mode.value === "immersive") {
+      handleImmersiveFullscreen(newVal);
+    }
+  });
   const handleFullscreenChange = () => {
     if (!document.fullscreenElement) {
       ctx2.emit("update:modelValue");
@@ -16009,15 +16045,12 @@ var Fullscreen = defineComponent({
     };
   }
 });
-Fullscreen.install = function(app) {
-  app.component(Fullscreen.name, Fullscreen);
-};
 var FullscreenInstall = {
   title: "Fullscreen \u5168\u5C4F",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Fullscreen);
+    app.component(Fullscreen.name, Fullscreen);
   }
 };
 var ganttScale = "";
@@ -16975,8 +17008,9 @@ var imagePreview = defineComponent({
       transform.setZoomOriginal();
     }
     function onKeyDown(event) {
-      if (event.defaultPrevented)
+      if (event.defaultPrevented) {
         return;
+      }
       if (event.code == "Escape") {
         onClose();
       } else if (event.code == "ArrowLeft") {
@@ -17339,7 +17373,7 @@ var InputIcon = defineComponent({
         "style": {
           backgroundColor: iconBgColor
         }
-      }, [createVNode(Icon, {
+      }, [createVNode(DIcon, {
         "size": "small",
         "name": name,
         "color": iconColor
@@ -17423,20 +17457,24 @@ var InputNumber = defineComponent({
       return props.disabled;
     });
     const add = () => {
-      if (props.disabled)
+      if (props.disabled) {
         return;
-      if (inputVal.value >= props.max)
+      }
+      if (inputVal.value >= props.max) {
         return;
+      }
       inputVal.value += props.step != 0 ? props.step : 1;
       focusVal.value = "active";
       ctx2.emit("change", inputVal.value);
       ctx2.emit("update:modelValue", inputVal.value);
     };
     const subtract = () => {
-      if (props.disabled)
+      if (props.disabled) {
         return;
-      if (inputVal.value <= props.min)
+      }
+      if (inputVal.value <= props.min) {
         return;
+      }
       inputVal.value -= props.step != 0 ? props.step : 1;
       focusVal.value = "active";
       ctx2.emit("change", inputVal.value);
@@ -17499,12 +17537,12 @@ var InputNumber = defineComponent({
       "class": ["devui-control-buttons", focusVal.value]
     }, [createVNode("span", {
       "onClick": add
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "size": "12px",
       "name": "chevron-up"
     }, null)]), createVNode("span", {
       "onClick": subtract
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "size": "12px",
       "name": "chevron-down"
     }, null)])]), createVNode("div", {
@@ -17800,7 +17838,7 @@ var Modal = defineComponent({
           var _a;
           return [createVNode("div", mergeProps({
             "class": "devui-modal"
-          }, attrs), [createVNode(Icon, {
+          }, attrs), [createVNode(DIcon, {
             "name": "close",
             "class": "btn-close",
             "size": "var(--devui-font-size-md,12px)",
@@ -18000,7 +18038,7 @@ var Close = defineComponent({
     return () => createVNode("div", {
       "class": "devui-notification-icon-close",
       "onClick": (e) => emit("click", e)
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "name": "close",
       "size": "14px"
     }, null)]);
@@ -18029,7 +18067,7 @@ var TypeIcon = defineComponent({
     };
     return () => createVNode("span", {
       "class": classes.value
-    }, [type4.value !== "normal" && createVNode(Icon, {
+    }, [type4.value !== "normal" && createVNode(DIcon, {
       "name": severityIconMap[type4.value],
       "size": "16px"
     }, null)]);
@@ -18187,7 +18225,7 @@ var NotificationInstall = {
     app.config.globalProperties.$notificationService = NotificationService;
   }
 };
-const componentProps = {
+const paginationProps = {
   pageSize: {
     type: Number,
     default: 10
@@ -18324,15 +18362,15 @@ var ConfigMenu = defineComponent({
   setup() {
     const paginationConfig = ref(null);
     const isShowConfig = ref(false);
+    const closeConfigMenu = (e) => {
+      isShowConfig.value = isShowConfig.value ? false : !!e;
+    };
     onMounted(() => {
       on(paginationConfig.value, "click", closeConfigMenu);
     });
     onUnmounted(() => {
       off(paginationConfig.value, "click", closeConfigMenu);
     });
-    const closeConfigMenu = (e) => {
-      isShowConfig.value = isShowConfig.value ? false : !!e;
-    };
     return {
       paginationConfig,
       isShowConfig,
@@ -18482,8 +18520,9 @@ var PageNumBtn = defineComponent({
   }) {
     const showPageNum = computed(() => handlePages(props.cursor, props.maxItems, props.totalPages));
     const changeCursor = (pageSize) => {
-      if (isNaN(pageSize))
+      if (isNaN(pageSize)) {
         return;
+      }
       const page = pageSize < 1 ? 1 : pageSize > props.totalPages ? props.totalPages : pageSize | 0;
       emit("changeCursorEmit", page);
     };
@@ -18607,11 +18646,12 @@ var Pagination = defineComponent({
     JumpPage,
     PageNumBtn
   },
-  props: componentProps,
+  props: paginationProps,
   emits: ["pageIndexChange", "pageSizeChange", "update:pageSize", "update:pageIndex"],
   setup(props, {
     emit
   }) {
+    const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
     const litePageOptions = computed(() => liteSelectOptions(totalPages.value));
     const cursor = computed({
       get() {
@@ -18633,7 +18673,6 @@ var Pagination = defineComponent({
         emit("update:pageSize", val);
       }
     });
-    const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
     const changeCursorEmit = (val) => {
       cursor.value = val;
       emit("pageIndexChange", val);
@@ -18750,19 +18789,15 @@ var Pagination = defineComponent({
     ]);
   }
 });
-Pagination.install = (app) => {
-  app.component(Pagination.name, Pagination);
-};
 var PaginationInstall = {
   title: "Pagination \u5206\u9875",
   category: "\u5BFC\u822A",
   status: "100%",
   install(app) {
-    app.use(Pagination);
+    app.component(Pagination.name, Pagination);
   }
 };
-var panel = "";
-const PanelProps = {
+const panelProps = {
   type: {
     type: String,
     default: "default"
@@ -18779,10 +18814,6 @@ const PanelProps = {
     type: Function,
     default: null
   },
-  toggle: {
-    type: Function,
-    default: null
-  },
   showAnimation: {
     type: Boolean,
     default: true
@@ -18804,9 +18835,11 @@ class Store {
     option[key] = ref(value);
   }
 }
+var panel = "";
 var Panel = defineComponent({
   name: "DPanel",
-  props: PanelProps,
+  props: panelProps,
+  emits: ["toggle"],
   setup(props, ctx2) {
     provide("beforeToggle", props.beforeToggle);
     provide("showAnimation", computed(() => props.showAnimation));
@@ -18814,11 +18847,10 @@ var Panel = defineComponent({
     const isCollapsed = ref(props.isCollapsed);
     const type4 = computed(() => props.type);
     const cssClass = computed(() => props.cssClass);
+    const timeStamp = new Date().getTime().toString() + Math.random();
     const onToggle = () => {
-      var _a;
-      (_a = props.toggle) == null ? void 0 : _a.call(props, Store.getByKey(`isCollapsed[${timeStamp}]`));
+      ctx2.emit("toggle", Store.getByKey(`isCollapsed[${timeStamp}]`));
     };
-    const timeStamp = new Date().getTime().toString();
     Store.setData(`isCollapsed[${timeStamp}]`, isCollapsed.value);
     return () => {
       var _a, _b;
@@ -18831,7 +18863,8 @@ var Panel = defineComponent({
 });
 var PanelHeader = defineComponent({
   name: "DPanelHeader",
-  props: PanelProps,
+  props: panelProps,
+  emits: ["toggle"],
   setup(props, ctx2) {
     const beforeToggle = inject("beforeToggle");
     const keys = Object.keys(Store.state());
@@ -18839,16 +18872,35 @@ var PanelHeader = defineComponent({
     const isCollapsed = ref(Store.state()[key]);
     const changeFlag = ref();
     let header2 = null;
-    const canToggle = () => {
-      let changeResult = Promise.resolve(true);
+    const res = ref(isCollapsed.value);
+    let changeResult = true;
+    const done = () => {
+      res.value = !res.value;
+      if (!changeFlag.value) {
+        if (res.value) {
+          Store.setData(`${key}`, res.value);
+          isCollapsed.value = res.value;
+          ctx2.emit("toggle", res.value);
+        }
+        return;
+      }
+      if (res.value !== void 0) {
+        Store.setData(`${key}`, res.value);
+        isCollapsed.value = res.value;
+        ctx2.emit("toggle", res.value);
+      }
+    };
+    const canToggle = async () => {
       if (beforeToggle) {
-        const result2 = beforeToggle(isCollapsed);
-        if (typeof result2 !== void 0) {
-          if (result2 instanceof Promise) {
-            changeResult = result2;
+        const tmpRes = beforeToggle(isCollapsed, done);
+        if (typeof tmpRes !== "undefined") {
+          if (tmpRes instanceof Promise) {
+            changeResult = await tmpRes;
           } else {
-            changeResult = Promise.resolve(result2);
+            changeResult = tmpRes;
           }
+        } else {
+          changeResult = true;
         }
       }
       return changeResult;
@@ -18856,20 +18908,19 @@ var PanelHeader = defineComponent({
     canToggle().then((val) => changeFlag.value = val);
     const toggleBody = () => {
       canToggle().then((val) => {
-        var _a, _b;
         changeFlag.value = val;
         if (!val) {
           if (!isCollapsed.value) {
             Store.setData(`${key}`, !isCollapsed.value);
             isCollapsed.value = !isCollapsed.value;
-            (_a = props.toggle) == null ? void 0 : _a.call(props, isCollapsed.value);
+            ctx2.emit("toggle", isCollapsed.value);
           }
           return;
         }
         if (isCollapsed.value !== void 0) {
           Store.setData(`${key}`, !isCollapsed.value);
           isCollapsed.value = !isCollapsed.value;
-          (_b = props.toggle) == null ? void 0 : _b.call(props, isCollapsed.value);
+          ctx2.emit("toggle", isCollapsed.value);
         }
       });
     };
@@ -18880,7 +18931,7 @@ var PanelHeader = defineComponent({
           "class": "devui-panel-heading",
           "onClick": toggleBody,
           "style": {
-            "cursor": changeFlag.value ? "pointer" : "auto"
+            cursor: changeFlag.value ? "pointer" : "auto"
           }
         }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
       }
@@ -18890,7 +18941,7 @@ var PanelHeader = defineComponent({
 });
 var PanelBody = defineComponent({
   name: "DPanelBody",
-  props: PanelProps,
+  props: panelProps,
   setup(props, ctx2) {
     const animationName = inject("showAnimation");
     const hasLeftPadding = inject("hasLeftPadding");
@@ -18901,8 +18952,9 @@ var PanelBody = defineComponent({
     onMounted(() => {
       if (bodyEl.value) {
         const dom = bodyEl.value;
-        if (isCollapsed[key])
+        if (isCollapsed[key]) {
           dom.style.height = `${dom.offsetHeight}px`;
+        }
       }
     });
     const enter = (element) => {
@@ -18950,18 +19002,15 @@ var PanelFooter = defineComponent({
     };
   }
 });
-Panel.install = function(app) {
-  app.component(Panel.name, Panel);
-  app.component(PanelHeader.name, PanelHeader);
-  app.component(PanelBody.name, PanelBody);
-  app.component(PanelFooter.name, PanelFooter);
-};
 var PanelInstall = {
   title: "Panel \u9762\u677F",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Panel);
+    app.component(Panel.name, Panel);
+    app.component(PanelHeader.name, PanelHeader);
+    app.component(PanelBody.name, PanelBody);
+    app.component(PanelFooter.name, PanelFooter);
   }
 };
 var PopoverInstall = {
@@ -19032,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"
@@ -19490,7 +19539,7 @@ var Radio = defineComponent({
       return props.value === _value;
     });
     const radioName = computed(() => {
-      return radioGroupConf ? radioGroupConf.name.value : props.name;
+      return radioGroupConf ? radioGroupConf.name.value : props.name || void 0;
     });
     const judgeCanChange = (_value) => {
       const beforeChange = props.beforeChange || (radioGroupConf ? radioGroupConf.beforeChange : null);
@@ -19557,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",
@@ -19626,19 +19681,13 @@ var RadioGroup = defineComponent({
     }, [getContent()]);
   }
 });
-Radio.install = function(app) {
-  app.component(Radio.name, Radio);
-};
-RadioGroup.install = function(app) {
-  app.component(RadioGroup.name, RadioGroup);
-};
 var RadioInstall = {
   title: "Radio \u5355\u9009\u6846",
   category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(Radio);
-    app.use(RadioGroup);
+    app.component(Radio.name, Radio);
+    app.component(RadioGroup.name, RadioGroup);
   }
 };
 const rateProps = {
@@ -19995,12 +20044,14 @@ var ReadTip = defineComponent({
         rule.overlayClassName = rule.overlayClassName || options.overlayClassName;
         rule.position = rule.position || options.position;
         rule.contentTemplate = !!ctx2.slots.contentTemplate;
-        if (!("appendToBody" in rule))
+        if (!("appendToBody" in rule)) {
           rule.appendToBody = options.appendToBody;
+        }
         const doms = defaultSlot.value.querySelectorAll(rule.selector);
         [...doms].map((dom, index2) => {
-          if (rule.appendToBody === false)
+          if (rule.appendToBody === false) {
             dom.style.position = "relative";
+          }
           let newRule = reactive({
             id: null
           });
@@ -20023,8 +20074,9 @@ var ReadTip = defineComponent({
       rule.status = true;
     }
     const rules2 = (rules3) => {
-      if (rules3 === null)
+      if (rules3 === null) {
         return;
+      }
       if (typeof rules3 === "object" && !Array.isArray(rules3)) {
         rules3 = [rules3];
       }
@@ -20129,7 +20181,7 @@ var Result = defineComponent({
       var _a, _b, _c, _d;
       return createVNode("div", {
         "class": "devui-result"
-      }, [ctx2.slots.icon ? createVNode("div", null, [(_a = ctx2.slots) == null ? void 0 : _a.icon()]) : createVNode(Icon, {
+      }, [ctx2.slots.icon ? createVNode("div", null, [(_a = ctx2.slots) == null ? void 0 : _a.icon()]) : createVNode(DIcon, {
         "name": IconEnum[props.icon] || "",
         "class": `devui-result__icon-${props.icon}`,
         "size": "64px"
@@ -20159,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 = ({
@@ -20193,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) {
@@ -20213,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);
@@ -20221,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];
 }
@@ -20239,27 +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(() => {
@@ -20270,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();
@@ -20298,10 +20353,12 @@ var RippleDirective = {
     optionMap.set(el, (_a = binding.value) != null ? _a : {});
     el.addEventListener("pointerdown", (event) => {
       const options = optionMap.get(el);
-      if (binding.value && binding.value.disabled)
+      if (binding.value && binding.value.disabled) {
         return;
-      if (options === false)
+      }
+      if (options === false) {
         return;
+      }
       ripple(event, el, __spreadValues(__spreadValues({}, globalOptions), options));
     });
   },
@@ -20491,15 +20548,12 @@ var DSearch = defineComponent({
     };
   }
 });
-DSearch.install = function(app) {
-  app.component(DSearch.name, DSearch);
-};
 var SearchInstall = {
   title: "Search \u641C\u7D22\u6846",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(DSearch);
+    app.component(DSearch.name, DSearch);
   }
 };
 const selectProps = {
@@ -20601,8 +20655,9 @@ var Select = defineComponent({
     const dropdownRef = ref(null);
     const isOpen = ref(false);
     function toggleChange(bool) {
-      if (props.disabled)
+      if (props.disabled) {
         return;
+      }
       isOpen.value = bool;
       ctx2.emit("toggleChange", bool);
     }
@@ -20617,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 {
@@ -20642,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) || "";
       }
@@ -20659,11 +20713,12 @@ var Select = defineComponent({
       let {
         modelValue
       } = props;
-      if (disabledKey && !!item2[disabledKey])
+      if (disabledKey && !!item2[disabledKey]) {
         return;
+      }
       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);
@@ -20750,11 +20805,11 @@ var Select = defineComponent({
     }, null), createVNode("span", {
       "onClick": handleClear,
       "class": "devui-select-clear"
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "name": "close"
     }, null)]), createVNode("span", {
       "class": "devui-select-arrow"
-    }, [createVNode(Icon, {
+    }, [createVNode(DIcon, {
       "name": "select-arrow"
     }, null)])]), createVNode(Transition, {
       "name": "fade",
@@ -20780,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 = "";
@@ -20902,32 +20954,32 @@ var Skeleton = defineComponent({
       })]), [[vShow, isShown]]);
     }
     function renderAvatarStyle(avatarSize, avatarShape) {
-      function renderAvatarShape(avatarShape2) {
-        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      function renderAvatarShape() {
+        return avatarShape === "square" ? "" : "border-radius:50%;";
       }
-      function renderAvatarSize(avatarSize2) {
-        switch (typeof avatarSize2) {
+      function renderAvatarSize() {
+        switch (typeof avatarSize) {
           case "string":
-            return `width:${avatarSize2};height:${avatarSize2};`;
+            return `width:${avatarSize};height:${avatarSize};`;
           case "number":
-            return `width:${avatarSize2}px;height:${avatarSize2}px;`;
+            return `width:${avatarSize}px;height:${avatarSize}px;`;
         }
       }
-      return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
+      return renderAvatarSize() + renderAvatarShape();
     }
     function renderTitle(isVisible, titleWidth, isRound) {
-      function renderTitleWidth(titleWidth2) {
-        switch (typeof titleWidth2) {
+      function renderTitleWidth() {
+        switch (typeof titleWidth) {
           case "string":
-            return `width: ${titleWidth2};`;
+            return `width: ${titleWidth};`;
           case "number":
-            return `width: ${titleWidth2}px;`;
+            return `width: ${titleWidth}px;`;
         }
       }
-      function renderTitleVisibility(isVisible2) {
-        return isVisible2 ? null : "visibility: hidden;";
+      function renderTitleVisibility() {
+        return isVisible ? null : "visibility: hidden;";
       }
-      return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
+      return renderTitleWidth() + renderBorderRadius(isRound) + renderTitleVisibility();
     }
     function renderDefaultSkeleton() {
       return createVNode(Fragment, null, [withDirectives(createVNode("div", {
@@ -21048,10 +21100,10 @@ var SkeletonItem = defineComponent({
       })]);
     }
     function renderAvatarStyle(avatarShape) {
-      function renderAvatarShape(avatarShape2) {
-        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      function renderAvatarShape() {
+        return avatarShape === "square" ? "" : "border-radius:50%;";
       }
-      return renderAvatarShape(avatarShape);
+      return renderAvatarShape();
     }
     return () => {
       var _a;
@@ -21131,33 +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;
@@ -21180,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) {
@@ -21210,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" : "";
     });
@@ -21277,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 = {
@@ -21447,57 +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 onMouseup(e2) {
+  function onMousemove(evt) {
+    resizeProps.onDragEvent(normalizeEvent(evt));
+  }
+  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
@@ -21541,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
         });
@@ -21552,71 +21591,22 @@ 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) => {
-      const pane = store.getPane(index2);
-      const nearPane = store.getPane(nearIndex);
-      return {
-        pane,
-        nearPane
-      };
+    const queryPanes = (index2, nearIndex) => {
+      if (!store) {
+        return {};
+      }
+      const pane = store.getPane(index2);
+      const nearPane = store.getPane(nearIndex);
+      return {
+        pane,
+        nearPane
+      };
     };
     const generateCollapseClass = (pane, nearPane, showIcon) => {
       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,
@@ -21625,6 +21615,9 @@ var DSplitterBar = defineComponent({
     };
     const prevClass = computed(() => {
       var _a, _b;
+      if (!props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -21634,6 +21627,9 @@ var DSplitterBar = defineComponent({
     });
     const nextClass = computed(() => {
       var _a, _b;
+      if (!store || !props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -21643,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
@@ -21655,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();
     };
@@ -21666,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
@@ -21814,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",
@@ -21836,8 +21926,9 @@ var Splitter = defineComponent({
     provide("splitterStore", store);
     const domRef = ref();
     const refreshSplitterContainerSize = () => {
-      if (!domRef.value)
+      if (!domRef.value) {
         return;
+      }
       let containerSize = 0;
       if (props.orientation === "vertical") {
         containerSize = domRef.value.clientHeight;
@@ -21854,7 +21945,9 @@ var Splitter = defineComponent({
         return;
       }
       refreshSplitterContainerSize();
-      observer.observe(domRef.value);
+      if (domRef.value) {
+        observer.observe(domRef.value);
+      }
     });
     onUnmounted(() => {
       observer.disconnect();
@@ -21950,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;
@@ -22327,15 +22428,12 @@ var Status = defineComponent({
     };
   }
 });
-Status.install = function(app) {
-  app.component(Status.name, Status);
-};
 var StatusInstall = {
   title: "Status \u72B6\u6001",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Status);
+    app.component(Status.name, Status);
   }
 };
 var stepsGuide = "";
@@ -22377,8 +22475,9 @@ function useStepsGuidePosition(props, currentStep) {
     zIndex: props.zIndex
   });
   const updateGuidePosition = () => {
-    if (!currentStep.value || !stepsRef.value)
+    if (!currentStep.value || !stepsRef.value) {
       return;
+    }
     const baseTop = window.pageYOffset - document.documentElement.clientTop;
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft;
     const currentStepPosition = currentStep.value.position;
@@ -22461,8 +22560,9 @@ function useStepsGuideCtrl(props, ctx2, updateGuidePosition, stepIndex) {
         console.error(`stepIndex is not within the value range`);
       }
     }
-    if (index2 === -1)
+    if (index2 === -1) {
       closeGuide();
+    }
   };
   return {
     stepsCount,
@@ -22488,8 +22588,9 @@ var StepsGuide = defineComponent({
     });
     const currentStep = computed(() => {
       const _step = props.steps[stepIndex.value];
-      if (_step)
+      if (_step) {
         _step.position = _step.position || "top";
+      }
       return _step;
     });
     const {
@@ -22897,7 +22998,8 @@ const TableProps = {
     type: String,
     validator(value) {
       return value === "sm" || value === "md" || value === "lg";
-    }
+    },
+    default: "sm"
   },
   rowHoveredHighlight: {
     type: Boolean,
@@ -22909,7 +23011,7 @@ const TableProps = {
   },
   checkable: {
     type: Boolean,
-    default: true
+    default: false
   },
   tableLayout: {
     type: String,
@@ -22925,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,
@@ -22944,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;
   });
@@ -23093,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
@@ -23276,8 +23412,6 @@ const Filter = defineComponent({
     })]);
   }
 });
-var header = "";
-var body = "";
 const useSort = (store, column) => {
   const directionRef = ref("DESC");
   watch([directionRef, column], ([direction, column2]) => {
@@ -23287,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() {
@@ -23304,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() {
@@ -23368,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: {
@@ -23428,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", {
@@ -23438,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",
@@ -23474,6 +23693,9 @@ var NormalHeader = defineComponent({
 var table = "";
 var Table = defineComponent({
   name: "DTable",
+  directives: {
+    dLoading: loadingDirective
+  },
   props: TableProps,
   setup(props, ctx2) {
     const table2 = getCurrentInstance();
@@ -23485,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 = {
@@ -23634,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 = {
@@ -23685,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",
@@ -23708,8 +23930,9 @@ function useColor(props) {
       "pink-w98": "#f3689a",
       "purple-w98": "#a97af8"
     };
-    if (!color2 && type4)
+    if (!color2 && type4) {
       return typeMap[type4];
+    }
     const themeColor = colorMap[color2] || color2;
     return themeColor;
   });
@@ -23735,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", {
@@ -23757,7 +23980,6 @@ var Tag = defineComponent({
       }, null)]) : null;
     };
     const unWatch = watch(checked, (newVal) => {
-      console.log("checkedChange");
       emit("checkedChange", newVal);
     });
     onUnmounted(() => unWatch());
@@ -23771,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({
@@ -23926,8 +24145,9 @@ var TagInput = defineComponent({
       let res = {
         [props.displayProperty]: tagInputVal.value
       };
-      if (tagInputVal.value === "" && mergedSuggestions.value.length === 0)
+      if (tagInputVal.value === "" && mergedSuggestions.value.length === 0) {
         return false;
+      }
       if (props.tags.findIndex((item2) => item2[props.displayProperty] === tagInputVal.value) > -1) {
         tagInputVal.value = "";
         return false;
@@ -23951,8 +24171,9 @@ var TagInput = defineComponent({
         case KEYS_MAP.tab:
         case KEYS_MAP.enter:
         case KEYS_MAP.space:
-          if (!props.isAddBySpace && KEYS_MAP.space)
+          if (!props.isAddBySpace && KEYS_MAP.space) {
             return;
+          }
           handleEnter();
           break;
         case KEYS_MAP.down:
@@ -24219,250 +24440,15 @@ var Textarea = defineComponent({
     }, [curValueRef.length, !(maxLength != null ? maxLength : false) ? "" : " / " + maxLength])]);
   }
 });
-Textarea.install = function(app) {
-  app.component(Textarea.name, Textarea);
-};
-var TextareaInstall = {
-  title: "Textarea \u591A\u884C\u6587\u672C\u6846",
-  category: "\u6570\u636E\u5F55\u5165",
-  status: "100%",
-  install(app) {
-    app.use(Textarea);
-  }
-};
-const timeAxisProps = {
-  direction: {
-    type: String,
-    default: "vertical"
-  },
-  center: {
-    type: Boolean,
-    default: false
-  },
-  mode: {
-    type: String,
-    default: "normal"
-  },
-  timePosition: {
-    type: String,
-    default: "left"
-  }
-};
-const timeAxisItemProps = {
-  time: {
-    type: String
-  },
-  dotColor: {
-    type: String
-  },
-  lineStyle: {
-    type: String,
-    default: "solid"
-  },
-  lineColor: {
-    type: String
-  },
-  position: {
-    type: String
-  },
-  timePosition: {
-    type: String,
-    default: "left"
-  },
-  type: {
-    type: String,
-    default: "primary"
-  }
-};
-var TimeAxisItem = defineComponent({
-  name: "DTimeAxisItem",
-  components: {
-    DIcon: Icon
-  },
-  props: timeAxisItemProps,
-  emits: [],
-  setup(props, ctx2) {
-    const timeAxis2 = inject("timeAxis");
-    const itemClass = "devui-time-axis-item";
-    const renderTime = () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": `${itemClass}-time`
-      }, [ctx2.slots.time ? (_b = (_a = ctx2.slots).time) == null ? void 0 : _b.call(_a) : props.time]);
-    };
-    const renderContent = () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": `${itemClass}-content`
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a, props)]);
-    };
-    const renderPosition = (types2) => {
-      if (types2.includes(props.position)) {
-        return renderContent();
-      } else {
-        if (timeAxis2.props.direction === "horizontal") {
-          return renderTime();
-        } else {
-          return props.timePosition === "left" ? renderTime() : "";
-        }
-      }
-    };
-    const setTypeIcon = (type4) => {
-      if (type4 === "primary") {
-        return "";
-      }
-      return createVNode("i", {
-        "class": `icon-${type4 === "success" ? "right" : type4}-o`
-      }, null);
-    };
-    const renderDot = () => {
-      var _a, _b;
-      if (ctx2.slots.dot) {
-        return createVNode("div", {
-          "style": {
-            color: props.dotColor
-          },
-          "class": `${itemClass}-dot`
-        }, [createTextVNode(" "), (_b = (_a = ctx2.slots).dot) == null ? void 0 : _b.call(_a)]);
-      } else {
-        return createVNode("div", {
-          "class": `${itemClass}-dot ${itemClass}-type-${props.type}`,
-          "style": {
-            borderColor: props.dotColor
-          }
-        }, [setTypeIcon(props.type)]);
-      }
-    };
-    return () => {
-      return createVNode("div", {
-        "class": itemClass
-      }, [createVNode("div", {
-        "class": `${itemClass}-data-left ${itemClass}-data-top`
-      }, [renderPosition(["top", "left"])]), createVNode("div", {
-        "class": `${itemClass}-axis`
-      }, [renderDot(), timeAxis2.props.direction === "vertical" && props.timePosition === "bottom" ? renderTime() : "", createVNode("div", {
-        "class": `${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`,
-        "style": {
-          borderColor: props.lineColor
-        }
-      }, [ctx2.slots.extra ? createVNode("div", {
-        "class": `${itemClass}-line-extra`
-      }, [ctx2.slots.extra()]) : ""])]), createVNode("div", {
-        "class": `${itemClass}-data-right ${itemClass}-data-bottom`
-      }, [renderPosition(["right", "bottom"])])]);
-    };
-  }
-});
-var timeAxis = "";
-var TimeAxis = defineComponent({
-  name: "DTimeAxis",
-  components: {
-    TimeAxisItem
-  },
-  props: timeAxisProps,
-  emits: [],
-  setup(props, ctx2) {
-    provide("timeAxis", {
-      ctx: ctx2,
-      props
-    });
-    const timeAxis2 = ref();
-    const style2 = reactive({
-      marginLeft: "0px",
-      height: "auto"
-    });
-    const setStyle2 = () => {
-      style2.height = "auto";
-      style2.marginLeft = "0px";
-      if (props.direction === "horizontal") {
-        nextTick(() => {
-          var _a;
-          const el = timeAxis2.value;
-          if (props.center) {
-            style2.marginLeft = (((_a = el == null ? void 0 : el.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
-          }
-          style2.height = Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-top")).map((el2) => el2.clientHeight), ...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-bottom")).map((el2) => el2.clientHeight)) * 2 + Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-axis")).map((el2) => el2.clientHeight)) + "px";
-        });
-      }
-    };
-    onMounted(() => {
-      setStyle2();
-    });
-    watch(toRef(props, "direction"), () => {
-      setStyle2();
-    });
-    return () => {
-      const renderItemPosition = (item2, position) => {
-        return position ? createVNode(item2, {
-          "position": position
-        }, null) : createVNode(item2, null, null);
-      };
-      const renderItem = () => {
-        var _a, _b, _c;
-        const slots = (_c = (_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : [];
-        let children;
-        if (slots.length === 1 && slots[0].type === Fragment) {
-          children = slots[0].children || [];
-        } else {
-          children = slots;
-        }
-        return children.map((item2, index2) => {
-          var _a2, _b2, _c2, _d, _e, _f, _g, _h;
-          if (index2 + 1 === children.length) {
-            if (!((_a2 = item2.props) == null ? void 0 : _a2.lineStyle) && !((_b2 = item2.props) == null ? void 0 : _b2["line-style"])) {
-              item2 = createVNode(item2, {
-                "line-style": "none"
-              }, null);
-            }
-          }
-          if (!((_c2 = item2.props) == null ? void 0 : _c2.timePosition) && !((_d = item2.props) == null ? void 0 : _d["time-position"])) {
-            item2 = createVNode(item2, {
-              "time-position": props.timePosition ? props.timePosition : "left"
-            }, null);
-          }
-          if (props.direction === "horizontal") {
-            if (((_e = item2.props) == null ? void 0 : _e.position) === "top" || ((_f = item2.props) == null ? void 0 : _f.position) === "bottom")
-              return item2;
-            if (props.mode === "alternative") {
-              return renderItemPosition(item2, index2 % 2 == 0 ? "bottom" : "top");
-            } else {
-              return renderItemPosition(item2, "bottom");
-            }
-          } else {
-            if (((_g = item2.props) == null ? void 0 : _g.position) === "left" || ((_h = item2.props) == null ? void 0 : _h.position) === "right")
-              return item2;
-            if (props.mode === "alternative") {
-              return renderItemPosition(item2, index2 % 2 == 0 ? "left" : "right");
-            } else {
-              return renderItemPosition(item2, "right");
-            }
-          }
-        });
-      };
-      const getDirection = () => {
-        return props.direction === "horizontal" ? "horizontal" : "vertical";
-      };
-      return createVNode("div", {
-        "class": `devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? "devui-time-axis-" + getDirection() + "-center" : ""} `,
-        "ref": timeAxis2,
-        "style": style2
-      }, [renderItem()]);
-    };
-  }
-});
-TimeAxis.install = function(app) {
-  app.component(TimeAxis.name, TimeAxis);
-};
-TimeAxisItem.install = function(app) {
-  app.component(TimeAxisItem.name, TimeAxisItem);
+Textarea.install = function(app) {
+  app.component(Textarea.name, Textarea);
 };
-var TimeAxisInstall = {
-  title: "TimeAxis \u65F6\u95F4\u8F74",
-  category: "\u6570\u636E\u5C55\u793A",
+var TextareaInstall = {
+  title: "Textarea \u591A\u884C\u6587\u672C\u6846",
+  category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(TimeAxis);
-    app.use(TimeAxisItem);
+    app.use(Textarea);
   }
 };
 const timePickerProps = {
@@ -24581,8 +24567,9 @@ function useTimePicker(hh, mm, ss, minTime, maxTime, format2, autoOpen, disabled
     e.stopPropagation();
     isActive.value = false;
     showPopup.value = false;
-    if (disabled)
+    if (disabled) {
       return;
+    }
     const path = e.composedPath && e.composedPath() || e.path;
     const inInputDom = path.includes(devuiTimePicker.value);
     inInputDom && mouseInIputFun();
@@ -24933,8 +24920,9 @@ function useTimeScroll() {
     } else {
       scrollTrackDom.value.style.opacity = 0;
     }
-    if (!isDown.value)
+    if (!isDown.value) {
       return;
+    }
     clickTrackFun(e);
   };
   const getScrollWidth = () => {
@@ -25320,10 +25308,10 @@ var TimePicker = defineComponent({
         "class": "time-input-icon"
       }, [createVNode("div", {
         "onClick": clearAll
-      }, [showClearIcon.value ? createVNode(Icon, {
+      }, [showClearIcon.value ? createVNode(DIcon, {
         "size": "small",
         "name": "close"
-      }, null) : ""]), createVNode("div", null, [createVNode(Icon, {
+      }, null) : ""]), createVNode("div", null, [createVNode(DIcon, {
         "size": "small",
         "name": "time"
       }, null)])])])]);
@@ -25341,6 +25329,243 @@ var TimePickerInstall = {
     app.use(TimePicker);
   }
 };
+const timeAxisProps = {
+  direction: {
+    type: String,
+    default: "vertical"
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  timePosition: {
+    type: String,
+    default: "left"
+  }
+};
+const timeAxisItemProps = {
+  time: {
+    type: String
+  },
+  dotColor: {
+    type: String
+  },
+  lineStyle: {
+    type: String,
+    default: "solid"
+  },
+  lineColor: {
+    type: String
+  },
+  position: {
+    type: String
+  },
+  timePosition: {
+    type: String,
+    default: "left"
+  },
+  type: {
+    type: String,
+    default: "primary"
+  }
+};
+var TimelineItem = defineComponent({
+  name: "DTimelineItem",
+  components: {
+    DIcon
+  },
+  props: timeAxisItemProps,
+  emits: [],
+  setup(props, ctx2) {
+    const timeAxis = inject("timeAxis");
+    const itemClass = "devui-timeline-item";
+    const renderTime = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-time`
+      }, [ctx2.slots.time ? (_b = (_a = ctx2.slots).time) == null ? void 0 : _b.call(_a) : props.time]);
+    };
+    const renderContent = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-content`
+      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a, props)]);
+    };
+    const renderPosition = (types2) => {
+      if (types2.includes(props.position)) {
+        return renderContent();
+      } else {
+        if (timeAxis.props.direction === "horizontal") {
+          return renderTime();
+        } else {
+          return props.timePosition === "left" ? renderTime() : "";
+        }
+      }
+    };
+    const setTypeIcon = (type4) => {
+      if (type4 === "primary") {
+        return "";
+      }
+      return createVNode("i", {
+        "class": `icon-${type4 === "success" ? "right" : type4}-o`
+      }, null);
+    };
+    const renderDot = () => {
+      var _a, _b;
+      if (ctx2.slots.dot) {
+        return createVNode("div", {
+          "style": {
+            color: props.dotColor
+          },
+          "class": `${itemClass}-dot`
+        }, [createTextVNode(" "), (_b = (_a = ctx2.slots).dot) == null ? void 0 : _b.call(_a)]);
+      } else {
+        return createVNode("div", {
+          "class": `${itemClass}-dot ${itemClass}-type-${props.type}`,
+          "style": {
+            borderColor: props.dotColor
+          }
+        }, [setTypeIcon(props.type)]);
+      }
+    };
+    return () => {
+      return createVNode("div", {
+        "class": itemClass
+      }, [createVNode("div", {
+        "class": `${itemClass}-data-left ${itemClass}-data-top`
+      }, [renderPosition(["top", "left"])]), createVNode("div", {
+        "class": `${itemClass}-axis`
+      }, [renderDot(), timeAxis.props.direction === "vertical" && props.timePosition === "bottom" ? renderTime() : "", createVNode("div", {
+        "class": `${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`,
+        "style": {
+          borderColor: props.lineColor
+        }
+      }, [ctx2.slots.extra ? createVNode("div", {
+        "class": `${itemClass}-line-extra`
+      }, [ctx2.slots.extra()]) : ""])]), createVNode("div", {
+        "class": `${itemClass}-data-right ${itemClass}-data-bottom`
+      }, [renderPosition(["right", "bottom"])])]);
+    };
+  }
+});
+var timeline = "";
+var Timeline = defineComponent({
+  name: "DTimeline",
+  components: {
+    TimelineItem
+  },
+  props: timeAxisProps,
+  emits: [],
+  setup(props, ctx2) {
+    provide("timeAxis", {
+      ctx: ctx2,
+      props
+    });
+    const timeAxis = ref();
+    const style2 = reactive({
+      marginLeft: "0px",
+      height: "auto"
+    });
+    const setStyle2 = () => {
+      style2.height = "auto";
+      style2.marginLeft = "0px";
+      if (props.direction === "horizontal") {
+        nextTick(() => {
+          var _a;
+          const el = timeAxis.value;
+          if (props.center) {
+            style2.marginLeft = (((_a = el == null ? void 0 : el.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
+          }
+          style2.height = Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-timeline-item-data-top")).map((el2) => el2.clientHeight), ...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-timeline-item-data-bottom")).map((el2) => el2.clientHeight)) * 2 + Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-timeline-item-axis")).map((el2) => el2.clientHeight)) + "px";
+        });
+      }
+    };
+    onMounted(() => {
+      setStyle2();
+    });
+    watch(toRef(props, "direction"), () => {
+      setStyle2();
+    });
+    return () => {
+      const renderItemPosition = (item2, position) => {
+        return position ? createVNode(item2, {
+          "position": position
+        }, null) : createVNode(item2, null, null);
+      };
+      const renderItem = () => {
+        var _a, _b, _c;
+        const slots = (_c = (_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : [];
+        let children;
+        if (slots.length === 1 && slots[0].type === Fragment) {
+          children = slots[0].children || [];
+        } else {
+          children = slots;
+        }
+        return children.map((item2, index2) => {
+          var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+          if (index2 + 1 === children.length) {
+            if (!((_a2 = item2.props) == null ? void 0 : _a2.lineStyle) && !((_b2 = item2.props) == null ? void 0 : _b2["line-style"])) {
+              item2 = createVNode(item2, {
+                "line-style": "none"
+              }, null);
+            }
+          }
+          if (!((_c2 = item2.props) == null ? void 0 : _c2.timePosition) && !((_d = item2.props) == null ? void 0 : _d["time-position"])) {
+            item2 = createVNode(item2, {
+              "time-position": props.timePosition ? props.timePosition : "left"
+            }, null);
+          }
+          if (props.direction === "horizontal") {
+            if (((_e = item2.props) == null ? void 0 : _e.position) === "top" || ((_f = item2.props) == null ? void 0 : _f.position) === "bottom") {
+              return item2;
+            }
+            if (props.mode === "alternative") {
+              return renderItemPosition(item2, index2 % 2 == 0 ? "bottom" : "top");
+            } else {
+              return renderItemPosition(item2, "bottom");
+            }
+          } else {
+            if (((_g = item2.props) == null ? void 0 : _g.position) === "left" || ((_h = item2.props) == null ? void 0 : _h.position) === "right") {
+              return item2;
+            }
+            if (props.mode === "alternative") {
+              return renderItemPosition(item2, index2 % 2 == 0 ? "left" : "right");
+            } else {
+              return renderItemPosition(item2, "right");
+            }
+          }
+        });
+      };
+      const getDirection = () => {
+        return props.direction === "horizontal" ? "horizontal" : "vertical";
+      };
+      return createVNode("div", {
+        "class": `devui-timeline devui-timeline-${getDirection()}  ${props.center ? "devui-timeline-" + getDirection() + "-center" : ""} `,
+        "ref": timeAxis,
+        "style": style2
+      }, [renderItem()]);
+    };
+  }
+});
+Timeline.install = function(app) {
+  app.component(Timeline.name, Timeline);
+};
+TimelineItem.install = function(app) {
+  app.component(TimelineItem.name, TimelineItem);
+};
+var TimelineInstall = {
+  title: "Timeline \u65F6\u95F4\u8F74",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.use(Timeline);
+    app.use(TimelineItem);
+  }
+};
 var TooltipInstall = {
   title: "Tooltip\u63D0\u793A",
   category: "\u53CD\u9988",
@@ -25988,8 +26213,9 @@ var Transfer = defineComponent({
       isFunction("afterTransfer") && props.afterTransfer.call(null, target);
     };
     const changeAllSource = (source, value) => {
-      if (source.filterData.every((item2) => item2.disabled))
+      if (source.filterData.every((item2) => item2.disabled)) {
         return;
+      }
       source.allChecked = value;
       if (value) {
         source.checkedValues = source.filterData.filter((item2) => !item2.disabled).map((item2) => item2.value);
@@ -26180,14 +26406,15 @@ 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 });
   const toggle = (target, item2) => {
     target.stopPropagation();
-    if (!item2.children)
+    if (!item2.children) {
       return;
+    }
     item2.open = !item2.open;
     openedData.value = openedTree(data.value);
   };
@@ -26201,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;
@@ -26241,12 +26468,15 @@ const useHighlightNode = () => {
     return key;
   };
   const handleClick = (key) => {
-    if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG)
+    if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG) {
       return;
-    if (prevActiveNodeKey.value === key)
+    }
+    if (prevActiveNodeKey.value === key) {
       return;
-    if (prevActiveNodeKey.value)
+    }
+    if (prevActiveNodeKey.value) {
       nodeClassNameReflectRef.value[prevActiveNodeKey.value] = "";
+    }
     nodeClassNameReflectRef.value[key] = HIGHLIGHT_CLASS;
     prevActiveNodeKey.value = key;
   };
@@ -26345,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 {
@@ -26390,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
@@ -26404,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({
@@ -26428,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({});
@@ -26437,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;
@@ -26449,13 +26679,14 @@ 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;
     const findDragAndDropNode = (curr) => {
-      if (!Array.isArray(curr))
+      if (!Array.isArray(curr)) {
         return;
+      }
       curr.every((item2, index2) => {
         if (nowDragNode && nowDropNode) {
           return false;
@@ -26472,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);
@@ -26494,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;
       }
@@ -26538,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);
@@ -26572,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: {
@@ -26735,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",
@@ -26799,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 = "";
@@ -26892,8 +27170,9 @@ function className(classStr, classOpt) {
 function useToggle(props) {
   const visible = ref(false);
   const selectToggle = () => {
-    if (props.disabled)
+    if (props.disabled) {
       return;
+    }
     visible.value = !visible.value;
   };
   const treeToggle = (e, item2) => {
@@ -26915,8 +27194,9 @@ function useSelect(props) {
       inputValue.value = item2.label;
     } else {
       item2.checked = !item2.checked;
-      if (item2.halfchecked)
+      if (item2.halfchecked) {
         item2.halfchecked = false;
+      }
       useCache(item2);
       searchUp(item2);
       searchDown(item2);
@@ -26927,8 +27207,9 @@ function useSelect(props) {
     item2.checked === true ? selectedCache.add(item2.label) : selectedCache.has(item2.label) && selectedCache.delete(item2.label);
   };
   const searchUp = (item2) => {
-    if (!item2.parent)
+    if (!item2.parent) {
       return;
+    }
     let state = "";
     const checkedArr = item2.parent.children.filter((el) => el.checked === true);
     switch (checkedArr.length) {
@@ -26956,8 +27237,9 @@ function useSelect(props) {
     searchUp(item2.parent);
   };
   const searchDown = (item2) => {
-    if (!item2.children)
+    if (!item2.children) {
       return;
+    }
     item2.children.forEach((el) => {
       el.checked = item2.checked;
       useCache(el);
@@ -27001,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: {
@@ -27857,8 +28139,8 @@ const installs = [
   TagInstall,
   TagInputInstall,
   TextareaInstall,
-  TimeAxisInstall,
   TimePickerInstall,
+  TimelineInstall,
   TooltipInstall,
   TransferInstall,
   TreeInstall,
@@ -27866,9 +28148,9 @@ const installs = [
   UploadInstall
 ];
 var vueDevui = {
-  version: "0.0.1",
+  version: "1.0.0-rc.0",
   install(app) {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, CarouselItem, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, DrawerService, Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header$1 as Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Notification, NotificationService, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, CarouselItem, Cascader, Checkbox, Col, ColorPicker, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, DrawerService, Dropdown, DropdownMenu, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer$1 as Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header$1 as Header, DIcon as Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, List, ListItem, loadingDirective as Loading, loading as LoadingService, Modal, NavSprite, Notification, NotificationService, Pagination, Panel, PanelBody, PanelFooter, PanelHeader, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, SortableDirective, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimePicker, Timeline, TimelineItem, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };