@cnamts/synapse 1.0.17 → 1.0.18

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

@@ -18,13 +18,90 @@ describe('SySelect.vue', () => {
 		wrapper.unmount()
 	})
 
+	it('renders prepend and append slots content when provided', () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+			},
+			slots: {
+				prepend: '<span class="custom-prepend">prepend</span>',
+				append: '<span class="custom-append">append</span>',
+			},
+			attachTo: document.body,
+		})
+
+		expect(wrapper.find('.custom-prepend').exists()).toBe(true)
+		expect(wrapper.find('.custom-append').exists()).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('renders tooltip icons when prependTooltip/appendTooltip are provided', () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+				label: 'Test',
+				prependTooltip: 'Information à gauche du champ',
+				appendTooltip: 'Information à droite du champ',
+				tooltipLocation: 'top',
+			},
+			attachTo: document.body,
+		})
+
+		// SyIcon renders a v-icon with aria-label
+		expect(wrapper.findAll('[aria-label="Test - info"]').length).toBe(2)
+		wrapper.unmount()
+	})
+
+	it('emits prepend-icon-click and does not open menu when clicking prepend icon', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+				label: 'Test',
+				prependIcon: 'success',
+				disableClickButton: false,
+			},
+			attachTo: document.body,
+		})
+
+		expect(wrapper.findComponent(VList).exists()).toBe(false)
+		await wrapper.find('[aria-label="Test - bouton success"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()['prepend-icon-click']).toBeTruthy()
+		expect(wrapper.findComponent(VList).exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('emits append-icon-click and does not open menu when clicking append icon', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+				label: 'Test',
+				appendIcon: 'success',
+				disableClickButton: false,
+			},
+			attachTo: document.body,
+		})
+
+		expect(wrapper.findComponent(VList).exists()).toBe(false)
+		await wrapper.find('[aria-label="Test - bouton success"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted()['append-icon-click']).toBeTruthy()
+		expect(wrapper.findComponent(VList).exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
 	it('displays the selected item text', async () => {
 		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
 		const wrapper = mount(SySelect, {
 			props: { items, modelValue: { text: 'Option 1', value: '1' } },
 			attachTo: document.body,
 		})
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper
 			.findComponent(VList)
 			.findAll('.v-list-item').at(0)
@@ -40,7 +117,7 @@ describe('SySelect.vue', () => {
 			props: { items },
 			attachTo: document.body,
 		})
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		await wrapper
 			.findComponent(VList)
 			.find('.v-list').trigger('keydown.esc')
@@ -191,7 +268,7 @@ describe('SySelect.vue', () => {
 		const instance = wrapper.vm as any
 		instance.selectItem({ text: 'Option 1', value: '1' })
 		await wrapper.vm.$nextTick()
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['1'])
 
 		wrapper.unmount()
 	})
@@ -204,7 +281,7 @@ describe('SySelect.vue', () => {
 			attachTo: document.body,
 		})
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		await wrapper.vm.$nextTick()
 
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -281,7 +358,7 @@ describe('SySelect.vue', () => {
 				attachTo: document.body,
 			})
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(wrapper.find('.v-list').exists()).toBe(false)
@@ -358,7 +435,7 @@ describe('SySelect.vue', () => {
 			instance.selectItem(null)
 			await wrapper.vm.$nextTick()
 
-			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([null])
 
 			wrapper.unmount()
 		})
@@ -375,9 +452,9 @@ describe('SySelect.vue', () => {
 				attachTo: document.body,
 			})
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -398,9 +475,9 @@ describe('SySelect.vue', () => {
 				attachTo: document.body,
 			})
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -421,9 +498,9 @@ describe('SySelect.vue', () => {
 				attachTo: document.body,
 			})
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
@@ -447,7 +524,7 @@ describe('SySelect.vue', () => {
 			}
 			expect(findList().exists()).toBe(false)
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(findList().exists()).toBe(true)
@@ -465,12 +542,12 @@ describe('SySelect.vue', () => {
 
 			expect(wrapper.findComponent(VList).exists()).toBe(false)
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(wrapper.findComponent(VList).exists()).toBe(true)
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(wrapper.vm.isOpen).toBe(false)
@@ -490,7 +567,7 @@ describe('SySelect.vue', () => {
 			const instance = wrapper.vm as any
 			expect(instance.isOpen).toBe(false)
 
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			expect(instance.isOpen).toBe(true)
@@ -507,14 +584,14 @@ describe('SySelect.vue', () => {
 			attachTo: document.body,
 		})
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		await wrapper.vm.$nextTick()
 		expect(wrapper
 			.findComponent(VList)
 			.find('.v-list').exists()).toBe(true)
 
 		await wrapper.find('.sy-select').trigger('mouseleave')
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		await wrapper.vm.$nextTick()
 
 		expect(wrapper.vm.isOpen).toBe(false)
@@ -540,15 +617,15 @@ describe('SySelect.vue', () => {
 			},
 			attachTo: document.body,
 		})
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
 		await firstItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['1'])
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
 		await secondItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['2'])
+		expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual(['2'])
 
 		wrapper.unmount()
 	})
@@ -562,15 +639,15 @@ describe('SySelect.vue', () => {
 			attachTo: document.body,
 		})
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
 		await firstItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([{ text: 'Option 1', value: '1' }])
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
 		await secondItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([{ text: 'Option 2', value: '2' }])
+		expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual([{ text: 'Option 2', value: '2' }])
 
 		wrapper.unmount()
 	})
@@ -585,15 +662,15 @@ describe('SySelect.vue', () => {
 			},
 			attachTo: document.body,
 		})
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
 		await firstItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['1'])
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
 		await secondItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['2'])
+		expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual(['2'])
 
 		wrapper.unmount()
 	})
@@ -609,15 +686,15 @@ describe('SySelect.vue', () => {
 			attachTo: document.body,
 		})
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
 		await firstItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ theText: 'Option 1', theValue: '1' }])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([{ theText: 'Option 1', theValue: '1' }])
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
 		await secondItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([{ theText: 'Option 2', theValue: '2' }])
+		expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual([{ theText: 'Option 2', theValue: '2' }])
 
 		wrapper.unmount()
 	})
@@ -630,15 +707,15 @@ describe('SySelect.vue', () => {
 			attachTo: document.body,
 		})
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const firstItem = wrapper.findComponent(VList).findAll('.v-list-item').at(0)
 		await firstItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Option 1'])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['Option 1'])
 
-		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.find('.v-field').trigger('click')
 		const secondItem = wrapper.findComponent(VList).findAll('.v-list-item').at(1)
 		await secondItem!.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][1]).toEqual(['Option 2'])
+		expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual(['Option 2'])
 
 		wrapper.unmount()
 	})
@@ -656,7 +733,7 @@ describe('SySelect.vue', () => {
 		const clearBtn = wrapper.find('.sy-select__clear-icon')
 		expect(clearBtn.exists()).toBe(true)
 		await clearBtn.trigger('click')
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
+		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([null])
 
 		wrapper.unmount()
 	})
@@ -681,24 +758,22 @@ describe('SySelect.vue', () => {
 			})
 
 			// Open the select menu
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Select Option 1
 			const listItems = wrapper.findComponent(VList).findAll('.v-list-item')
-			await listItems[1].trigger('click')
+			await listItems[1]?.trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Check that Option 1 is selected
-			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['1']])
-
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['1']])
 			// Select Option 2 as well
-			await listItems[2].trigger('click')
+			await listItems[2]?.trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Check that both options are selected
-			expect(wrapper.emitted()['update:modelValue'][1]).toEqual([['1', '2']])
-
+			expect(wrapper.emitted()['update:modelValue']?.[1]).toEqual([['1', '2']])
 			wrapper.unmount()
 		})
 
@@ -720,16 +795,16 @@ describe('SySelect.vue', () => {
 			})
 
 			// Open the select menu
-			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Click on the default option
-			const defaultOption = wrapper.findComponent(VList).findAll('.v-list-item')[0]
+			const defaultOption = wrapper.findComponent(VList).findAll('.v-list-item')[0]!
 			await defaultOption.trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Check that all selections are cleared
-			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[]])
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([[]])
 
 			wrapper.unmount()
 		})
@@ -790,8 +865,8 @@ describe('SySelect.vue', () => {
 			// Check that chips are rendered
 			const chips = wrapper.findAll('.v-chip')
 			expect(chips.length).toBe(2)
-			expect(chips[0].text()).toBe('Option 1')
-			expect(chips[1].text()).toBe('Option 2')
+			expect(chips[0]?.text()).toBe('Option 1')
+			expect(chips[1]?.text()).toBe('Option 2')
 
 			wrapper.unmount()
 		})
@@ -815,12 +890,12 @@ describe('SySelect.vue', () => {
 			})
 
 			// Find the first chip's close button and click it
-			const closeButton = wrapper.find('.v-chip__close')
+			const closeButton = wrapper.find('.v-chip__close')!
 			await closeButton.trigger('click')
 			await wrapper.vm.$nextTick()
 
 			// Check that the chip was removed from the model
-			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['2']])
+			expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual([['2']])
 
 			wrapper.unmount()
 		})
@@ -836,7 +911,7 @@ describe('SySelect.vue', () => {
 					multiple: true,
 					chips: true,
 					returnObject: true,
-					modelValue: [items[0], items[1]],
+					modelValue: [items[0]!, items[1]!],
 					textKey: 'text',
 					valueKey: 'value',
 				},
@@ -846,8 +921,8 @@ describe('SySelect.vue', () => {
 			// Check that chips display the correct text
 			const chips = wrapper.findAll('.v-chip')
 			expect(chips.length).toBe(2)
-			expect(chips[0].text()).toBe('Option 1')
-			expect(chips[1].text()).toBe('Option 2')
+			expect(chips[0]?.text()).toBe('Option 1')
+			expect(chips[1]?.text()).toBe('Option 2')
 
 			wrapper.unmount()
 		})
@@ -873,8 +948,8 @@ describe('SySelect.vue', () => {
 			// Check that chips are rendered without errors
 			const chips = wrapper.findAll('.v-chip')
 			expect(chips.length).toBe(2)
-			expect(chips[0].text()).toBe('Option 1')
-			expect(chips[1].text()).toBe('Option 2')
+			expect(chips[0]?.text()).toBe('Option 1')
+			expect(chips[1]?.text()).toBe('Option 2')
 
 			// Test the safeChipItem method directly
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type

package/src/components/Customs/Selects/SySelect/types.d.ts

@@ -0,0 +1,4 @@
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
+export type VariantStyle = 'outlined' | 'plain' | 'underlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+export type ValidateOnType = 'eager' | 'lazy' | 'blur' | 'input' | 'submit' | 'invalid-input' | 'blur lazy' | 'input lazy' | 'submit lazy' | 'invalid-input lazy' | 'blur eager' | 'input eager' | 'submit eager' | 'invalid-input eager' | 'lazy blur' | 'lazy input' | 'lazy submit' | 'lazy invalid-input' | 'eager blur' | 'eager input' | 'eager submit' | 'eager invalid-input' | undefined

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -363,7 +363,7 @@
 	</div>
 </template>
 
-<style>
+<style scoped>
 :deep(.v-input--dirty .v-selection-control__input) {
 	color: v-bind('props.color');
 }
@@ -393,4 +393,20 @@
 :deep(.v-selection-control--error .v-selection-control__input) {
 	color: rgb(var(--v-theme-error));
 }
+
+:deep(.v-messages__message) {
+	animation: sy-messages-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+@keyframes sy-messages-in {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
 </style>

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

@@ -2,7 +2,7 @@ import SyIconAccessibility from './SyIconAccessibility.vue'
 import { mdiStar } from '@mdi/js'
 
 const meta = {
-	title: 'Composants/Données/SyIcon/Accessibilite',
+	title: 'Composants/Données/SyIcon/Accessibilité',
 	component: () => import('./SyIcon.vue'),
 	parameters: {
 		docs: {

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

@@ -49,7 +49,7 @@ describe('SyPagination', () => {
 		await wrapper.setProps({ modelValue: 2 })
 
 		// Click on next button
-		await wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0].trigger('click')
+		await wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0]!.trigger('click')
 		// Get updated emitted events
 		const updatedEmitted = wrapper.emitted('update:modelValue')
 		expect(updatedEmitted && updatedEmitted[1]).toEqual([3])
@@ -63,7 +63,7 @@ describe('SyPagination', () => {
 			},
 		})
 
-		const prevButton = wrapper.findAll('a').filter(a => a.text().includes('Précédent'))[0]
+		const prevButton = wrapper.findAll('a').filter(a => a.text().includes('Précédent'))[0]!
 		expect(prevButton.classes()).toContain('disabled')
 	})
 
@@ -75,7 +75,7 @@ describe('SyPagination', () => {
 			},
 		})
 
-		const nextButton = wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0]
+		const nextButton = wrapper.findAll('a').filter(a => a.text().includes('Suivant'))[0]!
 		expect(nextButton.classes()).toContain('disabled')
 	})
 

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -321,4 +321,20 @@
 		color: rgb(var(--v-theme-success)) !important;
 	}
 }
+
+:deep(.v-messages__message) {
+	animation: sy-messages-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+@keyframes sy-messages-in {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
 </style>

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

@@ -61,7 +61,7 @@ describe('SyRadioGroup', () => {
 		await nextTick()
 		const errorMessages = wrapper.findAll('.v-messages__message')
 		expect(errorMessages.length).toBeGreaterThan(0)
-		expect(errorMessages[0].text()).toContain('Required Radio est requis')
+		expect(errorMessages[0]?.text()).toContain('Required Radio est requis')
 
 		// Sélectionner l'option
 		const radioX = wrapper.find('input[value="X"]')

package/src/components/Customs/SyTabs/SyTabs.vue

@@ -81,7 +81,7 @@
 	}
 
 	// Fonction pour activer un élément au clic avec confirmation si nécessaire
-	async function setActiveItem(index: number) {
+	async function setActiveItem(index: number): Promise<void> {
 		// Si l'index est déjà actif ou si l'élément est désactivé, ne rien faire
 		if (index === activeItemIndex.value) return
 
@@ -89,7 +89,7 @@
 		const item = props.items[index]
 
 		// Ne rien faire si l'élément est désactivé
-		if (item.disabled) return
+		if (item?.disabled) return
 
 		const hasHref = item && (item.href || item.to)
 
@@ -108,7 +108,7 @@
 
 		// Mettre à jour l'onglet actif
 		activeItemIndex.value = index
-		emit('update:modelValue', typeof props.modelValue === 'string' ? props.items[index].value : index)
+		emit('update:modelValue', typeof props.modelValue === 'string' ? props.items[index]!.value : index)
 
 		// Pour les éléments sans navigation (ni href ni to), on ne fait que mettre à jour l'état
 		// La navigation pour RouterLink et href se fait automatiquement via les éléments HTML
@@ -117,14 +117,14 @@
 	// Fonction pour gérer les touches Enter et Space
 	function handleKeyPress(event: KeyboardEvent, index: number) {
 		if (event.key === 'Enter' || event.key === ' ') {
-			const item = props.items[index]
+			const item = props.items[index] as TabItem | undefined
 			// Ne rien faire si l'élément est désactivé
-			if (item.disabled) {
+			if (item?.disabled) {
 				event.preventDefault()
 				return
 			}
 			// Don't prevent default for external links - let them navigate naturally
-			if (!item.href) {
+			if (!item?.href) {
 				event.preventDefault()
 			}
 			void setActiveItem(index) // void pour ignorer la promesse
@@ -290,7 +290,7 @@
 		if (itemCount === 0) return -1
 
 		for (let i = 0; i < itemCount; i++) {
-			if (!props.items[i].disabled) return i
+			if (!props.items[i]?.disabled) return i
 		}
 
 		return -1
@@ -301,7 +301,7 @@
 		if (itemCount === 0) return -1
 
 		for (let i = itemCount - 1; i >= 0; i--) {
-			if (!props.items[i].disabled) return i
+			if (!props.items[i]?.disabled) return i
 		}
 
 		return -1