Sha256: 61180176022ef500080d6b3cef8a7ab756b22b3b5926a6974c3279ac36a69200
Contents?: true
Size: 1.65 KB
Versions: 17
Compression:
Stored size: 1.65 KB
Contents
<template>
<modal
:isOpen="!!currentModal"
:title="title"
:containerClass="containerClass"
@on-close="handleOutsideClick"
>
<component
v-for="(modal, index) in stack"
:key="`modal-${index}`"
:is="modal.component"
@on-close="handleClose"
v-bind="modal.props"
v-on="modal.listeners"
v-show="index === stack.length - 1"
/>
</modal>
</template>
<script>
import { ModalBus } from '@/plugins/event-bus'
export default {
name: 'ModalRoot',
data() {
return {
stack: [], // NOTE: we stack modals!
}
},
created() {
ModalBus.$on(
'open',
({
component,
title = '',
props = null,
listeners = {},
closeOnClick = true,
}) => {
this.stack.push({
component,
title,
props,
listeners,
closeOnClick,
})
},
)
ModalBus.$on('close', () => this.handleClose())
document.addEventListener('keyup', this.handleKeyup)
},
beforeDestroy() {
document.removeEventListener('keyup', this.handleKeyup)
},
computed: {
currentModal() {
return this.stack.length === 0 ? null : this.stack[this.stack.length - 1]
},
title() {
return this.currentModal?.title
},
containerClass() {
return this.currentModal?.props?.modalClass
},
},
methods: {
handleOutsideClick(force) {
if (!this.closeOnClick && !force) return
this.handleClose()
},
handleKeyup(e) {
if (e.keyCode === 27) this.handleClose()
},
handleClose() {
if (!this.currentModal) return
this.stack.pop()
},
},
}
</script>
Version data entries
17 entries across 17 versions & 1 rubygems