Hover Card

<template>
  <div class="grid h-28 place-items-center">
    <NHoverCard>
      <template #trigger>
        <NAvatar src="https://github.com/vuejs.png" class="cursor-pointer" />
      </template>
      <template #content>
        <div class="flex justify-between space-x-4">
          <NAvatar src="https://github.com/vuejs.png" />
          <div class="space-y-1">
            <h4 class="text-sm font-semibold">
              @vuejs
            </h4>
            <p class="text-sm">
              Progressive JavaScript framework for building modern web interfaces.
            </p>
          </div>
        </div>
      </template>
    </NHoverCard>
  </div>
</template>

<script setup lang="ts">
const [DefineContent, ReuseContent] = createReusableTemplate()
</script>

<template>
  <div class="h-28 flex flex-wrap items-center justify-around gap-4">
    <NHoverCard hover-card="soft-primary">
      <template #trigger>
        <NButton btn="soft-primary">
          soft-primary
        </NButton>
      </template>
      <template #content>
        <ReuseContent />
      </template>
    </NHoverCard>
    <NHoverCard hover-card="outline-green">
      <template #trigger>
        <NButton btn="outline-green">
          outline-green
        </NButton>
      </template>
      <template #content>
        <ReuseContent />
      </template>
    </NHoverCard>
    <NHoverCard hover-card="soft-indigo">
      <template #trigger>
        <NButton btn="soft-indigo">
          soft-indigo
        </NButton>
      </template>
      <template #content>
        <ReuseContent />
      </template>
    </NHoverCard>
  </div>

  <DefineContent>
    <div class="flex justify-between space-x-4">
      <NAvatar src="https://github.com/vuejs.png" />
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">
          @vuejs
        </h4>
        <p class="text-sm">
          Progressive JavaScript framework for building modern web interfaces.
        </p>
      </div>
    </div>
  </DefineContent>
</template>

<template>
  <div class="grid h-28 place-items-center">
    <NHoverCard arrow>
      <template #trigger>
        <NButton btn="link-black">
          @una-ui
        </NButton>
      </template>
      <template #content>
        <div class="flex justify-between space-x-4">
          <NAvatar
            src="https://github.com/una-ui.png"
            label="UNA"
            avatar="~"
          />
          <div class="space-y-1">
            <h4 class="text-sm font-semibold">
              @una-ui
            </h4>
            <p class="text-sm">
              An atomic UI Framework powered by the UnoCSS engine
            </p>
          </div>
        </div>
      </template>
    </NHoverCard>
  </div>
</template>

<template>
  <div class="grid h-28 place-items-center">
    <NHoverCard>
      <NHoverCardTrigger as-child>
        <NButton btn="link-black">
          @nuxt
        </NButton>
      </NHoverCardTrigger>
      <NHoverCardContent class="w-80" side="right">
        <div class="flex justify-between gap-4">
          <NAvatar
            src="https://github.com/nuxt.png"
            alt="Vercel"
            label="VC"
          />
          <div class="flex flex-col gap-1">
            <h4 class="text-sm font-semibold">
              @nuxt
            </h4>
            <p class="text-sm">
              The Intuitive Vue Framework - created and maintained by @nuxt.
            </p>
            <div class="mt-1 flex items-center gap-2">
              <NIcon
                name="i-lucide-calendar"
                class="text-muted"
              />
              <span class="text-xs text-muted">
                Joined December 2021
              </span>
            </div>
          </div>
        </div>
      </NHoverCardContent>
    </NHoverCard>
  </div>
</template>

<script setup lang="ts">
import type { HoverCardRootEmits } from 'reka-ui'
import type { NHoverCardProps } from '../../types'
import { reactivePick } from '@vueuse/core'
import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui'
import HoverCardArrow from './HoverCardArrow.vue'
import HoverCardContent from './HoverCardContent.vue'
import HoverCardTrigger from './HoverCardTrigger.vue'

const props = withDefaults(defineProps<NHoverCardProps>(), {
  hoverCard: 'outline-gray',
})
const emits = defineEmits<HoverCardRootEmits>()

const rootProps = reactivePick(props, [
  'closeDelay',
  'openDelay',
  'defaultOpen',
  'open',
])

const forwarded = useForwardPropsEmits(rootProps, emits)
</script>

<template>
  <HoverCardRoot
    v-slot="{ open }"
    v-bind="forwarded"
  >
    <slot>
      <HoverCardTrigger
        as-child
        :una
        v-bind="_hoverCardTrigger"
      >
        <slot name="trigger" :open />
      </HoverCardTrigger>
      <HoverCardContent v-bind="_hoverCardContent" :hover-card :una>
        <slot name="content" />
        <HoverCardArrow v-if="props.arrow" v-bind="_hoverCardArrow" :hover-card :una />
      </HoverCardContent>
    </slot>
  </HoverCardRoot>
</template>

<script setup lang="ts">
import type { NHoverCardContentProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import {
  HoverCardContent,
  HoverCardPortal,
  useForwardProps,
} from 'reka-ui'
import { cn } from '../../utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NHoverCardContentProps>(), {
  sideOffset: 4,
})
const delegatedProps = reactiveOmit(props, 'una', 'class')

const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <HoverCardPortal>
    <HoverCardContent
      data-slot="hover-card-content"
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
          'hover-card-content',
          props.una?.hoverCardContent,
          props.class,
        )
      "
      :hover-card
    >
      <slot />
    </HoverCardContent>
  </HoverCardPortal>
</template>

<script setup lang="ts">
import type { NHoverCardArrowProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { HoverCardArrow } from 'reka-ui'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NHoverCardArrowProps>(), {
  width: 12,
  height: 6,
})
const forwarded = reactiveOmit(props, 'class', 'una')
</script>

<template>
  <HoverCardArrow
    v-bind="forwarded"
    data-slot="hover-card-arrow"
    :class="cn(
      'hover-card-arrow',
      props.una?.hoverCardArrow,
      props.class,
    )"
    :hover-card
  />
</template>

<script setup lang="ts">
import type { NHoverCardContentProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import {
  HoverCardContent,
  HoverCardPortal,
  useForwardProps,
} from 'reka-ui'
import { cn } from '../../utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NHoverCardContentProps>(), {
  sideOffset: 4,
})
const delegatedProps = reactiveOmit(props, 'una', 'class')

const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <HoverCardPortal>
    <HoverCardContent
      data-slot="hover-card-content"
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
          'hover-card-content',
          props.una?.hoverCardContent,
          props.class,
        )
      "
      :hover-card
    >
      <slot />
    </HoverCardContent>
  </HoverCardPortal>
</template>

<script setup lang="ts">
import type { NHoverCardTriggerProps } from '../../types'
import { reactiveOmit } from '@vueuse/core'
import { HoverCardTrigger, useForwardProps } from 'reka-ui'
import { cn } from '../../utils'

const props = defineProps<NHoverCardTriggerProps>()
const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <HoverCardTrigger
    data-slot="hover-card-trigger"
    v-bind="forwarded"
    :class="cn(
      'hover-card-trigger',
      props.una?.hoverCardTrigger,
      props.class,
    )"
  >
    <slot />
  </HoverCardTrigger>
</template>