@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/PhoneField/PhoneField.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+	import { computed, ref, watch, toRaw } from 'vue'
+	import type { PropType } from 'vue'
+	import { required as RequiredRule } from '@/utils/rules/required'
+	import { exactLength } from '@/utils/rules/exactLength'
+	import { mdiPhone, mdiInformation } from '@mdi/js'
+	import { indicatifs } from './indicatifs'
+	import { vMaska } from 'maska/vue'
+	import { locales } from './locales'
+	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+
+	type DisplayFormat = 'code' | 'code-abbreviation' | 'code-country' | 'country' | 'abbreviation'
+	type Indicatif = {
+		code: string
+		abbreviation: string
+		country: string
+		mask?: string
+		phoneLength: number
+	}
+
+	const props = defineProps({
+		modelValue: { type: String, default: '' },
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		dialCodeModel: { type: [String, Object] as PropType<string | Record<string, any>>, default: '' },
+		required: { type: Boolean, default: false },
+		outlined: { type: Boolean, default: false },
+		outlinedIndicatif: { type: Boolean, default: false },
+		withCountryCode: { type: Boolean, default: false },
+		countryCodeRequired: { type: Boolean, default: false },
+		displayFormat: { type: String as PropType<DisplayFormat>, default: 'code' },
+		customIndicatifs: { type: Array as PropType<Indicatif[]>, default: () => [] },
+		useCustomIndicatifsOnly: { type: Boolean, default: false },
+		isValidatedOnBlur: { type: Boolean, default: true },
+	})
+
+	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
+
+	const phoneNumber = ref(props.modelValue || '')
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const dialCode = ref<string | Record<string, any>>(props.dialCodeModel || '')
+	const counter = ref(10)
+	const phoneMask = ref('## ## ## ## ##')
+	const hasError = ref(false)
+	const onBlur = ref(false)
+
+	const mergedDialCodes = computed(() =>
+		props.useCustomIndicatifsOnly ? props.customIndicatifs : [...indicatifs, ...props.customIndicatifs],
+	)
+
+	const dialCodeOptions = computed(() =>
+		mergedDialCodes.value.map(ind => ({
+			...ind,
+			displayText: generateDisplayText(ind),
+		})),
+	)
+
+	function generateDisplayText(ind: Indicatif): string {
+		const format = {
+			'code': ind.code,
+			'code-abbreviation': `${ind.code} (${ind.abbreviation})`,
+			'code-country': `${ind.code} ${ind.country}`,
+			'country': ind.country,
+			'abbreviation': ind.abbreviation,
+		}
+		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()
+		}
+		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)
+	}
+
+	function validateInputOnBlur() {
+		if (!props.isValidatedOnBlur) return
+
+		hasError.value = false
+		const requiredValidation = !props.required || RequiredRule(phoneNumber.value) === true
+		const lengthValidation = exactLength(counter.value, true)(phoneNumber.value) === true
+
+		hasError.value = !(requiredValidation && lengthValidation)
+		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,
+		phoneMask,
+		counter,
+		hasError,
+		phoneNumber,
+		mergedDialCodes,
+	})
+
+</script>
+
+<template>
+	<div class="phone-field-container">
+		<SySelect
+			v-if="props.withCountryCode"
+			v-model="dialCode"
+			:items="dialCodeOptions"
+			text-key="displayText"
+			value-key="code"
+			:label="locales.indicatifLabel"
+			:required="props.countryCodeRequired"
+			class="custom-select"
+			:outlined="outlinedIndicatif"
+		/>
+		<SyTextField
+			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"
+			:variant="outlined ? 'outlined' : 'underlined'"
+			color="primary"
+			class="phoneField"
+			@input="handlePhoneInput"
+			@blur="validateInputOnBlur"
+		>
+			<template #append-inner>
+				<VIcon
+					class="mr-2"
+					color="#222324"
+				>
+					{{ mdiPhone }}
+				</VIcon>
+				<VIcon v-if="hasError">
+					{{ mdiInformation }}
+				</VIcon>
+			</template>
+		</SyTextField>
+	</div>
+</template>
+
+<style scoped>
+.phone-field-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.phoneField {
+  width: 100%;
+}
+
+.custom-select {
+  width: 30%;
+}
+
+@media (min-width: 600px) {
+  .phone-field-container {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .custom-select {
+    margin-right: 1rem;
+    margin-bottom: 0;
+    min-width: 144px;
+  }
+
+  .phoneField {
+    min-width: 350px;
+  }
+}
+
+:deep(.v-list) {
+  position: absolute;
+  left: inherit !important;
+  margin-top: 58px;
+  background-color: white;
+  max-height: 300px;
+  padding: 0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  overflow-y: auto;
+  z-index: 2;
+}
+</style>

package/src/components/PhoneField/indicatifs.ts

@@ -0,0 +1,104 @@
+export const indicatifs = [
+	{ code: '+1', country: 'USA/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '###-###-####' },
+	{ code: '+7', country: 'Russia/Kazakhstan', abbreviation: 'RU/KZ', phoneLength: 10, mask: '### ### ## ##' },
+	{ code: '+20', country: 'Egypt', abbreviation: 'EG', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+27', country: 'South Africa', abbreviation: 'ZA', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+30', country: 'Greece', abbreviation: 'GR', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+31', country: 'Netherlands', abbreviation: 'NL', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+32', country: 'Belgium', abbreviation: 'BE', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+33', country: 'France', abbreviation: 'FR', phoneLength: 10, mask: '## ## ## ## ##' },
+	{ code: '+34', country: 'Spain', abbreviation: 'ES', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+36', country: 'Hungary', abbreviation: 'HU', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+39', country: 'Italy', abbreviation: 'IT', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+40', country: 'Romania', abbreviation: 'RO', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+41', country: 'Switzerland', abbreviation: 'CH', phoneLength: 9, mask: '## ### ## ##' },
+	{ code: '+44', country: 'United Kingdom', abbreviation: 'GB', phoneLength: 10, mask: '#### ### ####' },
+	{ code: '+45', country: 'Denmark', abbreviation: 'DK', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+46', country: 'Sweden', abbreviation: 'SE', phoneLength: 9, mask: '## ### ## ##' },
+	{ code: '+47', country: 'Norway', abbreviation: 'NO', phoneLength: 8, mask: '### ## ###' },
+	{ code: '+48', country: 'Poland', abbreviation: 'PL', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+49', country: 'Germany', abbreviation: 'DE', phoneLength: 10, mask: '#### ### ####' },
+	{ code: '+51', country: 'Peru', abbreviation: 'PE', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+52', country: 'Mexico', abbreviation: 'MX', phoneLength: 10, mask: '## #### ####' },
+	{ code: '+53', country: 'Cuba', abbreviation: 'CU', phoneLength: 8, mask: '### ### ###' },
+	{ code: '+54', country: 'Argentina', abbreviation: 'AR', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+55', country: 'Brazil', abbreviation: 'BR', phoneLength: 11, mask: '## ##### ####' },
+	{ code: '+56', country: 'Chile', abbreviation: 'CL', phoneLength: 9, mask: '## #### ####' },
+	{ code: '+57', country: 'Colombia', abbreviation: 'CO', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+58', country: 'Venezuela', abbreviation: 'VE', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+60', country: 'Malaysia', abbreviation: 'MY', phoneLength: 10, mask: '## ### ####' },
+	{ code: '+61', country: 'Australia', abbreviation: 'AU', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+62', country: 'Indonesia', abbreviation: 'ID', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+63', country: 'Philippines', abbreviation: 'PH', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+64', country: 'New Zealand', abbreviation: 'NZ', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+65', country: 'Singapore', abbreviation: 'SG', phoneLength: 8, mask: '#### ####' },
+	{ code: '+66', country: 'Thailand', abbreviation: 'TH', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+81', country: 'Japan', abbreviation: 'JP', phoneLength: 10, mask: '## #### ####' },
+	{ code: '+82', country: 'South Korea', abbreviation: 'KR', phoneLength: 10, mask: '## #### ####' },
+	{ code: '+84', country: 'Vietnam', abbreviation: 'VN', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+86', country: 'China', abbreviation: 'CN', phoneLength: 11, mask: '### #### ####' },
+	{ code: '+90', country: 'Turkey', abbreviation: 'TR', phoneLength: 10, mask: '### ### ## ##' },
+	{ code: '+91', country: 'India', abbreviation: 'IN', phoneLength: 10, mask: '##### #####' },
+	{ code: '+92', country: 'Pakistan', abbreviation: 'PK', phoneLength: 10, mask: '### #### ####' },
+	{ code: '+93', country: 'Afghanistan', abbreviation: 'AF', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+94', country: 'Sri Lanka', abbreviation: 'LK', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+95', country: 'Myanmar', abbreviation: 'MM', phoneLength: 9, mask: '## ### ###' },
+	{ code: '+98', country: 'Iran', abbreviation: 'IR', phoneLength: 10, mask: '### ### ####' },
+	{ code: '+212', country: 'Morocco', abbreviation: 'MA', phoneLength: 9, mask: '### #### ###' },
+	{ code: '+213', country: 'Algeria', abbreviation: 'DZ', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+216', country: 'Tunisia', abbreviation: 'TN', phoneLength: 8, mask: '## ### ###' },
+	{ code: '+218', country: 'Libya', abbreviation: 'LY', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+262', country: 'Réunion', abbreviation: 'FR', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+508', country: 'Saint Pierre and Miquelon', abbreviation: 'FR', phoneLength: 6, mask: '## ## ##' },
+	{ code: '+590', country: 'Guadeloupe', abbreviation: 'FR', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+594', country: 'French Guiana', abbreviation: 'FR', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+596', country: 'Martinique', abbreviation: 'FR', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+687', country: 'New Caledonia', abbreviation: 'FR', phoneLength: 6, mask: '## ## ##' },
+	{ code: '+689', country: 'French Polynesia', abbreviation: 'FR', phoneLength: 6, mask: '## ## ##' },
+	{ code: '+220', country: 'Gambia', abbreviation: 'GM', phoneLength: 8, mask: '### ## ##' },
+	{ code: '+221', country: 'Senegal', abbreviation: 'SN', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+222', country: 'Mauritania', abbreviation: 'MR', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+223', country: 'Mali', abbreviation: 'ML', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+224', country: 'Guinea', abbreviation: 'GN', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+225', country: 'Ivory Coast', abbreviation: 'CI', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+226', country: 'Burkina Faso', abbreviation: 'BF', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+227', country: 'Niger', abbreviation: 'NE', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+228', country: 'Togo', abbreviation: 'TG', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+229', country: 'Benin', abbreviation: 'BJ', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+230', country: 'Mauritius', abbreviation: 'MU', phoneLength: 7, mask: '### ####' },
+	{ code: '+231', country: 'Liberia', abbreviation: 'LR', phoneLength: 7, mask: '## ### ###' },
+	{ code: '+232', country: 'Sierra Leone', abbreviation: 'SL', phoneLength: 8, mask: '## #### ####' },
+	{ code: '+233', country: 'Ghana', abbreviation: 'GH', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+234', country: 'Nigeria', abbreviation: 'NG', phoneLength: 8, mask: '### ### ###' },
+	{ code: '+235', country: 'Chad', abbreviation: 'TD', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+236', country: 'Central African Republic', abbreviation: 'CF', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+237', country: 'Cameroon', abbreviation: 'CM', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+238', country: 'Cape Verde', abbreviation: 'CV', phoneLength: 7, mask: '### ####' },
+	{ code: '+239', country: 'Sao Tome and Principe', abbreviation: 'ST', phoneLength: 7, mask: '### ####' },
+	{ code: '+240', country: 'Equatorial Guinea', abbreviation: 'GQ', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+241', country: 'Gabon', abbreviation: 'GA', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+242', country: 'Republic of the Congo', abbreviation: 'CG', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+243', country: 'Democratic Republic of the Congo', abbreviation: 'CD', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+244', country: 'Angola', abbreviation: 'AO', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+245', country: 'Guinea-Bissau', abbreviation: 'GW', phoneLength: 7, mask: '### ####' },
+	{ code: '+248', country: 'Seychelles', abbreviation: 'SC', phoneLength: 7, mask: '### ####' },
+	{ code: '+249', country: 'Sudan', abbreviation: 'SD', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+250', country: 'Rwanda', abbreviation: 'RW', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+251', country: 'Ethiopia', abbreviation: 'ET', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+252', country: 'Somalia', abbreviation: 'SO', phoneLength: 8, mask: '### ### ##' },
+	{ code: '+253', country: 'Djibouti', abbreviation: 'DJ', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+254', country: 'Kenya', abbreviation: 'KE', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+255', country: 'Tanzania', abbreviation: 'TZ', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+256', country: 'Uganda', abbreviation: 'UG', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+257', country: 'Burundi', abbreviation: 'BI', phoneLength: 8, mask: '## ## ## ##' },
+	{ code: '+258', country: 'Mozambique', abbreviation: 'MZ', phoneLength: 9, mask: '## ### ####' },
+	{ code: '+260', country: 'Zambia', abbreviation: 'ZM', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+261', country: 'Madagascar', abbreviation: 'MG', phoneLength: 9, mask: '## ## ###' },
+	{ code: '+263', country: 'Zimbabwe', abbreviation: 'ZW', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+264', country: 'Namibia', abbreviation: 'NA', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+265', country: 'Malawi', abbreviation: 'MW', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+266', country: 'Lesotho', abbreviation: 'LS', phoneLength: 8, mask: '## ### ###' },
+	{ code: '+267', country: 'Botswana', abbreviation: 'BW', phoneLength: 8, mask: '## ### ###' },
+	{ code: '+268', country: 'Eswatini', abbreviation: 'SZ', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+269', country: 'Comoros', abbreviation: 'KM', phoneLength: 7, mask: '### ####' },
+]

package/src/components/PhoneField/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	label: 'Numéro de téléphone',
+	indicatifLabel: 'Indicatif',
+}

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

@@ -0,0 +1,179 @@
+import { mount } from '@vue/test-utils'
+import PhoneField from '../PhoneField.vue'
+import { describe, it, expect } from 'vitest'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+describe('PhoneField', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('emits update:modelValue and change events on phone input', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const input = wrapper.find('input')
+		await input.setValue('1234567890')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('change')).toBeTruthy()
+	})
+
+	it('validates phone number and country code on blur', async () => {
+	})
+
+	it('applies default phone mask correctly', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: { modelValue: '0619123456' },
+		})
+		expect(wrapper.vm.computedValue).toBe('06 19 12 34 56')
+	})
+
+	it('renders SySelect when withCountryCode is true', () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: { withCountryCode: true },
+		})
+		expect(wrapper.findComponent({ name: 'SySelect' }).exists()).toBe(true)
+	})
+
+	it('validates country code when countryCodeRequired is true', async () => {
+	})
+
+	it('updates phone mask and counter when dialCode changes', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: { withCountryCode: true },
+		})
+		wrapper.vm.dialCode = { code: '+1', phoneLength: 10, mask: '###-###-####' }
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.phoneMask).toBe('###-###-####')
+		expect(wrapper.vm.counter).toBe(10)
+	})
+
+	it('validates phone number and country code on blur', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true,
+				countryCodeRequired: true,
+				modelValue: '1234567890',
+				withCountryCode: true,
+				isValidatedOnBlur: true,
+			},
+		})
+
+		// Simulate selecting a country code
+		wrapper.vm.dialCode = { code: '+1', phoneLength: 10, mask: '###-###-####' }
+		await wrapper.vm.$nextTick()
+
+		// Simulate blur event
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+
+		// Check if validation was performed
+		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, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				useCustomIndicatifsOnly: true,
+				customIndicatifs,
+			},
+		})
+
+		expect(wrapper.vm.mergedDialCodes).toEqual(customIndicatifs)
+	})
+
+	it('validates phone number and country code on blur', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true,
+				countryCodeRequired: true,
+				modelValue: '1234567890',
+				withCountryCode: true,
+				isValidatedOnBlur: true,
+			},
+		})
+
+		wrapper.vm.dialCode = { code: '+1', phoneLength: 10, mask: '###-###-####' }
+		await wrapper.vm.$nextTick()
+
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+
+		expect(wrapper.vm.hasError).toBe(false)
+	})
+
+	it('renders VTextField with outlined variant when outlined prop is true', () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				outlined: true,
+			},
+		})
+
+		const textField = wrapper.findComponent({ name: 'VTextField' })
+		expect(textField.props('variant')).toBe('outlined')
+	})
+
+	it('renders VTextField with underlined variant when outlined prop is false', () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				outlined: false,
+			},
+		})
+
+		const textField = wrapper.findComponent({ name: 'VTextField' })
+		expect(textField.props('variant')).toBe('underlined')
+	})
+})

package/src/components/SkipLink/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 />