@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/composables/use-theme.js

@@ -0,0 +1,95 @@
+import { storage } from "./use-local-storage.js";
+import { computed, ref, watch } from "vue";
+//#region src/composables/use-theme.ts
+var MODES = [
+	"light",
+	"dark",
+	"system"
+];
+var isThemeMode = (value) => MODES.includes(value);
+/** A raw string under `key`, as `useTheme` has always stored it. */
+function localStorageTheme(key) {
+	return {
+		get: () => storage()?.getItem(key),
+		set(value) {
+			try {
+				storage()?.setItem(key, value);
+			} catch {}
+		}
+	};
+}
+var mode = ref("system");
+var systemDark = ref(false);
+var started = false;
+var store = null;
+var settings = {};
+var warned = false;
+var resolved = computed(() => mode.value === "system" ? systemDark.value ? "dark" : "light" : mode.value);
+function apply() {
+	const root = document.documentElement;
+	root.style.colorScheme = mode.value === "system" ? "light dark" : mode.value;
+	root.dataset.theme = resolved.value;
+	const color = settings.themeColor?.[resolved.value];
+	if (!color) return;
+	let meta = document.head.querySelector("meta[name=\"theme-color\"]");
+	if (!meta) {
+		meta = document.createElement("meta");
+		meta.name = "theme-color";
+		document.head.append(meta);
+	}
+	meta.content = color;
+}
+function start(options) {
+	started = true;
+	settings = options;
+	store = options.storage ?? (options.storageKey === null ? null : localStorageTheme(options.storageKey ?? "theme"));
+	const stored = store?.get();
+	mode.value = isThemeMode(stored) ? stored : options.defaultTheme ?? "system";
+	const query = window.matchMedia?.("(prefers-color-scheme: dark)");
+	const follow = (event) => systemDark.value = event.matches;
+	if (query) {
+		systemDark.value = query.matches;
+		query.addEventListener?.("change", follow);
+	}
+	watch([mode, resolved], apply, { immediate: true });
+}
+var pending = null;
+function setTheme(value) {
+	if (value === (pending ?? mode.value)) return;
+	const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+	if (settings.viewTransition && !reduced && document.startViewTransition) {
+		pending = value;
+		store?.set(value);
+		document.startViewTransition(() => {
+			pending = null;
+			mode.value = value;
+			apply();
+		}).ready.catch(() => {});
+	} else {
+		pending = null;
+		mode.value = value;
+		store?.set(value);
+	}
+}
+/**
+* The page's color scheme: light, dark, or the system's, applied to `<html>` and
+* remembered. Every call shares one choice; the first call's options set it up.
+*/
+function useTheme(options = {}) {
+	if (!started && typeof window !== "undefined") start(options);
+	else if (process.env.NODE_ENV !== "production" && started && !warned && Object.keys(options).length > 0) {
+		warned = true;
+		console.warn("[useTheme] Already set up by an earlier call (in Nuxt, the module): these options are ignored.");
+	}
+	return {
+		theme: computed({
+			get: () => mode.value,
+			set: setTheme
+		}),
+		resolved,
+		setTheme,
+		toggle: () => setTheme(resolved.value === "dark" ? "light" : "dark")
+	};
+}
+//#endregion
+export { useTheme };

package/dist/composables/use-toast.d.ts

@@ -0,0 +1,127 @@
+import { type ComputedRef, type App, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type RegisterId } from '../shared/labeling';
+import type { Align } from '../shared/use-positioning';
+import { createToastStore, defaultToastStore, type Toast, type ToastId, type ToastOptions, type ToastStore, type ToastTimer, type ToastTransitionStatus } from '../shared/toast-store';
+export { createToastStore, defaultToastStore };
+export type { Toast, ToastId, ToastOptions, ToastStore, ToastTimer };
+export type ToastSide = 'top' | 'bottom';
+export type ToastPosition = `${ToastSide}-${Align}`;
+export interface UseToastReturn {
+    toasts: Ref<Toast<any>[]>;
+    setToast: <Data>(options: ToastOptions<Data>) => ToastId;
+    updateToast: <Data>(id: ToastId, options: ToastOptions<Data>) => void;
+    removeToast: (id: ToastId) => void;
+    clearToasts: () => void;
+}
+/**
+ * Makes `store` the one `useToast()` and the viewport use below this component,
+ * or across `app`: a server render's own, so its toasts reach no other request.
+ */
+export declare function provideToastStore(store: ToastStore, app?: App): ToastStore;
+/** The nearest provided store, or the shared one. Callable outside `setup` too, where it is always the shared one. */
+export declare function useToast(store?: ToastStore): UseToastReturn;
+export interface ToastViewportState {
+    position: ToastPosition;
+    /** The `top` or `bottom` half of `position`. */
+    side: ToastSide;
+    /** The `start`, `center` or `end` half of `position`. */
+    align: Align;
+    /** Whether the stack is fanned out rather than collapsed. */
+    expanded: boolean;
+    /** Whether there is nothing to show. */
+    empty: boolean;
+}
+export interface UseToastViewportOptions {
+    store?: ToastStore;
+    /** @default 'bottom-end' */
+    position?: MaybeRefOrGetter<ToastPosition | undefined>;
+    /** How many toasts stay in the stack; the rest wait their turn. @default 3 */
+    limit?: MaybeRefOrGetter<number | undefined>;
+    /** The timeout for toasts that name none. @default 5000 */
+    timeout?: MaybeRefOrGetter<number | undefined>;
+    /** Names the region for assistive technology. @default 'Notifications' */
+    label?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseToastViewportReturn {
+    toasts: Ref<Toast<any>[]>;
+    state: ComputedRef<ToastViewportState>;
+    viewportProps: ComputedRef<Record<string, unknown>>;
+    store: ToastStore;
+}
+export declare function useToastViewport(options?: UseToastViewportOptions): UseToastViewportReturn;
+export declare const provideToastViewportContext: (value: {
+    store: ToastStore;
+}) => {
+    store: ToastStore;
+}, useToastViewportContext: () => {
+    store: ToastStore;
+};
+export declare const provideToastItemContext: (value: ComputedRef<Toast<any>>) => ComputedRef<Toast<any>>, useToastItemContext: () => ComputedRef<Toast<any>>;
+export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
+export interface UseToastRootOptions {
+    /** Where a swipe dismisses it; `[]` turns swiping off. @default ['down', 'right'] */
+    swipeDirection?: MaybeRefOrGetter<ToastSwipeDirection | ToastSwipeDirection[] | undefined>;
+}
+export interface ToastRootState {
+    /** The toast's `type`, for the template to branch on. */
+    type: string | undefined;
+    /** Its place in the stack: `0` at the front, `-1` once leaving. */
+    index: number;
+    /** Whether it is the newest, at the front of the stack. */
+    front: boolean;
+    /** Whether the stack is fanned out, because it is hovered or holds focus. */
+    expanded: boolean;
+    /** Whether it is beyond the viewport's `limit`, waiting its turn. */
+    limited: boolean;
+    /** Whether it was just raised again under the same id; on until its animation ends. */
+    repeated: boolean;
+    /**
+     * How many times it has been raised again under the same id.
+     * @attribute `data-repeat-count="…"` once repeated
+     */
+    repeatCount: number;
+    /**
+     * Where it is in its enter or exit animation.
+     * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+     */
+    transitionStatus: ToastTransitionStatus;
+    /** Whether it is being dragged. */
+    swiping: boolean;
+    /**
+     * The way it was swiped out, once it has been.
+     * @attribute `data-swipe-direction="…"` once swiped out
+     */
+    swipeDirection: ToastSwipeDirection | undefined;
+}
+/** What each toast part hands its slot. */
+export type ToastSlotProps = ToastRootState & {
+    /**
+     * The toast itself: what was passed to `setToast`, plus its `id`.
+     * @attribute none
+     */
+    toast: Toast<any>;
+    /**
+     * Dismisses it.
+     * @attribute none
+     */
+    close: () => void;
+};
+export interface UseToastRootReturn {
+    toast: ComputedRef<Toast<any>>;
+    state: ComputedRef<ToastRootState>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    titleProps: ComputedRef<Record<string, unknown>>;
+    descriptionProps: ComputedRef<Record<string, unknown>>;
+    closeProps: ComputedRef<Record<string, unknown>>;
+    /** A button that acts and then closes, named by its own text. */
+    actionProps: ComputedRef<Record<string, unknown>>;
+    /** A bar running down its timeout. */
+    progressProps: ComputedRef<Record<string, unknown>>;
+    /** Its timeout, or `undefined` for one that never times out. */
+    timer: ComputedRef<ToastTimer | undefined>;
+    close: () => void;
+    registerTitle: RegisterId;
+    registerDescription: RegisterId;
+}
+export declare function useToastRoot(options?: UseToastRootOptions): UseToastRootReturn;
+export declare const provideToastRootContext: (value: UseToastRootReturn) => UseToastRootReturn, useToastRootContext: () => UseToastRootReturn;

package/dist/composables/use-toast.js

@@ -0,0 +1,330 @@
+import { dataAttrs } from "../shared/data-attrs.js";
+import { createContext } from "../shared/context.js";
+import { popupStateAttrs } from "../shared/popup-state-attrs.js";
+import { waitForAnimationsToFinish } from "../shared/animations.js";
+import { useLabeling } from "../shared/labeling.js";
+import { createVelocity, dismissesOnRelease, resist } from "../shared/swipe-dismiss.js";
+import { createToastStore, defaultToastStore } from "../shared/toast-store.js";
+import { computed, hasInjectionContext, onScopeDispose, provide, ref, toValue, watch } from "vue";
+//#region src/composables/use-toast.ts
+var { key: toastStoreKey, useOptionalContext: useProvidedToastStore } = createContext("ToastStore");
+/**
+* Makes `store` the one `useToast()` and the viewport use below this component,
+* or across `app`: a server render's own, so its toasts reach no other request.
+*/
+function provideToastStore(store, app) {
+	if (app) app.provide(toastStoreKey, store);
+	else provide(toastStoreKey, store);
+	return store;
+}
+/** The store named, else the provided one, else the shared default. */
+function resolveToastStore(store) {
+	return store ?? (hasInjectionContext() ? useProvidedToastStore() : null) ?? defaultToastStore;
+}
+/** The nearest provided store, or the shared one. Callable outside `setup` too, where it is always the shared one. */
+function useToast(store) {
+	store = resolveToastStore(store);
+	return {
+		toasts: store.toasts,
+		setToast: store.add,
+		updateToast: store.update,
+		removeToast: store.close,
+		clearToasts: store.closeAll
+	};
+}
+function useToastViewport(options = {}) {
+	const store = resolveToastStore(options.store);
+	const position = () => toValue(options.position) ?? "bottom-end";
+	const side = () => position().split("-")[0];
+	const align = () => position().split("-")[1];
+	watch(() => toValue(options.limit) ?? 3, (value) => {
+		store.limit.value = value;
+	}, { immediate: true });
+	watch(() => toValue(options.timeout) ?? store.timeout.value, (value) => {
+		store.timeout.value = value;
+	}, { immediate: true });
+	watch(() => store.toasts.value.length, (length) => {
+		if (length === 0) {
+			store.setHovering(false);
+			store.setFocused(false);
+		}
+	});
+	onScopeDispose(() => {
+		store.setHovering(false);
+		store.setFocused(false);
+	});
+	const state = computed(() => ({
+		position: position(),
+		side: side(),
+		align: align(),
+		expanded: store.expanded.value,
+		empty: store.toasts.value.length === 0
+	}));
+	const frontHeight = computed(() => {
+		return store.toasts.value.find((toast) => toast.transitionStatus !== "leave")?.height ?? 0;
+	});
+	const viewportProps = computed(() => ({
+		...dataAttrs(state.value, {
+			position: (value) => ({ "data-position": value }),
+			side: (value) => ({ "data-side": value }),
+			align: (value) => ({ "data-align": value })
+		}),
+		"data-part": "viewport",
+		style: {
+			"--toast-front-height": `${frontHeight.value}px`,
+			"--toast-count": store.toasts.value.length
+		},
+		role: "region",
+		"aria-label": toValue(options.label) ?? "Notifications",
+		onPointerenter() {
+			store.setHovering(true);
+		},
+		onPointerleave() {
+			store.setHovering(false);
+		},
+		onFocusin() {
+			store.setFocused(true);
+		},
+		onFocusout(event) {
+			const next = event.relatedTarget;
+			const viewport = event.currentTarget;
+			if (next instanceof Node && viewport.contains(next)) return;
+			store.setFocused(false);
+		}
+	}));
+	return {
+		toasts: store.toasts,
+		state,
+		viewportProps,
+		store
+	};
+}
+var { provideContext: provideToastViewportContext, useContext: useToastViewportContext } = createContext("ToastViewport");
+var { provideContext: provideToastItemContext, useContext: useToastItemContext } = createContext("ToastItem");
+var SWIPE_IGNORE = "button,a,input,textarea,select,[role=\"button\"],[data-swipe-ignore]";
+function useToastRoot(options = {}) {
+	const { store } = useToastViewportContext();
+	const toast = useToastItemContext();
+	const { titleId, descriptionId, registerTitle, registerDescription } = useLabeling();
+	const rootEl = ref(null);
+	const placement = computed(() => store.placements.value.get(toast.value.id) ?? {
+		visibleIndex: 0,
+		offsetY: 0,
+		limited: false
+	});
+	const stackSize = computed(() => store.toasts.value.length);
+	function measure() {
+		if (rootEl.value) store.setHeight(toast.value.id, naturalHeight(rootEl.value));
+	}
+	watch(rootEl, (element, _previous, onCleanup) => {
+		if (!element) return;
+		measure();
+		if (typeof ResizeObserver !== "function") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		onCleanup(() => observer.disconnect());
+	});
+	let frame;
+	watch([rootEl, () => toast.value.transitionStatus], ([element, status]) => {
+		if (!element || status !== "enter") return;
+		frame = requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
+				store.setTransitionStatus(toast.value.id, void 0);
+			});
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	watch([rootEl, () => toast.value.transitionStatus], ([element, status]) => {
+		if (!element || status !== "leave") return;
+		const id = toast.value.id;
+		waitForAnimationsToFinish(element).then(() => store.remove(id));
+	}, { flush: "post" });
+	const repeating = ref(false);
+	let repeatFrame;
+	watch(() => toast.value.repeatCount, (count, previous) => {
+		if (count === 0 || count === previous || !rootEl.value) return;
+		repeating.value = false;
+		if (repeatFrame !== void 0) cancelAnimationFrame(repeatFrame);
+		repeatFrame = requestAnimationFrame(() => {
+			repeatFrame = void 0;
+			repeating.value = true;
+		});
+	}, { flush: "post" });
+	onScopeDispose(() => {
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		if (repeatFrame !== void 0) cancelAnimationFrame(repeatFrame);
+	});
+	const directions = computed(() => {
+		const value = toValue(options.swipeDirection) ?? ["down", "right"];
+		return Array.isArray(value) ? value : [value];
+	});
+	const swiping = ref(false);
+	const swipeDirection = ref();
+	const movement = ref({
+		x: 0,
+		y: 0
+	});
+	let drag;
+	const allows = (direction) => directions.value.includes(direction);
+	const towards = (axis, delta) => axis === "x" ? delta < 0 ? "left" : "right" : delta < 0 ? "up" : "down";
+	const follow = (axis, delta) => allows(towards(axis, delta)) ? delta : resist(delta);
+	function onPointerdown(event) {
+		if (event.button !== 0 || directions.value.length === 0) return;
+		if (event.target?.closest?.(SWIPE_IGNORE)) return;
+		drag = {
+			x: event.clientX,
+			y: event.clientY,
+			pointerId: event.pointerId,
+			velocity: {
+				x: createVelocity(event.clientX, event.timeStamp),
+				y: createVelocity(event.clientY, event.timeStamp)
+			}
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	}
+	function onPointermove(event) {
+		if (!drag || event.pointerId !== drag.pointerId) return;
+		const dx = event.clientX - drag.x;
+		const dy = event.clientY - drag.y;
+		drag.velocity.x.sample(event.clientX, event.timeStamp);
+		drag.velocity.y.sample(event.clientY, event.timeStamp);
+		if (!drag.axis) {
+			if (Math.max(Math.abs(dx), Math.abs(dy)) < 1) return;
+			const canX = allows("left") || allows("right");
+			const canY = allows("up") || allows("down");
+			drag.axis = canX && canY ? Math.abs(dx) > Math.abs(dy) ? "x" : "y" : canX ? "x" : "y";
+			swiping.value = true;
+		}
+		movement.value = drag.axis === "x" ? {
+			x: follow("x", dx),
+			y: 0
+		} : {
+			x: 0,
+			y: follow("y", dy)
+		};
+	}
+	function onPointerup(event) {
+		if (!drag || event.pointerId !== drag.pointerId) return;
+		const { axis, velocity } = drag;
+		const delta = axis === "x" ? event.clientX - drag.x : event.clientY - drag.y;
+		drag = void 0;
+		swiping.value = false;
+		const out = event.type === "pointerup" && axis ? towards(axis, delta) : void 0;
+		const element = rootEl.value;
+		if (out !== void 0 && element !== null && allows(out) && dismissesOnRelease({
+			traveled: Math.abs(delta),
+			velocity: velocity[axis].speed() * Math.sign(delta),
+			size: axis === "x" ? element.offsetWidth : element.offsetHeight
+		})) {
+			swipeDirection.value = out;
+			close();
+		} else movement.value = {
+			x: 0,
+			y: 0
+		};
+	}
+	const state = computed(() => ({
+		type: toast.value.type,
+		index: placement.value.visibleIndex,
+		front: placement.value.visibleIndex === 0,
+		expanded: store.expanded.value,
+		limited: placement.value.limited,
+		repeated: repeating.value,
+		repeatCount: toast.value.repeatCount,
+		transitionStatus: toast.value.transitionStatus,
+		swiping: swiping.value,
+		swipeDirection: swipeDirection.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, {
+		transitionStatus: popupStateAttrs.transitionStatus,
+		index: (value) => ({ "data-index": String(value) }),
+		type: (value) => value ? { "data-type": value } : null,
+		repeatCount: (value) => value > 0 ? { "data-repeat-count": String(value) } : null,
+		swipeDirection: (value) => value ? { "data-swipe-direction": value } : null
+	}));
+	function close() {
+		store.close(toast.value.id);
+	}
+	const timer = computed(() => store.timer(toast.value.id));
+	return {
+		toast,
+		state,
+		rootProps: computed(() => ({
+			...hooks.value,
+			"data-part": "root",
+			role: "status",
+			"aria-atomic": true,
+			"aria-labelledby": titleId.value,
+			"aria-describedby": descriptionId.value,
+			style: {
+				"--toast-index": placement.value.visibleIndex,
+				"--toast-offset-y": `${placement.value.offsetY}px`,
+				"--toast-height": `${toast.value.height}px`,
+				zIndex: placement.value.visibleIndex < 0 ? 0 : stackSize.value - placement.value.visibleIndex,
+				"--toast-repeat-count": toast.value.repeatCount,
+				"--toast-swipe-movement-x": `${movement.value.x}px`,
+				"--toast-swipe-movement-y": `${movement.value.y}px`,
+				touchAction: directions.value.length ? "none" : void 0
+			},
+			ref: (el) => {
+				rootEl.value = el ?? null;
+			},
+			onAnimationend() {
+				repeating.value = false;
+			},
+			onPointerdown,
+			onPointermove,
+			onPointerup,
+			onPointercancel: onPointerup
+		})),
+		titleProps: computed(() => ({
+			...hooks.value,
+			"data-part": "title"
+		})),
+		descriptionProps: computed(() => ({
+			...hooks.value,
+			"data-part": "description"
+		})),
+		closeProps: computed(() => ({
+			"data-part": "close",
+			type: "button",
+			"aria-label": "Close",
+			onClick: close
+		})),
+		actionProps: computed(() => ({
+			"data-part": "action",
+			type: "button",
+			onClick: close
+		})),
+		progressProps: computed(() => ({
+			...hooks.value,
+			"data-part": "progress",
+			"data-paused": timer.value?.paused ? "" : void 0,
+			"aria-hidden": true,
+			style: { "--toast-duration": `${timer.value?.duration ?? 0}ms` }
+		})),
+		timer,
+		close,
+		registerTitle,
+		registerDescription
+	};
+}
+var { provideContext: provideToastRootContext, useContext: useToastRootContext } = createContext("ToastRoot");
+/**
+* The height a toast's content asks for, whatever a stylesheet pins it to while
+* it sits in a collapsed pile. Lifted with `important`, which also outranks a
+* stylesheet's own `!important`, then put back exactly as it was.
+*/
+function naturalHeight(element) {
+	const { style } = element;
+	const inline = style.getPropertyValue("height");
+	const priority = style.getPropertyPriority("height");
+	style.setProperty("height", "auto", "important");
+	const height = element.offsetHeight;
+	style.setProperty("height", inline, priority);
+	return height;
+}
+//#endregion
+export { createToastStore, defaultToastStore, provideToastItemContext, provideToastRootContext, provideToastStore, provideToastViewportContext, useToast, useToastItemContext, useToastRoot, useToastRootContext, useToastViewport, useToastViewportContext };

package/dist/composables/use-validate.d.ts

@@ -0,0 +1,21 @@
+import { type Ref } from 'vue';
+/** One message per field name. */
+export type ValidationErrors = Record<string, string | undefined>;
+/** A bag keyed by name (the first of several messages is kept), or a list of issues. */
+export type ValidationInput = Record<string, string | string[] | null | undefined> | {
+    path: string | (string | number)[];
+    message: string;
+}[];
+export interface ValidationStore {
+    errors: Readonly<Ref<ValidationErrors>>;
+    /** Replaces every error. */
+    setErrors: (input: ValidationInput) => void;
+    /** Clears one field's error, or all of them. */
+    clearErrors: (name?: string) => void;
+}
+export declare function createValidationStore(): ValidationStore;
+/** Used when no store is provided. Provide one per form, or per request under SSR, to keep them apart. */
+export declare const defaultValidationStore: ValidationStore;
+export declare const provideValidation: (value: ValidationStore) => ValidationStore, useOptionalValidation: () => ValidationStore | null;
+/** The nearest provided store, or the default one. Callable outside `setup` too, e.g. in a `.catch()`. */
+export declare function useValidate(): ValidationStore;

package/dist/composables/use-validate.js

@@ -0,0 +1,31 @@
+import { createContext } from "../shared/context.js";
+import { hasInjectionContext, readonly, ref } from "vue";
+//#region src/composables/use-validate.ts
+function createValidationStore() {
+	const errors = ref({});
+	function setErrors(input) {
+		const entries = Array.isArray(input) ? input.map(({ path, message }) => [Array.isArray(path) ? path.join(".") : path, message]) : Object.entries(input).map(([name, value]) => [name, (Array.isArray(value) ? value[0] : value) ?? void 0]);
+		errors.value = Object.fromEntries(entries.filter(([, message]) => message));
+	}
+	function clearErrors(name) {
+		if (name === void 0) errors.value = {};
+		else if (errors.value[name] !== void 0) {
+			const { [name]: _, ...rest } = errors.value;
+			errors.value = rest;
+		}
+	}
+	return {
+		errors: readonly(errors),
+		setErrors,
+		clearErrors
+	};
+}
+/** Used when no store is provided. Provide one per form, or per request under SSR, to keep them apart. */
+var defaultValidationStore = createValidationStore();
+var { provideContext: provideValidation, useOptionalContext: useOptionalValidation } = createContext("Validation");
+/** The nearest provided store, or the default one. Callable outside `setup` too, e.g. in a `.catch()`. */
+function useValidate() {
+	return (hasInjectionContext() ? useOptionalValidation() : null) ?? defaultValidationStore;
+}
+//#endregion
+export { createValidationStore, defaultValidationStore, provideValidation, useOptionalValidation, useValidate };

package/dist/composables/use-virtual-list.d.ts

@@ -0,0 +1,34 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue';
+export interface UseVirtualListOptions<T> {
+    items: MaybeRefOrGetter<T[]>;
+    /** Every item is this tall. Measure it once and pass it in; it is not re-read. */
+    itemHeight: MaybeRefOrGetter<number>;
+    /** @default true */
+    enabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** The element that scrolls. Left out, the list follows the page instead. */
+    scroller?: Ref<HTMLElement | null | undefined>;
+    /** The element the first item is drawn at the top of — a `<tbody>`, a listbox. */
+    list?: Ref<HTMLElement | null | undefined>;
+    /** Items drawn past each edge of the viewport. @default 20 */
+    overscan?: MaybeRefOrGetter<number | undefined>;
+    /** How close to an edge of what is drawn the viewport may get before redrawing. @default half of `overscan` */
+    threshold?: MaybeRefOrGetter<number | undefined>;
+}
+export interface UseVirtualListReturn<T> {
+    /** Index of the first item drawn. */
+    start: ComputedRef<number>;
+    /** Index after the last item drawn. */
+    end: ComputedRef<number>;
+    visible: ComputedRef<T[]>;
+    /** Space to leave before the drawn items, in pixels. */
+    before: ComputedRef<number>;
+    /** Space to leave after them. */
+    after: ComputedRef<number>;
+    /** Brings an item into view, at the top of the viewport. */
+    scrollToIndex: (index: number) => void;
+}
+/**
+ * Draws only the items near the viewport of a long list, with spacers standing
+ * in for the rest.
+ */
+export declare function useVirtualList<T>(options: UseVirtualListOptions<T>): UseVirtualListReturn<T>;