@cnamts/synapse 0.0.13-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',
@@ -32,6 +33,7 @@ const meta = {
 		isValidatedOnBlur: { control: 'boolean' },
 		displayAsterisk: { control: 'boolean' },
 		disableErrorHandling: { control: 'boolean' },
+		disabled: { control: 'boolean' },
 	},
 } satisfies Meta<typeof PhoneField>
 
@@ -89,6 +91,9 @@ export const Default: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readonly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -109,6 +114,9 @@ export const Default: Story = {
 					:customIndicatifs="args.customIndicatifs"
 					:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 					:isValidatedOnBlur="args.isValidatedOnBlur"
+					:bg-color="args.bgColor"
+					:readonly="args.readonly"
+					:disabled="args.disabled"
 				/>
 				</div>
 				<br><br><br><br><br>
@@ -167,6 +175,9 @@ export const Required: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readonly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -187,6 +198,9 @@ export const Required: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+     :bg-color="args.bgColor"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
     />
 				</div>
    `,
@@ -202,6 +216,7 @@ export const RequiredWithAsterisk: Story = {
 		...Default.args,
 		required: true,
 		displayAsterisk: true,
+		bgColor: undefined,
 	},
 	parameters: {
 		docs: {
@@ -255,6 +270,9 @@ const phoneNumber = ref('')
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:display-asterisk="args.displayAsterisk"
+						:readonly="args.readonly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 				</div>
 			`,
@@ -322,6 +340,9 @@ export const CustomIndicatifs: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readonly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -342,6 +363,9 @@ export const CustomIndicatifs: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -399,6 +423,9 @@ export const NotValidatedOnBlur: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -419,6 +446,9 @@ export const NotValidatedOnBlur: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -476,6 +506,9 @@ export const DisplayFormatCode: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -496,6 +529,9 @@ export const DisplayFormatCode: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -553,6 +589,9 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -573,6 +612,9 @@ export const DisplayFormatCodeAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -630,6 +672,9 @@ export const DisplayFormatCodeCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -650,6 +695,9 @@ export const DisplayFormatCodeCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -707,6 +755,9 @@ export const DisplayFormatCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -727,6 +778,9 @@ export const DisplayFormatCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -784,6 +838,9 @@ export const DisplayFormatAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -804,6 +861,9 @@ export const DisplayFormatAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readonly="args.readonly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 							</div>
    `,
@@ -811,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: [
@@ -867,6 +1118,8 @@ export const DisplayModels: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readonly: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -891,6 +1144,9 @@ export const DisplayModels: Story = {
 						:customIndicatifs="args.customIndicatifs"
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:readonly="args.readonly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 				</div>
 			`,
@@ -951,6 +1207,9 @@ export const DisabledErrorHandling: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
 		disableErrorHandling: true,
+		readonly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -974,6 +1233,9 @@ export const DisabledErrorHandling: Story = {
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:disableErrorHandling="args.disableErrorHandling"
+						:readonly="args.readonly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 					<div class="mt-6">
 						<h3>Comparaison avec gestion des erreurs activée</h3>
@@ -990,6 +1252,9 @@ export const DisabledErrorHandling: Story = {
 							:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 							:isValidatedOnBlur="args.isValidatedOnBlur"
 							:disableErrorHandling="false"
+							:readonly="args.readonly"
+							:disabled="args.disabled"
+							:bg-color="args.bgColor"
 						/>
 					</div>
 				</div>

package/src/components/PhoneField/PhoneField.vue

@@ -33,6 +33,9 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
+		bgColor: { type: String, default: undefined },
+		readonly: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
 	})
 
 	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
@@ -83,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,
@@ -186,6 +218,9 @@
 			:display-asterisk="props.displayAsterisk"
 			:disable-error-handling="props.disableErrorHandling"
 			:return-object="true"
+			:bg-color="props.bgColor"
+			:readonly="props.readonly"
+			:disabled="props.disabled"
 			class="custom-select"
 			text-key="displayText"
 			value-key="code"
@@ -203,6 +238,9 @@
 			:success-messages="successes"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:display-asterisk="props.displayAsterisk"
+			:readonly="props.readonly"
+			:bg-color="props.bgColor"
+			:disabled="props.disabled"
 			:class="{
 				'phone-field': true,
 				'error-field': hasError,