79 lines
2.5 KiB
Vue
79 lines
2.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="documents.length"
|
|
class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
|
|
>
|
|
<h5 class="font-medium text-base-content">Documents du produit</h5>
|
|
<div
|
|
v-for="document in documents"
|
|
:key="document.id || document.path || document.name"
|
|
class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
|
|
>
|
|
<img
|
|
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
|
:src="document.fileUrl || document.path"
|
|
class="h-full w-full object-cover"
|
|
:alt="`Aperçu de ${document.name}`"
|
|
>
|
|
<iframe
|
|
v-else-if="shouldInlinePdf(document)"
|
|
:src="documentPreviewSrc(document)"
|
|
class="h-full w-full border-0 bg-white"
|
|
title="Aperçu PDF"
|
|
/>
|
|
<component
|
|
v-else
|
|
:is="documentIcon(document).component"
|
|
class="h-5 w-5"
|
|
:class="documentIcon(document).colorClass"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-base-content">
|
|
{{ document.name }}
|
|
</div>
|
|
<div class="text-xs text-base-content/70">
|
|
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-xs"
|
|
:disabled="!canPreviewDocument(document)"
|
|
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
|
@click="$emit('preview', document)"
|
|
>
|
|
Consulter
|
|
</button>
|
|
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
|
Télécharger
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
|
|
import {
|
|
formatSize,
|
|
shouldInlinePdf,
|
|
documentPreviewSrc,
|
|
documentIcon,
|
|
downloadDocument,
|
|
} from '~/shared/utils/documentDisplayUtils'
|
|
|
|
defineProps({
|
|
documents: { type: Array, required: true },
|
|
})
|
|
|
|
defineEmits(['preview'])
|
|
</script>
|