@datagouv/components-next 0.2.0 → 1.0.1

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

@@ -4,7 +4,7 @@
     type="warning"
     class="flex items-center space-x-2"
   >
-    <RiErrorWarningLine class="shink-0 size-6" />
+    <RiErrorWarningLine class="shrink-0 size-6" />
     <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
   </SimpleBanner>
   <div
@@ -18,22 +18,6 @@
 import { onMounted, ref, useTemplateRef } from 'vue'
 import { RiErrorWarningLine } from '@remixicon/vue'
 
-import View from 'ol/View'
-import Map from 'ol/Map'
-import ScaleLine from 'ol/control/ScaleLine'
-import TileLayer from 'ol/layer/Tile'
-import OSM from 'ol/source/OSM'
-
-import {
-  CRS,
-  GeoportalAttribution,
-  GeoportalFullScreen,
-  GeoportalZoom,
-  LayerImport,
-  LayerSwitcher,
-  // @ts-expect-error no types provided
-} from 'geopf-extensions-openlayers'
-
 import SimpleBanner from '../SimpleBanner.vue'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
@@ -47,6 +31,26 @@ const mapRef = useTemplateRef('mapRef')
 const hasError = ref(false)
 
 async function displayMap() {
+  // Dynamic imports for client-only libraries
+  const [
+    { default: View },
+    { default: Map },
+    { default: ScaleLine },
+    { default: TileLayer },
+    { default: OSM },
+    geopf,
+  ] = await Promise.all([
+    import('ol/View'),
+    import('ol/Map'),
+    import('ol/control/ScaleLine'),
+    import('ol/layer/Tile'),
+    import('ol/source/OSM'),
+    // @ts-expect-error no types provided
+    import('geopf-extensions-openlayers'),
+  ])
+
+  const { CRS, GeoportalAttribution, GeoportalFullScreen, GeoportalZoom, LayerImport, LayerSwitcher } = geopf
+
   await import('ol/ol.css')
   await import('@gouvfr/dsfr/dist/dsfr.css')
   await import('@gouvfr/dsfr/dist/utility/icons/icons.css')

package/src/components/ResourceAccordion/Metadata.vue

@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
-import DescriptionList from '../DescriptionList.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
 import { useFormatDate } from '../../functions/dates'
 import { filesize } from '../../functions/helpers'
@@ -27,7 +26,7 @@ const { formatDate } = useFormatDate()
 <template>
   <div>
     <div class="flex flex-wrap gap-12 flex-col md:flex-row overflow-hidden">
-      <DescriptionList class="flex-1 max-w-full">
+      <dl class="flex-1 max-w-full p-0 m-0">
         <DescriptionTerm>
           {{ t('URL') }}
           <CopyButton
@@ -90,8 +89,10 @@ const { formatDate } = useFormatDate()
             </code>
           </DescriptionDetails>
         </template>
-      </DescriptionList>
-      <DescriptionList style="flex-shrink: 0;">
+      </dl>
+      <dl
+        class="p-0 m-0 shrink-0"
+      >
         <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
           {{ formatDate(resource.created_at) }}
@@ -100,8 +101,10 @@ const { formatDate } = useFormatDate()
         <DescriptionDetails>
           {{ formatDate(resource.last_modified) }}
         </DescriptionDetails>
-      </DescriptionList>
-      <DescriptionList style="flex-shrink: 0;">
+      </dl>
+      <dl
+        class="p-0 m-0 shrink-0"
+      >
         <template v-if="resourceFilesize">
           <DescriptionTerm>{{ t('Taille') }}</DescriptionTerm>
           <DescriptionDetails>
@@ -120,12 +123,12 @@ const { formatDate } = useFormatDate()
             <code class="code truncate">{{ resource.mime }}</code>
           </DescriptionDetails>
         </template>
-      </DescriptionList>
+      </dl>
     </div>
     <div>
       <ExtraAccordion
         v-if="hasExtras"
-        class="pt-6 mt-6 border-top border-gray-default"
+        class="pt-6 mt-6 border-t border-gray-default"
         :button-text="t('Voir les extras')"
         :title-text="t('Extras de la ressource')"
         title-level="h5"
@@ -134,19 +137,3 @@ const { formatDate } = useFormatDate()
     </div>
   </div>
 </template>
-
-<style scoped>
-.gap-3rem {
-  gap: 3rem;
-}
-
-.gap-3rem dl {
-  padding-inline-start: 0;
-}
-
-@container (max-width: 600px) {
-  .flex-col-on-small {
-    flex-direction: column
-  }
-}
-</style>

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

@@ -1,30 +1,15 @@
 <template>
   <div class="text-xs">
-    <div v-if="pdfData">
-      <!--
-      We use props.resource.url instead of props.resource.latest
-      because the PDF component raises an error otherwise.
-      See https://github.com/datagouv/cdata/pull/611
-      -->
-      <PDF
-        :src="props.resource.url"
-        :show-progress="true"
-        progress-color="#0063cb"
-        :show-page-tooltip="true"
-        :show-back-to-top-btn="true"
-        :scroll-threshold="300"
-        pdf-width="100%"
-        :row-gap="12"
-        :use-system-fonts="true"
-        :disable-range="false"
-        :disable-stream="false"
-        :disable-auto-fetch="false"
+    <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"
-        @on-progress="handleProgress"
-        @on-complete="handleComplete"
-        @on-page-change="handlePageChange"
-        @on-pdf-init="handlePdfInit"
-        @on-error="handleError"
       />
     </div>
     <div
@@ -64,19 +49,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { RiErrorWarningLine } from '@remixicon/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 { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
 import { useTranslation } from '../../composables/useTranslation'
 import { getResourceFilesize } from '../../functions/datasets'
 
-const PDF = defineAsyncComponent(() =>
-  import('pdf-vue3').then((module) => {
-    return module.default
-  }),
-)
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
 const props = defineProps<{
   resource: Resource
@@ -85,10 +69,47 @@ const props = defineProps<{
 const config = useComponentsConfig()
 const { t } = useTranslation()
 
-const pdfData = ref<boolean>(false)
+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>()
+
+function setCanvasRef(el: HTMLCanvasElement | null, pageNum: number) {
+  if (el) canvasRefs.set(pageNum, el)
+}
+
+async function renderPage(pageNum: number) {
+  if (!pdfDoc) return
+
+  const canvas = canvasRefs.get(pageNum)
+  if (!canvas) return
+
+  const page = await pdfDoc.getPage(pageNum)
+
+  const containerWidth = containerRef.value?.clientWidth ?? 800
+  const unscaledViewport = page.getViewport({ scale: 1 })
+  const scale = containerWidth / unscaledViewport.width
+  const viewport = page.getViewport({ scale })
+
+  const dpr = window.devicePixelRatio || 1
+  canvas.width = viewport.width * dpr
+  canvas.height = viewport.height * dpr
+  canvas.style.width = `${viewport.width}px`
+  canvas.style.height = `${viewport.height}px`
+
+  const context = canvas.getContext('2d')!
+  context.scale(dpr, dpr)
+
+  await page.render({
+    canvasContext: context,
+    viewport,
+  }).promise
+}
 
 const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
 
@@ -105,7 +126,6 @@ const shouldLoadPdf = computed(() => {
 })
 
 const loadPdf = async () => {
-  // Check if file is too large or size is unknown before loading
   if (!shouldLoadPdf.value) {
     fileTooLarge.value = true
     return
@@ -115,19 +135,23 @@ const loadPdf = async () => {
   error.value = null
 
   try {
-    // Test if the PDF URL is accessible
-    const response = await fetch(props.resource.url, { method: 'HEAD' })
-    // const response = await fetch('/test-data.pdf') // For testing locally without CORS issues
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
+    const loadingTask = pdfjsLib.getDocument({
+      url: props.resource.url,
+      isEvalSupported: false,
+    })
+
+    pdfDoc = await loadingTask.promise
+    totalPages.value = pdfDoc.numPages
+    pdfReady.value = true
 
-    // If the URL is accessible, set pdfData to true
-    // The PDF component will handle the actual loading
-    pdfData.value = true
+    await nextTick()
+
+    for (let i = 1; i <= pdfDoc.numPages; i++) {
+      await renderPage(i)
+    }
   }
   catch (err) {
-    console.error('Error testing PDF URL:', err)
+    console.error('Error loading PDF:', err)
 
     if (err instanceof TypeError) {
       error.value = 'network'
@@ -135,45 +159,17 @@ const loadPdf = async () => {
     else {
       error.value = 'generic'
     }
-
-    pdfData.value = false
   }
   finally {
     loading.value = false
   }
 }
 
-// Event handlers for PDF component
-const handleProgress = (loadRatio: number) => {
-  console.log(`PDF loading progress: ${loadRatio}%`)
-}
-
-const handleComplete = () => {
-  console.log('PDF download completed')
-}
-
-const handlePageChange = (page: number) => {
-  console.log(`PDF page changed to: ${page}`)
-}
-
-const handlePdfInit = (pdf: unknown) => {
-  console.log('PDF initialized:', pdf)
-}
-
-const handleError = (err: unknown) => {
-  console.error('PDF loading error:', err)
-
-  if (err instanceof TypeError) {
-    error.value = 'network'
-  }
-  else {
-    error.value = 'generic'
-  }
-
-  pdfData.value = false
-}
-
 onMounted(() => {
   loadPdf()
 })
+
+onBeforeUnmount(() => {
+  pdfDoc?.destroy()
+})
 </script>

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

@@ -5,7 +5,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}</span>
     </SimpleBanner>
     <div
@@ -25,7 +25,7 @@
             <p class="fr-text--bold fr-m-0">
               {{ t("Explorer les données en détail") }}
             </p>
-            <p class="fr-text--sm fr-m-0 f-italic">
+            <p class="fr-text--sm fr-m-0 italic">
               {{ t("Utiliser un visualisateur PMTiles pour obtenir un aperçu des données.") }}
             </p>
           </div>

package/src/components/ResourceAccordion/Preview.vue

@@ -5,7 +5,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}</span>
     </SimpleBanner>
     <PreviewLoader v-else-if="loading" />
@@ -23,7 +23,7 @@
             <p class="fr-text--bold fr-m-0">
               {{ t("Explorer les données en détail") }}
             </p>
-            <p class="fr-text--sm fr-m-0 f-italic">
+            <p class="fr-text--sm fr-m-0 italic">
               {{ t("Utiliser notre outil pour obtenir un aperçu des données, en savoir plus sur les différentes colonnes ou réaliser des filtres et des tris.") }}
             </p>
           </div>

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -9,7 +9,7 @@
     >
       <div>
         <div class="flex items-center fr-mb-1v">
-          <h4
+          <h3
             :id="resourceTitleId"
             class="fr-m-0"
           >
@@ -43,7 +43,7 @@
               /></span>
               <span class="absolute inset-0 z-1" />
             </button>
-          </h4>
+          </h3>
           <CopyButton
             :label="t('Copier le lien')"
             :copied-label="t('Lien copié !')"
@@ -51,22 +51,33 @@
             class="z-2"
           />
         </div>
-        <div class="text-gray-medium subheaders-infos">
+        <div class="text-gray-medium subheaders-infos flex items-center gap-1">
           <SchemaBadge
             :resource
-            class="dash-after"
           />
-          <span class="fr-text--xs fr-mb-0 dash-after">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
-          <span
-            v-if="resource.format"
-            class="fr-text--xs fr-mb-0 dash-after"
-          >
-            <span class="hidden show-on-small">{{ t("Format") }}</span>
-            {{ resource.format.trim().toLowerCase() }}
-            <span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
-          </span>
+          <RiSubtractLine
+            v-if="resource.schema"
+            aria-hidden="true"
+            class="size-3 fill-gray-medium"
+          />
+          <span class="text-xs mb-0">{{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(lastUpdate) }) }}</span>
+          <RiSubtractLine
+            aria-hidden="true"
+            class="size-3 fill-gray-medium"
+          />
+          <template v-if="resource.format">
+            <span class="text-xs mb-0">
+              <span class="hidden sm:inline">{{ t("Format") }}</span>
+              {{ resource.format.trim().toLowerCase() }}
+              <span v-if="resourceFilesize">({{ filesize(resourceFilesize) }})</span>
+            </span>
+            <RiSubtractLine
+              aria-hidden="true"
+              class="size-3 fill-gray-medium"
+            />
+          </template>
           <span
-            class="inline-flex items-center fr-text--xs fr-mb-0"
+            class="inline-flex items-center text-xs mb-0"
             :aria-label="t('{n} téléchargements', resource.metrics.views)"
           >
             <span class="fr-icon-download-line fr-icon--xs fr-mr-1v" />
@@ -102,6 +113,7 @@
             rel="ugc nofollow noopener"
             new-tab
             size="xs"
+            color="secondary"
             external
             @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
           >
@@ -116,7 +128,7 @@
             :id="resource.id + '-copy'"
             :data-clipboard-text="resource.url"
             :aria-describedby="resourceTitleId"
-            color="primary"
+            color="secondary"
             size="xs"
             :icon="RiFileCopyLine"
           >
@@ -132,14 +144,15 @@
             rel="ugc nofollow noopener"
             :title="downloadButtonTitle"
             download
-            class="relative text-transform-uppercase matomo_download z-2"
+            class="relative matomo_download z-2"
             :icon="unavailable ? RiFileWarningLine : RiDownloadLine"
             size="xs"
+            color="secondary"
             :aria-describedby="resourceTitleId"
             external
             @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
           >
-            <span class="sr-only">{{ t('Télécharger le fichier au format ') }}</span>{{ format }}
+            {{ t('Télécharger') }}
           </BrandedButton>
         </p>
         <p
@@ -358,7 +371,7 @@
 
 <script setup lang="ts">
 import { ref, computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine } from '@remixicon/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'
@@ -378,6 +391,7 @@ import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../
 import BrandedButton from '../BrandedButton.vue'
 import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
+import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'
 import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
@@ -414,6 +428,7 @@ 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.
@@ -423,13 +438,7 @@ const hasPreview = computed(() => {
   return format === 'json' || format === 'pdf' || format === 'xml'
 })
 
-const hasTabularData = computed(() => {
-  // Determines if we should show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure)
-  return config.tabularApiUrl
-    && props.resource.extras['analysis:parsing:parsing_table']
-    && !props.resource.extras['analysis:parsing:error']
-    && (config.tabularAllowRemote || props.resource.filetype === 'file')
-})
+const hasTabularData = computed(() => checkTabularData(props.resource))
 
 const hasPmtiles = computed(() => {
   return props.resource.extras['analysis:parsing:pmtiles_url'] || props.resource.format === 'pmtiles'
@@ -595,9 +604,7 @@ article {
   article header .subheaders-infos .hidden.show-on-small {
     display: inline !important;
   }
-  article header .dash-after::after {
-    content: ''
-  } */
+ */
 
   /* article .fr-pl-4v fr-pr-4v {
     padding: 0.75rem !important;

package/src/components/ResourceAccordion/ResourceIcon.vue

@@ -2,6 +2,7 @@
   <component
     :is="(resource.format ? getResourceFormatIcon(resource.format) : null) || File"
     class="text-gray-800 shrink-0"
+    aria-hidden="true"
   />
 </template>
 

package/src/components/ResourceAccordion/SchemaBadge.vue

@@ -9,12 +9,12 @@
     >
       <RiInformationLine class="size-4" />
       <template #toggletip="{ close }">
-        <div class="flex justify-between border-bottom">
+        <div class="flex justify-between border-b">
           <h5 class="fr-text--sm fr-my-0 fr-p-2v">{{ t("Schéma de données") }}</h5>
           <button
             type="button"
             :title="t('Fermer')"
-            class="border-left close-button flex items-center justify-center"
+            class="border-l close-button flex items-center justify-center"
             @click="close"
           >&times;</button>
         </div>

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

@@ -14,7 +14,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ fileSizeBytes
         ? t("Fichier XML 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.")
@@ -25,7 +25,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Ce fichier XML 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
@@ -33,7 +33,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
     </SimpleBanner>
   </div>