@astryx-vue/core 0.3.0 → 0.4.0

package/dist/useMenuPress-D-FRNrBW.js

@@ -1,573 +0,0 @@
-import { onBeforeUnmount, toValue } from "vue";
-//#region src/composables/useLongPress.ts
-const DEFAULT_DELAY_MS = 500;
-const DEFAULT_MOVE_CANCEL_PX = 10;
-function touchPoint(event) {
-	const touch = event.touches?.[0] ?? event.changedTouches?.[0];
-	return touch == null ? null : {
-		x: touch.clientX,
-		y: touch.clientY
-	};
-}
-/**
-* 对应原版 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, a second finger lands, or the touch is cancelled.
-*
-* 两种绑法：自己接指针事件时用 `start` / `moveTo` / `cancel`；直接要触摸监听时
-* 把 `handlers` 摊到元素上。
-*/
-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 isDisabled() {
-		return toValue(options.isDisabled) === true || toValue(options.disabled) === true;
-	}
-	function cancel() {
-		if (timer != null) {
-			clearTimeout(timer);
-			timer = null;
-		}
-		origin = null;
-	}
-	function start(point) {
-		if (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;
-	}
-	/**
-	* A press needs exactly one finger. A second one cancels it, the way a
-	* lift does.
-	*/
-	function onTouchStart(event) {
-		if ((event.touches?.length ?? 0) !== 1) {
-			cancel();
-			return;
-		}
-		const point = touchPoint(event);
-		if (point != null) start(point);
-	}
-	function onTouchMove(event) {
-		const point = touchPoint(event);
-		if (point != null) moveTo(point);
-	}
-	function onTouchEnd() {
-		cancel();
-	}
-	function onTouchCancel() {
-		cancel();
-	}
-	onBeforeUnmount(cancel);
-	return {
-		cancel,
-		handlers: {
-			onTouchCancel,
-			onTouchEnd,
-			onTouchMove,
-			onTouchStart
-		},
-		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;
-/** How long a finger must rest on the trigger before the menu opens under it. */
-const DEFAULT_LONG_PRESS_MS = 500;
-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.
-*
-* 传了 `triggerRef` 和 `onTriggerPress` 之后，按压也可以从触发器开始：鼠标按下就开，
-* 手指按住到 `longPressDelayMs` 才开，开着的时候手指可以滑进菜单里挑行。
-*/
-function useMenuPress(options) {
-	const { menuRef, isEnabled, onDismiss } = options;
-	let trackedId = null;
-	let trackedIsMouse = false;
-	let trackedFromTrigger = false;
-	let triggerOpened = false;
-	let highlighted = null;
-	let doc = null;
-	let longPressTimer = null;
-	let triggerPressAt = 0;
-	function rowsSelector() {
-		return options.itemSelector ?? MENU_ITEM_SELECTOR;
-	}
-	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(rowsSelector()) : null;
-		if (fromPoint != null && isRowInsideMenu(fromPoint)) return fromPoint;
-		const target = event.target;
-		const fromTarget = target instanceof Element ? target.closest(rowsSelector()) : 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 isOverTrigger(event) {
-		const trigger = options.triggerRef?.value;
-		if (trigger == null) return false;
-		const hit = doc?.elementFromPoint?.(event.clientX, event.clientY) ?? null;
-		if (hit instanceof Node && trigger.contains(hit)) return true;
-		const target = event.target;
-		return target instanceof Node && trigger.contains(target);
-	}
-	function highlight(row) {
-		if (row === highlighted) return;
-		highlighted = row;
-		if (options.onHighlight != null) {
-			options.onHighlight(row);
-			return;
-		}
-		row?.focus({ preventScroll: true });
-	}
-	function activate(row, release) {
-		if (options.onActivate != null) {
-			options.onActivate(row, release);
-			return;
-		}
-		activateMenuItem(row, release);
-	}
-	function trackPointer(event, fromTrigger) {
-		const current = (options.menuRef.value ?? options.triggerRef?.value ?? null)?.ownerDocument ?? null;
-		if (current == null) return;
-		if (trackedId != null) endGesture();
-		doc = current;
-		trackedId = event.pointerId;
-		trackedIsMouse = event.pointerType === "mouse";
-		trackedFromTrigger = fromTrigger;
-		triggerOpened = false;
-		current.addEventListener("pointermove", onDocumentPointerMove, true);
-		current.addEventListener("pointerup", onDocumentPointerUp, true);
-		current.addEventListener("pointercancel", onDocumentPointerCancel, true);
-	}
-	function onDocumentPointerMove(event) {
-		if (event.pointerId !== trackedId) return;
-		if (trackedFromTrigger && !triggerOpened) return;
-		const row = rowFromEvent(event);
-		if (row != null) highlight(row);
-	}
-	function onDocumentPointerUp(event) {
-		if (event.pointerId !== trackedId) return;
-		const row = rowFromEvent(event);
-		const wasTrigger = trackedFromTrigger;
-		const wasMouse = trackedIsMouse;
-		const hadOpened = triggerOpened;
-		const overTrigger = wasTrigger && isOverTrigger(event);
-		const releasedOutside = !isEventInsideMenu(event);
-		endGesture();
-		if (row == null) {
-			if (wasTrigger && hadOpened) {
-				triggerPressAt = Date.now();
-				if (wasMouse && !overTrigger && releasedOutside) onDismiss();
-			}
-			return;
-		}
-		if (doc != null) armStrayClick(doc);
-		activate(row, event);
-	}
-	function onDocumentPointerCancel(event) {
-		if (event.pointerId !== trackedId) return;
-		endGesture();
-	}
-	function onDocumentMouseUp(event) {
-		const isInside = isEventInsideMenu(event);
-		endGesture();
-		if (!isInside) onDismiss();
-	}
-	function clearLongPress() {
-		if (longPressTimer != null) {
-			clearTimeout(longPressTimer);
-			longPressTimer = null;
-		}
-	}
-	function endGesture() {
-		clearLongPress();
-		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;
-		trackedFromTrigger = false;
-		triggerOpened = false;
-		highlighted = null;
-	}
-	function onPointerDown(event) {
-		if (!isEnabled()) return;
-		if (trackedId != null) endGesture();
-		const target = event.target;
-		const row = target instanceof Element ? target.closest(rowsSelector()) : null;
-		if (row == null || !isRowInsideMenu(row)) return;
-		trackPointer(event, false);
-		highlighted = row;
-		if (trackedIsMouse) {
-			doc?.removeEventListener("pointermove", onDocumentPointerMove, true);
-			doc?.removeEventListener("pointerup", onDocumentPointerUp, true);
-			doc?.removeEventListener("pointercancel", onDocumentPointerCancel, true);
-			doc?.addEventListener("mouseup", onDocumentMouseUp, true);
-		}
-	}
-	function onTriggerPointerDown(event) {
-		const press = options.onTriggerPress;
-		if (press == null || !isEnabled()) return;
-		if ((event.button ?? 0) !== 0) return;
-		trackPointer(event, true);
-		if (trackedIsMouse) {
-			triggerOpened = press("mouse") === true;
-			triggerPressAt = Date.now();
-			if (!triggerOpened) endGesture();
-			return;
-		}
-		const pointerType = event.pointerType === "pen" ? "pen" : "touch";
-		longPressTimer = setTimeout(() => {
-			longPressTimer = null;
-			triggerOpened = press(pointerType) === true;
-			triggerPressAt = Date.now();
-		}, options.longPressDelayMs ?? DEFAULT_LONG_PRESS_MS);
-	}
-	/**
-	* Only the browser's own menu for a held finger is suppressed; a mouse's
-	* right-click keeps its `contextmenu` route through the application.
-	*/
-	function onTriggerContextMenu(event) {
-		if (options.onTriggerPress == null) return;
-		if ((event instanceof PointerEvent ? event.pointerType : null) === "mouse") return;
-		event.preventDefault();
-	}
-	function isTriggerClickFromPress() {
-		return triggerPressAt !== 0 && Date.now() - triggerPressAt < STRAY_CLICK_MS;
-	}
-	function cancel() {
-		endGesture();
-	}
-	onBeforeUnmount(endGesture);
-	return {
-		cancel,
-		isTriggerClickFromPress,
-		menuProps: {
-			"data-astryx-menu-press": "",
-			onPointerDown
-		},
-		onPointerDown,
-		triggerProps: {
-			onContextMenu: onTriggerContextMenu,
-			onPointerDown: onTriggerPointerDown
-		}
-	};
-}
-//#endregion
-export { useLongPress as a, useMenuNav as i, useMenuPress as n, isModifiedClick as r, resetMenuPress as t };