@astryx-vue/core 0.2.3 → 0.2.4

package/dist/useMenuPress-DUmEy4TB.js

@@ -0,0 +1,425 @@
+import { onBeforeUnmount, toValue } from "vue";
+//#region src/composables/useLongPress.ts
+const DEFAULT_DELAY_MS = 500;
+const DEFAULT_MOVE_CANCEL_PX = 10;
+/**
+* 对应原版 Astryx 的 `hooks/useLongPress`。
+*
+* Detect a single-finger long press.
+*
+* iOS Safari never synthesizes a `contextmenu` event for a held finger, so a
+* long press is the only touch affordance that can open a cursor-positioned
+* surface. The press is cancelled when the finger travels past the tolerance,
+* lifts, or the touch is cancelled.
+*/
+function useLongPress(options) {
+	const delayMs = options.delayMs ?? DEFAULT_DELAY_MS;
+	const moveCancelPx = options.moveCancelPx ?? DEFAULT_MOVE_CANCEL_PX;
+	let timer = null;
+	let origin = null;
+	function cancel() {
+		if (timer != null) {
+			clearTimeout(timer);
+			timer = null;
+		}
+		origin = null;
+	}
+	function start(point) {
+		if (toValue(options.isDisabled)) return;
+		cancel();
+		origin = {
+			x: point.x,
+			y: point.y
+		};
+		timer = setTimeout(() => {
+			const from = origin;
+			timer = null;
+			if (from == null) return;
+			options.onLongPress({
+				x: from.x,
+				y: from.y
+			});
+		}, delayMs);
+	}
+	function moveTo(point) {
+		if (origin == null) return false;
+		if (Math.abs(point.x - origin.x) > moveCancelPx || Math.abs(point.y - origin.y) > moveCancelPx) {
+			cancel();
+			return false;
+		}
+		return true;
+	}
+	onBeforeUnmount(cancel);
+	return {
+		cancel,
+		moveTo,
+		start
+	};
+}
+//#endregion
+//#region src/ContextMenu/menuNav.ts
+/**
+* Roles a menu row can carry. The selectable roles sit alongside the plain
+* one so every row is reachable by arrow keys, typeahead, and Enter/Space.
+*/
+const MENU_ITEM_ROLES = /* @__PURE__ */ new Set([
+	"menuitem",
+	"menuitemradio",
+	"menuitemcheckbox"
+]);
+/** Selector for the activatable rows of one menu level. */
+const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map((role) => `[role="${role}"]:not([aria-disabled="true"])`).join(",");
+/** Selector for any menu level, used to scope a level's rows and key events. */
+const MENU_BOUNDARY_SELECTOR = "[role=\"menu\"]";
+/**
+* Whether a click carries a modifier or a non-primary button. On a row that is
+* a link the browser gives such a click a meaning of its own, which the row
+* must leave alone.
+*/
+function isModifiedClick(event) {
+	return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || (event.button ?? 0) !== 0;
+}
+/**
+* Activate a row from the keyboard: a synthesized click that carries the key's
+* modifiers, so a modified Enter on a link row opens the way a modified click
+* would. `detail` stays 0, the mark of a non-pointer activation.
+*/
+function activateMenuItem(row, key) {
+	row.dispatchEvent(new MouseEvent("click", {
+		altKey: key.altKey,
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		ctrlKey: key.ctrlKey,
+		metaKey: key.metaKey,
+		shiftKey: key.shiftKey
+	}));
+}
+function isDisabledRow(row) {
+	return row.getAttribute("aria-disabled") === "true" || row.hasAttribute("disabled");
+}
+function isHiddenWithin(row, container) {
+	let current = row;
+	while (current != null && current !== container) {
+		if (current.hidden || current.getAttribute("aria-hidden") === "true") return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+const TYPEAHEAD_RESET_MS = 750;
+/**
+* Roving focus, typeahead, and activation for one menu level.
+*
+* Both the menu panel and every submenu flyout own one of these, so a nested
+* level keeps its own highlight, its own typeahead buffer, and its own keys
+* without coordinating with its parent.
+*/
+function useMenuNav(options) {
+	const { menuRef, onClose } = options;
+	let typeaheadBuffer = "";
+	let typeaheadTimer;
+	function resetTypeahead() {
+		typeaheadBuffer = "";
+		if (typeaheadTimer != null) {
+			clearTimeout(typeaheadTimer);
+			typeaheadTimer = void 0;
+		}
+	}
+	function getItems() {
+		const menu = menuRef.value;
+		if (menu == null) return [];
+		return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter((row) => !isHiddenWithin(row, menu)).filter((row) => row.closest(MENU_BOUNDARY_SELECTOR) === menu);
+	}
+	function ownsEvent(event) {
+		const menu = menuRef.value;
+		const target = event.target;
+		if (menu == null || !(target instanceof Element)) return true;
+		return target.closest(MENU_BOUNDARY_SELECTOR) === menu;
+	}
+	function getCurrentIndex(items) {
+		const active = menuRef.value?.ownerDocument.activeElement ?? null;
+		return items.findIndex((row) => row === active || row.contains(active));
+	}
+	function findEnabledIndex(items, start, step, wrap) {
+		const count = items.length;
+		if (count === 0) return -1;
+		let index = start;
+		for (let i = 0; i < count; i++) {
+			if (index < 0 || index >= count) {
+				if (!wrap) return -1;
+				index = (index + count) % count;
+			}
+			const row = items[index];
+			if (row != null && !isDisabledRow(row)) return index;
+			index += step;
+		}
+		return -1;
+	}
+	function focusIndex(items, index) {
+		const row = items[index];
+		if (row == null) return false;
+		row.focus();
+		return true;
+	}
+	function focusFirst() {
+		const items = getItems();
+		return focusIndex(items, findEnabledIndex(items, 0, 1, false));
+	}
+	function focusLast() {
+		const items = getItems();
+		return focusIndex(items, findEnabledIndex(items, items.length - 1, -1, false));
+	}
+	function moveBy(direction) {
+		const items = getItems();
+		if (items.length === 0) return false;
+		const current = getCurrentIndex(items);
+		return focusIndex(items, findEnabledIndex(items, current === -1 ? direction === 1 ? 0 : items.length - 1 : current + direction, direction, true));
+	}
+	/**
+	* PageDown / PageUp move by the rows a viewport shows, never wrapping; in a
+	* menu that does not scroll they act as End and Home.
+	*/
+	function focusPage(direction) {
+		const menu = menuRef.value;
+		const all = getItems();
+		const active = all.map((row, index) => isDisabledRow(row) ? -1 : index).filter((index) => index !== -1);
+		if (menu == null || active.length === 0) return false;
+		if (menu.clientHeight === 0 || menu.scrollHeight <= menu.clientHeight) return direction === 1 ? focusLast() : focusFirst();
+		const rowHeight = all[active[0]]?.getBoundingClientRect().height ?? 0;
+		const perPage = rowHeight > 0 ? Math.max(1, Math.floor(menu.clientHeight / rowHeight)) : active.length;
+		const position = active.indexOf(getCurrentIndex(all));
+		const from = position === -1 ? direction === 1 ? -1 : active.length : position;
+		return focusIndex(all, active[Math.max(0, Math.min(active.length - 1, from + direction * perPage))]);
+	}
+	/**
+	* Typeahead over the rows' label elements. Repeated presses of the same
+	* character cycle through the matches instead of filtering deeper.
+	*/
+	function handleTypeahead(event) {
+		const isSpaceMidType = event.key === " " && typeaheadBuffer.length > 0;
+		if (!(event.key.length === 1 && !event.ctrlKey && !event.metaKey && event.key !== " ") && !isSpaceMidType) return false;
+		const items = getItems();
+		const labels = items.map((row) => row.querySelector(`[data-menu-item-label]`)?.textContent ?? row.textContent);
+		if (labels.length === 0) return false;
+		const char = event.key.toLowerCase();
+		const nextBuffer = typeaheadBuffer.length > 0 && [...typeaheadBuffer].every((entry) => entry === char) ? char : typeaheadBuffer + char;
+		typeaheadBuffer = nextBuffer;
+		if (typeaheadTimer != null) clearTimeout(typeaheadTimer);
+		typeaheadTimer = setTimeout(resetTypeahead, TYPEAHEAD_RESET_MS);
+		const current = getCurrentIndex(items);
+		const hasCurrent = current >= 0;
+		const start = hasCurrent ? current : 0;
+		const offset = hasCurrent && nextBuffer.length === 1 ? 1 : 0;
+		for (let i = 0; i < labels.length; i++) {
+			const index = (start + offset + i + labels.length) % labels.length;
+			if (isDisabledRow(items[index])) continue;
+			const label = labels[index];
+			if (label != null && label.trim().toLowerCase().startsWith(nextBuffer)) {
+				focusIndex(items, index);
+				return true;
+			}
+		}
+		return true;
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented || event.isComposing || event.ctrlKey || event.metaKey || event.altKey) return;
+		if (!ownsEvent(event)) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			if (event.repeat) return;
+			const active = menuRef.value?.ownerDocument.activeElement;
+			if (active instanceof HTMLElement && MENU_ITEM_ROLES.has(active.getAttribute("role") ?? "")) activateMenuItem(active, event);
+			return;
+		}
+		if (event.key === "Tab") {
+			onClose("tab");
+			return;
+		}
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onClose("escape");
+			return;
+		}
+		if (handleTypeahead(event)) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "ArrowDown" && moveBy(1)) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "ArrowUp" && moveBy(-1)) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "Home" && focusFirst()) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "End" && focusLast()) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "PageDown" && focusPage(1)) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "PageUp" && focusPage(-1)) event.preventDefault();
+	}
+	return {
+		focusFirst,
+		handleKeyDown,
+		resetTypeahead
+	};
+}
+//#endregion
+//#region src/ContextMenu/useMenuPress.ts
+/** How long after a tracked release the browser's own click is still swallowed. */
+const STRAY_CLICK_MS = 400;
+let swallower = null;
+function disarmStrayClick() {
+	if (swallower == null) return;
+	swallower.isArmed = false;
+	if (swallower.timer != null) {
+		clearTimeout(swallower.timer);
+		swallower.timer = null;
+	}
+}
+function onWindowClickCapture(event) {
+	if (swallower == null || !swallower.isArmed) return;
+	if (event.detail === 0) return;
+	event.preventDefault();
+	event.stopImmediatePropagation();
+	disarmStrayClick();
+}
+/**
+* Swallow the browser's compatibility click for a gesture the press model
+* already acted on. The listener sits on the window in the capture phase, so
+* it runs ahead of any listener the application or the row itself installed.
+*/
+function armStrayClick(doc) {
+	const view = doc.defaultView;
+	if (view == null) return;
+	if (swallower == null || swallower.doc !== doc) {
+		if (swallower != null) {
+			swallower.doc.defaultView?.removeEventListener("click", onWindowClickCapture, true);
+			swallower.doc.removeEventListener("pointerdown", disarmStrayClick, true);
+		}
+		view.addEventListener("click", onWindowClickCapture, true);
+		doc.addEventListener("pointerdown", disarmStrayClick, true);
+		swallower = {
+			doc,
+			isArmed: false,
+			timer: null
+		};
+	}
+	disarmStrayClick();
+	swallower.isArmed = true;
+	swallower.timer = setTimeout(disarmStrayClick, STRAY_CLICK_MS);
+}
+/** Forget an armed swallower. Called when a surface unmounts and in tests. */
+function resetMenuPress() {
+	disarmStrayClick();
+}
+/**
+* The press model of a painted menu surface.
+*
+* A finger's pointer events stay with the element it landed on, so the gesture
+* is tracked at the document level by `pointerId`:
+*
+* - The highlight follows the finger.
+* - The row under the RELEASE acts, the way its own click would, carrying the
+*   release's modifiers; the browser's own click for that gesture is swallowed
+*   so the row never acts twice.
+* - A finger released outside leaves the menu open; a mouse released outside
+*   dismisses it.
+* - `pointercancel` and a second pointer end the gesture with nothing acting.
+*/
+function useMenuPress(options) {
+	const { menuRef, isEnabled, onDismiss } = options;
+	let trackedId = null;
+	let trackedIsMouse = false;
+	let highlighted = null;
+	let doc = null;
+	function isRowInsideMenu(row) {
+		const menu = menuRef.value;
+		return row instanceof HTMLElement && menu != null && menu.contains(row) && row.closest("[role=\"menu\"]") === menu;
+	}
+	function rowFromEvent(event) {
+		const hit = doc?.elementFromPoint?.(event.clientX, event.clientY) ?? null;
+		const fromPoint = hit instanceof Element ? hit.closest(MENU_ITEM_SELECTOR) : null;
+		if (fromPoint != null && isRowInsideMenu(fromPoint)) return fromPoint;
+		const target = event.target;
+		const fromTarget = target instanceof Element ? target.closest(MENU_ITEM_SELECTOR) : null;
+		return fromTarget != null && isRowInsideMenu(fromTarget) ? fromTarget : null;
+	}
+	function isEventInsideMenu(event) {
+		const menu = menuRef.value;
+		if (menu == null) return false;
+		const hit = doc?.elementFromPoint?.(event.clientX, event.clientY) ?? null;
+		if (hit instanceof Node && menu.contains(hit)) return true;
+		const target = event.target;
+		return target instanceof Node && menu.contains(target);
+	}
+	function highlight(row) {
+		if (row === highlighted) return;
+		highlighted = row;
+		row?.focus({ preventScroll: true });
+	}
+	function onDocumentPointerMove(event) {
+		if (event.pointerId !== trackedId) return;
+		const row = rowFromEvent(event);
+		if (row != null) highlight(row);
+	}
+	function onDocumentPointerUp(event) {
+		if (event.pointerId !== trackedId) return;
+		const row = rowFromEvent(event);
+		endGesture();
+		if (row == null) return;
+		if (doc != null) armStrayClick(doc);
+		activateMenuItem(row, event);
+	}
+	function onDocumentPointerCancel(event) {
+		if (event.pointerId !== trackedId) return;
+		endGesture();
+	}
+	function onDocumentMouseUp(event) {
+		const isInside = isEventInsideMenu(event);
+		endGesture();
+		if (!isInside) onDismiss();
+	}
+	function endGesture() {
+		const current = doc;
+		if (current != null) {
+			current.removeEventListener("pointermove", onDocumentPointerMove, true);
+			current.removeEventListener("pointerup", onDocumentPointerUp, true);
+			current.removeEventListener("pointercancel", onDocumentPointerCancel, true);
+			current.removeEventListener("mouseup", onDocumentMouseUp, true);
+		}
+		trackedId = null;
+		trackedIsMouse = false;
+		highlighted = null;
+	}
+	function onPointerDown(event) {
+		if (!isEnabled()) return;
+		if (trackedId != null) endGesture();
+		const target = event.target;
+		const row = target instanceof Element ? target.closest(MENU_ITEM_SELECTOR) : null;
+		if (row == null || !isRowInsideMenu(row)) return;
+		highlighted = row;
+		trackedId = event.pointerId;
+		trackedIsMouse = event.pointerType === "mouse";
+		doc = menuRef.value?.ownerDocument ?? null;
+		if (trackedIsMouse) {
+			doc?.addEventListener("mouseup", onDocumentMouseUp, true);
+			return;
+		}
+		doc?.addEventListener("pointermove", onDocumentPointerMove, true);
+		doc?.addEventListener("pointerup", onDocumentPointerUp, true);
+		doc?.addEventListener("pointercancel", onDocumentPointerCancel, true);
+	}
+	onBeforeUnmount(endGesture);
+	return { onPointerDown };
+}
+//#endregion
+export { useLongPress as a, useMenuNav as i, useMenuPress as n, isModifiedClick as r, resetMenuPress as t };