@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -0,0 +1,36 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Breaking changes"/>
+
+# Les breaking changes
+
+## Stores
+
+Les librairies `vue-dot` et `synapse-bridge` utilisaient en interne la librairie `vuex`. Cette dépendance a été supprimée dans `synapse`. Plus aucune librairie de gestion d'état n'est donc imposée par le design system.
+
+## Form builder
+
+Le form builder n'est plus maintenu par le design system dans sa version synapse. Vous pouvez trouvez le code source dans sa version vue2 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder) et sa version vue3 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder).
+
+## Les composants
+
+### CustomIcon
+
+Le composant `CustomIcon` a été retiré du design system.
+
+Vous devez désormais utiliser le composant [VIcon](https://vuetifyjs.com/en/components/icons/) de Vuetify avec les icônes material du package[ @mdi/js](https://www.npmjs.com/package/@mdi/js). Pour des icônes personnalisés, importez les sous forme de composant.
+
+<Source dark code={`
+<script setup>
+	import { VIcon } from 'vuetify/components'
+	import { mdiAccount } from '@mdi/js'
+</script>
+
+<template>
+	<VIcon> {{ mdiAccount }} </VIcon>
+</template>
+`} />
+
+### FilterModule
+
+Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterInline](/docs/composants-filtres-filterssidebar--docs) et [FilterSideBar](/docs/composants-filtres-filterinline--docs).

package/src/stories/GuideDuDev/UtiliserLesRules.mdx

@@ -1,8 +1,8 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Guide Du Dev/Utiliser les rules"/>
+<Meta title="Guide Du Dev/Utiliser le système de validation"/>
 
-# Utiliser les règles de validation
+# Utiliser le système de validation
 
 Ce guide décrit comment utiliser le système de validation de formulaires du Design System pour créer des validations flexibles et intuitives.
 
@@ -40,6 +40,7 @@ interface ValidationOptions {
   customRules?: ValidationRule[]; // Règles personnalisées
   warningRules?: ValidationRule[]; // Règles d'avertissement
   successRules?: ValidationRule[]; // Règles de succès
+  disableErrorHandling?: boolean; // Désactiver complètement la gestion des erreurs
 }
 `}/>
 
@@ -71,6 +72,7 @@ interface RuleOptions {
   ignoreSpace?: boolean;   // Ignorer les espaces
   isWarning?: boolean;     // Traiter comme un avertissement
   validate?: (value: any) => boolean | string; // Validation personnalisée
+  date?: string | Date;    // Date de référence pour les règles de dates
 }
 `}/>
 
@@ -305,14 +307,34 @@ Dans cet exemple :
 
 ## Règles de validation disponibles
 
-- **required** : Vérifie qu'un champ est rempli
-- **email** : Valide le format d'une adresse email
-- **minLength** : Vérifie une longueur minimale
-- **maxLength** : Vérifie une longueur maximale
-- **min** : Vérifie une valeur minimale (nombre)
-- **max** : Vérifie une valeur maximale (nombre)
-- **pattern** : Valide avec une expression régulière
-- **custom** : Validation personnalisée via une fonction
+### Règles basiques
+- `required` : Vérifie qu'une valeur est présente
+- `min` : Vérifie qu'une valeur numérique est supérieure ou égale à un minimum
+- `max` : Vérifie qu'une valeur numérique est inférieure ou égale à un maximum
+- `minLength` : Vérifie qu'une chaîne a une longueur minimale
+- `maxLength` : Vérifie qu'une chaîne a une longueur maximale
+- `exactLength` : Vérifie qu'une chaîne a une longueur exacte
+- `email` : Vérifie qu'une chaîne est un email valide
+- `matchPattern` : Vérifie qu'une chaîne correspond à une expression régulière
+
+### Règles de validation de dates
+- `notWeekend` : Vérifie qu'une date n'est pas un jour de week-end
+- `notBeforeToday` : Vérifie qu'une date n'est pas antérieure à aujourd'hui
+- `notAfterToday` : Vérifie qu'une date n'est pas postérieure à aujourd'hui
+- `notBeforeDate` : Vérifie qu'une date n'est pas antérieure à une date de référence
+- `notAfterDate` : Vérifie qu'une date n'est pas postérieure à une date de référence
+- `dateExact` : Vérifie qu'une date est exactement égale à une date de référence
+
+### Règle personnalisée
+- `custom` : Permet de définir une validation personnalisée via la fonction `validate`
+
+## Méthodes disponibles
+
+Le composable `useValidation` retourne plusieurs méthodes utiles :
+
+- `validateField` : Valide une valeur selon les règles définies
+- `validateOnSubmit` : Vérifie si le formulaire peut être soumis (retourne `true` si aucune erreur)
+- `clearValidation` : Réinitialise l'état de validation (efface erreurs, avertissements et succès)
 
 ## Bonnes pratiques
 

package/src/utils/formatDate/index.ts

@@ -0,0 +1,6 @@
+import dayjs, { Dayjs } from 'dayjs'
+
+/** Format a date with dayjs */
+export function formatDate(date: Dayjs, format = 'DD/MM/YYYY'): string {
+	return dayjs(date).format(format)
+}

package/src/utils/formatDate/tests/formatDate.spec.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs'
+import { describe, it, expect } from 'vitest'
+
+import { formatDate } from '../'
+
+describe('formatDate', () => {
+	it('formats a valid date', () => {
+		const date = dayjs('2022-01-01')
+
+		expect(formatDate(date)).toEqual('01/01/2022')
+	})
+
+	it('does not format an invalid date', () => {
+		const date = dayjs(null)
+
+		expect(formatDate(date)).toEqual('Invalid Date')
+	})
+})

package/src/utils/functions/validation/isDateAfter/index.ts

@@ -0,0 +1,9 @@
+import { parseDate } from '@/utils/parseDate'
+
+/** Check if a date is after another date (DD/MM/YYYY format) */
+export function isDateAfter(maxDate: string, value: string): boolean {
+	const parsedValue = parseDate(value)
+	const parsedMaxDate = parseDate(maxDate)
+
+	return parsedValue.isAfter(parsedMaxDate)
+}

package/src/utils/functions/validation/isDateAfter/tests/isDateAfter.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+import { isDateAfter } from '..'
+
+describe('isDateAfter', () => {
+	const today = formatDate(dayjs())
+	const pasteDate = formatDate(dayjs().subtract(1, 'year'))
+	const futureDate = formatDate(dayjs().add(1, 'year'))
+
+	it('returns true with a future date', () => {
+		expect(isDateAfter(today, futureDate)).toBeTruthy()
+	})
+
+	it('returns false with a past date', () => {
+		expect(isDateAfter(today, pasteDate)).toBeFalsy()
+	})
+})

package/src/utils/functions/validation/isDateBefore/index.ts

@@ -0,0 +1,9 @@
+import { parseDate } from '@/utils/parseDate'
+
+/** Check if a date is before another date (DD/MM/YYYY format) */
+export function isDateBefore(minDate: string, value: string): boolean {
+	const parsedValue = parseDate(value)
+	const parsedMinDate = parseDate(minDate)
+
+	return parsedValue.isBefore(parsedMinDate)
+}

package/src/utils/functions/validation/isDateBefore/tests/isDateBefore.spec.ts

@@ -0,0 +1,23 @@
+import { isDateBefore } from '../'
+import { describe, it, expect } from 'vitest'
+
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+
+describe('isDateBefore', () => {
+	const today = formatDate(dayjs())
+	const pasteDate = formatDate(dayjs().subtract(1, 'year'))
+	const futureDate = formatDate(dayjs().add(1, 'year'))
+
+	it('returns true with a past date', () => {
+		expect(isDateBefore(today, pasteDate)).toBeTruthy()
+	})
+
+	it('returns false with a future date', () => {
+		expect(isDateBefore(today, futureDate)).toBeFalsy()
+	})
+
+	it('returns false with the current date', () => {
+		expect(isDateBefore(today, today)).toBeFalsy()
+	})
+})

package/src/utils/functions/validation/isDateInRange/index.ts

@@ -0,0 +1,22 @@
+import dayjs from 'dayjs'
+
+import isBetween from 'dayjs/plugin/isBetween'
+dayjs.extend(isBetween)
+
+export type Interval = '()' | '[]' | '[)' | '(]'
+
+/** Check if a date is in a range */
+export function isDateInRange(
+	date: string,
+	startDate: string,
+	endDate: string,
+	interval: Interval = '[)', // '[' indicates inclusion, '(' indicates exclusion
+): boolean {
+	const rangePositive = dayjs(startDate).isBefore(dayjs(endDate))
+
+	if (rangePositive) {
+		return dayjs(date).isBetween(startDate, endDate, null, interval)
+	}
+
+	return false
+}

package/src/utils/functions/validation/isDateInRange/tests/isDateInRange.spec.ts

@@ -0,0 +1,28 @@
+import { isDateInRange } from '../'
+import { describe, it, expect } from 'vitest'
+
+const start = '2019-10-21'
+const end = '2019-10-27'
+
+const date = '2019-10-23'
+
+describe('isDateInRange', () => {
+	it('returns true if the date is in the range', () => {
+		expect(isDateInRange(date, start, end)).toBe(true)
+	})
+
+	it('returns false if the range is negative', () => {
+		// Invert start & end date to create a negative range
+		expect(isDateInRange(date, end, start)).toBe(false)
+	})
+
+	it('works with a custom interval', () => {
+		const start = '2019-10-21'
+		const end = '2019-10-27'
+
+		const date = '2019-10-27'
+
+		// We change the interval to allow the last day in the range
+		expect(isDateInRange(date, start, end, '[]')).toBe(true)
+	})
+})

package/src/utils/functions/validation/isDateValid/index.ts

@@ -0,0 +1,67 @@
+import { parseDate } from '@/utils/parseDate'
+import dayjs from 'dayjs'
+
+import isLeapYear from 'dayjs/plugin/isLeapYear'
+
+dayjs.extend(isLeapYear)
+
+const DATE_SEPARATORS = /[- /.]/
+/** Matches DD/MM/YYYY with one of the DATE_SEPARATORS */
+export const DATE_FORMAT_REGEX
+	= /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.]\d{4}/
+
+export enum DateErrorCodes {
+	WRONG_FORMAT = 'wrongFormat',
+	MONTH_NOT_MATCH = 'monthNotMatch',
+	NOT_LEAP_YEAR = 'notALeapYear',
+}
+
+/** Check if a date is valid */
+export function isDateValid(date: string): string | true {
+	if (!date.match(DATE_FORMAT_REGEX)) {
+		return DateErrorCodes.WRONG_FORMAT
+	}
+
+	const DAYS_IN_MONTH = [
+		31,
+		28, // Check leap year later
+		31,
+		30,
+		31,
+		30,
+		31,
+		31,
+		30,
+		31,
+		30,
+		31,
+	]
+
+	const parsedDate = date.split(DATE_SEPARATORS)
+
+	const day = parseInt(parsedDate[0], 10)
+	const month = parseInt(parsedDate[1], 10)
+
+	if (month !== 2) {
+		if (day > DAYS_IN_MONTH[month - 1]) {
+			return DateErrorCodes.MONTH_NOT_MATCH
+		}
+		else {
+			return true
+		}
+	}
+	else {
+		const parsed = parseDate(date)
+		const isLeap = parsed.isLeapYear()
+
+		if (isLeap && day > 29) {
+			return DateErrorCodes.MONTH_NOT_MATCH
+		}
+
+		if (!isLeap && day >= 29) {
+			return DateErrorCodes.NOT_LEAP_YEAR
+		}
+
+		return true
+	}
+}

package/src/utils/functions/validation/isDateValid/tests/isDateValid.spec.ts

@@ -0,0 +1,46 @@
+import { isDateValid } from '../index'
+import { describe, it, expect } from 'vitest'
+
+describe('isDateValid', () => {
+	it('returns an error when the date is not valid', () => {
+		const date = '99/99/9999'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the format is invalid', () => {
+		const date = '2020-04-16'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the day does not match the month', () => {
+		const date = '31/11/2019' // Only 30 days in November
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (not leap year) and the day does not match the month', () => {
+		const date = '29/02/2019' // Not a leap year, only 28 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (leap year) and the day does not match the month', () => {
+		const date = '30/02/2020' // Leap year, 29 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns true when it is february and the date is valid', () => {
+		const date = '15/02/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+
+	it('returns true when the date is valid', () => {
+		const date = '14/09/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+})

package/src/utils/functions/validation/isEmailValid/index.ts

@@ -0,0 +1,9 @@
+/** From https://emailregex.com/ */
+export const EMAIL_REGEXP
+	// eslint-disable-next-line no-control-regex
+	= /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/
+
+/** Check if an email is valid */
+export function isEmailValid(email: string): boolean {
+	return Boolean(EMAIL_REGEXP.exec(email))
+}

package/src/utils/functions/validation/isWeekend/index.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+export const WEEKEND_DAYS = ['Saturday', 'Sunday']
+
+/** Check if a date is Saturday or Sunday */
+export function isWeekend(date: string): boolean {
+	const day = dayjs(date).format('dddd')
+
+	return WEEKEND_DAYS.includes(day)
+}

package/src/utils/functions/validation/isWeekend/tests/isWeekend.spec.ts

@@ -0,0 +1,16 @@
+import { isWeekend } from '../'
+import { describe, it, expect } from 'vitest'
+
+describe('isWeekend', () => {
+	it('returns true if the day is in a weekend', () => {
+		const date = '2019-10-26' // Saturday
+
+		expect(isWeekend(date)).toBe(true)
+	})
+
+	it('returns false if the day is not in a weekend', () => {
+		const date = '2019-10-21' // Monday
+
+		expect(isWeekend(date)).toBe(false)
+	})
+})

package/src/utils/parseDate/index.ts

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs'
+
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+/** Parse a date with dayjs */
+export function parseDate(value: string, format = 'DD/MM/YYYY'): dayjs.Dayjs {
+	// Currently dayjs doesn't work well with timezone offsets and parsing
+	// To fix this, we set the hour based on timezone offset
+	// so we don't go back or forward multiple hours
+
+	/** Timezone offset in minutes */
+	const timezoneOffset = (new Date()).getTimezoneOffset()
+
+	let offset = '00'
+
+	if (timezoneOffset > 0) {
+		offset = '14'
+	}
+	else {
+		offset = '04'
+	}
+
+	const dateWithTime = `${value} ${offset}:00:00`
+	const formatWithTime = `${format} HH:mm:ss`
+
+	return dayjs(dateWithTime, formatWithTime, true)
+}

package/src/utils/parseDate/tests/parseDate.spec.ts

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs'
+import { describe, it, expect } from 'vitest'
+
+import { parseDate } from '../index'
+
+const RESULT_DATE_FORMAT = 'YYYY-MM-DD'
+
+describe('parseDate', () => {
+	it('returns a working dayjs instance', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+	})
+
+	it('returns a working dayjs instance with custom date format', () => {
+		const DATE_FORMAT = 'DD MM YYYY'
+
+		const date = dayjs().format(DATE_FORMAT)
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		expect(parseDate(date, DATE_FORMAT).format(RESULT_DATE_FORMAT)).toBe(
+			parsedDate,
+		)
+	})
+
+	it('returns a working dayjs instance with a positive timezone offset', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		// Mock getTimezoneOffset
+		const originalGetTimezoneOffset = Date.prototype.getTimezoneOffset
+		Date.prototype.getTimezoneOffset = () => 160
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+
+		Date.prototype.getTimezoneOffset = originalGetTimezoneOffset
+	})
+
+	it('returns a working dayjs instance with a neutral timezone offset', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		// Mock getTimezoneOffset
+		const originalGetTimezoneOffset = Date.prototype.getTimezoneOffset
+		Date.prototype.getTimezoneOffset = () => 0
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+
+		Date.prototype.getTimezoneOffset = originalGetTimezoneOffset
+	})
+})

package/src/utils/rules/Rules.mdx

@@ -0,0 +1,16 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Règles De Validation/Les règles de validation" />
+
+# Les règles de validation
+
+Les règles de validation permettent de vérifier la validité des données saisies dans un formulaire. Elles peuvent être utilisées en combinaison d'autres règles de `synapse` ou de personnalisées.
+
+Pour plus d'informations sur les règles de validation, consultez la [documentation de `Vuetify`](https://vuetifyjs.com/en/components/forms/#rules).
+
+## Détails d'utilisation
+
+Les règles de validation sont des fonctions qui prennent en paramètre la valeur du champ de formulaire à valider. Elles retournent un `boolean` ou une `string` en fonction de la validité de la valeur.
+
+Ce package fournie des fonctions d'ordre supérieur pour faciliter la création de règles de validation personnalisées. le nom de ces fonctions se termine par `Fn`.
+Elles prennent en paramètre des données de configuration et retournent une fonction de validation. Cette fonction de validation peut être utilisée comme règle d'un champ de formulaire.

package/src/utils/rules/doMatchPattern/DoMachPattern.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as DoMatchPatternStories from './DoMatchPattern.stories';
+
+<Meta of={DoMatchPatternStories} />
+
+# Règle de validation `doMatchPattern`
+
+La règle de validation `doMatchPattern` permet de vérifier qu'une chaîne de caractères correspond à un motif donné.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `doMatchPatternFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { doMatchPatternFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre le motif que vous souhaitez vérifier.
+
+<Source dark code={`
+const isEmail = doMatchPatternFn(/^[\w-]+@([\w-]+\.)+[\w-]+$/);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { doMatchPatternFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const isEmail = doMatchPatternFn(/^[\w-]+@([\w-]+\.)+[\w-]+$/);
+</script>
+
+<template>
+	<VTextField
+		:rules="[isEmail]"
+		label="Email"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+doMatchPatternFn(
+	pattern: RegExp,
+	errorMessages?: {
+		default: string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `pattern` : expression régulière à utiliser pour vérifier la chaîne de caractères.
+- `errorMessages` : objet optionnel permettant de personnaliser les messages d'erreur. Les clés disponibles sont :
+	- `default` : message d'erreur par défaut.
+
+### Valeurs de retour
+
+Retourne une fonction pouvant être utilisée comme règle de validation pour un champs de formulaire Vuetify.
+
+## Exemples
+
+<Canvas of={DoMatchPatternStories.Default} />
+

package/src/utils/rules/doMatchPattern/DoMatchPattern.stories.ts

@@ -0,0 +1,106 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { doMatchPatternFn } from './index'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/doMatchPattern',
+	component: doMatchPatternFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const matchTwoDigits = doMatchPatternFn(/^[0-9]{2}$/)
+				return { matchTwoDigits }
+			},
+			template: `
+				<VTextField
+					:rules="[matchTwoDigits]"
+					label="Deux chiffres"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { doMatchPatternFn } from '@cnamts/synapse'
+
+					const matchTwoDigits = doMatchPatternFn(/^[0-9]{2}$/)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[matchTwoDigits]"
+						label="Deux chiffres"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const twoDigits = doMatchPatternFn(
+					/^[0-9]{2}$/,
+					{ default: 'Veuillez saisir deux chiffres.' },
+				)
+				return { twoDigits }
+			},
+			template: `
+				<VTextField
+					:rules="[twoDigits]"
+					label="Deux chiffres"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { doMatchPatternFn } from '@cnamts/synapse'
+
+					const twoDigits = doMatchPatternFn(
+						/^[0-9]{2}$/,
+						{ default: 'Veuillez saisir deux chiffres.' },
+					)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[twoDigits]"
+						label="Deux chiffres"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}