Popover (气泡卡片)

<template>
  <KunPopover>
    <template #trigger>
      <KunButton variant="bordered">点击打开</KunButton>
    </template>
    <div class="p-3 text-sm">
      <p class="font-medium">弹出框内容</p>
      <p class="text-default-600 mt-1">点击触发器打开，点击外部或按 Esc 关闭。</p>
    </div>
  </KunPopover>
</template>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <KunPopover position="top">
      <template #trigger>
        <KunButton variant="bordered">上 top</KunButton>
      </template>
      <div class="p-3 text-sm">出现在上方</div>
    </KunPopover>
    <KunPopover position="right">
      <template #trigger>
        <KunButton variant="bordered">右 right</KunButton>
      </template>
      <div class="p-3 text-sm">出现在右侧</div>
    </KunPopover>
    <KunPopover position="bottom">
      <template #trigger>
        <KunButton variant="bordered">下 bottom</KunButton>
      </template>
      <div class="p-3 text-sm">出现在下方</div>
    </KunPopover>
    <KunPopover position="left">
      <template #trigger>
        <KunButton variant="bordered">左 left</KunButton>
      </template>
      <div class="p-3 text-sm">出现在左侧</div>
    </KunPopover>
  </div>
</template>

<template>
  <KunPopover position="bottom" :show-arrow="true">
    <template #trigger>
      <KunButton variant="bordered">点击查看箭头</KunButton>
    </template>
    <div class="p-3 text-sm">
      <p class="font-medium">带箭头的弹出框</p>
      <p class="text-default-600 mt-1">箭头指向触发器。</p>
    </div>
  </KunPopover>
</template>

<template>
  <KunPopover position="bottom-start" :show-arrow="true">
    <template #trigger>
      <KunButton color="primary">打开卡片</KunButton>
    </template>
    <div class="flex w-64 flex-col gap-3 p-4">
      <div class="flex items-center gap-3">
        <div
          class="bg-primary flex size-10 items-center justify-center rounded-full font-semibold text-white"
        >
          K
        </div>
        <div>
          <p class="font-semibold">KunUI</p>
          <p class="text-default-600 text-sm">@kungalgame</p>
        </div>
      </div>
      <p class="text-default-600 text-sm">
        打开时焦点会移入面板，关闭时会返回到触发器。
      </p>
      <div class="flex justify-end gap-2">
        <KunButton size="sm" variant="bordered">取消</KunButton>
        <KunButton size="sm" color="primary">关注</KunButton>
      </div>
    </div>
  </KunPopover>
</template>

<script setup lang="ts">
// 导航悬停菜单:一排 KunPopover，trigger="hover" + 共享 group。
// 悬停打开;横向移到兄弟项瞬间切换(跳过 openDelay);下移到面板时靠坐标安全三角
// 不会中途关闭;点链接跳转;键盘/Esc 仍可用;触屏自动退回点击。
const menus = [
  { label: '产品', items: ['可视小说引擎', 'Galgame 资源', 'CG 画廊'] },
  { label: '社区', items: ['论坛', '评测', '同人活动'] },
  { label: '资源', items: ['下载中心', '补丁站', 'API 文档'] },
]
</script>

<template>
  <nav class="flex items-center gap-1">
    <KunPopover
      v-for="m in menus"
      :key="m.label"
      trigger="hover"
      group="docs-nav"
      position="bottom-start"
      inner-class="p-1"
      opaque
    >
      <template #trigger>
        <button
          class="rounded-kun-md hover:bg-default-100 px-3 py-2 text-sm font-medium transition-colors"
        >
          {{ m.label }}
        </button>
      </template>

      <div class="flex w-44 flex-col">
        <KunLink
          v-for="it in m.items"
          :key="it"
          to="#"
          color="default"
          underline="none"
          class-name="rounded-kun-md hover:bg-default-100 px-3 py-2 text-sm"
        >
          {{ it }}
        </KunLink>
      </div>
    </KunPopover>
  </nav>
</template>