@cnamts/synapse 1.0.16 → 1.0.18

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

@@ -4,6 +4,10 @@ import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, watch, computed } from 'vue'
 import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 import { fn } from '@storybook/test'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 
 const meta = {
 	title: 'Composants/Formulaires/DatePicker/CalendarMode',
@@ -314,6 +318,9 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -375,6 +382,9 @@ export const Default: Story = {
 
 export const Required: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -447,6 +457,9 @@ export const Required: Story = {
 
 export const DateRange: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -511,6 +524,9 @@ export const DateRange: Story = {
 
 export const WithCustomPeriod: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -622,6 +638,9 @@ export const WithCustomPeriod: Story = {
 
 export const WithAppendIcon: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -686,6 +705,9 @@ export const WithAppendIcon: Story = {
 
 export const WithoutIcon: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -750,6 +772,9 @@ export const WithoutIcon: Story = {
 
 export const BirthDate: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -814,6 +839,9 @@ export const BirthDate: Story = {
 
 export const WithError: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -882,6 +910,9 @@ export const WithError: Story = {
 
 export const WithWarning: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -960,6 +991,9 @@ export const WithWarning: Story = {
 
 export const WithSuccess: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1029,6 +1063,9 @@ export const WithSuccess: Story = {
 
 export const DifferentFormats: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1132,6 +1169,9 @@ export const DifferentFormats: Story = {
 
 export const WithDateFormatReturn: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1240,6 +1280,9 @@ export const WithDateFormatReturn: Story = {
 
 export const WithDayjsFormat: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1343,8 +1386,162 @@ export const WithDayjsFormat: Story = {
 	},
 }
 
+export const UTC: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="dateString"
+							placeholder="Sélectionner une date"
+							format="DD/MM/YYYY"
+						/>
+
+						<p class="mt-4" style="font-family: monospace;">timezone sélectionné : {{ selectedTimeZone }}</p>
+						<p style="font-family: monospace;">v-model (DD/MM/YYYY) : {{ dateString }}</p>
+						<p style="font-family: monospace;">Date ISO (UTC) : {{ utcIso }}</p>
+						<p style="font-family: monospace;">Date affichée dans le timezone sélectionné : {{ dateInSelectedTimeZone }}</p>
+						<p style="font-family: monospace;">Date affichée dans Europe/Paris : {{ dateInParis }}</p>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { computed, ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+					import dayjs from 'dayjs'
+					import customParseFormat from 'dayjs/plugin/customParseFormat'
+					import utc from 'dayjs/plugin/utc'
+					import timezone from 'dayjs/plugin/timezone'
+					
+					dayjs.extend(customParseFormat)
+					dayjs.extend(utc)
+					dayjs.extend(timezone)
+
+					const DISPLAY_FORMAT = 'DD/MM/YYYY'
+					const selectedTimeZone = ref<'America/Guadeloupe'>('America/Guadeloupe')
+					const utcIso = ref('2023-01-15T00:00:00.000Z')
+					
+					// Un seul computed avec getter/setter pour gérer l'intégration timezone:
+					// - getter: ISO UTC -> DD/MM/YYYY en timezone
+					// - setter: DD/MM/YYYY en timezone -> ISO UTC
+					const dateString = computed({
+						get() {
+							return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT)
+						},
+						set(v: string) {
+							const parsed = dayjs.tz(v, DISPLAY_FORMAT, selectedTimeZone.value)
+							if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT) !== v) return
+							utcIso.value = parsed.utc().toISOString()
+						},
+					})
+					
+					const dateInSelectedTimeZone = computed(() => {
+						return dayjs.utc(utcIso.value)
+							.tz(selectedTimeZone.value)
+							.format('DD/MM/YYYY')
+					})
+
+					const dateInParis = computed(() => {
+						return dayjs.utc(utcIso.value)
+							.tz('Europe/Paris')
+							.format('DD/MM/YYYY')
+					})
+					
+				</script>
+				`,
+			},
+		],
+	},
+	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,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+	},
+	render(args) {
+		return {
+			components: { DatePicker, SyAlert },
+			setup() {
+				dayjs.extend(customParseFormat)
+				dayjs.extend(utc)
+				dayjs.extend(timezone)
+
+				const DISPLAY_FORMAT = computed(() => args.format ?? 'DD/MM/YYYY')
+				const selectedTimeZone = ref<'America/Guadeloupe'>('America/Guadeloupe')
+				const utcIso = ref('2023-01-15T00:00:00.000Z')
+
+				const dateString = computed({
+					get() {
+						return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT.value)
+					},
+					set(v: string) {
+						const parsed = dayjs.tz(v, DISPLAY_FORMAT.value, selectedTimeZone.value)
+						if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT.value) !== v) return
+						utcIso.value = parsed.utc().toISOString()
+						args['onUpdate:modelValue']?.(v)
+					},
+				})
+
+				const dateInSelectedTimeZone = computed(() => {
+					return dayjs.utc(utcIso.value)
+						.tz(selectedTimeZone.value)
+						.format('DD/MM/YYYY')
+				})
+
+				const dateInParis = computed(() => {
+					return dayjs.utc(utcIso.value)
+						.tz('Europe/Paris')
+						.format('DD/MM/YYYY')
+				})
+
+				return { args, dateString, utcIso, selectedTimeZone, dateInSelectedTimeZone, dateInParis }
+			},
+			template: `
+				<div class="d-flex flex-column gap-4 pa-4">
+					<SyAlert type="info" variant="tonal" class="mb-6">
+						Selon le timezone, une même date UTC peut correspondre à un jour différent en local.
+					</SyAlert>
+					<DatePicker v-model="dateString" v-bind="args" />
+					<div class="mt-4" style="font-family: monospace;">
+						<div>timezone sélectionné : {{ selectedTimeZone }}</div>
+						<div>v-model (DD/MM/YYYY) : {{ dateString }}</div>
+						<div>Date ISO (UTC) : {{ utcIso }}</div>
+						<div>Date affichée dans le timezone sélectionné : {{ dateInSelectedTimeZone }}</div>
+						<div>Date affichée dans Europe/Paris : {{ dateInParis }}</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const BidirectionalValidation: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1670,6 +1867,9 @@ export const BidirectionalValidation: Story = {
 
 export const WithFormSubmission: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -13,8 +13,9 @@
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
-	import { mdiCalendar } from '@mdi/js'
+	import { mdiCalendarMonthOutline } from '@mdi/js'
 	import type { DateObjectValue } from '../types'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -720,22 +721,6 @@
 		}
 	})
 
-	const getIcon = () => {
-		if (props.noCalendar || props.disableErrorHandling) {
-			return
-		}
-		switch (true) {
-		case errorMessages.value.length > 0:
-			return 'error'
-		case warningMessages.value.length > 0:
-			return 'warning'
-		case successMessages.value.length > 0:
-			return 'success'
-		default:
-			return
-		}
-	}
-
 	watch(() => props.modelValue, (newValue) => {
 		if (isUpdatingFromInternal.value) {
 			if (props.displayRange) {
@@ -964,7 +949,6 @@
 						ref="dateCalendarTextInputRef"
 						v-model="displayFormattedDate"
 						:append-icon="displayIcon && displayAppendIcon ? 'calendar' : undefined"
-						:append-inner-icon="getIcon()"
 						:class="[getMessageClasses(), 'label-hidden-on-focus']"
 						:error-messages="errorMessages"
 						:warning-messages="warningMessages"
@@ -1037,15 +1021,15 @@
 								size="x-small"
 								color="primary"
 								:title="DATE_PICKER_MESSAGES.BUTTON_TODAY"
-								class="my-2 pa-2 mt-2"
+								class="date-picker__today-button my-2 pa-2 mt-2"
 								:ripple="false"
 								@click="handleSelectToday"
 							>
-								<VIcon
-									class="mr-1"
-								>
-									{{ mdiCalendar }}
-								</VIcon>
+								<SyIcon
+									size="16px"
+									decorative
+									:icon="mdiCalendarMonthOutline"
+								/>
 								{{ DATE_PICKER_MESSAGES.BUTTON_TODAY }}
 							</v-btn>
 						</div>
@@ -1059,6 +1043,16 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+.date-picker-title {
+	display: block;
+	text-transform: lowercase;
+	font-size: 0.875rem;
+
+	&::first-letter {
+		text-transform: uppercase;
+	}
+}
+
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
@@ -1087,7 +1081,7 @@
 }
 
 .dp-width {
-	width: v-bind('props.width');
+	width: v-bind(width);
 }
 
 .v-messages__message--success {
@@ -1171,10 +1165,18 @@
 	}
 }
 
+:deep(.v-date-picker-month__day .v-btn:hover) {
+	background-color: tokens.$colors-background-main;
+}
+
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
 	opacity: 1;
 }
 
+:deep(.v-date-picker-month__day--selected .v-btn:hover) {
+	background-color: tokens.$colors-background-accent-contrasted !important;
+}
+
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.5s ease;
@@ -1186,12 +1188,12 @@
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 }
 
 /* div avant la class .v-date-picker-month__day--week-end */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1202,9 +1204,13 @@
 	padding: 13px;
 }
 
-/* Style de base du ::after */
+:deep(.custom-year-btn) {
+	width: auto;
+	height: 28px;
+}
+
 :deep(.custom-year-btn::after) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 	padding: 10px 40px;
 	text-decoration: none;
 	display: inline-block;
@@ -1214,11 +1220,51 @@
 }
 
 :deep(.custom-month-btn::after) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;
 	border-radius: 9999px;
 }
 
+:deep(.v-picker__body .v-btn:focus-visible) {
+	outline: 2px solid rgb(var(--v-theme-primary, '12, 65, 154'));
+
+	.v-btn__overlay {
+		display: none;
+	}
+
+	&::after {
+		display: none;
+	}
+}
+
+:deep(.v-date-picker-months .v-btn__content) {
+	font-size: 1rem;
+}
+
+.date-picker__today-button {
+	height: auto;
+
+	:deep(.v-btn__content) {
+		font-size: 1rem;
+		gap: 8px;
+	}
+
+	&:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary, '12, 65, 154'));
+
+		:deep(.v-btn__overlay) {
+			display: none;
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+:deep(.v-picker__body .v-btn--active .v-btn__overlay) {
+	opacity: 0;
+}
 </style>

package/src/components/DatePicker/CalendarMode/tests/DatePicker.a11y.spec.ts

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import DatePicker from '../DatePicker.vue'
+
+// Scénario d’accessibilité : champ de date en mode calendrier,
+// avec label et champ requis, calendrier fermé (état par défaut).
+
+describe('DatePicker (CalendarMode) – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de naissance',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker (CalendarMode) – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/DatePicker/CalendarMode/tests/DatePicker.events.spec.ts

@@ -72,7 +72,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Vérifier que l'événement update:modelValue est émis même avec disablePickerInteraction
 		const emitted = wrapperWithDisabledPicker.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('01/01/2023')
+		expect(emitted && emitted[0]?.[0]).toBe('01/01/2023')
 	})
 
 	it('synchronise textInputValue et selectedDates', async () => {
@@ -130,7 +130,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Vérifier que l'événement update:modelValue est émis avec le bon format
 		const emitted = wrapperWithDashFormat.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('2023-01-01')
+		expect(emitted && emitted[0]?.[0]).toBe('2023-01-01')
 	})
 
 	it('accepte les plages de dates en entrée', async () => {

package/src/components/DatePicker/CalendarMode/tests/DatePicker.spec.ts

@@ -32,7 +32,7 @@ describe('DatePicker', () => {
 
 		const emitted = wrapper.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('01/01/2023')
+		expect(emitted && emitted[0]?.[0]).toBe('01/01/2023')
 	})
 
 	it('handles invalid typed date input gracefully', async () => {
@@ -66,8 +66,8 @@ describe('DatePicker', () => {
 		expect(result.length).toBe(2)
 		expect(result[0]).toBeInstanceOf(Date)
 		expect(result[1]).toBeInstanceOf(Date)
-		expect(result[0].toISOString().split('T')[0]).toBe('2023-01-01')
-		expect(result[1].toISOString().split('T')[0]).toBe('2023-01-05')
+		expect(result[0]?.toISOString().split('T')[0]).toBe('2023-01-01')
+		expect(result[1]?.toISOString().split('T')[0]).toBe('2023-01-05')
 	})
 
 	it('initializeSelectedDates returns an empty array for invalid range inputs', () => {