Barre de recherche - DsfrSearchBar

🌟 Introduction

La barre de recherche est un système de navigation qui permet à l'utilisateur d’accéder rapidement à un contenu en lançant une recherche sur un mot clé ou une expression.

🏅 La documentation sur la barre de recherche sur le DSFR

La story sur la barre de recherche sur le storybook de VueDsfr

📐 Structure

La barre de recherche se compose des éléments suivants :

• un champs de saisie ;
• un bouton primaire.

🛠️ Props

Nom	Type	Défaut	Obligatoire	Description
id	Function	() => useRandomId('search', 'input')		Identifiant unique pour la barre de recherche.
label	String	''		Libellé de la barre de recherche.
buttonText	String	''		Texte du bouton de recherche.
modelValue	String	''		Valeur liée à la barre de recherche.
placeholder	String	'Rechercher'		Placeholder pour la barre de recherche.
large	Boolean	false		Si true, utilise une version plus grande de la barre de recherche.
disabled	Boolean	false		Si true, désactive la barre de recherche.

📡Événements

• update:modelValue: Événement émis lorsque la valeur de la barre de recherche est mise à jour.
• search: Événement émis lors de l'exécution d'une recherche.

📝 Exemple

Démo

Code de la démo

<script lang="ts" setup>
import { ref } from 'vue'

import DsfrSearchBar from '../DsfrSearchBar.vue'

const value = ref('')
</script>

<template>
  <div class="fr-container fr-py-4w">
    <div>
      <DsfrSearchBar
        v-model="value"
        label="Label de la barre de recherche"
      />
    </div>
    <p class="fr-my-4w">
      {{ value }}
    </p>
  </div>
</template>

⚙️ Code source du composant

DsfrSearchBar.vue

<script lang="ts" setup>
import type { DsfrSearchBarProps } from './DsfrSearchBar.types'

import { useRandomId } from '../../utils/random-utils'
import DsfrButton from '../DsfrButton/DsfrButton.vue'
import DsfrInput from '../DsfrInput/DsfrInput.vue'

export type { DsfrSearchBarProps }

withDefaults(defineProps<DsfrSearchBarProps>(), {
  id: () => useRandomId('search', 'input'),
  label: '',
  buttonText: '',
  modelValue: '',
  placeholder: 'Rechercher',
})

const emit = defineEmits<{
  (e: 'update:modelValue', payload: string): void
  (e: 'search', payload: string): void
}>()
</script>

<template>
  <div
    class="fr-search-bar"
    :class="{ 'fr-search-bar--lg': large }"
    role="search"
  >
    <DsfrInput
      :id="id"
      type="search"
      :placeholder="placeholder"
      :model-value="modelValue"
      :label="label"
      :disabled="disabled"
      :aria-disabled="disabled"
      @update:model-value="emit('update:modelValue', $event)"
      @keydown.enter="emit('search', modelValue)"
    />
    <DsfrButton
      title="Rechercher"
      :disabled="disabled"
      :aria-disabled="disabled"
      @click="emit('search', modelValue)"
    >
      <template v-if="buttonText">
        {{ buttonText }}
      </template>
      <span
        v-else
        class="fr-sr-only"
      >
        Rechercher
      </span>
    </DsfrButton>
  </div>
</template>

<style>
.fr-search-bar > .fr-label + .fr-input {
  margin: 0;
}

/**
 * Obligé de faire ça car la couleur est codée en dur dans le DSFR
 * sans prendre en compte que ce champ pouvait être disabled.
 */
.fr-search-bar .fr-input:disabled {
  box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
  color: var(--text-disabled-grey);
}
</style>

DsfrSearchBar.types.ts

export type DsfrSearchBarProps = {
  id?: string
  label?: string
  large?: boolean
  buttonText?: string
  modelValue?: string
  placeholder?: string
  disabled?: boolean
}