BeeModal

Une boîte de dialogue centrée, qui bloque la page derrière elle. Le focus clavier reste à l'intérieur, Échap la ferme, et le focus revient sur le bouton qui l'a ouverte.

import { BeeModal } 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 à la boîte de dialogue. Le contenu se place dans le slot par défaut.

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

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

<template>
  <BeeButton @click="open = true">Supprimer le brouillon</BeeButton>

  <BeeModal v-model:open="open" title="Supprimer ce brouillon ?">
    <p class="text">Le texte sera définitivement perdu. Cette action est irréversible.</p>
    <BeeFlex justify="flex-end" :gap="8" :responsive="false">
      <BeeButton variant="ghost" @click="open = false">Annuler</BeeButton>
      <BeeButton @click="open = false">Supprimer</BeeButton>
    </BeeFlex>
  </BeeModal>
</template>

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

Largeur

La prop width accepte n'importe quelle largeur CSS. La valeur par défaut, min(90vw, var(--bd-overlay-width)) (448 px par défaut), garde une marge sur mobile.

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

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

<template>
  <BeeFlex justify="flex-start" :gap="12" :responsive="false">
    <BeeButton variant="secondary" @click="narrow = true">Modale étroite</BeeButton>
    <BeeButton variant="secondary" @click="wide = true">Modale large</BeeButton>
  </BeeFlex>

  <BeeModal v-model:open="narrow" title="Étroite" width="min(90vw, 18rem)">
    <p class="text">Largeur de 18rem au maximum.</p>
  </BeeModal>

  <BeeModal v-model:open="wide" title="Large" width="min(90vw, 40rem)">
    <p class="text">Largeur de 40rem au maximum, et 90% de l'écran sur mobile.</p>
  </BeeModal>
</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 quand l'affichage se suffit à lui-même, comme un menu de navigation.

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

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

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

  <BeeModal v-model:open="open" 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>
  </BeeModal>
</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>

Retour du focus

À la fermeture, le focus revient automatiquement sur l'élément qui l'avait à l'ouverture, généralement le bouton déclencheur. Si le déclencheur n'est plus dans la page ou doit être un autre élément, passez-le avec return-focus-el.

API

Props

Nom	Type	Défaut	Description
title	string		Titre et nom accessible de la modale. Obligatoire.
open	boolean		Ouverture, à utiliser avec v-model:open. Obligatoire.
width	string	"min(90vw, 418px)"	Largeur CSS de la modale.
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 de la modale.

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-md, --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ée par son titre.
• Le focus entre sur le bouton de fermeture à l'ouverture, Tab et Shift+Tab bouclent dans la modale.
• Échap ferme la modale, le focus est rendu à la fermeture.
• Le scroll de la page est bloqué tant que la modale est ouverte.
• Les transitions sont désactivées si prefers-reduced-motion est activé.