@datagouv/components-next 1.2.0 → 1.4.0

package/src/components/ResourceAccordion/PdfSkeleton.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- An A4 sheet on the reader backdrop with a few pulsing text lines, matching the
+       real PdfPreview framing (centered, capped ~800px, gray backdrop). -->
+  <div
+    class="overflow-hidden bg-gray-100"
+    :class="fill ? 'min-h-0 flex-1' : 'max-h-[80vh]'"
+    role="status"
+    :aria-label="t('Chargement de l\'aperçu…')"
+  >
+    <div class="flex justify-center p-4">
+      <div class="aspect-[210/297] w-[800px] max-w-full bg-white p-10 shadow-sm">
+        <div class="animate-pulse-placeholder space-y-6">
+          <div class="space-y-3">
+            <div class="h-5 w-1/2 rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-5/6 rounded bg-gray-200" />
+          </div>
+          <div class="space-y-3">
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-11/12 rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-3/4 rounded bg-gray-200" />
+          </div>
+          <div class="space-y-3">
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-5/6 rounded bg-gray-200" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+
+defineProps<{
+  // Fill the available height (fullscreen) instead of the default capped height.
+  fill?: boolean
+}>()
+
+const { t } = useTranslation()
+</script>

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

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div class="flex h-full flex-col">
     <PreviewUnavailable v-if="hasError">
       {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
     </PreviewUnavailable>
     <div
       v-else
-      class="-mx-4"
+      class="flex min-h-0 flex-1 flex-col"
     >
       <div
         v-if="pmtilesViewerUrl"
-        class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4"
+        class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4 shrink-0"
       >
         <div class="fr-grid-row fr-grid-row--middle fr-grid-row--gutters">
           <div
@@ -35,12 +35,17 @@
           </p>
         </div>
       </div>
-      <div
-        ref="containerRef"
-        style="height: 600px;"
-      />
-      <div class="fr-px-5v fr-pt-5v">
-        {{ t("Aperçu de la carte mis à jour le {date}", { date: lastUpdate }) }}
+      <div class="relative min-h-0 flex-1">
+        <div
+          ref="containerRef"
+          class="size-full"
+        />
+        <!-- Freshness caption overlaid inside the map (bottom-left, the corner left
+             free by the navigation/geolocate controls top-right and the attribution
+             bottom-right) so the map itself can use the whole height. -->
+        <div class="pointer-events-none absolute bottom-2 left-2 z-10 rounded bg-white/90 px-2 py-1 text-[12px] leading-4 text-gray-medium shadow-sm">
+          {{ t("Aperçu de la carte mis à jour le {date}", { date: lastUpdate }) }}
+        </div>
       </div>
     </div>
   </div>
@@ -62,7 +67,7 @@ import styleVector from '../../../assets/json/vector.json'
 import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
-import { getOwnerName, getOwnerPage } from '../../functions/owned'
+import { getMapAttribution } from '../../functions/owned'
 
 const props = defineProps<{ resource: Resource, dataset: Dataset | DatasetV2 }>()
 
@@ -89,11 +94,7 @@ const lastUpdate = computed(() => {
 
 const container = useTemplateRef('containerRef')
 
-const attributions = computed(() => {
-  if (!props.dataset.organization && !props.dataset.owner)
-    return ''
-  return `© <a href="${getOwnerPage(props.dataset)}" target="_blank">${getOwnerName(props.dataset)}</a>`
-})
+const attributions = computed(() => getMapAttribution(props.dataset))
 
 async function displayMap() {
   await import('maplibre-gl/dist/maplibre-gl.css')
@@ -104,12 +105,22 @@ async function displayMap() {
   const p = new PMTiles(pmtilesUrl.value)
   protocol.add(p)
 
-  p.getHeader().then((h: { maxZoom: number, centerLon: number, centerLat: number }) => {
+  p.getHeader().then((h: { minLon: number, minLat: number, maxLon: number, maxLat: number, centerZoom: number, centerLon: number, centerLat: number }) => {
+    // Frame the data's bounding box (carried by the archive header) so we land on
+    // the data. Fall back to the header center when the bbox is degenerate — an
+    // archive with a single feature, or bounds left unset (all zeroes).
+    const hasBounds = h.minLon < h.maxLon && h.minLat < h.maxLat
     const map = new maplibregl.Map({
       container: container.value!,
-      style: styleVector as maplibregl.StyleSpecification,
-      zoom: h.maxZoom - 2,
-      center: [h.centerLon, h.centerLat],
+      // JSON import is inferred too loosely (e.g. center as number[]) to match
+      // maplibre's strict StyleSpecification, so cast through unknown.
+      style: styleVector as unknown as maplibregl.StyleSpecification,
+      ...(hasBounds
+        ? {
+            bounds: [[h.minLon, h.minLat], [h.maxLon, h.maxLat]] as [[number, number], [number, number]],
+            fitBoundsOptions: { padding: 24 },
+          }
+        : { center: [h.centerLon, h.centerLat] as [number, number], zoom: h.centerZoom }),
     })
     map.addControl(new maplibregl.NavigationControl())
     map.addControl(

package/src/components/ResourceAccordion/Preview.vue

@@ -90,7 +90,11 @@
         @change="changePage"
       />
       <div class="fr-px-5v">
-        {{ t("Dernière mise à jour de la prévisualisation : {date}", { date: lastUpdate }) }} —
+        <TranslationT keypath="Dernière mise à jour de la prévisualisation : {date}">
+          <template #date>
+            <FormattedDate :date="parsingFinishedAt" />
+          </template>
+        </TranslationT> —
         {{ t('{count} colonnes', columns.length) }} —
         {{ t('Lignes {count}', rowCount) }}
       </div>
@@ -103,7 +107,8 @@ import { computed, onMounted, ref } from 'vue'
 import { RiArrowDownLine, RiArrowUpLine, RiExternalLinkFill } from '@remixicon/vue'
 import Pagination from '../Pagination.vue'
 import { getData, type SortConfig } from '../../functions/tabularApi'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
@@ -116,7 +121,6 @@ import PreviewLoader from './PreviewLoader.vue'
 const props = defineProps<{ resource: Resource }>()
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 
 const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
@@ -196,7 +200,7 @@ function sortByField(col: string) {
   getTableInfos(currentPage.value, sortConfig.value)
 };
 
-const lastUpdate = computed(() => formatDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined))
+const parsingFinishedAt = computed(() => props.resource.extras['analysis:parsing:finished_at'] as string | undefined)
 
 onMounted(() => {
   getTableInfos(currentPage.value)

package/src/components/ResourceAccordion/PreviewWrapper.vue

@@ -1,29 +1,34 @@
 <template>
-  <div class="text-xs">
+  <div
+    class="text-xs"
+    :class="fill ? 'flex min-h-0 flex-1 flex-col' : ''"
+  >
     <slot
       v-if="data !== null"
       :data="data"
     />
-    <div
+    <slot
       v-else-if="loading"
-      class="text-gray-medium"
+      name="loading"
     >
-      {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
-    </div>
+      <div class="text-gray-medium">
+        {{ t("Chargement de l'aperçu {fileType}...", { fileType }) }}
+      </div>
+    </slot>
     <PreviewUnavailable v-else-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.")
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le pour le consulter.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le pour le consulter.")
       }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="corsStatus === 'blocked'">
-      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le depuis l'onglet Téléchargements.", { fileType }) }}
+      {{ t("Ce fichier {fileType} ne peut pas être prévisualisé car il est hébergé sur un site distant qui restreint l'accès (CORS). Téléchargez-le pour le consulter.", { fileType }) }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error === 'network'">
-      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le depuis l'onglet Téléchargements.") }}
+      {{ t("Ce fichier est hébergé sur un site externe qui ne permet pas la prévisualisation. Téléchargez-le pour le consulter.") }}
     </PreviewUnavailable>
     <PreviewUnavailable v-else-if="error">
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.") }}
     </PreviewUnavailable>
   </div>
 </template>
@@ -40,6 +45,8 @@ const props = defineProps<{
   resource: Resource
   maxSize: number | undefined
   load: () => Promise<unknown>
+  // Fill the available height (fullscreen) instead of sizing to content.
+  fill?: boolean
 }>()
 
 const emit = defineEmits<{

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -47,7 +47,7 @@
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
-            :text="resourceExternalUrl"
+            :text="externalUrl"
             class="z-2"
           />
         </div>
@@ -60,7 +60,17 @@
             aria-hidden="true"
             class="size-3 fill-gray-medium"
           />
-          <span class="text-xs mb-0">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
+          <TranslationT
+            class="text-xs mb-0"
+            keypath="Mis à jour {date}"
+          >
+            <template #date>
+              <FormattedDate
+                :date="lastUpdate"
+                format="relative"
+              />
+            </template>
+          </TranslationT>
           <RiSubtractLine
             aria-hidden="true"
             class="size-3 fill-gray-medium"
@@ -197,7 +207,10 @@
             :key="tab.key"
             class="px-4"
           >
-            <div v-if="tab.key === 'map'">
+            <div
+              v-if="tab.key === 'map'"
+              class="-mx-4 h-[600px]"
+            >
               <Pmtiles
                 v-if="hasPmtiles"
                 :resource="resource"
@@ -224,6 +237,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"
@@ -271,7 +288,7 @@
               />
             </div>
             <div
-              v-if="tab.key === 'swagger'"
+              v-if="tab.key === 'api'"
             >
               <div class="fr-mb-4w">
                 <p>{{ t("Cette API est générée automatiquement par {platform} à partir du fichier.", { platform: config.name }) }}</p>
@@ -296,7 +313,8 @@ import { ref, computed, defineAsyncComponent } from 'vue'
 import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
 import OrganizationNameWithCertificate from '../OrganizationNameWithCertificate.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import MarkdownViewer from '../MarkdownViewer.vue'
 import type { CommunityResource, Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
@@ -309,7 +327,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, getResourceFilesize, isImagePreviewFormat, resolveResourceExternalUrl } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -331,6 +349,8 @@ const props = withDefaults(defineProps<{
   isCommunityResource?: boolean
   resource: Resource | CommunityResource
   canEdit?: boolean
+  // Overrides the "Copier le lien" target.
+  resourceExternalUrl?: (resource: Resource | CommunityResource) => string
 }>(), {
   expandedOnMount: false,
   isCommunityResource: false,
@@ -344,18 +364,18 @@ 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()
-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))
@@ -417,7 +437,7 @@ const tabsOptions = computed(() => {
   options.push({ key: 'downloads', label: t('Téléchargements') })
 
   if (hasTabularData.value) {
-    options.push({ key: 'swagger', label: t('Swagger') })
+    options.push({ key: 'api', label: t('API') })
   }
 
   return options
@@ -450,7 +470,7 @@ const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 const unavailable = availabilityChecked && props.resource.extras['check:available'] === false
 const downloadButtonTitle = unavailable ? t(`Le robot de {certifier} n'a pas pu accéder à ce fichier - Télécharger le fichier en {format}`, { certifier: config.name, format: format.value }) : t(`Télécharger le fichier en {format}`, { format: format.value })
 
-const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
+const externalUrl = computed(() => resolveResourceExternalUrl(props.dataset, props.resource, props.resourceExternalUrl))
 
 const resourceContentId = 'resource-' + props.resource.id
 const resourceHeaderId = 'resource-' + props.resource.id + '-header'