Sha256: 153f594c4bdb6b1c7ed50a15c403b793948273a42b3d0c97e15eb02aa4f522ae
Contents?: true
Size: 1.25 KB
Versions: 8
Compression:
Stored size: 1.25 KB
Contents
<template>
<v-popoper
trigger="manual"
:autoHide="true"
:open="open"
:placement="placement"
class="flex"
v-on:auto-hide="close"
>
<div
class="z-10 relative flex items-center focus:outline-none select-none cursor-pointer w-full"
@click.stop.prevent="toggle"
>
<slot name="button"></slot>
</div>
<template slot="popover">
<slot name="content"></slot>
</template>
</v-popoper>
</template>
<script>
import { ModalBus } from '@/plugins/event-bus'
export default {
name: 'UIKitDropdown',
props: {
placement: {
type: String,
default: 'bottom',
validator: (value) =>
['top', 'bottom', 'right', 'left'].indexOf(value) !== -1,
},
},
data() {
return {
open: false,
}
},
mounted() {
ModalBus.$on('open', () => this.close())
document.addEventListener('keydown', this.onEscape)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keydown', this.onEscape)
})
},
methods: {
onEscape(e) {
if (e.key === 'Esc' || e.key === 'Escape') this.close()
},
toggle() {
this.open = !this.open
this.$emit('on-dropdown-toggle', this)
},
close() {
this.open = false
},
},
}
</script>
Version data entries
8 entries across 8 versions & 1 rubygems