@cnamts/synapse 1.0.3 → 1.0.4

package/src/components/Customs/Selects/SelectBtnField/tests/__snapshots__/SelectBtnField.spec.ts.snap

@@ -20,6 +20,7 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
             text-primary
             v-btn-group
             v-btn-group--density-default
+            v-btn-group--horizontal
             v-btn-toggle
             v-theme--dark
           "
@@ -45,7 +46,10 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
                 v-theme--dark
               "
               label=""
-              style="height: auto; min-height: 40px;"
+              style="
+                height: auto;
+                min-height: 40px;
+              "
               type="button"
               value="test1"
             >
@@ -102,7 +106,10 @@ exports[`SelectBtnField > display correctly in dark mode with an error 1`] = `
                 v-theme--dark
               "
               label=""
-              style="height: auto; min-height: 40px;"
+              style="
+                height: auto;
+                min-height: 40px;
+              "
               type="button"
               value="test2"
             >
@@ -172,6 +179,7 @@ exports[`SelectBtnField > display correctly with an error 1`] = `
       text-primary
       v-btn-group
       v-btn-group--density-default
+      v-btn-group--horizontal
       v-btn-toggle
       v-theme--light
     "
@@ -197,7 +205,10 @@ exports[`SelectBtnField > display correctly with an error 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test"
       >
@@ -254,7 +265,10 @@ exports[`SelectBtnField > display correctly with an error 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test2"
       >
@@ -311,7 +325,10 @@ exports[`SelectBtnField > display correctly with an error 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test3"
       >
@@ -382,6 +399,7 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
             text-primary
             v-btn-group
             v-btn-group--density-default
+            v-btn-group--horizontal
             v-btn-toggle
             v-theme--dark
           "
@@ -406,7 +424,10 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
                 v-theme--dark
               "
               label=""
-              style="height: auto; min-height: 40px;"
+              style="
+                height: auto;
+                min-height: 40px;
+              "
               type="button"
               value="test1"
             >
@@ -462,7 +483,10 @@ exports[`SelectBtnField > display correctly with in dark mode with an hint 1`] =
                 v-theme--dark
               "
               label=""
-              style="height: auto; min-height: 40px;"
+              style="
+                height: auto;
+                min-height: 40px;
+              "
               type="button"
               value="test2"
             >
@@ -531,6 +555,7 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
       text-primary
       v-btn-group
       v-btn-group--density-default
+      v-btn-group--horizontal
       v-btn-toggle
       v-theme--light
     "
@@ -555,7 +580,10 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test"
       >
@@ -611,7 +639,10 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value=""
       >
@@ -667,7 +698,10 @@ exports[`SelectBtnField > render correctly in multiple mode 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test3"
       >
@@ -731,6 +765,7 @@ exports[`SelectBtnField > renders correctly 1`] = `
     text-primary
     v-btn-group
     v-btn-group--density-default
+    v-btn-group--horizontal
     v-btn-toggle
     v-theme--light
   "></ul>
@@ -754,6 +789,7 @@ exports[`SelectBtnField > renders correctly with props 1`] = `
       text-primary
       v-btn-group
       v-btn-group--density-default
+      v-btn-group--horizontal
       v-btn-toggle
       v-theme--light
     "
@@ -778,7 +814,10 @@ exports[`SelectBtnField > renders correctly with props 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test"
       >
@@ -834,7 +873,10 @@ exports[`SelectBtnField > renders correctly with props 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value=""
       >
@@ -890,7 +932,10 @@ exports[`SelectBtnField > renders correctly with props 1`] = `
           v-theme--light
         "
         label=""
-        style="height: auto; min-height: 40px;"
+        style="
+          height: auto;
+          min-height: 40px;
+        "
         type="button"
         value="test3"
       >

package/src/components/Customs/Selects/SySelect/SySelect.vue

@@ -541,159 +541,157 @@
 </script>
 
 <template>
-	<div>
-		<VTextField
-			:id="inputId"
-			ref="input"
-			v-model="selectedItemText"
-			v-click-outside="closeList"
-			v-rgaa-svg-fix="true"
-			:title="$attrs['aria-label'] || labelWithAsterisk"
-			color="primary"
-			role="combobox"
-			:disabled="disabled"
-			:label="labelWithAsterisk"
-			:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-			:aria-expanded="isOpen ? 'true' : 'false'"
-			:aria-controls="menuId"
-			aria-autocomplete="list"
-			aria-haspopup="listbox"
-			aria-readonly="true"
-			:aria-owns="menuId"
-			:aria-activedescendant="isOpen ? activeDescendantId : undefined"
-			:error-messages="props.disableErrorHandling ? [] : errorMessages"
-			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
-			:aria-required="isRequired ? 'true' : undefined"
-			:aria-invalid="hasError ? 'true' : undefined"
-			:bg-color="props.bgColor"
-			:density="props.density"
-			:active="hasChips || isOpen"
-			readonly
-			:hide-details="props.hideMessages"
-			class="sy-select"
-			:width="calculatedWidth"
-			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
-			v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk'))"
-			@click="toggleMenu"
-			@keydown.enter.prevent="handleEnterKey"
-			@keydown.space.prevent="handleSpaceKey"
-			@keydown.down.prevent="handleDownKey"
-			@keydown.up.prevent="handleUpKey"
-			@keydown.esc.prevent="handleEscapeKey"
-			@keydown="(e) => {
-				// Handle printable characters for keyboard navigation
-				if (!e.ctrlKey && !e.altKey && !e.metaKey) {
-					handleCharacterKey(e.key)
-				}
-			}"
+	<VTextField
+		:id="inputId"
+		ref="input"
+		v-model="selectedItemText"
+		v-click-outside="closeList"
+		v-rgaa-svg-fix="true"
+		:title="$attrs['aria-label'] || labelWithAsterisk"
+		color="primary"
+		role="combobox"
+		:disabled="disabled"
+		:label="labelWithAsterisk"
+		:aria-label="$attrs['aria-label'] || labelWithAsterisk"
+		:aria-expanded="isOpen ? 'true' : 'false'"
+		:aria-controls="menuId"
+		aria-autocomplete="list"
+		aria-haspopup="listbox"
+		aria-readonly="true"
+		:aria-owns="menuId"
+		:aria-activedescendant="isOpen ? activeDescendantId : undefined"
+		:error-messages="props.disableErrorHandling ? [] : errorMessages"
+		:variant="outlined ? 'outlined' : 'underlined'"
+		:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
+		:aria-required="isRequired ? 'true' : undefined"
+		:aria-invalid="hasError ? 'true' : undefined"
+		:bg-color="props.bgColor"
+		:density="props.density"
+		:active="hasChips || isOpen"
+		readonly
+		:hide-details="props.hideMessages"
+		class="sy-select"
+		:width="calculatedWidth"
+		:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
+		v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk'))"
+		@click="toggleMenu"
+		@keydown.enter.prevent="handleEnterKey"
+		@keydown.space.prevent="handleSpaceKey"
+		@keydown.down.prevent="handleDownKey"
+		@keydown.up.prevent="handleUpKey"
+		@keydown.esc.prevent="handleEscapeKey"
+		@keydown="(e) => {
+			// Handle printable characters for keyboard navigation
+			if (!e.ctrlKey && !e.altKey && !e.metaKey) {
+				handleCharacterKey(e.key)
+			}
+		}"
+	>
+		<div
+			v-if="hasChips"
+			class="d-flex flex-wrap gap-1"
 		>
-			<div
-				v-if="hasChips"
-				class="d-flex flex-wrap gap-1"
+			<VChip
+				v-for="item in selectedItem"
+				:key="props.returnObject ? item[props.valueKey] : item"
+				size="small"
+				class="ma-1"
+				closable
+				:close-label="`Supprimer ${getChipText(item)}`"
+				@click:close="removeChip(item)"
+			>
+				{{ getChipText(item) }}
+			</VChip>
+		</div>
+		<template #append-inner>
+			<SyIcon
+				v-if="hasError"
+				class="mr-6"
+				:icon="mdiInformation"
+				:decorative="false"
+				label="Information"
+				role="img"
+			/>
+			<button
+				v-if="props.clearable && selectedItemText"
+				type="button"
+				class="sy-select__clear-button"
+				:style="{ right: hasError ? '38px' : '32px' }"
+				:aria-label="locales.clear"
+				@keydown.enter.prevent="$event => selectItem(null, $event)"
+				@keydown.space.prevent="$event => selectItem(null, $event)"
+				@click.stop.prevent="$event => selectItem(null, $event)"
 			>
-				<VChip
-					v-for="item in selectedItem"
-					:key="props.returnObject ? item[props.valueKey] : item"
-					size="small"
-					class="ma-1"
-					closable
-					:close-label="`Supprimer ${getChipText(item)}`"
-					@click:close="removeChip(item)"
-				>
-					{{ getChipText(item) }}
-				</VChip>
-			</div>
-			<template #append-inner>
-				<SyIcon
-					v-if="hasError"
-					class="mr-6"
-					:icon="mdiInformation"
-					:decorative="false"
-					label="Information"
-					role="img"
-				/>
-				<button
-					v-if="props.clearable && selectedItemText"
-					type="button"
-					class="sy-select__clear-button"
-					:style="{ right: hasError ? '38px' : '32px' }"
-					:aria-label="locales.clear"
-					@keydown.enter.prevent="$event => selectItem(null, $event)"
-					@keydown.space.prevent="$event => selectItem(null, $event)"
-					@click.stop.prevent="$event => selectItem(null, $event)"
-				>
-					<SyIcon
-						class="sy-select__clear-icon"
-						:icon="mdiCloseCircle"
-						:decorative="true"
-					/>
-				</button>
 				<SyIcon
-					class="arrow"
-					:icon="mdiMenuDown"
+					class="sy-select__clear-icon"
+					:icon="mdiCloseCircle"
 					:decorative="true"
 				/>
-			</template>
-		</VTextField>
-		<span
-			ref="labelRef"
-			class="hidden-label"
-		>{{ label }}</span>
-		<VList
-			v-if="isOpen"
-			:id="menuId"
-			class="v-list"
-			role="listbox"
-			:aria-multiselectable="props.multiple ? 'true' : undefined"
-			:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-			:style="{
-				minWidth: `${input?.$el.offsetWidth}px`,
-				...listStyles
-			}"
-			bg-color="white"
-			tabindex="0"
-			:title="props.multiple ? 'Sélection multiple' : 'Sélection'"
-			@keydown.esc.prevent="closeList"
-			@keydown.tab.prevent="closeList"
-			@keydown.enter.prevent="handleEnterKey"
-			@keydown.down.prevent="handleDownKey"
-			@keydown.up.prevent="handleUpKey"
-			@click.stop
+			</button>
+			<SyIcon
+				class="arrow"
+				:icon="mdiMenuDown"
+				:decorative="true"
+			/>
+		</template>
+	</VTextField>
+	<span
+		ref="labelRef"
+		class="hidden-label"
+	>{{ label }}</span>
+	<VList
+		v-if="isOpen"
+		:id="menuId"
+		class="v-list"
+		role="listbox"
+		:aria-multiselectable="props.multiple ? 'true' : undefined"
+		:aria-label="$attrs['aria-label'] || labelWithAsterisk"
+		:style="{
+			minWidth: `${input?.$el.offsetWidth}px`,
+			...listStyles
+		}"
+		bg-color="white"
+		tabindex="0"
+		:title="props.multiple ? 'Sélection multiple' : 'Sélection'"
+		@keydown.esc.prevent="closeList"
+		@keydown.tab.prevent="closeList"
+		@keydown.enter.prevent="handleEnterKey"
+		@keydown.down.prevent="handleDownKey"
+		@keydown.up.prevent="handleUpKey"
+		@click.stop
+	>
+		<VListItem
+			v-for="(item, index) in formattedItems"
+			:id="`option-${index}`"
+			:key="index"
+			:ref="'options-' + index"
+			role="option"
+			class="v-list-item"
+			:aria-selected="(isItemSelected(item) || `option-${index}` === activeDescendantId) ? 'true' : 'false'"
+			tabindex="-1"
+			:class="{ active: isItemSelected(item) || `option-${index}` === activeDescendantId }"
+			@click.stop="(event) => selectItem(item, event)"
 		>
-			<VListItem
-				v-for="(item, index) in formattedItems"
-				:id="`option-${index}`"
-				:key="index"
-				:ref="'options-' + index"
-				role="option"
-				class="v-list-item"
-				:aria-selected="(isItemSelected(item) || `option-${index}` === activeDescendantId) ? 'true' : 'false'"
-				tabindex="-1"
-				:class="{ active: isItemSelected(item) || `option-${index}` === activeDescendantId }"
-				@click.stop="(event) => selectItem(item, event)"
+			<template
+				v-if="props.multiple && !isDefaultOption(item)"
+				#prepend
 			>
-				<template
-					v-if="props.multiple && !isDefaultOption(item)"
-					#prepend
-				>
-					<SyCheckbox
-						:model-value="isItemSelected(item)"
-						density="compact"
-						hide-details
-						color="primary"
-						class="mt-0 pt-0 mr-1"
-						:title="getItemText(item)"
-						:aria-label="getItemText(item)"
-						@click.stop="(event) => selectItem(item, event)"
-					/>
-				</template>
-				<VListItemTitle>
-					{{ getItemText(item) }}
-				</VListItemTitle>
-			</VListItem>
-		</VList>
-	</div>
+				<SyCheckbox
+					:model-value="isItemSelected(item)"
+					density="compact"
+					hide-details
+					color="primary"
+					class="mt-0 pt-0 mr-1"
+					:title="getItemText(item)"
+					:aria-label="getItemText(item)"
+					@click.stop="(event) => selectItem(item, event)"
+				/>
+			</template>
+			<VListItemTitle>
+				{{ getItemText(item) }}
+			</VListItemTitle>
+		</VListItem>
+	</VList>
 </template>
 
 <style scoped lang="scss">
@@ -715,7 +713,6 @@
 }
 
 .v-list {
-	left: inherit !important;
 	margin-top: -22px;
 	max-height: 300px;
 	padding: 0;

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

@@ -6,7 +6,7 @@ import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 import { fn } from '@storybook/test'
 
 const meta = {
-	title: 'Composants/Formulaires/DatePicker/DatePicker',
+	title: 'Composants/Formulaires/DatePicker/CalendarMode',
 	component: DatePicker,
 	decorators: [
 		() => ({
@@ -1201,7 +1201,7 @@ export const BidirectionalValidation: Story = {
 					const startDate = ref<string | null>(null)
 					const endDate = ref<string | null>(null)
 
-					// Références aux composants DatePicker pour accéder à leurs méthodes
+					// Références aux composants CalendarMode pour accéder à leurs méthodes
 					const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
 					const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
 
@@ -1315,7 +1315,7 @@ export const BidirectionalValidation: Story = {
 				const startDate = ref<string | null>(null)
 				const endDate = ref<string | null>(null)
 
-				// Références aux composants DatePicker pour accéder à leurs méthodes
+				// Références aux composants CalendarMode pour accéder à leurs méthodes
 				const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
 				const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
 

package/src/components/DatePicker/{DatePicker → CalendarMode}/DatePicker.vue

@@ -22,7 +22,7 @@
 	const { initializeSelectedDates } = useDateInitialization()
 	const { updateAccessibility, fixAriaAttributes } = useDatePickerAccessibility()
 
-	// Variables pour suivre le mois et l'année actuellement affichés dans le DatePicker
+	// Variables pour suivre le mois et l'année actuellement affichés dans le CalendarMode
 	const currentMonth = ref<string | null>(null)
 	const currentYear = ref<string | null>(null)
 	const currentMonthName = ref<string | null>(null)
@@ -110,7 +110,7 @@
 
 	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
 
-	// Utilisation des composables pour les fonctionnalités du DatePicker
+	// Utilisation des composables pour les fonctionnalités du CalendarMode
 	const { displayWeekendDays } = useWeekendDays(props)
 	const { todayInString } = useTodayButton(props)
 	const { labelWithAsterisk } = useAsteriskDisplay(props)
@@ -503,7 +503,7 @@
 		const target = event.target as HTMLElement
 		const container = target.closest('.date-picker-container')
 
-		// Si on clique dans le conteneur du DatePicker, on ne fait rien
+		// Si on clique dans le conteneur du CalendarMode, on ne fait rien
 		if (container) return
 		emit('closed')
 		// Déclencher la validation à la fermeture
@@ -644,7 +644,7 @@
 		})
 	}
 
-	// Utilisation du composable pour gérer le mode d'affichage du DatePicker
+	// Utilisation du composable pour gérer le mode d'affichage du CalendarMode
 	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
 		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
 		() => props.isBirthDate || props.birthDate,

package/src/components/DatePicker/{DatePicker → CalendarMode}/tests/DatePicker.events.spec.ts

@@ -4,7 +4,7 @@ import { vuetify } from '@tests/unit/setup'
 import { nextTick } from 'vue'
 import DatePicker from '../DatePicker.vue'
 
-describe('DatePicker.vue - Events', () => {
+describe('CalendarMode.vue - Events', () => {
 	let wrapper
 
 	beforeEach(() => {

package/src/components/DatePicker/{DatePicker → CalendarMode}/tests/DatePicker.spec.ts

@@ -4,7 +4,7 @@ import { vuetify } from '@tests/unit/setup'
 import { nextTick } from 'vue'
 import DatePicker from '../DatePicker.vue'
 
-describe('DatePicker.vue', () => {
+describe('CalendarMode.vue', () => {
 	let wrapper
 
 	beforeEach(() => {
@@ -47,16 +47,16 @@ describe('DatePicker.vue', () => {
 	})
 
 	it('renders the date picker with proper structure', async () => {
-		// Ouvrir le DatePicker pour que les éléments soient dans le DOM
+		// Ouvrir le CalendarMode pour que les éléments soient dans le DOM
 		wrapper.vm.isDatePickerVisible = true
 		await nextTick()
-		// Simuler un clic pour s'assurer que le DatePicker est complètement initialisé
+		// Simuler un clic pour s'assurer que le CalendarMode est complètement initialisé
 		const input = wrapper.find('input')
 		await input.trigger('click')
 		await nextTick()
 		// Attendre un peu pour que le DOM soit mis à jour
 		await new Promise(resolve => setTimeout(resolve, 100))
-		// Vérifier que le DatePicker est visible
+		// Vérifier que le CalendarMode est visible
 		const datePickerEl = document.querySelector('.v-date-picker')
 		expect(datePickerEl).not.toBeNull()
 		// Vérifier qu'il y a des boutons de navigation

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.mdx

@@ -81,7 +81,7 @@ Le composant permet la sélection de plages de dates avec validation automatique
 
 Vous pouvez personnaliser la position de l'icône du calendrier (au début ou à la fin du champ).
 
-<Canvas of={DatePickerStories.WithCustomIcons}/>
+<Canvas of={DatePickerStories.AppendIcon}/>
 
 ## Activation par le champ de texte
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '../DatePicker/DatePicker.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
 import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, onMounted } from 'vue'
 import { fn } from '@storybook/test'
@@ -113,7 +113,7 @@ const meta = {
 		},
 		textFieldActivator: {
 			control: 'boolean',
-			description: 'Utilise le TextField comme activateur du DatePicker',
+			description: 'Utilise le TextField comme activateur du CalendarMode',
 		},
 		displayTodayButton: {
 			control: 'boolean',
@@ -884,7 +884,7 @@ export const ReadonlyMode: Story = {
 	},
 }
 
-export const WithCustomIcons: Story = {
+export const AppendIcon: Story = {
 	parameters: {
 		sourceCode: [
 			{