@sdata/web-vue 4.0.0 → 4.2.0

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

@@ -0,0 +1,15 @@
+import type { NumberFlowValue } from './types';
+export type NumberFlowPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
+export interface NumberFlowPart {
+    key: string;
+    type: NumberFlowPartType;
+    value: string;
+    digit?: number;
+    position?: number;
+}
+export interface NumberFlowData {
+    parts: NumberFlowPart[];
+    value: number;
+    valueAsString: string;
+}
+export declare function formatNumberFlow(value: NumberFlowValue, formatter: Intl.NumberFormat, prefix?: string, suffix?: string): NumberFlowData;

package/es/number-flow/formatter.js

@@ -0,0 +1,54 @@
+//#region components/number-flow/formatter.ts
+function formatNumberFlow(value, formatter, prefix, suffix) {
+	const numericValue = typeof value === "string" ? Number.parseFloat(value) : value;
+	const rawParts = formatter.formatToParts(numericValue);
+	const integerDigits = rawParts.filter((part) => part.type === "integer").reduce((count, part) => count + part.value.length, 0);
+	const counts = /* @__PURE__ */ new Map();
+	let integerPosition = integerDigits - 1;
+	let fractionPosition = -1;
+	const nextKey = (type) => {
+		var _counts$get;
+		const index = (_counts$get = counts.get(type)) !== null && _counts$get !== void 0 ? _counts$get : 0;
+		counts.set(type, index + 1);
+		return `${type}:${index}`;
+	};
+	const parts = [];
+	if (prefix) parts.push({
+		key: nextKey("prefix"),
+		type: "prefix",
+		value: prefix
+	});
+	for (const part of rawParts) {
+		const type = part.type === "minusSign" || part.type === "plusSign" ? "sign" : part.type;
+		if (type === "integer" || type === "fraction") {
+			for (const character of part.value) {
+				const position = type === "integer" ? integerPosition-- : fractionPosition--;
+				parts.push({
+					key: `${type}:${position}`,
+					type,
+					value: character,
+					digit: Number(character),
+					position
+				});
+			}
+			continue;
+		}
+		parts.push({
+			key: nextKey(type),
+			type,
+			value: part.value
+		});
+	}
+	if (suffix) parts.push({
+		key: nextKey("suffix"),
+		type: "suffix",
+		value: suffix
+	});
+	return {
+		parts,
+		value: numericValue,
+		valueAsString: `${prefix !== null && prefix !== void 0 ? prefix : ""}${formatter.format(numericValue)}${suffix !== null && suffix !== void 0 ? suffix : ""}`
+	};
+}
+//#endregion
+export { formatNumberFlow };

package/es/number-flow/group-key.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { NumberFlowValue } from './types';
+export interface GroupChild {
+    value: ComputedRef<NumberFlowValue>;
+    prepare: () => number | undefined;
+    commit: (version: number) => boolean;
+    start: (version: number) => void;
+}
+export declare const GROUP_KEY: InjectionKey<{
+    register: (child: GroupChild) => () => void;
+}>;

package/es/number-flow/group-key.js

@@ -0,0 +1,4 @@
+//#region components/number-flow/group-key.ts
+var GROUP_KEY = Symbol("NumberFlowGroup");
+//#endregion
+export { GROUP_KEY };

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

@@ -0,0 +1,63 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import { continuous } from './continuous';
+import _NumberFlowGroup from './number-flow-group.vue';
+import _NumberFlow from './number-flow.vue';
+export { useCanAnimate } from './use-can-animate';
+declare const NumberFlow: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").NumberFlowProps> & Readonly<{
+        onAnimationsstart?: (() => any) | undefined;
+        onAnimationsfinish?: (() => any) | undefined;
+    }>, import("./types").NumberFlowExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        animationsstart: () => any;
+        animationsfinish: () => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./types").NumberFlowProps> & Readonly<{
+        onAnimationsstart?: (() => any) | undefined;
+        onAnimationsfinish?: (() => any) | undefined;
+    }>, import("./types").NumberFlowExposed, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./types").NumberFlowProps> & Readonly<{
+    onAnimationsstart?: (() => any) | undefined;
+    onAnimationsfinish?: (() => any) | undefined;
+}>, import("./types").NumberFlowExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    animationsstart: () => any;
+    animationsfinish: () => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        prefix(): unknown;
+        suffix(): unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+declare const NumberFlowGroup: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default(): unknown;
+    };
+});
+export { NumberFlowGroup, continuous };
+export type NumberFlowInstance = InstanceType<typeof _NumberFlow>;
+export type NumberFlowGroupInstance = InstanceType<typeof _NumberFlowGroup>;
+export type { NumberFlowDigitContext, NumberFlowDigitOptions, NumberFlowDigits, NumberFlowExposed, NumberFlowFormat, NumberFlowPlugin, NumberFlowPluginContext, NumberFlowProps, NumberFlowStyle, NumberFlowTrend, NumberFlowValue, } from './types';
+export default NumberFlow;

package/es/number-flow/index.js

@@ -0,0 +1,15 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import { continuous } from "./continuous.js";
+import number_flow_group_default from "./number-flow-group.js";
+import { useCanAnimate } from "./use-can-animate.js";
+import number_flow_default from "./number-flow.js";
+//#region components/number-flow/index.ts
+var NumberFlow = Object.assign(number_flow_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + number_flow_default.name, number_flow_default);
+	app.component(componentPrefix + number_flow_group_default.name, number_flow_group_default);
+} });
+var NumberFlowGroup = number_flow_group_default;
+//#endregion
+export { NumberFlowGroup, continuous, NumberFlow as default, useCanAnimate };

package/es/number-flow/number-flow-group.js

@@ -0,0 +1,5 @@
+import number_flow_group_vue_vue_type_script_setup_true_lang_default from "./number-flow-group.vue_vue_type_script_setup_true_lang.js";
+//#region components/number-flow/number-flow-group.vue
+var number_flow_group_default = number_flow_group_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { number_flow_group_default as default };

package/es/number-flow/number-flow-group.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Slots = {
+    default(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/number-flow/number-flow-group.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
+import { GROUP_KEY } from "./group-key.js";
+import { createElementBlock, defineComponent, nextTick, normalizeClass, openBlock, provide, renderSlot, unref, watch } from "vue";
+//#region components/number-flow/number-flow-group.vue?vue&type=script&setup=true&lang.ts
+var number_flow_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "NumberFlowGroup" }), {}, {
+	__name: "number-flow-group",
+	setup(__props) {
+		const children = /* @__PURE__ */ new Set();
+		let updating = false;
+		let pending = false;
+		function animateChildren() {
+			return _animateChildren.apply(this, arguments);
+		}
+		function _animateChildren() {
+			_animateChildren = _asyncToGenerator(function* () {
+				if (updating) {
+					pending = true;
+					return;
+				}
+				updating = true;
+				try {
+					do {
+						pending = false;
+						const preparedChildren = [...children].flatMap((child) => {
+							const version = child.prepare();
+							return version === void 0 ? [] : [{
+								child,
+								version
+							}];
+						});
+						if (preparedChildren.length === 0) continue;
+						yield nextTick();
+						preparedChildren.filter(({ child, version }) => child.commit(version)).forEach(({ child, version }) => child.start(version));
+					} while (pending);
+				} finally {
+					updating = false;
+				}
+			});
+			return _animateChildren.apply(this, arguments);
+		}
+		provide(GROUP_KEY, { register(child) {
+			children.add(child);
+			const stopWatch = watch(child.value, animateChildren, { flush: "pre" });
+			return () => {
+				stopWatch();
+				children.delete(child);
+			};
+		} });
+		const prefixCls = getPrefixCls("number-flow-group");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(unref(prefixCls)) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+}));
+//#endregion
+export { number_flow_group_vue_vue_type_script_setup_true_lang_default as default };

package/es/number-flow/number-flow.js

@@ -0,0 +1,5 @@
+import number_flow_vue_vue_type_script_setup_true_lang_default from "./number-flow.vue_vue_type_script_setup_true_lang.js";
+//#region components/number-flow/number-flow.vue
+var number_flow_default = number_flow_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { number_flow_default as default };

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

@@ -0,0 +1,20 @@
+import type { NumberFlowExposed, NumberFlowProps } from './types';
+type __VLS_Slots = {
+    prefix(): unknown;
+    suffix(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<NumberFlowProps, NumberFlowExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    animationsstart: () => any;
+    animationsfinish: () => any;
+}, string, import("vue").PublicProps, Readonly<NumberFlowProps> & Readonly<{
+    onAnimationsstart?: (() => any) | undefined;
+    onAnimationsfinish?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/number-flow/number-flow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,284 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/asyncToGenerator.js";
+import { GROUP_KEY } from "./group-key.js";
+import { formatNumberFlow } from "./formatter.js";
+import { useCanAnimate } from "./use-can-animate.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useSlots, useTemplateRef, watch, withCtx } from "vue";
+//#region components/number-flow/number-flow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-number-flow-id", "aria-label"];
+var _hoisted_2 = ["data-number-flow-part"];
+var number_flow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "NumberFlow" }), {}, {
+	__name: "number-flow",
+	props: {
+		value: {},
+		locales: {},
+		format: {},
+		prefix: {},
+		suffix: {},
+		trend: {
+			type: [Number, Function],
+			default: (oldValue, newValue) => Math.sign(newValue - oldValue)
+		},
+		plugins: {},
+		animated: {
+			type: Boolean,
+			default: true
+		},
+		transformTiming: { default: () => (() => ({
+			duration: 900,
+			easing: "cubic-bezier(0.16, 1, 0.3, 1)"
+		})) },
+		spinTiming: {},
+		opacityTiming: { default: () => (() => ({
+			duration: 450,
+			easing: "ease-out"
+		})) },
+		respectMotionPreference: {
+			type: Boolean,
+			default: true
+		},
+		digits: {},
+		willChange: {
+			type: Boolean,
+			default: false
+		},
+		nonce: {}
+	},
+	emits: ["animationsstart", "animationsfinish"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const prefixCls = getPrefixCls("number-flow");
+		const slots = useSlots();
+		const rootRef = useTemplateRef("rootRef");
+		const styleScope = shallowRef();
+		onMounted(() => {
+			styleScope.value = `sd-number-flow-${crypto.randomUUID()}`;
+		});
+		const numberFormatter = computed(() => new Intl.NumberFormat(__props.locales, __props.format));
+		function formatData(val) {
+			return formatNumberFlow(val, numberFormatter.value, slots.prefix ? void 0 : __props.prefix, slots.suffix ? void 0 : __props.suffix);
+		}
+		const previousData = shallowRef(formatData(__props.value));
+		const currentValue = computed(() => __props.value);
+		const currentData = computed(() => formatData(__props.value));
+		const animationPhase = shallowRef("idle");
+		const isAnimating = computed(() => animationPhase.value === "animating");
+		let animationVersion = 0;
+		let finishTimer;
+		const resolvedTransformTiming = computed(() => typeof __props.transformTiming === "function" ? __props.transformTiming() : __props.transformTiming);
+		const resolvedOpacityTiming = computed(() => typeof __props.opacityTiming === "function" ? __props.opacityTiming() : __props.opacityTiming);
+		const transformDuration = computed(() => typeof resolvedTransformTiming.value.duration === "number" ? resolvedTransformTiming.value.duration : 900);
+		const transformEasing = computed(() => {
+			var _resolvedTransformTim, _resolvedTransformTim2;
+			return (_resolvedTransformTim = (_resolvedTransformTim2 = resolvedTransformTiming.value.easing) === null || _resolvedTransformTim2 === void 0 ? void 0 : _resolvedTransformTim2.toString()) !== null && _resolvedTransformTim !== void 0 ? _resolvedTransformTim : "cubic-bezier(0.16, 1, 0.3, 1)";
+		});
+		const spinDuration = computed(() => {
+			if (__props.spinTiming && typeof __props.spinTiming.duration === "number") return __props.spinTiming.duration;
+			return transformDuration.value;
+		});
+		const spinEasing = computed(() => {
+			var _props$spinTiming;
+			if ((_props$spinTiming = __props.spinTiming) === null || _props$spinTiming === void 0 ? void 0 : _props$spinTiming.easing) return __props.spinTiming.easing.toString();
+			return transformEasing.value;
+		});
+		const opacityDuration = computed(() => typeof resolvedOpacityTiming.value.duration === "number" ? resolvedOpacityTiming.value.duration : 450);
+		const motionCanAnimate = useCanAnimate({ respectMotionPreference: () => __props.respectMotionPreference });
+		const canAnimate = computed(() => __props.animated && motionCanAnimate.value);
+		const computedTrend = computed(() => typeof __props.trend === "function" ? __props.trend(previousData.value.value, currentData.value.value) : __props.trend);
+		const classes = computed(() => [prefixCls, {
+			[`${prefixCls}-animated`]: canAnimate.value,
+			[`${prefixCls}-prepared`]: animationPhase.value === "prepared",
+			[`${prefixCls}-animating`]: isAnimating.value,
+			[`${prefixCls}-will-change`]: __props.willChange
+		}]);
+		function sanitizeDuration(duration) {
+			return Number.isFinite(duration) && duration >= 0 ? duration : 0;
+		}
+		function sanitizeEasing(easing) {
+			return /^[a-zA-Z0-9(),.\s+-]+$/.test(easing) ? easing : "linear";
+		}
+		const dynamicStyles = computed(() => {
+			if (!styleScope.value) return "";
+			const rootSelector = `[data-number-flow-id="${styleScope.value}"]`;
+			const rules = [`${rootSelector}{--sd-number-flow-duration:${sanitizeDuration(transformDuration.value)}ms;--sd-number-flow-easing:${sanitizeEasing(transformEasing.value)};--sd-number-flow-spin-duration:${sanitizeDuration(spinDuration.value)}ms;--sd-number-flow-spin-easing:${sanitizeEasing(spinEasing.value)};--sd-number-flow-opacity-duration:${sanitizeDuration(opacityDuration.value)}ms}`];
+			currentData.value.parts.forEach((part, index) => {
+				if (part.digit === void 0) return;
+				const delta = getDigitDelta(part);
+				const distance = Math.abs(delta);
+				rules.push(`${rootSelector} [data-number-flow-part="${index}"]{--sd-number-flow-start:${delta < 0 ? -distance : 0};--sd-number-flow-end:${delta > 0 ? -distance : 0}}`);
+			});
+			return rules.join("");
+		});
+		function getPreviousDigit(part) {
+			var _previousData$value$p, _previousData$value$p2;
+			return (_previousData$value$p = (_previousData$value$p2 = previousData.value.parts.find((candidate) => candidate.key === part.key)) === null || _previousData$value$p2 === void 0 ? void 0 : _previousData$value$p2.digit) !== null && _previousData$value$p !== void 0 ? _previousData$value$p : part.digit;
+		}
+		const highestChangedPosition = computed(() => {
+			const previousDigits = new Map(previousData.value.parts.filter((part) => part.digit !== void 0).map((part) => [part.key, part]));
+			const changedPositions = currentData.value.parts.flatMap((part) => {
+				var _part$position;
+				if (part.digit === void 0) return [];
+				const previous = previousDigits.get(part.key);
+				return (previous === null || previous === void 0 ? void 0 : previous.digit) === part.digit ? [] : [(_part$position = part.position) !== null && _part$position !== void 0 ? _part$position : 0];
+			});
+			return changedPositions.length === 0 ? void 0 : Math.max(...changedPositions);
+		});
+		function getDigitDelta(part) {
+			var _props$digits$max, _props$digits, _part$position2, _part$position3, _props$plugins;
+			const current = part.digit;
+			const previous = getPreviousDigit(part);
+			const length = ((_props$digits$max = (_props$digits = __props.digits) === null || _props$digits === void 0 || (_props$digits = _props$digits[(_part$position2 = part.position) !== null && _part$position2 !== void 0 ? _part$position2 : 0]) === null || _props$digits === void 0 ? void 0 : _props$digits.max) !== null && _props$digits$max !== void 0 ? _props$digits$max : 9) + 1;
+			const context = {
+				position: (_part$position3 = part.position) !== null && _part$position3 !== void 0 ? _part$position3 : 0,
+				length,
+				trend: computedTrend.value,
+				highestChangedPosition: highestChangedPosition.value
+			};
+			for (const plugin of (_props$plugins = __props.plugins) !== null && _props$plugins !== void 0 ? _props$plugins : []) {
+				var _plugin$getDelta;
+				const delta = (_plugin$getDelta = plugin.getDelta) === null || _plugin$getDelta === void 0 ? void 0 : _plugin$getDelta.call(plugin, current, previous, context);
+				if (delta !== void 0) return delta;
+			}
+			const difference = current - previous;
+			if (computedTrend.value < 0 && current > previous) return current - length - previous;
+			if (computedTrend.value > 0 && current < previous) return length - previous + current;
+			return difference;
+		}
+		function getDigitSequence(part) {
+			var _props$digits$max2, _props$digits2, _part$position4;
+			const current = part.digit;
+			const previous = getPreviousDigit(part);
+			const delta = getDigitDelta(part);
+			if (animationPhase.value === "idle" || delta === 0) return [{
+				key: `current-${current}`,
+				value: current
+			}];
+			const length = ((_props$digits$max2 = (_props$digits2 = __props.digits) === null || _props$digits2 === void 0 || (_props$digits2 = _props$digits2[(_part$position4 = part.position) !== null && _part$position4 !== void 0 ? _part$position4 : 0]) === null || _props$digits2 === void 0 ? void 0 : _props$digits2.max) !== null && _props$digits$max2 !== void 0 ? _props$digits$max2 : 9) + 1;
+			const start = delta > 0 ? previous : current;
+			return Array.from({ length: Math.abs(delta) + 1 }, (_, index) => ({
+				key: `step-${index}`,
+				value: (start + index) % length
+			}));
+		}
+		function finishAnimation(version = animationVersion) {
+			if (version !== animationVersion || animationPhase.value === "idle") return;
+			clearTimeout(finishTimer);
+			finishTimer = void 0;
+			previousData.value = currentData.value;
+			animationPhase.value = "idle";
+			emit("animationsfinish");
+		}
+		const group = inject(GROUP_KEY, void 0);
+		function prepareAnimation(oldData, data, force = false) {
+			var _props$plugins2;
+			const version = ++animationVersion;
+			clearTimeout(finishTimer);
+			finishTimer = void 0;
+			previousData.value = oldData;
+			(_props$plugins2 = __props.plugins) === null || _props$plugins2 === void 0 || _props$plugins2.forEach((plugin) => {
+				var _plugin$onUpdate;
+				return (_plugin$onUpdate = plugin.onUpdate) === null || _plugin$onUpdate === void 0 ? void 0 : _plugin$onUpdate.call(plugin, {
+					value: data.value,
+					previousValue: oldData.value,
+					trend: computedTrend.value
+				});
+			});
+			if (!canAnimate.value || !force && data.value === oldData.value) {
+				previousData.value = data;
+				animationPhase.value = "idle";
+				return;
+			}
+			animationPhase.value = "prepared";
+			return version;
+		}
+		function commitAnimationStart(version) {
+			var _rootRef$value;
+			if (version !== animationVersion || animationPhase.value !== "prepared") return false;
+			(_rootRef$value = rootRef.value) === null || _rootRef$value === void 0 || _rootRef$value.getBoundingClientRect();
+			return true;
+		}
+		function startAnimation(version) {
+			if (version !== animationVersion || animationPhase.value !== "prepared") return;
+			animationPhase.value = "animating";
+			emit("animationsstart");
+			finishTimer = setTimeout(() => finishAnimation(version), spinDuration.value + 50);
+		}
+		if (group) {
+			const unregister = group.register({
+				value: currentValue,
+				prepare: () => prepareAnimation(previousData.value, currentData.value, true),
+				commit: commitAnimationStart,
+				start: startAnimation
+			});
+			onBeforeUnmount(unregister);
+		} else watch(currentValue, function() {
+			var _ref = _asyncToGenerator(function* (data, oldData) {
+				const version = prepareAnimation(formatData(oldData), formatData(data));
+				if (version === void 0) return;
+				yield nextTick();
+				if (!commitAnimationStart(version)) return;
+				startAnimation(version);
+			});
+			return function(_x, _x2) {
+				return _ref.apply(this, arguments);
+			};
+		}(), { flush: "pre" });
+		onBeforeUnmount(() => clearTimeout(finishTimer));
+		__expose({ get el() {
+			return rootRef.value;
+		} });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(classes.value),
+				"data-number-flow-id": styleScope.value,
+				role: "img",
+				"aria-label": currentData.value.valueAsString
+			}, [
+				(openBlock(), createBlock(resolveDynamicComponent("style"), { nonce: __props.nonce }, {
+					default: withCtx(() => [createTextVNode(toDisplayString(dynamicStyles.value), 1)]),
+					_: 1
+				}, 8, ["nonce"])),
+				_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-custom-prefix`),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "prefix")], 2)) : createCommentVNode("", true),
+				createElementVNode("span", {
+					class: normalizeClass(`${unref(prefixCls)}-content`),
+					"aria-hidden": "true"
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(currentData.value.parts, (part, partIndex) => {
+					return openBlock(), createElementBlock("span", {
+						key: part.key,
+						"data-number-flow-part": partIndex,
+						class: normalizeClass([
+							`${unref(prefixCls)}-part`,
+							`${unref(prefixCls)}-${part.type}`,
+							{ [`${unref(prefixCls)}-digit`]: part.digit !== void 0 }
+						])
+					}, [part.digit !== void 0 ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(`${unref(prefixCls)}-digit-track`)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(getDigitSequence(part), (digit) => {
+						return openBlock(), createElementBlock("span", {
+							key: digit.key,
+							class: normalizeClass(`${unref(prefixCls)}-digit-value`)
+						}, toDisplayString(digit.value), 3);
+					}), 128))], 2)) : (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(`${unref(prefixCls)}-symbol`)
+					}, toDisplayString(part.value), 3))], 10, _hoisted_2);
+				}), 128))], 2),
+				_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-custom-suffix`),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "suffix")], 2)) : createCommentVNode("", true)
+			], 10, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { number_flow_vue_vue_type_script_setup_true_lang_default as default };

package/es/number-flow/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

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

@@ -0,0 +1,85 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-number-flow {
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+  direction: ltr;
+  white-space: nowrap;
+  isolation: isolate;
+}
+.sd-number-flow-content, .sd-number-flow-part, .sd-number-flow-digit-track, .sd-number-flow-digit-value, .sd-number-flow-symbol {
+  display: inline-block;
+}
+.sd-number-flow-content {
+  margin: -0.25em -0.2em;
+  padding: 0.25em 0.2em;
+  overflow: hidden;
+}
+.sd-number-flow-part {
+  position: relative;
+  vertical-align: bottom;
+}
+.sd-number-flow-digit {
+  height: 1em;
+  overflow: hidden;
+}
+.sd-number-flow-digit-track {
+  display: flex;
+  flex-direction: column;
+  height: 1em;
+  transform: translateY(calc(1em * var(--sd-number-flow-start)));
+}
+.sd-number-flow-digit-value {
+  flex: 0 0 1em;
+  height: 1em;
+  line-height: 1;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.sd-number-flow-prepared .sd-number-flow-digit-track {
+  transition: none;
+}
+.sd-number-flow-animating .sd-number-flow-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;
+}
+.sd-number-flow-symbol {
+  white-space: pre;
+}
+.sd-number-flow-will-change :is(.sd-number-flow-content, .sd-number-flow-part, .sd-number-flow-digit-track, .sd-number-flow-symbol) {
+  will-change: transform;
+}
+.sd-number-flow-custom-prefix {
+  margin-right: 4px;
+}
+.sd-number-flow-custom-suffix {
+  margin-left: 4px;
+}
+
+.sd-number-flow-group {
+  display: inline-flex;
+  gap: 4px;
+  align-items: baseline;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sd-number-flow-digit-track {
+    transition: none;
+  }
+}

package/es/number-flow/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

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

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";