Fixed #9 - Auto z-index layering for Toast

primefaces · Jul 11, 2019 · e749db2 · e749db2
1 parent de04fd8
commit e749db2
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass">
+    <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)"/>
         </transition-group>
@@ -9,15 +9,27 @@
 <script>
 import ToastEventBus from './ToastEventBus';
 import ToastMessage from './ToastMessage';
+import DomHandler from '../utils/DomHandler';
 
 var messageIdx = 0;
 
 export default {
     props: {
-        group: String,
+        group: {
+            type: String,
+            default: null
+        },
         position: {
             type: String,
             default: 'topright'
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -39,6 +51,11 @@ export default {
         ToastEventBus.$on('remove-all-groups', () => {
             this.messages = [];
         });
+
+        this.updateZIndex();
+    },
+    beforeUpdate() {
+        this.updateZIndex();
     },
     methods: {
         add(message) {
@@ -58,6 +75,11 @@ export default {
             }
 
             this.messages.splice(index, 1);
+        },
+        updateZIndex() {
+            if (this.autoZIndex) {
+                this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            }
         }
     },
     components: {

diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
@@ -178,6 +178,18 @@ this.$toast.removeAllGroups();
                                 <td>string</td>
                                 <td>topright</td>
                                 <td>Position of the toast in viewport, valid values are "topright", "topleft", "bottomleft" and "bottomright".</td>
+                            </tr>
+                            <tr>
+                                <td>autoZIndex</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether to automatically manage layering.</td>
+                            </tr>
+                            <tr>
+                                <td>baseZIndex</td>
+                                <td>number</td>
+                                <td>0</td>
+                                <td>Base zIndex value to use in layering.</td>
                             </tr>
 						</tbody>
 					</table>