@v-c/mentions 1.0.0 → 1.1.0-rc.1

package/dist/DropdownMenu.js

@@ -2,10 +2,15 @@ import { useMentionsContext } from "./MentionsContext.js";
 import { computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
 import Menu, { Item } from "@v-c/menu";
 import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+//#region src/DropdownMenu.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var DropdownMenu_default = /* @__PURE__ */ defineComponent((props) => {
+/**
+* We only use Menu to display the candidate.
+* The focus is controlled by textarea to make accessibility easy.
+*/
+var DropdownMenu = /* @__PURE__ */ defineComponent((props) => {
 	const mentionsContext = useMentionsContext();
 	const menuRef = shallowRef();
 	const activeIndex = computed(() => mentionsContext.value.activeIndex);
@@ -86,7 +91,7 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent((props) => {
 				"class": className,
 				"style": style
 			}, { onMouseenter: () => {
-				setActiveIndex(index);
+				if (!disabled) setActiveIndex(index);
 			} }), _isSlot(label) ? label : { default: () => [label] });
 		}), !options.length && createVNode(Item, {
 			"disabled": true,
@@ -102,16 +107,15 @@ var DropdownMenu_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		options: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		opened: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		}
 	},
 	name: "DropdownMenu",
 	inheritAttrs: false
 });
-export { DropdownMenu_default as default };
+//#endregion
+export { DropdownMenu as default };

package/dist/KeywordTrigger.js

@@ -1,6 +1,7 @@
-import DropdownMenu_default from "./DropdownMenu.js";
+import DropdownMenu from "./DropdownMenu.js";
 import { computed, createVNode, defineComponent, shallowRef } from "vue";
 import Trigger from "@v-c/trigger";
+//#region src/KeywordTrigger.tsx
 var BUILT_IN_PLACEMENTS = {
 	bottomRight: {
 		points: ["tl", "br"],
@@ -35,7 +36,7 @@ var BUILT_IN_PLACEMENTS = {
 		}
 	}
 };
-var KeywordTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+var KeywordTrigger = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const opened = shallowRef(false);
 	const dropdownPlacement = computed(() => {
 		if (props.direction === "rtl") return props.placement === "top" ? "topLeft" : "bottomLeft";
@@ -44,7 +45,7 @@ var KeywordTrigger_default = /* @__PURE__ */ defineComponent((props, { slots })
 	return () => {
 		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle } = props;
 		const dropdownPrefix = `${prefixCls}-dropdown`;
-		const dropdownElement = createVNode(DropdownMenu_default, {
+		const dropdownElement = createVNode(DropdownMenu, {
 			"prefixCls": dropdownPrefix,
 			"options": options,
 			"opened": opened.value
@@ -73,8 +74,7 @@ var KeywordTrigger_default = /* @__PURE__ */ defineComponent((props, { slots })
 		},
 		options: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefixCls: {
 			type: String,
@@ -120,4 +120,5 @@ var KeywordTrigger_default = /* @__PURE__ */ defineComponent((props, { slots })
 	name: "KeywordTrigger",
 	inheritAttrs: false
 });
-export { KeywordTrigger_default as default };
+//#endregion
+export { KeywordTrigger as default };

package/dist/Mentions.js

@@ -1,5 +1,5 @@
 import { MentionsProvider } from "./MentionsContext.js";
-import KeywordTrigger_default from "./KeywordTrigger.js";
+import KeywordTrigger from "./KeywordTrigger.js";
 import { useUnstableContext } from "./context.js";
 import useEffectState from "./hooks/useEffectState.js";
 import { filterOption, getBeforeSelectionText, getLastMeasureIndex, replaceWithMeasure, setInputSelection, validateSearch } from "./util.js";
@@ -9,6 +9,7 @@ import TextArea from "@v-c/textarea";
 import { KeyCode, clsx, omit, useId } from "@v-c/util";
 import { toArray } from "@v-c/util/dist/Children/toArray";
 import { filterEmpty, getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+//#region src/Mentions.tsx
 var omitKeys = [
 	"prefixCls",
 	"className",
@@ -45,15 +46,6 @@ var omitKeys = [
 	"visible",
 	"onPopupScroll"
 ];
-var defaults = {
-	prefix: "@",
-	prefixCls: "vc-mentions",
-	split: " ",
-	notFoundContent: "Not Found",
-	validateSearch,
-	filterOption,
-	rows: 1
-};
 var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
 	const mergedPrefix = computed(() => {
 		const prefix = props.prefix;
@@ -128,19 +120,37 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 			key: `${key || optionProps.value}-${uniqueKey}`
 		}));
 		return list.filter((option) => {
+			/** Return all result if `filterOption` is false. */
 			if (filterOption$1 === false) return true;
 			if (typeof filterOption$1 !== "function") return true;
 			return filterOption$1(targetMeasureText, option);
 		});
 	};
 	const mergedOptions = computed(() => getOptions(mergedMeasureText.value));
+	const getEnabledActiveIndex = (index, offset = 1) => {
+		const optionLen = mergedOptions.value.length;
+		if (optionLen === 0) return -1;
+		for (let i = 0; i < optionLen; i += 1) {
+			const current = (index + i * offset + optionLen) % optionLen;
+			if (!mergedOptions.value[current]?.disabled) return current;
+		}
+		return -1;
+	};
+	watch([mergedMeasuring, mergedOptions], () => {
+		if (!mergedMeasuring.value) return;
+		const current = mergedOptions.value[activeIndex.value];
+		if (!current || current.disabled) {
+			const next = getEnabledActiveIndex(0);
+			if (next !== activeIndex.value) activeIndex.value = next;
+		}
+	});
 	const onSelectionEffect = useEffectState();
 	const startMeasure = (nextMeasureText, nextMeasurePrefix, nextMeasureLocation) => {
 		measuring.value = true;
 		measureText.value = nextMeasureText;
 		measurePrefix.value = nextMeasurePrefix;
 		measureLocation.value = nextMeasureLocation;
-		activeIndex.value = 0;
+		activeIndex.value = getEnabledActiveIndex(0);
 	};
 	const stopMeasure = (callback) => {
 		measuring.value = false;
@@ -157,6 +167,7 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 		triggerChange(nextValue);
 	};
 	const selectOption = (option) => {
+		if (!option || option.disabled) return;
 		const { value: mentionValue = "" } = option;
 		const textArea = getTextArea();
 		const { text, selectionLocation } = replaceWithMeasure(mergedValue.value, {
@@ -177,9 +188,13 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 		props?.onKeydown?.(event);
 		if (!mergedMeasuring.value) return;
 		if (which === KeyCode.UP || which === KeyCode.DOWN) {
-			const optionLen = mergedOptions.value.length;
+			if (mergedOptions.value.length === 0) {
+				event.preventDefault();
+				return;
+			}
 			const offset = which === KeyCode.UP ? -1 : 1;
-			activeIndex.value = (activeIndex.value + offset + optionLen) % optionLen;
+			const nextIndex = getEnabledActiveIndex(activeIndex.value + offset, offset);
+			if (nextIndex !== -1) activeIndex.value = nextIndex;
 			event.preventDefault();
 		} else if (which === KeyCode.ESC) stopMeasure();
 		else if (which === KeyCode.ENTER) {
@@ -189,10 +204,32 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				stopMeasure();
 				return;
 			}
-			const option = mergedOptions.value[activeIndex.value];
+			let currentIndex = activeIndex.value;
+			let option = mergedOptions.value[currentIndex];
+			if (!option || option.disabled) {
+				currentIndex = getEnabledActiveIndex(0);
+				if (currentIndex === -1) {
+					stopMeasure();
+					return;
+				}
+				activeIndex.value = currentIndex;
+				option = mergedOptions.value[currentIndex];
+			}
 			selectOption(option);
 		}
 	};
+	/**
+	* When to start measure:
+	* 1. When user press `prefix`
+	* 2. When measureText !== prevMeasureText
+	*  - If measure hit
+	*  - If measuring
+	*
+	* When to stop measure:
+	* 1. Selection is out of range
+	* 2. Contains `space`
+	* 3. ESC or select one
+	*/
 	const onInternalKeyUp = (event) => {
 		const { key, which } = event;
 		const target = event.target;
@@ -212,6 +249,10 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 			if (validateMeasure) {
 				if (key === nextMeasurePrefix || key === "Shift" || which === KeyCode.ALT || key === "AltGraph" || mergedMeasuring.value || nextMeasureText !== mergedMeasureText.value && matchOption) startMeasure(nextMeasureText, nextMeasurePrefix, measureIndex);
 			} else if (mergedMeasuring.value) stopMeasure();
+			/**
+			* We will trigger `onSearch` to developer since they may use for async update.
+			* If met `space` means user finished searching.
+			*/
 			const onSearch = props?.onSearch;
 			if (onSearch && validateMeasure) onSearch(nextMeasureText, nextMeasurePrefix);
 		} else if (mergedMeasuring.value) stopMeasure();
@@ -279,7 +320,7 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				onFocus: onDropdownFocus,
 				onBlur: onDropdownBlur,
 				onScroll: onInternalPopupScroll
-			} }, { default: () => [createVNode(KeywordTrigger_default, {
+			} }, { default: () => [createVNode(KeywordTrigger, {
 				"prefixCls": prefixCls,
 				"transitionName": props.transitionName,
 				"placement": props.placement,
@@ -303,8 +344,7 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 	props: /* @__PURE__ */ mergeDefaults({
 		hasWrapper: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		id: {
 			type: String,
@@ -515,12 +555,25 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 			type: Function,
 			required: false,
 			default: void 0
+		},
+		changeOnComposing: {
+			type: Boolean,
+			required: false,
+			default: void 0
 		}
-	}, defaults),
+	}, {
+		prefix: "@",
+		prefixCls: "vc-mentions",
+		split: " ",
+		notFoundContent: "Not Found",
+		validateSearch,
+		filterOption,
+		rows: 1
+	}),
 	name: "VMentions",
 	inheritAttrs: false
 });
-var Mentions_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
+var Mentions = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
 	const hasSuffix = computed(() => !!(props.suffix || props.allowClear));
 	const holderRef = shallowRef();
 	const mentionRef = shallowRef();
@@ -787,9 +840,15 @@ var Mentions_default = /* @__PURE__ */ defineComponent((props, { expose, attrs }
 			type: Function,
 			required: false,
 			default: void 0
+		},
+		changeOnComposing: {
+			type: Boolean,
+			required: false,
+			default: void 0
 		}
 	},
 	name: "Mentions",
 	inheritAttrs: false
 });
-export { Mentions_default as default };
+//#endregion
+export { Mentions as default };

package/dist/MentionsContext.js

@@ -1,9 +1,10 @@
 import { computed, defineComponent, inject, provide, ref } from "vue";
+//#region src/MentionsContext.ts
 var MentionsContextKey = Symbol("MentionsContext");
 function useMentionsContext() {
 	return inject(MentionsContextKey, ref());
 }
-const MentionsProvider = defineComponent((props, { slots }) => {
+var MentionsProvider = defineComponent((props, { slots }) => {
 	provide(MentionsContextKey, computed(() => props.value));
 	return () => {
 		return slots?.default?.();
@@ -13,4 +14,5 @@ const MentionsProvider = defineComponent((props, { slots }) => {
 	inheritAttrs: false,
 	props: ["value"]
 });
+//#endregion
 export { MentionsProvider, useMentionsContext };

package/dist/Option.js

@@ -1,3 +1,4 @@
+//#region src/Option.tsx
 var Option = () => null;
-var Option_default = Option;
-export { Option_default as default };
+//#endregion
+export { Option as default };

package/dist/context.js

@@ -1,4 +1,5 @@
 import { inject, provide } from "vue";
+//#region src/context.ts
 var UnstableContextKey = Symbol("UnstableContext");
 function useUnstableContext() {
 	return inject(UnstableContextKey, {});
@@ -6,4 +7,5 @@ function useUnstableContext() {
 function useUnstableContextProvider(value) {
 	provide(UnstableContextKey, value);
 }
+//#endregion
 export { useUnstableContext, useUnstableContextProvider };

package/dist/hooks/useEffectState.js

@@ -1,4 +1,8 @@
 import { shallowRef, watch } from "vue";
+//#region src/hooks/useEffectState.ts
+/**
+* Trigger a callback on state change
+*/
 function useEffectState() {
 	const effectId = shallowRef({
 		id: 0,
@@ -15,4 +19,5 @@ function useEffectState() {
 	});
 	return update;
 }
+//#endregion
 export { useEffectState as default };

package/dist/index.js

@@ -1,5 +1,7 @@
 import { useUnstableContext, useUnstableContextProvider } from "./context.js";
-import Mentions_default from "./Mentions.js";
-import Option_default from "./Option.js";
-var src_default = Mentions_default;
-export { Option_default as Option, src_default as default, useUnstableContext, useUnstableContextProvider };
+import Mentions from "./Mentions.js";
+import Option from "./Option.js";
+//#region src/index.ts
+var src_default = Mentions;
+//#endregion
+export { Option, src_default as default, useUnstableContext, useUnstableContextProvider };

package/dist/util.js

@@ -1,7 +1,14 @@
+//#region src/util.ts
+/**
+* Cut input selection into 2 part and return text before selection start
+*/
 function getBeforeSelectionText(input) {
 	const { selectionStart } = input;
 	return input.value.slice(0, selectionStart);
 }
+/**
+* Find the last match prefix index
+*/
 function getLastMeasureIndex(text, prefix) {
 	return prefix.reduce((lastMatch, prefixStr) => {
 		const lastIndex = text.lastIndexOf(prefixStr);
@@ -29,6 +36,12 @@ function reduceText(text, targetText, split) {
 	} else if (i === targetTextLen - 1) restText = restText.slice(targetTextLen);
 	return restText;
 }
+/**
+* Paint targetText into current text:
+*  text: little@litest
+*  targetText: light
+*  => little @light test
+*/
 function replaceWithMeasure(text, measureConfig) {
 	const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig;
 	let beforeMeasureText = text.slice(0, measureLocation);
@@ -44,6 +57,10 @@ function replaceWithMeasure(text, measureConfig) {
 }
 function setInputSelection(input, location) {
 	input.setSelectionRange(location, location);
+	/**
+	* Reset caret into view.
+	* Since this function always called by user control, it's safe to focus element.
+	*/
 	input.blur();
 	input.focus();
 }
@@ -56,4 +73,5 @@ function filterOption(input, option) {
 	const lowerCase = (typeof input === "string" ? input : String(input ?? "")).toLowerCase();
 	return (option?.value ?? "").toLowerCase().includes(lowerCase);
 }
+//#endregion
 export { filterOption, getBeforeSelectionText, getLastMeasureIndex, replaceWithMeasure, setInputSelection, validateSearch };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/mentions",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0-rc.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -24,11 +24,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/input": "^1.0.2",
-    "@v-c/trigger": "^1.0.6",
-    "@v-c/menu": "^1.0.7",
-    "@v-c/textarea": "^1.0.3",
-    "@v-c/util": "^1.0.9"
+    "@v-c/input": "^1.1.0-rc.1",
+    "@v-c/menu": "^1.1.0-rc.1",
+    "@v-c/textarea": "^1.1.0-rc.1",
+    "@v-c/trigger": "^1.0.14",
+    "@v-c/util": "^1.0.19"
   },
   "scripts": {
     "build": "vite build",

package/dist/DropdownMenu.cjs

@@ -1,124 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_MentionsContext = require("./MentionsContext.cjs");
-let vue = require("vue");
-let _v_c_menu = require("@v-c/menu");
-_v_c_menu = require_rolldown_runtime.__toESM(_v_c_menu);
-let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
-}
-var DropdownMenu = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const mentionsContext = require_MentionsContext.useMentionsContext();
-	const menuRef = (0, vue.shallowRef)();
-	const activeIndex = (0, vue.computed)(() => mentionsContext.value.activeIndex);
-	const activeOption = (0, vue.computed)(() => props.options[activeIndex.value] || {});
-	const activeOptionKey = (0, vue.computed)(() => activeOption.value?.key);
-	let removeListListeners;
-	const bindListEvents = (list) => {
-		if (removeListListeners) {
-			removeListListeners();
-			removeListListeners = void 0;
-		}
-		if (!list) return;
-		const handleFocus = (event) => {
-			mentionsContext.value.onFocus?.(event);
-		};
-		const handleBlur = (event) => {
-			mentionsContext.value.onBlur?.(event);
-		};
-		const handleScroll = (event) => {
-			mentionsContext.value.onScroll?.(event);
-		};
-		list.addEventListener("focusin", handleFocus);
-		list.addEventListener("focusout", handleBlur);
-		list.addEventListener("scroll", handleScroll);
-		removeListListeners = () => {
-			list.removeEventListener("focusin", handleFocus);
-			list.removeEventListener("focusout", handleBlur);
-			list.removeEventListener("scroll", handleScroll);
-		};
-	};
-	(0, vue.watch)(() => menuRef.value?.list, (list, _, onCleanup) => {
-		if (list) list = (0, _v_c_util_dist_Dom_findDOMNode.getDOM)(list);
-		bindListEvents(list || null);
-		onCleanup(() => {
-			removeListListeners?.();
-			removeListListeners = void 0;
-		});
-	}, {
-		immediate: true,
-		flush: "post"
-	});
-	(0, vue.watch)([
-		activeIndex,
-		activeOptionKey,
-		() => props.opened
-	], () => {
-		if (!props.opened || activeIndex.value === -1) return;
-		(0, vue.nextTick)(() => {
-			const key = activeOptionKey.value;
-			if (!key) return;
-			(menuRef.value?.findItem?.({ key }))?.scrollIntoView({
-				block: "nearest",
-				inline: "nearest"
-			});
-		});
-	});
-	(0, vue.onBeforeUnmount)(() => {
-		removeListListeners?.();
-		removeListListeners = void 0;
-	});
-	return () => {
-		const { notFoundContent, setActiveIndex, selectOption } = mentionsContext.value;
-		const { prefixCls, options } = props;
-		const activeKey = activeOptionKey.value;
-		return (0, vue.createVNode)(_v_c_menu.default, {
-			"ref": menuRef,
-			"prefixCls": `${prefixCls}-menu`,
-			"activeKey": activeKey,
-			"onSelect": ({ key }) => {
-				const option = options.find(({ key: optionKey }) => optionKey === key);
-				if (option) selectOption(option);
-			}
-		}, { default: () => [options.map((option, index) => {
-			const { key, disabled, class: className, style, label } = option;
-			return (0, vue.createVNode)(_v_c_menu.Item, (0, vue.mergeProps)({
-				"key": key,
-				"disabled": disabled,
-				"class": className,
-				"style": style
-			}, { onMouseenter: () => {
-				setActiveIndex(index);
-			} }), _isSlot(label) ? label : { default: () => [label] });
-		}), !options.length && (0, vue.createVNode)(_v_c_menu.Item, {
-			"disabled": true,
-			"key": "notFound"
-		}, _isSlot(notFoundContent) ? notFoundContent : { default: () => [notFoundContent] })] });
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		options: {
-			type: Array,
-			required: true,
-			default: void 0
-		},
-		opened: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "DropdownMenu",
-	inheritAttrs: false
-});
-var DropdownMenu_default = DropdownMenu;
-exports.default = DropdownMenu_default;

package/dist/KeywordTrigger.cjs

@@ -1,130 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-const require_DropdownMenu = require("./DropdownMenu.cjs");
-let vue = require("vue");
-let _v_c_trigger = require("@v-c/trigger");
-_v_c_trigger = require_rolldown_runtime.__toESM(_v_c_trigger);
-var BUILT_IN_PLACEMENTS = {
-	bottomRight: {
-		points: ["tl", "br"],
-		offset: [0, 4],
-		overflow: {
-			adjustX: 1,
-			adjustY: 1
-		}
-	},
-	bottomLeft: {
-		points: ["tr", "bl"],
-		offset: [0, 4],
-		overflow: {
-			adjustX: 1,
-			adjustY: 1
-		}
-	},
-	topRight: {
-		points: ["bl", "tr"],
-		offset: [0, -4],
-		overflow: {
-			adjustX: 1,
-			adjustY: 1
-		}
-	},
-	topLeft: {
-		points: ["br", "tl"],
-		offset: [0, -4],
-		overflow: {
-			adjustX: 1,
-			adjustY: 1
-		}
-	}
-};
-var KeywordTrigger = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
-	const opened = (0, vue.shallowRef)(false);
-	const dropdownPlacement = (0, vue.computed)(() => {
-		if (props.direction === "rtl") return props.placement === "top" ? "topLeft" : "bottomLeft";
-		return props.placement === "top" ? "topRight" : "bottomRight";
-	});
-	return () => {
-		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle } = props;
-		const dropdownPrefix = `${prefixCls}-dropdown`;
-		const dropdownElement = (0, vue.createVNode)(require_DropdownMenu.default, {
-			"prefixCls": dropdownPrefix,
-			"options": options,
-			"opened": opened.value
-		}, null);
-		return (0, vue.createVNode)(_v_c_trigger.default, {
-			"prefixCls": dropdownPrefix,
-			"popupVisible": visible,
-			"popup": dropdownElement,
-			"popupPlacement": dropdownPlacement.value,
-			"popupMotion": { name: transitionName },
-			"builtinPlacements": BUILT_IN_PLACEMENTS,
-			"getPopupContainer": getPopupContainer,
-			"popupClassName": popupClassName,
-			"popupStyle": popupStyle,
-			"afterOpenChange": (nextOpen) => {
-				opened.value = nextOpen;
-			}
-		}, { default: () => [slots?.default?.()] });
-	};
-}, {
-	props: {
-		loading: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		options: {
-			type: Array,
-			required: true,
-			default: void 0
-		},
-		prefixCls: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		placement: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		direction: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		visible: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		transitionName: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		getPopupContainer: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		popupClassName: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		popupStyle: {
-			type: Object,
-			required: false,
-			default: void 0
-		}
-	},
-	name: "KeywordTrigger",
-	inheritAttrs: false
-});
-var KeywordTrigger_default = KeywordTrigger;
-exports.default = KeywordTrigger_default;