BjSelect

Liste déroulante Vue avec libellé, aide, placeholder, options, messages d’erreur, mode désactivé, mode recherche (dropdown custom) et slot pour options supplémentaires.

Utilisation

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

const dept = ref('')
const options = [
  { value: 'dg', label: 'Direction générale' },
  { value: 'dr', label: 'Direction régionale' },
]
</script>

<template>
  <BjSelect
    v-model="dept"
    label="Direction"
    hint="Choisir une direction dans la liste"
    placeholder="Sélectionner…"
    :options="options"
  />
</template>

Select natif (aperçu)

DirectionChoisir une direction dans la liste

Erreur et message

Rôle

Veuillez choisir un rôle.

<BjSelect
  v-model="role"
  label="Rôle"
  placeholder="Sélectionner…"
  :options="roles"
  :error="true"
  message="Veuillez choisir un rôle."
/>

Désactivé

Statut

<BjSelect
  v-model="fixed"
  label="Statut"
  :options="statuses"
  :disabled="true"
  placeholder="Verrouillé"
/>

Slot — options supplémentaires

Le slot par défaut est rendu à l’intérieur du <select> natif (après les <option> générées), pour des options HTML personnalisées.

Pays

<BjSelect v-model="x" label="Pays" placeholder="Liste + slot" :options="countries">
  <option value="other">Autre (slot)</option>
</BjSelect>

Mode recherche

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

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

<template>
  <BjSelect
    v-model="city"
    label="Commune"
    placeholder="Sélectionner…"
    :options="cities"
    searchable
  />
</template>

Commune

Recherche : searchPlaceholder et noResults

Commune

Aucune commune ne correspond.

<BjSelect
  v-model="city"
  label="Commune"
  searchable
  search-placeholder="Filtrer les communes…"
  no-results="Aucune commune ne correspond."
  :options="cities"
/>

Recherche désactivée

Commune

<BjSelect
  v-model="city"
  label="Commune"
  searchable
  :disabled="true"
  placeholder="Sélectionner…"
  :options="cities"
/>

Props

Prop	Description
`modelValue`	Valeur sélectionnée (v-model), chaîne.
`label`	Libellé au-dessus du select (associé via for/id).
`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 visuelle.
`message`	Message sous le champ (couleur selon error).
`disabled`	Désactive le select.
`placeholder`	Option initiale vide et désactivée avec ce libellé.
`searchable`	Active le mode recherche : remplace le select natif par un dropdown custom avec filtre.
`searchPlaceholder`	Placeholder du champ de recherche (défaut : « Rechercher… »).
`noResults`	Texte affiché quand aucune option ne correspond.