@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

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

@@ -31,6 +31,7 @@ const meta = {
 		},
 		isValidatedOnBlur: { control: 'boolean' },
 		displayAsterisk: { control: 'boolean' },
+		disableErrorHandling: { control: 'boolean' },
 	},
 } satisfies Meta<typeof PhoneField>
 
@@ -896,3 +897,103 @@ export const DisplayModels: Story = {
 		}
 	},
 }
+
+/**
+ * Story qui montre le comportement du composant lorsque la gestion des erreurs est désactivée.
+ * Aucun message d'erreur ne sera affiché, même si le champ est requis et vide.
+ */
+export const DisabledErrorHandling: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<PhoneField
+						v-model="modelValue"
+						:required="required"
+						:withCountryCode="withCountryCode"
+						:countryCodeRequired="countryCodeRequired"
+						:displayFormat="displayFormat"
+						:isValidatedOnBlur="isValidatedOnBlur"
+						:disableErrorHandling="disableErrorHandling"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { PhoneField } from '@cnamts/synapse'
+					
+					const modelValue = ref('')
+					const required = ref(true)
+					const withCountryCode = ref(true)
+					const countryCodeRequired = ref(true)
+					const displayFormat = ref('code')
+					const isValidatedOnBlur = ref(true)
+					const disableErrorHandling = ref(true)
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		modelValue: '',
+		required: true,
+		outlined: true,
+		outlinedIndicatif: true,
+		withCountryCode: true,
+		countryCodeRequired: true,
+		displayFormat: 'code',
+		customIndicatifs: [],
+		useCustomIndicatifsOnly: false,
+		isValidatedOnBlur: true,
+		disableErrorHandling: true,
+	},
+	render: (args) => {
+		return {
+			components: { PhoneField },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+					<h3>Gestion des erreurs désactivée</h3>
+					<p>Ce champ est requis mais n'affichera pas d'erreur même s'il est vide.</p>
+					<PhoneField
+						v-model="args.modelValue"
+						: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"
+						:disableErrorHandling="args.disableErrorHandling"
+					/>
+					<div class="mt-6">
+						<h3>Comparaison avec gestion des erreurs activée</h3>
+						<p>Ce champ est requis et affichera une erreur s'il est vide.</p>
+						<PhoneField
+							v-model="args.modelValue"
+							: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"
+							:disableErrorHandling="false"
+						/>
+					</div>
+				</div>
+			`,
+		}
+	},
+}

package/src/components/PhoneField/PhoneField.vue

@@ -1,14 +1,13 @@
 <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'
-	import { mdiPhone, mdiInformation } from '@mdi/js'
+	import { mdiPhone } 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'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 
 	type DisplayFormat = 'code' | 'code-abbreviation' | 'code-country' | 'country' | 'abbreviation'
 	type Indicatif = {
@@ -33,6 +32,7 @@
 		useCustomIndicatifsOnly: { type: Boolean, default: false },
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
+		disableErrorHandling: { type: Boolean, default: false },
 	})
 
 	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
@@ -42,7 +42,6 @@
 	const dialCode = ref<string | Record<string, any>>(props.dialCodeModel || '')
 	const counter = ref(10)
 	const phoneMask = ref('## ## ## ## ##')
-	const hasError = ref(false)
 	const onBlur = ref(false)
 
 	function formatPhoneNumber(value: string): string {
@@ -95,25 +94,74 @@
 		return format[props.displayFormat] || ind.code
 	}
 
-	const validationRules = computed(() => {
-		const rules = [exactLength(counter.value, true)]
+	const validationRules = computed<ValidationRule[]>(() => {
+		const rules = [{
+			type: 'exactLength',
+			options: {
+				length: counter.value,
+				ignoreSpace: true, // Ignorer les espaces dans la validation
+				message: `Le numéro de téléphone doit contenir ${counter.value} chiffres.`,
+				fieldIdentifier: locales.label,
+			},
+		}]
 		if (props.required) {
-			rules.unshift(RequiredRule)
+			rules.unshift({
+				type: 'required',
+				options: {
+					length: counter.value,
+					ignoreSpace: true, // Ignorer les espaces dans la validation
+					message: `Le champ ${locales.label} est requis.`,
+					fieldIdentifier: locales.label,
+				},
+			})
 		}
 		return rules
 	})
 
+	// Initialisation du composable de validation
+	const validation = useValidation({
+		customRules: validationRules.value,
+		showSuccessMessages: true,
+		fieldIdentifier: locales.label,
+		disableErrorHandling: props.disableErrorHandling,
+	})
+
+	// Computed pour l'affichage des états
+	const hasError = computed(() => validation.hasError.value)
+	const hasWarning = computed(() => validation.hasWarning.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value)
+
+	const errors = computed(() => validation.errors.value)
+	const warnings = computed(() => validation.warnings.value)
+	const successes = computed(() => validation.successes.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
+		// On nettoie la valeur des espaces avant de la valider
+		const cleanedValue = phoneNumber.value.replace(/\s/g, '')
+		validation.validateField(cleanedValue, validationRules.value)
 	}
 
+	// Mise à jour de la validation lorsque le numéro de téléphone change
+	watch(phoneNumber, (newValue) => {
+		if (!props.isValidatedOnBlur || onBlur.value) {
+			// On nettoie la valeur des espaces avant de la valider
+			const cleanedValue = newValue.replace(/\s/g, '')
+			validation.validateField(cleanedValue, validationRules.value)
+		}
+	})
+
+	// Mise à jour de la validation lorsque les règles changent
+	watch(validationRules, () => {
+		if (onBlur.value) {
+			// On nettoie la valeur des espaces avant de la valider
+			const cleanedValue = phoneNumber.value.replace(/\s/g, '')
+			validation.validateField(cleanedValue, validationRules.value)
+		}
+	})
+
 	defineExpose({
 		computedValue,
 		dialCode,
@@ -122,6 +170,7 @@
 		hasError,
 		phoneNumber,
 		mergedDialCodes,
+		validation,
 	})
 </script>
 
@@ -135,6 +184,8 @@
 			:outlined="outlinedIndicatif"
 			:required="props.countryCodeRequired"
 			:display-asterisk="props.displayAsterisk"
+			:disable-error-handling="props.disableErrorHandling"
+			:return-object="true"
 			class="custom-select"
 			text-key="displayText"
 			value-key="code"
@@ -146,10 +197,18 @@
 			:counter-value="(value: string) => value.replace(/\s/g, '').length"
 			:label="locales.label"
 			:required="props.required"
-			:rules="validationRules"
+			:error="hasError"
+			:error-messages="errors"
+			:warning-messages="warnings"
+			:success-messages="successes"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:display-asterisk="props.displayAsterisk"
-			class="phone-field"
+			:class="{
+				'phone-field': true,
+				'error-field': hasError,
+				'warning-field': hasWarning,
+				'success-field': hasSuccess
+			}"
 			color="primary"
 			@blur="validateInputOnBlur"
 			@input="handlePhoneInput"
@@ -161,9 +220,6 @@
 				>
 					{{ mdiPhone }}
 				</VIcon>
-				<VIcon v-if="hasError">
-					{{ mdiInformation }}
-				</VIcon>
 			</template>
 		</SyTextField>
 	</div>

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

@@ -161,4 +161,44 @@ describe('PhoneField', () => {
 		const textField = wrapper.findComponent({ name: 'VTextField' })
 		expect(textField.props('variant')).toBe('underlined')
 	})
+
+	it('passes dialCode object to SyTextField when dialCode is set', async () => {
+		const wrapper = mount(PhoneField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				withCountryCode: true,
+				dialCodeModel: { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' },
+			},
+		})
+
+		// Vérifier que le dialCode est bien un objet
+		expect(typeof wrapper.vm.dialCode).toBe('object')
+
+		// Trouver le composant SyTextField
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		expect(textField.exists()).toBe(true)
+
+		// 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
+		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',
+			phoneLength: 10,
+			mask: '## ## ## ## ##',
+		})
+	})
 })

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -141,7 +141,7 @@ export const Default: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingEmotion = ref(-1)
 </script>
@@ -192,7 +192,7 @@ export const TwoEmotions: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingEmotion = ref(-1)
 </script>
@@ -241,7 +241,7 @@ export const Numbers: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingNumber = ref(-1)
 </script>
@@ -290,7 +290,7 @@ export const Stars: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingStar = ref(-1)
 </script>
@@ -341,7 +341,7 @@ export const ReadOnly: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingEmotion = ref(-1)
 </script>
@@ -392,7 +392,7 @@ export const HideAlert: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import RatingPicker from '@cnamts/synapse'
+import { RatingPicker } from '@cnamts/synapse'
 
 const ratingEmotion = ref(-1)
 </script>
@@ -488,7 +488,7 @@ export const DefaultSlot: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import {RatingPicker, SySelect} from '@cnamts/synapse'
+import { RatingPicker, SySelect } from '@cnamts/synapse'
 import { VBtn, VSpacer } from 'vuetify/components'
 
 const ratingEmotion = ref(-1)

package/src/components/SearchListField/SearchListField.stories.ts

@@ -88,7 +88,7 @@ export const Default: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import SearchListField from '@cnamts/synapse'
+import { SearchListField } from '@cnamts/synapse'
 
 const modelValue = ref('')
 

package/src/components/UploadWorkflow/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/UploadWorkflow/Accessibilite.stories.ts

@@ -0,0 +1,216 @@
+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/UploadWorkflow/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>
+												</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 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-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>
+												</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>
+			</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'],
+}