import { Meta, Canvas, Source } from '@storybook/blocks';
import * as IsExactLengthStories from './IsExactLength.stories';

<Meta of={IsExactLengthStories} />
<style>
{
`
      .header {
      padding: 2rem;
      margin-bottom: 2rem;
    }
    
    .header h1 {
      margin-top: 0;
      color:  #0c419a;;
      font-size: 2.5rem;
      font-weight: 700;
    }
    
    .header p {
      font-size: 1.1rem;
      margin-bottom: 0;
    }
    `
}
</style>

<div className="header">
  <h1>Règle de validation `isExactLength`</h1>
  <p>La règle de validation `isExactLength` permet d'imposer une longueur exacte à une chaîne de caractères dans un champs de formulaire. </p>
</div>

## Usage

Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `isExactLengthFn` depuis le package `@cnamts/synapse`.

<Source dark code={`
import { isExactLengthFn } from '@cnamts/synapse';
`} />

Vous devez ensuite faire appel à cette fonction en lui passant en paramètre la longueur exacte que vous souhaitez imposer.

<Source dark code={`
const length15 = isExactLengthFn(15);
`} />

Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.

<Source dark code={`
<script setup lang="ts">
import { isExactLengthFn } from '@cnamts/synapse';
import { VTextField } from 'vuetify/components';

const length15 = isExactLengthFn(15);

</script>

<template>
	<VTextField
		:rules="[length15]"
		label="Max 15 characters"
	/>
</template>
`} />

## API

<Source dark code={`
isExactLengthFn(
	lengthValue: number,
	ignoreSpaces?: boolean
	errorMessages?: {
		default?: (length: number) => string;
	}
): (value: string) => true | string;
`} />

### Arguments

- `lengthValue` : nombre entier positif représentant la longueur exacte à imposer.
- `ignoreSpaces` : booléen optionnel permettant d'ignorer les espaces dans le calcul de la longueur. Par défaut, la valeur est `false`.
- `errorMessages` : objet optionnel permettant de personnaliser les messages d'erreur. Les clés disponibles sont :
	- `default` : message d'erreur par défaut. Vous pouvez utiliser la variable `{{ length }}` pour afficher la longueur attendue.

### Valeurs de retour

Retourne une fonction pouvant être utilisée comme règle de validation pour un champs de formulaire Vuetify.

## Exemples

<Canvas of={IsExactLengthStories.Default} />