@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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

@@ -1,7 +1,8 @@
+/* eslint-disable vue/one-component-per-file */
 import { fn } from '@storybook/test'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { ref } from 'vue'
-import { VDivider, VSelect, VTextField } from 'vuetify/components'
+import { defineComponent, ref, watch, type PropType } from 'vue'
+import { VCheckbox, VDivider, VSelect, VTextField } from 'vuetify/components'
 import FilterSideBar from '../FilterSideBar/FilterSideBar.vue'
 import PeriodField from '../PeriodField/PeriodField.vue'
 import RangeField from '../RangeField/RangeField.vue'
@@ -210,6 +211,7 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `
+				<template>
 <FilterInline
 	v-model="filters"
 >
@@ -255,11 +257,13 @@ export const Default: Story = {
 		/>
 	</template>
 </FilterInline>
+</template>
 				`,
 			},
 			{
 				name: 'Script',
 				code: `
+				<script lang='ts setup>
 import { ref } from 'vue'
 import { FilterInline, PeriodField, SearchListField } from '@cnamts/synapse'
 import { VTextField, VSelect } from 'vuetify/components'
@@ -315,6 +319,7 @@ const professionList = [
 		value: 'pharmacien',
 	},
 ]
+	</script>
 				`,
 			},
 		],
@@ -761,3 +766,304 @@ const professionList = [
 		],
 	},
 }
+
+const BooleanFilter = defineComponent({
+	components: {
+		VCheckbox,
+	},
+	props: {
+		modelValue: {
+			type: String,
+			default: null,
+		},
+		title: {
+			required: true,
+			type: String,
+		},
+		label: {
+			required: true,
+			type: String,
+		},
+	},
+	template: `
+	<VCheckbox
+		:model-value="modelValue === title"
+		:label="label"
+		color="primary"
+		@update:model-value="(value) => $emit('update:modelValue', value ? title : null)"
+	/>
+	`,
+})
+
+export const Boolean: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { FilterInline, BooleanFilter },
+		setup() {
+			const filters = ref([
+				{
+					name: 'eligibility',
+					title: 'Éligibilité',
+				},
+			])
+
+			return { args, filters }
+		},
+		template: `
+<FilterInline v-model="filters" v-bind="args">
+	<template #eligibility="{ props }">
+		<p class="pt-2">Est ce que le patient est éligible à la Reconnaissance en <em class="text-primary">Qualité de travailleur handicapé</em>&nbsp;?</p>
+		<BooleanFilter
+			v-bind="props"
+			label="Eligible RQTH"
+			title="RQTH"
+			@update:model-value="value => bool = value === 'eligibility'"
+		/>
+	</template>
+</FilterInline>
+		`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FilterInline v-model="filters">
+	<template #eligibility="{ props }">
+		<p class="pt-2">Est ce que le patient est éligible à la Reconnaissance en <em class="text-primary">Qualité de travailleur handicapé</em>&nbsp;?</p>
+		<BooleanFilter
+			v-bind="props"
+			label="Eligible RQTH"
+			title="RQTH"
+			@update:model-value="value => bool = value === 'eligibility'"
+		/>
+	</template>
+</FilterInline>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { FilterInline } from '@cnamts/synapse'
+	import BooleanFilter from './BooleanFilter.vue'
+
+	const filters = ref([
+		{
+			name: 'eligibility',
+			title: 'Éligibilité',
+		},
+	])
+
+	const bool = ref(false)
+</script>`,
+			},
+			{
+				name: 'BooleanFilter.vue',
+				code: `
+<script setup lang="ts">
+	const props = defineProps<{
+		title: string
+		label: string
+	}>()
+
+	const modelValue = defineModel<string | null>()
+</script>
+
+<template>
+	<VCheckbox
+		:model-value="modelValue === title"
+		:label
+		color="primary"
+		@update:model-value="value => modelValue = value ? props.title : undefined"
+	/>
+</template>
+`,
+			},
+		],
+	},
+}
+
+const ManyFilters = defineComponent({
+	components: {
+		VCheckbox,
+	},
+	props: {
+		modelValue: {
+			type: Object as PropType<string[] | null | undefined>,
+			default: undefined,
+		},
+	},
+	emits: ['update:modelValue'],
+	setup(args, ctx) {
+		const rqth = ref(false)
+		const pch = ref(false)
+		const aeeh = ref(false)
+
+		watch(() => args.modelValue, (value) => {
+			rqth.value = !!value?.includes('RQTH')
+			pch.value = !!value?.includes('PCH')
+			aeeh.value = !!value?.includes('AEEH')
+		}, { immediate: true, deep: true })
+
+		watch([rqth, pch, aeeh], () => {
+			const values: string[] = []
+			if (rqth.value) values.push('RQTH')
+			if (pch.value) values.push('PCH')
+			if (aeeh.value) values.push('AEEH')
+			ctx.emit('update:modelValue', values.length ? values : undefined)
+		})
+
+		return { rqth, pch, aeeh }
+	},
+	template: `
+		<div>
+			<p>Est ce que le patient est éligible à la Reconnaissance en <em class="text-primary">Qualité de travailleur handicapé</em>&nbsp;?</p>
+			<VCheckbox
+				v-model="rqth"
+				label="Eligible RQTH"
+				color="primary"
+			/>
+			<hr>
+			<p class="mt-6">
+				Est ce que le patient est éligible à <em class="text-primary">Prestation de Compensation du Handicap</em>&nbsp;?
+			</p>
+			<VCheckbox
+				v-model="pch"
+				label="Eligible PCH"
+				color="primary"
+			/>
+			<hr>
+			<p class="mt-6">
+				Est ce que le patient est éligible à <em class="text-primary">l'Allocation d'Education de l'Enfant Handicapé</em>&nbsp;?
+			</p>
+			<VCheckbox
+				v-model="aeeh"
+				label="Eligible AEEH"
+				color="primary"
+			/>
+		</div>
+	`,
+})
+
+export const ManyFields: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { FilterInline, ManyFilters },
+		setup() {
+			const filters = ref([
+				{
+					name: 'eligibilities',
+					title: 'Éligibilités',
+				},
+			])
+
+			return { args, filters }
+		},
+		template: `
+<FilterInline v-model="filters" v-bind="args">
+	<template #eligibilities="{ props }">
+		<ManyFilters
+			v-bind="props"
+		/>
+	</template>
+</FilterInline>
+		`,
+	}),
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<FilterInline v-model="filters">
+	<template #eligibilities="{ props }">
+		<ManyFilters
+			v-bind="props"
+		/>
+	</template>
+</FilterInline>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { FilterInline } from '@cnamts/synapse'
+	import ManyFilters from './ManyFilters.vue'
+
+	const filters = ref([
+		{
+			name: 'eligibilities',
+			title: 'Éligibilités',
+		},
+	])
+</script>`,
+
+			},
+			{
+				name: 'ManyFilters.vue',
+				code: `
+<script setup lang="ts">
+	import { ref, watch } from 'vue'
+
+	const modelValue = defineModel<Array<string> | null>()
+
+	const rqth = ref(false)
+	const pch = ref(false)
+	const aeeh = ref(false)
+
+	watch(modelValue, (value) => {
+		rqth.value = !!value?.includes('RQTH')
+		pch.value = !!value?.includes('PCH')
+		aeeh.value = !!value?.includes('AEEH')
+	}, { immediate: true, deep: true })
+
+	watch([rqth, pch, aeeh], () => {
+		const values: string[] = []
+		if (rqth.value) values.push('RQTH')
+		if (pch.value) values.push('PCH')
+		if (aeeh.value) values.push('AEEH')
+		modelValue.value = values.length ? values : undefined
+	})
+
+</script>
+
+<template>
+	<div>
+		<p>Est ce que le patient est éligible à la Reconnaissance en <em class="text-primary">Qualité de travailleur handicapé</em>&nbsp;?</p>
+		<VCheckbox
+			v-model="rqth"
+			label="Eligible RQTH"
+			color="primary"
+		/>
+		<hr>
+		<p class="mt-6">
+			Est ce que le patient est éligible à <em class="text-primary">Prestation de Compensation du Handicap</em>&nbsp;?
+		</p>
+		<VCheckbox
+			v-model="pch"
+			label="Eligible PCH"
+			color="primary"
+		/>
+		<hr>
+		<p class="mt-6">
+			Est ce que le patient est éligible à <em class="text-primary">l'Allocation d'Education de l'Enfant Handicapé</em>&nbsp;?
+		</p>
+		<VCheckbox
+			v-model="aeeh"
+			label="Eligible AEEH"
+			color="primary"
+		/>
+	</div>
+</template>
+`,
+			},
+		],
+	},
+}

package/src/components/FilterInline/FilterInline.vue

@@ -4,7 +4,6 @@
 	import { toRef } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
-	import type { ChipItem } from '../ChipList/types'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
@@ -40,6 +39,7 @@
 			width="400px"
 			offset="12"
 			nudge-bottom="10px"
+			z-index="1000"
 		>
 			<template #activator="{ props: menuProps }">
 				<VBtn
@@ -83,8 +83,8 @@
 				/>
 				<slot
 					:props="{
-						modelValue: filter.value,
-						'onUpdate:modelValue': (value: ChipItem) => {
+						modelValue: filter.value as any,
+						'onUpdate:modelValue': (value: unknown) => {
 							if (value !== filter.value) {
 								filter.value = value
 								updateValue()

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

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

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

@@ -1,35 +1,249 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FilterInline > renders correctly with an active filter 1`] = `
-"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-name ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="1 filtre" aria-live="polite" role="status">1</span></transition-stub>
+<div class="
+  d-flex
+  flex-wrap
+  ma-n2
+  max-width-none
+  sy-filters-inline
+">
+  <button
+    aria-controls="v-menu-0"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="
+      bg-secondary
+      ma-2
+      sy-filter-name
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--rounded
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <div class="
+        ml-n1
+        mr-1
+        v-badge
+        v-badge--inline
+      ">
+        <div class="v-badge__wrapper">
+          <!---->
+          <transition-stub
+            appear="false"
+            css="true"
+            name="scale-rotate-transition"
+            persisted="false"
+          >
+            <span
+              aria-atomic="true"
+              aria-label="1 filtre"
+              aria-live="polite"
+              class="
+                v-badge__badge
+                v-theme--light
+              "
+              role="status"
+            >
+              1
+            </span>
+          </transition-stub>
+        </div>
+      </div>
+      <i
+        aria-hidden="true"
+        class="
+          M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
+          mdi
+          ml-1
+          notranslate
+          v-icon
+          v-icon--size-small
+          v-theme--light
+        "
+      ></i>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
 </div>
-</div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
-<!---->
-<!----></button>
-<!---->
-</div>"
 `;
 
 exports[`FilterInline > renders correctly with multiple active filters 1`] = `
-"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-name ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="1 filtre" aria-live="polite" role="status">1</span></transition-stub>
-</div>
-</div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
-<!---->
-<!----></button>
-<!----><button data-v-12532412="" type="button" class="v-btn v-btn--elevated v-theme--light bg-secondary v-btn--density-default v-btn--rounded v-btn--size-default v-btn--variant-elevated sy-filter-profession ma-2" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-2"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-  <!----><span class="v-btn__content" data-no-activator=""><div data-v-12532412="" class="v-badge v-badge--inline ml-n1 mr-1"><div class="v-badge__wrapper"><!----><transition-stub name="scale-rotate-transition" appear="false" persisted="false" css="true"><span class="v-badge__badge v-theme--light" aria-atomic="true" aria-label="2 filtres" aria-live="polite" role="status">2</span></transition-stub>
-  </div>
-  </div> <i data-v-12532412="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-1" aria-hidden="true"></i></span>
+<div class="
+  d-flex
+  flex-wrap
+  ma-n2
+  max-width-none
+  sy-filters-inline
+">
+  <button
+    aria-controls="v-menu-0"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="
+      bg-secondary
+      ma-2
+      sy-filter-name
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--rounded
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <div class="
+        ml-n1
+        mr-1
+        v-badge
+        v-badge--inline
+      ">
+        <div class="v-badge__wrapper">
+          <!---->
+          <transition-stub
+            appear="false"
+            css="true"
+            name="scale-rotate-transition"
+            persisted="false"
+          >
+            <span
+              aria-atomic="true"
+              aria-label="1 filtre"
+              aria-live="polite"
+              class="
+                v-badge__badge
+                v-theme--light
+              "
+              role="status"
+            >
+              1
+            </span>
+          </transition-stub>
+        </div>
+      </div>
+      <i
+        aria-hidden="true"
+        class="
+          M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
+          mdi
+          ml-1
+          notranslate
+          v-icon
+          v-icon--size-small
+          v-theme--light
+        "
+      ></i>
+    </span>
+    <!---->
+    <!---->
+  </button>
   <!---->
+  <button
+    aria-controls="v-menu-2"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    class="
+      bg-secondary
+      ma-2
+      sy-filter-profession
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--rounded
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <div class="
+        ml-n1
+        mr-1
+        v-badge
+        v-badge--inline
+      ">
+        <div class="v-badge__wrapper">
+          <!---->
+          <transition-stub
+            appear="false"
+            css="true"
+            name="scale-rotate-transition"
+            persisted="false"
+          >
+            <span
+              aria-atomic="true"
+              aria-label="2 filtres"
+              aria-live="polite"
+              class="
+                v-badge__badge
+                v-theme--light
+              "
+              role="status"
+            >
+              2
+            </span>
+          </transition-stub>
+        </div>
+      </div>
+      <i
+        aria-hidden="true"
+        class="
+          M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
+          mdi
+          ml-1
+          notranslate
+          v-icon
+          v-icon--size-small
+          v-theme--light
+        "
+      ></i>
+    </span>
+    <!---->
+    <!---->
+  </button>
   <!---->
-</button>
-<!---->
-</div>"
+</div>
 `;
 
-exports[`FilterInline > should render correctly 1`] = `"<div data-v-12532412="" class="sy-filters-inline d-flex flex-wrap max-width-none ma-n2"></div>"`;
+exports[`FilterInline > should render correctly 1`] = `
+<div class="
+  d-flex
+  flex-wrap
+  ma-n2
+  max-width-none
+  sy-filters-inline
+"></div>
+`;
 
 exports[`FiltersInline locales > should return the correct locale 1`] = `"0 filtre"`;
 

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 />