@vizejs/ui 0.345.0 → 0.347.7

package/dist/press-Bp57IOe2.mjs

@@ -0,0 +1,615 @@
+import { getCurrentScope, onScopeDispose, shallowReadonly, shallowRef, toValue } from "vue";
+//#region src/press-event.ts
+const invalidOptionDiagnostic = "VIZE_UI_PRESS_OPTION";
+const pointerTypes = new Set([
+	"keyboard",
+	"mouse",
+	"pen",
+	"pointer",
+	"touch",
+	"virtual"
+]);
+const keyboardBehaviors = new Set([
+	"button",
+	"link",
+	"none"
+]);
+/** Resolve and validate a reactive boolean option for JavaScript consumers. */
+function readBooleanOption(value, name) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return false;
+	if (typeof resolved !== "boolean") throw new TypeError(`${invalidOptionDiagnostic}: ${name} must resolve to a boolean`);
+	return resolved;
+}
+/** Resolve the closed keyboard behavior union without accepting mistyped JS. */
+function readKeyboardBehavior(value) {
+	const resolved = toValue(value) ?? "button";
+	if (!keyboardBehaviors.has(resolved)) throw new TypeError(`${invalidOptionDiagnostic}: keyboardBehavior must resolve to button, link, or none`);
+	return resolved;
+}
+/** Resolve a cross-realm event currentTarget without instanceof assumptions. */
+function eventElement(event) {
+	const value = event.currentTarget;
+	return value && value.nodeType === 1 ? value : null;
+}
+/** Map Pointer Events' extensible device string to the stable public union. */
+function pointerTypeOf(event) {
+	if (event.pointerId === -1 && event.pointerType === "") return "virtual";
+	if (event.pointerType === "mouse" || event.pointerType === "pen") return event.pointerType;
+	if (event.pointerType === "touch") return "touch";
+	return "pointer";
+}
+/** Only a primary contact and its primary button can activate a control. */
+function isPrimaryPointer(event) {
+	return event.isPrimary !== false && event.button === 0;
+}
+function eventPoint(event, touchIdentifier = null) {
+	if (!event) return null;
+	if ("clientX" in event && "clientY" in event) return {
+		x: Number(event.clientX),
+		y: Number(event.clientY)
+	};
+	if ("changedTouches" in event) {
+		const touches = Array.from(event.changedTouches);
+		const touch = (touchIdentifier === null ? touches[0] : touches.find(({ identifier }) => identifier === touchIdentifier)) ?? null;
+		if (touch) return {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+	}
+	return null;
+}
+function modifier(event, key) {
+	return event && key in event ? Boolean(event[key]) : false;
+}
+/** Build a frozen snapshot so later browser mutation cannot change callbacks' data. */
+function createPressEvent(type, target, pointerType, originalEvent, isCanceled = false, touchIdentifier = null) {
+	if (!pointerTypes.has(pointerType)) throw new TypeError(`${invalidOptionDiagnostic}: invalid press pointer type`);
+	const point = eventPoint(originalEvent, touchIdentifier);
+	return Object.freeze({
+		type,
+		pointerType,
+		target,
+		originalEvent,
+		x: point?.x ?? null,
+		y: point?.y ?? null,
+		altKey: modifier(originalEvent, "altKey"),
+		ctrlKey: modifier(originalEvent, "ctrlKey"),
+		metaKey: modifier(originalEvent, "metaKey"),
+		shiftKey: modifier(originalEvent, "shiftKey"),
+		isCanceled
+	});
+}
+/** Native elements retain their own activation timing and default actions. */
+function keyboardActivation(target, key, behavior) {
+	if (behavior === "none") return null;
+	const tag = target.localName;
+	if (tag === "a" || tag === "area") {
+		if (target.hasAttribute("href")) return key === "Enter" ? "native" : null;
+	}
+	if (tag === "button") return key === "Enter" || key === " " ? "native" : null;
+	if (tag === "summary") return key === "Enter" || key === " " ? "native" : null;
+	if (tag === "input") {
+		const type = (target.getAttribute("type") ?? "text").toLowerCase();
+		if (type === "checkbox" || type === "radio") return key === " " ? "native" : null;
+		return new Set([
+			"button",
+			"file",
+			"image",
+			"reset",
+			"submit"
+		]).has(type) && (key === "Enter" || key === " ") ? "native" : null;
+	}
+	if (behavior === "link") return key === "Enter" ? "custom" : null;
+	return key === "Enter" || key === " " ? "custom" : null;
+}
+/** Determine pointer containment without assuming events originate in one realm. */
+function isEventInside(event, target, touchIdentifier = null) {
+	const point = eventPoint(event, touchIdentifier);
+	if (point) {
+		const hit = target.ownerDocument.elementFromPoint?.(point.x, point.y);
+		if (hit) return hit === target || target.contains(hit);
+	}
+	return event.composedPath().includes(target);
+}
+/** Apply a transient selection guard and return an exact, idempotent restore. */
+function disableTextSelection(target) {
+	if (!("style" in target)) return () => void 0;
+	const style = target.style;
+	if (!style || typeof style.setProperty !== "function") return () => void 0;
+	const properties = ["user-select", "-webkit-user-select"];
+	const previous = properties.map((property) => ({
+		property,
+		value: style.getPropertyValue(property),
+		priority: style.getPropertyPriority(property)
+	}));
+	for (const property of properties) style.setProperty(property, "none");
+	let restored = false;
+	return () => {
+		if (restored) return;
+		restored = true;
+		for (const { property, value, priority } of previous) if (value) style.setProperty(property, value, priority);
+		else style.removeProperty(property);
+	};
+}
+/** Validate callback slots eagerly so setup failures never install listeners. */
+function validatePressOptions(options) {
+	for (const name of [
+		"onPress",
+		"onPressChange",
+		"onPressEnd",
+		"onPressStart",
+		"onPressUp"
+	]) {
+		const callback = options[name];
+		if (callback !== void 0 && typeof callback !== "function") throw new TypeError(`${invalidOptionDiagnostic}: ${name} must be a function`);
+	}
+}
+//#endregion
+//#region src/press-handlers.ts
+/** Adapt Pointer Events plus legacy mouse/touch and keyboard events to one lifecycle. */
+function createPressHandlers(lifecycle) {
+	let lastTouchTime = Number.NEGATIVE_INFINITY;
+	function onPointerDown(event) {
+		if (lifecycle.disposed || lifecycle.active || !isPrimaryPointer(event)) return;
+		const target = eventElement(event);
+		if (!target || readBooleanOption(lifecycle.options.isDisabled, "isDisabled")) return;
+		lifecycle.start(event, target, "pointer", pointerTypeOf(event), event.pointerId, null, false);
+	}
+	function onPointerMove(event) {
+		const current = lifecycle.active;
+		if (!matches(current, "pointer", event.pointerId)) return;
+		lifecycle.updatePointerBoundary(current, event);
+	}
+	function onPointerUp(event) {
+		const current = lifecycle.active;
+		if (!matches(current, "pointer", event.pointerId)) return;
+		lifecycle.finishPointer(current, event);
+	}
+	function onPointerCancel(event) {
+		const current = lifecycle.active;
+		if (matches(current, "pointer", event.pointerId)) lifecycle.cancelActive(event);
+	}
+	function onMouseDown(event) {
+		if (lifecycle.disposed || event.button !== 0) return;
+		const target = eventElement(event);
+		if (!target || readBooleanOption(lifecycle.options.isDisabled, "isDisabled")) return;
+		const elapsed = event.timeStamp - lastTouchTime;
+		if (elapsed >= 0 && elapsed < 800) return;
+		if (readBooleanOption(lifecycle.options.preventFocusOnPress, "preventFocusOnPress")) event.preventDefault();
+		if (event.view && "PointerEvent" in event.view || lifecycle.active) return;
+		lifecycle.start(event, target, "mouse", "mouse", null, null, false);
+	}
+	function onMouseMove(event) {
+		const current = lifecycle.active;
+		if (current?.source === "mouse") lifecycle.updatePointerBoundary(current, event);
+	}
+	function onMouseUp(event) {
+		const current = lifecycle.active;
+		if (current?.source === "mouse" && event.button === 0) lifecycle.finishPointer(current, event);
+	}
+	function onTouchStart(event) {
+		if (lifecycle.disposed || event.view && "PointerEvent" in event.view || lifecycle.active || event.changedTouches.length !== 1) return;
+		const target = eventElement(event);
+		if (!target || readBooleanOption(lifecycle.options.isDisabled, "isDisabled")) return;
+		const touch = event.changedTouches.item(0);
+		lastTouchTime = event.timeStamp;
+		lifecycle.start(event, target, "touch", "touch", touch.identifier, null, false);
+	}
+	function onTouchMove(event) {
+		const current = lifecycle.active;
+		if (current?.source === "touch" && touchMatches(event, current)) lifecycle.updatePointerBoundary(current, event);
+	}
+	function onTouchEnd(event) {
+		const current = lifecycle.active;
+		if (current?.source === "touch" && touchMatches(event, current)) lifecycle.finishPointer(current, event);
+	}
+	function onTouchCancel(event) {
+		const current = lifecycle.active;
+		if (current?.source === "touch" && touchMatches(event, current)) lifecycle.cancelActive(event);
+	}
+	function onKeyDown(event) {
+		if (lifecycle.disposed || lifecycle.active || event.isComposing || event.repeat || event.target !== event.currentTarget) return;
+		const target = eventElement(event);
+		if (!target || readBooleanOption(lifecycle.options.isDisabled, "isDisabled")) return;
+		const activation = keyboardActivation(target, event.key, readKeyboardBehavior(lifecycle.options.keyboardBehavior));
+		if (!activation) return;
+		if (event.key === " " && activation === "custom") event.preventDefault();
+		lifecycle.start(event, target, "keyboard", "keyboard", null, event.key, activation === "native");
+	}
+	function onKeyUp(event) {
+		const current = lifecycle.active;
+		if (current?.source === "keyboard" && event.key === current.key) lifecycle.finishKeyboard(current, event);
+	}
+	function onClick(event) {
+		if (lifecycle.disposed) return;
+		const target = eventElement(event);
+		if (target) lifecycle.activateClick(target, event);
+	}
+	function onDragStart(event) {
+		if (lifecycle.active?.target === eventElement(event)) lifecycle.cancelActive(event);
+	}
+	function onWindowBlur(event) {
+		lifecycle.cancelActive(event);
+	}
+	function onVisibilityChange(event) {
+		if (lifecycle.active?.document.visibilityState === "hidden") lifecycle.cancelActive(event);
+	}
+	function onFocusIn(event) {
+		const current = lifecycle.active;
+		if (current?.source === "keyboard" && event.target !== current.target) lifecycle.cancelActive(event, false);
+	}
+	const pressProps = Object.freeze({
+		onClick,
+		onDragstart: onDragStart,
+		onKeydown: onKeyDown,
+		onKeyup: onKeyUp,
+		onMousedown: onMouseDown,
+		onMousemove: onMouseMove,
+		onMouseup: onMouseUp,
+		onPointercancel: onPointerCancel,
+		onPointerdown: onPointerDown,
+		onPointermove: onPointerMove,
+		onPointerup: onPointerUp,
+		onTouchcancel: onTouchCancel,
+		onTouchend: onTouchEnd,
+		onTouchmove: onTouchMove,
+		onTouchstart: onTouchStart
+	});
+	return Object.freeze({
+		...pressProps,
+		installListeners(document, source) {
+			const removals = [];
+			const listen = (owner, type, listener, capture = true) => {
+				owner.addEventListener(type, listener, capture);
+				removals.push(() => owner.removeEventListener(type, listener, capture));
+			};
+			try {
+				if (source === "pointer") {
+					listen(document, "pointermove", onPointerMove);
+					listen(document, "pointerup", onPointerUp);
+					listen(document, "pointercancel", onPointerCancel);
+				} else if (source === "mouse") {
+					listen(document, "mousemove", onMouseMove);
+					listen(document, "mouseup", onMouseUp);
+				} else if (source === "touch") {
+					listen(document, "touchmove", onTouchMove);
+					listen(document, "touchend", onTouchEnd);
+					listen(document, "touchcancel", onTouchCancel);
+				} else {
+					listen(document, "keyup", onKeyUp);
+					listen(document, "focusin", onFocusIn);
+				}
+				if (document.defaultView) listen(document.defaultView, "blur", onWindowBlur, false);
+				listen(document, "visibilitychange", onVisibilityChange);
+			} catch (error) {
+				for (const remove of removals.reverse()) remove();
+				throw error;
+			}
+			let released = false;
+			return () => {
+				if (released) return;
+				released = true;
+				for (const remove of removals) remove();
+			};
+		}
+	});
+}
+function matches(active, source, id) {
+	return active?.source === source && active.id === id;
+}
+function touchMatches(event, active) {
+	return Array.from(event.changedTouches).some((touch) => touch.identifier === active.id);
+}
+//#endregion
+//#region src/press-activation-memory.ts
+/** Own short-lived tokens that associate release, cancellation, and click. */
+var PressActivationMemory = class {
+	#pending = null;
+	#suppressedTarget = null;
+	#suppressedTimer = null;
+	remember(target, pointerType) {
+		this.#clearPending();
+		const timer = setTimeout(() => {
+			if (this.#pending?.timer === timer) this.#pending = null;
+		}, 1e3);
+		this.#pending = {
+			target,
+			pointerType,
+			timer
+		};
+	}
+	take(target) {
+		if (this.#pending?.target !== target) return null;
+		const pointerType = this.#pending.pointerType;
+		this.#clearPending();
+		return pointerType;
+	}
+	suppress(target) {
+		this.#suppressedTarget = target;
+		if (this.#suppressedTimer) clearTimeout(this.#suppressedTimer);
+		this.#suppressedTimer = setTimeout(() => {
+			this.#suppressedTarget = null;
+			this.#suppressedTimer = null;
+		}, 1e3);
+	}
+	consumeSuppressed(target) {
+		if (this.#suppressedTarget !== target) return false;
+		this.#suppressedTarget = null;
+		if (this.#suppressedTimer) clearTimeout(this.#suppressedTimer);
+		this.#suppressedTimer = null;
+		return true;
+	}
+	begin(target) {
+		this.#clearPending();
+		this.consumeSuppressed(target);
+	}
+	dispose() {
+		this.#clearPending();
+		if (this.#suppressedTimer) clearTimeout(this.#suppressedTimer);
+		this.#suppressedTimer = null;
+		this.#suppressedTarget = null;
+	}
+	#clearPending() {
+		if (!this.#pending) return;
+		clearTimeout(this.#pending.timer);
+		this.#pending = null;
+	}
+};
+//#endregion
+//#region src/press-notify.ts
+/** Execute every notification before surfacing one or more consumer errors. */
+function notifyAll(notifications) {
+	const errors = [];
+	for (const notify of notifications) try {
+		notify();
+	} catch (error) {
+		errors.push(error);
+	}
+	if (errors.length === 1) throw errors[0];
+	if (errors.length > 1) throw new AggregateError(errors, "Press callbacks failed");
+}
+/** Capture one consumer failure while allowing the lifecycle to settle. */
+function captureError(errors, callback) {
+	try {
+		callback();
+	} catch (error) {
+		errors.push(error);
+	}
+}
+/** Surface captured failures after every required transition has run. */
+function surfaceErrors(errors) {
+	if (errors.length === 0) return;
+	notifyAll(errors.map((error) => () => {
+		throw error;
+	}));
+}
+//#endregion
+//#region src/press-lifecycle.ts
+const disposedDiagnostic = "VIZE_UI_PRESS_DISPOSED";
+/** Internal press state machine shared by all native-event adapters. */
+var PressLifecycle = class {
+	options;
+	installListeners;
+	#pressed = shallowRef(false);
+	#activation = new PressActivationMemory();
+	#active = null;
+	#disposed = false;
+	#synthetic = null;
+	#transitionVersion = 0;
+	constructor(options, installListeners) {
+		validatePressOptions(options);
+		this.options = options;
+		this.installListeners = installListeners;
+	}
+	get active() {
+		return this.#active;
+	}
+	get disposed() {
+		return this.#disposed;
+	}
+	start(event, target, source, pointerType, id, key, nativeKeyboard) {
+		this.#activation.begin(target);
+		let releaseListeners = () => void 0;
+		let restoreSelection = () => void 0;
+		try {
+			releaseListeners = this.installListeners(target.ownerDocument, source);
+			if (source !== "keyboard" && !readBooleanOption(this.options.allowTextSelectionOnPress, "allowTextSelectionOnPress")) restoreSelection = disableTextSelection(target);
+		} catch (error) {
+			releaseListeners();
+			restoreSelection();
+			throw error;
+		}
+		const current = {
+			document: target.ownerDocument,
+			id,
+			key,
+			nativeKeyboard,
+			pointerType,
+			releaseListeners,
+			restoreSelection,
+			source,
+			target,
+			delivered: false,
+			inside: true,
+			lastEvent: event
+		};
+		this.#active = current;
+		this.#transition(true, createPressEvent("pressstart", target, pointerType, event, false, source === "touch" ? id : null));
+	}
+	updatePointerBoundary(current, event) {
+		current.lastEvent = event;
+		if (readBooleanOption(this.options.isDisabled, "isDisabled")) {
+			this.cancelActive(event);
+			return;
+		}
+		const inside = isEventInside(event, current.target, current.source === "touch" ? current.id : null);
+		if (inside === current.inside) return;
+		current.inside = inside;
+		if (!inside && readBooleanOption(this.options.shouldCancelOnPointerExit, "shouldCancelOnPointerExit")) {
+			this.cancelActive(event);
+			return;
+		}
+		this.#transition(inside, createPressEvent(inside ? "pressstart" : "pressend", current.target, current.pointerType, event, !inside, current.source === "touch" ? current.id : null));
+	}
+	finishPointer(current, event) {
+		current.lastEvent = event;
+		const inside = current.target.isConnected && current.inside && isEventInside(event, current.target, current.source === "touch" ? current.id : null);
+		if (readBooleanOption(this.options.isDisabled, "isDisabled") || !inside) {
+			this.cancelActive(event);
+			return;
+		}
+		const errors = [];
+		captureError(errors, () => this.#emitUp(current, event));
+		if (this.#active === current) {
+			this.#activation.remember(current.target, current.pointerType);
+			captureError(errors, () => this.#endActive(current, event, false));
+		}
+		surfaceErrors(errors);
+	}
+	finishKeyboard(current, event) {
+		current.lastEvent = event;
+		const disabled = !current.target.isConnected || readBooleanOption(this.options.isDisabled, "isDisabled");
+		const errors = [];
+		let completed = false;
+		if (!disabled) captureError(errors, () => this.#emitUp(current, event));
+		if (this.#active === current) {
+			completed = !disabled;
+			captureError(errors, () => this.#endActive(current, event, disabled));
+		}
+		if (completed && !this.#disposed && !current.delivered) if (current.nativeKeyboard) this.#activation.remember(current.target, "keyboard");
+		else captureError(errors, () => this.#emitPress(current.target, "keyboard", event));
+		surfaceErrors(errors);
+	}
+	activateClick(target, event) {
+		if (readBooleanOption(this.options.isDisabled, "isDisabled")) {
+			event.preventDefault();
+			this.cancelActive(event);
+			this.#activation.dispose();
+			return;
+		}
+		if (this.#activation.consumeSuppressed(target)) {
+			event.preventDefault();
+			return;
+		}
+		const current = this.#active;
+		if (current?.target === target && current.source === "keyboard") {
+			const shouldDeliver = !current.delivered;
+			current.delivered = true;
+			if (shouldDeliver) this.#emitPress(target, "keyboard", event);
+			return;
+		}
+		if (current?.target === target) this.finishPointer(current, event);
+		const pendingPointerType = this.#activation.take(target);
+		if (pendingPointerType) {
+			this.#emitPress(target, pendingPointerType, event);
+			return;
+		}
+		this.#syntheticClickCycle(target, event, event.detail === 0 ? "virtual" : "mouse");
+	}
+	cancelActive(originalEvent, suppress = true) {
+		const current = this.#active;
+		if (current) {
+			if (suppress && current.source !== "keyboard") this.#activation.suppress(current.target);
+			this.#endActive(current, originalEvent ?? current.lastEvent, true);
+			return true;
+		}
+		const synthetic = this.#synthetic;
+		if (!synthetic || synthetic.canceled) return false;
+		synthetic.canceled = true;
+		this.#transition(false, createPressEvent("pressend", synthetic.target, synthetic.pointerType, originalEvent ?? synthetic.event, true));
+		return true;
+	}
+	toController(pressProps) {
+		return Object.freeze({
+			isPressed: shallowReadonly(this.#pressed),
+			pressProps,
+			cancel: () => {
+				if (this.#disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+				return this.cancelActive(null);
+			},
+			dispose: () => this.dispose()
+		});
+	}
+	dispose() {
+		if (this.#disposed) return;
+		const current = this.#active;
+		if (current) {
+			current.releaseListeners();
+			current.restoreSelection();
+			this.#active = null;
+			this.#pressed.value = false;
+			this.#transitionVersion++;
+		}
+		if (this.#synthetic) this.#synthetic.canceled = true;
+		this.#synthetic = null;
+		if (this.#pressed.value) {
+			this.#pressed.value = false;
+			this.#transitionVersion++;
+		}
+		this.#activation.dispose();
+		this.#disposed = true;
+	}
+	#transition(next, event) {
+		if (this.#pressed.value === next) return;
+		this.#pressed.value = next;
+		const version = ++this.#transitionVersion;
+		const phase = next ? this.options.onPressStart : this.options.onPressEnd;
+		notifyAll([() => phase?.(event), () => {
+			if (this.#transitionVersion === version) this.options.onPressChange?.(next);
+		}]);
+	}
+	#endActive(current, originalEvent, canceled) {
+		current.releaseListeners();
+		current.restoreSelection();
+		if (this.#active === current) this.#active = null;
+		this.#transition(false, createPressEvent("pressend", current.target, current.pointerType, originalEvent, canceled, current.source === "touch" ? current.id : null));
+	}
+	#emitUp(current, event) {
+		this.options.onPressUp?.(createPressEvent("pressup", current.target, current.pointerType, event, false, current.source === "touch" ? current.id : null));
+	}
+	#emitPress(target, pointerType, event) {
+		this.options.onPress?.(createPressEvent("press", target, pointerType, event));
+	}
+	#syntheticClickCycle(target, event, pointerType) {
+		const errors = [];
+		const cycle = {
+			event,
+			pointerType,
+			target,
+			canceled: false
+		};
+		this.#synthetic = cycle;
+		captureError(errors, () => this.#transition(true, createPressEvent("pressstart", target, pointerType, event)));
+		if (!cycle.canceled && !this.#disposed) captureError(errors, () => this.options.onPressUp?.(createPressEvent("pressup", target, pointerType, event)));
+		if (!cycle.canceled && !this.#disposed) captureError(errors, () => this.#transition(false, createPressEvent("pressend", target, pointerType, event)));
+		if (!cycle.canceled && !this.#disposed) captureError(errors, () => this.#emitPress(target, pointerType, event));
+		if (this.#synthetic === cycle) this.#synthetic = null;
+		surfaceErrors(errors);
+	}
+};
+//#endregion
+//#region src/press.ts
+const setupDiagnostic = "VIZE_UI_PRESS_SETUP";
+/**
+* Create an SSR-safe press normalizer for one host element.
+*
+* Spread the returned `pressProps` onto the host and call `dispose` when using
+* this factory outside a Vue effect scope. No DOM global is read at setup.
+*/
+function createPress(options = {}) {
+	let handlers;
+	const lifecycle = new PressLifecycle(options, (document, source) => handlers.installListeners(document, source));
+	handlers = createPressHandlers(lifecycle);
+	const { installListeners: _, ...pressProps } = handlers;
+	return lifecycle.toController(Object.freeze(pressProps));
+}
+/** Create a press normalizer disposed with the current Vue effect scope. */
+function usePress(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createPress(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+export { disableTextSelection as i, usePress as n, createPressEvent as r, createPress as t };