Sélecteur arborescent

Combinaison d'un déclencheur déroulant et d'un panneau de type Tree. En sélection simple, la valeur renvoyée est un string ; en sélection multiple (avec cases à cocher), un string[].

Utilisation de base

Sélection simple

<script setup>
import { ref } from 'vue'
const treeValue = ref(undefined)
const treeData = [
  { key: 'a', label: 'Frontend', children: [
    { key: 'a-1', label: 'Vue' },
    { key: 'a-2', label: 'React' },
  ] },
  { key: 'b', label: 'Backend' },
]
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

<script>
export default {
  data() {
    return {
      treeValue: undefined,
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <LhTreeSelect :data="treeData" v-model="treeValue" />
</template>

Sélection multiple

Sélection multiple

<script setup>
import { ref } from 'vue'
const treeMulti = ref([])
</script>

<template>
  <!-- Sélection multiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Choisir une pile technique" />
</template>

<script>
export default {
  data() {
    return {
      treeMulti: [],
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <!-- Sélection multiple -->
  <LhTreeSelect :data="treeData" v-model="treeMulti" multiple placeholder="Choisir une pile technique" />
</template>

Désactivé et point de montage

disabled désactive le sélecteur ; lorsque teleported vaut false, le panneau déroulant est monté sur place (sans téléportation vers body).

Désactivé / Panneau sur place

<script setup>
import { ref } from 'vue'
const treeDisabled = ref([])
const treeLocal = ref([])
</script>

<template>
  <!-- Désactivé -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Panneau sur place -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

<script>
export default {
  data() {
    return {
      treeDisabled: [],
      treeLocal: [],
      treeData: [
        { key: 'a', label: 'Frontend', children: [
          { key: 'a-1', label: 'Vue' },
          { key: 'a-2', label: 'React' },
        ] },
        { key: 'b', label: 'Backend' },
      ],
    }
  },
}
</script>

<template>
  <!-- Désactivé -->
  <LhTreeSelect :data="treeData" v-model="treeDisabled" disabled />
  <!-- Panneau sur place -->
  <LhTreeSelect :data="treeData" v-model="treeLocal" :teleported="false" />
</template>

API

LhTreeSelect Props

Prop	Description	Type	Valeur par défaut
data	Données de l'arbre	[LhTreeNode](#type-LhTreeNode)[]	—
modelValue	Valeur courante (string en sélection simple, string[] en sélection multiple, contrôlée par v-model)	string | string[]	—
multiple	Sélection multiple (affiche les cases à cocher, la valeur est le tableau des clés cochées)	boolean	false
disabled	Désactivé	boolean	false
placeholder	Texte d'espace réservé	string	—
teleported	Indique si le panneau est monté sur body (true par défaut)	boolean	true
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
update:modelValue	Émis lorsque la valeur sélectionnée change, à utiliser avec v-model (string en sélection simple, string[] en sélection multiple)	(value: string | string[] | undefined)
change	Émis après un changement de sélection	(value: string | string[] | undefined)

Accessibilité

• Le déclencheur est un véritable <button>, aria-haspopup="tree" + aria-expanded décrivent l'état d'expansion ; le panneau est un role="listbox" (aria-multiselectable en sélection multiple)
• La navigation clavier interne au panneau réutilise intégralement le pattern tree des APG du composant Tree
• Un clic à l'extérieur du composant ou la touche Escape ferme le panneau, le focus est rendu au déclencheur après fermeture

Définitions de types

Les structures de types TypeScript exportées par ce composant sont les suivantes (extraites automatiquement de packages/components/tree-select/src/types.ts et de @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; les descriptions des props se trouvent dans le tableau Props ci-dessus) :

LhTreeSelectProps

export interface LhTreeSelectProps {
  /** Données de l'arbre */
  data: LhTreeNode[]
  /** Valeur courante (string en sélection simple / string[] en sélection multiple, contrôlée par v-model) */
  modelValue?: string | string[]
  /** Sélection multiple (affiche les cases à cocher, la valeur est le tableau des clés cochées) */
  multiple?: boolean
  /** Désactivé */
  disabled?: boolean
  /** Texte d'espace réservé */
  placeholder?: string
  /** Indique si le panneau est monté sur body (true par défaut) */
  teleported?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhTreeNode _{(provenant de @lh-ui/share/core/tree)}

/** Données d'un nœud de l'arbre */
export interface LhTreeNode {
  /** Clé unique */
  key: string
  /** Texte affiché */
  label: string
  /** Nœuds enfants */
  children?: LhTreeNode[]
  /** Désactivé */
  disabled?: boolean
  /** Feuille ou non (déduit des children lorsque non renseigné) */
  isLeaf?: boolean
}