BjTreeview

Composant Vue pour l’arborescence DSBJ. Structure récursive via nodes ; variantes cases à cocher et compact.

Utilisation

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

const nodes = [
  {
    id: '1',
    label: 'Documents',
    icon: 'ri-folder-line',
    children: [
      { id: '1-1', label: 'Rapport.pdf', icon: 'ri-file-text-line' },
    ],
  },
]
</script>

<template>
  <BjTreeview :nodes="nodes" :checkbox="false" :compact="false" />
</template>

Aperçu (HTML)

Documents
- Rapport.pdf
- Note de service.docx

Aperçu HTML (compact + cases à cocher)

Projet
- Tâche

Combinaisons checkbox × compact (4)

Les quatre booléens : (false,false), (true,false), (false,true), (true,true) sur la même structure nodes.

<BjTreeview :nodes="nodes" :checkbox="false" :compact="false" />
<BjTreeview :nodes="nodes" :checkbox="true" :compact="false" />
<BjTreeview :nodes="nodes" :checkbox="false" :compact="true" />
<BjTreeview :nodes="nodes" :checkbox="true" :compact="true" />

Événements

Événement	Description
`check`	check(id, checked) : clic sur une case à cocher (prop checkbox true).
`toggle`	toggle(id, expanded) : ouverture ou fermeture d’un nœud avec enfants.

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

function onCheck(id: string, checked: boolean) {
  console.log('check', id, checked)
}
function onToggle(id: string, expanded: boolean) {
  console.log('toggle', id, expanded)
}
</script>

<template>
  <BjTreeview :nodes="nodes" :checkbox="true" @check="onCheck" @toggle="onToggle" />
</template>

Slots

Pas de slots : tout le libellé et les icônes viennent des objets nodes.

v-model

Pas de v-model : l’expansion et les cases sont internes ; écoutez check et toggle pour synchroniser votre état.

Props

Prop	Description
`nodes`	Tableau de nœuds (id, label, icon, children et checked optionnels) ; children définit les sous-niveaux.
`checkbox`	Affiche une case à cocher par nœud (défaut : false).
`compact`	Réduit l’espacement (défaut : false).