@cnamts/synapse 1.0.11 → 1.0.13

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: {
@@ -340,6 +349,16 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
+		customLocale: {
+			description: 'Objet permettant de surcharger les messages du composant. Clés supportées : `errorRequiredNumber`, `errorInvalidNumber`, `errorRequiredKey`, `errorInvalidKey`, `successNumberValid`, `successKeyValid`.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'Partial<typeof locales>',
+				},
+				defaultValue: { summary: '{}' },
+			},
+		},
 	},
 } satisfies Meta<typeof NirField>
 
@@ -1306,3 +1325,67 @@ mais gérer leur affichage différemment, ou utiliser la validation uniquement a
     `,
 	}),
 }
+
+export const WithCustomLocale: Story = {
+	args: {
+		...Default.args,
+		required: true,
+		showSuccessMessages: true,
+		customLocale: {
+			errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
+			errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
+			errorRequiredKey: 'La clé (2 chiffres) est requise.',
+			errorInvalidKey: 'La clé ne correspond pas au NIR saisi.',
+			successNumberValid: 'Numéro reconnu ✅',
+			successKeyValid: 'Clé correspondante ✅',
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Surcharger les messages avec customLocale
+
+Utilisez la prop \`customLocale\` pour remplacer les messages par défaut sans toucher au composant.
+
+Clés supportées :
+- \`errorRequiredNumber\`
+- \`erreurInvalidNumber\`
+- \`errorRequiredKey\`
+- \`errorInvalidKey\`
+- \`successNumberValid\`
+- \`successKeyValid\`
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <NirField
+    v-model="value"
+    required
+    show-success-messages
+    :custom-locale="{
+      errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
+      errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
+      errorRequiredKey: 'La clé (2 chiffres) est requise.',
+      errorInvalidKey: 'La clé ne correspond pas au NIR saisi.',
+      successNumberValid: 'Numéro reconnu ✅',
+      successKeyValid: 'Clé correspondante ✅'
+    }"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { NirField } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const value = ref('')
+</script>`,
+			},
+		],
+	},
+}

package/src/components/NirField/NirField.vue

@@ -36,12 +36,14 @@
 		variant?: 'filled' | 'outlined' | 'plain' | 'underlined' | 'solo'
 		clearable?: boolean
 		counter?: boolean | number | string
-		hint?: string
+		numberHint?: string
+		keyHint?: string
 		persistentHint?: boolean
 		persistentPlaceholder?: boolean
 		disableErrorHandling?: boolean
 		nirType?: 'simple' | 'complexe'
 		withoutFieldset?: boolean
+		customLocale?: Partial<Record<keyof typeof locales, string>>
 	}>(), {
 		modelValue: undefined,
 		label: 'Identifiant d\'assuré',
@@ -71,12 +73,21 @@
 		variant: 'outlined',
 		clearable: false,
 		counter: false,
-		hint: undefined,
+		numberHint: undefined,
+		keyHint: undefined,
 		persistentHint: false,
 		persistentPlaceholder: false,
 		disableErrorHandling: false,
 		nirType: 'simple',
 		withoutFieldset: false,
+		customLocale: () => ({
+			errorRequiredNumber: locales.errorRequiredNumber,
+			errorInvalidNumber: locales.errorInvalidNumber,
+			errorRequiredKey: locales.errorRequiredKey,
+			errorInvalidKey: locales.errorInvalidKey,
+			successNumberValid: locales.successNumberValid,
+			successKeyValid: locales.successKeyValid,
+		} as Partial<Record<keyof typeof locales, string>>),
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -121,8 +132,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}`
@@ -197,7 +208,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredNumber,
+					message: props.customLocale.errorRequiredNumber,
 					fieldIdentifier: props.numberLabel,
 				},
 			})
@@ -219,13 +230,13 @@
 					if (!value) return true
 					// Ne valider que si tous les caractères sont saisis
 					if (value.length < 13) {
-						return locales.erreurInvalidNumber
+						return props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 					}
 					const result = checkNIR(value, props.nirType)
-					return result === true ? true : locales.erreurInvalidNumber
+					return result ? true : props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 				},
-				message: locales.erreurInvalidNumber,
-				successMessage: locales.successNumberValid,
+				message: props.customLocale.errorInvalidNumber,
+				successMessage: props.customLocale.successNumberValid,
 				fieldIdentifier: props.numberLabel,
 			},
 		})
@@ -248,7 +259,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredKey,
+					message: props.customLocale.errorRequiredKey,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -272,8 +283,8 @@
 				type: 'custom',
 				options: {
 					validate: validateKey,
-					message: locales.errorInvalidKey,
-					successMessage: locales.successKeyValid,
+					message: props.customLocale.errorInvalidKey,
+					successMessage: props.customLocale.successKeyValid,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -504,7 +515,23 @@
 	})
 
 	// Rendre le composant auto-validable dans un SyForm
-	useValidatable(validateOnSubmit)
+	useValidatable(
+		validateOnSubmit,
+		() => {
+			try {
+				numberValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+			try {
+				keyValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+		},
+	)
 
 	defineExpose({
 		validateOnSubmit,
@@ -560,9 +587,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 +616,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 +625,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 +634,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 +743,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 +786,10 @@
 	}
 }
 
+.sy-hide-detail {
+	padding-bottom: 6px;
+}
+
 .sy-number-errors,
 .sy-key-errors {
 	color: tokens.$colors-text-error;
@@ -766,5 +804,4 @@
 .sy-key-success {
 	color: tokens.$colors-text-success;
 }
-
 </style>

package/src/components/NirField/locales.ts

@@ -1,9 +1,7 @@
 export const locales = {
 	errorRequiredNumber: 'Le numéro de sécurité sociale est requis, ce sont les 13 premiers chiffres sur votre carte vitale.',
-	errorLengthNumber: (length: number) => `Le numéro de sécurité sociale doit contenir ${length} caractères.`,
-	erreurInvalidNumber: 'Le numéro de sécurité sociale est invalide.',
+	errorInvalidNumber: 'Le numéro de sécurité sociale est invalide.',
 	errorRequiredKey: 'La clé de contrôle est requise, ce sont les 2 derniers chiffres sur votre carte vitale.',
-	errorLengthKey: (length: number) => `La clé du numéro de sécurité sociale doit contenir ${length} caractères.`,
 	errorInvalidKey: 'La clé de contrôle est invalide.',
 	successNumberValid: 'Le numéro de sécurité sociale est valide.',
 	successKeyValid: 'La clé de contrôle est valide.',

package/src/components/PasswordField/PasswordField.vue

@@ -68,10 +68,13 @@
 	const showEyeIcon = ref(false)
 	const passwordFieldId = ref(`password-field-${Math.random().toString(36).substring(2, 10)}`)
 	const alertMessage = ref('')
+	// Force re-render of SyTextField when needed (e.g., after reset)
+	const fieldKey = ref(0)
 
 	const btnLabel = locales.showPassword
 
 	const password = ref<string | null>(props.modelValue)
+	const isProgrammaticChange = ref(false)
 	watch(
 		() => props.modelValue,
 		(newVal) => {
@@ -160,11 +163,14 @@
 		}
 	}, { immediate: true })
 
-	watch(() => password.value, () => {
-		if (props.readonly) return
-		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
-		emit('update:modelValue', password.value)
-	})
+	// Ne pas revalider automatiquement à chaque changement de valeur.
+	// La validation est gérée explicitement au blur et à la soumission.
+	watch(
+		() => password.value,
+		(newVal) => {
+			emit('update:modelValue', newVal)
+		},
+	)
 
 	function togglePasswordVisibility() {
 		showEyeIcon.value = !showEyeIcon.value
@@ -209,8 +215,32 @@
 		return isValid
 	}
 
+	// Nettoie uniquement l'état de validation (messages) sans modifier la valeur
+	const clearValidation = () => {
+		errors.value = []
+		warnings.value = []
+		successes.value = []
+	}
+
+	// Reset hook utilisé par SyForm.reset() via useValidatable
+	const reset = () => {
+		// Réinitialiser d'abord l'état de validation et d'interaction
+		clearValidation()
+		alertMessage.value = ''
+		showEyeIcon.value = false
+
+		// Réinitialiser le contenu du champ
+		isProgrammaticChange.value = true
+		password.value = null
+		emit('update:modelValue', null)
+		isProgrammaticChange.value = false
+
+		// Forcer la recréation du champ pour réinitialiser l'état interne de Vuetify
+		fieldKey.value++
+	}
+
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, clearValidation, reset)
 
 	defineExpose({
 		showEyeIcon,
@@ -221,6 +251,8 @@
 		hasWarning,
 		hasSuccess,
 		validateOnSubmit,
+		clearValidation,
+		reset,
 	})
 </script>
 
@@ -228,6 +260,7 @@
 	<SyTextField
 		v-bind="Object.fromEntries(Object.entries(options).filter(([key]) => key !== 'btn' && key !== 'icon' && key !== 'variant'))"
 		:id="passwordFieldId"
+		:key="fieldKey"
 		v-model="password"
 		:variant-style="props.variantStyle"
 		:color="props.color"
@@ -244,7 +277,6 @@
 		:aria-invalid="hasError"
 		:aria-describedby="`${passwordFieldId}-status${props.customRules && props.customRules.length > 0 ? ' ' + passwordFieldId + '-guidelines' : ''}`"
 		:display-asterisk="props.displayAsterisk"
-		:rules="[...defaultRules, ...props.customRules]"
 		:autocomplete="props.autocompleteType"
 		class="vd-password"
 		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"

package/src/components/PhoneField/PhoneField.vue

@@ -55,6 +55,8 @@
 	const phoneNumber = ref(props.modelValue || '')
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const dialCode = ref<string | Record<string, any>>(props.dialCodeModel || '')
+	// Force re-render of SySelect when needed (e.g., after reset)
+	const dialSelectKey = ref(0)
 	const counter = ref(10)
 	const phoneMask = ref('## ## ## ## ##')
 	const onBlur = ref(false)
@@ -241,6 +243,13 @@
 
 	const shouldDisableErrorHandling = computed(() => props.disableErrorHandling || props.readonly)
 
+	// When disabling error handling, immediately clear any existing validation state
+	watch(shouldDisableErrorHandling, (disabled) => {
+		if (disabled) {
+			validation.clearValidation()
+		}
+	})
+
 	const validation = useValidation({
 		customRules: validationRules.value,
 		showSuccessMessages: true,
@@ -248,9 +257,9 @@
 		disableErrorHandling: shouldDisableErrorHandling.value,
 	})
 
-	const hasError = computed(() => validation.hasError.value)
-	const hasWarning = computed(() => validation.hasWarning.value)
-	const hasSuccess = computed(() => validation.hasSuccess.value)
+	const hasError = computed(() => !shouldDisableErrorHandling.value && validation.hasError.value)
+	const hasWarning = computed(() => !shouldDisableErrorHandling.value && validation.hasWarning.value)
+	const hasSuccess = computed(() => !shouldDisableErrorHandling.value && validation.hasSuccess.value)
 
 	const iconColor = computed(() => {
 		if (shouldDisableErrorHandling.value) return '#222324'
@@ -260,9 +269,9 @@
 		return '#222324'
 	})
 
-	const errors = computed(() => validation.errors.value)
-	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const errors = computed(() => shouldDisableErrorHandling.value ? [] : validation.errors.value)
+	const warnings = computed(() => shouldDisableErrorHandling.value ? [] : validation.warnings.value)
+	const successes = computed(() => shouldDisableErrorHandling.value ? [] : validation.successes.value)
 
 	const showHelpTextBelow = computed(() => {
 		// Display help text below by default if it exists
@@ -312,8 +321,28 @@
 		return !validation.hasError.value
 	}
 
+	// Reset hook used by SyForm.reset() via useValidatable
+	const reset = () => {
+		// Reset interaction state and validation FIRST to avoid triggering watchers with errors
+		onBlur.value = false
+		validation.clearValidation()
+
+		// Clear content
+		phoneNumber.value = ''
+		emit('update:modelValue', '')
+
+		// Clear dial code and restore defaults
+		dialCode.value = ''
+		emit('update:selectedDialCode', '')
+		counter.value = 10
+		phoneMask.value = '## ## ## ## ##'
+
+		// Force SySelect to be recreated to ensure internal classes are reset
+		dialSelectKey.value++
+	}
+
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, validation.clearValidation, reset)
 
 	defineExpose({
 		computedValue,
@@ -342,14 +371,15 @@
 		<div class="phone-field-container">
 			<SySelect
 				v-if="withCountryCode"
+				:key="dialSelectKey"
 				v-model="dialCode"
 				:items="dialCodeOptions"
 				:label="locales.indicatifLabel"
 				:outlined="outlinedIndicatif"
 				:required="countryCodeRequired"
 				:aria-required="countryCodeRequired"
-				:error="hasError"
-				:error-messages="errors[1]"
+				:error="!!errors[1]"
+				:error-messages="errors[1] ? [errors[1]] : []"
 				:display-asterisk="displayAsterisk"
 				:disable-error-handling="shouldDisableErrorHandling"
 				:return-object="true"
@@ -426,7 +456,10 @@
 		</div>
 		<div
 			v-if="showHelpTextBelow"
-			class="help-text-below px-4 mt-1"
+			class="help-text-below px-4"
+			:style="{
+				marginTop: hasError || hasWarning || hasSuccess ? '0.25rem' : '-1rem',
+			}"
 			:class="{ 'text-disabled': disabled }"
 		>
 			{{ helpText }}

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.