@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/src/components/DatePicker/DateTextInput.vue

@@ -510,7 +510,22 @@
 					emit('update:model-value', formattedDate)
 				}
 			}
+			else {
+				// Même si la validation échoue, conserver la valeur actuelle
+				// pour éviter que la date ne disparaisse
+				emit('update:model-value', props.modelValue)
+			}
+		}
+		else if (props.required) {
+			// Si le champ est vide mais requis, émettre quand même la valeur actuelle
+			// pour éviter que la date ne disparaisse
+			emit('update:model-value', props.modelValue)
 		}
+		else {
+			// Si le champ est vide et non requis, émettre null
+			emit('update:model-value', null)
+		}
+
 		// Toujours valider les règles, même si le champ est vide
 		validateRules(inputValue.value || '')
 	}

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

@@ -19,7 +19,7 @@ describe('DatePicker.vue', () => {
 		})
 	})
 
-	it('displays the placeholder text', () => {
+	it('displays the placeholder text as label', () => {
 		const placeholder = 'Sélectionner une date'
 		const wrapper = mount(DatePicker, {
 			global: {
@@ -27,7 +27,10 @@ describe('DatePicker.vue', () => {
 			},
 			props: { placeholder },
 		})
-		expect(wrapper.find('input').attributes('placeholder')).toBe(undefined)
+
+		// Vérifier que le placeholder est affiché comme label
+		const label = wrapper.find('label')
+		expect(label.text()).toBe(placeholder)
 	})
 
 	it('emits update:modelValue event on date selection', async () => {
@@ -63,16 +66,6 @@ describe('DatePicker.vue', () => {
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
 
-	it('hides the date picker on outside click', async () => {
-		const input = wrapper.find('input')
-		await input.trigger('focus')
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-
-		document.body.click()
-		await nextTick()
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
-	})
-
 	it('updates aria-labels for date picker navigation buttons', async () => {
 		wrapper.vm.isDatePickerVisible = true
 		await nextTick()
@@ -85,14 +78,14 @@ describe('DatePicker.vue', () => {
 		)
 
 		if (arrowDown) {
-			expect(arrowDown.getAttribute('aria-label')).toBe('Fleche vers le bas')
+			expect(arrowDown.getAttribute('aria-label')).toBe('Changer de vue')
 		}
 		arrowLeftButtons.forEach((button, index) => {
 			if (index === 0) {
-				expect(button.getAttribute('aria-label')).toBe('Fleche vers la gauche')
+				expect(button.getAttribute('aria-label')).toBe('Mois précédent')
 			}
 			else if (index === 1) {
-				expect(button.getAttribute('aria-label')).toBe('Fleche vers la droite')
+				expect(button.getAttribute('aria-label')).toBe('Mois suivant')
 			}
 		})
 	})

package/src/components/FileList/FileList.vue

@@ -3,6 +3,7 @@
 	import { useWidthable, type Widthable } from '@/composables/widthable'
 	import { locales as defaultLocales } from './UploadItem/locales'
 
+	export type FileState = 'initial' | 'success' | 'error' | 'loading'
 	export interface Item {
 		id: string
 		title: string
@@ -43,7 +44,7 @@
 			:title="item.title"
 			:file-name="item.fileName"
 			:optional="item.optional"
-			:state="(item.state as 'initial' | 'success' | 'error' | 'loading')"
+			:state="(item.state as FileState)"
 			:progress="item.progress"
 			:show-upload-btn="item.showUploadBtn"
 			:show-preview-btn="item.showPreviewBtn"

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -112,6 +112,12 @@
 					>
 						{{ message ?? locales.optionalDocument }}
 					</div>
+					<div
+						v-if="state === 'error'"
+						class="file-item__error-message text-error"
+					>
+						{{ locales.error }}
+					</div>
 				</div>
 			</div>
 			<div class="file-item__actions">
@@ -191,6 +197,10 @@
 	gap: tokens.$gap-3;
 	padding-block: tokens.$padding-4;
 	border-bottom: 1px solid tokens.$colors-border-subdued;
+
+	&:first-child:last-child {
+		border-bottom: none;
+	}
 }
 
 .file-item__title {

package/src/components/FileUpload/FileUpload.stories.ts

@@ -6,6 +6,8 @@ import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
 import { useNotificationService } from '@/services/NotificationService'
 import { mdiCloudUpload } from '@mdi/js'
 import { VIcon } from 'vuetify/components'
+import { computed, ref } from 'vue'
+import FileList from '../FileList/FileList.vue'
 
 const meta = {
 	title: 'Composants/Formulaires/FileUpload',
@@ -427,3 +429,85 @@ export const Customization: Story = {
 		],
 	},
 }
+
+export const WithFileList: Story = {
+	args: {
+		'modelValue': [],
+		'onUpdate:modelValue': fn(),
+		'onError': fn(),
+		'multiple': true,
+	},
+	render: args => ({
+		components: { FileUpload, FileList },
+		setup() {
+			const model = ref<Array<File>>([])
+
+			const uploadList = computed(
+				() => model.value.map(item => ({
+					id: item.name,
+					title: item.name,
+					state: 'success',
+				})),
+			)
+
+			function removeFile(itemToRemove: { id: string }) {
+				model.value = model.value.filter(item => item.name !== itemToRemove.id)
+			}
+			return { args, uploadList, removeFile, model }
+		},
+		template: `<div style="max-width: 600px">
+			<FileUpload
+				v-bind="args"
+				v-model="model"
+			/>
+			<FileList
+				:uploadList="uploadList"
+				@delete="removeFile"
+			/>
+		</div>`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<div style="max-width: 600px">
+		<FileUpload
+			v-model="model"
+			:multiple="true"
+		/>
+		{{ model }}
+		<FileList
+			:uploadList="uploadList"
+			@delete="removeFile"
+		/>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { FileUpload, FileList } from '@cnamts/synapse'
+	import { ref, computed } from 'vue'
+
+	const files = ref<Array<File>>([])
+	const uploadList = computed(
+		() => files.value.map(item => ({
+			id: item.name,
+			title: item.name,
+			state: 'success',
+		})),
+	)
+
+	function removeFile(itemToRemove: { id: string }) {
+		files.value = files.value.filter(file => file.name !== itemToRemove.id)
+	}
+</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/FileUpload/FileUpload.vue

@@ -69,6 +69,7 @@
 
 		if (errors.length) {
 			emits('error', errors)
+			return
 		}
 		if (props.multiple) {
 			fileList.value = [...fileList.value, ...validFiles]

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

@@ -141,7 +141,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(undefined)
 		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
 	})
 
@@ -166,7 +166,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[pdfFile]])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(undefined)
 		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
 
 		await wrapper.find('label').trigger('drop', {
@@ -176,7 +176,7 @@ describe('FileUpload', () => {
 		})
 
 		expect(wrapper.emitted('error')?.[1]).toBeFalsy()
-		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([[pdfFile, pdfFile]])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[pdfFile, pdfFile]])
 	})
 
 	it('rejects the drop of a file that is too big', async () => {
@@ -198,7 +198,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('update:modelValue')).toBe(undefined)
 		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg est trop volumineux. Taille max. : 1 o']])
 	})
 

package/src/components/FilterInline/FilterInline.mdx

@@ -1,5 +1,6 @@
 import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
 import * as FilterInlineStories from './FilterInline.stories.ts';
+import * as FilterSideBarStories from '@/components/FilterSideBar/FilterSideBar.stories.ts';
 
 <Meta of={FilterInlineStories} />
 
@@ -28,14 +29,6 @@ Vous pouvez modifier le formatage des puces en utilisant la propriété `chipFor
 			import { VSelect } from 'vuetify/components'
 
 			const filters = [
-				{
-					name: 'updated-at',
-					title: 'Mise à jour',
-				},
-				{
-					name: 'folder',
-					title: 'Type de dossier',
-				},
 				{
 					name: 'range-slider',
 					title: 'Intervalle',
@@ -47,35 +40,10 @@ Vous pouvez modifier le formatage des puces en utilisant la propriété `chipFor
 					],
 				},
 			]
-
-			const folderTypes = [
-				'AT',
-				'MP',
-				'Autre',
-			]
 		</script>
 
 		<template>
 			<FiltersInline v-model="filters">
-				<template #updated-at="{ props }">
-					<DatePicker
-						v-bind="props"
-						label="Date de mise à jour"
-						variant="outlined"
-					/>
-				</template>
-
-				<template #folder="{ props }">
-					<VSelect
-						v-bind="props"
-						:items="folderTypes"
-						label="Type de dossier"
-						multiple
-						variant="outlined"
-						hide-details
-					/>
-				</template>
-
 				<template #range-slider="{ props }">
 					<RangeField
 						v-bind="props"
@@ -88,4 +56,182 @@ Vous pouvez modifier le formatage des puces en utilisant la propriété `chipFor
 		</template>
 		`
 	}}
-/>
+/>
+
+
+## Combinaison de composants filtres
+
+Vous pouvez utiliser plusieurs composants de filtres pour un seul et même filtre afin de pouvoir modifier un filtre à différents endroits sur une page.
+
+
+<Canvas
+	of={FilterInlineStories.FilterCombination}
+	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FilterSideBar, filterInline, SearchListField, PeriodField } from '@cnamts/synapse'
+import { VDivider, VSelect, VTextField } from 'vuetify/components'
+
+const filters = ref([
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+	{
+		name: 'period',
+		title: 'Période',
+	},
+	{
+		name: 'profession',
+		title: 'Profession',
+	},
+])
+
+const folderTypes = [
+	{
+		title: 'AT',
+		value: 'at',
+	},
+	{
+		title: 'MP',
+		value: 'mp',
+	},
+	{
+		title: 'Autre',
+		value: 'other',
+	},
+]
+
+const professionList = [
+	{
+		label: 'Chirurgien-dentiste',
+		value: 'chirurgien-dentiste',
+	},
+	{
+		label: 'Infirmier',
+		value: 'infirmier',
+	},
+	{
+		label: 'Orthophoniste',
+		value: 'orthophoniste',
+	},
+	{
+		label: 'Orthoptiste',
+		value: 'orthoptiste',
+	},
+	{
+		label: 'Pédicure-podologue',
+		value: 'pedicure-podologue',
+	},
+	{
+		label: 'Pharmacien',
+		value: 'pharmacien',
+	},
+]
+	
+</script>
+
+<template>
+	<div>
+		<FilterSideBar
+			v-model="filters"
+		>
+			<template #name="{ props }">
+				<VTextField
+					v-bind="props"
+					label="Nom"
+					variant="outlined"
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #folder="{ props }">
+				<p class="text-secondary mb-4">
+					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+				</p>
+
+				<VSelect
+					v-bind="props"
+					:items="folderTypes"
+					label="Type de dossier"
+					multiple
+					variant="outlined"
+					return-object
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #period="{ props }">
+				<PeriodField
+					v-bind="props"
+					variant="outlined"
+				/>
+			</template>
+
+			<template #profession="{ props }">
+				<SearchListField
+					v-bind="props"
+					:items="professionList"
+				/>
+			</template>
+		</FilterSideBar>
+		<VDivider class="my-4" />
+		<FilterInline
+			v-model="filters"
+		>
+			<template #name="{ props }">
+				<VTextField
+					v-bind="props"
+					label="Nom"
+					variant="outlined"
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #folder="{ props }">
+				<p class="text-secondary mb-4">
+					Vous pouvez filtrer entre les dossiers de type <b>Arrêt de Travail (AT)</b> et <b>Maladie Professionnelle (MP)</b> ou <b>Autre</b>.
+				</p>
+
+				<VSelect
+					v-bind="props"
+					:items="folderTypes"
+					label="Type de dossier"
+					multiple
+					variant="outlined"
+					return-object
+					hide-details
+					color="primary"
+				/>
+			</template>
+
+			<template #period="{ props }">
+				<PeriodField
+					v-bind="props"
+					variant="outlined"
+				/>
+			</template>
+
+			<template #profession="{ props }">
+				<SearchListField
+					v-bind="props"
+					:items="professionList"
+					color="primary"
+				/>
+			</template>
+		</FilterInline>
+	</div>
+</template>
+		`
+	}}
+/>