mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
396
components/lib/overlaypanel/OverlayPanel.vue
Executable file
396
components/lib/overlaypanel/OverlayPanel.vue
Executable file
|
|
@ -0,0 +1,396 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" v-bind="$attrs">
|
||||
<div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown">
|
||||
<span class="p-overlaypanel-close-icon pi pi-times"></span>
|
||||
</button>
|
||||
</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 { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'OverlayPanel',
|
||||
inheritAttrs: false,
|
||||
emits: ['show', 'hide'],
|
||||
props: {
|
||||
dismissable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCloseIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
autoZIndex: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
breakpoints: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
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,
|
||||
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;
|
||||
DomHandler.focus(this.target);
|
||||
},
|
||||
onContentClick() {
|
||||
this.selfClick = true;
|
||||
},
|
||||
onEnter(el) {
|
||||
this.container.setAttribute(this.attributeSelector, '');
|
||||
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');
|
||||
},
|
||||
onLeave() {
|
||||
this.unbindOutsideClickListener();
|
||||
this.unbindScrollListener();
|
||||
this.unbindResizeListener();
|
||||
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);
|
||||
|
||||
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('--overlayArrowLeft', `${arrowLeft}px`);
|
||||
|
||||
if (containerOffset.top < targetOffset.top) {
|
||||
DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
|
||||
}
|
||||
},
|
||||
onContentKeydown(event) {
|
||||
event.code === 'Escape' && this.hide();
|
||||
},
|
||||
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();
|
||||
}
|
||||
},
|
||||
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.styleElement = document.createElement('style');
|
||||
this.styleElement.type = 'text/css';
|
||||
document.head.appendChild(this.styleElement);
|
||||
|
||||
let innerHTML = '';
|
||||
|
||||
for (let breakpoint in this.breakpoints) {
|
||||
innerHTML += `
|
||||
@media screen and (max-width: ${breakpoint}) {
|
||||
.p-overlaypanel[${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: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-overlaypanel p-component',
|
||||
{
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
},
|
||||
attributeSelector() {
|
||||
return UniqueComponentId();
|
||||
},
|
||||
closeAriaLabel() {
|
||||
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
focustrap: FocusTrap,
|
||||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
Portal: Portal
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-overlaypanel {
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-overlaypanel-flipped {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.p-overlaypanel-close {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
.p-overlaypanel-enter-from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.p-overlaypanel-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-overlaypanel-enter-active {
|
||||
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-overlaypanel-leave-active {
|
||||
transition: opacity 0.1s linear;
|
||||
}
|
||||
|
||||
.p-overlaypanel:after,
|
||||
.p-overlaypanel:before {
|
||||
bottom: 100%;
|
||||
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
|
||||
content: ' ';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.p-overlaypanel:after {
|
||||
border-width: 8px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.p-overlaypanel:before {
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.p-overlaypanel-flipped:after,
|
||||
.p-overlaypanel-flipped:before {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.p-overlaypanel.p-overlaypanel-flipped:after {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.p-overlaypanel.p-overlaypanel-flipped:before {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue