@cnamts/synapse 1.0.7 → 1.0.9

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

@@ -12,8 +12,10 @@ vi.mock('@/services/NotificationService')
 describe('NotificationBar.vue', () => {
 	interface NotificationServiceMock {
 		notificationQueue: Ref<Notification[]>
+		clearAllEvent: Ref<boolean>
 		addNotification: (notification: Notification) => void
 		removeNotification: (id: string) => void
+		clearQueue: () => void
 	}
 
 	let notificationServiceMock: NotificationServiceMock
@@ -21,8 +23,10 @@ describe('NotificationBar.vue', () => {
 		vi.useFakeTimers()
 		notificationServiceMock = {
 			notificationQueue: ref([]),
+			clearAllEvent: ref(false),
 			addNotification: vi.fn(),
 			removeNotification: vi.fn(),
+			clearQueue: vi.fn(),
 		};
 		// @ts-expect-error on vi.Mock
 		(useNotificationService as vi.Mock).mockReturnValue(notificationServiceMock)
@@ -33,6 +37,67 @@ describe('NotificationBar.vue', () => {
 		vi.useRealTimers()
 	})
 
+	it('should close notification when clearAllEvent is true', async () => {
+		// Setup a visible notification
+		const notification: Notification = {
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		const wrapper = mount(NotificationBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		wrapper.vm.openNotification(notification)
+		await nextTick()
+		expect(wrapper.vm.isNotificationVisible).toBe(true)
+
+		// Simulate triggering clearAllEvent
+		notificationServiceMock.clearAllEvent.value = true
+		await nextTick()
+
+		// Check that notification was closed
+		expect(wrapper.vm.isNotificationVisible).toBe(false)
+
+		// Reset for test isolation
+		notificationServiceMock.clearAllEvent.value = false
+	})
+
+	it('should handle clearQueue functionality', () => {
+		// Setup clearQueue mock implementation
+		notificationServiceMock.clearQueue = vi.fn().mockImplementation(() => {
+			notificationServiceMock.clearAllEvent.value = true
+			setTimeout(() => {
+				notificationServiceMock.clearAllEvent.value = false
+			}, 100)
+			notificationServiceMock.notificationQueue.value = []
+		})
+
+		// Setup component
+		mount(NotificationBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Call the clearQueue method
+		notificationServiceMock.clearQueue()
+
+		// Check that clearAllEvent was set to true
+		expect(notificationServiceMock.clearAllEvent.value).toBe(true)
+
+		// Wait for the timeout to complete
+		vi.runAllTimers()
+
+		// Verify it's reset back to false
+		expect(notificationServiceMock.clearAllEvent.value).toBe(false)
+		// Verify queue was cleared
+		expect(notificationServiceMock.notificationQueue.value).toEqual([])
+	})
+
 	it('should render notification bar', async () => {
 		const notification: Notification = {
 			id: '1',

package/src/components/PageContainer/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/PageContainer/PageContainer.mdx

@@ -4,9 +4,10 @@ import * as PageContainerStories from './PageContainer.stories';
 
 <Meta of={PageContainerStories} />
 
-# PageContainer
-
-Le composant `PageContainer` est un conteneur transparent utilisé pour afficher une page.
+<div className="header">
+  <h1>PageContainer</h1>
+  <p>Le composant `PageContainer` est un conteneur transparent utilisé pour afficher une page.</p>
+</div>
 
 <Canvas of={PageContainerStories.Default}  />
 
@@ -20,6 +21,7 @@ Le composant `PageContainer` est un conteneur transparent utilisé pour afficher
 <script setup lang="ts">
 import { PageContainer } from '@cnamts/synapse'
 </script>
+import '../../stories/styles/shared.css';
 
 <template>
     <PageContainer color="primary">

package/src/components/PaginatedTable/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -3,9 +3,10 @@ import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 
 <Meta of={PaginatedTableStories}/>
 
-# PaginatedTable
-
-Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.
+<div className="header">
+  <h1>PaginatedTable</h1>
+  <p>Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.</p>
+</div>
 
 > **⚠️ Attention** : Ce composant est déprécié au profit des composants [SyTable](?path=/docs/composants-tableaux-sytable--docs) et [SyServerTable](?path=/docs/composants-tableaux-syservertable--docs).
 
@@ -27,6 +28,7 @@ Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vue
 		itemsPerPage: 4,
 		sortBy: [{ key: 'calories', order: 'desc' }],
 	})
+import '../../stories/styles/shared.css';
 
 	const headers = reactive([
 		{ text: 'Dessert (100g serving)', value: 'name' },

package/src/components/PasswordField/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/PasswordField/PasswordField.mdx

@@ -3,9 +3,10 @@ import * as PasswordFieldStories from './PasswordField.stories'
 
 <Meta of={PasswordFieldStories} />
 
-# PasswordField
-
-Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.
+<div className="header">
+  <h1>PasswordField</h1>
+  <p>Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.</p>
+</div>
 
 ## Utilisation basique
 
@@ -99,6 +100,7 @@ import { ref } from 'vue'
 import { PasswordField } from '@cnamts/synapse'
 
 const password = ref('')
+import '../../stories/styles/shared.css';
 const passwordFieldRef = ref()
 
 const customRules = [{

package/src/components/PeriodField/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/PeriodField/PeriodField.mdx

@@ -3,9 +3,10 @@ import * as PeriodFieldStories from "./PeriodField.stories.ts";
 
 <Meta of={PeriodFieldStories}/>
 
-# PeriodField
-
-Le composant `PeriodField` est utilisé pour permettre à l’utilisateur de saisir une période.
+<div className="header">
+  <h1>PeriodField</h1>
+  <p>Le composant `PeriodField` est utilisé pour permettre à l’utilisateur de saisir une période.</p>
+</div>
 
 <Canvas story={{height: '550px'}} of={PeriodFieldStories.Default}/>
 
@@ -22,6 +23,7 @@ Le composant `PeriodField` est utilisé pour permettre à l’utilisateur de sai
 	import { PeriodField } from '@cnamts/synapse'
 
 	const selectedPeriod = ref({ from: null, to: null })
+import '../../stories/styles/shared.css';
 </script>
 
 <template>

package/src/components/PhoneField/Accessibilite.mdx

@@ -1,10 +1,14 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Accessibilite.stories.ts';
+import '../../stories/styles/shared.css';
 
 <Meta of={AccessStories} />
 
-Accessibilité
-=============
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Informations sur l'accessibilité du composant</p>
+</div>
+
 <Story of={AccessStories.Legende} />
 <br />
 

package/src/components/PhoneField/PhoneField.mdx

@@ -4,9 +4,10 @@ import PhoneField from './PhoneField.vue'
 
 <Meta title="Composants/Formulaires/PhoneField" component={PhoneField} />
 
-# PhoneField
-
-Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.
+<div className="header">
+  <h1>PhoneField</h1>
+  <p>Le composant`PhoneField`  est utilisé pour saisir des numéros de téléphone avec différentes options de formatage.</p>
+</div>
 
 <Canvas of={PhoneFieldStories.Default} />
 
@@ -22,6 +23,7 @@ import { PhoneField } from '@cnamts/synapse'
 import { ref } from 'vue'
 
 const value = ref('')
+import '../../stories/styles/shared.css';
 
 const handleChange = (newValue) => {
     console.log('Value changed:', newValue)

package/src/components/PhoneField/PhoneField.stories.ts

@@ -118,19 +118,7 @@ export const Default: Story = {
 			template: `
 				<div class="pa-4">
 				<PhoneField
-					v-model="args.modelValue"
-					:required="args.required"
-					:outlined="args.outlined"
-					:outlinedIndicatif="args.outlinedIndicatif"
-					:withCountryCode="args.withCountryCode"
-					:countryCodeRequired="args.countryCodeRequired"
-					:displayFormat="args.displayFormat"
-					:customIndicatifs="args.customIndicatifs"
-					:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-					:isValidatedOnBlur="args.isValidatedOnBlur"
-					:bg-color="args.bgColor"
-					:readonly="args.readonly"
-					:disabled="args.disabled"
+					v-bind="args"
 				/>
 				</div>
 				<br><br><br><br><br>
@@ -202,19 +190,7 @@ export const Required: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-     :bg-color="args.bgColor"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
+     v-bind="args"
     />
 				</div>
    `,
@@ -273,20 +249,7 @@ const phoneNumber = ref('')
 			template: `
 				<div class="pa-4">
 					<PhoneField
-						v-model="args.modelValue"
-						:required="args.required"
-						:outlined="args.outlined"
-						:outlinedIndicatif="args.outlinedIndicatif"
-						:withCountryCode="args.withCountryCode"
-						:countryCodeRequired="args.countryCodeRequired"
-						:displayFormat="args.displayFormat"
-						:customIndicatifs="args.customIndicatifs"
-						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:display-asterisk="args.displayAsterisk"
-						:readonly="args.readonly"
-						:disabled="args.disabled"
-						:bg-color="args.bgColor"
+						v-bind="args"
 					/>
 				</div>
 			`,
@@ -639,19 +602,7 @@ export const CustomIndicatifs: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     	v-bind="args"
     />
 				</div>
    `,
@@ -667,7 +618,7 @@ export const NotValidatedOnBlur: Story = {
 				code: `
 				<template>
 					<PhoneField
-						v-model="modelValue"
+						v-bind="args"
 						:required="required"
 						:withCountryCode="withCountryCode"
 						:countryCodeRequired="countryCodeRequired"
@@ -722,19 +673,7 @@ export const NotValidatedOnBlur: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 				</div>
    `,
@@ -805,19 +744,7 @@ export const DisplayFormatCode: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 				</div>
    `,
@@ -888,19 +815,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 				</div>
    `,
@@ -971,19 +886,7 @@ export const DisplayFormatCodeCountry: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 				</div>
    `,
@@ -1054,19 +957,7 @@ export const DisplayFormatCountry: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 				</div>
    `,
@@ -1137,19 +1028,7 @@ export const DisplayFormatAbbreviation: Story = {
 			template: `
 				<div class="pa-4">
     <PhoneField
-     v-model="args.modelValue"
-     :required="args.required"
-     :outlined="args.outlined"
-     :outlinedIndicatif="args.outlinedIndicatif"
-     :withCountryCode="args.withCountryCode"
-     :countryCodeRequired="args.countryCodeRequired"
-     :displayFormat="args.displayFormat"
-     :customIndicatifs="args.customIndicatifs"
-     :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-     :isValidatedOnBlur="args.isValidatedOnBlur"
-	 :readonly="args.readonly"
-	 :disabled="args.disabled"
-     :bg-color="args.bgColor"
+     v-bind="args"
     />
 							</div>
    `,
@@ -1239,20 +1118,7 @@ export const DefaultDialCode: Story = {
 					<h3>PhoneField avec indicatif pré-rempli</h3>
 					<p>Cette story montre comment pré-remplir l'indicatif téléphonique avec des indicatifs personnalisés.</p>
 					<PhoneField
-						v-model="args.modelValue"
-						:dial-code-model="args.dialCodeModel"
-						:required="args.required"
-						:outlined="args.outlined"
-						:outlinedIndicatif="args.outlinedIndicatif"
-						:withCountryCode="args.withCountryCode"
-						:countryCodeRequired="args.countryCodeRequired"
-						:displayFormat="args.displayFormat"
-						:customIndicatifs="args.customIndicatifs"
-						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:readonly="args.readonly"
-						:disabled="args.disabled"
-						:bg-color="args.bgColor"
+						v-bind="args"
 					/>
 				</div>
 			`,
@@ -1327,20 +1193,7 @@ export const DefaultDialCodeStandard: Story = {
 						<strong>Indicatif sélectionné :</strong> {{ args.dialCodeModel ? args.dialCodeModel.code + ' ' + args.dialCodeModel.country : 'Aucun' }}
 					</div>
 					<PhoneField
-						v-model="args.modelValue"
-						:dial-code-model="args.dialCodeModel"
-						:required="args.required"
-						:outlined="args.outlined"
-						:outlinedIndicatif="args.outlinedIndicatif"
-						:withCountryCode="args.withCountryCode"
-						:countryCodeRequired="args.countryCodeRequired"
-						:displayFormat="args.displayFormat"
-						:customIndicatifs="args.customIndicatifs"
-						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:readonly="args.readonly"
-						:disabled="args.disabled"
-						:bg-color="args.bgColor"
+						v-bind="args"
 					/>
 				</div>
 			`,
@@ -1419,20 +1272,7 @@ export const DisplayModels: Story = {
 						{{ args.dialCodeModel }} - {{ args.modelValue }}
 					</div>
 					<PhoneField
-						v-model="args.modelValue"
-						v-model:selected-dial-code="args.dialCodeModel"
-						:required="args.required"
-						:outlined="args.outlined"
-						:outlinedIndicatif="args.outlinedIndicatif"
-						:withCountryCode="args.withCountryCode"
-						:countryCodeRequired="args.countryCodeRequired"
-						:displayFormat="args.displayFormat"
-						:customIndicatifs="args.customIndicatifs"
-						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:readonly="args.readonly"
-						:disabled="args.disabled"
-						:bg-color="args.bgColor"
+						v-bind="args"
 					/>
 				</div>
 			`,
@@ -1508,39 +1348,13 @@ export const DisabledErrorHandling: Story = {
 					<h3>Gestion des erreurs désactivée</h3>
 					<p>Ce champ est requis mais n'affichera pas d'erreur même s'il est vide.</p>
 					<PhoneField
-						v-model="args.modelValue"
-						:required="args.required"
-						:outlined="args.outlined"
-						:outlinedIndicatif="args.outlinedIndicatif"
-						:withCountryCode="args.withCountryCode"
-						:countryCodeRequired="args.countryCodeRequired"
-						:displayFormat="args.displayFormat"
-						:customIndicatifs="args.customIndicatifs"
-						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-						:isValidatedOnBlur="args.isValidatedOnBlur"
-						:disableErrorHandling="args.disableErrorHandling"
-						:readonly="args.readonly"
-						:disabled="args.disabled"
-						:bg-color="args.bgColor"
+						v-bind="args"
 					/>
 					<div class="mt-6">
 						<h3>Comparaison avec gestion des erreurs activée</h3>
 						<p>Ce champ est requis et affichera une erreur s'il est vide.</p>
 						<PhoneField
-							v-model="args.modelValue"
-							:required="args.required"
-							:outlined="args.outlined"
-							:outlinedIndicatif="args.outlinedIndicatif"
-							:withCountryCode="args.withCountryCode"
-							:countryCodeRequired="args.countryCodeRequired"
-							:displayFormat="args.displayFormat"
-							:customIndicatifs="args.customIndicatifs"
-							:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
-							:isValidatedOnBlur="args.isValidatedOnBlur"
-							:disableErrorHandling="false"
-							:readonly="args.readonly"
-							:disabled="args.disabled"
-							:bg-color="args.bgColor"
+							v-bind="args"
 						/>
 					</div>
 				</div>
@@ -1654,22 +1468,7 @@ export const FormValidation: Story = {
 				<div class="pa-4">
 					<form @submit.prevent="submitForm" class="d-flex flex-column">
 						<PhoneField
-							ref="phoneFieldRef"
-							v-model="phoneNumber"
-							:required="args.required"
-							:outlined="args.outlined"
-							:outlinedIndicatif="args.outlinedIndicatif"
-							:withCountryCode="args.withCountryCode"
-							:country-code-required="args.countryCodeRequired"
-							:isValidatedOnBlur="args.isValidatedOnBlur"
-							:readonly="args.readonly"
-							:disabled="args.disabled"
-							:bg-color="args.bgColor"
-							:display-format="args.displayFormat"
-							:custom-indicatifs="args.customIndicatifs"
-							:use-custom-indicatifs-only="args.useCustomIndicatifsOnly"
-							:display-asterisk="args.displayAsterisk"
-							:disable-error-handling="args.disableErrorHandling"
+							v-bind="args"
 						/>
 						<v-btn type="submit" color="primary" class="mt-4" style="width: 200px;">Soumettre le formulaire</v-btn>
 						<div v-if="formSubmitted" class="mt-4 pa-2" :class="{ 'bg-success': formIsValid, 'bg-error': !formIsValid }" style="width: fit-content;">