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

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, reactive, onBeforeUnmount, Comment as Comment$1, toRef, onUpdated, onBeforeMount, readonly, Teleport, 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({
@@ -1432,8 +1433,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 +1516,7 @@ class View {
     __publicField(this, "left", "50%");
   }
 }
-const componentProps$1 = {
+const componentProps = {
   message: String,
   backdrop: Boolean,
   view: {
@@ -1542,7 +1544,7 @@ var loading$1 = "";
 var Loading = defineComponent({
   name: "DLoading",
   inheritAttrs: false,
-  props: componentProps$1,
+  props: componentProps,
   setup(props) {
     const style2 = {
       top: props.view.top,
@@ -1839,40 +1841,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 +1924,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 +1959,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 +1970,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({
@@ -2494,8 +2468,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 +2493,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 +2548,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 +2678,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 +2761,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 +2900,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 +3187,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 +8823,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 +8861,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 +8917,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 +8927,9 @@ const DCascaderItem = (props) => {
     }
   };
   const mouseEnter = () => {
-    if (disbaled.value || multiple)
+    if (disbaled.value || multiple) {
       return;
+    }
     updateValues();
   };
   const mouseenter = {
@@ -8957,8 +8937,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 +9054,9 @@ const popupHandles = (props) => {
     stopDefault.value = !menuShow.value;
   };
   const openPopup = () => {
-    if (disabled.value)
+    if (disabled.value) {
       return;
+    }
     menuShow.value = !menuShow.value;
     updateStopDefaultType();
   };
@@ -9126,8 +9108,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 +9123,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 +9863,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 +9986,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 +10042,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 +10060,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 +10188,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 +10222,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 +10233,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 +10275,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 +10295,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 +10360,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 +10387,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 +10486,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 +10503,12 @@ var colorHueSlider = defineComponent({
         }));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
@@ -10578,12 +10573,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 +10587,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 +12025,7 @@ function useStore(v, {
 var colorHistory = defineComponent({
   name: "ColorEdit",
   components: {
-    Icon
+    Icon: DIcon
   },
   props: colorPickerHistoryProps,
   emits: ["update:color"],
@@ -12500,8 +12495,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 +13046,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 +13612,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 +14124,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 +14162,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 +14207,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 +14226,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,7 +14277,28 @@ function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emi
     dropdownMap.delete(id);
   });
 }
-var overlay = "";
+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);
 }
@@ -14288,39 +14318,73 @@ const CommonOverlay = defineComponent({
     };
   }
 });
-function useOverlayLogic(props, ctx2) {
-  const backgroundClass = computed(() => {
-    return [
-      "devui-overlay-background",
-      props.backgroundClass,
-      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
-    ];
-  });
-  const overlayClass = computed(() => {
-    return "devui-overlay";
-  });
-  const handleBackdropClick = (event) => {
-    var _a;
-    event.preventDefault();
-    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
-    if (props.backdropClose) {
-      ctx2.emit("update:visible", false);
-    }
-  };
-  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
-  onMounted(() => {
-    const body2 = document.body;
-    const originOverflow = body2.style.overflow;
-    const originPosition = body2.style.position;
-    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
-      if (backgroundBlock) {
-        const top = body2.getBoundingClientRect().y;
-        if (visible) {
-          body2.style.overflowY = "scroll";
-          body2.style.position = visible ? "fixed" : "";
-          body2.style.top = `${top}px`;
-        } else {
-          body2.style.overflowY = originOverflow;
+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 [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx2.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body2 = document.body;
+    const originOverflow = body2.style.overflow;
+    const originPosition = body2.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body2.getBoundingClientRect().y;
+        if (visible) {
+          body2.style.overflowY = "scroll";
+          body2.style.position = visible ? "fixed" : "";
+          body2.style.top = `${top}px`;
+        } else {
+          body2.style.overflowY = originOverflow;
           body2.style.position = originPosition;
           body2.style.top = "";
           window.scrollTo(0, -top);
@@ -14338,6 +14402,7 @@ function useOverlayLogic(props, ctx2) {
     handleOverlayBubbleCancel
   };
 }
+var fixedOverlay = "";
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
@@ -14390,29 +14455,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 +14480,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 +14499,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 +14520,7 @@ var Dropdown = defineComponent({
                 "class": "devui-dropdown-menu-wrap"
               }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
             }
-          })]
+          }), [[vShow, overlayShowValue.value]])]
         })]
       })]);
     };
@@ -14481,6 +14550,14 @@ const dropdownMenuProps = {
   clickOutside: {
     type: Function,
     default: () => true
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String,
+    default: ""
   }
 };
 var DropdownMenu = defineComponent({
@@ -14499,12 +14576,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 +14598,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 +14608,7 @@ var DropdownMenu = defineComponent({
           "align": align.value,
           "offset": offset2.value,
           "onPositionChange": handlePositionChange,
+          "class": overlayClass.value,
           "style": styles.value
         }, {
           default: () => {
@@ -14629,8 +14709,9 @@ const useInput = (inputValue, ctx2) => {
 };
 const useLazyLoad = (dropdownRef, inputValue, filterOtion, load) => {
   const loadMore = () => {
-    if (filterOtion !== false)
+    if (filterOtion !== false) {
       return;
+    }
     if (dropdownRef.value.clientHeight + dropdownRef.value.scrollTop >= dropdownRef.value.scrollHeight) {
       load(inputValue.value);
     }
@@ -14660,8 +14741,9 @@ const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedI
     if (!newIndex) {
       newIndex = hoverIndex.value;
     }
-    if (!["ArrowDown", "ArrowUp"].includes(direction))
+    if (!["ArrowDown", "ArrowUp"].includes(direction)) {
       return;
+    }
     if (direction === "ArrowUp") {
       if (newIndex === 0) {
         newIndex = options.value.length - 1;
@@ -14688,8 +14770,9 @@ const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedI
   };
   const handleKeydown = (event) => {
     const keyCode = event.key || event.code;
-    if (options.value.length === 0)
+    if (options.value.length === 0) {
       return;
+    }
     if (!visible.value) {
       return toggleMenu();
     }
@@ -14924,8 +15007,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) {
@@ -15310,7 +15394,7 @@ var FormLabel = defineComponent({
       }, {
         reference: () => createVNode("span", {
           "class": "devui-form-label-help"
-        }, [createVNode(Icon, {
+        }, [createVNode(DIcon, {
           "name": "helping",
           "color": "#252b3a"
         }, null)])
@@ -15522,7 +15606,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 +15761,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 +15806,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 +16000,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 +16013,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 +16026,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 +16037,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 +16055,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 +16095,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 +17058,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 +17423,7 @@ var InputIcon = defineComponent({
         "style": {
           backgroundColor: iconBgColor
         }
-      }, [createVNode(Icon, {
+      }, [createVNode(DIcon, {
         "size": "small",
         "name": name,
         "color": iconColor
@@ -17423,20 +17507,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 +17587,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 +17888,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 +18088,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 +18117,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 +18275,7 @@ var NotificationInstall = {
     app.config.globalProperties.$notificationService = NotificationService;
   }
 };
-const componentProps = {
+const paginationProps = {
   pageSize: {
     type: Number,
     default: 10
@@ -18324,15 +18412,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 +18570,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 +18696,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 +18723,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 +18839,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 +18864,6 @@ const PanelProps = {
     type: Function,
     default: null
   },
-  toggle: {
-    type: Function,
-    default: null
-  },
   showAnimation: {
     type: Boolean,
     default: true
@@ -18804,9 +18885,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 +18897,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 +18913,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 +18922,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 +18958,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 +18981,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 +18991,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 +19002,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 +19052,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 = {
@@ -19490,7 +19589,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);
@@ -19626,19 +19725,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 +20088,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 +20118,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 +20225,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"
@@ -20242,8 +20338,9 @@ const ripple = (event, el, options) => {
   incrementRippleCount(el);
   let originalPositionValue = "";
   if (computedStyles.position === "static") {
-    if (el.style.position)
+    if (el.style.position) {
       originalPositionValue = el.style.position;
+    }
     el.style.position = "relative";
   }
   rippleContainer.appendChild(rippleEl);
@@ -20254,10 +20351,11 @@ const ripple = (event, el, options) => {
       document.removeEventListener("pointerup", releaseripple);
       document.removeEventListener("pointercancel", releaseripple);
     }
-    if (shouldDissolveripple)
+    if (shouldDissolveripple) {
       dissolveripple();
-    else
+    } else {
       shouldDissolveripple = true;
+    }
   };
   const dissolveripple = () => {
     rippleEl.style.transition = "opacity 150ms linear";
@@ -20298,10 +20396,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 +20591,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 +20698,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);
     }
@@ -20659,8 +20757,9 @@ 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);
@@ -20750,11 +20849,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",
@@ -20902,32 +21001,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 +21147,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;
@@ -21152,8 +21251,9 @@ var Slider = defineComponent({
     });
     function handleButtonMousedown(event) {
       popoverShow.value = true;
-      if (props.disabled)
+      if (props.disabled) {
         return;
+      }
       event.preventDefault();
       dragStart(event);
       window.addEventListener("mousemove", onDragging);
@@ -21472,8 +21572,9 @@ function unbind(el, event, callback) {
 function onMousedown(e) {
   var _a;
   const $value = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.$value;
-  if (!$value)
+  if (!$value) {
     return;
+  }
   bind(document, "mousemove", onMousemove);
   bind(document, "mouseup", onMouseup);
   $value.onPressEvent(normalizeEvent(e));
@@ -21565,8 +21666,9 @@ var DSplitterBar = defineComponent({
         originalEvent
       }) {
         originalEvent.stopPropagation();
-        if (!store.isResizable(props.index))
+        if (!store.isResizable(props.index)) {
           return;
+        }
         initState2 = store.dragState(props.index);
         coordinate.originalX = originalEvent.pageX;
         coordinate.originalY = originalEvent.pageY;
@@ -21575,8 +21677,9 @@ var DSplitterBar = defineComponent({
         originalEvent
       }) {
         originalEvent.stopPropagation();
-        if (!store.isResizable(props.index))
+        if (!store.isResizable(props.index)) {
           return;
+        }
         coordinate.pageX = originalEvent.pageX;
         coordinate.pageY = originalEvent.pageY;
         let distance;
@@ -21591,8 +21694,9 @@ var DSplitterBar = defineComponent({
         originalEvent
       }) {
         originalEvent.stopPropagation();
-        if (!store.isResizable(props.index))
+        if (!store.isResizable(props.index)) {
           return;
+        }
         coordinate.pageX = originalEvent.pageX;
         coordinate.pageY = originalEvent.pageY;
         let distance;
@@ -21836,8 +21940,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;
@@ -22327,15 +22432,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 +22479,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 +22564,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 +22592,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 {
@@ -23708,8 +23813,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;
   });
@@ -23926,8 +24032,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 +24058,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:
@@ -24230,277 +24338,42 @@ var TextareaInstall = {
     app.use(Textarea);
   }
 };
-const timeAxisProps = {
-  direction: {
+const timePickerProps = {
+  modelValue: {
     type: String,
-    default: "vertical"
+    default: ""
   },
-  center: {
+  placeholder: {
+    type: String,
+    default: "00:00:00"
+  },
+  disabled: {
     type: Boolean,
     default: false
   },
-  mode: {
-    type: String,
-    default: "normal"
+  timePickerWidth: {
+    type: Number,
+    default: 212
   },
-  timePosition: {
+  minTime: {
     type: String,
-    default: "left"
-  }
-};
-const timeAxisItemProps = {
-  time: {
-    type: String
-  },
-  dotColor: {
-    type: String
+    default: "00:00:00"
   },
-  lineStyle: {
+  maxTime: {
     type: String,
-    default: "solid"
-  },
-  lineColor: {
-    type: String
-  },
-  position: {
-    type: String
+    default: "23:59:59"
   },
-  timePosition: {
+  format: {
     type: String,
-    default: "left"
+    default: "hh:mm:ss"
   },
-  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);
-};
-var TimeAxisInstall = {
-  title: "TimeAxis \u65F6\u95F4\u8F74",
-  category: "\u6570\u636E\u5C55\u793A",
-  status: "100%",
-  install(app) {
-    app.use(TimeAxis);
-    app.use(TimeAxisItem);
-  }
-};
-const timePickerProps = {
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  placeholder: {
-    type: String,
-    default: "00:00:00"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  timePickerWidth: {
-    type: Number,
-    default: 212
-  },
-  minTime: {
-    type: String,
-    default: "00:00:00"
-  },
-  maxTime: {
-    type: String,
-    default: "23:59:59"
-  },
-  format: {
-    type: String,
-    default: "hh:mm:ss"
-  },
-  autoOpen: {
-    type: Boolean,
-    default: false
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
+  autoOpen: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
   }
 };
 function getPositionFun(el, left, top) {
@@ -24581,8 +24454,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 +24807,9 @@ function useTimeScroll() {
     } else {
       scrollTrackDom.value.style.opacity = 0;
     }
-    if (!isDown.value)
+    if (!isDown.value) {
       return;
+    }
     clickTrackFun(e);
   };
   const getScrollWidth = () => {
@@ -25320,10 +25195,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 +25216,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 +26100,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);
@@ -26186,8 +26299,9 @@ function useToggle$1(data) {
   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);
   };
@@ -26241,12 +26355,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;
   };
@@ -26454,8 +26571,9 @@ function useDraggable(draggable, dropType, node, renderData, data) {
     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;
@@ -26892,8 +27010,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 +27034,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 +27047,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 +27077,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);
@@ -27857,8 +27979,8 @@ const installs = [
   TagInstall,
   TagInputInstall,
   TextareaInstall,
-  TimeAxisInstall,
   TimePickerInstall,
+  TimelineInstall,
   TooltipInstall,
   TransferInstall,
   TreeInstall,
@@ -27866,9 +27988,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 };