feat: 新增 FaHoverCard 组件

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']

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>

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>

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>

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'

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>