@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

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

@@ -0,0 +1,216 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/FileUpload/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+				<v-col cols="6">
+					<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+						<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+				<v-col cols="6">
+					<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+						<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel
+							v-for="(item, index) in AccessibiliteItemsValidated"
+							:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+			</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/FileUpload/AccessibiliteItems.ts

@@ -0,0 +1,27 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2  Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?   ',
+		items: [
+			{
+
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+
+	},
+
+]

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/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

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

@@ -0,0 +1,237 @@
+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} />
+
+# FilterInline
+
+<Canvas of={FilterInlineStories.Default} />
+
+# API
+
+<Controls of={FilterInlineStories.Default} />
+
+# Examples
+
+## Formatage des puces
+
+Vous pouvez modifier le formatage des puces en utilisant la propriété `chipFormat`.
+
+<Canvas
+	of={FilterInlineStories.ChipFormat}
+		source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { FilterInline, RangeField } from '@cnamts/synapse'
+			import { VSelect } from 'vuetify/components'
+
+			const filters = [
+				{
+					name: 'range-slider',
+					title: 'Intervalle',
+					formatChip: ([min, max]: [number, number]) => [
+						{
+							text: \`De \${min} à \${max}\`,
+							value: [min, max],
+						},
+					],
+				},
+			]
+		</script>
+
+		<template>
+			<FiltersInline v-model="filters">
+				<template #range-slider="{ props }">
+					<RangeField
+						v-bind="props"
+						label="Intervalle"
+						max="50"
+						min="0"
+					/>
+				</template>
+			</FiltersInline>
+		</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>
+		`
+	}}
+/>