@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -6,6 +6,7 @@ describe('SyTablePagination.vue', () => {
 	it('renders the component with default props', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -19,6 +20,7 @@ describe('SyTablePagination.vue', () => {
 	it('displays pagination when there are multiple pages', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -31,6 +33,7 @@ describe('SyTablePagination.vue', () => {
 	it('does not display pagination navigation when there is only one page', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 5,
@@ -44,6 +47,7 @@ describe('SyTablePagination.vue', () => {
 	it('always shows items per page selector even with only one page', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 5,
@@ -59,6 +63,7 @@ describe('SyTablePagination.vue', () => {
 		// Test with standard value
 		const wrapper1 = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10, // Standard value
 				itemsLength: 42,
@@ -66,16 +71,17 @@ describe('SyTablePagination.vue', () => {
 			},
 		})
 
-		const vm1 = wrapper1.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-		expect(vm1.itemsPerPageOptions).toBeDefined()
+		const vm1 = wrapper1.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+		expect(vm1.formatedItemsPerPageOptions).toBeDefined()
 
-		const options1 = vm1.itemsPerPageOptions
+		const options1 = vm1.formatedItemsPerPageOptions
 		// Should have standard options 5, 10, 25, 50, 100) plus the 'All' option (-1)
 		expect(options1.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 50, 100])
 
 		// Test with custom value
 		const wrapper2 = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 42, // Custom value
 				itemsLength: 100,
@@ -83,8 +89,8 @@ describe('SyTablePagination.vue', () => {
 			},
 		})
 
-		const vm2 = wrapper2.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-		const options2 = vm2.itemsPerPageOptions
+		const vm2 = wrapper2.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+		const options2 = vm2.formatedItemsPerPageOptions
 
 		// Should include the custom value (42)
 		const hasCustomValue = options2.some(option => option.value === 42)
@@ -97,6 +103,7 @@ describe('SyTablePagination.vue', () => {
 	it('shows correct range when "All" is selected', async () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: -1, // "All" option
 				itemsLength: 42,
@@ -111,6 +118,7 @@ describe('SyTablePagination.vue', () => {
 	it('emits update:page event when SyPagination emits update:modelValue', async () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -130,6 +138,7 @@ describe('SyTablePagination.vue', () => {
 	it('has the correct structure for items per page selection', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -144,10 +153,11 @@ describe('SyTablePagination.vue', () => {
 	})
 
 	// Tests for itemsPerPageOptions functionality
-	describe('itemsPerPageOptions', () => {
-		it('should use default options when itemsPerPageOptions is not provided', () => {
+	describe('formatedItemsPerPageOptions', () => {
+		it('should use default options when formatedItemsPerPageOptions is not provided', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -156,15 +166,16 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should have default options: 5, 10, 25, 50, 100, and "Tous" (-1)
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(6)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, 50, 100, -1])
 		})
 
-		it('should limit options when itemsPerPageOptions is provided', () => {
+		it('should limit options when formatedItemsPerPageOptions is provided', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -174,16 +185,17 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only have the limited options, no "Tous" option
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(3)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
 			expect(selectOptions.map(opt => opt.text)).toEqual(['5', '10', '25'])
 		})
 
-		it('should include "Tous" option when explicitly allowed in itemsPerPageOptions', () => {
+		it('should include "Tous" option when explicitly allowed in formatedItemsPerPageOptions', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -193,8 +205,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should have the limited options plus "Tous"
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(4)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, -1])
 
@@ -207,6 +219,7 @@ describe('SyTablePagination.vue', () => {
 		it('should add current itemsPerPage to options if not already included', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 15, // Not in the itemsPerPageOptions
@@ -216,8 +229,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should include the current itemsPerPage value and sort numerically
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(4)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 15, 25])
 		})
@@ -225,6 +238,7 @@ describe('SyTablePagination.vue', () => {
 		it('should not add current itemsPerPage if it is -1 (Tous)', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: -1, // "Tous" option
@@ -233,9 +247,9 @@ describe('SyTablePagination.vue', () => {
 				},
 			})
 
-			// Should not add -1 to the options since itemsPerPageOptions doesn't include it
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			// Should not add -1 to the options since formatedItemsPerPageOptions doesn't include it
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(3)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
 			expect(selectOptions.find(opt => opt.value === -1)).toBeUndefined()
@@ -244,6 +258,7 @@ describe('SyTablePagination.vue', () => {
 		it('should work with very restrictive options', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 5,
@@ -253,8 +268,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only have one option
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(1)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5])
 			expect(selectOptions.map(opt => opt.text)).toEqual(['5'])
@@ -263,6 +278,7 @@ describe('SyTablePagination.vue', () => {
 		it('should handle empty itemsPerPageOptions array', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -272,8 +288,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only include the current itemsPerPage since base options are empty
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(1)
 			expect(selectOptions.map(opt => opt.value)).toEqual([10])
 		})

package/src/components/Tables/common/types.ts

@@ -98,6 +98,7 @@ export type SyTableProps = {
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 }
 
 export type SyServerTableProps = {
@@ -120,4 +121,6 @@ export type SyServerTableProps = {
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
 }

package/src/components/UploadWorkflow/UploadWorkflow.mdx

@@ -17,7 +17,7 @@ import * as UploadWorkflowStories from './UploadWorkflow.stories';
 
 ## Événements
 
-Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, et réagir aux erreurs de validation en utilisant l’événement `error`.
+Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, réagir aux erreurs de validation en utilisant l’événement `error`, et intercepter l’ouverture d’une prévisualisation en utilisant l’événement `preview` (avec le `FileItem` associé).
 
 <Canvas of={UploadWorkflowStories.Events} />
 
@@ -39,6 +39,16 @@ Vous pouvez permettre à l’utilisateur de prévisualiser le fichier qu’il vi
 
 <Canvas of={UploadWorkflowStories.WithPreviewStep} />
 
+## Texte d'information
+
+Vous pouvez personnaliser le texte affiché dans la zone d’information du composant enfant `FileUpload` en utilisant la prop `info-text`.
+
+<Canvas of={UploadWorkflowStories.WithInfoText} />
+
+## Niveau de titre
+
+Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la prop `heading-level` (rendu via `role="heading"` et `aria-level`).
+
 ## Exemple d'utilisation
 
 <Source

package/src/components/UploadWorkflow/UploadWorkflow.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof UploadWorkflow> = {
 	title: 'Composants/Formulaires/UploadWorkflow',
 	component: UploadWorkflow,
 	parameters: {
-		controls: { exclude: ['update:modelValue', 'error'] },
+		controls: { exclude: ['update:modelValue', 'error', 'preview'] },
 	},
 	argTypes: {
 		'modelValue': {
@@ -75,6 +75,36 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'headingLevel': {
+			description: 'Niveau du titre affiché (utilise role="heading" et aria-level).',
+			control: {
+				type: 'number',
+				min: 1,
+				max: 6,
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'number',
+				},
+				defaultValue: {
+					summary: '4',
+				},
+			},
+		},
+		'infoText': {
+			description: 'Personnalise le texte affiché dans la zone d’information du composant enfant FileUpload (slot info-text).',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: '\'\'',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			description: 'Les options pour les composants enfants.',
 			control: 'object',
@@ -186,6 +216,15 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'onPreview': {
+			description: 'Événement émis lors de l\'ouverture d\'une prévisualisation.',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'FileItem',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement émis lorsqu\'un fichier est ajouté ou supprimé.',
 			table: {
@@ -220,7 +259,7 @@ const meta: Meta<typeof UploadWorkflow> = {
 			table: {
 				category: 'slots',
 				type: {
-					summary: '{}',
+					summary: '{ id: string }',
 				},
 			},
 			control: 'text',
@@ -267,6 +306,7 @@ export const Default: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -346,7 +386,7 @@ export const OptionalDocument: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -355,7 +395,7 @@ export const OptionalDocument: Story = {
 		},
 		{
 			id: '3',
-			title: 'Relevé d'identité bancaire',
+			title: 'Relevé d\\'identité bancaire',
 			optional: true,
 		},
 	]
@@ -380,6 +420,7 @@ export const WithPreviewStep: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 		'showFilePreview': true,
 	},
 	parameters: {
@@ -391,6 +432,7 @@ export const WithPreviewStep: Story = {
 		v-model="files"
 		:upload-list="uploadList"
 		:showFilePreview="true"
+		@preview="onPreview"
 	/>
 </template>`,
 
@@ -405,13 +447,64 @@ export const WithPreviewStep: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: 'Bill',
 			title: 'Facture de soin',
 		},
 	]
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
+</script>`,
+			},
+		],
+	},
+}
+
+export const WithInfoText: Story = {
+	args: {
+		'modelValue': [],
+		'uploadList': [
+			{
+				id: '1',
+				title: 'Carte d\'identité',
+			},
+			{
+				id: '2',
+				title: 'Facture de soin',
+			},
+		],
+		'infoText': 'Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG.',
+		'onUpdate:modelValue': fn(),
+		'onError': fn(),
+		'onPreview': fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UploadWorkflow
+		v-model="files"
+		:upload-list="uploadList"
+		info-text="Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG."
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UploadWorkflow } from '@cnamts/synapse'
+
+	const files = ref([])
+	const uploadList = [
+		{ id: '1', title: 'Carte d\\'identité' },
+		{ id: '2', title: 'Facture de soin' },
+	]
 </script>`,
 			},
 		],
@@ -451,7 +544,7 @@ export const OneFile: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 	]
 
@@ -468,14 +561,17 @@ export const Events: Story = {
 			{
 				id: 'ID',
 				title: 'Carte d\'identité',
+				showPreviewBtn: true,
 			},
 			{
 				id: 'Bill',
 				title: 'Facture de soin',
+				showPreviewBtn: true,
 			},
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	render: (args) => {
 		return {
@@ -517,6 +613,7 @@ export const Events: Story = {
 					:upload-list="args.uploadList"
 					:vuetify-options="options"
 					@error="[showError, args.onError]"
+					@preview="args.onPreview"
 					@update:modelValue="[valueUpdated, args['onUpdate:modelValue']]"
 				/>
 				<VSnackbar
@@ -549,6 +646,7 @@ export const Events: Story = {
 		:upload-list="uploadList"
 		vuetify-options="options"
 		@onError="showError"
+		@onPreview="onPreview"
 		@onUpdate:modelValue="valueUpdated"
 	/>
 </template>`,
@@ -563,11 +661,13 @@ export const Events: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
+			showPreviewBtn: true,
 		},
 		{
 			id: 'Bill',
 			title: 'Facture de soin',
+			showPreviewBtn: true,
 		},
 	]
 
@@ -581,13 +681,13 @@ export const Events: Story = {
 		}
 	}
 
-	function showError (errors: string[]) {
+	function showError(errors: string[]) {
 		snackbarText.value = errors.join(', ')
 		snackbarColor.value = 'error';
 		snackbar.value = true
 	}
 
-	function valueUpdated (items: {fileName: string, file: File}[]) {
+	function valueUpdated(items: { fileName: string, file: File }[]) {
 		if(items.length === 0) {
 			return
 		}
@@ -595,6 +695,10 @@ export const Events: Story = {
 		snackbarColor.value = 'success';
 		snackbar.value = true
 	}
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
 </script>`,
 			},
 		],
@@ -680,7 +784,7 @@ export const Slots: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: 'Bill',
@@ -745,7 +849,7 @@ export const Customization: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -827,7 +931,7 @@ export const ManuallySetFile: Story = {
 	const files = ref([
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 			state: 'success',
 			fileName: 'carte_identite.jpg',
 			optional: false,
@@ -848,7 +952,7 @@ export const ManuallySetFile: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -917,7 +1021,7 @@ export const ManuallySetStates: Story = {
 	const files = ref([
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 			state: 'error',
 			fileName: 'carte_identite.jpg',
 			optional: false,