Fixed #2989 - Toast: new close and life-end methods

api-generator/components/toast.js

@@ -31,6 +31,31 @@ const ToastProps = [
     }
 ];
 
+const ToastEvents = [
+    {
+        name: 'close',
+        description: 'Callback to invoke when the toast is closed.',
+        arguments: [
+            {
+                name: 'message',
+                type: 'any',
+                description: 'Message of toast.'
+            }
+        ]
+    },
+    {
+        name: 'life-end',
+        description: 'Callback to invoke when the toast timeout is over.',
+        arguments: [
+            {
+                name: 'message',
+                type: 'any',
+                description: 'Message of toast.'
+            }
+        ]
+    }
+];
+
 const ToastSlots = [
     {
         name: 'message',
@@ -43,6 +68,7 @@ module.exports = {
         name: 'Toast',
         description: 'Toast is used to display messages in an overlay.',
         props: ToastProps,
+        events: ToastEvents,
         slots: ToastSlots
     }
 };

components/toast/Toast.d.ts

@@ -144,7 +144,18 @@ export interface ToastSlots {
 /**
  * Defines valid emits in Toast component.
  */
-export interface ToastEmits {}
+export interface ToastEmits {
+    /**
+     * Callback to invoke when the toast is closed.
+     * @param {ToastMessageOptions} message - Toast message.
+     */
+    close(message: ToastMessageOptions): void;
+    /**
+     * Callback to invoke when the toast's timeout is over.
+     * @param {ToastMessageOptions} message - Toast message.
+     */
+    'life-end'(message: ToastMessageOptions): void;
+}
 
 /**
  * **PrimeVue - Toast**

components/toast/Toast.spec.js

@@ -44,8 +44,9 @@ describe('Toast.vue', () => {
     });
 
     it('should close toast', async () => {
-        await wrapper.vm.remove({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
+        await wrapper.vm.remove({ message: { severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 }, type: 'close' });
 
+        expect(wrapper.emitted()['close'][0][0].message).not.toBe({});
         expect(wrapper.find('.p-toast-message').exists()).toBe(false);
     });
 

components/toast/Toast.vue

@@ -31,6 +31,7 @@ var messageIdx = 0;
 export default {
     name: 'Toast',
     inheritAttrs: false,
+    emits: ['close', 'life-end'],
     props: {
         group: {
             type: String,
@@ -111,17 +112,18 @@ export default {
 
             this.messages = [...this.messages, message];
         },
-        remove(message) {
+        remove(params) {
             let index = -1;
 
             for (let i = 0; i < this.messages.length; i++) {
-                if (this.messages[i] === message) {
+                if (this.messages[i] === params.message) {
                     index = i;
                     break;
                 }
             }
 
             this.messages.splice(index, 1);
+            this.$emit(params.type, { message: params.message });
         },
         onAdd(message) {
             if (this.group == message.group) {

components/toast/ToastMessage.vue

@@ -62,7 +62,7 @@ export default {
     mounted() {
         if (this.message.life) {
             this.closeTimeout = setTimeout(() => {
-                this.close();
+                this.close({ message: this.message, type: 'life-end' });
             }, this.message.life);
         }
     },
@@ -70,12 +70,12 @@ export default {
         this.clearCloseTimeout();
     },
     methods: {
-        close() {
-            this.$emit('close', this.message);
+        close(params) {
+            this.$emit('close', params);
         },
         onCloseClick() {
             this.clearCloseTimeout();
-            this.close();
+            this.close({ message: this.message, type: 'close' });
         },
         clearCloseTimeout() {
             if (this.closeTimeout) {