Refactor #3965 - Refactor on Dialog
Tuğçe Küçükoğlu
parent
18662adebd
commit
3014b22550
|
|
@ -4,14 +4,6 @@ import { useStyle } from 'primevue/usestyle';
|
|||
|
||||
const styles = `
|
||||
.p-dialog-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -20,8 +12,6 @@ const styles = `
|
|||
}
|
||||
|
||||
.p-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: auto;
|
||||
max-height: 90%;
|
||||
transform: scale(1);
|
||||
|
|
@ -145,44 +135,38 @@ const styles = `
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Position */
|
||||
.p-dialog-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.p-dialog-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.p-dialog-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.p-dialog-topleft {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.p-dialog-topright {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.p-dialog-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.p-dialog-bottomleft {
|
||||
justify-content: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.p-dialog-bottomright {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.p-confirm-dialog .p-dialog-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
/* Position */
|
||||
const inlineStyles = {
|
||||
mask: ({ position }) => ({
|
||||
position: 'fixed',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
display: 'flex',
|
||||
justifyContent: position === 'left' || position === 'topleft' || position === 'bottomleft' ? 'flex-start' : position === 'right' || position === 'topright' || position === 'bottomright' ? 'flex-end' : 'center',
|
||||
alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center'
|
||||
}),
|
||||
root: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
};
|
||||
|
||||
const classes = {
|
||||
mask: ({ props, instance }) => ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': props.modal }, instance.getPositionClass()],
|
||||
mask: ({ props, instance }) => [
|
||||
'p-dialog-mask',
|
||||
{
|
||||
'p-component-overlay p-component-overlay-enter': props.modal
|
||||
},
|
||||
instance.getPositionClass()
|
||||
],
|
||||
root: ({ props, instance }) => [
|
||||
'p-dialog p-component',
|
||||
{
|
||||
|
|
@ -196,9 +180,9 @@ const classes = {
|
|||
headerTitle: 'p-dialog-title',
|
||||
headerIcons: 'p-dialog-header-icons',
|
||||
maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
|
||||
maximizableIcon: ({ props, instance }) => `p-dialog-header-maximize-icon ${instance.maximized ? props.minimizeIcon : props.maximizeIcon}`,
|
||||
maximizableIcon: 'p-dialog-header-maximize-icon',
|
||||
closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
|
||||
closeButtonIcon: ({ props }) => ['p-dialog-header-close-icon', props.closeIcon],
|
||||
closeButtonIcon: 'p-dialog-header-close-icon',
|
||||
content: 'p-dialog-content',
|
||||
footer: 'p-dialog-footer'
|
||||
};
|
||||
|
|
@ -317,6 +301,7 @@ export default {
|
|||
},
|
||||
css: {
|
||||
classes,
|
||||
inlineStyles,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" @click="onMaskClick" v-bind="ptm('mask')">
|
||||
<div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position })" @click="onMaskClick" v-bind="ptm('mask')">
|
||||
<transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||
<div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" :style="sx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
|
||||
<div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
|
||||
<slot name="header">
|
||||
<span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
|
||||
<button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" :class="cx('maximizableButton')" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'" v-bind="ptm('maximizableButton')">
|
||||
<slot name="maximizeicon" :maximized="maximized">
|
||||
<component :is="maximizeIconComponent" :class="cx('maximizableIcon')" v-bind="ptm('maximizableIcon')" />
|
||||
<component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
|
||||
</slot>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
|
||||
>
|
||||
<slot name="closeicon">
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeButtonIcon')" v-bind="ptm('closeButtonIcon')"></component>
|
||||
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue