opnform/resources/js/components/common/Dropdown.vue

60 lines
1.2 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
<div class="relative">
<slot name="trigger"
:toggle="toggle"
:open="open"
:close="close"
/>
2022-09-20 19:59:52 +00:00
<transition name="fade">
2023-10-14 15:31:30 +00:00
<div v-if="isOpen" v-on-click-outside="close" :class="dropdownClass">
2022-09-20 19:59:52 +00:00
<div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
2023-10-14 15:31:30 +00:00
<slot />
2022-09-20 19:59:52 +00:00
</div>
</div>
</transition>
</div>
</template>
<script>
2023-10-14 15:31:30 +00:00
import { ref } from 'vue'
import { vOnClickOutside } from '@vueuse/components'
2022-09-20 19:59:52 +00:00
export default {
name: 'Dropdown',
directives: {
onClickOutside: vOnClickOutside
},
2022-09-20 19:59:52 +00:00
props: {
dropdownClass: {
type: String,
default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
}
2022-09-20 19:59:52 +00:00
},
2023-10-14 15:31:30 +00:00
setup () {
const isOpen = ref(false)
const open = () => {
isOpen.value = true
2022-09-20 19:59:52 +00:00
}
2023-10-14 15:31:30 +00:00
const close = () => {
isOpen.value = false
}
const toggle = () => {
isOpen.value = !isOpen.value
}
const dropdownRef = ref(null)
return {
isOpen,
open,
close,
toggle,
dropdownRef
2022-09-20 19:59:52 +00:00
}
}
}
</script>