@element-plus/nightly 0.0.20221206 → 0.0.20221208

package/es/components/statistic/index.mjs

@@ -1,7 +1,7 @@
 import '../../utils/index.mjs';
 import Statistic from './src/statistic2.mjs';
 import Countdown from './src/countdown2.mjs';
-export { regroup, statisticProps } from './src/statistic.mjs';
+export { groupFormat, statisticProps } from './src/statistic.mjs';
 export { countdownEmits, countdownProps, formatTimeStr } from './src/countdown.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 

package/es/components/statistic/src/countdown.d.ts

@@ -1,22 +1,22 @@
-import dayjs from 'dayjs';
 import type { StyleValue } from 'vue';
+import type { Dayjs } from 'dayjs';
 import type Countdown from './countdown.vue';
 export declare const countdownProps: {
     readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "HH:mm:ss", boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly value: {
-        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (number | dayjs.Dayjs) & {}) | (() => number | dayjs.Dayjs) | ((new (...args: any[]) => (number | dayjs.Dayjs) & {}) | (() => number | dayjs.Dayjs))[], unknown, unknown>>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (number | Dayjs) & {}) | (() => number | Dayjs) | ((new (...args: any[]) => (number | Dayjs) & {}) | (() => number | Dayjs))[], unknown, unknown, 0, boolean>;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown, () => {}, boolean>;
 };
 export declare const countdownEmits: {
     finish: () => boolean;
     change: (value: number) => boolean;
 };
-export declare const formatTimeStr: (format: any, time: number, futureTime: any) => string;
+export declare const formatTimeStr: (format: string, time: number) => string;
 export declare type CountdownInstance = InstanceType<typeof Countdown>;

package/es/components/statistic/src/countdown.mjs

@@ -1,38 +1,31 @@
-import { reduce, floor, divide, multiply, padStart } from 'lodash-unified';
-import dayjs from 'dayjs';
+import { padStart } from 'lodash-unified';
 import '../../../utils/index.mjs';
+import '../../../constants/index.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { CHANGE_EVENT } from '../../../constants/event.mjs';
+import { isNumber } from '@vueuse/core';
 
 const countdownProps = buildProps({
   format: {
     type: String,
     default: "HH:mm:ss"
   },
-  prefix: {
-    type: String,
-    default: ""
-  },
-  suffix: {
-    type: String,
-    default: null
-  },
-  title: {
-    type: [String, Number],
-    default: ""
-  },
+  prefix: String,
+  suffix: String,
+  title: String,
   value: {
-    type: definePropType([Number, Object])
+    type: definePropType([Number, Object]),
+    default: 0
   },
   valueStyle: {
-    type: definePropType([String, Object]),
-    default: () => ({})
+    type: definePropType([String, Object, Array])
   }
 });
 const countdownEmits = {
   finish: () => true,
-  change: (value) => !!value
+  [CHANGE_EVENT]: (value) => isNumber(value)
 };
-const formatTimeStr = function(format, time, futureTime) {
+const formatTimeStr = (format, time) => {
   const timeUnits = [
     ["Y", 1e3 * 60 * 60 * 24 * 365],
     ["M", 1e3 * 60 * 60 * 24 * 30],
@@ -42,19 +35,28 @@ const formatTimeStr = function(format, time, futureTime) {
     ["s", 1e3],
     ["S", 1]
   ];
-  return reduce(timeUnits, (con, item) => {
+  let pre = 0;
+  let preTick = 0;
+  let timeLeft = time;
+  return timeUnits.reduce((con, item) => {
     const name = item[0];
     return con.replace(new RegExp(`${name}+`, "g"), (match) => {
       let sum = 0;
-      if (name == "M") {
-        sum = Math.abs(dayjs().diff(dayjs(futureTime), name));
-        time -= Math.abs(dayjs().diff(dayjs().add(sum, "month").format(), "day") * timeUnits[2][1]);
+      if (!format.includes(name)) {
+        pre = Math.floor(timeLeft / item[1]);
+        timeLeft = timeLeft - pre * item[1];
+        preTick = item[1];
       } else {
-        sum = floor(divide(time, item[1]));
-        time -= multiply(sum, item[1]);
+        pre = 0;
+        preTick = 0;
+        sum = Math.floor(timeLeft / item[1]);
+        timeLeft = timeLeft - sum * item[1];
+        if (pre > 0) {
+          sum = sum + pre * (preTick / item[1]);
+          pre = 0;
+        }
       }
-      sum = padStart(String(sum), String(match).length, "0");
-      return sum;
+      return padStart(String(sum), match.length, "0");
     });
   }, format);
 };

package/es/components/statistic/src/countdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/statistic/src/countdown.ts"],"sourcesContent":["import { divide, floor, multiply, padStart, reduce } from 'lodash-unified'\nimport dayjs from 'dayjs'\nimport { buildProps, definePropType } from '@element-plus/utils'\nimport type { StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\nexport const countdownProps = buildProps({\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  prefix: {\n    type: String,\n    default: '',\n  },\n  suffix: {\n    type: String,\n    default: null,\n  },\n  title: {\n    type: [String, Number],\n    default: '',\n  },\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n  },\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object]),\n    default: () => ({}),\n  },\n} as const)\n\nexport const countdownEmits = {\n  finish: () => true,\n  change: (value: number) => !!value,\n}\n\nexport const formatTimeStr = function (\n  format: any,\n  time: number,\n  futureTime: any\n) {\n  const timeUnits: any = [\n    ['Y', 1000 * 60 * 60 * 24 * 365], // years\n    ['M', 1000 * 60 * 60 * 24 * 30], // months\n    ['D', 1000 * 60 * 60 * 24], // days\n    ['H', 1000 * 60 * 60], // hours\n    ['m', 1000 * 60], // minutes\n    ['s', 1000], // seconds\n    ['S', 1], // million seconds\n  ]\n  return reduce(\n    timeUnits,\n    (con: string, item: any[]) => {\n      const name = item[0]\n      return con.replace(new RegExp(`${name}+`, 'g'), (match: any) => {\n        let sum: any = 0\n        if (name == 'M') {\n          //Revision of month\n          sum = Math.abs(dayjs().diff(dayjs(futureTime), name))\n          time -= Math.abs(\n            dayjs().diff(dayjs().add(sum, 'month').format(), 'day') *\n              timeUnits[2][1]\n          )\n        } else {\n          sum = floor(divide(time, item[1]))\n          time -= multiply(sum, item[1])\n        }\n        sum = padStart(String(sum), String(match).length, '0') // autoCompletion\n        return sum\n      })\n    },\n    format\n  )\n}\n\nexport type CountdownInstance = InstanceType<typeof Countdown>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"countdown.mjs","sources":["../../../../../../packages/components/statistic/src/countdown.ts"],"sourcesContent":["import { padStart } from 'lodash-unified'\nimport { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport type { StyleValue } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type Countdown from './countdown.vue'\nexport const countdownProps = buildProps({\n  /**\n   * @description Formatting the countdown display\n   */\n  format: {\n    type: String,\n    default: 'HH:mm:ss',\n  },\n  /**\n   * @description Sets the prefix of a countdown\n   */\n  prefix: String,\n  /**\n   * @description Sets the suffix of a countdown\n   */\n  suffix: String,\n  /**\n   * @description countdown titles\n   */\n  title: String,\n  /**\n   * @description target time\n   */\n  value: {\n    type: definePropType<number | Dayjs>([Number, Object]),\n    default: 0,\n  },\n  /**\n   * @description Styles countdown values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n} as const)\n\nexport const countdownEmits = {\n  finish: () => true,\n  [CHANGE_EVENT]: (value: number) => isNumber(value),\n}\n\nexport const formatTimeStr = (format: string, time: number) => {\n  const timeUnits: [string, number][] = [\n    ['Y', 1000 * 60 * 60 * 24 * 365], // years\n    ['M', 1000 * 60 * 60 * 24 * 30], // months\n    ['D', 1000 * 60 * 60 * 24], // days\n    ['H', 1000 * 60 * 60], // hours\n    ['m', 1000 * 60], // minutes\n    ['s', 1000], // seconds\n    ['S', 1], // million seconds\n  ]\n  // The unformatted value of the previous tick\n  let pre = 0\n  // previous tick\n  let preTick = 0\n  // time left\n  let timeLeft = time\n  return timeUnits.reduce((con: string, item: [string, number]) => {\n    const name = item[0]\n    return con.replace(new RegExp(`${name}+`, 'g'), (match) => {\n      let sum = 0\n      if (!format.includes(name)) {\n        pre = Math.floor(timeLeft / item[1])\n        timeLeft = timeLeft - pre * item[1]\n        preTick = item[1]\n      } else {\n        pre = 0\n        preTick = 0\n        sum = Math.floor(timeLeft / item[1])\n        timeLeft = timeLeft - sum * item[1]\n        if (pre > 0) {\n          sum = sum + pre * (preTick / item[1])\n          pre = 0\n        }\n      }\n      return padStart(String(sum), match.length, '0') // autoCompletion\n    })\n  }, format)\n}\n\nexport type CountdownInstance = InstanceType<typeof Countdown>\n"],"names":[],"mappings":"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"}

package/es/components/statistic/src/countdown.vue.d.ts

@@ -1,29 +1,29 @@
 declare const _default: import("vue").DefineComponent<{
     readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "HH:mm:ss", boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly value: {
-        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown>>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown, 0, boolean>;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
 }, {
     REFRESH_INTERVAL: number;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "HH:mm:ss", boolean>;
-        readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-        readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-        readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-        readonly value: {
-            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown>>;
+        readonly prefix: StringConstructor;
+        readonly suffix: StringConstructor;
+        readonly title: StringConstructor;
+        readonly value: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown, 0, boolean>;
+        readonly valueStyle: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
     }>> & {
         onChange?: ((value: number) => any) | undefined;
         onFinish?: (() => any) | undefined;
@@ -47,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
-    disposeValue: import("vue").Ref<string>;
+    displayValue: import("vue").Ref<string>;
     timer: number | undefined;
     getTime: (val: number) => number;
     stopTimer: () => void;
@@ -57,24 +57,21 @@ declare const _default: import("vue").DefineComponent<{
     change: (value: number) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly format: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "HH:mm:ss", boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly value: {
-        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown>>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown, 0, boolean>;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
 }>> & {
     onChange?: ((value: number) => any) | undefined;
     onFinish?: (() => any) | undefined;
 }, {
-    readonly title: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    readonly prefix: string;
-    readonly suffix: string;
+    readonly value: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs) | ((new (...args: any[]) => (number | import("dayjs").Dayjs) & {}) | (() => number | import("dayjs").Dayjs))[], unknown, unknown>;
     readonly format: string;
-    readonly valueStyle: import("vue").StyleValue;
 }>;
 export default _default;

package/es/components/statistic/src/countdown2.mjs

@@ -1,5 +1,4 @@
-import { defineComponent, onBeforeUnmount, ref, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from 'vue';
-import { isNil } from 'lodash-unified';
+import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from 'vue';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
 import { countdownProps, countdownEmits, formatTimeStr } from './countdown.mjs';
@@ -17,11 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: countdownEmits,
   setup(__props, { expose, emit }) {
     const props = __props;
-    onBeforeUnmount(() => {
-      stopTimer();
-    });
     const ns = useNamespace("statistic");
-    const disposeValue = ref("");
+    const displayValue = ref("");
     let timer;
     const getTime = (val) => {
       return new Date(val).getTime();
@@ -34,19 +30,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const startTimer = () => {
       const { value, format } = props;
-      if (isNil(value)) {
-        disposeValue.value = "";
-        return;
-      }
       const timestamp = getTime(isNumber(value) ? value : value.valueOf());
+      displayValue.value = formatTimeStr(format, timestamp - Date.now());
       timer = setInterval(() => {
-        const diff = timestamp - Date.now();
+        let diff = timestamp - Date.now();
         emit("change", diff);
-        if (diff < 0) {
+        if (diff <= 0) {
+          diff = 0;
           stopTimer();
           emit("finish");
         }
-        disposeValue.value = formatTimeStr(format, diff, value);
+        displayValue.value = formatTimeStr(format, diff);
       }, REFRESH_INTERVAL);
     };
     watch(() => [props.value, props.format], () => {
@@ -55,8 +49,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }, {
       immediate: true
     });
+    onBeforeUnmount(() => {
+      stopTimer();
+    });
     expose({
-      disposeValue
+      displayValue
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -86,17 +83,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(_ctx.prefix), 1)
             ])
           ], 2)) : createCommentVNode("v-if", true),
-          _ctx.value ? (openBlock(), createElementBlock("span", {
-            key: 1,
+          createElementVNode("span", {
             class: normalizeClass(unref(ns).e("number")),
             style: normalizeStyle(_ctx.valueStyle)
-          }, [
-            renderSlot(_ctx.$slots, "formatter", {}, () => [
-              createTextVNode(toDisplayString(disposeValue.value), 1)
-            ])
-          ], 6)) : createCommentVNode("v-if", true),
+          }, toDisplayString(displayValue.value), 7),
           !!_ctx.$slots.title || _ctx.suffix ? (openBlock(), createElementBlock("span", {
-            key: 2,
+            key: 1,
             class: normalizeClass(unref(ns).e("suffix"))
           }, [
             renderSlot(_ctx.$slots, "suffix", {}, () => [

package/es/components/statistic/src/countdown2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/statistic/src/countdown.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div v-if=\"!!$slots.title || title\" ref=\"title\" :class=\"ns.e('head')\">\n      <span :class=\"ns.e('title')\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </span>\n    </div>\n    <div :class=\"ns.e('content')\">\n      <span v-if=\"!!$slots.title || prefix\" :class=\"ns.e('prefix')\">\n        <slot name=\"prefix\">\n          {{ prefix }}\n        </slot>\n      </span>\n      <span v-if=\"value\" :class=\"ns.e('number')\" :style=\"valueStyle\">\n        <slot name=\"formatter\"> {{ disposeValue }}</slot>\n      </span>\n      <span v-if=\"!!$slots.title || suffix\" :class=\"ns.e('suffix')\">\n        <slot name=\"suffix\">\n          {{ suffix }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount, ref, watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isNumber } from '@element-plus/utils'\nimport { countdownEmits, countdownProps, formatTimeStr } from './countdown'\n\nconst REFRESH_INTERVAL = 1000 / 30\n\ndefineOptions({\n  name: 'ElCountdown',\n})\nonBeforeUnmount(() => {\n  stopTimer()\n})\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\nconst ns = useNamespace('statistic')\nconst disposeValue = ref('')\nlet timer: ReturnType<typeof setInterval> | undefined\n\nconst getTime = (val: number) => {\n  return new Date(val).getTime()\n}\n\nconst stopTimer = () => {\n  if (timer) {\n    clearInterval(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const { value, format } = props\n  if (isNil(value)) {\n    disposeValue.value = ''\n    return\n  }\n  const timestamp = getTime(isNumber(value) ? value : value.valueOf())\n  timer = setInterval(() => {\n    const diff = timestamp - Date.now()\n    emit('change', diff)\n    if (diff < 0) {\n      stopTimer()\n      emit('finish')\n    }\n    disposeValue.value = formatTimeStr(format, diff, value)\n  }, REFRESH_INTERVAL)\n}\n\nwatch(\n  () => [props.value, props.format],\n  () => {\n    stopTimer()\n    startTimer()\n  },\n  {\n    immediate: true,\n  }\n)\n\ndefineExpose({\n  disposeValue,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;mCAmCc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR;;;;;;;AACA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAGD,IAAM,MAAA,EAAA,GAAK,aAAa,WAAW,CAAA,CAAA;AACnC,IAAM,MAAA,YAAA,GAAe,IAAI,EAAE,CAAA,CAAA;AAC3B,IAAI,IAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,OAAA,GAAU,CAAC,GAAgB,KAAA;AAC/B,MAAA,OAAO,IAAI,IAAA,CAAK,GAAG,CAAA,CAAE,OAAQ,EAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,EAAE,OAAO,MAAW,EAAA,GAAA,KAAA,CAAA;AAC1B,MAAI,IAAA,KAAA,CAAM,KAAK,CAAG,EAAA;AAChB,QAAA,YAAA,CAAa,KAAQ,GAAA,EAAA,CAAA;AACrB,QAAA,OAAA;AAAA,OACF;AACA,MAAM,MAAA,SAAA,GAAY,QAAQ,QAAS,CAAA,KAAK,IAAI,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AACnE,MAAA,KAAA,GAAQ,YAAY,MAAM;AACxB,QAAM,MAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAClC,QAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AACnB,QAAA,IAAI,OAAO,CAAG,EAAA;AACZ,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACf;AACA,QAAA,YAAA,CAAa,KAAQ,GAAA,aAAA,CAAc,MAAQ,EAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAAA,SACrD,gBAAgB,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAA,KAAA,CACE,MAAM,CAAC,KAAA,CAAM,OAAO,KAAM,CAAA,MAAM,GAChC,MAAM;AACJ,MAAU,SAAA,EAAA,CAAA;AACV,MAAW,UAAA,EAAA,CAAA;AAAA,KAEb,EAAA;AAAA,MACE,SAAW,EAAA,IAAA;AAAA,KAEf,CAAA,CAAA;AAEA,IAAa,MAAA,CAAA;AAAA,MACX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"countdown2.mjs","sources":["../../../../../../packages/components/statistic/src/countdown.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div v-if=\"!!$slots.title || title\" ref=\"title\" :class=\"ns.e('head')\">\n      <span :class=\"ns.e('title')\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </span>\n    </div>\n    <div :class=\"ns.e('content')\">\n      <span v-if=\"!!$slots.title || prefix\" :class=\"ns.e('prefix')\">\n        <slot name=\"prefix\">\n          {{ prefix }}\n        </slot>\n      </span>\n      <span :class=\"ns.e('number')\" :style=\"valueStyle\">\n        {{ displayValue }}\n      </span>\n      <span v-if=\"!!$slots.title || suffix\" :class=\"ns.e('suffix')\">\n        <slot name=\"suffix\">\n          {{ suffix }}\n        </slot>\n      </span>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { onBeforeUnmount, ref, watch } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isNumber } from '@element-plus/utils'\nimport { countdownEmits, countdownProps, formatTimeStr } from './countdown'\n\nconst REFRESH_INTERVAL = 1000 / 30\n\ndefineOptions({\n  name: 'ElCountdown',\n})\n\nconst props = defineProps(countdownProps)\nconst emit = defineEmits(countdownEmits)\nconst ns = useNamespace('statistic')\nconst displayValue = ref('')\nlet timer: ReturnType<typeof setInterval> | undefined\n\nconst getTime = (val: number) => {\n  return new Date(val).getTime()\n}\n\nconst stopTimer = () => {\n  if (timer) {\n    clearInterval(timer)\n    timer = undefined\n  }\n}\n\nconst startTimer = () => {\n  const { value, format } = props\n  const timestamp = getTime(isNumber(value) ? value : value.valueOf())\n  displayValue.value = formatTimeStr(format, timestamp - Date.now())\n  timer = setInterval(() => {\n    let diff = timestamp - Date.now()\n    emit('change', diff)\n    if (diff <= 0) {\n      diff = 0\n      stopTimer()\n      emit('finish')\n    }\n    displayValue.value = formatTimeStr(format, diff)\n  }, REFRESH_INTERVAL)\n}\n\nwatch(\n  () => [props.value, props.format],\n  () => {\n    stopTimer()\n    startTimer()\n  },\n  {\n    immediate: true,\n  }\n)\n\nonBeforeUnmount(() => {\n  stopTimer()\n})\n\ndefineExpose({\n  /**\n   * @description Current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAkCc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR;;;;;;;AAIA,IAAM,MAAA,EAAA,GAAK,aAAa,WAAW,CAAA,CAAA;AACnC,IAAM,MAAA,YAAA,GAAe,IAAI,EAAE,CAAA,CAAA;AAC3B,IAAI,IAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,OAAA,GAAU,CAAC,GAAgB,KAAA;AAC/B,MAAA,OAAO,IAAI,IAAA,CAAK,GAAG,CAAA,CAAE,OAAQ,EAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,MAAM,YAAY,MAAM;AACtB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,QAAQ,KAAA,GAAA,KAAA,CAAA,CAAA;AAAA,OACV;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,aAAa,MAAM;AACvB,MAAM,MAAA,EAAE,OAAO,MAAW,EAAA,GAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,SAAA,GAAY,QAAQ,QAAS,CAAA,KAAK,IAAI,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AACnE,MAAA,YAAA,CAAa,QAAQ,aAAc,CAAA,MAAA,EAAQ,SAAY,GAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACjE,MAAA,KAAA,GAAQ,YAAY,MAAM;AACxB,QAAI,IAAA,IAAA,GAAO,SAAY,GAAA,IAAA,CAAK,GAAI,EAAA,CAAA;AAChC,QAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AACnB,QAAA,IAAI,QAAQ,CAAG,EAAA;AACb,UAAO,IAAA,GAAA,CAAA,CAAA;AACP,UAAU,SAAA,EAAA,CAAA;AACV,UAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AAAA,SACf;AACA,QAAa,YAAA,CAAA,KAAA,GAAQ,aAAc,CAAA,MAAA,EAAQ,IAAI,CAAA,CAAA;AAAA,SAC9C,gBAAgB,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAA,KAAA,CACE,MAAM,CAAC,KAAA,CAAM,OAAO,KAAM,CAAA,MAAM,GAChC,MAAM;AACJ,MAAU,SAAA,EAAA,CAAA;AACV,MAAW,UAAA,EAAA,CAAA;AAAA,KAEb,EAAA;AAAA,MACE,SAAW,EAAA,IAAA;AAAA,KAEf,CAAA,CAAA;AAEA,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAIX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/statistic/src/statistic.d.ts

@@ -3,19 +3,23 @@ import type Statistic from './statistic.vue';
 export declare const statisticProps: {
     readonly decimalSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ".", boolean>;
     readonly groupSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ",", boolean>;
-    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, null, boolean>;
+    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly formatter: {
         readonly type: import("vue").PropType<(val: string | number) => string | number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, null, boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown, () => {}, boolean>;
-    readonly rate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3, boolean>;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 };
-export declare const regroup: (target: any, _mulriple?: number, _groupSeparator?: string) => string;
+export declare const groupFormat: (target: string, step?: number, groupSeparator?: string) => string;
 export declare type StatisticInstance = InstanceType<typeof Statistic>;

package/es/components/statistic/src/statistic.mjs

@@ -12,40 +12,26 @@ const statisticProps = buildProps({
   },
   precision: {
     type: Number,
-    default: null
+    default: 0
   },
   formatter: {
     type: definePropType(Function)
   },
   value: {
     type: [String, Number],
-    default: null
-  },
-  prefix: {
-    type: String,
-    default: ""
-  },
-  suffix: {
-    type: String,
-    default: null
-  },
-  title: {
-    type: [String, Number],
-    default: ""
+    default: 0
   },
+  prefix: String,
+  suffix: String,
+  title: String,
   valueStyle: {
-    type: definePropType([String, Object]),
-    default: () => ({})
-  },
-  rate: {
-    type: Number,
-    default: 3
+    type: definePropType([String, Object, Array])
   }
 });
-const regroup = function(target, _mulriple = 3, _groupSeparator = ",") {
-  const reg = new RegExp(`\\B(?=(\\d{${_mulriple}})+(?!\\d))`, "g");
-  return String(target).replace(reg, _groupSeparator);
+const groupFormat = function(target, step = 3, groupSeparator = ",") {
+  const reg = new RegExp(`\\B(?=(\\d{${step}})+(?!\\d))`, "g");
+  return target.replace(reg, groupSeparator);
 };
 
-export { regroup, statisticProps };
+export { groupFormat, statisticProps };
 //# sourceMappingURL=statistic.mjs.map

package/es/components/statistic/src/statistic.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"statistic.mjs","sources":["../../../../../../packages/components/statistic/src/statistic.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { StyleValue } from 'vue'\nimport type Statistic from './statistic.vue'\nexport const statisticProps = buildProps({\n  decimalSeparator: {\n    type: String,\n    default: '.',\n  },\n  groupSeparator: {\n    type: String,\n    default: ',',\n  },\n  precision: {\n    type: Number,\n    default: null,\n  },\n  formatter: {\n    type: definePropType<(val: string | number) => string | number>(Function),\n  },\n  value: {\n    type: [String, Number],\n    default: null,\n  },\n  prefix: {\n    type: String,\n    default: '',\n  },\n  suffix: {\n    type: String,\n    default: null,\n  },\n  title: {\n    type: [String, Number],\n    default: '',\n  },\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object]),\n    default: () => ({}),\n  },\n  rate: {\n    type: Number,\n    default: 3,\n  },\n} as const)\nexport const regroup = function (\n  target: any,\n  _mulriple = 3,\n  _groupSeparator = ','\n): string {\n  const reg = new RegExp(`\\\\B(?=(\\\\d{${_mulriple}})+(?!\\\\d))`, 'g')\n  return String(target).replace(reg, _groupSeparator)\n}\nexport type StatisticInstance = InstanceType<typeof Statistic>\n"],"names":[],"mappings":";;;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,OAAO,EAAE,CAAC;AACvB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC,EAAE;AACS,MAAC,OAAO,GAAG,SAAS,MAAM,EAAE,SAAS,GAAG,CAAC,EAAE,eAAe,GAAG,GAAG,EAAE;AAC9E,EAAE,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,CAAC;AACpE,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,eAAe,CAAC,CAAC;AACtD;;;;"}
+{"version":3,"file":"statistic.mjs","sources":["../../../../../../packages/components/statistic/src/statistic.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { StyleValue } from 'vue'\nimport type Statistic from './statistic.vue'\nexport const statisticProps = buildProps({\n  /**\n   * @description Setting the decimal point\n   */\n  decimalSeparator: {\n    type: String,\n    default: '.',\n  },\n  /**\n   * @description Sets the thousandth identifier\n   */\n  groupSeparator: {\n    type: String,\n    default: ',',\n  },\n  /**\n   * @description numerical precision\n   */\n  precision: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description Custom numerical presentation\n   */\n  formatter: {\n    type: definePropType<(val: string | number) => string | number>(Function),\n  },\n  /**\n   * @description Numerical content\n   */\n  value: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description Sets the prefix of a number\n   */\n  prefix: String,\n\n  /**\n   * @description  Sets the suffix of a number\n   */\n  suffix: String,\n  /**\n   * @description Numeric titles\n   */\n  title: String,\n  /**\n   * @description Styles numeric values\n   */\n  valueStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n  // rate: {\n  //   type: Number,\n  //   default: 3,\n  // },\n} as const)\nexport const groupFormat = function (\n  target: string,\n  step = 3,\n  groupSeparator = ','\n): string {\n  const reg = new RegExp(`\\\\B(?=(\\\\d{${step}})+(?!\\\\d))`, 'g')\n  return target.replace(reg, groupSeparator)\n}\nexport type StatisticInstance = InstanceType<typeof Statistic>\n"],"names":[],"mappings":";;;AACY,MAAC,cAAc,GAAG,UAAU,CAAC;AACzC,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG,SAAS,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,cAAc,GAAG,GAAG,EAAE;AAC5E,EAAE,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,CAAC;AAC/D,EAAE,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;AAC7C;;;;"}

package/es/components/statistic/src/statistic.vue.d.ts

@@ -1,36 +1,45 @@
 declare const _default: import("vue").DefineComponent<{
     readonly decimalSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ".", boolean>;
     readonly groupSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ",", boolean>;
-    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, null, boolean>;
+    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly formatter: {
         readonly type: import("vue").PropType<(val: string | number) => string | number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, null, boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
-    readonly rate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3, boolean>;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }, {
+    THOUSANDTH: number;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly decimalSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ".", boolean>;
         readonly groupSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ",", boolean>;
-        readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, null, boolean>;
+        readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly formatter: {
             readonly type: import("vue").PropType<(val: string | number) => string | number>;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, null, boolean>;
-        readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-        readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-        readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-        readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
-        readonly rate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3, boolean>;
+        readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
+        readonly prefix: StringConstructor;
+        readonly suffix: StringConstructor;
+        readonly title: StringConstructor;
+        readonly valueStyle: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & {
         [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
@@ -52,32 +61,31 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
-    disposeValue: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+    displayValue: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly decimalSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ".", boolean>;
     readonly groupSeparator: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, ",", boolean>;
-    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, null, boolean>;
+    readonly precision: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly formatter: {
         readonly type: import("vue").PropType<(val: string | number) => string | number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, null, boolean>;
-    readonly prefix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-    readonly suffix: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, null, boolean>;
-    readonly title: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    readonly valueStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => {}, boolean>;
-    readonly rate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 3, boolean>;
+    readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
+    readonly prefix: StringConstructor;
+    readonly suffix: StringConstructor;
+    readonly title: StringConstructor;
+    readonly valueStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }>>, {
-    readonly title: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     readonly value: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    readonly prefix: string;
-    readonly suffix: string;
     readonly precision: number;
     readonly decimalSeparator: string;
     readonly groupSeparator: string;
-    readonly valueStyle: import("vue").StyleValue;
-    readonly rate: number;
 }>;
 export default _default;

package/es/components/statistic/src/statistic2.mjs

@@ -2,11 +2,12 @@ import { defineComponent, computed, openBlock, createElementBlock, normalizeClas
 import { isNil } from 'lodash-unified';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
-import { statisticProps, regroup } from './statistic.mjs';
+import { statisticProps, groupFormat } from './statistic.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { isFunction } from '@vue/shared';
 
+const THOUSANDTH = 3;
 const __default__ = defineComponent({
   name: "ElStatistic"
 });
@@ -16,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose }) {
     const props = __props;
     const ns = useNamespace("statistic");
-    const disposeValue = computed(() => {
+    const displayValue = computed(() => {
       if (isFunction(props.formatter)) {
         return props.formatter(props.value);
       } else if (isNil(props.value) || !/^(-|\+)?\d+(\.\d+)?$/.test(`${props.value}`)) {
@@ -27,12 +28,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           decimal = `${decimal || ""}${1 .toFixed(props.precision).replace(".", "").slice(1)}`;
           decimal = decimal.slice(0, props.precision);
         }
-        integer = regroup(integer, props.rate, props.groupSeparator);
+        integer = groupFormat(integer, THOUSANDTH, props.groupSeparator);
         return [integer, decimal].join(decimal ? props.decimalSeparator || "." : "");
       }
     });
     expose({
-      disposeValue
+      displayValue
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -61,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("span", {
             class: normalizeClass(unref(ns).e("number")),
             style: normalizeStyle(_ctx.valueStyle)
-          }, toDisplayString(unref(disposeValue)), 7),
+          }, toDisplayString(unref(displayValue)), 7),
           _ctx.$slots.suffix || _ctx.suffix ? (openBlock(), createElementBlock("div", {
             key: 1,
             class: normalizeClass(unref(ns).e("suffix"))