@datagouv/components-next 1.0.2-dev.2 → 1.0.2-dev.200

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

@@ -1,65 +1,31 @@
 <template>
-  <div class="fr-text--xs">
-    <div v-if="jsonData">
-      <JsonViewer
-        :value="jsonData"
-        boxed
-        sort
-        theme="light"
-        :max-depth="3"
-        :expand-depth="2"
-        :indent-width="2"
-      />
-    </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu JSON...") }}
-    </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier JSON trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Ce fichier JSON ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu JSON.") }}</span>
-    </SimpleBanner>
-  </div>
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="JSON"
+    :resource="resource"
+    :max-size="config.maxJsonPreviewCharSize"
+    :load="load"
+  >
+    <JsonViewer
+      :value="data"
+      boxed
+      sort
+      theme="light"
+      :max-depth="3"
+      :expand-depth="2"
+      :indent-width="2"
+    />
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
+import { defineAsyncComponent } from 'vue'
 import { useComponentsConfig } from '../../config'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
 import type { Resource } from '../../types/resources'
-import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 const JsonViewer = defineAsyncComponent(() =>
   import('vue3-json-viewer').then((module) => {
-    // Import CSS when component loads
     import('vue3-json-viewer/dist/vue3-json-viewer.css')
     return module.JsonViewer
   }),
@@ -70,74 +36,10 @@ const props = defineProps<{
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
-
-const jsonData = ref<unknown>(null)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const shouldLoadJson = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Check if maxJsonPreviewCharSize is configured
-  if (!config.maxJsonPreviewCharSize) {
-    // If no limit is set, don't load unknown files
-    return false
-  }
-
-  // Convert maxJsonPreviewCharSize from characters to bytes (rough estimate)
-  // Assuming average 1 byte per character for JSON
-  const maxByteSize = config.maxJsonPreviewCharSize
-
-  return size <= maxByteSize
-})
 
-const fetchJsonData = async () => {
-  // Check if file is too large or size is unknown before making the request
-  if (!shouldLoadJson.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const response = await fetch(props.resource.url)
-    // const response = await fetch('/test-data.json') // For testing locally without CORS issues
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
-    const data = await response.json()
-
-    // Use the original data directly - let the JSON viewer handle large files
-    jsonData.value = data
-  }
-  catch (err) {
-    console.error('Error loading JSON:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-
-    jsonData.value = null
-  }
-  finally {
-    loading.value = false
-  }
+const load = async () => {
+  const response = await fetch(props.resource.url)
+  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+  return response.json()
 }
-
-onMounted(() => {
-  fetchJsonData()
-})
 </script>

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

@@ -1,24 +1,17 @@
 <template>
-  <SimpleBanner
-    v-if="hasError"
-    type="warning"
-    class="flex items-center space-x-2"
-  >
-    <RiErrorWarningLine class="shrink-0 size-6" />
-    <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-  </SimpleBanner>
+  <PreviewUnavailable v-if="hasError">
+    {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
+  </PreviewUnavailable>
   <div
     v-else
-    id="map"
     ref="mapRef"
+    class="size-full"
   />
 </template>
 
 <script setup lang = "ts">
 import { onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
@@ -96,6 +89,7 @@ async function displayMap() {
 
   const attributions = new GeoportalAttribution({
     position: 'bottom-right',
+    collapsed: false,
   })
   map.addControl(attributions)
 
@@ -134,10 +128,3 @@ onMounted(() => {
   displayMap()
 })
 </script>
-
-<style>
-  #map {
-    width: 100%;
-    height: 500px;
-  }
-</style>

package/src/components/ResourceAccordion/Metadata.vue

@@ -4,12 +4,11 @@ import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
-import { getResourceTitleId, getResourceLabel } from '../../functions/resources'
+import { getResourceTitleId, getResourceLabel, getResourceFilesize } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 const props = defineProps<{
   resource: Resource
@@ -20,7 +19,6 @@ const resourceTitleId = computed(() => getResourceTitleId(props.resource))
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 </script>
 
 <template>
@@ -95,11 +93,11 @@ const { formatDate } = useFormatDate()
       >
         <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.created_at) }}
+          <FormattedDate :date="resource.created_at" />
         </DescriptionDetails>
         <DescriptionTerm>{{ t('Modifiée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.last_modified) }}
+          <FormattedDate :date="resource.last_modified" />
         </DescriptionDetails>
       </dl>
       <dl

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

@@ -1,81 +1,68 @@
 <template>
-  <div class="text-xs">
-    <div
-      v-if="pdfReady"
-      ref="containerRef"
-      class="w-full overflow-y-auto max-h-[80vh] space-y-3"
-    >
-      <canvas
-        v-for="page in totalPages"
-        :key="page"
-        :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
-        class="w-full"
-      />
-    </div>
-    <div
-      v-else-if="loading"
-      class="text-gray-medium"
-    >
-      {{ t("Chargement de l'aperçu PDF...") }}
-    </div>
-    <SimpleBanner
-      v-else-if="fileTooLarge"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ fileSizeBytes
-        ? t("Fichier PDF trop volumineux pour l'aperçu. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-        : t("L'aperçu n'est pas disponible car la taille du fichier est inconnue. Pour consulter le fichier complet, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.")
-      }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error === 'network'"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Ce fichier PDF ne peut pas être prévisualisé, peut-être parce qu'il est hébergé sur un autre site qui ne l'autorise pas. Pour le consulter, téléchargez-le en cliquant sur le bouton bleu ou depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-    <SimpleBanner
-      v-else-if="error"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="flex-none size-6" />
-      <span>{{ t("Erreur lors du chargement de l'aperçu PDF. Pour consulter le fichier, téléchargez-le depuis l'onglet Téléchargements.") }}</span>
-    </SimpleBanner>
-  </div>
+  <PreviewWrapper
+    file-type="PDF"
+    :resource="resource"
+    :max-size="config.maxPdfPreviewByteSize"
+    :load="load"
+    :fill="fill"
+    @loaded="renderAllPages"
+  >
+    <!-- While pdfjs downloads/parses the document, show the A4 skeleton instead of a
+         bare "loading" line — it matches the reader framing below seamlessly. -->
+    <template #loading>
+      <PdfSkeleton :fill="fill" />
+    </template>
+
+    <!-- Cap the page width (A4 never needs more) and center on a light backdrop so
+         it reads like a document reader. The width cap applies in both modes since
+         the render width follows the container; `fill` only drives the height
+         (fullscreen fills down, inline stays capped). The scroll container is a plain
+         block (not a flex) so the trailing `pb` is reliably scrollable — flex + overflow
+         drops the end padding of flex items. -->
+    <template #default="{ data }">
+      <div
+        class="overflow-y-auto bg-gray-100"
+        :class="fill ? 'min-h-0 flex-1' : 'max-h-[80vh]'"
+      >
+        <div class="flex justify-center p-4 pb-16">
+          <div
+            ref="containerRef"
+            class="w-[800px] max-w-full space-y-3"
+          >
+            <canvas
+              v-for="page in (data as PDFDocumentProxy).numPages"
+              :key="page"
+              :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
+              class="w-full bg-white shadow-sm"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </PreviewWrapper>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
+import { onBeforeUnmount, ref } from 'vue'
 import * as pdfjsLib from 'pdfjs-dist'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
 import type { PDFDocumentProxy } from 'pdfjs-dist'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewWrapper from './PreviewWrapper.vue'
+import PdfSkeleton from './PdfSkeleton.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
-import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
 const props = defineProps<{
   resource: Resource
+  // Fill the available height (fullscreen) instead of the default capped height.
+  fill?: boolean
 }>()
 
 const config = useComponentsConfig()
-const { t } = useTranslation()
 
 const containerRef = ref<HTMLElement | null>(null)
-const pdfReady = ref(false)
-const loading = ref(false)
-const error = ref<string | null>(null)
-const fileTooLarge = ref(false)
-const totalPages = ref(0)
-
 let pdfDoc: PDFDocumentProxy | null = null
 const canvasRefs = new Map<number, HTMLCanvasElement>()
 
@@ -111,64 +98,22 @@ async function renderPage(pageNum: number) {
   }).promise
 }
 
-const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
-
-const shouldLoadPdf = computed(() => {
-  const size = fileSizeBytes.value
-  if (!size) {
-    // If we don't know the size, don't risk loading a potentially huge file
-    return false
-  }
-
-  // Use maxPdfPreviewByteSize from config, fallback to 10 MB if not set
-  const maxByteSize = config.maxPdfPreviewByteSize ?? 10_000_000
-  return size <= maxByteSize
-})
-
-const loadPdf = async () => {
-  if (!shouldLoadPdf.value) {
-    fileTooLarge.value = true
-    return
-  }
-
-  loading.value = true
-  error.value = null
-
-  try {
-    const loadingTask = pdfjsLib.getDocument({
-      url: props.resource.url,
-      isEvalSupported: false,
-    })
-
-    pdfDoc = await loadingTask.promise
-    totalPages.value = pdfDoc.numPages
-    pdfReady.value = true
-
-    await nextTick()
+const load = async () => {
+  const loadingTask = pdfjsLib.getDocument({
+    url: props.resource.url,
+    isEvalSupported: false,
+  })
+  pdfDoc = await loadingTask.promise
+  return pdfDoc
+}
 
-    for (let i = 1; i <= pdfDoc.numPages; i++) {
-      await renderPage(i)
-    }
-  }
-  catch (err) {
-    console.error('Error loading PDF:', err)
-
-    if (err instanceof TypeError) {
-      error.value = 'network'
-    }
-    else {
-      error.value = 'generic'
-    }
-  }
-  finally {
-    loading.value = false
+const renderAllPages = async () => {
+  if (!pdfDoc) return
+  for (let i = 1; i <= pdfDoc.numPages; i++) {
+    await renderPage(i)
   }
 }
 
-onMounted(() => {
-  loadPdf()
-})
-
 onBeforeUnmount(() => {
   pdfDoc?.destroy()
 })

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,20 +1,15 @@
 <template>
-  <div>
-    <SimpleBanner
-      v-if="hasError"
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+  <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
@@ -40,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>
@@ -53,7 +53,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/vue'
+import { RiExternalLinkFill } from '@remixicon/vue'
 import { Protocol, PMTiles } from 'pmtiles'
 import maplibregl from 'maplibre-gl'
 import DOMPurify from 'dompurify'
@@ -64,7 +64,7 @@ import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import BrandedButton from '../BrandedButton.vue'
 import styleVector from '../../../assets/json/vector.json'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import { getOwnerName, getOwnerPage } from '../../functions/owned'
@@ -109,12 +109,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(