niuma-ui 2.0.2 → 2.0.4

package/dist/components/auto-complete/src/RsAutoComplete.css

@@ -0,0 +1,122 @@
+
+.rs-auto-complete[data-v-a95db999] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  vertical-align: middle;
+  color-scheme: inherit;
+}
+.rs-auto-complete__input[data-v-a95db999] {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--rs-control-height-md);
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-select-radius, var(--rs-radius-sm));
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  font-family: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-auto-complete--ssm .rs-auto-complete__input[data-v-a95db999] {
+  height: var(--rs-control-height-ssm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-auto-complete--sm .rs-auto-complete__input[data-v-a95db999] {
+  height: var(--rs-control-height-sm);
+  padding: 0 var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-auto-complete--lg .rs-auto-complete__input[data-v-a95db999] {
+  height: var(--rs-control-height-lg);
+  padding: 0 var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
+}
+.rs-auto-complete--clearable .rs-auto-complete__input[data-v-a95db999] {
+  padding-inline-end: calc(var(--rs-space-md) + 1.25rem);
+}
+.rs-auto-complete__input[data-v-a95db999]::placeholder {
+  color: var(--rs-placeholder);
+}
+.rs-auto-complete__input[data-v-a95db999]:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-auto-complete__input[data-v-a95db999]:focus {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-auto-complete__input[data-v-a95db999]:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+  background: var(--rs-surface-hover);
+}
+.rs-auto-complete__clear[data-v-a95db999] {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: var(--rs-space-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rs-radius-xs);
+  background: transparent;
+  color: var(--rs-muted);
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+.rs-auto-complete__clear[data-v-a95db999]:hover {
+  color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+.rs-auto-complete__list[data-v-a95db999] {
+  appearance: none;
+  color-scheme: inherit;
+  z-index: calc(var(--rs-z-modal) + 2);
+  box-sizing: border-box;
+  min-width: 8rem;
+  max-width: min(24rem, calc(100vw - 1rem));
+  max-height: 16rem;
+  margin: 0;
+  padding: var(--rs-space-xs);
+  overflow: auto;
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  font: inherit;
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  outline: none;
+}
+.rs-auto-complete__item[data-v-a95db999] {
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  border-radius: var(--rs-radius-sm);
+  color: var(--rs-text);
+  background: transparent;
+}
+.rs-auto-complete__item--active[data-v-a95db999],
+.rs-auto-complete__list option[data-v-a95db999]:checked,
+.rs-auto-complete__list option[data-v-a95db999]:hover:not(:disabled) {
+  background: var(--rs-item-hover);
+}
+.rs-auto-complete__list option[data-v-a95db999]:disabled {
+  color: var(--rs-muted);
+}

package/dist/components/auto-complete/src/RsAutoComplete.d.ts

@@ -1,39 +1,79 @@
 import type { RsComponentSize } from '../../../theme/types';
-import { type RsSelectFilterOption, type RsSelectOption } from '../../select/src/select-utils';
+import { type RsAutoCompleteFilterOption, type RsAutoCompleteOption, type RsAutoCompleteOptionInput } from './auto-complete-utils';
+/**
+ * RsAutoComplete 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsAutoComplete>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsAutoCompleteExpose {
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsAutoCompleteInstance = RsAutoCompleteExpose & {
+    $el: HTMLElement;
+};
+export type { RsAutoCompleteFilterOption, RsAutoCompleteOption, RsAutoCompleteOptionInput };
 type __VLS_Props = {
-    options?: ReadonlyArray<string | RsSelectOption>;
+    options?: ReadonlyArray<RsAutoCompleteOptionInput>;
     placeholder?: string;
     disabled?: boolean;
     size?: RsComponentSize;
     allowClear?: boolean;
-    filterOption?: RsSelectFilterOption | boolean;
+    filterOption?: RsAutoCompleteFilterOption | boolean;
     debounce?: number;
     emptyText?: string;
+    /** 远程搜索进行中。列表空时显示 loadingText。 */
+    loading?: boolean;
+    loadingText?: string;
+    id?: string;
+    name?: string;
+    /** 无障碍名称。旁边已有可见 label 时可省略。 */
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_12: {}, __VLS_14: {
+    option: import("../../select").RsSelectOption;
+    active: boolean;
+};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_12) => any;
+} & {
+    option?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsAutoCompleteExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     search: (query: string) => any;
     select: (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
     clear: () => any;
     "update:modelValue": (value: string) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
     onClear?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     disabled: boolean;
-    options: ReadonlyArray<string | RsSelectOption>;
+    loading: boolean;
+    allowClear: boolean;
+    options: ReadonlyArray<RsAutoCompleteOptionInput>;
     emptyText: string;
-    filterOption: RsSelectFilterOption | boolean;
+    filterOption: RsAutoCompleteFilterOption | boolean;
     debounce: number;
-    allowClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/auto-complete/src/RsAutoComplete.impl.js

@@ -1,13 +1,18 @@
+import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
+import { useRsFormContext, useRsFormField } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
-import { filterSelectOptions, splitSelectLabelHighlight } from "../../select/src/select-utils.js";
 import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { filterRsAutoCompleteOptions, normalizeRsAutoCompleteOptions } from "./auto-complete-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, vModelDynamic, watch, withDirectives, withModifiers } from "vue";
 //#region src/components/auto-complete/src/RsAutoComplete.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"id",
+	"name",
 	"placeholder",
 	"disabled",
+	"aria-label",
 	"aria-expanded",
 	"aria-controls",
 	"aria-activedescendant"
@@ -15,25 +20,24 @@ var _hoisted_1 = [
 var _hoisted_2 = ["aria-label"];
 var _hoisted_3 = [
 	"id",
+	"size",
 	"aria-label",
-	"data-placement"
+	"aria-busy",
+	"data-rs-theme",
+	"data-placement",
+	"value"
 ];
 var _hoisted_4 = {
 	key: 0,
-	class: "rs-auto-complete__empty",
-	role: "presentation"
+	disabled: "",
+	value: ""
 };
 var _hoisted_5 = [
 	"id",
-	"aria-selected",
-	"aria-disabled",
-	"onMousedown"
+	"value",
+	"disabled",
+	"title"
 ];
-var _hoisted_6 = { class: "rs-auto-complete__label" };
-var _hoisted_7 = {
-	key: 0,
-	class: "rs-auto-complete__mark"
-};
 var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RsAutoComplete",
 	inheritAttrs: false,
@@ -55,7 +59,15 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			default: true
 		},
 		debounce: { default: 0 },
-		emptyText: { default: "" }
+		emptyText: { default: "" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: {},
+		id: {},
+		name: {},
+		ariaLabel: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {},
@@ -68,16 +80,22 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	emits: /*@__PURE__*/ mergeModels([
 		"search",
 		"select",
-		"clear"
+		"clear",
+		"focus",
+		"blur"
 	], ["update:modelValue", "update:open"]),
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		const openModel = useModel(__props, "open");
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const attrs = useAttrs();
+		const formContext = useRsFormContext();
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
 		const listId = useId();
+		const autoId = useId();
+		const inputId = computed(() => props.id || autoId);
 		const inputRef = ref(null);
 		const listRef = ref(null);
 		const highlight = ref(0);
@@ -89,17 +107,43 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			width: 0,
 			placement: "bottom"
 		});
-		const normalized = computed(() => props.options.map((item) => typeof item === "string" ? {
-			label: item,
-			value: item
-		} : item));
-		const suggestions = computed(() => {
-			if (props.filterOption === false) return normalized.value;
-			return filterSelectOptions(normalized.value, model.value, (text, q) => text.toLowerCase().includes(q.toLowerCase()), props.filterOption);
+		/** 面板挂到 body 后仍跟输入框最近的 data-rs-theme（深色岛 / 混主题页）。 */
+		const panelTheme = ref();
+		function syncPanelTheme() {
+			const el = inputRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+		}
+		const resolvedDisabled = computed(() => props.disabled || Boolean(formContext?.disabled.value));
+		const iconPx = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value]);
+		const normalized = computed(() => normalizeRsAutoCompleteOptions(props.options));
+		const suggestions = computed(() => filterRsAutoCompleteOptions(normalized.value, model.value, props.filterOption));
+		const suggestionViews = computed(() => suggestions.value.map((option, index) => ({
+			option,
+			index,
+			optionId: `${listId}-${String(option.value)}`
+		})));
+		const listSize = computed(() => {
+			const count = suggestions.value.length;
+			if (count === 0) return 2;
+			return Math.min(8, Math.max(2, count));
 		});
-		const open = computed(() => Boolean(openModel.value && !props.disabled && !dismissed.value));
+		const open = computed(() => Boolean(openModel.value && !resolvedDisabled.value && !dismissed.value));
 		const activeOption = computed(() => suggestions.value[highlight.value]);
-		const activeOptionId = computed(() => open.value && activeOption.value ? `${listId}-${String(activeOption.value.value)}` : void 0);
+		const selectedValue = computed(() => activeOption.value ? String(activeOption.value.value) : "");
+		const activeOptionId = computed(() => {
+			if (!open.value || !activeOption.value) return void 0;
+			return `${listId}-${String(activeOption.value.value)}`;
+		});
+		const showClear = computed(() => Boolean(props.allowClear && model.value && !resolvedDisabled.value));
+		const listStatusText = computed(() => {
+			if (props.loading && !suggestions.value.length) return props.loadingText || t("select.loading");
+			return props.emptyText || t("select.empty");
+		});
 		watch(model, (query) => {
 			if (searchTimer.value) clearTimeout(searchTimer.value);
 			const wait = props.debounce ?? 0;
@@ -128,15 +172,35 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			});
 		}
 		let frame = 0;
+		let overlayBound = false;
 		function requestPlace() {
-			if (frame) return;
+			if (typeof window === "undefined" || frame) return;
 			frame = window.requestAnimationFrame(() => {
 				frame = 0;
 				placePopup();
 			});
 		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound || typeof window === "undefined") return;
+			overlayBound = false;
+			window.removeEventListener("resize", onWindowChange);
+			window.removeEventListener("scroll", onWindowChange, true);
+		}
 		function showList() {
-			if (props.disabled) return;
+			if (resolvedDisabled.value) return;
 			dismissed.value = false;
 			openModel.value = true;
 			requestPlace();
@@ -152,6 +216,11 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			hideList();
 			nextTick(() => inputRef.value?.focus());
 		}
+		function onNativeSelect(event) {
+			const value = event.target.value;
+			const option = suggestions.value.find((item) => String(item.value) === value);
+			if (option) onPick(option);
+		}
 		function onClear() {
 			model.value = "";
 			emit("clear");
@@ -202,48 +271,84 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		function onInput() {
 			showList();
 		}
-		function onFocus() {
+		function onFocus(event) {
+			emit("focus", event);
 			showList();
 		}
-		function onBlur() {
-			window.setTimeout(() => {
+		let blurTimer = 0;
+		function onBlur(event) {
+			emit("blur", event);
+			if (blurTimer) window.clearTimeout(blurTimer);
+			blurTimer = window.setTimeout(() => {
+				blurTimer = 0;
 				if (document.activeElement === inputRef.value) return;
 				hideList();
 			}, 0);
 		}
+		function scrollActiveIntoView() {
+			if (!open.value || !activeOptionId.value) return;
+			document.getElementById(activeOptionId.value)?.scrollIntoView({ block: "nearest" });
+		}
 		watch(suggestions, (list) => {
 			highlight.value = list.findIndex((item) => !item.disabled);
 			if (highlight.value < 0) highlight.value = 0;
-			requestPlace();
+			if (open.value) requestPlace();
+		});
+		watch(highlight, () => {
+			nextTick(scrollActiveIntoView);
 		});
 		watch(open, (isOpen) => {
-			if (isOpen) nextTick(() => requestPlace());
-		}, { immediate: true });
-		function onWindowChange() {
-			if (open.value) requestPlace();
+			if (isOpen) {
+				attachOverlay();
+				nextTick(() => {
+					syncPanelTheme();
+					requestPlace();
+				});
+				return;
+			}
+			detachOverlay();
+		});
+		function setFieldValue(value) {
+			model.value = value == null ? "" : String(value);
 		}
-		onMounted(() => {
-			window.addEventListener("resize", onWindowChange);
-			window.addEventListener("scroll", onWindowChange, true);
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue
+		}));
+		function focus() {
+			inputRef.value?.focus();
+		}
+		function blur() {
+			inputRef.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
 		});
 		onUnmounted(() => {
-			if (frame) window.cancelAnimationFrame(frame);
+			detachOverlay();
 			if (searchTimer.value) clearTimeout(searchTimer.value);
-			window.removeEventListener("resize", onWindowChange);
-			window.removeEventListener("scroll", onWindowChange, true);
+			if (blurTimer) window.clearTimeout(blurTimer);
 		});
-		function parts(label) {
-			return splitSelectLabelHighlight(label, model.value);
-		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-auto-complete", [`rs-auto-complete--${unref(resolvedSize)}`, { "rs-auto-complete--clearable": __props.allowClear && model.value && !__props.disabled }]]) }, [
-				withDirectives(createElementVNode("input", {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-auto-complete", [`rs-auto-complete--${unref(resolvedSize)}`, {
+				"rs-auto-complete--clearable": showClear.value,
+				"rs-auto-complete--disabled": resolvedDisabled.value
+			}]]) }, [
+				withDirectives(createElementVNode("input", mergeProps({
+					id: inputId.value,
 					ref_key: "inputRef",
-					ref: inputRef,
+					ref: inputRef
+				}, unref(attrs), {
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 					class: "rs-auto-complete__input",
-					placeholder: __props.placeholder ?? unref(t)("select.placeholder"),
-					disabled: __props.disabled,
+					name: __props.name,
+					placeholder: __props.placeholder ?? unref(t)("autocomplete.placeholder"),
+					disabled: resolvedDisabled.value,
+					"aria-label": __props.ariaLabel,
 					autocomplete: "off",
 					role: "combobox",
 					"aria-autocomplete": "list",
@@ -255,8 +360,8 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					onInput,
 					onFocus,
 					onBlur
-				}, null, 40, _hoisted_1), [[vModelText, model.value]]),
-				__props.allowClear && model.value && !__props.disabled ? (openBlock(), createElementBlock("button", {
+				}), null, 16, _hoisted_1), [[vModelDynamic, model.value]]),
+				showClear.value ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					type: "button",
 					class: "rs-auto-complete__clear",
@@ -265,39 +370,42 @@ var RsAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 					onClick: onClear
 				}, [createVNode(RsIcon_default, {
 					name: "x",
-					size: 14
-				})], 40, _hoisted_2)) : createCommentVNode("", true),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("ul", {
+					size: iconPx.value
+				}, null, 8, ["size"])], 40, _hoisted_2)) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("select", {
 					key: 0,
 					id: unref(listId),
 					ref_key: "listRef",
 					ref: listRef,
 					class: "rs-auto-complete__list",
-					role: "listbox",
+					size: listSize.value,
+					tabindex: "-1",
 					"aria-label": unref(t)("autocomplete.suggestions"),
+					"aria-busy": __props.loading ? "true" : void 0,
+					"data-rs-theme": panelTheme.value,
 					"data-placement": popup.value.placement,
+					value: selectedValue.value,
 					style: normalizeStyle({
 						position: "fixed",
 						top: `${popup.value.top}px`,
 						left: `${popup.value.left}px`,
 						width: `${popup.value.width}px`
-					})
-				}, [!suggestions.value.length ? (openBlock(), createElementBlock("li", _hoisted_4, toDisplayString(__props.emptyText || unref(t)("select.empty")), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(suggestions.value, (opt, index) => {
-					return openBlock(), createElementBlock("li", {
-						id: `${unref(listId)}-${String(opt.value)}`,
-						key: String(opt.value),
-						role: "option",
-						class: normalizeClass(["rs-auto-complete__item", {
-							"rs-auto-complete__item--disabled": opt.disabled,
-							"rs-auto-complete__item--active": index === highlight.value
-						}]),
-						"aria-selected": index === highlight.value,
-						"aria-disabled": opt.disabled ? "true" : void 0,
-						onMousedown: withModifiers(($event) => onPick(opt), ["prevent"])
-					}, [createElementVNode("span", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(parts(opt.label), (part, i) => {
-						return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-					}), 128))])], 42, _hoisted_5);
-				}), 128))], 12, _hoisted_3)) : createCommentVNode("", true)]))
+					}),
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+					onChange: onNativeSelect
+				}, [!suggestions.value.length ? (openBlock(), createElementBlock("option", _hoisted_4, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(listStatusText.value), 1)], true)])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(suggestionViews.value, (row) => {
+					return openBlock(), createElementBlock("option", {
+						id: row.optionId,
+						key: String(row.option.value),
+						class: normalizeClass(["rs-auto-complete__item", { "rs-auto-complete__item--active": row.index === highlight.value }]),
+						value: String(row.option.value),
+						disabled: row.option.disabled,
+						title: row.option.title
+					}, [renderSlot(_ctx.$slots, "option", {
+						option: row.option,
+						active: row.index === highlight.value
+					}, () => [createTextVNode(toDisplayString(row.option.label), 1)], true)], 10, _hoisted_5);
+				}), 128))], 44, _hoisted_3)) : createCommentVNode("", true)]))
 			], 2);
 		};
 	}

package/dist/components/auto-complete/src/RsAutoComplete.js

@@ -1,5 +1,8 @@
+import './RsAutoComplete.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsAutoComplete_vue_vue_type_script_setup_true_lang_default from "./RsAutoComplete.impl.js";
+
 //#region src/components/auto-complete/src/RsAutoComplete.vue
-var RsAutoComplete_default = RsAutoComplete_vue_vue_type_script_setup_true_lang_default;
+var RsAutoComplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsAutoComplete_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a95db999"]]);
 //#endregion
 export { RsAutoComplete_default as default };

package/dist/components/auto-complete/src/auto-complete-utils.d.ts

@@ -0,0 +1,7 @@
+import { type RsSelectFilterOption, type RsSelectOption } from '../../select/src/select-utils';
+export type RsAutoCompleteOption = RsSelectOption;
+export type RsAutoCompleteFilterOption = RsSelectFilterOption;
+export type RsAutoCompleteOptionInput = string | RsSelectOption;
+export declare function normalizeRsAutoCompleteOptions(options: ReadonlyArray<RsAutoCompleteOptionInput> | undefined): RsAutoCompleteOption[];
+/** filterOption === false 时不过滤，交给远程 @search。 */
+export declare function filterRsAutoCompleteOptions(options: RsAutoCompleteOption[], query: string, filterOption?: RsAutoCompleteFilterOption | boolean): RsAutoCompleteOption[];

package/dist/components/auto-complete/src/auto-complete-utils.js

@@ -0,0 +1,17 @@
+import { filterSelectOptions } from "../../select/src/select-utils.js";
+//#region src/components/auto-complete/src/auto-complete-utils.ts
+function normalizeRsAutoCompleteOptions(options) {
+	if (!options?.length) return [];
+	return options.map((item) => typeof item === "string" ? {
+		label: item,
+		value: item
+	} : item);
+}
+var containsIgnoreCase = (text, query) => text.toLowerCase().includes(query.toLowerCase());
+/** filterOption === false 时不过滤，交给远程 @search。 */
+function filterRsAutoCompleteOptions(options, query, filterOption) {
+	if (filterOption === false) return options;
+	return filterSelectOptions(options, query, containsIgnoreCase, filterOption);
+}
+//#endregion
+export { filterRsAutoCompleteOptions, normalizeRsAutoCompleteOptions };

package/dist/components/avatar/index.d.ts

@@ -1 +1,2 @@
 export { default as RsAvatar } from './src/RsAvatar.js';
+export type { RsAvatarShape, RsAvatarSize, RsAvatarTone } from './src/avatar-utils';