chore: update application configuration and UI components for improved styling and functionality

This commit is contained in:
Jennie Robinson Faber 2025-08-16 08:13:35 +01:00
parent 0af6b17792
commit 37ab8d7bab
54 changed files with 23293 additions and 1666 deletions

View file

@ -1,38 +1,35 @@
<template>
<UTooltip
<UTooltip
:text="definition"
:ui="{
background: 'bg-white dark:bg-gray-900',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
:ui="{
background: 'bg-white dark:bg-neutral-900',
ring: 'ring-1 ring-neutral-200 dark:ring-neutral-800',
rounded: 'rounded-lg',
shadow: 'shadow-lg',
base: 'px-3 py-2 text-sm max-w-xs'
base: 'px-3 py-2 text-sm max-w-xs',
}"
:popper="{ arrow: true }"
>
: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}`"
<div class="text-neutral-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')"
>
@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"
<span
class="underline decoration-dotted decoration-neutral-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')"
>
@keydown.space.prevent="$emit('glossary-click')">
<slot>{{ term }}</slot>
</span>
</UTooltip>
@ -40,15 +37,15 @@
<script setup lang="ts">
interface Props {
term: string
termId: string
definition: string
emphasis?: boolean
term: string;
termId: string;
definition: string;
emphasis?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
emphasis: false
})
emphasis: false,
});
defineEmits(['glossary-click'])
defineEmits(["glossary-click"]);
</script>