Refactor #3965 - Refactor on Dialog

components/lib/dialog/BaseDialog.vue

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

components/lib/dialog/Dialog.vue

@@ -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>