@astryx-vue/core 0.2.6 → 0.4.0

package/dist/Selector-CPISLzp7.js

@@ -0,0 +1,1049 @@
+import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$3 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
+import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
+import { n as focusElement } from "./focus-l8jVTcqd.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$4 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$5 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$6 } from "./Spinner-DdVUadii.js";
+import { t as useIndicator } from "./useIndicator-MZmfBWid.js";
+import { t as _sfc_main$7 } from "./Field--OEsLBfE.js";
+import { n as useInputGroupContext } from "./context-IvbU9c3T.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { n as fieldStatusPlacement, t as normalizeTriggerVariant } from "./triggerVariant-BsL8jMHs.js";
+import { n as _sfc_main$8, t as searchResultMessage } from "./searchResultMessage-mCpJBvra.js";
+import { n as OptionAction, r as isOptionAction, t as useOptionActionGrid } from "./useOptionActionGrid-CkJcuvaU.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import "../styles/layer.css";
+import "../styles/button.css";
+import "../styles/visually-hidden-utility.css";
+import "../styles/selector.css";
+//#region src/Selector/selectorEscape.ts
+/** 弹出层关掉后，焦点回到触发按钮，而不是掉到 body。 */
+function focusSelectorTrigger(field) {
+	const trigger = field?.querySelector(".astryx-selector-trigger");
+	if (trigger) nextTick(() => focusElement(trigger));
+}
+function focusInside(layer) {
+	const active = document.activeElement;
+	return layer != null && active instanceof Node && layer.contains(active);
+}
+/**
+* 搜索框已经处理过的 Escape 会带 preventDefault，这里接选项和操作按钮。
+* 焦点在弹出层里才送回触发器，免得抢走外面已经拿到焦点的控件。
+*/
+function onSelectorListboxEscape(event, options) {
+	if (event.key !== "Escape" || event.defaultPrevented || isImeKeyEvent(event) || !options.isOpen) return;
+	if (!focusInside(options.layer)) return;
+	event.preventDefault();
+	options.close();
+	options.focusTrigger();
+}
+/** 文档级 Escape。焦点还在层里才送回触发器，点外面关掉时不动焦点。 */
+function dismissSelectorEscape(layer, close, focusTrigger) {
+	const inside = focusInside(layer);
+	close();
+	if (inside) focusTrigger();
+}
+function bindListboxEscape(layer, onKeyDown) {
+	watch(layer, (el, prev) => {
+		prev?.removeEventListener("keydown", onKeyDown);
+		el?.addEventListener("keydown", onKeyDown);
+	}, { flush: "sync" });
+	onScopeDispose(() => layer.value?.removeEventListener("keydown", onKeyDown));
+}
+//#endregion
+//#region src/Selector/selectorOptions.ts
+function isSelectorSection(entry) {
+	return typeof entry === "object" && entry !== null && "type" in entry && entry.type === "section";
+}
+function asSelectorOption(entry) {
+	if (typeof entry === "string") return {
+		value: entry,
+		label: entry
+	};
+	return entry;
+}
+function normalizeSelectorEntries(options) {
+	return options.map((entry) => {
+		if (isSelectorSection(entry)) return {
+			...entry,
+			options: entry.options.map(asSelectorOption)
+		};
+		return asSelectorOption(entry);
+	});
+}
+function flattenSelectorOptions(entries) {
+	return entries.flatMap((entry) => isSelectorSection(entry) ? [...entry.options] : [entry]);
+}
+function buildSelectorRows(entries, filtered) {
+	const indexByValue = new Map(filtered.map((option, index) => [option.value, index]));
+	const rows = [];
+	for (const entry of entries) {
+		if (isSelectorSection(entry)) {
+			const children = entry.options.filter((option) => indexByValue.has(option.value));
+			if (children.length === 0) continue;
+			rows.push({
+				kind: "section",
+				title: entry.title
+			});
+			for (const option of children) rows.push({
+				kind: "option",
+				option,
+				index: indexByValue.get(option.value)
+			});
+			continue;
+		}
+		if (!indexByValue.has(entry.value)) continue;
+		rows.push({
+			kind: "option",
+			option: entry,
+			index: indexByValue.get(entry.value)
+		});
+	}
+	return rows;
+}
+//#endregion
+//#region src/Selector/SelectorPanel.vue
+const _hoisted_1$1 = {
+	key: 0,
+	class: "astryx-selector-search"
+};
+const _hoisted_2$1 = [
+	"id",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"placeholder",
+	"value"
+];
+const _hoisted_3$1 = ["aria-label"];
+const _hoisted_4$1 = {
+	key: 1,
+	class: "astryx-selector-options"
+};
+const _hoisted_5$1 = {
+	key: 0,
+	class: "astryx-selector-section",
+	role: "presentation"
+};
+const _hoisted_6$1 = ["aria-label"];
+const _hoisted_7$1 = { "aria-hidden": "true" };
+const _hoisted_8$1 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onKeydown"
+];
+const _hoisted_9$1 = {
+	key: 0,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_10 = { class: "astryx-selector-option-body" };
+const _hoisted_11 = { class: "astryx-selector-option-copy" };
+const _hoisted_12 = { class: "astryx-selector-option-label" };
+const _hoisted_13 = {
+	key: 0,
+	class: "astryx-selector-option-description"
+};
+const _hoisted_14 = {
+	key: 1,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_15 = ["aria-selected", "aria-disabled"];
+const _hoisted_16 = ["id", "onClick"];
+const _hoisted_17 = {
+	key: 0,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_18 = { class: "astryx-selector-option-body" };
+const _hoisted_19 = { class: "astryx-selector-option-copy" };
+const _hoisted_20 = { class: "astryx-selector-option-label" };
+const _hoisted_21 = {
+	key: 0,
+	class: "astryx-selector-option-description"
+};
+const _hoisted_22 = {
+	key: 1,
+	class: "astryx-selector-option-mark"
+};
+const _hoisted_23 = ["id"];
+const _hoisted_24 = {
+	key: 2,
+	class: "astryx-selector-empty",
+	role: "presentation"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxSelectorPanel",
+	__name: "SelectorPanel",
+	props: {
+		searchable: { type: Boolean },
+		query: {},
+		placeholder: {},
+		clearLabel: {},
+		rows: {},
+		activeIndex: {},
+		modelValue: {},
+		indicatorPosition: {},
+		grid: { type: Boolean },
+		actionIndex: {},
+		loading: { type: Boolean },
+		showEmpty: { type: Boolean },
+		searching: { type: Boolean },
+		emptyText: {},
+		listboxId: {},
+		isOpen: { type: Boolean },
+		activeDescendant: {},
+		mark: {}
+	},
+	emits: [
+		"query",
+		"keydown",
+		"select"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const root = useTemplateRef("root");
+		const searchInput = useTemplateRef("searchInput");
+		function optionId(index) {
+			return `${props.listboxId}-option-${index}`;
+		}
+		function actionId(index) {
+			return `${props.listboxId}-action-${index}`;
+		}
+		function selected(option) {
+			return option.value === props.modelValue;
+		}
+		function active(index) {
+			return index === props.activeIndex;
+		}
+		__expose({ focusSearch: () => searchInput.value?.focus() });
+		function clearQuery(event) {
+			event.stopPropagation();
+			emit("query", "");
+			searchInput.value?.focus();
+		}
+		watch(() => [props.activeIndex, props.isOpen], ([index, open]) => {
+			if (!open || index < 0) return;
+			nextTick(() => {
+				const listbox = root.value?.parentElement;
+				const optionEl = listbox?.querySelector(`#${CSS.escape(optionId(index))}`);
+				if (!listbox || !optionEl) return;
+				const listboxRect = listbox.getBoundingClientRect();
+				const optionRect = optionEl.getBoundingClientRect();
+				if (optionRect.top < listboxRect.top) listbox.scrollTop -= listboxRect.top - optionRect.top;
+				else if (optionRect.bottom > listboxRect.bottom) listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root
+			}, [__props.searchable ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+				createVNode(_sfc_main$5, {
+					class: "astryx-selector-search-icon",
+					icon: "search",
+					size: "sm"
+				}),
+				createElementVNode("input", {
+					id: `${__props.listboxId}-search`,
+					ref_key: "searchInput",
+					ref: searchInput,
+					type: "text",
+					class: "astryx-selector-search-input",
+					role: "combobox",
+					autocomplete: "off",
+					"aria-label": __props.placeholder,
+					"aria-expanded": __props.isOpen,
+					"aria-controls": __props.listboxId,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": __props.activeDescendant,
+					placeholder: __props.placeholder,
+					value: __props.query,
+					onInput: _cache[0] || (_cache[0] = ($event) => emit("query", $event.target.value)),
+					onKeydown: _cache[1] || (_cache[1] = ($event) => emit("keydown", $event))
+				}, null, 40, _hoisted_2$1),
+				__props.query ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "astryx-selector-search-clear",
+					"aria-label": __props.clearLabel,
+					onClick: withModifiers(clearQuery, ["stop"])
+				}, [createVNode(_sfc_main$5, {
+					icon: "close",
+					size: "sm"
+				})], 8, _hoisted_3$1)) : createCommentVNode("v-if", true)
+			])) : createCommentVNode("v-if", true), !__props.loading && __props.rows.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, rowIndex) => {
+				return openBlock(), createElementBlock(Fragment, { key: row.kind === "section" ? `section-${rowIndex}` : row.option?.value }, [row.kind === "section" && !__props.grid ? (openBlock(), createElementBlock("div", _hoisted_5$1, toDisplayString(row.title), 1)) : row.kind === "section" ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: "astryx-selector-section",
+					role: "rowgroup",
+					"aria-label": row.title
+				}, [createElementVNode("span", _hoisted_7$1, toDisplayString(row.title), 1)], 8, _hoisted_6$1)) : row.option && row.index != null && !__props.grid ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					id: optionId(row.index),
+					role: "option",
+					tabindex: "-1",
+					class: normalizeClass(["astryx-selector-option", {
+						"is-active": active(row.index),
+						"is-selected": selected(row.option),
+						"is-disabled": row.option.disabled
+					}]),
+					"aria-selected": selected(row.option),
+					"aria-disabled": row.option.disabled,
+					onClick: ($event) => emit("select", row.option),
+					onKeydown: [withKeys(($event) => emit("select", row.option), ["enter"]), withKeys(withModifiers(($event) => emit("select", row.option), ["prevent"]), ["space"])]
+				}, [
+					__props.indicatorPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_9$1, [(openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+						class: "astryx-selector-check",
+						state: selected(row.option) ? "checked" : "unchecked",
+						size: "sm",
+						"is-disabled": row.option.disabled
+					}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true),
+					createElementVNode("span", _hoisted_10, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+						option: row.option,
+						isActive: active(row.index),
+						isSelected: selected(row.option)
+					}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [row.option.icon ? (openBlock(), createBlock(_sfc_main$5, {
+						key: 0,
+						class: "astryx-selector-option-icon",
+						icon: row.option.icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_11, [createElementVNode("span", _hoisted_12, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)])], 64))]),
+					__props.indicatorPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_14, [(openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+						class: "astryx-selector-check",
+						state: selected(row.option) ? "checked" : "unchecked",
+						size: "sm",
+						"is-disabled": row.option.disabled
+					}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true)
+				], 42, _hoisted_8$1)) : row.option && row.index != null ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(["astryx-selector-option", {
+						"is-active": active(row.index),
+						"is-selected": selected(row.option),
+						"is-disabled": row.option.disabled
+					}]),
+					role: "row",
+					"aria-selected": selected(row.option),
+					"aria-disabled": row.option.disabled || void 0
+				}, [
+					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events -- 选项格不进 Tab 序，方向键和回车由组合框处理。 "),
+					createElementVNode("div", {
+						id: optionId(row.index),
+						class: "astryx-selector-option-main",
+						role: "gridcell",
+						tabindex: "-1",
+						onClick: ($event) => emit("select", row.option)
+					}, [
+						__props.indicatorPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_17, [(openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							class: "astryx-selector-check",
+							state: selected(row.option) ? "checked" : "unchecked",
+							size: "sm",
+							"is-disabled": row.option.disabled
+						}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true),
+						createElementVNode("span", _hoisted_18, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+							option: row.option,
+							isActive: active(row.index),
+							isSelected: selected(row.option)
+						}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [row.option.icon ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 0,
+							class: "astryx-selector-option-icon",
+							icon: row.option.icon,
+							size: "sm"
+						}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_19, [createElementVNode("span", _hoisted_20, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_21, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)])], 64))]),
+						__props.indicatorPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_22, [(openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							class: "astryx-selector-check",
+							state: selected(row.option) ? "checked" : "unchecked",
+							size: "sm",
+							"is-disabled": row.option.disabled
+						}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true)
+					], 8, _hoisted_16),
+					createElementVNode("div", {
+						id: unref(isOptionAction)(row.option.action) ? void 0 : actionId(row.index),
+						class: normalizeClass(["astryx-selector-option-action", { "is-active": __props.actionIndex === row.index }]),
+						role: "gridcell",
+						onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
+						onClick: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"]))
+					}, [unref(isOptionAction)(row.option.action) ? (openBlock(), createBlock(unref(OptionAction), {
+						key: 0,
+						node: row.option.action,
+						"dom-id": actionId(row.index)
+					}, null, 8, ["node", "dom-id"])) : createCommentVNode("v-if", true)], 42, _hoisted_23)
+				], 10, _hoisted_15)) : createCommentVNode("v-if", true)], 64);
+			}), 128))])) : __props.showEmpty ? (openBlock(), createElementBlock("div", _hoisted_24, [!__props.searching && _ctx.$slots.empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.emptyText), 1)], 64))])) : createCommentVNode("v-if", true)], 512);
+		};
+	}
+});
+//#endregion
+//#region src/Selector/useSelectorPopup.ts
+/** 选项操作把弹出层锁成网格，并拦下行末方向键。 */
+function useSelectorPopup(options) {
+	const gridLatched = ref(false);
+	watch(options.flatOptions, (list) => {
+		if (list.some((option) => isOptionAction(option.action))) gridLatched.value = true;
+	}, { immediate: true });
+	const gridMode = computed(() => gridLatched.value);
+	function optionDomId(index) {
+		return `${options.listboxId.value}-option-${index}`;
+	}
+	function actionDomId(index) {
+		return `${options.listboxId.value}-action-${index}`;
+	}
+	function rowHasAction(index) {
+		const value = options.filteredValues.value[index]?.value;
+		return isOptionAction(options.flatOptions.value.find((option) => option.value === value)?.action);
+	}
+	const actionGrid = useOptionActionGrid({
+		enabled: () => gridMode.value,
+		isOpen: () => options.isOpen.value,
+		activeIndex: options.activeIndex,
+		rowHasAction,
+		getListbox: () => options.listboxRef.value,
+		optionId: optionDomId,
+		actionId: actionDomId
+	});
+	const popupKind = computed(() => {
+		if (options.isReadOnly()) return void 0;
+		if (options.isSheet()) return "dialog";
+		return gridMode.value ? "grid" : "listbox";
+	});
+	function onTriggerKeyDown(event) {
+		if (isImeKeyEvent(event)) {
+			if (!event.defaultPrevented) options.emitKeydown(event);
+			return;
+		}
+		if (!actionGrid.onKeyDown(event)) options.onListKeyDown(event);
+		if (!event.defaultPrevented) options.emitKeydown(event);
+	}
+	function onSearchKeyDown(event) {
+		if (isImeKeyEvent(event)) return;
+		if (!actionGrid.onKeyDown(event)) options.onListKeyDown(event);
+	}
+	return {
+		gridMode,
+		actionGrid,
+		popupKind,
+		onTriggerKeyDown,
+		onSearchKeyDown
+	};
+}
+//#endregion
+//#region src/Selector/Selector.vue
+const _hoisted_1 = ["data-variant"];
+const _hoisted_2 = [
+	"id",
+	"disabled",
+	"role",
+	"aria-haspopup",
+	"aria-expanded",
+	"aria-controls",
+	"aria-readonly",
+	"aria-disabled",
+	"aria-busy",
+	"aria-required",
+	"aria-label",
+	"aria-describedby",
+	"aria-autocomplete",
+	"aria-activedescendant"
+];
+const _hoisted_3 = { class: "astryx-selector-value-label" };
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = ["id"];
+const _hoisted_6 = { class: "astryx-selector-sheet-title" };
+const _hoisted_7 = [
+	"id",
+	"role",
+	"data-placement"
+];
+const _hoisted_8 = [
+	"id",
+	"name",
+	"value",
+	"disabled",
+	"aria-label"
+];
+const _hoisted_9 = ["value"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxSelector",
+	inheritAttrs: false,
+	__name: "Selector",
+	props: {
+		modelValue: { default: null },
+		options: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledMessage: {},
+		disabledReason: {},
+		status: { default: "default" },
+		statusMessage: {},
+		statusVariant: { default: "attached" },
+		size: { default: "md" },
+		variant: { default: "default" },
+		presentation: { default: "popover" },
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		hasClear: { type: Boolean },
+		clearLabel: {},
+		emptyText: {},
+		emptySearchText: {},
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		width: {},
+		name: {},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		indicatorPosition: { default: "end" },
+		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",
+		"change",
+		"search",
+		"click",
+		"focus",
+		"keydown"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const attrs = useAttrs();
+		const SelectionMark = useIndicator("check");
+		const parts = useFieldPartStyling({
+			component: "Selector",
+			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",
+				"aria-busy",
+				"aria-readonly"
+			]
+		});
+		const triggerVariant = computed(() => normalizeTriggerVariant(props.variant));
+		const generatedId = `astryx-selector-${useId()}`;
+		const selectorId = computed(() => typeof attrs.id === "string" && attrs.id !== "" ? attrs.id : generatedId);
+		const listboxId = computed(() => `${selectorId.value}-listbox`);
+		const messages = useAstryxMessages();
+		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
+		const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.selector.search);
+		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clear);
+		/** 值上的清除按钮带着字段名，读屏能听出清的是哪一项。 */
+		const valueClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clearField(props.label));
+		const resolvedEmptyText = computed(() => props.emptyText ?? messages.value.selector.empty);
+		const resolvedEmptySearchText = computed(() => props.emptySearchText ?? messages.value.selector.emptySearch);
+		const inputGroup = useInputGroupContext();
+		const inGroup = computed(() => inputGroup != null);
+		const control = useFieldControlState({
+			disabled: () => props.disabled || (inputGroup?.disabled.value ?? false),
+			readOnly: () => props.isReadOnly,
+			loading: () => props.isLoading
+		});
+		const announce = useAnnounce();
+		const readOnlyId = computed(() => `${selectorId.value}-readonly`);
+		const disabledMessageId = computed(() => `${selectorId.value}-disabled-message`);
+		const disabledTooltipId = computed(() => `${selectorId.value}-disabled-tooltip`);
+		/** 旧名 disabledReason 和新名 disabledMessage 等价。 */
+		const resolvedDisabledMessage = computed(() => props.disabledMessage?.trim() || props.disabledReason?.trim());
+		const showsDisabledMessage = computed(() => control.isDisabled.value && !!resolvedDisabledMessage.value);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const hasClear = computed(() => props.hasClear || props.clearable);
+		const fieldRef = useTemplateRef("fieldRef");
+		const listboxRef = useTemplateRef("listboxRef");
+		const panelRef = useTemplateRef("panelRef");
+		const sheetSlot = useTemplateRef("sheetSlot");
+		useScrollbars(listboxRef);
+		const isSheet = computed(() => props.presentation === "bottom-sheet");
+		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
+		const isEnabled = control.canActivate;
+		const isSearchable = computed(() => props.searchable && control.canActivate.value);
+		const normalizedEntries = computed(() => normalizeSelectorEntries(props.options));
+		const flatOptions = computed(() => flattenSelectorOptions(normalizedEntries.value));
+		const comboboxOptions = computed(() => flatOptions.value.map((opt) => ({
+			value: opt.value,
+			label: opt.label,
+			disabled: opt.disabled ?? false
+		})));
+		const modelValueRef = computed({
+			get: () => props.modelValue,
+			set: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		const combobox = useCombobox({
+			options: comboboxOptions,
+			modelValue: modelValueRef,
+			isEnabled,
+			isSearchable,
+			onChange: (value) => {
+				modelValueRef.value = value;
+			},
+			onOpenChange: (isOpen) => {
+				if (isOpen && props.searchable) nextTick(() => {
+					panelRef.value?.focusSearch();
+				});
+			}
+		});
+		const sheetOpen = computed({
+			get: () => isSheet.value && combobox.isOpen.value,
+			set: (open) => {
+				if (!open && combobox.isOpen.value) combobox.close();
+			}
+		});
+		const popoverOpen = computed(() => combobox.isOpen.value && !isSheet.value);
+		const { position, teleportTarget } = usePositionedLayer({
+			anchor: fieldRef,
+			layer: listboxRef,
+			isOpen: popoverOpen,
+			placement: computed(() => "below"),
+			alignment: computed(() => "start"),
+			gap: 4
+		});
+		function focusTrigger() {
+			focusSelectorTrigger(fieldRef.value);
+		}
+		bindListboxEscape(listboxRef, (event) => {
+			onSelectorListboxEscape(event, {
+				isOpen: combobox.isOpen.value,
+				layer: listboxRef.value,
+				close: () => combobox.close(),
+				focusTrigger
+			});
+		});
+		useDismiss({
+			container: listboxRef,
+			trigger: fieldRef,
+			isEnabled: popoverOpen,
+			dismissOnEscape: "close",
+			onEscape: () => dismissSelectorEscape(listboxRef.value, () => combobox.close(), focusTrigger),
+			onDismiss: () => combobox.close()
+		});
+		const selectedOption = computed(() => {
+			if (props.modelValue == null) return null;
+			return flatOptions.value.find((opt) => opt.value === props.modelValue) ?? null;
+		});
+		const fieldLabel = computed(() => props.label || resolvedPlaceholder.value);
+		const hideLabel = computed(() => props.isLabelHidden || !props.label);
+		const statusType = computed(() => {
+			const status = props.status;
+			if (status == null || status === "default") return "default";
+			if (typeof status === "string") return status;
+			return status.type;
+		});
+		const fieldStatus = computed(() => {
+			const status = props.status;
+			if (status && typeof status === "object") return status;
+			if (!props.statusMessage || statusType.value === "default") return void 0;
+			return {
+				type: statusType.value,
+				message: props.statusMessage
+			};
+		});
+		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
+		const statusGlyph = computed(() => {
+			const type = statusType.value;
+			if (type !== "error" && type !== "warning" && type !== "success" || effectiveStatusVariant.value === "detached") return void 0;
+			return type;
+		});
+		const displayRows = computed(() => buildSelectorRows(normalizedEntries.value, combobox.filteredOptions.value));
+		const displayText = computed(() => {
+			return selectedOption.value?.label ?? resolvedPlaceholder.value;
+		});
+		const isEmpty = computed(() => {
+			return combobox.filteredOptions.value.length === 0;
+		});
+		const isSearching = computed(() => props.searchable && combobox.searchQuery.value.trim() !== "");
+		const showEmpty = computed(() => isEmpty.value && !control.isLoading.value);
+		const describedBy = computed(() => {
+			return [
+				inGroup.value ? inputGroup?.describedBy.value : void 0,
+				control.isReadOnly.value ? readOnlyId.value : void 0,
+				showsDisabledMessage.value ? disabledMessageId.value : void 0
+			].filter(Boolean).join(" ") || void 0;
+		});
+		const announcement = computed(() => searchResultMessage({
+			isOpen: combobox.isOpen.value,
+			isLoading: control.isLoading.value,
+			query: combobox.searchQuery.value,
+			matchCount: combobox.filteredOptions.value.length,
+			emptyText: resolvedEmptyText.value,
+			emptySearchText: resolvedEmptySearchText.value,
+			resultCount: messages.value.selector.resultCount
+		}));
+		watch(announcement, (message) => {
+			if (message) announce(message);
+		});
+		function onTriggerClick(event) {
+			emit("click", event);
+			if (control.canActivate.value) combobox.toggle();
+		}
+		function onTriggerFocus(event) {
+			emit("focus", event);
+			disabledTooltip.onFocus(event);
+		}
+		const popup = useSelectorPopup({
+			flatOptions,
+			filteredValues: computed(() => combobox.filteredOptions.value),
+			listboxId,
+			listboxRef,
+			isOpen: combobox.isOpen,
+			activeIndex: combobox.activeIndex,
+			onListKeyDown: (event) => {
+				const wasOpen = combobox.isOpen.value;
+				combobox.onKeyDown(event);
+				if (event.key === "Escape" && wasOpen) focusTrigger();
+			},
+			isReadOnly: () => control.isReadOnly.value,
+			isSheet: () => isSheet.value,
+			emitKeydown: (event) => emit("keydown", event)
+		});
+		const { gridMode, actionGrid, popupKind } = popup;
+		function onOptionClick(option) {
+			if (!option.disabled) combobox.select(option.value);
+		}
+		function onClear(event) {
+			event.stopPropagation();
+			if (!control.canActivate.value) return;
+			modelValueRef.value = null;
+			combobox.close();
+		}
+		function onPanelQuery(value) {
+			combobox.setSearchQuery(value);
+			emit("search", value);
+		}
+		const anchorWidth = ref(0);
+		function syncAnchorWidth() {
+			anchorWidth.value = fieldRef.value?.getBoundingClientRect().width ?? 0;
+		}
+		const listboxStyle = computed(() => isSheet.value ? void 0 : {
+			top: `${position.value.top}px`,
+			left: `${position.value.left}px`,
+			minWidth: anchorWidth.value > 0 ? `${anchorWidth.value}px` : void 0
+		});
+		watch(combobox.isOpen, (open) => {
+			if (open) syncAnchorWidth();
+		}, { flush: "pre" });
+		onMounted(syncAnchorWidth);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$7, {
+				class: normalizeClass(["astryx-selector", [
+					unref(parts).containerClass.value,
+					`size-${props.size}`,
+					`status-${statusType.value}`,
+					`variant-${triggerVariant.value}`
+				]]),
+				style: normalizeStyle(unref(parts).containerStyle.value),
+				label: fieldLabel.value,
+				"input-id": selectorId.value,
+				"is-label-hidden": inGroup.value || hideLabel.value,
+				"is-disabled": unref(control).isDisabled.value,
+				"is-optional": inGroup.value ? false : props.isOptional,
+				"is-required": inGroup.value ? false : props.isRequired,
+				description: inGroup.value ? void 0 : props.description,
+				status: inGroup.value ? void 0 : fieldStatus.value,
+				"status-variant": effectiveStatusVariant.value,
+				width: props.width
+			}, {
+				default: withCtx(() => [
+					createElementVNode("div", {
+						ref_key: "fieldRef",
+						ref: fieldRef,
+						class: normalizeClass(["astryx-selector-field", [unref(parts).controlClass(), {
+							"is-open": unref(combobox).isOpen.value,
+							"is-disabled": unref(control).isDisabled.value,
+							"is-readonly": unref(control).isReadOnly.value,
+							"is-loading": unref(control).isLoading.value,
+							"is-ghost": triggerVariant.value === "ghost"
+						}]]),
+						style: normalizeStyle(unref(parts).controlStyle()),
+						"data-variant": triggerVariant.value,
+						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [
+						createElementVNode("button", mergeProps(unref(parts).forwardedAttrs(), {
+							id: selectorId.value,
+							type: "button",
+							class: ["astryx-selector-trigger", {
+								"is-open": unref(combobox).isOpen.value,
+								"is-disabled": unref(control).isDisabled.value
+							}],
+							disabled: unref(control).isDisabled.value && !showsDisabledMessage.value,
+							role: unref(control).isReadOnly.value || !props.searchable ? "combobox" : void 0,
+							"aria-haspopup": unref(popupKind),
+							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
+							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId.value,
+							"aria-readonly": unref(control).isReadOnly.value || void 0,
+							"aria-disabled": showsDisabledMessage.value || void 0,
+							"aria-busy": unref(control).isLoading.value || void 0,
+							"aria-required": props.isRequired || void 0,
+							"aria-label": props.label,
+							"aria-describedby": describedBy.value,
+							"aria-autocomplete": props.searchable ? void 0 : "none",
+							"aria-activedescendant": !props.searchable && !unref(control).isReadOnly.value ? unref(actionGrid).activeDescendant.value : void 0,
+							onClick: onTriggerClick,
+							onFocus: onTriggerFocus,
+							onBlur: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args)),
+							onKeydown: _cache[1] || (_cache[1] = (...args) => unref(popup).onTriggerKeyDown && unref(popup).onTriggerKeyDown(...args))
+						}), [createElementVNode("span", { class: normalizeClass(["astryx-selector-value", {
+							"is-placeholder": !selectedOption.value,
+							"is-rich": unref(slots).selected,
+							"is-grouped": inGroup.value
+						}]) }, [unref(slots).selected ? renderSlot(_ctx.$slots, "selected", { option: selectedOption.value }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selectedOption.value?.icon ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 0,
+							class: "astryx-selector-value-icon",
+							icon: selectedOption.value.icon,
+							size: "sm"
+						}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_3, toDisplayString(displayText.value), 1)], 64))], 2)], 16, _hoisted_2),
+						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$6, {
+							key: 0,
+							class: "astryx-selector-spinner",
+							size: "sm",
+							"aria-label": unref(messages).selector.loading
+						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
+						hasClear.value && selectedOption.value && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							class: "astryx-selector-clear",
+							"aria-label": valueClearLabel.value,
+							onClick: onClear
+						}, [createVNode(_sfc_main$5, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_4)) : createCommentVNode("v-if", true),
+						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$8, {
+							key: 2,
+							type: statusGlyph.value,
+							message: fieldStatus.value?.message,
+							tooltip: effectiveStatusVariant.value === "tooltip"
+						}, null, 8, [
+							"type",
+							"message",
+							"tooltip"
+						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 3,
+							class: "astryx-selector-icon",
+							icon: "chevronDown",
+							size: "sm"
+						})) : createCommentVNode("v-if", true),
+						unref(control).isReadOnly.value ? (openBlock(), createElementBlock("span", {
+							key: 4,
+							id: readOnlyId.value,
+							class: "astryx-visually-hidden"
+						}, toDisplayString(unref(messages).selector.readOnly), 9, _hoisted_5)) : createCommentVNode("v-if", true)
+					], 46, _hoisted_1),
+					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+						key: 0,
+						id: disabledMessageId.value
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(resolvedDisabledMessage.value), 1)]),
+						_: 1
+					}, 8, ["id"])) : createCommentVNode("v-if", true),
+					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$3, {
+						key: 1,
+						id: disabledTooltipId.value,
+						anchor: fieldRef.value,
+						open: unref(disabledTooltip).isOpen.value,
+						text: resolvedDisabledMessage.value ?? "",
+						onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+						onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+					}, null, 8, [
+						"id",
+						"anchor",
+						"open",
+						"text",
+						"onPointerEnter",
+						"onPointerLeave"
+					])) : createCommentVNode("v-if", true),
+					isSheet.value ? (openBlock(), createBlock(_sfc_main$4, {
+						key: 2,
+						"is-open": sheetOpen.value,
+						"onUpdate:isOpen": _cache[4] || (_cache[4] = ($event) => sheetOpen.value = $event),
+						height: "hug",
+						label: sheetLabel.value,
+						padding: 2
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							ref_key: "sheetSlot",
+							ref: sheetSlot,
+							class: "astryx-selector-sheet"
+						}, [createElementVNode("div", _hoisted_6, toDisplayString(sheetLabel.value), 1)], 512)]),
+						_: 1
+					}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
+					(openBlock(), createBlock(Teleport, { to: isSheet.value && sheetSlot.value ? sheetSlot.value : unref(teleportTarget) }, [withDirectives(createElementVNode("div", {
+						id: listboxId.value,
+						ref_key: "listboxRef",
+						ref: listboxRef,
+						role: unref(gridMode) ? "grid" : "listbox",
+						class: normalizeClass(["astryx-selector-listbox astryx-layer", { "is-sheet": isSheet.value }]),
+						"data-placement": isSheet.value ? void 0 : unref(position).placement,
+						style: normalizeStyle(listboxStyle.value),
+						tabindex: "-1"
+					}, [createVNode(_sfc_main$1, {
+						ref_key: "panelRef",
+						ref: panelRef,
+						searchable: props.searchable,
+						query: unref(combobox).searchQuery.value,
+						placeholder: resolvedSearchPlaceholder.value,
+						"clear-label": resolvedClearLabel.value,
+						rows: displayRows.value,
+						"active-index": unref(combobox).activeIndex.value,
+						"model-value": props.modelValue,
+						"indicator-position": props.indicatorPosition,
+						grid: unref(gridMode),
+						"action-index": unref(actionGrid).column.value === "action" ? unref(combobox).activeIndex.value : -1,
+						loading: unref(control).isLoading.value,
+						"show-empty": showEmpty.value,
+						searching: isSearching.value,
+						"empty-text": isSearching.value ? resolvedEmptySearchText.value : resolvedEmptyText.value,
+						"listbox-id": listboxId.value,
+						"is-open": unref(combobox).isOpen.value,
+						"active-descendant": unref(actionGrid).activeDescendant.value,
+						mark: unref(SelectionMark),
+						onQuery: onPanelQuery,
+						onKeydown: unref(popup).onSearchKeyDown,
+						onSelect: onOptionClick
+					}, createSlots({ _: 2 }, [unref(slots).option ? {
+						name: "option",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "0"
+					} : void 0, unref(slots).empty ? {
+						name: "empty",
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+						key: "1"
+					} : void 0]), 1032, [
+						"searchable",
+						"query",
+						"placeholder",
+						"clear-label",
+						"rows",
+						"active-index",
+						"model-value",
+						"indicator-position",
+						"grid",
+						"action-index",
+						"loading",
+						"show-empty",
+						"searching",
+						"empty-text",
+						"listbox-id",
+						"is-open",
+						"active-descendant",
+						"mark",
+						"onKeydown"
+					])], 14, _hoisted_7), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
+					props.name ? (openBlock(), createElementBlock("select", {
+						key: 3,
+						id: `${selectorId.value}-hidden-select`,
+						name: props.name,
+						value: props.modelValue ?? "",
+						disabled: unref(control).isDisabled.value,
+						"aria-label": props.label || resolvedPlaceholder.value,
+						tabindex: "-1",
+						style: {
+							"position": "absolute",
+							"left": "-9999px",
+							"width": "1px",
+							"height": "1px"
+						}
+					}, [_cache[5] || (_cache[5] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
+						return openBlock(), createElementBlock("option", {
+							key: option.value,
+							value: option.value
+						}, toDisplayString(option.label), 9, _hoisted_9);
+					}), 128))], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"style",
+				"label",
+				"input-id",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"description",
+				"status",
+				"status-variant",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };