added 'dismissableMask' and 'closeOnEscape' props to Dialog - resolves #372

pull/444/head
lochstar 2020-08-18 15:21:26 +10:00
parent f2b4d1b3f3
commit 9073ce75ab
3 changed files with 29 additions and 3 deletions

View File

@ -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[];
}
}
}

View File

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

View File

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