@astryx-vue/core 0.2.2 → 0.2.4

package/dist/composables-CWw6t-RJ.js

@@ -0,0 +1,520 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { t as _sfc_main$1 } from "./Kbd-BB-Dw6zE.js";
+import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, h, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, toDisplayString, toValue, unref, vShow, watch, withDirectives } from "vue";
+import "../styles/keyboard-hint.css";
+//#region src/composables/useContainerReveal.ts
+function useContainerReveal(options = {}) {
+	function containerProps(reveal = {}) {
+		if (toValue(options.isEnabled) === false) return {};
+		return {
+			class: {
+				"astryx-reveal": true,
+				"astryx-reveal--inactive": reveal.forceState === "inactive",
+				"astryx-reveal--active": reveal.forceState === "active"
+			},
+			style: reveal.hoverDelay ? { "--_hover-delay": `${reveal.hoverDelay}ms` } : void 0
+		};
+	}
+	function contentProps(reveal = {}) {
+		if (toValue(options.isEnabled) === false) return {};
+		const inverted = reveal.isRevealInverted === true;
+		const preserved = reveal.isLayoutPreserved === true;
+		return { class: {
+			"astryx-reveal__content": !inverted,
+			"astryx-reveal__content--preserve": !inverted && preserved,
+			"astryx-reveal__conceal": inverted,
+			"astryx-reveal__conceal--preserve": inverted && preserved,
+			"astryx-reveal__shown": reveal.forceVisibility === "shown",
+			"astryx-reveal__hidden": reveal.forceVisibility === "hidden" && !preserved,
+			"astryx-reveal__hidden--preserve": reveal.forceVisibility === "hidden" && preserved
+		} };
+	}
+	return {
+		containerProps,
+		contentProps
+	};
+}
+//#endregion
+//#region src/composables/useControllableState.ts
+/**
+* 受控或自己管的 v-model。
+*
+* Astryx 没有同名 hook。各组件原来各自判断「外面传了值就听外面的，没传就自己记」，
+* 这里收成一个函数，方便以后的 v-model 共用。
+*/
+function useControllableState(options) {
+	const { modelValue, onChange } = options;
+	const controlled = modelValue.value !== void 0;
+	const local = ref(toValue(options.defaultValue));
+	const isControlled = computed(() => controlled);
+	const value = computed(() => controlled ? modelValue.value : local.value);
+	function setValue(next) {
+		if (Object.is(value.value, next)) return;
+		if (controlled) modelValue.value = next;
+		else local.value = next;
+		onChange?.(next);
+	}
+	return {
+		isControlled,
+		setValue,
+		value
+	};
+}
+//#endregion
+//#region src/composables/useGridRovingFocus.ts
+/**
+* 网格式导航（roving tabindex）：用方向键在二维网格中移动焦点。
+* 供 Calendar、Pagination（如果需要）等组件复用。
+*/
+function useGridRovingFocus(options) {
+	const { rows, columns, activeIndex, isEnabled = ref(true), isDisabled, onChange } = options;
+	const row = ref(0);
+	const column = ref(0);
+	watch(activeIndex, (index) => {
+		const cols = columns.value;
+		if (cols > 0) {
+			row.value = Math.floor(index / cols);
+			column.value = index % cols;
+		}
+	}, { immediate: true });
+	function indexFromRowCol(r, c) {
+		return r * columns.value + c;
+	}
+	function moveTo(targetRow, targetCol) {
+		if (!isEnabled.value) return;
+		const r = Math.max(0, Math.min(targetRow, rows.value - 1));
+		const c = Math.max(0, Math.min(targetCol, columns.value - 1));
+		if (isDisabled?.(r, c)) return;
+		const index = indexFromRowCol(r, c);
+		onChange(index);
+	}
+	function moveUp() {
+		moveTo(row.value - 1, column.value);
+	}
+	function moveDown() {
+		moveTo(row.value + 1, column.value);
+	}
+	function moveLeft() {
+		moveTo(row.value, column.value - 1);
+	}
+	function moveRight() {
+		moveTo(row.value, column.value + 1);
+	}
+	function moveToFirstInRow() {
+		moveTo(row.value, 0);
+	}
+	function moveToLastInRow() {
+		moveTo(row.value, columns.value - 1);
+	}
+	function moveToFirstInColumn() {
+		moveTo(0, column.value);
+	}
+	function moveToLastInColumn() {
+		moveTo(rows.value - 1, column.value);
+	}
+	function onKeyDown(event) {
+		if (!isEnabled.value) return;
+		switch (event.key) {
+			case "ArrowUp":
+				event.preventDefault();
+				moveUp();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				moveDown();
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				moveLeft();
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				moveRight();
+				break;
+			case "Home":
+				event.preventDefault();
+				if (event.ctrlKey) moveTo(0, 0);
+				else moveToFirstInRow();
+				break;
+			case "End":
+				event.preventDefault();
+				if (event.ctrlKey) moveTo(rows.value - 1, columns.value - 1);
+				else moveToLastInRow();
+				break;
+			case "PageUp":
+				event.preventDefault();
+				moveToFirstInColumn();
+				break;
+			case "PageDown":
+				event.preventDefault();
+				moveToLastInColumn();
+		}
+	}
+	return {
+		row,
+		column,
+		onKeyDown,
+		moveTo
+	};
+}
+//#endregion
+//#region src/composables/useImageMode.ts
+/**
+* APCA 感知亮度。先把 sRGB 按 2.4 线性化，再用接近 BT.709 的系数合成，
+* 最后做 0.56 次方，让 0.5 接近视觉上的中灰。饱和色比简单的伽马亮度更准。
+*/
+function perceptualLightness(r, g, b) {
+	const linear = (channel) => (channel / 255) ** 2.4;
+	return (.2126729 * linear(r) + .7151522 * linear(g) + .072175 * linear(b)) ** .56;
+}
+/** 一组采样像素的平均亮度，再和阈值比出深浅。 */
+function imageModeFromPixels(pixels, threshold = .5) {
+	let red = 0;
+	let green = 0;
+	let blue = 0;
+	let count = 0;
+	for (let index = 0; index < pixels.length; index += 4) {
+		red += pixels[index] ?? 0;
+		green += pixels[index + 1] ?? 0;
+		blue += pixels[index + 2] ?? 0;
+		count += 1;
+	}
+	const safeCount = count || 1;
+	return perceptualLightness(red / safeCount, green / safeCount, blue / safeCount) > threshold ? "light" : "dark";
+}
+/**
+* 按图片亮度判断该用深色还是浅色前景。采样走 OffscreenCanvas，不往页面上画。
+* 跨域或网络失败时返回 `fallback`。
+*/
+function useImageMode(src, options = {}) {
+	const mode = ref(toValue(options).fallback ?? null);
+	let request = 0;
+	async function detect(url) {
+		const current = ++request;
+		const settings = toValue(options);
+		const threshold = settings.threshold ?? .5;
+		const fallback = settings.fallback ?? null;
+		mode.value = fallback;
+		try {
+			const response = await fetch(url);
+			if (!response.ok) throw new Error(`image ${response.status}`);
+			const bitmap = await createImageBitmap(await response.blob());
+			if (current !== request) return;
+			const region = settings.region;
+			const sx = region ? Math.round(region.x * bitmap.width) : 0;
+			const sy = region ? Math.round(region.y * bitmap.height) : 0;
+			const sw = region ? Math.max(1, Math.round(region.width * bitmap.width)) : bitmap.width;
+			const sh = region ? Math.max(1, Math.round(region.height * bitmap.height)) : bitmap.height;
+			const sample = 10;
+			const context = new OffscreenCanvas(sample, sample).getContext("2d");
+			if (!context) return;
+			context.drawImage(bitmap, sx, sy, sw, sh, 0, 0, sample, sample);
+			const pixels = context.getImageData(0, 0, sample, sample).data;
+			if (current !== request) return;
+			mode.value = imageModeFromPixels(pixels, threshold);
+		} catch {
+			if (current === request) mode.value = fallback;
+		}
+	}
+	watch(() => toValue(src), (url) => {
+		if (!url) {
+			request += 1;
+			mode.value = toValue(options).fallback ?? null;
+			return;
+		}
+		detect(url);
+	}, { immediate: true });
+	onScopeDispose(() => {
+		request += 1;
+	});
+	return mode;
+}
+//#endregion
+//#region src/composables/KeyboardHint.vue
+const _hoisted_1 = { class: "astryx-keyboard-hint__keys" };
+const _hoisted_2 = { class: "astryx-keyboard-hint__label" };
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "KeyboardHint",
+	props: {
+		visible: { type: Boolean },
+		anchor: {},
+		orientation: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const messages = useAstryxMessages();
+		const hint = ref(null);
+		const position = ref({
+			top: 0,
+			left: 0
+		});
+		const keys = computed(() => {
+			if (props.orientation === "vertical") return ["up", "down"];
+			if (props.orientation === "both") return [
+				"left",
+				"right",
+				"up",
+				"down"
+			];
+			return ["left", "right"];
+		});
+		const style = computed(() => ({
+			top: `${position.value.top}px`,
+			left: `${position.value.left}px`
+		}));
+		function place() {
+			const anchor = props.anchor;
+			const element = hint.value;
+			if (!anchor || !element) return;
+			const rect = anchor.getBoundingClientRect();
+			const hintRect = element.getBoundingClientRect();
+			const top = Math.max(8, rect.top - hintRect.height - 8);
+			const left = Math.min(window.innerWidth - hintRect.width - 8, Math.max(8, rect.left + rect.width / 2 - hintRect.width / 2));
+			position.value = {
+				top,
+				left
+			};
+		}
+		watch(() => [props.visible, props.anchor], () => {
+			if (!props.visible) return;
+			requestAnimationFrame(() => place());
+		});
+		function onScroll() {
+			if (props.visible) place();
+		}
+		onMounted(() => {
+			window.addEventListener("scroll", onScroll, true);
+			window.addEventListener("resize", onScroll);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("scroll", onScroll, true);
+			window.removeEventListener("resize", onScroll);
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "hint",
+				ref: hint,
+				class: "astryx-keyboard-hint",
+				"aria-hidden": "true",
+				style: normalizeStyle(style.value)
+			}, [createElementVNode("span", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(keys.value, (key) => {
+				return openBlock(), createBlock(_sfc_main$1, {
+					key,
+					keys: key
+				}, null, 8, ["keys"]);
+			}), 128))]), createElementVNode("span", _hoisted_2, toDisplayString(unref(messages).keyboardHint.navigate), 1)], 4)), [[vShow, __props.visible]]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useKeyboardHint.ts
+const ARROW_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown"
+]);
+/**
+* 一组方向键控件第一次被键盘点进来时，在当前项旁边短暂提示「用方向键移动」。
+* 按过方向键、超时或焦点离开之后不再出现。
+*/
+function useKeyboardHint(options = {}) {
+	const visible = ref(false);
+	const anchor = ref(null);
+	const orientation = computed(() => options.orientation ?? "horizontal");
+	let dismissed = false;
+	let timer;
+	function hide() {
+		visible.value = false;
+		if (timer != null) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+	}
+	function show(target) {
+		if (dismissed || options.isEnabled === false) return;
+		anchor.value = target;
+		visible.value = true;
+		if (timer != null) clearTimeout(timer);
+		timer = setTimeout(() => {
+			dismissed = true;
+			hide();
+		}, options.dismissAfterMs ?? 3e3);
+	}
+	function onFocus(event) {
+		if (dismissed || options.isEnabled === false) return;
+		const target = event.target;
+		const current = event.currentTarget;
+		if (!(target instanceof HTMLElement) || !(current instanceof HTMLElement)) return;
+		if (event.relatedTarget instanceof Node && current.contains(event.relatedTarget)) {
+			if (visible.value) anchor.value = target;
+			return;
+		}
+		if (!target.matches(":focus-visible")) return;
+		show(target);
+	}
+	function onBlur(event) {
+		const current = event.currentTarget;
+		if (!(current instanceof HTMLElement)) return;
+		if (event.relatedTarget instanceof Node && current.contains(event.relatedTarget)) return;
+		hide();
+	}
+	function onKeyDown(event) {
+		if (!ARROW_KEYS.has(event.key)) return;
+		dismissed = true;
+		hide();
+	}
+	onBeforeUnmount(() => {
+		if (timer != null) clearTimeout(timer);
+	});
+	return {
+		visible,
+		anchor,
+		orientation,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		Hint: defineComponent({
+			name: "AstryxKeyboardHint",
+			setup() {
+				return () => h(_sfc_main, {
+					visible: visible.value,
+					anchor: anchor.value,
+					orientation: toValue(orientation)
+				});
+			}
+		})
+	};
+}
+//#endregion
+//#region src/composables/useScrollOverflow.ts
+/**
+* 观察一个横向滚动容器，报告起始边和结束边有没有被挡住。
+* 容差 1px，滚动和尺寸变化都会重新量。
+*/
+function useScrollOverflow() {
+	const element = ref(null);
+	const overflowStart = ref(false);
+	const overflowEnd = ref(false);
+	const hasOverflow = ref(false);
+	let observer;
+	function measure() {
+		const node = element.value;
+		if (node == null) return;
+		const tolerance = 1;
+		const maxScroll = node.scrollWidth - node.clientWidth;
+		const nextStart = Math.abs(node.scrollLeft) > tolerance;
+		const nextEnd = Math.abs(node.scrollLeft) < maxScroll - tolerance;
+		const nextHas = node.scrollWidth > node.clientWidth + tolerance;
+		overflowStart.value = nextStart;
+		overflowEnd.value = nextEnd;
+		hasOverflow.value = nextHas;
+	}
+	function scrollRef(node) {
+		element.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+		element.value = node;
+		if (node == null) return;
+		node.addEventListener("scroll", measure, { passive: true });
+		if (typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(measure);
+			observer.observe(node);
+		}
+		measure();
+	}
+	onBeforeUnmount(() => {
+		element.value?.removeEventListener("scroll", measure);
+		observer?.disconnect();
+	});
+	return {
+		scrollRef,
+		overflowStart,
+		overflowEnd,
+		hasOverflow
+	};
+}
+//#endregion
+//#region src/composables/useStreamingText.ts
+const CHARS_PER_TICK = {
+	natural: 10,
+	fast: 4,
+	instant: Number.POSITIVE_INFINITY
+};
+const FALLBACK_DURATION_MS = 95;
+function parseCssDuration(value) {
+	const milliseconds = /^([\d.]+)ms$/.exec(value.trim());
+	if (milliseconds?.[1] != null) return Number(milliseconds[1]);
+	const seconds = /^([\d.]+)s$/.exec(value.trim());
+	if (seconds?.[1] != null) return Number(seconds[1]) * 1e3;
+	return null;
+}
+function motionDuration() {
+	if (typeof document === "undefined") return FALLBACK_DURATION_MS;
+	return parseCssDuration(getComputedStyle(document.documentElement).getPropertyValue("--astryx-duration-fast-min")) ?? FALLBACK_DURATION_MS;
+}
+function tickInterval(speed) {
+	if (speed === "instant") return 0;
+	const duration = motionDuration();
+	const tick = speed === "fast" ? duration / 20 : duration / 10;
+	return Math.max(4, Math.round(tick));
+}
+const graphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function isLowSurrogate(codeUnit) {
+	return codeUnit >= 56320 && codeUnit <= 57343;
+}
+/**
+* Move `offset` back to the start of the grapheme it lands inside, so a slice
+* never cuts a surrogate pair, a flag, or a ZWJ sequence in half.
+*/
+function snapToGraphemeBoundary(text, offset) {
+	if (offset <= 0 || offset >= text.length) return offset;
+	if (graphemeSegmenter != null) return graphemeSegmenter.segment(text).containing(offset)?.index ?? offset;
+	return isLowSurrogate(text.charCodeAt(offset)) ? offset - 1 : offset;
+}
+/**
+* Smooth a burst of streamed text into a steady reveal.
+* While `isStreaming` is false, or the user prefers reduced motion, the full
+* source is returned. The reveal steps by UTF-16 units and then snaps back to
+* a grapheme boundary.
+*/
+function useStreamingText(targetText, isStreaming = false, options) {
+	const displayedLen = ref(0);
+	const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const target = computed(() => toValue(targetText));
+	const streaming = computed(() => toValue(isStreaming));
+	const speed = computed(() => toValue(options)?.speed ?? "natural");
+	const instant = computed(() => !streaming.value || speed.value === "instant" || prefersReducedMotion.value);
+	watch(target, (next, previous) => {
+		if (next.length === 0 && (previous?.length ?? 0) > 0) displayedLen.value = 0;
+	});
+	watch(streaming, (next) => {
+		if (!next) displayedLen.value = target.value.length;
+	});
+	watch(instant, (isInstant, _, onCleanup) => {
+		if (isInstant) return;
+		let frame = 0;
+		let lastTick = 0;
+		const tick = (now) => {
+			const interval = tickInterval(speed.value);
+			if (now - lastTick >= interval) {
+				lastTick = now;
+				const goal = target.value.length;
+				if (displayedLen.value < goal) {
+					const step = CHARS_PER_TICK[speed.value];
+					displayedLen.value = Math.min(displayedLen.value + step, goal);
+				}
+			}
+			frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		onCleanup(() => cancelAnimationFrame(frame));
+	}, { immediate: true });
+	return computed(() => {
+		const text = target.value;
+		if (instant.value) return text;
+		return text.slice(0, snapToGraphemeBoundary(text, displayedLen.value));
+	});
+}
+//#endregion
+export { imageModeFromPixels as a, useGridRovingFocus as c, useKeyboardHint as i, useControllableState as l, useStreamingText as n, perceptualLightness as o, useScrollOverflow as r, useImageMode as s, snapToGraphemeBoundary as t, useContainerReveal as u };