@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/PaginatedTable/Pagination.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { VPagination } from 'vuetify/components'
 	import { usePagination } from 'vuetify/lib/components/VDataTable/composables/paginate.mjs'
 	import SySelect from '../Customs/Selects/SySelect/SySelect.vue'
 	import { useLocale } from 'vuetify'
@@ -31,6 +30,7 @@
 				density="compact"
 				variant="outlined"
 				hide-details
+				disable-error-handling
 				@update:model-value="v => setItemsPerPage(Number(v))"
 			/>
 		</div>
@@ -58,8 +58,6 @@
 	</div>
 </template>
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 /* stylelint-disable-next-line selector-class-pattern */
 :deep(.v-field__outline__notch, .v-field-label) {
 	width: 0;
@@ -75,12 +73,12 @@
 }
 
 :deep(.v-pagination) button:focus-visible {
-	outline: 2px solid tokens.$colors-interactive;
+	outline: 2px solid var(--v-theme-colors-interactive);
 	outline-offset: -2px;
 }
 
 :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: tokens.$colors-icon-base;
+	color: rgb(var(--v-theme-iconBase));
 }
 
 :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
@@ -88,6 +86,6 @@
 }
 
 :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: #000;
+	color: rgb(var(--v-theme-textBase));
 }
 </style>

package/src/components/PasswordField/PasswordField.vue

@@ -99,7 +99,7 @@
 	})
 
 	// Initialisation du composable de validation
-	const { errors, warnings, successes, validateField } = !props.readonly
+	const { errors, warnings, successes, displaySuccesses, validateField } = !props.readonly
 		? useValidation({
 			showSuccessMessages: props.showSuccessMessages,
 			fieldIdentifier: props.label || 'password',
@@ -109,12 +109,13 @@
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
+			displaySuccesses: ref<string[]>([]),
 			validateField: () => ({ hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }),
 		}
 
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
-	const hasSuccess = computed(() => successes.value.length > 0 && props.showSuccessMessages)
+	const hasSuccess = computed(() => successes.value.length > 0 && !hasError.value && !hasWarning.value)
 
 	const validationIcon = computed(() => {
 		if (hasError.value) return mdiAlertCircle
@@ -254,7 +255,9 @@
 		:required="props.required"
 		:error-messages="errors"
 		:warning-messages="warnings"
-		:success-messages="successes"
+		:success-messages="displaySuccesses"
+		:has-success="hasSuccess"
+		:show-success-messages="props.showSuccessMessages"
 		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
@@ -283,6 +286,7 @@
 				class="d-flex align-center"
 			>
 				<SyIcon
+					v-if="validationIcon"
 					:icon="validationIcon"
 					:color="validationColor"
 					decorative
@@ -320,8 +324,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .vd-password {
 	:deep(.v-field) {
 		.v-field__input {
@@ -360,10 +362,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -371,7 +373,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -379,11 +381,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
@@ -395,10 +397,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -406,7 +408,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

package/src/components/PhoneField/PhoneField.vue

@@ -36,6 +36,7 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
+		showSuccessMessages: { type: Boolean, default: true },
 		bgColor: { type: String, default: 'white' },
 		readonly: { type: Boolean, default: false },
 		disabled: { type: Boolean, default: false },
@@ -300,7 +301,7 @@
 	})
 
 	const validation = useValidation({
-		showSuccessMessages: true,
+		showSuccessMessages: props.showSuccessMessages,
 		disableErrorHandling: shouldDisableErrorHandling.value,
 	})
 
@@ -326,7 +327,7 @@
 	const successes = computed(() =>
 		shouldDisableErrorHandling.value || hasError.value || hasWarning.value
 			? []
-			: validation.successes.value,
+			: validation.displaySuccesses.value,
 	)
 
 	const showHelpTextBelow = computed(() => !!props.helpText?.trim())
@@ -475,6 +476,7 @@
 					:error-messages="errors"
 					:warning-messages="warnings"
 					:success-messages="successes"
+					:show-success-messages="props.showSuccessMessages"
 					:disable-error-handling="shouldDisableErrorHandling"
 					:variant="outlined ? 'outlined' : 'underlined'"
 					:display-asterisk="displayAsterisk"
@@ -540,7 +542,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .phone-field-fieldset {
 	border: 1px solid #b9b9b9;
@@ -560,7 +562,7 @@
 }
 
 .required-asterisk {
-	color: #d32f2f;
+	color: rgb(var(--v-theme-error));
 	margin-left: 4px;
 }
 
@@ -581,7 +583,7 @@
 	width: 100%;
 }
 
-@media (width >= 600px) {
+@media #{bp.$up-sm} {
 	.phone-field-container {
 		flex-direction: row;
 		align-items: stretch;

package/src/components/RangeField/RangeSlider/RangeSlider.vue

@@ -3,7 +3,6 @@
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
 
 <script setup lang="ts">
-	import { cnamColorsTokens } from '@/designTokens'
 	import { computed, ref, toRef, watch, type Ref } from 'vue'
 	import Tooltip from './Tooltip/Tooltip.vue'
 	import type { PropsStyle } from './types'
@@ -27,15 +26,12 @@
 				maxLabel?: string
 			}>(),
 		{
-			'modelValue': () => [],
-			'min': 0,
-			'max': 100,
-			'step': 1,
-			'minLabel': 'Minimum',
-			'maxLabel': 'Maximum',
-			'thumb-color': cnamColorsTokens.blue.base,
-			'track-color': cnamColorsTokens.blue.lighten60,
-			'track-fill-color': cnamColorsTokens.blue.lighten20,
+			modelValue: () => [],
+			min: 0,
+			max: 100,
+			step: 1,
+			minLabel: 'Minimum',
+			maxLabel: 'Maximum',
 		},
 	)
 
@@ -254,16 +250,11 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 $virtual-thumb-size: 40px;
 
 .wrapper {
 	--sy-track-height: 4px;
 	--sy-thumb-size: 20px;
-	--sy-thumb-color: v-bind(props.thumbColor);
-	--sy-track-color: v-bind(props.trackColor);
-	--sy-track-fill-color: v-bind(props.trackFillColor);
 
 	position: relative;
 	margin-inline: var(--sy-thumb-size);
@@ -282,7 +273,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(0, -50%);
 		width: 100%;
 		height: var(--sy-track-height);
-		background-color: var(--sy-track-color);
+		background-color: rgb(var(--v-theme-backgroundInfoSubdued));
 	}
 }
 
@@ -307,7 +298,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(-50%, -50%);
 		width: var(--sy-thumb-size);
 		height: var(--sy-thumb-size);
-		background-color: var(--sy-thumb-color);
+		background-color: rgb(var(--v-theme-primary));
 		border-radius: 50%;
 		transform-origin: bottom right;
 		transition: transform 0.1s;
@@ -322,7 +313,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(-50%, -50%);
 		width: var(--sy-thumb-size);
 		height: var(--sy-thumb-size);
-		background-color: var(--sy-thumb-color);
+		background-color: rgb(var(--v-theme-primary));
 		opacity: 0.4;
 		border-radius: 50%;
 		transform-origin: bottom right;
@@ -360,7 +351,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(-50%, -50%);
 	width: var(--sy-thumb-size);
 	height: var(--sy-thumb-size);
-	background-color: var(--sy-thumb-color);
+	background-color: rgb(var(--v-theme-primary));
 	border-radius: 50%;
 	box-shadow: 0 1px 5px 0 #0000001f, 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003;
 }
@@ -390,7 +381,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(0, -50%);
 	width: 100%;
 	height: var(--sy-track-height);
-	background-color: var(--sy-track-fill-color);
+	background-color: rgb(var(--v-theme-accentPrimaryLight));
 	transition: all 0.1s;
 }
 

package/src/components/RangeField/RangeSlider/Tooltip/Tooltip.vue

@@ -57,7 +57,7 @@
 	position: absolute;
 	bottom: 0;
 	background-color: rgb(0 0 0 / 70%);
-	color: #fff;
+	color: rgb(var(--v-theme-textOnDark));
 	padding: 4px 8px;
 	border-radius: 4px;
 	will-change: transform;

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

@@ -0,0 +1,65 @@
+import RangeField from '../RangeField.vue'
+
+describe('RangeField - Visual regression tests', () => {
+	it('displays the component by default', () => {
+		cy.mountWithVuetify(RangeField)
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-default')
+	})
+
+	it('displays with custom min/max values', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 500,
+				'modelValue': [100, 400],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-range')
+	})
+
+	it('displays with custom step', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 100,
+				'step': 10,
+				'modelValue': [20, 80],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-step')
+	})
+
+	it('displays with fieldset label', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'fieldsetLabel': 'Fourchette de prix (€)',
+				'min': 0,
+				'max': 1000,
+				'modelValue': [200, 800],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-with-label')
+	})
+
+	it('displays with custom background', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				bgColor: '#f0f0f0',
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-bg')
+	})
+})

package/src/components/RatingPicker/EmotionPicker/EmotionPicker.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-	import { type PropType, computed, onMounted, ref } from 'vue'
+	import { type PropType, computed, onMounted, toRef } from 'vue'
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import { propValidator } from '@/utils/propValidator'
+	import { useRatingFocus } from '../useRatingFocus'
 	import {
 		mdiEmoticonHappyOutline,
 		mdiEmoticonSadOutline,
@@ -81,45 +82,27 @@
 		return props.itemLabels[value]
 	}
 
-	const ratingElement = ref<HTMLDivElement[]>([])
-	function focusNextElement(index: number) {
-		const currentIndex = ratingElement.value?.findIndex(el => el === ratingElement.value[index]) ?? -1
-		const nextIndex = currentIndex < (props.length - 1) ? currentIndex + 1 : 0
-		const nextElem = ratingElement.value?.[nextIndex]
-
-		ratingElement.value[index]?.setAttribute('tabindex', '-1')
-		nextElem?.setAttribute('tabindex', '0')
-		nextElem?.focus()
-	}
-
-	function focusPrevElement(index: number) {
-		const currentIndex = ratingElement.value?.findIndex(el => el === ratingElement.value[index]) ?? -1
-		const prevIndex = currentIndex > 0 ? currentIndex - 1 : (props.length - 1)
-		const prevElem = ratingElement.value?.[prevIndex]
-
-		ratingElement.value[index]?.setAttribute('tabindex', '-1')
-		prevElem?.setAttribute('tabindex', '0')
-		prevElem?.focus()
-	}
+	const {
+		ratingElement,
+		initFocus,
+		selectAndFocus,
+		focusNextElement,
+		focusPrevElement,
+		focus,
+	} = useRatingFocus({
+		length: toRef(props, 'length'),
+		modelValue: internalValue,
+		selectValue: emitInputEvent,
+		wrap: true,
+	})
 
-	function setFocus(index: number) {
-		ratingElement.value.forEach((el, i) => {
-			if (i === index) {
-				el?.setAttribute('tabindex', '0')
-			}
-			else {
-				el?.setAttribute('tabindex', '-1')
-			}
-		})
-	}
+	defineExpose({
+		focus,
+	})
 
 	onMounted(() => {
-		ratingElement.value[0]?.setAttribute('tabindex', '0')
-		for (let i = 1; i < ratingElement.value.length; i++) {
-			ratingElement.value[i]?.setAttribute('tabindex', '-1')
-		}
+		initFocus()
 	})
-
 </script>
 
 <template>
@@ -142,22 +125,23 @@
 				:key="index"
 				ref="ratingElement"
 				v-ripple="!(props.readonly || hasAnswered)"
+				:tabindex="-1"
 				role="radio"
-				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
-				:aria-checked="isActive(index) ? 'true' : undefined"
+				:aria-checked="isActive(index) ? 'true' : 'false'"
 				:class="[getColor(index - 1), { 'sy-emotion-picker__item--active': isActive(index) }]"
 				:style="{
 					'min-height': btnSize,
 					'min-width': btnSize
 				}"
+				:aria-disabled="(props.readonly || hasAnswered) ? 'true' : undefined"
 				class="sy-emotion-picker__item rounded-lg px-1 px-sm-4 mx-1 mx-sm-2"
-				@click="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.enter="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.space="emitInputEvent(index); setFocus(index - 1)"
-				@keyup.right="focusNextElement(index - 1)"
-				@keyup.left="focusPrevElement(index - 1)"
-				@keyup.up="focusPrevElement(index - 1)"
-				@keyup.down="focusNextElement(index - 1)"
+				@click="selectAndFocus(index - 1)"
+				@keydown.enter.prevent="selectAndFocus(index - 1)"
+				@keydown.space.prevent="selectAndFocus(index - 1)"
+				@keydown.right.prevent="focusNextElement(index - 1)"
+				@keydown.left.prevent="focusPrevElement(index - 1)"
+				@keydown.up.prevent="focusPrevElement(index - 1)"
+				@keydown.down.prevent="focusNextElement(index - 1)"
 			>
 				<SyIcon
 					:icon="getIcon(index - 1)"
@@ -179,14 +163,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-emotion-picker {
 	display: flex;
 	border: 0;
 }
 
-.sy-emotion-picker__item:not([disabled]) {
+.sy-emotion-picker__item:not([aria-disabled='true']) {
 	cursor: pointer;
 }
 
@@ -201,15 +183,15 @@
 	flex-direction: column;
 
 	&.sad {
-		color: tokens.$orange-darken-20 !important;
+		color: rgb(var(--v-theme-orange-darken20)) !important;
 	}
 
 	&.neutral {
-		color: tokens.$yellow-darken-60 !important;
+		color: rgb(var(--v-theme-yellow-darken60)) !important;
 	}
 
 	&.happy {
-		color: tokens.$turquoise-darken-60 !important;
+		color: rgb(var(--v-theme-turquoise-darken60)) !important;
 	}
 
 	&--active.sy-emotion-picker__item--disabled .v-icon {
@@ -228,20 +210,20 @@
 	&:focus,
 	&:hover {
 		&.sad {
-			background: tokens.$orange-lighten-90;
+			background: rgb(var(--v-theme-orange-lighten90));
 		}
 
 		&.neutral {
-			background: tokens.$yellow-lighten-90;
+			background: rgb(var(--v-theme-yellow-lighten90));
 		}
 
 		&.happy {
-			background: tokens.$turquoise-lighten-90;
+			background: rgb(var(--v-theme-turquoise-lighten90));
 		}
 	}
 
-	&:hover[disabled='true']:not([aria-checked='true']),
-	&:focus[disabled='true']:not([aria-checked='true']) {
+	&:hover[aria-disabled='true']:not([aria-checked='true']),
+	&:focus[aria-disabled='true']:not([aria-checked='true']) {
 		background-color: transparent;
 	}
 }

package/src/components/RatingPicker/EmotionPicker/tests/__snapshots__/EmotionPicker.spec.ts.snap

@@ -21,6 +21,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
     role="radiogroup"
   >
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -110,6 +111,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -199,6 +201,7 @@ exports[`EmotionPicker > renders correctly 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         happy
         mx-1
@@ -312,6 +315,7 @@ exports[`EmotionPicker > renders correctly with only 2 items 1`] = `
     role="radiogroup"
   >
     <div
+      aria-checked="false"
       class="
         mx-1
         mx-sm-2
@@ -401,6 +405,7 @@ exports[`EmotionPicker > renders correctly with only 2 items 1`] = `
       </span>
     </div>
     <div
+      aria-checked="false"
       class="
         happy
         mx-1