StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update modal code

Browse source
This commit is contained in:
Dane Everitt 2019-05-10 22:50:59 -07:00
parent 2c73991f2b
commit 32db345238
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
8 changed files with 38 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

28
resources/assets/scripts/components/core/Modal.vue
View file

@ -1,13 +1,9 @@
<template>
<transition name="modal">
<div class="modal-mask" v-show="show" v-on:click="close">
<div class="modal-container" @click.stop>
<div v-on:click="close" v-if="dismissable && showCloseIcon">
<Icon name="x"
class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
aria-label="Close modal"
role="button"
/>
<div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
<div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop>
<div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
<Icon name="x" aria-label="Close modal" role="button"/>
</div>
<slot/>
</div>
@ -24,17 +20,19 @@
components: {Icon},
props: {
showCloseIcon: {type: Boolean, default: true},
modalName: {type: String, default: 'modal'},
show: {type: Boolean, default: false},
isVisible: {type: Boolean, default: false},
closeOnEsc: {type: Boolean, default: true},
dismissable: {type: Boolean, default: true},
showCloseIcon: {type: Boolean, default: true},
isFullScreen: {type: Boolean, default: false},
closeOnBackground: {type: Boolean, default: true},
},
mounted: function () {
if (this.$props.dismissable && this.$props.closeOnEsc) {
if (this.$props.closeOnEsc) {
document.addEventListener('keydown', e => {
if (this.show && e.key === 'Escape') {
if (this.isVisible && e.key === 'Escape') {
this.close();
}
})
@ -43,9 +41,11 @@
methods: {
close: function () {
if (this.$props.dismissable) {
this.$emit('close', this.$props.modalName);
if (!this.$props.dismissable) {
return;
}
this.$emit('close', this.$props.modalName);
}
},
});