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

Migrated OverlayPanel to V3

pull/496/head
Cagatay Civici 2020-09-22 17:58:10 +03:00
parent bf9f2cebaa
commit cacf0609f7
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dialog/Dialog.vue
View File

@ -84,6 +84,8 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
this.unbindDocumentState(); this.unbindDocumentState();
this.container = null;
this.mask = null;
}, },
methods: { methods: {
close() { close() {

29
src/components/overlaypanel/OverlayPanel.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave"> <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave">
<div class="p-overlaypanel p-component" v-if="visible" ref="container"> <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef">
<div class="p-overlaypanel-content"> <div class="p-overlaypanel-content">
<slot></slot> <slot></slot>
</div> </div>
@ -50,6 +50,7 @@ export default {
target: null, target: null,
outsideClickListener: null, outsideClickListener: null,
resizeListener: null, resizeListener: null,
container: null,
beforeUnmount() { beforeUnmount() {
this.restoreAppend(); this.restoreAppend();
this.unbindResizeListener(); this.unbindResizeListener();
@ -57,6 +58,7 @@ export default {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
} }
this.target = null; this.target = null;
this.container = null;
}, },
methods: { methods: {
toggle(event) { toggle(event) {
@ -82,7 +84,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex()); this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
} }
}, },
onLeave() { onLeave() {
@ -90,16 +92,16 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.$refs.container, this.target); DomHandler.absolutePosition(this.container, this.target);
if (DomHandler.getOffset(this.$refs.container).top < DomHandler.getOffset(this.target).top) { if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(this.target).top) {
DomHandler.addClass(this.$refs.container, 'p-overlaypanel-flipped'); DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) { if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
this.visible = false; this.visible = false;
} }
}; };
@ -134,18 +136,21 @@ export default {
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.appendChild(this.$refs.container); document.body.appendChild(this.container);
else else
document.getElementById(this.appendTo).appendChild(this.$refs.container); document.getElementById(this.appendTo).appendChild(this.container);
} }
}, },
restoreAppend() { restoreAppend() {
if (this.$refs.container && this.appendTo) { if (this.container && this.appendTo) {
if (this.appendTo === 'body') if (this.appendTo === 'body')
document.body.removeChild(this.$refs.container); document.body.removeChild(this.container);
else else
document.getElementById(this.appendTo).removeChild(this.$refs.container); document.getElementById(this.appendTo).removeChild(this.container);
} }
},
containerRef(el) {
this.container = el;
} }
}, },
directives: { directives: {
@ -174,7 +179,7 @@ export default {
} }
/* Animation */ /* Animation */
.p-overlaypanel-enter { .p-overlaypanel-enter-from {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
} }