From 037183aa25cf48f6bf7d5b6b861311c6e76bcffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 25 Jun 2021 13:10:52 +0300
Subject: [PATCH] Fixed #1249 - Feature Request: Templating for Toast component

---
 src/components/toast/Toast.vue        |  2 +-
 src/components/toast/ToastMessage.vue | 16 +++--
 src/views/toast/ToastDemo.vue         | 33 ++++++++++
 src/views/toast/ToastDoc.vue          | 92 ++++++++++++++++++++++++++-
 4 files changed, 135 insertions(+), 8 deletions(-)

diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 90b88f93e..3025e0c44 100755
--- a/src/components/toast/Toast.vue
+++ b/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>
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index ed1cb245a..b7c3ef8d0 100755
--- a/src/components/toast/ToastMessage.vue
+++ b/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>
-            <div class="p-toast-message-text">
-                <span class="p-toast-summary">{{message.summary}}</span>
-                <div class="p-toast-detail">{{message.detail}}</div>
-            </div>
+            <template v-if="!template">
+                <span :class="iconClass"></span>
+                <div class="p-toast-message-text">
+                    <span class="p-toast-summary">{{message.summary}}</span>
+                    <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() {
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index a5914de86..22cf32bc4 100755
--- a/src/views/toast/ToastDemo.vue
+++ b/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();
         }
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 1301591c8..23f9e12f0 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/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>