feat(components): [config-provider] support more message config (#18106)

* feat(components): [config-provider] support more message config

* feat: more message-config params test

* fix: more test conflict

* chore: delete useless code

* chore: add tag

---------

Co-authored-by: warmthsea <2586244885@qq.com>

docs/en-US/component/config-provider.md

@@ -89,8 +89,12 @@ In this section, you can learn how to use Config Provider to provide experimenta
 ### Message Attribute
 
 | Attribute          | Description                                                                    | Type       | Default |
-| --------- | --------------------------------------------------------------------- | --------- | ------- |
+| ------------------ | ------------------------------------------------------------------------------ | ---------- | ------- |
 | max                | the maximum number of messages that can be displayed at the same time          | ^[number]  | —       |
+| grouping ^(2.8.2)  | merge messages with the same content, type of VNode message is not supported   | ^[boolean] | —       |
+| duration ^(2.8.2)  | display duration, millisecond. If set to 0, it will not turn off automatically | ^[number]  | —       |
+| showClose ^(2.8.2) | whether to show a close button                                                 | ^[boolean] | —       |
+| offset ^(2.8.2)    | set the distance to the top of viewport                                        | ^[number]  | —       |
 
 ### Config Provider Slots
 

packages/components/config-provider/__tests__/config-provider.test.tsx

@@ -6,6 +6,7 @@ import Chinese from '@element-plus/locale/lang/zh-cn'
 import English from '@element-plus/locale/lang/en'
 import { ElButton, ElMessage, ElPagination } from '@element-plus/components'
 import { rAF } from '@element-plus/test-utils/tick'
+import { getStyle } from '@element-plus/utils'
 import {
   useGlobalComponentSettings,
   useGlobalConfig,
@@ -178,6 +179,36 @@ describe('config-provider', () => {
       expect(document.querySelectorAll('.el-message').length).toBe(7)
     })
 
+    it('new config parameters effective', async () => {
+      const config = reactive({
+        grouping: true,
+        showClose: true,
+        offset: 200,
+      })
+      const open = () => {
+        ElMessage('this is a message.')
+      }
+
+      const wrapper = mount(() => (
+        <ConfigProvider message={config}>
+          <ElButton onClick={open}>open</ElButton>
+        </ConfigProvider>
+      ))
+
+      await rAF()
+
+      wrapper.find('.el-button').trigger('click')
+      wrapper.find('.el-button').trigger('click')
+      await nextTick()
+      const elements = document.querySelectorAll('.el-message')
+      expect(elements.length).toBe(1)
+      expect(document.querySelectorAll('.el-message__closeBtn').length).toBe(1)
+
+      const getTopValue = (elm: Element): number =>
+        Number.parseFloat(getStyle(elm as HTMLElement, 'top'))
+      expect(getTopValue(elements[0])).toBe(config.offset)
+    })
+
     it('multiple config-provider config override', async () => {
       const config = reactive({
         max: 3,

packages/components/message/src/message.ts

@@ -15,6 +15,10 @@ export type messageType = typeof messageTypes[number]
 
 export interface MessageConfigContext {
   max?: number
+  grouping?: boolean
+  duration?: number
+  offset?: number
+  showClose?: boolean
 }
 
 export const messageDefaults = mutable({

packages/components/message/src/method.ts

@@ -1,6 +1,7 @@
 import { createVNode, render } from 'vue'
 import {
   debugWarn,
+  isBoolean,
   isClient,
   isElement,
   isFunction,
@@ -57,6 +58,22 @@ const normalizeOptions = (params?: MessageParams) => {
     normalized.appendTo = appendTo
   }
 
+  // When grouping is configured globally,
+  // if grouping is manually set when calling message individually and it is not equal to the default value,
+  // the global configuration cannot override the current setting. default => false
+  if (isBoolean(messageConfig.grouping) && !normalized.grouping) {
+    normalized.grouping = messageConfig.grouping
+  }
+  if (isNumber(messageConfig.duration) && normalized.duration === 3000) {
+    normalized.duration = messageConfig.duration
+  }
+  if (isNumber(messageConfig.offset) && normalized.offset === 16) {
+    normalized.offset = messageConfig.offset
+  }
+  if (isBoolean(messageConfig.showClose) && !normalized.showClose) {
+    normalized.showClose = messageConfig.showClose
+  }
+
   return normalized as MessageParamsNormalized
 }