@cnamts/synapse 1.0.0 → 1.0.2

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/NotificationBar/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/PageContainer/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/PaginatedTable/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

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

@@ -63,6 +63,10 @@ const meta = {
 			description: 'Nombre d\'éléments par page',
 			control: { type: 'number' },
 		},
+		caption: {
+			description: 'Texte de la légende du tableau',
+			control: { type: 'text' },
+		},
 	},
 } satisfies Meta<typeof PaginatedTable & typeof VDataTable>
 
@@ -196,6 +200,7 @@ export const Default: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
+		caption: '',
 		options: {
 			itemsPerPage: 4,
 		},
@@ -212,6 +217,7 @@ export const Default: Story = {
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
+					:caption="args.caption"
 				/>
 				</div>
 			`,
@@ -345,6 +351,7 @@ export const SortBy: Story = {
 				email: 'agate.roy@exemple.com',
 			},
 		],
+		caption: '',
 		options: {
 			sortBy: [{ key: 'lastname', order: 'desc' }],
 		},
@@ -361,6 +368,7 @@ export const SortBy: Story = {
 					v-model:options="args.options"
 					:items="args.items"
 					:headers="args.headers"
+					:caption="args.caption"
 				/>
 			</div>
 			`,
@@ -491,6 +499,7 @@ export const TableServer: Story = {
 			sortBy: [{ key: 'lastname', order: 'asc' }],
 			page: 1,
 		},
+		caption: '',
 	},
 	render: (args) => {
 		return {
@@ -579,6 +588,7 @@ export const TableServer: Story = {
 					v-model:options="options"
 					:items="users"
 					:headers="headers"
+					:caption="args.caption"
 					:server-items-length="totalUsers"
 					:loading="state === StateEnum.PENDING"
 					suffix="api-example"
@@ -658,6 +668,13 @@ export const ManyTables: Story = {
 			},
 		],
 	},
+	args: {
+		options: {
+			itemsPerPage: 5,
+			page: 1,
+		},
+		caption: '',
+	},
 	render: (args) => {
 		return {
 			components: { PaginatedTable },
@@ -704,11 +721,13 @@ export const ManyTables: Story = {
 				<PaginatedTable
 					suffix="table1"
 					:items="itemsTable1"
+					:caption="args.caption"
 				/>
 				<hr class="my-4">
 				<PaginatedTable
 					suffix="table2"
 					:items="itemsTable2"
+					:caption="args.caption"
 				/>
 			</div>
 			`,

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -18,7 +18,7 @@
 		},
 		caption: {
 			type: String,
-			default: 'caption',
+			default: '',
 		},
 	})
 
@@ -30,6 +30,9 @@
 	const localStorageUtility = new LocalStorageUtility()
 	const localOptions = ref({})
 
+	// Generate a unique ID for this table instance
+	const uniqueTableId = ref(`paginated-table-${Math.random().toString(36).substr(2, 9)}`)
+
 	const storageKey = computed(() => {
 		const prefix = 'pagination'
 		return props.suffix ? `${prefix}-${props.suffix}` : prefix
@@ -95,38 +98,53 @@
 	localOptions.value = localStorageUtility.getItem(storageKey.value) ?? optionsFacade.value
 
 	onMounted(() => {
-		const table = document.querySelector('#paginated-table table')
+		const table = document.querySelector(`#${uniqueTableId.value} table`)
 		const caption = document.createElement('caption')
-		caption.innerHTML = props.caption
-		if (props.caption === 'caption') {
-			caption.classList.add('d-sr-only')
+		caption.classList.add('d-sr-only')
+		if (props.caption === '') {
+			caption.setAttribute('aria-label', 'Table caption')
+			caption.innerHTML = 'Table caption'
 		}
 		else {
-			caption.classList.add('text-subtitle-1')
+			caption.setAttribute('aria-label', props.caption)
+			caption.innerHTML = props.caption
 		}
 		table?.prepend(caption)
 
-		const inputs = document.querySelectorAll('#paginated-table input')
+		const inputs = document.querySelectorAll(`#${uniqueTableId.value} input`)
 		inputs.forEach((input) => {
 			(input as HTMLElement).removeAttribute('aria-describedby')
 		})
 
-		const fields = document.querySelectorAll('#paginated-table .v-field')
+		const fields = document.querySelectorAll(`#${uniqueTableId.value} .v-field`)
 		fields.forEach((field) => {
-			(field as HTMLElement).setAttribute('tabindex', '0')
+			const element = field as HTMLElement
+			element.setAttribute('tabindex', '0')
+
+			// Remove immediately if it exists
+			if (element.hasAttribute('aria-controls')) {
+				element.removeAttribute('aria-controls')
+			}
+
+			// Check again after a delay
+			setTimeout(() => {
+				if (element.hasAttribute('aria-controls')) {
+					element.removeAttribute('aria-controls')
+				}
+			}, 500)
 		})
 
-		const fieldLabels = document.querySelectorAll('#paginated-table .v-field')
+		const fieldLabels = document.querySelectorAll(`#${uniqueTableId.value} .v-field`)
 		fieldLabels.forEach((fieldLabel) => {
 			(fieldLabel as HTMLElement).setAttribute('aria-label', 'items per page')
 		})
 
-		const fieldTitles = document.querySelectorAll('#paginated-table .v-field')
+		const fieldTitles = document.querySelectorAll(`#${uniqueTableId.value} .v-field`)
 		fieldTitles.forEach((fieldTitle) => {
 			(fieldTitle as HTMLElement).setAttribute('title', 'items per page')
 		})
 
-		const th = document.querySelectorAll('#paginated-table th')
+		const th = document.querySelectorAll(`#${uniqueTableId.value} th`)
 		for (let i = 0; i < th.length; i++) {
 			th[i].setAttribute('scope', 'col')
 		}
@@ -135,7 +153,7 @@
 
 <template>
 	<div
-		id="paginated-table"
+		:id="uniqueTableId"
 		class="sy-paginated-table"
 	>
 		<VDataTable
@@ -144,6 +162,16 @@
 			v-bind="propsFacade"
 			@update:options="updateOptions"
 		>
+			<template #top>
+				<div
+					v-if="props.caption"
+					class="text-subtitle-1 text-center pa-4"
+					:class="{ 'd-sr-only': props.caption === '' }"
+					:aria-label="props.caption"
+				>
+					{{ props.caption }}
+				</div>
+			</template>
 			<template
 				v-for="slotName in Object.keys($slots)"
 				#[slotName]="slotProps"
@@ -160,6 +188,16 @@
 			color="primary"
 			@update:options="updateOptions"
 		>
+			<template #top>
+				<div
+					v-if="props.caption"
+					class="text-subtitle-1 text-center pa-4"
+					:class="{ 'd-sr-only': props.caption === '' }"
+					:aria-label="props.caption"
+				>
+					{{ props.caption }}
+				</div>
+			</template>
 			<template
 				v-for="slotName in Object.keys($slots)"
 				#[slotName]="slotProps"

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

@@ -59,7 +59,6 @@ describe('PaginatedTable', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
 		expect(wrapper.text()).toContain('John Doe')
 	})
 
@@ -178,7 +177,6 @@ describe('PaginatedTable', () => {
 			},
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
 		expect(wrapper.emitted('update:options')).toBeTruthy()
 
 		await wrapper.setProps({

package/src/components/PasswordField/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

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/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/PeriodField/PeriodField.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 	/* eslint-disable @typescript-eslint/no-explicit-any -- Nécessaire pour gérer différents types d'entrée */
 	import { ref, watch, computed, onMounted } from 'vue'
-	import DatePicker from '@/components/DatePicker/DatePicker.vue'
+	import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
 	import { useFieldValidation } from '@/composables'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 
@@ -29,6 +29,9 @@
 		customWarningRules?: ValidationRule[]
 		disableErrorHandling?: boolean
 		readonly?: boolean
+		bgColor?: string
+		density?: 'default' | 'comfortable' | 'compact'
+		hideDetails?: boolean | 'auto'
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -48,6 +51,9 @@
 		customWarningRules: () => [],
 		disableErrorHandling: false,
 		readonly: false,
+		bgColor: 'white',
+		density: 'default',
+		hideDetails: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -343,11 +349,15 @@
 				: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"
 				:success-message="fromDateValidation.hasSuccess"
 				:readonly="props.readonly"
+				:bg-color="props.bgColor"
+				:density="props.density"
+				:hide-details="props.hideDetails"
 				@closed="handleFromDateClosed"
 			/>
 		</div>
@@ -367,11 +377,15 @@
 				: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"
 				:success-message="toDateValidation.hasSuccess"
 				:readonly="props.readonly"
+				:bg-color="props.bgColor"
+				:density="props.density"
+				:hide-details="props.hideDetails"
 				@closed="handleToDateClosed"
 			/>
 		</div>

package/src/components/PhoneField/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

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

@@ -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/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

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"