forked from platypush/platypush
Close modals and dropdown when ESC is pressed.
This commit is contained in:
parent
e9e59c857a
commit
6e939bbe62
2 changed files with 29 additions and 1 deletions
platypush/backend/http/webapp/src/components
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}" :style="{'--z-index': zIndex}" @click="close">
|
||||
<div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}"
|
||||
:style="{'--z-index': zIndex}" @click="close">
|
||||
<div class="modal" :class="$attrs.class">
|
||||
<div class="content" :style="{'--width': width, '--height': height}" @click="$event.stopPropagation()">
|
||||
<div class="header" v-if="title">
|
||||
|
@ -94,6 +95,13 @@ export default {
|
|||
else
|
||||
this.show()
|
||||
},
|
||||
|
||||
onKeyUp(event) {
|
||||
event.stopPropagation()
|
||||
if (event.key === 'Escape') {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
@ -107,10 +115,15 @@ export default {
|
|||
self.isVisible = visible
|
||||
}
|
||||
|
||||
document.body.addEventListener('keyup', this.onKeyUp)
|
||||
this.$watch(() => this.visible, visibleHndl)
|
||||
this.$watch(() => this.isVisible, visibleHndl)
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.body.removeEventListener('keyup', this.onKeyUp)
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.prevVisible = this.isVisible
|
||||
if (this.isVisible) {
|
||||
|
|
|
@ -94,6 +94,21 @@ export default {
|
|||
this.$emit('click')
|
||||
this.visible ? this.close() : this.open()
|
||||
},
|
||||
|
||||
onKeyUp(event) {
|
||||
event.stopPropagation()
|
||||
if (event.key === 'Escape') {
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.body.addEventListener('keyup', this.onKeyUp)
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
document.body.removeEventListener('keyup', this.onKeyUp)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue