sard 1.0.21 → 1.0.22

package/components/button/button.vue.d.ts

@@ -5,12 +5,12 @@ declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    round: boolean;
     size: "xs" | "small" | "medium" | "large";
     loading: boolean;
     disabled: boolean;
     color: "primary" | "secondary" | "success" | "warning" | "danger" | "white" | "black";
     square: boolean;
-    round: boolean;
     variant: "solid" | "outlined" | "dashed" | "filled" | "text" | "link";
     loadingType: "clock" | "circular";
     block: boolean;

package/components/count-to/count-to.vue.d.ts

@@ -1,7 +1,7 @@
 import { type CountToProps } from './common';
 declare const __VLS_export: import("vue").DefineComponent<CountToProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountToProps> & Readonly<{}>, {
-    value: number;
     duration: number;
+    value: number;
     separator: string;
     precision: number;
     separatorDigit: number;

package/components/count-to/count-to.vue.js

@@ -1,7 +1,7 @@
 import { addSeparator } from "../../utils/string.js";
+import { animateNumber } from "../../utils/animation.js";
 import { defaultCountToProps } from "./common.js";
 import { computed, createElementBlock, defineComponent, mergeDefaults, onUnmounted, openBlock, ref, toDisplayString, watch } from "vue";
-import { createAnimation } from "lwa";
 //#region packages/sard/components/count-to/count-to.vue
 var count_to_default = /*@__PURE__*/ defineComponent({
 	__name: "count-to",
@@ -30,14 +30,14 @@ var count_to_default = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const props = __props;
 		const number = ref(0);
-		let tl;
+		let animation;
 		const renderedNumer = computed(() => {
 			const fixedNum = number.value.toFixed(props.precision);
 			return props.separator ? addSeparator(fixedNum, props.separator, props.separatorDigit) : fixedNum;
 		});
 		watch(() => props.value, () => {
-			tl?.pause();
-			tl = createAnimation(number, { value: props.value }, {
+			animation?.pause();
+			animation = animateNumber(number, props.value, {
 				duration: props.duration,
 				easing: "easeOutQuint",
 				round: Math.pow(10, props.precision)
@@ -47,7 +47,7 @@ var count_to_default = /*@__PURE__*/ defineComponent({
 			immediate: true
 		});
 		onUnmounted(() => {
-			tl?.pause();
+			animation?.pause();
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", null, toDisplayString(renderedNumer.value), 1);

package/components/floating-panel/floating-panel.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_base: import("vue").DefineComponent<FloatingPanelProps, Floa
     "onUpdate:height"?: ((value: number) => any) | undefined;
     "onHeight-change"?: ((value: number) => any) | undefined;
 }>, {
-    height: number;
     duration: number;
+    height: number;
     anchors: number[];
     contentDraggable: boolean;
     safeAreaInsetBottom: boolean;

package/components/skeleton/skeleton.vue.d.ts

@@ -3,8 +3,8 @@ type __VLS_Slots = SkeletonSlots;
 declare const __VLS_base: import("vue").DefineComponent<SkeletonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
     title: boolean;
     animated: boolean;
-    loading: boolean;
     round: boolean;
+    loading: boolean;
     avatar: boolean;
     rows: number;
     avatarSize: string;

package/components/swiper/useSwiperAnimation.js

@@ -1,14 +1,14 @@
+import { animateNumber } from "../../utils/animation.js";
 import { withResolvers } from "../../utils/polyfill.js";
 import { onUnmounted } from "vue";
-import { createAnimation } from "lwa";
 //#region packages/sard/components/swiper/useSwiperAnimation.ts
 function useSwiperAnimation(target) {
-	let tl;
+	let animation;
 	let promiseWithResolvers;
 	const play = (value, duration, update) => {
-		tl?.pause();
+		animation?.pause();
 		promiseWithResolvers = withResolvers();
-		tl = createAnimation(target, { value }, {
+		animation = animateNumber(target, value, {
 			duration,
 			easing: "easeOutCubic",
 			update,
@@ -19,7 +19,7 @@ function useSwiperAnimation(target) {
 		return promiseWithResolvers.promise;
 	};
 	const pause = () => {
-		tl?.pause();
+		animation?.pause();
 	};
 	onUnmounted(() => {
 		pause();

package/components/tabbar/tabbar.vue.d.ts

@@ -7,8 +7,8 @@ declare const __VLS_base: import("vue").DefineComponent<TabbarProps, {}, {}, {},
     onChange?: ((value: string | number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    fixed: boolean;
     modelValue: number | string;
+    fixed: boolean;
     color: string;
     bordered: boolean;
     safeAreaInsetBottom: boolean;

package/components/tag/tag.vue.d.ts

@@ -8,10 +8,10 @@ declare const __VLS_base: import("vue").DefineComponent<TagProps, {}, {}, {}, {}
     onClose?: ((event: any) => any) | undefined;
 }>, {
     mark: "left" | "right";
+    round: boolean;
     size: "small" | "medium" | "large";
     color: "default" | "primary" | "success" | "warning" | "danger";
     closable: boolean;
-    round: boolean;
     variant: "filled" | "solid" | "outlined";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sard",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "sard 是基于 Vue3 的 Web 移动端 UI 组件库",
   "keywords": [
     "UI",
@@ -20,12 +20,10 @@
   "main": "index.js",
   "devDependencies": {
     "@sard/icons": "^0.1.0",
-    "lwa": "^0.3.0",
     "vue": "^3.5.0"
   },
   "peerDependencies": {
     "@sard/icons": "^0.1.0",
-    "lwa": "^0.3.0",
     "vue": "^3.5.0"
   }
 }

package/use/useLuckyDraw.js

@@ -1,6 +1,6 @@
 import { random } from "../utils/number.js";
+import { ticker } from "../utils/animation.js";
 import { computed, onScopeDispose, ref, unref } from "vue";
-import { ticker } from "lwa";
 //#region packages/sard/use/useLuckyDraw.ts
 const defaultOptions = {
 	minSpeed: .1,

package/use/usePopper.js

@@ -1,7 +1,7 @@
 import { clamp } from "../utils/number.js";
 import { isRectEqual } from "../utils/geometry.js";
+import { ticker } from "../utils/animation.js";
 import { onBeforeUnmount, reactive, watch } from "vue";
-import { ticker } from "lwa";
 //#region packages/sard/use/usePopper.ts
 const directions = [
 	"top",

package/utils/animation.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from 'vue';
+type TickCallback = () => void;
+/**
+ * 基于单个 requestAnimationFrame 的共享循环，多个动画共用同一帧循环。
+ */
+export declare const ticker: {
+    add(callback: TickCallback): void;
+    remove(callback: TickCallback): void;
+};
+type EasingName = 'easeOutCubic' | 'easeOutQuint';
+export interface AnimateNumberOptions {
+    /** 动画时长，单位毫秒 */
+    duration?: number;
+    /** 缓动函数名或自定义缓动函数 */
+    easing?: EasingName | ((k: number) => number);
+    /** 取整因子，每帧值会被舍入为 Math.round(value * round) / round */
+    round?: number;
+    /** 每帧更新后回调 */
+    update?: () => void;
+    /** 动画结束回调 */
+    complete?: () => void;
+}
+export interface Animation {
+    /** 暂停动画，暂停后不会触发 complete */
+    pause: () => void;
+}
+/**
+ * 将数字 ref 的 value 从当前值缓动到目标值，创建后自动播放。
+ */
+export declare function animateNumber(ref: Ref<number>, to: number, options?: AnimateNumberOptions): Animation;
+export {};

package/utils/animation.js

@@ -0,0 +1,56 @@
+//#region packages/sard/utils/animation.ts
+const callbacks = /* @__PURE__ */ new Set();
+let rafId = 0;
+function loop() {
+	rafId = requestAnimationFrame(loop);
+	callbacks.forEach((callback) => callback());
+}
+/**
+* 基于单个 requestAnimationFrame 的共享循环，多个动画共用同一帧循环。
+*/
+const ticker = {
+	add(callback) {
+		callbacks.add(callback);
+		if (rafId === 0) rafId = requestAnimationFrame(loop);
+	},
+	remove(callback) {
+		callbacks.delete(callback);
+		if (rafId !== 0 && callbacks.size === 0) {
+			cancelAnimationFrame(rafId);
+			rafId = 0;
+		}
+	}
+};
+const easings = {
+	easeOutCubic: (k) => 1 - Math.pow(1 - k, 3),
+	easeOutQuint: (k) => 1 - Math.pow(1 - k, 5)
+};
+/**
+* 将数字 ref 的 value 从当前值缓动到目标值，创建后自动播放。
+*/
+function animateNumber(ref, to, options = {}) {
+	const { duration = 0, easing = "easeOutCubic", round, update, complete } = options;
+	const easingFn = typeof easing === "function" ? easing : easings[easing];
+	const from = ref.value;
+	const change = to - from;
+	const start = performance.now();
+	const setValue = (value) => {
+		ref.value = round === void 0 ? value : Math.round(value * round) / round;
+	};
+	const tick = () => {
+		const progress = duration > 0 ? Math.min((performance.now() - start) / duration, 1) : 1;
+		setValue(from + change * easingFn(progress));
+		update?.();
+		if (progress >= 1) {
+			pause();
+			complete?.();
+		}
+	};
+	const pause = () => {
+		ticker.remove(tick);
+	};
+	ticker.add(tick);
+	return { pause };
+}
+//#endregion
+export { animateNumber, ticker };

package/utils/inertialAnimate.js

@@ -1,4 +1,4 @@
-import { ticker } from "lwa";
+import { ticker } from "./animation.js";
 //#region packages/sard/utils/inertialAnimate.ts
 const friction = .95;
 const minVelocity = .1;

package/utils/scroller/useEasingAnimation.js

@@ -1,14 +1,14 @@
+import { animateNumber } from "../animation.js";
 import { withResolvers } from "../polyfill.js";
 import { onUnmounted } from "vue";
-import { createAnimation } from "lwa";
 //#region packages/sard/utils/scroller/useEasingAnimation.ts
 function useEasingAnimation(target) {
-	let tl;
+	let animation;
 	let promiseWithResolvers;
 	const play = (value, duration) => {
-		tl?.pause();
+		animation?.pause();
 		promiseWithResolvers = withResolvers();
-		tl = createAnimation(target, { value }, {
+		animation = animateNumber(target, value, {
 			duration,
 			easing: "easeOutCubic",
 			complete() {
@@ -18,7 +18,7 @@ function useEasingAnimation(target) {
 		return promiseWithResolvers.promise;
 	};
 	const pause = () => {
-		tl?.pause();
+		animation?.pause();
 	};
 	onUnmounted(() => {
 		pause();

package/utils/scroller/useScrollAnimation.js

@@ -1,4 +1,4 @@
-import { ticker } from "lwa";
+import { ticker } from "../animation.js";
 //#region packages/sard/utils/scroller/useScrollAnimation.ts
 /**
 * 创建一个基于 requestAnimationFrame 的动画循环。