@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/PasswordField/PasswordField.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 	import {
-		mdiEye,
-		mdiEyeOff,
+		mdiEyeOutline,
+		mdiEyeOffOutline,
 		mdiAlertCircle,
 		mdiAlert,
-		mdiCheckCircle,
+		mdiCheck,
 	} from '@mdi/js'
 	import { ref, computed, watch, nextTick } from 'vue'
 	import { config } from './config'
@@ -63,8 +63,8 @@
 	const options = useCustomizableOptions(config, props)
 	const emit = defineEmits(['update:modelValue', 'submit'])
 
-	const eyeIcon = mdiEye
-	const eyeOffIcon = mdiEyeOff
+	const eyeIcon = mdiEyeOutline
+	const eyeOffIcon = mdiEyeOffOutline
 	const showEyeIcon = ref(false)
 	const passwordFieldId = ref(`password-field-${Math.random().toString(36).substring(2, 10)}`)
 	const alertMessage = ref('')
@@ -133,7 +133,7 @@
 	const validationIcon = computed(() => {
 		if (hasError.value) return mdiAlertCircle
 		if (hasWarning.value) return mdiAlert
-		if (hasSuccess.value) return mdiCheckCircle
+		if (hasSuccess.value) return mdiCheck
 		return ''
 	})
 

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

@@ -33,8 +33,8 @@
 			'step': 1,
 			'minLabel': 'Minimum',
 			'maxLabel': 'Maximum',
-			'thumb-color': cnamColorsTokens.blue.darken80,
-			'track-color': cnamColorsTokens.blue.lighten40,
+			'thumb-color': cnamColorsTokens.blue.base,
+			'track-color': cnamColorsTokens.blue.lighten60,
 			'track-fill-color': cnamColorsTokens.blue.lighten20,
 		},
 	)
@@ -297,6 +297,7 @@ $virtual-thumb-size: 40px;
 	height: $virtual-thumb-size;
 	transition: left 0.1s;
 	will-change: left;
+	font-weight: bold;
 
 	&::before {
 		content: '';

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

@@ -156,6 +156,8 @@
 				@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)"
 			>
 				<SyIcon
 					:icon="getIcon(index - 1)"
@@ -248,7 +250,6 @@
 	font-weight: 700;
 	font-size: 1rem;
 	line-height: 150%;
-	color: tokens.$colors-text-base;
 }
 
 .sy-emotion-picker__item--active .sy-emotion-picker__item-title {

package/src/components/RatingPicker/NumberPicker/NumberPicker.vue

@@ -131,6 +131,8 @@
 						@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)"
 					>
 						{{ index }}
 					</div>

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -40,6 +40,16 @@ const meta = {
 				},
 			},
 		},
+		center: {
+			description: 'Si le champ doit être centré dans la page.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		readonly: {
 			description: 'Si le champ est en lecture seule.',
 			control: 'boolean',

package/src/components/RatingPicker/RatingPicker.vue

@@ -40,6 +40,10 @@
 			type: Number,
 			default: -1,
 		},
+		center: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -92,7 +96,12 @@
 </script>
 
 <template>
-	<div class="sy-rating-picker">
+	<div
+		class="sy-rating-picker"
+		:class="{
+			'sy-rating-picker--center': props.center,
+		}"
+	>
 		<component
 			:is="ratingComponent"
 			:model-value="internalValue"
@@ -125,3 +134,16 @@
 		</template>
 	</div>
 </template>
+
+<style lang="scss" scoped>
+.sy-rating-picker--center :deep(fieldset) {
+	display: flex;
+	justify-content: center;
+}
+
+.sy-rating-picker--center :deep(legend) {
+	width: 100%;
+	text-align: center;
+}
+
+</style>

package/src/components/RatingPicker/StarsPicker/StarsPicker.vue

@@ -104,6 +104,8 @@
 				@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)"
 			>
 				<span class="d-sr-only">{{ locales.etoiles(index) }}</span>
 				<SyIcon

package/src/components/SearchListField/Accessibilite.stories.ts

@@ -184,6 +184,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  	<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/SearchListField.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+                    <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/pull/1499" target="_blank" style="color:#0C41BD;">PR #1499</a>)</p>
+				</div>
             `,
 		}
 	},

package/src/components/SearchListField/SearchListField.stories.ts

@@ -23,6 +23,16 @@ const meta = {
 			description: 'Si true, retourne l\'objet entier au lieu de la valeur',
 			control: 'boolean',
 		},
+		label: {
+			description: 'Label du champ de recherche',
+			control: 'text',
+			default: 'Rechercher',
+		},
+		listLabel: {
+			description: 'Legend pour le fieldset contenant la liste des éléments sélectionnables',
+			control: 'text',
+			default: 'Liste des éléments',
+		},
 	},
 } satisfies Meta<typeof SearchListField>
 
@@ -62,6 +72,8 @@ export const Default: Story = {
 				value: 'pharmacien',
 			},
 		],
+		'label': 'Filtrer la liste des professions',
+		'listLabel': 'Choisisser parmi la liste des professions',
 		'onUpdate:modelValue': fn(),
 	},
 	render: (args) => {
@@ -90,6 +102,7 @@ export const Default: Story = {
   <SearchListField
    	v-model="modelValue"
 	:items="items"
+	label="Filtrer la liste des professions"
   />
   {{ modelValue }}
 </template>
@@ -167,6 +180,8 @@ export const WithReturnObject: Story = {
 				value: 'pharmacien',
 			},
 		],
+		'label': 'Filtrer la liste des professions',
+		'listLabel': 'Choisisser parmi la liste des professions',
 		'onUpdate:modelValue': fn(),
 	},
 	argTypes: {
@@ -198,6 +213,7 @@ export const WithReturnObject: Story = {
   <SearchListField
 	v-model="modelValue"
 	:items="items"
+	label="Filtrer la liste des professions"
 	:return-object="true"
   />
   {{ modelValue }}

package/src/components/SearchListField/SearchListField.vue

@@ -3,9 +3,10 @@
 	import { mdiMagnify } from '@mdi/js'
 	import type { PropType } from 'vue'
 	import type { SearchListItem } from './types'
-	import { locales } from './locales'
+	import { locales as defaultLocales } from './locales'
 
 	import { SyTextField, SyCheckbox } from '@/components'
+	import slugify from 'slugify'
 
 	const props = defineProps({
 		modelValue: {
@@ -28,39 +29,30 @@
 			type: Boolean,
 			default: false,
 		},
+		label: {
+			type: String,
+			required: true,
+		},
+		listLabel: {
+			type: String,
+			default: defaultLocales.searchListTitle,
+		},
+		locales: {
+			type: Object as PropType<typeof defaultLocales>,
+			default: () => defaultLocales,
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
 
 	const search = ref<string | null>(null)
-	const internalValue = ref<unknown[]>(props.modelValue)
-	const searchIcon = mdiMagnify
-	const checkboxListRef = ref<HTMLElement | null>(null)
-
-	// Helper function for deep equality comparison
-	const isEqual = (a: unknown, b: unknown): boolean => {
-		if (a === b) return true
-		if (a === null || b === null) return false
-		if (typeof a !== 'object' || typeof b !== 'object') return false
-
-		const keysA = Object.keys(a as Record<string, unknown>)
-		const keysB = Object.keys(b as Record<string, unknown>)
-
-		if (keysA.length !== keysB.length) return false
-
-		for (const key of keysA) {
-			if (!keysB.includes(key)) return false
-			if (!isEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key])) return false
-		}
-
-		return true
-	}
+	const internalValue = ref<(SearchListItem | unknown)[]>([])
 
 	watch(
 		() => props.modelValue,
 		(newValue) => {
 			internalValue.value = newValue
-		},
+		}, { immediate: true },
 	)
 
 	const filteredItems = computed(() => {
@@ -73,136 +65,156 @@
 		})
 	})
 
-	const emitChangeEvent = (value: unknown[]) => {
-		emit('update:modelValue', value)
-	}
-
-	const toggleSelection = (item: SearchListItem) => {
-		const newValue = [...internalValue.value]
-		const valueToEmit = props.returnObject ? item : item.value
-		const index = newValue.findIndex(value => props.returnObject ? isEqual(value, item) : isEqual(value, item.value))
-
-		if (index === -1) {
-			newValue.push(valueToEmit)
+	function toggleCheckbox(item: SearchListItem, state: boolean) {
+		if (state) {
+			if (props.returnObject) {
+				internalValue.value.push(item)
+			}
+			else {
+				internalValue.value.push(item.value)
+			}
 		}
 		else {
-			newValue.splice(index, 1)
+			if (props.returnObject) {
+				internalValue.value = internalValue.value.filter(
+					el => el !== item,
+				)
+			}
+			else {
+				internalValue.value = internalValue.value.filter(
+					el => el !== item.value,
+				)
+			}
 		}
-		emitChangeEvent(newValue)
+		emitChangeEvent(internalValue.value)
+	}
+
+	const emitChangeEvent = (value: unknown[]) => {
+		emit('update:modelValue', value)
 	}
 
 	defineExpose({
 		filteredItems,
 		search,
 		emitChangeEvent,
-		toggleSelection,
 	})
 </script>
 
 <template>
-	<div class="vd-search-list">
+	<div class="sy-search-list">
 		<SyTextField
 			v-model="search"
-			:label="locales.search"
-			aria-describedby="search-description"
-			aria-labelledby="search-label"
+			:label="props.label"
 			hide-details
 			color="primary"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			clearable
 			tabindex="0"
+			data-test-id="search-input"
 			:bg-color="props.bgColor"
 		>
 			<template #prepend-inner>
 				<VIcon class="mr-1">
-					{{ searchIcon }}
+					{{ mdiMagnify }}
 				</VIcon>
 			</template>
 		</SyTextField>
 
-		<!-- eslint-disable-next-line  vuejs-accessibility/label-has-for -->
-		<label
-			id="search-label"
-			class="d-sr-only"
-		>
-			{{ locales.search }}
-		</label>
-		<span
-			id="search-description"
-			class="d-sr-only"
-		>
-			{{ locales.search }}
-		</span>
-
-		<VList
-			id="search-list"
-			ref="checkboxListRef"
-			v-model:selected="internalValue"
-			title="search-list"
-			select-strategy="classic"
-			class="pb-0"
-			role="listbox"
-			aria-labelledby="search-list-title"
-			@update:selected="emitChangeEvent"
-		>
-			<h2
-				id="search-list-title"
+		<fieldset>
+			<legend
 				class="d-sr-only"
 			>
-				{{ locales.searchListTitle }}
-			</h2>
-			<VListItem
-				v-for="(item, index) in filteredItems"
-				:id="`search-list-item-${index}`"
-				:key="index"
-				:value="props.returnObject ? item : item.value"
-				role="option"
-				:aria-selected="internalValue.some(value => props.returnObject ? isEqual(value, item) : isEqual(value, item.value))"
-				:tabindex="0"
-				active-class="text-primary"
-				class="d-flex align-center justify-start mx-4"
+				{{ props.listLabel }}
+			</legend>
+
+			<p
+				role="status"
+				class="mx-4 my-2 text-caption"
+				:class="{
+					'd-sr-only': filteredItems.length > 0,
+				}"
 			>
-				<template #prepend="{ isActive }">
-					<VListItemAction start>
+				{{ search ? locales.nbItems(filteredItems.length) : '' }}
+			</p>
+
+			<ul
+				v-if="filteredItems.length > 0"
+				class="list"
+				data-test-id="suggestions-list"
+			>
+				<li
+					v-for="item in filteredItems"
+					:key="item.label"
+					v-ripple
+					class="suggestion-item"
+					:class="{
+						'suggestion-item--selected': !!internalValue.find(el => el === (props.returnObject ? item : item.value)),
+					}"
+				>
+					<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+					<label
+						class="label"
+						:for="`checkbox-${slugify(item.label)}`"
+					>
 						<SyCheckbox
-							:id="`checkbox-${index}`"
-							:model-value="isActive"
-							label=""
-							:aria-label="`${locales.checkboxLabel} ${item.label}`"
-							:title="`${locales.checkboxLabel} ${item.label}`"
-							:aria-labelledby="`list-item-title-${index}`"
+							:id="`checkbox-${slugify(item.label)}`"
 							hide-details
-							class="ml-2 search-list-checkbox"
 							density="compact"
-							@click="toggleSelection(item)"
+							class="ml-2"
+							:model-value="!!internalValue.find(el => el === (props.returnObject ? item : item.value))"
+							@update:model-value="(e: boolean)=>toggleCheckbox(item, e)"
 						/>
-					</VListItemAction>
-
-					<VListItemTitle :id="`list-item-title-${index}`">
-						{{ item.label }}
-					</VListItemTitle>
-				</template>
-			</VListItem>
-		</VList>
+						<span>
+							{{ item.label }}
+						</span>
+					</label>
+				</li>
+			</ul>
+		</fieldset>
 	</div>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.v-list {
-	background: transparent;
+.sy-search-list fieldset {
+	border: 0;
 }
 
-.vd-search-list .v-list-item--active::before {
-	opacity: 0;
+.list {
+	padding: 0;
+	padding-top: 8px;
+	margin: 0;
+	margin-left: 16px;
+	margin-right: 16px;
+	list-style: none;
 }
 
-/* Hide duplicate labels for accessibility */
-.search-list-checkbox {
-	/* Hide the label from screen readers but keep the checkbox visible */
-	::v-deep(.v-label) {
-		display: none;
+.label {
+	display: grid;
+	align-items: center;
+	grid-template-columns: auto 1fr;
+	grid-gap: 8px;
+	min-height: 34px;
+	cursor: pointer;
+	transition: background-color 0.2s ease-in-out;
+
+	&:hover {
+		background-color: rgba(var(--v-theme-primary), 0.08);
+	}
+
+	&:has(:focus-visible) {
+		outline: 2px solid rgba(var(--v-theme-primary));
+	}
+
+	span {
+		display: block;
+		min-width: 100%;
 	}
 }
+
+.suggestion-item--selected .label {
+	background-color: rgba(var(--v-theme-primary), 0.12);
+}
+
 </style>

package/src/components/SearchListField/locales.ts

@@ -1,5 +1,14 @@
 export const locales = {
-	search: 'Rechercher',
 	searchListTitle: 'Liste des éléments',
-	checkboxLabel: 'Sélectionner la valeur',
+	nbItems: (count: number) => {
+		if (count === 0) {
+			return 'Aucun élément ne correspond à votre recherche'
+		}
+		else if (count === 1) {
+			return '1 élément correspond à votre recherche'
+		}
+		else {
+			return `${count} éléments correspondent à votre recherche`
+		}
+	},
 }