@datagouv/components-next 1.0.2-dev.19 → 1.0.2-dev.191

package/src/components/OpenApiViewer/openapi.ts

@@ -0,0 +1,150 @@
+import type { OpenAPIV3 } from 'openapi-types'
+
+export interface Endpoint {
+  method: string
+  path: string
+  summary: string
+  tags: string[]
+  parameters: OpenAPIV3.ParameterObject[]
+  requestBody: OpenAPIV3.RequestBodyObject | null
+  responses: Record<string, OpenAPIV3.ResponseObject>
+  spec: OpenAPIV3.Document
+}
+
+export function resolveRef<T>(spec: OpenAPIV3.Document, obj: T | OpenAPIV3.ReferenceObject): T | null {
+  if (!obj || typeof obj !== 'object') return obj as T | null
+  if (!('$ref' in obj)) return obj as T
+  const path = (obj as OpenAPIV3.ReferenceObject).$ref.replace('#/', '').split('/')
+  let resolved: unknown = spec
+  for (const segment of path) {
+    if (resolved && typeof resolved === 'object') {
+      resolved = (resolved as Record<string, unknown>)[segment]
+    }
+    else {
+      return null
+    }
+  }
+  return resolved as T
+}
+
+export function getSchemaType(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): string {
+  if (!schema) return ''
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return ''
+  if (resolved.type === 'array' && resolved.items) {
+    const itemType = getSchemaType(spec, resolved.items)
+    return `${itemType}[]`
+  }
+  if (resolved.format) return `${resolved.type} (${resolved.format})`
+  return resolved.type || ''
+}
+
+const CONTENT_TYPE_LABELS: Record<string, string> = {
+  'application/json': 'JSON',
+  'application/xml': 'XML',
+  'application/x-www-form-urlencoded': 'Form',
+  'multipart/form-data': 'Multipart',
+  'text/plain': 'Text',
+  'text/html': 'HTML',
+  'text/csv': 'CSV',
+  'application/octet-stream': 'Binary',
+  'application/pdf': 'PDF',
+}
+
+export function contentTypeLabel(raw: string): string {
+  const base = raw.split(';')[0]!.trim()
+  return CONTENT_TYPE_LABELS[base] || base
+}
+
+export interface SchemaProperty {
+  name: string
+  type: string
+  description: string
+  required: boolean
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined
+}
+
+export function getSchemaProperties(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): SchemaProperty[] {
+  if (!schema) return []
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved?.properties) return []
+  const requiredFields = resolved.required || []
+  return Object.entries(resolved.properties).map(([name, propSchema]) => {
+    const prop = resolveRef<OpenAPIV3.SchemaObject>(spec, propSchema)
+    return {
+      name,
+      type: getSchemaType(spec, propSchema),
+      description: prop?.description || '',
+      required: requiredFields.includes(name),
+      schema: propSchema,
+    }
+  })
+}
+
+export function hasNestedProperties(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): boolean {
+  if (!schema) return false
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return false
+  if (resolved.properties) return true
+  if (resolved.type === 'array' && resolved.items) {
+    return hasNestedProperties(spec, resolved.items)
+  }
+  return false
+}
+
+export function getNestedSchema(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject): OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined {
+  if (!schema) return undefined
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return undefined
+  if (resolved.properties) return schema
+  if (resolved.type === 'array' && resolved.items) return resolved.items
+  return undefined
+}
+
+const MAX_EXAMPLE_DEPTH = 4
+
+function defaultForType(type?: string, format?: string): unknown {
+  switch (type) {
+    case 'string':
+      if (format === 'date') return '2024-01-01'
+      if (format === 'date-time') return '2024-01-01T00:00:00Z'
+      if (format === 'email') return 'user@example.com'
+      if (format === 'uri' || format === 'url') return 'https://example.com'
+      return 'string'
+    case 'integer': return 0
+    case 'number': return 0.0
+    case 'boolean': return true
+    case 'null': return null
+    default: return {}
+  }
+}
+
+export function generateExample(spec: OpenAPIV3.Document, schema?: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject, depth = 0): unknown {
+  if (!schema || depth > MAX_EXAMPLE_DEPTH) return undefined
+  const resolved = resolveRef<OpenAPIV3.SchemaObject>(spec, schema)
+  if (!resolved) return undefined
+
+  if (resolved.example !== undefined) return resolved.example
+
+  if (resolved.type === 'array' && resolved.items) {
+    const item = generateExample(spec, resolved.items, depth + 1)
+    return item !== undefined ? [item] : []
+  }
+
+  if (resolved.properties) {
+    const obj: Record<string, unknown> = {}
+    for (const [name, propSchema] of Object.entries(resolved.properties)) {
+      const prop = resolveRef<OpenAPIV3.SchemaObject>(spec, propSchema)
+      if (prop?.example !== undefined) {
+        obj[name] = prop.example
+      }
+      else {
+        const val = generateExample(spec, propSchema, depth + 1)
+        if (val !== undefined) obj[name] = val
+      }
+    }
+    return obj
+  }
+
+  return defaultForType(resolved.type as string, resolved.format)
+}

package/src/components/OrganizationNameWithCertificate.vue

@@ -7,7 +7,7 @@
     <component
       :is="as"
       class="mb-0 truncate flex-initial"
-      :class="[colorClass, { 'text-xs': size === 'xs', 'text-sm': size === 'sm', 'text-base': size === 'base' }]"
+      :class="[colorClass, { 'text-xs': size === 'xs', 'text-sm': size === 'sm', 'text-base': size === 'base', 'text-xl sm:text-2xl': size === 'xl' }]"
     >
       {{ organization.name }}
       <small
@@ -24,6 +24,7 @@
           'size-3': size === 'xs',
           'size-4': size === 'sm',
           'size-5': size === 'base',
+          'size-6': size === 'xl',
         }"
         :aria-label="t(`L'identité de ce service public est certifiée par {certifier}`, { certifier: config.name })"
         aria-hidden="true"
@@ -53,7 +54,7 @@ withDefaults(defineProps<{
   organization: Organization | OrganizationReference
   showAcronym?: boolean
   showType?: boolean
-  size?: 'base' | 'sm' | 'xs'
+  size?: 'xl' | 'base' | 'sm' | 'xs'
   colorClass?: string
   as?: string
 }>(), {

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,9 @@
 
 <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'
 
 type Props = {
   /**
@@ -112,10 +114,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,51 +129,13 @@ 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) {
@@ -188,20 +148,20 @@ function change(index: number) {
 }
 
 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 +171,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/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,160 @@
+<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">
+      <dt class="font-bold fr-text--sm fr-mb-0">
+        {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
+      </dt>
+      <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 { useFormatDate } from '../../functions/dates'
+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 { formatRelativeIfRecentDate } = useFormatDate()
+
+const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+
+const conversionsLastUpdate = computed(() =>
+  formatRelativeIfRecentDate(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>