@datagouv/components-next 1.0.0 → 1.0.1

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -113,6 +113,7 @@
             rel="ugc nofollow noopener"
             new-tab
             size="xs"
+            color="secondary"
             external
             @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
           >
@@ -127,7 +128,7 @@
             :id="resource.id + '-copy'"
             :data-clipboard-text="resource.url"
             :aria-describedby="resourceTitleId"
-            color="primary"
+            color="secondary"
             size="xs"
             :icon="RiFileCopyLine"
           >
@@ -390,6 +391,7 @@ import { getResourceFormatIcon, getResourceTitleId, detectOgcService } from '../
 import BrandedButton from '../BrandedButton.vue'
 import { getResourceExternalUrl, getResourceFilesize } from '../../functions/datasets'
 import { useTranslation } from '../../composables/useTranslation'
+import { useHasTabularData } from '../../composables/useHasTabularData'
 import Metadata from './Metadata.vue'
 import SchemaBadge from './SchemaBadge.vue'
 import ResourceIcon from './ResourceIcon.vue'
@@ -426,6 +428,7 @@ const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue
 
 const { t } = useTranslation()
 const { formatRelativeIfRecentDate } = useFormatDate()
+const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
   // For JSON, PDF, and XML files, show preview.
@@ -435,13 +438,7 @@ const hasPreview = computed(() => {
   return format === 'json' || format === 'pdf' || format === 'xml'
 })
 
-const hasTabularData = computed(() => {
-  // Determines if we should show the "Données" tab for tabular files AND the "Structure des données" tab (for tabular data structure)
-  return config.tabularApiUrl
-    && props.resource.extras['analysis:parsing:parsing_table']
-    && !props.resource.extras['analysis:parsing:error']
-    && (config.tabularAllowRemote || props.resource.filetype === 'file')
-})
+const hasTabularData = computed(() => checkTabularData(props.resource))
 
 const hasPmtiles = computed(() => {
   return props.resource.extras['analysis:parsing:pmtiles_url'] || props.resource.format === 'pmtiles'

package/src/components/ResourceAccordion/XmlPreview.client.vue

@@ -14,7 +14,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ fileSizeBytes
         ? t("Fichier XML 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.")
@@ -25,7 +25,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Ce fichier XML 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
@@ -33,7 +33,7 @@
       type="warning"
       class="flex items-center space-x-2"
     >
-      <RiErrorWarningLine class="shink-0 size-6" />
+      <RiErrorWarningLine class="shrink-0 size-6" />
       <span>{{ t("Erreur lors du chargement de l'aperçu XML.") }}</span>
     </SimpleBanner>
   </div>

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -228,6 +228,52 @@
                     />
                   </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>
             </div>
             <div v-if="tab.key === 'swagger'">
@@ -251,7 +297,7 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from 'vue'
-import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiSubtractLine } from '@remixicon/vue'
+import { RiDownloadLine, RiFileCopyLine, RiFileWarningLine, RiInformationLine, RiSubtractLine } from '@remixicon/vue'
 import { toast } from 'vue-sonner'
 import BrandedButton from '../BrandedButton.vue'
 import CopyButton from '../CopyButton.vue'
@@ -263,6 +309,7 @@ import TabList from '../Tabs/TabList.vue'
 import Tab from '../Tabs/Tab.vue'
 import TabPanels from '../Tabs/TabPanels.vue'
 import TabPanel from '../Tabs/TabPanel.vue'
+import Tooltip from '../Tooltip.vue'
 import Preview from '../ResourceAccordion/Preview.vue'
 import DataStructure from '../ResourceAccordion/DataStructure.vue'
 import Metadata from '../ResourceAccordion/Metadata.vue'
@@ -316,6 +363,8 @@ const {
   ogcService,
   ogcWms,
   generatedFormats,
+  wfsFormats,
+  defaultWfsProjection,
   isResourceUrl,
   tabsOptions,
 } = useResourceCapabilities(() => props.resource, () => props.dataset)

package/src/components/ReuseHorizontalCard.vue

@@ -38,7 +38,7 @@
 
     <div
       v-if="reuse.organization || reuse.owner"
-      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
       <ObjectCardOwner
         :organization="reuse.organization"

package/src/components/Search/Filter/ProducerTypeFilter.vue

@@ -13,15 +13,19 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { FacetItem } from '../../../types/search'
 import { useTranslation } from '../../../composables/useTranslation'
 import FilterButtonGroup from './FilterButtonGroup.vue'
 
-defineProps<{
+const props = withDefaults(defineProps<{
   modelValue: string | undefined
   facets?: FacetItem[]
   loading?: boolean
-}>()
+  exclude?: string[]
+}>(), {
+  exclude: () => [],
+})
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
@@ -29,11 +33,17 @@ const emit = defineEmits<{
 
 const { t } = useTranslation()
 
-const options = [
+const allOptions = [
   { value: 'public-service', label: t('Service public') },
   { value: 'local-authority', label: t('Collectivité territoriale') },
   { value: 'company', label: t('Entreprise') },
   { value: 'association', label: t('Association') },
   { value: 'user', label: t('Utilisateur') },
 ]
+
+const options = computed(() =>
+  props.exclude.length > 0
+    ? allOptions.filter(o => !props.exclude.includes(o.value))
+    : allOptions,
+)
 </script>

package/src/components/Search/GlobalSearch.vue

@@ -11,7 +11,7 @@
     >
       <SearchInput
         v-model="q"
-        :placeholder="placeholder || t('Ex : élection présidentielle 2022')"
+        :placeholder="placeholder || typesMeta[currentType].placeholder"
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -123,6 +123,7 @@
                 v-model="producerType"
                 :facets="getFacets('producer_type')"
                 :loading="searchResultsStatus === 'pending'"
+                :exclude="currentType === 'organizations' ? ['user'] : []"
                 :style="{ order: getOrder('producer_type') }"
               />
               <DatasetBadgeFilter
@@ -177,31 +178,44 @@
           >
             {{ t("{count} résultats | {count} résultat | {count} résultats", searchResults.total) }}
           </p>
-          <div class="fr-col-auto fr-grid-row fr-grid-row--middle">
-            <label
-              for="sort-search"
-              class="fr-col-auto text-sm m-0 mr-2"
-            >
-              {{ t('Trier par :') }}
-            </label>
-            <div class="fr-col">
-              <select
-                id="sort-search"
-                v-model="sort"
-                class="fr-select text-sm shadow-input-blue!"
+          <div class="fr-col-auto fr-grid-row fr-grid-row--middle gap-4">
+            <div class="flex items-center">
+              <label
+                for="sort-search"
+                class="fr-col-auto text-sm m-0 mr-2"
               >
-                <option :value="undefined">
-                  {{ t('Pertinence') }}
-                </option>
-                <option
-                  v-for="option in activeSortOptions"
-                  :key="option.value"
-                  :value="option.value"
+                {{ t('Trier par :') }}
+              </label>
+              <div class="fr-col">
+                <select
+                  id="sort-search"
+                  v-model="sort"
+                  class="fr-select text-sm shadow-input-blue!"
                 >
-                  {{ option.label }}
-                </option>
-              </select>
+                  <option :value="undefined">
+                    {{ t('Pertinence') }}
+                  </option>
+                  <option
+                    v-for="option in allSortOptions"
+                    :key="option.value"
+                    :value="option.value"
+                    :hidden="!activeSortValues.has(option.value)"
+                  >
+                    {{ option.label }}
+                  </option>
+                </select>
+              </div>
             </div>
+            <BrandedButton
+              v-if="rssUrl"
+              :href="rssUrl"
+              :title="t('Flux RSS')"
+              color="secondary"
+              size="sm"
+              :icon="RiRssLine"
+              icon-only
+              target="_blank"
+            />
           </div>
         </div>
         <transition mode="out-in">
@@ -241,6 +255,14 @@
                       <ReuseHorizontalCard :reuse="(result as Reuse)" />
                     </slot>
                   </template>
+                  <template v-else-if="currentType === 'organizations'">
+                    <slot
+                      name="organization"
+                      :organization="result"
+                    >
+                      <OrganizationHorizontalCard :organization="(result as Organization)" />
+                    </slot>
+                  </template>
                 </li>
               </ul>
               <Pagination
@@ -294,6 +316,7 @@
                         color="tertiary"
                         :href="componentsConfig.forumUrl"
                         :icon="RiLightbulbLine"
+                        keep-margins-even-without-borders
                       >
                         {{ t("Voir le forum") }}
                       </BrandedButton>
@@ -312,7 +335,7 @@
 <script setup lang="ts">
 import { computed, watch, useTemplateRef, type Ref } from 'vue'
 import { useRouteQuery } from '@vueuse/router'
-import { RiCloseCircleLine, RiDatabase2Line, RiRobot2Line, RiLineChartLine, RiLightbulbLine } from '@remixicon/vue'
+import { RiBuilding2Line, RiCloseCircleLine, RiDatabase2Line, RiLightbulbLine, RiLineChartLine, RiRssLine, RiTerminalLine } from '@remixicon/vue'
 import magnifyingGlassSrc from '../../../assets/illustrations/magnifying_glass.svg?url'
 import { useTranslation } from '../../composables/useTranslation'
 import { useDebouncedRef } from '../../composables/useDebouncedRef'
@@ -322,8 +345,9 @@ import { useFetch } from '../../functions/api'
 import { getLink } from '../../functions/pagination'
 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 { GlobalSearchConfig, SearchType, DatasetSearchResponse, DataserviceSearchResponse, ReuseSearchResponse, FacetItem } from '../../types/search'
+import type { GlobalSearchConfig, SearchType, SortOption, DatasetSearchResponse, DataserviceSearchResponse, ReuseSearchResponse, OrganizationSearchResponse, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'
 import BrandedButton from '../BrandedButton.vue'
 import LoadingBlock from '../LoadingBlock.vue'
@@ -332,6 +356,7 @@ import RadioGroup from '../RadioGroup.vue'
 import RadioInput from '../RadioInput.vue'
 import DatasetCard from '../DatasetCard.vue'
 import DataserviceCard from '../DataserviceCard.vue'
+import OrganizationHorizontalCard from '../OrganizationHorizontalCard.vue'
 import ReuseHorizontalCard from '../ReuseHorizontalCard.vue'
 import SearchInput from './SearchInput.vue'
 import Sidemenu from './Sidemenu.vue'
@@ -385,6 +410,22 @@ const activeSortOptions = computed(() =>
   currentTypeConfig.value?.sortOptions ?? [],
 )
 
+const activeSortValues = computed(() =>
+  new Set(activeSortOptions.value.map(o => o.value as string)),
+)
+
+// Deduplicated union of all sort options across all search types.
+// Rendered as hidden <option> elements so the <select> always has a stable
+// intrinsic width regardless of which type is currently active.
+const allSortOptions = computed(() => {
+  const seen = new Set<string>()
+  return props.config.flatMap(c => (c.sortOptions ?? []) as SortOption<string>[]).filter((o) => {
+    if (seen.has(o.value)) return false
+    seen.add(o.value)
+    return true
+  })
+})
+
 const activeFilters = computed(() => [
   ...(currentTypeConfig.value?.basicFilters ?? []),
   ...(currentTypeConfig.value?.advancedFilters ?? []),
@@ -458,6 +499,7 @@ watch(currentType, () => {
 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'))
 
 // Create stable params for each type
 const stableParamsOptions = {
@@ -480,11 +522,16 @@ const reusesParams = useStableQueryParams({
   ...stableParamsOptions,
   typeConfig: props.config.find(c => c.class === 'reuses'),
 })
+const organizationsParams = useStableQueryParams({
+  ...stableParamsOptions,
+  typeConfig: props.config.find(c => c.class === 'organizations'),
+})
 
 // 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)
 
 // Reset page on filter/sort change
 const filtersForReset = computed(() => ({
@@ -528,7 +575,7 @@ const hasFilters = computed(() => {
     || reuseType.value
 })
 
-const showForumLink = computed(() => currentType.value === 'datasets' && !!componentsConfig.forumUrl)
+const showForumLink = computed(() => (currentType.value === 'datasets' || currentType.value === 'dataservices') && !!componentsConfig.forumUrl)
 
 function resetFilters() {
   organizationId.value = undefined
@@ -564,31 +611,80 @@ const { data: reusesResults, status: reusesStatus } = await useFetch<ReuseSearch
   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 typesMeta = {
   datasets: {
     icon: RiDatabase2Line,
     name: t('Jeux de données'),
+    placeholder: t('ex. élections présidentielles'),
     results: datasetsResults,
     status: datasetsStatus,
   },
   dataservices: {
-    icon: RiRobot2Line,
-    name: t('APIs'),
+    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,
+  },
 } as const
 
 const searchResults = computed(() => typesMeta[currentType.value].results.value)
 const searchResultsStatus = computed(() => typesMeta[currentType.value].status.value)
 
+// RSS feed URL for datasets
+const rssUrl = computed(() => {
+  if (currentType.value !== '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 (hf?.value) params.set(hf.key as string, String(hf.value))
+    }
+  }
+
+  // Add active filters
+  if (qDebounced.value) params.set('q', qDebounced.value)
+  if (organizationId.value) params.set('organization', organizationId.value)
+  if (organizationType.value) params.set('organization_badge', organizationType.value)
+  if (tag.value) params.set('tag', tag.value)
+  if (format.value) params.set('format', format.value)
+  if (license.value) params.set('license', license.value)
+  if (schema.value) params.set('schema', schema.value)
+  if (geozone.value) params.set('geozone', geozone.value)
+  if (granularity.value) params.set('granularity', granularity.value)
+  if (badge.value) params.set('badge', badge.value)
+  if (topic.value) params.set('topic', topic.value)
+
+  // Add sort if set
+  if (sort.value) params.set('sort', sort.value)
+
+  const queryString = params.toString()
+  const basePath = '/api/1/datasets/recent.atom'
+  return `${componentsConfig.apiBase}${basePath}${queryString ? '?' + queryString : ''}`
+})
+
 // Facets for filters
 const currentFacets = computed(() => searchResults.value?.facets)
 

package/src/components/Toggletip.vue

@@ -13,8 +13,10 @@
     />
     <PopoverButton
       v-bind="buttonProps"
-      class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some"
-      :class="{ 'w-8 h-8 rounded-full bg-transparent': styledButton }"
+      :class="[
+        buttonClass ?? 'border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some',
+        { 'w-8 h-8 rounded-full bg-transparent': styledButton && !buttonClass },
+      ]"
     >
       <slot>
         <RiInformationLine
@@ -57,6 +59,7 @@ import ValueWatcher from './ValueWatcher.vue'
 
 withDefaults(defineProps<{
   buttonProps?: object
+  buttonClass?: string
   noMargin?: boolean
   styledButton?: boolean
 }>(), {

package/src/components/TopicCard.vue

@@ -30,7 +30,7 @@
 
     <div
       v-if="topic.organization || topic.owner"
-      class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
+      class="text-sm flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
     >
       <ObjectCardOwner
         :organization="topic.organization"

package/src/composables/useHasTabularData.ts

@@ -0,0 +1,15 @@
+import { useComponentsConfig } from '../config'
+import type { Resource } from '../types/resources'
+
+export const useHasTabularData = () => {
+  const config = useComponentsConfig()
+
+  return (resource: Resource) => {
+    return (
+      config.tabularApiUrl
+      && resource.extras['analysis:parsing:parsing_table']
+      && !resource.extras['analysis:parsing:error']
+      && (config.tabularAllowRemote || resource.filetype === 'file')
+    )
+  }
+}

package/src/composables/useResourceCapabilities.ts

@@ -1,10 +1,12 @@
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from './useTranslation'
+import { useHasTabularData } from './useHasTabularData'
 import { detectOgcService } from '../functions/resources'
 import { isOrganizationCertified } from '../functions/organizations'
-import type { Resource } from '../types/resources'
+import type { Resource, WfsMetadata } from '../types/resources'
 import type { Dataset, DatasetV2 } from '../types/datasets'
+import { getWfsExportFormats } from '../functions/resourceCapabilities'
 
 const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
 const URL_FORMATS = ['url', 'doi', 'www:link', 'www:link-1.0-http--link', 'www:link-1.0-http--partners', 'www:link-1.0-http--related', 'www:link-1.0-http--samples']
@@ -15,6 +17,7 @@ export function useResourceCapabilities(
 ) {
   const config = useComponentsConfig()
   const { t } = useTranslation()
+  const checkTabularData = useHasTabularData()
 
   const hasPreview = computed(() => {
     const format = toValue(resource).format?.toLowerCase()
@@ -23,10 +26,7 @@ export function useResourceCapabilities(
 
   const hasTabularData = computed(() => {
     const r = toValue(resource)
-    return config.tabularApiUrl
-      && r.extras['analysis:parsing:parsing_table']
-      && !r.extras['analysis:parsing:error']
-      && (config.tabularAllowRemote || r.filetype === 'file')
+    return checkTabularData(r)
   })
 
   const hasPmtiles = computed(() => {
@@ -68,6 +68,17 @@ export function useResourceCapabilities(
     return formats
   })
 
+  const wfsFormats = computed(() => {
+    return getWfsExportFormats(toValue(resource))
+  })
+
+  const defaultWfsProjection = computed<string | null>(() => {
+    const r = toValue(resource)
+    const wfsMetadata = r.extras['analysis:parsing:ogc_metadata'] as WfsMetadata | null
+    if (!wfsMetadata || wfsMetadata.format !== `wfs`) return null
+    return wfsMetadata?.detected_layer?.default_crs ?? null
+  })
+
   const isResourceUrl = computed(() => URL_FORMATS.includes(toValue(resource).format))
 
   const tabsOptions = computed(() => {
@@ -112,6 +123,8 @@ export function useResourceCapabilities(
     ogcService,
     ogcWms,
     generatedFormats,
+    wfsFormats,
+    defaultWfsProjection,
     isResourceUrl,
     tabsOptions,
   }

package/src/composables/useTranslation.ts

@@ -21,7 +21,8 @@ function detectLanguage(): string {
     const acceptLanguage = header
     if (acceptLanguage) {
       const primaryLang = acceptLanguage.split(';')[0]!.split(',')[0]!.split('-')[0]!.toLowerCase()
-      return primaryLang
+      // Ignore wildcard * language, that should fallback to client side detection or default language
+      if (primaryLang !== '*') return primaryLang
     }
   }
   catch {

package/src/functions/api.ts

@@ -1,9 +1,17 @@
-import { ref, toValue, watchEffect, onMounted, type ComputedRef, type Ref } from 'vue'
+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 {
+  const val = toValue(obj)
+  if (!val || typeof val !== 'object') return val
+  return Object.fromEntries(
+    Object.entries(val).map(([k, v]) => [k, toValue(v as MaybeRefOrGetter<unknown>)]),
+  )
+}
+
 export async function useFetch<DataT, ErrorT = never>(
   url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
   options?: UseFetchOptions<DataT>,
@@ -23,8 +31,8 @@ export async function useFetch<DataT, ErrorT = never>(
   const execute = async () => {
     const urlValue = toValue(url)
     if (!urlValue) return
-    const params = toValue(options?.params)
-    const query = toValue(options?.query)
+    const params = deepToValue(options?.params)
+    const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
       data.value = await ofetch<DataT | null>(urlValue, {

package/src/functions/api.types.ts

@@ -35,5 +35,5 @@ export type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 
 export type UseFetchFunction = (<DataT, ErrorT>(
   url: string | Request | Ref<string | Request> | ComputedRef<string | null> | (() => string | Request),
-  options?: UseFetchOptions<DataT>
+  options?: UseFetchOptions<DataT>,
 ) => Promise<AsyncData<DataT, ErrorT>>)