@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

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>
+		`
+	}}
+/>

package/src/components/FilterInline/FilterInline.stories.ts

@@ -1,10 +1,12 @@
 import { fn } from '@storybook/test'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { VSelect, VTextField } from 'vuetify/components'
+import { ref } from 'vue'
+import { VDivider, VSelect, VTextField } from 'vuetify/components'
+import FilterSideBar from '../FilterSideBar/FilterSideBar.vue'
 import PeriodField from '../PeriodField/PeriodField.vue'
+import RangeField from '../RangeField/RangeField.vue'
 import SearchListField from '../SearchListField/SearchListField.vue'
 import FilterInline from './FilterInline.vue'
-import RangeField from '../RangeField/RangeField.vue'
 
 const meta = {
 	title: 'Composants/Filtres/FilterInline',
@@ -258,10 +260,11 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `
+import { ref } from 'vue'
 import { FilterInline, PeriodField, SearchListField } from '@cnamts/synapse'
 import { VTextField, VSelect } from 'vuetify/components'
 
-const filters = [
+const filters = ref([
 	{
 		name: 'name',
 		title: 'Identité',
@@ -278,7 +281,7 @@ const filters = [
 		name: 'profession',
 		title: 'Profession',
 	},
-]
+])
 
 const folderTypes = [
 	{ title: 'Arrêt de Travail (AT)', value: 'AT' },
@@ -378,10 +381,11 @@ export const ChipFormat: Story = {
 			{
 				name: 'Script',
 				code: `
+import { ref } from 'vue'
 import { FilterInline, RangeField } from '@cnamts/synapse'
 import { VSelect } from 'vuetify/components'
 
-const filters = [
+const filters = ref([
 	{
 		name: 'range-slider',
 		title: 'Intervalle',
@@ -392,7 +396,7 @@ const filters = [
 			},
 		],
 	},
-]
+])
 
 const folderTypes = [
 	'AT',
@@ -404,3 +408,356 @@ const folderTypes = [
 		],
 	},
 }
+
+export const FilterCombination: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	decorators: [
+		() => ({
+			template: `
+			<VApp style="height: 500px; overflow-y: hidden;">
+				<div class="pa-4">
+					<story />
+				</div>
+			</VApp>
+		`,
+		}),
+	],
+	render: args => ({
+		components: { FilterSideBar, FilterInline, VTextField, VSelect, PeriodField, SearchListField, VDivider },
+		setup() {
+			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',
+				},
+			]
+
+			return { args, filters, folderTypes, professionList }
+		},
+		template: `
+		<div>
+			<FilterSideBar
+				v-model="filters"
+				v-bind="args"
+			>
+				<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"
+				v-bind="args"
+			>
+				<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>
+		`,
+	}),
+	parameters: {
+		layout: 'fullscreen',
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+		<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>
+`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+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>`,
+			},
+		],
+	},
+}

package/src/components/FilterInline/constants/ExpertiseLevelEnum.ts

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

package/src/components/FilterSideBar/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />