niuma-ui 2.0.3 → 2.0.9

package/dist/components/mentions/src/RsMentions.d.ts

@@ -1,32 +1,84 @@
 import type { RsComponentSize } from '../../../theme/types';
-import { type RsMentionOption } from './mentions-utils';
+import { type RsMentionFilterOption, type RsMentionOption, type RsMentionOptionInput } from './mentions-utils';
+/**
+ * RsMentions 模板 ref 请用此类型。
+ * 不要写 `InstanceType<typeof RsMentions>`：组件实例类型过深，vue-tsc 会报 Excessive stack depth。
+ */
+export interface RsMentionsExpose {
+    focus: () => void;
+    blur: () => void;
+}
+/** 模板 ref 实例：expose + 根节点 */
+export type RsMentionsInstance = RsMentionsExpose & {
+    $el: HTMLElement;
+};
+export type { RsMentionFilterOption, RsMentionOption, RsMentionOptionInput };
 type __VLS_Props = {
-    options?: readonly RsMentionOption[];
+    options?: ReadonlyArray<RsMentionOptionInput>;
     prefix?: string | string[];
     split?: string;
     rows?: number;
     placeholder?: string;
     disabled?: boolean;
+    readonly?: boolean;
     size?: RsComponentSize;
+    allowClear?: boolean;
+    filterOption?: RsMentionFilterOption;
+    debounce?: number;
+    emptyText?: string;
+    /** 远程搜索进行中。列表空时显示 loadingText。 */
+    loading?: boolean;
+    loadingText?: string;
+    id?: string;
+    name?: string;
+    /** 无障碍名称。旁边已有可见 label 时可省略。 */
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 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: RsMentionOption;
+    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, RsMentionsExpose, {}, {}, {}, 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;
 }, 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;
 }>, {
     split: string;
     disabled: boolean;
-    options: readonly RsMentionOption[];
-    prefix: string | string[];
+    loading: boolean;
+    readonly: boolean;
+    allowClear: boolean;
+    emptyText: string;
     rows: number;
+    options: ReadonlyArray<RsMentionOptionInput>;
+    prefix: string | string[];
+    filterOption: RsMentionFilterOption;
+    debounce: number;
 }, {}, {}, {}, 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/mentions/src/RsMentions.impl.js

@@ -1,25 +1,46 @@
+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 { applyMention, createTextareaCaretMeter, filterMentionOptions, findActiveMention, placeMentionPopup, resolveMentionPrefixes, stepMentionIndex } from "./mentions-utils.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, useId, useModel, vModelText, watch, withDirectives, withModifiers } from "vue";
+import { applyMention, createTextareaCaretMeter, filterMentionOptions, findActiveMention, normalizeRsMentionOptions, placeMentionPopup, resolveMentionPrefixes, stepMentionIndex } from "./mentions-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, vModelText, watch, withDirectives, withModifiers } from "vue";
 //#region src/components/mentions/src/RsMentions.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"id",
+	"name",
 	"rows",
 	"placeholder",
 	"disabled",
+	"readonly",
+	"aria-label",
 	"aria-expanded",
 	"aria-controls",
 	"aria-activedescendant"
 ];
-var _hoisted_2 = ["id", "aria-label"];
+var _hoisted_2 = ["aria-label"];
 var _hoisted_3 = [
+	"id",
+	"aria-label",
+	"aria-busy",
+	"data-rs-theme",
+	"data-placement"
+];
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-mentions__item rs-mentions__item--empty",
+	role: "presentation"
+};
+var _hoisted_5 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
+	"title",
 	"onMousedown"
 ];
 var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RsMentions",
+	inheritAttrs: false,
 	__name: "RsMentions",
 	props: /*@__PURE__*/ mergeModels({
 		options: { default: () => [] },
@@ -31,19 +52,51 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			type: Boolean,
 			default: false
 		},
-		size: {}
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		filterOption: {
+			type: [Boolean, Function],
+			default: true
+		},
+		debounce: { default: 0 },
+		emptyText: { default: "" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: {},
+		id: {},
+		name: {},
+		ariaLabel: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
 	}),
-	emits: /*@__PURE__*/ mergeModels(["select", "search"], ["update:modelValue"]),
-	setup(__props, { emit: __emit }) {
+	emits: /*@__PURE__*/ mergeModels([
+		"select",
+		"search",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const model = useModel(__props, "modelValue");
 		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 areaRef = ref(null);
 		const listRef = ref(null);
 		const cursor = ref(0);
@@ -55,13 +108,45 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const highlight = ref(0);
 		const dismissed = ref(false);
 		const lastSearch = ref(null);
+		const composing = ref(false);
+		const searchTimer = ref();
 		const prefixes = computed(() => resolveMentionPrefixes(props.prefix));
 		const meter = createTextareaCaretMeter();
-		const active = computed(() => dismissed.value ? null : findActiveMention(model.value, cursor.value, prefixes.value, props.split));
-		const suggestions = computed(() => active.value ? filterMentionOptions(props.options, active.value.query) : []);
-		const open = computed(() => Boolean(active.value && suggestions.value.length));
-		const activeOption = computed(() => suggestions.value[highlight.value]);
-		const activeOptionId = computed(() => open.value && activeOption.value ? `${listId}-${activeOption.value.value}` : void 0);
+		/** 面板挂到 body 后仍跟输入框最近的 data-rs-theme（深色岛 / 混主题页）。 */
+		const panelTheme = ref();
+		function syncPanelTheme() {
+			const el = areaRef.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(() => normalizeRsMentionOptions(props.options));
+		const active = computed(() => dismissed.value || resolvedDisabled.value || props.readonly ? null : findActiveMention(model.value, cursor.value, prefixes.value, props.split));
+		const suggestions = computed(() => active.value ? filterMentionOptions(normalized.value, active.value.query, props.filterOption) : []);
+		const suggestionViews = computed(() => suggestions.value.map((option, index) => ({
+			option,
+			index,
+			optionId: `${listId}-${index}-${String(option.value)}`
+		})));
+		const open = computed(() => Boolean(active.value));
+		const activeOption = computed(() => {
+			const option = suggestions.value[highlight.value];
+			return option && !option.disabled ? option : void 0;
+		});
+		const activeOptionId = computed(() => {
+			if (!open.value || !activeOption.value) return void 0;
+			return suggestionViews.value[highlight.value]?.optionId;
+		});
+		const showClear = computed(() => Boolean(props.allowClear && model.value && !resolvedDisabled.value && !props.readonly));
+		const listStatusText = computed(() => {
+			if (props.loading && !suggestions.value.length) return props.loadingText || t("select.loading");
+			return props.emptyText || t("select.empty");
+		});
 		function viewportCaret() {
 			const el = areaRef.value;
 			const mention = active.value;
@@ -80,7 +165,7 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			const list = listRef.value?.getBoundingClientRect();
 			popup.value = placeMentionPopup(caret, {
 				width: list?.width || 160,
-				height: list?.height || Math.min(192, suggestions.value.length * 32)
+				height: list?.height || Math.min(192, Math.max(1, suggestions.value.length) * 32)
 			}, {
 				width: window.innerWidth,
 				height: window.innerHeight
@@ -88,13 +173,23 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		}
 		let frame = 0;
 		function requestPlace() {
+			if (typeof window === "undefined") return;
 			if (frame) return;
 			frame = window.requestAnimationFrame(() => {
 				frame = 0;
 				placePopup();
 			});
 		}
-		function syncCursor(emitSearch, keepDismissed = false) {
+		function emitSearch(query) {
+			if (searchTimer.value) clearTimeout(searchTimer.value);
+			const wait = props.debounce ?? 0;
+			if (wait <= 0) {
+				emit("search", query);
+				return;
+			}
+			searchTimer.value = setTimeout(() => emit("search", query), wait);
+		}
+		function syncCursor(emitSearchEvent, keepDismissed = false) {
 			const el = areaRef.value;
 			cursor.value = el?.selectionStart ?? model.value.length;
 			if (!keepDismissed) dismissed.value = false;
@@ -103,14 +198,14 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				lastSearch.value = null;
 				return;
 			}
-			if (emitSearch && mention.query !== lastSearch.value) {
+			if (emitSearchEvent && mention.query !== lastSearch.value) {
 				lastSearch.value = mention.query;
-				emit("search", mention.query);
+				emitSearch(mention.query);
 			}
-			requestPlace();
+			if (!keepDismissed) requestPlace();
 		}
 		function pick(option) {
-			if (!active.value || option.disabled) return;
+			if (!active.value || option.disabled || resolvedDisabled.value || props.readonly) return;
 			const next = applyMention(model.value, active.value, option.value, props.split);
 			model.value = next.text;
 			emit("select", option.value);
@@ -124,6 +219,7 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			});
 		}
 		function onKeydown(event) {
+			if (event.isComposing || composing.value || resolvedDisabled.value || props.readonly) return;
 			if (!open.value) return;
 			if (event.key === "ArrowDown") {
 				event.preventDefault();
@@ -136,8 +232,9 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				return;
 			}
 			if (event.key === "Enter") {
+				if (!activeOption.value) return;
 				event.preventDefault();
-				if (activeOption.value) pick(activeOption.value);
+				pick(activeOption.value);
 				return;
 			}
 			if (event.key === "Escape") {
@@ -160,81 +257,203 @@ var RsMentions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				pick(activeOption.value);
 			}
 		}
+		function onCompositionStart() {
+			composing.value = true;
+		}
+		function onCompositionEnd() {
+			composing.value = false;
+			syncCursor(true);
+		}
+		function onClear() {
+			model.value = "";
+			emit("clear");
+			dismissed.value = true;
+			nextTick(() => areaRef.value?.focus());
+		}
+		function onFocus(event) {
+			emit("focus", event);
+			syncCursor(true);
+		}
+		let blurTimer = 0;
+		function onBlur(event) {
+			emit("blur", event);
+			if (typeof window === "undefined") return;
+			if (blurTimer) window.clearTimeout(blurTimer);
+			blurTimer = window.setTimeout(() => {
+				blurTimer = 0;
+				if (document.activeElement === areaRef.value) return;
+				dismissed.value = true;
+			}, 0);
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!target) return;
+			if (areaRef.value?.contains(target)) return;
+			if (listRef.value?.contains(target)) return;
+			dismissed.value = true;
+		}
+		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);
+		});
+		let overlayBound = false;
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined" || typeof document === "undefined") return;
+			overlayBound = true;
+			document.addEventListener("pointerdown", onDocPointerDown);
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
 		watch(open, (isOpen) => {
-			if (isOpen) nextTick(() => requestPlace());
+			if (isOpen) {
+				attachOverlay();
+				nextTick(() => {
+					syncPanelTheme();
+					requestPlace();
+				});
+				return;
+			}
+			detachOverlay();
 		});
 		function onWindowChange() {
 			if (open.value) requestPlace();
 		}
-		onMounted(() => {
-			window.addEventListener("resize", onWindowChange);
-			window.addEventListener("scroll", onWindowChange, true);
+		function setFieldValue(value) {
+			model.value = value == null ? "" : String(value);
+		}
+		useRsFormField(() => ({
+			get name() {
+				return props.name;
+			},
+			getValue: () => model.value,
+			setValue: setFieldValue
+		}));
+		function focus() {
+			areaRef.value?.focus();
+		}
+		function blur() {
+			areaRef.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
 		});
 		onUnmounted(() => {
-			if (frame) window.cancelAnimationFrame(frame);
+			detachOverlay();
+			if (searchTimer.value) clearTimeout(searchTimer.value);
+			if (blurTimer && typeof window !== "undefined") window.clearTimeout(blurTimer);
 			meter.dispose();
-			window.removeEventListener("resize", onWindowChange);
-			window.removeEventListener("scroll", onWindowChange, true);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-mentions", `rs-mentions--${unref(resolvedSize)}`]) }, [withDirectives(createElementVNode("textarea", {
-				ref_key: "areaRef",
-				ref: areaRef,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-				class: "rs-mentions__input",
-				rows: __props.rows,
-				placeholder: __props.placeholder ?? unref(t)("mentions.placeholder"),
-				disabled: __props.disabled,
-				role: "combobox",
-				"aria-autocomplete": "list",
-				"aria-haspopup": "listbox",
-				"aria-expanded": open.value ? "true" : "false",
-				"aria-controls": open.value ? unref(listId) : void 0,
-				"aria-activedescendant": activeOptionId.value,
-				onKeydown,
-				onKeyup: _cache[1] || (_cache[1] = ($event) => syncCursor(true, [
-					"Escape",
-					"Enter",
-					"Tab",
-					"ArrowUp",
-					"ArrowDown",
-					"Home",
-					"End"
-				].includes($event.key))),
-				onClick: _cache[2] || (_cache[2] = ($event) => syncCursor(true)),
-				onInput: _cache[3] || (_cache[3] = ($event) => syncCursor(true)),
-				onScroll: _cache[4] || (_cache[4] = ($event) => syncCursor(false, true))
-			}, null, 40, _hoisted_1), [[vModelText, model.value]]), (openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("ul", {
-				key: 0,
-				id: unref(listId),
-				ref_key: "listRef",
-				ref: listRef,
-				class: "rs-mentions__list",
-				role: "listbox",
-				"aria-label": unref(t)("mentions.suggestions"),
-				style: normalizeStyle({
-					top: `${popup.value.top}px`,
-					left: `${popup.value.left}px`
-				})
-			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(suggestions.value, (opt, index) => {
-				return openBlock(), createElementBlock("li", {
-					id: `${unref(listId)}-${opt.value}`,
-					key: opt.value,
-					role: "option",
-					class: normalizeClass(["rs-mentions__item", {
-						"rs-mentions__item--disabled": opt.disabled,
-						"rs-mentions__item--active": index === highlight.value
-					}]),
-					"aria-selected": index === highlight.value,
-					"aria-disabled": opt.disabled ? "true" : void 0,
-					onMousedown: withModifiers(($event) => pick(opt), ["prevent"])
-				}, toDisplayString(opt.label), 43, _hoisted_3);
-			}), 128))], 12, _hoisted_2)) : createCommentVNode("", true)]))], 2);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["rs-mentions", [`rs-mentions--${unref(resolvedSize)}`, {
+				"rs-mentions--clearable": showClear.value,
+				"rs-mentions--disabled": resolvedDisabled.value,
+				"rs-mentions--readonly": __props.readonly
+			}]]) }, [
+				withDirectives(createElementVNode("textarea", mergeProps({
+					id: inputId.value,
+					ref_key: "areaRef",
+					ref: areaRef
+				}, unref(attrs), {
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+					class: "rs-mentions__input",
+					name: __props.name,
+					rows: __props.rows,
+					placeholder: __props.placeholder ?? unref(t)("mentions.placeholder"),
+					disabled: resolvedDisabled.value,
+					readonly: __props.readonly,
+					"aria-label": __props.ariaLabel,
+					autocomplete: "off",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(listId) : void 0,
+					"aria-activedescendant": activeOptionId.value,
+					onKeydown,
+					onKeyup: _cache[1] || (_cache[1] = ($event) => syncCursor(true, [
+						"Escape",
+						"Enter",
+						"Tab",
+						"ArrowUp",
+						"ArrowDown",
+						"Home",
+						"End"
+					].includes($event.key))),
+					onClick: _cache[2] || (_cache[2] = ($event) => syncCursor(true)),
+					onInput: _cache[3] || (_cache[3] = ($event) => syncCursor(true)),
+					onScroll: _cache[4] || (_cache[4] = ($event) => syncCursor(false, true)),
+					onFocus,
+					onBlur,
+					onCompositionstart: onCompositionStart,
+					onCompositionend: onCompositionEnd
+				}), null, 16, _hoisted_1), [[vModelText, model.value]]),
+				showClear.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "rs-mentions__clear",
+					"aria-label": unref(t)("select.clear"),
+					onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
+					onClick: onClear
+				}, [createVNode(RsIcon_default, {
+					name: "x",
+					size: iconPx.value
+				}, null, 8, ["size"])], 40, _hoisted_2)) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("ul", {
+					key: 0,
+					id: unref(listId),
+					ref_key: "listRef",
+					ref: listRef,
+					class: "rs-mentions__list",
+					role: "listbox",
+					"aria-label": unref(t)("mentions.suggestions"),
+					"aria-busy": __props.loading ? "true" : void 0,
+					"data-rs-theme": panelTheme.value,
+					"data-placement": popup.value.placement,
+					style: normalizeStyle({
+						top: `${popup.value.top}px`,
+						left: `${popup.value.left}px`
+					})
+				}, [!suggestions.value.length ? (openBlock(), createElementBlock("li", _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("li", {
+						id: row.optionId,
+						key: row.optionId,
+						role: "option",
+						class: normalizeClass(["rs-mentions__item", {
+							"rs-mentions__item--disabled": row.option.disabled,
+							"rs-mentions__item--active": row.index === highlight.value
+						}]),
+						"aria-selected": row.index === highlight.value,
+						"aria-disabled": row.option.disabled ? "true" : void 0,
+						title: row.option.title,
+						onMousedown: withModifiers(($event) => pick(row.option), ["prevent"])
+					}, [renderSlot(_ctx.$slots, "option", {
+						option: row.option,
+						active: row.index === highlight.value
+					}, () => [createTextVNode(toDisplayString(row.option.label), 1)], true)], 42, _hoisted_5);
+				}), 128))], 12, _hoisted_3)) : createCommentVNode("", true)]))
+			], 2);
 		};
 	}
 });

package/dist/components/mentions/src/RsMentions.js

@@ -1,10 +1,8 @@
 import './RsMentions.css'
-import './RsMentions-1.css'
 import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsMentions_vue_vue_type_script_setup_true_lang_default from "./RsMentions.impl.js";
 
-
 //#region src/components/mentions/src/RsMentions.vue
-var RsMentions_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsMentions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3b6a5d22"]]);
+var RsMentions_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsMentions_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c5c1f2dc"]]);
 //#endregion
 export { RsMentions_default as default };

package/dist/components/mentions/src/mentions-utils.d.ts

@@ -2,7 +2,11 @@ export interface RsMentionOption {
     label: string;
     value: string;
     disabled?: boolean;
+    title?: string;
 }
+export type RsMentionOptionInput = string | RsMentionOption;
+export type RsMentionFilterOption = boolean | ((query: string, option: RsMentionOption) => boolean);
+export declare function normalizeRsMentionOptions(options: ReadonlyArray<RsMentionOptionInput> | undefined): RsMentionOption[];
 export interface RsMentionActive {
     prefix: string;
     query: string;
@@ -43,4 +47,4 @@ export interface RsTextareaCaretMeter {
 export declare function createTextareaCaretMeter(): RsTextareaCaretMeter;
 /** 相对 textarea 内容区的光标坐标（已扣滚动）。测试 / 单次调用用；热路径请复用 meter。 */
 export declare function measureTextareaCaret(textarea: HTMLTextAreaElement, index: number): RsMentionCaretBox;
-export declare function filterMentionOptions(options: readonly RsMentionOption[], query: string): RsMentionOption[];
+export declare function filterMentionOptions(options: readonly RsMentionOption[], query: string, filterOption?: RsMentionFilterOption): RsMentionOption[];