usePopover

The overlay trio: click to toggle + outside-click close + floating positioning. Used internally by LxDropdown / LxSelect.

When to use

Building custom trigger-based popovers (menus, picker panels) when the ready-made components aren't enough.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { usePopover, useMounted } from '@luxeanor/ui'

const triggerEl = ref<HTMLElement | null>(null)
const popEl = ref<HTMLElement | null>(null)
const mounted = useMounted()
const { open, toggle, close } = usePopover(triggerEl, popEl)
</script>

<template>
  <button ref="triggerEl" @click="toggle">Open</button>
  <Teleport v-if="mounted && open" to="body">
    <div ref="popEl" class="lx-popover">Popover content</div>
  </Teleport>
</template>

API

usePopover(triggerEl: Ref<HTMLElement | null>, popEl: Ref<HTMLElement | null>)

Return	Type	Description
open	Ref<boolean>	open state
toggle	() => Promise<void>	open/close (positions after opening)
close	() => void	close

Behavior: placement fixed to bottom-start (offset 6 / flip / shift); listens for outside mousedown while open; auto-closes and cleans up on unmount.