From ae5ff8f9738a82ceec9ff6ae6cea470a0f5b91b4 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Tue, 6 May 2025 03:01:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20`FaHoverCard`=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/component.example.ts       |  8 ++++
 src/types/components.d.ts                     |  1 +
 .../FaHoverCard/hover-card/HoverCard.vue      | 15 +++++++
 .../hover-card/HoverCardContent.vue           | 42 +++++++++++++++++++
 .../hover-card/HoverCardTrigger.vue           | 12 ++++++
 .../FaHoverCard/hover-card/index.ts           |  3 ++
 src/ui/components/FaHoverCard/index.vue       | 33 +++++++++++++++
 .../component_built_in_example/hovercard.vue  | 36 ++++++++++++++++
 8 files changed, 150 insertions(+)
 create mode 100644 src/ui/components/FaHoverCard/hover-card/HoverCard.vue
 create mode 100644 src/ui/components/FaHoverCard/hover-card/HoverCardContent.vue
 create mode 100644 src/ui/components/FaHoverCard/hover-card/HoverCardTrigger.vue
 create mode 100644 src/ui/components/FaHoverCard/hover-card/index.ts
 create mode 100644 src/ui/components/FaHoverCard/index.vue
 create mode 100644 src/views/component_built_in_example/hovercard.vue

diff --git a/src/router/modules/component.example.ts b/src/router/modules/component.example.ts
index 9969ad19..c93018ee 100755
--- a/src/router/modules/component.example.ts
+++ b/src/router/modules/component.example.ts
@@ -102,6 +102,14 @@ const routes: RouteRecordRaw = {
             copyright: false,
           },
         },
+        {
+          path: 'hovercard',
+          name: 'componentExampleBuiltInHoverCard',
+          component: () => import('@/views/component_built_in_example/hovercard.vue'),
+          meta: {
+            title: '悬浮卡片',
+          },
+        },
         {
           path: 'input',
           name: 'componentExampleBuiltInInput',
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 4f379420..4a8329a9 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -21,6 +21,7 @@ declare module 'vue' {
     FaDrawer: typeof import('./../ui/components/FaDrawer/index.vue')['default']
     FaDropdown: typeof import('./../ui/components/FaDropdown/index.vue')['default']
     FaFixedActionBar: typeof import('./../ui/components/FaFixedActionBar/index.vue')['default']
+    FaHoverCard: typeof import('./../ui/components/FaHoverCard/index.vue')['default']
     FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
     FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
     FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
diff --git a/src/ui/components/FaHoverCard/hover-card/HoverCard.vue b/src/ui/components/FaHoverCard/hover-card/HoverCard.vue
new file mode 100644
index 00000000..4c017ff4
--- /dev/null
+++ b/src/ui/components/FaHoverCard/hover-card/HoverCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui'
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/src/ui/components/FaHoverCard/hover-card/HoverCardContent.vue b/src/ui/components/FaHoverCard/hover-card/HoverCardContent.vue
new file mode 100644
index 00000000..ba910625
--- /dev/null
+++ b/src/ui/components/FaHoverCard/hover-card/HoverCardContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import {
+  HoverCardContent,
+  HoverCardPortal,
+  useForwardProps,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-2000 min-w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/src/ui/components/FaHoverCard/hover-card/HoverCardTrigger.vue b/src/ui/components/FaHoverCard/hover-card/HoverCardTrigger.vue
new file mode 100644
index 00000000..8ca5e026
--- /dev/null
+++ b/src/ui/components/FaHoverCard/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'reka-ui'
+import { HoverCardTrigger } from 'reka-ui'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/src/ui/components/FaHoverCard/hover-card/index.ts b/src/ui/components/FaHoverCard/hover-card/index.ts
new file mode 100644
index 00000000..9e4ccc2a
--- /dev/null
+++ b/src/ui/components/FaHoverCard/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/src/ui/components/FaHoverCard/index.vue b/src/ui/components/FaHoverCard/index.vue
new file mode 100644
index 00000000..1da23fa2
--- /dev/null
+++ b/src/ui/components/FaHoverCard/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from './hover-card'
+
+defineOptions({
+  name: 'FaHoverCard',
+})
+
+const props = defineProps<{
+  align?: HoverCardContentProps['align']
+  alignOffset?: HoverCardContentProps['alignOffset']
+  side?: HoverCardContentProps['side']
+  sideOffset?: HoverCardContentProps['sideOffset']
+  collisionPadding?: HoverCardContentProps['collisionPadding']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <HoverCard>
+    <HoverCardTrigger as-child>
+      <slot />
+    </HoverCardTrigger>
+    <HoverCardContent :align :align-offset :side :side-offset :collision-padding :class="props.class">
+      <slot name="card" />
+    </HoverCardContent>
+  </HoverCard>
+</template>
diff --git a/src/views/component_built_in_example/hovercard.vue b/src/views/component_built_in_example/hovercard.vue
new file mode 100644
index 00000000..8cf250ad
--- /dev/null
+++ b/src/views/component_built_in_example/hovercard.vue
@@ -0,0 +1,36 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<template>
+  <div>
+    <FaPageHeader title="悬浮卡片" description="FaHoverCard" />
+    <FaPageMain>
+      <FaHoverCard class="min-w-auto">
+        <FaButton variant="link">
+          @hooray
+        </FaButton>
+        <template #card>
+          <div class="flex space-x-4">
+            <FaAvatar shape="circle" src="https://github.com/vuejs.png" />
+            <div class="space-y-1">
+              <h4 class="text-sm font-semibold">
+                @hooray
+              </h4>
+              <p class="text-sm">
+                一个前端开发工程师
+              </p>
+              <div class="flex items-center pt-2">
+                <FaIcon name="i-ci:calendar-days" class="mr-2 h-4 w-4 opacity-70" />
+                <span class="text-xs text-muted-foreground">
+                  2020 年注册
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </FaHoverCard>
+    </FaPageMain>
+  </div>
+</template>