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:
43
frontend/app/components/common/CustomFieldNameInput.vue
Normal file
43
frontend/app/components/common/CustomFieldNameInput.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user