From 71e93a1bf81488df8941014e66502cefba5b0577 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: Wed, 16 Jun 2021 13:00:57 +0300
Subject: [PATCH] Fixed #1354 - Responsive Toast

---
 api-generator/components/toast.js |  6 ++++
 src/components/toast/Toast.d.ts   |  1 +
 src/components/toast/Toast.vue    | 51 +++++++++++++++++++++++++++++--
 src/views/toast/ToastDoc.vue      | 13 ++++++++
 4 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/api-generator/components/toast.js b/api-generator/components/toast.js
index 887bca8e9..119cac56d 100644
--- a/api-generator/components/toast.js
+++ b/api-generator/components/toast.js
@@ -22,6 +22,12 @@ const ToastProps = [
         type: "number",
         default: "0",
         description: "Base zIndex value to use in layering."
+    },
+    {
+        name: "breakpoints",
+        type: "object",
+        default: "null",
+        description: "Object literal to define widths per screen size."
     }
 ];
 
diff --git a/src/components/toast/Toast.d.ts b/src/components/toast/Toast.d.ts
index 34e314761..91c1b13d7 100755
--- a/src/components/toast/Toast.d.ts
+++ b/src/components/toast/Toast.d.ts
@@ -3,6 +3,7 @@ interface ToastProps {
     position?: string;
     autoZIndex?: boolean;
     baseZIndex?: number;
+    breakpoints?: {[key: string]: string};
 }
 
 declare class Toast {
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 07b249b3f..90b88f93e 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport to="body">
         <div ref="container" :class="containerClass" v-bind="$attrs">
-            <transition-group name="p-toast-message" tag="div">
+            <transition-group name="p-toast-message" tag="div" @enter="onEnter">
                 <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
             </transition-group>
         </div>
@@ -11,7 +11,7 @@
 <script>
 import ToastEventBus from 'primevue/toasteventbus';
 import ToastMessage from './ToastMessage.vue';
-import {ZIndexUtils} from 'primevue/utils';
+import {ZIndexUtils,UniqueComponentId} from 'primevue/utils';
 
 var messageIdx = 0;
 
@@ -34,6 +34,10 @@ export default {
         baseZIndex: {
             type: Number,
             default: 0
+        },
+        breakpoints: {
+            type: Object,
+            default: null
         }
     },
     data() {
@@ -41,6 +45,7 @@ export default {
             messages: []
         }
     },
+    styleElement: null,
     mounted() {
         ToastEventBus.on('add', this.onAdd);
         ToastEventBus.on('remove-group', this.onRemoveGroup);
@@ -49,8 +54,14 @@ export default {
         if (this.autoZIndex) {
             ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
         }
+
+        if (this.breakpoints) {
+            this.createStyle();
+        }
     },
     beforeUnmount() {
+        this.destroyStyle();
+
         if (this.$refs.container && this.autoZIndex) {
             ZIndexUtils.clear(this.$refs.container);
         }
@@ -90,6 +101,39 @@ export default {
         },
         onRemoveAllGroups() {
             this.messages = [];
+        },
+        onEnter() {
+            this.$refs.container.setAttribute(this.attributeSelector, '');
+        },
+        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: {
@@ -101,6 +145,9 @@ export default {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
+        },
+        attributeSelector() {
+            return UniqueComponentId();
         }
     }
 }
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 1235376ac..1301591c8 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -176,6 +176,13 @@ 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>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>
+&lt;Toast :breakpoints="&#123;'920px': &#123;width: '100%', right: '0', left: '0'&#125;&#125;"&gt;&lt;/Toast&gt;
+
+</code></pre>
+
 		<h5>Properties</h5>
 		<div class="doc-tablewrapper">
 			<table class="doc-table">
@@ -211,6 +218,12 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
                         <td>number</td>
                         <td>0</td>
                         <td>Base zIndex value to use in layering.</td>
+                    </tr>
+                    <tr>
+                        <td>breakpoints</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Object literal to define styles per screen size.</td>
                     </tr>
 				</tbody>
 			</table>