@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -144,6 +144,11 @@ const meta = {
 			control: 'text',
 			description: 'Valeur du champ (v-model), peut être une chaîne de caractères ou un tableau de deux dates en mode plage',
 		},
+		'label': {
+			control: 'text',
+			description: 'Libellé du champ affiché au-dessus de l\'input',
+			defaultValue: 'Date',
+		},
 		'placeholder': {
 			control: 'text',
 			description: 'Texte indicatif affiché lorsque le champ est vide pour guider l\'utilisateur sur le format attendu',
@@ -322,9 +327,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -332,6 +334,7 @@ export const Default: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						format="DD/MM/YYYY"
 					  />
@@ -350,6 +353,7 @@ export const Default: Story = {
 	},
 	args: {
 		'headingLevel': 3,
+		'label': 'Sélectionner une date',
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -387,9 +391,6 @@ export const Default: Story = {
 
 export const Required: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -398,11 +399,13 @@ export const Required: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Sélectionner une date"
+						label="Sélectionner une date"
 						required
 						format="DD/MM/YYYY"
 					  />
 					  	<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						required
 						displayAsterisk
@@ -424,6 +427,7 @@ export const Required: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
 		'showWeekNumber': false,
@@ -463,9 +467,6 @@ export const Required: Story = {
 
 export const DateRange: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -533,9 +534,6 @@ export const DateRange: Story = {
 
 export const WithCustomPeriod: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -544,6 +542,7 @@ export const WithCustomPeriod: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Sélectionner une date"
+						label="Sélectionner une date"
 						format="DD/MM/YYYY"
 						:period="{
 							min: '01/01/1995',
@@ -584,6 +583,7 @@ export const WithCustomPeriod: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
 		'showWeekNumber': false,
@@ -648,9 +648,6 @@ export const WithCustomPeriod: Story = {
 
 export const WithAppendIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -659,6 +656,7 @@ export const WithAppendIcon: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Sélectionner une date"
+						label="Sélectionner une date"
 						format="DD/MM/YYYY"
 						displayAppendIcon
 					/>
@@ -681,6 +679,7 @@ export const WithAppendIcon: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -716,9 +715,6 @@ export const WithAppendIcon: Story = {
 
 export const WithoutIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -727,6 +723,7 @@ export const WithoutIcon: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Sélectionner une date"
+						label="Sélectionner une date"
 						format="DD/MM/YYYY"
 						:displayIcon="false"
 					/>
@@ -749,6 +746,7 @@ export const WithoutIcon: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -784,9 +782,6 @@ export const WithoutIcon: Story = {
 
 export const BirthDate: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -795,6 +790,7 @@ export const BirthDate: Story = {
 					<DatePicker
 						v-model="birthDate"
 						placeholder="Date de naissance"
+						label="Date de naissance"
 						format="DD/MM/YYYY"
 						isBirthDate
 					/>
@@ -817,6 +813,7 @@ export const BirthDate: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Date de naissance',
+		'label': 'Date de naissance',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': true,
@@ -852,9 +849,6 @@ export const BirthDate: Story = {
 
 export const WithError: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -863,6 +857,7 @@ export const WithError: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="notAfterToday"
+						label="notAfterToday"
 						:custom-rules="[
 			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd'hui' } },
 		]"
@@ -886,6 +881,7 @@ export const WithError: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -924,9 +920,6 @@ export const WithError: Story = {
 
 export const WithWarning: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -935,6 +928,7 @@ export const WithWarning: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Date avec avertissement"
+						label="Date avec avertissement"
 						:custom-warning-rules="[
 							{ type: 'notBeforeDate', options: { 
 								warningMessage: 'Attention : la date est antérieure à la date de référence',
@@ -962,6 +956,7 @@ export const WithWarning: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Date avec avertissement',
+		'label': 'Date avec avertissement',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -1006,9 +1001,6 @@ export const WithWarning: Story = {
 
 export const WithSuccess: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1017,6 +1009,7 @@ export const WithSuccess: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Date valide"
+						label="Date valide"
 						required
 						:custom-rules="[
 							{ type: 'notWeekend', options: { message: 'La date ne peut pas être un weekend' } }
@@ -1041,6 +1034,7 @@ export const WithSuccess: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Date valide',
+		'label': 'Date valide',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -1079,9 +1073,6 @@ export const WithSuccess: Story = {
 
 export const DifferentFormats: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1091,26 +1082,31 @@ export const DifferentFormats: Story = {
 						<DatePicker
 							v-model="value1"
 							placeholder="Format JJ/MM/AAAA"
+							label="Format JJ/MM/AAAA"
 							format="DD/MM/YYYY"
 						/>
 						<DatePicker
 							v-model="value2"
 							placeholder="Format MM/JJ/AAAA"
+							label="Format MM/JJ/AAAA"
 							format="MM/DD/YYYY"
 						/>
 						<DatePicker
 							v-model="value3"
 							placeholder="Format AAAA-MM-JJ"
+							label="Format AAAA-MM-JJ"
 							format="YYYY-MM-DD"
 						/>
 						<DatePicker
 							v-model="value4"
 							placeholder="Format JJ-MM-AA"
+							label="Format JJ-MM-AA"
 							format="DD-MM-YY"
 						/>
 						<DatePicker
 							v-model="value5"
 							placeholder="Format JJ.MM.AAAA"
+							label="Format JJ.MM.AAAA"
 							format="DD.MM.YYYY"
 						/>
 					</div>
@@ -1150,30 +1146,35 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA"
+                    label="Format JJ/MM/AAAA"
                     format="DD/MM/YYYY"
                     class="py-4"
                 />
                 <DatePicker
                     v-model="value2"
                     placeholder="Format MM/JJ/AAAA"
+                    label="Format MM/JJ/AAAA"
                     format="MM/DD/YYYY"
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value3"
                     placeholder="Format YYYY-MM-DD"
+                    label="Format YYYY-MM-DD"
                     format="YYYY-MM-DD"
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value4"
                     placeholder="Format DD-MM-YY"
+					label="Format DD-MM-YY"
                     format="DD-MM-YY"
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value5"
                     placeholder="Format DD.MM.YYYY"
+					label="Format DD.MM.YYYY"
                     format="DD.MM.YYYY"
 					class="py-4"
                 />
@@ -1185,9 +1186,6 @@ export const DifferentFormats: Story = {
 
 export const WithDateFormatReturn: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1198,6 +1196,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA, retour par défaut"
+                    label="Format JJ/MM/AAAA, retour par défaut"
                     format="DD/MM/YYYY"
                 />
 
@@ -1205,6 +1204,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value2"
                     placeholder="Format JJ/MM/AAAA, retour MM/DD/YYYY"
+                    label="Format JJ/MM/AAAA, retour MM/DD/YYYY"
                     format="DD/MM/YYYY"
                     date-format-return="MM/DD/YYYY"
                 />
@@ -1213,6 +1213,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value3"
                     placeholder="Format JJ/MM/AAAA, retour YYYY-MM-DD"
+                    label="Format JJ/MM/AAAA, retour YYYY-MM-DD"
                     format="DD/MM/YYYY"
                     date-format-return="YYYY-MM-DD"
                 />
@@ -1238,6 +1239,7 @@ export const WithDateFormatReturn: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -1270,6 +1272,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA, retour par défaut"
+                    label="Format JJ/MM/AAAA, retour par défaut"
                     format="DD/MM/YYYY"
                 />
 
@@ -1277,6 +1280,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value2"
                     placeholder="Format JJ/MM/AAAA, retour MM/DD/YYYY"
+                    label="Format JJ/MM/AAAA, retour MM/DD/YYYY"
                     format="DD/MM/YYYY"
 					date-format-return="MM/DD/YYYY"
                 />
@@ -1286,6 +1290,7 @@ export const WithDateFormatReturn: Story = {
                 <DatePicker
                     v-model="value3"
                     placeholder="Format JJ/MM/AAAA, retour YYYY-MM-DD"
+                    label="Format JJ/MM/AAAA, retour YYYY-MM-DD"
                     format="DD/MM/YYYY"
 					date-format-return="YYYY-MM-DD"
                 />
@@ -1297,9 +1302,6 @@ export const WithDateFormatReturn: Story = {
 
 export const WithDayjsFormat: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1309,6 +1311,7 @@ export const WithDayjsFormat: Story = {
 						<DatePicker
 							v-model="date"
 							placeholder="Sélectionner une date"
+							label="Sélectionner une date"
 							format="DD/MM/YYYY"
 						/>
 						<p class="mt-4">Date formatée avec dayjs: {{ formattedDate }}</p>
@@ -1350,6 +1353,7 @@ export const WithDayjsFormat: Story = {
 	args: {
 		headingLevel: 3,
 		placeholder: 'Sélectionner une date',
+		label: 'Sélectionner une date',
 		format: 'DD/MM/YYYY',
 		isBirthDate: false,
 		showWeekNumber: false,
@@ -1394,6 +1398,7 @@ export const WithDayjsFormat: Story = {
 					<DatePicker
 						v-model="date"
 						placeholder="Sélectionner une date"
+						label="Sélectionner une date"
 						format="DD/MM/YYYY"
 					/>
 					<p class="mt-4">Date formatée avec dayjs: {{ formattedDate }}</p>
@@ -1406,9 +1411,6 @@ export const WithDayjsFormat: Story = {
 
 export const UTC: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1418,6 +1420,7 @@ export const UTC: Story = {
 						<DatePicker
 							v-model="dateString"
 							placeholder="Sélectionner une date"
+							label="Sélectionner une date"
 							format="DD/MM/YYYY"
 						/>
 
@@ -1483,6 +1486,7 @@ export const UTC: Story = {
 	args: {
 		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
+		'label': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
 		'isBirthDate': false,
@@ -1567,9 +1571,6 @@ export const UTC: Story = {
 export const BidirectionalValidation: Story = {
 	parameters: {
 		controls: { disable: true },
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1866,6 +1867,7 @@ export const BidirectionalValidation: Story = {
 								ref="startDatePickerRef"
 								v-model="startDate"
 								placeholder="Date de début"
+								label="Date de début"
 								:custom-rules="startDateRules"
 								required
 								@update:model-value="validateEndDate"
@@ -1877,6 +1879,7 @@ export const BidirectionalValidation: Story = {
 								ref="endDatePickerRef"
 								v-model="endDate"
 								placeholder="Date de fin"
+								label="Date de fin"
 								:custom-rules="endDateRules"
 								required
 								@update:model-value="validateStartDate"
@@ -1895,9 +1898,6 @@ export const BidirectionalValidation: Story = {
 
 export const WithFormSubmission: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1913,6 +1913,7 @@ export const WithFormSubmission: Story = {
 									required
 									format="DD/MM/YYYY"
 									placeholder="Date requise"
+									label="Date requise au format DD/MM/YYYY "
 								/>
 							</div>
 							<div>
@@ -1923,6 +1924,7 @@ export const WithFormSubmission: Story = {
 									required
 									format="DD/MM/YYYY"
 									placeholder="Date requise"
+									label="Date requise au format DD/MM/YYYY"
 									no-calendar
 								/>
 							</div>
@@ -1941,14 +1943,14 @@ export const WithFormSubmission: Story = {
 					import { ref } from 'vue'
 					import { DatePicker } from '@cnamts/synapse'
 
-					const datePicker1 = ref()
-					const datePicker2 = ref()
+					const datePicker1 = ref<InstanceType<typeof DatePicker>>()
+					const datePicker2 = ref<InstanceType<typeof DatePicker>>()
 					const date1 = ref('')
 					const date2 = ref('')
 
-					const handleSubmit = () => {
-						const isValid1 = datePicker1.value?.validateOnSubmit()
-						const isValid2 = datePicker2.value?.validateOnSubmit()
+					const handleSubmit = async () => {
+						const isValid1 = await datePicker1.value?.validateOnSubmit()
+						const isValid2 = await datePicker2.value?.validateOnSubmit()
 						
 						if (!isValid1 || !isValid2) {
 							alert('Corrigez les erreurs avant de soumettre !')
@@ -1964,14 +1966,14 @@ export const WithFormSubmission: Story = {
 	render: () => ({
 		components: { DatePicker },
 		setup() {
-			const datePicker1 = ref()
-			const datePicker2 = ref()
+			const datePicker1 = ref<InstanceType<typeof DatePicker>>()
+			const datePicker2 = ref<InstanceType<typeof DatePicker>>()
 			const date1 = ref('')
 			const date2 = ref('')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
-				const isValid2 = datePicker2.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
+				const isValid2 = await datePicker2.value?.validateOnSubmit()
 
 				if (!isValid1 || !isValid2) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -2001,6 +2003,7 @@ export const WithFormSubmission: Story = {
 								required
 								format="DD/MM/YYYY"
 								placeholder="Date requise"
+								label="Date requise au format DD/MM/YYYY"
 							/>
 						</div>
 						<div>
@@ -2011,6 +2014,7 @@ export const WithFormSubmission: Story = {
 								required
 								format="DD/MM/YYYY"
 								placeholder="Date requise"
+								label="Date requise au format DD/MM/YYYY"
 								no-calendar
 							/>
 						</div>