@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/hooks/browser.js

@@ -0,0 +1,86 @@
+import { inBrowser } from "../_util/index.js";
+import { useEventListener } from "../_util/hooks/useEventListener.js";
+import { useTimeoutFn } from "./timer.js";
+import { ref, watch } from "vue";
+// src/hooks/browser.ts
+function legacyCopy(text) {
+	const textarea = document.createElement("textarea");
+	textarea.value = text;
+	textarea.setAttribute("readonly", "");
+	textarea.style.cssText = "position:fixed;top:0;left:0;opacity:0;font-size:16px;";
+	document.body.appendChild(textarea);
+	textarea.select();
+	textarea.setSelectionRange(0, text.length);
+	let ok = false;
+	try {
+		ok = document.execCommand("copy");
+	} catch {}
+	document.body.removeChild(textarea);
+	return ok;
+}
+/** Copy text, with a fallback for WebViews without the async Clipboard API. */
+function useClipboard(options = {}) {
+	const { copiedDuring = 1500 } = options;
+	const copied = ref(false);
+	const text = ref("");
+	const timer = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false });
+	async function copy(value) {
+		if (!inBrowser) return false;
+		let ok = false;
+		try {
+			if (navigator.clipboard?.writeText) {
+				await navigator.clipboard.writeText(value);
+				ok = true;
+			}
+		} catch {}
+		if (!ok) ok = legacyCopy(value);
+		if (ok) {
+			text.value = value;
+			copied.value = true;
+			timer.start();
+		}
+		return ok;
+	}
+	return {
+		copy,
+		copied,
+		text
+	};
+}
+/** A ref persisted in `localStorage` (or any Storage). `null` / `undefined` removes the key. */
+function useStorage(key, defaultValue, options = {}) {
+	const { listenToStorageChanges = true } = options;
+	const serializer = options.serializer ?? {
+		read: (raw) => JSON.parse(raw),
+		write: (value) => JSON.stringify(value)
+	};
+	let storage;
+	try {
+		storage = options.storage ?? (inBrowser ? window.localStorage : void 0);
+	} catch {}
+	const read = () => {
+		try {
+			const raw = storage?.getItem(key);
+			return raw === null || raw === void 0 ? defaultValue : serializer.read(raw);
+		} catch {
+			return defaultValue;
+		}
+	};
+	const state = ref(read());
+	let paused = false;
+	watch(state, (value) => {
+		if (paused) return;
+		try {
+			if (value === null || value === void 0) storage?.removeItem(key);
+			else storage?.setItem(key, serializer.write(value));
+		} catch {}
+	}, { deep: true });
+	if (listenToStorageChanges && storage) useEventListener("storage", ((event) => {
+		if (event.key !== key || event.storageArea !== storage) return;
+		paused = true;
+		state.value = read();
+		Promise.resolve().then(() => paused = false);
+	}));
+	return state;
+}
+export { useClipboard, useStorage };

package/dist/hooks/dom.d.ts

@@ -0,0 +1,81 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { MaybeElementRef } from './shared';
+export interface ElementRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/** `getBoundingClientRect()` of an element, a component instance or `window`. */
+export declare function getRect(target: MaybeElementRef | Window): ElementRect;
+/** Reactive bounding rect, measured on mount and on demand with `update()`. */
+export declare function useRect(target: MaybeElementRef): {
+    update: () => {
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    } & ElementRect;
+    top: Ref<number, number>;
+    left: Ref<number, number>;
+    right: Ref<number, number>;
+    bottom: Ref<number, number>;
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+};
+/** Reactive `width` / `height` of an element, kept in sync by a ResizeObserver. */
+export declare function useElementSize(target: MaybeElementRef): {
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+};
+/** Reactive viewport size, updated on resize and orientation change. */
+export declare function useWindowSize(): {
+    width: Ref<number, number>;
+    height: Ref<number, number>;
+};
+/** The nearest scrollable ancestor of an element (`window` when none). */
+export declare function useScrollParent(target: MaybeElementRef, root?: HTMLElement | Window): import("vue").ShallowRef<Window | HTMLElement | undefined, Window | HTMLElement | undefined>;
+/** `'visible' | 'hidden'`: pause timers / animations while the page is in the background. */
+export declare function usePageVisibility(): Ref<DocumentVisibilityState>;
+export interface UseInViewportOptions {
+    root?: MaybeElementRef;
+    rootMargin?: string;
+    threshold?: number | number[];
+    /** stop observing after the first time it becomes visible (lazy loading, exposure tracking) */
+    once?: boolean;
+}
+/** Whether an element intersects the viewport (IntersectionObserver). */
+export declare function useInViewport(target: MaybeElementRef, options?: UseInViewportOptions): {
+    inViewport: Ref<boolean, boolean>;
+    ratio: Ref<number, number>;
+    stop: () => void;
+};
+/** Reactive `matchMedia()` result. */
+export declare function useMediaQuery(query: MaybeRefOrGetter<string>): Ref<boolean>;
+/** Whether the system prefers a dark color scheme. Pair it with `theme.darkAlgorithm`. */
+export declare function usePreferredDark(): Ref<boolean>;
+/** Network status from `navigator.onLine`. */
+export declare function useOnline(): Ref<boolean>;
+export interface SafeAreaInsets {
+    top: Ref<number>;
+    right: Ref<number>;
+    bottom: Ref<number>;
+    left: Ref<number>;
+    update: () => void;
+}
+/** Safe-area insets in px (notch, home indicator), read from `env(safe-area-inset-*)`. */
+export declare function useSafeArea(): SafeAreaInsets;
+export interface UseKeyboardReturn {
+    /** height covered by the on-screen keyboard, in px */
+    height: Ref<number>;
+    open: ComputedRef<boolean>;
+}
+/**
+ * On-screen keyboard height, derived from the VisualViewport API.
+ * Use it to lift a bottom bar or a submit button above the keyboard.
+ */
+export declare function useKeyboard(threshold?: number): UseKeyboardReturn;

package/dist/hooks/dom.js

@@ -0,0 +1,243 @@
+import { getScrollParent, inBrowser } from "../_util/index.js";
+import { useEventListener } from "../_util/hooks/useEventListener.js";
+import { tryOnScopeDispose, unrefElement } from "./shared.js";
+import { computed, onMounted, reactive, ref, shallowRef, toRefs, toValue, watch } from "vue";
+// src/hooks/dom.ts
+var emptyRect = () => ({
+	top: 0,
+	left: 0,
+	right: 0,
+	bottom: 0,
+	width: 0,
+	height: 0
+});
+/** `getBoundingClientRect()` of an element, a component instance or `window`. */
+function getRect(target) {
+	if (!inBrowser) return emptyRect();
+	if (target === window) {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		return {
+			top: 0,
+			left: 0,
+			right: width,
+			bottom: height,
+			width,
+			height
+		};
+	}
+	const el = unrefElement(target);
+	if (!el?.getBoundingClientRect) return emptyRect();
+	const { top, left, right, bottom, width, height } = el.getBoundingClientRect();
+	return {
+		top,
+		left,
+		right,
+		bottom,
+		width,
+		height
+	};
+}
+/** Reactive bounding rect, measured on mount and on demand with `update()`. */
+function useRect(target) {
+	const rect = reactive(emptyRect());
+	const update = () => Object.assign(rect, getRect(target));
+	onMounted(update);
+	return {
+		...toRefs(rect),
+		update
+	};
+}
+/** Reactive `width` / `height` of an element, kept in sync by a ResizeObserver. */
+function useElementSize(target) {
+	const width = ref(0);
+	const height = ref(0);
+	let observer;
+	const cleanup = () => {
+		observer?.disconnect();
+		observer = void 0;
+	};
+	const observe = () => {
+		cleanup();
+		const el = unrefElement(target);
+		if (!el) return;
+		width.value = el.offsetWidth;
+		height.value = el.offsetHeight;
+		if (typeof ResizeObserver === "undefined") return;
+		observer = new ResizeObserver(() => {
+			width.value = el.offsetWidth;
+			height.value = el.offsetHeight;
+		});
+		observer.observe(el);
+	};
+	if (inBrowser) onMounted(() => {
+		observe();
+		watch(() => unrefElement(target), observe);
+	});
+	tryOnScopeDispose(cleanup);
+	return {
+		width,
+		height
+	};
+}
+/** Reactive viewport size, updated on resize and orientation change. */
+function useWindowSize() {
+	const width = ref(inBrowser ? window.innerWidth : 0);
+	const height = ref(inBrowser ? window.innerHeight : 0);
+	const update = () => {
+		width.value = window.innerWidth;
+		height.value = window.innerHeight;
+	};
+	useEventListener("resize", update, { passive: true });
+	useEventListener("orientationchange", update, { passive: true });
+	return {
+		width,
+		height
+	};
+}
+/** The nearest scrollable ancestor of an element (`window` when none). */
+function useScrollParent(target, root) {
+	const scrollParent = shallowRef();
+	onMounted(() => {
+		const el = unrefElement(target);
+		if (el) scrollParent.value = getScrollParent(el, root);
+	});
+	return scrollParent;
+}
+/** `'visible' | 'hidden'`: pause timers / animations while the page is in the background. */
+function usePageVisibility() {
+	const visibility = ref(inBrowser ? document.visibilityState : "visible");
+	if (inBrowser) useEventListener("visibilitychange", () => {
+		visibility.value = document.visibilityState;
+	}, { target: document });
+	return visibility;
+}
+/** Whether an element intersects the viewport (IntersectionObserver). */
+function useInViewport(target, options = {}) {
+	const inViewport = ref(false);
+	const ratio = ref(0);
+	let observer;
+	const stop = () => {
+		observer?.disconnect();
+		observer = void 0;
+	};
+	const observe = () => {
+		stop();
+		const el = unrefElement(target);
+		if (!el || typeof IntersectionObserver === "undefined") return;
+		observer = new IntersectionObserver((entries) => {
+			const entry = entries[entries.length - 1];
+			if (!entry) return;
+			inViewport.value = entry.isIntersecting;
+			ratio.value = entry.intersectionRatio;
+			if (entry.isIntersecting && options.once) stop();
+		}, {
+			root: unrefElement(options.root),
+			rootMargin: options.rootMargin,
+			threshold: options.threshold
+		});
+		observer.observe(el);
+	};
+	if (inBrowser) onMounted(() => {
+		observe();
+		watch(() => unrefElement(target), observe);
+	});
+	tryOnScopeDispose(stop);
+	return {
+		inViewport,
+		ratio,
+		stop
+	};
+}
+/** Reactive `matchMedia()` result. */
+function useMediaQuery(query) {
+	const matches = ref(false);
+	if (!inBrowser || typeof window.matchMedia !== "function") return matches;
+	let mql;
+	const handler = (event) => {
+		matches.value = event.matches;
+	};
+	const cleanup = () => {
+		mql?.removeEventListener?.("change", handler);
+		mql = void 0;
+	};
+	watch(() => toValue(query), (value) => {
+		cleanup();
+		mql = window.matchMedia(value);
+		matches.value = mql.matches;
+		mql.addEventListener?.("change", handler);
+	}, { immediate: true });
+	tryOnScopeDispose(cleanup);
+	return matches;
+}
+/** Whether the system prefers a dark color scheme. Pair it with `theme.darkAlgorithm`. */
+function usePreferredDark() {
+	return useMediaQuery("(prefers-color-scheme: dark)");
+}
+/** Network status from `navigator.onLine`. */
+function useOnline() {
+	const online = ref(inBrowser ? navigator.onLine !== false : true);
+	useEventListener("online", () => online.value = true);
+	useEventListener("offline", () => online.value = false);
+	return online;
+}
+var probe;
+/** Safe-area insets in px (notch, home indicator), read from `env(safe-area-inset-*)`. */
+function useSafeArea() {
+	const top = ref(0);
+	const right = ref(0);
+	const bottom = ref(0);
+	const left = ref(0);
+	const update = () => {
+		if (!inBrowser) return;
+		if (!probe) {
+			probe = document.createElement("div");
+			probe.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);";
+		}
+		document.body.appendChild(probe);
+		const style = window.getComputedStyle(probe);
+		top.value = Number.parseFloat(style.paddingTop) || 0;
+		right.value = Number.parseFloat(style.paddingRight) || 0;
+		bottom.value = Number.parseFloat(style.paddingBottom) || 0;
+		left.value = Number.parseFloat(style.paddingLeft) || 0;
+		document.body.removeChild(probe);
+	};
+	onMounted(update);
+	useEventListener("resize", update, { passive: true });
+	useEventListener("orientationchange", update, { passive: true });
+	return {
+		top,
+		right,
+		bottom,
+		left,
+		update
+	};
+}
+/**
+* On-screen keyboard height, derived from the VisualViewport API.
+* Use it to lift a bottom bar or a submit button above the keyboard.
+*/
+function useKeyboard(threshold = 80) {
+	const height = ref(0);
+	const open = computed(() => height.value > threshold);
+	const viewport = inBrowser ? window.visualViewport : null;
+	if (viewport) {
+		const update = () => {
+			height.value = Math.max(Math.round(window.innerHeight - viewport.height - viewport.offsetTop), 0);
+		};
+		useEventListener("resize", update, {
+			target: viewport,
+			passive: true
+		});
+		useEventListener("scroll", update, {
+			target: viewport,
+			passive: true
+		});
+		onMounted(update);
+	}
+	return {
+		height,
+		open
+	};
+}
+export { getRect, useElementSize, useInViewport, useKeyboard, useMediaQuery, useOnline, usePageVisibility, usePreferredDark, useRect, useSafeArea, useScrollParent, useWindowSize };

package/dist/hooks/fn.d.ts

@@ -0,0 +1,23 @@
+export interface CancelableFn<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): void;
+    /** drop the pending call */
+    cancel: () => void;
+    /** run the pending call now */
+    flush: () => void;
+}
+export interface UseDebounceFnOptions {
+    /** also call on the leading edge */
+    leading?: boolean;
+    /** call on the trailing edge. Default `true`. */
+    trailing?: boolean;
+}
+/** Debounced function, cancelled automatically when the component unmounts. */
+export declare function useDebounceFn<T extends (...args: any[]) => any>(fn: T, wait?: number, options?: UseDebounceFnOptions): CancelableFn<T>;
+export interface UseThrottleFnOptions {
+    /** call on the leading edge. Default `true`. */
+    leading?: boolean;
+    /** call once more with the last arguments after the interval. Default `true`. */
+    trailing?: boolean;
+}
+/** Throttled function, cancelled automatically when the component unmounts. */
+export declare function useThrottleFn<T extends (...args: any[]) => any>(fn: T, wait?: number, options?: UseThrottleFnOptions): CancelableFn<T>;

package/dist/hooks/fn.js

@@ -0,0 +1,86 @@
+import { tryOnScopeDispose } from "./shared.js";
+// src/hooks/fn.ts
+/** Debounced function, cancelled automatically when the component unmounts. */
+function useDebounceFn(fn, wait = 300, options = {}) {
+	const { leading = false, trailing = true } = options;
+	let timer;
+	let pending;
+	const debounced = ((...args) => {
+		const callNow = leading && timer === void 0;
+		pending = args;
+		if (timer !== void 0) clearTimeout(timer);
+		timer = setTimeout(() => {
+			timer = void 0;
+			if (trailing && pending && !callNow) {
+				const last = pending;
+				pending = void 0;
+				fn(...last);
+			}
+			pending = void 0;
+		}, wait);
+		if (callNow) {
+			pending = void 0;
+			fn(...args);
+		}
+	});
+	debounced.cancel = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		pending = void 0;
+	};
+	debounced.flush = () => {
+		if (timer !== void 0 && pending) {
+			const last = pending;
+			debounced.cancel();
+			fn(...last);
+		}
+	};
+	tryOnScopeDispose(debounced.cancel);
+	return debounced;
+}
+/** Throttled function, cancelled automatically when the component unmounts. */
+function useThrottleFn(fn, wait = 200, options = {}) {
+	const { leading = true, trailing = true } = options;
+	let timer;
+	let last = 0;
+	let pending;
+	const invoke = (args) => {
+		last = Date.now();
+		pending = void 0;
+		fn(...args);
+	};
+	const throttled = ((...args) => {
+		const now = Date.now();
+		if (!last && !leading) last = now;
+		const remaining = wait - (now - last);
+		pending = args;
+		if (remaining <= 0) {
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				timer = void 0;
+			}
+			invoke(args);
+		} else if (timer === void 0 && trailing) timer = setTimeout(() => {
+			timer = void 0;
+			if (pending) invoke(pending);
+			if (!leading) last = 0;
+		}, remaining);
+	});
+	throttled.cancel = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		pending = void 0;
+		last = 0;
+	};
+	throttled.flush = () => {
+		if (pending) {
+			const args = pending;
+			if (timer !== void 0) clearTimeout(timer);
+			timer = void 0;
+			invoke(args);
+		}
+	};
+	tryOnScopeDispose(throttled.cancel);
+	return throttled;
+}
+export { useDebounceFn, useThrottleFn };

package/dist/hooks/gesture.d.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue';
+import type { MaybeElementRef } from './shared';
+export interface UseLongPressOptions {
+    /** hold time in ms. Default `500`. */
+    delay?: number;
+    /** finger travel (px) that cancels the press. Default `10`. */
+    distance?: number;
+    /** called when the finger lifts after a long press fired */
+    onRelease?: (event: TouchEvent) => void;
+}
+/** Long press on an element; a move beyond `distance` or an early release cancels it. */
+export declare function useLongPress(target: MaybeElementRef, handler: (event: TouchEvent) => void, options?: UseLongPressOptions): {
+    pressed: Ref<boolean, boolean>;
+    cancel: () => void;
+};
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+export interface UseSwipeOptions {
+    /** minimum travel in px to count as a swipe. Default `50`. */
+    threshold?: number;
+    onSwipeStart?: (event: TouchEvent) => void;
+    onSwipe?: (event: TouchEvent, state: {
+        deltaX: number;
+        deltaY: number;
+    }) => void;
+    onSwipeEnd?: (event: TouchEvent, direction: SwipeDirection | undefined) => void;
+}
+/** Swipe detection on an element: live deltas while moving, direction on release. */
+export declare function useSwipe(target: MaybeElementRef, options?: UseSwipeOptions): {
+    isSwiping: Ref<boolean, boolean>;
+    direction: Ref<SwipeDirection | undefined, SwipeDirection | undefined>;
+    deltaX: Ref<number, number>;
+    deltaY: Ref<number, number>;
+};

package/dist/hooks/gesture.js

@@ -0,0 +1,113 @@
+import { useEventListener } from "../_util/hooks/useEventListener.js";
+import { useTouch } from "../_util/hooks/useTouch.js";
+import { unrefElement } from "./shared.js";
+import { computed, ref } from "vue";
+// src/hooks/gesture.ts
+function targetRef(target) {
+	return computed(() => unrefElement(target));
+}
+/** Long press on an element; a move beyond `distance` or an early release cancels it. */
+function useLongPress(target, handler, options = {}) {
+	const { delay = 500, distance = 10 } = options;
+	const pressed = ref(false);
+	const touch = useTouch();
+	const el = targetRef(target);
+	let timer;
+	const clear = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	};
+	useEventListener("touchstart", ((event) => {
+		clear();
+		touch.start(event);
+		timer = setTimeout(() => {
+			timer = void 0;
+			pressed.value = true;
+			handler(event);
+		}, delay);
+	}), {
+		target: el,
+		passive: true
+	});
+	useEventListener("touchmove", ((event) => {
+		touch.move(event);
+		if (touch.offsetX.value > distance || touch.offsetY.value > distance) clear();
+	}), {
+		target: el,
+		passive: true
+	});
+	const end = ((event) => {
+		clear();
+		if (pressed.value) {
+			pressed.value = false;
+			options.onRelease?.(event);
+		}
+	});
+	useEventListener("touchend", end, {
+		target: el,
+		passive: true
+	});
+	useEventListener("touchcancel", end, {
+		target: el,
+		passive: true
+	});
+	return {
+		pressed,
+		cancel: clear
+	};
+}
+/** Swipe detection on an element: live deltas while moving, direction on release. */
+function useSwipe(target, options = {}) {
+	const { threshold = 50 } = options;
+	const touch = useTouch();
+	const isSwiping = ref(false);
+	const direction = ref();
+	const el = targetRef(target);
+	const resolve = () => {
+		const { deltaX, deltaY, offsetX, offsetY } = touch;
+		if (Math.max(offsetX.value, offsetY.value) < threshold) return void 0;
+		if (offsetX.value > offsetY.value) return deltaX.value > 0 ? "right" : "left";
+		return deltaY.value > 0 ? "down" : "up";
+	};
+	useEventListener("touchstart", ((event) => {
+		touch.start(event);
+		direction.value = void 0;
+		isSwiping.value = true;
+		options.onSwipeStart?.(event);
+	}), {
+		target: el,
+		passive: true
+	});
+	useEventListener("touchmove", ((event) => {
+		if (!isSwiping.value) return;
+		touch.move(event);
+		options.onSwipe?.(event, {
+			deltaX: touch.deltaX.value,
+			deltaY: touch.deltaY.value
+		});
+	}), {
+		target: el,
+		passive: true
+	});
+	const end = ((event) => {
+		if (!isSwiping.value) return;
+		isSwiping.value = false;
+		direction.value = resolve();
+		options.onSwipeEnd?.(event, direction.value);
+	});
+	useEventListener("touchend", end, {
+		target: el,
+		passive: true
+	});
+	useEventListener("touchcancel", end, {
+		target: el,
+		passive: true
+	});
+	return {
+		isSwiping,
+		direction,
+		deltaX: touch.deltaX,
+		deltaY: touch.deltaY
+	};
+}
+export { useLongPress, useSwipe };

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Public composables ("hooks"). Everything here is tree-shakable, SSR-safe and cleans up
+ * after itself when the owning component / effect scope is disposed.
+ */
+export * from '../_util/hooks';
+export * from './browser';
+export * from './dom';
+export * from './fn';
+export * from './gesture';
+export * from './request';
+export type { MaybeElement, MaybeElementRef } from './shared';
+export { unrefElement } from './shared';
+export * from './state';
+export * from './timer';