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>
This commit is contained in:
Matthieu
2026-05-11 14:51:15 +02:00
parent e5d0c690b7
commit a4ea44675a

View File

@@ -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>