@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -96,14 +96,14 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
             </span>
             404
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Page non trouvée
-          </h2>
+          </h1>
           <p>
             Cette page n’existe pas ou a été déplacée.
           </p>
@@ -124,7 +124,8 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
           v-col-sm-6
         ">
           <img
-            alt="Page non trouvée"
+            alt=""
+            aria-hidden="true"
             src="/src/components/NotFoundPage/assets/not-found.svg"
           />
         </div>
@@ -233,14 +234,14 @@ exports[`NotFoundPage > renders correctly 1`] = `
             </span>
             404
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Page non trouvée
-          </h2>
+          </h1>
           <p>
             Cette page n’existe pas ou a été déplacée.
           </p>
@@ -254,7 +255,8 @@ exports[`NotFoundPage > renders correctly 1`] = `
           v-col-sm-6
         ">
           <img
-            alt="Page non trouvée"
+            alt=""
+            aria-hidden="true"
             src="/src/components/NotFoundPage/assets/not-found.svg"
           />
         </div>

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -7,6 +7,8 @@ import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 
 Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.
 
+> **⚠️ Attention** : Ce composant est déprécié au profit des composants [SyTable](?path=/docs/composants-tableaux-sytable--docs) et [SyServerTable](?path=/docs/composants-tableaux-syservertable--docs).
+
 <Canvas story={{height: '550px'}} of={PaginatedTableStories.Default}/>
 
 # API

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -67,6 +67,28 @@ const meta = {
 			description: 'Texte de la légende du tableau',
 			control: { type: 'text' },
 		},
+		multiSort: {
+			description: 'Permet de trier sur plusieurs colonnes simultanément. Lorsque activé, des indicateurs numériques apparaissent à côté des icônes de tri pour montrer l\'ordre de priorité.',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
+		mustSort: {
+			description: 'Force au moins une colonne à être toujours triée. Si désactivé, toutes les colonnes peuvent être non triées.',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof PaginatedTable & typeof VDataTable>
 

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -20,6 +20,14 @@
 			type: String,
 			default: '',
 		},
+		multiSort: {
+			type: Boolean,
+			default: false,
+		},
+		mustSort: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const options = defineModel<Partial<DataOptions>>('options', {
@@ -56,8 +64,8 @@
 			itemsPerPage: options.value.itemsPerPage || props.itemsPerPage,
 			sortBy: options.value.sortBy,
 			groupBy: options.value.groupBy,
-			multiSort: options.value.multiSort,
-			mustSort: options.value.mustSort,
+			multiSort: options.value.multiSort !== undefined ? options.value.multiSort : props.multiSort,
+			mustSort: options.value.mustSort !== undefined ? options.value.mustSort : props.mustSort,
 		}
 	})
 

package/src/components/PasswordField/PasswordField.stories.ts

@@ -89,6 +89,10 @@ const meta = {
 			control: 'boolean',
 			description: 'Indique si la validation doit être effectuée lors de la perte de focus',
 		},
+		bgColor: {
+			control: 'color',
+			description: 'Couleur de fond du champ',
+		},
 	},
 	args: {
 		modelValue: '',

package/src/components/PasswordField/PasswordField.vue

@@ -33,6 +33,7 @@
 		displayAsterisk?: boolean
 		isValidateOnBlur?: boolean
 		disableErrorHandling?: boolean
+		bgColor?: string
 	} & CustomizableOptions>(), {
 		modelValue: null,
 		variantStyle: 'outlined',
@@ -52,6 +53,7 @@
 		displayAsterisk: false,
 		isValidateOnBlur: true,
 		disableErrorHandling: false,
+		bgColor: 'white',
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -202,6 +204,7 @@
 		:readonly="props.readonly"
 		:disabled="props.disabled"
 		:placeholder="props.placeholder"
+		:bg-color="props.bgColor"
 		:type="showEyeIcon ? 'text' : 'password'"
 		:display-asterisk="props.displayAsterisk"
 		:rules="[...defaultRules, ...props.customRules]"

package/src/components/PeriodField/PeriodField.vue

@@ -349,6 +349,7 @@
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
 				:placeholder="props.placeholderFrom"
+				:label="props.placeholderFrom"
 				:required="props.disableErrorHandling ? false : props.required"
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
@@ -376,6 +377,7 @@
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
 				:placeholder="props.placeholderTo"
+				:label="props.placeholderTo"
 				:required="props.disableErrorHandling ? false : props.required"
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"

package/src/components/PhoneField/PhoneField.stories.ts

@@ -93,7 +93,7 @@ export const Default: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -177,7 +177,7 @@ export const Required: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -218,7 +218,7 @@ export const RequiredWithAsterisk: Story = {
 		...Default.args,
 		required: true,
 		displayAsterisk: true,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	parameters: {
 		docs: {
@@ -342,7 +342,7 @@ export const CustomIndicatifs: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -427,7 +427,7 @@ export const NotValidatedOnBlur: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -510,7 +510,7 @@ export const DisplayFormatCode: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -593,7 +593,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -676,7 +676,7 @@ export const DisplayFormatCodeCountry: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -759,7 +759,7 @@ export const DisplayFormatCountry: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -842,7 +842,7 @@ export const DisplayFormatAbbreviation: Story = {
 		isValidatedOnBlur: false,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -940,7 +940,7 @@ export const DefaultDialCode: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -1025,7 +1025,7 @@ export const DefaultDialCodeStandard: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},
@@ -1121,7 +1121,7 @@ export const DisplayModels: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
 		readonly: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -1211,7 +1211,7 @@ export const DisabledErrorHandling: Story = {
 		disableErrorHandling: true,
 		readonly: false,
 		disabled: false,
-		bgColor: undefined,
+		bgColor: 'white',
 	},
 	render: (args) => {
 		return {
@@ -1337,7 +1337,7 @@ export const FormValidation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
-		bgColor: undefined,
+		bgColor: 'white',
 		readonly: false,
 		disabled: false,
 	},

package/src/components/PhoneField/PhoneField.vue

@@ -5,7 +5,7 @@
 	import { indicatifs } from './indicatifs'
 	import { vMaska } from 'maska/vue'
 	import { locales } from './locales'
-	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import {
@@ -38,7 +38,7 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
-		bgColor: { type: String, default: undefined },
+		bgColor: { type: String, default: 'white' },
 		readonly: { type: Boolean, default: false },
 		disabled: { type: Boolean, default: false },
 	})

package/src/components/RangeField/RangeField.stories.ts

@@ -53,6 +53,15 @@ const meta = {
 				},
 			},
 		},
+		'bgColor': {
+			control: 'color',
+			description: 'Couleur de fond du champ',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			control: 'object',
 			description: 'Personnalisation des composants Vuetify internes',

package/src/components/RangeField/RangeField.vue

@@ -11,10 +11,12 @@
 		min?: number
 		max?: number
 		step?: number
+		bgColor?: string
 	}>(), {
 		min: 0,
 		max: 100,
 		step: 1,
+		bgColor: 'white',
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -132,6 +134,7 @@
 				:aria-label="locales.minLabel"
 				inputmode="numeric"
 				color="primary"
+				:bg-color="bgColor"
 				:title="locales.minLabel"
 				@update:model-value="updateMin"
 				@update:focused="validateMin"
@@ -144,6 +147,7 @@
 				:aria-label="locales.maxLabel"
 				inputmode="numeric"
 				color="primary"
+				:bg-color="bgColor"
 				:title="locales.maxLabel"
 				@update:model-value="updateMax"
 				@update:focused="validateMax"

package/src/components/RangeField/tests/__snapshots__/RangeField.spec.ts.snap

@@ -117,10 +117,12 @@ exports[`RangeField > render correctly when the modelValue is not defined 1`] =
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -263,10 +265,12 @@ exports[`RangeField > render correctly when the modelValue is not defined 1`] =
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -516,10 +520,12 @@ exports[`RangeField > renders correctly 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -662,10 +668,12 @@ exports[`RangeField > renders correctly 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -915,10 +923,12 @@ exports[`RangeField > renders correctly with value NaN 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light
@@ -1061,10 +1071,12 @@ exports[`RangeField > renders correctly with value NaN 1`] = `
       <!---->
       <div class="v-input__control">
         <div class="
+          bg-white
           v-field
           v-field--active
           v-field--center-affix
           v-field--dirty
+          v-field--has-background
           v-field--variant-outlined
           v-locale--is-ltr
           v-theme--light

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

@@ -3,9 +3,9 @@
 	import { RatingEnum, useRating } from '../Rating'
 	import { locales } from './locales'
 	import type { PropType } from 'vue'
-	import type { ItemType } from '@/components/Customs/SySelect/SySelect.vue'
+	import type { ItemType } from '@/components/Customs/Selects/SySelect/SySelect.vue'
 
-	import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 
 	import { useDisplay } from 'vuetify'
 

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

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import RatingPicker from './RatingPicker.vue'
-import SySelect from '@/components/Customs/SySelect/SySelect.vue'
+import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import { VBtn, VSpacer } from 'vuetify/components'
 import { fn } from '@storybook/test'
 

package/src/components/SearchListField/SearchListField.mdx

@@ -8,7 +8,7 @@ import SearchListField from './SearchListField.vue';
 
 Le composant `SearchListField` est utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.
 
-<Canvas story={{height: '150px'}} of={SearchListFieldStories.Default}/>
+<Canvas story={{height: '450px'}} of={SearchListFieldStories.Default}/>
 
 # API
 

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

@@ -65,7 +65,13 @@ export const Default: Story = {
 				return { args }
 			},
 			template: `
-                <SearchListField v-bind="args" v-model="args.modelValue"/>
+                <div>
+                    <SearchListField v-bind="args" v-model="args.modelValue"/>
+                    <div style="margin-top: 20px;">
+                        <strong>Valeur(s) sélectionnée(s) :</strong>
+                        <pre>{{ args.modelValue }}</pre>
+                    </div>
+                </div>
             `,
 		}
 	},

package/src/components/SearchListField/SearchListField.vue

@@ -5,7 +5,7 @@
 	import type { SearchListItem } from './types'
 	import { locales } from './locales'
 
-	import { SyTextField } from '@/components'
+	import { SyTextField, SyCheckbox } from '@/components'
 
 	const props = defineProps({
 		modelValue: {
@@ -20,6 +20,10 @@
 			type: Boolean,
 			default: true,
 		},
+		bgColor: {
+			type: String,
+			default: 'white',
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -27,6 +31,7 @@
 	const search = ref<string | null>(null)
 	const internalValue = ref<unknown[]>(props.modelValue)
 	const searchIcon = mdiMagnify
+	const checkboxListRef = ref<HTMLElement | null>(null)
 
 	watch(
 		() => props.modelValue,
@@ -49,10 +54,23 @@
 		emit('update:modelValue', value)
 	}
 
+	const toggleSelection = (itemValue: unknown) => {
+		const newValue = [...internalValue.value]
+		const index = newValue.indexOf(itemValue)
+		if (index === -1) {
+			newValue.push(itemValue)
+		}
+		else {
+			newValue.splice(index, 1)
+		}
+		emitChangeEvent(newValue)
+	}
+
 	defineExpose({
 		filteredItems,
 		search,
 		emitChangeEvent,
+		toggleSelection,
 	})
 </script>
 
@@ -68,6 +86,7 @@
 			:variant="outlined ? 'outlined' : 'underlined'"
 			clearable
 			tabindex="0"
+			:bg-color="props.bgColor"
 		>
 			<template #prepend-inner>
 				<VIcon class="mr-1">
@@ -92,6 +111,7 @@
 
 		<VList
 			id="search-list"
+			ref="checkboxListRef"
 			v-model:selected="internalValue"
 			title="search-list"
 			select-strategy="classic"
@@ -113,40 +133,29 @@
 				:value="item.value"
 				role="option"
 				:aria-selected="internalValue.includes(item.value)"
-				:aria-labelledby="`search-list-item-${index}`"
 				:tabindex="0"
 				active-class="text-primary"
 				class="d-flex align-center justify-start mx-4"
 			>
-				<span
-					:id="`search-list-item-label-${index}`"
-					class="d-sr-only"
-				>
-					{{ item.label }}
-				</span>
 				<template #prepend="{ isActive }">
 					<VListItemAction start>
-						<input
+						<SyCheckbox
 							:id="`checkbox-${index}`"
-							type="checkbox"
-							role="option"
-							:checked="isActive"
-							:aria-selected="isActive"
+							:model-value="isActive"
+							label=""
 							:aria-label="`${locales.checkboxLabel} ${item.label}`"
-							:aria-labelledby="`checkbox-${index}`"
 							:title="`${locales.checkboxLabel} ${item.label}`"
-							class="custom-checkbox ml-2"
-						>
-						<!-- eslint-disable-next-line  vuejs-accessibility/label-has-for -->
-						<label
-							:for="`checkbox-${index}`"
-							class="d-sr-only"
-						>
-							{{ locales.checkboxLabel }}
-						</label>
+							:aria-labelledby="`list-item-title-${index}`"
+							hide-details
+							class="ml-2 search-list-checkbox"
+							density="compact"
+							@click="toggleSelection(item.value)"
+						/>
 					</VListItemAction>
 
-					<VListItemTitle>{{ item.label }}</VListItemTitle>
+					<VListItemTitle :id="`list-item-title-${index}`">
+						{{ item.label }}
+					</VListItemTitle>
 				</template>
 			</VListItem>
 		</VList>
@@ -164,31 +173,11 @@
 	opacity: 0;
 }
 
-.custom-checkbox {
-	appearance: none;
-	width: 20px;
-	height: 20px;
-	border: 2px solid rgb(0 0 0 / 50%);
-	border-radius: 2px;
-	outline: none;
-	cursor: pointer;
-	transition: all 0.3s ease;
-}
-
-.custom-checkbox:checked {
-	background-color: tokens.$primary-base !important;
-	border-color: tokens.$primary-base !important;
-
-	&::before {
-		content: '\2713';
-		display: block;
-		text-align: center;
-		line-height: 15px;
-		color: #fff;
+/* 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;
 	}
 }
-
-.custom-checkbox:hover {
-	border-color: tokens.$primary-darker !important;
-}
 </style>

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

@@ -162,6 +162,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.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/issues/790" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #790</a>)</p>
+				  </div>
 			  </div>
             `,
 		}