primevue-mirror/src/components/dialog/Dialog.vue

310 lines
8.2 KiB
Vue
Raw Normal View History

2019-01-31 12:15:32 +00:00
<template>
2019-12-09 14:48:23 +00:00
<transition name="p-dialog" @enter="onEnter" @leave="onLeave" @appear="onAppear">
<div ref="container" :class="containerClass" v-if="visible" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
2019-01-31 12:15:32 +00:00
<div class="p-dialog-titlebar" v-if="showHeader">
<slot name="header">
<span :id="ariaLabelledById" class="p-dialog-title" v-if="header" >{{header}}</span>
2019-01-31 12:15:32 +00:00
</slot>
<div class="p-dialog-titlebar-icons">
<button class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" @click="close" v-if="closable" :aria-label="ariaCloseLabel">
2019-01-31 12:15:32 +00:00
<span class="p-dialog-titlebar-close-icon pi pi-times"></span>
</button>
</div>
</div>
<div class="p-dialog-content" :style="contentStyle">
<slot></slot>
</div>
<div class="p-dialog-footer" v-if="footer || $slots.footer">
<slot name="footer">{{footer}}</slot>
</div>
</div>
</transition>
</template>
<script>
import UniqueComponentId from '../utils/UniqueComponentId';
2019-01-31 12:15:32 +00:00
import DomHandler from '../utils/DomHandler';
export default {
props: {
2019-03-29 12:29:39 +00:00
header: null,
footer: null,
2019-01-31 12:15:32 +00:00
visible: Boolean,
modal: Boolean,
2019-03-29 12:29:39 +00:00
contentStyle: null,
2019-01-31 12:15:32 +00:00
rtl: Boolean,
closable: {
type: Boolean,
default: true
},
showHeader: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
autoZIndex: {
type: Boolean,
default: true
},
ariaCloseLabel: {
type: String,
default: 'close'
2019-01-31 15:42:58 +00:00
}
2019-01-31 12:15:32 +00:00
},
mask: null,
documentKeydownListener: null,
beforeDestroy() {
if (this.modal) {
this.disableModality();
}
},
2019-01-31 12:15:32 +00:00
methods: {
2019-01-31 15:42:58 +00:00
close() {
2019-01-31 12:15:32 +00:00
this.$emit('update:visible', false);
},
onEnter() {
this.$emit('show');
if (this.autoZIndex) {
this.$refs.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
}
this.focus();
if (this.modal) {
this.enableModality();
}
},
onLeave() {
this.$emit('hide');
if (this.modal) {
this.disableModality();
}
},
2019-12-09 14:48:23 +00:00
onAppear() {
if (this.visible) {
this.onEnter();
}
},
2019-01-31 12:15:32 +00:00
focus() {
let focusable = DomHandler.findSingle(this.$refs.container, 'input,button');
if (focusable) {
focusable.focus();
}
},
enableModality() {
if (!this.mask) {
this.mask = document.createElement('div');
this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask p-fadein');
document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden');
this.bindDocumentKeydownListener();
2019-01-31 12:15:32 +00:00
}
},
disableModality() {
if (this.mask) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
this.mask = null;
this.unbindDocumentKeydownListener();
}
},
onKeyDown(event) {
if (event.which === 9) {
event.preventDefault();
2019-11-01 08:35:39 +00:00
let focusableElements = DomHandler.getFocusableElements(this.$refs.container);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
focusableElements[0].focus();
}
else {
let focusedIndex = focusableElements.indexOf(document.activeElement);
if (event.shiftKey) {
if (focusedIndex == -1 || focusedIndex === 0)
focusableElements[focusableElements.length - 1].focus();
else
focusableElements[focusedIndex - 1].focus();
}
else {
if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
focusableElements[0].focus();
else
focusableElements[focusedIndex + 1].focus();
}
}
}
}
},
bindDocumentKeydownListener() {
if (!this.documentKeydownListener) {
this.documentKeydownListener = this.onKeyDown.bind(this);
window.document.addEventListener('keydown', this.documentKeydownListener);
}
},
unbindDocumentKeydownListener() {
if (this.documentKeydownListener) {
window.document.removeEventListener('keydown', this.documentKeydownListener);
this.documentKeydownListener = null;
2019-01-31 12:15:32 +00:00
}
}
},
computed: {
containerClass() {
return ['p-dialog p-component', {
'p-dialog-rtl': this.rtl
}];
},
ariaId() {
return UniqueComponentId();
},
ariaLabelledById() {
return this.header != null ? this.ariaId + '_header' : null;
2019-01-31 12:15:32 +00:00
}
}
}
</script>
2019-05-25 21:13:31 +00:00
<style>
.p-dialog {
position: fixed;
padding: 0;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.p-dialog-visible {
display: block;
}
.p-dialog .p-dialog-titlebar {
padding: .5em .75em;
position: relative;
border: 0;
}
.p-dialog .p-dialog-content {
position: relative;
border: 0;
padding: .5em .75em;
background: none;
zoom: 1;
}
.p-dialog-resizable .p-dialog-content {
overflow: auto;
}
.p-dialog .p-resizable-handle {
width: 14px;
height: 14px;
right: 3px;
bottom: 3px;
position: absolute;
font-size: .1px;
display: block;
cursor: se-resize;
}
.p-draggable .p-dialog-titlebar {
cursor: move;
}
.p-dialog .p-dialog-titlebar-icons {
float: right;
}
.p-dialog .p-dialog-titlebar-icons:after {
content: "";
display: table;
clear: both;
}
.p-dialog .p-dialog-titlebar-icon {
text-decoration: none;
padding: .125em;
cursor: pointer;
display: inline-block;
vertical-align: middle;
border: 1px solid transparent;
}
.p-dialog .p-dialog-titlebar-icon span {
display: block;
margin: 0;
}
.p-dialog-footer {
padding: 1em;
text-align: right;
}
.p-dialog-mask {
position: fixed;
width: 100%;
height: 100%;
}
/* ConfirmDialog */
.p-confirmdialog {
width: 30em;
}
.p-confirmdialog.p-dialog .p-dialog-content {
padding: 1em 2em;
}
.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
font-size: 1.5em;
vertical-align: middle;
margin-right: .5em;
}
.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
vertical-align: middle;
}
/* Fluid */
.p-fluid .p-dialog-footer .p-button {
width: auto;
}
/* RTL */
.p-rtl .p-dialog .p-dialog-titlebar-close {
float: left;
}
.p-rtl .p-dialog .p-dialog-footer {
text-align: left;
}
@media screen and (max-width: 40em) {
.p-confirmdialog {
width: 90%;
}
}
/* Animation */
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 75ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.p-dialog-enter,
.p-dialog-leave-to {
opacity: 0;
transform: translateX(-50%) translateY(-50%) scale(0.7);
}
/* Maximize */
.p-dialog-maximized {
-webkit-transition: none;
transition: none;
transform: none;
width: 100vw !important;
top: 0;
left: 0;
}
.p-dialog-maximized .p-dialog-content {
-webkit-transition: height .3s;
transition: height .3s;
}
</style>