BjCombobox

Champ d’autocomplétion Vue avec filtrage à la saisie, v-model sur la value sélectionnée, options, libellé, aide, erreur, message, désactivation et texte sans résultat.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjCombobox } from '@flrxnt/dsbj/vue'

const city = ref('')
const cities = [
  { value: 'cotonou', label: 'Cotonou' },
  { value: 'porto', label: 'Porto-Novo' },
  { value: 'parakou', label: 'Parakou' },
  { value: 'abomey', label: 'Abomey-Calavi' },
  { value: 'djougou', label: 'Djougou' },
]
</script>

<template>
  <BjCombobox
    v-model="city"
    label="Ville"
    hint="Commune de résidence"
    placeholder="Rechercher une ville…"
    :options="cities"
  />
</template>

v-model (update:modelValue)

Le composant émet update:modelValue avec la value de l’option choisie (chaîne).

<script setup lang="ts">
import { ref, watch } from 'vue'
import { BjCombobox } from '@flrxnt/dsbj/vue'

const selectedId = ref('')
watch(selectedId, (v) => console.log('update:modelValue', v))
</script>

<template>
  <BjCombobox v-model="selectedId" :options="items" label="Code" />
</template>

Aperçu

VilleCommune de résidence

Erreur et message

Ville

Sélectionnez une ville dans la liste.

<BjCombobox
  v-model="city"
  label="Ville"
  :options="cities"
  :error="true"
  message="Sélectionnez une ville dans la liste."
/>

Désactivé

Ville

<BjCombobox
  v-model="city"
  label="Ville"
  :options="cities"
  :disabled="true"
/>

noResults

Ville

Aucune correspondance pour cette saisie.

<BjCombobox
  v-model="city"
  label="Ville"
  :options="cities"
  no-results="Aucune correspondance pour cette saisie."
/>

Erreur × liste ouverte

Ville

Champ invalide.

Props

Prop	Description
`modelValue`	Valeur sélectionnée (v-model), chaîne ; émis via update:modelValue.
`label`	Libellé au-dessus du champ.
`hint`	Texte d’aide sous le libellé.
`options`	Tableau d’objets avec value, label et disabled optionnel.
`error`	Met le champ en état d’erreur (bj-combobox--error, aria-invalid).
`message`	Message sous le champ (couleur selon error).
`disabled`	Désactive le combobox.
`placeholder`	Placeholder du champ de saisie.
`noResults`	Texte affiché quand aucune option ne correspond à la saisie.