opnform/client/components/global/Dropdown.vue

50 lines
1.1 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
2023-12-20 12:42:43 +00:00
<div class="relative" ref="dropdown">
2023-12-09 14:47:03 +00:00
<slot name="trigger"
:toggle="toggle"
:open="open"
:close="close"
/>
2023-12-20 12:42:43 +00:00
<collapsible v-model="isOpen" :class="dropdownClass" @click-away="onClickAway">
2023-12-09 14:47:03 +00:00
<div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
2023-12-20 12:42:43 +00:00
<slot/>
2023-12-09 14:47:03 +00:00
</div>
</collapsible>
</div>
</template>
2023-12-20 12:42:43 +00:00
<script setup>
import {ref} from 'vue'
2023-12-09 14:47:03 +00:00
import Collapsible from './transitions/Collapsible.vue'
2023-12-20 12:42:43 +00:00
const props = defineProps({
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'
}
})
const isOpen = ref(false)
const dropdown = ref(null)
const open = (event) => {
isOpen.value = true
}
const close = (event) => {
isOpen.value = false
}
const toggle = (event) => {
isOpen.value = !isOpen.value
}
const onClickAway = (event) => {
// Check that event target isn't children of dropdown
if (dropdown.value && !dropdown.value.contains(event.target)) {
close(event)
2023-12-09 14:47:03 +00:00
}
}
</script>