@v-c/mentions 1.1.3 → 1.2.1

package/dist/KeywordTrigger.d.ts

@@ -1,3 +1,4 @@
+import { VueNode } from '@v-c/util/dist/type';
 import { CSSProperties } from 'vue';
 import { DataDrivenOptionProps, Direction, Placement } from './Mentions';
 interface KeywordTriggerProps {
@@ -11,6 +12,7 @@ interface KeywordTriggerProps {
     getPopupContainer?: () => HTMLElement;
     popupClassName?: string;
     popupStyle?: CSSProperties;
+    popupRender?: (menu: VueNode) => VueNode;
 }
 declare const KeywordTrigger: import('vue').DefineSetupFnComponent<KeywordTriggerProps, {}, {}, KeywordTriggerProps & {}, import('vue').PublicProps>;
 export default KeywordTrigger;

package/dist/KeywordTrigger.js

@@ -43,16 +43,17 @@ var KeywordTrigger = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		return props.placement === "top" ? "topRight" : "bottomRight";
 	});
 	return () => {
-		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle } = props;
+		const { prefixCls, options, visible, transitionName, getPopupContainer, popupClassName, popupStyle, popupRender } = props;
 		const dropdownPrefix = `${prefixCls}-dropdown`;
+		const dropdownElement = createVNode(DropdownMenu, {
+			"prefixCls": dropdownPrefix,
+			"options": options,
+			"opened": opened.value
+		}, null);
 		return createVNode(Trigger, {
 			"prefixCls": dropdownPrefix,
 			"popupVisible": visible,
-			"popup": createVNode(DropdownMenu, {
-				"prefixCls": dropdownPrefix,
-				"options": options,
-				"opened": opened.value
-			}, null),
+			"popup": popupRender ? popupRender(dropdownElement) : dropdownElement,
 			"popupPlacement": dropdownPlacement.value,
 			"popupMotion": { name: transitionName },
 			"builtinPlacements": BUILT_IN_PLACEMENTS,
@@ -114,6 +115,11 @@ var KeywordTrigger = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			type: Object,
 			required: false,
 			default: void 0
+		},
+		popupRender: {
+			type: Function,
+			required: false,
+			default: void 0
 		}
 	},
 	name: "KeywordTrigger",

package/dist/Mentions.d.ts

@@ -45,6 +45,12 @@ export interface MentionsProps extends BaseTextareaAttrs {
         popup?: CSSProperties;
     };
     onPopupScroll?: (event: UIEvent) => void;
+    /**
+     * Customize the dropdown menu rendering
+     * @param menu The default dropdown menu
+     * @returns The customized dropdown menu
+     */
+    popupRender?: (menu: VueNode) => VueNode;
     rows?: HTMLTextAreaElement['rows'];
 }
 export interface MentionsRef {

package/dist/Mentions.js

@@ -6,7 +6,7 @@ import { filterOption, getBeforeSelectionText, getLastMeasureIndex, replaceWithM
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
 import { BaseInput } from "@v-c/input";
 import TextArea from "@v-c/textarea";
-import { KeyCode, clsx, omit, useId } from "@v-c/util";
+import { KeyCode, clsx, isVueRenderable, 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
@@ -44,7 +44,8 @@ var omitKeys = [
 	"popupClassName",
 	"rows",
 	"visible",
-	"onPopupScroll"
+	"onPopupScroll",
+	"popupRender"
 ];
 var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
 	const mergedPrefix = computed(() => {
@@ -329,7 +330,8 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 				"visible": true,
 				"getPopupContainer": props.getPopupContainer,
 				"popupClassName": clsx(props.popupClassName, mentionClassNames?.popup),
-				"popupStyle": styles?.popup
+				"popupStyle": styles?.popup,
+				"popupRender": props.popupRender
 			}, { default: () => [createVNode("span", null, [mergedMeasurePrefix.value])] })] }),
 			mergedValue.value.slice(mergedMeasureLocation.value + mergedMeasurePrefix.value.length)
 		])]);
@@ -484,6 +486,11 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 			required: false,
 			default: void 0
 		},
+		popupRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		rows: {
 			required: false,
 			default: void 0
@@ -574,7 +581,7 @@ var InternalMentions = /* @__PURE__ */ defineComponent((props, { slots, expose,
 	inheritAttrs: false
 });
 var Mentions = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
-	const hasSuffix = computed(() => !!(props.suffix || props.allowClear));
+	const hasSuffix = computed(() => isVueRenderable(props.suffix) || Boolean(props.allowClear));
 	const holderRef = shallowRef();
 	const mentionRef = shallowRef();
 	const mergedValue = shallowRef(props?.value ?? props?.defaultValue ?? "");
@@ -769,6 +776,11 @@ var Mentions = /* @__PURE__ */ defineComponent((props, { expose, attrs }) => {
 			required: false,
 			default: void 0
 		},
+		popupRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		rows: {
 			required: false,
 			default: void 0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/mentions",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "description": "",
   "license": "MIT",
   "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/mentions",
@@ -30,11 +30,11 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/input": "^1.1.1",
-    "@v-c/menu": "^1.2.2",
+    "@v-c/input": "^1.1.2",
+    "@v-c/menu": "^1.4.0",
+    "@v-c/util": "^1.2.0",
     "@v-c/textarea": "^1.1.0",
-    "@v-c/trigger": "^1.0.18",
-    "@v-c/util": "^1.0.21"
+    "@v-c/trigger": "^1.1.1"
   },
   "scripts": {
     "build": "vite build",