@cnamts/synapse 0.0.10-alpha → 0.0.11-alpha

package/src/components/PeriodField/AccessibiliteItems.ts

@@ -0,0 +1,269 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+
+		items2: [
+			{
+				subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				precision: '3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information  ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+
+			{
+
+				subtitle: '11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ?  ',
+				precision: '11.13.1 Chaque champ de formulaire dont l’objet se rapporte à une information concernant l’utilisateur vérifie-t-il ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut autocomplete ; '
+					+ 'L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles pour l’attribut autocomplete associés à un champ de formulaire ; '
+					+ 'La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.13.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire qui se rapportent à une information concernant l’utilisateur (nom, prénom, numéro de téléphone, etc.) ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que : Le champ de formulaire possède un attribut autocomplete ; L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles; La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu.',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire retrouvé, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-label ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '11.2.5 Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ? '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie à la fois par un intitulé visible et par le contenu soit d’un élément <label>, soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément <label> ou de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+
+	},
+	{
+		title: 'Catégorie 12 : Navigation',
+		subtitle: '12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?',
+
+		items: [
+			{
+				precision: '12.9.1 Dans chaque page web, chaque élément recevant le focus vérifie-t-il une de ces conditions ? '
+					+ 'Il est possible d’atteindre l’élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation ;'
+					+ 'L’utilisateur est informé d’un mécanisme fonctionnel permettant d’atteindre au clavier l’élément suivant ou précédent pouvant recevoir le focus.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments d’interface susceptibles de recevoir le focus (au moyen de la tabulation ou au moyen d’un script) ;',
+					info2: '2. Pour chaque élément d’interface, vérifier que l’utilisateur peut atteindre l’élément suivant ou précédent pouvant recevoir le focus : '
+						+ 'Soit au moyen de la touche de tabulation (Tab ou Maj+Tab) ;'
+						+ 'Soit au moyen d’une autre interaction clavier dont l’utilisateur est informé (par exemple, les flèches de direction).',
+					info3: '3. Si c’est le cas pour chaque élément d’interface, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+
+		items: [
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.1 Chaque champ de formulaire a-t-il une étiquette ',
+		items: [
+			{
+				precision: '11.1.1 Chaque champ de formulaire vérifie-t-il une de ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-label ; '
+					+ 'Une balise <label> ayant un attribut for est associée au champ de formulaire ; '
+					+ 'Le champ de formulaire possède un attribut title ; '
+					+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le champ de formulaire : '
+						+ 'Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+						+ 'Possède un attribut WAI-ARIA aria-label ; '
+						+ 'Est associé à un élément <label> ayant un attribut for ; '
+						+ 'Possède un attribut title ; '
+						+ 'Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible. ',
+					info3: '3. Si c’est le cas pour champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+
+]

package/src/components/PeriodField/PeriodField.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 	import { ref, watch, computed } from 'vue'
 	import DatePicker from '@/components/DatePicker/DatePicker.vue'
-	import { type RuleOptions } from '@/composables'
+	import { type RuleOptions, useFieldValidation } from '@/composables'
+
+	const { parseDate } = useFieldValidation()
 
 	type DateInput = string | null
 	type PeriodValue = { from: DateInput, to: DateInput }
@@ -54,7 +56,7 @@
 			options: {
 				validate: (value: Date | null) => {
 					if (value === null) return true
-					if (tempToDate.value === undefined) return true
+					if (tempToDate.value === undefined || tempToDate.value === null) return true
 					return value <= tempToDate.value
 				},
 				message: 'La date de début ne peut pas être supérieure à la date de fin.',
@@ -93,7 +95,7 @@
 			options: {
 				validate: (value: Date | null) => {
 					if (value === null) return true
-					if (tempFromDate.value === undefined) return true
+					if (tempFromDate.value === undefined || tempFromDate.value === null) return true
 					return value >= tempFromDate.value
 				},
 				message: 'La date de fin ne peut pas être inférieure à la date de début.',
@@ -144,8 +146,8 @@
 	const formattedToDate = computed(() => formatDateValue(internalToDate.value))
 
 	// Computed properties pour les dates temporaires
-	const tempFromDate = computed(() => formattedFromDate.value ? stringToDate(formattedFromDate.value) : undefined)
-	const tempToDate = computed(() => formattedToDate.value ? stringToDate(formattedToDate.value) : undefined)
+	const tempFromDate = computed(() => formattedFromDate.value ? parseDate(formattedFromDate.value, props.format) : undefined)
+	const tempToDate = computed(() => formattedToDate.value ? parseDate(formattedToDate.value, props.format) : undefined)
 
 	// Sets pour optimiser la recherche des erreurs et succès
 	const fromDateErrorsSet = computed(() => new Set(errors.value.filter(error => error.includes('fromDate'))))
@@ -183,8 +185,8 @@
 
 		// Si les deux dates sont renseignées, vérifier qu'elles sont cohérentes
 		if (formattedFromDate.value && formattedToDate.value) {
-			const fromDate = stringToDate(formattedFromDate.value)
-			const toDate = stringToDate(formattedToDate.value)
+			const fromDate = parseDate(formattedFromDate.value, props.format)
+			const toDate = parseDate(formattedToDate.value, props.format)
 			if (!fromDate || !toDate || fromDate > toDate) {
 				return false
 			}
@@ -264,35 +266,6 @@
 		return result
 	}
 
-	function stringToDate(dateString: string | null): Date | undefined {
-		if (!dateString) return undefined
-
-		// Créer un mapping des positions des éléments de date selon le format
-		const format = props.format || 'DD/MM/YYYY'
-		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
-		const parts = format.split(separator)
-		const dateParts = dateString.split(separator)
-
-		if (parts.length !== dateParts.length) return undefined
-
-		let day = '', month = '', year = ''
-
-		// Extraire les valeurs selon leur position dans le format
-		parts.forEach((part, index) => {
-			const value = dateParts[index]
-			if (part.includes('DD')) day = value
-			else if (part.includes('MM')) month = value
-			else if (part.includes('YYYY')) year = value
-			else if (part.includes('YY')) year = '20' + value // Assumons que nous sommes au 21ème siècle
-		})
-
-		// Vérifier que nous avons toutes les parties nécessaires
-		if (!day || !month || !year) return undefined
-
-		const date = new Date(`${year}-${month}-${day}`)
-		return isNaN(date.getTime()) ? undefined : date
-	}
-
 	defineExpose({
 		validateOnSubmit,
 		errors,
@@ -303,47 +276,59 @@
 
 <template>
 	<div class="period-field">
-		<DatePicker
-			ref="fromDateRef"
-			v-model="internalFromDate"
-			:custom-rules="fromDateRules"
-			:custom-warning-rules="props.customWarningRules"
-			:date-format-return="props.dateFormatReturn"
-			:display-append-icon="props.displayAppendIcon"
-			:display-icon="props.displayIcon"
-			:error-message="hasFromDateErrors"
-			:format="props.format"
-			:is-disabled="props.isDisabled"
-			:is-outlined="props.isOutlined"
-			:no-calendar="props.noCalendar"
-			:no-icon="props.noIcon"
-			:placeholder="props.placeholderFrom"
-			:required="props.required"
-			:show-week-number="props.showWeekNumber"
-			:success-message="hasFromDateSuccesses"
-			class="mr-2"
-			@closed="handleFromDateClosed"
-		/>
-		<DatePicker
-			ref="toDateRef"
-			v-model="internalToDate"
-			:custom-rules="toDateRules"
-			:custom-warning-rules="props.customWarningRules"
-			:date-format-return="props.dateFormatReturn"
-			:display-append-icon="props.displayAppendIcon"
-			:display-icon="props.displayIcon"
-			:error-message="hasToDateErrors"
-			:format="props.format"
-			:is-disabled="props.isDisabled"
-			:is-outlined="props.isOutlined"
-			:no-calendar="props.noCalendar"
-			:no-icon="props.noIcon"
-			:placeholder="props.placeholderTo"
-			:required="props.required"
-			:show-week-number="props.showWeekNumber"
-			:success-message="hasToDateSuccesses"
-			@closed="handleToDateClosed"
-		/>
+		<v-row>
+			<v-col
+				cols="12"
+				sm="6"
+			>
+				<DatePicker
+					ref="fromDateRef"
+					v-model="internalFromDate"
+					:custom-rules="fromDateRules"
+					:custom-warning-rules="props.customWarningRules"
+					:date-format-return="props.dateFormatReturn"
+					:display-append-icon="props.displayAppendIcon"
+					:display-icon="props.displayIcon"
+					:error-message="hasFromDateErrors"
+					:format="props.format"
+					:is-disabled="props.isDisabled"
+					:is-outlined="props.isOutlined"
+					:no-calendar="props.noCalendar"
+					:no-icon="props.noIcon"
+					:placeholder="props.placeholderFrom"
+					:required="props.required"
+					:show-week-number="props.showWeekNumber"
+					:success-message="hasFromDateSuccesses"
+					class="mr-2"
+					@closed="handleFromDateClosed"
+				/>
+			</v-col>
+			<v-col
+				cols="12"
+				sm="6"
+			>
+				<DatePicker
+					ref="toDateRef"
+					v-model="internalToDate"
+					:custom-rules="toDateRules"
+					:custom-warning-rules="props.customWarningRules"
+					:date-format-return="props.dateFormatReturn"
+					:display-append-icon="props.displayAppendIcon"
+					:display-icon="props.displayIcon"
+					:error-message="hasToDateErrors"
+					:format="props.format"
+					:is-disabled="props.isDisabled"
+					:is-outlined="props.isOutlined"
+					:no-calendar="props.noCalendar"
+					:no-icon="props.noIcon"
+					:placeholder="props.placeholderTo"
+					:required="props.required"
+					:show-week-number="props.showWeekNumber"
+					:success-message="hasToDateSuccesses"
+					@closed="handleToDateClosed"
+				/>
+			</v-col>
+		</v-row>
 	</div>
 </template>
 

package/src/components/PeriodField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/PeriodField/tests/PeriodField.spec.ts

@@ -98,44 +98,36 @@ describe('PeriodField.vue', () => {
 	describe('Validation', () => {
 		it('shows error when start date is after end date', async () => {
 			const wrapper = mount(PeriodField, {
-				global: {
-					plugins: [vuetify],
-				},
 				props: {
 					modelValue: {
-						from: '12/12/1995',
-						to: '20/12/1995',
+						from: '01/01/2025',
+						to: '01/01/2024',
 					},
 				},
+				global: {
+					plugins: [vuetify],
+				},
 			})
 
-			const startField = wrapper.findAll('input')[0]
-			await startField.trigger('focus')
-			await startField.setValue('22/12/1995')
-			await startField.trigger('blur')
 			await wrapper.vm.$nextTick()
 
-			expect(wrapper.text()).toContain('La date de début ne peut pas être supérieure à la date de fin')
+			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
 			expect(wrapper.vm.isValid).toBe(false)
 		})
 
 		it('shows error when end date is before start date', async () => {
 			const wrapper = mount(PeriodField, {
-				global: {
-					plugins: [vuetify],
-				},
 				props: {
 					modelValue: {
-						from: '12/12/1995',
-						to: '20/12/1995',
+						from: '01/01/2025',
+						to: '01/01/2024',
 					},
 				},
+				global: {
+					plugins: [vuetify],
+				},
 			})
 
-			const endField = wrapper.findAll('input')[1]
-			await endField.trigger('focus')
-			await endField.setValue('10/12/1995')
-			await endField.trigger('blur')
 			await wrapper.vm.$nextTick()
 
 			expect(wrapper.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')

package/src/components/PhoneField/PhoneField.mdx

@@ -6,7 +6,7 @@ import PhoneField from './PhoneField.vue'
 
 # PhoneField
 
-The `PhoneField` component is used to input phone numbers with various formatting options.
+Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.
 
 <Canvas of={PhoneFieldStories.Default} />
 

package/src/components/PhoneField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/PhoneField/Usages.stories.ts

@@ -0,0 +1,38 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/PhoneField/Usages',
+}
+
+const itemsToDo = [
+	'Indiquer le nombre de numéros attendus dans la saisie .',
+	'Utiliser un formatage dynamique du numéro.',
+]
+
+const itemsNotToDo = [
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/RangeField/RangeField.vue

@@ -32,10 +32,6 @@
 
 	watch(model, (value) => {
 		if (!Array.isArray(value)) {
-			model.value = [
-				props.min,
-				props.max,
-			]
 			return
 		}
 

package/src/components/SearchListField/SearchListField.mdx

@@ -6,8 +6,7 @@ import SearchListField from './SearchListField.vue';
 
 # SearchListField
 
-Le composant `SearchListField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
-Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+Le composant `SearchListField` est utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.
 
 <Canvas story={{height: '150px'}} of={SearchListFieldStories.Default}/>
 

package/src/components/SelectBtnField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SelectBtnField/Usages.stories.ts

@@ -0,0 +1,40 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/SelectBtnField/Usages',
+}
+const itemsToDo = [
+	'Utiliser des libellés clairs et compréhensibles.',
+	'Limiter le nombre d\'options pour éviter la surcharge cognitive.',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce composant pour un trop grand nombre d\'options. (Privilégier alors un bouton select).',
+	'Rendre la sélection ambiguë (ex. : icônes sans texte explicatif).',
+	'Forcer une selection initiale si elle n\'est pas nécessaire.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}