From a4ea44675a8866e56b5ae31c8611f4bdcd9d790a Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Mon, 11 May 2026 14:51:15 +0200
Subject: [PATCH] feat(custom-fields) : ajoute CustomFieldNameInput wrapper

Encapsule SearchSelect en mode creatable, branche useCustomFieldName-
Suggestions, charge la liste au focus. Permet de remplacer un simple
<input v-model='field.name'> par <CustomFieldNameInput v-model='field.name'>
dans les editeurs de champs perso.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../common/CustomFieldNameInput.vue           | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 frontend/app/components/common/CustomFieldNameInput.vue

diff --git a/frontend/app/components/common/CustomFieldNameInput.vue b/frontend/app/components/common/CustomFieldNameInput.vue
new file mode 100644
index 0000000..f428010
--- /dev/null
+++ b/frontend/app/components/common/CustomFieldNameInput.vue
@@ -0,0 +1,43 @@
+<template>
+  <SearchSelect
+    :model-value="modelValue"
+    :options="options"
+    :placeholder="placeholder"
+    option-value="name"
+    option-label="name"
+    creatable
+    :size="size"
+    @update:model-value="onUpdate"
+    @focus="ensureLoaded"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import SearchSelect from './SearchSelect.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}>(), {
+  placeholder: 'Nom du champ',
+  size: 'xs',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { suggestions, load } = useCustomFieldNameSuggestions()
+
+const options = computed(() => (suggestions.value ?? []).map(name => ({ name })))
+
+function ensureLoaded(): void {
+  void load()
+}
+
+function onUpdate(value: string | number): void {
+  emit('update:modelValue', String(value ?? ''))
+}
+</script>