@cnamts/synapse 1.0.20 → 1.0.21

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -4,7 +4,7 @@
 	} from '@/composables/useCustomizableOptions'
 	import { useWidthable, type Widthable } from '@/composables/widthable'
 	import { isRequired } from '@/utils/rules/isRequired'
-	import { computed, reactive, ref, toRef, watch } from 'vue'
+	import { computed, ref, toRef } from 'vue'
 	import DialogBox from '../DialogBox/DialogBox.vue'
 	import FileList from '../FileList/FileList.vue'
 	import FilePreview from '../FilePreview/FilePreview.vue'
@@ -22,37 +22,35 @@
 				uploadList: UploadItem[]
 				sectionTitle?: string
 				showFilePreview?: boolean
+				infoText?: string
+				headingLevel?: number
 				locales?: typeof defaultLocales
 			}
 		>(),
 		{
 			sectionTitle: undefined,
 			showFilePreview: false,
+			infoText: '',
+			headingLevel: 4,
 			locales: () => defaultLocales,
 		},
 	)
 
 	const emits = defineEmits<{
 		(e: 'error', value: string[]): void
+		(e: 'preview', value: FileItem): void
 		(e: 'update:modelValue', value: SelectedFile[]): void
 	}>()
 
 	const selectedFiles = defineModel<SelectedFile[]>({
 		type: Array,
-		default: reactive([]),
+		default: () => [],
 	})
-	watch(
-		selectedFiles,
-		(value) => {
-			emits('update:modelValue', value)
-		},
-		{ deep: true },
-	)
 
 	const { widthStyles } = useWidthable(props)
 	const options = useCustomizableOptions(config, props)
 
-	const fileUpload = ref<typeof FileUpload>()
+	const fileUpload = ref<InstanceType<typeof FileUpload>>()
 	const { selectItems, selectedItem } = useFileUploadJourney(
 		toRef(props, 'uploadList'),
 	)
@@ -65,19 +63,21 @@
 		= useFileList(selectedFiles, toRef(props, 'uploadList'))
 
 	// handle FileList
-	let inlineSelectedItemId: string | undefined = undefined
+	const inlineSelectedItemId = ref<string | undefined>(undefined)
 	function uploadInline(item: FileItem) {
-		inlineSelectedItemId = item.id
+		inlineSelectedItemId.value = item.id
 
-		fileUpload.value!.fileInput!.click()
+		fileUpload.value?.openFileDialog()
 	}
 	function previewFile(file: FileItem & { file?: File }) {
+		emits('preview', file)
 		showPreviewDialog.value = true
 		fileToPreview.value = file.file
 	}
 
 	// handle FileUpload
 	const uploadedFiles = ref<File[]>([])
+	const uploadedFile = computed(() => uploadedFiles.value[0])
 
 	const showFileUpload = computed(
 		() => (
@@ -88,10 +88,10 @@
 
 	function fileSelected(files: File[]) {
 		const fileId
-			= inlineSelectedItemId ?? (props.uploadList.length === 1
+			= inlineSelectedItemId.value ?? (props.uploadList.length === 1
 				? props.uploadList[0]!.id
 				: undefined)
-		inlineSelectedItemId = undefined
+		inlineSelectedItemId.value = undefined
 
 		if (props.showFilePreview || fileId === undefined) {
 			showSelectDialog.value = true
@@ -105,22 +105,22 @@
 
 	function uploadError(errors: string[]) {
 		emits('error', errors)
-		if (!inlineSelectedItemId) {
+		if (!inlineSelectedItemId.value) {
 			return
 		}
-		setItemOnError(inlineSelectedItemId)
-		inlineSelectedItemId = undefined
+		setItemOnError(inlineSelectedItemId.value)
+		inlineSelectedItemId.value = undefined
 	}
 
 	// handle DialogBox
 	const showSelectDialog = ref(false)
 
 	function dialogConfirm() {
-		if (!selectedItem.value) {
+		if (!selectedItem.value || !uploadedFile.value) {
 			return
 		}
 
-		addOrReplaceFile(uploadedFiles.value[0]!, selectedItem.value)
+		addOrReplaceFile(uploadedFile.value, selectedItem.value)
 
 		showSelectDialog.value = false
 		selectedItem.value = undefined
@@ -137,9 +137,13 @@
 		class="sy-upload-workflow white"
 	>
 		<slot name="title">
-			<h4 class="text-h6 mb-2">
+			<div
+				:aria-level="props.headingLevel"
+				role="heading"
+				class="text-h6 mb-2"
+			>
 				{{ title }}
-			</h4>
+			</div>
 		</slot>
 
 		<FileList
@@ -159,7 +163,14 @@
 				v-model="uploadedFiles"
 				@error="uploadError"
 				@update:model-value="fileSelected"
-			/>
+			>
+				<template
+					v-if="props.infoText"
+					#info-text
+				>
+					{{ props.infoText }}
+				</template>
+			</FileUpload>
 		</Transition>
 
 		<DialogBox
@@ -195,7 +206,7 @@
 			<FilePreview
 				v-if="showFilePreview"
 				:options="options.filePreview"
-				:file="uploadedFiles[0]"
+				:file="uploadedFile"
 			/>
 		</DialogBox>
 

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

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 import UploadWorkflow from '../UploadWorkflow.vue'
 import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
@@ -34,6 +35,24 @@ describe('UploadWorkflow', () => {
 		expect(wrapper.find('.sy-file-upload').isVisible()).toBeTruthy()
 	})
 
+	it('renders default title with role heading and configured aria-level', () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+				headingLevel: 2,
+			},
+		})
+
+		const title = wrapper.find('[role="heading"]')
+		expect(title.exists()).toBe(true)
+		expect(title.attributes('aria-level')).toBe('2')
+	})
+
 	it('shows the file in the list when set with the list button', async () => {
 		const wrapper = mount(UploadWorkflow, {
 			props: {
@@ -237,6 +256,35 @@ describe('UploadWorkflow', () => {
 
 		await wrapper.find('.file-item__action-preview').trigger('click')
 
+		expect(wrapper.emitted('preview')).toBeTruthy()
+		expect(wrapper.emitted('preview')?.[0]?.[0]).toMatchObject({
+			id: 'CERFA1',
+			title: 'CERFA 1',
+			showPreviewBtn: true,
+		})
+
 		expect(wrapper.find('.sy-file-preview img').exists()).toBeTruthy()
 	})
+
+	it('render custom infoText in FileUpload info-text slot', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				modelValue: [],
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+				infoText: 'Texte personnalisé',
+			},
+		})
+
+		await nextTick()
+
+		const fileUpload = wrapper.find('.sy-file-upload')
+		expect(fileUpload.exists()).toBe(true)
+
+		expect(fileUpload.text()).toContain('Texte personnalisé')
+	})
 })

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

@@ -8,12 +8,16 @@ exports[`UploadWorkflow > render the upload list 1`] = `
   "
   style="width: 100%;"
 >
-  <h4 class="
-    mb-2
-    text-h6
-  ">
+  <div
+    aria-level="4"
+    class="
+      mb-2
+      text-h6
+    "
+    role="heading"
+  >
     Documents à nous transmettre
-  </h4>
+  </div>
   <ul
     class="upload-list"
     style="width: 100%;"

package/src/components/UploadWorkflow/useFileList.ts

@@ -8,6 +8,10 @@ export default function useFileList(
 ) {
 	const errorSelectedFiles = ref<string[]>([])
 
+	function notifySelectedFilesChanged() {
+		selectedFiles.value = selectedFiles.value.slice()
+	}
+
 	function removeFromErrorList(fileId: string) {
 		const errorIndex = errorSelectedFiles.value.findIndex(item => item === fileId)
 		if (errorIndex !== -1) {
@@ -22,12 +26,14 @@ export default function useFileList(
 	function resetFile(fileItem: FileListItem | SelectedFile) {
 		const itemIndex = selectedFiles.value.findIndex(item => item.id === fileItem.id)
 		selectedFiles.value.splice(itemIndex, 1)
+		notifySelectedFilesChanged()
 	}
 
 	function replaceFile(file: File, item: SelectedFile, state: FileState = 'success') {
 		item.file = file
 		item.fileName = file.name
 		item.state = state
+		notifySelectedFilesChanged()
 	}
 
 	function addOrReplaceFile(file: File, fileId: string, state: FileState = 'success') {
@@ -52,6 +58,7 @@ export default function useFileList(
 				fileName: file.name,
 				file,
 			})
+			notifySelectedFilesChanged()
 			removeFromErrorList(fileId)
 		}
 	}

package/src/components/index.ts

@@ -53,6 +53,7 @@ export { default as SySelect } from './Customs/Selects/SySelect/SySelect.vue'
 export { default as SyAutocomplete } from './Customs/Selects/SyAutocomplete/SyAutocomplete.vue'
 // export { default as SyBtnSelect } from './Customs/Selects/SyBtnSelect/SyBtnSelect.vue'
 export { default as SyCheckbox } from './Customs/SyCheckbox/SyCheckbox.vue'
+export { default as SyCheckBoxGroup } from './Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue'
 export { default as SyForm } from './Customs/SyForm/SyForm.vue'
 export { default as SyRadioGroup } from './Customs/SyRadioGroup/SyRadioGroup.vue'
 export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
@@ -119,6 +120,8 @@ export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
 export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
+export { default as StatusPage } from './StatusPage/StatusPage.vue'
+export { default as DeclarationAccessibilityPage } from './DeclarationAccessibilityPage/DeclarationAccessibilityPage.vue'
 
 // ===========================
 // Amelipro

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -284,6 +284,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'notBeforeDate',
+			options: { date: '', message: 'Date cannot be before reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'notBeforeDate',
+			options: { date: undefined as unknown as string, message: 'Date cannot be before reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in notBeforeDate rule', () => {
@@ -296,7 +308,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate notAfterDate rule', () => {
@@ -324,6 +336,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'notAfterDate',
+			options: { date: '', message: 'Date cannot be after reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'notAfterDate',
+			options: { date: undefined as unknown as string, message: 'Date cannot be after reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in notAfterDate rule', () => {
@@ -336,7 +360,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate dateExact rule', () => {
@@ -364,6 +388,18 @@ describe('useFieldValidation', () => {
 		}])[0]!
 		expect(ruleWithoutDate(new Date())).toEqual({ error: 'Configuration de la règle invalide' })
 		expect(rule('')).toEqual({}) // Empty string should be ignored
+
+		const ruleWithEmptyDate = generateRules([{
+			type: 'dateExact',
+			options: { date: '', message: 'Date must be exactly the reference date.' },
+		}])[0]!
+		expect(ruleWithEmptyDate(new Date())).toEqual({})
+
+		const ruleWithUndefinedDate = generateRules([{
+			type: 'dateExact',
+			options: { date: undefined as unknown as string, message: 'Date must be exactly the reference date.' },
+		}])[0]!
+		expect(ruleWithUndefinedDate(new Date())).toEqual({})
 	})
 
 	it('should throw when date reference is not a string in dateExact rule', () => {
@@ -376,7 +412,7 @@ describe('useFieldValidation', () => {
 				},
 			}])[0]!
 			invalidRule(new Date())
-		}).toThrow('Date reference must be a string in DD/MM/YYYY format')
+		}).toThrow('La date de référence doit être une chaîne au format DD/MM/YYYY')
 	})
 
 	it('should validate custom rule', () => {

package/src/composables/rules/useFieldValidation.ts

@@ -233,14 +233,19 @@ export function useFieldValidation() {
 				}
 
 				case 'notBeforeDate': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -250,7 +255,7 @@ export function useFieldValidation() {
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)
@@ -269,14 +274,19 @@ export function useFieldValidation() {
 				}
 
 				case 'notAfterDate': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -286,7 +296,7 @@ export function useFieldValidation() {
 
 					// Check if options.date is a string and in DD/MM/YYYY format
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)
@@ -305,14 +315,19 @@ export function useFieldValidation() {
 				}
 
 				case 'dateExact': {
-					if (typeof options.date === 'undefined') {
+					const hasDateOption = Object.prototype.hasOwnProperty.call(options, 'date')
+					if (!hasDateOption) {
 						return { error: 'Configuration de la règle invalide' }
 					}
 					// Si la valeur est null ou vide, ne pas valider (champ vide autorisé)
 					if (value === null || value === undefined || value === '') {
 						return {}
 					}
-					if (options.date === null || (typeof options.date === 'string' && options.date.trim() === '')) {
+					if (
+						options.date === undefined
+						|| options.date === null
+						|| (typeof options.date === 'string' && options.date.trim() === '')
+					) {
 						return {}
 					}
 					const dateValue = parseDate(value)
@@ -321,7 +336,7 @@ export function useFieldValidation() {
 					}
 
 					if (typeof options.date !== 'string') {
-						throw new Error('Date reference must be a string in DD/MM/YYYY format')
+						throw new Error('La date de référence doit être une chaîne au format DD/MM/YYYY')
 					}
 
 					const referenceDate = parseDate(options.date)

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -351,6 +351,9 @@ import '../../styles/shared.css';
 
   <h4>Outil éventuel</h4>
   <p>Utilisation du lecteur d'écran pour vérifier la navigation et l'accessibilité des formulaires, tel que l'indication du caractère obligatoire du champ, la liaison du champ aux aides à la saisie ainsi qu'aux messages d'erreurs, le comportement à la soumission du formulaire, etc.</p>
+
+   <h4>Ressources</h4>
+   <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module6/forms-concepts-fr.html">Concepts des formulaires</a></p>
 </div>
 
 <div className="verification-card">
@@ -375,6 +378,8 @@ import '../../styles/shared.css';
       <li>Les en-têtes de colonnes des tableaux utilisent des balises `th` avec l'attribut `scope="col"`.</li>
     </ul>
   </div>
+  <h4>Ressources</h4>
+   <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module4/tables-concepts-fr.html">Concepts des tableaux</a></p>
 </div>
 
 <div className="verification-card">
@@ -432,6 +437,8 @@ import '../../styles/shared.css';
   </ol>
   <h4>Outil éventuel</h4>
   <p>Aucun</p>
+  <h4>Ressources</h4>
+  <p><a href="https://bati-itao.github.io/learning/esdc-self-paced-web-accessibility-course/module9/introduction-fr.html">Concepts des contenus multimédia</a></p>
 </div>
 
 <div className="info-section">

package/src/utils/theme/index.ts

@@ -0,0 +1,19 @@
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import type { ComputedRef } from 'vue'
+
+export function useThemeLocales<
+	T extends Record<string, unknown> & { default: unknown },
+>(locales: T): {
+	themeLocales: ComputedRef<T[keyof T]>
+} {
+	const vuetifyTheme = useTheme()
+
+	const themeLocales = computed((): T[keyof T] => {
+		return (locales[vuetifyTheme.name.value as keyof T] ?? locales.default) as T[keyof T]
+	})
+
+	return {
+		themeLocales,
+	}
+}