vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1381 - Auto ZIndex Issue with Toast and Sidebar

pull/1478/head
mertsincan 2021-08-25 11:05:14 +03:00
parent 05d0f8c35d
commit 93cc6a8a6e
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/toast/Toast.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs"> <div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" @enter="onEnter"> <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/> <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
</transition-group> </transition-group>
</div> </div>
@ -51,10 +51,6 @@ export default {
ToastEventBus.on('remove-group', this.onRemoveGroup); ToastEventBus.on('remove-group', this.onRemoveGroup);
ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups); ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups);
if (this.autoZIndex) {
ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
}
if (this.breakpoints) { if (this.breakpoints) {
this.createStyle(); this.createStyle();
} }
@ -104,6 +100,15 @@ export default {
}, },
onEnter() { onEnter() {
this.$refs.container.setAttribute(this.attributeSelector, ''); this.$refs.container.setAttribute(this.attributeSelector, '');
if (this.autoZIndex) {
ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
}
},
onLeave() {
if (this.$refs.container && this.autoZIndex) {
ZIndexUtils.clear(this.$refs.container);
}
}, },
createStyle() { createStyle() {
if (!this.styleElement) { if (!this.styleElement) {
@ -115,7 +120,7 @@ export default {
for (let breakpoint in this.breakpoints) { for (let breakpoint in this.breakpoints) {
let breakpointStyle = ''; let breakpointStyle = '';
for (let styleProp in this.breakpoints[breakpoint]) { for (let styleProp in this.breakpoints[breakpoint]) {
breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;'; breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
} }
innerHTML += ` innerHTML += `
@media screen and (max-width: ${breakpoint}) { @media screen and (max-width: ${breakpoint}) {