@sdata/web-vue 4.0.0 → 4.1.0

package/es/statistic/countdown.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import NumberFlow from "../number-flow/index.js";
 import { getDateString } from "./utils.js";
-import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, watch } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toRefs, unref, watch } from "vue";
 import originDayjs from "dayjs";
 //#region components/statistic/countdown.vue?vue&type=script&setup=true&lang.ts
 var countdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Countdown" }), {}, {
@@ -45,6 +46,14 @@ var countdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			default: true
 		},
 		/**
+		* @zh 是否开启数字切换动画
+		* @en Whether to enable the number transition animation
+		*/
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		/**
 		* @zh 自定义显示值的样式
 		* @en Custom value style
 		* @version 2.32.0
@@ -63,6 +72,10 @@ var countdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const prefixCls = getPrefixCls("statistic");
 		const { start, value, now, format } = toRefs(props);
 		const displayValue = ref(getDateString(Math.max(originDayjs(props.value).diff(originDayjs(props.now), "millisecond"), 0), props.format));
+		const displayParts = computed(() => displayValue.value.split(/(\d+)/).flatMap((value) => value ? [{
+			type: /^\d+$/.test(value) ? "number" : "text",
+			value
+		}] : []));
 		watch([
 			value,
 			now,
@@ -105,7 +118,21 @@ var countdown_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-content`) }, [createElementVNode("div", {
 				class: normalizeClass(`${unref(prefixCls)}-value`),
 				style: normalizeStyle(__props.valueStyle)
-			}, toDisplayString(displayValue.value), 7)], 2)], 2);
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayParts.value, (part, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: `${part.type}-${index}` }, [part.type === "number" ? (openBlock(), createBlock(unref(NumberFlow), {
+					key: 0,
+					value: Number(part.value),
+					animated: __props.animation,
+					format: {
+						minimumIntegerDigits: part.value.length,
+						useGrouping: false
+					}
+				}, null, 8, [
+					"value",
+					"animated",
+					"format"
+				])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.value), 1)], 64))], 64);
+			}), 128))], 6)], 2)], 2);
 		};
 	}
 }));

package/es/statistic/index.d.ts

@@ -191,6 +191,10 @@ declare const Statistic: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            animation: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             valueStyle: {
                 type: import("vue").PropType<import("vue").CSSProperties>;
             };
@@ -201,6 +205,7 @@ declare const Statistic: {
         }, import("vue").PublicProps, {
             value: number;
             start: boolean;
+            animation: boolean;
             format: string;
             now: number;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -228,6 +233,10 @@ declare const Statistic: {
                 type: BooleanConstructor;
                 default: boolean;
             };
+            animation: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             valueStyle: {
                 type: import("vue").PropType<import("vue").CSSProperties>;
             };
@@ -236,6 +245,7 @@ declare const Statistic: {
         }>, {}, {}, {}, {}, {
             value: number;
             start: boolean;
+            animation: boolean;
             format: string;
             now: number;
         }>;
@@ -260,6 +270,10 @@ declare const Statistic: {
             type: BooleanConstructor;
             default: boolean;
         };
+        animation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         valueStyle: {
             type: import("vue").PropType<import("vue").CSSProperties>;
         };
@@ -270,6 +284,7 @@ declare const Statistic: {
     }, string, {
         value: number;
         start: boolean;
+        animation: boolean;
         format: string;
         now: number;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

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

@@ -1,13 +1,13 @@
 import { CSSProperties, PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_12: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_1) => any;
 } & {
     prefix?: (props: typeof __VLS_3) => any;
 } & {
-    suffix?: (props: typeof __VLS_5) => any;
+    suffix?: (props: typeof __VLS_10) => any;
 } & {
-    extra?: (props: typeof __VLS_7) => any;
+    extra?: (props: typeof __VLS_12) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: StringConstructor;

package/es/statistic/statistic.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber, isUndefined } from "../_utils/is.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, toDisplayString, toRefs, unref, watch } from "vue";
-import BTween from "b-tween";
-import NP from "number-precision";
+import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
+import NumberFlow from "../number-flow/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, renderSlot, shallowRef, toDisplayString, unref, watch } from "vue";
 import originDayjs from "dayjs";
 //#region components/statistic/statistic.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { key: 0 };
@@ -68,7 +68,7 @@ var statistic_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		*/
 		animation: {
 			type: Boolean,
-			default: false
+			default: true
 		},
 		/**
 		* @zh 动画的过度时间
@@ -100,7 +100,6 @@ var statistic_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		valueStyle: { type: Object }
 	},
 	setup(__props) {
-		var _props$valueFrom;
 		const props = __props;
 		/**
 		* @zh 标题
@@ -123,63 +122,25 @@ var statistic_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		* @slot suffix
 		*/
 		const prefixCls = getPrefixCls("statistic");
-		const numberValue = computed(() => {
-			if (isNumber(props.value)) return props.value;
-			return 0;
-		});
-		const innerValue = ref((_props$valueFrom = props.valueFrom) !== null && _props$valueFrom !== void 0 ? _props$valueFrom : props.value);
-		const tween = ref(null);
-		const { value } = toRefs(props);
 		const showPlaceholder = computed(() => isUndefined(props.value));
-		const animation = (from = ((_props$valueFrom2) => (_props$valueFrom2 = props.valueFrom) !== null && _props$valueFrom2 !== void 0 ? _props$valueFrom2 : 0)(), to = numberValue.value) => {
-			if (from !== to) {
-				var _tween$value;
-				tween.value = new BTween({
-					from: { value: from },
-					to: { value: to },
-					duration: props.animationDuration,
-					easing: "quartOut",
-					onUpdate: (keys) => {
-						innerValue.value = keys.value;
-					},
-					onFinish: () => {
-						innerValue.value = to;
-					}
-				});
-				(_tween$value = tween.value) === null || _tween$value === void 0 || _tween$value.start();
-			}
-		};
-		const formatValue = computed(() => {
-			let _value = innerValue.value;
-			if (isNumber(_value)) {
-				if (isNumber(props.precision)) _value = NP.round(_value, props.precision).toFixed(props.precision);
-				const splitValue = String(_value).split(".");
-				return {
-					isNumber: true,
-					integer: props.showGroupSeparator ? Number(splitValue[0]).toLocaleString("en-US") : splitValue[0],
-					decimal: splitValue[1]
-				};
+		const displayValue = shallowRef(props.animation && props.valueFrom !== void 0 ? props.valueFrom : props.value);
+		const numberFormat = computed(() => ({
+			minimumFractionDigits: props.precision,
+			maximumFractionDigits: props.precision,
+			useGrouping: props.showGroupSeparator
+		}));
+		const formattedDateValue = computed(() => props.format ? originDayjs(displayValue.value).format(props.format) : displayValue.value);
+		onMounted(_asyncToGenerator(function* () {
+			if (props.animation && props.start && props.valueFrom !== void 0) {
+				yield nextTick();
+				displayValue.value = props.value;
 			}
-			if (props.format) _value = originDayjs(_value).format(props.format);
-			return {
-				isNumber: false,
-				value: _value
-			};
-		});
-		onMounted(() => {
-			if (props.animation && props.start) animation();
-		});
+		}));
 		watch(() => props.start, (value) => {
-			if (value && props.animation && !tween.value) animation();
+			if (value) displayValue.value = props.value;
 		});
-		watch(value, (val) => {
-			if (tween.value) {
-				var _tween$value$stop, _tween$value2;
-				(_tween$value$stop = (_tween$value2 = tween.value).stop) === null || _tween$value$stop === void 0 || _tween$value$stop.call(_tween$value2);
-				tween.value = null;
-			}
-			innerValue.value = val;
-			if (props.animation && props.start) animation();
+		watch(() => props.value, (value) => {
+			displayValue.value = value;
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(prefixCls)) }, [__props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
@@ -193,10 +154,18 @@ var statistic_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-prefix`)
 				}, [renderSlot(_ctx.$slots, "prefix")], 2)) : createCommentVNode("", true),
-				formatValue.value.isNumber ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-value-integer`) }, toDisplayString(formatValue.value.integer), 3), formatValue.value.decimal ? (openBlock(), createElementBlock("span", {
-					key: 0,
-					class: normalizeClass(`${unref(prefixCls)}-value-decimal`)
-				}, " ." + toDisplayString(formatValue.value.decimal), 3)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(formatValue.value.value), 1)], 64)),
+				unref(isNumber)(displayValue.value) ? (openBlock(), createBlock(unref(NumberFlow), {
+					key: 1,
+					value: displayValue.value,
+					animated: __props.animation,
+					format: numberFormat.value,
+					"transform-timing": { duration: __props.animationDuration }
+				}, null, 8, [
+					"value",
+					"animated",
+					"format",
+					"transform-timing"
+				])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(formattedDateValue.value), 1)], 64)),
 				_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", {
 					key: 3,
 					class: normalizeClass(`${unref(prefixCls)}-suffix`)

package/es/statistic/style/index.css

@@ -35,6 +35,9 @@
   font-size: inherit;
   white-space: nowrap;
 }
+.sd-statistic-content .sd-statistic-value .sd-number-flow-fraction {
+  font-size: inherit;
+}
 .sd-statistic-content .sd-statistic-value-decimal {
   display: inline-block;
   font-size: inherit;

package/es/statistic/style/index.scss

@@ -3,6 +3,7 @@
 @use '@components/statistic/style/token.scss' as *;
 
 $statistic-prefix-cls: string.unquote('#{theme.$prefix}-statistic');
+$number-flow-prefix-cls: string.unquote('#{theme.$prefix}-number-flow');
 
 .#{$statistic-prefix-cls} {
   display: inline-block;
@@ -27,6 +28,10 @@ $statistic-prefix-cls: string.unquote('#{theme.$prefix}-statistic');
         white-space: nowrap;
       }
 
+      .#{$number-flow-prefix-cls}-fraction {
+        font-size: $statistic-font-decimal-size;
+      }
+
       &-decimal {
         display: inline-block;
         font-size: $statistic-font-decimal-size;

package/json/vetur-attributes.json

@@ -200,6 +200,10 @@
     "description": "Number to show in badge",
     "type": "number"
   },
+  "sd-badge/animation": {
+    "description": "Whether to enable the number transition animation",
+    "type": "boolean"
+  },
   "sd-breadcrumb-item/separator": {
     "description": "Delimiter text"
   },
@@ -2507,6 +2511,10 @@
     "description": "Whether to start the countdown",
     "type": "boolean"
   },
+  "sd-countdown/animation": {
+    "description": "Whether to enable the number transition animation",
+    "type": "boolean"
+  },
   "sd-countdown/value-style": {
     "description": "Custom value style"
   },

package/json/vetur-tags.json

@@ -88,7 +88,8 @@
       "offset",
       "color",
       "status",
-      "count"
+      "count",
+      "animation"
     ]
   },
   "sd-basic-crud-table": {
@@ -887,6 +888,12 @@
       "reset-query-on-close"
     ]
   },
+  "sd-number-flow-group": {
+    "attributes": []
+  },
+  "sd-number-flow": {
+    "attributes": []
+  },
   "sd-page-header": {
     "attributes": [
       "title",
@@ -1162,6 +1169,7 @@
       "now",
       "format",
       "start",
+      "animation",
       "value-style"
     ]
   },

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.30.0",
+  "version": "4.0.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -493,6 +493,14 @@
                 "type": "number",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "animation",
+              "description": "Whether to enable the number transition animation",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -4700,6 +4708,18 @@
           ],
           "slots": []
         },
+        {
+          "name": "sd-number-flow-group",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
+        {
+          "name": "sd-number-flow",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "sd-page-header",
           "attributes": [
@@ -6230,6 +6250,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "animation",
+              "description": "Whether to enable the number transition animation",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "value-style",
               "description": "Custom value style",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",