@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Amelipro/AmeliproTileBtn/AmeliproTileBtn.vue

@@ -370,14 +370,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-tile-btn {
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	background-color: apTokens.$ap-white;
-	border-radius: 0.5rem;
+	background-color: rgb(var(--v-theme-surface));
+	border-radius: var(--v-ap-inputRadius);
 	white-space: normal;
 }
 
@@ -398,7 +396,7 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-btn__content) {

package/src/components/Amelipro/AmeliproTooltips/AmeliproTooltips.vue

@@ -114,8 +114,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	&.tooltip-btn {
 		width: 1.85em !important;

package/src/components/Amelipro/AmeliproUpload/AmeliproUpload.vue

@@ -643,14 +643,14 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-upload {
-	padding: apTokens.$card-padding-tablet;
-	border-radius: apTokens.$card-radius;
+	padding: var(--v-ap-cardPaddingDesktop);
+	border-radius: var(--v-ap-btnRadius);
 
-	@media #{apTokens.$media-only-xs} {
-		padding: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding: var(--v-ap-cardPaddingMobile);
 	}
 }
 
@@ -687,7 +687,7 @@
 	}
 
 	& :deep(.label-outline) {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-input__control) {

package/src/components/Amelipro/ServiceMenu/ServiceMenu.vue

@@ -174,7 +174,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 :deep(.v-overlay__content) {
 	top: 40px;
@@ -183,7 +183,7 @@
 	z-index: 8;
 	border-radius: 4px;
 
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		left: -800px;
 	}
 }

package/src/components/Amelipro/StructureMenu/StructureBtn/StructureBtn.vue

@@ -52,7 +52,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .v-btn {
 	letter-spacing: unset;
@@ -74,10 +74,10 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		margin-bottom: 8px;
 		width: 100% !important;
 	}
@@ -87,7 +87,7 @@
 	opacity: 1 !important;
 
 	:deep(.v-btn__content) {
-		color: apTokens.$ap-grey !important;
+		color: rgb(var(--v-theme-ap-grey)) !important;
 	}
 }
 </style>

package/src/components/Amelipro/StructureMenu/StructureItem/StructureItem.vue

@@ -107,8 +107,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 input {
 	position: absolute;
 	width: 0;
@@ -122,17 +120,17 @@ input {
 
 .hover-style {
 	&:hover {
-		background-color: apTokens.$ap-blue-lighten3 !important;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3)) !important;
 	}
 }
 
 .selected-border {
-	border: 1px solid apTokens.$ap-blue;
+	border: 1px solid rgb(var(--v-theme-ap-blue));
 }
 
 .structure {
-	font-size: apTokens.$font-size-xs;
-	color: apTokens.$ap-grey-darken1;
+	font-size: var(--v-ap-fontSizeXs);
+	color: rgb(var(--v-theme-ap-grey-darken-1));
 
 	.name {
 		font-weight: 600;

package/src/components/Amelipro/StructureMenu/StructureMenu.vue

@@ -227,7 +227,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .v-input.amelipro-switch {
 	margin-top: 0;
@@ -237,7 +237,7 @@
 	width: 50% !important;
 	max-width: 50% !important;
 
-	@media #{apTokens.$media-down-md} {
+	@media #{bp.$down-sm} {
 		width: 100% !important;
 		max-width: 100% !important;
 	}

package/src/components/Amelipro/StructureMenu/StructureTabs/StructureTabs.vue

@@ -177,10 +177,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .tabs-btn-wrapper {
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		width: 100% !important;
 	}
 }

package/src/components/Amelipro/UserMenu/UserMenu.vue

@@ -130,8 +130,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn :deep(.v-btn__content) {
 	opacity: 1 !important;
 }
@@ -154,7 +152,7 @@
 }
 
 .user-menu-last-connexion {
-	font-size: apTokens.$font-size-xs;
+	font-size: var(--v-ap-fontSizeXs);
 }
 
 .user-menu__btn--account,

package/src/components/BackBtn/tests/BackBtn.visual.cy.ts

@@ -0,0 +1,43 @@
+import BackBtn from '../BackBtn.vue'
+
+describe('BackBtn - Visual regression tests', () => {
+	it('displays the btn by default', () => {
+		cy.mountWithVuetify(BackBtn)
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('back-btn-default', cy.get('.v-btn'))
+	})
+
+	it('displays the btn without icon', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: { hideBackIcon: true },
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('back-btn-no-icon', cy.get('.v-btn'))
+	})
+
+	it('displays the btn in dark mode', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: {
+				dark: true,
+			},
+		})
+		cy.get('.v-application').invoke('css', 'background-color', '#121212')
+
+		cy.get('.v-btn').should('be.visible')
+		cy.get('.v-btn').matchImageSnapshot('back-btn-dark-mode', cy.get('.v-btn'))
+		cy.get('.v-application').invoke('css', 'background-color', '')
+	})
+
+	it('displays the btn with custom background', () => {
+		cy.mountWithVuetify(BackBtn, {
+			props: { backgroundColor: '#f5f5f5' },
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		// cy.get('.v-btn').matchImageSnapshot('back-btn-custom-bg')
+		// take a snapshot of the button and not the whole page to avoid snapshotting the background color of the page
+		cy.matchImageSnapshot('back-btn-custom-bg', cy.get('.v-btn'))
+	})
+})

package/src/components/Captcha/Captcha.vue

@@ -300,8 +300,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .label-options {
 	font-size: 0.875rem;
 	font-weight: 400;
@@ -310,7 +308,7 @@
 .captcha-audio :deep(.v-btn__content) span {
 	display: flex;
 	align-items: center;
-	gap: tokens.$gap-2;
+	gap: var(--v-gap-2);
 	letter-spacing: 0%;
 }
 

package/src/components/ChipList/ChipList.vue

@@ -302,8 +302,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 // Styles pour la liste HTML native
 .sy-chip-list ul {
 	list-style: none;
@@ -342,30 +340,30 @@
 }
 
 .sy-chip-success {
-	color: tokens.$colors-text-success !important;
-	border: 1px solid tokens.$colors-border-success !important;
+	color: rgb(var(--v-theme-textSuccess)) !important;
+	border: 1px solid rgb(var(--v-theme-borderSuccess)) !important;
 }
 
 .sy-chip-error {
-	color: tokens.$colors-text-error !important;
-	border: 1px solid tokens.$colors-border-error !important;
+	color: rgb(var(--v-theme-textError)) !important;
+	border: 1px solid rgb(var(--v-theme-borderError)) !important;
 }
 
 .sy-chip-info {
-	color: tokens.$colors-text-info !important;
-	border: 1px solid tokens.$colors-border-info !important;
+	color: rgb(var(--v-theme-textInfo)) !important;
+	border: 1px solid rgb(var(--v-theme-borderInfo)) !important;
 }
 
 .sy-chip-warning {
-	color: tokens.$colors-text-warning !important;
-	border: 1px solid tokens.$colors-border-warning !important;
+	color: rgb(var(--v-theme-textWarning)) !important;
+	border: 1px solid rgb(var(--v-theme-borderWarning)) !important;
 }
 
 .overflow-chip {
 	cursor: pointer;
 
 	&:focus-visible {
-		outline: 2px solid tokens.$primary-base !important;
+		outline: 2px solid rgb(var(--v-theme-primary)) !important;
 		outline-offset: 2px !important;
 	}
 }
@@ -377,27 +375,27 @@
 
 // Bouton "Réinitialiser le filtre" - améliorer le contraste de la bordure de focus
 .overflow-btn:focus-visible {
-	outline: 2px solid tokens.$primary-base !important;
+	outline: 2px solid rgb(var(--v-theme-primary)) !important;
 }
 
 // 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 tokens.$colors-border-success !important;
+	outline: 2px solid rgb(var(--v-theme-borderSuccess)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-info .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-info !important;
+	outline: 2px solid rgb(var(--v-theme-borderInfo)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-warning .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-warning !important;
+	outline: 2px solid rgb(var(--v-theme-borderWarning)) !important;
 	outline-offset: -2px !important;
 }
 
 .sy-chip-error .remove-chip:focus-visible {
-	outline: 2px solid tokens.$colors-border-error !important;
+	outline: 2px solid rgb(var(--v-theme-borderError)) !important;
 	outline-offset: -2px !important;
 }
 </style>

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

@@ -180,8 +180,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 details > summary {
 	cursor: pointer;
 	list-style: none;

package/src/components/CopyBtn/CopyBtn.vue

@@ -125,8 +125,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .v-btn:deep() {
 	.v-btn__underlay,
 	.v-btn__overlay {
@@ -143,6 +141,6 @@
 }
 
 .v-btn--icon .v-icon {
-	color: tokens.$grey-lighten-20;
+	color: rgb(var(--v-theme-grey-lighten20));
 }
 </style>

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

@@ -35,7 +35,7 @@
 		(e: 'update:error-messages', value: string[] | undefined): void
 	}>()
 
-	const internalValue = ref<SelectBtnValue>(null)
+	const internalValue = ref<SelectBtnValue>(props.multiple ? [] : null)
 	const darktheme = ref<boolean>(false)
 	const listRef = ref<HTMLElement | null>(null)
 	const optionsRef = ref<Array<HTMLElement>>([])
@@ -48,11 +48,12 @@
 	})
 
 	watch(() => props.modelValue, (value) => {
-		if (value === null && props.multiple) {
-			internalValue.value = []
-			return
+		if (props.multiple) {
+			internalValue.value = Array.isArray(value) ? value : []
+		}
+		else {
+			internalValue.value = value ?? null
 		}
-		internalValue.value = value
 	}, {
 		immediate: true,
 		deep: true,
@@ -79,10 +80,12 @@
 
 	function getNewValue(item: SelectBtnItem): SelectBtnValue {
 		if (props.multiple) {
-			const typedValue = internalValue.value as Array<string | number>
+			const typedValue = Array.isArray(internalValue.value)
+				? internalValue.value
+				: []
 
 			// if the item is unique, select only it
-			if (item.unique && typedValue.includes(item.value) === false) {
+			if (item.unique && !typedValue.includes(item.value)) {
 				return [item.value]
 			}
 
@@ -199,8 +202,7 @@
 		// Don't auto-select if focus was caused by mouse interaction
 		if (isMouseInteraction.value) {
 			const element = e.target as HTMLElement
-			const index = optionsRef.value.findIndex(item => item === element)
-			focusedIndex.value = index
+			focusedIndex.value = optionsRef.value.findIndex(item => item === element)
 			return
 		}
 
@@ -265,7 +267,7 @@
 				}"
 				role="option"
 				:tabindex="index === focusedIndex ? '0' : '-1'"
-				:aria-selected="!props.multiple ? (isSelected(item.value) ? 'true' : 'false') : undefined"
+				:aria-selected="props.multiple ? undefined : (isSelected(item.value) ? 'true' : 'false')"
 				:aria-checked="props.multiple ? (isSelected(item.value) ? 'true' : 'false') : undefined"
 				@keydown.space.prevent="toggleItem(item)"
 				@mousedown="handleMouseDown"
@@ -308,14 +310,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .select-btn-field__options {
 	display: flex;
 	list-style-type: none;
 	padding: 0;
 	margin: 0;
-	gap: tokens.$gap-2;
+	gap: var(--v-gap-2);
 }
 
 .select-btn-field__options--inline {
@@ -335,10 +335,10 @@
 	cursor: pointer;
 	position: relative;
 	transition: background-color 0.2s, color 0.2s;
-	background-color: #fff;
+	background-color: rgb(var(--v-theme-surface));
 
 	&--selected {
-		color: #fff;
+		color: rgb(var(--v-theme-textOnDark));
 		background-color: rgb(var(--v-theme-primary));
 	}
 
@@ -377,7 +377,7 @@
 }
 
 .select-btn-field__options--error .select-btn-field__item {
-	color: tokens.$colors-text-error;
-	border-color: tokens.$colors-border-error;
+	color: rgb(var(--v-theme-textError));
+	border-color: rgb(var(--v-theme-borderError));
 }
 </style>

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

@@ -118,6 +118,37 @@ describe('SelectBtnField', () => {
 		])
 	})
 
+	it('handles multiple mode safely when modelValue is null', async () => {
+		const wrapper = mount(SelectBtnField, {
+			props: {
+				label: 'Test',
+				hint: 'Test',
+				items: [
+					{
+						text: 'Test',
+						value: 'test',
+					},
+					{
+						text: 'Test 2',
+						value: 'test2',
+					},
+					{
+						text: 'Test 3',
+						value: 'test3',
+					},
+				],
+				multiple: true,
+				modelValue: null,
+			},
+		})
+
+		await wrapper.find('[role="option"]').trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([
+			[['test']],
+		])
+	})
+
 	it(`display correctly with an error`, () => {
 		const wrapper = mount(SelectBtnField, {
 			props: {

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

@@ -125,6 +125,10 @@ const meta: Meta<typeof SyAutocomplete> = {
 			action: 'update:modelValue',
 			description: 'Émis lors de la sélection d\'une option. Reçoit la valeur sélectionnée.',
 		},
+		'disabled': {
+			control: 'boolean',
+			description: 'Désactive le champ',
+		},
 		'readonly': {
 			control: 'boolean',
 			description: 'Rend le champ en lecture seule',
@@ -1199,6 +1203,68 @@ const items = [
 	},
 }
 
+export const DisabledField: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyAutocomplete
+    v-model="selectedValue"
+    :items="items"
+    label="Champ désactivé"
+    disabled
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SyAutocomplete } from '@cnamts/synapse'
+
+const selectedValue = ref('Axel')
+const items = [
+  { text: 'Adrien', value: 'Adrien' },
+  { text: 'Axel', value: 'Axel' },
+  { text: 'Baptiste', value: 'Baptiste' },
+]
+</script>
+        `,
+			},
+		],
+	},
+	args: {
+		items: [
+			{ text: 'Adrien', value: 'Adrien' },
+			{ text: 'Axel', value: 'Axel' },
+			{ text: 'Baptiste', value: 'Baptiste' },
+		],
+		label: 'Champ désactivé',
+		disabled: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyAutocomplete },
+			setup() {
+				const selectedValue = ref('Axel')
+				return { args, selectedValue }
+			},
+			template: `
+				<div class="pa-4">
+					<SyAutocomplete
+						v-model="selectedValue"
+						v-bind="args"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
 export const WithCustomKeys: Story = {
 	parameters: {
 

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

@@ -123,6 +123,10 @@
 			type: String,
 			default: '',
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 		readonly: {
 			type: Boolean,
 			default: false,
@@ -420,6 +424,7 @@
 	}
 
 	const openAndFocus = () => {
+		if (props.disabled || props.readonly) return
 		markInteracted()
 		isOpen.value = true
 		focusInput(textFieldRef)
@@ -488,6 +493,7 @@
 					:placeholder="hasInlineSelections || hasSelectionTextDisplay ? '' : placeholder"
 					:is-active="hasInlineSelections || hasSelectionTextDisplay"
 					:readonly="readonly"
+					:disabled="disabled"
 					:bg-color="bgColor"
 					:density="density"
 					:autocomplete="'off'"
@@ -627,8 +633,6 @@
 </template>
 
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 .sy-autocomplete {
 	width: 100%;
 	position: relative;
@@ -724,7 +728,7 @@ li:hover {
 .v-list-item.keyboard-focused,
 li:focus-visible,
 li.keyboard-focused {
-	outline: 2px solid rgb(var(--v-theme-accentPrimary));
+	outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.a11y.spec.ts

@@ -146,6 +146,24 @@ describe('SyAutocomplete – accessibility (axe)', () => {
 		})
 	})
 
+	it('has no obvious axe violations for disabled field', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: 'Option 1',
+				items,
+				label: 'Champ désactivé',
+				textKey: 'text',
+				valueKey: 'value',
+				disabled: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – disabled field', {
+			ignoreRules: ['region'],
+		})
+	})
+
 	it('has no obvious axe violations when hideDetails is true', async () => {
 		const wrapper = mount(SyAutocomplete, {
 			props: {