BjSearch

Barre de recherche Vue : formulaire role="search", champ type search, v-model, taille md (défaut) ou lg (bj-search--lg), libellé du bouton, slot pour le contenu du bouton d’envoi et événement submit.

Utilisation

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

const q = ref('')
function onSubmit(value: string) {
  console.log(value)
}
</script>

<template>
  <BjSearch v-model="q" placeholder="Rechercher sur le site…" @submit="onSubmit" />
</template>

Aperçu (md)

Taille lg

<BjSearch v-model="q" size="lg" placeholder="Recherche large…" />

md × lg

buttonLabel

<BjSearch v-model="q" button-label="Lancer la recherche" />

Slot du bouton

Le slot par défaut remplace uniquement le contenu du <button type="submit"> (icône + texte par défaut), pas le bouton lui-même.

<!-- Contenu à l'intérieur du bouton submit (pas de second <button>) -->
<BjSearch v-model="q" placeholder="Rechercher…">
  <i class="ri-arrow-right-line" aria-hidden="true" />
  <span class="bj-sr-only">Envoyer</span>
</BjSearch>

Événement submit

Émis à la soumission du formulaire avec la valeur courante du champ (chaîne).

<BjSearch v-model="query" @submit="onSearch" />

<script setup lang="ts">
function onSearch(value: string) {
  console.log(value)
}
</script>

Props

Prop	Description
`modelValue`	Texte saisi (v-model).
`placeholder`	Placeholder du champ (défaut « Rechercher… »).
`size`	Taille du bloc : md (défaut) ou lg (classe bj-search--lg).
`buttonLabel`	Texte du bouton lorsque le slot par défaut est utilisé.