mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Components added. Build issues fixed
This commit is contained in:
Bahadir Sofuoglu
parent
5b66ed1093
commit
18c3721848
344 changed files with 12446 additions and 8758 deletions
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button class="p-overlaypanel-close p-link" @click="hide" v-if="showCloseIcon" :aria-label="ariaCloseLabel" type="button" v-ripple>
|
||||
<button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" @click="hide" :aria-label="ariaCloseLabel" type="button">
|
||||
<span class="p-overlaypanel-close-icon pi pi-times"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
|
||||
import { UniqueComponentId, DomHandler, ConnectedOverlayScrollHandler, ZIndexUtils } from 'primevue/utils';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Ripple from 'primevue/ripple';
|
||||
import Portal from 'primevue/portal';
|
||||
|
|
@ -24,18 +24,18 @@ export default {
|
|||
inheritAttrs: false,
|
||||
emits: ['show', 'hide'],
|
||||
props: {
|
||||
dismissable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCloseIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dismissable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showCloseIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
appendTo: {
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
type: String,
|
||||
default: 'body'
|
||||
},
|
||||
baseZIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
|
|
@ -56,7 +56,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
visible: false
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dismissable: {
|
||||
|
|
@ -88,6 +88,7 @@ export default {
|
|||
this.scrollHandler.destroy();
|
||||
this.scrollHandler = null;
|
||||
}
|
||||
|
||||
this.destroyStyle();
|
||||
this.unbindResizeListener();
|
||||
this.target = null;
|
||||
|
|
@ -110,10 +111,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
toggle(event, target) {
|
||||
if (this.visible)
|
||||
this.hide();
|
||||
else
|
||||
this.show(event, target);
|
||||
if (this.visible) this.hide();
|
||||
else this.show(event, target);
|
||||
},
|
||||
show(event, target) {
|
||||
this.visible = true;
|
||||
|
|
@ -129,6 +128,7 @@ export default {
|
|||
onEnter(el) {
|
||||
this.container.setAttribute(this.attributeSelector, '');
|
||||
this.alignOverlay();
|
||||
|
||||
if (this.dismissable) {
|
||||
this.bindOutsideClickListener();
|
||||
}
|
||||
|
|
@ -172,6 +172,7 @@ export default {
|
|||
if (containerOffset.left < targetOffset.left) {
|
||||
arrowLeft = targetOffset.left - containerOffset.left;
|
||||
}
|
||||
|
||||
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
|
||||
|
||||
if (containerOffset.top < targetOffset.top) {
|
||||
|
|
@ -184,8 +185,10 @@ export default {
|
|||
if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
|
||||
this.visible = false;
|
||||
}
|
||||
|
||||
this.selfClick = false;
|
||||
};
|
||||
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
},
|
||||
|
|
@ -219,6 +222,7 @@ export default {
|
|||
this.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.resizeListener);
|
||||
}
|
||||
},
|
||||
|
|
@ -229,18 +233,19 @@ export default {
|
|||
}
|
||||
},
|
||||
isTargetClicked(event) {
|
||||
return (this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target)));
|
||||
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);
|
||||
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}) {
|
||||
|
|
@ -248,12 +253,12 @@ export default {
|
|||
width: ${this.breakpoints[breakpoint]} !important;
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
}
|
||||
|
||||
this.styleElement.innerHTML = innerHTML;
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
destroyStyle() {
|
||||
if (this.styleElement) {
|
||||
document.head.removeChild(this.styleElement);
|
||||
|
|
@ -269,22 +274,25 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-overlaypanel p-component', {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
return [
|
||||
'p-overlaypanel p-component',
|
||||
{
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
},
|
||||
attributeSelector() {
|
||||
return UniqueComponentId();
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
ripple: Ripple
|
||||
},
|
||||
components: {
|
||||
'Portal': Portal
|
||||
Portal: Portal
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -319,34 +327,36 @@ export default {
|
|||
}
|
||||
|
||||
.p-overlaypanel-enter-active {
|
||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
||||
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 .1s linear;
|
||||
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,
|
||||
.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;
|
||||
border-width: 8px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.p-overlaypanel:before {
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
|
||||
.p-overlaypanel-flipped:after,
|
||||
.p-overlaypanel-flipped:before {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
}
|
||||
|
|
@ -356,6 +366,6 @@ export default {
|
|||
}
|
||||
|
||||
.p-overlaypanel.p-overlaypanel-flipped:before {
|
||||
border-bottom-color: transparent
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue