mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #5612 - OverlayPanel / Popover
This commit is contained in:
tugcekucukoglu
parent
f240b953b4
commit
def5d060c0
16 changed files with 649 additions and 510 deletions
314
components/lib/popover/Popover.vue
Executable file
314
components/lib/popover/Popover.vue
Executable file
|
|
@ -0,0 +1,314 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-popover" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="ptmi('root')">
|
||||
<slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)" :closeCallback="hide" :keydownCallback="(event) => onButtonKeydown(event)"></slot>
|
||||
<template v-else>
|
||||
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</Portal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FocusTrap from 'primevue/focustrap';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import { $dt } from 'primevue/themes';
|
||||
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
|
||||
import BasePopover from './BasePopover.vue';
|
||||
|
||||
export default {
|
||||
name: 'Popover',
|
||||
extends: BasePopover,
|
||||
inheritAttrs: false,
|
||||
emits: ['show', 'hide'],
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dismissable: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (newValue) {
|
||||
this.bindOutsideClickListener();
|
||||
} else {
|
||||
this.unbindOutsideClickListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
selfClick: false,
|
||||
target: null,
|
||||
eventTarget: null,
|
||||
outsideClickListener: null,
|
||||
scrollHandler: null,
|
||||
resizeListener: null,
|
||||
container: null,
|
||||
styleElement: null,
|
||||
overlayEventListener: null,
|
||||
documentKeydownListener: null,
|
||||
beforeUnmount() {
|
||||
if (this.dismissable) {
|
||||
this.unbindOutsideClickListener();
|
||||
}
|
||||
|
||||
if (this.scrollHandler) {
|
||||
this.scrollHandler.destroy();
|
||||
this.scrollHandler = null;
|
||||
}
|
||||
|
||||
this.destroyStyle();
|
||||
this.unbindResizeListener();
|
||||
this.target = null;
|
||||
|
||||
if (this.container && this.autoZIndex) {
|
||||
ZIndexUtils.clear(this.container);
|
||||
}
|
||||
|
||||
if (this.overlayEventListener) {
|
||||
OverlayEventBus.off('overlay-click', this.overlayEventListener);
|
||||
this.overlayEventListener = null;
|
||||
}
|
||||
|
||||
this.container = null;
|
||||
},
|
||||
mounted() {
|
||||
if (this.breakpoints) {
|
||||
this.createStyle();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event, target) {
|
||||
if (this.visible) this.hide();
|
||||
else this.show(event, target);
|
||||
},
|
||||
show(event, target) {
|
||||
this.visible = true;
|
||||
this.eventTarget = event.currentTarget;
|
||||
this.target = target || event.currentTarget;
|
||||
},
|
||||
hide() {
|
||||
this.visible = false;
|
||||
},
|
||||
onContentClick() {
|
||||
this.selfClick = true;
|
||||
},
|
||||
onEnter(el) {
|
||||
this.container.setAttribute(this.attributeSelector, '');
|
||||
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
|
||||
this.alignOverlay();
|
||||
|
||||
if (this.dismissable) {
|
||||
this.bindOutsideClickListener();
|
||||
}
|
||||
|
||||
this.bindScrollListener();
|
||||
this.bindResizeListener();
|
||||
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
|
||||
}
|
||||
|
||||
this.overlayEventListener = (e) => {
|
||||
if (this.container.contains(e.target)) {
|
||||
this.selfClick = true;
|
||||
}
|
||||
};
|
||||
|
||||
this.focus();
|
||||
OverlayEventBus.on('overlay-click', this.overlayEventListener);
|
||||
this.$emit('show');
|
||||
|
||||
if (this.closeOnEscape) {
|
||||
this.bindDocumentKeyDownListener();
|
||||
}
|
||||
},
|
||||
onLeave() {
|
||||
this.unbindOutsideClickListener();
|
||||
this.unbindScrollListener();
|
||||
this.unbindResizeListener();
|
||||
this.unbindDocumentKeyDownListener();
|
||||
OverlayEventBus.off('overlay-click', this.overlayEventListener);
|
||||
this.overlayEventListener = null;
|
||||
this.$emit('hide');
|
||||
},
|
||||
onAfterLeave(el) {
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.clear(el);
|
||||
}
|
||||
},
|
||||
alignOverlay() {
|
||||
DomHandler.absolutePosition(this.container, this.target, false);
|
||||
|
||||
const containerOffset = DomHandler.getOffset(this.container);
|
||||
const targetOffset = DomHandler.getOffset(this.target);
|
||||
let arrowLeft = 0;
|
||||
|
||||
if (containerOffset.left < targetOffset.left) {
|
||||
arrowLeft = targetOffset.left - containerOffset.left;
|
||||
}
|
||||
|
||||
this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
|
||||
|
||||
if (containerOffset.top < targetOffset.top) {
|
||||
this.container.setAttribute('data-p-popover-flipped', 'true');
|
||||
!this.isUnstyled && DomHandler.addClass(this.container, 'p-popover-flipped');
|
||||
}
|
||||
},
|
||||
onContentKeydown(event) {
|
||||
if (event.code === 'Escape' && this.closeOnEscape) {
|
||||
this.hide();
|
||||
DomHandler.focus(this.target);
|
||||
}
|
||||
},
|
||||
onButtonKeydown(event) {
|
||||
switch (event.code) {
|
||||
case 'ArrowDown':
|
||||
case 'ArrowUp':
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
let focusTarget = this.container.querySelector('[autofocus]');
|
||||
|
||||
if (focusTarget) {
|
||||
focusTarget.focus();
|
||||
}
|
||||
},
|
||||
onKeyDown(event) {
|
||||
if (event.code === 'Escape' && this.closeOnEscape) {
|
||||
this.visible = false;
|
||||
}
|
||||
},
|
||||
bindDocumentKeyDownListener() {
|
||||
if (!this.documentKeydownListener) {
|
||||
this.documentKeydownListener = this.onKeyDown.bind(this);
|
||||
window.document.addEventListener('keydown', this.documentKeydownListener);
|
||||
}
|
||||
},
|
||||
unbindDocumentKeyDownListener() {
|
||||
if (this.documentKeydownListener) {
|
||||
window.document.removeEventListener('keydown', this.documentKeydownListener);
|
||||
this.documentKeydownListener = null;
|
||||
}
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener && DomHandler.isClient()) {
|
||||
this.outsideClickListener = (event) => {
|
||||
if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
this.selfClick = false;
|
||||
};
|
||||
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
},
|
||||
unbindOutsideClickListener() {
|
||||
if (this.outsideClickListener) {
|
||||
document.removeEventListener('click', this.outsideClickListener);
|
||||
this.outsideClickListener = null;
|
||||
this.selfClick = false;
|
||||
}
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollHandler) {
|
||||
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
|
||||
if (this.visible) {
|
||||
this.visible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.scrollHandler.bindScrollListener();
|
||||
},
|
||||
unbindScrollListener() {
|
||||
if (this.scrollHandler) {
|
||||
this.scrollHandler.unbindScrollListener();
|
||||
}
|
||||
},
|
||||
bindResizeListener() {
|
||||
if (!this.resizeListener) {
|
||||
this.resizeListener = () => {
|
||||
if (this.visible && !DomHandler.isTouchDevice()) {
|
||||
this.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.resizeListener);
|
||||
}
|
||||
},
|
||||
unbindResizeListener() {
|
||||
if (this.resizeListener) {
|
||||
window.removeEventListener('resize', this.resizeListener);
|
||||
this.resizeListener = null;
|
||||
}
|
||||
},
|
||||
isTargetClicked(event) {
|
||||
return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
|
||||
},
|
||||
containerRef(el) {
|
||||
this.container = el;
|
||||
},
|
||||
createStyle() {
|
||||
if (!this.styleElement && !this.isUnstyled) {
|
||||
this.styleElement = document.createElement('style');
|
||||
this.styleElement.type = 'text/css';
|
||||
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
|
||||
document.head.appendChild(this.styleElement);
|
||||
|
||||
let innerHTML = '';
|
||||
|
||||
for (let breakpoint in this.breakpoints) {
|
||||
innerHTML += `
|
||||
@media screen and (max-width: ${breakpoint}) {
|
||||
.p-popover[${this.attributeSelector}] {
|
||||
width: ${this.breakpoints[breakpoint]} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
this.styleElement.innerHTML = innerHTML;
|
||||
}
|
||||
},
|
||||
destroyStyle() {
|
||||
if (this.styleElement) {
|
||||
document.head.removeChild(this.styleElement);
|
||||
this.styleElement = null;
|
||||
}
|
||||
},
|
||||
onOverlayClick(event) {
|
||||
OverlayEventBus.emit('overlay-click', {
|
||||
originalEvent: event,
|
||||
target: this.target
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
attributeSelector() {
|
||||
return UniqueComponentId();
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
focustrap: FocusTrap,
|
||||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
Portal
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue