refactor(components): [message] use type-based definitions (#23423)

* refactor(components): [message] use type-based definitions

* refactor(components): [message] use type-based definitions

* fix: fix zIndex type

* refactor(components): [message] use type-based definitions

* refactor(components): [message] use type-based definitions

* Update packages/components/message/src/message.ts

Co-authored-by: rzzf <cszhjh@gmail.com>

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/message/src/message.ts

@@ -6,15 +6,73 @@ import {
   mutable,
 } from '@element-plus/utils'
 
-import type {
-  AppContext,
-  ExtractPropTypes,
-  ExtractPublicPropTypes,
-  VNode,
-} from 'vue'
+import type { AppContext, Component, ExtractPublicPropTypes, VNode } from 'vue'
 import type { Mutable } from '@element-plus/utils'
 import type MessageConstructor from './message.vue'
 
+export interface MessageProps {
+  /**
+   * @description custom class name for Message
+   */
+  customClass?: string
+  /**
+   * @description whether `message` is treated as HTML string
+   */
+  dangerouslyUseHTMLString?: boolean
+  /**
+   * @description display duration, millisecond. If set to 0, it will not turn off automatically
+   */
+  duration?: number
+  /**
+   * @description custom icon component, overrides `type`
+   */
+  icon?: string | Component
+  /**
+   * @description message dom id
+   */
+  id?: string
+  /**
+   * @description message text
+   */
+  message?: string | VNode | (() => VNode)
+  /**
+   * @description callback function when closed with the message instance as the parameter
+   */
+  onClose?: () => void
+  /**
+   * @description whether to show a close button
+   */
+  showClose?: boolean
+  /**
+   * @description message type
+   */
+  type?: MessageType
+  /**
+   * @description whether message is plain
+   */
+  plain?: boolean
+  /**
+   * @description set the distance to the top of viewport
+   */
+  offset?: number
+  /**
+   * @description message placement position
+   */
+  placement?: MessagePlacement
+  /**
+   * @description message element zIndex value
+   */
+  zIndex?: number
+  /**
+   * @description merge messages with the same content, type of VNode message is not supported
+   */
+  grouping?: boolean
+  /**
+   * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`
+   */
+  repeatNum?: number
+}
+
 export const messageTypes = [
   'primary',
   'success',
@@ -68,6 +126,9 @@ export const messageDefaults = mutable({
   appendTo: isClient ? document.body : (undefined as never),
 } as const)
 
+/**
+ * @deprecated Removed after 3.0.0, Use `MessageProps` instead.
+ */
 export const messageProps = buildProps({
   /**
    * @description custom class name for Message
@@ -160,7 +221,7 @@ export const messageProps = buildProps({
     default: messageDefaults.placement,
   },
   /**
-   * @description input box size
+   * @description message element zIndex value
    */
   zIndex: {
     type: Number,
@@ -181,7 +242,9 @@ export const messageProps = buildProps({
     default: messageDefaults.repeatNum,
   },
 } as const)
-export type MessageProps = ExtractPropTypes<typeof messageProps>
+/**
+ * @deprecated Removed after 3.0.0, Use `MessageProps` instead.
+ */
 export type MessagePropsPublic = ExtractPublicPropTypes<typeof messageProps>
 
 export const messageEmits = {

packages/components/message/src/message.vue

@@ -60,13 +60,15 @@ import { useGlobalComponentSettings } from '@element-plus/components/config-prov
 import { ElIcon } from '@element-plus/components/icon'
 import {
   MESSAGE_DEFAULT_PLACEMENT,
+  messageDefaults,
   messageEmits,
-  messageProps,
 } from './message'
 import { getLastOffset, getOffsetOrSpace } from './instance'
+import { omit } from 'lodash-unified'
 
 import type { BadgeProps } from '@element-plus/components/badge'
 import type { CSSProperties } from 'vue'
+import type { MessageProps } from './message'
 
 const { Close } = TypeComponents
 
@@ -74,7 +76,10 @@ defineOptions({
   name: 'ElMessage',
 })
 
-const props = defineProps(messageProps)
+const props = withDefaults(
+  defineProps<MessageProps>(),
+  omit(messageDefaults, 'appendTo')
+)
 const emit = defineEmits(messageEmits)
 
 const isStartTransition = ref(false)

packages/components/message/src/method.ts

@@ -209,7 +209,7 @@ const message: MessageFn &
       ({ vnode: vm }) => vm.props?.message === normalized.message
     )
     if (instance) {
-      instance.props.repeatNum += 1
+      instance.props.repeatNum! += 1
       instance.props.type = normalized.type
       return instance.handler
     }