@cnamts/synapse 1.0.9 → 1.0.11

package/src/components/Customs/Selects/SyInputSelect/tests/SyInputSelect.spec.ts

@@ -1,16 +1,11 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import SyInputSelect from '../SyInputSelect.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('SyInputSelect', () => {
 	describe('Rendu et affichage', () => {
 		it('renders the component with default props', () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			expect(wrapper.exists()).toBe(true)
 			expect(wrapper.find('.sy-input-select').text()).toBe('Sélectionnez une option')
 		})
@@ -19,28 +14,17 @@ describe('SyInputSelect', () => {
 			const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
 			const wrapper = mount(SyInputSelect, {
 				props: { items, modelValue: { text: 'Option 1', value: '1' } },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 			expect(wrapper.find('.sy-input-select').text()).toContain('Option 1')
 		})
 
 		it('does not render error messages when not provided', () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
 		})
 
 		it('does not render the label when not provided', () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			expect(wrapper.find('label').exists()).toBe(false)
 		})
 
@@ -48,9 +32,6 @@ describe('SyInputSelect', () => {
 			const items = ['Option 1', 'Option 2']
 			const wrapper = mount(SyInputSelect, {
 				props: { items, textKey: 'text', valueKey: 'value' },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			const formattedItems = (wrapper.vm as any).formattedItems
@@ -63,19 +44,12 @@ describe('SyInputSelect', () => {
 		it('applies the correct button class when outlined is true', () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { outlined: true },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 			expect(wrapper.find('.sy-input-select').classes()).toContain('v-btn--variant-outlined')
 		})
 
 		it('toggles the menu when the button is clicked', async () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			const button = wrapper.find('.sy-input-select')
 			await button.trigger('click')
 			expect(wrapper.vm.isOpen).toBe(true)
@@ -84,32 +58,20 @@ describe('SyInputSelect', () => {
 		})
 
 		it('use closeList method', async () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			await wrapper.vm.closeList()
 			expect(wrapper.vm.isOpen).toBe(false)
 		})
 
 		it('selectItem method', async () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			await wrapper.vm.selectItem({ text: 'Option 1', value: '1' })
 			expect(wrapper.vm.isOpen).toBe(false)
 			expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
 		})
 
 		it('getItemText method', async () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 			const item = { text: 'Option 1', value: '1' }
 			const text = wrapper.vm.getItemText(item)
 			expect(text).toBe('Option 1')
@@ -118,9 +80,6 @@ describe('SyInputSelect', () => {
 		it('watch modelValue', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { modelValue: { text: 'Option 1', value: '1' } },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 			expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
 			await wrapper.setProps({ modelValue: { text: 'Option 2', value: '2' } })
@@ -130,9 +89,6 @@ describe('SyInputSelect', () => {
 		it('watch errorMessages', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { errorMessages: ['Error message'] },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 			expect(wrapper.find('.v-messages__message').exists()).toBe(true)
 			await wrapper.setProps({ errorMessages: [] })
@@ -147,9 +103,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					modelValue: { text: 'Option 1', value: '1' },
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result = wrapper.vm.validateField({ text: 'Option 1', value: '1' })
@@ -164,9 +117,6 @@ describe('SyInputSelect', () => {
 					label: 'Test Label',
 					errorMessages: [],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result = wrapper.vm.validateField(null)
@@ -182,9 +132,6 @@ describe('SyInputSelect', () => {
 		it('validateOnSubmit retourne le résultat de validation', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { required: true },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result = wrapper.vm.validateOnSubmit()
@@ -201,9 +148,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					modelValue: null,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result1 = wrapper1.vm.checkForErrors()
@@ -214,9 +158,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					modelValue: { text: 'Option 1', value: '1' },
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result2 = wrapper2.vm.checkForErrors()
@@ -231,9 +172,6 @@ describe('SyInputSelect', () => {
 					readonly: true,
 					required: true,
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const result = wrapper.vm.validateField(null)
@@ -244,9 +182,6 @@ describe('SyInputSelect', () => {
 		it('empêche l\'ouverture du menu en mode readonly', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { readonly: true },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const button = wrapper.find('.sy-input-select')
@@ -262,9 +197,6 @@ describe('SyInputSelect', () => {
 					clearable: true,
 					modelValue: { text: 'Option 1', value: '1' },
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const clearIcon = wrapper.find('.sy-input-select .v-icon[aria-label="Supprimer"]')
@@ -277,9 +209,6 @@ describe('SyInputSelect', () => {
 					clearable: false,
 					modelValue: { text: 'Option 1', value: '1' },
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const clearIcon = wrapper.find('.sy-input-select .v-icon[aria-label="Supprimer"]')
@@ -292,9 +221,6 @@ describe('SyInputSelect', () => {
 					clearable: true,
 					modelValue: { text: 'Option 1', value: '1' },
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const clearIcon = wrapper.find('.sy-input-select .v-icon[aria-label="Supprimer"]')
@@ -311,9 +237,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const html = wrapper.html()
@@ -327,9 +250,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const html = wrapper.html()
@@ -344,9 +264,6 @@ describe('SyInputSelect', () => {
 					required: false,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const html = wrapper.html()
@@ -361,9 +278,6 @@ describe('SyInputSelect', () => {
 				props: {
 					items: [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }],
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			await wrapper.vm.selectItem({ text: 'Option 1', value: '1' })
@@ -376,9 +290,6 @@ describe('SyInputSelect', () => {
 					required: true,
 					label: 'Test Label',
 				},
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			await wrapper.vm.validateField(null)
@@ -391,11 +302,7 @@ describe('SyInputSelect', () => {
 
 	describe('Comportement du menu', () => {
 		it('ouvre le menu quand on clique sur le bouton', async () => {
-			const wrapper = mount(SyInputSelect, {
-				global: {
-					plugins: [vuetify],
-				},
-			})
+			const wrapper = mount(SyInputSelect)
 
 			const button = wrapper.find('.sy-input-select')
 			await button.trigger('click')
@@ -406,9 +313,6 @@ describe('SyInputSelect', () => {
 		it('applique des styles différents pour isHeaderToolbar', async () => {
 			const wrapper = mount(SyInputSelect, {
 				props: { isHeaderToolbar: true },
-				global: {
-					plugins: [vuetify],
-				},
 			})
 
 			const button = wrapper.find('.sy-input-select')

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

@@ -7,6 +7,7 @@
 	import { ref, watch, onMounted, computed, nextTick, type PropType } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
 	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
+	import { useValidatable } from '@/composables/validation/useValidatable'
 	import type { VList, VTextField } from 'vuetify/components'
 	import { VChip } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
@@ -121,8 +122,8 @@
 			default: false,
 		},
 		autocomplete: {
-			type: String,
-			default: '',
+			type: String as PropType<'on' | 'off' | undefined | string>,
+			default: 'on',
 		},
 	})
 
@@ -703,9 +704,29 @@
 		})
 	}, { deep: true })
 
+	// Méthode de validation pour l'enregistrement avec le système de validation du formulaire
+	const validateOnSubmit = (): boolean => {
+		// Si en mode readonly ou si la gestion d'erreur est désactivée, toujours valide
+		if (props.readonly || props.disableErrorHandling) {
+			return true
+		}
+
+		// Vérifier si une valeur est sélectionnée quand le champ est requis
+		const isValid = !isRequired.value
+
+		// Mettre à jour l'état d'erreur
+		hasError.value = !isValid || props.errorMessages.length > 0
+
+		return isValid
+	}
+
+	// Intégration avec le système de validation du formulaire
+	useValidatable(validateOnSubmit)
+
 	defineExpose({
 		isOpen,
 		closeList,
+		validateOnSubmit,
 	})
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -883,9 +904,15 @@
 				<VListItemTitle>
 					<span
 						v-if="allowHtml"
+						class="item-text"
 						v-html="getItemText(item)"
 					/>
-					<span v-else>{{ getItemText(item) }}</span>
+					<span
+						v-else
+						class="item-text"
+					>
+						{{ getItemText(item) }}
+					</span>
 				</VListItemTitle>
 			</VListItem>
 		</VList>
@@ -958,6 +985,21 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+/* Permettre le passage à la ligne pour les textes longs dans la liste déroulante */
+.v-list-item-title {
+	white-space: normal;
+	word-wrap: break-word;
+	word-break: break-word;
+	line-height: 1.2;
+	padding: 4px 0;
+}
+
+/* Style spécifique pour le contenu texte des éléments de liste */
+.item-text {
+	display: block;
+	padding: 2px 0;
+}
+
 .v-icon {
 	position: absolute;
 	right: 10px;