refactor(components): [mention] use type-based definitions (#23440)

packages/components/mention/src/mention-dropdown.ts

@@ -2,6 +2,17 @@ import { buildProps, definePropType, isString } from '@element-plus/utils'
 
 import type { MentionOption } from './types'
 
+export interface MentionDropdownProps {
+  options?: MentionOption[]
+  loading?: boolean
+  disabled?: boolean
+  contentId?: string
+  ariaLabel?: string
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MentionDropdownProps` instead.
+ */
 export const mentionDropdownProps = buildProps({
   options: {
     type: definePropType<MentionOption[]>(Array),

packages/components/mention/src/mention-dropdown.vue

@@ -45,15 +45,18 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { scrollIntoView } from '@element-plus/utils'
 import ElScrollbar from '@element-plus/components/scrollbar'
-import { mentionDropdownEmits, mentionDropdownProps } from './mention-dropdown'
+import { mentionDropdownEmits } from './mention-dropdown'
 
+import type { MentionDropdownProps } from './mention-dropdown'
 import type { MentionOption } from './types'
 
 defineOptions({
   name: 'ElMentionDropdown',
 })
 
-const props = defineProps(mentionDropdownProps)
+const props = withDefaults(defineProps<MentionDropdownProps>(), {
+  options: () => [],
+})
 const emit = defineEmits(mentionDropdownEmits)
 
 const ns = useNamespace('mention')

packages/components/mention/src/mention.ts

@@ -10,11 +10,79 @@ import { inputProps } from '@element-plus/components/input'
 import { filterOption } from './helper'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type Mention from './mention.vue'
 import type { MentionOption } from './types'
 import type { Options } from '@element-plus/components/popper'
+import type { InputProps } from '@element-plus/components/input'
+import type { ElTooltipContentProps } from '@element-plus/components/tooltip'
 
+export interface MentionProps extends InputProps {
+  /**
+   * @description mention options list
+   */
+  options?: MentionOption[]
+  /**
+   * @description prefix character to trigger mentions. The string length must be exactly 1.
+   */
+  prefix?: string | string[]
+  /**
+   * @description character to split mentions. The string length must be exactly 1.
+   */
+  split?: string
+  /**
+   * @description customize filter option logic.
+   */
+  filterOption?: false | typeof filterOption
+  /**
+   * @description set popup placement
+   */
+  placement?: 'bottom' | 'top'
+  /**
+   * @description whether the dropdown panel has an arrow
+   */
+  showArrow?: boolean
+  /**
+   * @description offset of the dropdown panel
+   */
+  offset?: number
+  /**
+   * @description when backspace is pressed to delete, whether the mention content is deleted as a whole
+   */
+  whole?: boolean
+  /**
+   * @description when backspace is pressed to delete, check if the mention is a whole
+   */
+  checkIsWhole?: (pattern: string, prefix: string) => boolean
+  /**
+   * @description input value
+   */
+  modelValue?: string
+  /**
+   * @description whether the dropdown panel of mentions is in a loading state.
+   */
+  loading?: boolean
+  /**
+   * @description custom class name for dropdown panel
+   */
+  popperClass?: ElTooltipContentProps['popperClass']
+  /**
+   * @description custom style for dropdown panel
+   */
+  popperStyle?: ElTooltipContentProps['popperStyle']
+  /**
+   * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+   */
+  popperOptions?: Partial<Options>
+  /**
+   * @description configuration options
+   */
+  props?: MentionOptionProps
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MentionProps` instead.
+ */
 export const mentionProps = buildProps({
   ...inputProps,
   /**
@@ -130,7 +198,9 @@ export const mentionEmits = {
 }
 
 export type MentionEmits = typeof mentionEmits
-export type MentionProps = ExtractPropTypes<typeof mentionProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `MentionProps` instead.
+ */
 export type MentionPropsPublic = ExtractPublicPropTypes<typeof mentionProps>
 export type MentionInstance = InstanceType<typeof Mention> & unknown
 

packages/components/mention/src/mention.vue

@@ -60,7 +60,10 @@
 import { computed, mergeProps, nextTick, ref } from 'vue'
 import { pick } from 'lodash-unified'
 import { useFocusController, useId, useNamespace } from '@element-plus/hooks'
-import ElInput, { inputProps } from '@element-plus/components/input'
+import ElInput, {
+  inputProps,
+  inputPropsDefaults,
+} from '@element-plus/components/input'
 import ElTooltip from '@element-plus/components/tooltip'
 import {
   EVENT_CODE,
@@ -69,10 +72,11 @@ import {
 } from '@element-plus/constants'
 import { useFormDisabled } from '@element-plus/components/form'
 import { getEventCode, isFunction } from '@element-plus/utils'
-import { mentionDefaultProps, mentionEmits, mentionProps } from './mention'
-import { getCursorPosition, getMentionCtx } from './helper'
+import { mentionDefaultProps, mentionEmits } from './mention'
+import { filterOption, getCursorPosition, getMentionCtx } from './helper'
 import ElMentionDropdown from './mention-dropdown.vue'
 
+import type { MentionProps } from './mention'
 import type { Placement } from '@popperjs/core'
 import type { CSSProperties } from 'vue'
 import type { InputInstance } from '@element-plus/components/input'
@@ -84,7 +88,17 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps(mentionProps)
+const props = withDefaults(defineProps<MentionProps>(), {
+  ...inputPropsDefaults,
+  options: () => [],
+  prefix: '@',
+  split: ' ',
+  filterOption: () => filterOption,
+  placement: 'bottom',
+  offset: 0,
+  popperOptions: () => ({}),
+  props: () => mentionDefaultProps,
+})
 const emit = defineEmits(mentionEmits)
 
 const passInputProps = computed(() => pick(props, Object.keys(inputProps)))