@cnamts/synapse 1.0.11 → 1.0.12

package/src/components/DatePicker/composables/useDatePickerViewMode.ts

@@ -15,25 +15,61 @@ export interface ViewModeReturn {
  * Utilisé pour contrôler le comportement du CalendarMode, notamment pour les dates de naissance
  *
  * @param isBirthDateGetter - Une fonction qui retourne la valeur actuelle de isBirthDate
+ * @param selectedDateGetter - Une fonction qui retourne l'état de la date sélectionnée (null si aucune date)
  */
-export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewModeReturn {
+export function useDatePickerViewMode(
+	isBirthDateGetter: () => boolean,
+	selectedDateGetter: () => Date | (Date | null)[] | null,
+): ViewModeReturn {
 	// Variable pour suivre le mode d'affichage actuel du CalendarMode
-	const currentViewMode = ref<ViewMode>(isBirthDateGetter() ? 'year' : 'month')
+	const currentViewMode = ref<ViewMode>(
+		isBirthDateGetter() && !selectedDateGetter() ? 'year' : 'month',
+	)
 
 	// Mettre à jour le mode d'affichage quand isBirthDate change
 	watch(isBirthDateGetter, (newValue) => {
-		currentViewMode.value = newValue ? 'year' : 'month'
+		if (newValue && !selectedDateGetter()) {
+			// Mode birthDate et aucune date sélectionnée : commencer par year
+			currentViewMode.value = 'year'
+		}
+		else if (newValue && selectedDateGetter()) {
+			// Mode birthDate avec date sélectionnée : commencer par month
+			currentViewMode.value = 'month'
+		}
+		else {
+			// Mode normal
+			currentViewMode.value = 'month'
+		}
+	})
+
+	// Mettre à jour le mode d'affichage quand la date sélectionnée change
+	watch(selectedDateGetter, (newValue) => {
+		if (isBirthDateGetter()) {
+			if (!newValue) {
+				// Aucune date sélectionnée en mode birthDate : commencer par year
+				currentViewMode.value = 'year'
+			}
+			else {
+				// Date sélectionnée en mode birthDate : commencer par month
+				currentViewMode.value = 'month'
+			}
+		}
 	})
 
 	// Fonction pour gérer le changement de mode d'affichage
 	const handleViewModeUpdate = (newMode: ViewMode) => {
+		// En mode birthDate, ne pas laisser VDatePicker écraser le mode 'months'
+		if (isBirthDateGetter() && currentViewMode.value === 'months' && newMode === 'month') {
+			return
+		}
+
 		currentViewMode.value = newMode
 	}
 
 	// Fonction pour gérer la sélection de l'année quand isBirthDate est true
 	const handleYearUpdate = () => {
 		if (isBirthDateGetter()) {
-			// Après la sélection de l'année, passer automatiquement à la sélection du mois
+			// Après la sélection de l'année, passer au mode months pour la sélection du mois
 			currentViewMode.value = 'months'
 		}
 	}
@@ -41,14 +77,28 @@ export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewMod
 	// Fonction pour gérer la sélection du mois quand isBirthDate est true
 	const handleMonthUpdate = () => {
 		if (isBirthDateGetter()) {
-			// Après la sélection du mois, passer automatiquement à la sélection du jour
-			currentViewMode.value = undefined
+			// Après la sélection du mois, passer automatiquement à la vue calendrier mensuel
+			currentViewMode.value = 'month'
 		}
 	}
 
 	// Fonction pour réinitialiser le mode d'affichage (utile lors de la fermeture du CalendarMode)
 	const resetViewMode = () => {
-		currentViewMode.value = isBirthDateGetter() ? 'year' : 'month'
+		if (isBirthDateGetter()) {
+			// En mode birthDate, la logique dépend de l'état de la date sélectionnée
+			if (!selectedDateGetter()) {
+				// Aucune date sélectionnée : commencer par year
+				currentViewMode.value = 'year'
+			}
+			else {
+				// Date sélectionnée : commencer par month (calendrier) pour permettre la modification
+				currentViewMode.value = 'month'
+			}
+		}
+		else {
+			// Mode normal
+			currentViewMode.value = 'month'
+		}
 	}
 
 	return {

package/src/components/DatePicker/composables/useMonthButtonCustomization.ts

@@ -28,43 +28,43 @@ export function useMonthButtonCustomization(
 		switch (lowerMonth) {
 			case 'january':
 			case 'janvier':
-				return 'Janv.'
+				return 'janv.'
 			case 'february':
 			case 'février':
-				return 'Févr.'
+				return 'févr.'
 			case 'march':
 			case 'mars':
-				return 'Mars'
+				return 'mars'
 			case 'april':
 			case 'avril':
-				return 'Avr.'
+				return 'avr.'
 			case 'may':
 			case 'mai':
-				return 'Mai'
+				return 'mai'
 			case 'june':
 			case 'juin':
-				return 'Juin'
+				return 'juin'
 			case 'july':
 			case 'juillet':
-				return 'Juil.'
+				return 'juil.'
 			case 'august':
 			case 'août':
-				return 'Août'
+				return 'août'
 			case 'september':
 			case 'septembre':
-				return 'Sept.'
+				return 'sept.'
 			case 'october':
 			case 'octobre':
-				return 'Oct.'
+				return 'oct.'
 			case 'november':
 			case 'novembre':
-				return 'Nov.'
+				return 'nov.'
 			case 'december':
 			case 'décembre':
-				return 'Déc.'
+				return 'déc.'
 			default:
 				// Si le mois n'est pas reconnu, retourner le mois avec la première lettre en majuscule
-				return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+				return monthName
 		}
 	}
 
@@ -99,7 +99,7 @@ export function useMonthButtonCustomization(
 								<span class="v-btn__overlay"></span>
 								<span class="v-btn__underlay"></span>
 								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-									<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
+									<span style="color: var(--v-theme-primary);">${monthText}</span> 
 									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 								</div>
 							</button>

package/src/components/DatePicker/tests/navigation.regression.spec.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { vuetify } from '../../../../tests/unit/setup'
+import CalendarModeDatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import ComplexDatePicker from '@/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue'
+
+/**
+ * Tests de régression légers pour la navigation année/mois dans les DatePickers
+ *
+ * Problème résolu : Handlers d'événements manquants et view mode non réinitialisé
+ */
+
+describe('DatePicker Navigation Regression Tests', () => {
+	const baseConfig = {
+		global: {
+			plugins: [vuetify],
+		},
+	}
+
+	describe('CalendarMode DatePicker', () => {
+		it('should have correct event handlers for year and month updates', async () => {
+			const wrapper = mount(CalendarModeDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true, // Mode birthDate pour tester la navigation année/mois
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+			component.isDatePickerVisible = true
+			await nextTick()
+
+			// Vérifier que le VDatePicker est visible
+			const datePicker = wrapper.findComponent({ name: 'VDatePicker' })
+			expect(datePicker.exists()).toBe(true)
+
+			// Vérifier que les handlers d'événements sont correctement mappés
+			const datePickerProps = datePicker.props()
+			expect(datePickerProps).toBeDefined()
+
+			// Vérifier que le view mode est correctement initialisé
+			expect(datePickerProps.viewMode).toBe('year') // Mode birthDate commence par year
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('ComplexDatePicker', () => {
+		it('should have correct navigation handlers', async () => {
+			const wrapper = mount(ComplexDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// Vérifier que les handlers existent
+			expect(typeof component.handleYearUpdate).toBe('function')
+			expect(typeof component.handleMonthUpdate).toBe('function')
+			expect(typeof component.resetViewMode).toBe('function')
+
+			wrapper.unmount()
+		})
+	})
+})

package/src/components/DatePicker/tests/navigation.simple.spec.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { vuetify } from '../../../../tests/unit/setup'
+import CalendarModeDatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import ComplexDatePicker from '@/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue'
+
+/**
+ * Tests simples pour vérifier que la correction de navigation année/mois fonctionne
+ */
+
+describe('DatePicker Navigation Fix - Simple Tests', () => {
+	const baseConfig = {
+		global: {
+			plugins: [vuetify],
+		},
+	}
+
+	describe('CalendarMode DatePicker', () => {
+		it('should have the correct navigation handlers', async () => {
+			const wrapper = mount(CalendarModeDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// Vérifier que les handlers existent
+			expect(typeof component.handleYearUpdate).toBe('function')
+			expect(typeof component.handleMonthUpdate).toBe('function')
+			expect(typeof component.resetViewMode).toBe('function')
+		})
+
+		it('should navigate correctly through year -> months -> month', async () => {
+			const wrapper = mount(CalendarModeDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// État initial : year
+			expect(component.currentViewMode).toBe('year')
+
+			// Navigation : year -> months
+			component.handleYearUpdate()
+			await nextTick()
+			expect(component.currentViewMode).toBe('months')
+
+			// Navigation : months -> month
+			component.handleMonthUpdate()
+			await nextTick()
+			expect(component.currentViewMode).toBe('month')
+		})
+
+		it('should reset view mode correctly', async () => {
+			const wrapper = mount(CalendarModeDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// Changer le mode
+			component.currentViewMode = 'months'
+			expect(component.currentViewMode).toBe('months')
+
+			// Réinitialiser
+			component.resetViewMode()
+			await nextTick()
+			expect(component.currentViewMode).toBe('year') // Retour à year pour birthDate
+		})
+	})
+
+	describe('ComplexDatePicker', () => {
+		it('should have the correct navigation handlers', async () => {
+			const wrapper = mount(ComplexDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// Vérifier que les handlers existent
+			expect(typeof component.handleYearUpdate).toBe('function')
+			expect(typeof component.handleMonthUpdate).toBe('function')
+			expect(typeof component.resetViewMode).toBe('function')
+		})
+
+		it('should navigate correctly through year -> months -> month', async () => {
+			const wrapper = mount(ComplexDatePicker, {
+				...baseConfig,
+				props: {
+					modelValue: null,
+					label: 'Date Test',
+					isBirthDate: true,
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- any
+			const component = wrapper.vm as any
+
+			// État initial : year
+			expect(component.currentViewMode).toBe('year')
+
+			// Navigation : year -> months
+			component.handleYearUpdate()
+			await nextTick()
+			expect(component.currentViewMode).toBe('months')
+
+			// Navigation : months -> month
+			component.handleMonthUpdate()
+			await nextTick()
+			expect(component.currentViewMode).toBe('month')
+		})
+	})
+})

package/src/components/NirField/NirField.stories.ts

@@ -295,8 +295,17 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
-		hint: {
-			description: 'Texte d\'aide affiché sous le champ.',
+		numberHint: {
+			description: 'Texte d\'aide spécifique affiché sous le champ numéro.',
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		keyHint: {
+			description: 'Texte d\'aide spécifique affiché sous le champ clé.',
 			control: 'text',
 			table: {
 				type: {

package/src/components/NirField/NirField.vue

@@ -36,7 +36,8 @@
 		variant?: 'filled' | 'outlined' | 'plain' | 'underlined' | 'solo'
 		clearable?: boolean
 		counter?: boolean | number | string
-		hint?: string
+		numberHint?: string
+		keyHint?: string
 		persistentHint?: boolean
 		persistentPlaceholder?: boolean
 		disableErrorHandling?: boolean
@@ -71,7 +72,8 @@
 		variant: 'outlined',
 		clearable: false,
 		counter: false,
-		hint: undefined,
+		numberHint: undefined,
+		keyHint: undefined,
 		persistentHint: false,
 		persistentPlaceholder: false,
 		disableErrorHandling: false,
@@ -121,8 +123,8 @@
 	}
 
 	const fieldWidth = computed(() => props.width || '100%')
-	const nirFieldWidth = computed(() => props.clearable ? '0 0 calc(70% - 8px)' : '0 0 calc(72% - 8px)')
-	const keyFieldWidth = computed(() => props.clearable ? '0 0 calc(29% - 8px)' : '0 0 calc(25% - 8px)')
+	const nirFieldWidth = computed(() => props.clearable ? '0 0 calc(68% - 8px)' : '0 0 calc(68% - 8px)')
+	const keyFieldWidth = computed(() => props.clearable ? '0 0 calc(32% - 8px)' : '0 0 calc(32% - 8px)')
 
 	const fieldId = useId()
 	const numberFieldErrorId = `nir-number-error-${fieldId}`
@@ -560,9 +562,13 @@
 				:readonly="props.readonly"
 				:clearable="props.clearable"
 				:counter="props.counter"
+				:hint="props.numberHint || locales.numberHint"
+				:persistent-hint="props.persistentHint"
 				:persistent-placeholder="props.persistentPlaceholder"
-				:hint="props.hint || locales.numberHint"
 				class="number-field"
+				:class="{
+					'sy-hide-detail': props.hideDetails,
+				}"
 				:display-asterisk="false"
 				:aria-describedby="numberFieldErrorId + ' ' + numberFieldWarningId + ' ' + numberFieldSuccessId"
 				:show-success-messages="false"
@@ -585,7 +591,6 @@
 				:prepend-tooltip="keyTooltip && keyTooltipPosition === 'prepend' ? keyTooltip : undefined"
 				:append-tooltip="keyTooltip && keyTooltipPosition === 'append' ? keyTooltip : undefined"
 				:error="keyValidation.errors.value.length > 0"
-				:hint="props.hint || locales.keyHint"
 				:disabled="disabled"
 				:bg-color="bgColor"
 				:density="props.density"
@@ -595,6 +600,7 @@
 				:readonly="props.readonly"
 				:clearable="props.clearable"
 				:counter="props.counter"
+				:hint="props.keyHint || locales.keyHint"
 				:persistent-hint="props.persistentHint"
 				:persistent-placeholder="props.persistentPlaceholder"
 				:aria-required="ariaRequired"
@@ -603,6 +609,9 @@
 				:has-success="hasKeySuccess"
 				:aria-invalid="ariaInvalidKey"
 				class="key-field"
+				:class="{
+					'sy-hide-detail': props.hideDetails,
+				}"
 				:display-asterisk="false"
 				:aria-describedby="keyFieldErrorId + ' ' + keyFieldWarningId + ' ' + keyFieldSuccessId"
 				:show-success-messages="false"
@@ -709,11 +718,11 @@
 
 /* Styles pour le mode standard (div) */
 .nir-field:not(.nir-field--fieldset) .number-field-container {
-	flex: 0 0 calc(75% - 8px);
+	flex: 0 0 calc(68% - 8px);
 }
 
 .nir-field:not(.nir-field--fieldset) .key-field-container {
-	flex: 0 0 calc(25% - 8px);
+	flex: 0 0 calc(32% - 8px);
 }
 
 /* Styles pour le mode fieldset */
@@ -752,6 +761,10 @@
 	}
 }
 
+.sy-hide-detail {
+	padding-bottom: 6px;
+}
+
 .sy-number-errors,
 .sy-key-errors {
 	color: tokens.$colors-text-error;
@@ -766,5 +779,4 @@
 .sy-key-success {
 	color: tokens.$colors-text-success;
 }
-
 </style>

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

@@ -12,7 +12,6 @@ describe('RangeField', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
 		const inputMin = wrapper.find('input')
 		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
 
@@ -31,7 +30,6 @@ describe('RangeField', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
 		const inputMin = wrapper.find('input')
 		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
 
@@ -83,7 +81,6 @@ describe('RangeField', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
 		const inputMin = wrapper.find('input')
 		const inputMax = wrapper.findAll('input').at(1) as DOMWrapper<HTMLInputElement>
 

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -51,6 +51,21 @@ Le composant permet de cacher ou réorganiser l'ordre des colonnes en utilisant
 
 Le composant permet de sélectionner des lignes individuellement ou en masse. Vous pouvez activer la sélection en utilisant la prop `show-select`.
 
+Par défaut, la clé utilisée pour identifier chaque ligne lors de la sélection est `id`. Si vos éléments ne possèdent pas de propriété `id`, la valeur sélectionnée correspondra à l'objet complet de la ligne.
+
+Vous pouvez personnaliser cette clé avec la prop `selection-key` pour indiquer quel champ utiliser (ex: `userId`).
+
+Exemple d'utilisation :
+<Source dark code={`
+<SyServerTable
+  v-model="selected"
+  :items="users"
+  :headers="headers"
+  show-select
+  selection-key="userId"
+/>
+`}/>
+
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.