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

---
 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 +++++++++++++++
 6 files changed, 106 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

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index e4cff9cb..e387d372 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>