44 lines
2.0 KiB
Vue
44 lines
2.0 KiB
Vue
<template>
|
|
<HoverPopup @before-show="status === 'idle' && project && tag && execute()">
|
|
<template #content>
|
|
<Suspense>
|
|
<div v-if="status === 'pending'" class="loading w-[550px] h-[450px]"></div>
|
|
<template v-else-if="!!data">
|
|
<div v-if="data.description" class="p-6 ms-6">
|
|
<ProseH2>{{ data.tag }}</ProseH2>
|
|
<Markdown v-model="data.description"></Markdown>
|
|
</div>
|
|
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
|
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
|
|
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
|
|
</div>
|
|
</template>
|
|
<div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
|
|
<div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
|
|
<div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
|
|
</div>
|
|
</Suspense>
|
|
</template>
|
|
<template>
|
|
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
|
|
<slot></slot>
|
|
</span>
|
|
</template>
|
|
</HoverPopup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { tag } = defineProps({
|
|
tag: {
|
|
type: String,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
const route = useRoute();
|
|
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
|
|
const { data, status, execute } = useFetch(`/api/project/${project.value}/tags/${tag}`, {
|
|
immediate: false,
|
|
key: `file:${project.value}:%${tag}`,
|
|
});
|
|
</script> |