Fixed #1249 - Feature Request: Templating for Toast component

src/components/toast/Toast.vue

@@ -2,7 +2,7 @@
     <Teleport to="body">
         <div ref="container" :class="containerClass" v-bind="$attrs">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter">
-                <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
+                <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
             </transition-group>
         </div>
     </Teleport>

src/components/toast/ToastMessage.vue

@@ -1,11 +1,14 @@
 <template>
     <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="p-toast-message-content">
-            <span :class="iconClass"></span>
+            <template v-if="!template">
-            <div class="p-toast-message-text">
+                <span :class="iconClass"></span>
-                <span class="p-toast-summary">{{message.summary}}</span>
+                <div class="p-toast-message-text">
-                <div class="p-toast-detail">{{message.detail}}</div>
+                    <span class="p-toast-summary">{{message.summary}}</span>
-            </div>
+                    <div class="p-toast-detail">{{message.detail}}</div>
+                </div>
+            </template>
+            <component v-else :is="template" :message="message"></component>
             <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button" v-ripple>
                 <span class="p-toast-icon-close-icon pi pi-times"></span>
             </button>
@@ -20,7 +23,8 @@ export default {
     name: 'ToastMessage',
     emits: ['close'],
     props: {
-        message: null
+        message: null,
+        template: null
     },
     closeTimeout: null,
     mounted() {

src/views/toast/ToastDemo.vue

@@ -9,6 +9,26 @@
         </div>
 
         <div class="content-section implementation">
+            <Toast position="bottom-center" group="bc">
+                <template #message="slotProps">
+                    <div class="p-d-flex p-flex-column">
+                        <div class="p-text-center">
+                            <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+                            <h4>{{slotProps.message.summary}}</h4>
+                            <p>{{slotProps.message.detail}}</p>
+                        </div>
+                        <div class="p-grid p-fluid">
+                            <div class="p-col-6">
+                                <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
+                            </div>
+                            <div class="p-col-6">
+                                <Button class="p-button-secondary" label="No" @click="onReject"></Button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Toast>
+
             <div class="card">
                 <h5>Severities</h5>
                 <Button label="Success" class="p-button-success" @click="showSuccess" />
@@ -27,6 +47,10 @@
 
                 <h5>Remove All</h5>
                 <Button @click="clear" label="Clear" />
+
+                <h5>Template</h5>
+                <Button @click="showTemplate" label="Confirm" />
+
             </div>
         </div>
 
@@ -73,6 +97,15 @@ export default {
             this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
             this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
         },
+        showTemplate() {
+            this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
+        },
+        onConfirm() {
+            this.$toast.removeGroup('bc');
+        },
+        onReject() {
+            this.$toast.removeGroup('bc');
+        },
         clear() {
             this.$toast.removeAllGroups();
         }

src/views/toast/ToastDoc.vue

@@ -176,6 +176,32 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 		<h5>Clearing Messages</h5>
 		<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
 
+        <h5>Templating</h5>
+        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+<pre v-code><code><template v-pre>
+&lt;Toast position="bottom-center" group="bc"&gt;
+    &lt;template #message="slotProps"&gt;
+        &lt;div class="p-d-flex p-flex-column"&gt;
+            &lt;div class="p-text-center"&gt;
+                &lt;i class="pi pi-exclamation-triangle" style="font-size: 3rem"&gt;&lt;/i&gt;
+                &lt;h4&gt;{{slotProps.message.summary}}&lt;/h4&gt;
+                &lt;p&gt;{{slotProps.message.detail}}&lt;/p&gt;
+            &lt;/div&gt;
+            &lt;div class="p-grid p-fluid"&gt;
+                &lt;div class="p-col-6"&gt;
+                    &lt;Button class="p-button-success" label="Yes" @click="onConfirm" /&gt;
+                &lt;/div&gt;
+                &lt;div class="p-col-6"&gt;
+                    &lt;Button class="p-button-secondary" label="No" @click="onReject" /&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Toast&gt;
+
+</template>
+</code></pre>
+
         <h5>Responsive</h5>
         <p>Toast styling can be adjusted per screen size with the <i>breakpoints</i> option. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.</p>
 <pre v-code><code>
@@ -292,6 +318,26 @@ export default {
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
 
+        <Toast position="bottom-center" group="bc">
+            <template #message="slotProps">
+                <div class="p-d-flex p-flex-column">
+                    <div class="p-text-center">
+                        <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+                        <h4>{{slotProps.message.summary}}</h4>
+                        <p>{{slotProps.message.detail}}</p>
+                    </div>
+                    <div class="p-grid p-fluid">
+                        <div class="p-col-6">
+                            <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
+                        </div>
+                        <div class="p-col-6">
+                            <Button class="p-button-secondary" label="No" @click="onReject"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Toast>
+
         <div class="card">
             <h5>Severities</h5>
             <Button label="Success" class="p-button-success" @click="showSuccess" />
@@ -310,6 +356,9 @@ export default {
 
             <h5>Remove All</h5>
             <Button @click="clear" label="Clear" />
+
+            <h5>Template</h5>
+            <Button @click="showTemplate" label="Confirm" />
         </div>
     </div>
 </template>
@@ -351,6 +400,15 @@ export default {
             this.$toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
             this.$toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
         },
+        showTemplate() {
+            this.$toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
+        },
+        onConfirm() {
+            this.$toast.removeGroup('bc');
+        },
+        onReject() {
+            this.$toast.removeGroup('bc');
+        },
         clear() {
             this.$toast.removeAllGroups();
         }
@@ -382,6 +440,26 @@ button {
         <Toast position="bottom-left" group="bl" />
         <Toast position="bottom-right" group="br" />
 
+        <Toast position="bottom-center" group="bc">
+            <template #message="slotProps">
+                <div class="p-d-flex p-flex-column">
+                    <div class="p-text-center">
+                        <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
+                        <h4>{{slotProps.message.summary}}</h4>
+                        <p>{{slotProps.message.detail}}</p>
+                    </div>
+                    <div class="p-grid p-fluid">
+                        <div class="p-col-6">
+                            <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
+                        </div>
+                        <div class="p-col-6">
+                            <Button class="p-button-secondary" label="No" @click="onReject"></Button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Toast>
+
         <div class="card">
             <h5>Severities</h5>
             <Button label="Success" class="p-button-success" @click="showSuccess" />
@@ -400,6 +478,9 @@ button {
 
             <h5>Remove All</h5>
             <Button @click="clear" label="Clear" />
+
+            <h5>Template</h5>
+            <Button @click="showTemplate" label="Confirm" />
         </div>
     </div>
 </template>
@@ -441,12 +522,21 @@ export default defineComponent({
             toast.add({severity:'info', summary:'Message 2', detail:'Message 2 Content', life: 3000});
             toast.add({severity:'info', summary:'Message 3', detail:'Message 3 Content', life: 3000});
         }
+        const showTemplate = () => {
+            toast.add({severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc'});
+        }
+        const onConfirm = () => {
+            toast.removeGroup('bc');
+        }
+        const onReject = () => {
+            toast.removeGroup('bc');
+        }
         const clear = () => {
             toast.removeAllGroups();
         }
 
         return { showSuccess, showInfo, showWarn, showError, showTopLeft, showBottomLeft, 
-            showBottomRight, showSticky, showMultiple, clear };
+            showBottomRight, showSticky, showMultiple, showTemplate, onConfirm, onReject, clear };
     }
 });
 <\\/script>