Merge pull request #444 from lochstar/dialog-close

Added 'dismissableMask' and 'closeOnEscape' props to Dialog
primefaces · Aug 27, 2020 · ce5df49 · ce5df49
2 parents 91ebe9d + 9073ce7
commit ce5df49
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
@@ -8,6 +8,8 @@ export declare class Dialog extends Vue {
     contentStyle?: string;
     rtl?: boolean;
     closable?: boolean;
+    dismissableMask?: boolean;
+    closeOnEscape?: boolean;
     showHeader?: boolean;
     baseZIndex?: number;
     autoZIndex?: boolean;
@@ -21,4 +23,4 @@ export declare class Dialog extends Vue {
         header: VNode[];
         footer: VNode[];
     }
-}
+}
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -1,7 +1,7 @@
 <template>
-    <div ref="mask" :class="maskClass" v-if="maskVisible">
+    <div ref="mask" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
         <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
+            <div ref="dialog" :class="dialogClass" :style="dialogStyle" v-if="visible" v-bind="$attrs" v-on="listeners" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" @click.stop>
                 <div class="p-dialog-header" v-if="showHeader">
                     <slot name="header">
                         <span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
@@ -40,10 +40,15 @@ export default {
         contentStyle: null,
         rtl: Boolean,
         maximizable: Boolean,
+        dismissableMask: Boolean,
         closable: {
             type: Boolean,
             default: true
         },
+        closeOnEscape: {
+            type: Boolean,
+            default: true
+        },
         showHeader: {
             type: Boolean,
             default: true
@@ -122,6 +127,11 @@ export default {
                 this.onEnter();
             }
         },
+        onMaskClick() {
+            if (this.modal && this.closable && this.dismissableMask) {
+                this.close();
+            }
+        },
         focus() {
             let focusTarget = this.$refs.dialog.querySelector('[autofocus]');
             if (focusTarget) {
@@ -180,6 +190,8 @@ export default {
                         }
                     }
                 }
+            } else if (event.which === 27 && this.closeOnEscape) {
+                this.close();
             }
         },
         bindDocumentKeydownListener() {

diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
@@ -112,6 +112,18 @@ export default {
                                 <td>null</td>
                                 <td>Defines if background should be blocked when dialog is displayed.</td>
                             </tr>
+                            <tr>
+                                <td>closeOnEscape</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Specifices if pressing escape key should hide the dialog.</td>
+                            </tr>
+                            <tr>
+                                <td>dismissableMask</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Specifices if clicking the modal background should hide the dialog.</td>
+                            </tr>
                             <tr>
                                 <td>position</td>
                                 <td>string</td>