@datagouv/components-next 1.0.2-dev.173 → 1.0.2-dev.174

package/dist/{vue3-xml-viewer.common-BnexQtzg.js → vue3-xml-viewer.common-PTUJZpH4.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-QOs57DKh.js";
+import { g as Ke } from "./main-I9G-L-lg.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.173",
+  "version": "1.0.2-dev.174",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/AppLink.vue

@@ -3,6 +3,7 @@
     :is="config?.appLink"
     v-if="config.appLink"
     :to
+    :replace
   >
     <slot />
   </component>
@@ -18,6 +19,7 @@
   <RouterLink
     v-else
     :to
+    :replace
   ><slot /></RouterLink>
 </template>
 
@@ -33,6 +35,7 @@ const { locale } = useTranslation()
 
 const props = defineProps<{
   to: string | RouteLocationRaw | null | undefined
+  replace?: boolean
 }>()
 
 const isExternal = computed(() => {

package/src/components/CopyButton.vue

@@ -17,7 +17,7 @@
       />
       <span
         class="copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ copiedLabel }}</span>
     </span>
     <span
@@ -32,7 +32,7 @@
       />
       <span
         class="copy-link copy-label"
-        :class="{ 'sr-only': hideLabel }"
+        :class="{ 'sr-only': hideLabel || iconOnly }"
       >{{ label }}</span>
     </span>
   </button>
@@ -49,9 +49,13 @@ const props = withDefaults(defineProps<{
   label: string
   copiedLabel: string
   hideLabel?: boolean
+  // Like hideLabel but keeps the default icon and has no bordered box — just the
+  // plain copy icon with an sr-only label.
+  iconOnly?: boolean
   reverse?: boolean
 }>(), {
   hideLabel: false,
+  iconOnly: false,
   reverse: false,
 })
 

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

@@ -10,7 +10,7 @@
       />
     </div>
     <PreviewUnavailable v-else>
-      {{ 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>

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

@@ -2,12 +2,12 @@
   <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.")
+        ? 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="hasError">
-      {{ 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>
     <img
       v-else

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

@@ -4,8 +4,8 @@
   </PreviewUnavailable>
   <div
     v-else
-    id="map"
     ref="mapRef"
+    class="size-full"
   />
 </template>
 
@@ -128,10 +128,3 @@ onMounted(() => {
   displayMap()
 })
 </script>
-
-<style>
-  #map {
-    width: 100%;
-    height: 500px;
-  }
-</style>

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

@@ -1,23 +1,44 @@
 <template>
   <PreviewWrapper
-    v-slot="{ data }"
     file-type="PDF"
     :resource="resource"
     :max-size="config.maxPdfPreviewByteSize"
     :load="load"
+    :fill="fill"
     @loaded="renderAllPages"
   >
-    <div
-      ref="containerRef"
-      class="w-full overflow-y-auto max-h-[80vh] space-y-3"
-    >
-      <canvas
-        v-for="page in (data as PDFDocumentProxy).numPages"
-        :key="page"
-        :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
-        class="w-full"
-      />
-    </div>
+    <!-- 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>
 
@@ -27,6 +48,7 @@ import * as pdfjsLib from 'pdfjs-dist'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
 import type { PDFDocumentProxy } from 'pdfjs-dist'
 import PreviewWrapper from './PreviewWrapper.vue'
+import PdfSkeleton from './PdfSkeleton.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
 
@@ -34,6 +56,8 @@ 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()

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>
@@ -104,14 +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!,
       // 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,
-      zoom: h.maxZoom - 2,
-      center: [h.centerLon, h.centerLat],
+      ...(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/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

@@ -197,7 +197,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"