新增 FaHoverCard 组件

Author: hooray

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

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>

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>