@cnamts/synapse 0.0.15-alpha → 1.0.0

package/src/components/Customs/SySelect/SySelect.vue

@@ -61,6 +61,10 @@
 			type: Boolean,
 			default: false,
 		},
+		density: {
+			type: String as PropType<'default' | 'comfortable' | 'compact' | undefined>,
+			default: 'default',
+		},
 		bgColor: {
 			type: String,
 			default: undefined,
@@ -73,6 +77,14 @@
 			type: Boolean,
 			default: false,
 		},
+		hideMessages: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: String,
+			default: 'undefined',
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -100,9 +112,8 @@
 			const rect = input.value.$el.getBoundingClientRect()
 			listStyles.value = {
 				position: 'fixed',
-				top: `${rect.bottom}px`,
+				top: props.density === 'compact' ? `${rect.bottom + 22}px` : `${rect.bottom}px`,
 				left: `${rect.left}px`,
-				width: `${rect.width}px`,
 				zIndex: '999',
 			}
 		}
@@ -159,21 +170,27 @@
 	})
 
 	const isRequired = computed(() => {
-		// Si la gestion des erreurs est désactivée, on ne considère jamais le champ comme requis
-		if (props.disableErrorHandling) return false
+		if (props.disableErrorHandling || props.hideMessages) return false
+		if (props.readonly) return
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
 	const input = ref<InstanceType<typeof VTextField> | null>(null)
 
+	const calculatedWidth = computed(() => {
+		const baseWidth = props.width ? Number(props.width) : 0
+		const selectedText = typeof selectedItemText.value === 'string' ? selectedItemText.value : ''
+		const clearableAdjustment = props.clearable ? 4 : 0
+		return `${baseWidth + selectedText.length * (4 + clearableAdjustment)}px`
+	})
+
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
 
 	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
 		if (!newIsOpen) {
-			// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
-			if (props.disableErrorHandling) {
+			if (props.disableErrorHandling || props.readonly) {
 				hasError.value = false
 			}
 			else {
@@ -186,7 +203,6 @@
 	})
 
 	watch(() => props.errorMessages, (newValue) => {
-		// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
 		if (!props.disableErrorHandling) {
 			hasError.value = newValue.length > 0
 		}
@@ -202,6 +218,13 @@
 		}
 		window.addEventListener('scroll', updateListPosition, true)
 		window.addEventListener('resize', updateListPosition)
+
+		if (props.hideMessages) {
+			const message = document.querySelector('.v-input__details')
+			if (message) {
+				message.classList.add('d-sr-only')
+			}
+		}
 	})
 
 	onUnmounted(() => {
@@ -230,11 +253,13 @@
 			:aria-label="labelWithAsterisk"
 			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
+			:rules="isRequired && !props.disableErrorHandling && !props.hideMessages ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			:bg-color="props.bgColor"
+			:density="props.density"
 			readonly
 			class="sy-select"
+			:width="calculatedWidth"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
 			@keydown.enter.prevent="toggleMenu"

package/src/components/Customs/SySelect/tests/SySelect.spec.ts

@@ -192,14 +192,303 @@ describe('SySelect.vue', () => {
 		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
 	})
 
-	it('closes the menu when v-click-outside directive is called', async () => {
+	it('ferme le menu avec la méthode closeList', async () => {
 		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		expect(instance.isOpen).toBe(true)
+
+		instance.closeList()
+		await wrapper.vm.$nextTick()
+
+		expect(instance.isOpen).toBe(false)
+	})
+
+	describe('Affichage de l\'astérisque', () => {
+		it('affiche l\'astérisque quand displayAsterisk et required sont true', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: true,
+					required: true,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).toContain('Test Label *')
+		})
+
+		it('n\'affiche pas l\'astérisque quand displayAsterisk est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: false,
+					required: true,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).not.toContain('Test Label *')
+			expect(html).toContain('Test Label')
+		})
+
+		it('n\'affiche pas l\'astérisque quand required est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: true,
+					required: false,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).not.toContain('Test Label *')
+			expect(html).toContain('Test Label')
+		})
+	})
+
+	describe('Mode readonly', () => {
+		it('empêche l\'ouverture du menu en mode readonly', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					readonly: true,
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.isOpen).toBe(false)
+		})
+
+		it('affiche correctement le champ en mode readonly', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					readonly: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					textKey: 'text',
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-input--readonly').exists()).toBe(true)
+
+			expect(wrapper.html()).toContain('Option 1')
+		})
+	})
+
+	describe('Option clearable', () => {
+		it('affiche l\'icône de suppression quand clearable est true et qu\'une valeur est sélectionnée', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.sy-select__clear-icon').exists()).toBe(true)
+		})
+
+		it('n\'affiche pas l\'icône de suppression quand clearable est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: false,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-icon.mdi-close-circle').exists()).toBe(false)
+		})
+
+		it('efface la valeur sélectionnée avec la méthode selectItem', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			instance.selectItem(null)
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
+		})
+	})
+
+	describe('Validation', () => {
+		it('affiche une erreur pour un champ requis sans valeur', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(true)
+		})
+
+		it('n\'affiche pas d\'erreur pour un champ requis avec une valeur', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+		})
+
+		it('n\'affiche pas d\'erreur quand disableErrorHandling est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+					disableErrorHandling: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+		})
+	})
+
+	describe('Comportement du menu', () => {
+		it('ouvre et ferme le menu au clic', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(true)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+		})
+
+		it('met à jour isOpen quand on ouvre le menu', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.isOpen).toBe(false)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(instance.isOpen).toBe(true)
+		})
+	})
+
+	it('ferme le menu après un clic sur le sélecteur', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+			},
 			global: {
 				plugins: [vuetify],
 			},
 		})
+
 		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.vm.$nextTick()
 		expect(wrapper.find('.v-list').exists()).toBe(true)
+
 		await wrapper.find('.sy-select').trigger('mouseleave')
 		await wrapper.find('.sy-select').trigger('click')
 		await wrapper.vm.$nextTick()

package/src/components/Customs/SyTextField/Accessibilite.stories.ts

@@ -217,6 +217,13 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/SyTextField.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/issues/4028" target="_blank"
+					  style="color:#0C41BD;">issue #4028</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -28,6 +28,10 @@ const meta = {
 			description: 'Texte affiché comme label du champ',
 			control: 'text',
 		},
+		'autocomplete': {
+			description: 'Valeur de l\'attribut autocomplete',
+			control: 'text',
+		},
 		'prependIcon': {
 			control: 'select',
 			options: ['info', 'success', 'warning', 'error', 'close'],
@@ -118,6 +122,11 @@ const meta = {
 			control: 'boolean',
 			default: false,
 		},
+		'disableClickButton': {
+			description: 'Désactive le click sur les icônes append et prepend',
+			control: 'boolean',
+			default: true,
+		},
 		'readonly': {
 			description: 'Rend le champ en lecture seule',
 			control: 'boolean',
@@ -948,6 +957,7 @@ Cette story montre un cas d'usage courant : la validation d'une adresse email. L
 				name: 'Template',
 				code: `<SyTextField
 	v-model="value"
+	autocomplete="email"
 	label="Email"
 	required
 	:customRules="[
@@ -975,6 +985,7 @@ Cette story montre un cas d'usage courant : la validation d'une adresse email. L
 				v-model="value"
 				v-bind="args"
 				label="Email"
+				autocomplete="email"
 				required
 				:customRules="[
 					{
@@ -1011,6 +1022,7 @@ Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un f
 				code: `<SyTextField
 	v-model="value"
 	label="Code postal"
+	autocomplete="postal-code"
 	required
 	:customRules="[
 		{
@@ -1038,6 +1050,7 @@ Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un f
 				v-model="value"
 				v-bind="args"
 				label="Code postal"
+				autocomplete="postal-code"
 				required
 				:customRules="[
 					{