import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
import * as SyTable from './SyTable.stories';
import '@/stories/styles/shared.css';

<Meta of={SyTable} />

<div className="header">
  <h1>SyTable</h1>
  <p>Le composant `SyTable` est utilisé pour afficher des données tabulaires côté client. Il s'appuie sur le composant `VDataTable` de Vuetify et offre des fonctionnalités supplémentaires comme le stockage local des options de tableau et des améliorations d'accessibilité.</p>
</div>

<Canvas story={{height: '550px'}} of={SyTable.Default} />

## API

<Controls of={SyTable.Default} />

## Fonctionnalités

### Stockage local des options

Le composant `SyTable` enregistre automatiquement les options du tableau (tri, pagination, etc.) dans le localStorage du navigateur. Ces options sont restaurées lorsque l'utilisateur revient sur la page.

Pour gérer individuellement le stockage des options pour différents tableaux, utilisez la prop `suffix`.

### Tri des colonnes

Le composant permet de trier les données par colonne en cliquant sur l'en-tête de la colonne.

Le multi-tri est également supporté. Vous pouvez activer cette fonctionnalité en utilisant la prop `multi-sort`.

### Filtres des colonnes

Le composant permet d'appliquer des filtres sur les colonnes. Vous pouvez définir des filtres personnalisés pour chaque colonne en utilisant la prop `show-filters`. Voir d'autres exemples de filtres dans les stories.

### Resize des colonnes

Le composant peut permettre de redimensionner les colonnes en utilisant la prop `resizable-columns`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.

### Réorganisation des colonnes

Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant la prop `enable-column-controls`. Vous pouvez activer ou désactiver cette fonctionnalité selon vos besoins.

### Selection des lignes

Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.

Par défaut, la clé utilisée pour identifier chaque ligne lors de la sélection est `id`. Si vos éléments ne possèdent pas de propriété `id`, la valeur sélectionnée correspondra à l'objet complet de la ligne.

Vous pouvez personnaliser cette clé avec la prop `selection-key` pour indiquer quel champ utiliser (ex: `userId`).

Exemple d'utilisation :
<Source dark code={`
<SyTable
  v-model="selected"
  :items="items"
  :headers="headers"
  show-select
  selection-key="userId"
/>
`}/>

### Click des lignes

La prop `clickableRow` active le clic sur toute la ligne du tableau. Quand cette prop vaut `true`, un clic sur une ligne émet l'événement `row-click` avec l'item correspondant.

Les lignes deviennent également focusables au clavier afin de pouvoir être activées avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.

Les éléments interactifs déjà présents dans la ligne, comme les cases à cocher, liens ou boutons, conservent leur comportement propre et ne déclenchent pas `row-click`.

L'événement `row-click` est émis lorsqu'une ligne est activée alors que `clickableRow` est à `true`.

- Payload : l'objet de la ligne cliquée
- Cas pris en charge : clic souris sur la ligne, activation clavier via <kbd>Entrée</kbd> ou <kbd>Espace</kbd>
- Cas exclus : interaction avec un élément interactif imbriqué dans la ligne

Exemple :
<Source dark code={`
<SyTable
  :items="items"
  :headers="headers"
  clickable-row
  @row-click="handleRowClick"
/>
`}/>


### Slot item
Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.

### Slot headers
Le composant permet de personnaliser l'affichage des en-têtes de colonnes en utilisant le slot `headers`. Vous pouvez définir la structure de chaque en-tête en fonction de vos besoins.

### Items par page options
Le composant permet de personnaliser le nombre possible d'éléments par page en utilisant la prop `items-per-page-options`. Vous pouvez spécifier un tableau d'options pour permettre de choisir le nombre d'éléments affichés par page.

<div className="header">
  <h1>Accessibilité</h1>
</div>

Le composant améliore l'accessibilité en ajoutant automatiquement :
- Une légende (caption) pour le tableau
- Des attributs ARIA appropriés
- Des attributs scope pour les en-têtes de colonnes

## Exemples d'utilisation

### Tableau simple

<Source dark code={`
<template>
  <SyTable
    v-model:options="options"
    :headers="headers"
    :items="items"
  />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { SyTable } from '@cnamts/synapse'
  
  const options = ref({
    itemsPerPage: 4,
  })
import '../../../stories/styles/shared.css';
  
  const headers = ref([
    {
      title: 'Nom',
      key: 'lastname',
    },
    {
      title: 'Prénom',
      key: 'firstname',
    },
    {
      title: 'Email',
      value: 'email',
    },
  ])
    
  const items = ref([
    {
      firstname: 'Virginie',
      lastname: 'Beauchesne',
      email: 'virginie.beauchesne@example.com',
    },
    {
      firstname: 'Simone',
      lastname: 'Bellefeuille',
      email: 'simone.bellefeuille@example.com',
    },
    {
      firstname: 'Étienne',
      lastname: 'Salois',
      email: 'etienne.salois@example.com',
    },
    {
      firstname: 'Thierry',
      lastname: 'Bobu',
      email: 'thierry.bobu@example.com',
    },
    {
      firstname: 'Bernadette',
      lastname: 'Langelier',
      email: 'bernadette.langelier@exemple.com'
    },
    {
      firstname: 'Agate',
      lastname: 'Roy',
      email: 'agate.roy@exemple.com'
    }
  ])
</script>
`} />

### Plusieurs tableaux sur une même page

Pour utiliser plusieurs tableaux sur une même page avec des options indépendantes, utilisez la prop `suffix` pour chaque tableau.

## Bonnes pratiques

- Utilisez des en-têtes clairs et descriptifs pour chaque colonne
- Définissez un nombre d'éléments par page adapté à votre contenu
- Utilisez la prop `suffix` lorsque vous avez plusieurs tableaux sur une même page
- Ajoutez une légende explicite si le tableau contient des données complexes