import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
import * as SyTextFieldStories from "./SyTextField.stories.ts";

<Meta of={SyTextFieldStories} />

<div className="header">
  <h1>SyTextField</h1>
  <p>Le composant `SyTextField` est utilisé pour proposer une alternative au `TextField` 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 système de validation avancé
- Des états visuels (erreur, avertissement, succès)
- Des icônes de validation automatiques
- Une personnalisation poussée des messages

<Canvas of={SyTextFieldStories.Default} />

# API

<Controls of={SyTextFieldStories.Default} />

## Validation

Le composant supporte deux types de validation :
- Règles d'erreur standard (\`customRules\`)
- Règles d'avertissement (\`customWarningRules\`)

### États visuels :

Le champ adapte automatiquement son apparence selon son état :
- Rouge pour les erreurs
- Orange pour les avertissements
- Vert pour les succès

# Exemple d'utilisation

<Source
    dark code={`
<script setup lang="ts">
	import { ref } from 'vue'
	import { SyTextField } from '@cnamts/synapse'

	const model = ref('')

</script>

<template>
	<main class="ma-12">
		Text saisie: {{ model }}
		<div class="d-flex flex-wrap align-center">
        	<SyTextField
				v-model="model"
				label="Label"
				color="primary"
				is-clearable
			/>
		</div>
	</main>
</template>
`}
/>

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