vue-devui 1.0.0-beta.8 → 1.0.0-beta.9

package/vue-devui.es.js

@@ -6518,6 +6518,10 @@ var DropdownInstall = {
   }
 };
 const editableSelectProps = {
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
   modelValue: {
     type: [String, Number]
   },
@@ -6526,7 +6530,8 @@ const editableSelectProps = {
     default: () => []
   },
   width: {
-    type: Number
+    type: Number,
+    default: 450
   },
   maxHeight: {
     type: Number
@@ -6557,8 +6562,76 @@ const editableSelectProps = {
   },
   searchFn: {
     type: Function
+  },
+  loadMore: {
+    type: Function
   }
 };
+const selectDropdownProps = {
+  options: {
+    type: Array,
+    default: () => []
+  }
+};
+function className$2(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+var SelectDropdown = defineComponent$1({
+  name: "DSelectDropdown",
+  props: selectDropdownProps,
+  setup(props) {
+    const select2 = inject("InjectionKey");
+    const {
+      props: selectProps2,
+      dropdownRef,
+      visible,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots,
+      selectedIndex,
+      loadMore
+    } = select2;
+    const {
+      maxHeight
+    } = selectProps2;
+    return () => {
+      const getLiCls = (item2, index2) => {
+        const {
+          disabledKey
+        } = selectProps2;
+        return className$2("devui-dropdown-item", {
+          disabled: disabledKey ? !!item2[disabledKey] : false,
+          selected: selectedIndex.value === index2
+        });
+      };
+      return withDirectives(createVNode("div", {
+        "class": "devui-dropdown-menu"
+      }, [createVNode("ul", {
+        "ref": dropdownRef,
+        "class": "devui-list-unstyled scroll-height",
+        "style": {
+          maxHeight: maxHeight + "px"
+        },
+        "onScroll": loadMore
+      }, [props.options.map((o, index2) => {
+        return createVNode("li", {
+          "class": getLiCls(o, index2),
+          "onClick": ($evnet) => selectOptionClick($evnet, o)
+        }, [renderDefaultSlots(o)]);
+      }), withDirectives(createVNode("li", {
+        "class": "devui-no-result-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [renderEmptySlots()])]), [[vShow, props.options.length === 0]])])]), [[vShow, visible]]);
+    };
+  }
+});
 var editableSelect = "";
 function on(element, eventName, handler) {
   if (document.addEventListener) {
@@ -6625,15 +6698,6 @@ const clickoutsideDirective = {
     delete el[ctx];
   }
 };
-function className$2(classStr, classOpt) {
-  let classname = classStr;
-  if (typeof classOpt === "object") {
-    Object.keys(classOpt).forEach((key) => {
-      classOpt[key] && (classname += ` ${key}`);
-    });
-  }
-  return classname;
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -9880,8 +9944,8 @@ var lodash = { exports: {} };
         }
         return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped, undefined$1, comparator) : [];
       });
-      function join(array4, separator) {
-        return array4 == null ? "" : nativeJoin.call(array4, separator);
+      function join(array4, separator2) {
+        return array4 == null ? "" : nativeJoin.call(array4, separator2);
       }
       function last2(array4) {
         var length = array4 == null ? 0 : array4.length;
@@ -11189,22 +11253,22 @@ var lodash = { exports: {} };
       var snakeCase = createCompounder(function(result3, word, index2) {
         return result3 + (index2 ? "_" : "") + word.toLowerCase();
       });
-      function split(string3, separator, limit) {
-        if (limit && typeof limit != "number" && isIterateeCall2(string3, separator, limit)) {
-          separator = limit = undefined$1;
+      function split(string3, separator2, limit) {
+        if (limit && typeof limit != "number" && isIterateeCall2(string3, separator2, limit)) {
+          separator2 = limit = undefined$1;
         }
         limit = limit === undefined$1 ? MAX_ARRAY_LENGTH : limit >>> 0;
         if (!limit) {
           return [];
         }
         string3 = toString2(string3);
-        if (string3 && (typeof separator == "string" || separator != null && !isRegExp(separator))) {
-          separator = baseToString2(separator);
-          if (!separator && hasUnicode(string3)) {
+        if (string3 && (typeof separator2 == "string" || separator2 != null && !isRegExp(separator2))) {
+          separator2 = baseToString2(separator2);
+          if (!separator2 && hasUnicode(string3)) {
             return castSlice(stringToArray(string3), 0, limit);
           }
         }
-        return string3.split(separator, limit);
+        return string3.split(separator2, limit);
       }
       var startCase = createCompounder(function(result3, word, index2) {
         return result3 + (index2 ? " " : "") + upperFirst(word);
@@ -11303,7 +11367,7 @@ var lodash = { exports: {} };
       function truncate(string3, options) {
         var length = DEFAULT_TRUNC_LENGTH, omission = DEFAULT_TRUNC_OMISSION;
         if (isObject2(options)) {
-          var separator = "separator" in options ? options.separator : separator;
+          var separator2 = "separator" in options ? options.separator : separator2;
           length = "length" in options ? toInteger(options.length) : length;
           omission = "omission" in options ? baseToString2(options.omission) : omission;
         }
@@ -11321,26 +11385,26 @@ var lodash = { exports: {} };
           return omission;
         }
         var result3 = strSymbols ? castSlice(strSymbols, 0, end).join("") : string3.slice(0, end);
-        if (separator === undefined$1) {
+        if (separator2 === undefined$1) {
           return result3 + omission;
         }
         if (strSymbols) {
           end += result3.length - end;
         }
-        if (isRegExp(separator)) {
-          if (string3.slice(end).search(separator)) {
+        if (isRegExp(separator2)) {
+          if (string3.slice(end).search(separator2)) {
             var match, substring = result3;
-            if (!separator.global) {
-              separator = RegExp2(separator.source, toString2(reFlags2.exec(separator)) + "g");
+            if (!separator2.global) {
+              separator2 = RegExp2(separator2.source, toString2(reFlags2.exec(separator2)) + "g");
             }
-            separator.lastIndex = 0;
-            while (match = separator.exec(substring)) {
+            separator2.lastIndex = 0;
+            while (match = separator2.exec(substring)) {
               var newEnd = match.index;
             }
             result3 = result3.slice(0, newEnd === undefined$1 ? end : newEnd);
           }
-        } else if (string3.indexOf(baseToString2(separator), end) != end) {
-          var index2 = result3.lastIndexOf(separator);
+        } else if (string3.indexOf(baseToString2(separator2), end) != end) {
+          var index2 = result3.lastIndexOf(separator2);
           if (index2 > -1) {
             result3 = result3.slice(0, index2);
           }
@@ -12054,11 +12118,54 @@ var EditableSelect = defineComponent$1({
   props: editableSelectProps,
   emits: ["update:modelValue"],
   setup(props, ctx2) {
-    const dropdownRef = ref(null);
+    const renderDropdown = (condition, type4) => {
+      if (!condition && type4 === 0) {
+        return createVNode(Transition, {
+          "name": "fade"
+        }, {
+          default: () => [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)]
+        });
+      } else if (condition && type4 === 1) {
+        return createVNode(resolveComponent("d-flexible-overlay"), {
+          "hasBackdrop": false,
+          "origin": origin,
+          "position": position,
+          "visible": visible.value,
+          "onUpdate:visible": ($event) => visible.value = $event
+        }, {
+          default: () => [createVNode("div", {
+            "class": "devui-dropdown",
+            "style": {
+              width: props.width + "px"
+            }
+          }, [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)])]
+        });
+      }
+    };
+    const renderDefaultSlots = (item2) => {
+      return ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
+        item: item2
+      }) : item2.name;
+    };
+    const renderEmptySlots = () => {
+      return ctx2.slots.empty ? renderSlot(ctx2.slots, "empty") : emptyText.value;
+    };
+    const origin = ref();
+    const dropdownRef = ref();
     const visible = ref(false);
     const inputValue = ref("");
-    const activeIndex = ref(0);
+    const selectedIndex = ref(0);
     const query = ref(props.modelValue);
+    const position = reactive({
+      originX: "left",
+      originY: "bottom",
+      overlayX: "left",
+      overlayY: "top"
+    });
     const wait = computed(() => props.remote ? 300 : 0);
     const emptyText = computed(() => {
       const options = filteredOptions.value;
@@ -12134,7 +12241,7 @@ var EditableSelect = defineComponent$1({
         e.stopPropagation();
       } else {
         query.value = item2.name;
-        activeIndex.value = findIndex(item2);
+        selectedIndex.value = findIndex(item2);
         inputValue.value = "";
         ctx2.emit("update:modelValue", item2.name);
       }
@@ -12144,28 +12251,31 @@ var EditableSelect = defineComponent$1({
         return;
       const dropdownVal = dropdownRef.value;
       if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
-        props.remoteMethod(inputValue.value);
+        props.loadMore();
       }
     };
+    provide("InjectionKey", {
+      dropdownRef,
+      props: reactive(__spreadValues({}, toRefs(props))),
+      visible,
+      emptyText,
+      selectedIndex,
+      loadMore,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots
+    });
     return () => {
-      const selectCls = className$2("devui-form-group devui-has-feedback", {
+      const selectCls = className$2("devui-editable-select devui-form-group devui-has-feedback", {
         "devui-select-open": visible.value
       });
       const inputCls = className$2("devui-form-control devui-dropdown-origin devui-dropdown-origin-open", {
         disabled: props.disabled
       });
-      const getLiCls = (item2, index2) => {
-        const {
-          disabledKey
-        } = props;
-        return className$2("devui-dropdown-item", {
-          disabled: disabledKey ? !!item2[disabledKey] : false,
-          selected: activeIndex.value === index2
-        });
-      };
-      return withDirectives(createVNode("div", {
+      return createVNode(Fragment, null, [withDirectives(createVNode("div", {
         "class": selectCls,
-        "onClick": toggleMenu
+        "onClick": toggleMenu,
+        "ref": origin
       }, [createVNode("input", {
         "class": inputCls,
         "type": "text",
@@ -12175,36 +12285,9 @@ var EditableSelect = defineComponent$1({
         "class": "devui-form-control-feedback"
       }, [createVNode("span", {
         "class": "devui-select-chevron-icon"
-      }, [createVNode(Icon, {
+      }, [createVNode(resolveComponent("d-icon"), {
         "name": "select-arrow"
-      }, null)])]), createVNode("div", {
-        "class": "devui-editable-select"
-      }, [createVNode(Transition, {
-        "name": "fade"
-      }, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": "devui-dropdown-menu"
-        }, [createVNode("ul", {
-          "class": "devui-list-unstyled scroll-height",
-          "ref": dropdownRef,
-          "style": {
-            maxHeight: props.maxHeight + "px"
-          },
-          "onScroll": loadMore
-        }, [filteredOptions.value.map((item2, index2) => {
-          return createVNode("li", {
-            "class": getLiCls(item2, index2),
-            "onClick": ($evnet) => selectOptionClick($evnet, item2),
-            "key": item2.name
-          }, [ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
-            item: item2
-          }) : item2.name]);
-        }), withDirectives(createVNode("li", {
-          "class": "devui-no-result-template"
-        }, [createVNode("div", {
-          "class": "devui-no-data-tip"
-        }, [emptyText.value])]), [[vShow, filteredOptions.value.length === 0]])])]), [[vShow, visible.value]])]
-      })])]), [[resolveDirective("click-outside"), handleClose]]);
+      }, null)])]), renderDropdown(props.appendToBody, 0)]), [[resolveDirective("click-outside"), handleClose]]), renderDropdown(props.appendToBody, 1)]);
     };
   }
 });
@@ -14034,11 +14117,11 @@ var Fullscreen = defineComponent$1({
   props: fullscreenProps,
   emits: ["fullscreenLaunch"],
   setup(props, ctx2) {
-    let currentTarget = ref(null);
+    let currentTarget = null;
     const isFullscreen = ref(false);
     const slotElement = ref(null);
     const onFullScreenChange = () => {
-      if (currentTarget.value) {
+      if (currentTarget) {
         const targetElement = currentTarget;
         if (document.fullscreenElement) {
           addFullScreenStyle();
@@ -14146,6 +14229,16 @@ var Fullscreen = defineComponent$1({
       document.addEventListener("webkitfullscreenchange", onFullScreenChange);
       document.addEventListener("keydown", handleKeyDown);
     });
+    onBeforeUnmount(() => {
+      const btnLaunch = slotElement.value.querySelector("[fullscreen-launch]");
+      if (btnLaunch) {
+        btnLaunch.removeEventListener("click", handleFullscreen);
+      }
+      document.removeEventListener("fullscreenchange", onFullScreenChange);
+      document.removeEventListener("MSFullscreenChange", onFullScreenChange);
+      document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
+      document.removeEventListener("keydown", handleKeyDown);
+    });
     return () => {
       const defaultSlot = renderSlot(useSlots(), "default");
       return createVNode("div", {
@@ -14953,11 +15046,21 @@ var imagePreview$1 = "";
 const imagePreviewProps = {
   url: {
     type: String,
-    default: ""
+    default: "",
+    required: true
   },
   previewUrlList: {
     type: Array,
-    default: () => []
+    default: () => [],
+    required: true
+  },
+  zIndex: {
+    type: Number,
+    required: false
+  },
+  backDropZIndex: {
+    type: Number,
+    required: false
   }
 };
 class Transform {
@@ -15084,6 +15187,12 @@ var imagePreview = defineComponent$1({
     let transform = null;
     const index2 = ref(0);
     const url2 = computed(() => props.previewUrlList[index2.value]);
+    const imageStyle = props.zIndex ? {
+      zIndex: props.zIndex
+    } : {};
+    const bgStyle = props.backDropZIndex ? {
+      zIndex: props.backDropZIndex
+    } : {};
     function initTransform() {
       const imageElement = document.querySelector(".devui-image-preview-main-image");
       transform = new Transform(imageElement);
@@ -15141,8 +15250,9 @@ var imagePreview = defineComponent$1({
       unKeyBoard();
     });
     return () => {
-      return createVNode("div", {
-        "class": "devui-image-preview"
+      return createVNode(Fragment, null, [createVNode("div", {
+        "class": "devui-image-preview",
+        "style": imageStyle
       }, [createVNode("img", {
         "class": "devui-image-preview-main-image",
         "src": url2.value
@@ -15300,7 +15410,10 @@ var imagePreview = defineComponent$1({
         "fill-rule": "nonzero"
       }, null)])])]), createVNode("button", {
         "onClick": onZoomOriginal
-      }, [createVNode("span", null, [createTextVNode("1:1")])])])]);
+      }, [createVNode("span", null, [createTextVNode("1:1")])])])]), createVNode("div", {
+        "class": "devui-image-preview-bg",
+        "style": bgStyle
+      }, null)]);
     };
   }
 });
@@ -15328,8 +15441,13 @@ class ImagePreviewService {
 __publicField(ImagePreviewService, "$body", null);
 __publicField(ImagePreviewService, "$div", null);
 __publicField(ImagePreviewService, "$overflow", "");
-function mountedPreviewImages(url2, urlList) {
-  ImagePreviewService.open({ url: url2, previewUrlList: urlList });
+function mountedPreviewImages(props) {
+  ImagePreviewService.open({
+    url: props.url,
+    previewUrlList: props.previewUrlList,
+    zIndex: props.zIndex,
+    backDropZIndex: props.backDropZIndex
+  });
 }
 function unmountedPreviewImages() {
   ImagePreviewService.close();
@@ -15346,7 +15464,12 @@ function handleImgByEl(el) {
     if (((_a = target == null ? void 0 : target.nodeName) == null ? void 0 : _a.toLowerCase()) === "img") {
       const urlList = getImgByEl(el);
       const url2 = target.getAttribute("src");
-      mountedPreviewImages(url2, urlList);
+      mountedPreviewImages({
+        url: url2,
+        previewUrlList: urlList,
+        zIndex: el == null ? void 0 : el.zIndex,
+        backDropZIndex: el == null ? void 0 : el.backDropZIndex
+      });
     }
   });
 }
@@ -15359,7 +15482,12 @@ var ImagePreviewDirective = {
     if (custom instanceof Object) {
       custom.open = () => {
         const urlList = getImgByEl(el);
-        mountedPreviewImages(urlList == null ? void 0 : urlList[0], urlList);
+        mountedPreviewImages({
+          url: urlList == null ? void 0 : urlList[0],
+          previewUrlList: urlList,
+          zIndex: el == null ? void 0 : el.zIndex,
+          backDropZIndex: el == null ? void 0 : el.backDropZIndex
+        });
       };
       custom.close = () => unmountedPreviewImages();
     }
@@ -15370,6 +15498,11 @@ var ImagePreviewDirective = {
   },
   unmounted() {
     unmountedPreviewImages();
+  },
+  updated(el, binding) {
+    var _a, _b;
+    el.zIndex = (_a = binding.value) == null ? void 0 : _a.zIndex;
+    el.backDropZIndex = (_b = binding.value) == null ? void 0 : _b.backDropZIndex;
   }
 };
 var ImagePreviewInstall = {
@@ -18903,10 +19036,23 @@ var TipsTemplate = defineComponent$1({
       rule = __spreadValues(__spreadValues({}, rule), dataFn);
     }
     const temp = ref(null);
+    const deviation = (x) => {
+      let deviationConstant = x > 24 ? 0 : -(x / 2) + 2;
+      if (x <= 10) {
+        deviationConstant = -10;
+      }
+      return deviationConstant;
+    };
     onMounted(() => {
       const domBounding = document.querySelector(query).getBoundingClientRect();
+      const {
+        width,
+        height
+      } = domBounding;
       const distance = 10;
       let positionTop = 0;
+      const heightDeviation = deviation(height);
+      const widthDeviation = deviation(width);
       let positionLeft = 0;
       const targetDom = document.querySelector(".read-tip-container").getBoundingClientRect();
       if (rule.appendToBody) {
@@ -18916,18 +19062,18 @@ var TipsTemplate = defineComponent$1({
       switch (rule.position) {
         case "top":
           styles.top = positionTop - targetDom.height - distance + "px";
-          styles.left = positionLeft + "px";
+          styles.left = positionLeft + widthDeviation + "px";
           break;
         case "left":
-          styles.top = positionTop + "px";
+          styles.top = positionTop + heightDeviation + "px";
           styles.left = positionLeft - targetDom.width - distance + "px";
           break;
         case "bottom":
           styles.top = positionTop + domBounding.height + distance + "px";
-          styles.left = positionLeft + "px";
+          styles.left = positionLeft + widthDeviation + "px";
           break;
         case "right":
-          styles.top = positionTop + "px";
+          styles.top = positionTop + heightDeviation + "px";
           styles.left = positionLeft + domBounding.width + distance + "px";
           break;
       }
@@ -19366,7 +19512,7 @@ const searchProps = {
     type: String,
     default: ""
   },
-  searchFn: {
+  onSearch: {
     type: Function,
     default: void 0
   },
@@ -19431,7 +19577,7 @@ const keydownHandles = (ctx2, keywords, delay) => {
     useEmitKeyword(keywords.value);
   };
   const useEmitKeyword = debounce$1((value) => {
-    ctx2.emit("searchFn", value);
+    ctx2.emit("onSearch", value);
   }, delay);
   return {
     onInputKeydown,
@@ -19443,7 +19589,7 @@ var search = "";
 var DSearch = defineComponent$1({
   name: "DSearch",
   props: searchProps,
-  emits: ["update:modelValue", "searchFn"],
+  emits: ["update:modelValue", "onSearch"],
   setup(props, ctx2) {
     const rootClasses = getRootClass(props);
     const {
@@ -19471,7 +19617,8 @@ var DSearch = defineComponent$1({
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "search"
       }, null)]), createVNode(DInput, {
         "size": props.size,
         "disabled": props.disabled,
@@ -19487,13 +19634,15 @@ var DSearch = defineComponent$1({
         "onClick": onClearHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "close",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "close"
       }, null)]), props.iconPosition === "right" && createVNode("div", {
         "class": "devui-search__icon",
         "onClick": onClickHandle
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "search",
-        "size": "inherit"
+        "size": "inherit",
+        "key": "search"
       }, null)])]);
     };
   }
@@ -20908,12 +21057,284 @@ var SplitterInstall = {
     app.use(Splitter);
   }
 };
+const statisticProps = {
+  title: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: [Number, String]
+  },
+  prefix: {
+    type: String
+  },
+  suffix: {
+    type: String
+  },
+  precision: {
+    type: Number
+  },
+  groupSeparator: {
+    type: String,
+    default: ","
+  },
+  showGroupSeparator: {
+    type: Boolean,
+    default: false
+  },
+  titleStyle: {
+    type: Object
+  },
+  contentStyle: {
+    type: Object
+  },
+  animationDuration: {
+    type: Number,
+    default: 2e3
+  },
+  valueFrom: {
+    type: Number
+  },
+  animation: {
+    type: Boolean,
+    default: false
+  },
+  start: {
+    type: Boolean,
+    default: false
+  },
+  extra: {
+    type: String,
+    default: ""
+  },
+  easing: {
+    type: String,
+    default: "easeOutCubic"
+  },
+  delay: {
+    type: Number,
+    default: 0
+  }
+};
+const separator = (SeparatorString, groupSeparator, showGroupSeparator) => {
+  const res = SeparatorString.replace(/\d+/, function(n) {
+    return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
+      return $1 + `${showGroupSeparator ? groupSeparator : ""}`;
+    });
+  });
+  return res;
+};
+const isHasDot = (value) => {
+  if (!isNaN(value)) {
+    return (value + "").indexOf(".") !== -1;
+  }
+};
+const analysisValueType = (value, propsValue, groupSeparator, splitPrecisionNumber, showGroupSeparator) => {
+  const fixedNumber = propsValue.toString().indexOf(".") !== -1 ? propsValue.toString().length - propsValue.toString().indexOf(".") - 1 : 0;
+  if (typeof value === "number") {
+    if (isHasDot(value)) {
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toFixed(fixedNumber).toString(), groupSeparator, showGroupSeparator);
+    } else {
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toString(), groupSeparator, showGroupSeparator);
+    }
+  } else {
+    return value;
+  }
+};
+const pow = Math.pow;
+const sqrt = Math.sqrt;
+const easeOutCubic = function(x) {
+  return 1 - pow(1 - x, 3);
+};
+const linear = (x) => x;
+const easeOutExpo = function(x) {
+  return x === 1 ? 1 : 1 - pow(2, -10 * x);
+};
+const easeInOutExpo = function(x) {
+  return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2;
+};
+const easeInExpo = function(x) {
+  return x === 0 ? 0 : pow(2, 10 * x - 10);
+};
+const easeInOutCirc = function(x) {
+  return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
+};
+var easing = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  easeOutCubic,
+  linear,
+  easeOutExpo,
+  easeInOutExpo,
+  easeInExpo,
+  easeInOutCirc
+});
+class Tween {
+  constructor(options) {
+    __publicField(this, "from");
+    __publicField(this, "to");
+    __publicField(this, "duration");
+    __publicField(this, "delay");
+    __publicField(this, "easing");
+    __publicField(this, "onStart");
+    __publicField(this, "onUpdate");
+    __publicField(this, "onFinish");
+    __publicField(this, "startTime");
+    __publicField(this, "started");
+    __publicField(this, "finished");
+    __publicField(this, "timer");
+    __publicField(this, "time");
+    __publicField(this, "elapsed");
+    __publicField(this, "keys");
+    const { from, to, duration, delay, easing: easing2, onStart, onUpdate, onFinish } = options;
+    for (const key in from) {
+      if (to[key] === void 0) {
+        to[key] = from[key];
+      }
+    }
+    for (const key in to) {
+      if (from[key] === void 0) {
+        from[key] = to[key];
+      }
+    }
+    this.from = from;
+    this.to = to;
+    this.duration = duration;
+    this.delay = delay;
+    this.easing = easing2;
+    this.onStart = onStart;
+    this.onUpdate = onUpdate;
+    this.onFinish = onFinish;
+    this.startTime = Date.now() + this.delay;
+    this.started = false;
+    this.finished = false;
+    this.timer = null;
+    this.keys = {};
+  }
+  update() {
+    this.time = Date.now();
+    if (this.time < this.startTime) {
+      return;
+    }
+    if (this.finished) {
+      return;
+    }
+    if (this.elapsed === this.duration) {
+      if (!this.finished) {
+        this.finished = true;
+        this.onFinish && this.onFinish(this.keys);
+      }
+      return;
+    }
+    this.elapsed = this.time - this.startTime;
+    this.elapsed = this.elapsed > this.duration ? this.duration : this.elapsed;
+    for (const key in this.to) {
+      this.keys[key] = this.from[key] + (this.to[key] - this.from[key]) * easing[this.easing](this.elapsed / this.duration);
+    }
+    if (!this.started) {
+      this.onStart && this.onStart(this.keys);
+      this.started = true;
+    }
+    this.onUpdate(this.keys);
+  }
+  start() {
+    this.startTime = Date.now() + this.delay;
+    const tick = () => {
+      this.update();
+      this.timer = requestAnimationFrame(tick);
+      if (this.finished) {
+        cancelAnimationFrame(this.timer);
+        this.timer = null;
+      }
+    };
+    tick();
+  }
+  stop() {
+    cancelAnimationFrame(this.timer);
+    this.timer = null;
+  }
+}
+var statistic = "";
+var Statistic = defineComponent$1({
+  name: "DStatistic",
+  props: statisticProps,
+  inheritAttrs: false,
+  setup(props, ctx2) {
+    var _a;
+    const innerValue = ref((_a = props.valueFrom) != null ? _a : props.value);
+    const tween = ref(null);
+    const animation = (from = ((_b) => (_b = props.valueFrom) != null ? _b : 0)(), to = typeof props.value === "number" ? props.value : Number(props.value)) => {
+      if (from !== to) {
+        tween.value = new Tween({
+          from: {
+            value: from
+          },
+          to: {
+            value: to
+          },
+          delay: props.delay,
+          duration: props.animationDuration,
+          easing: props.easing,
+          onUpdate: (keys2) => {
+            innerValue.value = keys2.value;
+          },
+          onFinish: () => {
+            innerValue.value = to;
+          }
+        });
+        tween.value.start();
+      }
+    };
+    const statisticValue = computed(() => {
+      return analysisValueType(innerValue.value, props.value, props.groupSeparator, props.precision, props.showGroupSeparator, props.animation);
+    });
+    onMounted(() => {
+      if (props.animation && props.start) {
+        animation();
+      }
+    });
+    watch(() => props.start, (value) => {
+      if (value && !tween.value) {
+        animation();
+      }
+    });
+    return () => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      return createVNode("div", mergeProps({
+        "class": "devui-statistic"
+      }, ctx2.attrs), [createVNode("div", {
+        "class": "devui-statistic-title",
+        "style": props.titleStyle
+      }, [((_b = (_a2 = ctx2.slots).title) == null ? void 0 : _b.call(_a2)) || props.title]), createVNode("div", {
+        "class": "devui-statistic-content",
+        "style": props.contentStyle
+      }, [props.prefix || ((_d = (_c = ctx2.slots).prefix) == null ? void 0 : _d.call(_c)) ? createVNode("span", {
+        "class": "devui-statistic-prefix"
+      }, [((_f = (_e = ctx2.slots).prefix) == null ? void 0 : _f.call(_e)) || props.prefix]) : null, createVNode("span", {
+        "class": "devui-statistic--value"
+      }, [statisticValue.value]), props.suffix || ((_h = (_g = ctx2.slots).suffix) == null ? void 0 : _h.call(_g)) ? createVNode("span", {
+        "class": "devui-statistic-suffix"
+      }, [((_j = (_i = ctx2.slots).suffix) == null ? void 0 : _j.call(_i)) || props.suffix]) : null]), ((_l = (_k = ctx2.slots).extra) == null ? void 0 : _l.call(_k)) || props.extra]);
+    };
+  }
+});
+Statistic.install = function(app) {
+  app.component(Statistic.name, Statistic);
+};
+var StatisticInstall = {
+  title: "Statistic \u7EDF\u8BA1\u6570\u503C",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: void 0,
+  install(app) {
+    app.use(Statistic);
+  }
+};
 var status = "";
 var Status = defineComponent$1({
   name: "DStatus",
   props: {
     type: {
-      default: "initial",
+      default: "invalid",
       type: String
     }
   },
@@ -20979,7 +21400,7 @@ const stepsGuideProps = {
   }
 };
 function useStepsGuidePosition(props, currentStep) {
-  const guideClassList = ["devui-steps-guide"];
+  const guideClassList = reactive(["devui-steps-guide"]);
   const stepsRef = ref(null);
   const guidePosition = reactive({
     left: "",
@@ -20987,7 +21408,7 @@ function useStepsGuidePosition(props, currentStep) {
     zIndex: props.zIndex
   });
   const updateGuidePosition = () => {
-    if (!currentStep.value)
+    if (!currentStep.value || !stepsRef.value)
       return;
     const baseTop = window.pageYOffset - document.documentElement.clientTop;
     const baseLeft = window.pageXOffset - document.documentElement.clientLeft;
@@ -21003,6 +21424,10 @@ function useStepsGuidePosition(props, currentStep) {
       guideClassList.splice(1, 1, currentStepPosition);
       const triggerSelector = currentStep.value.target || currentStep.value.trigger;
       const triggerElement = document.querySelector(triggerSelector);
+      if (!triggerElement) {
+        console.warn(`${triggerSelector} \u4E0D\u5B58\u5728!`);
+        return false;
+      }
       const targetRect = triggerElement.getBoundingClientRect();
       _left = targetRect.left + triggerElement.clientWidth / 2 - stepGuideElement.clientWidth / 2 + baseLeft;
       _top = targetRect.top + triggerElement.clientHeight / 2 - stepGuideElement.clientHeight / 2 + baseTop;
@@ -21034,7 +21459,7 @@ function useStepsGuidePosition(props, currentStep) {
     }
     guidePosition.left = _left + "px";
     guidePosition.top = _top + "px";
-    if (props.scrollToTargetSwitch) {
+    if (props.scrollToTargetSwitch && typeof stepGuideElement.scrollIntoView === "function") {
       nextTick$1(() => {
         stepGuideElement.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
@@ -21060,9 +21485,7 @@ function useStepsGuideCtrl(props, ctx2, updateGuidePosition, stepIndex) {
     if (index2 !== -1 && props.stepChange()) {
       if (index2 > -1 && index2 < stepsCount.value) {
         stepIndex.value = index2;
-        console.log(stepIndex.value, index2, stepsCount.value);
         nextTick$1(() => {
-          console.log(stepIndex.value, index2, stepsCount.value);
           updateGuidePosition();
         });
       } else {
@@ -27227,6 +27650,7 @@ const installs = [
   SkeletonInstall,
   SliderInstall,
   SplitterInstall,
+  StatisticInstall,
   StatusInstall,
   StepsGuideInstall,
   StickyInstall,
@@ -27251,4 +27675,4 @@ var vueDevui = {
     installs.forEach((p) => app.use(p));
   }
 };
-export { Accordion, Alert, Anchor, Aside, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, MultiUpload, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };
+export { Accordion, Alert, Anchor, Aside, Avatar, BackTop, Badge, Breadcrumb, DButton as Button, Card, Carousel, Cascader, Checkbox, Col, Column, Comment, Content, Countdown, DatePicker, DraggableDirective, Drawer, Dropdown, DroppableDirective, EditableSelect, FixedOverlay, FlexibleOverlay, Footer, Form, FormControl, FormItem, FormLabel, FormOperation, Fullscreen, Gantt, Header, Icon, ImagePreviewDirective, ImagePreviewService, DInput as Input, InputIcon, InputNumber, Layout, loadingDirective as Loading, loading as LoadingService, Modal, MultiUpload, NavSprite, Pagination, Panel, Popover, Progress, QuadrantDiagram, Radio, RadioGroup, Rate, ReadTip, Result, RippleDirective, Row, DSearch as Search, Select, Skeleton, SkeletonItem, Slider, Splitter, Statistic, Status, StepsGuide, StickSlider, Sticky, Switch, Table, Tabs, Tag, TagInput, Textarea, TimeAxis, TimeAxisItem, TimePicker, Toast, ToastService, DTooltip as Tooltip, Transfer, Tree, TreeSelect, Upload, vueDevui as default };