BeeDrawer

Un panneau qui glisse depuis un bord de l'écran, pour des filtres, un menu ou un formulaire secondaire. Comme BeeModal, il bloque la page derrière lui, garde le focus clavier à l'intérieur et se ferme avec Échap.

import { BeeDrawer } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Utilisation

L'ouverture se pilote avec v-model:open. Le titre est obligatoire : il s'affiche dans l'en-tête et sert de nom accessible au panneau. L'en-tête reste visible, seul le contenu défile.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

const open = ref(false);
const filters = ["Débutants", "Gratuit", "En ligne", "Le week-end"];
</script>

<template>
  <BeeButton @click="open = true">Filtrer les ateliers</BeeButton>

  <BeeDrawer v-model:open="open" title="Filtres">
    <ul class="filters">
      <li v-for="filter in filters" :key="filter">
        <label><input type="checkbox" /> {{ filter }}</label>
      </li>
    </ul>

    <BeeFlex justify="flex-end" :gap="8" :responsive="false">
      <BeeButton variant="ghost" @click="open = false">Annuler</BeeButton>
      <BeeButton @click="open = false">Appliquer</BeeButton>
    </BeeFlex>
  </BeeDrawer>
</template>

<style scoped>
.filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--bd-color-primary);
}
</style>

Côté d'apparition

La prop side choisit le bord : right (par défaut), left, top ou bottom. Les panneaux de gauche et de droite occupent toute la hauteur, ceux du haut et du bas toute la largeur.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

type Side = "left" | "right" | "top" | "bottom";

const open = ref(false);
const side = ref<Side>("right");

function show(value: Side) {
  side.value = value;
  open.value = true;
}
</script>

<template>
  <BeeFlex justify="flex-start" :gap="12" :responsive="false">
    <BeeButton variant="secondary" @click="show('left')">Gauche</BeeButton>
    <BeeButton variant="secondary" @click="show('right')">Droite</BeeButton>
    <BeeButton variant="secondary" @click="show('top')">Haut</BeeButton>
    <BeeButton variant="secondary" @click="show('bottom')">Bas</BeeButton>
  </BeeFlex>

  <BeeDrawer v-model:open="open" :side="side" :title="`Depuis ${side}`">
    <p class="text">Ce panneau apparaît depuis le bord « {{ side }} ».</p>
  </BeeDrawer>
</template>

<style scoped>
.text {
  margin: 0;
  color: var(--bd-color-text-muted);
}
</style>

Taille

La prop size règle la largeur pour left et right, et la hauteur maximale pour top et bottom. Elle accepte n'importe quelle longueur CSS. Sans size, la largeur est min(90vw, var(--bd-overlay-width)) (448 px par défaut) et la hauteur maximale 60vh.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

const wide = ref(false);
const short = ref(false);
</script>

<template>
  <BeeFlex justify="flex-start" :gap="12" :responsive="false">
    <BeeButton variant="secondary" @click="wide = true">Panneau large</BeeButton>
    <BeeButton variant="secondary" @click="short = true">Panneau bas, court</BeeButton>
  </BeeFlex>

  <BeeDrawer v-model:open="wide" title="Large" size="min(90vw, 40rem)">
    <p class="text">Largeur de 40rem au maximum.</p>
  </BeeDrawer>

  <BeeDrawer v-model:open="short" title="Court" side="bottom" size="12rem">
    <p class="text">Hauteur de 12rem au maximum, le contenu défile au-delà.</p>
  </BeeDrawer>
</template>

<style scoped>
.text {
  margin: 0;
  color: var(--bd-color-text-muted);
}
</style>

Titre masqué

Avec hide-title, le titre n'est plus visible mais reste annoncé par les lecteurs d'écran. C'est utile pour un menu de navigation.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer } from "@thaisrr/beedesign";

const open = ref(false);
</script>

<template>
  <BeeButton variant="secondary" @click="open = true">Ouvrir le menu</BeeButton>

  <BeeDrawer v-model:open="open" side="left" title="Menu" hide-title>
    <nav aria-label="Menu principal">
      <ul class="links">
        <li><a href="#" @click.prevent="open = false">Accueil</a></li>
        <li><a href="#" @click.prevent="open = false">Projets</a></li>
        <li><a href="#" @click.prevent="open = false">Contact</a></li>
      </ul>
    </nav>
  </BeeDrawer>
</template>

<style scoped>
.links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links a {
  color: var(--bd-color-primary-dark);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.links a:hover {
  color: var(--bd-color-primary);
}
</style>

API

Props

Nom	Type	Défaut	Description
title	string		Titre et nom accessible du panneau. Obligatoire.
open	boolean		Ouverture, à utiliser avec v-model:open. Obligatoire.
side	"left" | "right" | "top" | "bottom"	"right"	Bord depuis lequel le panneau apparaît.
size	string		Largeur (left, right) ou hauteur maximale (top, bottom).
hideTitle	boolean	false	Cache le titre visuellement, le garde pour les lecteurs d'écran.
closeLabel	string	"Close"	Texte accessible du bouton de fermeture.
returnFocusEl	HTMLElement | null	null	Élément qui reprend le focus à la fermeture.
panelId	string	généré	Id du panneau, pour un aria-controls externe.

Événements

Nom	Payload	Description
update:open	boolean	Émis avec false au clic sur le fond, sur le bouton de fermeture, ou sur Échap.

Slots

Nom	Description
default	Contenu du panneau.

Variables CSS utilisées

--bd-color-overlay, --bd-z-modal, --bd-color-surface, --bd-color-border, --bd-color-text, --bd-color-primary-light, --bd-color-primary-medium, --bd-color-primary-dark, --bd-color-focus, --bd-font-main, --bd-font-title, --bd-font-size-lg, --bd-radius-full, --bd-space-md, --bd-shadow-3, --bd-transition-fast, --bd-transition-base, --bd-border-width, --bd-close-size, --bd-overlay-width, --bd-focus-ring-width, --bd-focus-ring-width, --bd-focus-ring-offset.

Accessibilité

• role="dialog" et aria-modal="true", nommé par son titre.
• Le focus entre sur le bouton de fermeture à l'ouverture, Tab et Shift+Tab bouclent dans le panneau.
• Échap ferme le panneau, le focus est rendu à la fermeture.
• Le scroll de la page est bloqué tant que le panneau est ouvert.
• Les transitions sont désactivées si prefers-reduced-motion est activé.