@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

package/src/components/NirField/NirField.stories.ts

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import NirField from './NirField.vue'
 
-const meta = {
+const meta: Meta<typeof NirField> = {
 	title: 'Composants/Formulaires/NirField',
 	component: NirField,
 	decorators: [

package/src/components/NirField/NirField.vue

@@ -233,7 +233,7 @@
 
 	function validateOnSubmit() {
 		isValidating.value = true
-		validateFields()
+		validateFields(true)
 		return errors.value.length === 0
 	}
 
@@ -372,6 +372,7 @@
 .vd-key-field {
 	width: 104px;
 	flex: none;
+	margin-left: 2%;
 }
 
 .custom-counter {

package/src/components/PasswordField/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/PasswordField/Accessibilite.stories.ts

@@ -0,0 +1,191 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/PasswordField/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+														<p>{{ value.info4 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/PasswordField/AccessibiliteItems.ts

@@ -0,0 +1,184 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		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.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,
+
+			},
+		],
+
+	},
+
+]
+
+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. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. 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).',
+					info3: '3. Si c’est le cas pour chaque image, 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/PasswordField/PasswordField.vue

@@ -128,6 +128,9 @@
 <template>
 	<VTextField
 		v-model="password"
+		:class="{
+			'v-messages__message--success': successes.length > 0
+		}"
 		:error-messages="errors"
 		:messages="successes"
 		:type="showEyeIcon ? 'text' : 'password'"
@@ -136,9 +139,6 @@
 		color="primary"
 		title="password"
 		validate-on="blur lazy"
-		:class="{
-			'v-messages__message--success': successes.length > 0
-		}"
 		@blur="validateFields(true)"
 		@keydown="handleKeydown"
 		@update:model-value="emitChangeEvent"

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

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

package/src/components/PhoneField/PhoneField.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-	import { computed, ref, watch, toRaw } from 'vue'
+<script lang="ts" setup>
+	import { computed, ref, watch } from 'vue'
 	import type { PropType } from 'vue'
 	import { required as RequiredRule } from '@/utils/rules/required'
 	import { exactLength } from '@/utils/rules/exactLength'
@@ -44,6 +44,34 @@
 	const hasError = ref(false)
 	const onBlur = ref(false)
 
+	function formatPhoneNumber(value: string): string {
+		if (!value) return ''
+		const cleaned = value.replace(/\D/g, '')
+		return cleaned.replace(/(.{2})/g, '$1 ').trim()
+	}
+
+	const computedValue = computed(() => formatPhoneNumber(phoneNumber.value))
+
+	watch(() => props.modelValue, (newVal) => {
+		phoneNumber.value = (newVal || '').replace(/\s/g, '')
+	}, { immediate: true })
+
+	watch(dialCode, (newVal) => {
+		emit('update:selectedDialCode', newVal)
+		if (typeof newVal === 'object' && newVal !== null) {
+			counter.value = newVal.phoneLength || 10
+			phoneMask.value = newVal.mask || '#'.repeat(newVal.phoneLength || 10).replace(/(.{2})/g, '$1 ').trim()
+		}
+	})
+
+	function handlePhoneInput(event: Event) {
+		const input = (event.target as HTMLInputElement).value
+		const cleanedInput = input.replace(/\D/g, '')
+		phoneNumber.value = cleanedInput
+		emit('update:modelValue', cleanedInput)
+		emit('change', cleanedInput)
+	}
+
 	const mergedDialCodes = computed(() =>
 		props.useCustomIndicatifsOnly ? props.customIndicatifs : [...indicatifs, ...props.customIndicatifs],
 	)
@@ -66,28 +94,13 @@
 		return format[props.displayFormat] || ind.code
 	}
 
-	const currentDialCode = computed(() => {
-		const rawDialCode = toRaw(dialCode.value)
-		return dialCodeOptions.value.find(ind => ind.code === String(rawDialCode))
-	})
-
-	function applyPhoneMask(phone: string): string {
-		phone = phone.replace(/\D/g, '')
-		if (currentDialCode.value?.mask) {
-			const regex = new RegExp(currentDialCode.value.mask.replace(/#/g, '\\d'))
-			return phone.replace(regex, currentDialCode.value.mask).trim()
+	const validationRules = computed(() => {
+		const rules = [exactLength(counter.value, true)]
+		if (props.required) {
+			rules.unshift(RequiredRule)
 		}
-		return phone.replace(/(.{2})/g, '$1 ').trim()
-	}
-
-	function handlePhoneInput(event: Event) {
-		const input = (event.target as HTMLInputElement).value.replace(/\s|\D/g, '')
-		phoneNumber.value = input.startsWith(String(dialCode.value) || '')
-			? input.slice(String(dialCode.value || '').length)
-			: input
-		emit('update:modelValue', phoneNumber.value)
-		emit('change', phoneNumber.value)
-	}
+		return rules
+	})
 
 	function validateInputOnBlur() {
 		if (!props.isValidatedOnBlur) return
@@ -100,34 +113,6 @@
 		onBlur.value = true
 	}
 
-	const validationRules = computed(() => {
-		const rules = [exactLength(counter.value, true)]
-		if (props.required) {
-			rules.unshift(RequiredRule)
-		}
-		return rules
-	})
-
-	const computedValue = computed(() =>
-		phoneNumber.value ? applyPhoneMask(phoneNumber.value) : '',
-	)
-
-	watch(() => props.modelValue, (newVal) => {
-		phoneNumber.value = newVal || ''
-	})
-
-	watch(dialCode, (newVal) => {
-		emit('update:selectedDialCode', newVal)
-	})
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-	watch(dialCode, (selectedPhoneCode: any) => {
-		if (selectedPhoneCode) {
-			counter.value = selectedPhoneCode?.phoneLength || 10
-			phoneMask.value = selectedPhoneCode?.mask || '## ## ## ## ##'
-		}
-	})
-
 	defineExpose({
 		computedValue,
 		dialCode,
@@ -137,7 +122,6 @@
 		phoneNumber,
 		mergedDialCodes,
 	})
-
 </script>
 
 <template>
@@ -146,26 +130,26 @@
 			v-if="props.withCountryCode"
 			v-model="dialCode"
 			:items="dialCodeOptions"
-			text-key="displayText"
-			value-key="code"
 			:label="locales.indicatifLabel"
+			:outlined="outlinedIndicatif"
 			:required="props.countryCodeRequired"
 			class="custom-select"
-			:outlined="outlinedIndicatif"
+			text-key="displayText"
+			value-key="code"
 		/>
 		<SyTextField
+			v-model="phoneNumber"
 			v-maska="phoneMask"
-			:model-value="computedValue"
-			:rules="validationRules"
-			:required="props.required"
 			:counter="counter"
 			:counter-value="(value: string) => value.replace(/\s/g, '').length"
 			:label="locales.label"
+			:required="props.required"
+			:rules="validationRules"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			color="primary"
 			class="phone-field"
-			@input="handlePhoneInput"
+			color="primary"
 			@blur="validateInputOnBlur"
+			@input="handlePhoneInput"
 		>
 			<template #append-inner>
 				<VIcon

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

@@ -96,21 +96,6 @@ describe('PhoneField', () => {
 		expect(wrapper.vm.hasError).toBe(false)
 	})
 
-	it('updates phoneNumber when modelValue prop changes', async () => {
-		const wrapper = mount(PhoneField, {
-			global: {
-				plugins: [vuetify],
-			},
-			props: {
-				modelValue: '1234567890',
-			},
-		})
-
-		await wrapper.setProps({ modelValue: '0987654321' })
-
-		expect(wrapper.vm.phoneNumber).toBe('0987654321')
-	})
-
 	it('uses only custom indicatifs when useCustomIndicatifsOnly is true', () => {
 		const customIndicatifs = [{ code: '+99', abbreviation: 'XX', country: 'Testland', phoneLength: 10 }]
 		const wrapper = mount(PhoneField, {

package/src/components/RangeField/RangeField.mdx

@@ -0,0 +1,54 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import * as RangeFieldStories from './RangeField.stories.ts';
+
+<Meta of={RangeFieldStories} />
+
+# RangeField
+
+Le composant RangeField est utilisé pour permettre à l'utilisateur de sélectionner un interval.
+
+<Canvas of={RangeFieldStories.Default} />
+
+# Api
+
+<Controls of={RangeFieldStories.Default} />
+
+
+# Personnalisation des limites
+
+Vous pouvez personnaliser les limites de l'intervalle en utilisant les props `min` et `max`.
+
+<Canvas
+	of={RangeFieldStories.OtherRange}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script setup lang="ts">
+			import { ref } from 'vue'
+			import { RangeField } from '@cnamts/synapse'
+
+			const range = ref([0, 100])
+		</script>
+
+		<template>
+			<RangeField
+				v-model="range"
+				min="-50"
+				max="50"
+			/>
+		</template>
+		`
+	}}
+/>
+
+
+# Personnalisation des composants Vuetify
+
+
+Vous pouvez personnaliser les composants Vuetify `VTextField` utilisés dans le composant RangeField en utilisant la props `vuetifyOptions`.
+
+
+<Canvas
+	of={RangeFieldStories.Customization}
+/>