feat(components): close all messages of the specified type (#8415)

packages/components/message/__tests__/message-manager.test.tsx

@@ -50,6 +50,39 @@ describe('Message on command', () => {
     expect(document.querySelectorAll(selector).length).toBe(0)
   })
 
+  test('it should close all messages of the specified type', async () => {
+    const onClose = vi.fn()
+    const instances = []
+    const success = 'success'
+    for (let i = 0; i < 4; i++) {
+      const instance = Message({
+        type: success,
+        duration: 0,
+        onClose,
+      })
+      instances.push(instance)
+    }
+
+    for (let i = 0; i < 2; i++) {
+      const instance = Message({
+        duration: 0,
+        onClose,
+      })
+      instances.push(instance)
+    }
+
+    await rAF()
+    const elements = document.querySelectorAll(selector)
+    const successElements = document.querySelectorAll(`${selector}--${success}`)
+    expect(elements.length).toBe(6)
+    expect(successElements.length).toBe(4)
+    Message.closeAll(success)
+    await rAF()
+    expect(onClose).toHaveBeenCalledTimes(4)
+    expect(document.querySelectorAll(selector).length).toBe(2)
+    Message.closeAll()
+  })
+
   test('it should stack messages', async () => {
     const messages = [Message(), Message(), Message()]
     await rAF()

packages/components/message/src/message.ts

@@ -11,6 +11,8 @@ import type MessageConstructor from './message.vue'
 
 export const messageTypes = ['success', 'info', 'warning', 'error'] as const
 
+export type messageType = typeof messageTypes[number]
+
 export interface MessageConfigContext {
   max?: number
 }
@@ -127,7 +129,7 @@ export interface MessageHandler {
 
 export type MessageFn = {
   (options?: MessageParams, appContext?: null | AppContext): MessageHandler
-  closeAll(): void
+  closeAll(type?: messageType): void
 }
 export type MessageTypedFn = (
   options?: MessageParamsWithType,

packages/components/message/src/method.ts

@@ -24,6 +24,7 @@ import type {
   MessageOptions,
   MessageParams,
   MessageParamsNormalized,
+  messageType,
 } from './message'
 
 let seed = 1
@@ -168,9 +169,11 @@ messageTypes.forEach((type) => {
   }
 })
 
-export function closeAll(): void {
+export function closeAll(type?: messageType): void {
   for (const instance of instances) {
-    instance.handler.close()
+    if (!type || type === instance.props.type) {
+      instance.handler.close()
+    }
   }
 }