@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -231,6 +231,45 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							date-format-return=""
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							display-icon
+							:no-icon="false"
+							:no-calendar="true"
+						/>
+						<div style="margin-top: 10px; font-family: monospace; color: #666;">
+							Valeur : {{ date }}
+						</div>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -275,6 +314,51 @@ export const Default: Story = {
 }
 
 export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<h4 class="mb-4">Sans astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+						/>
+						<h4 class="mb-4">Avec astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+							display-asterisk
+						/>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -359,6 +443,7 @@ export const EuropeanFormat: Story = {
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'YYYY/MM/DD',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles de validation',
 		'required': true,
 		'noIcon': true,
 		'onUpdate:modelValue': fn(),
@@ -421,6 +506,7 @@ export const CustomRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'DD/MM/YYYY',
+		'label': 'Date avec règles personnalisées',
 		'placeholder': 'DD/MM/YYYY',
 		'required': true,
 		'customRules': [{
@@ -492,6 +578,7 @@ export const WarningRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles d\'avertissement',
 		'customWarningRules': [{
 			type: 'custom',
 			options: {
@@ -553,6 +640,7 @@ export const WithAppendIcon: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec icône en suffixe',
 		'displayAppendIcon': true,
 		'onUpdate:modelValue': fn(),
 		'onFocus': fn(),
@@ -623,6 +711,7 @@ export const WithErrorDisabled: Story = {
 		format: 'DD/MM/YYYY',
 		dateFormatReturn: 'YYYY/MM/DD',
 		placeholder: 'Date requise sans erreur',
+		label: 'Date requise sans erreur',
 		required: true,
 		noIcon: true,
 		disableErrorHandling: true,
@@ -757,6 +846,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
+				  label="Date"
                   format="DD/MM/YYYY"
                   noCalendar
                   autoClamp
@@ -767,6 +857,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
+				  label="Date"
                   format="DD-MM-YYYY"
                   noCalendar
                   autoClamp
@@ -777,6 +868,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."
+				  label="Date"
                   format="YYYY.MM.DD"
                   noCalendar
                   autoClamp
@@ -787,6 +879,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateRange"
                   placeholder="Saisie plage avec auto clamp"
+				  label="Date"
                   format="DD/MM/YYYY"
                   displayRange
                   noCalendar
@@ -874,6 +967,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA"
+					label="Date"
                     format="DD/MM/YYYY"
                     no-calendar
                     class="py-4"
@@ -881,6 +975,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value2"
                     placeholder="Format MM/JJ/AAAA"
+					label="Date"
                     format="MM/DD/YYYY"
 					no-calendar
 					class="py-4"
@@ -888,6 +983,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value3"
                     placeholder="Format AAAA-MM-JJ"
+					label="Date"
                     format="YYYY-MM-DD"
 					no-calendar
 					class="py-4"
@@ -895,6 +991,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value4"
                     placeholder="Format JJ-MM-AA"
+					label="Date"
                     format="DD-MM-YY"
 					no-calendar
 					class="py-4"
@@ -902,6 +999,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value5"
                     placeholder="Format JJ.MM.AAAA"
+					label="Date"
                     format="DD.MM.YYYY"
 					no-calendar
 					class="py-4"

package/src/components/DatePicker/docExamples/BidirectionalComplexValidation.vue

@@ -142,10 +142,12 @@
 
 <template>
 	<div class="date-picker-bidirectional-validation">
-		<h1 class="text-h5 mb-6">
+		<SyHeading
+			class="text-h5 mb-6"
+			:level="1"
+		>
 			Validation bidirectionnelle entre deux DatePickers
-		</h1>
-
+		</SyHeading>
 		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
 			<ul class="ml-4">
@@ -158,12 +160,16 @@
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de début
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="startDatePickerRef"
 					v-model="startDate"
+					:heading-level="2"
 					label="Date de début"
 					:custom-rules="startDateRules"
 					use-combined-mode
@@ -172,12 +178,17 @@
 				/>
 			</div>
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de fin
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="endDatePickerRef"
 					v-model="endDate"
+					:heading-level="2"
+					:heading-level-complex-date-picker="2"
 					label="Date de fin"
 					:custom-rules="endDateRules"
 					use-combined-mode
@@ -221,9 +232,12 @@
 		</div>
 
 		<div class="mt-6 pa-4 bg-grey-lighten-4 rounded">
-			<h3 class="text-subtitle-1 mb-2">
+			<SyHeading
+				class="text-subtitle-1 mb-2"
+				:level="3"
+			>
 				Comment fonctionne la validation bidirectionnelle
-			</h3>
+			</SyHeading>
 			<p class="text-body-2">
 				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
 				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { ref, computed, watch } from 'vue'
 	import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 	// useDateFormat n'est plus nécessaire avec les règles prédéfinies
 
 	// État des dates
@@ -142,9 +143,9 @@
 
 <template>
 	<div class="date-picker-bidirectional-validation">
-		<h1 class="text-h5 mb-6">
+		<SyHeading :level="1">
 			Validation bidirectionnelle entre deux DatePickers
-		</h1>
+		</SyHeading>
 
 		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
@@ -158,12 +159,16 @@
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de début
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="startDatePickerRef"
 					v-model="startDate"
+					:heading-level="2"
 					label="Date de début"
 					:custom-rules="startDateRules"
 					required
@@ -171,13 +176,18 @@
 				/>
 			</div>
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de fin
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="endDatePickerRef"
 					v-model="endDate"
 					label="Date de fin"
+					:heading-level="2"
+					:heading-level-complex-date-picker="2"
 					:custom-rules="endDateRules"
 					required
 					@update:model-value="validateStartDate"
@@ -219,9 +229,12 @@
 		</div>
 
 		<div class="mt-6 pa-4 bg-grey-lighten-4 rounded">
-			<h3 class="text-subtitle-1 mb-2">
+			<SyHeading
+				class="text-subtitle-1 mb-2"
+				:level="3"
+			>
 				Comment fonctionne la validation bidirectionnelle
-			</h3>
+			</SyHeading>
 			<p class="text-body-2">
 				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
 				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.

package/src/components/DatePicker/docExamples/DatePickerValidationExamples.vue

@@ -1,6 +1,7 @@
 <script setup>
 	import { ref } from 'vue'
 	import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Exemple 1: Validation de base (required)
 	const date1 = ref('')
@@ -56,15 +57,15 @@
 
 <template>
 	<div class="date-picker-validation-examples">
-		<h1 class="text-h5 mb-6">
+		<SyHeading	:level="1">
 			Exemples de validation du DatePicker
-		</h1>
+		</SyHeading>
 
 		<!-- Exemple 1: Validation de base (required) -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading	:level="2">
 				Validation de base (required)
-			</h2>
+			</SyHeading>
 			<div class="mb-2">
 				<DatePicker
 					v-model="date1"
@@ -94,9 +95,12 @@
 
 		<!-- Exemple 2: notWeekend -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notWeekend
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas un weekend
 			</p>
@@ -136,9 +140,12 @@
 
 		<!-- Exemple 3: notAfterToday -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notAfterToday
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas postérieure à aujourd'hui
 			</p>
@@ -185,9 +192,12 @@
 
 		<!-- Exemple 4: notBeforeToday -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notBeforeToday
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas antérieure à aujourd'hui
 			</p>
@@ -234,9 +244,12 @@
 
 		<!-- Exemple 5: notBeforeDate -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notBeforeDate
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas antérieure à une date de référence
 			</p>
@@ -277,9 +290,12 @@
 
 		<!-- Exemple 6: notAfterDate -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation notAfterDate
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas postérieure à une date de référence
 			</p>
@@ -320,9 +336,12 @@
 
 		<!-- Exemple 7: dateExact -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Validation dateExact
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date est exactement égale à une date de référence
 			</p>
@@ -363,9 +382,12 @@
 
 		<!-- Exemple 8: customRules (règle personnalisée) -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Règle personnalisée (custom)
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle vérifie que la date n'est pas en 2024
 			</p>
@@ -418,9 +440,12 @@
 
 		<!-- Exemple 9: customWarningRules -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Règle d'avertissement
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Cette règle affiche un avertissement si la date est en 2025
 			</p>
@@ -477,9 +502,12 @@
 
 		<!-- Exemple 10: Combinaison de plusieurs règles -->
 		<section class="mb-10">
-			<h2 class="text-h6 mb-3">
+			<SyHeading
+				class="text-h6 mb-3"
+				:level="2"
+			>
 				Combinaison de plusieurs règles
-			</h2>
+			</SyHeading>
 			<p class="text-body-2 mb-2">
 				Exemple de DatePicker avec plusieurs règles de validation
 			</p>

package/src/components/DatePicker/playground/ComplexDatePickerPlayground.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { ref } from 'vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Valeurs pour les différents exemples
 	const standardDate = ref<string | null>(null)
@@ -15,12 +16,21 @@
 
 <template>
 	<div class="playground-container">
-		<h1>ComplexDatePicker Playground</h1>
-
+		<SyHeading
+			:level="1"
+		>
+			ComplexDatePicker Playground
+		</SyHeading>
 		<div class="demo-section">
-			<h2>Format standard (DD/MM/YYYY)</h2>
+			<SyHeading
+				:level="2"
+			>
+				Format standard (DD/MM/YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="standardDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date standard"
 				placeholder="15/03/2024"
 				format="DD/MM/YYYY"
@@ -32,10 +42,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format américain (MM/DD/YYYY)</h2>
+			<SyHeading	:level="2">
+				Format américain (MM/DD/YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="americanDate"
 				label="Date américaine"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="03/15/2024"
 				format="MM/DD/YYYY"
 				class="date-picker"
@@ -46,10 +60,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format ISO (YYYY-MM-DD)</h2>
+			<SyHeading	:level="2">
+				Format ISO (YYYY-MM-DD)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="isoDate"
 				label="Date ISO"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="2024-03-15"
 				format="YYYY-MM-DD"
 				class="date-picker"
@@ -60,10 +78,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format avec séparateur point (DD.MM.YYYY)</h2>
+			<SyHeading	:level="2">
+				Format avec séparateur point (DD.MM.YYYY)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="dotDate"
 				label="Date avec points"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="15.03.2024"
 				format="DD.MM.YYYY"
 				class="date-picker"
@@ -74,9 +96,13 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Champ requis</h2>
+			<SyHeading	:level="2">
+				Champ requis
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="requiredDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date requise"
 				placeholder="Veuillez sélectionner une date *"
 				format="DD/MM/YYYY"
@@ -89,10 +115,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Plage de dates</h2>
+			<SyHeading	:level="2">
+				Plage de dates
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="dateRange"
 				label="Plage de dates"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="01/01/2024 au 31/12/2024"
 				format="DD/MM/YYYY"
 				display-range
@@ -104,10 +134,14 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Date de naissance (année d'abord)</h2>
+			<SyHeading	:level="2">
+				Date de naissance (année d'abord)
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="birthDate"
 				label="Date de naissance"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				placeholder="25/12/1990"
 				format="DD/MM/YYYY"
 				is-birth-date
@@ -119,9 +153,13 @@
 		</div>
 
 		<div class="demo-section">
-			<h2>Format d'affichage vs format de retour</h2>
+			<SyHeading	:level="2">
+				Format d'affichage vs format de retour
+			</SyHeading>
 			<ComplexDatePicker
 				v-model="formattedDate"
+				:heading-level="2"
+				:heading-level-complex-date-picker="2"
 				label="Date avec format de retour"
 				placeholder="Affichage: 15/03/2024, Retour: 2024-03-15"
 				format="DD/MM/YYYY"

package/src/components/DatePicker/playground/DatePickerHolidayRule.vue

@@ -2,6 +2,7 @@
 	import { ref, computed } from 'vue'
 	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
 	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const selectedDate = ref('')
 	const { generateRules } = useFieldValidation()
@@ -36,7 +37,11 @@
 
 <template>
 	<div class="date-picker-holiday-example">
-		<h2>DatePicker avec règle de validation pour jours fériés</h2>
+		<SyHeading
+			:level="2"
+		>
+			DatePicker avec règle de validation pour jours fériés
+		</SyHeading>
 		<p>
 			Cet exemple montre comment utiliser la règle <code>isHolidayDay</code> pour empêcher
 			la sélection de jours fériés dans un DatePicker.
@@ -53,7 +58,11 @@
 		</div>
 
 		<div class="info-container mt-4">
-			<h3>Informations</h3>
+			<SyHeading
+				:level="3"
+			>
+				Informations
+			</SyHeading>
 			<p>Date sélectionnée : <strong>{{ selectedDate || 'Aucune' }}</strong></p>
 
 			<div
@@ -78,7 +87,11 @@
 				v-if="currentYearHolidays.length"
 				class="holiday-list mt-4"
 			>
-				<h4>Jours fériés {{ currentYear }} :</h4>
+				<SyHeading
+					:level="4"
+				>
+					Jours fériés {{ currentYear }} :
+				</SyHeading>
 				<ul>
 					<li
 						v-for="(date, index) in currentYearHolidays"