@datagouv/components-next 1.0.2-dev.57 → 1.0.2-dev.59

package/dist/{vue3-xml-viewer.common-X_gxbf2s.js → vue3-xml-viewer.common-lELDJ2z7.js}

@@ -1,4 +1,4 @@
-import { c as Ke } from "./main-5ZJvZtsQ.js";
+import { c as Ke } from "./main-jWuVtc9s.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.2-dev.57",
+  "version": "1.0.2-dev.59",
   "private": false,
   "type": "module",
   "engines": {

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/Search/GlobalSearch.vue

@@ -5,13 +5,14 @@
     @submit.prevent
   >
     <div
+      v-if="!hideSearchInput"
       ref="search"
       class="flex flex-wrap items-center justify-between"
       data-cy="search"
     >
       <SearchInput
         v-model="q"
-        :placeholder="placeholder || typesMeta[currentType].placeholder"
+        :placeholder="placeholder || strategies[currentTypeConfig?.class ?? 'datasets'].placeholder"
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -30,13 +31,13 @@
             >
               <RadioInput
                 v-for="typeConfig in config"
-                :key="typeConfig.class"
-                :value="typeConfig.class"
-                :count="typesMeta[typeConfig.class].results.value?.total"
-                :loading="typesMeta[typeConfig.class].status.value === 'pending' || typesMeta[typeConfig.class].status.value === 'idle'"
-                :icon="typesMeta[typeConfig.class].icon"
+                :key="configKey(typeConfig)"
+                :value="configKey(typeConfig)"
+                :count="resultsMap[configKey(typeConfig)]?.data.value?.total"
+                :loading="resultsMap[configKey(typeConfig)]?.status.value === 'pending' || resultsMap[configKey(typeConfig)]?.status.value === 'idle'"
+                :icon="strategies[typeConfig.class].icon"
               >
-                {{ typeConfig.name || typesMeta[typeConfig.class].name }}
+                {{ typeConfig.name || strategies[typeConfig.class].name }}
               </RadioInput>
             </RadioGroup>
           </Sidemenu>
@@ -127,7 +128,7 @@
                 v-model="producerType"
                 :facets="getFacets('producer_type')"
                 :loading="searchResultsStatus === 'pending'"
-                :exclude="currentType === 'organizations' ? ['user'] : []"
+                :exclude="currentTypeConfig?.class === 'organizations' ? ['user'] : []"
                 :style="{ order: getOrder('producer_type') }"
               />
               <DatasetBadgeFilter
@@ -229,7 +230,7 @@
         <transition mode="out-in">
           <LoadingBlock
             v-slot="{ data: results }"
-            :status="searchResultsStatus"
+            :status="searchResultsStatus!"
             :data="searchResults"
           >
             <div v-if="results && results.data.length">
@@ -239,7 +240,7 @@
                   :key="result.id"
                   class="p-0"
                 >
-                  <template v-if="currentType === 'datasets'">
+                  <template v-if="currentTypeConfig?.class === 'datasets'">
                     <slot
                       name="dataset"
                       :dataset="result"
@@ -247,7 +248,7 @@
                       <DatasetCard :dataset="(result as Dataset)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'dataservices'">
+                  <template v-else-if="currentTypeConfig?.class === 'dataservices'">
                     <slot
                       name="dataservice"
                       :dataservice="result"
@@ -255,7 +256,7 @@
                       <DataserviceCard :dataservice="(result as Dataservice)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'reuses'">
+                  <template v-else-if="currentTypeConfig?.class === 'reuses'">
                     <slot
                       name="reuse"
                       :reuse="result"
@@ -263,7 +264,7 @@
                       <ReuseHorizontalCard :reuse="(result as Reuse)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'organizations'">
+                  <template v-else-if="currentTypeConfig?.class === 'organizations'">
                     <slot
                       name="organization"
                       :organization="result"
@@ -271,7 +272,7 @@
                       <OrganizationHorizontalCard :organization="(result as Organization)" />
                     </slot>
                   </template>
-                  <template v-else-if="currentType === 'topics'">
+                  <template v-else-if="currentTypeConfig?.class === 'topics'">
                     <slot
                       name="topic"
                       :topic="result"
@@ -348,7 +349,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Ref } from 'vue'
+import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
@@ -358,12 +359,13 @@ import { forEachActiveCustomFilter, isCustomFilterActive, searchFilterContextKey
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
 import type { Reuse } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
-import type { GlobalSearchConfig, SearchType, SortOption, DatasetSearchResponse, DataserviceSearchResponse, ReuseSearchResponse, OrganizationSearchResponse, TopicSearchResponse, FacetItem } from '../../types/search'
+import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SearchTypeConfig, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
 import BrandedButton from '../BrandedButton.vue'
 import LoadingBlock from '../LoadingBlock.vue'
@@ -397,13 +399,17 @@ import ReuseTypeFilter from './Filter/ReuseTypeFilter.vue'
 const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
   placeholder?: string
+  hideSearchInput?: boolean
 }>(), {
   config: getDefaultGlobalSearchConfig,
+  hideSearchInput: false,
 })
 
+const configKey = (c: SearchTypeConfig) => c.key ?? c.class
+
 // defineModel's default is static and can't depend on props, so we cast and initialize manually
-const currentType = defineModel<SearchType>('type') as Ref<SearchType>
-if (!currentType.value) currentType.value = props.config[0]?.class ?? 'datasets'
+const currentType = defineModel<string>('type') as Ref<string>
+if (!currentType.value) currentType.value = configKey(props.config[0] ?? { class: 'datasets' })
 
 const { t } = useTranslation()
 const componentsConfig = useComponentsConfig()
@@ -419,7 +425,7 @@ const customFilterStops = new Map<string, () => void>()
 const initialType = currentType.value
 
 const currentTypeConfig = computed(() =>
-  props.config.find(c => c.class === currentType.value),
+  props.config.find(c => configKey(c) === currentType.value),
 )
 
 const activeBasicFilters = computed(() =>
@@ -532,13 +538,6 @@ watch(currentType, () => {
   }
 })
 
-// Check which types are enabled
-const datasetsEnabled = computed(() => props.config.some(c => c.class === 'datasets'))
-const dataservicesEnabled = computed(() => props.config.some(c => c.class === 'dataservices'))
-const reusesEnabled = computed(() => props.config.some(c => c.class === 'reuses'))
-const organizationsEnabled = computed(() => props.config.some(c => c.class === 'organizations'))
-const topicsEnabled = computed(() => props.config.some(c => c.class === 'topics'))
-
 // Create stable params for each type
 const stableParamsOptions = {
   allFilters,
@@ -549,33 +548,87 @@ const stableParamsOptions = {
   pageSize,
 }
 
-const datasetsParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'datasets'),
-})
-const dataservicesParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'dataservices'),
-})
-const reusesParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'reuses'),
-})
-const organizationsParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'organizations'),
-})
-const topicsParams = useStableQueryParams({
-  ...stableParamsOptions,
-  typeConfig: props.config.find(c => c.class === 'topics'),
-})
+// Discriminated union: each variant carries its own response type so a `class`
+// narrow gives the precise shape of `data.value` (no cast needed).
+type SearchEntry = {
+  [K in SearchType]: {
+    class: K
+    data: Ref<SearchResponseByClass[K] | null>
+    status: Ref<AsyncDataRequestStatus>
+  }
+}[SearchType]
+
+// One strategy per class consolidates everything that varies by class:
+// metadata (icon/name/placeholder), endpoint, and a typed fetch factory.
+type SearchStrategy<C extends SearchType> = {
+  url: string
+  icon: Component
+  name: string
+  placeholder: string
+  fetch: (
+    params: Ref<Record<string, unknown>>,
+    server: boolean,
+  ) => Promise<Extract<SearchEntry, { class: C }>>
+}
 
-// URLs that return null when type is not enabled
-const datasetsUrl = computed(() => datasetsEnabled.value ? '/api/2/datasets/search/' : null)
-const dataservicesUrl = computed(() => dataservicesEnabled.value ? '/api/2/dataservices/search/' : null)
-const reusesUrl = computed(() => reusesEnabled.value ? '/api/2/reuses/search/' : null)
-const organizationsUrl = computed(() => organizationsEnabled.value ? '/api/2/organizations/search/' : null)
-const topicsUrl = computed(() => topicsEnabled.value ? '/api/2/topics/search/' : null)
+function makeStrategy<C extends SearchType>(
+  cls: C,
+  meta: Omit<SearchStrategy<C>, 'fetch'>,
+): SearchStrategy<C> {
+  return {
+    ...meta,
+    fetch: async (params, server) => {
+      const { data, status } = await useFetch<SearchResponseByClass[C]>(
+        meta.url,
+        { params, lazy: true, server },
+      )
+      // Tautologically equivalent to Extract<SearchEntry, { class: C }>, but TS
+      // cannot prove it on a generic C, so we assert.
+      return { class: cls, data, status } as Extract<SearchEntry, { class: C }>
+    },
+  }
+}
+
+const strategies: { [K in SearchType]: SearchStrategy<K> } = {
+  datasets: makeStrategy('datasets', {
+    url: '/api/2/datasets/search/',
+    icon: RiDatabase2Line,
+    name: t('Jeux de données'),
+    placeholder: t('ex. élections présidentielles'),
+  }),
+  dataservices: makeStrategy('dataservices', {
+    url: '/api/2/dataservices/search/',
+    icon: RiTerminalLine,
+    name: t('API'),
+    placeholder: t('ex: SIRENE'),
+  }),
+  reuses: makeStrategy('reuses', {
+    url: '/api/2/reuses/search/',
+    icon: RiLineChartLine,
+    name: t('Réutilisations'),
+    placeholder: t('Rechercher une réutilisation de données'),
+  }),
+  organizations: makeStrategy('organizations', {
+    url: '/api/2/organizations/search/',
+    icon: RiBuilding2Line,
+    name: t('Organisations'),
+    placeholder: t('Rechercher une organisation'),
+  }),
+  topics: makeStrategy('topics', {
+    url: '/api/2/topics/search/',
+    icon: RiBookShelfLine,
+    name: t('Thématiques'),
+    placeholder: t('Rechercher une thématique'),
+  }),
+}
+
+// One params + fetch per config entry, keyed by configKey
+const resultsMap: Record<string, SearchEntry> = {}
+for (const c of props.config) {
+  const key = configKey(c)
+  const params = useStableQueryParams({ ...stableParamsOptions, typeConfig: c })
+  resultsMap[key] = await strategies[c.class].fetch(params, initialType === key)
+}
 
 // Reset page on filter/sort change. Custom filters (registered via
 // useSearchFilter) have their own watchers set up in `provide`, so they're
@@ -648,80 +701,18 @@ function resetFilters() {
   flushQ()
 }
 
-// API calls only for enabled types (useFetch skips when URL is null)
-// Only the initial type is fetched during SSR, others are client-side only
-const { data: datasetsResults, status: datasetsStatus } = await useFetch<DatasetSearchResponse<Dataset>>(
-  datasetsUrl,
-  { params: datasetsParams, lazy: true, server: initialType === 'datasets' },
-)
-const { data: dataservicesResults, status: dataservicesStatus } = await useFetch<DataserviceSearchResponse<Dataservice>>(
-  dataservicesUrl,
-  { params: dataservicesParams, lazy: true, server: initialType === 'dataservices' },
-)
-const { data: reusesResults, status: reusesStatus } = await useFetch<ReuseSearchResponse<Reuse>>(
-  reusesUrl,
-  { params: reusesParams, lazy: true, server: initialType === 'reuses' },
-)
-const { data: organizationsResults, status: organizationsStatus } = await useFetch<OrganizationSearchResponse<Organization>>(
-  organizationsUrl,
-  { params: organizationsParams, lazy: true, server: initialType === 'organizations' },
-)
-const { data: topicsResults, status: topicsStatus } = await useFetch<TopicSearchResponse<TopicV2>>(
-  topicsUrl,
-  { params: topicsParams, lazy: true, server: initialType === 'topics' },
-)
-
-const typesMeta = {
-  datasets: {
-    icon: RiDatabase2Line,
-    name: t('Jeux de données'),
-    placeholder: t('ex. élections présidentielles'),
-    results: datasetsResults,
-    status: datasetsStatus,
-  },
-  dataservices: {
-    icon: RiTerminalLine,
-    name: t('API'),
-    placeholder: t('ex: SIRENE'),
-    results: dataservicesResults,
-    status: dataservicesStatus,
-  },
-  reuses: {
-    icon: RiLineChartLine,
-    name: t('Réutilisations'),
-    placeholder: t('Rechercher une réutilisation de données'),
-    results: reusesResults,
-    status: reusesStatus,
-  },
-  organizations: {
-    icon: RiBuilding2Line,
-    name: t('Organisations'),
-    placeholder: t('Rechercher une organisation'),
-    results: organizationsResults,
-    status: organizationsStatus,
-  },
-  topics: {
-    icon: RiBookShelfLine,
-    name: t('Thématiques'),
-    placeholder: t('Rechercher une thématique'),
-    results: topicsResults,
-    status: topicsStatus,
-  },
-} as const
-
-const searchResults = computed(() => typesMeta[currentType.value].results.value)
-const searchResultsStatus = computed(() => typesMeta[currentType.value].status.value)
+const searchResults = computed(() => resultsMap[currentType.value]?.data.value)
+const searchResultsStatus = computed(() => resultsMap[currentType.value]?.status.value)
 
 // RSS feed URL for datasets
 const rssUrl = computed(() => {
-  if (currentType.value !== 'datasets') return null
+  if (currentTypeConfig.value?.class !== 'datasets') return null
 
   const params = new URLSearchParams()
-  const datasetsConfig = props.config.find(c => c.class === 'datasets')
 
   // Add hidden filters first
-  if (datasetsConfig?.hiddenFilters) {
-    for (const hf of datasetsConfig.hiddenFilters) {
+  if (currentTypeConfig.value?.hiddenFilters) {
+    for (const hf of currentTypeConfig.value.hiddenFilters) {
       if (hf?.value) params.set(hf.key as string, String(hf.value))
     }
   }

package/src/types/search.ts

@@ -1,5 +1,10 @@
 import type { PaginatedArray } from './api'
 import type { AccessType } from './access_types'
+import type { Dataset } from './datasets'
+import type { Dataservice } from './dataservices'
+import type { Organization } from './organizations'
+import type { Reuse } from './reuses'
+import type { TopicV2 } from './topics'
 import type {
   CERTIFIED,
   PUBLIC_SERVICE,
@@ -291,6 +296,7 @@ export type SortOption<Sort extends string> = {
 
 export type DatasetSearchConfig = {
   class: 'datasets'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<DatasetSearchFilters>[]
   basicFilters?: (keyof DatasetSearchFilters)[]
@@ -300,6 +306,7 @@ export type DatasetSearchConfig = {
 
 export type DataserviceSearchConfig = {
   class: 'dataservices'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<DataserviceSearchFilters>[]
   basicFilters?: (keyof DataserviceSearchFilters)[]
@@ -309,6 +316,7 @@ export type DataserviceSearchConfig = {
 
 export type ReuseSearchConfig = {
   class: 'reuses'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<ReuseSearchFilters>[]
   basicFilters?: (keyof ReuseSearchFilters)[]
@@ -318,6 +326,7 @@ export type ReuseSearchConfig = {
 
 export type OrganizationSearchConfig = {
   class: 'organizations'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<OrganizationSearchFilters>[]
   basicFilters?: (keyof OrganizationSearchFilters)[]
@@ -327,6 +336,7 @@ export type OrganizationSearchConfig = {
 
 export type TopicSearchConfig = {
   class: 'topics'
+  key?: string
   name?: string
   hiddenFilters?: HiddenFilter<TopicSearchFilters>[]
   basicFilters?: (keyof TopicSearchFilters)[]
@@ -340,6 +350,15 @@ export type SearchType = SearchTypeConfig['class']
 
 export type GlobalSearchConfig = SearchTypeConfig[]
 
+// Maps each search class to its concrete response shape.
+export type SearchResponseByClass = {
+  datasets: DatasetSearchResponse<Dataset>
+  dataservices: DataserviceSearchResponse<Dataservice>
+  reuses: ReuseSearchResponse<Reuse>
+  organizations: OrganizationSearchResponse<Organization>
+  topics: TopicSearchResponse<TopicV2>
+}
+
 // Helper functions for default configs
 
 export const defaultDatasetSortOptions: SortOption<DatasetSearchSort>[] = [