36b10bffae
frappe-ui popover doesn't work because if there is another popover inside popover if we click on second one the first gets closed there is not nested popover support
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<Popover v-slot="{ open }">
|
|
<PopoverButton
|
|
as="div"
|
|
ref="reference"
|
|
@click="updatePosition"
|
|
@focusin="updatePosition"
|
|
@keydown="updatePosition"
|
|
v-slot="{ open }"
|
|
>
|
|
<slot name="target" v-bind="{ open }" />
|
|
</PopoverButton>
|
|
<div v-show="open">
|
|
<PopoverPanel
|
|
v-slot="{ open, close }"
|
|
ref="popover"
|
|
static
|
|
class="z-[100]"
|
|
>
|
|
<slot name="body" v-bind="{ open, close }" />
|
|
</PopoverPanel>
|
|
</div>
|
|
</Popover>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
|
|
import { createPopper } from '@popperjs/core'
|
|
import { nextTick, ref, onBeforeUnmount } from 'vue'
|
|
|
|
const props = defineProps({
|
|
placement: {
|
|
type: String,
|
|
default: 'bottom-start',
|
|
},
|
|
})
|
|
|
|
const reference = ref(null)
|
|
const popover = ref(null)
|
|
|
|
let popper = ref(null)
|
|
|
|
function setupPopper() {
|
|
if (!popper.value) {
|
|
popper.value = createPopper(reference.value.el, popover.value.el, {
|
|
placement: props.placement,
|
|
})
|
|
} else {
|
|
popper.value.update()
|
|
}
|
|
}
|
|
|
|
function updatePosition() {
|
|
nextTick(() => setupPopper())
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
popper.value?.destroy()
|
|
})
|
|
</script>
|