You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
<tiny-modal>
|
|
<div class="modal">
|
|
<header class="modal__header">
|
|
<span class="modal__title" if={ props.title }>
|
|
{ props.title }
|
|
</span>
|
|
<button type="button" class="modal__button" onclick={ handleClose }>
|
|
❌
|
|
</button>
|
|
</header>
|
|
<div class="modal__body">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
<div class="modal-layer" onclick={ handleClose }></div>
|
|
<script>
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
onMounted() {
|
|
this.root.addEventListener('open', this.__open)
|
|
this.root.addEventListener('close', this.__close)
|
|
},
|
|
|
|
__open() {
|
|
this.$('.modal').classList.add('modal--transition-enter')
|
|
this.$('.modal-layer').classList.add('modal-layer--transition-enter')
|
|
this.update()
|
|
},
|
|
|
|
__close() {
|
|
this.$('.modal').classList.remove('modal--transition-enter')
|
|
this.$('.modal-layer').classList.remove('modal-layer--transition-enter')
|
|
this.update()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @param {object} event
|
|
*
|
|
*/
|
|
handleClose(event) {
|
|
event.preventDefault()
|
|
this.__close()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</tiny-modal> |