@datagouv/components-next 1.0.2-dev.4 → 1.0.2-dev.41

package/dist/{vue3-xml-viewer.common-DFrGHXJC.js → vue3-xml-viewer.common-CAwAbUJl.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-ByqZlhiZ.js";
+import { c as Ke } from "./main-CF7lWk6R.js";
 import We from "vue";
 function Fe(I, 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.4",
+  "version": "1.0.2-dev.41",
   "private": false,
   "type": "module",
   "engines": {
@@ -16,16 +16,15 @@
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^1.1.8",
+    "@floating-ui/vue": "^1.1.11",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.5.0",
     "@types/hast": "^3.0.4",
     "@types/leaflet": "^1.9.17",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/router": "^13.1.0",
+    "@vueuse/core": "^14.2.1",
+    "@vueuse/router": "^14.2.1",
     "chart.js": "^4.4.8",
     "dompurify": "^3.2.5",
-    "echarts": "^6.0.0",
     "geopf-extensions-openlayers": "^1.0.0-beta.5",
     "leaflet": "^1.9.4",
     "maplibre-gl": "^5.6.2",
@@ -49,10 +48,7 @@
     "swagger-ui-dist": "^5.27.1",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.5.13",
     "vue-content-loader": "^2.0.1",
-    "vue-echarts": "^8.0.1",
-    "vue-router": "^4.5.0",
     "vue-sonner": "^2.0.9",
     "vue3-json-viewer": "^2.4.1",
     "vue3-text-clamp": "^0.1.2",
@@ -78,8 +74,14 @@
     "typescript": "^5.7.3",
     "vite": "^7.0",
     "vite-plugin-vue-devtools": "^8.0",
+    "vue": "^3.5.31",
+    "vue-router": "^5.0.4",
     "vue-tsc": "^3.0"
   },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0 || ^5.0.0"
+  },
   "scarfSettings": {
     "enabled": false
   },

package/src/components/ActivityList/ActivityList.vue

@@ -90,7 +90,6 @@
           :total-results="activities.total"
           :page-size="activities.page_size"
           :page="activities.page"
-          :link="getLink"
           @change="(newPage: number) => page = newPage"
         />
       </template>
@@ -117,7 +116,6 @@ import { useTranslation } from '../../composables/useTranslation'
 import { getActivityTranslation } from '../../functions/activities'
 import { useFetch } from '../../functions/api'
 import { useFormatDate } from '../../functions/dates'
-import { getLink } from '../../functions/pagination'
 import type { PaginatedArray } from '../../types/api'
 import type { Activity } from '../../types/activity'
 import Avatar from '../Avatar.vue'

package/src/components/Form/SearchableSelect.vue

@@ -10,8 +10,9 @@
       :class="{ 'sr-only': hideLabel }"
     >
       {{ label }}
+      <!-- $props needed: in generic components, vue-tsc resolves `required` to the Nuxt auto-imported function instead of the prop -->
       <span
-        v-if="required"
+        v-if="$props.required"
         class="text-new-primary"
       >*</span>
       <span

package/src/components/Pagination.vue

@@ -101,6 +101,7 @@
 
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
+import { useRoute } from 'vue-router'
 import { useTranslation } from '../composables/useTranslation'
 
 type Props = {
@@ -112,10 +113,6 @@ type Props = {
    * The page size.
    */
   pageSize?: number
-  /**
-   * Customize the links used
-   */
-  link?: (page: number) => string
   /**
    * The number of items in the collection. It's used to calculated the number of pages.
    */
@@ -174,6 +171,7 @@ function getVisiblePages(currentPage: number, pageCount: number) {
 }
 
 const { t } = useTranslation()
+const route = useRoute()
 const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
 const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
 
@@ -211,6 +209,11 @@ function getHref(forPage: number) {
   if (forPage < 1 || forPage > pageCount.value) {
     return undefined
   }
-  return props.page === forPage ? undefined : (props.link ? props.link(forPage) : '#')
+  if (props.page === forPage) {
+    return undefined
+  }
+  const search = new URLSearchParams(route.query as Record<string, string>)
+  search.set('page', forPage.toFixed(0))
+  return `${route.path}?${search.toString()}`
 }
 </script>

package/src/components/ReadMore.vue

@@ -3,7 +3,7 @@
     <div
       ref="readMoreRef"
       class="overflow-hidden"
-      :style="{ height: containerHeight + 'px' }"
+      :style="{ height: readMoreRequired ? containerHeight + 'px' : 'auto' }"
     >
       <div ref="containerRef">
         <slot />

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

@@ -9,21 +9,15 @@
           border: none;"
       />
     </div>
-    <SimpleBanner
-      v-else
-      type="warning"
-      class="flex items-center space-x-2"
-    >
-      <RiErrorWarningLine class="shrink-0 size-6" />
-      <span>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
-    </SimpleBanner>
+    <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.") }}
+    </PreviewUnavailable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RiErrorWarningLine } from '@remixicon/vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import type { Resource } from '../../types/resources'
 import type { Dataset, DatasetV2 } from '../../types/datasets'
 import { useTranslation } from '../../composables/useTranslation'

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,12 +1,7 @@
 <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"
@@ -16,9 +11,7 @@
 
 <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,7 +89,10 @@ async function displayMap() {
 
   const attributions = new GeoportalAttribution({
     position: 'bottom-right',
+    // collapsed option is ignored by the library, thus the override below
+    // see https://github.com/IGNF/geopf-extensions-openlayers/issues/497
   })
+  attributions.setCollapsed(false)
   map.addControl(attributions)
 
   const layerImport = new LayerImport({

package/src/components/ResourceAccordion/Metadata.vue

@@ -7,9 +7,8 @@ import DescriptionTerm from '../DescriptionTerm.vue'
 import { useFormatDate } from '../../functions/dates'
 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

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

@@ -1,64 +1,34 @@
 <template>
-  <div class="text-xs">
+  <PreviewWrapper
+    v-slot="{ data }"
+    file-type="PDF"
+    :resource="resource"
+    :max-size="config.maxPdfPreviewByteSize"
+    :load="load"
+    @loaded="renderAllPages"
+  >
     <div
-      v-if="pdfReady"
       ref="containerRef"
       class="w-full overflow-y-auto max-h-[80vh] space-y-3"
     >
       <canvas
-        v-for="page in totalPages"
+        v-for="page in (data as PDFDocumentProxy).numPages"
         :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>
 </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 { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
-import { useTranslation } from '../../composables/useTranslation'
-import { getResourceFilesize } from '../../functions/datasets'
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
@@ -67,15 +37,8 @@ const props = defineProps<{
 }>()
 
 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 +74,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/Pmtiles.client.vue

@@ -1,13 +1,8 @@
 <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>
+    <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"
@@ -53,7 +48,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 +59,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'

package/src/components/ResourceAccordion/Preview.vue

@@ -1,13 +1,8 @@
 <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 de ce fichier n'a pas pu être chargé.") }}</span>
-    </SimpleBanner>
+    <PreviewUnavailable v-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>
     <PreviewLoader v-else-if="loading" />
     <div
       v-else
@@ -105,7 +100,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RiArrowDownLine, RiArrowUpLine, RiErrorWarningLine, RiExternalLinkFill } from '@remixicon/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'
@@ -113,7 +108,7 @@ import { trackEvent } from '../../functions/matomo'
 import type { Resource } from '../../types/resources'
 import { useComponentsConfig } from '../../config'
 import BrandedButton from '../BrandedButton.vue'
-import SimpleBanner from '../SimpleBanner.vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
 import PreviewLoader from './PreviewLoader.vue'
@@ -147,7 +142,7 @@ async function getTableInfos(page: number, sortConfig?: SortConfig) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
-    if ('data' in response && response.data && 0 in response.data) {
+    if ('data' in response && response.data && response.data.length > 0) {
       // Update existing rows
       rows.value = response.data
       columns.value = Object.keys(response.data[0]).filter(item => item !== '__id')

package/src/components/ResourceAccordion/PreviewLoader.vue

@@ -1,7 +1,6 @@
 <template>
   <ContentLoader
-    :width="1124"
-    :height="300"
+    viewBox="0 0 1124 300"
     :speed="2"
     primary-color="#f3f3f3"
     secondary-color="#ecebeb"

package/src/components/ResourceAccordion/PreviewUnavailable.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex flex-col items-center py-12">
+    <img
+      :src="microscopeSrc"
+      class="h-20 mb-3"
+      alt=""
+    >
+    <p class="fr-text--bold mb-1">
+      {{ t("Aucun aperçu disponible") }}
+    </p>
+    <p class="text-sm text-gray-medium mb-0 text-center max-w-lg">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import microscopeSrc from '../../../assets/illustrations/microscope.svg?url'
+
+const { t } = useTranslation()
+</script>