BjModal

Composant Vue pour la fenêtre modale DSBJ. Contrôle d’ouverture avec v-model, titre, taille, slots header / corps / footer et méthodes exposées open / close.

Utilisation

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

const show = ref(false)
</script>

<template>
  <BjButton @click="show = true">Ouvrir</BjButton>
  <BjModal v-model="show" title="Confirmation">
    <p>Contenu de la modale.</p>
    <template #footer="{ close }">
      <BjButton @click="close">Fermer</BjButton>
    </template>
  </BjModal>
</template>

Aperçu (HTML)

size : toutes les valeurs

<!-- default : pas de modificateur de taille -->
<BjModal v-model="a" title="Default" />

<BjModal v-model="b" size="sm" title="Small" />
<BjModal v-model="c" size="lg" title="Large" />
<BjModal v-model="d" size="full" title="Plein écran" />

Slots

SlotDescription
headerRemplace le titre par défaut ; l’en-tête s’affiche si title ou #header est fourni.
defaultCorps de la modale (bj-modal__body).
footerPied de page ; le slot reçoit la fonction close pour fermer depuis les actions.
<BjModal v-model="open" id="my-dialog">
  <template #header>
    <h2 class="bj-modal__title">Titre personnalisé</h2>
  </template>
  <p>Corps (slot par défaut).</p>
  <template #footer="{ close }">
    <BjButton type="button" variant="secondary" @click="close">Annuler</BjButton>
    <BjButton type="button" @click="close">OK</BjButton>
  </template>
</BjModal>

Expose (ref)

MéthodeDescription
open, closeopen() et close() : même effet que v-model true/false (focus restauré à la fermeture).
<script setup>
import { ref } from 'vue'
import { BjButton, BjModal } from '@flrxnt/dsbj/vue'

const modalRef = ref<InstanceType<typeof BjModal> | null>(null)
</script>

<template>
  <BjButton @click="modalRef?.open()">Ouvrir (expose)</BjButton>
  <BjModal ref="modalRef" title="Expose">
    <p>Contenu</p>
    <template #footer="{ close }">
      <BjButton @click="modalRef?.close()">close()</BjButton>
      <BjButton @click="close">close du slot</BjButton>
    </template>
  </BjModal>
</template>

v-model et id

<BjModal v-model="visible" id="accessible-dialog" title="Id fixe" />

Émission update:modelValue

ÉvénementDescription
update:modelValueupdate:modelValue(boolean) : true à l’ouverture (open(), clic bouton, etc.), false à la fermeture (overlay, Échap, close).
<script setup>
import { ref, watch } from 'vue'
import { BjModal } from '@flrxnt/dsbj/vue'

const open = ref(false)

watch(open, (v) => console.log('Modale', v ? 'ouverte' : 'fermée'))
</script>

<template>
  <BjModal v-model="open" title="Suivi" @update:modelValue="(v) => console.log('modelValue', v)">
    <p>Corps</p>
  </BjModal>
</template>

Combinaisons size × en-tête

Chaque taille peut combiner title seul, slot #header seul, ou les deux (le slot remplace le rendu titre par défaut si fourni).

<!-- default + titre -->
<BjModal v-model="a" title="Moyen" />

<!-- sm + header personnalisé -->
<BjModal v-model="b" size="sm">
  <template #header>
    <h2 class="bj-modal__title">Petit dialogue</h2>
  </template>
  <p>Contenu</p>
</BjModal>

<!-- lg + footer -->
<BjModal v-model="c" size="lg" title="Grand formulaire">
  <template #footer="{ close }">
    <button type="button" class="bj-btn" @click="close">OK</button>
  </template>
</BjModal>

<!-- full + id stable -->
<BjModal v-model="d" size="full" id="wizard" title="Assistant" />

Aperçu HTML des tailles

Classes sur le conteneur .bj-modal

bj-modal--sm

bj-modal--lg

bj-modal--full

Fermeture et clavier

Clic sur l’overlay, bouton fermer, Échap et close() du slot footer ferment la modale et émettent update:modelValue(false).

Props

PropDescription
modelValueAffiche ou masque la modale (v-model).
titleTitre affiché dans l’en-tête (slot header par défaut).
sizeTaille du dialogue : default (défaut), sm, lg, full. Classes : bj-modal--sm, bj-modal--lg, bj-modal--full.
idIdentifiant du nœud dialog (généré aléatoirement si absent).