@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -103,7 +103,7 @@
 .visual-picker-header {
 	padding-block: 16px;
 	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 }
 
 .visual-picker-header__title {
@@ -143,7 +143,7 @@
 
 	&:focus-visible {
 		/* stylelint-disable-next-line custom-property-pattern */
-		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+		outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 	}
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/YearSelector.vue

@@ -132,7 +132,7 @@
 
 	&:hover {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+		background-color: rgb(var(--v-theme-primaryVariant, 7, 39, 92));
 	}
 }
 

package/src/components/NirField/NirField.vue

@@ -594,16 +594,16 @@
 
 .sy-number-errors,
 .sy-key-errors {
-	color: rgb(var(--v-theme-textError));
+	color: rgb(var(--v-theme-error));
 }
 
 .sy-number-warnings,
 .sy-key-warnings {
-	color: rgb(var(--v-theme-textWarning));
+	color: rgb(var(--v-theme-onWarningVariant));
 }
 
 .sy-number-success,
 .sy-key-success {
-	color: rgb(var(--v-theme-textSuccess));
+	color: rgb(var(--v-theme-onSuccessVariant));
 }
 </style>

package/src/components/NotificationBar/Notification/Notification.vue

@@ -137,38 +137,38 @@
 
 	/* stylelint-disable custom-property-pattern */
 	.notification--info {
-		background-color: rgb(var(--v-theme-backgroundInfoContrasted, '12, 65, 154'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-info));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 
 	.notification--success {
-		background-color: rgb(var(--v-theme-backgroundSuccessContrasted, '86, 194, 113'));
-		color: rgb(var(--v-theme-textBase, '0, 0, 0'));
+		background-color: rgb(var(--v-theme-success, '86, 194, 113'));
+		color: rgb(var(--v-theme-onSuccess));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textBase, '0, 0, 0'));
+			outline: 2px solid rgb(var(--v-theme-onSuccess));
 		}
 	}
 
 	.notification--warning {
-		background-color: rgb(var(--v-theme-backgroundWarningContrasted, '240, 179, 35'));
-		color: rgb(var(--v-theme-textBase, '0, 0, 0'));
+		background-color: rgb(var(--v-theme-warning));
+		color: rgb(var(--v-theme-onWarning));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textBase, '0, 0, 0'));
+			outline: 2px solid rgb(var(--v-theme-onSurface));
 		}
 	}
 
 	.notification--error {
-		background-color: rgb(var(--v-theme-backgroundErrorContrasted, '179, 63, 46'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-error));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -649,13 +649,13 @@ export const WithClearQueue: Story = (args) => {
                 Ajouter info
               </VBtn>
               <VBtn
-                  color="success"
+                  color="onSuccessVariant"
                   @click="envoyerNotification('Notification succès', 'success')"
               >
                 Ajouter succès
               </VBtn>
               <VBtn
-                  color="warning"
+                  color="onWarningVariant"
                   @click="envoyerNotification('Notification avertissement', 'warning')"
               >
                 Ajouter avertissement
@@ -719,13 +719,13 @@ export const showAll: Story = (args) => {
 				Ajouter info
 			  </VBtn>
 			  <VBtn
-				  color="success"
+				  color="onSuccessVariant"
 				  @click="envoyerNotification('Notification succès', 'success')"
 			  >
 				Ajouter succès
 			  </VBtn>
 			  <VBtn
-				  color="warning"
+				  color="onWarningVariant"
 				  @click="envoyerNotification('Notification avertissement', 'warning')"
 			  >
 				Ajouter avertissement
@@ -769,14 +769,14 @@ showAll.parameters = {
 						Ajouter une notification info
 					</VBtn>
 					<VBtn
-						color="success"
-						@click="envoyerNotification('Notification succès', 'success')"
+						color="onSuccessVariant"
+						@click="envoyerNotification('Notification succès', 'onSuccessVariant')"
 					>
 						Ajouter une notification succès
 					</VBtn>
 					<VBtn
-						color="warning"
-						@click="envoyerNotification('Notification avertissement', 'warning')"
+						color="onWarningVariant"
+						@click="envoyerNotification('Notification avertissement', 'onWarningVariant')"
 					>
 						Ajouter une notification avertissement
 					</VBtn>

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -3,7 +3,7 @@
 	import type { DataOptions, SortOption, GroupOption } from './types'
 	import { LocalStorageUtility } from '@/utils/localStorageUtility'
 	import Pagination from './Pagination.vue'
-	import type { VDataTable } from 'vuetify/components'
+	import type { VDataTable } from 'vuetify/components/VDataTable'
 
 	const props = defineProps({
 		serverItemsLength: {

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>
@@ -78,7 +78,7 @@
 }
 
 :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 }
 
 :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
@@ -86,6 +86,6 @@
 }
 
 :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 </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
@@ -358,10 +362,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderWarning)) !important;
+		color: rgb(var(--v-theme-warning)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 
@@ -369,7 +373,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 }
@@ -377,11 +381,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 }
 
@@ -393,10 +397,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -404,7 +408,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }

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

@@ -16,12 +16,12 @@ interface PasswordFieldVM {
 
 describe('PasswordField.vue', () => {
 	it('renders the password field', () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		expect(wrapper.exists()).toBe(true)
 	})
 
 	it('toggles password visibility', async () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		// 2. Cast wrapper.vm as your interface
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
@@ -34,7 +34,7 @@ describe('PasswordField.vue', () => {
 	})
 
 	it('emits update:modelValue event on input', async () => {
-		const wrapper = mount(PasswordField)
+		const wrapper = mount(PasswordField, { props: { label: 'Password' } })
 		const input = wrapper.find('input')
 		await input.setValue('new-password')
 		expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['new-password'])

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"

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',
 		},
 	)
 
@@ -259,9 +255,6 @@ $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);
@@ -280,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-infoVariant));
 	}
 }
 
@@ -305,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;
@@ -320,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;
@@ -358,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;
 }
@@ -388,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-primary));
 	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: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	padding: 4px 8px;
 	border-radius: 4px;
 	will-change: transform;

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)"
@@ -184,7 +168,7 @@
 	border: 0;
 }
 
-.sy-emotion-picker__item:not([disabled]) {
+.sy-emotion-picker__item:not([aria-disabled='true']) {
 	cursor: pointer;
 }
 
@@ -238,8 +222,8 @@
 		}
 	}
 
-	&: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