54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<UTooltip
|
|
:text="definition"
|
|
:ui="{
|
|
background: 'bg-white dark:bg-gray-900',
|
|
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
|
|
rounded: 'rounded-lg',
|
|
shadow: 'shadow-lg',
|
|
base: 'px-3 py-2 text-sm max-w-xs'
|
|
}"
|
|
:popper="{ arrow: true }"
|
|
>
|
|
<template #text>
|
|
<div class="space-y-2">
|
|
<div class="font-medium">{{ term }}</div>
|
|
<div class="text-gray-600">{{ definition }}</div>
|
|
<NuxtLink
|
|
:to="`/glossary#${termId}`"
|
|
class="text-primary-600 hover:text-primary-700 text-xs inline-flex items-center gap-1"
|
|
@click="$emit('glossary-click')"
|
|
>
|
|
<UIcon name="i-heroicons-book-open" class="w-3 h-3" />
|
|
See full definition
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<span
|
|
class="underline decoration-dotted decoration-gray-400 hover:decoration-primary-500 cursor-help"
|
|
:class="{ 'font-medium': emphasis }"
|
|
:tabindex="0"
|
|
:aria-describedby="`tooltip-${termId}`"
|
|
@keydown.enter="$emit('glossary-click')"
|
|
@keydown.space.prevent="$emit('glossary-click')"
|
|
>
|
|
<slot>{{ term }}</slot>
|
|
</span>
|
|
</UTooltip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
term: string
|
|
termId: string
|
|
definition: string
|
|
emphasis?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
emphasis: false
|
|
})
|
|
|
|
defineEmits(['glossary-click'])
|
|
</script>
|