import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
import * as PasswordFieldStories from './PasswordField.stories'
import * as PasswordFieldValidationStories from './Validation/Validation.stories'

<Meta of={PasswordFieldStories} />

<div className="header">
  <h1>PasswordField</h1>
  <p>Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.</p>
</div>

## Utilisation basique

La version de base du composant avec le style outlined par défaut.

<Canvas of={PasswordFieldStories.Default} />

## Fonctionnalités principales

- **Masquage/affichage du mot de passe** : Une icône permet de basculer entre l'affichage en clair et masqué
- **Validation personnalisable** : Support des messages d'erreur, d'avertissement et de succès
- **Styles configurables** : Choix entre les styles `outlined` et `underlined`
- **États spéciaux** : Support des états désactivé et lecture seule
- **Validation automatique** : Validation à la perte de focus configurable

## API

<Controls of={PasswordFieldStories.Default} />

<Source
    dark code={`
<template>
	<PasswordField
		v-model="password"
		label="Mot de passe"
	/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PasswordField } from '@cnamts/synapse'

const password = ref('')
</script>
`}
/>

## Validation

### Validation simple

Le composant peut être requis et afficher un message d'erreur si le champ est vide.

<Canvas of={PasswordFieldStories.Required} />

### Validation avancée

Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).

<Canvas of={PasswordFieldValidationStories.WithCustomRules} />

### Exemples d'états de validation

<div className="sb-grid">
  <div>
    <h4>Avec erreur</h4>
    <Canvas of={PasswordFieldValidationStories.WithError} />
  </div>
  <div>
    <h4>Avec avertissement</h4>
    <Canvas of={PasswordFieldValidationStories.WithWarning} />
  </div>
  <div>
    <h4>Avec succès</h4>
    <Canvas of={PasswordFieldValidationStories.WithSuccess} />
  </div>
</div>

### Méthodes exposées

Le composant expose les méthodes et propriétés suivantes via `defineExpose` :

- **showEyeIcon** : (ref) Contrôle l'affichage du mot de passe
- **errors** : (ref) Liste des erreurs de validation actuelles
- **warnings** : (ref) Liste des avertissements actuels
- **successes** : (ref) Liste des messages de succès actuels
- **validateOnSubmit** : () => boolean - Méthode pour valider le champ, retourne true si valide

## Bonnes pratiques

1. **Validation progressive** :
   - Utilisez `isValidateOnBlur` pour une validation en temps réel
   - Combinez erreurs, avertissements et succès pour guider l'utilisateur

2. **Messages clairs** :
   - Utilisez des messages d'erreur explicites
   - Fournissez des suggestions d'amélioration via les warnings
   - Confirmez les bonnes pratiques avec les messages de succès

3. **Accessibilité** :
   - Toujours fournir un label explicite
   - Utiliser la prop `required` quand nécessaire
   - Considérer l'utilisation de `displayAsterisk` pour les champs requis

## En savoir plus

Pour plus d'informations sur l'utilisation des règles de validation, consultez la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).

<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>