BjDrawer — Vue

Composant Vue 3 pour le tiroir latéral DSBJ, avec gestion du v-model, du focus et des slots.

Utilisation

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

const open = ref(false)
</script>

<template>
  <button class="bj-btn" @click="open = true">Ouvrir</button>
  <BjDrawer v-model="open" title="Mon tiroir">
    <p>Contenu du tiroir.</p>
    <template #footer="{ close }">
      <button class="bj-btn bj-btn--tertiary" @click="close">Annuler</button>
      <button class="bj-btn">Valider</button>
    </template>
  </BjDrawer>
</template>

Aperçu interactif

Props

ClasseDescription
modelValueContrôle l'ouverture du tiroir (v-model).
positionPosition du tiroir : "left" (défaut) ou "right".
sizeTaille du tiroir : "default", "sm", "lg" ou "full".
titleTitre affiché dans l'en-tête du tiroir.
idId HTML personnalisé (généré automatiquement sinon).

Accessibilité

Le composant utilise role="dialog" et aria-modal="true". Le focus est piégé dans le tiroir. La touche Escape ferme le tiroir.