@astryx-vue/core 0.3.0 → 0.4.1

package/dist/MultiSelector-BtAUfQ3t.js

@@ -1,990 +0,0 @@
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$1 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
-import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
-import { t as useDisclosureHandle } from "./useDisclosureHandle-Df3HhAfC.js";
-import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$2 } from "./BottomSheet-pt7m4CvC.js";
-import { t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$4 } from "./Spinner-9cYUCnDy.js";
-import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
-import { t as _sfc_main$5 } from "./Field-D5gUEGw4.js";
-import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
-import { n as fieldStatusPlacement, r as _sfc_main$6, t as searchResultMessage } from "./searchResultMessage-hXXNOFJP.js";
-import { t as _sfc_main$7 } from "./Token-DsntTYhQ.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, inject, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
-import "../styles/button.css";
-import "../styles/visually-hidden-utility.css";
-import "../styles/multi-selector.css";
-//#region src/MultiSelector/createOption.ts
-/** 创建行的值永远不是真实选项。选中它会走创建，而不是切换勾选。 */
-const CREATE_VALUE_PREFIX = "__astryx_multi_selector_create__";
-function createOptionValue(query) {
-	return `${CREATE_VALUE_PREFIX}${query}`;
-}
-function readCreateQuery(value) {
-	if (typeof value !== "string" || !value.startsWith("__astryx_multi_selector_create__")) return null;
-	return value.slice(32);
-}
-/**
-* 输入去掉首尾空白后，和任何选项标签都不相同（忽略大小写）时，返回可以创建的文本。
-* 空字符串、加载中、没开搜索，都不提供创建行。
-*/
-function resolveCreateQuery(input) {
-	if (!input.enabled) return null;
-	const trimmed = input.query.trim();
-	if (trimmed === "") return null;
-	const wanted = trimmed.toLowerCase();
-	return input.labels.some((label) => label.toLowerCase() === wanted) ? null : trimmed;
-}
-//#endregion
-//#region src/MultiSelector/interactionModality.ts
-let modality = "keyboard";
-let listening = false;
-/** 记录最近一次是键盘还是指针。文本框的 :focus-visible 在程序聚焦时也会命中，不能单独用来判断。 */
-function trackInteractionModality() {
-	if (listening || typeof document === "undefined") return;
-	listening = true;
-	document.addEventListener("pointerdown", () => {
-		modality = "pointer";
-	}, true);
-	document.addEventListener("keydown", (event) => {
-		if (event.metaKey || event.altKey || event.ctrlKey) return;
-		modality = "keyboard";
-	}, true);
-}
-function isKeyboardModality() {
-	trackInteractionModality();
-	return modality === "keyboard";
-}
-//#endregion
-//#region src/MultiSelector/options.ts
-const SELECT_ALL_VALUE = "__astryx_select_all__";
-function isDivider(option) {
-	return typeof option === "object" && option !== null && "type" in option && option.type === "divider";
-}
-function isSection(option) {
-	return typeof option === "object" && option !== null && "type" in option && option.type === "section";
-}
-function normalizeOption(option) {
-	if (typeof option === "string") return {
-		value: option,
-		label: option
-	};
-	return option;
-}
-function matches(option, query) {
-	if (query === "") return true;
-	return option.label.toLowerCase().includes(query) || (option.description?.toLowerCase().includes(query) ?? false);
-}
-/**
-* 把字符串、对象、分隔线和分组收成渲染行。搜索时丢掉对不上的选项和因此变空的分组。
-*/
-function flattenOptions(options, query) {
-	const normalizedQuery = query.trim().toLowerCase();
-	const rows = [];
-	let pendingDivider = false;
-	function pushDivider() {
-		if (!pendingDivider || rows.length === 0) return;
-		rows.push({
-			kind: "divider",
-			key: `divider-${rows.length}`
-		});
-		pendingDivider = false;
-	}
-	function pushOption(option, key) {
-		if (!matches(option, normalizedQuery)) return;
-		pushDivider();
-		rows.push({
-			kind: "option",
-			key,
-			option
-		});
-	}
-	options.forEach((option, index) => {
-		if (typeof option === "string") {
-			pushOption(normalizeOption(option), `option-${option}`);
-			return;
-		}
-		if (isDivider(option)) {
-			pendingDivider = true;
-			return;
-		}
-		if (isSection(option)) {
-			const children = option.options.map(normalizeOption).filter((item) => matches(item, normalizedQuery));
-			if (children.length === 0) return;
-			pendingDivider = rows.length > 0;
-			pushDivider();
-			rows.push({
-				kind: "heading",
-				key: `heading-${option.label}-${index}`,
-				label: option.label
-			});
-			for (const child of children) rows.push({
-				kind: "option",
-				key: `${option.label}-${String(child.value)}`,
-				option: child
-			});
-			return;
-		}
-		pushOption(option, `option-${String(option.value)}`);
-	});
-	return rows;
-}
-//#endregion
-//#region src/MultiSelector/MultiSelector.vue
-const _hoisted_1 = {
-	key: 0,
-	class: "astryx-multi-selector-icon",
-	"aria-hidden": "true"
-};
-const _hoisted_2 = [
-	"disabled",
-	"aria-disabled",
-	"aria-readonly",
-	"aria-busy",
-	"role",
-	"aria-haspopup",
-	"aria-expanded",
-	"aria-controls",
-	"aria-autocomplete",
-	"aria-activedescendant",
-	"aria-describedby"
-];
-const _hoisted_3 = {
-	key: 0,
-	class: "astryx-multi-selector-placeholder"
-};
-const _hoisted_4 = {
-	key: 1,
-	class: "astryx-multi-selector-value"
-};
-const _hoisted_5 = {
-	key: 2,
-	class: "astryx-multi-selector-value"
-};
-const _hoisted_6 = {
-	key: 0,
-	class: "astryx-multi-selector-more"
-};
-const _hoisted_7 = ["aria-label"];
-const _hoisted_8 = {
-	class: "astryx-multi-selector-more",
-	"data-overflow-indicator": ""
-};
-const _hoisted_9 = [
-	"name",
-	"value",
-	"disabled"
-];
-const _hoisted_10 = { class: "astryx-multi-selector-sheet-title" };
-const _hoisted_11 = ["aria-label", "data-placement"];
-const _hoisted_12 = ["data-keyboard-focus"];
-const _hoisted_13 = [
-	"aria-label",
-	"aria-expanded",
-	"aria-activedescendant",
-	"placeholder",
-	"value"
-];
-const _hoisted_14 = ["aria-label"];
-const _hoisted_15 = ["id", "data-option-id"];
-const _hoisted_16 = { class: "astryx-multi-selector-option-label" };
-const _hoisted_17 = [
-	"id",
-	"aria-selected",
-	"data-option-id"
-];
-const _hoisted_18 = { class: "astryx-multi-selector-option-label" };
-const _hoisted_19 = {
-	key: 0,
-	class: "astryx-multi-selector-divider",
-	role: "separator"
-};
-const _hoisted_20 = {
-	key: 1,
-	class: "astryx-multi-selector-heading",
-	role: "presentation"
-};
-const _hoisted_21 = [
-	"id",
-	"aria-selected",
-	"aria-disabled",
-	"data-option-id",
-	"onMouseenter",
-	"onClick"
-];
-const _hoisted_22 = { class: "astryx-multi-selector-option-copy" };
-const _hoisted_23 = { class: "astryx-multi-selector-option-label" };
-const _hoisted_24 = {
-	key: 0,
-	class: "astryx-multi-selector-option-description"
-};
-const _hoisted_25 = {
-	key: 4,
-	class: "astryx-multi-selector-empty",
-	role: "presentation"
-};
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxMultiSelector",
-	inheritAttrs: false,
-	__name: "MultiSelector",
-	props: {
-		modelValue: { default: () => [] },
-		options: {},
-		label: {},
-		labelHidden: {
-			type: Boolean,
-			default: false
-		},
-		description: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledMessage: {},
-		disabledReason: {},
-		status: { default: "default" },
-		statusMessage: {},
-		statusVariant: { default: "attached" },
-		size: { default: "md" },
-		variant: { default: "input" },
-		presentation: { default: "popover" },
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		hasClear: { type: Boolean },
-		isDefaultOpen: { type: Boolean },
-		searchable: {
-			type: Boolean,
-			default: false
-		},
-		searchPlaceholder: {},
-		selectAll: {
-			type: Boolean,
-			default: false
-		},
-		selectAllLabel: {},
-		triggerDisplay: { default: "count" },
-		maxBadges: { default: 3 },
-		checkboxPosition: { default: "start" },
-		required: {
-			type: Boolean,
-			default: false
-		},
-		optional: {
-			type: Boolean,
-			default: false
-		},
-		name: {},
-		width: {},
-		isReadOnly: {
-			type: Boolean,
-			default: false
-		},
-		isLoading: {
-			type: Boolean,
-			default: false
-		},
-		formatValue: {},
-		hasCreate: {
-			type: Boolean,
-			default: false
-		},
-		handleRef: {},
-		emptyText: {},
-		emptySearchText: {}
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"search",
-		"openChange",
-		"click",
-		"focus",
-		"keydown"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const slots = useSlots();
-		const CheckboxMark = useIndicator("checkbox");
-		const messages = useAstryxMessages();
-		const announce = useAnnounce();
-		const inputGroup = inject(INPUT_GROUP_KEY, null);
-		const inGroup = computed(() => inputGroup != null);
-		const control = useFieldControlState({
-			disabled: () => props.disabled || (inputGroup?.disabled.value ?? false),
-			readOnly: () => props.isReadOnly,
-			loading: () => props.isLoading
-		});
-		const triggerId = `astryx-multi-selector-${useId()}`;
-		const listboxId = `${triggerId}-listbox`;
-		const searchId = `${triggerId}-search`;
-		const disabledId = `${triggerId}-disabled`;
-		const anchorRef = useTemplateRef("anchorRef");
-		const listboxRef = useTemplateRef("listboxRef");
-		const triggerRef = useTemplateRef("triggerRef");
-		const searchRef = useTemplateRef("searchRef");
-		useScrollbars(listboxRef);
-		const query = ref("");
-		const readOnlyId = `${triggerId}-readonly`;
-		const disabledTooltipId = `${triggerId}-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 hasCustomTrigger = computed(() => slots.trigger != null);
-		const customAnchor = shallowRef(null);
-		const anchor = computed(() => customAnchor.value ?? anchorRef.value);
-		function setCustomTrigger(element) {
-			customAnchor.value = element instanceof HTMLElement ? element : null;
-		}
-		const selectedValues = computed(() => props.modelValue ?? []);
-		const placeholder = computed(() => props.placeholder ?? messages.value.multiSelector.placeholder);
-		const searchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.multiSelector.search);
-		const selectAllLabel = computed(() => props.selectAllLabel ?? messages.value.multiSelector.selectAll);
-		const emptyText = computed(() => props.emptyText ?? messages.value.multiSelector.empty);
-		const emptySearchText = computed(() => props.emptySearchText ?? messages.value.multiSelector.emptySearch);
-		const fieldStatus = computed(() => {
-			if (!props.statusMessage || props.status === "default") return void 0;
-			return {
-				type: props.status,
-				message: props.statusMessage
-			};
-		});
-		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
-		const statusGlyph = computed(() => {
-			if (props.status === "default" || effectiveStatusVariant.value === "detached") return void 0;
-			return props.status;
-		});
-		const rows = computed(() => flattenOptions(props.options, query.value));
-		const optionByValue = computed(() => {
-			const map = /* @__PURE__ */ new Map();
-			for (const row of flattenOptions(props.options, "")) if (row.kind === "option" && row.option) map.set(row.option.value, row.option);
-			return map;
-		});
-		const createQuery = computed(() => resolveCreateQuery({
-			enabled: props.hasCreate && props.searchable && !control.isLoading.value,
-			query: query.value,
-			labels: [...optionByValue.value.values()].map((option) => option.label)
-		}));
-		const createOption = computed(() => {
-			if (createQuery.value == null) return null;
-			return {
-				value: createOptionValue(createQuery.value),
-				label: messages.value.multiSelector.create(createQuery.value)
-			};
-		});
-		const selectable = computed(() => {
-			const items = rows.value.flatMap((row) => row.kind === "option" && row.option ? [row.option] : []);
-			const head = [];
-			if (createOption.value) head.push(createOption.value);
-			if (props.selectAll) head.push({
-				value: SELECT_ALL_VALUE,
-				label: selectAllLabel.value
-			});
-			return [...head, ...items];
-		});
-		const comboboxOptions = computed(() => selectable.value.map((option) => ({
-			value: option.value,
-			label: option.label,
-			disabled: option.disabled ?? false,
-			description: option.description
-		})));
-		const dummyValue = ref(null);
-		let openingFromMount = false;
-		const selectAllIndex = computed(() => props.selectAll ? createOption.value ? 1 : 0 : -1);
-		const combobox = useCombobox({
-			options: comboboxOptions,
-			modelValue: dummyValue,
-			isEnabled: control.canActivate,
-			isSearchable: ref(false),
-			onChange: () => {},
-			onOpenChange: (isOpen) => {
-				emit("openChange", isOpen);
-				if (isOpen && props.searchable && !openingFromMount) nextTick(() => searchRef.value?.focus());
-				if (!isOpen) query.value = "";
-			}
-		});
-		trackInteractionModality();
-		const searchKeyboardFocus = ref(false);
-		const sheetSlot = useTemplateRef("sheetSlot");
-		const isSheet = computed(() => props.presentation === "bottom-sheet");
-		const sheetOpen = computed({
-			get: () => isSheet.value && combobox.isOpen.value,
-			set: (open) => {
-				if (!open && combobox.isOpen.value) combobox.close();
-			}
-		});
-		const listboxTarget = computed(() => isSheet.value && sheetSlot.value ? sheetSlot.value : "body");
-		function onSearchFocus() {
-			searchKeyboardFocus.value = isKeyboardModality();
-		}
-		function onSearchBlur() {
-			searchKeyboardFocus.value = false;
-		}
-		const anchored = useAnchoredListbox({
-			anchor,
-			layer: listboxRef,
-			isOpen: computed(() => combobox.isOpen.value && !isSheet.value),
-			onDismiss: () => {
-				combobox.close();
-			}
-		});
-		const selectedOptions = computed(() => selectedValues.value.flatMap((value) => {
-			const option = optionByValue.value.get(value);
-			return option ? [option] : [];
-		}));
-		const enabledValues = computed(() => selectable.value.filter((option) => option.value !== "__astryx_select_all__" && readCreateQuery(option.value) == null && !option.disabled).map((option) => option.value));
-		const selectedEnabledCount = computed(() => enabledValues.value.filter((value) => selectedValues.value.includes(value)).length);
-		const selectAllState = computed(() => {
-			if (selectedEnabledCount.value === 0) return "unchecked";
-			if (selectedEnabledCount.value === enabledValues.value.length) return "checked";
-			return "indeterminate";
-		});
-		const badgeCount = computed(() => selectedOptions.value.length);
-		const overflow = useOverflow(badgeCount, { gap: 4 });
-		const visibleBadgeCount = computed(() => Math.min(overflow.visibleCount.value, props.maxBadges, badgeCount.value));
-		const hiddenBadgeCount = computed(() => Math.max(0, badgeCount.value - visibleBadgeCount.value));
-		const measureMoreLabel = computed(() => messages.value.multiSelector.more(Math.max(hiddenBadgeCount.value, 1)));
-		const labelText = computed(() => {
-			const labels = selectedOptions.value.map((option) => option.label);
-			const shown = labels.slice(0, props.maxBadges);
-			const extra = labels.length - shown.length;
-			if (shown.length === 0) return "";
-			return extra > 0 ? `${shown.join(", ")} ${messages.value.multiSelector.more(extra)}` : shown.join(", ");
-		});
-		const formattedValue = computed(() => {
-			if (selectedOptions.value.length === 0 || props.formatValue == null || props.triggerDisplay === "badges") return void 0;
-			return props.formatValue(selectedOptions.value.map((option) => ({
-				value: option.value,
-				label: option.label
-			})));
-		});
-		const realMatchCount = computed(() => rows.value.filter((row) => row.kind === "option").length);
-		const showEmpty = computed(() => !control.isLoading.value && realMatchCount.value === 0 && createOption.value == null);
-		const announcement = computed(() => searchResultMessage({
-			isOpen: combobox.isOpen.value,
-			isLoading: control.isLoading.value,
-			query: query.value,
-			matchCount: realMatchCount.value,
-			hasCreateRow: createOption.value != null,
-			emptyText: emptyText.value,
-			emptySearchText: emptySearchText.value,
-			resultCount: messages.value.multiSelector.resultCount
-		}));
-		const describedBy = computed(() => {
-			return [
-				inGroup.value ? inputGroup?.describedBy.value : void 0,
-				!inGroup.value && props.description ? `${triggerId}-description` : void 0,
-				!inGroup.value && props.statusMessage ? `${triggerId}-status` : void 0,
-				showsDisabledMessage.value ? disabledId : void 0
-			].filter(Boolean).join(" ") || void 0;
-		});
-		watch(query, (value) => {
-			emit("search", value);
-			if (combobox.isOpen.value) combobox.highlightFirst();
-		});
-		watch(announcement, (message) => {
-			if (message) announce(message);
-		});
-		watch(() => [props.hasCreate, props.searchable], ([create, search]) => {
-			const dev = import.meta.env?.DEV === true;
-			if (create && !search && dev) console.warn("[MultiSelector] hasCreate 需要同时开启 searchable，否则不会出现创建行。");
-		}, { immediate: true });
-		watch(() => combobox.activeIndex.value, (index) => {
-			if (!combobox.isOpen.value || index < 0) return;
-			const option = selectable.value[index];
-			nextTick(() => scrollOptionIntoView(listboxRef.value, option ? String(option.value) : void 0));
-		});
-		function commit(next, change) {
-			emit("update:modelValue", next);
-			emit("change", next, change);
-		}
-		function commitCreate(created) {
-			commit([...selectedValues.value, created], {
-				type: "create",
-				query: created
-			});
-			announce(messages.value.multiSelector.created(created));
-			query.value = "";
-		}
-		function isSelected(value) {
-			return selectedValues.value.includes(value);
-		}
-		function toggleValue(value) {
-			if (!control.canActivate.value || control.isLoading.value) return;
-			const created = readCreateQuery(value);
-			if (created != null) {
-				commitCreate(created);
-				return;
-			}
-			if (value === "__astryx_select_all__") {
-				const allOn = selectAllState.value === "checked";
-				const enabled = new Set(enabledValues.value);
-				commit(allOn ? selectedValues.value.filter((item) => !enabled.has(item)) : [.../* @__PURE__ */ new Set([...selectedValues.value, ...enabledValues.value])]);
-				return;
-			}
-			if (optionByValue.value.get(value)?.disabled) return;
-			commit(isSelected(value) ? selectedValues.value.filter((item) => item !== value) : [...selectedValues.value, value]);
-		}
-		function onTriggerClick(event) {
-			if (control.canActivate.value) combobox.toggle();
-			emit("click", event);
-		}
-		function onTriggerFocus(event) {
-			emit("focus", event);
-			disabledTooltip.onFocus(event);
-		}
-		function onTriggerKeyDown(event) {
-			applyKeyboardModel(event);
-			if (!event.defaultPrevented) emit("keydown", event);
-		}
-		const triggerProps = computed(() => ({
-			"id": triggerId,
-			"onClick": onTriggerClick,
-			"onKeyDown": onTriggerKeyDown,
-			"onFocus": onTriggerFocus,
-			"aria-haspopup": "listbox",
-			"aria-expanded": combobox.isOpen.value,
-			"aria-controls": listboxId,
-			"aria-busy": control.isLoading.value ? true : void 0,
-			"triggerRef": setCustomTrigger
-		}));
-		onMounted(() => {
-			if (!props.isDefaultOpen) return;
-			openingFromMount = true;
-			openPanel();
-			openingFromMount = false;
-		});
-		function openPanel() {
-			if (control.canActivate.value) combobox.open();
-		}
-		function closePanel() {
-			combobox.close();
-		}
-		const handle = {
-			open: openPanel,
-			close: closePanel,
-			toggle: () => {
-				if (combobox.isOpen.value) closePanel();
-				else openPanel();
-			},
-			isOpen: () => combobox.isOpen.value
-		};
-		useDisclosureHandle(() => props.handleRef, handle);
-		function applyKeyboardModel(event) {
-			if (!control.canActivate.value || event.isComposing) return;
-			const searchInput = props.searchable && event.target instanceof HTMLInputElement;
-			switch (event.key) {
-				case "ArrowDown":
-					event.preventDefault();
-					if (!combobox.isOpen.value) combobox.open();
-					else combobox.highlightNext();
-					break;
-				case "ArrowUp":
-					event.preventDefault();
-					if (!combobox.isOpen.value) {
-						combobox.open();
-						combobox.highlightLast();
-					} else combobox.highlightPrevious();
-					break;
-				case "Home":
-					if (!searchInput && combobox.isOpen.value) {
-						event.preventDefault();
-						combobox.highlightFirst();
-					}
-					break;
-				case "End":
-					if (!searchInput && combobox.isOpen.value) {
-						event.preventDefault();
-						combobox.highlightLast();
-					}
-					break;
-				case "PageUp":
-					if (combobox.isOpen.value) {
-						event.preventDefault();
-						combobox.highlightFirst();
-					}
-					break;
-				case "PageDown":
-					if (combobox.isOpen.value) {
-						event.preventDefault();
-						combobox.highlightLast();
-					}
-					break;
-				case "Enter":
-				case " ":
-					if (event.key === " " && searchInput) break;
-					event.preventDefault();
-					if (combobox.isOpen.value && combobox.activeIndex.value >= 0) {
-						const option = selectable.value[combobox.activeIndex.value];
-						if (option && !option.disabled) toggleValue(option.value);
-					} else if (combobox.isOpen.value && createQuery.value != null) commitCreate(createQuery.value);
-					else if (!combobox.isOpen.value) combobox.open();
-					break;
-				case "Escape":
-					if (combobox.isOpen.value) {
-						event.preventDefault();
-						combobox.close();
-						triggerRef.value?.focus();
-					}
-					break;
-				case "Tab":
-					if (combobox.isOpen.value) combobox.close();
-					break;
-				case "Backspace":
-				case "Delete":
-					if (!searchInput && !combobox.isOpen.value && selectedValues.value.length > 0) {
-						event.preventDefault();
-						commit([]);
-					}
-					break;
-				default: if (!searchInput && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-					event.preventDefault();
-					if (!combobox.isOpen.value) combobox.open();
-					combobox.jumpToMatch(event.key);
-				}
-			}
-		}
-		function onSearchInput(event) {
-			query.value = event.target.value;
-		}
-		function optionIndex(value) {
-			return selectable.value.findIndex((option) => option.value === value);
-		}
-		function optionDomId(index) {
-			return `${listboxId}-option-${index}`;
-		}
-		function highlight(index) {
-			const option = selectable.value[index];
-			if (option && !option.disabled) combobox.activeIndex.value = index;
-		}
-		function checkboxState(option) {
-			if (option.value === "__astryx_select_all__") return selectAllState.value;
-			return isSelected(option.value) ? "checked" : "unchecked";
-		}
-		__expose({
-			focus: () => (props.searchable && combobox.isOpen.value ? searchRef.value : anchor.value)?.focus(),
-			blur: () => anchor.value?.blur(),
-			...handle
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [
-				hasCustomTrigger.value ? renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$5, {
-					key: 1,
-					class: normalizeClass(["astryx-multi-selector", [`size-${props.size}`, `variant-${props.variant}`]]),
-					label: props.label,
-					"input-id": props.searchable && unref(combobox).isOpen.value ? searchId : triggerId,
-					"is-label-hidden": inGroup.value || props.labelHidden,
-					"is-disabled": unref(control).isDisabled.value,
-					"is-required": inGroup.value ? false : props.required,
-					"is-optional": inGroup.value ? false : props.optional,
-					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: "anchorRef",
-						ref: anchorRef,
-						class: normalizeClass(["astryx-multi-selector-control", [`status-${props.status}`, {
-							"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": props.variant === "ghost"
-						}]]),
-						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))
-					}, [
-						_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
-						createElementVNode("button", {
-							id: triggerId,
-							ref_key: "triggerRef",
-							ref: triggerRef,
-							type: "button",
-							class: "astryx-multi-selector-trigger",
-							disabled: unref(control).isDisabled.value && !showsDisabledMessage.value,
-							"aria-disabled": showsDisabledMessage.value ? "true" : void 0,
-							"aria-readonly": unref(control).isReadOnly.value || void 0,
-							"aria-busy": unref(control).isLoading.value || void 0,
-							role: props.searchable && !unref(control).isReadOnly.value ? void 0 : "combobox",
-							"aria-haspopup": unref(control).isReadOnly.value ? void 0 : "listbox",
-							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
-							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId,
-							"aria-autocomplete": props.searchable ? void 0 : "none",
-							"aria-activedescendant": !props.searchable && unref(combobox).isOpen.value && unref(combobox).activeIndex.value >= 0 ? optionDomId(unref(combobox).activeIndex.value) : void 0,
-							"aria-describedby": [describedBy.value, unref(control).isReadOnly.value ? readOnlyId : void 0].filter(Boolean).join(" ") || void 0,
-							onClick: onTriggerClick,
-							onFocus: onTriggerFocus,
-							onBlur: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args)),
-							onKeydown: onTriggerKeyDown
-						}, [selectedOptions.value.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(placeholder.value), 1)) : props.triggerDisplay === "count" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(formattedValue.value ?? unref(messages).multiSelector.selected(selectedOptions.value.length)), 1)) : props.triggerDisplay === "labels" ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(formattedValue.value ?? labelText.value), 1)) : (openBlock(), createElementBlock("span", {
-							key: 3,
-							ref: unref(overflow).containerRef,
-							class: "astryx-multi-selector-badges"
-						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value.slice(0, visibleBadgeCount.value), (option) => {
-							return openBlock(), createBlock(_sfc_main$7, {
-								key: option.value,
-								label: option.label,
-								size: props.size === "lg" ? "md" : "sm"
-							}, null, 8, ["label", "size"]);
-						}), 128)), hiddenBadgeCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(messages).multiSelector.more(hiddenBadgeCount.value)), 1)) : createCommentVNode("v-if", true)], 512))], 40, _hoisted_2),
-						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$4, {
-							key: 1,
-							class: "astryx-multi-selector-spinner",
-							size: "sm",
-							"aria-label": unref(messages).multiSelector.loading
-						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
-						hasClear.value && selectedValues.value.length > 0 && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
-							key: 2,
-							type: "button",
-							class: "astryx-multi-selector-clear",
-							"aria-label": unref(messages).multiSelector.clearAll(props.label),
-							onClick: _cache[1] || (_cache[1] = withModifiers(($event) => commit([]), ["stop"]))
-						}, [createVNode(_sfc_main$3, {
-							icon: "close",
-							size: "sm"
-						})], 8, _hoisted_7)) : createCommentVNode("v-if", true),
-						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$6, {
-							key: 3,
-							type: statusGlyph.value,
-							message: fieldStatus.value?.message,
-							tooltip: effectiveStatusVariant.value === "tooltip"
-						}, null, 8, [
-							"type",
-							"message",
-							"tooltip"
-						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$3, {
-							key: 4,
-							class: normalizeClass(["astryx-multi-selector-chevron", { "is-open": unref(combobox).isOpen.value }]),
-							icon: "chevronDown",
-							size: "sm"
-						}, null, 8, ["class"])) : createCommentVNode("v-if", true),
-						unref(control).isReadOnly.value ? (openBlock(), createElementBlock("span", {
-							key: 5,
-							id: readOnlyId,
-							class: "astryx-visually-hidden"
-						}, toDisplayString(unref(messages).multiSelector.readOnly), 1)) : createCommentVNode("v-if", true),
-						props.triggerDisplay === "badges" ? (openBlock(), createElementBlock("span", {
-							key: 6,
-							ref: unref(overflow).measureRef,
-							class: "astryx-multi-selector-measure",
-							"aria-hidden": "true"
-						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, (option) => {
-							return openBlock(), createBlock(_sfc_main$7, {
-								key: option.value,
-								label: option.label,
-								size: props.size === "lg" ? "md" : "sm"
-							}, null, 8, ["label", "size"]);
-						}), 128)), createElementVNode("span", _hoisted_8, toDisplayString(measureMoreLabel.value), 1)], 512)) : createCommentVNode("v-if", true),
-						showsDisabledMessage.value ? (openBlock(), createElementBlock("span", {
-							key: 7,
-							id: disabledId,
-							class: "astryx-visually-hidden"
-						}, toDisplayString(resolvedDisabledMessage.value), 1)) : createCommentVNode("v-if", true),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(selectedValues.value, (value) => {
-							return openBlock(), createElementBlock("input", {
-								key: value,
-								type: "hidden",
-								name: props.name,
-								value,
-								disabled: !props.name
-							}, null, 8, _hoisted_9);
-						}), 128))
-					], 34)]),
-					_: 3
-				}, 8, [
-					"class",
-					"label",
-					"input-id",
-					"is-label-hidden",
-					"is-disabled",
-					"is-required",
-					"is-optional",
-					"description",
-					"status",
-					"status-variant",
-					"width"
-				])),
-				isSheet.value ? (openBlock(), createBlock(_sfc_main$2, {
-					key: 2,
-					"is-open": sheetOpen.value,
-					"onUpdate:isOpen": _cache[4] || (_cache[4] = ($event) => sheetOpen.value = $event),
-					height: "hug",
-					label: props.label,
-					padding: 2
-				}, {
-					default: withCtx(() => [createElementVNode("div", {
-						ref_key: "sheetSlot",
-						ref: sheetSlot,
-						class: "astryx-multi-selector-sheet"
-					}, [createElementVNode("div", _hoisted_10, toDisplayString(props.label), 1)], 512)]),
-					_: 1
-				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
-				(openBlock(), createBlock(Teleport, { to: listboxTarget.value }, [withDirectives(createElementVNode("div", {
-					id: listboxId,
-					ref_key: "listboxRef",
-					ref: listboxRef,
-					class: normalizeClass(["astryx-multi-selector-listbox", { "is-sheet": isSheet.value }]),
-					role: "listbox",
-					"aria-multiselectable": "true",
-					"aria-label": props.label,
-					"data-placement": isSheet.value ? void 0 : unref(anchored).position.value.placement,
-					style: normalizeStyle(isSheet.value ? void 0 : unref(anchored).style.value),
-					tabindex: "-1"
-				}, [
-					props.searchable ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: "astryx-multi-selector-search",
-						"data-keyboard-focus": searchKeyboardFocus.value ? "true" : void 0
-					}, [
-						createVNode(_sfc_main$3, {
-							class: "astryx-multi-selector-search-icon",
-							icon: "search",
-							size: "sm"
-						}),
-						createElementVNode("input", {
-							id: searchId,
-							ref_key: "searchRef",
-							ref: searchRef,
-							class: "astryx-multi-selector-search-input",
-							type: "text",
-							role: "combobox",
-							autocomplete: "off",
-							"aria-label": searchPlaceholder.value,
-							"aria-expanded": unref(combobox).isOpen.value,
-							"aria-controls": listboxId,
-							"aria-autocomplete": "list",
-							"aria-activedescendant": unref(combobox).activeIndex.value >= 0 ? optionDomId(unref(combobox).activeIndex.value) : void 0,
-							placeholder: searchPlaceholder.value,
-							value: query.value,
-							onInput: onSearchInput,
-							onFocus: onSearchFocus,
-							onBlur: onSearchBlur,
-							onKeydown: applyKeyboardModel
-						}, null, 40, _hoisted_13),
-						query.value ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							type: "button",
-							class: "astryx-multi-selector-search-clear",
-							"aria-label": unref(messages).multiSelector.clear,
-							onClick: _cache[5] || (_cache[5] = withModifiers(($event) => query.value = "", ["stop"]))
-						}, [createVNode(_sfc_main$3, {
-							icon: "close",
-							size: "sm"
-						})], 8, _hoisted_14)) : createCommentVNode("v-if", true)
-					], 8, _hoisted_12)) : createCommentVNode("v-if", true),
-					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 创建行不进 Tab 序，方向键和回车由组合框处理。 "),
-					createOption.value ? (openBlock(), createElementBlock("div", {
-						key: 1,
-						id: optionDomId(0),
-						class: normalizeClass(["astryx-multi-selector-option is-create", { "is-active": unref(combobox).activeIndex.value === 0 }]),
-						role: "option",
-						"aria-selected": false,
-						"data-option-id": String(createOption.value.value),
-						tabindex: "-1",
-						onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
-						onMouseenter: _cache[7] || (_cache[7] = ($event) => highlight(0)),
-						onClick: _cache[8] || (_cache[8] = ($event) => toggleValue(createOption.value.value))
-					}, [createElementVNode("span", _hoisted_16, toDisplayString(createOption.value.label), 1)], 42, _hoisted_15)) : createCommentVNode("v-if", true),
-					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 全选行不进 Tab 序，方向键和空格由组合框处理。 "),
-					props.selectAll && !unref(control).isLoading.value && realMatchCount.value > 0 ? (openBlock(), createElementBlock("div", {
-						key: 2,
-						id: optionDomId(selectAllIndex.value),
-						class: normalizeClass(["astryx-multi-selector-option is-select-all", { "is-active": unref(combobox).activeIndex.value === selectAllIndex.value }]),
-						role: "option",
-						"aria-selected": selectAllState.value === "checked",
-						"data-option-id": unref(SELECT_ALL_VALUE),
-						tabindex: "-1",
-						onMousedown: _cache[9] || (_cache[9] = withModifiers(() => {}, ["prevent"])),
-						onMouseenter: _cache[10] || (_cache[10] = ($event) => highlight(selectAllIndex.value)),
-						onClick: _cache[11] || (_cache[11] = ($event) => toggleValue(unref("__astryx_select_all__")))
-					}, [
-						props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(unref(CheckboxMark)), {
-							key: 0,
-							state: selectAllState.value,
-							size: props.size === "lg" ? "md" : "sm"
-						}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true),
-						createElementVNode("span", _hoisted_18, toDisplayString(selectAllLabel.value), 1),
-						props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(unref(CheckboxMark)), {
-							key: 1,
-							state: selectAllState.value,
-							size: props.size === "lg" ? "md" : "sm"
-						}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true)
-					], 42, _hoisted_17)) : createCommentVNode("v-if", true),
-					!unref(control).isLoading.value ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(rows.value, (row) => {
-						return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "divider" ? (openBlock(), createElementBlock("div", _hoisted_19)) : row.kind === "heading" ? (openBlock(), createElementBlock("div", _hoisted_20, toDisplayString(row.label), 1)) : row.option ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 选项不进 Tab 序，方向键和空格由组合框处理。 "), createElementVNode("div", {
-							id: optionDomId(optionIndex(row.option.value)),
-							class: normalizeClass(["astryx-multi-selector-option", {
-								"is-active": optionIndex(row.option.value) === unref(combobox).activeIndex.value,
-								"is-disabled": row.option.disabled
-							}]),
-							role: "option",
-							"aria-selected": isSelected(row.option.value),
-							"aria-disabled": row.option.disabled || void 0,
-							"data-option-id": String(row.option.value),
-							tabindex: "-1",
-							onMousedown: _cache[12] || (_cache[12] = withModifiers(() => {}, ["prevent"])),
-							onMouseenter: ($event) => highlight(optionIndex(row.option.value)),
-							onClick: ($event) => toggleValue(row.option.value)
-						}, [
-							props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(unref(CheckboxMark)), {
-								key: 0,
-								state: checkboxState(row.option),
-								size: props.size === "lg" ? "md" : "sm",
-								"is-disabled": row.option.disabled
-							}, null, 8, [
-								"state",
-								"size",
-								"is-disabled"
-							])) : createCommentVNode("v-if", true),
-							createElementVNode("span", _hoisted_22, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
-								option: row.option,
-								selected: isSelected(row.option.value),
-								active: optionIndex(row.option.value) === unref(combobox).activeIndex.value
-							}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_23, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_24, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)], 64))]),
-							props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(unref(CheckboxMark)), {
-								key: 1,
-								state: checkboxState(row.option),
-								size: props.size === "lg" ? "md" : "sm",
-								"is-disabled": row.option.disabled
-							}, null, 8, [
-								"state",
-								"size",
-								"is-disabled"
-							])) : createCommentVNode("v-if", true)
-						], 42, _hoisted_21)], 2112)) : createCommentVNode("v-if", true)], 64);
-					}), 128)) : createCommentVNode("v-if", true),
-					showEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_25, [!query.value.trim() ? renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(emptyText.value), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(emptySearchText.value), 1)], 64))])) : createCommentVNode("v-if", true)
-				], 14, _hoisted_11), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
-				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
-					key: 3,
-					id: disabledTooltipId,
-					anchor: anchor.value,
-					open: unref(disabledTooltip).isOpen.value,
-					text: resolvedDisabledMessage.value ?? "",
-					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
-					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
-				}, null, 8, [
-					"anchor",
-					"open",
-					"text",
-					"onPointerEnter",
-					"onPointerLeave"
-				])) : createCommentVNode("v-if", true)
-			], 64);
-		};
-	}
-});
-//#endregion
-export { SELECT_ALL_VALUE as n, flattenOptions as r, _sfc_main as t };