7bb8186e43
* chore: Fix self-closing tag issues * Fix merge conflicts Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<button class="z-10 focus:outline-none select-none" @click="toggleMenu">
|
|
<slot name="button" />
|
|
</button>
|
|
|
|
<!-- to close when clicked on space around it-->
|
|
<button
|
|
v-if="isOpen"
|
|
tabindex="-1"
|
|
class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
|
|
@click="toggleMenu"
|
|
/>
|
|
|
|
<!--dropdown menu-->
|
|
<transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
leave-active-class="transition-all duration-750 ease-in"
|
|
enter-class="opacity-0 scale-75"
|
|
enter-to-class="opacity-100 scale-100"
|
|
leave-class="opacity-100 scale-100"
|
|
leave-to-class="opacity-0 scale-75"
|
|
>
|
|
<div
|
|
v-if="isOpen"
|
|
class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
|
|
:class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
|
|
>
|
|
<slot name="content" />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
menuPlacement: {
|
|
type: String,
|
|
default: 'right',
|
|
validator: value => ['right', 'left'].indexOf(value) !== -1,
|
|
},
|
|
open: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
toggleMenu: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
};
|
|
},
|
|
watch: {
|
|
open() {
|
|
this.isOpen = !this.isOpen;
|
|
},
|
|
},
|
|
mounted() {
|
|
document.addEventListener('keydown', this.onEscape);
|
|
},
|
|
beforeDestroy() {
|
|
document.removeEventListener('keydown', this.onEscape);
|
|
},
|
|
methods: {
|
|
onEscape(e) {
|
|
if (e.key === 'Esc' || e.key === 'Escape') {
|
|
this.isOpen = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.menu-content {
|
|
width: max-content;
|
|
}
|
|
</style>
|