@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{useAnchoredListbox-DwztMNjP.js → useAnchoredListbox-DGxxKHZb.js}

@@ -1,4 +1,4 @@
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
 import { computed, onMounted, ref, toValue, watch } from "vue";
 //#region src/Typeahead/useAnchoredListbox.ts
 /** 想要的宽度再宽也要给视口留边。没给就不插手宽度。 */
@@ -24,7 +24,7 @@ function useAnchoredListbox(options) {
 		container: options.layer,
 		trigger: options.anchor,
 		isEnabled: options.isOpen,
-		enableEscape: ref(false),
+		dismissOnEscape: "ignore",
 		onDismiss: options.onDismiss
 	});
 	const anchorWidth = ref(0);

package/dist/{useAsyncSource-xpQovjV_.d.ts → useAsyncSource-aGzrvRkI.d.ts}

@@ -1,3 +1,4 @@
+import { t as OptionActionNode } from "./optionAction-Cg7xQLUA.js";
 import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
 //#region src/composables/useAsyncSource.d.ts
 /**
@@ -8,6 +9,8 @@ interface SearchableItem<TAux = unknown> {
   label: string;
   disabled?: boolean;
   description?: string;
+  /** 这一项旁边的操作。点它不会改选择。有一项带了操作，菜单就变成两列网格。 */
+  action?: OptionActionNode | null;
   auxiliaryData?: TAux;
 }
 /**

package/dist/{useClickableContainer-DyNpnSEa.js → useClickableContainer-CdGp_Cev.js}

@@ -109,4 +109,4 @@ function useClickableContainer(options) {
 	};
 }
 //#endregion
-export { useClickableContainer as n, INTERACTIVE_SELECTORS as t };
+export { useClickableContainer as i, hasInteractiveAncestor as n, hasTextSelection as r, INTERACTIVE_SELECTORS as t };

package/dist/{useClipboard-BDfbEsWd.js → useClipboard-Dk8cS810.js}

@@ -1,4 +1,4 @@
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
 import { onScopeDispose, ref } from "vue";
 //#region src/composables/useClipboard.ts
 const DEFAULT_RESET_AFTER_MS = 2e3;

package/dist/useHoverLayerDismiss-kYJ_NqL4.js

@@ -0,0 +1,27 @@
+import { i as pushLayer, n as useLayerDepth, r as isTopLayer } from "./layerDepth-CNDh-IHb.js";
+import { onScopeDispose } from "vue";
+//#region src/layer/useHoverLayerDismiss.ts
+/**
+* Tooltip 和 HoverCard 共用的关闭登记。
+*
+* 整段生命周期都留在栈里。没打开时 `isPresent` 为假，不会吃掉别人的 Escape。
+* 嵌套深度在 setup 时从外层读一次。同一提示再打开仍用原来的排位号，
+* 但包在别的浮层里面时深度更大，Escape 先关它。
+*/
+function useHoverLayerDismiss(options) {
+	const depth = useLayerDepth();
+	const token = {};
+	const stop = pushLayer({
+		token,
+		depth,
+		getContainer: options.getContainer,
+		dismissOnPointerOutside: false,
+		dismissOnEscape: "close",
+		isPresent: options.isPresent,
+		onDismiss: options.onDismiss
+	});
+	onScopeDispose(stop);
+	return { isTop: () => isTopLayer(token) };
+}
+//#endregion
+export { useHoverLayerDismiss as t };

package/dist/{useIndicator-i1NORM7W.js → useIndicator-D9Y0dJsm.js}

@@ -1,28 +1,10 @@
-import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$2 } from "./Icon-KDnUyY7f.js";
 import { n as themeContextKey } from "./context-Cws_tXTr.js";
-import { n as decorativeAttrs, t as _sfc_main$3 } from "./CheckboxIndicator-D37cm2Rh.js";
-import { Comment, Fragment, Text, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, openBlock, renderSlot, unref, useAttrs, useSlots, useTemplateRef } from "vue";
+import { t as isRenderable } from "./isRenderable-BnKHIqfd.js";
+import { n as decorativeAttrs, t as _sfc_main$3 } from "./CheckboxIndicator-fH4d-JE1.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, openBlock, renderSlot, unref, useAttrs, useSlots, useTemplateRef } from "vue";
 import "../styles/check-indicator.css";
 import "../styles/radio-indicator.css";
-//#region src/Indicator/isRenderable.ts
-/**
-* Whether a slot or vnode should replace an indicator's own mark.
-*
-* Null, undefined, booleans, and the empty string do not count. An element
-* does, even when that element later renders nothing. A host writes
-* `v-if="busy"` around a spinner, and `false` must not delete the mark.
-*/
-function isRenderable(value) {
-	if (value == null || typeof value === "boolean" || value === "") return false;
-	if (Array.isArray(value)) return value.some((item) => isRenderable(item));
-	if (typeof value !== "object") return true;
-	const node = value;
-	if (node.type === Comment) return false;
-	if (node.type === Text) return String(node.children ?? "").trim() !== "";
-	if (node.type === Fragment) return isRenderable(node.children);
-	return true;
-}
-//#endregion
 //#region src/Indicator/useReplacementSlot.ts
 /**
 * Whether the default slot should take the place of the state mark.
@@ -144,4 +126,4 @@ function useIndicator(name) {
 	return computed(() => getIndicator(name, context?.value.theme));
 }
 //#endregion
-export { _sfc_main as a, isCoreIndicatorName as i, defaultIndicators as n, _sfc_main$1 as o, getIndicator as r, isRenderable as s, useIndicator as t };
+export { _sfc_main as a, isCoreIndicatorName as i, defaultIndicators as n, _sfc_main$1 as o, getIndicator as r, useIndicator as t };

package/dist/{useInputContainer-CpgDe2-4.js → useInputContainer-CLcYrby4.js}

@@ -1,4 +1,4 @@
-import { n as useClickableContainer } from "./useClickableContainer-DyNpnSEa.js";
+import { i as useClickableContainer } from "./useClickableContainer-CdGp_Cev.js";
 import { toValue } from "vue";
 //#region src/composables/useInputContainer.ts
 /** 点了以后接焦点的输入框类型：这些类型自己不会因为点击容器而聚焦。 */

package/dist/{useInputStatusIcon-DBOwxV4x.js → useInputStatusIcon-CWkCeMyX.js}

@@ -1,5 +1,5 @@
-import { t as _sfc_main } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$1 } from "./FieldInfoTip-Ds-sW_jY.js";
+import { t as _sfc_main } from "./FieldIcon-BFSHZEs_.js";
+import { t as _sfc_main$1 } from "./FieldInfoTip-BbgLt4ug.js";
 import { computed, toValue } from "vue";
 //#region src/composables/useInputStatusIcon.ts
 /**

package/dist/useLayerMountTarget-BmZyeKWE.js

@@ -0,0 +1,156 @@
+import { computed, inject, provide, ref } from "vue";
+//#region src/layer/mount.ts
+/**
+* 浮层的挂载点：浮层内容实际挂到哪个 DOM 元素里。
+*
+* 平时浮层挂到 `body`。但 Dialog 打开时它是一个原生模态层，页面上的东西都被
+* 它压住、也点不到，挂在 `body` 的浮层会看不见、点不着。所以 Dialog 打开时
+* 由它提供自己内部的挂载点，浮层优先挂进去。
+*/
+/** 最近的浮层挂载点。没提供时为 `null`，表示挂到 `body`。 */
+const layerMountKey = Symbol("astryx-layer-mount");
+/** 由 Dialog 这类模态容器调用：打开期间浮层挂到 `el` 里。 */
+function provideLayerMountTarget(el) {
+	provide(layerMountKey, el);
+}
+/**
+* 不能把浮层挂进去的祖先元素。
+*
+* 两类原因：
+*
+* 1. HTML 解析规则。`<p>`、标题这类元素只收短语内容，里面塞块元素会让解析器
+*    提前闭合段落，浮层的内容就漏到页面上了。
+* 2. 交互祖先会抢走浮层自己的交互。浮层挂在 `<a>` 或 `<button>` 里，里面的链接
+*    和按钮都成了那个控件的子元素：点链接会跳转外层链接，浮层里每个可聚焦元素
+*    都并进那个控件自己的 Tab 位。
+*
+* 行内格式化元素也在名单里，因为它们会把排版（字号、居中等）传给浮层。
+*/
+const UNSAFE_HOSTS = /* @__PURE__ */ new Set([
+	"p",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"dt",
+	"pre",
+	"legend",
+	"data",
+	"dfn",
+	"meter",
+	"output",
+	"progress",
+	"option",
+	"optgroup",
+	"table",
+	"thead",
+	"tbody",
+	"tfoot",
+	"tr",
+	"colgroup",
+	"ul",
+	"ol",
+	"menu",
+	"dl",
+	"select",
+	"datalist",
+	"picture",
+	"hgroup",
+	"ruby",
+	"rt",
+	"rp",
+	"a",
+	"button",
+	"label",
+	"summary",
+	"span",
+	"em",
+	"strong",
+	"b",
+	"i",
+	"u",
+	"s",
+	"small",
+	"mark",
+	"code",
+	"kbd",
+	"samp",
+	"var",
+	"sub",
+	"sup",
+	"abbr",
+	"cite",
+	"q",
+	"time",
+	"bdi",
+	"bdo",
+	"ins",
+	"del"
+]);
+/**
+* 算出浮层该挂到哪个元素上。
+*
+* 沿着浮层本来打算渲染的位置往上走：遇到不能挂的祖先就记下来，走到最近的原生
+* `<dialog>` 就停（再往外挂就出了模态层，浮层会变成不可交互）。返回 `null`
+* 表示原地渲染就行，不用搬家。
+*
+* 保留「尽量靠近原位」这一点是有意的：主题作用域和 Tab 顺序都挂在 DOM 位置上，
+* 直接挂到 `body` 会丢掉嵌套主题里的变量，也会让浮层里的可聚焦元素跑到页面末尾。
+*/
+function resolveLayerMountTarget(inlineParent) {
+	if (inlineParent == null) return null;
+	let outermostUnsafe = null;
+	let node = inlineParent;
+	while (node != null) {
+		const tagName = node.tagName.toLowerCase();
+		if (tagName === "dialog") break;
+		if (UNSAFE_HOSTS.has(tagName)) outermostUnsafe = node;
+		node = node.parentElement;
+	}
+	return outermostUnsafe?.parentElement ?? null;
+}
+//#endregion
+//#region src/composables/useLayerMountTarget.ts
+/**
+* 读最近的浮层挂载点。Dialog 打开时是它内部的挂载点，其余情况是 `null`。
+*
+* 挂载点是「浮层内容实际挂到哪个 DOM 元素里」。浮层平时挂在 `body`，
+* 但 Dialog 打开时它是一个原生模态层，挂在外面的浮层会被压住、点不到，
+* 所以要先问一句。
+*/
+function useLayerMountTarget() {
+	return inject(layerMountKey, ref(null));
+}
+/**
+* 读最近的浮层挂载点，并算成可以直接给 `Teleport` 的 `to`。
+* 没有挂载点就是 `'body'`。
+*
+* ```vue
+* <Teleport :to="teleportTarget">
+* ```
+*/
+function useLayerTeleportTarget() {
+	const mount = useLayerMountTarget();
+	return computed(() => mount.value ?? "body");
+}
+/**
+* 浮层该挂到哪。
+*
+* Dialog 提供了挂载点时优先用它，再往外挂就出了模态层。
+* 否则看触发器旁边有没有不能挂浮层的祖先（段落、链接、按钮）。
+* 有的话挂到那个祖先的外面、尽量靠近原位，嵌套主题和 Tab 顺序还在。
+* 两边都没有，才挂到 `body`。
+*
+* `sentinel` 是触发器所在的元素。函数看的是它的父元素。
+*/
+function useResolvedLayerTeleport(sentinel) {
+	const mount = useLayerMountTarget();
+	return computed(() => {
+		if (mount.value) return mount.value;
+		return resolveLayerMountTarget(sentinel.value?.parentElement ?? null) ?? "body";
+	});
+}
+//#endregion
+export { provideLayerMountTarget as i, useLayerTeleportTarget as n, useResolvedLayerTeleport as r, useLayerMountTarget as t };

package/dist/{useListFocus-D0iOJl39.js → useListFocus-ChxLg0b4.js}

@@ -1,4 +1,4 @@
-import { ref, watch } from "vue";
+import { ref, toValue, watch } from "vue";
 //#region src/composables/useListFocus.ts
 const TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
 	"text",
@@ -49,7 +49,7 @@ function shouldDeferToCaret(target, key) {
 * 由这里维持唯一的 tab 停靠点。横向时会看容器的书写方向，RTL 里左右对调。
 */
 function useListFocus(options = {}) {
-	const { itemSelector = "[role=\"menuitem\"]", boundarySelector, wrap = true, onEscape, orientation = "vertical", hasHomeEnd = true, hasPaging = false, hasRovingTabIndex = false, hasCaretGuard = false } = options;
+	const { itemSelector = "[role=\"menuitem\"]", boundarySelector, wrap = true, onEscape, hasHomeEnd = true, hasPaging = false, hasRovingTabIndex = false, hasCaretGuard = false } = options;
 	const listRef = ref(null);
 	function isItemDisabled(el) {
 		return el.getAttribute("aria-disabled") === "true" || el.disabled === true || el.hasAttribute("disabled");
@@ -188,6 +188,7 @@ function useListFocus(options = {}) {
 			}
 			return;
 		}
+		const orientation = toValue(options.orientation ?? "vertical");
 		const horizontal = orientation === "horizontal" || orientation === "both";
 		const vertical = orientation === "vertical" || orientation === "both";
 		const nextKeys = [];

package/dist/{useMenuDrillIn-DzKGkTho.js → useMenuDrillIn-DhUnPvKs.js}

@@ -1,6 +1,7 @@
-import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$5 } from "./Item-KhFKX9St.js";
-import { t as _sfc_main$6 } from "./CheckboxIndicator-D37cm2Rh.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
+import { t as _sfc_main$4 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$5 } from "./Item-DWMIjN8n.js";
+import { t as _sfc_main$6 } from "./CheckboxIndicator-fH4d-JE1.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useSlots, watch, withCtx } from "vue";
 import "../styles/dropdown-menu.css";
 //#region src/DropdownMenu/MenuSelectionMark.vue
@@ -66,10 +67,10 @@ function useContextMenuSize() {
 }
 //#endregion
 //#region src/DropdownMenu/context.ts
-const dropdownMenuContextKey = Symbol("astryx-dropdown-menu-context");
+const dropdownMenuContextKey = defineLayerScopedKey("astryx-dropdown-menu-context", void 0);
 /** The surrounding menu, or `undefined` when a row stands alone. */
 function useDropdownMenuContext() {
-	return inject(dropdownMenuContextKey, void 0);
+	return readLayerScoped(dropdownMenuContextKey);
 }
 const dropdownMenuRadioGroupKey = Symbol("astryx-dropdown-menu-radio-group");
 /** The radio group around this row, or `undefined` when there is none. */

package/dist/useMenuHover-Djreu23i.js

@@ -0,0 +1,170 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { t as useListFocus } from "./useListFocus-ChxLg0b4.js";
+import { t as createHideTimer } from "./hoverIntent-DMHGb85c.js";
+import { getCurrentScope, onScopeDispose, toValue, watch } from "vue";
+/**
+* 对应原版 Astryx 的 `hooks/useMenuHover`（内部用，和原版一样不从包入口导出）。
+*
+* 悬停是在普通弹层行为上的增强：点击切换，Escape 和点外关闭，方向键导航；
+* 再加上：鼠标进入后延时打开，离开时关掉由悬停打开的那一次。
+*
+* 三个不明显但很要紧的行为：
+* 1. 悬停后点击的保护。悬停打开时菜单已经在指针下面了，紧跟着的那一下点击会把它关掉。
+*    `clickGuardMs` 内的点击改为确认：菜单钉住，之后就像点击打开的一样。
+* 2. 焦点同步移动。点击或键盘打开后立刻把焦点放进第一项；悬停打开时指针在主导，焦点留在触发器上。
+* 3. 原生点外关闭。`popoverId` 让触发器成为弹层的调用者，点它不算点外。
+*
+* 另外：触发器在悬停等待期间被禁用时，那个已经排好的打开会作废，菜单保持关闭。
+*/
+function useMenuHover(options) {
+	const ownsFocus = options.ownsFocus ?? true;
+	const hasHover = useMediaQuery("(hover: hover)");
+	let showTimer = null;
+	let triggerEl = null;
+	/** 这次是悬停打开的，所以离开可以关。 */
+	let isHoverMode = false;
+	let closedAt = 0;
+	/** 这次打开是悬停打开的时刻；确认或关闭后为 0。 */
+	let hoverOpenedAt = 0;
+	const isOpen = () => toValue(options.isOpen);
+	const isEnabled = () => toValue(options.isEnabled);
+	const clickGuardMs = () => toValue(options.clickGuardMs) ?? 500;
+	const list = useListFocus({
+		itemSelector: options.itemSelector,
+		onEscape: () => onEscape()
+	});
+	const menuRef = list.listRef;
+	const hideTimer = createHideTimer(() => toValue(options.hideDelay) ?? 200, () => options.hide());
+	function clearTimeouts() {
+		if (showTimer != null) {
+			clearTimeout(showTimer);
+			showTimer = null;
+		}
+		hideTimer.clear();
+	}
+	watch(isOpen, (open, wasOpen) => {
+		if (wasOpen && !open) {
+			isHoverMode = false;
+			hoverOpenedAt = 0;
+			closedAt = Date.now();
+		}
+	}, { flush: "sync" });
+	watch(isEnabled, (enabled) => {
+		if (!enabled) clearTimeouts();
+	}, { flush: "sync" });
+	if (getCurrentScope() != null) onScopeDispose(clearTimeouts);
+	function close() {
+		const menuHadFocus = typeof document !== "undefined" && (menuRef.value?.contains(document.activeElement) ?? false);
+		options.hide();
+		if (menuHadFocus) triggerEl?.focus();
+	}
+	function onEscape() {
+		clearTimeouts();
+		close();
+	}
+	function focusMenu() {
+		if (!list.focusFirst()) menuRef.value?.focus();
+	}
+	function openAndFocus() {
+		if (!ownsFocus) {
+			options.show();
+			return;
+		}
+		options.show({ skipAutoFocus: true });
+		focusMenu();
+	}
+	function resetHover() {
+		closedAt = 0;
+		isHoverMode = false;
+		hoverOpenedAt = 0;
+	}
+	function confirmHoverOpen() {
+		const guard = clickGuardMs();
+		if (!(guard > 0 && hoverOpenedAt > 0 && Date.now() - hoverOpenedAt < guard)) return false;
+		isHoverMode = false;
+		hoverOpenedAt = 0;
+		return true;
+	}
+	function onClick(event) {
+		if (!isEnabled()) return;
+		if (options.popoverId != null) event?.preventDefault();
+		clearTimeouts();
+		if (event != null && event.detail === 0) {
+			resetHover();
+			if (!isOpen()) openAndFocus();
+			else if (ownsFocus) focusMenu();
+			return;
+		}
+		if (!isOpen()) {
+			resetHover();
+			openAndFocus();
+			return;
+		}
+		if (confirmHoverOpen()) {
+			if (ownsFocus) focusMenu();
+			return;
+		}
+		close();
+	}
+	function onTriggerMouseEnter() {
+		if (!isEnabled() || !hasHover.value) return;
+		if (closedAt > 0 && Date.now() - closedAt < 300) return;
+		if (isOpen()) {
+			clearTimeouts();
+			return;
+		}
+		isHoverMode = true;
+		clearTimeouts();
+		const openByHover = () => {
+			showTimer = null;
+			if (!isEnabled()) return;
+			hoverOpenedAt = Date.now();
+			options.show({ skipAutoFocus: true });
+		};
+		const delay = toValue(options.showDelay) ?? 150;
+		if (delay > 0) showTimer = setTimeout(openByHover, delay);
+		else openByHover();
+	}
+	function onMouseLeave(event) {
+		if (!isEnabled()) return;
+		closedAt = 0;
+		if (!isHoverMode) return;
+		clearTimeouts();
+		const apex = event == null ? null : {
+			x: event.clientX,
+			y: event.clientY
+		};
+		hideTimer.schedule(apex, options.flyoutRef?.value ?? menuRef.value, isOpen());
+	}
+	function onContentMouseEnter() {
+		if (isEnabled()) clearTimeouts();
+	}
+	function onContentKeyDown(event) {
+		if (isEnabled()) list.handleKeyDown(event);
+	}
+	function setTriggerEl(el) {
+		triggerEl = typeof HTMLElement !== "undefined" && el instanceof HTMLElement ? el : null;
+	}
+	const triggerProps = {
+		onClick,
+		onMouseenter: onTriggerMouseEnter,
+		onMouseleave: onMouseLeave
+	};
+	if (options.popoverId != null) triggerProps.popovertarget = options.popoverId;
+	return {
+		close,
+		confirmHoverOpen,
+		contentProps: {
+			onKeydown: onContentKeyDown,
+			onMouseenter: onContentMouseEnter,
+			onMouseleave: onMouseLeave
+		},
+		focusFirst: list.focusFirst,
+		focusMenu,
+		menuRef,
+		setTriggerEl,
+		triggerProps
+	};
+}
+//#endregion
+export { useMenuHover as t };