feat(Popover): add reference prop

This commit is contained in:
Benjamin Canac
2025-07-01 15:19:35 +02:00
parent 5c573b37b6
commit b00e07f13d
5 changed files with 66 additions and 6 deletions

View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps, HoverCardTriggerProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/popover'
import type { EmitsToProps, ComponentConfig } from '../types/utils'
@@ -27,6 +27,12 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
* @defaultValue true
*/
portal?: boolean | string | HTMLElement
/**
* The reference (or anchor) element that is being referred to for positioning.
*
* If not provided will use the current component as anchor.
*/
reference?: HoverCardTriggerProps['reference']
/**
* When `false`, the popover will not close when clicking outside or pressing escape.
* @defaultValue true
@@ -100,7 +106,7 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
<template>
<Component.Root v-slot="{ open }" v-bind="rootProps">
<Component.Trigger v-if="!!slots.default" as-child :class="props.class">
<Component.Trigger v-if="!!slots.default || !!reference" as-child :reference="reference" :class="props.class">
<slot :open="open" />
</Component.Trigger>

View File

@@ -27,6 +27,11 @@ export interface TooltipProps extends TooltipRootProps {
* @defaultValue true
*/
portal?: boolean | string | HTMLElement
/**
* The reference (or anchor) element that is being referred to for positioning.
*
* If not provided will use the current component as anchor.
*/
reference?: TooltipTriggerProps['reference']
class?: any
ui?: Tooltip['slots']