mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
44 lines
1009 B
Vue
44 lines
1009 B
Vue
<script setup lang="ts">
|
|
const open = ref(false)
|
|
const anchor = ref({ x: 0, y: 0 })
|
|
|
|
const reference = computed(() => ({
|
|
getBoundingClientRect: () =>
|
|
({
|
|
width: 0,
|
|
height: 0,
|
|
left: anchor.value.x,
|
|
right: anchor.value.x,
|
|
top: anchor.value.y,
|
|
bottom: anchor.value.y,
|
|
...anchor.value
|
|
} as DOMRect)
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<UPopover
|
|
:open="open"
|
|
:reference="reference"
|
|
:content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
|
|
@pointerenter="open = true"
|
|
@pointerleave="open = false"
|
|
@pointermove="(ev) => {
|
|
anchor.x = ev.clientX
|
|
anchor.y = ev.clientY
|
|
}"
|
|
>
|
|
Hover me
|
|
</div>
|
|
|
|
<template #content>
|
|
<div class="p-4">
|
|
{{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
|
|
</div>
|
|
</template>
|
|
</UPopover>
|
|
</template>
|