@cnamts/synapse 1.0.6 → 1.0.7

package/src/components/PeriodField/PeriodField.stories.ts

@@ -2,6 +2,17 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import PeriodField from './PeriodField.vue'
 import { ref } from 'vue'
 
+// Type pour les méthodes exposées par PeriodField
+type ValidationMessage = { type: string, message: string }[]
+
+interface PeriodFieldExpose {
+	validateOnSubmit: () => boolean
+	errors: Record<string, ValidationMessage>
+	successes: Record<string, ValidationMessage>
+	warnings: Record<string, ValidationMessage>
+	isValid: boolean
+}
+
 const meta: Meta<typeof PeriodField> = {
 	title: 'Composants/Formulaires/PeriodField',
 	component: PeriodField,
@@ -901,3 +912,187 @@ const periodNoValidation = ref({ from: null, to: null })
 		`,
 	}),
 }
+
+export const FormValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<v-form @submit.prevent="submitForm" ref="formRef">
+						<v-container>
+							<v-row>
+								<v-col cols="12">
+									<h3>Formulaire avec validation</h3>
+								</v-col>
+								<v-col cols="12" md="6">
+									<PeriodField
+										v-model="form.period"
+										ref="periodFieldRef"
+										required
+										:custom-rules="periodRules"
+										placeholder-from="Début de l'événement"
+										placeholder-to="Fin de l'événement"
+									/>
+								</v-col>
+								<v-col cols="12">
+									<v-btn type="submit" color="primary" :disabled="isSubmitting">Valider</v-btn>
+								</v-col>
+							</v-row>
+							
+							<v-row v-if="isFormSubmitted">
+								<v-col cols="12">
+									<v-alert
+										type="success"
+										class="mt-4"
+									>
+										Formulaire envoyé avec succès !
+									</v-alert>
+									<pre>{{ formData }}</pre>
+								</v-col>
+							</v-row>
+						</v-container>
+					</v-form>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+				import { ref } from 'vue'
+				import { PeriodField } from '@cnamts/synapse'
+				
+				// Référence au formulaire
+				const formRef = ref(null)
+				const isSubmitting = ref(false)
+				const isFormSubmitted = ref(false)
+				const formData = ref(null)
+				
+				// Données du formulaire
+				const form = {
+					name: '',
+					period: { from: null, to: null }
+				}
+				
+				// Règles de validation pour le champ période
+				const periodRules = [
+					{ 
+						type: 'custom', 
+						options: { 
+							validator: (value) => {
+								if (!value.from || !value.to) return 'Les deux dates sont obligatoires'
+								return true
+							},
+							successMessage: 'Période valide'
+						}
+					},
+					{
+						type: 'notAfterToday',
+						options: { message: "La date ne peut pas être après aujourd'hui" }
+					}
+				]
+				
+				// Soumission du formulaire
+				const submitForm = () => {
+				if (periodFieldRef.value) {
+					const isValid = periodFieldRef.value.validateOnSubmit()
+					if (isValid) {
+						formStatus.value = 'Formulaire soumis avec succès !'
+						isFormSubmitted.value = true
+						formData.value = JSON.stringify(form.value)
+					}
+					else {
+						formStatus.value = 'Erreur de validation, veuillez corriger les champs'
+					}
+				}
+			}
+				</script>
+				`,
+			},
+		],
+	},
+	render: () => ({
+		components: { PeriodField },
+		setup() {
+			// Référence au formulaire
+			const formRef = ref(null)
+			const periodFieldRef = ref<PeriodFieldExpose | null>(null)
+			const isSubmitting = ref(false)
+			const isFormSubmitted = ref(false)
+			const formData = ref<string | null>(null)
+			const formStatus = ref('')
+
+			// Données du formulaire
+			const form = ref({
+				period: { from: null, to: null },
+			})
+
+			// Règles de validation pour le champ période
+			const periodRules = [
+				{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourdhui' } },
+			]
+
+			// Soumission du formulaire
+			const submitForm = () => {
+				if (periodFieldRef.value) {
+					const isValid = periodFieldRef.value.validateOnSubmit()
+					if (isValid) {
+						formStatus.value = 'Formulaire soumis avec succès !'
+						isFormSubmitted.value = true
+						formData.value = JSON.stringify(form.value)
+					}
+					else {
+						formStatus.value = 'Erreur de validation, veuillez corriger les champs'
+					}
+				}
+			}
+
+			return {
+				formRef,
+				periodFieldRef,
+				isSubmitting,
+				isFormSubmitted,
+				formData,
+				form,
+				periodRules,
+				formStatus,
+				submitForm,
+			}
+		},
+		template: `
+			<div class="pa-4">
+				<v-form @submit.prevent="submitForm" ref="formRef">
+					<v-container>
+						<v-row>
+							<v-col cols="12">
+								<h3>Formulaire avec validation</h3>
+							</v-col>
+							<v-col cols="12" md="6">
+								<PeriodField
+									v-model="form.period"
+									ref="periodFieldRef"
+									required
+									:custom-rules="periodRules"
+									placeholder-from="Début de l'événement"
+									placeholder-to="Fin de l'événement"
+								/>
+							</v-col>
+							<v-col cols="12">
+								<v-btn type="submit" color="primary" :disabled="isSubmitting">Valider</v-btn>
+							</v-col>
+						</v-row>
+						
+						<v-row v-if="formStatus">
+							<v-col cols="12">
+									{{ formStatus }}
+								<pre v-if="formData">{{ formData }}</pre>
+							</v-col>
+						</v-row>
+					</v-container>
+				</v-form>
+			</div>
+		`,
+	}),
+}

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

@@ -208,6 +208,10 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/PhoneField.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+					  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/797" target="_blank" style="color:#0C41BD;">issue #797</a>)</p>
+				  </div>
 			  </div>
             `,
 		}

package/src/components/PhoneField/PhoneField.mdx

@@ -44,4 +44,6 @@ const customIndicatifs = ref([
         @change="handleChange"
     />
 </template>
-`} />
+`} />
+
+<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>

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

@@ -31,6 +31,18 @@ const meta = {
 			control: 'boolean',
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
+		helpText: {
+			control: 'text',
+			description: 'Texte d\'aide affiché sous le champ. Lorsque présent, les messages d\'erreur incluent un exemple concret distinct du texte d\'aide.',
+		},
+		autocompleteCountryCode: {
+			control: 'text',
+			description: 'Valeur de l\'attribut autocomplete pour le champ indicatif pays (par défaut: "tel-country-code")',
+		},
+		autocompletePhone: {
+			control: 'text',
+			description: 'Valeur de l\'attribut autocomplete pour le champ numéro de téléphone (par défaut: "tel-national")',
+		},
 		isValidatedOnBlur: { control: 'boolean' },
 		displayAsterisk: { control: 'boolean' },
 		disableErrorHandling: { control: 'boolean' },
@@ -104,7 +116,7 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
+				<div class="pa-4">
 				<PhoneField
 					v-model="args.modelValue"
 					:required="args.required"
@@ -282,6 +294,278 @@ const phoneNumber = ref('')
 	},
 }
 
+export const HelpText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="pa-4">
+		<div class="mb-6">
+			<h4 class="mb-2">Avec aide à la saisie</h4>
+			<PhoneField
+				v-model="phoneValue1"
+				required
+				help-text="Saisissez votre numéro de téléphone au format 01 23 45 67 89"
+				label="Numéro de téléphone"
+			/>
+			<p class="text-caption mt-2">
+				Essayez de laisser le champ vide ou de saisir un numéro incorrect pour voir 
+				l'exemple dans le message d'erreur (différent de l'aide).
+			</p>
+		</div>
+
+		<div class="mb-6">
+			<h4 class="mb-2">Avec aide à la saisie et indicatif pays</h4>
+			<PhoneField
+				v-model="phoneValue2"
+				v-model:selected-dial-code="selectedDialCode"
+				required
+				with-country-code
+				help-text="Choisissez votre pays et saisissez votre numéro de téléphone"
+				label="Numéro de téléphone international"
+			/>
+			<p class="text-caption mt-2">
+				L'exemple dans le message d'erreur s'adapte au format du pays sélectionné.
+			</p>
+		</div>
+
+		<div class="mt-4">
+			<h4>Valeurs actuelles :</h4>
+			<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
+			<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
+			<pre class="text-caption">selectedDialCode: {{ selectedDialCode }}</pre>
+		</div>
+	</div>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import PhoneField from './PhoneField.vue'
+
+const phoneValue1 = ref('')
+const phoneValue2 = ref('')
+const selectedDialCode = ref('')
+</script>`,
+			},
+		],
+	},
+	args: {
+		required: true,
+		helpText: 'Saisissez votre numéro de téléphone français au format 01 23 45 67 89',
+	},
+	render(args) {
+		return {
+			components: { PhoneField },
+			setup() {
+				const phoneValue1 = ref('')
+				const phoneValue2 = ref('')
+				const selectedDialCode = ref('')
+
+				return {
+					args,
+					phoneValue1,
+					phoneValue2,
+					selectedDialCode,
+				}
+			},
+			template: `
+				<div class="pa-4">
+					<div class="mb-6">
+						<h4 class="mb-2">Avec aide à la saisie</h4>
+						<PhoneField
+							v-model="phoneValue1"
+							required
+							help-text="Saisissez votre numéro de téléphone au format 01 23 45 67 89"
+							label="Numéro de téléphone"
+						/>
+						<p class="text-caption mt-2">
+							Essayez de laisser le champ vide ou de saisir un numéro incorrect pour voir 
+							l'exemple dans le message d'erreur (différent de l'aide).
+						</p>
+					</div>
+
+					<div class="mb-6">
+						<h4 class="mb-2">Avec aide à la saisie et indicatif pays</h4>
+						<PhoneField
+							v-model="phoneValue2"
+							v-model:selected-dial-code="selectedDialCode"
+							required
+							with-country-code
+							help-text="Choisissez votre pays et saisissez votre numéro de téléphone"
+							label="Numéro de téléphone international"
+						/>
+						<p class="text-caption mt-2">
+							L'exemple dans le message d'erreur s'adapte au format du pays sélectionné.
+						</p>
+					</div>
+
+					<div class="mt-4">
+						<h4>Valeurs actuelles :</h4>
+						<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
+						<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
+						<pre class="text-caption">selectedDialCode: {{ selectedDialCode }}</pre>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
+export const Autocomplete: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="pa-4">
+		<p class="mb-4">
+			Les attributs <code>autocomplete</code> permettent aux navigateurs de remplir automatiquement 
+			les champs avec les bonnes informations utilisateur.
+		</p>
+		
+		<div class="mb-6">
+			<h4 class="mb-2">Avec indicatif pays (autocomplete="tel-country-code")</h4>
+			<PhoneField
+				v-model="phoneValue1"
+				v-model:selected-dial-code="selectedDialCode1"
+				required
+				with-country-code
+				autocomplete-country-code="tel-country-code"
+				autocomplete-phone="tel-national"
+				help-text="L'indicatif utilise tel-country-code, le numéro utilise tel-national"
+				label="Numéro de téléphone avec indicatif"
+			/>
+		</div>
+
+		<div class="mb-6">
+			<h4 class="mb-2">Numéro complet (autocomplete="tel")</h4>
+			<PhoneField
+				v-model="phoneValue2"
+				required
+				autocomplete-phone="tel"
+				help-text="Pour un numéro complet avec indicatif intégré"
+				label="Numéro de téléphone complet"
+			/>
+		</div>
+
+		<div class="mb-6">
+			<h4 class="mb-2">Extension téléphonique (autocomplete="tel-extension")</h4>
+			<PhoneField
+				v-model="phoneValue3"
+				required
+				autocomplete-phone="tel-extension"
+				help-text="Pour les extensions ou postes téléphoniques"
+				label="Extension téléphonique"
+			/>
+		</div>
+
+		<div class="mt-4">
+			<h4>Valeurs actuelles :</h4>
+			<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
+			<pre class="text-caption">selectedDialCode1: {{ selectedDialCode1 }}</pre>
+			<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
+			<pre class="text-caption">phoneValue3: {{ phoneValue3 }}</pre>
+		</div>
+	</div>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { ref } from 'vue'
+import PhoneField from './PhoneField.vue'
+
+const phoneValue1 = ref('')
+const selectedDialCode1 = ref('')
+const phoneValue2 = ref('')
+const phoneValue3 = ref('')
+</script>`,
+			},
+		],
+	},
+	args: {
+		required: true,
+		withCountryCode: true,
+		autocompleteCountryCode: 'tel-country-code',
+		autocompletePhone: 'tel-national',
+		helpText: 'Utilisez les valeurs autocomplete appropriées pour l\'accessibilité',
+	},
+	render(args) {
+		return {
+			components: { PhoneField },
+			setup() {
+				const phoneValue1 = ref('')
+				const selectedDialCode1 = ref('')
+				const phoneValue2 = ref('')
+				const phoneValue3 = ref('')
+
+				return {
+					args,
+					phoneValue1,
+					selectedDialCode1,
+					phoneValue2,
+					phoneValue3,
+				}
+			},
+			template: `
+				<div class="pa-4">
+					<p class="mb-4">
+						Les attributs <code>autocomplete</code> permettent aux navigateurs de remplir automatiquement 
+						les champs avec les bonnes informations utilisateur.
+					</p>
+					
+					<div class="mb-6">
+						<h4 class="mb-2">Avec indicatif pays (autocomplete="tel-country-code")</h4>
+						<PhoneField
+							v-model="phoneValue1"
+							v-model:selected-dial-code="selectedDialCode1"
+							required
+							with-country-code
+							autocomplete-country-code="tel-country-code"
+							autocomplete-phone="tel-national"
+							help-text="L'indicatif utilise tel-country-code, le numéro utilise tel-national"
+							label="Numéro de téléphone avec indicatif"
+						/>
+					</div>
+
+					<div class="mb-6">
+						<h4 class="mb-2">Numéro complet (autocomplete="tel")</h4>
+						<PhoneField
+							v-model="phoneValue2"
+							required
+							autocomplete-phone="tel"
+							help-text="Pour un numéro complet avec indicatif intégré"
+							label="Numéro de téléphone complet"
+						/>
+					</div>
+
+					<div class="mb-6">
+						<h4 class="mb-2">Extension téléphonique (autocomplete="tel-extension")</h4>
+						<PhoneField
+							v-model="phoneValue3"
+							required
+							autocomplete-phone="tel-extension"
+							help-text="Pour les extensions ou postes téléphoniques"
+							label="Extension téléphonique"
+						/>
+					</div>
+
+					<div class="mt-4">
+						<h4>Valeurs actuelles :</h4>
+						<pre class="text-caption">phoneValue1: {{ phoneValue1 }}</pre>
+						<pre class="text-caption">selectedDialCode1: {{ selectedDialCode1 }}</pre>
+						<pre class="text-caption">phoneValue2: {{ phoneValue2 }}</pre>
+						<pre class="text-caption">phoneValue3: {{ phoneValue3 }}</pre>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const CustomIndicatifs: Story = {
 	parameters: {
 		sourceCode: [