@datagouv/components-next 1.0.0 → 1.0.1

package/dist/{vue3-xml-viewer.common-CmAdQfIy.js → vue3-xml-viewer.common-Bi_bsV6C.js}

@@ -1,4 +1,4 @@
-import { b as Ke } from "./main-CNHxAJ8J.js";
+import { b as Ke } from "./main-CiH8ZmBI.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.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "engines": {
@@ -30,7 +30,7 @@
     "maplibre-gl": "^5.6.2",
     "ofetch": "^1.4.1",
     "ol": "^10.6.1",
-    "pdf-vue3": "^1.0.12",
+    "pdfjs-dist": "^4.10.38",
     "pmtiles": "^4.3.0",
     "popmotion": "^11.0",
     "rehype-highlight": "^7.0.2",

package/src/components/DataserviceCard.vue

@@ -58,7 +58,7 @@
     </ObjectCardHeader>
     <div
       v-if="dataservice.organization || dataservice.owner"
-      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
       <ObjectCardOwner
         :organization="dataservice.organization"
@@ -70,14 +70,14 @@
         class="size-4 flex-none fill-gray-medium"
       />
       <!-- https://github.com/datagouv/cdata/issues/653 -->
-      <p class="text-sm whitespace-nowrap mb-0">
+      <p class="text-sm whitespace-nowrap mb-0 text-gray-medium">
         {{ t('Mis à jour {date}', { date: formatRelativeIfRecentDate(dataservice.metadata_modified_at, { dateStyle: 'medium' }) }) }}
       </p>
       <RiSubtractLine
         aria-hidden="true"
         class="size-4 flex-none fill-gray-medium"
       />
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-1 text-gray-medium">
         <p
           class="text-sm mb-0 flex items-center gap-0.5"
           :aria-label="t('{n} vues | {n} vue | {n} vues', dataservice.metrics.views)"

package/src/components/DatasetCard.vue

@@ -47,7 +47,7 @@
     </ObjectCardHeader>
     <div
       v-if="dataset.organization || dataset.owner"
-      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
       <ObjectCardOwner
         :organization="dataset.organization"
@@ -60,7 +60,7 @@
       </div>
     </div>
     <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
-      <div class="hidden sm:flex text-gray-medium -ml-2.5">
+      <div class="hidden sm:flex text-gray-medium">
         <DatasetQualityInline :quality="dataset.quality" />
       </div>
       <RiSubtractLine

package/src/components/DatasetQuality.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="flex items-center">
-    <Toggletip
-      :button-props="{ class: '-ml-2 mt-px', title: t('Qualité des métadonnées') }"
-    >
-      <template #toggletip>
-        <DatasetQualityTooltipContent :quality />
-      </template>
-    </Toggletip>
-    <div class="text-sm text-gray-plain font-bold">
-      {{ t('Qualité des métadonnées:') }}
-    </div>
-  </div>
-  <DatasetQualityScore
-    :score="quality.score"
-    class="w-full"
-  />
+  <Toggletip
+    :styled-button="false"
+    button-class="flex flex-col gap-1 rounded-sm p-1.5 -m-1.5 border-transparent -outline-offset-2 hover:bg-gray-some transition-colors w-full text-left"
+    :button-props="{ title: t('Qualité des métadonnées') }"
+  >
+    <span class="flex items-center gap-1">
+      <RiInformationLine
+        class="size-5 shrink-0"
+        aria-hidden="true"
+      />
+      <span class="text-sm text-gray-plain font-bold">
+        {{ t('Qualité des métadonnées:') }}
+      </span>
+    </span>
+    <DatasetQualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <template #toggletip>
+      <DatasetQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
       <DatasetQualityItemWarning
@@ -54,6 +60,7 @@
 </template>
 
 <script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
 import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
 import DatasetQualityScore from './DatasetQualityScore.vue'

package/src/components/DatasetQualityInline.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
-    <div class="fr-grid-row fr-grid-row--middle">
-      <Toggletip
-        :button-props="{ class: 'relative z-2 ml-0.5', title: t('Qualité des métadonnées') }"
-      >
-        <RiInformationLine class="size-4" />
-        <template #toggletip>
-          <DatasetQualityTooltipContent :quality />
-        </template>
-      </Toggletip>
-      <p class="my-0 mr-1 text-gray-medium text-sm">
-        {{ t('Métadonnées :') }}
-      </p>
-      <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
-        <DatasetQualityScore :score="quality.score" />
-      </div>
-    </div>
+  <div class="m-0 text-sm text-gray-medium">
+    <Toggletip
+      :styled-button="false"
+      button-class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-lower transition-colors"
+      :button-props="{ class: 'relative z-2 gap-1 rounded-sm px-1 -mx-1 group/quality', title: t('Qualité des métadonnées') }"
+    >
+      <RiInformationLine class="size-3.5 shrink-0" />
+      <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
+      <DatasetQualityScore :score="quality.score" />
+      <template #toggletip>
+        <DatasetQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
   </div>
 </template>
 

package/src/components/DatasetQualityScore.vue

@@ -1,26 +1,23 @@
 <template>
-  <meter
-    class="quality-score"
-    :class="props.class"
-    min="0"
-    low="0"
-    :high="high"
-    :max="quality_max_score"
-    :optimum="quality_max_score"
+  <ProgressBar
     :value="score"
+    :max="quality_max_score"
+    :aria-label="score >= high ? t('Bon') : t('À améliorer')"
+    :bar-class="score >= high ? 'bg-success-dark' : 'bg-gray-low'"
+    :class="props.class"
   >
-    <template v-if="score >= high">
-      {{ t('Bon') }}
-    </template>
-    <template v-else>
-      {{ t('À améliorer') }}
-    </template>({{ calculatedScore }})
-  </meter>
+    <span class="sr-only">
+      <template v-if="score >= high">{{ t('Bon') }}</template>
+      <template v-else>{{ t('À améliorer') }}</template>
+      ({{ calculatedScore }})
+    </span>
+  </ProgressBar>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useTranslation } from '../composables/useTranslation'
+import ProgressBar from './ProgressBar.vue'
 
 const props = withDefaults(defineProps<{
   score: number

package/src/components/DiscussionMessageCard.vue

@@ -9,7 +9,7 @@
 
     <div
       v-if="discussion.organization || discussion.user"
-      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
       <ObjectCardOwner
         :organization="discussion.organization"

package/src/components/ObjectCard.vue

@@ -16,7 +16,7 @@
           <slot name="media" />
         </div>
       </div>
-      <div class="flex-1 overflow-hidden">
+      <div class="flex-1 overflow-hidden space-y-1">
         <slot />
       </div>
     </div>
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<{
 
 const mediaContainerClass = computed(() => {
   if (props.mediaSize === 'lg') {
-    return 'w-[240px] h-[160px]'
+    return 'w-[225px] h-[120px]'
   }
   return 'p-2'
 })

package/src/components/ObjectCardHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 class="w-full text-base mb-0 flex">
+  <h3 class="w-full text-base flex">
     <AppLink
       :to="url"
       class="text-gray-title text-base bg-none flex items-center w-full truncate gap-1"

package/src/components/OrganizationHorizontalCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <ObjectCard>
+    <template #media>
+      <OrganizationLogo
+        :organization="organization"
+        size-class="size-12"
+      />
+    </template>
+    <ObjectCardHeader
+      :icon="RiBuilding2Line"
+      :url="organization.page"
+    >
+      <OrganizationNameWithCertificate
+        :show-type="false"
+        :organization
+        size="sm"
+        color-class="text-gray-title"
+      />
+    </ObjectCardHeader>
+    <div class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate">
+      <template v-if="type !== 'other'">
+        <OwnerType
+          class="mb-0"
+          :type
+        />
+        <RiSubtractLine
+          v-if="'metrics' in organization"
+          aria-hidden="true"
+          class="hidden md:block size-4 flex-none fill-gray-medium"
+        />
+      </template>
+      <div
+        v-if="'metrics' in organization"
+        class="text-gray-medium flex items-center text-sm gap-0.5"
+        :aria-label="t('{datasets} jeux de donn\u00e9es, {dataservices} API et {reuses} r\u00e9utilisations', {
+          datasets: organization.metrics.datasets,
+          dataservices: organization.metrics.dataservices,
+          reuses: organization.metrics.reuses,
+        })"
+      >
+        <RiDatabase2Line
+          aria-hidden="true"
+          class="size-3.5"
+        /> {{ summarize(organization.metrics.datasets) }}
+        <RiTerminalLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.dataservices) }}
+        <RiLineChartLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.reuses) }}
+        <RiStarLine
+          aria-hidden="true"
+          class="size-3.5 ml-1"
+        /> {{ summarize(organization.metrics.followers) }}
+      </div>
+    </div>
+    <ObjectCardShortDescription
+      v-if="'description' in organization"
+      :text="organization.description"
+    />
+  </ObjectCard>
+</template>
+
+<script setup lang="ts">
+import { RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiStarLine, RiSubtractLine, RiTerminalLine } from '@remixicon/vue'
+import { computed } from 'vue'
+import { getOrganizationType } from '../functions/organizations'
+import { summarize } from '../functions/helpers'
+import { useTranslation } from '../composables/useTranslation'
+import type { Organization, OrganizationReference } from '../types/organizations'
+import OrganizationLogo from './OrganizationLogo.vue'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+import OwnerType from './OwnerType.vue'
+import ObjectCard from './ObjectCard.vue'
+import ObjectCardHeader from './ObjectCardHeader.vue'
+import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+
+const props = defineProps<{
+  organization: Organization | OrganizationReference
+}>()
+
+const { t } = useTranslation()
+
+const type = computed(() => getOrganizationType(props.organization))
+</script>

package/src/components/OrganizationNameWithCertificate.vue

@@ -6,7 +6,7 @@
     />
     <component
       :is="as"
-      class="mb-0 truncate flex-initial font-normal"
+      class="mb-0 truncate flex-initial"
       :class="[colorClass, { 'text-xs': size === 'xs', 'text-sm': size === 'sm', 'text-base': size === 'base' }]"
     >
       {{ organization.name }}

package/src/components/ProgressBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    role="meter"
+    :aria-valuenow="value"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    class="min-w-20 h-2.5 rounded-lg border border-gray-default bg-[#f5f5f5] overflow-hidden"
+  >
+    <div
+      class="h-full rounded-lg"
+      :class="barClass"
+      :style="{ width: percentage + '%' }"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  value: number
+  max?: number
+  barClass?: string
+}>(), {
+  max: 1,
+  barClass: '',
+})
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+</script>

package/src/components/ResourceAccordion/Datafair.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>{{ t("Erreur lors de l'affichage de l'aperçu.") }}</span>
     </SimpleBanner>
   </div>

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

@@ -22,7 +22,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 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.")
@@ -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("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
@@ -41,7 +41,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 JSON.") }}</span>
     </SimpleBanner>
   </div>

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

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

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" />