@datagouv/components-next 1.0.2-dev.156 → 1.0.2-dev.157

package/dist/{vue3-xml-viewer.common-C2hQ2aXh.js → vue3-xml-viewer.common-Bx0jB4Yr.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-uIKdSuDJ.js";
+import { g as Ke } from "./main-B0TVT1sb.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.156",
+  "version": "1.0.2-dev.157",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/ResourceAccordion/ImagePreview.client.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="text-xs">
+    <PreviewUnavailable v-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+    </PreviewUnavailable>
+    <img
+      v-else
+      :src="resource.url"
+      alt=""
+      class="block w-full h-auto max-w-[800px]"
+      @error="hasError = true"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const hasError = ref(false)
+
+const fileType = computed(() => props.resource.format?.toUpperCase() ?? t('Fichier'))
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = config.maxImagePreviewByteSize
+  if (!size || !max) return false
+  return size <= max
+})
+</script>

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -224,6 +224,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <!-- Show Datafair embedded preview (koumoul) -->
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
@@ -309,7 +313,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -344,6 +348,7 @@ const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
+const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vue'))
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
@@ -351,11 +356,11 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
-  // For JSON, PDF, and XML files, show preview.
+  // For JSON, PDF, XML, and image files, show preview.
   // We cannot check for CORS issues here because we cannot use an async component here.
   // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
   const format = props.resource.format?.toLowerCase()
-  return format === 'json' || format === 'pdf' || format === 'xml'
+  return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
 })
 
 const hasTabularData = computed(() => checkTabularData(props.resource))

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -141,6 +141,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
                 :resource="resource"
@@ -234,7 +238,7 @@ import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
@@ -253,6 +257,9 @@ const PdfPreview = defineAsyncComponent(() =>
 const XmlPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/XmlPreview.client.vue'),
 )
+const ImagePreview = defineAsyncComponent(() =>
+  import('../ResourceAccordion/ImagePreview.client.vue'),
+)
 const DatafairPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/Datafair.client.vue'),
 )

package/src/composables/useResourceCapabilities.ts

@@ -1,12 +1,12 @@
-import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from './useTranslation'
-import { useHasTabularData } from './useHasTabularData'
-import { detectOgcService, getParsingErrorMessage, getParsingErrorStep } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
-import type { Resource, WfsMetadata } from '../types/resources'
-import type { Dataset, DatasetV2 } from '../types/datasets'
 import { getWfsExportFormats } from '../functions/resourceCapabilities'
+import { detectOgcService, getParsingErrorMessage, getParsingErrorStep, isImagePreviewFormat } from '../functions/resources'
+import type { Dataset, DatasetV2 } from '../types/datasets'
+import type { Resource, WfsMetadata } from '../types/resources'
+import { useHasTabularData } from './useHasTabularData'
+import { useTranslation } from './useTranslation'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
@@ -21,7 +21,7 @@ export function useResourceCapabilities(
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()
-    return format === 'json' || format === 'pdf' || format === 'xml'
+    return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
   })
 
   const hasTabularData = computed(() => {

package/src/config.ts

@@ -12,6 +12,7 @@ export type PluginConfig = {
   datasetQualityGuideUrl?: string
   maxJsonPreviewCharSize?: number // Maximum size of JSON to preview in characters. JSON preview module is partly collapsed by default so we can have a preview for large files.
   maxPdfPreviewByteSize?: number // Maximum size of PDF to preview in bytes
+  maxImagePreviewByteSize?: number // Maximum size of image to preview in bytes
   maxXmlPreviewCharSize?: number // Maximum size of XML to preview in characters. XML preview module can NOT be collapsed by default so we should not have a preview for large files.
   pmtilesViewerBaseUrl?: string | null // Base URL of a pmtiles viewer (ex: https://pmtiles.io/#url=)
   metricsApiUrl?: string

package/src/functions/resources.ts

@@ -167,6 +167,13 @@ export function getResourceFilesize(resource: Resource): null | number {
   return null
 }
 
+const IMAGE_PREVIEW_FORMATS = ['png', 'jpg', 'jpeg', 'jpe', 'gif', 'webp'] as const
+
+export function isImagePreviewFormat(format: string | undefined | null): boolean {
+  if (!format) return false
+  return IMAGE_PREVIEW_FORMATS.includes(format.toLowerCase() as typeof IMAGE_PREVIEW_FORMATS[number])
+}
+
 // Parsing errors are stored as `<step>:<message>`, where `<step>` names the
 // analysis step that failed (e.g. `pmtiles_export`, `geojson_export`).