@cnamts/synapse 1.0.26 → 1.0.27

package/src/components/TableToolbar/TableToolbar.vue

@@ -61,7 +61,7 @@
 <template>
 	<VToolbar
 		v-bind="options.toolbar"
-		:class="{ 'v-theme-dark': theme.current.value.dark}"
+		:class="{ 'v-theme-grey-darken80': theme.current.value.dark}"
 		class="sy-table-toolbar px-4 py-2 d-flex flex-wrap align-center justify-space-between"
 	>
 		<p
@@ -164,23 +164,23 @@
 
 	p,
 	.text-primary {
-		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
+		color: rgba(var(--v-theme-onPrimary), 0.6) !important;
 	}
 
 	svg {
-		fill: rgb(var(--v-theme-textOnDark)) !important;
+		fill: rgb(var(--v-theme-onPrimary)) !important;
 	}
 
 	.v-label {
-		color: rgba(var(--v-theme-textOnDark), 0.6) !important;
+		color: rgba(var(--v-theme-onPrimary), 0.6) !important;
 	}
 
 	.v-field__input {
-		color: rgb(var(--v-theme-textOnDark)) !important;
+		color: rgb(var(--v-theme-onPrimary)) !important;
 	}
 }
 
 .v-theme--dark button.v-btn:hover :deep() {
-	background: rgba(var(--v-theme-textOnDark), 0.1);
+	background: rgba(var(--v-theme-onPrimary), 0.1);
 }
 </style>

package/src/components/TableToolbar/accessibilite/Accessibility.mdx

@@ -1,12 +1,86 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../TableToolbar.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../TableToolbar.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="TableToolbar"
+    iconSrc={AccessibilityIcon}
+>
+    <AuditSection>
+        <div>Rapport d’audit manuel :{' '}<a href="/audits/TableToolbar.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/925" target="_blank" style={{color: '#0C41BD'}}>issue #925</a>)</div>
+    </AuditSection>
 
-<br />
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le conteneur est un <code>VToolbar</code> servant de barre d’outils et non de navigation principale.</li>
+                <li>Le champ de recherche est un <code>VTextField</code> avec label explicite via <code>searchLabel</code>.</li>
+                <li>Le bouton d’ajout est un <code>VBtn</code> avec icône <code>mdiPlus</code> et texte visible selon le breakpoint.</li>
+                <li>Le compteur (<code>nbTotal / nbFiltered</code>) est rendu sous forme de texte informatif, sans rôle interactif.</li>
+                <li>Les slots <code>filters</code>, <code>search-left</code> et <code>search-right</code> permettent d’injecter des contrôles additionnels sans casser la sémantique.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Le champ de recherche est entièrement accessible au clavier (Tab / Shift+Tab).</li>
+                <li>Le bouton d’ajout est activable via Entrée / Espace.</li>
+                <li>Les éléments injectés via slots doivent respecter l’ordre de tabulation naturel du DOM.</li>
+                <li>Le focus reste logique lors du redimensionnement (mobile / desktop).</li>
+                <li>Les éléments désactivés via <code>loading</code> sont correctement inaccessibles au clavier.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Le toolbar adapte son thème (clair/sombre) via <code>v-theme--dark</code>.</li>
+                <li>Le texte du compteur reste lisible avec contraste réduit en mode sombre.</li>
+                <li>Les icônes (loupe, plus) sont décoratives et ne portent pas de sens sans label associé.</li>
+                <li>Le champ de recherche conserve un focus visible cohérent avec le design system.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📱" title="Responsive et lisibilité mobile">
+            <ul>
+                <li>Sur mobile, le champ de recherche passe en largeur complète (<code>flex-grow</code> ajusté).</li>
+                <li>Le texte du bouton “Ajouter” est masqué sur petit écran pour privilégier l’icône.</li>
+                <li>L’ordre des éléments est conservé pour éviter toute confusion de navigation.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="TableToolbar">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournissez un <code>searchLabel</code> explicite pour éviter une recherche non contextualisée.</li>
+            <li>Évitez d’injecter trop d’actions dans le slot <code>search-right</code> pour ne pas surcharger la barre.</li>
+            <li>Activez <code>loading</code> pour bloquer les interactions pendant les requêtes.</li>
+            <li>Gardez le bouton “Ajouter” avec un libellé court et actionnable.</li>
+            <li>Utilisez le slot <code>filters</code> uniquement pour des contrôles secondaires liés au tableau.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Toolbar Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG – Focus Visible (2.4.7)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 10.7 (focus), 10.8 (contenus cachés)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyServerTable/SyServerTable.stories.ts

@@ -226,6 +226,15 @@ const meta = {
 				defaultValue: { summary: 'false' },
 			},
 		},
+		'hideDefaultFooter': {
+			description: 'Masque le footer par défaut du tableau (pagination et contrôles de page). Utile lorsque l\'on souhaite gérer la pagination manuellement ou ne pas en afficher.',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
 		'header.<columnKey>': {
@@ -7352,6 +7361,160 @@ export const ComplexItemsDisplay: Story = {
 	},
 }
 
+export const HideDefaultFooter: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyServerTable
+						v-model:options="options"
+						:items="users"
+						:headers="headers"
+						:server-items-length="totalUsers"
+						:loading="state === StateEnum.PENDING"
+						suffix="server-hide-footer"
+						hide-default-footer
+						@update:options="fetchData"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyServerTable } from '@cnamts/synapse'
+					import { StateEnum } from '@cnamts/synapse/src/components/Tables/common/constants/StateEnum'
+					import type { DataOptions } from '@cnamts/synapse/src/components/Tables/common/types'
+
+					const totalUsers = ref(0)
+					const users = ref([])
+					const state = ref(StateEnum.IDLE)
+					const options = ref({ itemsPerPage: -1, page: 1 })
+
+					const headers = [
+						{ title: 'Nom', key: 'lastname' },
+						{ title: 'Prénom', key: 'firstname' },
+						{ title: 'Email', key: 'email' },
+					]
+
+					const fetchData = async () => {
+						const { items, total } = await getDataFromApi(options.value)
+						users.value = items
+						totalUsers.value = total
+					}
+
+					const getDataFromApi = async ({ page, itemsPerPage }: DataOptions) => {
+						state.value = StateEnum.PENDING
+						await new Promise(resolve => setTimeout(resolve, 500))
+						const allItems = getUsers()
+						const total = allItems.length
+						const items = itemsPerPage > 0
+							? allItems.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							: allItems
+						state.value = StateEnum.RESOLVED
+						return { items, total }
+					}
+
+					const getUsers = () => [
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+						{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+					]
+
+					fetchData()
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'options': { itemsPerPage: -1, page: 1 },
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'serverItemsLength': 6,
+		'suffix': 'server-hide-footer',
+		'density': 'default',
+		'striped': false,
+		'hideDefaultFooter': true,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyServerTable },
+			setup() {
+				const totalUsers = ref(0)
+				const users = ref<User[]>([])
+				const state = ref(StateEnum.IDLE)
+				const options = ref({ ...args.options })
+
+				watch(options, (newVal) => {
+					if (args.options) {
+						Object.assign(args.options, JSON.parse(JSON.stringify(newVal)))
+					}
+				}, { deep: true })
+
+				const fetchData = async (): Promise<void> => {
+					const { items, total } = await getDataFromApi(options.value as DataOptions)
+					users.value = items
+					totalUsers.value = total
+				}
+
+				const getDataFromApi = async ({ page, itemsPerPage }: DataOptions): Promise<{ items: User[], total: number }> => {
+					state.value = StateEnum.PENDING
+					await new Promise(resolve => setTimeout(resolve, 500))
+					return new Promise((resolve) => {
+						const allItems = getUsers()
+						const total = allItems.length
+						const items = itemsPerPage > 0
+							? allItems.slice((page - 1) * itemsPerPage, page * itemsPerPage)
+							: allItems
+						resolve({ items, total })
+						state.value = StateEnum.RESOLVED
+					})
+				}
+
+				const getUsers = (): User[] => [
+					{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+					{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+					{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+					{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+					{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+					{ firstname: 'Louis', lastname: 'Denis', email: 'louis.denis@example.com' },
+				]
+
+				fetchData()
+
+				return { args, users, state, fetchData, options, totalUsers, StateEnum }
+			},
+			template: `
+			<div>
+				<SyServerTable
+					v-model:options="options"
+					:items="users"
+					:server-items-length="totalUsers"
+					:loading="state === StateEnum.PENDING"
+					v-bind="args"
+					@update:options="fetchData"
+				/>
+			</div>
+			`,
+		}
+	},
+}
+
 export const PageInput: Story = {
 	parameters: {
 		a11y: {

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -42,6 +42,7 @@
 		headingLevel: 2,
 		clickableRow: false,
 		pageInput: false,
+		hideDefaultFooter: false,
 	})
 
 	const emit = defineEmits<{
@@ -467,7 +468,7 @@
 						v-model:headers="headers"
 					/>
 					<SyTablePagination
-						v-if="displayedItems.length > 0 ? displayedItemsLength : 0"
+						v-if="(displayedItems.length > 0 ? displayedItemsLength : 0) && !props.hideDefaultFooter"
 						:page="page"
 						:heading-level="props.headingLevel"
 						:items-per-page="itemsPerPageValue"

package/src/components/Tables/SyServerTable/tests/SyServerTable.spec.ts

@@ -1194,6 +1194,73 @@ describe('SyServerTable', () => {
 	})
 })
 
+describe('SyServerTable hideDefaultFooter', () => {
+	const manyItems = Array.from({ length: 11 }, (_, i) => ({
+		id: i + 1,
+		name: `User ${i + 1}`,
+		age: 20 + i,
+	}))
+
+	it('shows pagination footer by default (hideDefaultFooter is false)', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: false,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(true)
+	})
+
+	it('hides pagination footer when hideDefaultFooter is true', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+
+	it('still shows OrganizeColumns when hideDefaultFooter is true and enableColumnControls is enabled', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-col-controls-server-test',
+				serverItemsLength: 11,
+				hideDefaultFooter: true,
+				enableColumnControls: true,
+			},
+			attrs: { items: manyItems, headers },
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const organizeColumns = wrapper.findComponent({ name: 'OrganizeColumns' })
+		expect(organizeColumns.exists()).toBe(true)
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+})
+
 describe('SyServerTable pageInput', () => {
 	const manyItems = Array.from({ length: 11 }, (_, i) => ({
 		id: i + 1,

package/src/components/Tables/SyTable/SyTable.stories.ts

@@ -212,6 +212,15 @@ const meta = {
 				defaultValue: { summary: 'false' },
 			},
 		},
+		'hideDefaultFooter': {
+			description: 'Masque le footer par défaut du tableau (pagination et contrôles de page). Utile lorsque l\'on souhaite gérer la pagination manuellement ou ne pas en afficher.',
+			control: { type: 'boolean' },
+			table: {
+				category: 'props',
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+		},
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore - 'cookie-description-${cookieName}' storybook can't infer dynamic slot name
 		'header.<columnKey>': {
@@ -4922,6 +4931,91 @@ export const ComplexItemsDisplay: Story = {
 	},
 }
 
+export const HideDefaultFooter: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTable
+						v-model:options="options"
+						:headers="headers"
+						:items="items"
+						suffix="hide-footer-table"
+						hide-default-footer
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SyTable } from '@cnamts/synapse'
+
+					const options = ref({ itemsPerPage: -1 })
+
+					const headers = ref([
+						{ title: 'Nom', key: 'lastname' },
+						{ title: 'Prénom', key: 'firstname' },
+						{ title: 'Email', key: 'email' },
+					])
+
+					const items = ref([
+						{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+						{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+						{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+						{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
+						{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+						{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+					])
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'headers': [
+			{ title: 'Nom', key: 'lastname' },
+			{ title: 'Prénom', key: 'firstname' },
+			{ title: 'Email', key: 'email' },
+		],
+		'items': [
+			{ firstname: 'Virginie', lastname: 'Beauchesne', email: 'virginie.beauchesne@example.com' },
+			{ firstname: 'Simone', lastname: 'Bellefeuille', email: 'simone.bellefeuille@example.com' },
+			{ firstname: 'Étienne', lastname: 'Salois', email: 'etienne.salois@example.com' },
+			{ firstname: 'Thierry', lastname: 'Bobu', email: 'thierry.bobu@example.com' },
+			{ firstname: 'Bernadette', lastname: 'Langelier', email: 'bernadette.langelier@example.com' },
+			{ firstname: 'Agate', lastname: 'Roy', email: 'agate.roy@example.com' },
+		],
+		'options': { itemsPerPage: -1 },
+		'suffix': 'hide-footer-table',
+		'hideDefaultFooter': true,
+		'density': 'default',
+		'striped': false,
+		'onUpdate:options': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SyTable },
+			setup() {
+				return { args }
+			},
+			template: `
+				<SyTable
+					v-model:options="args.options"
+					v-bind="args"
+				/>
+			`,
+		}
+	},
+}
+
 export const PageInput: Story = {
 	parameters: {
 		a11y: {

package/src/components/Tables/SyTable/SyTable.vue

@@ -41,6 +41,7 @@
 		headingLevel: 2,
 		clickableRow: false,
 		pageInput: false,
+		hideDefaultFooter: false,
 	})
 
 	const emit = defineEmits<{
@@ -457,7 +458,7 @@
 						v-model:headers="headers"
 					/>
 					<SyTablePagination
-						v-if="filteredItems.length > 0"
+						v-if="filteredItems.length > 0 && !props.hideDefaultFooter"
 						:page="page"
 						:items-per-page="itemsPerPageValue"
 						:heading-level="props.headingLevel"

package/src/components/Tables/SyTable/tests/SyTable.spec.ts

@@ -1047,6 +1047,70 @@ describe('SyTable selectionKey', () => {
 	})
 })
 
+describe('SyTable hideDefaultFooter', () => {
+	const manyItems = Array.from({ length: 11 }, (_, i) => ({
+		id: i + 1,
+		name: `User ${i + 1}`,
+		age: 20 + i,
+	}))
+
+	it('shows pagination footer by default (hideDefaultFooter is false)', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-test',
+				hideDefaultFooter: false,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(true)
+	})
+
+	it('hides pagination footer when hideDefaultFooter is true', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-test',
+				hideDefaultFooter: true,
+			},
+			attrs: { items: manyItems, headers },
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+
+	it('still shows OrganizeColumns when hideDefaultFooter is true and enableColumnControls is enabled', async () => {
+		const wrapper = mount(SyTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				suffix: 'hide-footer-col-controls-test',
+				hideDefaultFooter: true,
+				enableColumnControls: true,
+			},
+			attrs: { items: manyItems, headers },
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+		await vi.dynamicImportSettled()
+
+		const organizeColumns = wrapper.findComponent({ name: 'OrganizeColumns' })
+		expect(organizeColumns.exists()).toBe(true)
+
+		const pagination = wrapper.findComponent({ name: 'SyTablePagination' })
+		expect(pagination.exists()).toBe(false)
+	})
+})
+
 describe('SyTable pageInput', () => {
 	const manyItems = Array.from({ length: 11 }, (_, i) => ({
 		id: i + 1,

package/src/components/Tables/common/TableHeader.vue

@@ -210,8 +210,8 @@
 	const wrapperClasses = computed(() => [
 		alignClass.value,
 		{
-			'h-100': !props.wrapTitle,
-			'v-data-table-header__content--wrap': props.wrapTitle,
+			'h-100': !props.wrapTitle || props.resizableColumns,
+			'v-data-table-header__content--wrap': props.wrapTitle && !props.resizableColumns,
 		},
 	])
 </script>