@cnamts/synapse 1.0.12 → 1.0.13

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

@@ -3,7 +3,7 @@
 	defineOptions({
 		inheritAttrs: false,
 	})
-	import { mdiInformation, mdiMenuDown, mdiCloseCircle } from '@mdi/js'
+	import { mdiInformation, mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import { ref, watch, onMounted, computed, nextTick, type PropType } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
 	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
@@ -839,7 +839,7 @@
 					</button>
 					<SyIcon
 						class="arrow"
-						:icon="mdiMenuDown"
+						:icon="mdiChevronDown"
 						:decorative="true"
 					/>
 				</template>

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

@@ -364,6 +364,10 @@
 	cursor: pointer;
 }
 
+:deep(.v-label) {
+	margin-left: 8px;
+}
+
 :deep(.v-selection-control--disabled .v-selection-control__input) {
 	cursor: not-allowed;
 }

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

@@ -33,7 +33,7 @@ export const Basic: Story = {
 		setup() {
 			const name = ref('')
 			const email = ref('')
-			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
 
 			// Règles de validation selon le design system
 			const emailRules = [
@@ -56,9 +56,11 @@ export const Basic: Story = {
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
-          <v-btn type="submit" color="primary">Soumettre</v-btn>
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
         </div>
       </SyForm>
     `,
@@ -74,9 +76,11 @@ export const Basic: Story = {
 <template>
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="name" label="Nom" required />
-          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" />
-          <v-btn type="submit" color="primary">Soumettre</v-btn>
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
         </div>
       </SyForm>
 </template>
@@ -118,7 +122,7 @@ export const CustomValidation: Story = {
 			const username = ref('')
 			const password = ref('')
 			const confirmPassword = ref('')
-			const form = ref<{ validate: () => Promise<boolean> } | null>(null)
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
 
 			// Règles de validation
 			const passwordRules = computed(() => [
@@ -160,17 +164,18 @@ export const CustomValidation: Story = {
       <div>
         <SyForm ref="form" v-bind="args" @submit="submitForm">
           <div class="d-flex flex-column gap-4">
-            <SyTextField v-model="username" label="Nom d'utilisateur" required />
-            <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
+            <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
+            <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
             <SyTextField 
               v-model="confirmPassword" 
               label="Confirmer le mot de passe" 
               type="password" 
               required 
-              :custom-rules="confirmPasswordRules" 
+              :custom-rules="confirmPasswordRules"
+              class="mb-2"
             />
             <div class="d-flex gap-3">
-              <v-btn type="submit" color="primary">S'inscrire</v-btn>
+              <v-btn type="submit" color="primary" class="mr-2">S'inscrire</v-btn>
               <v-btn @click="validateManually" color="secondary">Valider sans soumettre</v-btn>
             </div>
           </div>
@@ -187,16 +192,17 @@ export const CustomValidation: Story = {
   <div>
     <SyForm ref="form" @submit="onSubmit">
       <div class="d-flex flex-column gap-4">
-        <SyTextField v-model="username" label="Nom d'utilisateur" required />
-        <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" />
+        <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
+        <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
         <SyTextField 
           v-model="confirmPassword" 
           label="Confirmer le mot de passe" 
           type="password" 
           :custom-rules="confirmPasswordRules" 
+          class="mb-2"
         />
         <div class="d-flex gap-3">
-          <v-btn type="submit" color="primary">S'inscrire</v-btn>
+          <v-btn type="submit" color="primary" class="mr-2">S'inscrire</v-btn>
           <v-btn @click="validateManually" color="secondary">Valider sans soumettre</v-btn>
         </div>
       </div>
@@ -296,10 +302,12 @@ export const MixedFields: Story = {
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="formData.name" label="Nom complet" required />
-          <SyTextField v-model="formData.email" label="Email" :custom-rules="emailCustomRules" />
-          <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-          <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          <SyTextField v-model="formData.name" label="Nom complet" required class="mb-2" />
+          <SyTextField v-model="formData.email" label="Email" :custom-rules="emailCustomRules" class="mb-2" />
+          <SySelect v-model="formData.country" :items="countries" label="Pays" required class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          </div>
         </div>
       </SyForm>
     `,
@@ -312,10 +320,12 @@ export const MixedFields: Story = {
 <template>
       <SyForm ref="form" v-bind="args" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
-          <SyTextField v-model="formData.name" label="Nom complet" required />
-          <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" />
-          <SySelect v-model="formData.country" :items="countries" label="Pays" required />
-          <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          <SyTextField v-model="formData.name" label="Nom complet" required class="mb-2" />
+          <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" class="mb-2" />
+          <SySelect v-model="formData.country" :items="countries" label="Pays" required class="mb-2" />
+          <div class="d-flex gap-3">
+            <v-btn type="submit" color="primary">Enregistrer</v-btn>
+          </div>
         </div>
       </SyForm>
 </template>
@@ -361,3 +371,103 @@ export const MixedFields: Story = {
 		],
 	},
 }
+
+export const Reset: Story = {
+	render: args => ({
+		components: { SyForm, SyTextField, VBtn },
+		setup() {
+			const name = ref('')
+			const email = ref('')
+			const form = ref<{ validate: () => Promise<boolean>, reset: () => void, clearValidation: () => void } | null>(null)
+
+			// Règles de validation selon le design system
+			const emailRules = [
+				{ type: 'email', options: { message: 'Format d\'email invalide' } },
+				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
+			]
+
+			const submitForm = async () => {
+				const isValid = await form.value?.validate()
+				if (isValid) {
+					alert('Formulaire valide !')
+				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
+			}
+
+			function clearAll() {
+				form.value?.reset()
+				form.value?.clearValidation()
+			}
+
+			return { name, email, emailRules, form, submitForm, clearAll, args }
+		},
+		template: `
+      <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+              <v-btn color="secondary" class="mr-2" @click="clearAll">Reset</v-btn>
+              <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
+        </div>
+      </SyForm>
+    `,
+	}),
+	args: {
+		validateOnSubmit: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+      <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">
+        <div class="d-flex flex-column gap-4">
+          <SyTextField v-model="name" label="Nom" required class="mb-2" />
+          <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
+          <div class="d-flex gap-3">
+              <v-btn color="secondary" class="mr-2" @click="clearAll">Reset</v-btn>
+              <v-btn type="submit" color="primary">Soumettre</v-btn>
+          </div>
+        </div>
+      </SyForm>
+</template>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+const name = ref('')
+const email = ref('')
+
+// Règles de validation selon le design system
+const emailRules = [
+	{ type: 'email', options: { message: "Format d'email invalide" } },
+	{ type: 'required', options: { message: "L'email est obligatoire" } },
+]
+
+const onSubmit = (event: { isValid: boolean }) => {
+  if (event.isValid) {
+    alert('Formulaire valide !')
+  }
+  else {
+    alert('Formulaire invalide, veuillez corriger les erreurs.')
+  }
+}
+
+function clearAll() {
+  form.value?.reset()
+  form.value?.clearValidation()
+}
+</script>
+`,
+			},
+		],
+	},
+}

package/src/components/Customs/SyForm/SyForm.vue

@@ -8,12 +8,13 @@
 
 	const emit = defineEmits<{
 		(e: 'submit', value: { isValid: boolean }): void
+		(e: 'reset'): void
 	}>()
 
 	// Reference vers le formulaire Vuetify
 	const form = ref<InstanceType<typeof import('vuetify/components').VForm> | null>(null)
 
-	const { validateAll } = useFormValidation()
+	const { validateAll, clearAll, resetAll } = useFormValidation()
 
 	// Methode de validation globale qui combine Vuetify et nos composants personnalises
 	const validate = async () => {
@@ -48,7 +49,21 @@
 	}
 
 	const reset = () => {
+		// Reset custom components values
+		resetAll()
+		// Reset field values and validations for Vuetify form
 		form.value?.reset()
+		form.value?.resetValidation()
+		// Notify consumers so they can clear external models (e.g., v-model refs)
+		emit('reset')
+	}
+
+	// Clear only validation states (keep current values)
+	const clearValidation = () => {
+		// Clear Vuetify internal validation state
+		form.value?.resetValidation()
+		// Clear custom components validation states registered in the form
+		clearAll()
 	}
 
 	// Gestion de la soumission du formulaire
@@ -65,6 +80,7 @@
 	defineExpose({
 		validate,
 		reset,
+		clearValidation,
 		form,
 	})
 </script>

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -284,7 +284,7 @@
 	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
 	const hasSuccess = computed(() => (validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess)
 
-	const errors = computed(() => validation.errors.value)
+	const errors = computed(() => [...validation.errors.value, ...(props.errorMessages || [])])
 	const warnings = computed(() => validation.warnings.value)
 	const successes = computed(() => validation.successes.value)
 
@@ -361,7 +361,7 @@
 	const syTextFieldRef = ref<ComponentPublicInstance | null>(null)
 
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, validation.clearValidation)
 
 	onMounted(() => {
 		nextTick(() => {

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -592,7 +592,7 @@
 	}
 
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, clearValidation)
 
 	const openDatePicker = () => {
 		if (props.disabled || props.readonly) return

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -246,6 +246,8 @@
 
 	const textInputValue = ref('')
 	const displayFormattedDate = ref('')
+	// Force re-render of DateTextInput/SyTextField when needed (e.g., after reset)
+	const fieldKey = ref(0)
 	const isManualInputActive = ref(false)
 	const isFormatting = ref(false)
 	const isUpdatingFromInternal = ref(false)
@@ -399,7 +401,10 @@
 			if (typeof newValue === 'string') {
 				if (props.dateFormatReturn) {
 					const date = parseDate(newValue, returnFormat.value)
-					if (date) textInputValue.value = formatDate(date, props.format)
+					if (date) {
+						const formattedForDisplay = formatDate(date, props.format)
+						textInputValue.value = formattedForDisplay
+					}
 				}
 				else {
 					textInputValue.value = newValue
@@ -415,10 +420,18 @@
 			updateModel(formattedDate.value)
 			withInternalUpdate(() => {
 				if (Array.isArray(newValue)) {
-					if (newValue.length > 0) textInputValue.value = formatDate(newValue[0], props.format)
+					if (newValue.length > 0) {
+						const newFormattedValue = formatDate(newValue[0], props.format)
+						if (textInputValue.value !== newFormattedValue) {
+							textInputValue.value = newFormattedValue
+						}
+					}
 				}
 				else {
-					textInputValue.value = formatDate(newValue, props.format)
+					const newFormattedValue = formatDate(newValue, props.format)
+					if (textInputValue.value !== newFormattedValue) {
+						textInputValue.value = newFormattedValue
+					}
 				}
 			})
 		}
@@ -436,6 +449,9 @@
 
 	// Handle manual typing sync → model/selection
 	watch(textInputValue, (newValue) => {
+		// En mode plage, on laisse DateTextInput + handleDateTextInputUpdate
+		// piloter la mise à jour du modèle et de selectedDates
+		if (props.displayRange) return
 		if (isUpdatingFromInternal.value) return
 		const date = parseDate(newValue, props.format)
 		if (date) {
@@ -711,6 +727,67 @@
 		successMessages,
 	})
 
+	/**
+	 * Gère les mises à jour de DateTextInput avec contrôle
+	 */
+	const handleDateTextInputUpdate = (value: DateValue) => {
+		// Ne pas traiter les mises à jour internes pour éviter les boucles
+		if (isUpdatingFromInternal.value) return
+
+		try {
+			isUpdatingFromInternal.value = true
+
+			// 1) Propager la valeur brute vers le v-model externe
+			updateModel(value)
+
+			// 2) Mettre à jour selectedDates / displayFormattedDate pour refléter la saisie manuelle
+			if (!value) {
+				selectedDates.value = null
+				displayFormattedDate.value = ''
+				return
+			}
+
+			if (Array.isArray(value) && props.displayRange) {
+				const [startStr, endStr] = value
+				const rf = returnFormat.value
+				const startDate = startStr ? parseDate(startStr, rf) || parseDate(startStr, props.format) : null
+				const endDate = endStr ? parseDate(endStr, rf) || parseDate(endStr, props.format) : null
+
+				if (startDate && endDate) {
+					selectedDates.value = [startDate, endDate]
+					displayFormattedDate.value
+						= `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
+				}
+				else if (startDate) {
+					// Première date saisie uniquement
+					selectedDates.value = [startDate]
+					displayFormattedDate.value = formatDate(startDate, props.format)
+				}
+				else {
+					selectedDates.value = null
+					displayFormattedDate.value = ''
+				}
+			}
+			else if (typeof value === 'string') {
+				const rf = returnFormat.value
+				const date = parseDate(value, rf) || parseDate(value, props.format)
+				if (date) {
+					selectedDates.value = date
+					displayFormattedDate.value = formatDate(date, props.format)
+				}
+				else {
+					selectedDates.value = null
+					displayFormattedDate.value = ''
+				}
+			}
+		}
+		finally {
+			setTimeout(() => {
+				isUpdatingFromInternal.value = false
+			}, 0)
+		}
+	}
+
 	/**
 	 * Sync from external v-model
 	 */
@@ -728,7 +805,8 @@
 			const firstDate = Array.isArray(selectedDates.value)
 				? selectedDates.value[0]
 				: selectedDates.value
-			textInputValue.value = formatDate(firstDate, props.format)
+			const formattedForInput = formatDate(firstDate, props.format)
+			textInputValue.value = formattedForInput
 			displayFormattedDate.value = displayFormattedDateComputed.value || ''
 		}
 		validateDates()
@@ -896,8 +974,30 @@
 		return textInputValid && errors.value.length === 0
 	}
 
+	// Reset hook utilisé par SyForm.reset() via useValidatable
+	const reset = () => {
+		// 1) Nettoyer l'état de validation et d'interaction
+		clearValidation()
+		isDatePickerVisible.value = false
+		hasInteracted.value = false
+		isManualInputActive.value = false
+
+		// 2) Réinitialiser la valeur et la sélection SANS déclencher
+		// de validation "required" interactive
+		withInternalUpdate(() => {
+			selectedDates.value = null
+			textInputValue.value = ''
+			displayFormattedDate.value = ''
+			// Synchroniser le modèle externe
+			emit('update:modelValue', null)
+		})
+
+		// 3) 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({
 		validateOnSubmit,
@@ -923,6 +1023,7 @@
 		// Expose for consumers
 		handleDateSelected,
 		resetViewMode,
+		reset,
 	})
 </script>
 
@@ -937,6 +1038,7 @@
 		<template v-if="props.noCalendar">
 			<DateTextInput
 				ref="dateTextInputRef"
+				:key="fieldKey"
 				v-model="textInputValue"
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
 				:date-format-return="props.dateFormatReturn"
@@ -984,7 +1086,8 @@
 					<DateTextInput
 						v-bind="menuProps"
 						ref="dateCalendarTextInputRef"
-						v-model="textInputValue"
+						:key="fieldKey"
+						:model-value="textInputValue"
 						:label="labelWithAsterisk || ''"
 						:placeholder="props.placeholder"
 						:format="props.format"
@@ -1014,6 +1117,7 @@
 						:density="props.density"
 						:hint="props.hint"
 						:persistent-hint="props.persistentHint"
+						@update:model-value="handleDateTextInputUpdate"
 						@click="openDatePickerOnClick"
 						@focus="openDatePickerOnFocus"
 						@blur="handleInputBlur"

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -200,6 +200,8 @@
 	const inputValue = ref('')
 	const inputRef = ref<InstanceType<typeof SyTextField> | null>(null)
 	const isFormatting = ref(false)
+	// Force re-render of SyTextField when needed (e.g., after reset)
+	const fieldKey = ref(0)
 
 	const updateDisplayValue = (dateDisplayText: string) => (inputValue.value = dateDisplayText)
 	const updateAriaLabel = (ariaLabelText: string) => (ariaLabel.value = ariaLabelText)
@@ -940,15 +942,37 @@
 		isValidating.value = true
 		hasInteracted.value = true
 		const ok = runRules(inputValue.value)
-		if (!ok || hasError.value) return false
-		return !hasError.value
+		isValidating.value = false
+		return ok
+	}
+
+	// Reset hook utilisé par SyForm.reset() via useValidatable
+	const reset = () => {
+		// 1) Nettoyer l'état de validation et d'interaction
+		clearValidation()
+		isFocused.value = false
+		hasInteracted.value = false
+
+		// 2) Réinitialiser la valeur sans déclencher de validation interactive
+		isFormatting.value = true
+		inputValue.value = ''
+		selectedDates.value = null
+		resetState()
+		isFormatting.value = false
+
+		// 3) Synchroniser le modèle externe
+		emitModel(null)
+
+		// 4) 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({
 		validateOnSubmit,
+		reset,
 		focus() {
 			const el: HTMLInputElement | null | undefined = inputRef.value?.$el?.querySelector?.('input:not([type="hidden"])')
 			el?.focus({ preventScroll: true })
@@ -1002,6 +1026,7 @@
 
 <template>
 	<SyTextField
+		:key="fieldKey"
 		ref="inputRef"
 		v-model="inputValue"
 		:append-icon="props.displayIcon && props.displayAppendIcon ? 'calendar' : undefined"

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

@@ -349,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>
 
@@ -1315,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>`,
+			},
+		],
+	},
+}