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

package/src/components/Pagination.vue

@@ -19,7 +19,7 @@
       </li>
       <li>
         <a
-          :href="getHref(page - 1)"
+          :href="getHref(currentPage - 1)"
           class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
           data-testid="previous-page"
           @click.prevent.stop="previousPage"
@@ -29,10 +29,10 @@
       </li>
       <li>
         <a
-          :aria-current="page === 1 ? 'page' : undefined"
+          :aria-current="currentPage === 1 ? 'page' : undefined"
           :href="getHref(1)"
           class="fr-pagination__link"
-          :class="{ 'fr-hidden fr-unhidden-sm': page > 1 }"
+          :class="{ 'fr-hidden fr-unhidden-sm': currentPage > 1 }"
           :title="t('Page {nb}', { nb: 1 })"
           :data-testid="1"
           @click.prevent.stop="onClick(1)"
@@ -47,8 +47,8 @@
         <a
           v-if="index"
           class="fr-pagination__link"
-          :class="{ 'fr-hidden fr-unhidden-lg': index < page - 1 || index > page + 1 }"
-          :aria-current="page === index ? 'page' : undefined"
+          :class="{ 'fr-hidden fr-unhidden-lg': index < currentPage - 1 || index > currentPage + 1 }"
+          :aria-current="currentPage === index ? 'page' : undefined"
           :href="getHref(index)"
           :title="t('Page {nb}', { nb: index })"
           :data-testid="index"
@@ -66,7 +66,7 @@
       <li>
         <a
           class="fr-pagination__link"
-          :aria-current="page === pageCount ? 'page' : undefined"
+          :aria-current="currentPage === pageCount ? 'page' : undefined"
           :href="getHref(pageCount)"
           :title="t('Page {nb}', { nb: pageCount })"
           :data-testid="pageCount"
@@ -78,7 +78,7 @@
       <li>
         <a
           class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
-          :href="getHref(page + 1)"
+          :href="getHref(currentPage + 1)"
           data-testid="next-page"
           @click.prevent.stop="nextPage"
         >
@@ -101,7 +101,10 @@
 
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
+import { useRoute } from 'vue-router'
 import { useTranslation } from '../composables/useTranslation'
+import { clampPage, getVisiblePages } from '../functions/paginate'
+import { scrollToBlockTop } from '../functions/scroll'
 
 type Props = {
   /**
@@ -112,10 +115,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.
    */
@@ -131,77 +130,36 @@ const props = withDefaults(defineProps<Props>(), {
   pageSize: 20,
 })
 
-const PAGES_AROUND = 3
-
-function range(size: number, startAt = 1) {
-  return [...Array(size).keys()].map(i => i + startAt)
-}
-
-function getPages(pageCount: number) {
-  return range(pageCount)
-}
-
-function getPagesShown(pages: { length: number }, currentPage: number) {
-  return Math.min(
-    PAGES_AROUND * 2 + 1,
-    pages.length - 2,
-    PAGES_AROUND + currentPage - 1,
-    PAGES_AROUND + pages.length - currentPage,
-  )
-}
-
-function getStartPage(currentPage: number) {
-  return Math.max(
-    currentPage - PAGES_AROUND, // we want to start 3 pages before the current one
-    2, // we don't want to start below page 2
-  )
-}
-
-function getVisiblePages(currentPage: number, pageCount: number) {
-  const pages = getPages(pageCount)
-  const start = getStartPage(currentPage)
-  if (pageCount <= 2) {
-    return []
-  }
-  const pagination: Array<number | null> = range(getPagesShown(pages, currentPage), start)
-  if (!pagination.includes(2)) {
-    pagination.unshift(null)
-  }
-  if (!pagination.includes(pageCount - 1)) {
-    pagination.push(null)
-  }
-  return pagination
-}
-
 const { t } = useTranslation()
+const route = useRoute()
 const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
-const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
+// The `page` prop often comes straight from a query string, so it is normalised
+// once here and every link below builds on an existing page.
+const currentPage = computed(() => clampPage(props.page, pageCount.value))
+const visiblePages = computed(() => getVisiblePages(currentPage.value, pageCount.value))
 
 const nav = useTemplateRef('navRef')
 function change(index: number) {
   emit('change', index)
 
-  if (!nav.value || !nav.value.parentElement) return
-
-  nav.value.parentElement.style.scrollMarginTop = '100px'
-  nav.value.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  scrollToBlockTop(nav.value?.parentElement)
 }
 
 function onClick(index: number) {
-  if (index !== props.page) {
+  if (index !== currentPage.value) {
     change(index)
   }
 }
 
 function nextPage() {
-  const index = props.page + 1
+  const index = currentPage.value + 1
   if (index <= pageCount.value) {
     change(index)
   }
 }
 
 function previousPage() {
-  const index = props.page - 1
+  const index = currentPage.value - 1
   if (index > 0) {
     change(index)
   }
@@ -211,6 +169,11 @@ function getHref(forPage: number) {
   if (forPage < 1 || forPage > pageCount.value) {
     return undefined
   }
-  return props.page === forPage ? undefined : (props.link ? props.link(forPage) : '#')
+  if (currentPage.value === 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/PostCard.vue

@@ -23,12 +23,20 @@
 
     <ObjectCardShortDescription :text="post.headline || post.content" />
 
-    <div
+    <TranslationT
       v-if="post.published || post.created_at"
+      tag="div"
       class="text-sm text-gray-medium mt-1"
+      keypath="Publié {date}"
     >
-      {{ t('Publié {date}', { date: formatDate(post.published || post.created_at) }) }}
-    </div>
+      <template #date>
+        <FormattedDate
+          :date="post.published || post.created_at"
+          format="relative"
+          :options="{ dateStyle: 'long', timeStyle: 'short' }"
+        />
+      </template>
+    </TranslationT>
 
     <slot />
   </ObjectCard>
@@ -37,26 +45,16 @@
 <script setup lang="ts">
 import { RiArticleLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import type { Post } from '../types/posts'
 import Placeholder from './Placeholder.vue'
 import ObjectCard from './ObjectCard.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 defineProps<{
   post: Post
   postUrl?: RouteLocationRaw
 }>()
-
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-    timeStyle: 'short',
-  })
-}
 </script>

package/src/components/RadioInput.vue

@@ -13,9 +13,14 @@
     >
     <component
       :is="icon"
-      v-if="icon"
+      v-if="icon && typeof icon !== 'string'"
       class="w-4 h-4"
     />
+    <span
+      v-else-if="icon"
+      :class="icon"
+      aria-hidden="true"
+    />
     <span class="text-sm flex-1 min-w-0">
       <slot />
     </span>
@@ -40,7 +45,7 @@ type Props = {
   value: string
   count?: number
   loading?: boolean
-  icon?: Component
+  icon?: Component | string
   highlighted?: boolean
 }
 

package/src/components/ResourceAccordion/DataStructure.vue

@@ -49,45 +49,23 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import type { Resource } from '../../types/resources'
-import { useGetProfile } from '../../functions/tabularApi'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import PreviewLoader from './PreviewLoader.vue'
 
 const props = defineProps<{ resource: Resource }>()
-const getProfile = useGetProfile()
 const { t } = useTranslation()
 
-type ColumnInfo = {
-  score: number
-  format: string
-  python_type: string
-}
+// Profile is shared with sibling components (e.g. TabularExplorer) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, status } = await injectTabularProfile(() => props.resource.id)
 
-const columns = ref<Array<string>>([])
-const columnsInfo = ref<Record<string, ColumnInfo>>({})
-const loading = ref(true)
-const hasError = ref(false)
-const hasColumnInfo = ref(false)
-
-onMounted(async () => {
-  try {
-    const response = await getProfile(props.resource.id) // Assurez-vous que cette fonction retourne bien les données attendues
-    if ('profile' in response && response.profile) {
-      columns.value = Object.keys(response.profile.columns)
-      columnsInfo.value = response.profile.columns
-      hasColumnInfo.value = true
-      loading.value = false
-    }
-    else {
-      hasError.value = true
-      loading.value = false
-    }
-  }
-  catch {
-    hasError.value = true
-    loading.value = false
-  }
-})
+const loading = computed(() => status.value === 'idle' || status.value === 'pending')
+const hasError = computed(() => status.value === 'error')
+const hasColumnInfo = computed(() => !!profileData.value?.profile?.columns)
+const columns = computed(() => profileData.value?.profile ? Object.keys(profileData.value.profile.columns) : [])
+const columnsInfo = computed(() => profileData.value?.profile?.columns ?? {})
 </script>

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/Downloads.vue

@@ -0,0 +1,172 @@
+<template>
+  <dl class="fr-pl-0">
+    <dt
+      v-if="resource.format === 'url'"
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t("URL d'origine") }}
+    </dt>
+    <dt
+      v-else
+      class="font-bold fr-text--sm fr-mb-0"
+    >
+      {{ t('Format original') }}
+    </dt>
+    <dd class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center">
+      <span
+        v-if="resource.format === 'url'"
+        class="inline-flex items-center max-w-full"
+      >
+        <a
+          :href="resource.latest"
+          class="fr-link no-icon-after truncate"
+          rel="ugc nofollow noopener"
+          target="_blank"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+        >
+          {{ resource.url }}
+        </a>
+        <span class="fr-ml-1v fr-icon-external-link-line fr-icon--sm shrink-0" />
+      </span>
+      <span v-else>
+        <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+        <a
+          :href="resource.latest"
+          class="fr-link"
+          rel="ugc nofollow noopener"
+          @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${resource.format}`)"
+        >
+          <span>{{ t('Format {format}', { format: resource.format }) }}<span v-if="resourceFilesize"> - {{ filesize(resourceFilesize) }}</span></span>
+        </a>
+      </span>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="resource.latest"
+        class="relative"
+      />
+    </dd>
+    <template v-if="generatedFormats.length">
+      <TranslationT
+        tag="dt"
+        class="font-bold fr-text--sm fr-mb-0"
+        keypath="Formats générés automatiquement par {platform} (dernière mise à jour {date})"
+      >
+        <template #platform>
+          {{ config.name }}
+        </template>
+        <template #date>
+          <FormattedDate
+            :date="conversionsFinishedAt"
+            format="relative"
+          />
+        </template>
+      </TranslationT>
+      <dd
+        v-for="generatedFormat in generatedFormats"
+        :key="generatedFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="generatedFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${generatedFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: generatedFormat.format }) }}<span v-if="generatedFormat.size"> - {{ filesize(generatedFormat.size) }}</span></span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="generatedFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+    <template v-if="wfsFormats.length">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        <div class="flex gap-1 items-center">
+          {{ t('Formats exportés depuis le service WFS') }}
+          <span v-if="defaultWfsProjection"> ({{ t('projection {crs}', { crs: defaultWfsProjection }) }})</span>
+          <Tooltip>
+            <RiInformationLine
+              class="flex-none size-4"
+              :aria-label="t(`Le lien de téléchargement interroge directement le flux WFS distant. Le nombre de features téléchargées peut être limité.`)"
+              aria-hidden="true"
+            />
+            <template #tooltip>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le lien de téléchargement interroge directement le flux WFS distant.`) }}
+              </p>
+              <p class="text-sm font-normal mb-0">
+                {{ t(`Le nombre de features téléchargées peut être limité.`) }}
+              </p>
+            </template>
+          </Tooltip>
+        </div>
+      </dt>
+      <dd
+        v-for="wfsFormat in wfsFormats"
+        :key="wfsFormat.format"
+        class="text-sm pl-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+      >
+        <span>
+          <span class="text-datagouv fr-icon-download-line fr-icon--sm fr-mr-1v fr-mt-1v" />
+          <a
+            :href="wfsFormat.url"
+            class="fr-link"
+            rel="ugc nofollow noopener"
+            @click="trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${wfsFormat.format}`)"
+          >
+            <span>{{ t('Format {format}', { format: wfsFormat.format }) }}</span>
+          </a>
+        </span>
+        <CopyButton
+          :label="t('Copier le lien')"
+          :copied-label="t('Lien copié !')"
+          :text="wfsFormat.url"
+          class="relative"
+        />
+      </dd>
+    </template>
+  </dl>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
+import CopyButton from '../CopyButton.vue'
+import Tooltip from '../Tooltip.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useComponentsConfig } from '../../config'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+
+const conversionsFinishedAt = computed(() =>
+  props.resource.extras['analysis:parsing:finished_at'] as string | undefined,
+)
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <div class="text-xs">
+    <PreviewUnavailable v-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? 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 pour le consulter.") }}
+    </PreviewUnavailable>
+    <img
+      v-else
+      :src="resource.url"
+      alt=""
+      class="block w-full h-auto max-w-[800px]"
+      @error="hasError = true"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const hasError = ref(false)
+
+const fileType = computed(() => props.resource.format?.toUpperCase() ?? t('Fichier'))
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = config.maxImagePreviewByteSize
+  if (!size || !max) return false
+  return size <= max
+})
+</script>

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

@@ -1,48 +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>
-    <PreviewUnavailable v-else-if="fileTooLarge">
-      {{ fileSizeBytes
-        ? t("Le fichier JSON est trop volumineux pour être prévisualisé. Téléchargez-le depuis l'onglet Téléchargements.")
-        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le depuis l'onglet Téléchargements.")
-      }}
-    </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.") }}
-    </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.") }}
-    </PreviewUnavailable>
-  </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 { defineAsyncComponent } from 'vue'
 import { useComponentsConfig } from '../../config'
-import PreviewUnavailable from './PreviewUnavailable.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
   }),
@@ -53,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>