local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chrome: some dropdown.vue improvements

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-01 20:20:07 +02:00
parent 117980a8fc
commit 66648be6d5
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
1 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/misc/dropdown.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<div class="dropdown is-right is-active" ref="dropdown"> <div class="dropdown is-right is-active" ref="dropdown">
<div class="dropdown-trigger" @click="open = !open"> <div class="dropdown-trigger" @click="open = !open">
<slot name="trigger"> <slot name="trigger" :close="close">
<icon :icon="triggerIcon" class="icon"/> <icon :icon="triggerIcon" class="icon"/>
</slot> </slot>
</div> </div>
<transition name="fade"> <transition name="fade">
<div class="dropdown-menu" v-if="open"> <div class="dropdown-menu" v-if="open">
<div class="dropdown-content"> <div class="dropdown-content">
<slot></slot> <slot :close="close"></slot>
</div> </div>
</div> </div>
</transition> </transition>
@ -26,10 +26,10 @@ export default {
} }
}, },
mounted() { mounted() {
document.addEventListener('click', this.hide) document.addEventListener('click', this.handleClickOutside)
}, },
beforeUnmount() { beforeUnmount() {
document.removeEventListener('click', this.hide) document.removeEventListener('click', this.handleClickOutside)
}, },
props: { props: {
triggerIcon: { triggerIcon: {
@ -39,13 +39,20 @@ export default {
}, },
emits: ['close'], emits: ['close'],
methods: { methods: {
hide(e) { close() {
if (this.open) { this.open = false
},
toggleOpen() {
this.open = !this.open
},
handleClickOutside(e) {
if (!this.open) {
return
}
closeWhenClickedOutside(e, this.$refs.dropdown, () => { closeWhenClickedOutside(e, this.$refs.dropdown, () => {
this.open = false this.open = false
this.$emit('close', e) this.$emit('close', e)
}) })
}
}, },
}, },
} }