@datagouv/components-next 1.1.1 → 1.2.0

package/src/composables/useTabularProfile.ts

@@ -0,0 +1,70 @@
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
+  refresh: () => Promise<void>
+}
+
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const config = useComponentsConfig()
+  const ridRef = computed(() => toValue(resourceId))
+
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
+
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return await injected.state
+  }
+  return await createProfileState(resourceId)
+}

package/src/config.ts

@@ -1,6 +1,6 @@
 import { inject, type Component, type InjectionKey } from 'vue'
 import type { UseFetchFunction } from './functions/api.types'
-import type { FetchOptions } from 'ofetch'
+import type { $Fetch, FetchOptions } from 'ofetch'
 
 export type PluginConfig = {
   name: string // Name of the application (ex: data.gouv.fr)
@@ -25,6 +25,16 @@ export type PluginConfig = {
   tabularAllowRemote?: boolean
   tabularApiDataserviceId?: string
   customUseFetch?: UseFetchFunction | null
+  /**
+   * Imperative configured fetch (auth, headers, error handling): the single source of truth for
+   * requests. The default `useFetch` uses it as its transport, and imperative helpers (metrics CSV
+   * export, …) call it directly — so they never need a `?? ofetch` fallback.
+   * Optional for consumers: when omitted, the plugin defaults it to an `ofetch` instance built from
+   * the `onRequest`/`onResponse` hooks below (see the `datagouv` plugin install). A consumer can
+   * instead provide its own (e.g. a Bearer-authenticated `$fetch`) and skip the hooks entirely.
+   */
+  $fetch?: $Fetch | null
+  /** Auth/headers/error hooks. Folded into the default `$fetch` when no `$fetch` is provided. */
   onRequest?: FetchOptions['onRequest']
   onRequestError?: FetchOptions['onRequestError']
   onResponse?: FetchOptions['onResponse']
@@ -38,8 +48,12 @@ export type PluginConfig = {
 
 export const configKey = Symbol() as InjectionKey<PluginConfig>
 
-export function useComponentsConfig(): PluginConfig {
+// After the `datagouv` plugin install, `$fetch` is always set (defaulted to an ofetch instance), so
+// consumers of the config can rely on it without a fallback.
+export type ResolvedPluginConfig = PluginConfig & { $fetch: $Fetch }
+
+export function useComponentsConfig(): ResolvedPluginConfig {
   const config = inject(configKey)
   if (!config) throw new Error('Calling `useComponentsConfig` outside @datagouv/components')
-  return config
+  return config as ResolvedPluginConfig
 }

package/src/functions/activities.ts

@@ -11,9 +11,9 @@ export function getActivityTranslation(activity: Activity): string {
     'dataset:deleted': t('a supprimé le jeu de données'),
     'dataset:discussed': t('a discuté du jeu de données'),
     'dataset:followed': t('suit le jeu de données'),
-    'dataset:resource:added': t('a ajouté une ressource'),
-    'dataset:resource:updated': t('a mis à jour une ressource'),
-    'dataset:resource:deleted': t('a supprimé une ressource'),
+    'dataset:resource:added': t('a ajouté la ressource'),
+    'dataset:resource:updated': t('a mis à jour la ressource'),
+    'dataset:resource:deleted': t('a supprimé la ressource'),
     'dataservice:created': t('a créé le service de données'),
     'dataservice:updated': t('a mis à jour le service de données'),
     'dataservice:deleted': t('a supprimé le service de données'),

package/src/functions/api.ts

@@ -1,7 +1,6 @@
 import { ref, toValue, watchEffect, onMounted, type ComputedRef, type MaybeRefOrGetter, type Ref } from 'vue'
 import { ofetch } from 'ofetch'
 import { useComponentsConfig } from '../config'
-import { useTranslation } from '../composables/useTranslation'
 import type { AsyncData, AsyncDataRequestStatus, UseFetchOptions } from './api.types'
 
 function deepToValue(obj: MaybeRefOrGetter<Record<string, unknown> | undefined>): Record<string, unknown> | undefined {
@@ -18,8 +17,6 @@ export async function useFetch<DataT, ErrorT = never>(
 ): Promise<AsyncData<DataT, ErrorT>> {
   const config = useComponentsConfig()
 
-  const { locale } = useTranslation()
-
   if (config.customUseFetch) {
     return await config.customUseFetch(url, options)
   }
@@ -37,38 +34,12 @@ export async function useFetch<DataT, ErrorT = never>(
     status.value = 'pending'
     try {
       data.value = isRaw
+        // Raw targets another data.gouv service (the Tabular API in TabularExplorer) via its own
+        // absolute URL, so it must stay bare ofetch: no datagouv apiBase, no datagouv auth attached.
         ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
-        : await ofetch<DataT | null>(urlValue, {
-            baseURL: config.apiBase,
-            params: params ?? query,
-            onRequest(param) {
-              if (config.onRequest) {
-                if (Array.isArray(config.onRequest)) {
-                  config.onRequest.forEach(r => r(param))
-                }
-                else {
-                  config.onRequest(param)
-                }
-              }
-              const { options } = param
-              options.headers.set('Content-Type', 'application/json')
-              options.headers.set('Accept', 'application/json')
-              options.credentials = 'include'
-              if (config.devApiKey) {
-                options.headers.set('X-API-KEY', config.devApiKey)
-              }
-
-              if (locale) {
-                if (!options.params) {
-                  options.params = {}
-                }
-                options.params['lang'] = locale
-              }
-            },
-            onRequestError: config.onRequestError,
-            onResponse: config.onResponse,
-            onResponseError: config.onResponseError,
-          })
+        // The configured `$fetch` carries baseURL + auth + headers (see the `datagouv` plugin install
+        // for the default one). We only forward the URL and params here.
+        : await config.$fetch<DataT | null>(urlValue, { baseURL: config.apiBase, params: params ?? query })
       status.value = 'success'
     }
     catch (e) {

package/src/functions/metrics.ts

@@ -1,5 +1,5 @@
 import { escapeCsvValue } from './helpers'
-import { ofetch } from 'ofetch'
+import { ofetch, type $Fetch } from 'ofetch'
 import type { DatasetV2 } from '../types/datasets'
 import type { PaginatedArray } from '../types/api'
 
@@ -119,14 +119,16 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
-export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string, apiFetch: $Fetch) {
   let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
 
-  // fetch datasets info from organization datasets
+  // fetch datasets info from organization datasets through the configured fetch, so it carries the
+  // consumer's auth (cookie for cdata via `$api`, Bearer for verticals) instead of a hardcoded
+  // `credentials: 'include'`, which breaks CORS cross-origin on the verticals.
   const datasets: Record<string, Record<string, string>> = {}
   let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
   while (datasetsUrl) {
-    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    const body: PaginatedArray<DatasetV2> = await apiFetch(datasetsUrl, { baseURL: apiBase })
     datasetsUrl = body.next_page
     for (const row of body.data) {
       datasets[row.id] = { title: row.title }

package/src/main.ts

@@ -40,6 +40,9 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DataStructure from './components/ResourceAccordion/DataStructure.vue'
+import Downloads from './components/ResourceAccordion/Downloads.vue'
+import Metadata from './components/ResourceAccordion/Metadata.vue'
 import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
@@ -60,6 +63,7 @@ import LoadingBlock from './components/LoadingBlock.vue'
 import MarkdownViewer from './components/MarkdownViewer.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationHorizontalCard from './components/OrganizationHorizontalCard.vue'
+import ObjectCardOwner from './components/ObjectCardOwner.vue'
 import OrganizationLogo from './components/OrganizationLogo.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -73,6 +77,7 @@ import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceSelector from './components/ResourceExplorer/ResourceSelector.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
@@ -82,9 +87,6 @@ import ReuseHorizontalCard from './components/ReuseHorizontalCard.vue'
 import ReuseDetails from './components/ReuseDetails.vue'
 import SchemaCard from './components/SchemaCard.vue'
 import SimpleBanner from './components/SimpleBanner.vue'
-import SmallChart from './components/SmallChart.vue'
-import ChartViewer from './components/Chart/ChartViewer.vue'
-import ChartViewerWrapper from './components/Chart/ChartViewerWrapper.vue'
 import StatBox from './components/StatBox.vue'
 import Tab from './components/Tabs/Tab.vue'
 import TabGroup from './components/Tabs/TabGroup.vue'
@@ -104,6 +106,8 @@ import InfiniteLoader from './components/InfiniteLoader.vue'
 import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
+import { ofetch } from 'ofetch'
+import { useTranslation } from './composables/useTranslation'
 
 export { Toaster, toast } from 'vue-sonner'
 
@@ -113,6 +117,8 @@ export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
+export * from './composables/useResourceCapabilities'
+export * from './composables/useTabularProfile'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -278,6 +284,31 @@ export {
 // Vue Plugin
 const datagouv: Plugin<PluginConfig> = {
   async install(app: App, options) {
+    // Default `$fetch` to an ofetch instance carrying the datagouv API specifics + the consumer's
+    // auth hooks, so everything downstream (the default `useFetch`, imperative helpers) can rely on
+    // a single configured fetch. A consumer that provides its own `$fetch` keeps full control.
+    if (!options.$fetch) {
+      options.$fetch = ofetch.create({
+        baseURL: options.apiBase,
+        onRequest(context) {
+          if (options.onRequest) {
+            if (Array.isArray(options.onRequest)) options.onRequest.forEach(hook => hook(context))
+            else options.onRequest(context)
+          }
+          context.options.headers.set('Content-Type', 'application/json')
+          context.options.headers.set('Accept', 'application/json')
+          if (options.devApiKey) context.options.headers.set('X-API-KEY', options.devApiKey)
+          const { locale } = useTranslation()
+          if (locale) {
+            context.options.params ??= {}
+            context.options.params['lang'] = locale
+          }
+        },
+        onRequestError: options.onRequestError,
+        onResponse: options.onResponse,
+        onResponseError: options.onResponseError,
+      })
+    }
     app.provide(configKey, options)
     if (!options.textClamp) {
       const textClamp = await import('vue3-text-clamp')
@@ -299,6 +330,9 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
+  DataStructure,
+  Downloads,
+  Metadata,
   DatasetInformationSection,
   DatasetTemporalitySection,
   DatasetSpatialSection,
@@ -338,15 +372,14 @@ export {
   ResourceExplorer,
   ResourceExplorerSidebar,
   ResourceExplorerViewer,
+  ObjectCardOwner,
   ResourceIcon,
+  ResourceSelector,
   ReuseCard,
   ReuseDetails,
   ReuseHorizontalCard,
   SchemaCard,
   SimpleBanner,
-  SmallChart,
-  ChartViewer,
-  ChartViewerWrapper,
   StatBox,
   OpenApiViewer,
   Tab,

package/src/types/search.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'vue'
 import type { PaginatedArray } from './api'
 import type { AccessType } from './access_types'
 import type { Dataset } from './datasets'
@@ -298,55 +299,65 @@ export type DatasetSearchConfig = {
   class: 'datasets'
   key?: string
   name?: string
+  icon?: Component | string
   placeholder?: string | null
   hiddenFilters?: HiddenFilter<DatasetSearchFilters>[]
   basicFilters?: (keyof DatasetSearchFilters)[]
   advancedFilters?: (keyof DatasetSearchFilters)[]
   sortOptions?: SortOption<DatasetSearchSort>[]
+  defaultSort?: DatasetSearchSort
 }
 
 export type DataserviceSearchConfig = {
   class: 'dataservices'
   key?: string
   name?: string
+  icon?: Component | string
   placeholder?: string | null
   hiddenFilters?: HiddenFilter<DataserviceSearchFilters>[]
   basicFilters?: (keyof DataserviceSearchFilters)[]
   advancedFilters?: (keyof DataserviceSearchFilters)[]
   sortOptions?: SortOption<DataserviceSearchSort>[]
+  defaultSort?: DataserviceSearchSort
 }
 
 export type ReuseSearchConfig = {
   class: 'reuses'
   key?: string
   name?: string
+  icon?: Component | string
   placeholder?: string | null
   hiddenFilters?: HiddenFilter<ReuseSearchFilters>[]
   basicFilters?: (keyof ReuseSearchFilters)[]
   advancedFilters?: (keyof ReuseSearchFilters)[]
   sortOptions?: SortOption<ReuseSearchSort>[]
+  defaultSort?: ReuseSearchSort
 }
 
 export type OrganizationSearchConfig = {
   class: 'organizations'
   key?: string
   name?: string
+  icon?: Component | string
   placeholder?: string | null
   hiddenFilters?: HiddenFilter<OrganizationSearchFilters>[]
   basicFilters?: (keyof OrganizationSearchFilters)[]
   advancedFilters?: (keyof OrganizationSearchFilters)[]
   sortOptions?: SortOption<OrganizationSearchSort>[]
+  defaultSort?: OrganizationSearchSort
 }
 
 export type TopicSearchConfig = {
   class: 'topics'
   key?: string
   name?: string
+  icon?: Component | string
   placeholder?: string | null
   hiddenFilters?: HiddenFilter<TopicSearchFilters>[]
   basicFilters?: (keyof TopicSearchFilters)[]
   advancedFilters?: (keyof TopicSearchFilters)[]
   sortOptions?: SortOption<TopicSearchSort>[]
+  defaultSort?: TopicSearchSort
 }
 
 export type SearchTypeConfig = DatasetSearchConfig | DataserviceSearchConfig | ReuseSearchConfig | OrganizationSearchConfig | TopicSearchConfig

package/src/types/ui.ts

@@ -1,3 +1,5 @@
 export type WellType = 'primary' | 'secondary'
 
 export type Weight = 'light' | 'regular' | 'semi-bold' | 'bold' | 'heavy'
+
+export type TitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'