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

Refactor #3965 - For OverlayPanel

pull/4004/head
Bahadır Sofuoğlu 2023-05-29 23:18:28 +03:00
parent ef409b2200
commit 1cc307043c
5 changed files with 155 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/lib/confirmdialog/BaseConfirmDialog.vue
View File

@ -2,6 +2,7 @@
import BaseComponent from 'primevue/basecomponent';
const classes = {
root: 'p-confirm-dialog',
icon: ({ instance }) => ['p-confirm-dialog-icon', instance.confirmation ? instance.confirmation.icon : null],
message: 'p-confirm-dialog-message',
rejectButton: ({ instance }) => ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null],

4
components/lib/confirmdialog/ConfirmDialog.vue
View File

@ -2,7 +2,7 @@
<CDialog
v-model:visible="visible"
role="alertdialog"
class="p-confirm-dialog"
:class="cx('root')"
:modal="true"
:header="header"
:blockScroll="blockScroll"
@ -16,7 +16,7 @@
>
<template v-if="!$slots.message">
<slot name="icon">
<component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-dialog-icon" :class="cx('icon')" />
<component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
<span v-else-if="confirmation.icon" :class="cx('icon')" v-bind="ptm('icon')" />
</slot>
<span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>

140
components/lib/overlaypanel/BaseOverlayPanel.vue Normal file
View File

@ -0,0 +1,140 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.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;
}
`;
const classes = {
root: ({ instance }) => [
'p-overlaypanel p-component',
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
content: 'p-overlaypanel-content',
closeButton: 'p-overlaypanel-close p-link',
closeIcon: ({ props }) => ['p-overlaypanel-close-icon ', props.closeIcon]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_overlaypanel_style', manual: true });
export default {
name: 'BaseOverlayPanel',
extends: BaseComponent,
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
},
closeIcon: {
type: String,
default: undefined
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

5
components/lib/overlaypanel/OverlayPanel.d.ts vendored
View File

@ -126,6 +126,11 @@ export interface OverlayPanelProps {
* @type {OverlayPanelPassThroughOptions}
*/
pt?: OverlayPanelPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

128
components/lib/overlaypanel/OverlayPanel.vue
View File

@ -1,13 +1,13 @@
<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, ...ptm('root') }">
<div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
<div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
<div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
<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" v-bind="ptm('closeButton')">
<button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
<slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-overlaypanel-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')"></component>
</slot>
</button>
</div>
@ -16,7 +16,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseOverlayPanel from './BaseOverlayPanel';
import FocusTrap from 'primevue/focustrap';
import TimesIcon from 'primevue/icons/times';
import OverlayEventBus from 'primevue/overlayeventbus';
@ -26,39 +26,9 @@ import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUti
export default {
name: 'OverlayPanel',
extends: BaseComponent,
extends: BaseOverlayPanel,
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
},
closeIcon: {
type: String,
default: undefined
}
},
data() {
return {
visible: false
@ -184,7 +154,7 @@ export default {
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
}
},
onContentKeydown(event) {
@ -303,15 +273,6 @@ 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
}
];
},
attributeSelector() {
return UniqueComponentId();
},
@ -329,78 +290,3 @@ export default {
}
};
</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>