@datagouv/components-next 1.0.2-dev.9 → 1.1.1

package/src/components/OpenApiViewer/SchemaPanel.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="flex items-center gap-2 mb-2">
+      <button
+        type="button"
+        class="text-xs font-medium px-2 py-0.5 rounded"
+        :class="view === 'schema' ? 'bg-gray-200 text-gray-title' : 'text-gray-medium hover:text-gray-title'"
+        @click="view = 'schema'"
+      >
+        {{ t("Schéma") }}
+      </button>
+      <button
+        type="button"
+        class="text-xs font-medium px-2 py-0.5 rounded"
+        :class="view === 'example' ? 'bg-gray-200 text-gray-title' : 'text-gray-medium hover:text-gray-title'"
+        @click="view = 'example'"
+      >
+        {{ t("Exemple") }}
+      </button>
+    </div>
+    <SchemaTree
+      v-if="view === 'schema'"
+      :spec="spec"
+      :schema="schema"
+    />
+    <pre
+      v-else
+      class="text-xs font-mono bg-gray-50 rounded p-3 overflow-x-auto m-0 text-gray-title"
+    >{{ exampleJson }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import SchemaTree from './SchemaTree.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { generateExample } from './openapi'
+import type { OpenAPIV3 } from 'openapi-types'
+
+const props = defineProps<{
+  spec: OpenAPIV3.Document
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject
+}>()
+
+const { t } = useTranslation()
+
+const view = ref<'schema' | 'example'>('schema')
+
+const exampleJson = computed(() => {
+  const example = generateExample(props.spec, props.schema)
+  return JSON.stringify(example, null, 2)
+})
+</script>

package/src/components/OpenApiViewer/SchemaTree.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="text-xs overflow-hidden">
+    <div
+      v-for="prop in properties"
+      :key="prop.name"
+      class="border-b border-gray-100 last:border-0"
+    >
+      <div class="flex items-baseline gap-2 py-1.5 min-w-0">
+        <button
+          v-if="hasNestedProperties(spec, prop.schema)"
+          type="button"
+          class="shrink-0 flex items-center gap-1 font-mono text-gray-title hover:text-gray-800"
+          @click="toggle(prop.name)"
+        >
+          <RiArrowRightSLine
+            class="size-3 text-gray-medium transition-transform"
+            :class="{ 'rotate-90': expanded.has(prop.name) }"
+          />
+          {{ prop.name }}
+          <span
+            v-if="prop.required"
+            class="text-red-600"
+          >*</span>
+        </button>
+        <span
+          v-else
+          class="font-mono text-gray-title pl-4"
+        >
+          {{ prop.name }}
+          <span
+            v-if="prop.required"
+            class="text-red-600"
+          >*</span>
+        </span>
+        <span class="font-mono text-gray-medium whitespace-nowrap">{{ prop.type }}</span>
+        <span
+          v-if="prop.description"
+          class="text-gray-medium truncate"
+        >{{ prop.description }}</span>
+      </div>
+      <div
+        v-if="expanded.has(prop.name) && hasNestedProperties(spec, prop.schema)"
+        class="pl-4 ml-1.5 border-l border-gray-200"
+      >
+        <SchemaTree
+          :spec="spec"
+          :schema="getNestedSchema(spec, prop.schema)!"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { RiArrowRightSLine } from '@remixicon/vue'
+import { getSchemaProperties, hasNestedProperties, getNestedSchema } from './openapi'
+import type { OpenAPIV3 } from 'openapi-types'
+
+const props = defineProps<{
+  spec: OpenAPIV3.Document
+  schema: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject
+}>()
+
+const properties = computed(() => getSchemaProperties(props.spec, props.schema))
+
+const expanded = reactive(new Set<string>())
+
+function toggle(name: string) {
+  if (expanded.has(name)) {
+    expanded.delete(name)
+  }
+  else {
+    expanded.add(name)
+  }
+}
+</script>

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

@@ -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'
 

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