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

<Meta of={SyCheckboxStories} />

<div className="header">
  <h1>SyCheckbox</h1>
  <p>Le composant `SyCheckbox` est une case à cocher tri-état qui étend le composant `VCheckbox` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
</div>

Il étend les fonctionnalités de base de Vuetify avec :

- Un état indéterminé pour les sélections partielles
- Un système de validation avancé
- Des états visuels (erreur, avertissement, succès)
- Une gestion de la relation parent-enfant via la propriété `controlsIds`

<Canvas of={SyCheckboxStories.Default} />

# API

<Controls of={SyCheckboxStories.Default} />

## États

Le composant `SyCheckbox` peut avoir trois états :
- **Coché** : La case est cochée (modelValue = true)
- **Non coché** : La case est vide (modelValue = false)
- **Indéterminé** : La case est partiellement cochée (indeterminate = true)

L'état indéterminé est généralement utilisé pour représenter une sélection partielle dans un groupe d'éléments.

## Validation

Le composant supporte trois types de validation :
- Règles d'erreur standard (`customRules`)
- Règles d'avertissement (`customWarningRules`)
- Règles de succès (`customSuccessRules`)

### États visuels :

La case à cocher adapte automatiquement son apparence selon son état :
- Rouge pour les erreurs
- Orange pour les avertissements
- Vert pour les succès

## Relation parent-enfant

La propriété `controlsIds` permet d'établir une relation entre une case à cocher parent et plusieurs cases à cocher enfants. Lorsque certains enfants sont cochés mais pas tous, le parent passe automatiquement en état indéterminé.

<Canvas of={SyCheckboxStories.WithControlsIds} />

## Mode Décoratif

La propriété `decorative` permet d'afficher la case à cocher uniquement de manière visuelle, sans rendre l'élément interactif natif (`<input type="checkbox">`) dans le DOM. 
Ce mode est essentiel lorsque la case à cocher est imbriquée à l'intérieur d'un autre élément interactif (comme une ligne d'un tableau cliquable ou une option de liste déroulante). Il permet de respecter les règles d'accessibilité (qui interdisent l'imbrication de contrôles interactifs) tout en offrant le rendu visuel attendu. Le composant parent devient alors responsable de l'annonce de l'état (ex: via `aria-selected`).

<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>