Merge pull request #444 from lochstar/dialog-close
Added 'dismissableMask' and 'closeOnEscape' props to Dialogpull/457/head
commit
ce5df49e68
|
@ -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;
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue