@cnamts/synapse 1.0.26 → 1.1.0

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/accessibilite/Accessibility.mdx

@@ -1,10 +1,119 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyTable from '../SyTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyTable.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={SyTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;)
+
+        [//]: # ( <a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTable</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via la classe <code>d-sr-only</code> lorsqu’elle est masquée visuellement.</li>
+                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
+                <li>Les filtres et la pagination conservent les rôles natifs des composants de formulaire.</li>
+                <li>Les slots permettent d’étendre le tableau sans altérer sa structure sémantique.</li>
+                <li>L’état de tri, pagination et sélection peut être persisté sans impacter l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code> et activables au clavier.</li>
+                <li>Les actions de tri sont accessibles via Entrée ou Espace.</li>
+                <li>Les filtres sont navigables dans l’ordre naturel de tabulation.</li>
+                <li>Les cases à cocher de sélection (ligne et globale) sont entièrement accessibles au clavier.</li>
+                <li>La pagination est utilisable au clavier (page, items par page, navigation).</li>
+                <li>Les lignes cliquables restent accessibles via clavier lorsqu’activées.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le <code>caption</code> fournit un contexte global de lecture du tableau.</li>
+                <li>Un region <code>role="status"</code> avec <code>aria-live="polite"</code> annonce les changements de résultats.</li>
+                <li>Les états de tri sont exposés via <code>aria-sort</code> sur les en-têtes.</li>
+                <li>Les contrôles de pagination et filtres utilisent des libellés explicites.</li>
+                <li>Les attributs ARIA inutiles (ex: <code>aria-describedby</code>) sont supprimés pour éviter les doublons de lecture.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour texte, bordures et focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) améliorent la lisibilité sans nuire au contraste.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour la lisibilité.</li>
+                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et via ARIA.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire reste accessible via attributs ARIA.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple est annoncée clairement aux lecteurs d’écran.</li>
+                <li>Les colonnes épinglées restent accessibles sans modifier l’ordre de lecture.</li>
+                <li>L’organisation des colonnes est configurable sans perte de sémantique.</li>
+                <li>La persistance locale de l’état n’impacte pas l’accessibilité du tableau.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir toujours un <code>caption</code> clair et descriptif pour le tableau.</li>
+            <li>Limiter les actions dans les headers pour éviter la surcharge cognitive.</li>
+            <li>Tester systématiquement tri, filtres et pagination au clavier.</li>
+            <li>Vérifier les annonces lecteur d’écran lors des changements de données.</li>
+            <li>Éviter les libellés ambigus sur les colonnes et filtres.</li>
+            <li>Contrôler la cohérence visuelle entre états ARIA et styles CSS.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5, 7 et 10</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

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/SyTable/tests/SyTable.visual.cy.ts

@@ -0,0 +1,70 @@
+import SyTable from '../SyTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+	{ nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille' },
+]
+
+describe('SyTable - Visual regression tests', () => {
+	it('displays the table by default', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau de données',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the table with striped rows', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau rayé',
+				striped: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-striped', cy.get('.v-application'))
+	})
+
+	it('displays the table with selection checkboxes', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-with-select', cy.get('.v-application'))
+	})
+
+	it('displays the table with compact density', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau compact',
+				density: 'compact',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-compact', cy.get('.v-application'))
+	})
+})

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>

package/src/components/Tables/common/filters/logics/tests/NumberFilterLogic.spec.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest'
+import filter from '../number'
+
+describe('Number filter logic', () => {
+	describe('itemValue non-number', () => {
+		it('retourne false si itemValue est une string', () => {
+			expect(filter('42', 42)).toBe(false)
+		})
+
+		it('retourne false si itemValue est null', () => {
+			expect(filter(null, 42)).toBe(false)
+		})
+
+		it('retourne false si itemValue est undefined', () => {
+			expect(filter(undefined, 42)).toBe(false)
+		})
+
+		it('retourne false si itemValue est un boolean', () => {
+			expect(filter(true, 1)).toBe(false)
+		})
+	})
+
+	describe('filterValue numérique (exact match)', () => {
+		it('retourne true pour une valeur égale', () => {
+			expect(filter(42, 42)).toBe(true)
+		})
+
+		it('retourne false pour une valeur différente', () => {
+			expect(filter(42, 43)).toBe(false)
+		})
+
+		it('retourne true pour 0 === 0', () => {
+			expect(filter(0, 0)).toBe(true)
+		})
+
+		it('retourne false pour 0 !== 1', () => {
+			expect(filter(0, 1)).toBe(false)
+		})
+
+		it('retourne true pour des négatifs égaux', () => {
+			expect(filter(-5, -5)).toBe(true)
+		})
+	})
+
+	describe('filterValue string sans opérateur', () => {
+		it('retourne true pour correspondance exacte via string', () => {
+			expect(filter(42, '42')).toBe(true)
+		})
+
+		it('retourne true pour string avec virgule décimale', () => {
+			expect(filter(3.14, '3,14')).toBe(true)
+		})
+
+		it('retourne true pour string avec point décimal', () => {
+			expect(filter(3.14, '3.14')).toBe(true)
+		})
+
+		it('retourne false pour une string non numérique', () => {
+			expect(filter(42, 'abc')).toBe(false)
+		})
+
+		it('retourne false si la valeur ne correspond pas', () => {
+			expect(filter(42, '43')).toBe(false)
+		})
+	})
+
+	describe('opérateur =', () => {
+		it('retourne true pour =42 avec itemValue 42', () => {
+			expect(filter(42, '=42')).toBe(true)
+		})
+
+		it('retourne false pour =42 avec itemValue 43', () => {
+			expect(filter(43, '=42')).toBe(false)
+		})
+
+		it('retourne false si la valeur après = est non numérique', () => {
+			expect(filter(42, '=abc')).toBe(false)
+		})
+	})
+
+	describe('opérateur <>', () => {
+		it('retourne true pour <>42 avec itemValue 43', () => {
+			expect(filter(43, '<>42')).toBe(true)
+		})
+
+		it('retourne false pour <>42 avec itemValue 42', () => {
+			expect(filter(42, '<>42')).toBe(false)
+		})
+	})
+
+	describe('opérateur <', () => {
+		it('retourne true si itemValue < filterValue', () => {
+			expect(filter(10, '<20')).toBe(true)
+		})
+
+		it('retourne false si itemValue === filterValue', () => {
+			expect(filter(20, '<20')).toBe(false)
+		})
+
+		it('retourne false si itemValue > filterValue', () => {
+			expect(filter(30, '<20')).toBe(false)
+		})
+	})
+
+	describe('opérateur <=', () => {
+		it('retourne true si itemValue < filterValue', () => {
+			expect(filter(10, '<=20')).toBe(true)
+		})
+
+		it('retourne true si itemValue === filterValue', () => {
+			expect(filter(20, '<=20')).toBe(true)
+		})
+
+		it('retourne false si itemValue > filterValue', () => {
+			expect(filter(30, '<=20')).toBe(false)
+		})
+	})
+
+	describe('opérateur >', () => {
+		it('retourne true si itemValue > filterValue', () => {
+			expect(filter(30, '>20')).toBe(true)
+		})
+
+		it('retourne false si itemValue === filterValue', () => {
+			expect(filter(20, '>20')).toBe(false)
+		})
+
+		it('retourne false si itemValue < filterValue', () => {
+			expect(filter(10, '>20')).toBe(false)
+		})
+	})
+
+	describe('opérateur >=', () => {
+		it('retourne true si itemValue > filterValue', () => {
+			expect(filter(30, '>=20')).toBe(true)
+		})
+
+		it('retourne true si itemValue === filterValue', () => {
+			expect(filter(20, '>=20')).toBe(true)
+		})
+
+		it('retourne false si itemValue < filterValue', () => {
+			expect(filter(10, '>=20')).toBe(false)
+		})
+	})
+
+	describe('virgule comme séparateur décimal dans opérateurs', () => {
+		it('retourne true pour >=3,5 avec itemValue 4', () => {
+			expect(filter(4, '>=3,5')).toBe(true)
+		})
+
+		it('retourne true pour <=3,5 avec itemValue 3', () => {
+			expect(filter(3, '<=3,5')).toBe(true)
+		})
+
+		it('retourne true pour =3,14 avec itemValue 3.14', () => {
+			expect(filter(3.14, '=3,14')).toBe(true)
+		})
+	})
+
+	describe('valeur NaN après opérateur', () => {
+		it('retourne false si la valeur après < est non numérique', () => {
+			expect(filter(42, '<abc')).toBe(false)
+		})
+
+		it('retourne false si la valeur après > est non numérique', () => {
+			expect(filter(42, '>abc')).toBe(false)
+		})
+	})
+
+	describe('fallback String.includes pour filterValue autre', () => {
+		it('retourne true si String(itemValue).includes(String(filterValue)) pour filterValue boolean', () => {
+			expect(filter(42, true as unknown as string)).toBe(false)
+		})
+	})
+})