From 9073ce75abfcee9a04a6998b5c2484cd7966a79f Mon Sep 17 00:00:00 2001
From: lochstar <lochlan@gmail.com>
Date: Tue, 18 Aug 2020 15:21:26 +1000
Subject: [PATCH] added 'dismissableMask' and 'closeOnEscape' props to Dialog -
 resolves #372

---
 src/components/dialog/Dialog.d.ts |  4 +++-
 src/components/dialog/Dialog.vue  | 16 ++++++++++++++--
 src/views/dialog/DialogDoc.vue    | 12 ++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
index 82d7b7601..1e708c234 100755
--- 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[];
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 29bdc4934..457b9343c 100755
--- 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
index 6522f4a6e..4f56e65b8 100755
--- 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>