@cnamts/synapse 1.0.1 → 1.0.2

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import DatePicker from '../DatePicker/DatePicker.vue'
 import { ref } from 'vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/DatePicker/DateInput',
@@ -13,6 +14,7 @@ const meta = {
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['modelValue'] },
+		actions: { argTypesRegex: '^on.*' },
 	},
 	argTypes: {
 		placeholder: {
@@ -89,6 +91,10 @@ const meta = {
 			control: 'boolean',
 			description: 'Sélection de plage de dates',
 		},
+		autoClamp: {
+			control: 'boolean',
+			description: 'Active le clamping automatique des dates',
+		},
 	},
 } as Meta<typeof DatePicker>
 
@@ -98,17 +104,25 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		placeholder: 'JJ/MM/AAAA',
-		label: 'Date',
-		displayIcon: true,
-		displayPrependIcon: true,
-		displayAppendIcon: false,
-		noIcon: false,
-		disableErrorHandling: false,
-		required: false,
-		isOutlined: true,
+		'noCalendar': true,
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles de validation',
+		'required': true,
+		'disabled': false,
+		'readonly': false,
+		'isOutlined': true,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'noIcon': false,
+		'displayRange': false,
+		'displayPrependIcon': false,
+		'showSuccessMessages': true,
+		'disableErrorHandling': false,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 	render(args) {
 		const date = ref<string | null>(null)
@@ -132,6 +146,54 @@ export const Default: Story = {
 	},
 }
 
+export const Required: Story = {
+	args: {
+		'noCalendar': true,
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles de validation',
+		'required': true,
+		'disabled': false,
+		'readonly': false,
+		'isOutlined': true,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'noIcon': false,
+		'displayRange': false,
+		'displayPrependIcon': false,
+		'showSuccessMessages': true,
+		'disableErrorHandling': false,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+	},
+	render(args) {
+		const date = ref<string | null>(null)
+		return {
+			components: { DatePicker },
+			setup() {
+				return { args, date }
+			},
+			template: `
+				<div>
+					<h4 class="mb-4">Sans astérisque :</h4>
+					<DatePicker
+						v-model="date"
+						v-bind="args"
+					/>
+					<h4 class="mb-4">Avec astérisque :</h4>
+					<DatePicker
+						v-model="date"
+						v-bind="args"
+						displayAsterisk
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const EuropeanFormat: Story = {
 	parameters: {
 		sourceCode: [
@@ -148,18 +210,32 @@ export const EuropeanFormat: Story = {
 						no-icon
 						no-calendar
 					/>
+
+					<DatePicker
+						v-model="date"
+						format="DD/MM/YYYY"
+						date-format-return="YYYY/MM/DD"
+						placeholder="JJ/MM/AAAA"
+						required
+						no-icon
+						no-calendar
+						displayAsterisk
+					/>
 				</template>
 				`,
 			},
 		],
 	},
 	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: 'YYYY/MM/DD',
-		placeholder: 'JJ/MM/AAAA',
-		required: true,
-		noIcon: true,
+		'noCalendar': true,
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': 'YYYY/MM/DD',
+		'placeholder': 'JJ/MM/AAAA',
+		'required': true,
+		'noIcon': true,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 	render(args) {
 		const date = ref<string | null>(null)
@@ -214,12 +290,12 @@ export const CustomRules: Story = {
 		],
 	},
 	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: 'DD/MM/YYYY',
-		placeholder: 'DD/MM/YYYY',
-		required: true,
-		customRules: [{
+		'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'),
@@ -228,6 +304,9 @@ export const CustomRules: Story = {
 				fieldIdentifier: 'date',
 			},
 		}],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 	render(args) {
 		const date = ref<string | null>('21/12/2024')
@@ -282,10 +361,10 @@ export const WarningRules: Story = {
 		],
 	},
 	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		placeholder: 'JJ/MM/AAAA',
-		customWarningRules: [{
+		'noCalendar': true,
+		'format': 'DD/MM/YYYY',
+		'placeholder': 'JJ/MM/AAAA',
+		'customWarningRules': [{
 			type: 'custom',
 			options: {
 				validate: (value: string) => !value || !value.includes('2025'),
@@ -295,6 +374,9 @@ export const WarningRules: Story = {
 				isWarning: true,
 			},
 		}],
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 	render(args) {
 		const date = ref<string | null>('20/12/2025')
@@ -340,10 +422,13 @@ export const WithAppendIcon: Story = {
 		],
 	},
 	args: {
-		noCalendar: true,
-		format: 'DD/MM/YYYY',
-		placeholder: 'JJ/MM/AAAA',
-		displayAppendIcon: true,
+		'noCalendar': true,
+		'format': 'DD/MM/YYYY',
+		'placeholder': 'JJ/MM/AAAA',
+		'displayAppendIcon': true,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 	render(args) {
 		const date = ref<string | null>(null)
@@ -458,6 +543,131 @@ export const WithErrorDisabled: Story = {
 	},
 }
 
+export const AutoClampFeature: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="d-flex flex-column">
+						<h3>Démonstration de l'auto clamp dans DateTextInput</h3>
+						
+						<h4 class="mt-4">Format DD/MM/YYYY (séparateur /)</h4>
+						<DatePicker
+							v-model="dateSlash"
+							placeholder="Saisie avec auto clamp - séparateur /"
+							format="DD/MM/YYYY"
+							noCalendar
+							autoClamp
+						/>
+						
+						<h4 class="mt-4">Format DD-MM-YYYY (séparateur -)</h4>
+						<DatePicker
+							v-model="dateDash"
+							placeholder="Saisie avec auto clamp - séparateur -"
+							format="DD-MM-YYYY"
+							noCalendar
+
+						/>
+						
+						<h4 class="mt-4">Format YYYY.MM.DD (séparateur .)</h4>
+						<DatePicker
+							v-model="dateDot"
+							placeholder="Saisie avec auto clamp - séparateur ."
+							format="YYYY.MM.DD"
+							noCalendar
+						/>
+						
+						<h4 class="mt-4">Mode plage de dates (séparateur /)</h4>
+						<DatePicker
+							v-model="dateRange"
+							placeholder="Saisie plage avec auto clamp"
+							format="DD/MM/YYYY"
+							displayRange
+							noCalendar
+							autoClamp
+						/>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+					
+					const dateSlash = ref('')
+					const dateDash = ref('')
+					const dateDot = ref('')
+					const dateRange = ref('')
+				</script>
+				`,
+			},
+		],
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				const dateSlash = ref('')
+				const dateDash = ref('')
+				const dateDot = ref('')
+				const dateRange = ref('')
+				return { dateSlash, dateDash, dateDot, dateRange }
+			},
+			template: `
+              <div class="d-flex flex-column pa-4">
+                <h3>Démonstration de l'auto clamp dans DateTextInput</h3>
+                <div class="mb-4 mt-2">Saisissez uniquement des chiffres - les séparateurs seront ajoutés automatiquement selon le format défini</div>
+                
+                <h4 class="mb-2">Format DD/MM/YYYY (séparateur /)</h4>
+                <DatePicker
+                  v-model="dateSlash"
+                  placeholder="Saisie avec auto clamp - séparateur /"
+                  format="DD/MM/YYYY"
+                  noCalendar
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateSlash || 'aucune date saisie' }}</div>
+                
+                <h4 class="mb-2">Format DD-MM-YYYY (séparateur -)</h4>
+                <DatePicker
+                  v-model="dateDash"
+                  placeholder="Saisie avec auto clamp - séparateur -"
+                  format="DD-MM-YYYY"
+                  noCalendar
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateDash || 'aucune date saisie' }}</div>
+                
+                <h4 class="mb-2">Format YYYY.MM.DD (séparateur .)</h4>
+                <DatePicker
+                  v-model="dateDot"
+                  placeholder="Saisie avec auto clamp - séparateur ."
+                  format="YYYY.MM.DD"
+                  noCalendar
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateDot || 'aucune date saisie' }}</div>
+                
+                <h4 class="mb-2">Mode plage de dates (séparateur /)</h4>
+                <DatePicker
+                  v-model="dateRange"
+                  placeholder="Saisie plage avec auto clamp"
+                  format="DD/MM/YYYY"
+                  displayRange
+                  noCalendar
+                  autoClamp
+                />
+                <div class="caption mb-4">Valeur actuelle: {{ dateRange || 'aucune plage saisie' }}</div>
+              </div>
+            `,
+		}
+	},
+}
+
 export const DifferentFormats: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/DatePicker/composables/index.ts

@@ -3,6 +3,7 @@
 // Date input and editing
 export { useDateInputEditing } from './useDateInputEditing'
 export { useDateRangeInput } from './useDateRangeInput'
+export { useDateAutoClamp } from './useDateAutoClamp'
 
 // Date selection and validation
 export { useDateSelection } from './useDateSelection'
@@ -20,3 +21,4 @@ export { useInputBlurHandler } from './useInputBlurHandler'
 export { useTodayButton } from './useTodayButton'
 export { useWeekendDays } from './useWeekendDays'
 export { useMonthButtonCustomization } from './useMonthButtonCustomization'
+export { useAsteriskDisplay } from './useAsteriskDisplay'

package/src/components/DatePicker/composables/tests/useDateAutoClamp.spec.ts

@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+import { useDateAutoClamp } from '../useDateAutoClamp'
+
+describe('useDateAutoClamp', () => {
+	describe('clampDayToValidDate', () => {
+		it('devrait retourner le jour inchangé si valide', () => {
+			const { clampDayToValidDate } = useDateAutoClamp()
+
+			// Jour valide dans un mois standard
+			const result1 = clampDayToValidDate(15, 0, 2023) // 15 janvier 2023
+			expect(result1.day).toBe(15)
+			expect(result1.adjusted).toBe(false)
+
+			// Jour valide dans un mois de 30 jours
+			const result2 = clampDayToValidDate(30, 3, 2023) // 30 avril 2023
+			expect(result2.day).toBe(30)
+			expect(result2.adjusted).toBe(false)
+
+			// Jour valide dans un mois de 31 jours
+			const result3 = clampDayToValidDate(31, 0, 2023) // 31 janvier 2023
+			expect(result3.day).toBe(31)
+			expect(result3.adjusted).toBe(false)
+		})
+
+		it('devrait ajuster le jour au dernier jour du mois si invalide', () => {
+			const { clampDayToValidDate } = useDateAutoClamp()
+
+			// Jour invalide dans un mois de 30 jours
+			const result1 = clampDayToValidDate(31, 3, 2023) // 31 avril 2023 -> 30 avril 2023
+			expect(result1.day).toBe(30)
+			expect(result1.adjusted).toBe(true)
+
+			// Jour invalide dans un mois de 28 jours (février non bissextile)
+			const result2 = clampDayToValidDate(29, 1, 2023) // 29 février 2023 -> 28 février 2023
+			expect(result2.day).toBe(28)
+			expect(result2.adjusted).toBe(true)
+
+			// Jour très invalide
+			const result3 = clampDayToValidDate(45, 5, 2023) // 45 juin 2023 -> 30 juin 2023
+			expect(result3.day).toBe(30)
+			expect(result3.adjusted).toBe(true)
+		})
+
+		it('devrait gérer correctement les années bissextiles', () => {
+			const { clampDayToValidDate } = useDateAutoClamp()
+
+			// 29 février sur une année bissextile
+			const result1 = clampDayToValidDate(29, 1, 2024) // 29 février 2024
+			expect(result1.day).toBe(29)
+			expect(result1.adjusted).toBe(false)
+
+			// 29 février sur une année non bissextile
+			const result2 = clampDayToValidDate(29, 1, 2023) // 29 février 2023 -> 28 février 2023
+			expect(result2.day).toBe(28)
+			expect(result2.adjusted).toBe(true)
+		})
+	})
+
+	describe('autoClampDate', () => {
+		it('devrait retourner la chaîne inchangée si vide', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			const result = autoClampDate('', 'DD/MM/YYYY')
+			expect(result.clampedDate).toBe('')
+			expect(result.adjusted).toBe(false)
+		})
+
+		it('devrait retourner la chaîne inchangée si la date est valide', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Date valide au format DD/MM/YYYY
+			const result1 = autoClampDate('15/01/2023', 'DD/MM/YYYY')
+			expect(result1.clampedDate).toBe('15/01/2023')
+			expect(result1.adjusted).toBe(false)
+
+			// Date valide au format MM/DD/YYYY
+			const result2 = autoClampDate('01/15/2023', 'MM/DD/YYYY')
+			expect(result2.clampedDate).toBe('01/15/2023')
+			expect(result2.adjusted).toBe(false)
+
+			// Date valide au format YYYY-MM-DD
+			const result3 = autoClampDate('2023-01-15', 'YYYY-MM-DD')
+			expect(result3.clampedDate).toBe('2023-01-15')
+			expect(result3.adjusted).toBe(false)
+		})
+
+		it('devrait ajuster les dates invalides au format DD/MM/YYYY', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// 31 avril -> 30 avril
+			const result1 = autoClampDate('31/04/2023', 'DD/MM/YYYY')
+			expect(result1.clampedDate).toBe('30/04/2023')
+			expect(result1.adjusted).toBe(true)
+
+			// 29 février 2023 (non bissextile) -> 28 février
+			const result2 = autoClampDate('29/02/2023', 'DD/MM/YYYY')
+			expect(result2.clampedDate).toBe('28/02/2023')
+			expect(result2.adjusted).toBe(true)
+
+			// 29 février 2024 (bissextile) reste inchangé
+			const result3 = autoClampDate('29/02/2024', 'DD/MM/YYYY')
+			expect(result3.clampedDate).toBe('29/02/2024')
+			expect(result3.adjusted).toBe(false)
+		})
+
+		it('devrait ajuster les dates invalides au format MM/DD/YYYY', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Avril 31 -> Avril 30
+			const result1 = autoClampDate('04/31/2023', 'MM/DD/YYYY')
+			expect(result1.clampedDate).toBe('04/30/2023')
+			expect(result1.adjusted).toBe(true)
+
+			// Février 29 2023 (non bissextile) -> Février 28
+			const result2 = autoClampDate('02/29/2023', 'MM/DD/YYYY')
+			expect(result2.clampedDate).toBe('02/28/2023')
+			expect(result2.adjusted).toBe(true)
+		})
+
+		it('devrait ajuster les dates invalides au format YYYY-MM-DD', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// 2023-04-31 -> 2023-04-30
+			const result1 = autoClampDate('2023-04-31', 'YYYY-MM-DD')
+			expect(result1.clampedDate).toBe('2023-04-30')
+			expect(result1.adjusted).toBe(true)
+
+			// 2023-02-29 (non bissextile) -> 2023-02-28
+			const result2 = autoClampDate('2023-02-29', 'YYYY-MM-DD')
+			expect(result2.clampedDate).toBe('2023-02-28')
+			expect(result2.adjusted).toBe(true)
+		})
+
+		it('devrait gérer différents séparateurs', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Format avec tiret
+			const result1 = autoClampDate('31-04-2023', 'DD-MM-YYYY')
+			expect(result1.clampedDate).toBe('30-04-2023')
+			expect(result1.adjusted).toBe(true)
+
+			// Format avec point
+			const result2 = autoClampDate('31.04.2023', 'DD.MM.YYYY')
+			expect(result2.clampedDate).toBe('30.04.2023')
+			expect(result2.adjusted).toBe(true)
+		})
+
+		it('devrait conserver le format de jour (D vs DD)', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Format avec D (jour sans zéro initial)
+			const result1 = autoClampDate('31/4/2023', 'D/M/YYYY')
+			expect(result1.clampedDate).toBe('30/4/2023')
+			expect(result1.adjusted).toBe(true)
+
+			// Format avec DD (jour avec zéro initial)
+			const result2 = autoClampDate('31/04/2023', 'DD/MM/YYYY')
+			expect(result2.clampedDate).toBe('30/04/2023')
+			expect(result2.adjusted).toBe(true)
+		})
+
+		it('devrait retourner la chaîne originale si le format ne correspond pas', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Nombre de parties différent
+			const result1 = autoClampDate('31/04', 'DD/MM/YYYY')
+			expect(result1.clampedDate).toBe('31/04')
+			expect(result1.adjusted).toBe(false)
+
+			// Contient des caractères non numériques
+			const result2 = autoClampDate('31/04/202a', 'DD/MM/YYYY')
+			expect(result2.clampedDate).toBe('30/04/202a')
+			expect(result2.adjusted).toBe(true)
+		})
+
+		it('devrait gérer les cas limites', () => {
+			const { autoClampDate } = useDateAutoClamp()
+
+			// Mois invalide
+			const result1 = autoClampDate('15/13/2023', 'DD/MM/YYYY')
+			expect(result1.clampedDate).toBe('15/13/2023')
+			expect(result1.adjusted).toBe(false)
+
+			// Jour négatif
+			const result2 = autoClampDate('-1/04/2023', 'DD/MM/YYYY')
+			expect(result2.clampedDate).toBe('-1/04/2023')
+			expect(result2.adjusted).toBe(false)
+		})
+	})
+})