@astryx-vue/core 0.2.2 → 0.2.3

package/dist/{MultiSelector-C-ETfFy_.js → MultiSelector-BD5PMgez.js}

@@ -1,14 +1,43 @@
+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 { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { a as useAstryxMessages } from "./context-CiKncNSH.js";
+import { a as useAstryxMessages } from "./context-DmOLCubj.js";
 import { t as _sfc_main$1 } from "./BottomSheet-Dg95HB1s.js";
-import { t as _sfc_main$2 } from "./CheckboxIndicator-DdJmksHt.js";
-import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
-import { t as _sfc_main$4 } from "./Token-Chu_eCVs.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-7W90Ny-9.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
+import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
+import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
+import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
+import { n as fieldStatusPlacement, r as _sfc_main$5, t as searchResultMessage } from "./searchResultMessage-DN0HeRRB.js";
+import { t as _sfc_main$6 } from "./Token-CdVLH0_H.js";
+import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-BN9LQnon.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 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;
@@ -112,8 +141,12 @@ const _hoisted_1 = {
 const _hoisted_2 = [
 	"disabled",
 	"aria-disabled",
+	"aria-readonly",
+	"aria-busy",
 	"role",
+	"aria-haspopup",
 	"aria-expanded",
+	"aria-controls",
 	"aria-autocomplete",
 	"aria-activedescendant",
 	"aria-describedby",
@@ -155,23 +188,26 @@ const _hoisted_13 = [
 	"placeholder",
 	"value"
 ];
-const _hoisted_14 = [
+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_15 = { class: "astryx-multi-selector-option-label" };
-const _hoisted_16 = {
+const _hoisted_18 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_19 = {
 	key: 0,
 	class: "astryx-multi-selector-divider",
 	role: "separator"
 };
-const _hoisted_17 = {
+const _hoisted_20 = {
 	key: 1,
 	class: "astryx-multi-selector-heading",
 	role: "presentation"
 };
-const _hoisted_18 = [
+const _hoisted_21 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
@@ -179,15 +215,16 @@ const _hoisted_18 = [
 	"onMouseenter",
 	"onClick"
 ];
-const _hoisted_19 = { class: "astryx-multi-selector-option-copy" };
-const _hoisted_20 = { class: "astryx-multi-selector-option-label" };
-const _hoisted_21 = {
+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_22 = {
-	key: 2,
-	class: "astryx-multi-selector-empty"
+const _hoisted_25 = {
+	key: 4,
+	class: "astryx-multi-selector-empty",
+	role: "presentation"
 };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxMultiSelector",
@@ -210,6 +247,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		disabledReason: {},
 		status: { default: "default" },
 		statusMessage: {},
+		statusVariant: { default: "attached" },
 		size: { default: "md" },
 		variant: { default: "input" },
 		presentation: { default: "popover" },
@@ -239,7 +277,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		name: {},
-		width: {}
+		width: {},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {},
+		hasCreate: {
+			type: Boolean,
+			default: false
+		},
+		handleRef: {},
+		emptyText: {},
+		emptySearchText: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -250,7 +304,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		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`;
@@ -260,12 +323,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const triggerRef = useTemplateRef("triggerRef");
 		const searchRef = useTemplateRef("searchRef");
 		const query = ref("");
-		const focusableDisabled = computed(() => props.disabled && Boolean(props.disabledReason?.trim()));
+		const readOnlyId = `${triggerId}-readonly`;
+		const focusableDisabled = computed(() => control.isDisabled.value && Boolean(props.disabledReason?.trim()));
 		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(() => messages.value.multiSelector.empty);
+		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 {
@@ -273,19 +338,38 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				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] : []);
-			if (!props.selectAll) return items;
-			return [{
+			const head = [];
+			if (createOption.value) head.push(createOption.value);
+			if (props.selectAll) head.push({
 				value: SELECT_ALL_VALUE,
 				label: selectAllLabel.value
-			}, ...items];
+			});
+			return [...head, ...items];
 		});
 		const comboboxOptions = computed(() => selectable.value.map((option) => ({
 			value: option.value,
@@ -294,10 +378,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			description: option.description
 		})));
 		const dummyValue = ref(null);
+		const selectAllIndex = computed(() => props.selectAll ? createOption.value ? 1 : 0 : -1);
 		const combobox = useCombobox({
 			options: comboboxOptions,
 			modelValue: dummyValue,
-			isEnabled: computed(() => !props.disabled),
+			isEnabled: control.canActivate,
 			isSearchable: ref(false),
 			onChange: () => {},
 			onOpenChange: (isOpen) => {
@@ -335,7 +420,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			const option = optionByValue.value.get(value);
 			return option ? [option] : [];
 		}));
-		const enabledValues = computed(() => selectable.value.filter((option) => option.value !== "__astryx_select_all__" && !option.disabled).map((option) => option.value));
+		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";
@@ -354,10 +439,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			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 [
-				props.description ? `${triggerId}-description` : void 0,
-				props.statusMessage ? `${triggerId}-status` : void 0,
+				inGroup.value ? inputGroup?.describedBy.value : void 0,
+				!inGroup.value && props.description ? `${triggerId}-description` : void 0,
+				!inGroup.value && props.statusMessage ? `${triggerId}-status` : void 0,
 				focusableDisabled.value ? disabledId : void 0
 			].filter(Boolean).join(" ") || void 0;
 		});
@@ -365,20 +470,40 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			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) {
+		function commit(next, change) {
 			emit("update:modelValue", next);
-			emit("change", 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 (props.disabled) return;
+			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);
@@ -389,10 +514,26 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			commit(isSelected(value) ? selectedValues.value.filter((item) => item !== value) : [...selectedValues.value, value]);
 		}
 		function onTriggerClick() {
-			if (!props.disabled) combobox.toggle();
+			if (control.canActivate.value) combobox.toggle();
+		}
+		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 onKeyDown(event) {
-			if (props.disabled || event.isComposing) return;
+			if (!control.canActivate.value || event.isComposing) return;
 			const searchInput = props.searchable && event.target instanceof HTMLInputElement;
 			switch (event.key) {
 				case "ArrowDown":
@@ -438,7 +579,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					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) combobox.open();
+					} 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) {
@@ -483,20 +625,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		__expose({
 			focus: () => (props.searchable && combobox.isOpen.value ? searchRef.value : triggerRef.value)?.focus(),
-			blur: () => triggerRef.value?.blur()
+			blur: () => triggerRef.value?.blur(),
+			...handle
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [
-				createVNode(_sfc_main$3, {
+				createVNode(_sfc_main$4, {
 					class: normalizeClass(["astryx-multi-selector", [`size-${props.size}`, `variant-${props.variant}`]]),
 					label: props.label,
 					"input-id": props.searchable && unref(combobox).isOpen.value ? searchId : triggerId,
-					description: props.description,
-					"is-label-hidden": props.labelHidden,
-					"is-disabled": props.disabled,
-					"is-required": props.required,
-					"is-optional": props.optional,
-					status: fieldStatus.value,
+					"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", {
@@ -504,7 +648,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						ref: anchorRef,
 						class: normalizeClass(["astryx-multi-selector-control", [`status-${props.status}`, {
 							"is-open": unref(combobox).isOpen.value,
-							"is-disabled": props.disabled,
+							"is-disabled": unref(control).isDisabled.value,
+							"is-readonly": unref(control).isReadOnly.value,
+							"is-loading": unref(control).isLoading.value,
 							"is-ghost": props.variant === "ghost"
 						}]])
 					}, [
@@ -515,76 +661,81 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							ref: triggerRef,
 							type: "button",
 							class: "astryx-multi-selector-trigger",
-							disabled: props.disabled && !focusableDisabled.value,
+							disabled: unref(control).isDisabled.value && !focusableDisabled.value,
 							"aria-disabled": focusableDisabled.value ? "true" : void 0,
-							role: props.searchable ? void 0 : "combobox",
-							"aria-haspopup": "listbox",
-							"aria-expanded": unref(combobox).isOpen.value,
-							"aria-controls": listboxId,
+							"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,
+							"aria-describedby": [describedBy.value, unref(control).isReadOnly.value ? readOnlyId : void 0].filter(Boolean).join(" ") || void 0,
 							title: props.disabledReason,
 							onClick: onTriggerClick,
 							onKeydown: onKeyDown
-						}, [selectedOptions.value.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(placeholder.value), 1)) : props.triggerDisplay === "count" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(messages).multiSelector.selected(selectedOptions.value.length)), 1)) : props.triggerDisplay === "labels" ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(labelText.value), 1)) : (openBlock(), createElementBlock("span", {
+						}, [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$4, {
+							return openBlock(), createBlock(_sfc_main$6, {
 								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),
-						props.clearable && selectedValues.value.length > 0 && !props.disabled ? (openBlock(), createElementBlock("button", {
+						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$3, {
 							key: 1,
+							class: "astryx-multi-selector-spinner",
+							size: "sm",
+							"aria-label": unref(messages).multiSelector.loading
+						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
+						props.clearable && 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.clear,
 							onClick: _cache[0] || (_cache[0] = withModifiers(($event) => commit([]), ["stop"]))
-						}, [..._cache[6] || (_cache[6] = [createElementVNode("svg", {
-							width: "16",
-							height: "16",
-							viewBox: "0 0 16 16",
-							fill: "none",
-							"aria-hidden": "true"
-						}, [createElementVNode("path", {
-							d: "M12 4L4 12M4 4L12 12",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round"
-						})], -1)])], 8, _hoisted_7)) : createCommentVNode("v-if", true),
-						createElementVNode("span", {
+						}, [createVNode(_sfc_main$2, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_7)) : createCommentVNode("v-if", true),
+						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$5, {
+							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$2, {
+							key: 4,
 							class: normalizeClass(["astryx-multi-selector-chevron", { "is-open": unref(combobox).isOpen.value }]),
-							"aria-hidden": "true"
-						}, [..._cache[7] || (_cache[7] = [createElementVNode("svg", {
-							width: "16",
-							height: "16",
-							viewBox: "0 0 16 16",
-							fill: "none"
-						}, [createElementVNode("path", {
-							d: "M4 6L8 10L12 6",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round"
-						})], -1)])], 2),
+							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: 2,
+							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$4, {
+							return openBlock(), createBlock(_sfc_main$6, {
 								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),
 						focusableDisabled.value ? (openBlock(), createElementBlock("span", {
-							key: 3,
+							key: 7,
 							id: disabledId,
 							class: "astryx-visually-hidden"
 						}, toDisplayString(props.disabledReason), 1)) : createCommentVNode("v-if", true),
@@ -603,12 +754,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"class",
 					"label",
 					"input-id",
-					"description",
 					"is-label-hidden",
 					"is-disabled",
 					"is-required",
 					"is-optional",
+					"description",
 					"status",
+					"status-variant",
 					"width"
 				]),
 				isSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
@@ -642,53 +794,83 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						key: 0,
 						class: "astryx-multi-selector-search",
 						"data-keyboard-focus": searchKeyboardFocus.value ? "true" : void 0
-					}, [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: onKeyDown
-					}, null, 40, _hoisted_13)], 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 序，方向键和空格由组合框处理。 "),
-					props.selectAll ? (openBlock(), createElementBlock("div", {
+					}, [
+						createVNode(_sfc_main$2, {
+							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: onKeyDown
+						}, 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[2] || (_cache[2] = withModifiers(($event) => query.value = "", ["stop"]))
+						}, [createVNode(_sfc_main$2, {
+							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-select-all", { "is-active": unref(combobox).activeIndex.value === 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[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])),
+						onMouseenter: _cache[4] || (_cache[4] = ($event) => highlight(0)),
+						onClick: _cache[5] || (_cache[5] = ($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[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
-						onMouseenter: _cache[3] || (_cache[3] = ($event) => highlight(0)),
-						onClick: _cache[4] || (_cache[4] = ($event) => toggleValue(unref("__astryx_select_all__")))
+						onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
+						onMouseenter: _cache[7] || (_cache[7] = ($event) => highlight(selectAllIndex.value)),
+						onClick: _cache[8] || (_cache[8] = ($event) => toggleValue(unref("__astryx_select_all__")))
 					}, [
-						props.checkboxPosition === "start" ? (openBlock(), createBlock(_sfc_main$2, {
+						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_15, toDisplayString(selectAllLabel.value), 1),
-						props.checkboxPosition === "end" ? (openBlock(), createBlock(_sfc_main$2, {
+						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_14)) : createCommentVNode("v-if", true),
-					(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
-						return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "divider" ? (openBlock(), createElementBlock("div", _hoisted_16)) : row.kind === "heading" ? (openBlock(), createElementBlock("div", _hoisted_17, 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", {
+					], 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,
@@ -699,11 +881,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-disabled": row.option.disabled || void 0,
 							"data-option-id": String(row.option.value),
 							tabindex: "-1",
-							onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
+							onMousedown: _cache[9] || (_cache[9] = withModifiers(() => {}, ["prevent"])),
 							onMouseenter: ($event) => highlight(optionIndex(row.option.value)),
 							onClick: ($event) => toggleValue(row.option.value)
 						}, [
-							props.checkboxPosition === "start" ? (openBlock(), createBlock(_sfc_main$2, {
+							props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(unref(CheckboxMark)), {
 								key: 0,
 								state: checkboxState(row.option),
 								size: props.size === "lg" ? "md" : "sm",
@@ -713,12 +895,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"size",
 								"is-disabled"
 							])) : createCommentVNode("v-if", true),
-							createElementVNode("span", _hoisted_19, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+							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_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.checkboxPosition === "end" ? (openBlock(), createBlock(_sfc_main$2, {
+							}, 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",
@@ -728,9 +910,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"size",
 								"is-disabled"
 							])) : createCommentVNode("v-if", true)
-						], 42, _hoisted_18)], 2112)) : createCommentVNode("v-if", true)], 64);
-					}), 128)),
-					rows.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_22, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(emptyText.value), 1)])])) : 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"]))
 			], 64);
 		};