From 24ae015d66fe206d23f85f50fbae78f630ebd376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Bult=C3=A9?= <alexandre@bulte.net>
Date: Mon, 27 Apr 2026 16:02:41 +0200
Subject: [PATCH] feat(search): configurable placeholder

---
 .../src/components/Search/GlobalSearch.vue          | 13 +++++++++++--
 .../src/components/Search/SearchInput.vue           |  6 +++---
 datagouv-components/src/types/search.ts             |  5 +++++
 pages/design/dataset-search.vue                     |  2 ++
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/datagouv-components/src/components/Search/GlobalSearch.vue b/datagouv-components/src/components/Search/GlobalSearch.vue
index 154606f02..452291b15 100644
--- a/datagouv-components/src/components/Search/GlobalSearch.vue
+++ b/datagouv-components/src/components/Search/GlobalSearch.vue
@@ -12,7 +12,7 @@
     >
       <SearchInput
         v-model="q"
-        :placeholder="placeholder || strategies[currentTypeConfig?.class ?? 'datasets'].placeholder"
+        :placeholder="resolvedPlaceholder"
       />
     </div>
     <div class="grid grid-cols-12 mt-2 md:mt-5">
@@ -398,7 +398,7 @@ import ReuseTypeFilter from './Filter/ReuseTypeFilter.vue'
 
 const props = withDefaults(defineProps<{
   config?: GlobalSearchConfig
-  placeholder?: string
+  placeholder?: string | null
   hideSearchInput?: boolean
 }>(), {
   config: getDefaultGlobalSearchConfig,
@@ -428,6 +428,15 @@ const currentTypeConfig = computed(() =>
   props.config.find(c => configKey(c) === currentType.value),
 )
 
+// Precedence: prop → per-type config → strategy default.
+// null at any level means "no placeholder".
+const resolvedPlaceholder = computed(() => {
+  if (props.placeholder !== undefined) return props.placeholder ?? ''
+  const cfg = currentTypeConfig.value
+  if (cfg && 'placeholder' in cfg) return cfg.placeholder ?? ''
+  return strategies[cfg?.class ?? 'datasets'].placeholder
+})
+
 const activeBasicFilters = computed(() =>
   (currentTypeConfig.value?.basicFilters ?? []) as string[],
 )
diff --git a/datagouv-components/src/components/Search/SearchInput.vue b/datagouv-components/src/components/Search/SearchInput.vue
index 1d98c590e..3e5a902a2 100644
--- a/datagouv-components/src/components/Search/SearchInput.vue
+++ b/datagouv-components/src/components/Search/SearchInput.vue
@@ -13,8 +13,8 @@
       type="search"
       name="q"
       class="input max-h-12 m-0 rounded-tl shadow-input-blue"
-      :aria-label="placeholder || t('Rechercher...')"
-      :placeholder="placeholder || t('Rechercher...')"
+      :aria-label="placeholder === null ? t('Rechercher...') : placeholder ?? t('Rechercher...')"
+      :placeholder="placeholder === null ? undefined : placeholder ?? t('Rechercher...')"
     >
     <BrandedButton
       class="rounded-l-none rounded-br-none rounded-tr min-h-12"
@@ -38,7 +38,7 @@ import BrandedButton from '../BrandedButton.vue'
 const q = defineModel<string>({ required: true })
 
 withDefaults(defineProps<{
-  placeholder?: string
+  placeholder?: string | null
   autoFocus?: boolean
 }>(), {
   autoFocus: true,
diff --git a/datagouv-components/src/types/search.ts b/datagouv-components/src/types/search.ts
index 324d49194..cd56ce986 100644
--- a/datagouv-components/src/types/search.ts
+++ b/datagouv-components/src/types/search.ts
@@ -298,6 +298,7 @@ export type DatasetSearchConfig = {
   class: 'datasets'
   key?: string
   name?: string
+  placeholder?: string | null
   hiddenFilters?: HiddenFilter<DatasetSearchFilters>[]
   basicFilters?: (keyof DatasetSearchFilters)[]
   advancedFilters?: (keyof DatasetSearchFilters)[]
@@ -308,6 +309,7 @@ export type DataserviceSearchConfig = {
   class: 'dataservices'
   key?: string
   name?: string
+  placeholder?: string | null
   hiddenFilters?: HiddenFilter<DataserviceSearchFilters>[]
   basicFilters?: (keyof DataserviceSearchFilters)[]
   advancedFilters?: (keyof DataserviceSearchFilters)[]
@@ -318,6 +320,7 @@ export type ReuseSearchConfig = {
   class: 'reuses'
   key?: string
   name?: string
+  placeholder?: string | null
   hiddenFilters?: HiddenFilter<ReuseSearchFilters>[]
   basicFilters?: (keyof ReuseSearchFilters)[]
   advancedFilters?: (keyof ReuseSearchFilters)[]
@@ -328,6 +331,7 @@ export type OrganizationSearchConfig = {
   class: 'organizations'
   key?: string
   name?: string
+  placeholder?: string | null
   hiddenFilters?: HiddenFilter<OrganizationSearchFilters>[]
   basicFilters?: (keyof OrganizationSearchFilters)[]
   advancedFilters?: (keyof OrganizationSearchFilters)[]
@@ -338,6 +342,7 @@ export type TopicSearchConfig = {
   class: 'topics'
   key?: string
   name?: string
+  placeholder?: string | null
   hiddenFilters?: HiddenFilter<TopicSearchFilters>[]
   basicFilters?: (keyof TopicSearchFilters)[]
   advancedFilters?: (keyof TopicSearchFilters)[]
diff --git a/pages/design/dataset-search.vue b/pages/design/dataset-search.vue
index b7b8698c8..278426838 100644
--- a/pages/design/dataset-search.vue
+++ b/pages/design/dataset-search.vue
@@ -32,12 +32,14 @@ const searchConfig: GlobalSearchConfig = [
     class: 'datasets',
     key: 'all-datasets',
     name: 'Tous les jeux de données',
+    placeholder: 'ex. budget de la ville de Paris',
     basicFilters: ['organization', 'organization_badge', 'tag', 'format', 'license', 'schema', 'geozone', 'granularity', 'badge'],
   },
   {
     class: 'datasets',
     key: 'inspire-datasets',
     name: 'Données INSPIRE',
+    placeholder: null,
     hiddenFilters: [{ key: 'badge', value: 'inspire' }],
     basicFilters: ['organization', 'organization_badge', 'tag', 'format', 'license', 'schema', 'geozone', 'granularity'],
   },