@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/FilterSideBar/FilterSideBar.mdx

@@ -1,4 +1,4 @@
-import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import { Controls, Canvas, Meta, Source, Description } from '@storybook/blocks';
 import * as FilterSideBarStories from './FilterSideBar.stories.ts';
 
 <Meta of={FilterSideBarStories} />
@@ -236,3 +236,46 @@ const professionList = [
 		`
 	}}
 />
+
+## Gestion du z-index
+
+Le `FilterSideBar` utilise un `VNavigationDrawer` de Vuetify dont le z-index par défaut est **1000**.
+
+Dans la plupart des cas cette valeur convient. Deux situations particulières nécessitent de la surcharger via la prop `zIndex` :
+
+<table>
+  <thead>
+    <tr>
+      <th>Situation</th>
+      <th>Valeur recommandée</th>
+      <th>Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Le FilterSideBar s'affiche <strong>dans</strong> une modale ou une bottom sheet et doit rester visible</td>
+      <td>z-index de la modale + 1 (ex. <code>2401</code>)</td>
+      <td>Filtres dans un <code>VDialog</code> (z-index 2400)</td>
+    </tr>
+    <tr>
+      <td>Une modale de confirmation doit s'afficher <strong>par-dessus</strong> un FilterSideBar ouvert</td>
+      <td>Laisser le FilterSideBar à <code>1000</code> (défaut) et laisser la modale à <code>2400</code></td>
+      <td>Dialog de confirmation sur une page avec FilterSideBar</td>
+    </tr>
+  </tbody>
+</table>
+
+> **Préconisation** : ne surchargez `zIndex` que lorsque c'est strictement nécessaire. Une valeur arbitraire élevée (ex. `9999`) peut masquer des composants systèmes (tooltips, snackbars) et crée des effets de bord difficiles à diagnostiquer.
+
+<Description of={FilterSideBarStories.ZIndex} />
+
+<Canvas of={FilterSideBarStories.ZIndex} />
+
+<Source dark code={`
+<FilterSideBar
+  v-model="filters"
+  :z-index="2401"
+>
+  <!-- filtres -->
+</FilterSideBar>
+`} />

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FilterSideBar from './FilterSideBar.vue'
 import { fn } from '@storybook/test'
-import { VDivider, VSelect } from 'vuetify/components'
+import { VBtn, VDialog, VCard, VCardText, VCardActions, VDivider, VSelect } from 'vuetify/components'
 import PeriodField from '../PeriodField/PeriodField.vue'
 import SearchListField from '../SearchListField/SearchListField.vue'
 import { ref } from 'vue'
@@ -74,6 +74,21 @@ const meta = {
 				},
 			},
 		},
+		'zIndex': {
+			description: 'Surcharge le z-index du panneau. À utiliser uniquement lorsque le FilterSideBar doit s\'afficher par-dessus ou en-dessous d\'un composant en surimpression (modale, bottom sheet…). Voir la section <em>Gestion du z-index</em> ci-dessous pour les préconisations.',
+			control: {
+				type: 'number',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'number',
+				},
+				defaultValue: {
+					summary: 'undefined',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement déclenché lors de la mise à jour des filtres',
 			control: {
@@ -817,3 +832,92 @@ const professionList = [
 		],
 	},
 }
+
+export const ZIndex: Story = {
+	args: {
+		'onUpdate:modelValue': fn(),
+	},
+	decorators: [
+		() => ({
+			template: `
+			<VApp style="height: 600px; overflow-y: hidden;">
+				<div class="pa-4">
+					<story />
+				</div>
+			</VApp>
+		`,
+		}),
+	],
+	render: args => ({
+		components: { FilterSideBar, VBtn, VDialog, VCard, VCardText, VCardActions, VSelect, VDivider },
+		setup() {
+			const filters1 = ref([{ name: 'folder', title: 'Type de dossier' }])
+			const filters2 = ref([{ name: 'folder', title: 'Type de dossier' }])
+
+			const folderTypes = [
+				{ title: 'AT', value: 'at' },
+				{ title: 'MP', value: 'mp' },
+				{ title: 'Autre', value: 'other' },
+			]
+
+			const dialog1 = ref(false)
+			const dialog2 = ref(false)
+
+			return { args, filters1, filters2, folderTypes, dialog1, dialog2 }
+		},
+		template: `
+			<div>
+				<p class="text-subtitle-2 mb-2">Sans zIndex — la modale s'affiche par-dessus le panneau (comportement par défaut)</p>
+				<div class="d-flex align-center ga-4 mb-6">
+					<FilterSideBar v-bind="args" v-model="filters1">
+						<template #folder="{ props }">
+							<VSelect v-bind="props" :items="folderTypes" label="Type de dossier" multiple variant="outlined" return-object hide-details color="primary" />
+						</template>
+					</FilterSideBar>
+					<VBtn color="primary" variant="outlined" @click="dialog1 = true">
+						Ouvrir une modale de confirmation
+					</VBtn>
+				</div>
+				<VDialog v-model="dialog1" max-width="400">
+					<VCard>
+						<VCardText>Confirmez-vous la réinitialisation des filtres ?</VCardText>
+						<VCardActions class="justify-end">
+							<VBtn variant="text" @click="dialog1 = false">Annuler</VBtn>
+							<VBtn color="primary" variant="elevated" @click="dialog1 = false">Confirmer</VBtn>
+						</VCardActions>
+					</VCard>
+				</VDialog>
+
+				<VDivider class="mb-6" />
+
+				<p class="text-subtitle-2 mb-2">Avec zIndex="2401" — le panneau s'affiche par-dessus la modale</p>
+				<div class="d-flex align-center ga-4">
+					<FilterSideBar v-bind="args" v-model="filters2" :z-index="2401">
+						<template #folder="{ props }">
+							<VSelect v-bind="props" :items="folderTypes" label="Type de dossier" multiple variant="outlined" return-object hide-details color="primary" />
+						</template>
+					</FilterSideBar>
+					<VBtn color="primary" variant="outlined" @click="dialog2 = true">
+						Ouvrir une modale de confirmation
+					</VBtn>
+				</div>
+				<VDialog v-model="dialog2" max-width="400">
+					<VCard>
+						<VCardText>Confirmez-vous la réinitialisation des filtres ?</VCardText>
+						<VCardActions class="justify-end">
+							<VBtn variant="text" @click="dialog2 = false">Annuler</VBtn>
+							<VBtn color="primary" variant="elevated" @click="dialog2 = false">Confirmer</VBtn>
+						</VCardActions>
+					</VCard>
+				</VDialog>
+			</div>
+		`,
+	}),
+	parameters: {
+		docs: {
+			description: {
+				story: 'Deux exemples côte à côte : sans <code>zIndex</code>, la modale s\'affiche par-dessus le panneau (comportement par défaut) ; avec <code>zIndex: 2401</code>, le panneau passe au premier plan.',
+			},
+		},
+	},
+}

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -3,7 +3,8 @@
 	import useFilterable from '@/composables/useFilterable/useFilterable'
 	import { mdiFilterVariant } from '@mdi/js'
 	import { computed, onMounted, ref, toRef, watch } from 'vue'
-	import { type VBtn, type VNavigationDrawer } from 'vuetify/components'
+	import type { VBtn } from 'vuetify/components/VBtn'
+	import type { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer'
 	import ChipList from '../ChipList/ChipList.vue'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 	import { locales as defaultLocales } from './locales'
@@ -13,10 +14,12 @@
 		modelValue?: FilterProp
 		modale?: boolean
 		locales?: typeof defaultLocales
+		zIndex?: number
 	}>(), {
 		modelValue: () => [],
 		modale: false,
 		locales: () => defaultLocales,
+		zIndex: undefined,
 	})
 
 	const emits = defineEmits<{
@@ -42,6 +45,10 @@
 		}, 0)
 	})
 
+	const zIndexStyle = computed(() =>
+		props.zIndex != null ? { zIndex: props.zIndex } : undefined,
+	)
+
 	const drawerRef = ref<VNavigationDrawer | null>(null)
 	const drawerBtnRef = ref<VBtn | null>(null)
 
@@ -122,6 +129,7 @@
 				:inert="drawer ? undefined : 'true'"
 				:aria-modal="props.modale"
 				:aria-label="locales.modaleLabel"
+				:style="zIndexStyle"
 				@keydown.escape.prevent="drawer = false"
 			>
 				<form

package/src/components/FilterSideBar/tests/FilterSideBar.a11y.spec.ts

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+/* eslint-disable vue/one-component-per-file */
 
 import { describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
@@ -42,7 +43,6 @@ describe('FilterSideBar – accessibility (axe)', () => {
 			attachTo: document.body,
 		})
 
-		// Ouvrir le tiroir de filtres
 		const toggleButton = wrapper.find('.sy-filters-side-bar .v-btn__content')
 		if (toggleButton.exists()) {
 			await toggleButton.trigger('click')
@@ -56,4 +56,57 @@ describe('FilterSideBar – accessibility (axe)', () => {
 
 		wrapper.unmount()
 	})
+
+	it('has no obvious axe violations in modal mode with drawer open', async () => {
+		const wrapper = mount(
+			defineComponent({
+				components: { VApp, FiltersSideBar: FilterSideBar },
+				data() {
+					return {
+						localModelValue: [{ name: 'name', title: 'Nom' }],
+					}
+				},
+				template: `
+					<VApp>
+						<FiltersSideBar v-model="localModelValue" :modale="true" />
+					</VApp>
+				`,
+			}),
+			{
+				global: {
+					stubs: { Teleport: true },
+				},
+				attachTo: document.body,
+			},
+		)
+
+		const toggleButton = wrapper.find('.sy-filters-side-bar .v-btn__content')
+		if (toggleButton.exists()) {
+			await toggleButton.trigger('click')
+			await wrapper.vm.$nextTick()
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FilterSideBar – modal mode, drawer open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations with drawer closed', async () => {
+		const wrapper = mount(TestA11yComponent, {
+			global: {
+				stubs: { Teleport: true },
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FilterSideBar – drawer closed', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
 })

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

@@ -328,4 +328,46 @@ describe('FilterSideBar', () => {
 
 		expect(wrapper.emitted('update:modelValue')).toBeUndefined()
 	})
+
+	it('applies zIndex as inline style on the navigation drawer when provided', () => {
+		const wrapper = mount(
+			defineComponent({
+				components: { VApp, FiltersSideBar: FilterSideBar },
+				template: `
+					<VApp>
+						<FiltersSideBar :model-value="[]" :z-index="2401" />
+					</VApp>
+				`,
+			}),
+			{
+				global: {
+					stubs: { Teleport: true },
+				},
+			},
+		)
+
+		const drawer = wrapper.find('.v-navigation-drawer')
+		expect(drawer.attributes('style')).toContain('z-index: 2401')
+	})
+
+	it('does not apply zIndex style on the navigation drawer when not provided', () => {
+		const wrapper = mount(
+			defineComponent({
+				components: { VApp, FiltersSideBar: FilterSideBar },
+				template: `
+					<VApp>
+						<FiltersSideBar :model-value="[]" />
+					</VApp>
+				`,
+			}),
+			{
+				global: {
+					stubs: { Teleport: true },
+				},
+			},
+		)
+
+		const drawer = wrapper.find('.v-navigation-drawer')
+		expect(drawer.attributes('style') ?? '').not.toContain('z-index: 2401')
+	})
 })

package/src/components/FooterBar/FooterBar.vue

@@ -290,10 +290,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
-$white: #fff;
-
 a {
 	cursor: pointer;
 }
@@ -334,7 +330,7 @@ a {
 		}
 
 		a.v-btn {
-			border-radius: var(tokens.$radius-rounded) !important;
+			border-radius: var(--v-radius-rounded) !important;
 		}
 
 		a.v-btn:hover {
@@ -343,7 +339,7 @@ a {
 	}
 
 	.back-to-top {
-		border-radius: var(tokens.$radius-rounded) !important;
+		border-radius: var(--v-radius-rounded) !important;
 	}
 
 	button.v-btn:hover {
@@ -367,32 +363,32 @@ a {
 .vd-footer-bar.v-theme--dark :deep() {
 	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
-		color: $white;
+		color: rgb(var(--v-theme-textOnDark));
 
 		&.version {
-			color: tokens.$neutral-white-alpha;
+			color: rgb(var(--v-theme-textSubduedOnDark));
 		}
 	}
 
 	p,
 	.text--primary {
-		color: rgba($white, 0.87);
+		color: rgba(var(--v-theme-textOnDark), 0.87);
 	}
 
 	.text--secondary {
-		color: rgba($white, 0.6);
+		color: rgba(var(--v-theme-textOnDark), 0.6);
 	}
 
 	a.text--primary {
-		color: $white;
+		color: rgb(var(--v-theme-textOnDark));
 	}
 
 	.v-divider {
-		border-color: rgba(tokens.$colors-border-subdued, 1);
+		border-color: rgba(var(--v-theme-borderSubdued), 1);
 	}
 
 	svg {
-		fill: $white;
+		fill: rgb(var(--v-theme-textOnDark));
 	}
 }
 

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -123,7 +123,7 @@
 
 .sy-france-connect-btn--dark {
 	.sy-france-connect-link {
-		color: #fff;
+		color: rgb(var(--v-theme-textOnDark));
 		background-color: #8585f6;
 
 		&:hover {

package/src/components/HeaderBar/HeaderBar.vue

@@ -240,11 +240,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss' as *;
 @use './consts' as *;
 
 .global-container {
-	background-color: $neutral-white;
+	background-color: rgb(var(--v-theme-surface));
 }
 
 .header {
@@ -263,7 +262,7 @@
 	height: $header-height;
 	max-width: v-bind(width);
 	margin: 0 auto;
-	border-bottom: solid 1px $blue-lighten-80;
+	border-bottom: solid 1px rgb(var(--v-theme-blue-lighten80));
 }
 
 .header-side {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue

@@ -131,7 +131,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss' as *;
 @use '../consts' as *;
 
 .overlay {
@@ -144,7 +143,7 @@
 
 .menu-wrapper {
 	height: 100dvh;
-	background-color: $neutral-white;
+	background-color: rgb(var(--v-theme-surface));
 	display: flex;
 	flex-direction: column;
 }
@@ -172,7 +171,7 @@
 	}
 
 	.header-menu {
-		background-color: $neutral-white;
+		background-color: rgb(var(--v-theme-surface));
 		overflow: hidden auto;
 		height: 100%;
 	}

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -20,7 +20,6 @@
 </template>
 
 <style lang="scss" scoped>
-	@use '@/assets/tokens.scss' as *;
 	@use '../menu';
 
 	.header-menu-item {
@@ -56,10 +55,10 @@
 
 	.header-menu-item:hover {
 		background-color: rgb(var(--v-theme-primary));
-		color: $neutral-white;
+		color: rgb(var(--v-theme-textOnDark));
 
 		> :deep(a > *) {
-			color: $neutral-white !important;
+			color: rgb(var(--v-theme-textOnDark)) !important;
 		}
 	}
 </style>

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue

@@ -53,7 +53,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss' as *;
 @use '../../consts.scss' as menu;
 
 .header-menu-section {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -93,7 +93,6 @@
 </template>
 
 <style lang="scss" scoped>
-	@use '@/assets/tokens.scss' as *;
 	@use '../../consts' as *;
 	@use '../menu';
 
@@ -112,11 +111,11 @@
 
 		&:hover {
 			background-color: rgb(var(--v-theme-primary));
-			color: $neutral-white;
+			color: rgb(var(--v-theme-textOnDark));
 			text-decoration: underline;
 
 			> :deep(*) {
-				color: $neutral-white !important;
+				color: rgb(var(--v-theme-textOnDark)) !important;
 			}
 		}
 
@@ -140,7 +139,7 @@
 			width: 100%;
 			height: 100%;
 			overflow-y: auto;
-			background-color: $neutral-white;
+			background-color: rgb(var(--v-theme-surface));
 			padding-top: 40px;
 			z-index: 10;
 		}
@@ -153,14 +152,14 @@
 		.sub-menu--open > .sub-menu-btn {
 			padding: 0 16px 8px 40px;
 			border-bottom: 1px solid $menu-border-color;
-			color: #000;
+			color: rgb(var(--v-theme-textBase));
 			background-color: transparent;
 
 			&:hover {
-				color: #000;
+				color: rgb(var(--v-theme-textBase));
 
 				> :deep(*) {
-					color: #000 !important;
+					color: rgb(var(--v-theme-textBase)) !important;
 				}
 			}
 		}
@@ -178,11 +177,11 @@
 
 		.sub-menu--open > .sub-menu-btn {
 			background-color: rgb(var(--v-theme-primary));
-			color: $neutral-white;
+			color: rgb(var(--v-theme-textOnDark));
 			transition: color 0.15s linear, background-color 0.15s linear;
 
 			> :deep(*) {
-				color: $neutral-white !important;
+				color: rgb(var(--v-theme-textOnDark)) !important;
 			}
 		}
 

package/src/components/HeaderBar/HeaderBurgerMenu/menu.scss

@@ -1,11 +1,3 @@
-@use 'sass:color';
-@use '@/assets/tokens';
-
-$red: color.channel(tokens.$primary-base, 'red');
-$green: color.channel(tokens.$primary-base, 'green');
-$blue: color.channel(tokens.$primary-base, 'blue');
-$primary: $red, $green, $blue;
-
 @mixin item-focused() {
 	position: relative;