@sdata/web-vue 4.0.0 → 4.2.0

package/es/number-flow/style/index.scss

@@ -0,0 +1,93 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as theme;
+@use '@components/number-flow/style/token.scss' as *;
+
+$number-flow-prefix-cls: string.unquote('#{theme.$prefix}-number-flow');
+
+.#{$number-flow-prefix-cls} {
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+  direction: ltr;
+  white-space: nowrap;
+  isolation: isolate;
+
+  &-content,
+  &-part,
+  &-digit-track,
+  &-digit-value,
+  &-symbol {
+    display: inline-block;
+  }
+
+  &-content {
+    margin: calc(-1 * $number-flow-mask-height) calc(-1 * $number-flow-mask-width);
+    padding: $number-flow-mask-height $number-flow-mask-width;
+    overflow: hidden;
+  }
+
+  &-part {
+    position: relative;
+    vertical-align: bottom;
+  }
+
+  &-digit {
+    height: 1em;
+    overflow: hidden;
+  }
+
+  &-digit-track {
+    display: flex;
+    flex-direction: column;
+    height: 1em;
+    transform: translateY(calc(1em * var(--sd-number-flow-start)));
+  }
+
+  &-digit-value {
+    flex: 0 0 1em;
+    height: 1em;
+    line-height: 1;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &-prepared &-digit-track {
+    transition: none;
+  }
+
+  &-animating &-digit-track {
+    transform: translateY(calc(1em * var(--sd-number-flow-end)));
+    transition:
+      transform var(--sd-number-flow-spin-duration, var(--sd-number-flow-duration))
+        var(--sd-number-flow-spin-easing, var(--sd-number-flow-easing)),
+      opacity var(--sd-number-flow-opacity-duration) ease-out;
+  }
+
+  &-symbol {
+    white-space: pre;
+  }
+
+  &-will-change :is(&-content, &-part, &-digit-track, &-symbol) {
+    will-change: transform;
+  }
+
+  &-custom-prefix {
+    margin-right: $number-flow-gap;
+  }
+
+  &-custom-suffix {
+    margin-left: $number-flow-gap;
+  }
+}
+
+.#{$number-flow-prefix-cls}-group {
+  display: inline-flex;
+  gap: $number-flow-gap;
+  align-items: baseline;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{$number-flow-prefix-cls}-digit-track {
+    transition: none;
+  }
+}

package/es/number-flow/style/token.scss

@@ -0,0 +1,5 @@
+@use '@style/theme/index.scss' as global;
+
+$number-flow-gap: global.$spacing-2;
+$number-flow-mask-height: 0.25em;
+$number-flow-mask-width: 0.2em;

package/es/number-flow/types.d.ts

@@ -0,0 +1,46 @@
+import type { CSSProperties } from 'vue';
+export type NumberFlowValue = number | string;
+export type NumberFlowFormat = Omit<Intl.NumberFormatOptions, 'notation'> & {
+    notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
+};
+export type NumberFlowTrend = number | ((oldValue: number, value: number) => number);
+export type NumberFlowDigitOptions = {
+    max?: number;
+};
+export type NumberFlowDigits = Record<number, NumberFlowDigitOptions>;
+export interface NumberFlowDigitContext {
+    position: number;
+    length: number;
+    trend: number;
+    highestChangedPosition?: number;
+}
+export interface NumberFlowPluginContext {
+    value: number;
+    previousValue: number;
+    trend: number;
+}
+export interface NumberFlowPlugin {
+    onUpdate?(context: NumberFlowPluginContext): void;
+    getDelta?(value: number, previousValue: number, context: NumberFlowDigitContext): number | void;
+}
+export interface NumberFlowProps {
+    value: NumberFlowValue;
+    locales?: Intl.LocalesArgument;
+    format?: NumberFlowFormat;
+    prefix?: string;
+    suffix?: string;
+    trend?: NumberFlowTrend;
+    plugins?: NumberFlowPlugin[];
+    animated?: boolean;
+    transformTiming?: KeyframeAnimationOptions;
+    spinTiming?: KeyframeAnimationOptions;
+    opacityTiming?: KeyframeAnimationOptions;
+    respectMotionPreference?: boolean;
+    digits?: NumberFlowDigits;
+    willChange?: boolean;
+    nonce?: string;
+}
+export interface NumberFlowExposed {
+    el: HTMLElement | null;
+}
+export type NumberFlowStyle = CSSProperties & Record<`--${string}`, string | number>;

package/es/number-flow/use-can-animate.d.ts

@@ -0,0 +1,4 @@
+import { type MaybeRefOrGetter } from 'vue';
+export declare function useCanAnimate({ respectMotionPreference, }?: {
+    respectMotionPreference?: MaybeRefOrGetter<boolean>;
+}): import("vue").ComputedRef<boolean>;

package/es/number-flow/use-can-animate.js

@@ -0,0 +1,30 @@
+import { computed, onMounted, shallowRef, toValue, watchEffect } from "vue";
+//#region components/number-flow/use-can-animate.ts
+/**
+* SSR-safe composable that returns whether number-flow animations can run.
+* Respects `prefers-reduced-motion` and listens for changes.
+*/
+function useCanAnimate({ respectMotionPreference = true } = {}) {
+	const canAnimate = shallowRef(false);
+	const reducedMotion = shallowRef(false);
+	const mediaQuery = shallowRef();
+	onMounted(() => {
+		canAnimate.value = typeof window !== "undefined";
+		mediaQuery.value = window.matchMedia("(prefers-reduced-motion: reduce)");
+		reducedMotion.value = mediaQuery.value.matches;
+	});
+	watchEffect((onCleanup) => {
+		if (!toValue(respectMotionPreference)) return;
+		const onChange = ({ matches }) => {
+			reducedMotion.value = matches;
+		};
+		const query = mediaQuery.value;
+		query === null || query === void 0 || query.addEventListener("change", onChange);
+		onCleanup(() => {
+			query === null || query === void 0 || query.removeEventListener("change", onChange);
+		});
+	});
+	return computed(() => canAnimate.value && (!toValue(respectMotionPreference) || !reducedMotion.value));
+}
+//#endregion
+export { useCanAnimate };

package/es/rich-text-editor/index.d.ts

@@ -54,8 +54,8 @@ declare const RichTextEditor: {
     }, import("vue").PublicProps, {
         classNames: Partial<Record<import("./types").RichTextEditorSemanticType, string>>;
         autoSize: boolean | import("./types").RichTextEditorAutoSize;
-        styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
         plugins: readonly import("./types").RichTextEditorPlugin[];
+        styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
         transformers: readonly import("@lexical/markdown").Transformer[];
         history: boolean;
         historyDelay: number;
@@ -112,8 +112,8 @@ declare const RichTextEditor: {
     }, {}, {}, {}, {
         classNames: Partial<Record<import("./types").RichTextEditorSemanticType, string>>;
         autoSize: boolean | import("./types").RichTextEditorAutoSize;
-        styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
         plugins: readonly import("./types").RichTextEditorPlugin[];
+        styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
         transformers: readonly import("@lexical/markdown").Transformer[];
         history: boolean;
         historyDelay: number;
@@ -175,8 +175,8 @@ declare const RichTextEditor: {
 }, string, {
     classNames: Partial<Record<import("./types").RichTextEditorSemanticType, string>>;
     autoSize: boolean | import("./types").RichTextEditorAutoSize;
-    styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
     plugins: readonly import("./types").RichTextEditorPlugin[];
+    styles: Partial<Record<import("./types").RichTextEditorSemanticType, import("vue").CSSProperties>>;
     transformers: readonly import("@lexical/markdown").Transformer[];
     history: boolean;
     historyDelay: number;

package/es/rich-text-editor/rich-text-editor.vue.d.ts

@@ -58,8 +58,8 @@ declare const __VLS_base: import("vue").DefineComponent<RichTextEditorProps, {
 }>, {
     classNames: Partial<Record<import("./types").RichTextEditorSemanticType, string>>;
     autoSize: boolean | import("./types").RichTextEditorAutoSize;
-    styles: Partial<Record<import("./types").RichTextEditorSemanticType, CSSProperties>>;
     plugins: readonly import("./types").RichTextEditorPlugin[];
+    styles: Partial<Record<import("./types").RichTextEditorSemanticType, CSSProperties>>;
     transformers: readonly import("@lexical/markdown").Transformer[];
     history: boolean;
     historyDelay: number;

package/es/sd-vue.js

@@ -21,6 +21,7 @@ import Popover from "./popover/index.js";
 import avatar_group_default from "./avatar/avatar-group.js";
 import Avatar from "./avatar/index.js";
 import BackTop from "./back-top/index.js";
+import NumberFlow, { NumberFlowGroup } from "./number-flow/index.js";
 import Badge from "./badge/index.js";
 import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
 import Link from "./link/index.js";
@@ -74,6 +75,7 @@ import JsonForm from "./json-form/index.js";
 import Toolbar from "./toolbar/index.js";
 import Modal from "./modal/index.js";
 import BasicCrudTable from "./basic-crud-table/index.js";
+import BloomMenu from "./bloom-menu/index.js";
 import BorderBeam from "./border-beam/index.js";
 import dropdown_button_default from "./dropdown/dropdown-button.js";
 import dropdown_group_default from "./dropdown/dropdown-group.js";
@@ -218,6 +220,7 @@ var components = {
 	Modal,
 	ModelSelector,
 	Notification,
+	NumberFlow,
 	Popconfirm,
 	Progress,
 	QrCode,
@@ -237,6 +240,7 @@ var components = {
 	Anchor,
 	BackTop,
 	BorderBeam,
+	BloomMenu,
 	ConfigProvider,
 	ThemeProvider,
 	ResizeBox,
@@ -299,6 +303,7 @@ var SDVue = _objectSpread2(_objectSpread2({}, components), {}, {
 	SkeletonLine: line_default,
 	SkeletonShape: shape_default,
 	Countdown: countdown_default,
+	NumberFlowGroup,
 	Step: step_default,
 	Thead: table_thead_default,
 	Td: table_td_default,

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

@@ -21,6 +21,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     valueStyle: {
         type: PropType<CSSProperties>;
     };
@@ -44,6 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     valueStyle: {
         type: PropType<CSSProperties>;
     };
@@ -52,6 +60,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     value: number;
     start: boolean;
+    animation: boolean;
     format: string;
     now: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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,12 +88,16 @@
       "offset",
       "color",
       "status",
-      "count"
+      "count",
+      "animation"
     ]
   },
   "sd-basic-crud-table": {
     "attributes": []
   },
+  "sd-bloom-menu": {
+    "attributes": []
+  },
   "sd-border-beam": {
     "attributes": []
   },
@@ -887,6 +891,12 @@
       "reset-query-on-close"
     ]
   },
+  "sd-number-flow-group": {
+    "attributes": []
+  },
+  "sd-number-flow": {
+    "attributes": []
+  },
   "sd-page-header": {
     "attributes": [
       "title",
@@ -1162,6 +1172,7 @@
       "now",
       "format",
       "start",
+      "animation",
       "value-style"
     ]
   },