BjConsent

Composant Vue pour la bannière de consentement cookies DSBJ et la modale de personnalisation. Props title, text et services ; slot par défaut sous le texte ; événements accept, refuse et customize.

Utilisation

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

const services = [
  { id: 'analytics', name: 'Mesure d’audience', description: 'Statistiques anonymes.' },
  { id: 'required', name: 'Indispensable', required: true },
]
</script>

<template>
  <BjConsent
    title="Gestion des cookies"
    text="Nous utilisons des cookies pour améliorer le site."
    :services="services"
    @accept="() => {}"
    @refuse="() => {}"
    @customize="() => {}"
  />
</template>

Aperçu (HTML)

Aperçu HTML (titre personnalisé)

Combinaisons title × text × services

Titre et texte par défaut du composant si omis ; services=[] affiche uniquement les trois boutons (la modale « Personnaliser » est vide de lignes).

<!-- Défauts du composant (titre + texte intégrés) -->
<BjConsent :services="services" @accept="onA" @refuse="onR" @customize="onC" />

<!-- Texte marketing + liste riche -->
<BjConsent
  title="Cookies et traceurs"
  text="Nous respectons votre choix."
  :services="services"
  @accept="onA"
/>

<!-- Aucun service (personnaliser sans lignes) -->
<BjConsent title="Consentement" text="Pas de catégories." :services="[]" />

v-model

Pas de v-model : la visibilité est interne jusqu’aux actions accept / refuse / customize.

Slot par défaut

SlotDescription
defaultContenu optionnel inséré après le paragraphe text et avant les boutons (liens, précisions).
<BjConsent title="Cookies" text="Description courte." :services="services">
  <p class="bj-text-sm">
    <a href="/politique" class="bj-link">Politique de confidentialité</a>
  </p>
</BjConsent>

Événements

ÉvénementDescription
acceptÉmis après « Tout accepter » (tous les services cochés, bannière masquée).
refuseÉmis après « Tout refuser » (uniquement les services required, bannière masquée).
customizeÉmis après « Enregistrer » dans la modale : charge utile string[] des ids acceptés (hors fermeture par Annuler).
<script setup>
import { BjConsent } from '@flrxnt/dsbj/vue'

function onAccept() {
  /* tout accepté */
}
function onRefuse() {
  /* seuls les required */
}
function onCustomize(acceptedIds: string[]) {
  console.log('Ids acceptés', acceptedIds)
}
</script>

<template>
  <BjConsent
    :services="services"
    @accept="onAccept"
    @refuse="onRefuse"
    @customize="onCustomize"
  />
</template>

services : champs et required

const services = [
  { id: 'necessary', name: 'Nécessaires', required: true },
  { id: 'stats', name: 'Statistiques', description: 'Mesure d’audience anonyme.' },
  { id: 'ads', name: 'Publicité', description: 'Optionnel', required: false },
]

Props

PropDescription
titleTitre de la bannière (défaut côté composant : « Gestion des cookies »).
textTexte explicatif sous le titre (défaut fourni par le composant si non renseigné).
servicesConsentService[] : id, name requis ; description et required optionnels. Les services required restent acceptés après « Tout refuser ».