@cnamts/synapse 0.0.14-alpha → 0.0.15-alpha

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

@@ -1,5 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import PhoneField from './PhoneField.vue'
+import { indicatifs } from './indicatifs'
 
 const meta = {
 	title: 'Composants/Formulaires/PhoneField',
@@ -91,7 +92,7 @@ export const Default: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
 		bgColor: undefined,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 	},
 	render: (args) => {
@@ -114,7 +115,7 @@ export const Default: Story = {
 					:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 					:isValidatedOnBlur="args.isValidatedOnBlur"
 					:bg-color="args.bgColor"
-					:readOnly="args.readOnly"
+					:readonly="args.readonly"
 					:disabled="args.disabled"
 				/>
 				</div>
@@ -175,7 +176,7 @@ export const Required: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
 		bgColor: undefined,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 	},
 	render: (args) => {
@@ -198,7 +199,7 @@ export const Required: Story = {
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
      :bg-color="args.bgColor"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
     />
 				</div>
@@ -269,7 +270,7 @@ const phoneNumber = ref('')
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:display-asterisk="args.displayAsterisk"
-						:readOnly="args.readOnly"
+						:readonly="args.readonly"
 						:disabled="args.disabled"
 						:bg-color="args.bgColor"
 					/>
@@ -340,7 +341,7 @@ export const CustomIndicatifs: Story = {
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
 		bgColor: undefined,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 	},
 	render: (args) => {
@@ -362,7 +363,7 @@ export const CustomIndicatifs: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -422,7 +423,7 @@ export const NotValidatedOnBlur: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -445,7 +446,7 @@ export const NotValidatedOnBlur: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -505,7 +506,7 @@ export const DisplayFormatCode: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -528,7 +529,7 @@ export const DisplayFormatCode: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -588,7 +589,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -611,7 +612,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -671,7 +672,7 @@ export const DisplayFormatCodeCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -694,7 +695,7 @@ export const DisplayFormatCodeCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -754,7 +755,7 @@ export const DisplayFormatCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -777,7 +778,7 @@ export const DisplayFormatCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -837,7 +838,7 @@ export const DisplayFormatAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -860,7 +861,7 @@ export const DisplayFormatAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readOnly="args.readOnly"
+	 :readonly="args.readonly"
 	 :disabled="args.disabled"
      :bg-color="args.bgColor"
     />
@@ -870,6 +871,197 @@ export const DisplayFormatAbbreviation: Story = {
 	},
 }
 
+export const DefaultDialCode: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PhoneField
+						v-model="modelValue"
+						:dial-code-model="dialCodeModel"
+						:required="required"
+						:withCountryCode="withCountryCode"
+						:countryCodeRequired="countryCodeRequired"
+						:displayFormat="displayFormat"
+						:customIndicatifs="customIndicatifs"
+						:useCustomIndicatifsOnly="useCustomIndicatifsOnly"
+						:isValidatedOnBlur="isValidatedOnBlur"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PhoneField } from '@cnamts/synapse'
+					
+					const modelValue = ref('')
+					
+					// Indicatifs personnalisés
+					const customIndicatifs = [
+						{ code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
+						{ code: '+34', country: 'Espagne', abbreviation: 'ES', phoneLength: 9, mask: '### ### ###' },
+						{ code: '+41', country: 'Suisse', abbreviation: 'CH', phoneLength: 9, mask: '### ### ###' },
+					]
+					
+					// Pré-sélection de l'indicatif Exemple
+					const dialCodeModel = ref(customIndicatifs.find(ind => ind.country === 'Exemple'))
+					
+					const required = ref(true)
+					const withCountryCode = ref(true)
+					const countryCodeRequired = ref(true)
+					const displayFormat = ref('code-country')
+					const useCustomIndicatifsOnly = ref(true)
+					const isValidatedOnBlur = ref(true)
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '',
+		dialCodeModel: { code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
+		required: true,
+		outlined: true,
+		outlinedIndicatif: true,
+		withCountryCode: true,
+		countryCodeRequired: true,
+		displayFormat: 'code-country',
+		customIndicatifs: [
+			{ code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
+			{ code: '+34', country: 'Espagne', abbreviation: 'ES', phoneLength: 9, mask: '### ### ###' },
+			{ code: '+41', country: 'Suisse', abbreviation: 'CH', phoneLength: 9, mask: '### ### ###' },
+		],
+		useCustomIndicatifsOnly: true,
+		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readonly: false,
+		disabled: false,
+	},
+	render: (args) => {
+		return {
+			components: { PhoneField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<h3>PhoneField avec indicatif pré-rempli</h3>
+					<p>Cette story montre comment pré-remplir l'indicatif téléphonique avec des indicatifs personnalisés.</p>
+					<PhoneField
+						v-model="args.modelValue"
+						:dial-code-model="args.dialCodeModel"
+						:required="args.required"
+						:outlined="args.outlined"
+						:outlinedIndicatif="args.outlinedIndicatif"
+						:withCountryCode="args.withCountryCode"
+						:countryCodeRequired="args.countryCodeRequired"
+						:displayFormat="args.displayFormat"
+						:customIndicatifs="args.customIndicatifs"
+						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
+						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:readonly="args.readonly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const DefaultDialCodeStandard: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PhoneField
+						v-model="phone"
+						:dial-code-model="dialCodeModel"
+						:with-country-code="true"
+						:country-code-required="true"
+						display-format="code-country"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { PhoneField, indicatifs } from '@cnamts/synapse'
+					
+					// Modèle pour le numéro de téléphone
+					const phone = ref('')
+					
+					// Recherche de l'indicatif France dans les indicatifs standards
+					const franceIndicatif = indicatifs.find(ind => ind.country === 'France')
+					
+					// Pré-remplissage avec l'indicatif France
+					const dialCodeModel = ref(franceIndicatif)
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '',
+		dialCodeModel: indicatifs.find(ind => ind.country === 'France'),
+		required: false,
+		outlined: true,
+		outlinedIndicatif: true,
+		withCountryCode: true,
+		countryCodeRequired: true,
+		displayFormat: 'code-country',
+		customIndicatifs: [],
+		useCustomIndicatifsOnly: false,
+		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readonly: false,
+		disabled: false,
+	},
+	render: (args) => {
+		return {
+			components: { PhoneField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<h3>PhoneField avec indicatif standard pré-rempli</h3>
+					<p>Cette story montre comment pré-remplir l'indicatif téléphonique avec les indicatifs standards.</p>
+					<div class="mb-4">
+						<strong>Indicatif sélectionné :</strong> {{ args.dialCodeModel ? args.dialCodeModel.code + ' ' + args.dialCodeModel.country : 'Aucun' }}
+					</div>
+					<PhoneField
+						v-model="args.modelValue"
+						:dial-code-model="args.dialCodeModel"
+						:required="args.required"
+						:outlined="args.outlined"
+						:outlinedIndicatif="args.outlinedIndicatif"
+						:withCountryCode="args.withCountryCode"
+						:countryCodeRequired="args.countryCodeRequired"
+						:displayFormat="args.displayFormat"
+						:customIndicatifs="args.customIndicatifs"
+						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
+						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:readonly="args.readonly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const DisplayModels: Story = {
 	parameters: {
 		sourceCode: [
@@ -926,7 +1118,7 @@ export const DisplayModels: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		readOnly: false,
+		readonly: false,
 		bgColor: undefined,
 	},
 	render: (args) => {
@@ -952,7 +1144,7 @@ export const DisplayModels: Story = {
 						:customIndicatifs="args.customIndicatifs"
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:readOnly="args.readOnly"
+						:readonly="args.readonly"
 						:disabled="args.disabled"
 						:bg-color="args.bgColor"
 					/>
@@ -1015,7 +1207,7 @@ export const DisabledErrorHandling: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
 		disableErrorHandling: true,
-		readOnly: false,
+		readonly: false,
 		disabled: false,
 		bgColor: undefined,
 	},
@@ -1041,7 +1233,7 @@ export const DisabledErrorHandling: Story = {
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:disableErrorHandling="args.disableErrorHandling"
-						:readOnly="args.readOnly"
+						:readonly="args.readonly"
 						:disabled="args.disabled"
 						:bg-color="args.bgColor"
 					/>
@@ -1060,7 +1252,7 @@ export const DisabledErrorHandling: Story = {
 							:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 							:isValidatedOnBlur="args.isValidatedOnBlur"
 							:disableErrorHandling="false"
-							:readOnly="args.readOnly"
+							:readonly="args.readonly"
 							:disabled="args.disabled"
 							:bg-color="args.bgColor"
 						/>

package/src/components/PhoneField/PhoneField.vue

@@ -34,7 +34,7 @@
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
 		bgColor: { type: String, default: undefined },
-		readOnly: { type: Boolean, default: false },
+		readonly: { type: Boolean, default: false },
 		disabled: { type: Boolean, default: false },
 	})
 
@@ -86,6 +86,35 @@
 		})),
 	)
 
+	// Watcher pour initialiser dialCode à partir de props.dialCodeModel
+	// Placé après la définition de dialCodeOptions pour éviter l'erreur d'accès avant initialisation
+	watch(() => props.dialCodeModel, (newVal) => {
+		if (!newVal) {
+			dialCode.value = ''
+			return
+		}
+
+		// Si c'est un objet, on cherche l'indicatif correspondant dans la liste des options
+		if (typeof newVal === 'object') {
+			// On cherche l'indicatif avec le même code
+			const matchingOption = dialCodeOptions.value.find((opt) => {
+				return opt.code === newVal.code
+			})
+
+			if (matchingOption) {
+				// On utilise directement l'objet de la liste pour éviter les problèmes de référence
+				dialCode.value = matchingOption
+			}
+			else {
+				dialCode.value = newVal
+			}
+		}
+		else {
+			// Si c'est une chaîne ou autre chose, on l'utilise directement
+			dialCode.value = newVal
+		}
+	}, { immediate: true })
+
 	function generateDisplayText(ind: Indicatif): string {
 		const format = {
 			'code': ind.code,
@@ -190,7 +219,7 @@
 			:disable-error-handling="props.disableErrorHandling"
 			:return-object="true"
 			:bg-color="props.bgColor"
-			:read-only="props.readOnly"
+			:readonly="props.readonly"
 			:disabled="props.disabled"
 			class="custom-select"
 			text-key="displayText"
@@ -209,6 +238,7 @@
 			:success-messages="successes"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:display-asterisk="props.displayAsterisk"
+			:readonly="props.readonly"
 			:bg-color="props.bgColor"
 			:disabled="props.disabled"
 			:class="{

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

@@ -163,42 +163,189 @@ describe('PhoneField', () => {
 	})
 
 	it('passes dialCode object to SyTextField when dialCode is set', async () => {
+		const dialCodeModelValue = { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' }
+
 		const wrapper = mount(PhoneField, {
 			global: {
 				plugins: [vuetify],
 			},
 			props: {
 				withCountryCode: true,
-				dialCodeModel: { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' },
+				dialCodeModel: dialCodeModelValue,
 			},
 		})
 
-		// Vérifier que le dialCode est bien un objet
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.vm.dialCode).toBeDefined()
 		expect(typeof wrapper.vm.dialCode).toBe('object')
 
-		// Trouver le composant SyTextField
-		const textField = wrapper.findComponent({ name: 'SyTextField' })
-		expect(textField.exists()).toBe(true)
+		type Indicatif = {
+			code: string
+			country: string
+			abbreviation: string
+			phoneLength: number
+			mask: string
+			displayText?: string
+		}
+		const dialCode = wrapper.vm.dialCode as Indicatif
+
+		expect(dialCode.code).toBe('+33')
+		expect(dialCode.country).toBe('France')
+		expect(dialCode.phoneLength).toBe(10)
+		expect(dialCode.abbreviation).toBe('FR')
+		expect(dialCode.mask).toBe('## ## ## ## ##')
+
+		expect(dialCode).toHaveProperty('displayText')
+		expect(typeof dialCode.displayText).toBe('string')
 
-		// Vérifier que les propriétés du SyTextField sont correctement définies en fonction du dialCode
 		expect(wrapper.vm.phoneMask).toBe('## ## ## ## ##')
 		expect(wrapper.vm.counter).toBe(10)
 
-		// Vérifier que le SyTextField reçoit les bonnes propriétés
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		expect(textField.exists()).toBe(true)
 		expect(textField.props('counter')).toBe(10)
 
-		// Vérifier que le SySelect est présent et reçoit l'objet dialCode
 		const select = wrapper.findComponent({ name: 'SySelect' })
 		expect(select.exists()).toBe(true)
 		expect(select.props('returnObject')).toBe(true)
 
-		// Vérifier que l'objet dialCode est correctement passé au SySelect via v-model
-		expect(wrapper.vm.dialCode).toEqual({
-			code: '+33',
-			abbreviation: 'FR',
-			country: 'France',
+		expect(select.props('modelValue')).toEqual(wrapper.vm.dialCode)
+	})
+
+	// Test du watcher pour dialCodeModel
+	it('updates dialCode when dialCodeModel changes after mount', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				withCountryCode: true,
+				// Pas de dialCodeModel initial
+			},
+		})
+
+		// Vérifier que dialCode est initialisé avec une chaîne vide
+		// Dans le composant: const dialCode = ref<string | Record<string, any>>(props.dialCodeModel || '')
+		expect(wrapper.vm.dialCode).toBe('')
+
+		// Définir un dialCodeModel après le montage
+		await wrapper.setProps({
+			dialCodeModel: { code: '+1', country: 'USA', abbreviation: 'US', phoneLength: 10, mask: '###-###-####' },
+		})
+
+		// Attendre que le watcher s'exécute
+		await wrapper.vm.$nextTick()
+
+		// Vérifier que dialCode a été mis à jour
+		expect(wrapper.vm.dialCode).toBeDefined()
+		expect(typeof wrapper.vm.dialCode).toBe('object')
+
+		// Utiliser une assertion de type pour indiquer à TypeScript que dialCode est un objet
+		type Indicatif = {
+			code: string
+			country: string
+			abbreviation: string
+			phoneLength: number
+			mask: string
+			displayText?: string
+		}
+		const dialCode = wrapper.vm.dialCode as Indicatif
+
+		expect(dialCode.code).toBe('+1')
+		expect(dialCode.country).toBe('USA/Canada')
+		expect(wrapper.vm.phoneMask).toBe('### ### ####')
+		expect(wrapper.vm.counter).toBe(10)
+	})
+
+	// Test pour les objets sans displayText
+	it('handles dialCodeModel objects without displayText property', async () => {
+		// Objet indicatif sans propriété displayText
+		const indicatifSansDisplayText = {
+			code: '+44',
+			country: 'United Kingdom',
+			abbreviation: 'GB',
 			phoneLength: 10,
-			mask: '## ## ## ## ##',
+			mask: '#### ### ####',
+		}
+
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				withCountryCode: true,
+				dialCodeModel: indicatifSansDisplayText,
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		// Vérifier que dialCode a été correctement initialisé
+		expect(wrapper.vm.dialCode).toBeDefined()
+
+		// Utiliser une assertion de type pour indiquer à TypeScript que dialCode est un objet
+		type Indicatif = {
+			code: string
+			country: string
+			abbreviation: string
+			phoneLength: number
+			mask: string
+			displayText?: string
+		}
+		const dialCode = wrapper.vm.dialCode as Indicatif
+
+		expect(dialCode.code).toBe('+44')
+		expect(dialCode.country).toBe('United Kingdom')
+
+		// Vérifier que la propriété displayText a été ajoutée
+		expect(dialCode).toHaveProperty('displayText')
+		expect(typeof dialCode.displayText).toBe('string')
+		// Le format exact dépend de la fonction generateDisplayText, mais on peut vérifier qu'il contient le code
+		expect(dialCode.displayText).toContain('+44')
+	})
+
+	// Test avec les indicatifs standards importés
+	it('works correctly with standard indicatifs imported from indicatifs.ts', async () => {
+		// Importer les indicatifs standards
+		const { indicatifs } = await import('../indicatifs')
+
+		// Trouver l'indicatif pour la France
+		const franceIndicatif = indicatifs.find(ind => ind.country === 'France')
+		expect(franceIndicatif).toBeDefined()
+
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				withCountryCode: true,
+				dialCodeModel: franceIndicatif,
+			},
 		})
+
+		await wrapper.vm.$nextTick()
+
+		// Vérifier que l'indicatif a été correctement appliqué
+		expect(wrapper.vm.dialCode).toBeDefined()
+
+		// Utiliser une assertion de type pour indiquer à TypeScript que dialCode est un objet
+		type Indicatif = {
+			code: string
+			country: string
+			abbreviation: string
+			phoneLength: number
+			mask: string
+			displayText?: string
+		}
+		const dialCode = wrapper.vm.dialCode as Indicatif
+
+		expect(dialCode.code).toBe('+33')
+		expect(dialCode.country).toBe('France')
+
+		// Vérifier que le SySelect affiche la bonne valeur
+		const select = wrapper.findComponent({ name: 'SySelect' })
+		expect(select.exists()).toBe(true)
+		expect(select.props('modelValue')).toEqual(wrapper.vm.dialCode)
 	})
 })

package/src/components/RatingPicker/NumberPicker/NumberPicker.vue

@@ -3,12 +3,13 @@
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import type { PropType } from 'vue'
+	import type { ItemType } from '@/components/Customs/SySelect/SySelect.vue'
 
 	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
 
 	import { useDisplay } from 'vuetify'
 
-	interface SelectItem {
+	interface SelectItem extends ItemType {
 		text: string
 		value: number
 	}