@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

package/src/components/DataList/DataListLoading/tests/DataListLoading.spec.ts

@@ -17,7 +17,7 @@ describe('DataListLoading', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list-loading-item').exists()
+		const elExists = wrapper.find('.sy-data-list-loading-item').exists()
 		expect(elExists).toBe(true)
 	})
 })

package/src/components/DataList/tests/DataList.spec.ts

@@ -31,11 +31,11 @@ describe('DataList', () => {
 			},
 		})
 
-		const elExists = wrapper.find('.vd-data-list').exists()
+		const elExists = wrapper.find('.sy-data-list').exists()
 		expect(elExists).toBe(true)
 
 		// Check items exists
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 
 		const titleExists = wrapper.find('h4').exists()
@@ -68,7 +68,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 	})
 
@@ -91,7 +91,7 @@ describe('DataList', () => {
 		})
 
 		// Check items does not exist
-		const itemsExists = wrapper.find('.vd-data-list-item .v-icon').exists()
+		const itemsExists = wrapper.find('.sy-data-list-item .v-icon').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -112,7 +112,7 @@ describe('DataList', () => {
 
 		// Check that items now exist
 		const itemsExists = wrapper
-			.find('.vd-data-list-item.custom-class')
+			.find('.sy-data-list-item.custom-class')
 			.exists()
 
 		expect(itemsExists).toBe(true)
@@ -132,7 +132,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items does not exist
-		let itemsExists = wrapper.find('.vd-data-list-item').exists()
+		let itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(false)
 
 		await wrapper.setProps({
@@ -140,7 +140,7 @@ describe('DataList', () => {
 		})
 
 		// Check that items now exist
-		itemsExists = wrapper.find('.vd-data-list-item').exists()
+		itemsExists = wrapper.find('.sy-data-list-item').exists()
 		expect(itemsExists).toBe(true)
 	})
 
@@ -159,7 +159,7 @@ describe('DataList', () => {
 			},
 		})
 
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(1)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(1)
 		expect(itemWithAction?.exists()).toBe(true)
 	})
 
@@ -179,11 +179,11 @@ describe('DataList', () => {
 		})
 
 		// Find the second item element
-		const itemWithAction = wrapper.findAll('.vd-data-list-item').at(2)
+		const itemWithAction = wrapper.findAll('.sy-data-list-item').at(2)
 		expect(itemWithAction?.exists()).toBe(true)
 
 		const actionBtn = (itemWithAction as DOMWrapper<Element>).find(
-			'.vd-data-list-item-action-btn',
+			'.sy-data-list-item-action-btn',
 		)
 		expect(actionBtn.exists()).toBe(true)
 

package/src/components/DataListGroup/tests/DataListGroup.spec.ts

@@ -31,7 +31,7 @@ describe('DataListGroup', () => {
 			},
 		})
 
-		expect(wrapper.find('.vd-data-list-loading').exists()).toBe(true)
+		expect(wrapper.find('.sy-data-list-loading').exists()).toBe(true)
 	})
 
 	it('emit the right event when clicking on a item button', async () => {

package/src/components/DataListItem/DataListItem.vue

@@ -49,7 +49,7 @@
 </script>
 
 <template>
-	<li class="vd-data-list-item d-flex flex-wrap">
+	<li class="sy-data-list-item d-flex flex-wrap">
 		<slot name="icon">
 			<VIcon
 				v-if="icon"
@@ -59,16 +59,16 @@
 			</VIcon>
 		</slot>
 
-		<div class="vd-data-list-item-content">
-			<div :class="{ 'vd-row': row }">
+		<div class="sy-data-list-item-content">
+			<div :class="{ 'sy-row': row }">
 				<div
-					class="vd-data-list-item-label text-caption"
+					class="sy-data-list-item-label text-caption"
 					:style="{ color: labelColor }"
 				>
 					{{ label }}
 				</div>
 
-				<div class="vd-data-list-item-value">
+				<div class="sy-data-list-item-value">
 					<slot
 						name="value"
 						v-bind="{ itemValue }"
@@ -99,7 +99,7 @@
 				<VBtn
 					v-if="action"
 					v-bind="options.actionBtn"
-					class="vd-data-list-item-action-btn"
+					class="sy-data-list-item-action-btn"
 					@click="emits('click:action')"
 				>
 					{{ action }}
@@ -110,11 +110,11 @@
 </template>
 
 <style lang="scss" scoped>
-.vd-row {
+.sy-row {
 	display: flex;
 	flex-wrap: wrap;
 
-	.vd-data-list-item-label {
+	.sy-data-list-item-label {
 		align-self: center;
 
 		&::after {
@@ -124,7 +124,7 @@
 	}
 }
 
-.vd-data-list-item-action-btn.v-btn {
+.sy-data-list-item-action-btn.v-btn {
 	min-width: 0;
 	margin: 0 -1px;
 }

package/src/components/DataListItem/tests/DataListItem.spec.ts

@@ -66,7 +66,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('<span>Custom Value</span>')
 	})
@@ -83,7 +83,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.vd-data-list-item-value span')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('Paul Dupont')
 	})
@@ -115,7 +115,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elAction = wrapper.find('.vd-data-list-item-action-btn')
+		const elAction = wrapper.find('.sy-data-list-item-action-btn')
 		expect(elAction.text()).toBe('Click Me')
 	})
 
@@ -130,7 +130,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const button = wrapper.find('.vd-data-list-item-action-btn')
+		const button = wrapper.find('.sy-data-list-item-action-btn')
 		await button.trigger('click')
 
 		expect(wrapper.emitted('click:action')).toBeTruthy()
@@ -150,7 +150,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elRow = wrapper.find('.vd-row')
+		const elRow = wrapper.find('.sy-row')
 		expect(elRow.exists()).toBe(true)
 	})
 })

package/src/components/DatePicker/DatePicker.mdx

@@ -89,7 +89,7 @@ Les séparateurs peuvent être `/`, `-` ou `.`
 - **Description** : Indique si le champ est obligatoire
 - **Défaut** : `false`
 
-### isDisabled
+### disabled
 - **Type** : `boolean`
 - **Description** : Désactive le champ
 - **Défaut** : `false`

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

@@ -61,7 +61,7 @@ const meta = {
 			control: 'boolean',
 			description: 'Icône à la fin du champ',
 		},
-		isDisabled: {
+		disabled: {
 			control: 'boolean',
 			description: 'Désactive le champ',
 		},
@@ -129,7 +129,7 @@ export const Default: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -189,7 +189,7 @@ export const DateRange: Story = {
 		displayRange: true,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: ['', ''],
@@ -249,7 +249,7 @@ export const WithAppendIcon: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -309,7 +309,7 @@ export const WithoutIcon: Story = {
 		displayRange: false,
 		displayIcon: false,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -369,7 +369,7 @@ export const BirthDate: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '',
@@ -430,7 +430,7 @@ export const WithError: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '01/01/2100',
@@ -498,7 +498,7 @@ export const WithWarning: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '20/12/2023',
@@ -569,7 +569,7 @@ export const WithSuccess: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '22/01/2024',
@@ -755,7 +755,7 @@ export const WithDateFormatReturn: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		modelValue: '24/12/2025',
@@ -1027,7 +1027,7 @@ export const WithErrorDisabled: Story = {
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		disableErrorHandling: true,

package/src/components/DatePicker/DatePicker.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance } from 'vue'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from './DateTextInput.vue'
 	import { VDatePicker } from 'vuetify/components'
@@ -28,14 +28,15 @@
 		customRules?: { type: string, options: any }[]
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
 		customWarningRules?: { type: string, options: any }[]
-		isDisabled?: boolean
+		disabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
-		isReadOnly?: boolean
+		readonly?: boolean
 		width?: string
 		disableErrorHandling?: boolean
 		showSuccessMessages?: boolean
+		bgColor?: string
 	}>(), {
 		modelValue: undefined,
 		placeholder: 'Sélectionner une date',
@@ -50,14 +51,15 @@
 		displayPrependIcon: true,
 		customRules: () => [],
 		customWarningRules: () => [],
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		isOutlined: true,
-		isReadOnly: false,
+		readonly: false,
 		width: '100%',
 		disableErrorHandling: false,
 		showSuccessMessages: true,
+		bgColor: undefined,
 	})
 
 	const emit = defineEmits<{
@@ -375,7 +377,9 @@
 		document.removeEventListener('click', handleClickOutside)
 	})
 
-	const dateTextInputRef = ref()
+	const dateTextInputRef = ref<null | ComponentPublicInstance< typeof DateTextInput>>()
+	const dateCalendarTextInputRef = ref<null | ComponentPublicInstance<typeof SyTextField>>()
+	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
 
 	const validateOnSubmit = () => {
 		if (props.noCalendar) {
@@ -388,7 +392,7 @@
 	}
 
 	const showDatePicker = () => {
-		if (props.isDisabled || props.isReadOnly) return
+		if (props.disabled || props.readonly) return
 
 		isDatePickerVisible.value = true
 
@@ -428,11 +432,33 @@
 		}
 	}
 
-	watch(isDatePickerVisible, (isVisible) => {
+	watch(isDatePickerVisible, async (isVisible) => {
 		if (!isVisible && props.isBirthDate) {
 			// Réinitialiser le mode d'affichage au type birthdate
 			currentViewMode.value = 'year'
 		}
+
+		if (isVisible) {
+			// set the focus on the date picker
+			await nextTick()
+			const firstButton = datePickerRef.value?.$el.querySelector('button')
+			if (firstButton) {
+				firstButton.focus()
+			}
+		}
+		else {
+			// set the focus on the text input
+			// wait for VMenu to finish DOM updates & transition
+			setTimeout(() => {
+				requestAnimationFrame(() => {
+					const inputElement = dateCalendarTextInputRef.value?.$el?.querySelector('input')
+					if (inputElement) {
+						inputElement.focus()
+						isDatePickerVisible.value = false
+					}
+				})
+			}, 0)
+		}
 	})
 
 	const getIcon = () => {
@@ -529,8 +555,8 @@
 				:required="props.required"
 				:custom-rules="props.customRules"
 				:custom-warning-rules="props.customWarningRules"
-				:is-disabled="props.isDisabled"
-				:is-read-only="props.isReadOnly"
+				:disabled="props.disabled"
+				:readonly="props.readonly"
 				:is-outlined="props.isOutlined"
 				:display-icon="props.displayIcon"
 				:display-append-icon="props.displayAppendIcon"
@@ -538,37 +564,13 @@
 				:no-icon="props.noIcon"
 				:disable-error-handling="props.disableErrorHandling"
 				:show-success-messages="props.showSuccessMessages"
+				:bg-color="props.bgColor"
 				title="Date text input"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
 			/>
 		</template>
 		<template v-else>
-			<SyTextField
-				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"
-				:success-messages="props.showSuccessMessages ? successMessages : []"
-				:is-disabled="props.isDisabled"
-				:is-read-only="true"
-				:label="props.placeholder"
-				:no-icon="props.noIcon"
-				:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
-				:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
-				color="primary"
-				:show-success-messages="props.showSuccessMessages"
-				is-clearable
-				title="Date Picker"
-				@focus="openDatePicker"
-				@update:model-value="updateSelectedDates"
-				@prepend-icon-click="openDatePicker"
-				@append-icon-click="openDatePicker"
-			/>
-		</template>
-		<div>
 			<VMenu
 				v-if="!props.noCalendar"
 				v-model="isDatePickerVisible"
@@ -577,36 +579,64 @@
 				location="bottom"
 				:close-on-content-click="false"
 				:open-on-click="false"
+				scroll-strategy="none"
 				transition="fade-transition"
 				attach="body"
 				:offset="[-20, 5]"
 			>
-				<transition name="fade">
-					<VDatePicker
-						v-if="isDatePickerVisible && !props.noCalendar"
-						v-model="selectedDates"
+				<template #activator="{ props: menuProps }">
+					<SyTextField
+						v-bind="menuProps"
+						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"
+						:success-messages="props.showSuccessMessages ? successMessages : []"
+						:disabled="props.disabled"
+						:readonly="true"
+						:label="props.placeholder"
+						:no-icon="props.noIcon"
+						:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
+						:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 						color="primary"
-						:first-day-of-week="1"
-						:multiple="props.displayRange ? 'range' : false"
-						:show-adjacent-months="true"
-						:show-week="props.showWeekNumber"
-						:view-mode="currentViewMode"
-						@update:view-mode="handleViewModeUpdate"
-						@update:year="handleYearUpdate"
-						@update:month="handleMonthUpdate"
-					>
-						<template #title>
-							Sélectionnez une date
-						</template>
-						<template #header>
-							<h3 class="mx-auto my-auto ml-5 mb-4">
-								{{ todayInString }}
-							</h3>
-						</template>
-					</VDatePicker>
-				</transition>
+						:show-success-messages="props.showSuccessMessages"
+						:bg-color="props.bgColor"
+						is-clearable
+						title="Date Picker"
+						@focus="openDatePicker"
+						@update:model-value="updateSelectedDates"
+						@prepend-icon-click="openDatePicker"
+						@append-icon-click="openDatePicker"
+					/>
+				</template>
+				<VDatePicker
+					v-if="isDatePickerVisible && !props.noCalendar"
+					ref="datePickerRef"
+					v-model="selectedDates"
+					color="primary"
+					:first-day-of-week="1"
+					:multiple="props.displayRange ? 'range' : false"
+					:show-adjacent-months="true"
+					:show-week="props.showWeekNumber"
+					:view-mode="currentViewMode"
+					@update:view-mode="handleViewModeUpdate"
+					@update:year="handleYearUpdate"
+					@update:month="handleMonthUpdate"
+				>
+					<template #title>
+						Sélectionnez une date
+					</template>
+					<template #header>
+						<h3 class="mx-auto my-auto ml-5 mb-4">
+							{{ todayInString }}
+						</h3>
+					</template>
+				</VDatePicker>
 			</VMenu>
-		</div>
+		</template>
 	</div>
 </template>