@datagouv/components-next 1.0.2-dev.224 → 1.0.2-dev.226

package/dist/{vue3-xml-viewer.common-DhlRLVze.js → vue3-xml-viewer.common-DvtdBvwr.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-Cv5Nde60.js";
+import { g as Ke } from "./main-DGD6P2pt.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.224",
+  "version": "1.0.2-dev.226",
   "private": false,
   "type": "module",
   "engines": {

package/src/components/RadioInput.vue

@@ -26,6 +26,7 @@
     </span>
     <span
       v-if="loading || count !== undefined"
+      data-testid="radio-count"
       class="text-xs font-bold px-1 py-0.5 rounded"
       :class="isSelected && highlighted ? 'bg-white/20 text-white' : 'bg-gray-200 text-gray-600'"
     >

package/src/components/Search/GlobalSearch.vue

@@ -34,7 +34,7 @@
                 :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'"
+                :loading="resultsMap[configKey(typeConfig)]?.countsLoading.value"
                 :icon="typeConfig.icon ?? strategies[typeConfig.class].icon"
               >
                 {{ typeConfig.name || strategies[typeConfig.class].name }}
@@ -106,28 +106,28 @@
                 v-if="isEnabled('format_family')"
                 v-model="formatFamily"
                 :facets="getFacets('format_family')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :style="{ order: getOrder('format_family') }"
               />
               <AccessTypeFilter
                 v-if="isEnabled('access_type')"
                 v-model="accessType"
                 :facets="getFacets('access_type')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :style="{ order: getOrder('access_type') }"
               />
               <LastUpdateRangeFilter
                 v-if="isEnabled('last_update_range')"
                 v-model="lastUpdateRange"
                 :facets="getFacets('last_update')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :style="{ order: getOrder('last_update_range') }"
               />
               <ProducerTypeFilter
                 v-if="isEnabled('producer_type')"
                 v-model="producerType"
                 :facets="getFacets('producer_type')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :exclude="currentTypeConfig?.class === 'organizations' ? ['user'] : []"
                 :style="{ order: getOrder('producer_type') }"
               />
@@ -135,14 +135,14 @@
                 v-if="isEnabled('badge')"
                 v-model="badge"
                 :facets="getFacets('badge')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :style="{ order: getOrder('badge') }"
               />
               <ReuseTypeFilter
                 v-if="isEnabled('type')"
                 v-model="reuseType"
                 :facets="getFacets('type')"
-                :loading="searchResultsStatus === 'pending'"
+                :loading="facetsLoading"
                 :style="{ order: getOrder('type') }"
               />
               <slot
@@ -354,7 +354,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, shallowReactive, useSlots, watch, useTemplateRef, type Component, type Ref } from 'vue'
+import { computed, provide, ref, shallowReactive, useSlots, watch, useTemplateRef, type Component, type ComputedRef, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
 import { useRoute } from 'vue-router'
 import { RiBookShelfLine, RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
@@ -365,6 +365,7 @@ import { configKey, forEachActiveCustomFilter, isCustomFilterActive, searchFilte
 import { useStableQueryParams } from '../../composables/useStableQueryParams'
 import { useComponentsConfig } from '../../config'
 import { useFetch } from '../../functions/api'
+import { isEqualExcept } from '../../functions/helpers'
 import { scrollToBlockTop } from '../../functions/scroll'
 import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
@@ -590,15 +591,21 @@ const stableParamsOptions = {
   sort,
   page,
   pageSize,
+  currentType,
+}
+
+// Refs produced by the fetch, before the counts loading state is attached.
+type SearchResultRefs<C extends SearchType> = {
+  class: C
+  data: Ref<SearchResponseByClass[C] | null>
+  status: Ref<AsyncDataRequestStatus>
 }
 
 // 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>
+  [K in SearchType]: SearchResultRefs<K> & {
+    countsLoading: ComputedRef<boolean>
   }
 }[SearchType]
 
@@ -612,7 +619,7 @@ type SearchStrategy<C extends SearchType> = {
   fetch: (
     params: Ref<Record<string, unknown>>,
     server: boolean,
-  ) => Promise<Extract<SearchEntry, { class: C }>>
+  ) => Promise<SearchResultRefs<C>>
 }
 
 function makeStrategy<C extends SearchType>(
@@ -626,9 +633,9 @@ function makeStrategy<C extends SearchType>(
         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 }>
+      // Tautologically equivalent to SearchResultRefs<C>, but TS cannot prove
+      // it on a generic C, so we assert.
+      return { class: cls, data, status } as SearchResultRefs<C>
     },
   }
 }
@@ -666,12 +673,37 @@ const strategies: { [K in SearchType]: SearchStrategy<K> } = {
   }),
 }
 
+// `sort`, `page` and `page_size` change which results come back, never how many
+// there are nor how the API aggregates them: a refetch that touches only those
+// cannot change a single count we display.
+const COUNT_INVARIANT_PARAMS = ['sort', 'page', 'page_size']
+
 // 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)
+  const result = await strategies[c.class].fetch(params, initialType === key)
+
+  // A reload that only moves sort or pagination leaves every count where it is,
+  // so it must not replace them with loading dots. The comparison is against the
+  // params the displayed counts came from, so that two changes in a row cannot
+  // clear the loading state owed to the first one. `data` already holds a value
+  // for the type rendered on the server; no applied params means the initial
+  // load, which does need its loading state.
+  const appliedParams = ref(result.data.value ? params.value : null)
+  watch(result.data, () => {
+    appliedParams.value = params.value
+  })
+
+  const countsCanChange = computed(() => !appliedParams.value
+    || !isEqualExcept(params.value, appliedParams.value, COUNT_INVARIANT_PARAMS))
+
+  const countsLoading = computed(() => countsCanChange.value
+    && (result.status.value === 'pending' || result.status.value === 'idle'))
+
+  // Same generic-C limitation as in makeStrategy: the union is narrowed by key.
+  resultsMap[key] = { ...result, countsLoading } as SearchEntry
 }
 
 // Reset page on filter/sort change. Custom filters (registered via
@@ -792,6 +824,7 @@ const rssUrl = computed(() => {
 
 // Facets for filters
 const currentFacets = computed(() => searchResults.value?.facets)
+const facetsLoading = computed(() => resultsMap[currentType.value]?.countsLoading.value ?? false)
 
 function getFacets(key: string): FacetItem[] | undefined {
   if (!currentFacets.value) return undefined

package/src/composables/useStableQueryParams.ts

@@ -12,18 +12,23 @@ interface StableQueryParamsOptions {
   sort: Ref<string | undefined>
   page: Ref<number>
   pageSize: number
+  currentType: Ref<string>
 }
 
 /**
  * Creates a stable ref for query params that only updates when content actually changes.
  * Applies hiddenFilters first, then user filters (which can override hiddenFilters).
+ * Sort and pagination are only sent for the displayed type, so changing them
+ * refetches that type alone.
  */
 export function useStableQueryParams(options: StableQueryParamsOptions) {
-  const { typeConfig, allFilters, customFilterRegistry, q, sort, page, pageSize } = options
+  const { typeConfig, allFilters, customFilterRegistry, q, sort, page, pageSize, currentType } = options
   const stableParams = ref<Record<string, unknown>>({})
 
   const buildParams = () => {
     const params: Record<string, unknown> = {}
+    const typeKey = typeConfig ? configKey(typeConfig) : undefined
+    const isDisplayedType = typeKey === undefined || typeKey === currentType.value
 
     // 1. Apply hiddenFilters first (can be overridden by user filters)
     if (typeConfig?.hiddenFilters) {
@@ -57,7 +62,6 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
     // combines with an existing built-in value instead of overwriting it.
     // Pass the current type key so filters scoped to specific types are excluded
     // from background fetches for other types.
-    const currentTypeKey = typeConfig ? configKey(typeConfig) : undefined
     forEachActiveCustomFilter(customFilterRegistry, (apiParam, value) => {
       const existing = params[apiParam]
       if (existing === undefined) {
@@ -66,24 +70,31 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
       else {
         params[apiParam] = Array.isArray(existing) ? [...existing, value] : [existing, value]
       }
-    }, currentTypeKey)
+    }, typeKey)
 
-    // 4. Always include q, sort (if valid for this type), page, page_size
+    // 4. Always include q
     if (q.value) {
       params.q = q.value
     }
-    const sortToUse = sort.value ?? typeConfig?.defaultSort
-    if (sortToUse) {
-      const validSortValues = typeConfig?.sortOptions?.map(o => o.value as string) ?? []
-      if (validSortValues.includes(sortToUse)) {
-        params.sort = sortToUse
-      }
-      else if (import.meta.env.DEV && typeConfig?.defaultSort && typeConfig?.sortOptions && sortToUse === typeConfig.defaultSort) {
-        console.warn(`[GlobalSearch] defaultSort "${typeConfig.defaultSort}" is not in sortOptions for "${typeConfig.class}". Valid values: ${validSortValues.join(', ')}`)
+
+    // 5. Sort and pagination only apply to the displayed type. The other tabs
+    // are fetched for their `total` alone, which is invariant under sort and
+    // page, so sending those there would refetch every tab on each sort or
+    // page change. They ask for a single result for the same reason.
+    if (isDisplayedType) {
+      const sortToUse = sort.value ?? typeConfig?.defaultSort
+      if (sortToUse) {
+        const validSortValues = typeConfig?.sortOptions?.map(o => o.value as string) ?? []
+        if (validSortValues.includes(sortToUse)) {
+          params.sort = sortToUse
+        }
+        else if (import.meta.env.DEV && typeConfig?.defaultSort && typeConfig?.sortOptions && sortToUse === typeConfig.defaultSort) {
+          console.warn(`[GlobalSearch] defaultSort "${typeConfig.defaultSort}" is not in sortOptions for "${typeConfig.class}". Valid values: ${validSortValues.join(', ')}`)
+        }
       }
+      params.page = page.value
     }
-    params.page = page.value
-    params.page_size = pageSize
+    params.page_size = isDisplayedType ? pageSize : 1
 
     return params
   }
@@ -100,7 +111,7 @@ export function useStableQueryParams(options: StableQueryParamsOptions) {
 
   // Watch all dependencies and update only if content changed
   watch(
-    [q, sort, page, ...Object.values(allFilters), customFilterValues],
+    [q, sort, page, currentType, ...Object.values(allFilters), customFilterValues],
     () => {
       const newParams = buildParams()
       // JSON.stringify comparison is safe here because buildParams() builds the object deterministically

package/src/functions/helpers.ts

@@ -53,6 +53,16 @@ export const isSafeHttpUrl = (value: unknown): value is string => {
   }
 }
 
+export const removeKeys = <T extends Record<string, unknown>>(object: T, keys: Array<string>): Partial<T> => {
+  return Object.fromEntries(
+    Object.entries(object).filter(([key]) => !keys.includes(key)),
+  ) as Partial<T>
+}
+
+export const isEqualExcept = <T extends Record<string, unknown>>(a: T, b: T, keys: Array<string>): boolean => {
+  return JSON.stringify(removeKeys(a, keys)) === JSON.stringify(removeKeys(b, keys))
+}
+
 export const escapeCsvValue = (value: string | number | null | undefined): string => {
   if (value === null || value === undefined || value === '') {
     return ''