## Tree
Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.
### Usage
Voici la structure basique.
:::demo
```html
```
:::
### Sélection
Vous pouvez activer la sélection des noeuds.
:::demo cet exemple montre également comment charger des données de manière asynchrone.
```html
```
:::
### Noeud-feuille personnalisés en mode lazy
:::demo Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.
```html
```
:::
### Checkbox désactivées
Les checkbox des noeuds peuvent être désactivées individuellement.
:::demo Dans cet exemple, la propriété `disabled` est ajoutée à `defaultProps`, et certains noeuds ont `disabled:true`. Les checkbox correspondantes sont donc désactivées.
```html
```
:::
### Ouverture et sélection par défaut
Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.
:::demo Utilisez `default-expanded-keys` et `default-checked-keys` pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que `node-key` est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.
```html
```
:::
### Sélectionner des noeuds
:::demo Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, `node-key` est requis.
```html
Récupération par noeud
Récupération par clé
Sélection par noeud
Sélection par clé
Reset
```
:::
### Contenu personnalisé
Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.
:::demo Il existe deux méthodes de personnalisation: `render-content` et les slots avec portée. Utilisez `render-content` pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à `node` et `data` dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que la démo de `render-content` ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, `render-content` marchera si les dépendances sont satisfaites.
```html
```
:::
### Filtrage
Les noeuds peuvent être filtrés par mot-clé.
:::demo Utilisez la méthode `filter` de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, `filter-node-method` est requis, sa valeur étant la méthode de filtrage.
```html
```
:::
### Accordéon
Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.
:::demo
```html
```
:::
### Noeuds déplaçables
Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut `draggable`.
:::demo
```html
```
:::
### Attributs
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
| data | Données de l'arbre | array | — | — |
| empty-text | Texte à afficher quand il n'y a pas de données. | string | — | — |
| node-key | Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre. | string | — | — |
| props | Options de configuration, voir table suivante. | object | — | — |
| render-after-expand | Si les noeuds enfants doivent être générés seulement après la première ouverture du parent. | boolean | — | true |
| load | Méthode pour charger les noeuds enfants, uniquement en mode `lazy`. | function(node, resolve) | — | — |
| render-content | Fonction de rendu pour les noeuds. | Function(h, { node, data, store } | — | — |
| highlight-current | Si le noeud courant est mis en valeur. | boolean | — | false |
| default-expand-all | Si tous les noeuds sont ouverts par défaut. | boolean | — | false |
| expand-on-click-node | Si l'ouverture se fait aussi en cliquant sur le noeud. Si `false`, l'ouverture ne se fera qu'en cliquant sur l'icône. | boolean | — | true |
| check-on-click-node | Si la sélection se fait aussi en cliquant sur le noeud. Si `false`, la sélection ne se fera qu'en cliquant sur la checkbox. | boolean | — | false |
| auto-expand-parent | Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre. | boolean | — | true |
| default-expanded-keys | Tableau des clés des noeuds initialement ouverts. | array | — | — |
| show-checkbox | Si un noeud est sélectionnable. | boolean | — | false |
| check-strictly | Si la sélection d'un noeud affecte celle de son parent quand `show-checkbox` est `true`. | boolean | — | false |
| default-checked-keys | Tableau des clés des noeuds initialement sélectionnés. | array | — | — |
| current-node-key | Clé du noeud initialement sélectionné. | string, number | — | — |
| filter-node-method | Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne `false`, les noeuds seront cachés. | Function(value, data, node) | — | — |
| accordion | Si les noeuds fonctionnent en mode accordéon. | boolean | — | false |
| indent | Indentation horizontale des noeuds en px. | number | — | 16 |
| icon-class | Icône pour chaque noeud. | string | - | - |
| lazy | Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut `load`. | boolean | — | false |
| draggable | Si les noeuds sont déplaçables par drag'n drop. | boolean | — | false |
| allow-drag | Fonction exécutée avant le déplacement d'un noeud. Si `false` est retourné, le noeud ne sera pas déplaçable. | Function(node) | — | — |
| allow-drop | Fonction exécutée avant le placement d'un noeud. Si `false` est retourné, le noeud ne pourra être placé sur la zone en question. `type` a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible). | Function(draggingNode, dropNode, type) | — | — |
### props
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
| label | Détermine quelle clé de l'objet noeud représente le label. | string, function(data, node) | — | — |
| children | Détermine quelle clé de l'objet noeud représente les noeuds enfants. | string | — | — |
| disabled | Détermine quelle clé de l'objet noeud représente la désactivation du noeud. | boolean, function(data, node) | — | — |
| isLeaf | Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading. | boolean, function(data, node) | — | — |
### Méthodes
`Tree` possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.
| Méthode | Description | Paramètres |
| --------------- | ---------------------------------------- | ---------------------------------------- |
| filter | Filtre les noeuds. | Accepte un paramètre qui sera le premier paramètre de `filter-node-method`. |
| updateKeyChildren | Ajoute de nouvelles données au noeud, ne marche que lorsque `node-key` est assigné. | (key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données. |
| getCheckedNodes | Si le noeud peut-être sélectionné (`show-checkbox` est `true`), il retourne un tableau des noeuds sélectionnés. | (leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à `false`. Si `true`, retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à `false`. Si `true`, retourne la moitié des noeuds sélectionnés. |
| setCheckedNodes | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | Un tableau de noeuds qui doivent être sélectionnés. |
| getCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne un tableau de clés des noeuds sélectionnés. | (leafOnly) Booléen, défaut à `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
| setCheckedKeys | Détermine quels noeuds sont sélectionnés, ne marche que si `node_key` est assigné. | (keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut `false`. Si à `true`, Il retourne seulement un tableau des sous-noeuds sélectionnés. |
| setChecked | Détermine si un noeud est sélectionnable, ne marche que si `node_key` est assigné. | (key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond. |
| getHalfCheckedNodes | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne la moitié des noeuds sélectionnés. | - |
| getHalfCheckedKeys | Si le noeud peut être sélectionné (`show-checkbox` est `true`), retourne les clés de la moitié des noeuds sélectionnés. | - |
| getCurrentKey | retourne la clé du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
| getCurrentNode | retourne les données du noeud actuellement en valeur (`null` si aucun noeud n'est en valeur). | — |
| setCurrentKey | Met un noeud en valeur par sa clé, ne marche que si `node_key` est assigné. | (key) la clé du noeud. Si `null`, annule la sélection actuelle. |
| setCurrentNode | Met un noeud en valeur, ne marche que si `node_key` est assigné. | (node) le noeud. |
| getNode | Retourne le noeud grâce à sa clé ou ses données. | (data) la clé ou les données du noeud. |
| remove | Supprime un noeud, ne marche que si node-key est assigné. | (data) le noeud ou ses données à supprimer. |
| append | Ajoute un noeud à un autre noeud. | (data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données. |
| insertBefore | Insère un noeud avant un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
| insertAfter | Insère un noeud après un autre noeud. | (data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence. |
### Évènements
| Nom | Description | Paramètres |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | Se déclenche quand est cliqué. | Le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-contextmenu | Se déclenche quand un noeud reçoit un clic droit. | L'évènement, le noeud cliqué, la propriété `node` de TreeNode, TreeNode lui-même. |
| check-change | Se déclenche quand quand la sélection d'un noeud change. | Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés. |
| check | Se déclenche après un clic sur le checkbox. | Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys. |
| current-change | Se déclenche quand le noeud courant changes. | Le noeud courant, la propriété `node` de TreeNode |
| node-expand | Se déclenche quand le noeud courant s'ouvre. | Le noeud ouvert, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-collapse | Se déclenche quand le noeud courant se ferme. | Le noeud fermé, la propriété `node` de TreeNode, TreeNode lui-même. |
| node-drag-start | Se déclenche quand le déplacement commence. | Le noeud déplacé, l'évènement. |
| node-drag-enter | Se déclenche quand le noeud déplacé entre dans un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-leave | Se déclenche quand le noeud déplacé quitte un autre noeud. | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-over | Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover). | Le noeud déplacé, l'autre noeud, l'évènement. |
| node-drag-end | Se déclenche quand le déplacement se termine. | Le noeud déplacé, le noeud d'arrivée (peut-être `undefined`), le type de placement (before / after / inner), l'évènement. |
| node-drop | Se déclenche après que le noeud déplacé soit placé. | Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement. |
### Slot avec portée
| Nom | Description |
|------|--------|
| — | Le contenu personnalisé des noeuds. les paramètres sont { node, data }. |