sard 1.0.0 → 1.0.2

package/use/usePopper.js

@@ -0,0 +1,242 @@
+import { clamp } from "../utils/number.js";
+import { isRectEqual } from "../utils/geometry.js";
+import { onBeforeUnmount, reactive, watch } from "vue";
+import { ticker } from "lwa";
+//#region packages/sard/use/usePopper.ts
+const directions = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function usePopper(referenceRef, floatingRef, enabledRef, options) {
+	const { arrowSize, position, refGap, viewportGap } = options;
+	const arrowPos = reactive({
+		left: 0,
+		top: 0
+	});
+	const floatingPos = reactive({
+		left: 0,
+		top: 0
+	});
+	let cleanupAu = null;
+	function cleanup() {
+		if (cleanupAu) {
+			cleanupAu();
+			cleanupAu = null;
+		}
+	}
+	function mayComputePosition() {
+		cleanup();
+		const reference = referenceRef.value;
+		const floating = floatingRef.value;
+		if (reference && floating) cleanupAu = autoUpdate(reference, floating, () => {
+			const [floatingPosition, arrowPosition] = computePosition(reference.getBoundingClientRect(), {
+				width: floating.offsetWidth,
+				height: floating.offsetHeight
+			}, {
+				position: position(),
+				refGap: refGap(),
+				viewportGap: viewportGap(),
+				arrowSize
+			});
+			Object.assign(floatingPos, floatingPosition);
+			Object.assign(arrowPos, arrowPosition);
+		});
+	}
+	watch([
+		referenceRef,
+		floatingRef,
+		enabledRef,
+		position,
+		refGap,
+		viewportGap
+	], ([reference, floating, enabled]) => {
+		if (reference && floating && enabled) mayComputePosition();
+		else cleanup();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onBeforeUnmount(() => {
+		cleanup();
+	});
+	return [floatingPos, arrowPos];
+}
+function getReverseDirection(direction) {
+	const index = directions.indexOf(direction);
+	return directions[index + 2] ?? directions[index - 2];
+}
+function getAxis(direction) {
+	return ["top", "bottom"].includes(direction) ? "left" : "top";
+}
+function getCrossAxis(axis) {
+	return axis === "top" ? "left" : "top";
+}
+function getSizeNameByAxis(axis) {
+	return axis === "top" ? "height" : "width";
+}
+function getArrowCrossOffset(direction, size) {
+	return {
+		top() {
+			return size.height;
+		},
+		right() {
+			return 0;
+		},
+		bottom() {
+			return 0;
+		},
+		left() {
+			return size.width;
+		}
+	}[direction]();
+}
+function computePosition(refRect, floatingSize, { refGap, position, viewportGap, arrowSize }) {
+	const breadth = floatingSize.width + refGap;
+	const thickness = floatingSize.height + refGap;
+	const windowWidth = window.innerWidth;
+	const windowHeight = window.innerHeight;
+	const gapBoundaries = {
+		top: refRect.top - thickness - viewportGap,
+		right: windowWidth - refRect.right - breadth - viewportGap,
+		bottom: windowHeight - refRect.bottom - thickness - viewportGap,
+		left: refRect.left - breadth - viewportGap
+	};
+	let [direction, side] = position.split("-");
+	if (gapBoundaries[direction] < 0) {
+		direction = getReverseDirection(direction);
+		if (gapBoundaries[direction] < 0) direction = getReverseDirection(direction);
+	}
+	side = side || "center";
+	const axis = getAxis(direction);
+	const crossAxis = getCrossAxis(axis);
+	const axisSizeName = getSizeNameByAxis(axis);
+	const axisWindowSize = axis === "top" ? windowHeight : windowWidth;
+	const floatingPosition = {
+		top: 0,
+		left: 0
+	};
+	function getSideOffset() {
+		let offset = {
+			start() {
+				return refRect[axis];
+			},
+			center() {
+				return refRect[axis] - (floatingSize[axisSizeName] - refRect[axisSizeName]) / 2;
+			},
+			end() {
+				return refRect[axis] - (floatingSize[axisSizeName] - refRect[axisSizeName]);
+			}
+		}[side]();
+		offset = clamp(offset, viewportGap, axisWindowSize - floatingSize[axisSizeName] - viewportGap);
+		offset = clamp(offset, refRect[axis] - floatingSize[axisSizeName] + arrowSize * 2, refRect[axis] + refRect[axisSizeName] - arrowSize * 2);
+		return offset;
+	}
+	function getDirectionOffset() {
+		return {
+			top() {
+				return refRect.top - refGap - floatingSize.height;
+			},
+			right() {
+				return refRect.right + refGap;
+			},
+			bottom() {
+				return refRect.bottom + refGap;
+			},
+			left() {
+				return refRect.left - refGap - floatingSize.width;
+			}
+		}[direction]();
+	}
+	floatingPosition[crossAxis] = getDirectionOffset();
+	floatingPosition[axis] = getSideOffset();
+	const finalPopperRect = {
+		top: floatingPosition.top,
+		left: floatingPosition.left,
+		bottom: floatingPosition.top + floatingSize.height,
+		right: floatingPosition.left + floatingSize.width
+	};
+	const arrowPosition = {
+		top: 0,
+		left: 0
+	};
+	function getArrowOffset() {
+		const reverseDirection = getReverseDirection(axis);
+		let extra = refRect[axis] - finalPopperRect[axis];
+		if (extra < 0) extra = 0;
+		const intersection = Math.min(refRect[reverseDirection], finalPopperRect[reverseDirection]) - Math.max(refRect[axis], finalPopperRect[axis]);
+		return clamp(extra + intersection / 2, arrowSize, floatingSize[axisSizeName] - arrowSize);
+	}
+	arrowPosition[axis] = getArrowOffset();
+	arrowPosition[crossAxis] = getArrowCrossOffset(direction, floatingSize);
+	return [floatingPosition, arrowPosition];
+}
+function animationFrameUpdate(update) {
+	function tick() {
+		update();
+	}
+	ticker.add(tick);
+	return () => {
+		ticker.remove(tick);
+	};
+}
+function observeMove(element, onMove) {
+	let io = null;
+	function cleanup() {
+		io?.disconnect();
+		io = null;
+	}
+	function refresh(skip = false) {
+		cleanup();
+		const { left, top, width, height } = element.getBoundingClientRect();
+		if (!skip) onMove();
+		if (!width || !height) return;
+		const insetTop = Math.floor(top);
+		const insetRight = Math.floor(window.innerWidth - (left + width));
+		const insetBottom = Math.floor(window.innerHeight - (top + height));
+		const insetLeft = Math.floor(left);
+		const rootMargin = `${-insetTop}px ${-insetRight}px ${-insetBottom}px ${-insetLeft}px`;
+		function handleObserve(entries) {
+			if (entries[0].intersectionRatio !== 1) refresh();
+		}
+		io = new IntersectionObserver(handleObserve, {
+			root: document,
+			rootMargin,
+			threshold: 1
+		});
+		io.observe(element);
+	}
+	refresh(true);
+	return cleanup;
+}
+function observeResize(element, onResize) {
+	const resizeObserver = new ResizeObserver(() => {
+		onResize();
+	});
+	resizeObserver.observe(element);
+	return () => {
+		resizeObserver.disconnect();
+	};
+}
+function observeRect(target, update) {
+	let prevRefRect;
+	return animationFrameUpdate(() => {
+		const refRect = target.getBoundingClientRect();
+		if (!prevRefRect || !isRectEqual(prevRefRect, refRect)) update();
+		prevRefRect = refRect;
+	});
+}
+function autoUpdate(reference, floating, update) {
+	const cleanupFloatingOr = observeResize(floating, update);
+	const cleanupReferenceOr = reference instanceof Element ? observeResize(reference, update) : null;
+	const cleanup = reference instanceof Element ? observeMove(reference, update) : observeRect(reference, update);
+	update();
+	return () => {
+		cleanupFloatingOr();
+		cleanupReferenceOr?.();
+		cleanup();
+	};
+}
+//#endregion
+export { autoUpdate, computePosition, usePopper };

package/use/useReachBottom.d.ts

@@ -0,0 +1 @@
+export declare function useReachBottom(callback: () => void, distance?: number): void;

package/use/useReachBottom.js

@@ -0,0 +1,14 @@
+import { usePageScroll } from "./usePageScroll.js";
+//#region packages/sard/use/useReachBottom.ts
+function useReachBottom(callback, distance = 1) {
+	const isScrollToBottom = () => {
+		const scrollTop = document.documentElement.scrollTop;
+		const { clientHeight, scrollHeight } = document.documentElement;
+		return scrollTop + clientHeight >= scrollHeight - distance;
+	};
+	usePageScroll(() => {
+		if (isScrollToBottom()) callback();
+	});
+}
+//#endregion
+export { useReachBottom };

package/use/useResizeObserver.d.ts

@@ -0,0 +1,10 @@
+import { type Ref, type MaybeRefOrGetter } from 'vue';
+interface Size {
+    width: number;
+    height: number;
+}
+export declare function useResizeObserver(target: Ref<Element | null>, callback?: (size: Size) => void, disabled?: MaybeRefOrGetter<boolean>): {
+    width: number;
+    height: number;
+};
+export {};

package/use/useResizeObserver.js

@@ -0,0 +1,34 @@
+import { onMounted, onUnmounted, reactive, toValue, watch } from "vue";
+//#region packages/sard/use/useResizeObserver.ts
+function useResizeObserver(target, callback, disabled) {
+	const size = reactive({
+		width: 0,
+		height: 0
+	});
+	const observer = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const contentSize = entry.contentBoxSize[0];
+			Object.assign(size, {
+				width: contentSize.inlineSize,
+				height: contentSize.blockSize
+			});
+			callback?.(size);
+		}
+	});
+	const observe = () => {
+		observer.disconnect();
+		if (target.value && !toValue(disabled)) observer.observe(target.value);
+	};
+	watch([target, () => toValue(disabled)], () => {
+		observe();
+	}, { immediate: true });
+	onMounted(() => {
+		observe();
+	});
+	onUnmounted(() => {
+		observer.disconnect();
+	});
+	return size;
+}
+//#endregion
+export { useResizeObserver };

package/use/useRtl.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'vue';
+export declare function useRtl(elRef?: Ref<HTMLElement | null | undefined>): Ref<boolean, boolean>;

package/use/useRtl.js

@@ -0,0 +1,31 @@
+import { checkRtl } from "../utils/dom.js";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region packages/sard/use/useRtl.ts
+function useRtl(elRef) {
+	const isRtl = ref(checkRtl(document.documentElement));
+	let observer = null;
+	const observe = (el) => {
+		observer?.disconnect();
+		observer = new MutationObserver(() => {
+			isRtl.value = checkRtl(el);
+		});
+		observer.observe(el, {
+			attributes: true,
+			attributeFilter: ["dir"]
+		});
+	};
+	const update = () => {
+		const el = elRef?.value || document.documentElement;
+		isRtl.value = checkRtl(el);
+		observe(document.documentElement);
+	};
+	onMounted(() => nextTick(update));
+	if (elRef) watch(elRef, update);
+	onBeforeUnmount(() => {
+		observer?.disconnect();
+		observer = null;
+	});
+	return isRtl;
+}
+//#endregion
+export { useRtl };

package/use/useScrollSide.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+type Side = 'start' | 'none' | 'end' | 'both';
+export declare function useScrollSide(elRef: Ref<HTMLElement | null | undefined>, options?: {
+    direction?: 'vertical' | 'horizontal' | 'both';
+    distance?: number;
+}): {
+    horizontal: Side;
+    vertical: Side;
+};
+export {};

package/use/useScrollSide.js

@@ -0,0 +1,49 @@
+import { useElementScroll } from "./useElementScroll.js";
+import { onMounted, reactive } from "vue";
+//#region packages/sard/use/useScrollSide.ts
+function useScrollSide(elRef, options = {}) {
+	const { distance = 1, direction = "vertical" } = options;
+	const side = reactive({
+		vertical: "both",
+		horizontal: "both"
+	});
+	const updateHorizontalSide = (el) => {
+		const scrollLeft = Math.abs(el.scrollLeft);
+		const clientWidth = el.clientWidth;
+		const scrollWidth = el.scrollWidth;
+		if (scrollWidth <= clientWidth) side.horizontal = "both";
+		else if (scrollLeft <= distance) side.horizontal = "start";
+		else if (scrollLeft + clientWidth >= scrollWidth - distance) side.horizontal = "end";
+		else side.horizontal = "none";
+	};
+	const updateVerticalSide = (el) => {
+		const scrollTop = el.scrollTop;
+		const clientHeight = el.clientHeight;
+		const scrollHeight = el.scrollHeight;
+		if (scrollHeight <= clientHeight) side.vertical = "both";
+		else if (scrollTop <= distance) side.vertical = "start";
+		else if (scrollTop + clientHeight >= scrollHeight - distance) side.vertical = "end";
+		else side.vertical = "none";
+	};
+	const updateSide = (el) => {
+		if (direction === "vertical") updateVerticalSide(el);
+		else if (direction === "horizontal") updateHorizontalSide(el);
+		else {
+			updateVerticalSide(el);
+			updateHorizontalSide(el);
+		}
+	};
+	const handleScroll = (el) => {
+		updateSide(el);
+	};
+	useElementScroll(elRef, () => {
+		const el = elRef.value;
+		if (el) handleScroll(el);
+	});
+	onMounted(() => {
+		if (elRef.value) updateSide(elRef.value);
+	});
+	return side;
+}
+//#endregion
+export { useScrollSide };

package/use/useScrollSpy.d.ts

@@ -0,0 +1,16 @@
+import { type Ref } from 'vue';
+export interface UseScrollSpyOptions {
+    defaultCurrent?: string | number;
+    getSpiedRect: () => DOMRect;
+    initialScroll?: boolean;
+    startOffset?: number;
+    onChange?: (name: string | number) => void;
+}
+export declare function useScrollSpy(el: Ref<HTMLElement | null | undefined>, options: UseScrollSpyOptions): {
+    innerCurrent: Ref<string | number | undefined, string | number | undefined>;
+    anchorRectList: import("vue").ShallowRef<[string | number, DOMRect][], [string | number, DOMRect][]>;
+    register: (name: string | number, getRect: () => DOMRect) => void;
+    unregister: (name: string | number) => void;
+    scrollTo: (name: string | number) => void;
+    update: () => void;
+};

package/use/useScrollSpy.js

@@ -0,0 +1,98 @@
+import { isNullish } from "../utils/is.js";
+import { matchScrollVisible } from "../utils/geometry.js";
+import { useTimeout } from "./useTimeout.js";
+import { useElementScroll } from "./useElementScroll.js";
+import { usePopupEnter } from "../components/popup/common.js";
+import { computed, nextTick, onMounted, ref, shallowRef } from "vue";
+//#region packages/sard/use/useScrollSpy.ts
+function useScrollSpy(el, options) {
+	const { defaultCurrent, initialScroll, onChange, getSpiedRect } = options;
+	const startOffset = computed(() => options.startOffset || 0);
+	let memoScrollTop = 0;
+	const innerCurrent = ref(defaultCurrent);
+	const anchorRectList = shallowRef([]);
+	const anchorMap = /* @__PURE__ */ new Map();
+	let lockScroll = false;
+	let requestUpdate = false;
+	const queueUpdate = () => {
+		if (requestUpdate) return;
+		requestUpdate = true;
+		nextTick(() => {
+			requestUpdate = false;
+			update();
+		});
+	};
+	const lockTimer = useTimeout();
+	const register = (name, getRect) => {
+		anchorMap.set(name, getRect);
+		queueUpdate();
+	};
+	const unregister = (name) => {
+		anchorMap.delete(name);
+		queueUpdate();
+	};
+	const calcPosition = (offset) => {
+		matchScrollVisible(anchorRectList.value.map((item) => item[1]), (index) => {
+			const name = anchorRectList.value[index][0];
+			if (name !== innerCurrent.value) {
+				innerCurrent.value = name;
+				onChange?.(name);
+			}
+		}, { offset });
+	};
+	useElementScroll(el, () => {
+		memoScrollTop = el.value.scrollTop;
+		if (lockScroll) return;
+		calcPosition(el.value.scrollTop + startOffset.value);
+	});
+	const scrollTo = (name) => {
+		if (anchorRectList.value.length > 0) {
+			const item = anchorRectList.value.find((item) => item[0] === name);
+			if (item) {
+				const nextScrollTop = item[1].top - startOffset.value;
+				el.value.scrollTop = nextScrollTop;
+				lockScroll = true;
+				lockTimer.set(() => {
+					lockScroll = false;
+				}, 150);
+			}
+		}
+	};
+	const getAllAnchorRect = () => {
+		return [...anchorMap].map(([name, getRect]) => {
+			return [name, getRect()];
+		}).sort((a, b) => {
+			return a[1].top - b[1].top;
+		});
+	};
+	const calcRect = () => {
+		const spiedRect = getSpiedRect();
+		anchorRectList.value = getAllAnchorRect().map(([name, rect]) => {
+			return [name, new DOMRect(rect.x, rect.top - spiedRect.top + memoScrollTop, rect.width, rect.height)];
+		});
+	};
+	const update = () => {
+		calcRect();
+	};
+	const initialize = () => {
+		calcRect();
+		if (isNullish(innerCurrent.value)) innerCurrent.value = anchorRectList.value[0]?.[0];
+		if (initialScroll) scrollTo(innerCurrent.value);
+	};
+	usePopupEnter(() => {
+		queueUpdate();
+	});
+	onMounted(() => {
+		initialize();
+	});
+	return {
+		innerCurrent,
+		anchorRectList,
+		register,
+		unregister,
+		scrollTo,
+		update: queueUpdate
+	};
+}
+//#endregion
+export { useScrollSpy };

package/use/useSimulatedClick.d.ts

@@ -0,0 +1,6 @@
+export declare function useSimulatedClick(options: {
+    onClick?: (event: TouchEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    duration?: number;
+}): readonly [(event: TouchEvent) => void, (event: TouchEvent) => void];

package/use/useSimulatedClick.js

@@ -0,0 +1,38 @@
+import { getTwoPointsDistance } from "../utils/geometry.js";
+import { useTimeout } from "./useTimeout.js";
+//#region packages/sard/use/useSimulatedClick.ts
+const errorValue = 10;
+function useSimulatedClick(options) {
+	const { duration = 1e3, onTouchStart, onTouchEnd, onClick } = options;
+	let timeout = false;
+	let downCoord = {
+		x: 0,
+		y: 0
+	};
+	const timer = useTimeout();
+	const _onTouchStart = (event) => {
+		onTouchStart?.(event);
+		downCoord = {
+			x: event.touches[0].clientX,
+			y: event.touches[0].clientY
+		};
+		timer.set(() => {
+			timeout = true;
+		}, duration);
+	};
+	const _onTouchEnd = (event) => {
+		onTouchEnd?.(event);
+		timer.clear();
+		if (!timeout) {
+			const upCoord = {
+				x: event.changedTouches[0].clientX,
+				y: event.changedTouches[0].clientY
+			};
+			if (getTwoPointsDistance(downCoord, upCoord) <= errorValue) onClick?.(event);
+		}
+		timeout = false;
+	};
+	return [_onTouchStart, _onTouchEnd];
+}
+//#endregion
+export { useSimulatedClick };

package/use/useSimulatedDblClick.d.ts

@@ -0,0 +1,4 @@
+export declare function useSimulatedDblClick(options: {
+    onDblClick?: (x: number, y: number) => void;
+    onClick?: (x: number, y: number) => void;
+}): readonly [(event: TouchEvent) => void, (event: TouchEvent) => void];

package/use/useSimulatedDblClick.js

@@ -0,0 +1,37 @@
+import { getTwoPointsDistance } from "../utils/geometry.js";
+import { useTimeout } from "./useTimeout.js";
+//#region packages/sard/use/useSimulatedDblClick.ts
+const ERROR_VALUE = 10;
+const MIN_TIME = 350;
+function useSimulatedDblClick(options) {
+	const { onDblClick, onClick } = options;
+	let downCoord = {
+		x: 0,
+		y: 0
+	};
+	let startTime = 0;
+	const timer = useTimeout();
+	const onTouchStart = (event) => {
+		startTime = Date.now();
+		downCoord = {
+			x: event.touches[0].clientX,
+			y: event.touches[0].clientY
+		};
+	};
+	const onTouchEnd = (event) => {
+		if (event.touches.length) return;
+		const upCoord = {
+			x: event.changedTouches[0].clientX,
+			y: event.changedTouches[0].clientY
+		};
+		if (getTwoPointsDistance(downCoord, upCoord) < ERROR_VALUE && Date.now() - startTime < MIN_TIME) if (timer.isPending) {
+			timer.clear();
+			onDblClick?.(downCoord.x, downCoord.y);
+		} else timer.set(() => {
+			onClick?.(downCoord.x, downCoord.y);
+		}, MIN_TIME);
+	};
+	return [onTouchStart, onTouchEnd];
+}
+//#endregion
+export { useSimulatedDblClick };

package/use/useSimulatedPress.d.ts

@@ -0,0 +1,12 @@
+export interface UseSimulatedPressOptions {
+    start?: () => void;
+    move?: (event: TouchEvent, extra: {
+        delta: {
+            x: number;
+            y: number;
+        };
+    }) => void;
+    end?: () => void;
+    duration?: number;
+}
+export declare function useSimulatedPress(options?: UseSimulatedPressOptions): readonly [(event: TouchEvent) => void, (event: TouchEvent) => void, () => void];

package/use/useSimulatedPress.js

@@ -0,0 +1,49 @@
+import { getTwoPointsDistance } from "../utils/geometry.js";
+import { useTimeout } from "./useTimeout.js";
+//#region packages/sard/use/useSimulatedPress.ts
+function useSimulatedPress(options = {}) {
+	const { start, move, end, duration = 500 } = options;
+	let downCoord = {
+		x: 0,
+		y: 0
+	};
+	let isPressing = false;
+	const pressTimer = useTimeout();
+	const onTouchStart = (event) => {
+		downCoord = {
+			x: event.touches[0].clientX,
+			y: event.touches[0].clientY
+		};
+		pressTimer.set(() => {
+			isPressing = true;
+			start?.();
+		}, duration);
+	};
+	const onTouchMove = (event) => {
+		const moveCoord = {
+			x: event.touches[0].clientX,
+			y: event.touches[0].clientY
+		};
+		if (isPressing) move?.(event, { delta: {
+			x: moveCoord.x - downCoord.x,
+			y: moveCoord.y - downCoord.y
+		} });
+		else if (pressTimer.isPending) {
+			if (getTwoPointsDistance(downCoord, moveCoord) > 10) pressTimer.clear();
+		}
+	};
+	const onTouchEnd = () => {
+		pressTimer.clear();
+		if (isPressing) {
+			isPressing = false;
+			end?.();
+		}
+	};
+	return [
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd
+	];
+}
+//#endregion
+export { useSimulatedPress };

package/use/useSingleTask.d.ts

@@ -0,0 +1,6 @@
+export declare function useSingleTask(): {
+    isWorking: Readonly<import("vue").Ref<boolean, boolean>>;
+    startTask: (task: () => any) => Promise<void>;
+    onFinishTask: (handler: () => any) => void;
+    offFinishTask: (handler: () => any) => void;
+};