@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/_util/RenderNode.js

@@ -0,0 +1,39 @@
+import { defineComponent } from "vue";
+// src/_util/RenderNode.ts
+/**
+* Renders a `VueNode` / `RenderNodeFn` prop inside an SFC template.
+*
+* ```vue
+* <slot name="icon"><RenderNode :node="icon" /></slot>
+* ```
+*/
+var RenderNode_default = defineComponent({
+	name: "AmRenderNode",
+	inheritAttrs: false,
+	props: {
+		node: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object,
+				Function,
+				Array
+			],
+			default: void 0
+		},
+		params: {
+			type: null,
+			default: void 0
+		}
+	},
+	setup(props) {
+		return () => {
+			const { node } = props;
+			if (typeof node === "function") return node(props.params);
+			if (typeof node === "boolean") return null;
+			return node;
+		};
+	}
+});
+export { RenderNode_default as default };

package/dist/_util/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from './useClickAway';
+export * from './useControlled';
+export * from './useDraggable';
+export * from './useEventListener';
+export * from './useLockScroll';
+export * from './useTouch';
+export * from './useVirtualRange';
+export * from './useZIndex';

package/dist/_util/hooks/useClickAway.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+type Target = Element | null | undefined | Ref<Element | null | undefined>;
+export interface UseClickAwayOptions {
+    /** default `'click'`; use `'touchstart'` to react before the page scrolls. Several names are allowed. */
+    eventName?: string | string[];
+    /** skip the check entirely (e.g. while closed) */
+    enabled?: () => boolean;
+}
+/**
+ * Calls `listener` when a click / touch lands outside every `target`.
+ * The single place for "close on outside tap" (Popover, Dropdown, SwipeAction, NumberKeyboard ...).
+ */
+export declare function useClickAway(target: Target | Target[], listener: (event: Event) => void, options?: UseClickAwayOptions): void;
+export {};

package/dist/_util/hooks/useClickAway.js

@@ -0,0 +1,27 @@
+import { inBrowser } from "../index.js";
+import { useEventListener } from "./useEventListener.js";
+import { unref } from "vue";
+// src/_util/hooks/useClickAway.ts
+/**
+* Calls `listener` when a click / touch lands outside every `target`.
+* The single place for "close on outside tap" (Popover, Dropdown, SwipeAction, NumberKeyboard ...).
+*/
+function useClickAway(target, listener, options = {}) {
+	if (!inBrowser) return;
+	const { eventName = "click", enabled } = options;
+	const onEvent = (event) => {
+		if (enabled && !enabled()) return;
+		const targets = Array.isArray(target) ? target : [target];
+		const node = event.target;
+		if (!targets.some((item) => {
+			const el = unref(item);
+			return !!el && el.contains(node);
+		})) listener(event);
+	};
+	(Array.isArray(eventName) ? eventName : [eventName]).forEach((name) => useEventListener(name, onEvent, {
+		target: document,
+		capture: true,
+		passive: true
+	}));
+}
+export { useClickAway };

package/dist/_util/hooks/useControlled.d.ts

@@ -0,0 +1,18 @@
+import type { Ref } from 'vue';
+export interface UseControlledOptions<T> {
+    /** Used when the prop is `undefined` (uncontrolled mode). */
+    defaultValue?: T | (() => T);
+    /** Called with the next value on every `set` (emit `update:xxx` / `change` here). */
+    onChange?: (value: T, prev: T) => void;
+}
+/**
+ * Controlled / uncontrolled state, the SFC equivalent of antdv-next's `useMergedState`.
+ *
+ * - `props[key] !== undefined` -> controlled, the returned ref mirrors the prop.
+ * - otherwise the component keeps its own state so it works without `v-model`.
+ *
+ * NOTE: boolean props must be declared with `undefined` as default
+ * (`withDefaults(defineProps<Props>(), { open: undefined })`), otherwise Vue casts
+ * an absent boolean prop to `false` and the component is always "controlled".
+ */
+export declare function useControlled<P extends Record<string, any>, K extends keyof P, T = NonNullable<P[K]>>(props: P, key: K, options?: UseControlledOptions<T>): [Ref<T>, (value: T) => void];

package/dist/_util/hooks/useControlled.js

@@ -0,0 +1,36 @@
+import { computed, ref, watch } from "vue";
+// src/_util/hooks/useControlled.ts
+/**
+* Controlled / uncontrolled state, the SFC equivalent of antdv-next's `useMergedState`.
+*
+* - `props[key] !== undefined` -> controlled, the returned ref mirrors the prop.
+* - otherwise the component keeps its own state so it works without `v-model`.
+*
+* NOTE: boolean props must be declared with `undefined` as default
+* (`withDefaults(defineProps<Props>(), { open: undefined })`), otherwise Vue casts
+* an absent boolean prop to `false` and the component is always "controlled".
+*/
+function useControlled(props, key, options = {}) {
+	const { defaultValue, onChange } = options;
+	const initial = () => {
+		if (props[key] !== void 0) return props[key];
+		return typeof defaultValue === "function" ? defaultValue() : defaultValue;
+	};
+	const inner = ref(initial());
+	watch(() => props[key], (val) => {
+		if (val !== void 0) inner.value = val;
+	});
+	const merged = computed({
+		get: () => props[key] !== void 0 ? props[key] : inner.value,
+		set: (val) => {
+			setValue(val);
+		}
+	});
+	function setValue(val) {
+		const prev = merged.value;
+		inner.value = val;
+		onChange?.(val, prev);
+	}
+	return [merged, setValue];
+}
+export { useControlled };

package/dist/_util/hooks/useDraggable.d.ts

@@ -0,0 +1,50 @@
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref } from 'vue';
+export interface DraggableOffset {
+    x: number;
+    y: number;
+}
+export interface DraggableGap {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export type DraggableAxis = 'x' | 'y' | 'xy';
+export type DraggableMagnetic = 'x' | 'y';
+export interface UseDraggableOptions {
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Axis the element can be dragged along. Default `xy`. */
+    axis?: MaybeRefOrGetter<DraggableAxis | undefined>;
+    /** Snap to the nearest edge of that axis when released */
+    magnetic?: MaybeRefOrGetter<DraggableMagnetic | undefined>;
+    /** Minimal distance to the edges, one number or one per side. Default `0`. */
+    gap?: MaybeRefOrGetter<number | DraggableGap | undefined>;
+    /** Controlled top-left position in px */
+    offset?: MaybeRefOrGetter<DraggableOffset | undefined>;
+    onStart?: () => void;
+    /** The element was dropped at a new position (after snapping) */
+    onEnd?: (offset: DraggableOffset) => void;
+}
+export interface UseDraggableReturn {
+    /** `undefined` until the element was dragged or an `offset` was given: it then sits where its css puts it */
+    position: Ref<DraggableOffset | undefined>;
+    dragging: Ref<boolean>;
+    /** Bind to the element: moves it with a transform from the top-left corner */
+    style: ComputedRef<CSSProperties | undefined>;
+    onTouchStart: (event: TouchEvent) => void;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: () => void;
+    /** Mouse fallback so dragging also works in desktop browsers */
+    onMouseDown: (event: MouseEvent) => void;
+    /** `true` once for the click that follows a drag: swallow it */
+    consumeClick: () => boolean;
+    /** Back to the initial position */
+    reset: () => void;
+    /** Clamp the position again after the viewport / container was resized */
+    resize: () => void;
+}
+/**
+ * Lets an element be dragged inside the viewport (`position: fixed`) or its offset parent
+ * (`position: absolute`). Shared by `Draggable` and `FloatButton`.
+ */
+export declare function useDraggable(target: Ref<HTMLElement | undefined>, options?: UseDraggableOptions): UseDraggableReturn;

package/dist/_util/hooks/useDraggable.js

@@ -0,0 +1,176 @@
+import { clamp, preventDefault } from "../index.js";
+import { useTouch } from "./useTouch.js";
+import { computed, getCurrentScope, onScopeDispose, ref, toValue, watch } from "vue";
+// src/_util/hooks/useDraggable.ts
+/**
+* Lets an element be dragged inside the viewport (`position: fixed`) or its offset parent
+* (`position: absolute`). Shared by `Draggable` and `FloatButton`.
+*/
+function useDraggable(target, options = {}) {
+	const touch = useTouch();
+	const initial = toValue(options.offset);
+	const position = ref(initial ? { ...initial } : void 0);
+	const dragging = ref(false);
+	let startPosition = {
+		x: 0,
+		y: 0
+	};
+	let bounds = {
+		minX: 0,
+		maxX: 0,
+		minY: 0,
+		maxY: 0
+	};
+	let justDragged = false;
+	let resetTimer;
+	watch(() => toValue(options.offset), (value) => {
+		if (value) position.value = {
+			x: value.x,
+			y: value.y
+		};
+	});
+	function measure(el) {
+		const rect = el.getBoundingClientRect();
+		const parent = window.getComputedStyle(el).position === "absolute" ? el.offsetParent : null;
+		let originX = 0;
+		let originY = 0;
+		let width = window.innerWidth;
+		let height = window.innerHeight;
+		if (parent) {
+			const parentRect = parent.getBoundingClientRect();
+			originX = parentRect.left + parent.clientLeft;
+			originY = parentRect.top + parent.clientTop;
+			width = parent.clientWidth;
+			height = parent.clientHeight;
+		}
+		const gap = toValue(options.gap) ?? 0;
+		const sides = typeof gap === "number" ? {
+			top: gap,
+			right: gap,
+			bottom: gap,
+			left: gap
+		} : gap;
+		const minX = sides.left ?? 0;
+		const minY = sides.top ?? 0;
+		bounds = {
+			minX,
+			maxX: Math.max(minX, width - rect.width - (sides.right ?? 0)),
+			minY,
+			maxY: Math.max(minY, height - rect.height - (sides.bottom ?? 0))
+		};
+		return {
+			x: rect.left - originX,
+			y: rect.top - originY
+		};
+	}
+	function onTouchStart(event) {
+		const el = target.value;
+		if (toValue(options.disabled) || !el) return;
+		touch.start(event);
+		const current = measure(el);
+		startPosition = position.value ?? current;
+		dragging.value = true;
+		options.onStart?.();
+	}
+	function applyMove() {
+		const axis = toValue(options.axis) ?? "xy";
+		const next = { ...startPosition };
+		if (axis !== "y") next.x = clamp(startPosition.x + touch.deltaX.value, bounds.minX, bounds.maxX);
+		if (axis !== "x") next.y = clamp(startPosition.y + touch.deltaY.value, bounds.minY, bounds.maxY);
+		position.value = next;
+	}
+	function onTouchMove(event) {
+		if (!dragging.value) return;
+		touch.move(event);
+		if (touch.isTap.value) return;
+		preventDefault(event);
+		applyMove();
+	}
+	function onTouchEnd() {
+		if (!dragging.value) return;
+		dragging.value = false;
+		if (touch.isTap.value || !position.value) return;
+		const magnetic = toValue(options.magnetic);
+		const next = { ...position.value };
+		if (magnetic === "x") next.x = next.x - bounds.minX < bounds.maxX - next.x ? bounds.minX : bounds.maxX;
+		else if (magnetic === "y") next.y = next.y - bounds.minY < bounds.maxY - next.y ? bounds.minY : bounds.maxY;
+		position.value = next;
+		options.onEnd?.(next);
+		justDragged = true;
+		clearTimeout(resetTimer);
+		resetTimer = setTimeout(() => {
+			justDragged = false;
+		}, 0);
+	}
+	function toTouchEvent(event) {
+		return { touches: [{
+			clientX: event.clientX,
+			clientY: event.clientY
+		}] };
+	}
+	function onMouseMove(event) {
+		if (!dragging.value) return;
+		touch.move(toTouchEvent(event));
+		if (touch.isTap.value) return;
+		preventDefault(event);
+		applyMove();
+	}
+	function removeMouseListeners() {
+		document.removeEventListener("mousemove", onMouseMove);
+		document.removeEventListener("mouseup", onMouseUp);
+	}
+	function onMouseUp() {
+		removeMouseListeners();
+		onTouchEnd();
+	}
+	function onMouseDown(event) {
+		if (event.button !== 0 || dragging.value) return;
+		onTouchStart(toTouchEvent(event));
+		if (dragging.value) {
+			document.addEventListener("mousemove", onMouseMove);
+			document.addEventListener("mouseup", onMouseUp);
+		}
+	}
+	function consumeClick() {
+		if (!justDragged) return false;
+		justDragged = false;
+		return true;
+	}
+	function reset() {
+		dragging.value = false;
+		position.value = initial ? { ...initial } : void 0;
+	}
+	function resize() {
+		const el = target.value;
+		if (!el || !position.value) return;
+		measure(el);
+		position.value = {
+			x: clamp(position.value.x, bounds.minX, bounds.maxX),
+			y: clamp(position.value.y, bounds.minY, bounds.maxY)
+		};
+	}
+	const style = computed(() => {
+		if (!position.value) return void 0;
+		return {
+			inset: "0 auto auto 0",
+			transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`
+		};
+	});
+	if (getCurrentScope()) onScopeDispose(() => {
+		clearTimeout(resetTimer);
+		removeMouseListeners();
+	});
+	return {
+		position,
+		dragging,
+		style,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onMouseDown,
+		consumeClick,
+		reset,
+		resize
+	};
+}
+export { useDraggable };

package/dist/_util/hooks/useEventListener.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue';
+type TargetRef = EventTarget | Ref<EventTarget | undefined | null>;
+export interface UseEventListenerOptions {
+    target?: TargetRef;
+    capture?: boolean;
+    passive?: boolean;
+}
+/** Adds an event listener on mount (default target: window) and removes it on unmount. */
+export declare function useEventListener<K extends keyof DocumentEventMap>(type: K, listener: (event: DocumentEventMap[K]) => void, options?: UseEventListenerOptions): () => void;
+export declare function useEventListener(type: string, listener: EventListener, options?: UseEventListenerOptions): () => void;
+export {};

package/dist/_util/hooks/useEventListener.js

@@ -0,0 +1,29 @@
+import { inBrowser } from "../index.js";
+import { isRef, onBeforeUnmount, onMounted, unref, watch } from "vue";
+// src/_util/hooks/useEventListener.ts
+function useEventListener(type, listener, options = {}) {
+	if (!inBrowser) return () => {};
+	const { target = window, passive = false, capture = false } = options;
+	let attached;
+	const add = (el) => {
+		remove();
+		if (el) {
+			el.addEventListener(type, listener, {
+				capture,
+				passive
+			});
+			attached = el;
+		}
+	};
+	function remove() {
+		if (attached) {
+			attached.removeEventListener(type, listener, capture);
+			attached = void 0;
+		}
+	}
+	onMounted(() => add(unref(target)));
+	onBeforeUnmount(remove);
+	if (isRef(target)) watch(target, (el) => add(el));
+	return remove;
+}
+export { useEventListener };

package/dist/_util/hooks/useLockScroll.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+/**
+ * Locks page scrolling while `shouldLock()` is true, but keeps scrolling inside `rootRef` working.
+ */
+export declare function useLockScroll(rootRef: Ref<HTMLElement | undefined | null>, shouldLock: () => boolean): {
+    lock: () => void;
+    unlock: () => void;
+};

package/dist/_util/hooks/useLockScroll.js

@@ -0,0 +1,46 @@
+import { getScrollParent, inBrowser, preventDefault } from "../index.js";
+import { useTouch } from "./useTouch.js";
+import { onBeforeUnmount, onDeactivated, watch } from "vue";
+// src/_util/hooks/useLockScroll.ts
+var totalLockCount = 0;
+var BODY_LOCK_CLASS = "am-overflow-hidden";
+/**
+* Locks page scrolling while `shouldLock()` is true, but keeps scrolling inside `rootRef` working.
+*/
+function useLockScroll(rootRef, shouldLock) {
+	const touch = useTouch();
+	let locked = false;
+	const onTouchMove = (event) => {
+		touch.move(event);
+		const direction = touch.deltaY.value > 0 ? "10" : "01";
+		const { scrollHeight, offsetHeight, scrollTop } = getScrollParent(event.target, rootRef.value);
+		let status = "11";
+		if (scrollTop === 0) status = offsetHeight >= scrollHeight ? "00" : "01";
+		else if (scrollTop + offsetHeight >= scrollHeight) status = "10";
+		if (status !== "11" && touch.isVertical() && !(Number.parseInt(status, 2) & Number.parseInt(direction, 2))) preventDefault(event, true);
+	};
+	const lock = () => {
+		if (!inBrowser || locked) return;
+		locked = true;
+		document.addEventListener("touchstart", touch.start);
+		document.addEventListener("touchmove", onTouchMove, { passive: false });
+		document.body.classList.add(BODY_LOCK_CLASS);
+		totalLockCount++;
+	};
+	const unlock = () => {
+		if (!locked) return;
+		locked = false;
+		document.removeEventListener("touchstart", touch.start);
+		document.removeEventListener("touchmove", onTouchMove);
+		totalLockCount = Math.max(totalLockCount - 1, 0);
+		if (!totalLockCount) document.body.classList.remove(BODY_LOCK_CLASS);
+	};
+	watch(shouldLock, (value) => value ? lock() : unlock(), { immediate: true });
+	onDeactivated(unlock);
+	onBeforeUnmount(unlock);
+	return {
+		lock,
+		unlock
+	};
+}
+export { useLockScroll };

package/dist/_util/hooks/useTouch.d.ts

@@ -0,0 +1,19 @@
+type Direction = '' | 'vertical' | 'horizontal';
+/** Tracks a single-finger gesture: offsets, deltas, locked direction and tap detection. */
+export declare function useTouch(): {
+    move: (event: TouchEvent) => void;
+    start: (event: TouchEvent) => void;
+    reset: () => void;
+    startX: import("vue").Ref<number, number>;
+    startY: import("vue").Ref<number, number>;
+    deltaX: import("vue").Ref<number, number>;
+    deltaY: import("vue").Ref<number, number>;
+    offsetX: import("vue").Ref<number, number>;
+    offsetY: import("vue").Ref<number, number>;
+    direction: import("vue").Ref<Direction, Direction>;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    isTap: import("vue").Ref<boolean, boolean>;
+    startTime: import("vue").Ref<number, number>;
+};
+export {};

package/dist/_util/hooks/useTouch.js

@@ -0,0 +1,63 @@
+import { ref } from "vue";
+// src/_util/hooks/useTouch.ts
+var TAP_OFFSET = 5;
+function getDirection(x, y) {
+	if (x > y) return "horizontal";
+	if (y > x) return "vertical";
+	return "";
+}
+/** Tracks a single-finger gesture: offsets, deltas, locked direction and tap detection. */
+function useTouch() {
+	const startX = ref(0);
+	const startY = ref(0);
+	const deltaX = ref(0);
+	const deltaY = ref(0);
+	const offsetX = ref(0);
+	const offsetY = ref(0);
+	const direction = ref("");
+	const isTap = ref(true);
+	const startTime = ref(0);
+	const isVertical = () => direction.value === "vertical";
+	const isHorizontal = () => direction.value === "horizontal";
+	const reset = () => {
+		deltaX.value = 0;
+		deltaY.value = 0;
+		offsetX.value = 0;
+		offsetY.value = 0;
+		direction.value = "";
+		isTap.value = true;
+	};
+	const start = (event) => {
+		reset();
+		startX.value = event.touches[0].clientX;
+		startY.value = event.touches[0].clientY;
+		startTime.value = Date.now();
+	};
+	const move = (event) => {
+		const touch = event.touches[0];
+		deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
+		deltaY.value = touch.clientY - startY.value;
+		offsetX.value = Math.abs(deltaX.value);
+		offsetY.value = Math.abs(deltaY.value);
+		const LOCK_DIRECTION_DISTANCE = 10;
+		if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) direction.value = getDirection(offsetX.value, offsetY.value);
+		if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) isTap.value = false;
+	};
+	return {
+		move,
+		start,
+		reset,
+		startX,
+		startY,
+		deltaX,
+		deltaY,
+		offsetX,
+		offsetY,
+		direction,
+		isVertical,
+		isHorizontal,
+		isTap,
+		startTime
+	};
+}
+export { useTouch };

package/dist/_util/hooks/useVirtualRange.d.ts

@@ -0,0 +1,40 @@
+import type { ComputedRef } from 'vue';
+export interface UseVirtualRangeOptions {
+    /** number of items */
+    count: () => number;
+    /** one fixed size for every item, or the size of the item at `index` */
+    size: () => number | ((index: number) => number);
+    /** current scroll position (px from the start of the list) */
+    scrollOffset: () => number;
+    /** size of the visible window (px) */
+    viewportSize: () => number;
+    /** extra items rendered before / after the window. Default `3`. */
+    overscan?: () => number;
+    /** `false` renders everything */
+    enabled?: () => boolean;
+}
+export interface VirtualRange {
+    /** first rendered index */
+    start: ComputedRef<number>;
+    /** last rendered index + 1 */
+    end: ComputedRef<number>;
+    /** total size of all items */
+    totalSize: ComputedRef<number>;
+    /** leading space before the first rendered item */
+    offsetBefore: ComputedRef<number>;
+    /** trailing space after the last rendered item */
+    offsetAfter: ComputedRef<number>;
+    /** start position of the item at `index` */
+    offsetOf: (index: number) => number;
+    /** size of the item at `index` */
+    sizeOf: (index: number) => number;
+    /** index of the item that contains `offset` */
+    indexAt: (offset: number) => number;
+}
+/**
+ * Windowing math shared by every virtualized component: VirtualList (native scrolling),
+ * PickerView (transform-based wheel) and Calendar (month list).
+ *
+ * It only computes *which* items to render; the caller owns scrolling and layout.
+ */
+export declare function useVirtualRange(options: UseVirtualRangeOptions): VirtualRange;

package/dist/_util/hooks/useVirtualRange.js

@@ -0,0 +1,68 @@
+import { computed } from "vue";
+// src/_util/hooks/useVirtualRange.ts
+/**
+* Windowing math shared by every virtualized component: VirtualList (native scrolling),
+* PickerView (transform-based wheel) and Calendar (month list).
+*
+* It only computes *which* items to render; the caller owns scrolling and layout.
+*/
+function useVirtualRange(options) {
+	/** prefix sums for variable sizes: offsets[i] = start of item i, offsets[count] = total */
+	const offsets = computed(() => {
+		const size = options.size();
+		if (typeof size === "number") return null;
+		const count = options.count();
+		const list = Array.from({ length: count + 1 });
+		list[0] = 0;
+		for (let i = 0; i < count; i++) list[i + 1] = list[i] + size(i);
+		return list;
+	});
+	const offsetOf = (index) => {
+		const count = options.count();
+		const i = Math.min(Math.max(index, 0), count);
+		return offsets.value ? offsets.value[i] : i * options.size();
+	};
+	const sizeOf = (index) => {
+		const size = options.size();
+		return typeof size === "number" ? size : size(index);
+	};
+	const totalSize = computed(() => offsetOf(options.count()));
+	const indexAt = (offset) => {
+		const count = options.count();
+		if (count === 0) return 0;
+		if (!offsets.value) {
+			const size = options.size();
+			return size > 0 ? Math.min(Math.max(Math.floor(offset / size), 0), count - 1) : 0;
+		}
+		const list = offsets.value;
+		let low = 0;
+		let high = count - 1;
+		while (low < high) {
+			const mid = low + high + 1 >> 1;
+			if (list[mid] <= offset) low = mid;
+			else high = mid - 1;
+		}
+		return low;
+	};
+	const range = computed(() => {
+		const count = options.count();
+		if (options.enabled && !options.enabled()) return [0, count];
+		if (count === 0) return [0, 0];
+		const overscan = options.overscan?.() ?? 3;
+		const scroll = Math.max(options.scrollOffset(), 0);
+		const first = indexAt(scroll);
+		const last = indexAt(scroll + Math.max(options.viewportSize(), 0));
+		return [Math.max(first - overscan, 0), Math.min(last + overscan + 1, count)];
+	});
+	return {
+		start: computed(() => range.value[0]),
+		end: computed(() => range.value[1]),
+		totalSize,
+		offsetBefore: computed(() => offsetOf(range.value[0])),
+		offsetAfter: computed(() => totalSize.value - offsetOf(range.value[1])),
+		offsetOf,
+		sizeOf,
+		indexAt
+	};
+}
+export { useVirtualRange };

package/dist/_util/hooks/useZIndex.d.ts

@@ -0,0 +1,3 @@
+/** Returns an ever-increasing z-index so the latest opened popup is always on top. */
+export declare function nextZIndex(): number;
+export declare function setGlobalZIndex(val: number): void;