@element-plus/nightly 0.0.20221206 → 0.0.20221208

package/lib/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/lib/components/statistic/src/countdown2.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var lodashUnified = require('lodash-unified');
 require('../../../hooks/index.js');
 require('../../../utils/index.js');
 var countdown = require('./countdown.js');
@@ -21,11 +20,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: countdown.countdownEmits,
   setup(__props, { expose, emit }) {
     const props = __props;
-    vue.onBeforeUnmount(() => {
-      stopTimer();
-    });
     const ns = index.useNamespace("statistic");
-    const disposeValue = vue.ref("");
+    const displayValue = vue.ref("");
     let timer;
     const getTime = (val) => {
       return new Date(val).getTime();
@@ -38,19 +34,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const startTimer = () => {
       const { value, format } = props;
-      if (lodashUnified.isNil(value)) {
-        disposeValue.value = "";
-        return;
-      }
       const timestamp = getTime(core.isNumber(value) ? value : value.valueOf());
+      displayValue.value = countdown.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 = countdown.formatTimeStr(format, diff, value);
+        displayValue.value = countdown.formatTimeStr(format, diff);
       }, REFRESH_INTERVAL);
     };
     vue.watch(() => [props.value, props.format], () => {
@@ -59,8 +53,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     }, {
       immediate: true
     });
+    vue.onBeforeUnmount(() => {
+      stopTimer();
+    });
     expose({
-      disposeValue
+      displayValue
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -90,17 +87,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createTextVNode(vue.toDisplayString(_ctx.prefix), 1)
             ])
           ], 2)) : vue.createCommentVNode("v-if", true),
-          _ctx.value ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
+          vue.createElementVNode("span", {
             class: vue.normalizeClass(vue.unref(ns).e("number")),
             style: vue.normalizeStyle(_ctx.valueStyle)
-          }, [
-            vue.renderSlot(_ctx.$slots, "formatter", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(disposeValue.value), 1)
-            ])
-          ], 6)) : vue.createCommentVNode("v-if", true),
+          }, vue.toDisplayString(displayValue.value), 7),
           !!_ctx.$slots.title || _ctx.suffix ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 2,
+            key: 1,
             class: vue.normalizeClass(vue.unref(ns).e("suffix"))
           }, [
             vue.renderSlot(_ctx.$slots, "suffix", {}, () => [

package/lib/components/statistic/src/countdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown2.js","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":["onBeforeUnmount","useNamespace","ref","isNil","isNumber","formatTimeStr","watch"],"mappings":";;;;;;;;;;;;;;uCAmCc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR;;;;;;;AACA,IAAAA,mBAAA,CAAgB,MAAM;AACpB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAGD,IAAM,MAAA,EAAA,GAAKC,mBAAa,WAAW,CAAA,CAAA;AACnC,IAAM,MAAA,YAAA,GAAeC,QAAI,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,IAAAC,mBAAA,CAAM,KAAK,CAAG,EAAA;AAChB,QAAA,YAAA,CAAa,KAAQ,GAAA,EAAA,CAAA;AACrB,QAAA,OAAA;AAAA,OACF;AACA,MAAM,MAAA,SAAA,GAAY,QAAQC,aAAS,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,GAAAC,uBAAA,CAAc,MAAQ,EAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAAA,SACrD,gBAAgB,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAAC,SAAA,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.js","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":["useNamespace","ref","isNumber","formatTimeStr","watch","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;uCAkCc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR;;;;;;;AAIA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AACnC,IAAM,MAAA,YAAA,GAAeC,QAAI,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,QAAQC,aAAS,CAAA,KAAK,IAAI,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AACnE,MAAA,YAAA,CAAa,QAAQC,uBAAc,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,GAAQA,uBAAc,CAAA,MAAA,EAAQ,IAAI,CAAA,CAAA;AAAA,SAC9C,gBAAgB,CAAA,CAAA;AAAA,KACrB,CAAA;AAEA,IAAAC,SAAA,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,IAAAC,mBAAA,CAAgB,MAAM;AACpB,MAAU,SAAA,EAAA,CAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAIX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/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/lib/components/statistic/src/statistic.js

@@ -16,41 +16,27 @@ const statisticProps = runtime.buildProps({
   },
   precision: {
     type: Number,
-    default: null
+    default: 0
   },
   formatter: {
     type: runtime.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: runtime.definePropType([String, Object]),
-    default: () => ({})
-  },
-  rate: {
-    type: Number,
-    default: 3
+    type: runtime.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);
 };
 
-exports.regroup = regroup;
+exports.groupFormat = groupFormat;
 exports.statisticProps = statisticProps;
 //# sourceMappingURL=statistic.js.map

package/lib/components/statistic/src/statistic.js.map

@@ -1 +1 @@
-{"version":3,"file":"statistic.js","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":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,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,EAAEC,sBAAc,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,EAAEA,sBAAc,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.js","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":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,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,EAAEC,sBAAc,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,EAAEA,sBAAc,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/lib/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/lib/components/statistic/src/statistic2.js

@@ -11,6 +11,7 @@ var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper
 var index = require('../../../hooks/use-namespace/index.js');
 var shared = require('@vue/shared');
 
+const THOUSANDTH = 3;
 const __default__ = vue.defineComponent({
   name: "ElStatistic"
 });
@@ -20,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { expose }) {
     const props = __props;
     const ns = index.useNamespace("statistic");
-    const disposeValue = vue.computed(() => {
+    const displayValue = vue.computed(() => {
       if (shared.isFunction(props.formatter)) {
         return props.formatter(props.value);
       } else if (lodashUnified.isNil(props.value) || !/^(-|\+)?\d+(\.\d+)?$/.test(`${props.value}`)) {
@@ -31,12 +32,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           decimal = `${decimal || ""}${1 .toFixed(props.precision).replace(".", "").slice(1)}`;
           decimal = decimal.slice(0, props.precision);
         }
-        integer = statistic.regroup(integer, props.rate, props.groupSeparator);
+        integer = statistic.groupFormat(integer, THOUSANDTH, props.groupSeparator);
         return [integer, decimal].join(decimal ? props.decimalSeparator || "." : "");
       }
     });
     expose({
-      disposeValue
+      displayValue
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -65,7 +66,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           vue.createElementVNode("span", {
             class: vue.normalizeClass(vue.unref(ns).e("number")),
             style: vue.normalizeStyle(_ctx.valueStyle)
-          }, vue.toDisplayString(vue.unref(disposeValue)), 7),
+          }, vue.toDisplayString(vue.unref(displayValue)), 7),
           _ctx.$slots.suffix || _ctx.suffix ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(vue.unref(ns).e("suffix"))

package/lib/components/statistic/src/statistic2.js.map

@@ -1 +1 @@
-{"version":3,"file":"statistic2.js","sources":["../../../../../../packages/components/statistic/src/statistic.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div v-if=\"$slots.title || title\" ref=\"title\" :class=\"ns.e('head')\">\n      <slot name=\"title\">\n        {{ title }}\n      </slot>\n    </div>\n    <div :class=\"ns.e('content')\">\n      <div v-if=\"$slots.prefix || prefix\" :class=\"ns.e('prefix')\">\n        <slot name=\"prefix\">\n          <span>{{ prefix }}</span>\n        </slot>\n      </div>\n      <span :class=\"ns.e('number')\" :style=\"valueStyle\">\n        {{ disposeValue }}\n      </span>\n      <div v-if=\"$slots.suffix || suffix\" :class=\"ns.e('suffix')\">\n        <slot name=\"suffix\">\n          <span>{{ suffix }}</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction } from '@element-plus/utils'\nimport { regroup, statisticProps } from './statistic'\n\ndefineOptions({\n  name: 'ElStatistic',\n})\n\nconst props = defineProps(statisticProps)\nconst ns = useNamespace('statistic')\n\nconst disposeValue = computed(() => {\n  if (isFunction(props.formatter)) {\n    return props.formatter(props.value)\n  } else if (\n    isNil(props.value) ||\n    !/^(-|\\+)?\\d+(\\.\\d+)?$/.test(`${props.value}`)\n  ) {\n    return props.value\n  } else {\n    let [integer, decimal] = `${props.value}`.split('.')\n    if (!isNil(props.precision)) {\n      decimal = `${decimal || ''}${(1)\n        .toFixed(props.precision)\n        .replace('.', '')\n        .slice(1)}`\n      decimal = decimal.slice(0, props.precision)\n    }\n    integer = regroup(integer, props.rate, props.groupSeparator)\n    return [integer, decimal].join(decimal ? props.decimalSeparator || '.' : '')\n  }\n})\n\ndefineExpose({\n  disposeValue,\n})\n</script>\n"],"names":["useNamespace","computed","isFunction","isNil","regroup"],"mappings":";;;;;;;;;;;;;uCA+Bc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAI,IAAAC,iBAAA,CAAW,KAAM,CAAA,SAAS,CAAG,EAAA;AAC/B,QAAO,OAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,OACpC,MAAA,IACEC,mBAAM,CAAA,KAAA,CAAM,KAAK,CAAA,IACjB,CAAC,sBAAA,CAAuB,IAAK,CAAA,CAAA,EAAG,KAAM,CAAA,KAAA,CAAA,CAAO,CAC7C,EAAA;AACA,QAAA,OAAO,KAAM,CAAA,KAAA,CAAA;AAAA,OACR,MAAA;AACL,QAAA,IAAI,CAAC,OAAS,EAAA,OAAA,CAAA,GAAW,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAQ,MAAM,GAAG,CAAA,CAAA;AACnD,QAAA,IAAI,CAACA,mBAAA,CAAM,KAAM,CAAA,SAAS,CAAG,EAAA;AAC3B,UAAA,OAAA,GAAU,CAAG,EAAA,OAAA,IAAW,EAAM,CAAA,EAAA,CAAA,EAC3B,OAAQ,CAAA,KAAA,CAAM,SAAS,CAAA,CACvB,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA,CACf,MAAM,CAAC,CAAA,CAAA,CAAA,CAAA;AACV,UAAA,OAAA,GAAU,OAAQ,CAAA,KAAA,CAAM,CAAG,EAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AAAA,SAC5C;AACA,QAAA,OAAA,GAAUC,iBAAQ,CAAA,OAAA,EAAS,KAAM,CAAA,IAAA,EAAM,MAAM,cAAc,CAAA,CAAA;AAC3D,QAAO,OAAA,CAAC,SAAS,OAAO,CAAA,CAAE,KAAK,OAAU,GAAA,KAAA,CAAM,gBAAoB,IAAA,GAAA,GAAM,EAAE,CAAA,CAAA;AAAA,OAC7E;AAAA,KACD,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MACX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"statistic2.js","sources":["../../../../../../packages/components/statistic/src/statistic.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div v-if=\"$slots.title || title\" ref=\"title\" :class=\"ns.e('head')\">\n      <slot name=\"title\">\n        {{ title }}\n      </slot>\n    </div>\n    <div :class=\"ns.e('content')\">\n      <div v-if=\"$slots.prefix || prefix\" :class=\"ns.e('prefix')\">\n        <slot name=\"prefix\">\n          <span>{{ prefix }}</span>\n        </slot>\n      </div>\n      <span :class=\"ns.e('number')\" :style=\"valueStyle\">\n        {{ displayValue }}\n      </span>\n      <div v-if=\"$slots.suffix || suffix\" :class=\"ns.e('suffix')\">\n        <slot name=\"suffix\">\n          <span>{{ suffix }}</span>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isFunction } from '@element-plus/utils'\nimport { groupFormat, statisticProps } from './statistic'\n\ndefineOptions({\n  name: 'ElStatistic',\n})\n\nconst THOUSANDTH = 3\n\nconst props = defineProps(statisticProps)\nconst ns = useNamespace('statistic')\n\nconst displayValue = computed(() => {\n  if (isFunction(props.formatter)) {\n    return props.formatter(props.value)\n  } else if (\n    isNil(props.value) ||\n    !/^(-|\\+)?\\d+(\\.\\d+)?$/.test(`${props.value}`)\n  ) {\n    return props.value\n  } else {\n    let [integer, decimal] = `${props.value}`.split('.')\n    if (!isNil(props.precision)) {\n      decimal = `${decimal || ''}${(1)\n        .toFixed(props.precision)\n        .replace('.', '')\n        .slice(1)}`\n      decimal = decimal.slice(0, props.precision)\n    }\n    integer = groupFormat(integer, THOUSANDTH, props.groupSeparator)\n    return [integer, decimal].join(decimal ? props.decimalSeparator || '.' : '')\n  }\n})\n\ndefineExpose({\n  /**\n   * @description Current display value\n   */\n  displayValue,\n})\n</script>\n"],"names":["useNamespace","computed","isFunction","isNil","groupFormat"],"mappings":";;;;;;;;;;;;;;uCA+Bc,CAAA;AAAA,EACZ,IAAM,EAAA,aAAA;AACR;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAI,IAAAC,iBAAA,CAAW,KAAM,CAAA,SAAS,CAAG,EAAA;AAC/B,QAAO,OAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,OACpC,MAAA,IACEC,mBAAM,CAAA,KAAA,CAAM,KAAK,CAAA,IACjB,CAAC,sBAAA,CAAuB,IAAK,CAAA,CAAA,EAAG,KAAM,CAAA,KAAA,CAAA,CAAO,CAC7C,EAAA;AACA,QAAA,OAAO,KAAM,CAAA,KAAA,CAAA;AAAA,OACR,MAAA;AACL,QAAA,IAAI,CAAC,OAAS,EAAA,OAAA,CAAA,GAAW,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAQ,MAAM,GAAG,CAAA,CAAA;AACnD,QAAA,IAAI,CAACA,mBAAA,CAAM,KAAM,CAAA,SAAS,CAAG,EAAA;AAC3B,UAAA,OAAA,GAAU,CAAG,EAAA,OAAA,IAAW,EAAM,CAAA,EAAA,CAAA,EAC3B,OAAQ,CAAA,KAAA,CAAM,SAAS,CAAA,CACvB,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA,CACf,MAAM,CAAC,CAAA,CAAA,CAAA,CAAA;AACV,UAAA,OAAA,GAAU,OAAQ,CAAA,KAAA,CAAM,CAAG,EAAA,KAAA,CAAM,SAAS,CAAA,CAAA;AAAA,SAC5C;AACA,QAAA,OAAA,GAAUC,qBAAY,CAAA,OAAA,EAAS,UAAY,EAAA,KAAA,CAAM,cAAc,CAAA,CAAA;AAC/D,QAAO,OAAA,CAAC,SAAS,OAAO,CAAA,CAAE,KAAK,OAAU,GAAA,KAAA,CAAM,gBAAoB,IAAA,GAAA,GAAM,EAAE,CAAA,CAAA;AAAA,OAC7E;AAAA,KACD,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAIX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.js

@@ -566,7 +566,7 @@ exports.virtualizedGridProps = props$1.virtualizedGridProps;
 exports.virtualizedListProps = props$1.virtualizedListProps;
 exports.virtualizedProps = props$1.virtualizedProps;
 exports.virtualizedScrollbarProps = props$1.virtualizedScrollbarProps;
-exports.regroup = statistic.regroup;
+exports.groupFormat = statistic.groupFormat;
 exports.statisticProps = statistic.statisticProps;
 exports.countdownEmits = countdown.countdownEmits;
 exports.countdownProps = countdown.countdownProps;

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20221206";
+export declare const version = "0.0.20221208";

package/lib/version.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const version = "0.0.20221206";
+const version = "0.0.20221208";
 
 exports.version = version;
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20221206'\n"],"names":[],"mappings":";;;;AAAY,MAAC,OAAO,GAAG;;;;"}
+{"version":3,"file":"version.js","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20221208'\n"],"names":[],"mappings":";;;;AAAY,MAAC,OAAO,GAAG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@element-plus/nightly",
-  "version": "0.0.20221206",
+  "version": "0.0.20221208",
   "description": "A Component Library for Vue 3",
   "keywords": [
     "element-plus",
@@ -85,5 +85,5 @@
     "not ie 11",
     "not op_mini all"
   ],
-  "gitHead": "9f4bddc4d374e70d4a21a6e4dd11f17ec40970fa"
+  "gitHead": "d3518f869425dbfc27ad7359128c27c82c423d88"
 }

package/theme-chalk/el-color-picker.css

@@ -1 +1 @@
-.el-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px var(--el-color-primary)}.el-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px;float:right}.el-color-hue-slider__bar{position:relative;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--el-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.el-color-svpanel__black{background:linear-gradient(to top,#000,rgba(0,0,0,0))}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-image:linear-gradient(45deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(to right,rgba(255,255,255,0) 0,var(--el-bg-color) 100%);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--el-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:12px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--large{height:40px}.el-color-picker--large .el-color-picker__trigger{height:40px;width:40px}.el-color-picker--large .el-color-picker__mask{height:38px;width:38px}.el-color-picker--small{height:24px}.el-color-picker--small .el-color-picker__trigger{height:24px;width:24px}.el-color-picker--small .el-color-picker__mask{height:22px;width:22px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{transform:scale(.8)}.el-color-picker__mask{height:38px;width:38px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.el-color-picker__trigger{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;height:32px;width:32px;padding:4px;border:1px solid var(--el-border-color);border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid var(--el-text-color-secondary);border-radius:var(--el-border-radius-small);width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:linear-gradient(45deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.el-color-picker__color-inner{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%}.el-color-picker .el-color-picker__empty{font-size:12px;color:var(--el-text-color-secondary)}.el-color-picker .el-color-picker__icon{display:inline-flex;justify-content:center;align-items:center;color:#fff;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light)}.el-color-picker__panel.el-popper{border:1px solid var(--el-border-color-lighter)}.el-color-picker,.el-color-picker__panel{--el-color-picker-alpha-bg-a:#ccc;--el-color-picker-alpha-bg-b:transparent}.dark .el-color-picker,.dark .el-color-picker__panel{--el-color-picker-alpha-bg-a:#333333}
+.el-color-predefine{display:flex;font-size:12px;margin-top:8px;width:280px}.el-color-predefine__colors{display:flex;flex:1;flex-wrap:wrap}.el-color-predefine__color-selector{margin:0 0 8px 8px;width:20px;height:20px;border-radius:4px;cursor:pointer}.el-color-predefine__color-selector:nth-child(10n+1){margin-left:0}.el-color-predefine__color-selector.selected{box-shadow:0 0 3px 2px var(--el-color-primary)}.el-color-predefine__color-selector>div{display:flex;height:100%;border-radius:3px}.el-color-predefine__color-selector.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px;float:right}.el-color-hue-slider__bar{position:relative;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--el-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(to bottom,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}.el-color-svpanel__black{background:linear-gradient(to top,#000,rgba(0,0,0,0))}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-image:linear-gradient(45deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(to right,rgba(255,255,255,0) 0,var(--el-bg-color) 100%);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid var(--el-border-color-lighter);box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper::after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:12px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#000;width:160px}.el-color-picker{display:inline-block;position:relative;line-height:normal;outline:0}.el-color-picker:hover:not(.is-disabled) .el-color-picker__trigger{border:1px solid var(--el-border-color-hover)}.el-color-picker:focus-visible:not(.is-disabled) .el-color-picker__trigger{outline:2px solid var(--el-color-primary);outline-offset:1px}.el-color-picker.is-disabled .el-color-picker__trigger{cursor:not-allowed}.el-color-picker--large{height:40px}.el-color-picker--large .el-color-picker__trigger{height:40px;width:40px}.el-color-picker--large .el-color-picker__mask{height:38px;width:38px}.el-color-picker--small{height:24px}.el-color-picker--small .el-color-picker__trigger{height:24px;width:24px}.el-color-picker--small .el-color-picker__mask{height:22px;width:22px}.el-color-picker--small .el-color-picker__empty,.el-color-picker--small .el-color-picker__icon{transform:scale(.8)}.el-color-picker__mask{height:30px;width:30px;border-radius:4px;position:absolute;top:1px;left:1px;z-index:1;cursor:not-allowed;background-color:rgba(255,255,255,.7)}.el-color-picker__trigger{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;height:32px;width:32px;padding:4px;border:1px solid var(--el-border-color);border-radius:4px;font-size:0;position:relative;cursor:pointer}.el-color-picker__color{position:relative;display:block;box-sizing:border-box;border:1px solid var(--el-text-color-secondary);border-radius:var(--el-border-radius-small);width:100%;height:100%;text-align:center}.el-color-picker__color.is-alpha{background-image:linear-gradient(45deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-a) 25%,var(--el-color-picker-alpha-bg-b) 25%),linear-gradient(45deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%),linear-gradient(135deg,var(--el-color-picker-alpha-bg-b) 75%,var(--el-color-picker-alpha-bg-a) 75%);background-size:12px 12px;background-position:0 0,6px 0,6px -6px,0 6px}.el-color-picker__color-inner{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%}.el-color-picker .el-color-picker__empty{font-size:12px;color:var(--el-text-color-secondary)}.el-color-picker .el-color-picker__icon{display:inline-flex;justify-content:center;align-items:center;color:#fff;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;box-sizing:content-box;background-color:#fff;border-radius:var(--el-border-radius-base);box-shadow:var(--el-box-shadow-light)}.el-color-picker__panel.el-popper{border:1px solid var(--el-border-color-lighter)}.el-color-picker,.el-color-picker__panel{--el-color-picker-alpha-bg-a:#ccc;--el-color-picker-alpha-bg-b:transparent}.dark .el-color-picker,.dark .el-color-picker__panel{--el-color-picker-alpha-bg-a:#333333}