@astryx-vue/core 0.3.0 → 0.4.1

package/dist/{Typeahead-JP9RT87x.js → Typeahead-DRyf2HEh.js}

@@ -1,13 +1,17 @@
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$5 } from "./Token-DsntTYhQ.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
-import { r as useTypeaheadMenu, t as _sfc_main$6 } from "./TypeaheadMenu-DBW6rHeO.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { t as _sfc_main$3 } from "./Spinner-BY8iQz--.js";
+import { t as _sfc_main$4 } from "./Field-JIxT3xCh.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$5 } from "./Token-DhsAtAH6.js";
+import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DGxxKHZb.js";
+import { i as useTypeaheadMenu, r as useLatchedOptionGrid, t as _sfc_main$6 } from "./TypeaheadMenu-BY5__sPC.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import "../styles/layer.css";
 import "../styles/visually-hidden-utility.css";
 import "../styles/typeahead.css";
 //#region src/Typeahead/context.ts
@@ -34,6 +38,7 @@ const _hoisted_2 = [
 	"aria-disabled",
 	"aria-expanded",
 	"aria-controls",
+	"aria-haspopup",
 	"aria-label",
 	"aria-labelledby",
 	"aria-activedescendant",
@@ -45,6 +50,7 @@ const _hoisted_4 = ["id"];
 const _hoisted_5 = ["name", "value"];
 const _hoisted_6 = [
 	"id",
+	"role",
 	"aria-label",
 	"data-placement"
 ];
@@ -94,7 +100,21 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		name: {},
-		inputTabIndex: {}
+		inputTabIndex: {},
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: [
 		"update:modelValue",
@@ -275,8 +295,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		* 外面的 keydown 先跑，它 preventDefault 就不再走内部导航。
 		* 顺序靠模板里 `v-bind` 写在 `@keydown` 前面保证。
 		*/
+		const optionGrid = useLatchedOptionGrid({
+			entries: () => menu.entries.value,
+			isOpen: () => menu.combobox.isOpen.value,
+			activeIndex: menu.combobox.activeIndex,
+			getListbox: () => listboxRef.value,
+			listboxId: () => listboxId.value
+		});
 		function onKeydown(event) {
-			if (event.defaultPrevented) return;
+			if (event.defaultPrevented || isImeKeyEvent(event)) return;
+			if (optionGrid.actionGrid.onKeyDown(event)) return;
 			menu.onKeyDown(event);
 		}
 		function onControlClick(event) {
@@ -306,11 +334,17 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				createElementVNode("div", { class: normalizeClass(["astryx-typeahead", [`size-${props.size}`, { "astryx-typeahead--bare": !hasChrome }]]) }, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点空白处只是把焦点交给组合框；键盘用户直接 Tab 到输入框。 "), createElementVNode("div", {
 					ref_key: "controlRef",
 					ref: controlRef,
-					class: normalizeClass(["astryx-typeahead-control", [`status-${props.status}`, {
-						"is-open": unref(menu).combobox.isOpen.value,
-						"is-disabled": props.disabled,
-						"is-bare": !hasChrome
-					}]]),
+					class: normalizeClass(["astryx-typeahead-control", [
+						unref(attrs).class,
+						props.controlClass,
+						`status-${props.status}`,
+						{
+							"is-open": unref(menu).combobox.isOpen.value,
+							"is-disabled": props.disabled,
+							"is-bare": !hasChrome
+						}
+					]]),
+					style: normalizeStyle([unref(attrs).style, props.controlStyle]),
 					onClick: onControlClick,
 					onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
@@ -346,10 +380,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						"aria-disabled": focusableDisabled.value ? "true" : void 0,
 						"aria-expanded": unref(menu).combobox.isOpen.value,
 						"aria-controls": listboxId.value,
+						"aria-haspopup": unref(optionGrid).popupKind.value,
 						"aria-label": ariaLabel.value,
 						"aria-labelledby": labelledBy.value,
 						"aria-autocomplete": "list",
-						"aria-activedescendant": unref(menu).activeId.value ? `${listboxId.value}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
+						"aria-activedescendant": unref(optionGrid).gridMode.value ? unref(optionGrid).actionGrid.activeDescendant.value : unref(menu).activeId.value ? `${listboxId.value}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
 						"aria-describedby": describedBy.value,
 						"aria-required": props.required || void 0,
 						onInput,
@@ -392,7 +427,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						name: props.name,
 						value: selected.value?.id ?? ""
 					}, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)
-				], 34)], 2),
+				], 38)], 2),
 				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
 					id: disabledTooltipId.value,
@@ -413,8 +448,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					id: listboxId.value,
 					ref_key: "listboxRef",
 					ref: listboxRef,
-					class: "astryx-typeahead-listbox",
-					role: "listbox",
+					class: "astryx-typeahead-listbox astryx-layer",
+					role: unref(optionGrid).gridMode.value ? "grid" : "listbox",
 					"aria-label": unref(messages).typeahead.results,
 					"data-placement": unref(anchored).position.value.placement,
 					style: normalizeStyle(unref(anchored).style.value),
@@ -426,9 +461,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						description: entry.description,
 						disabled: entry.disabled,
 						group: entry.group,
+						action: entry.action,
 						selected: optionSelected(entry.item.id)
 					})),
 					"active-index": unref(menu).combobox.activeIndex.value,
+					grid: unref(optionGrid).gridMode.value,
+					"action-index": unref(optionGrid).actionGrid.column.value === "action" ? unref(menu).combobox.activeIndex.value : -1,
 					status: unref(menu).status.value,
 					"listbox-id": listboxId.value,
 					"empty-text": emptyText.value,
@@ -451,6 +489,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				} : void 0]), 1032, [
 					"entries",
 					"active-index",
+					"grid",
+					"action-index",
 					"status",
 					"listbox-id",
 					"empty-text",
@@ -471,6 +511,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		modelValue: { default: null },
 		searchSource: {},
 		label: {},
+		isLabelHidden: { type: Boolean },
 		labelHidden: {
 			type: Boolean,
 			default: false
@@ -518,7 +559,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		name: {},
-		width: {}
+		width: {},
+		startIcon: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: [
 		"update:modelValue",
@@ -531,6 +601,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "Typeahead",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup",
+				"aria-activedescendant",
+				"aria-autocomplete",
+				"aria-disabled",
+				"aria-required"
+			]
+		});
 		provide(typeaheadChromeKey, true);
 		const inputId = `astryx-typeahead-${useId()}`;
 		const base = useTemplateRef("base");
@@ -543,6 +632,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const showsClear = computed(() => props.hasClear && props.clearable);
 		/** 两个名字任一为真就在聚焦时先展开。 */
 		const showsEntriesOnFocus = computed(() => props.hasEntriesOnFocus || props.showOnFocus);
+		/** 正名 isLabelHidden，旧名 labelHidden 任一为真就藏起标签。 */
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden);
 		const emptySearchText = computed(() => props.emptySearchText ?? props.emptyText);
 		const fieldStatus = computed(() => {
 			if (!props.statusMessage || props.status === "default") return void 0;
@@ -557,12 +648,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(_sfc_main$4, {
-				class: normalizeClass(["astryx-typeahead", [`size-${props.size}`]]),
+				class: normalizeClass(["astryx-typeahead", [unref(parts).containerClass.value, `size-${props.size}`]]),
+				style: normalizeStyle(unref(parts).containerStyle.value),
 				label: props.label,
 				"input-id": inputId,
 				description: props.description,
 				"label-tooltip": props.labelTooltip,
-				"is-label-hidden": props.labelHidden,
+				"is-label-hidden": unref(hideLabel),
 				"is-disabled": props.disabled,
 				"is-required": props.required,
 				"is-optional": props.optional,
@@ -572,7 +664,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				default: withCtx((field) => [createVNode(_sfc_main$1, mergeProps({
 					ref_key: "base",
 					ref: base
-				}, unref(attrs), {
+				}, unref(parts).forwardedAttrs(), {
+					"control-class": unref(parts).controlClass(),
+					"control-style": unref(parts).controlStyle(),
 					"model-value": props.modelValue,
 					"search-source": props.searchSource,
 					"input-id": field.inputId,
@@ -597,9 +691,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					onChangeQuery: _cache[3] || (_cache[3] = ($event) => emit("changeQuery", $event)),
 					onOpenChange: _cache[4] || (_cache[4] = ($event) => emit("openChange", $event))
 				}), createSlots({ _: 2 }, [
-					_ctx.$slots.icon ? {
+					_ctx.$slots.icon || props.startIcon ? {
 						name: "icon",
-						fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(props.startIcon)))])]),
 						key: "0"
 					} : void 0,
 					_ctx.$slots.item ? {
@@ -617,6 +711,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						key: "2"
 					} : void 0
 				]), 1040, [
+					"control-class",
+					"control-style",
 					"model-value",
 					"search-source",
 					"input-id",
@@ -639,6 +735,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				_: 3
 			}, 8, [
 				"class",
+				"style",
 				"label",
 				"description",
 				"label-tooltip",

package/dist/{TypeaheadMenu-DBW6rHeO.js → TypeaheadMenu-BY5__sPC.js}

@@ -1,25 +1,17 @@
+import { t as characterCount } from "./characters-wTnzjkkR.js";
 import { n as useAsyncSource } from "./useAsyncSource-Gk0VtE7_.js";
 import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
-import { t as _sfc_main$2 } from "./Spinner-9cYUCnDy.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, watch, withModifiers } from "vue";
+import { t as _sfc_main$2 } from "./Spinner-BY8iQz--.js";
+import { n as OptionAction, r as isOptionAction, t as useOptionActionGrid } from "./useOptionActionGrid-CkJcuvaU.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withModifiers } from "vue";
 import "../styles/typeahead.css";
 //#region src/Typeahead/queryLength.ts
 /**
-* 查询长度按「人眼看到的字符」数，不按 UTF-16 码元数。
-* 一个 emoji、一面旗、一个带音标的字母都算一个字符。
-*/
-const graphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-function countCharacters(text) {
-	if (text === "") return 0;
-	if (graphemeSegmenter != null) return [...graphemeSegmenter.segment(text)].length;
-	return [...text].length;
-}
-/**
 * 查询短于下限时不该去搜数据源。
 * 空查询不算「太短」——空查询走的是 bootstrap，不是搜索。
 */
 function isBelowMinQueryLength(query, minQueryLength) {
-	const length = countCharacters(query);
+	const length = characterCount(query);
 	return length > 0 && length < minQueryLength;
 }
 //#endregion
@@ -60,7 +52,8 @@ function useTypeaheadMenu(options) {
 			label: item.label,
 			description: item.description,
 			disabled: item.disabled,
-			group: entryGroup(item)
+			group: entryGroup(item),
+			action: item.action
 		}));
 		const text = query.value.trim();
 		if (toValue(options.creatable) && text !== "") {
@@ -213,6 +206,40 @@ function useTypeaheadMenu(options) {
 	};
 }
 //#endregion
+//#region src/selectors/useLatchedOptionGrid.ts
+/** 一旦出现过带操作的条目，这次挂载里的菜单就保持两列网格。 */
+function useLatchedOptionGrid(options) {
+	const gridLatched = ref(false);
+	watch(options.entries, (list) => {
+		if (list.some((entry) => isOptionAction(entry.action))) gridLatched.value = true;
+	}, { immediate: true });
+	const gridMode = computed(() => gridLatched.value);
+	function optionId(index) {
+		return `${options.listboxId()}-option-${index}`;
+	}
+	function actionId(index) {
+		return `${options.listboxId()}-action-${index}`;
+	}
+	function rowHasAction(index) {
+		return isOptionAction(options.entries()[index]?.action);
+	}
+	return {
+		gridMode,
+		actionGrid: useOptionActionGrid({
+			enabled: () => gridMode.value,
+			isOpen: options.isOpen,
+			activeIndex: options.activeIndex,
+			rowHasAction,
+			getListbox: options.getListbox,
+			optionId,
+			actionId
+		}),
+		popupKind: computed(() => gridMode.value ? "grid" : "listbox"),
+		optionId,
+		actionId
+	};
+}
+//#endregion
 //#region src/Typeahead/TypeaheadItem.vue
 const _hoisted_1$1 = ["data-disabled"];
 const _hoisted_2$1 = {
@@ -261,13 +288,7 @@ const _hoisted_3 = {
 	class: "astryx-typeahead-state",
 	role: "alert"
 };
-const _hoisted_4 = {
-	key: 2,
-	class: "astryx-typeahead-state",
-	role: "option",
-	"aria-selected": "false",
-	"aria-disabled": "true"
-};
+const _hoisted_4 = ["role", "aria-selected"];
 const _hoisted_5 = {
 	key: 3,
 	class: "astryx-typeahead-options",
@@ -281,14 +302,16 @@ const _hoisted_7 = {
 };
 const _hoisted_8 = [
 	"id",
+	"role",
 	"aria-selected",
 	"aria-disabled",
 	"data-option-id",
 	"onMouseenter",
 	"onClick"
 ];
-const _hoisted_9 = { class: "astryx-typeahead-option-copy" };
-const _hoisted_10 = {
+const _hoisted_9 = ["id", "onClick"];
+const _hoisted_10 = { class: "astryx-typeahead-option-copy" };
+const _hoisted_11 = {
 	key: 0,
 	class: "astryx-typeahead-check",
 	width: "16",
@@ -297,6 +320,20 @@ const _hoisted_10 = {
 	fill: "none",
 	"aria-hidden": "true"
 };
+const _hoisted_12 = ["id"];
+const _hoisted_13 = {
+	key: 2,
+	class: "astryx-typeahead-option-copy"
+};
+const _hoisted_14 = {
+	key: 3,
+	class: "astryx-typeahead-check",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true"
+};
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxTypeaheadMenu",
 	__name: "TypeaheadMenu",
@@ -307,7 +344,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		listboxId: {},
 		emptyText: {},
 		loadingText: {},
-		errorText: {}
+		errorText: {},
+		grid: { type: Boolean },
+		actionIndex: {}
 	},
 	emits: ["select", "highlight"],
 	setup(__props, { emit: __emit }) {
@@ -339,6 +378,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function optionId(index) {
 			return `${props.listboxId}-option-${index}`;
 		}
+		function actionId(index) {
+			return `${props.listboxId}-action-${index}`;
+		}
 		function onOptionClick(id, disabled) {
 			if (!disabled) emit("select", id);
 		}
@@ -346,51 +388,99 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock("div", _hoisted_1, [props.status === "loading" && props.entries.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_sfc_main$2, {
 				size: "sm",
 				label: props.loadingText
-			}, null, 8, ["label"])])) : props.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(props.errorText), 1)) : props.entries.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(props.emptyText), 1)])])) : (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group, groupIndex) => {
+			}, null, 8, ["label"])])) : props.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(props.errorText), 1)) : props.entries.length === 0 ? (openBlock(), createElementBlock("div", {
+				key: 2,
+				class: "astryx-typeahead-state",
+				role: props.grid ? "presentation" : "option",
+				"aria-selected": props.grid ? void 0 : "false",
+				"aria-disabled": "true"
+			}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(props.emptyText), 1)])], 8, _hoisted_4)) : (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group, groupIndex) => {
 				return openBlock(), createElementBlock("div", {
 					key: group.heading ?? `__ungrouped-${groupIndex}`,
 					class: "astryx-typeahead-group",
-					role: group.heading ? "group" : "presentation",
+					role: props.grid ? group.heading ? "rowgroup" : "presentation" : group.heading ? "group" : "presentation",
 					"aria-label": group.heading
 				}, [
 					group.heading ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(group.heading), 1)) : createCommentVNode("v-if", true),
-					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 选项不进 Tab 序，方向键和 Enter 由组合框输入处理。 "),
+					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events, vue-a11y/no-static-element-interactions -- 选项不进 Tab 序，方向键和 Enter 由组合框输入处理。 "),
 					(openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
 						return openBlock(), createElementBlock("div", {
-							id: optionId(row.index),
+							id: props.grid ? void 0 : optionId(row.index),
 							key: row.entry.id,
 							class: normalizeClass(["astryx-typeahead-option", {
 								"is-active": row.index === props.activeIndex,
 								"is-selected": row.entry.selected,
 								"is-disabled": row.entry.disabled
 							}]),
-							role: "option",
+							role: props.grid ? "row" : "option",
 							"aria-selected": row.entry.selected ? "true" : "false",
 							"aria-disabled": row.entry.disabled || void 0,
 							"data-option-id": row.entry.id,
 							tabindex: "-1",
-							onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+							onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
 							onMouseenter: ($event) => emit("highlight", row.index),
-							onClick: ($event) => onOptionClick(row.entry.id, row.entry.disabled)
-						}, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "item", {
-							entry: row.entry,
-							isActive: row.index === props.activeIndex,
-							isSelected: Boolean(row.entry.selected)
-						}, () => [createVNode(_sfc_main$1, {
-							item: {
-								id: row.entry.id,
-								label: row.entry.label,
-								description: row.entry.description,
-								disabled: row.entry.disabled
-							},
-							"is-disabled": row.entry.disabled
-						}, null, 8, ["item", "is-disabled"])])]), row.entry.selected ? (openBlock(), createElementBlock("svg", _hoisted_10, [..._cache[1] || (_cache[1] = [createElementVNode("path", {
-							d: "M3.5 8.5L6.5 11.5L12.5 4.5",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						}, null, -1)])])) : createCommentVNode("v-if", true)], 42, _hoisted_8);
+							onClick: ($event) => props.grid ? void 0 : onOptionClick(row.entry.id, row.entry.disabled)
+						}, [
+							createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events -- 选项格不进 Tab 序，方向键和 Enter 由组合框输入处理。 "),
+							props.grid ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								id: optionId(row.index),
+								class: "astryx-typeahead-option-main",
+								role: "gridcell",
+								tabindex: "-1",
+								onClick: ($event) => onOptionClick(row.entry.id, row.entry.disabled)
+							}, [createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "item", {
+								entry: row.entry,
+								isActive: row.index === props.activeIndex,
+								isSelected: Boolean(row.entry.selected)
+							}, () => [createVNode(_sfc_main$1, {
+								item: {
+									id: row.entry.id,
+									label: row.entry.label,
+									description: row.entry.description,
+									disabled: row.entry.disabled
+								},
+								"is-disabled": row.entry.disabled
+							}, null, 8, ["item", "is-disabled"])])]), row.entry.selected ? (openBlock(), createElementBlock("svg", _hoisted_11, [..._cache[3] || (_cache[3] = [createElementVNode("path", {
+								d: "M3.5 8.5L6.5 11.5L12.5 4.5",
+								stroke: "currentColor",
+								"stroke-width": "1.5",
+								"stroke-linecap": "round",
+								"stroke-linejoin": "round"
+							}, null, -1)])])) : createCommentVNode("v-if", true)], 8, _hoisted_9)) : createCommentVNode("v-if", true),
+							props.grid ? (openBlock(), createElementBlock("div", {
+								key: 1,
+								id: unref(isOptionAction)(row.entry.action) ? void 0 : actionId(row.index),
+								class: normalizeClass(["astryx-typeahead-option-action", { "is-active": props.actionIndex === row.index }]),
+								role: "gridcell",
+								onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+								onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
+							}, [unref(isOptionAction)(row.entry.action) ? (openBlock(), createBlock(unref(OptionAction), {
+								key: 0,
+								node: row.entry.action,
+								"dom-id": actionId(row.index)
+							}, null, 8, ["node", "dom-id"])) : createCommentVNode("v-if", true)], 42, _hoisted_12)) : createCommentVNode("v-if", true),
+							!props.grid ? (openBlock(), createElementBlock("span", _hoisted_13, [renderSlot(_ctx.$slots, "item", {
+								entry: row.entry,
+								isActive: row.index === props.activeIndex,
+								isSelected: Boolean(row.entry.selected)
+							}, () => [createVNode(_sfc_main$1, {
+								item: {
+									id: row.entry.id,
+									label: row.entry.label,
+									description: row.entry.description,
+									disabled: row.entry.disabled
+								},
+								"is-disabled": row.entry.disabled
+							}, null, 8, ["item", "is-disabled"])])])) : createCommentVNode("v-if", true),
+							!props.grid && row.entry.selected ? (openBlock(), createElementBlock("svg", _hoisted_14, [..._cache[4] || (_cache[4] = [createElementVNode("path", {
+								d: "M3.5 8.5L6.5 11.5L12.5 4.5",
+								stroke: "currentColor",
+								"stroke-width": "1.5",
+								"stroke-linecap": "round",
+								"stroke-linejoin": "round"
+							}, null, -1)])])) : createCommentVNode("v-if", true)
+						], 42, _hoisted_8);
 					}), 128))
 				], 8, _hoisted_6);
 			}), 128))]))]);
@@ -398,4 +488,4 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-export { _sfc_main$1 as n, useTypeaheadMenu as r, _sfc_main as t };
+export { useTypeaheadMenu as i, _sfc_main$1 as n, useLatchedOptionGrid as r, _sfc_main as t };

package/dist/{announce-Cnio10Wk.js → announce-B210eJVf.js}

@@ -21,6 +21,15 @@ const clearTimers = {
 	assertive: null
 };
 let regions = null;
+/** 每块区域还没写进去的那一帧。清空区域时要一并取消，不然旧文字会在清空之后又冒出来。 */
+const pendingFrames = {
+	polite: /* @__PURE__ */ new Set(),
+	assertive: /* @__PURE__ */ new Set()
+};
+function cancelPendingFrames(politeness) {
+	if (typeof cancelAnimationFrame === "function") for (const frame of pendingFrames[politeness]) cancelAnimationFrame(frame);
+	pendingFrames[politeness].clear();
+}
 function cancelScheduledClear(politeness) {
 	const timer = clearTimers[politeness];
 	if (timer != null) {
@@ -66,11 +75,17 @@ function announceMessage(message, politeness) {
 	const write = () => {
 		target.textContent = message;
 	};
-	if (typeof requestAnimationFrame === "function") requestAnimationFrame(write);
-	else write();
+	if (typeof requestAnimationFrame === "function") {
+		const frame = requestAnimationFrame(() => {
+			pendingFrames[politeness].delete(frame);
+			write();
+		});
+		pendingFrames[politeness].add(frame);
+	} else write();
 	scheduleClear(politeness, target);
 }
 function clearRegion(politeness) {
+	cancelPendingFrames(politeness);
 	cancelScheduledClear(politeness);
 	if (regions == null) return;
 	const target = politeness === "assertive" ? regions.assertive : regions.polite;

package/dist/characters-rcDbGt71.d.ts

@@ -0,0 +1,29 @@
+//#region src/utils/characters.d.ts
+/**
+ * Number of characters in a string — the count a person would give, where one
+ * emoji, flag, or accented letter is one character. Replacement for `.length`
+ * on user-visible strings, which counts internal storage units instead.
+ */
+declare function characterCount(str: string): number;
+/**
+ * The first character of a string, or '' when empty. Replacement for
+ * `.charAt(0)`, which can return half of an emoji. Reads only the first
+ * character, so cost does not scale with the length of the string.
+ */
+declare function firstCharacter(str: string): string;
+/**
+ * Truncate to at most `max` characters, ellipsis included: strings within
+ * `max` characters pass through unchanged; longer strings are cut so the
+ * result — content plus `ellipsis` — is exactly `max` characters (or just the
+ * ellipsis, when `max` is smaller than the ellipsis itself). Replacement for
+ * `str.slice(0, n) + '…'`, which can cut an emoji in half.
+ *
+ * @example
+ * ```
+ * truncateCharacters('abcdefghij', 5) // 'abcd…'
+ * truncateCharacters('abcdefghij', 8, '...') // 'abcde...'
+ * ```
+ */
+declare function truncateCharacters(str: string, max: number, ellipsis?: string): string;
+//#endregion
+export { firstCharacter as n, truncateCharacters as r, characterCount as t };