@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/DatePicker/{DatePicker.stories.ts → DatePicker/DatePicker.stories.ts}

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import DatePicker from './DatePicker.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, watch, computed } from 'vue'
 import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
+import { fn } from '@storybook/test'
 
 const meta = {
-	title: 'Composants/Formulaires/DatePicker',
+	title: 'Composants/Formulaires/DatePicker/DatePicker',
 	component: DatePicker,
 	decorators: [
 		() => ({
@@ -14,6 +16,7 @@ const meta = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue'] },
+		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {
 		modelValue: {
@@ -89,6 +92,18 @@ const meta = {
 			control: 'boolean',
 			description: 'Désactive la gestion des erreurs par le composant',
 		},
+		period: {
+			control: 'object',
+			description: 'Période pendant laquelle les dates peuvent être sélectionnées (au format: MM/DD/YYYY)',
+		},
+		autoClamp: {
+			control: 'boolean',
+			description: 'Active le clamping automatique des dates',
+		},
+		displayHolidayDays: {
+			control: 'boolean',
+			description: 'Affiche les jours fériés',
+		},
 	},
 } as Meta<typeof DatePicker>
 
@@ -122,18 +137,24 @@ export const Default: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '',
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'displayHolidayDays': true,
+		'modelValue': '',
+		'displayTodayButton': true,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -151,6 +172,78 @@ export const Default: Story = {
 	},
 }
 
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						required
+						format="DD/MM/YYYY"
+					  />
+					  	<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						required
+						displayAsterisk
+						format="DD/MM/YYYY"
+					  />
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { DatePicker } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': true,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'displayHolidayDays': true,
+		'modelValue': '',
+		'displayTodayButton': true,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { DatePicker: DatePicker },
+			setup() {
+				const value = ref('')
+				return { args, value }
+			},
+			template: `
+              <div class="d-flex flex-wrap align-center pa-4">
+				<h4 class="mb-4">Sans astérisque :</h4>
+                <DatePicker v-bind="args" v-model="value"/>
+				<h4 class="mb-4">Avec astérisque :</h4>
+				<DatePicker v-bind="args" v-model="value" displayAsterisk/>
+              </div>
+            `,
+		}
+	},
+}
+
 export const DateRange: Story = {
 	parameters: {
 		sourceCode: [
@@ -181,19 +274,23 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une période',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: true,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: ['', ''],
+		'placeholder': 'Sélectionner une période',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': true,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': ['', ''],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -211,6 +308,117 @@ export const DateRange: Story = {
 	},
 }
 
+export const WithCustomPeriod: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						format="DD/MM/YYYY"
+						:period="{
+							min: '01/01/1995',
+							max: '12/31/2005',
+						}"
+						:customRules="[
+							{
+								type: 'notBeforeDate',
+								options: {
+									date: '01/01/1995',
+									message: 'La date doit être postérieure ou égale au 01/01/1995',
+									fieldIdentifier: 'date',
+									},
+							},
+							{
+								type: 'notAfterDate',
+								options: {
+									date: '31/12/2005',
+									message: 'La date doit être antérieure ou égale au 31/12/2005',
+									fieldIdentifier: 'date',
+								},
+							},
+						],
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { DatePicker } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+		'period': {
+			min: '01/01/1995',
+			max: '12/31/2005',
+		},
+		'customRules': [
+			{
+				type: 'notBeforeDate',
+				options: {
+					date: '01/01/1995',
+					message: 'La date doit être postérieure ou égale au 01/01/1995',
+					fieldIdentifier: 'date',
+				},
+			},
+			{
+				type: 'notAfterDate',
+				options: {
+					date: '31/12/2005',
+					message: 'La date doit être antérieure ou égale au 31/12/2005',
+					fieldIdentifier: 'date',
+				},
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { DatePicker: DatePicker, SyAlert },
+			setup() {
+				const value = ref('')
+				return { args, value }
+			},
+			template: `
+			<div style="margin-bottom: 20px; padding: 15px;"> 
+				<SyAlert variant="tonal" :closable="false">
+					<template #default>
+					<p>La propriété <strong>period</strong> limite les dates sélectionnables dans le calendrier</p>
+					<p>Ouvrez les années dans le calendrier pour voir les dates limites</p>
+					</template>
+				</SyAlert>
+			</div>
+              <div class="d-flex flex-wrap align-center pa-4">
+                <DatePicker v-bind="args" v-model="value"/>
+              </div>
+            `,
+		}
+	},
+}
+
 export const WithAppendIcon: Story = {
 	parameters: {
 		sourceCode: [
@@ -241,19 +449,23 @@ export const WithAppendIcon: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: true,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '',
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': true,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -301,19 +513,23 @@ export const WithoutIcon: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: false,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '',
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': false,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -361,19 +577,23 @@ export const BirthDate: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Date de naissance',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: true,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '',
+		'placeholder': 'Date de naissance',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': true,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -422,22 +642,26 @@ export const WithError: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '01/01/2100',
-		customRules: [
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '01/01/2100',
+		'customRules': [
 			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
 		],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -490,20 +714,20 @@ export const WithWarning: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Date avec avertissement',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '20/12/2023',
-		customWarningRules: [
+		'placeholder': 'Date avec avertissement',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '20/12/2023',
+		'customWarningRules': [
 			{
 				type: 'notBeforeDate', options: {
 					warningMessage: 'Attention : la date est antérieure à la date de référence',
@@ -512,6 +736,10 @@ export const WithWarning: Story = {
 				},
 			},
 		],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -561,22 +789,26 @@ export const WithSuccess: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Date valide',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: true,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '22/01/2024',
-		customRules: [
+		'placeholder': 'Date valide',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': true,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '22/01/2024',
+		'customRules': [
 			{ type: 'notWeekend', options: { message: 'La date ne peut pas être un weekend' } },
 		],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: (args) => {
 		return {
@@ -747,19 +979,23 @@ export const WithDateFormatReturn: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Sélectionner une date',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: false,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		modelValue: '24/12/2025',
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'modelValue': '24/12/2025',
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
 	},
 	render: () => {
 		return {
@@ -801,405 +1037,6 @@ export const WithDateFormatReturn: Story = {
 	},
 }
 
-export const NoCalendarEuropeanFormat: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<DatePicker
-						v-model="date"
-						format="DD/MM/YYYY"
-						date-format-return="YYYY/MM/DD"
-						placeholder="JJ/MM/AAAA"
-						required
-						no-icon
-						no-calendar
-					/>
-				</template>
-				`,
-			},
-		],
-	},
-	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: 'YYYY/MM/DD',
-		placeholder: 'JJ/MM/AAAA',
-		required: true,
-		noIcon: true,
-	},
-	render(args) {
-		const date = ref<string | null>(null)
-		return {
-			components: { DatePicker },
-			setup() {
-				return { args, date }
-			},
-			template: `
-				<div style="padding: 20px;">
-					<h4 class="mb-4">Format européen avec règles de base (format de date valide) :</h4>
-					<DatePicker
-						v-model="date"
-						v-bind="args"
-					/>
-					<div style="margin-top: 10px; font-family: monospace; color: #666;">
-						Valeur (dateFormatReturn: 'YYYY/MM/DD') : {{ date }}
-					</div>
-				</div>
-			`,
-		}
-	},
-}
-
-export const NoCalendarCustomRules: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<DatePicker
-						v-model="date"
-						date-format-return="DD/MM/YYYY"
-						format="DD/MM/YYYY"
-						placeholder="DD/MM/YYYY"
-						required
-						no-calendar
-						:custom-rules="[{
-							type: 'custom',
-							options: {
-								validate: value => !value || !value.includes('2024'),
-								message: 'Les dates en 2024 ne sont pas autorisées',
-								successMessage: 'Les dates hors 2024 sont autorisées',
-								fieldIdentifier: 'date'
-							}
-						}]"
-					/>
-				</template>
-				`,
-			},
-		],
-	},
-	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: 'DD/MM/YYYY',
-		placeholder: 'DD/MM/YYYY',
-		required: true,
-		customRules: [{
-			type: 'custom',
-			options: {
-				validate: (value: string) => !value || !value.includes('2024'),
-				message: 'Les dates en 2024 ne sont pas autorisées',
-				successMessage: 'Les dates hors 2024 sont autorisées',
-				fieldIdentifier: 'date',
-			},
-		}],
-	},
-	render(args) {
-		const date = ref<string | null>('21/12/2024')
-		return {
-			components: { DatePicker },
-			setup() {
-				return { args, date }
-			},
-			template: `
-				<div style="padding: 20px;">
-					<h4 class="mb-0">Format avec règles personnalisées :</h4>
-					<p class="mb-4">Les dates en 2024 ne sont pas autorisées</p>
-					<DatePicker
-						v-model="date"
-						v-bind="args"
-					/>
-					<div style="margin-top: 10px; font-family: monospace; color: #666;">
-						Valeur : {{ date }}
-					</div>
-				</div>
-			`,
-		}
-	},
-}
-
-export const NoCalendarWarningRules: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<DatePicker
-						v-model="date"
-						format="DD/MM/YYYY"
-						placeholder="JJ/MM/AAAA"
-						no-calendar
-						:custom-warning-rules="[{
-							type: 'custom',
-							options: {
-								validate: value => !value || !value.includes('2025'),
-								warningMessage: 'Les dates en 2025 ne sont pas autorisées',
-								successMessage: 'Date hors 2025',
-								fieldIdentifier: 'date',
-								isWarning: true
-							}
-						}]"
-					/>
-				</template>
-				`,
-			},
-		],
-	},
-	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		placeholder: 'JJ/MM/AAAA',
-		customWarningRules: [{
-			type: 'custom',
-			options: {
-				validate: (value: string) => !value || !value.includes('2025'),
-				warningMessage: 'Les dates en 2025 ne sont pas autorisées',
-				successMessage: 'Date hors 2025',
-				fieldIdentifier: 'date',
-				isWarning: true,
-			},
-		}],
-	},
-	render(args) {
-		const date = ref<string | null>('20/12/2025')
-		return {
-			components: { DatePicker },
-			setup() {
-				return { args, date }
-			},
-			template: `
-				<div style="padding: 20px;">
-					<h4 class="mb-0">Format avec règles d'avertissement :</h4>
-					<p class="mb-4">Les dates en 2025 ne sont pas autorisées</p>
-					<DatePicker
-						v-model="date"
-						v-bind="args"
-					/>
-					<div style="margin-top: 10px; font-family: monospace; color: #666;">
-						Valeur : {{ date }}
-					</div>
-				</div>
-			`,
-		}
-	},
-}
-
-export const WithErrorDisabled: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<DatePicker
-						v-model="date"
-						placeholder="Sélectionner une date"
-						format="DD/MM/YYYY"
-						:required="true"
-						:disableErrorHandling="true"
-					/>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import { ref } from 'vue'
-					import { DatePicker } from '@cnamts/synapse'
-					
-					const date = ref('')
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		placeholder: 'Date requise sans affichage d\'erreur',
-		format: 'DD/MM/YYYY',
-		isBirthDate: false,
-		showWeekNumber: false,
-		required: true,
-		displayRange: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		disableErrorHandling: true,
-		modelValue: '',
-	},
-	render: (args) => {
-		return {
-			components: { DatePicker: DatePicker },
-			setup() {
-				const value = ref('')
-				return { args, value }
-			},
-			template: `
-              <div class="d-flex flex-column pa-4">
-                <div class="mb-5">
-                  <p class="mb-3">Ce champ est requis mais n'affiche pas de message d'erreur grâce à <code>disableErrorHandling</code>:</p>
-                  <DatePicker v-bind="args" v-model="value"/>
-                </div>
-                <div>
-                  <p class="mb-3">Comparaison avec un champ requis standard:</p>
-                  <DatePicker
-                    placeholder="Date requise avec erreur"
-                    format="DD/MM/YYYY"
-                    :required="true"
-                    v-model="value"
-                  />
-                </div>
-              </div>
-            `,
-		}
-	},
-}
-
-export const NoCalendarWithAppendIcon: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<DatePicker
-						v-model="date"
-						format="DD/MM/YYYY"
-						placeholder="JJ/MM/AAAA"
-						no-calendar
-						display-append-icon
-					/>
-				</template>
-				`,
-			},
-		],
-	},
-	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		placeholder: 'JJ/MM/AAAA',
-		displayAppendIcon: true,
-	},
-	render(args) {
-		const date = ref<string | null>(null)
-		return {
-			components: { DatePicker },
-			setup() {
-				return { args, date }
-			},
-			template: `
-				<div style="padding: 20px;">
-					<h4 class="mb-4">Format avec icône en préfixe</h4>
-					<DatePicker
-						v-model="date"
-						v-bind="args"
-					/>
-					<div style="margin-top: 10px; font-family: monospace; color: #666;">
-						Valeur : {{ date }}
-					</div>
-				</div>
-			`,
-		}
-	},
-}
-
-export const NoCalendarWithErrorDisabled: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<div class="d-flex">
-						<div class="mr-4" style="width: 300px;">
-							<p class="mb-3">Avec <code>disableErrorHandling</code>:</p>
-							<DatePicker
-								v-model="date1"
-								format="DD/MM/YYYY"
-								placeholder="Date requise sans erreur"
-								required
-								no-icon
-								no-calendar
-								:disableErrorHandling="true"
-							/>
-						</div>
-						<div style="width: 300px;">
-							<p class="mb-3">Sans <code>disableErrorHandling</code>:</p>
-							<DatePicker
-								v-model="date2"
-								format="DD/MM/YYYY"
-								placeholder="Date requise avec erreur"
-								required
-								no-icon
-								no-calendar
-							/>
-						</div>
-					</div>
-				</template>
-				`,
-			},
-		],
-	},
-	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: 'YYYY/MM/DD',
-		placeholder: 'Date requise sans erreur',
-		required: true,
-		noIcon: true,
-		disableErrorHandling: true,
-	},
-	render(args) {
-		const date1 = ref<string | null>(null)
-		const date2 = ref<string | null>(null)
-		return {
-			components: { DatePicker },
-			setup() {
-				return { args, date1, date2 }
-			},
-			template: `
-				<div style="padding: 20px;">
-					<h4 class="mb-4">DateTextInput avec désactivation des erreurs</h4>
-					<div class="d-flex mb-4">
-						<div class="mr-4" style="width: 300px;">
-							<p class="mb-3">Avec <code>disableErrorHandling</code>:</p>
-							<DatePicker
-								v-model="date1"
-								v-bind="args"
-							/>
-							<div style="margin-top: 10px; font-family: monospace; color: #666;">
-								Valeur : {{ date1 }}
-							</div>
-						</div>
-						
-						<div style="width: 300px;">
-							<p class="mb-3">Sans <code>disableErrorHandling</code>:</p>
-							<DatePicker
-								v-model="date2"
-								format="DD/MM/YYYY"
-								placeholder="Date requise avec erreur"
-								required
-								no-icon
-								no-calendar
-							/>
-							<div style="margin-top: 10px; font-family: monospace; color: #666;">
-								Valeur : {{ date2 }}
-							</div>
-						</div>
-					</div>
-				</div>
-			`,
-		}
-	},
-}
-
 export const WithDayjsFormat: Story = {
 	parameters: {
 		sourceCode: [