Fixed #1421 - Templating for Toast component

primefaces · Aug 6, 2021 · b4d741c · b4d741c
1 parent 5b5d635
commit b4d741c
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 7 deletions.
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass">
         <transition-group name="p-toast-message" tag="div">
-            <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" :templates="$scopedSlots" @close="remove($event)"/>
         </transition-group>
     </div>
 </template>
@@ -53,10 +53,17 @@ export default {
         });
 
         this.updateZIndex();
+
+        if (this.breakpoints) {
+            this.createStyle();
+        }
     },
     beforeUpdate() {
         this.updateZIndex();
     },
+    beforeDestroy() {
+        this.destroyStyle();
+    },
     methods: {
         add(message) {
             if (message.id == null) {
@@ -80,6 +87,34 @@ export default {
             if (this.autoZIndex) {
                 this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
+        },
+        createStyle() {
+            if (!this.styleElement) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
+                let innerHTML = '';
+                for (let breakpoint in this.breakpoints) {
+                    let breakpointStyle = '';
+                    for (let styleProp in this.breakpoints[breakpoint]) {
+                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
+                    }
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            .p-toast[${this.attributeSelector}] {
+                                ${breakpointStyle}
+                            }
+                        }
+                    `;
+                }
+                this.styleElement.innerHTML = innerHTML;
+            }
+        },
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
         }
     },
     components: {

diff --git 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" :class="message.contentStyleClass">
-            <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>
+            <ToastMessageTemplate v-if="templates['message']" :message="message" :template="templates['message']" />
+            <template v-else>
+                <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>
             <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>
@@ -16,9 +19,31 @@
 <script>
 import Ripple from '../ripple/Ripple';
 
+const ToastMessageTemplate = {
+    functional: true,
+    props: {
+        message: {
+            type: null,
+            default: null
+        },
+        template: {
+            type: null,
+            default: null
+        }
+    },
+    render(createElement, context) {
+        const content = context.props.template({
+            'message': context.props.message
+        });
+
+        return [content];
+    }
+};
+
 export default {
     props: {
-        message: null
+        message: null,
+        templates: null
     },
     closeTimeout: null,
     mounted() {
@@ -64,6 +89,9 @@ export default {
             }];
         }
     },
+    components: {
+        'ToastMessageTemplate': ToastMessageTemplate
+    },
     directives: {
         'ripple': Ripple
     }

diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
@@ -8,6 +8,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" />
@@ -26,6 +46,9 @@
 
                 <h5>Remove All</h5>
                 <Button @click="clear" label="Clear" />
+
+                <h5>Template</h5>
+                <Button @click="showTemplate" label="Confirm" />
             </div>
         </div>
 
@@ -72,6 +95,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
@@ -169,6 +169,32 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 				<p><i>removeGroup(group)</i> clears the messages for a specific Toast whereas <i>removeAllGroups()</i> method clears all messages.</p>
 <CodeHighlight lang="js">
 this.$toast.removeAllGroups();
+</CodeHighlight>
+
+                <h5>Templating</h5>
+                <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+<CodeHighlight>
+<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>
 </CodeHighlight>
 
 				<h5>Properties</h5>