@sdata/web-vue 4.0.0 → 4.1.0

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";

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";
@@ -218,6 +219,7 @@ var components = {
 	Modal,
 	ModelSelector,
 	Notification,
+	NumberFlow,
 	Popconfirm,
 	Progress,
 	QrCode,
@@ -299,6 +301,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>;