BjDropdown

Composant Vue pour le menu déroulant DSBJ. Slots trigger et menu, alignement, direction, taille, événements open/close et API exposée sur ref.

Utilisation

<script setup>
import { BjButton, BjDropdown } from '@flrxnt/dsbj/vue'
</script>

<template>
  <BjDropdown align="left" direction="down" size="md">
    <template #trigger>
      <BjButton type="button">Options</BjButton>
    </template>
    <li class="bj-dropdown__item">
      <button type="button" role="menuitem">Modifier</button>
    </li>
    <li class="bj-dropdown__item">
      <button type="button" role="menuitem">Supprimer</button>
    </li>
  </BjDropdown>
</template>

Aperçu (HTML)

Combinaisons align × direction × size (12)

<!-- align × direction × size (sm | md | lg) — md = défaut -->
<BjDropdown align="left" direction="down" size="md">…</BjDropdown>
<BjDropdown align="left" direction="down" size="sm">…</BjDropdown>
<BjDropdown align="left" direction="down" size="lg">…</BjDropdown>
<BjDropdown align="left" direction="up" size="md">…</BjDropdown>
<BjDropdown align="left" direction="up" size="sm">…</BjDropdown>
<BjDropdown align="left" direction="up" size="lg">…</BjDropdown>
<BjDropdown align="right" direction="down" size="md">…</BjDropdown>
<BjDropdown align="right" direction="down" size="sm">…</BjDropdown>
<BjDropdown align="right" direction="down" size="lg">…</BjDropdown>
<BjDropdown align="right" direction="up" size="md">…</BjDropdown>
<BjDropdown align="right" direction="up" size="sm">…</BjDropdown>
<BjDropdown align="right" direction="up" size="lg">…</BjDropdown>

align=right, direction=up, size=lg (classes HTML)

Slot menu : items et séparateur

Le slot par défaut rend une liste ; utilisez li.bj-dropdown__item et li.bj-dropdown__divider comme en HTML DSBJ.

<BjDropdown>
  <template #trigger>
    <BjButton type="button">Actions</BjButton>
  </template>
  <li class="bj-dropdown__item">
    <button type="button" role="menuitem" @click="onEdit">Modifier</button>
  </li>
  <li class="bj-dropdown__divider" role="separator"></li>
  <li class="bj-dropdown__item">
    <button type="button" role="menuitem" @click="onDelete">Supprimer</button>
  </li>
</BjDropdown>

Clic sur les items du menu

Le composant n’émet pas de select : branchez un écouteur de clic sur chaque bouton menuitem pour votre logique métier.

v-model

Pas de v-model : l’état ouvert/fermé est interne ; utilisez la ref (open, close, toggle, isOpen) ou les événements open / close.

Slots

SlotDescription
triggerÉlément cliquable qui ouvre le menu (obligatoire).
defaultContenu du menu (souvent des <li class="bj-dropdown__item">).

Événements

ÉvénementDescription
openÉmis à l’ouverture.
closeÉmis à la fermeture (clic extérieur, Escape, ou toggle).
<script setup>
import { BjButton, BjDropdown } from '@flrxnt/dsbj/vue'

function onOpen() { console.log('ouvert') }
function onClose() { console.log('fermé') }
</script>

<template>
  <BjDropdown @open="onOpen" @close="onClose">
    <template #trigger>
      <BjButton type="button">Menu</BjButton>
    </template>
    <li class="bj-dropdown__item"><button type="button" role="menuitem">Action</button></li>
  </BjDropdown>
</template>

Expose (ref)

MembreDescription
open, close, toggle, isOpenopen(), close(), toggle(), isOpen (ref) pour contrôle programmatique.
<script setup>
import { ref } from 'vue'
import { BjButton, BjDropdown } from '@flrxnt/dsbj/vue'

const dd = ref<InstanceType<typeof BjDropdown> | null>(null)
</script>

<template>
  <BjButton @click="dd?.toggle()">Toggle</BjButton>
  <BjButton @click="dd?.open()">Ouvrir</BjButton>
  <BjButton @click="dd?.close()">Fermer</BjButton>
  <BjDropdown ref="dd" align="right" direction="up" size="sm">
    <template #trigger><BjButton type="button">▼</BjButton></template>
    <li class="bj-dropdown__item"><button type="button" role="menuitem">Item</button></li>
  </BjDropdown>
</template>

Props

PropDescription
alignAlignement du menu : left (défaut) ou right (bj-dropdown--right).
directionOuverture : down (défaut) ou up (bj-dropdown--up).
sizeTaille : sm (bj-dropdown--sm), md (défaut, pas de modificateur), lg (bj-dropdown--lg).