refactor(mentions): use compositionAPI (#4313)

components/mentions/index.tsx

@@ -1,15 +1,14 @@
 import type { App, PropType, VNodeTypes, Plugin, ExtractPropTypes } from 'vue';
-import { defineComponent, inject, nextTick } from 'vue';
+import { ref, onMounted } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import VcMentions from '../vc-mentions';
 import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
 import Spin from '../spin';
-import BaseMixin from '../_util/BaseMixin';
-import { defaultConfigProvider } from '../config-provider';
-import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 const { Option } = VcMentions;
 
@@ -79,65 +78,46 @@ export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
 
 const Mentions = defineComponent({
   name: 'AMentions',
-  mixins: [BaseMixin],
   inheritAttrs: false,
-  Option: { ...Option, name: 'AMentionsOption' },
-  getMentions,
   props: mentionsProps,
+  getMentions,
   emits: ['update:value', 'change', 'focus', 'blur', 'select'],
-  setup() {
+  setup(props, { slots, emit, attrs, expose }) {
-    return {
+    const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);
-      configProvider: inject('configProvider', defaultConfigProvider),
+    const focused = ref(false);
+    const vcMentions = ref(null);
+
+    const handleFocus = (e: FocusEvent) => {
+      focused.value = true;
+      emit('focus', e);
     };
-  },
+
-  data() {
+    const handleBlur = (e: FocusEvent) => {
-    return {
+      focused.value = false;
-      focused: false,
+      emit('blur', e);
     };
-  },
+
-  mounted() {
+    const handleSelect = (...args: [MentionsOptionProps, string]) => {
-    nextTick(() => {
+      emit('select', ...args);
-      if (process.env.NODE_ENV === 'test') {
+      focused.value = true;
-        if (this.autofocus) {
+    };
-          this.focus();
+
-        }
+    const handleChange = (val: string) => {
-      }
+      emit('update:value', val);
-    });
+      emit('change', val);
-  },
+    };
-  methods: {
+
-    handleFocus(e: FocusEvent) {
+    const getNotFoundContent = (renderEmpty: RenderEmptyHandler) => {
-      this.$emit('focus', e);
+      const notFoundContent = props.notFoundContent;
-      this.setState({
-        focused: true,
-      });
-    },
-    handleBlur(e: FocusEvent) {
-      this.$emit('blur', e);
-      this.setState({
-        focused: false,
-      });
-    },
-    handleSelect(...args: [MentionsOptionProps, string]) {
-      this.$emit('select', ...args);
-      this.setState({
-        focused: true,
-      });
-    },
-    handleChange(val: string) {
-      this.$emit('update:value', val);
-      this.$emit('change', val);
-    },
-    getNotFoundContent(renderEmpty: RenderEmptyHandler) {
-      const notFoundContent = getComponent(this, 'notFoundContent');
       if (notFoundContent !== undefined) {
         return notFoundContent;
       }
 
       return renderEmpty('Select');
-    },
+    };
-    getOptions() {
+
-      const { loading } = this.$props;
+    const getOptions = () => {
-      const children = getSlot(this);
+      const { loading } = props;
 
       if (loading) {
         return (
@@ -146,71 +126,82 @@ const Mentions = defineComponent({
           </Option>
         );
       }
-      return children;
+      return slots.default?.();
-    },
+    };
-    getFilterOption() {
+
-      const { filterOption, loading } = this.$props;
+    const getFilterOption = () => {
+      const { filterOption, loading } = props;
       if (loading) {
         return loadingFilterOption;
       }
       return filterOption;
-    },
+    };
-    focus() {
+
-      (this.$refs.vcMentions as HTMLTextAreaElement).focus();
+    const focus = () => {
-    },
+      (vcMentions.value as HTMLTextAreaElement).focus();
-    blur() {
+    };
-      (this.$refs.vcMentions as HTMLTextAreaElement).blur();
+    const blur = () => {
-    },
+      (vcMentions.value as HTMLTextAreaElement).blur();
-  },
+    };
-  render() {
+
-    const { focused } = this.$data;
+    expose({ focus, blur });
-    const { getPrefixCls, renderEmpty } = this.configProvider;
+
-    const {
+    onMounted(() => {
-      prefixCls: customizePrefixCls,
+      nextTick(() => {
-      disabled,
+        if (process.env.NODE_ENV === 'test') {
-      getPopupContainer,
+          if (props.autofocus) {
-      ...restProps
+            focus();
-    } = getOptionProps(this) as any;
+          }
-    const { class: className, ...otherAttrs } = this.$attrs;
+        }
-    const prefixCls = getPrefixCls('mentions', customizePrefixCls);
+      });
-    const otherProps = omit(restProps, ['loading', 'onUpdate:value']);
+    });
+
+    return () => {
+      const { disabled, getPopupContainer, ...restProps } = props;
+      const { class: className, ...otherAttrs } = attrs;
+      const otherProps = omit(restProps, ['loading', 'onUpdate:value', 'prefixCls']);
 
       const mergedClassName = classNames(className, {
-      [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls.value}-disabled`]: disabled,
-      [`${prefixCls}-focused`]: focused,
+        [`${prefixCls.value}-focused`]: focused.value,
+        [`${prefixCls}-rtl`]: direction.value === 'rtl',
       });
 
       const mentionsProps = {
-      prefixCls,
+        prefixCls: prefixCls.value,
-      notFoundContent: this.getNotFoundContent(renderEmpty),
+        notFoundContent: getNotFoundContent(renderEmpty.value),
         ...otherProps,
         disabled,
-      filterOption: this.getFilterOption(),
+        direction: direction.value,
+        filterOption: getFilterOption(),
         getPopupContainer,
-      children: this.getOptions(),
+        children: getOptions(),
         class: mergedClassName,
         rows: 1,
         ...otherAttrs,
-      onChange: this.handleChange,
+        onChange: handleChange,
-      onSelect: this.handleSelect,
+        onSelect: handleSelect,
-      onFocus: this.handleFocus,
+        onFocus: handleFocus,
-      onBlur: this.handleBlur,
+        onBlur: handleBlur,
-      ref: 'vcMentions',
+        ref: vcMentions,
       };
-
       return <VcMentions {...mentionsProps} />;
+    };
   },
 });
 
+export const MentionsOption = {
+  ...Option,
+  name: 'AMentionsOption',
+};
+
 /* istanbul ignore next */
 Mentions.install = function (app: App) {
   app.component(Mentions.name, Mentions);
-  app.component(Mentions.Option.name, Mentions.Option);
+  app.component(MentionsOption.name, MentionsOption);
   return app;
 };
 
-export const MentionsOption = Mentions.Option;
-
 export default Mentions as typeof Mentions &
   Plugin & {
     readonly Option: typeof Option;

components/mentions/style/index.less

@@ -64,10 +64,6 @@
       background-color: transparent;
     }
     .placeholder();
-
-    &:read-only {
-      cursor: default;
-    }
   }
 
   &-measure {
@@ -123,7 +119,7 @@
         overflow: hidden;
         color: @text-color;
         font-weight: normal;
-        line-height: 22px;
+        line-height: @line-height-base;
         white-space: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;
@@ -159,9 +155,11 @@
         }
 
         &-active {
-          background-color: @item-active-bg;
+          background-color: @item-hover-bg;
         }
       }
     }
   }
 }
+
+@import './rtl';

components/mentions/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@mention-prefix-cls: ~'@{ant-prefix}-mentions';
+
+.@{mention-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}

components/vc-mentions/src/DropdownMenu.jsx

@@ -1,65 +0,0 @@
-import Menu, { Item as MenuItem } from '../../menu';
-import PropTypes from '../../_util/vue-types';
-import { OptionProps } from './Option';
-import { inject } from 'vue';
-
-function noop() {}
-export default {
-  name: 'DropdownMenu',
-  props: {
-    prefixCls: PropTypes.string,
-    options: PropTypes.arrayOf(OptionProps),
-  },
-  setup() {
-    return {
-      mentionsContext: inject('mentionsContext'),
-    };
-  },
-  render() {
-    const {
-      notFoundContent,
-      activeIndex,
-      setActiveIndex,
-      selectOption,
-      onFocus = noop,
-      onBlur = noop,
-    } = this.mentionsContext;
-    const { prefixCls, options } = this.$props;
-    const activeOption = options[activeIndex] || {};
-
-    return (
-      <Menu
-        prefixCls={`${prefixCls}-menu`}
-        activeKey={activeOption.value}
-        onSelect={({ key }) => {
-          const option = options.find(({ value }) => value === key);
-          selectOption(option);
-        }}
-        onBlur={onBlur}
-        onFocus={onFocus}
-      >
-        {[
-          ...options.map((option, index) => {
-            const { value, disabled, children } = option;
-            return (
-              <MenuItem
-                key={value}
-                disabled={disabled}
-                onMouseenter={() => {
-                  setActiveIndex(index);
-                }}
-              >
-                {children}
-              </MenuItem>
-            );
-          }),
-          !options.length && (
-            <MenuItem key="notFoundContent" disabled>
-              {notFoundContent}
-            </MenuItem>
-          ),
-        ].filter(Boolean)}
-      </Menu>
-    );
-  },
-};

components/vc-mentions/src/DropdownMenu.tsx

@@ -0,0 +1,63 @@
+import Menu, { Item as MenuItem } from '../../menu';
+import PropTypes from '../../_util/vue-types';
+import { defineComponent, inject } from 'vue';
+
+function noop() {}
+
+export default defineComponent({
+  name: 'DropdownMenu',
+  props: {
+    prefixCls: PropTypes.string,
+    options: PropTypes.any,
+  },
+  setup(props) {
+    return () => {
+      const {
+        notFoundContent,
+        activeIndex,
+        setActiveIndex,
+        selectOption,
+        onFocus = noop,
+        onBlur = noop,
+      } = inject('mentionsContext');
+
+      const { prefixCls, options } = props;
+      const activeOption = options[activeIndex.value] || {};
+
+      return (
+        <Menu
+          prefixCls={`${prefixCls}-menu`}
+          activeKey={activeOption.value}
+          onSelect={({ key }) => {
+            const option = options.find(({ value }) => value === key);
+            selectOption(option);
+          }}
+          onBlur={onBlur}
+          onFocus={onFocus}
+        >
+          {[
+            ...options.map((option, index) => {
+              const { value, disabled, children } = option;
+              return (
+                <MenuItem
+                  key={value}
+                  disabled={disabled}
+                  onMouseenter={() => {
+                    setActiveIndex(index);
+                  }}
+                >
+                  {children}
+                </MenuItem>
+              );
+            }),
+            !options.length && (
+              <MenuItem key="notFoundContent" disabled>
+                {notFoundContent.value}
+              </MenuItem>
+            ),
+          ].filter(Boolean)}
+        </Menu>
+      );
+    };
+  },
+});

components/vc-mentions/src/KeywordTrigger.tsx

@@ -1,8 +1,7 @@
 import PropTypes from '../../_util/vue-types';
 import Trigger from '../../vc-trigger';
 import DropdownMenu from './DropdownMenu';
-import { OptionProps } from './Option';
+import { defineComponent } from 'vue';
-import { PlaceMent } from './placement';
 
 const BUILT_IN_PLACEMENTS = {
   bottomRight: {
@@ -23,13 +22,13 @@ const BUILT_IN_PLACEMENTS = {
   },
 };
 
-export default {
+export default defineComponent({
   name: 'KeywordTrigger',
   props: {
     loading: PropTypes.looseBool,
-    options: PropTypes.arrayOf(OptionProps),
+    options: PropTypes.array,
     prefixCls: PropTypes.string,
-    placement: PropTypes.oneOf(PlaceMent),
+    placement: PropTypes.string,
     visible: PropTypes.looseBool,
     transitionName: PropTypes.string,
     getPopupContainer: PropTypes.func,
@@ -67,4 +66,4 @@ export default {
       </Trigger>
     );
   },
-};
+});

components/vc-mentions/src/Mentions.jsx

@@ -1,312 +0,0 @@
-import { defineComponent, provide, withDirectives } from 'vue';
-import classNames from '../../_util/classNames';
-import omit from 'omit.js';
-import KeyCode from '../../_util/KeyCode';
-import BaseMixin from '../../_util/BaseMixin';
-import { hasProp, getOptionProps, initDefaultProps } from '../../_util/props-util';
-import warning from 'warning';
-import {
-  getBeforeSelectionText,
-  getLastMeasureIndex,
-  replaceWithMeasure,
-  setInputSelection,
-} from './util';
-import KeywordTrigger from './KeywordTrigger';
-import { vcMentionsProps, defaultProps } from './mentionsProps';
-import antInput from '../../_util/antInputDirective';
-
-function noop() {}
-
-const Mentions = {
-  name: 'Mentions',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  props: initDefaultProps(vcMentionsProps, defaultProps),
-  created() {
-    this.mentionsContext = provide('mentionsContext', this);
-  },
-  data() {
-    const { value = '', defaultValue = '' } = this.$props;
-    warning(this.$props.children, 'please children prop replace slots.default');
-    return {
-      _value: !hasProp(this, 'value') ? defaultValue : value,
-      measuring: false,
-      measureLocation: 0,
-      measureText: null,
-      measurePrefix: '',
-      activeIndex: 0,
-      isFocus: false,
-    };
-  },
-  watch: {
-    value(val) {
-      this.$data._value = val;
-    },
-  },
-  updated() {
-    this.$nextTick(() => {
-      const { measuring } = this.$data;
-
-      // Sync measure div top with textarea for rc-trigger usage
-      if (measuring) {
-        this.$refs.measure.scrollTop = this.$refs.textarea.scrollTop;
-      }
-    });
-  },
-  methods: {
-    triggerChange(value) {
-      const props = getOptionProps(this);
-      if (!('value' in props)) {
-        this.setState({ _value: value });
-      } else {
-        this.$forceUpdate();
-      }
-      this.__emit('change', value);
-    },
-    onChange({ target: { value, composing }, isComposing }) {
-      if (isComposing || composing) return;
-      this.triggerChange(value);
-    },
-    onKeyDown(event) {
-      const { which } = event;
-      const { activeIndex, measuring } = this.$data;
-      // Skip if not measuring
-      if (!measuring) {
-        return;
-      }
-
-      if (which === KeyCode.UP || which === KeyCode.DOWN) {
-        // Control arrow function
-        const optionLen = this.getOptions().length;
-        const offset = which === KeyCode.UP ? -1 : 1;
-        const newActiveIndex = (activeIndex + offset + optionLen) % optionLen;
-        this.setState({
-          activeIndex: newActiveIndex,
-        });
-        event.preventDefault();
-      } else if (which === KeyCode.ESC) {
-        this.stopMeasure();
-      } else if (which === KeyCode.ENTER) {
-        // Measure hit
-        event.preventDefault();
-        const options = this.getOptions();
-        if (!options.length) {
-          this.stopMeasure();
-          return;
-        }
-        const option = options[activeIndex];
-        this.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
-     */
-    onKeyUp(event) {
-      const { key, which } = event;
-      const { measureText: prevMeasureText, measuring } = this.$data;
-      const { prefix = '', validateSearch } = this.$props;
-      const target = event.target;
-      const selectionStartText = getBeforeSelectionText(target);
-      const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
-        selectionStartText,
-        prefix,
-      );
-
-      // Skip if match the white key list
-      if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
-        return;
-      }
-
-      if (measureIndex !== -1) {
-        const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
-        const validateMeasure = validateSearch(measureText, this.$props);
-        const matchOption = !!this.getOptions(measureText).length;
-
-        if (validateMeasure) {
-          if (
-            key === measurePrefix ||
-            measuring ||
-            (measureText !== prevMeasureText && matchOption)
-          ) {
-            this.startMeasure(measureText, measurePrefix, measureIndex);
-          }
-        } else if (measuring) {
-          // Stop if measureText is invalidate
-          this.stopMeasure();
-        }
-
-        /**
-         * We will trigger `onSearch` to developer since they may use for async update.
-         * If met `space` means user finished searching.
-         */
-        if (validateMeasure) {
-          this.__emit('search', measureText, measurePrefix);
-        }
-      } else if (measuring) {
-        this.stopMeasure();
-      }
-    },
-    onInputFocus(event) {
-      this.onFocus(event);
-    },
-    onInputBlur(event) {
-      this.onBlur(event);
-    },
-    onDropdownFocus() {
-      this.onFocus();
-    },
-    onDropdownBlur() {
-      this.onBlur();
-    },
-    onFocus(event) {
-      window.clearTimeout(this.focusId);
-      const { isFocus } = this.$data;
-      if (!isFocus && event) {
-        this.__emit('focus', event);
-      }
-      this.setState({ isFocus: true });
-    },
-    onBlur(event) {
-      this.focusId = window.setTimeout(() => {
-        this.setState({ isFocus: false });
-        this.stopMeasure();
-        this.__emit('blur', event);
-      }, 100);
-    },
-    selectOption(option) {
-      const { _value: value, measureLocation, measurePrefix } = this.$data;
-      const { split } = this.$props;
-      const { value: mentionValue = '' } = option;
-      const { text, selectionLocation } = replaceWithMeasure(value, {
-        measureLocation,
-        targetText: mentionValue,
-        prefix: measurePrefix,
-        selectionStart: this.$refs.textarea.selectionStart,
-        split,
-      });
-      this.triggerChange(text);
-      this.stopMeasure(() => {
-        // We need restore the selection position
-        setInputSelection(this.$refs.textarea, selectionLocation);
-      });
-
-      this.__emit('select', option, measurePrefix);
-    },
-    setActiveIndex(activeIndex) {
-      this.setState({
-        activeIndex,
-      });
-    },
-    getOptions(measureText) {
-      const targetMeasureText = measureText || this.$data.measureText || '';
-      const { filterOption, children = [] } = this.$props;
-      const list = (Array.isArray(children) ? children : [children])
-        .map(item => {
-          return { ...getOptionProps(item), children: item.children.default?.() };
-        })
-        .filter(option => {
-          /** Return all result if `filterOption` is false. */
-          if (filterOption === false) {
-            return true;
-          }
-          return filterOption(targetMeasureText, option);
-        });
-      return list;
-    },
-    startMeasure(measureText, measurePrefix, measureLocation) {
-      this.setState({
-        measuring: true,
-        measureText,
-        measurePrefix,
-        measureLocation,
-        activeIndex: 0,
-      });
-    },
-    stopMeasure(callback) {
-      this.setState(
-        {
-          measuring: false,
-          measureLocation: 0,
-          measureText: null,
-        },
-        callback,
-      );
-    },
-    focus() {
-      this.$refs.textarea.focus();
-    },
-    blur() {
-      this.$refs.textarea.blur();
-    },
-  },
-
-  render() {
-    const { _value: value, measureLocation, measurePrefix, measuring } = this.$data;
-    const {
-      prefixCls,
-      placement,
-      transitionName,
-      notFoundContent,
-      getPopupContainer,
-      ...restProps
-    } = getOptionProps(this);
-
-    const { class: className, style, ...otherAttrs } = this.$attrs;
-
-    const inputProps = omit(restProps, [
-      'value',
-      'defaultValue',
-      'prefix',
-      'split',
-      'children',
-      'validateSearch',
-      'filterOption',
-    ]);
-
-    const options = measuring ? this.getOptions() : [];
-    const textareaProps = {
-      ...inputProps,
-      ...otherAttrs,
-      onChange: noop,
-      onSelect: noop,
-      value,
-      onInput: this.onChange,
-      onBlur: this.onInputBlur,
-      onKeydown: this.onKeyDown,
-      onKeyup: this.onKeyUp,
-      onFocus: this.onInputFocus,
-    };
-    return (
-      <div class={classNames(prefixCls, className)} style={style}>
-        {withDirectives(<textarea ref="textarea" {...textareaProps} />, [[antInput]])}
-        {measuring && (
-          <div ref="measure" class={`${prefixCls}-measure`}>
-            {value.slice(0, measureLocation)}
-            <KeywordTrigger
-              prefixCls={prefixCls}
-              transitionName={transitionName}
-              placement={placement}
-              options={options}
-              visible
-              getPopupContainer={getPopupContainer}
-            >
-              <span>{measurePrefix}</span>
-            </KeywordTrigger>
-            {value.slice(measureLocation + measurePrefix.length)}
-          </div>
-        )}
-      </div>
-    );
-  },
-};
-
-export default defineComponent(Mentions);

components/vc-mentions/src/Mentions.tsx

@@ -0,0 +1,295 @@
+import type { ExtractPropTypes } from 'vue';
+import {
+  defineComponent,
+  provide,
+  withDirectives,
+  onMounted,
+  ref,
+  reactive,
+  onUpdated,
+  nextTick,
+  computed,
+} from 'vue';
+import classNames from '../../_util/classNames';
+import omit from 'omit.js';
+import KeyCode from '../../_util/KeyCode';
+import { getOptionProps, initDefaultProps } from '../../_util/props-util';
+import warning from 'warning';
+import {
+  getBeforeSelectionText,
+  getLastMeasureIndex,
+  replaceWithMeasure,
+  setInputSelection,
+} from './util';
+import KeywordTrigger from './KeywordTrigger';
+import { vcMentionsProps, defaultProps } from './mentionsProps';
+import antInput from '../../_util/antInputDirective';
+
+export type MentionsProps = Partial<ExtractPropTypes<typeof vcMentionsProps>>;
+
+function noop() {}
+
+const Mentions = {
+  name: 'Mentions',
+  inheritAttrs: false,
+  props: initDefaultProps(vcMentionsProps, defaultProps),
+  setup(props: MentionsProps, { emit, attrs, expose }) {
+    const measure = ref(null);
+    const textarea = ref(null);
+    const focusId = ref();
+    const state = reactive({
+      value: props.defaultValue || props.value || '',
+      measuring: false,
+      measureLocation: 0,
+      measureText: null,
+      measurePrefix: '',
+      activeIndex: 0,
+      isFocus: false,
+    });
+
+    const triggerChange = (val: string) => {
+      state.value = val;
+      emit('change', val);
+    };
+
+    const onChange = ({ target: { value, composing }, isComposing }) => {
+      if (isComposing || composing) return;
+      triggerChange(value);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const { which } = event;
+      // Skip if not measuring
+      if (!state.measuring) {
+        return;
+      }
+
+      if (which === KeyCode.UP || which === KeyCode.DOWN) {
+        // Control arrow function
+        const optionLen = getOptions().length;
+        const offset = which === KeyCode.UP ? -1 : 1;
+        const newActiveIndex = (state.activeIndex + offset + optionLen) % optionLen;
+        state.activeIndex = newActiveIndex;
+        event.preventDefault();
+      } else if (which === KeyCode.ESC) {
+        stopMeasure();
+      } else if (which === KeyCode.ENTER) {
+        // Measure hit
+        event.preventDefault();
+        const options = getOptions();
+        if (!options.length) {
+          stopMeasure();
+          return;
+        }
+        const option = options[state.activeIndex];
+        selectOption(option);
+      }
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      const { key, which } = event;
+      const { measureText: prevMeasureText, measuring } = state;
+      const { prefix, validateSearch } = props;
+      const target = event.target as HTMLTextAreaElement;
+      const selectionStartText = getBeforeSelectionText(target);
+      const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
+        selectionStartText,
+        prefix,
+      );
+
+      // Skip if match the white key list
+      if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
+        return;
+      }
+
+      if (measureIndex !== -1) {
+        const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
+        const validateMeasure = validateSearch(measureText, props);
+        const matchOption = !!getOptions(measureText).length;
+
+        if (validateMeasure) {
+          if (
+            key === measurePrefix ||
+            measuring ||
+            (measureText !== prevMeasureText && matchOption)
+          ) {
+            startMeasure(measureText, measurePrefix, measureIndex);
+          }
+        } else if (measuring) {
+          // Stop if measureText is invalidate
+          stopMeasure();
+        }
+
+        /**
+         * We will trigger `onSearch` to developer since they may use for async update.
+         * If met `space` means user finished searching.
+         */
+        if (validateMeasure) {
+          emit('search', measureText, measurePrefix);
+        }
+      } else if (measuring) {
+        stopMeasure();
+      }
+    };
+    const onInputFocus = (event: Event) => {
+      onFocus(event);
+    };
+    const onInputBlur = (event: Event) => {
+      onBlur(event);
+    };
+    const onFocus = (event: Event) => {
+      window.clearTimeout(focusId.value);
+      const { isFocus } = state;
+      if (!isFocus && event) {
+        emit('focus', event);
+      }
+      state.isFocus = true;
+    };
+    const onBlur = (event: Event) => {
+      focusId.value = window.setTimeout(() => {
+        state.isFocus = false;
+        stopMeasure();
+        emit('blur', event);
+      }, 100);
+    };
+    const selectOption = option => {
+      const { split } = props;
+      const { value: mentionValue = '' } = option;
+      const { text, selectionLocation } = replaceWithMeasure(state.value, {
+        measureLocation: state.measureLocation,
+        targetText: mentionValue,
+        prefix: state.measurePrefix,
+        selectionStart: textarea.value.selectionStart,
+        split,
+      });
+      triggerChange(text);
+      stopMeasure(() => {
+        // We need restore the selection position
+        setInputSelection(textarea.value, selectionLocation);
+      });
+
+      emit('select', option, state.measurePrefix);
+    };
+    const setActiveIndex = activeIndex => {
+      state.activeIndex = activeIndex;
+    };
+    const getOptions = (measureText?: string) => {
+      const targetMeasureText = measureText || state.measureText || '';
+      const { filterOption, children = [] } = props;
+      const list = (Array.isArray(children) ? children : [children])
+        .map(item => {
+          return { ...getOptionProps(item), children: item.children.default?.() };
+        })
+        .filter(option => {
+          /** Return all result if `filterOption` is false. */
+          if (!!filterOption === false) {
+            return true;
+          }
+          return filterOption(targetMeasureText, option);
+        });
+      return list;
+    };
+    const startMeasure = (measureText, measurePrefix, measureLocation) => {
+      state.measuring = true;
+      state.measureText = measureText;
+      state.measurePrefix = measurePrefix;
+      state.measureLocation = measureLocation;
+      state.activeIndex = 0;
+    };
+    const stopMeasure = (callback?: () => void) => {
+      state.measuring = false;
+      state.measureLocation = 0;
+      state.measureText = null;
+      callback?.();
+    };
+    const focus = () => {
+      textarea.value.focus();
+    };
+    const blur = () => {
+      textarea.value.blur();
+    };
+    expose({ blur, focus });
+    onMounted(() => {
+      warning(props.children, 'please children prop replace slots.default');
+
+      provide('mentionsContext', {
+        notFoundContent: computed(() => {
+          return props.notFoundContent;
+        }),
+        activeIndex: computed(() => {
+          return state.activeIndex;
+        }),
+        setActiveIndex,
+        selectOption,
+      });
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        if (state.measuring) {
+          measure.value.scrollTop = textarea.value.scrollTop;
+        }
+      });
+    });
+    return () => {
+      const { measureLocation, measurePrefix, measuring } = state;
+      const {
+        prefixCls,
+        placement,
+        transitionName,
+        notFoundContent,
+        getPopupContainer,
+        ...restProps
+      } = props;
+
+      const { class: className, style, ...otherAttrs } = attrs;
+
+      const inputProps = omit(restProps, [
+        'value',
+        'defaultValue',
+        'prefix',
+        'split',
+        'children',
+        'validateSearch',
+        'filterOption',
+      ]);
+
+      const options = measuring ? getOptions() : [];
+      const textareaProps = {
+        ...inputProps,
+        ...otherAttrs,
+        onChange: noop,
+        onSelect: noop,
+        value: state.value,
+        onInput: onChange,
+        onBlur: onInputBlur,
+        onKeydown: onKeyDown,
+        onKeyup: onKeyUp,
+        onFocus: onInputFocus,
+      };
+
+      return (
+        <div class={classNames(prefixCls, className)} style={style}>
+          {withDirectives(<textarea ref={textarea} {...textareaProps} />, [[antInput]])}
+          {measuring && (
+            <div ref={measure} class={`${prefixCls}-measure`}>
+              {state.value.slice(0, measureLocation)}
+              <KeywordTrigger
+                prefixCls={prefixCls}
+                transitionName={transitionName}
+                placement={placement}
+                options={options}
+                visible
+                getPopupContainer={getPopupContainer}
+              >
+                <span>{measurePrefix}</span>
+              </KeywordTrigger>
+              {state.value.slice(measureLocation + measurePrefix.length)}
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+};
+
+export default defineComponent(Mentions);

components/vc-mentions/src/Option.tsx

@@ -1,15 +1,18 @@
+import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
 import PropTypes from '../../_util/vue-types';
 
-export const OptionProps = {
+export const optionProps = {
   value: PropTypes.string,
   disabled: PropTypes.looseBool,
   children: PropTypes.any,
 };
 
+export type OptionProps = ExtractPropTypes<typeof optionProps>;
+
 export default defineComponent({
   name: 'Option',
-  props: OptionProps,
+  props: optionProps,
   render() {
     return null;
   },

components/vc-mentions/src/mentionsProps.ts

@@ -5,11 +5,13 @@ import {
   filterOption as defaultFilterOption,
   validateSearch as defaultValidateSearch,
 } from './util';
-import { PlaceMent } from './placement';
+import { tuple } from '../../_util/type';
+
+export const PlaceMent = tuple('top', 'bottom');
 
 export const mentionsProps = {
   autofocus: PropTypes.looseBool,
-  prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  prefix: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   prefixCls: PropTypes.string,
   value: PropTypes.string,
   defaultValue: PropTypes.string,

components/vc-mentions/src/placement.js

@@ -1,3 +0,0 @@
-import { tuple } from '../../_util/type';
-
-export const PlaceMent = tuple('top', 'bottom');

components/vc-mentions/src/util.ts

@@ -1,20 +1,29 @@
+import type { MentionsProps } from './Mentions';
+
+interface MeasureConfig {
+  measureLocation: number;
+  prefix: string;
+  targetText: string;
+  selectionStart: number;
+  split: string;
+}
 /**
  * Cut input selection into 2 part and return text before selection start
  */
-export function getBeforeSelectionText(input) {
+export function getBeforeSelectionText(input: HTMLTextAreaElement) {
   const { selectionStart } = input;
   return input.value.slice(0, selectionStart);
 }
 
-function lower(char) {
+function lower(char: string | undefined): string {
   return (char || '').toLowerCase();
 }
 
 /**
  * Find the last match prefix index
  */
-export function getLastMeasureIndex(text, prefix = '') {
+export function getLastMeasureIndex(text: string, prefix: string | string[] = '') {
-  const prefixList = Array.isArray(prefix) ? prefix : [prefix];
+  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
   return prefixList.reduce(
     (lastMatch, prefixStr) => {
       const lastIndex = text.lastIndexOf(prefixStr);
@@ -30,7 +39,7 @@ export function getLastMeasureIndex(text, prefix = '') {
   );
 }
 
-function reduceText(text, targetText, split) {
+function reduceText(text: string, targetText: string, split: string) {
   const firstChar = text[0];
   if (!firstChar || firstChar === split) {
     return text;
@@ -57,7 +66,7 @@ function reduceText(text, targetText, split) {
  *  targetText: light
  *  => little @light test
  */
-export function replaceWithMeasure(text, measureConfig) {
+export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
   const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig;
 
   // Before text will append one space if have other text
@@ -87,7 +96,7 @@ export function replaceWithMeasure(text, measureConfig) {
   };
 }
 
-export function setInputSelection(input, location) {
+export function setInputSelection(input: HTMLTextAreaElement, location: number) {
   input.setSelectionRange(location, location);
 
   /**
@@ -98,7 +107,7 @@ export function setInputSelection(input, location) {
   input.focus();
 }
 
-export function validateSearch(text = '', props = {}) {
+export function validateSearch(text: string, props: MentionsProps) {
   const { split } = props;
   return !split || text.indexOf(split) === -1;
 }