vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - Refactor on Dialog

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-07-05 17:31:59 +03:00
parent 18662adebd
commit 3014b22550
2 changed files with 32 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

71
components/lib/dialog/BaseDialog.vue
View file

@ -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() {