@astryx-vue/core 0.2.3 → 0.2.4

package/dist/{composables-DDI08XFF.js → useResizable-B3ahKLoZ.js}

@@ -1,126 +1,80 @@
-import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { computed, onBeforeUnmount, onMounted, reactive, ref, toValue, watch } from "vue";
-//#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
-	};
+import { t as isApplePlatform } from "./platform-B_9W_aHW.js";
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, reactive, ref, toValue, watch } from "vue";
+//#region src/composables/useHotkeys.ts
+const KEY_ALIASES = {
+	esc: "escape",
+	space: " ",
+	up: "arrowup",
+	down: "arrowdown",
+	left: "arrowleft",
+	right: "arrowright",
+	return: "enter",
+	plus: "+"
+};
+function isTypingTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+function isImeKeyEvent(event) {
+	return event.isComposing === true || event.key === "Process" || event.keyCode === 229;
+}
+function matchesCombo(keys, event, isApple) {
+	const parts = keys.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	if (parts.length === 0) return false;
+	const key = parts[parts.length - 1] ?? "";
+	const mods = new Set(parts.slice(0, -1));
+	const wantsMod = mods.has("mod");
+	const wantsCtrl = mods.has("ctrl") || wantsMod && !isApple;
+	const wantsMeta = mods.has("meta") || wantsMod && isApple;
+	const wantsAlt = mods.has("alt");
+	const wantsShift = mods.has("shift");
+	if (event.ctrlKey !== wantsCtrl) return false;
+	if (event.metaKey !== wantsMeta) return false;
+	if (event.altKey !== wantsAlt) return false;
+	if (wantsShift && !event.shiftKey) return false;
+	const expected = KEY_ALIASES[key] ?? key;
+	return event.key.toLowerCase() === expected;
 }
-//#endregion
-//#region src/composables/useGridRovingFocus.ts
 /**
-* 网格式导航（roving tabindex）：用方向键在二维网格中移动焦点。
-* 供 Calendar、Pagination（如果需要）等组件复用。
+* 对应原版 Astryx 的 `hooks/useHotkeys`。
+*
+* 一个实例只在 window 上挂一个 keydown。快捷键列表放在调用方，
+* 重新渲染不会反复订阅。已经 preventDefault 的事件、输入法组合中的事件会跳过。
+* 焦点在输入控件里时默认不触发，除非那一条写了 `allowInInputs`。
+*
+* 单个没有修饰键的字符（例如 `c`、`/`）很容易被语音输入误触。
+* 如果注册这种快捷键，调用方需要提供关闭、改键，或只在组件有焦点时生效。
 */
-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();
+function useHotkeys(hotkeys) {
+	let stop = null;
+	function start() {
+		if (typeof window === "undefined" || stop != null) return;
+		const isApple = isApplePlatform();
+		function handleKeyDown(event) {
+			if (event.defaultPrevented || isImeKeyEvent(event)) return;
+			const isTyping = isTypingTarget(event.target);
+			for (const hotkey of toValue(hotkeys)) {
+				if (hotkey.isDisabled) continue;
+				if (isTyping && hotkey.allowInInputs !== true) continue;
+				if (matchesCombo(hotkey.keys, event, isApple)) {
+					event.preventDefault();
+					hotkey.onPress(event);
+					return;
+				}
+			}
 		}
+		window.addEventListener("keydown", handleKeyDown);
+		stop = () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			stop = null;
+		};
 	}
-	return {
-		row,
-		column,
-		onKeyDown,
-		moveTo
-	};
+	onMounted(start);
+	onScopeDispose(() => {
+		stop?.();
+	});
 }
 //#endregion
 //#region src/composables/useResizable.ts
@@ -467,133 +421,4 @@ function useResizable(options) {
 	return useSingleRegion(options);
 }
 //#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 { useResizable as a, percent as i, useStreamingText as n, useGridRovingFocus as o, useScrollOverflow as r, useControllableState as s, snapToGraphemeBoundary as t };
+export { useResizable as n, useHotkeys as r, percent as t };

package/dist/useTruncation-B5qXQzAP.js

@@ -0,0 +1,53 @@
+import { onBeforeUnmount, ref, watch } from "vue";
+//#region src/Text/useTruncation.ts
+/** `false` 关掉提示。`true` 和缺省都出现在上方。 */
+function truncatePlacement(value) {
+	if (value === false) return null;
+	if (value == null || value === true) return "above";
+	return value;
+}
+function useTruncation(maxLines) {
+	const isTruncated = ref(false);
+	const fullText = ref("");
+	let observer;
+	let node = null;
+	function measure() {
+		if (!node || maxLines.value <= 0) {
+			isTruncated.value = false;
+			fullText.value = "";
+			return;
+		}
+		fullText.value = node.textContent ?? "";
+		if (maxLines.value === 1) {
+			isTruncated.value = node.scrollWidth > node.clientWidth + 1;
+			return;
+		}
+		let contentHeight = node.scrollHeight;
+		try {
+			const range = node.ownerDocument.createRange();
+			range.selectNodeContents(node);
+			contentHeight = range.getBoundingClientRect().height;
+			range.detach();
+		} catch {}
+		isTruncated.value = contentHeight > node.clientHeight + 1;
+	}
+	function bind(value) {
+		observer?.disconnect();
+		observer = void 0;
+		node = value instanceof HTMLElement ? value : null;
+		if (node && typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(() => measure());
+			observer.observe(node);
+		}
+		measure();
+	}
+	watch(maxLines, () => measure());
+	onBeforeUnmount(() => observer?.disconnect());
+	return {
+		bind,
+		isTruncated,
+		fullText
+	};
+}
+//#endregion
+export { useTruncation as n, truncatePlacement as t };

package/locales/SOURCE.json

@@ -0,0 +1,37 @@
+{
+  "repository": "https://github.com/facebook/astryx",
+  "path": "packages/core/locales",
+  "commit": "df75749470029f0b34680e13deac635f2d72c89d",
+  "files": [
+    "af-ZA.json",
+    "ar-SA.json",
+    "ca-ES.json",
+    "cs-CZ.json",
+    "da-DK.json",
+    "de-DE.json",
+    "el-GR.json",
+    "en.json",
+    "es-ES.json",
+    "fi-FI.json",
+    "fr-FR.json",
+    "he-IL.json",
+    "hu-HU.json",
+    "it-IT.json",
+    "ja-JP.json",
+    "ko-KR.json",
+    "nl-NL.json",
+    "no-NO.json",
+    "pl-PL.json",
+    "pt-BR.json",
+    "pt-PT.json",
+    "ro-RO.json",
+    "ru-RU.json",
+    "sr-SP.json",
+    "sv-SE.json",
+    "tr-TR.json",
+    "uk-UA.json",
+    "vi-VN.json",
+    "zh-CN.json",
+    "zh-TW.json"
+  ]
+}