HoverCard 悬停卡片

<script setup lang="ts">
  import { HoverCard, Link, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <HoverCard>
    <Link href="#">Reka UI</Link>
    <template #content>
      <Stack gap="xs" class="w-64">
        <Text weight="medium">Reka UI</Text>
        <Text tone="muted" size="sm">
          一套无样式、可访问的 Vue 组件基础，本库的大部分交互件建在它上面。
        </Text>
      </Stack>
    </template>
  </HoverCard>
</template>

<script setup lang="ts">
  import { HoverCard, Inline, Link, Text } from '@hina-ui/vue'

  const sides = ['top', 'right', 'bottom', 'left'] as const
  const names = { top: '上方', right: '右侧', bottom: '下方', left: '左侧' }
</script>

<template>
  <Inline gap="lg">
    <HoverCard v-for="side in sides" :key="side" :side="side">
      <Link href="#">{{ names[side] }}</Link>
      <template #content>
        <Text size="sm">从{{ names[side] }}浮出的卡片。</Text>
      </template>
    </HoverCard>
  </Inline>
</template>

<script setup lang="ts">
  import { HoverCard, Inline, Link, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="lg">
    <HoverCard :open-delay="0" :close-delay="0">
      <Link href="#">立即浮出</Link>
      <template #content>
        <Text size="sm">没有延时，指针一到就出现。</Text>
      </template>
    </HoverCard>
    <HoverCard :open-delay="800" :close-delay="400">
      <Link href="#">停留久一点</Link>
      <template #content>
        <Text size="sm">停留 800 毫秒才出现，移开 400 毫秒后收回。</Text>
      </template>
    </HoverCard>
  </Inline>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, HoverCard, Inline, Link, Text } from '@hina-ui/vue'

  const open = ref(false)
</script>

<template>
  <Inline gap="lg" align="center">
    <Button variant="outline" tone="neutral" :disabled="open" @click="open = true">打开卡片</Button>
    <HoverCard v-model:open="open">
      <Link href="#">查看预览</Link>
      <template #content>
        <Text size="sm">卡片由外部打开；指针移开、点击外部或者按 Esc 都会收回。</Text>
      </template>
    </HoverCard>
    <Text tone="muted" size="sm">{{ open ? '已打开' : '已收回' }}</Text>
  </Inline>
</template>

<script setup lang="ts">
  import { ref, shallowRef } from 'vue'
  import { Button, HoverCard, Inline, Stack, Text } from '@hina-ui/vue'

  const open = ref(false)
  const anchor = shallowRef<HTMLElement | null>(null)
  const current = ref(1)

  function show(event: PointerEvent | FocusEvent, index: number) {
    const target = event.currentTarget as HTMLElement
    if ('pointerType' in event ? event.pointerType === 'touch' : !target.matches(':focus-visible'))
      return
    anchor.value = target
    current.value = index
    open.value = true
  }
</script>

<template>
  <Inline>
    <Button
      v-for="index in 3"
      :key="index"
      variant="outline"
      tone="neutral"
      @pointerenter="show($event, index)"
      @focus="show($event, index)"
    >
      锚点 {{ index }}
    </Button>
    <HoverCard v-model:open="open" :anchor="anchor">
      <template #content>
        <Stack gap="xs" class="w-56">
          <Text weight="medium">锚点 {{ current }}</Text>
          <Text tone="muted" size="sm">同一个卡片随当前锚点切换位置与内容。</Text>
        </Stack>
      </template>
    </HoverCard>
  </Inline>
</template>

<script setup lang="ts">
  import { ref, shallowRef, watch } from 'vue'
  import { useRafFn } from '@vueuse/core'
  import {
    Button,
    ScrollArea,
    Inline,
    Stack,
    Text,
    HoverCard,
    type OverlayAnchor,
  } from '@hina-ui/vue'

  const open = ref(false)
  const surface = ref<InstanceType<typeof Stack>>()
  const anchor = shallowRef<OverlayAnchor | null>(null)
  const x = ref(80)
  const { pause, resume } = useRafFn(
    ({ delta }) => {
      x.value = 80 + ((x.value - 80 + delta / 35) % 120)
    },
    { immediate: false },
  )
  watch(open, value => (value ? resume() : pause()))

  function show() {
    const element = surface.value?.$el as HTMLElement | undefined
    if (!element) return
    anchor.value = {
      contextElement: element,
      getBoundingClientRect: () => {
        const rect = element.getBoundingClientRect()
        return new DOMRect(rect.left + x.value, rect.top + 100, 2, 20)
      },
    }
    open.value = true
  }
</script>

<template>
  <Stack class="w-full">
    <Inline>
      <Button variant="outline" tone="neutral" @click="show">打开</Button>
      <Text size="sm" tone="muted">向下滚动可观察定位变化。</Text>
    </Inline>
    <ScrollArea class="h-64 rounded-lg border border-line bg-inset">
      <Stack ref="surface" class="relative h-128 shrink-0">
        <Text
          as="span"
          aria-hidden="true"
          class="absolute top-25 h-5 w-0.5 bg-accent"
          :style="{ left: `${x}px` }"
        />
      </Stack>
    </ScrollArea>
    <HoverCard v-model:open="open" :anchor="anchor" update-position-strategy="always" align="start">
      <template #content>
        <Text size="sm">移动坐标</Text>
      </template>
    </HoverCard>
  </Stack>
</template>

<script setup lang="ts">
  import { ref, shallowRef } from 'vue'
  import { Button, HoverCard, Inline, Stack, Text } from '@hina-ui/vue'

  const open = ref(false)
  const anchor = shallowRef<HTMLElement | null>(null)
  const current = ref(1)
  const moving = ref(false)

  function show(event: PointerEvent | FocusEvent, index: number) {
    const target = event.currentTarget as HTMLElement
    if ('pointerType' in event ? event.pointerType === 'touch' : !target.matches(':focus-visible'))
      return
    if (!open.value) moving.value = false
    else if (anchor.value !== target) moving.value = true
    anchor.value = target
    current.value = index
    open.value = true
  }
</script>

<template>
  <Inline>
    <Button
      v-for="index in 3"
      :key="index"
      variant="outline"
      tone="neutral"
      @pointerenter="show($event, index)"
      @focus="show($event, index)"
    >
      锚点 {{ index }}
    </Button>
    <HoverCard
      v-model:open="open"
      :anchor="anchor"
      :positioner-class="
        open && moving ? 'hn-transition-base motion-reduce:transition-none' : undefined
      "
    >
      <template #content>
        <Stack gap="xs" class="w-56">
          <Text weight="medium">锚点 {{ current }}</Text>
          <Text tone="muted" size="sm">同一个卡片平滑移动到当前锚点。</Text>
        </Stack>
      </template>
    </HoverCard>
  </Inline>
</template>