sard 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sard",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "sard 是基于 Vue3 的 Web 移动端 UI 组件库",
   "keywords": [
     "UI",

package/use/useResizeObserver.js

@@ -7,10 +7,10 @@ function useResizeObserver(target, callback, disabled) {
 	});
 	const observer = new ResizeObserver((entries) => {
 		for (const entry of entries) {
-			const contentSize = entry.contentBoxSize[0];
+			const contentSize = entry.contentRect;
 			Object.assign(size, {
-				width: contentSize.inlineSize,
-				height: contentSize.blockSize
+				width: contentSize.width,
+				height: contentSize.height
 			});
 			callback?.(size);
 		}

package/utils/scroller/Scroll.js

@@ -54,14 +54,14 @@ var Scroll = class {
 			this.spring.snap(e);
 			this.spring.setEnd(-this.extent);
 		} else this.springing = false;
-		this.startTime = (/* @__PURE__ */ new Date()).getTime();
+		this.startTime = Date.now();
 	}
 	/**
 	* 计算当前时间点的位置，如果超出边界则切换到弹簧回弹模式。
 	*/
 	position(e) {
 		if (!this.startTime) return 0;
-		if (!e) e = ((/* @__PURE__ */ new Date()).getTime() - this.startTime) / 1e3;
+		if (!e) e = (Date.now() - this.startTime) / 1e3;
 		if (this.springing) return this.spring.position() + this.springOffset;
 		let t = this.friction.position(e);
 		const n = this.velocity(e);

package/utils/scroller/useScroller.d.ts

@@ -1,39 +1,23 @@
-import { type Ref } from 'vue';
 import type { Friction } from './Friction';
 import type { Spring } from './Spring';
-interface OnScrollEvent {
-    target: {
-        scrollLeft: number;
-        scrollTop: number;
-        scrollHeight: number;
-        scrollWidth: number;
-        offsetHeight: number;
-        offsetWidth: number;
-    };
-}
 export interface ScrollerOptions {
-    enableSnap?: boolean;
     itemSize?: number;
-    enableX?: boolean;
-    enableY?: boolean;
     scrollWidth?: number;
     scrollHeight?: number;
     friction?: Friction;
     spring?: Spring;
-    onScroll?: (event: OnScrollEvent) => void;
-    onSnap?: (index: number) => void;
+    onSnap: (index: number) => void;
     onTap?: (event: TouchEvent) => void;
 }
 /**
  * 触摸滚动器，负责处理触摸/鼠标滚动交互、惯性滚动、越界回弹和 snap 对齐。
- * @param element 滚动的 DOM 容器元素
  */
-export declare function useScroller(element: Ref<HTMLElement | null>, options: ScrollerOptions): {
-    update: (height?: number, _scrollHeight?: number, _itemSize?: number) => void;
+export declare function useScroller(options: ScrollerOptions): {
+    position: import("vue").ComputedRef<number>;
+    update: (height: number, _itemSize: number, containerHeight: number, contentHeight: number) => void;
     scrollTo: (_position: number, time?: number) => Promise<void>;
     isIdle: () => boolean;
     handleTouchStart: (event: TouchEvent) => void;
     handleTouchMove: (event: TouchEvent) => void;
     handleTouchEnd: (event: TouchEvent) => void;
 };
-export {};

package/utils/scroller/useScroller.js

@@ -1,9 +1,9 @@
-import { isFunction } from "../is.js";
+import { clamp } from "../number.js";
 import { useScrollBinding } from "./useScrollBinding.js";
 import { Scroll } from "./Scroll.js";
 import { useEasingAnimation } from "./useEasingAnimation.js";
 import { useScrollAnimation } from "./useScrollAnimation.js";
-import { computed, ref, watch, watchPostEffect } from "vue";
+import { computed, ref } from "vue";
 //#region packages/sard/utils/scroller/useScroller.ts
 /**
 * 计算当前滚动位置对应的 snap 索引。
@@ -16,23 +16,12 @@ function calculateSnapIndex(position, itemSize) {
 }
 /**
 * 触摸滚动器，负责处理触摸/鼠标滚动交互、惯性滚动、越界回弹和 snap 对齐。
-* @param element 滚动的 DOM 容器元素
 */
-function useScroller(element, options) {
+function useScroller(options) {
 	/** 单项尺寸，用于 snap 计算 */
 	let itemSize = options.itemSize || 0;
-	/** 是否启用 snap 对齐 */
-	const enableSnap = computed(() => options.enableSnap);
-	/** 是否启用水平滚动 */
-	const enableX = computed(() => options.enableX);
-	/** 是否启用垂直滚动 */
-	const enableY = computed(() => options.enableY);
 	/** 可滚动范围大小 */
 	let extent = 0;
-	/** 可滚动内容宽度 */
-	let scrollWidth = 0;
-	/** 可滚动内容高度 */
-	let scrollHeight = 0;
 	/** 当前滚动偏移位置 */
 	const position = ref(0);
 	/** 滚动物理模型 */
@@ -53,7 +42,7 @@ function useScroller(element, options) {
 		const _position = position.value % _itemSize;
 		const i = Math.abs(_position) > _itemSize / 2 ? position.value - (_itemSize - Math.abs(_position)) : position.value - _position;
 		if (position.value !== i) scrollTo(-i, time).then(() => {
-			if (isFunction(options.onSnap)) options.onSnap(Math.round(Math.abs(position.value) / _itemSize));
+			options.onSnap(Math.round(Math.abs(position.value) / _itemSize));
 		});
 		else status = "idle";
 	};
@@ -71,45 +60,17 @@ function useScroller(element, options) {
 		});
 	};
 	/**
-	* 触发 onScroll 回调，仅在位置实际变化时执行。
-	*/
-	const dispatchScroll = () => {
-		const el = element.value;
-		if (!el) return;
-		if (isFunction(options.onScroll)) {
-			const event = { target: {
-				scrollLeft: enableX.value ? -position.value : 0,
-				scrollTop: enableY.value ? -position.value : 0,
-				scrollHeight: scrollHeight || el.offsetHeight,
-				scrollWidth: scrollWidth || el.offsetWidth,
-				offsetHeight: el.parentElement.offsetHeight,
-				offsetWidth: el.parentElement.offsetWidth
-			} };
-			options.onScroll(event);
-		}
-	};
-	/**
 	* 更新滚动范围、位置、itemSize，并根据变化派发事件与 snap 回调。
 	*/
-	const update = (height, _scrollHeight, _itemSize) => {
-		const el = element.value;
-		if (!el) return;
+	const update = (height, _itemSize, containerHeight, contentHeight) => {
 		let nextExtent = 0;
 		const _position = position.value;
-		if (enableX.value) {
-			nextExtent = el.childNodes.length ? (_scrollHeight || el.offsetWidth) - el.parentElement.offsetWidth : 0;
-			scrollWidth = _scrollHeight || 0;
-		} else {
-			nextExtent = el.childNodes.length ? (_scrollHeight || el.offsetHeight) - el.parentElement.offsetHeight : 0;
-			scrollHeight = _scrollHeight || 0;
-		}
-		if (typeof height === "number") position.value = -height;
+		nextExtent = contentHeight - containerHeight;
+		position.value = -height;
 		if (position.value < -nextExtent) position.value = -nextExtent;
 		else if (position.value > 0) position.value = 0;
-		itemSize = _itemSize || itemSize;
-		if (_position !== position.value) {
-			if (isFunction(options.onSnap)) options.onSnap(Math.round(Math.abs(position.value) / itemSize));
-		}
+		itemSize = _itemSize;
+		if (_position !== position.value) options.onSnap(Math.round(Math.abs(position.value) / itemSize));
 		extent = nextExtent;
 		scroll.extent = nextExtent;
 	};
@@ -133,11 +94,10 @@ function useScroller(element, options) {
 	/**
 	* 根据手势移动距离更新当前位置，并触发滚动事件。
 	*/
-	const onTouchMove = (x, y) => {
+	const onTouchMove = (_x, y) => {
 		status = "drag";
 		let nextPos = startPosition;
-		if (enableX.value) nextPos += x;
-		else if (enableY.value) nextPos += y;
+		nextPos += y;
 		if (nextPos > 0) nextPos *= .5;
 		else if (nextPos < -extent) nextPos = .5 * (nextPos + extent) - extent;
 		position.value = nextPos;
@@ -150,54 +110,34 @@ function useScroller(element, options) {
 			options.onTap?.(event);
 			return;
 		}
-		if (enableSnap.value && position.value > -extent && position.value < 0) {
-			if (enableY.value && (Math.abs(y) < itemSize && Math.abs(o.y) < 300 || Math.abs(o.y) < 150)) {
-				snap();
-				return;
-			}
-			if (enableX.value && (Math.abs(x) < itemSize && Math.abs(o.x) < 300 || Math.abs(o.x) < 150)) {
+		if (position.value > -extent && position.value < 0) {
+			if (Math.abs(y) < itemSize && Math.abs(o.y) < 300 || Math.abs(o.y) < 150) {
 				snap();
 				return;
 			}
 		}
-		if (enableX.value) scroll.set(position.value, o.x);
-		else if (enableY.value) scroll.set(position.value, o.y);
-		let c;
-		if (enableSnap.value) {
-			const s = scroll.friction.position(100);
-			const l = s % itemSize;
-			c = Math.abs(l) > itemSize / 2 ? s - (itemSize - Math.abs(l)) : s - l;
-			if (c <= 0 && c >= -extent) scroll.setVelocityByEnd(c);
-		}
+		scroll.set(position.value, o.y);
+		const s = scroll.friction.position(100);
+		const l = s % itemSize;
+		const c = Math.abs(l) > itemSize / 2 ? s - (itemSize - Math.abs(l)) : s - l;
+		if (c <= 0 && c >= -extent) scroll.setVelocityByEnd(c);
 		status = "scroll";
 		scrollAnim.play(() => {
 			const pos = scroll.position((Date.now() - scroll.startTime) / 1e3);
 			position.value = pos;
 		}, () => {
 			status = "idle";
-			if (enableSnap.value) {
-				if (c <= 0 && c >= -extent) {
-					scroll.setVelocityByEnd(c);
-					position.value = c;
-				}
-				if (isFunction(options.onSnap)) options.onSnap(calculateSnapIndex(position.value, itemSize));
+			if (c <= 0 && c >= -extent) {
+				scroll.setVelocityByEnd(c);
+				position.value = c;
 			}
+			position.value = clamp(position.value, -extent, 0);
+			options.onSnap(calculateSnapIndex(position.value, itemSize));
 		});
 	};
 	const { handleTouchStart, handleTouchMove, handleTouchEnd } = useScrollBinding(onTouchStart, onTouchMove, onTouchEnd);
-	watchPostEffect(() => {
-		const el = element.value;
-		if (el) {
-			let transform = "";
-			if (enableX.value) transform = "translateX(" + position.value + "px) translateZ(0)";
-			else if (enableY.value) transform = "translateY(" + position.value + "px) translateZ(0)";
-			el.style.transform = transform;
-		}
-	});
-	watch(position, () => {
-		dispatchScroll();
-	});
 	return {
+		position: computed(() => position.value),
 		update,
 		scrollTo,
 		isIdle,