36729f8f61
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="md-preview" appear>
|
|
<div v-if="modelValue" class="fixed inset-0 z-[60] flex items-center justify-center p-4">
|
|
<!-- Backdrop -->
|
|
<div
|
|
class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
|
@click="emit('update:modelValue', false)"
|
|
/>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
class="relative z-10 flex w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5"
|
|
style="max-height: min(80vh, 700px)"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
|
|
<h3 class="text-lg font-semibold text-slate-800">
|
|
{{ title }}
|
|
</h3>
|
|
<button
|
|
class="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
|
|
@click="emit('update:modelValue', false)"
|
|
>
|
|
<Icon name="heroicons:x-mark" class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="overflow-y-auto px-6 py-4">
|
|
<div
|
|
v-if="content"
|
|
class="prose prose-slate max-w-none prose-headings:font-semibold prose-a:text-blue-600 prose-code:rounded prose-code:bg-slate-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 prose-pre:text-slate-100"
|
|
v-html="renderedHtml"
|
|
/>
|
|
<p v-else class="text-sm italic text-slate-400">
|
|
Aucune description
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { marked } from 'marked'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
content: string
|
|
title?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: boolean): void
|
|
}>()
|
|
|
|
const renderedHtml = computed(() => {
|
|
if (!props.content) return ''
|
|
return marked.parse(props.content, { async: false }) as string
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.md-preview-enter-active,
|
|
.md-preview-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.md-preview-enter-from,
|
|
.md-preview-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|