Refactor #3965 - Refactor on Dialog

primefaces · Jul 7, 2023 · 265a456 · 265a456
1 parent ecf2336
commit 265a456
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue
@@ -143,15 +143,16 @@ const styles = `
 
 /* Position */
 const inlineStyles = {
-    mask: ({ position }) => ({
+    mask: ({ position, modal }) => ({
         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'
+        alignItems: position === 'top' || position === 'topleft' || position === 'topright' ? 'flex-start' : position === 'bottom' || position === 'bottomleft' || position === 'bottomright' ? 'flex-end' : 'center',
+        pointerEvents: !modal && 'none'
     }),
     root: {
         display: 'flex',

diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position })" @click="onMaskClick" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" :style="sx('mask', true, { position, modal })" @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')" :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')">