feat: mentions (#2468)

components/mentions/index.jsx

@@ -1,4 +1,4 @@
-import { inject, nextTick } from 'vue';
+import { inject } from 'vue';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
@@ -7,7 +7,7 @@ import { mentionsProps } from '../vc-mentions/src/mentionsProps';
 import Spin from '../spin';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
-import { getOptionProps, getComponent, filterEmpty } from '../_util/props-util';
+import { getOptionProps, getComponent, filterEmpty, getSlot } from '../_util/props-util';
 
 const { Option } = VcMentions;
 
@@ -65,7 +65,7 @@ const Mentions = {
     };
   },
   mounted() {
-    nextTick(() => {
+    this.$nextTick(() => {
       if (this.autoFocus) {
         this.focus();
       }
@@ -104,7 +104,7 @@ const Mentions = {
     },
     getOptions() {
       const { loading } = this.$props;
-      const children = filterEmpty(this.$slots.default?.() || []);
+      const children = filterEmpty(getSlot(this) || []);
 
       if (loading) {
         return (
@@ -138,10 +138,11 @@ const Mentions = {
       getPopupContainer,
       ...restProps
     } = getOptionProps(this);
+    const { class: className, ...otherAttrs } = this.$attrs;
     const prefixCls = getPrefixCls('mentions', customizePrefixCls);
     const otherProps = omit(restProps, ['loading']);
 
-    const mergedClassName = classNames({
+    const mergedClassName = classNames(className, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-focused`]: focused,
     });
@@ -156,7 +157,7 @@ const Mentions = {
       children: this.getOptions(),
       class: mergedClassName,
       rows: 1,
-      ...this.$attrs,
+      ...otherAttrs,
       onChange: this.onChange,
       onSelect: this.onSelect,
       onFocus: this.onFocus,

components/vc-mentions/src/Mentions.jsx

@@ -1,4 +1,5 @@
-import { provide, nextTick } from 'vue';
+import { provide } from 'vue';
+import classNames from 'classnames';
 import omit from 'omit.js';
 import KeyCode from '../../_util/KeyCode';
 import BaseMixin from '../../_util/BaseMixin';
@@ -42,7 +43,7 @@ const Mentions = {
     },
   },
   updated() {
-    nextTick(() => {
+    this.$nextTick(() => {
       const { measuring } = this.$data;
 
       // Sync measure div top with textarea for rc-trigger usage
@@ -173,7 +174,7 @@ const Mentions = {
         this.setState({ isFocus: false });
         this.stopMeasure();
         this.$emit('blur', event);
-      }, 0);
+      }, 100);
     },
     selectOption(option) {
       const { _value: value, measureLocation, measurePrefix } = this.$data;
@@ -204,7 +205,7 @@ const Mentions = {
       const { filterOption, children = [] } = this.$props;
       const list = (Array.isArray(children) ? children : [children])
         .map(item => {
-          return { ...getOptionProps(item), children: item.children.default?.() || item.children };
+          return { ...getOptionProps(item), children: item.children.default?.() };
         })
         .filter(option => {
           /** Return all result if `filterOption` is false. */
@@ -254,6 +255,8 @@ const Mentions = {
       ...restProps
     } = getOptionProps(this);
 
+    const { class: className, style, ...otherAttrs } = this.$attrs;
+
     const inputProps = omit(restProps, [
       'value',
       'defaultValue',
@@ -267,12 +270,12 @@ const Mentions = {
     const options = measuring ? this.getOptions() : [];
 
     return (
-      <div class={prefixCls}>
+      <div class={classNames(prefixCls, className)} style={style}>
         <textarea
           ref="textarea"
           {...{
             ...inputProps,
-            ...this.$attrs,
+            ...otherAttrs,
             onChange: noop,
             onSelect: noop,
           }}