sard 1.0.0 → 1.0.2

package/use/index.js

@@ -0,0 +1,36 @@
+import { useTimeout } from "./useTimeout.js";
+import { useZIndex } from "./useZIndex.js";
+import { getAllImperatives, getAvailableImperative, getImperatives, useImperative } from "./useImperative.js";
+import { useLuckyDraw } from "./useLuckyDraw.js";
+import { getGridCenterSize, getGridIndex, getGridPrizeCount, useLuckyGrid } from "./useLuckyGrid.js";
+import { useLuckyWheel } from "./useLuckyWheel.js";
+import { useSlotMachine } from "./useSlotMachine.js";
+import { usePointerDown } from "./usePointerDown.js";
+import { useSimulatedClick } from "./useSimulatedClick.js";
+import { useSimulatedPress } from "./useSimulatedPress.js";
+import { useSimulatedDblClick } from "./useSimulatedDblClick.js";
+import { useElementScroll } from "./useElementScroll.js";
+import { useScrollSide } from "./useScrollSide.js";
+import { useScrollSpy } from "./useScrollSpy.js";
+import { useInitialVelocity } from "./useInitialVelocity.js";
+import { useDragPinch } from "./useDragPinch.js";
+import { useTimeoutLoading } from "./useTimeoutLoading.js";
+import { useStopMovedClick } from "./useStopMovedClick.js";
+import { useIndeterminate } from "./useIndeterminate.js";
+import { useWindowResize } from "./useWindowResize.js";
+import { useSingleTask } from "./useSingleTask.js";
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { useKeyList } from "./useKeyList.js";
+import { useLockScroll } from "./useLockScroll.js";
+import { defaultOptionKeys, useOptionKeys } from "./useOptionKeys.js";
+import { toReactive } from "./toReactive.js";
+import { reactiveComputed } from "./reactiveComputed.js";
+import { usePageScroll } from "./usePageScroll.js";
+import { useReachBottom } from "./useReachBottom.js";
+import { useResizeObserver } from "./useResizeObserver.js";
+import { useComposition } from "./useComposition.js";
+import { useRtl } from "./useRtl.js";
+import { autoUpdate, computePosition, usePopper } from "./usePopper.js";
+import { useClickOutside } from "./useClickOutside.js";
+import { isColorScheme, provideColorScheme, useColorScheme } from "./useColorScheme.js";
+export { autoUpdate, computePosition, defaultOptionKeys, getAllImperatives, getAvailableImperative, getGridCenterSize, getGridIndex, getGridPrizeCount, getImperatives, isColorScheme, provideColorScheme, reactiveComputed, toReactive, useClickOutside, useColorScheme, useComposition, useDragPinch, useElementScroll, useImperative, useIndeterminate, useInitialVelocity, useIntersectionObserver, useKeyList, useLockScroll, useLuckyDraw, useLuckyGrid, useLuckyWheel, useOptionKeys, usePageScroll, usePointerDown, usePopper, useReachBottom, useResizeObserver, useRtl, useScrollSide, useScrollSpy, useSimulatedClick, useSimulatedDblClick, useSimulatedPress, useSingleTask, useSlotMachine, useStopMovedClick, useTimeout, useTimeoutLoading, useWindowResize, useZIndex };

package/use/reactiveComputed.d.ts

@@ -0,0 +1,3 @@
+import { type ComputedGetter, type UnwrapNestedRefs } from 'vue';
+export type ReactiveComputedReturn<T extends object> = UnwrapNestedRefs<T>;
+export declare function reactiveComputed<T extends object>(fn: ComputedGetter<T>): ReactiveComputedReturn<T>;

package/use/reactiveComputed.js

@@ -0,0 +1,8 @@
+import { toReactive } from "./toReactive.js";
+import { computed } from "vue";
+//#region packages/sard/use/reactiveComputed.ts
+function reactiveComputed(fn) {
+	return toReactive(computed(fn));
+}
+//#endregion
+export { reactiveComputed };

package/use/toReactive.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRef, type UnwrapNestedRefs } from 'vue';
+export declare function toReactive<T extends object>(objectRef: MaybeRef<T>): UnwrapNestedRefs<T>;

package/use/toReactive.js

@@ -0,0 +1,32 @@
+import { isRef, reactive, unref } from "vue";
+//#region packages/sard/use/toReactive.ts
+function toReactive(objectRef) {
+	if (!isRef(objectRef)) return reactive(objectRef);
+	return reactive(new Proxy({}, {
+		get(_, p, receiver) {
+			return unref(Reflect.get(objectRef.value, p, receiver));
+		},
+		set(_, p, value) {
+			if (isRef(objectRef.value[p]) && !isRef(value)) objectRef.value[p].value = value;
+			else objectRef.value[p] = value;
+			return true;
+		},
+		deleteProperty(_, p) {
+			return Reflect.deleteProperty(objectRef.value, p);
+		},
+		has(_, p) {
+			return Reflect.has(objectRef.value, p);
+		},
+		ownKeys() {
+			return Object.keys(objectRef.value);
+		},
+		getOwnPropertyDescriptor() {
+			return {
+				enumerable: true,
+				configurable: true
+			};
+		}
+	}));
+}
+//#endregion
+export { toReactive };

package/use/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function useClickOutside(elRef: Ref<Element | null>, callback: (event: Event) => void, enabled: Ref<boolean>, type?: 'click' | 'touchstart'): void;

package/use/useClickOutside.js

@@ -0,0 +1,46 @@
+import { useTimeout } from "./useTimeout.js";
+import { onUnmounted, watch } from "vue";
+//#region packages/sard/use/useClickOutside.ts
+function useClickOutside(elRef, callback, enabled, type = "click") {
+	const events = {
+		click: ["click"],
+		touchstart: ["touchstart", "pointerdown"]
+	}[type];
+	const onDocumentClick = (event) => {
+		const el = elRef.value;
+		const target = event.target;
+		if (!el || !target) return;
+		if (!el.contains(target)) callback(event);
+	};
+	const bindTimer = useTimeout();
+	let isBinding = false;
+	const bind = () => {
+		if (isBinding) return;
+		events.map((event) => {
+			document.addEventListener(event, onDocumentClick);
+		});
+		isBinding = true;
+	};
+	const unbind = () => {
+		if (!isBinding) return;
+		events.map((event) => {
+			document.removeEventListener(event, onDocumentClick);
+		});
+		isBinding = false;
+	};
+	watch(enabled, (enabled) => {
+		bindTimer.clear();
+		if (enabled) bindTimer.set(() => {
+			bind();
+		}, 0);
+		else unbind();
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onUnmounted(() => {
+		unbind();
+	});
+}
+//#endregion
+export { useClickOutside };

package/use/useColorScheme.d.ts

@@ -0,0 +1,11 @@
+import { type App, type ComputedRef, type Ref } from 'vue';
+export type ColorScheme = 'dark' | 'light' | 'auto';
+export type AppliedColorScheme = 'dark' | 'light';
+interface ColorSchemeContext {
+    colorScheme: Ref<ColorScheme>;
+    appliedColorScheme: ComputedRef<AppliedColorScheme>;
+}
+export declare function isColorScheme(t: string): t is ColorScheme;
+export declare function provideColorScheme(app: App): ColorSchemeContext;
+export declare function useColorScheme(): ColorSchemeContext;
+export {};

package/use/useColorScheme.js

@@ -0,0 +1,38 @@
+import { computed, inject, ref, watch } from "vue";
+//#region packages/sard/use/useColorScheme.ts
+const colorSchemeContextSymbol = Symbol("colorSchemeContext");
+const colorSchemeKey = "Sard:colorScheme";
+const darkCls = "dark";
+function isColorScheme(t) {
+	return /^(?:dark|light|auto)$/.test(t);
+}
+function provideColorScheme(app) {
+	const storageKey = localStorage.getItem(colorSchemeKey);
+	const colorScheme = ref(storageKey && isColorScheme(storageKey) ? storageKey : "auto");
+	const appliedColorScheme = ref("light");
+	const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+	const handleChange = (event) => {
+		if (colorScheme.value === "auto") appliedColorScheme.value = event.matches ? "dark" : "light";
+	};
+	mediaQueryList.addEventListener("change", handleChange);
+	watch(colorScheme, () => {
+		if (colorScheme.value === "auto") appliedColorScheme.value = mediaQueryList.matches ? "dark" : "light";
+		else appliedColorScheme.value = colorScheme.value;
+		localStorage.setItem(colorSchemeKey, colorScheme.value);
+	}, { immediate: true });
+	watch(appliedColorScheme, () => {
+		if (appliedColorScheme.value === "dark") document.documentElement.classList.add(darkCls);
+		else document.documentElement.classList.remove(darkCls);
+	}, { immediate: true });
+	const context = {
+		colorScheme,
+		appliedColorScheme: computed(() => appliedColorScheme.value)
+	};
+	app.provide(colorSchemeContextSymbol, context);
+	return context;
+}
+function useColorScheme() {
+	return inject(colorSchemeContextSymbol);
+}
+//#endregion
+export { isColorScheme, provideColorScheme, useColorScheme };

package/use/useComposition.d.ts

@@ -0,0 +1,11 @@
+interface UseCompositionOptions {
+    afterComposition: (event: CompositionEvent) => void;
+    emit?: ((event: 'compositionstart', evt: CompositionEvent) => void) & ((event: 'compositionupdate', evt: CompositionEvent) => void) & ((event: 'compositionend', evt: CompositionEvent) => void);
+}
+export declare function useComposition({ afterComposition, emit }: UseCompositionOptions): {
+    isComposing: import("vue").Ref<boolean, boolean>;
+    onCompositionStart: (event: CompositionEvent) => void;
+    onCompositionUpdate: (event: CompositionEvent) => void;
+    onCompositionEnd: (event: CompositionEvent) => void;
+};
+export {};

package/use/useComposition.js

@@ -0,0 +1,31 @@
+import { isKorean } from "../utils/string.js";
+import { nextTick, ref } from "vue";
+//#region packages/sard/use/useComposition.ts
+function useComposition({ afterComposition, emit }) {
+	const isComposing = ref(false);
+	const onCompositionStart = (event) => {
+		emit?.("compositionstart", event);
+		isComposing.value = true;
+	};
+	const onCompositionUpdate = (event) => {
+		emit?.("compositionupdate", event);
+		const text = event.target?.value;
+		const lastCharacter = text[text.length - 1] || "";
+		isComposing.value = !isKorean(lastCharacter);
+	};
+	const onCompositionEnd = (event) => {
+		emit?.("compositionend", event);
+		if (isComposing.value) {
+			isComposing.value = false;
+			nextTick(() => afterComposition(event));
+		}
+	};
+	return {
+		isComposing,
+		onCompositionStart,
+		onCompositionUpdate,
+		onCompositionEnd
+	};
+}
+//#endregion
+export { useComposition };

package/use/useDragPinch.d.ts

@@ -0,0 +1,10 @@
+export interface UseTouchOptions {
+    onOffset?: (offsetX: number, offsetY: number, event: TouchEvent) => void;
+    onScale?: (originX: number, originY: number, scale: number) => void;
+    onCapture?: () => void;
+    onRelease?: (v: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare function useDragPinch(options: UseTouchOptions): readonly [(event: TouchEvent) => void, (event: TouchEvent) => void, (event: TouchEvent) => void];

package/use/useDragPinch.js

@@ -0,0 +1,82 @@
+import { getTwoPointsDistance } from "../utils/geometry.js";
+import { useInitialVelocity } from "./useInitialVelocity.js";
+//#region packages/sard/use/useDragPinch.ts
+function getPoint(touch) {
+	return {
+		x: touch.clientX,
+		y: touch.clientY
+	};
+}
+function getCenterPoint(touches) {
+	const points = Array.from(touches).map(getPoint);
+	const firstPoint = points[0];
+	if (points.length === 0) return firstPoint;
+	return points.slice(1).reduce((centerPoint, point) => {
+		return {
+			x: (point.x - centerPoint.x) / 2 + centerPoint.x,
+			y: (point.y - centerPoint.y) / 2 + centerPoint.y
+		};
+	}, firstPoint);
+}
+function getScalePoints(touches) {
+	const points = Array.from(touches).map(getPoint);
+	if (points.length < 2) return null;
+	else if (points.length === 2) return points;
+	return [points.slice(1, -1).reduce((centerPoint, point) => {
+		return {
+			x: (point.x - centerPoint.x) / 2 + centerPoint.x,
+			y: (point.y - centerPoint.y) / 2 + centerPoint.y
+		};
+	}, points[0]), points[points.length - 1]];
+}
+function useDragPinch(options) {
+	const { onOffset, onScale, onCapture, onRelease } = options;
+	const initVelocity = useInitialVelocity();
+	let prevCenter = {
+		x: 0,
+		y: 0
+	};
+	let prevScalePoints = null;
+	const onTouchStart = (event) => {
+		if (event.touches.length === 1) {
+			const { clientX, clientY } = event.touches[0];
+			initVelocity.start(clientX, clientY);
+		}
+		prevCenter = getCenterPoint(event.touches);
+		prevScalePoints = getScalePoints(event.touches);
+		onCapture?.();
+	};
+	const onTouchMove = (event) => {
+		const currCenterPoint = getCenterPoint(event.touches);
+		const offsetX = currCenterPoint.x - prevCenter.x;
+		const offsetY = currCenterPoint.y - prevCenter.y;
+		prevCenter = currCenterPoint;
+		onOffset?.(offsetX, offsetY, event);
+		const currScalePoints = getScalePoints(event.touches);
+		if (prevScalePoints && currScalePoints) {
+			const prevDistance = getTwoPointsDistance(...prevScalePoints);
+			const scale = (getTwoPointsDistance(...currScalePoints) - prevDistance) / prevDistance;
+			onScale?.(currCenterPoint.x, currCenterPoint.y, scale);
+		}
+		prevScalePoints = currScalePoints;
+		if (event.touches.length === 1) {
+			const { clientX, clientY } = event.touches[0];
+			initVelocity.move(clientX, clientY);
+		}
+	};
+	const onTouchEnd = (event) => {
+		prevCenter = getCenterPoint(event.touches);
+		prevScalePoints = getScalePoints(event.touches);
+		if (event.touches.length === 0) {
+			const velocity = initVelocity.end();
+			onRelease?.(velocity);
+		}
+	};
+	return [
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd
+	];
+}
+//#endregion
+export { useDragPinch };

package/use/useElementScroll.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function useElementScroll(el: Ref<HTMLElement | null | undefined>, callback: () => void): void;

package/use/useElementScroll.js

@@ -0,0 +1,19 @@
+import { onBeforeUnmount, watch } from "vue";
+//#region packages/sard/use/useElementScroll.ts
+function useElementScroll(el, callback) {
+	const handleScroll = () => {
+		callback();
+	};
+	watch(el, (el, old) => {
+		if (old) old.removeEventListener("scroll", handleScroll);
+		if (el) el.addEventListener("scroll", handleScroll);
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(() => {
+		if (el.value) el.value.removeEventListener("scroll", handleScroll);
+	});
+}
+//#endregion
+export { useElementScroll };

package/use/useImperative.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+type ImperativeItem<T = any> = {
+    show: boolean;
+    imperative: T;
+};
+type AllImperatives<T = any> = Record<string, Record<string, ImperativeItem<T>[] | undefined> | undefined>;
+export declare function useImperative<T = any>(name: string, imperative: T, id: Ref<string>): void;
+export declare function getAvailableImperative<T = any>(name: string, id: string): T | void;
+export declare function getImperatives<T = any>(name: string, id: string): ImperativeItem<T>[] | undefined;
+export declare function getAllImperatives<T = any>(): AllImperatives<T>;
+export {};

package/use/useImperative.js

@@ -0,0 +1,44 @@
+import { onMounted, onUnmounted } from "vue";
+//#region packages/sard/use/useImperative.ts
+const allImperatives = {};
+function useImperative(name, imperative, id) {
+	onMounted(() => {
+		if (id.value) {
+			const imperativeItems = (allImperatives[name] ??= {})[id.value] ??= [];
+			if (imperativeItems.findIndex((item) => item.imperative === imperative) === -1) imperativeItems.push({
+				imperative,
+				show: true
+			});
+		}
+	});
+	onUnmounted(() => {
+		if (id.value) {
+			const imperativeItems = allImperatives[name]?.[id.value];
+			if (imperativeItems) {
+				const index = imperativeItems.findIndex((item) => item.imperative === imperative);
+				if (index !== -1) {
+					imperativeItems.splice(index, 1);
+					if (imperativeItems.length === 0) delete allImperatives[name]?.[id.value];
+				}
+			}
+		}
+	});
+}
+function getAvailableImperative(name, id) {
+	const imperativeItems = allImperatives[name]?.[id];
+	if (imperativeItems) {
+		for (let i = imperativeItems.length - 1; i >= 0; i--) {
+			const imperativeItem = imperativeItems[i];
+			if (imperativeItem && imperativeItem.show) return imperativeItem.imperative;
+		}
+		return imperativeItems[imperativeItems.length - 1]?.imperative;
+	}
+}
+function getImperatives(name, id) {
+	return allImperatives[name]?.[id];
+}
+function getAllImperatives() {
+	return allImperatives;
+}
+//#endregion
+export { getAllImperatives, getAvailableImperative, getImperatives, useImperative };

package/use/useIndeterminate.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRef, type Ref } from 'vue';
+export declare function useIndeterminate(value: Ref<any[]>, options: MaybeRef<{
+    label: any;
+    value: any;
+    disabled?: boolean;
+}[]>): {
+    allChecked: Ref<boolean, boolean>;
+    isIndeterminate: import("vue").ComputedRef<boolean>;
+    onAllChange: (checked: boolean) => void;
+};

package/use/useIndeterminate.js

@@ -0,0 +1,26 @@
+import { computed, ref, unref, watch } from "vue";
+//#region packages/sard/use/useIndeterminate.ts
+function useIndeterminate(value, options) {
+	const filterOptions = computed(() => {
+		return unref(options).filter((option) => !option.disabled);
+	});
+	const checkedLength = computed(() => value.value?.length || 0);
+	const optionsLength = computed(() => unref(filterOptions)?.length || 0);
+	const allChecked = ref(false);
+	const isIndeterminate = computed(() => {
+		return checkedLength.value > 0 && checkedLength.value < optionsLength.value;
+	});
+	const onAllChange = (checked) => {
+		value.value = checked ? unref(filterOptions).map((option) => option.value) : [];
+	};
+	watch([checkedLength, optionsLength], () => {
+		allChecked.value = checkedLength.value === optionsLength.value;
+	}, { immediate: true });
+	return {
+		allChecked,
+		isIndeterminate,
+		onAllChange
+	};
+}
+//#endregion
+export { useIndeterminate };

package/use/useInitialVelocity.d.ts

@@ -0,0 +1,8 @@
+export declare function useInitialVelocity(): {
+    start: (x: number, y: number) => void;
+    move: (x: number, y: number) => void;
+    end: () => {
+        x: number;
+        y: number;
+    };
+};

package/use/useInitialVelocity.js

@@ -0,0 +1,88 @@
+//#region packages/sard/use/useInitialVelocity.ts
+const VELOCITY_WINDOW_MS = 100;
+function useInitialVelocity() {
+	const samples = [];
+	let lastPoint = null;
+	/**
+	* 开始记录（pointerdown 时调用）。
+	*
+	* @param point 当前触摸点的绝对坐标
+	*/
+	function start(x, y) {
+		lastPoint = {
+			x,
+			y
+		};
+		samples.length = 0;
+	}
+	/**
+	* 记录一次位移（pointermove 时调用）。
+	*
+	* 内部自动计算与上一次位置的增量。
+	*
+	* @param point 当前触摸点的绝对坐标
+	*/
+	function move(x, y) {
+		if (!lastPoint) return;
+		const now = Date.now();
+		const deltaX = x - lastPoint.x;
+		const deltaY = y - lastPoint.y;
+		lastPoint = {
+			x,
+			y
+		};
+		samples.push({
+			x: deltaX,
+			y: deltaY,
+			time: now
+		});
+		const cutoff = now - VELOCITY_WINDOW_MS;
+		while (samples.length && samples[0].time < cutoff) samples.shift();
+	}
+	/**
+	* 估算手指释放瞬间的速度（pointerup 时调用）。
+	*
+	* 基于最近 100ms 内的总位移 / 总时间。
+	*
+	* @returns 速度对象 { x, y }，单位 px/ms。采样不足时返回 { x: 0, y: 0 }。
+	*/
+	function end() {
+		if (samples.length < 2) {
+			samples.length = 0;
+			lastPoint = null;
+			return {
+				x: 0,
+				y: 0
+			};
+		}
+		const cutoff = Date.now() - VELOCITY_WINDOW_MS;
+		let start = 0;
+		while (start < samples.length && samples[start].time < cutoff) start++;
+		const windowSamples = samples.slice(start);
+		samples.length = 0;
+		lastPoint = null;
+		if (windowSamples.length < 2) return {
+			x: 0,
+			y: 0
+		};
+		const first = windowSamples[0];
+		const totalTime = windowSamples[windowSamples.length - 1].time - first.time;
+		let totalX = 0;
+		let totalY = 0;
+		for (const s of windowSamples) {
+			totalX += s.x;
+			totalY += s.y;
+		}
+		return {
+			x: totalTime > 0 ? totalX / totalTime : 0,
+			y: totalTime > 0 ? totalY / totalTime : 0
+		};
+	}
+	return {
+		start,
+		move,
+		end
+	};
+}
+//#endregion
+export { useInitialVelocity };

package/use/useIntersectionObserver.d.ts

@@ -0,0 +1,15 @@
+import { type Ref, type MaybeRefOrGetter } from 'vue';
+export interface UseIntersectionObserverOptions {
+    target?: MaybeRefOrGetter<Element | null>;
+    root?: MaybeRefOrGetter<Element | Document | null>;
+    rootMargin?: MaybeRefOrGetter<string>;
+    threshold?: MaybeRefOrGetter<number | number[]>;
+}
+export interface UseIntersectionObserverReturn {
+    isIntersecting: Ref<boolean>;
+    intersectionRatio: Ref<number>;
+    observe: () => void;
+    unobserve: () => void;
+    stop: () => void;
+}
+export declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;

package/use/useIntersectionObserver.js

@@ -0,0 +1,74 @@
+import { computed, onUnmounted, ref, toValue, watch } from "vue";
+//#region packages/sard/use/useIntersectionObserver.ts
+function useIntersectionObserver(options = {}) {
+	const root = computed(() => toValue(options.root));
+	const rootMargin = computed(() => toValue(options.rootMargin));
+	const threshold = computed(() => toValue(options.threshold));
+	const target = computed(() => toValue(options.target));
+	const isIntersecting = ref(false);
+	const intersectionRatio = ref(0);
+	let observer = null;
+	const callback = (entries) => {
+		entries.forEach((entry) => {
+			isIntersecting.value = entry.isIntersecting;
+			intersectionRatio.value = entry.intersectionRatio;
+		});
+	};
+	const destroyObserver = () => {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	};
+	const createObserver = () => {
+		destroyObserver();
+		observer = new IntersectionObserver(callback, {
+			root: root.value,
+			rootMargin: rootMargin.value,
+			threshold: threshold.value
+		});
+		if (target.value) observer.observe(target.value);
+	};
+	const observe = () => {
+		if (!observer) createObserver();
+		if (observer && target.value) observer.observe(target.value);
+	};
+	const unobserve = () => {
+		if (observer && target.value) observer.unobserve(target.value);
+	};
+	const stop = () => {
+		unobserve();
+		destroyObserver();
+		isIntersecting.value = false;
+		intersectionRatio.value = 0;
+	};
+	watch([
+		root,
+		rootMargin,
+		threshold
+	], () => {
+		createObserver();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(target, (newTarget, oldTarget) => {
+		if (oldTarget && observer) observer.unobserve(oldTarget);
+		if (newTarget && observer) observer.observe(newTarget);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onUnmounted(() => {
+		stop();
+	});
+	return {
+		isIntersecting,
+		intersectionRatio,
+		observe,
+		unobserve,
+		stop
+	};
+}
+//#endregion
+export { useIntersectionObserver };

package/use/useKeyList.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRef } from 'vue';
+export declare function useKeyList<T>(list: MaybeRef<T[]>): import("vue").ComputedRef<{
+    data: import("vue").UnwrapRef<T>;
+    key: string;
+}[]>;

package/use/useKeyList.js

@@ -0,0 +1,18 @@
+import { uniqid } from "../utils/string.js";
+import { computed, reactive, unref } from "vue";
+//#region packages/sard/use/useKeyList.ts
+function useKeyList(list) {
+	const keyMap = /* @__PURE__ */ new WeakMap();
+	return computed(() => {
+		return unref(list).map((item) => {
+			const key = keyMap.get(item) || uniqid();
+			keyMap.set(item, key);
+			return reactive({
+				data: item,
+				key
+			});
+		});
+	});
+}
+//#endregion
+export { useKeyList };

package/use/useLockScroll.d.ts

@@ -0,0 +1,2 @@
+import { type MaybeRefOrGetter } from 'vue';
+export declare function useLockScroll(_visible: MaybeRefOrGetter<boolean>, lockScroll?: boolean): void;