@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/ChipList/ChipList.vue

@@ -30,10 +30,17 @@
 	}
 
 	const BACKGROUND_COLORS: Record<NonEmptyChipState, string> = {
-		success: 'backgroundSuccessSubdued',
-		warning: 'backgroundWarningSubdued',
-		error: 'backgroundErrorSubdued',
-		info: 'backgroundInfoSubdued',
+		success: 'successVariant',
+		warning: 'warningVariant',
+		error: 'errorVariant',
+		info: 'infoVariant',
+	} as const
+
+	const ICON_COLORS: Record<NonEmptyChipState, string> = {
+		success: 'onSuccessVariant',
+		warning: 'onWarningVariant',
+		error: 'onErrorVariant',
+		info: 'onInfoVariant',
 	} as const
 
 	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
@@ -128,6 +135,12 @@
 		return state ? BACKGROUND_COLORS[state] : 'primary'
 	}
 
+	function getIconColor(state: ChipState): string {
+		return state ? ICON_COLORS[state] : 'surface'
+	}
+
+	// item.state || 'white'/
+
 	/**
 	 * Retourne l'icône correspondant à l'état du chip
 	 *
@@ -209,7 +222,6 @@
 						<SyIcon
 							v-bind="options.icon"
 							:icon="customIcon || getIcon(item.state)"
-							:color="item.state"
 							decorative
 							class="mr-1"
 						/>
@@ -245,7 +257,7 @@
 						<SyIcon
 							v-bind="options.icon"
 							:icon="deleteIcon"
-							:color="item.state || 'white'"
+							:color="getIconColor(item.state)"
 							decorative
 						/>
 					</VBtn>
@@ -340,23 +352,23 @@
 }
 
 .sy-chip-success {
-	color: rgb(var(--v-theme-textSuccess)) !important;
-	border: 1px solid rgb(var(--v-theme-borderSuccess)) !important;
+	color: rgb(var(--v-theme-onSuccessVariant)) !important;
+	border: 1px solid rgb(var(--v-theme-onSuccessVariant)) !important;
 }
 
 .sy-chip-error {
-	color: rgb(var(--v-theme-textError)) !important;
-	border: 1px solid rgb(var(--v-theme-borderError)) !important;
+	color: rgb(var(--v-theme-onErrorVariant)) !important;
+	border: 1px solid rgb(var(--v-theme-onErrorVariant)) !important;
 }
 
 .sy-chip-info {
-	color: rgb(var(--v-theme-textInfo)) !important;
-	border: 1px solid rgb(var(--v-theme-borderInfo)) !important;
+	color: rgb(var(--v-theme-onInfoVariant)) !important;
+	border: 1px solid rgb(var(--v-theme-onInfoVariant)) !important;
 }
 
 .sy-chip-warning {
-	color: rgb(var(--v-theme-textWarning)) !important;
-	border: 1px solid rgb(var(--v-theme-borderWarning)) !important;
+	color: rgb(var(--v-theme-onWarningVariant)) !important;
+	border: 1px solid rgb(var(--v-theme-onWarningVariant)) !important;
 }
 
 .overflow-chip {
@@ -380,22 +392,22 @@
 
 // Styles spécifiques pour améliorer le contraste de focus selon le thème du chip
 .sy-chip-success .remove-chip:focus-visible {
-	outline: 2px solid rgb(var(--v-theme-borderSuccess)) !important;
+	outline: 2px solid rgb(var(--v-theme-onSuccessVariant)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-info .remove-chip:focus-visible {
-	outline: 2px solid rgb(var(--v-theme-borderInfo)) !important;
+	outline: 2px solid rgb(var(--v-theme-onInfoVariant)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-warning .remove-chip:focus-visible {
-	outline: 2px solid rgb(var(--v-theme-borderWarning)) !important;
+	outline: 2px solid rgb(var(--v-theme-onWarningVariant)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-error .remove-chip:focus-visible {
-	outline: 2px solid rgb(var(--v-theme-borderError)) !important;
+	outline: 2px solid rgb(var(--v-theme-onErrorVariant)) !important;
 	outline-offset: -2px !important;
 }
 </style>

package/src/components/ChipList/tests/chipList.spec.ts

@@ -80,10 +80,10 @@ describe('ChipList', () => {
 		expect(chips[3]?.classes()).toContain('sy-chip-error')
 
 		// Vérifie les couleurs de fond via les classes
-		expect(chips[0]?.classes()).toContain('bg-backgroundSuccessSubdued')
-		expect(chips[1]?.classes()).toContain('bg-backgroundInfoSubdued')
-		expect(chips[2]?.classes()).toContain('bg-backgroundWarningSubdued')
-		expect(chips[3]?.classes()).toContain('bg-backgroundErrorSubdued')
+		expect(chips[0]?.classes()).toContain('bg-successVariant')
+		expect(chips[1]?.classes()).toContain('bg-infoVariant')
+		expect(chips[2]?.classes()).toContain('bg-warningVariant')
+		expect(chips[3]?.classes()).toContain('bg-errorVariant')
 		expect(chips[4]?.classes()).toContain('bg-primary') // État par défaut
 	})
 

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import { isRequired } from '@/utils/rules/isRequired'
-	import type { VRadio, VRadioGroup } from 'vuetify/components'
+	import type { VRadio } from 'vuetify/components/VRadio'
+	import type { VRadioGroup } from 'vuetify/components/VRadioGroup'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 	import { computed, ref, nextTick, onMounted } from 'vue'
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'

package/src/components/CookiesSelection/CookiesSelection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import { computed, ref, onMounted, nextTick } from 'vue'
-	import type { VForm, VBtn } from 'vuetify/components'
+	import type { VForm } from 'vuetify/components/VForm'
+	import type { VBtn } from 'vuetify/components/VBtn'
 	import CookiesInformation from './CookiesInformation/CookiesInformation.vue'
 	import { locales } from './locales'
 	import type { CookieTypes, CookiesItems, Preferences } from './types'

package/src/components/CopyBtn/CopyBtn.vue

@@ -143,4 +143,13 @@
 .v-btn--icon .v-icon {
 	color: rgb(var(--v-theme-grey-lighten20));
 }
+
+.v-theme--ap.v-btn--icon .v-icon {
+	color: rgb(var(--v-theme-primary)) !important;
+	transition: color 0.2s ease;
+
+	&:hover {
+		color: rgb(var(--v-theme-secondary)) !important;
+	}
+}
 </style>

package/src/components/Customs/Selects/SelectBtnField/SelectBtnField.stories.ts

@@ -418,6 +418,10 @@ export const itemUnique: Story = {
 						aria-labelledby="contact-method"
 					/>
 				</div>
+                <p class="text-caption" style="margin-top: 20px;">
+                  Les items marqués avec <code>unique: true</code> sont exclusifs&nbsp;: lorsqu’ils sont sélectionnés,
+                  tous les autres items sont automatiquement désélectionnés.
+                </p>
             `,
 		}
 	},

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

@@ -331,15 +331,15 @@
 	color: rgb(var(--v-theme-primary));
 	border: 1px solid rgb(var(--v-theme-primary));
 	min-height: 56px;
-	border-radius: 4px;
+	border-radius: var(--v-radius-rounded);
 	cursor: pointer;
 	position: relative;
 	transition: background-color 0.2s, color 0.2s;
 	background-color: rgb(var(--v-theme-surface));
 
 	&--selected {
-		color: rgb(var(--v-theme-textOnDark));
 		background-color: rgb(var(--v-theme-primary));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	&:focus-visible {
@@ -355,16 +355,17 @@
 		width: 100%;
 		height: 100%;
 		transition: background-color 0.2s;
+		border-radius: var(--v-radius-rounded);
 	}
 
 	&:hover::before {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgba(var(--v-theme-overlayOnLight), 0.2);
+		background-color: rgba(var(--v-theme-interactionDarkHover), 0.2);
 	}
 
 	&--selected:hover::before {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgba(var(--v-theme-overlayOnDark), 0.2);
+		background-color: rgba(var(--v-theme-interactionLightenHover), 0.2);
 	}
 }
 
@@ -377,7 +378,7 @@
 }
 
 .select-btn-field__options--error .select-btn-field__item {
-	color: rgb(var(--v-theme-textError));
-	border-color: rgb(var(--v-theme-borderError));
+	color: rgb(var(--v-theme-error));
+	border-color: rgb(var(--v-theme-error));
 }
 </style>

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

@@ -321,4 +321,227 @@ describe('SelectBtnField', () => {
 		await wrapper.find('[role="option"]').trigger('click')
 		expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
 	})
+
+	it('emits update:error and update:error-messages when an item is selected', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [{ text: 'Test', value: 'test' }],
+				error: true,
+				errorMessages: ['Champ requis'],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		expect(wrapper.emitted('update:error')).toEqual([[false]])
+		expect(wrapper.emitted('update:error-messages')).toEqual([[undefined]])
+	})
+
+	it('filters out items with null or undefined value', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'Valide', value: 'valide' },
+					{ text: 'Null', value: null as unknown as string },
+					{ text: 'Undefined', value: undefined as unknown as string },
+				],
+			},
+		})
+
+		const options = wrapper.findAll('[role="option"]')
+		expect(options).toHaveLength(1)
+		expect(options[0]!.text()).toContain('Valide')
+	})
+
+	it('syncs internalValue when modelValue prop changes externally', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'a',
+			},
+		})
+
+		let selectedItem = wrapper.find('[aria-selected="true"]')
+		expect(selectedItem.text()).toContain('A')
+
+		await wrapper.setProps({ modelValue: 'b' })
+
+		selectedItem = wrapper.find('[aria-selected="true"]')
+		expect(selectedItem.text()).toContain('B')
+	})
+
+	it('syncs internalValue array when modelValue changes in multiple mode', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				multiple: true,
+				modelValue: ['a'],
+			},
+		})
+
+		expect(wrapper.find('li:nth-child(1)').attributes('aria-checked')).toBe('true')
+		expect(wrapper.find('li:nth-child(2)').attributes('aria-checked')).toBe('false')
+
+		await wrapper.setProps({ modelValue: ['a', 'b'] })
+
+		expect(wrapper.find('li:nth-child(2)').attributes('aria-checked')).toBe('true')
+	})
+
+	it('sets correct ARIA attributes on the listbox', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				label: 'Choix',
+				multiple: true,
+				inline: true,
+				error: true,
+			},
+		})
+
+		const listbox = wrapper.find('[role="listbox"]')
+		expect(listbox.attributes('aria-label')).toBe('Choix')
+		expect(listbox.attributes('aria-multiselectable')).toBe('true')
+		expect(listbox.attributes('aria-orientation')).toBe('horizontal')
+		expect(listbox.attributes('aria-invalid')).toBe('true')
+	})
+
+	it('sets aria-readonly on the listbox when readonly', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: { readonly: true },
+		})
+
+		expect(wrapper.find('[role="listbox"]').attributes('aria-readonly')).toBe('true')
+	})
+
+	it('navigates to next item with ArrowRight key', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+					{ text: 'C', value: 'c' },
+				],
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowRight' })
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowRight' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted!.length).toBeGreaterThanOrEqual(1)
+	})
+
+	it('wraps around to first item when navigating past last with ArrowDown', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'b',
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowDown' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted![emitted!.length - 1]![0]).toBe('a')
+	})
+
+	it('wraps around to last item when navigating before first with ArrowUp', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+				],
+				modelValue: 'a',
+			},
+		})
+
+		await wrapper.find('[role="listbox"]').trigger('keydown', { key: 'ArrowUp' })
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted![emitted!.length - 1]![0]).toBe('b')
+	})
+
+	it('selects item with Space key', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				items: [{ text: 'Test', value: 'test' }],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('keydown', { key: ' ' })
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([['test']])
+	})
+
+	it('selecting unique item when others are selected replaces all', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				multiple: true,
+				items: [
+					{ text: 'A', value: 'a' },
+					{ text: 'B', value: 'b' },
+					{ text: 'Unique', value: 'unique', unique: true },
+				],
+				modelValue: ['a', 'b'],
+			},
+		})
+
+		await wrapper.find('li:nth-child(3)[role="option"]').trigger('click')
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted![emitted!.length - 1]![0]).toEqual(['unique'])
+	})
+
+	it('re-selecting a unique item in multiple mode deselects it', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				multiple: true,
+				items: [
+					{ text: 'Unique', value: 'unique', unique: true },
+				],
+				modelValue: ['unique'],
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted![emitted!.length - 1]![0]).toEqual([])
+	})
+
+	it('displays hint when no errorMessages', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				hint: 'Aide contextuelle',
+				items: [{ text: 'A', value: 'a' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Aide contextuelle')
+	})
+
+	it('displays errorMessages instead of hint when both are provided', () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				hint: 'Aide contextuelle',
+				errorMessages: ['Champ invalide'],
+				items: [{ text: 'A', value: 'a' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Champ invalide')
+		expect(wrapper.text()).not.toContain('Aide contextuelle')
+	})
 })