Hover card

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
import { provideHoverCard } from './context'

const props = withDefaults(
  defineProps<{
    /** Time the pointer must rest on the trigger before the card appears, in ms. */
    openDelay?: number
    /** Time the card stays after the pointer leaves, in ms — long enough to move into it. */
    closeDelay?: number
  }>(),
  { openDelay: 400, closeDelay: 200 },
)

const open = defineModel<boolean>('open', { default: false })
let timer: ReturnType<typeof setTimeout> | undefined

function show() {
  clearTimeout(timer)
  if (!open.value) timer = setTimeout(() => (open.value = true), props.openDelay)
}

function hide(immediate = false) {
  clearTimeout(timer)
  if (immediate) open.value = false
  else timer = setTimeout(() => (open.value = false), props.closeDelay)
}

onBeforeUnmount(() => clearTimeout(timer))

provideHoverCard({ open, show, hide, anchor: ref(null) })
</script>

<template>
  <slot :open="open" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useFloating, type Align, type Side } from '../../lib/floating'
import { useLayer } from '../../lib/layer'
import { Portal } from '../../lib/primitive'
import { useHoverCard } from './context'

defineOptions({ inheritAttrs: false })

const props = withDefaults(
  defineProps<{
    side?: Side
    align?: Align
    /** Gap between trigger and card, in px. */
    sideOffset?: number
  }>(),
  { side: 'bottom', align: 'center', sideOffset: 6 },
)

const card = useHoverCard()
const content = ref<HTMLElement | null>(null)

useFloating(card.anchor, content, card.open, props)
useLayer(content, card.open, {
  ignore: () => [card.anchor.value],
  onDismiss: () => card.hide(true),
  // It appears on its own, so it must not pull focus away from wherever the reader is.
  initialFocus: () => false,
  restoreFocus: false,
})
</script>

<template>
  <Portal>
    <Transition name="er-pop">
      <div
        v-if="card.open.value"
        ref="content"
        v-bind="$attrs"
        class="er-floating er-hover-card"
        @pointerenter="card.show()"
        @pointerleave="card.hide()"
        @focusin="card.show()"
        @focusout="card.hide()"
      >
        <slot />
      </div>
    </Transition>
  </Portal>
</template>

<style>
@layer components {
  .er-hover-card {
    width: 18rem;
    padding: 1rem;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    background: var(--er-popover);
    color: var(--er-popover-foreground);
    font-size: 0.875rem;
    box-shadow: var(--er-shadow-md);
  }
}
</style>

<script setup lang="ts">
import type { Component } from 'vue'
import { Primitive, toElement } from '../../lib/primitive'
import { useHoverCard } from './context'

withDefaults(
  defineProps<{
    as?: string | Component
    /** Use the single child (e.g. your own link) as the trigger instead of rendering one. */
    asChild?: boolean
  }>(),
  { as: 'a' },
)

const card = useHoverCard()

function setAnchor(target: unknown) {
  card.anchor.value = toElement(target)
}

function onPointerEnter(event: PointerEvent) {
  // Touch has no hover; a tap should simply follow the link.
  if (event.pointerType !== 'touch') card.show()
}
</script>

<template>
  <!-- The card is a preview of where the link goes, so it is not announced: the link itself says enough. -->
  <Primitive
    :ref="setAnchor"
    :as="as"
    :as-child="asChild"
    :data-state="card.open.value ? 'open' : 'closed'"
    @pointerenter="onPointerEnter"
    @pointerleave="card.hide()"
    @focus="card.show()"
    @blur="card.hide()"
  >
    <slot />
  </Primitive>
</template>

import type { Ref } from 'vue'
import { createContext } from '../../lib/context'

export interface HoverCardContext {
  open: Ref<boolean>
  show: () => void
  hide: (immediate?: boolean) => void
  anchor: Ref<HTMLElement | null>
}

export const [provideHoverCard, useHoverCard] = createContext<HoverCardContext>('HoverCard')

/** Hover card — a preview that appears when a link is hovered or focused, and can be moved into. */
export { default as HoverCard } from './HoverCard.vue'
export { default as HoverCardContent } from './HoverCardContent.vue'
export { default as HoverCardTrigger } from './HoverCardTrigger.vue'