25 lines
1.3 KiB
Vue
25 lines
1.3 KiB
Vue
<template>
|
|
<HoverCardRoot :open-delay="delay" @update:open="(...args) => emits('open', ...args)">
|
|
<HoverCardTrigger class="inline-block cursor-help outline-none">
|
|
<slot></slot>
|
|
</HoverCardTrigger>
|
|
<HoverCardPortal v-if="!disabled">
|
|
<HoverCardContent :class="$attrs.class" :side="side" :align="align" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
|
|
<slot name="content"></slot>
|
|
<HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
|
|
</HoverCardContent>
|
|
</HoverCardPortal>
|
|
</HoverCardRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { delay = 500, disabled = false, side = 'bottom', align = 'center', triggerKey } = defineProps<{
|
|
delay?: number
|
|
disabled?: boolean
|
|
side?: 'top' | 'right' | 'bottom' | 'left'
|
|
align?: 'start' | 'center' | 'end'
|
|
triggerKey?: string
|
|
}>();
|
|
|
|
const emits = defineEmits(['open']);
|
|
</script> |