@cnamts/synapse 1.0.10 → 1.0.12

package/src/components/Tables/common/useTableHeaders.ts

@@ -20,14 +20,61 @@ export function useTableHeaders({
 }) {
 	// Process headers to ensure they have title property
 	const normalizedHeaders = computed(() => {
-		const headers = storedHeaders ?? headersProp?.value
-		if (!Array.isArray(headers)) {
+		const incoming = headersProp?.value
+		const stored = Array.isArray(storedHeaders) ? storedHeaders : undefined
+
+		// Si aucun header, rien à faire
+		if (!Array.isArray(incoming) && !Array.isArray(stored)) {
 			return undefined
 		}
-		return headers.map(header => ({
-			...header,
-			title: header.title ?? header.text,
-		}))
+
+		// Fusion logique entre storedHeaders et incoming
+		let headers: DataTableHeaders[] = []
+
+		if (stored && incoming) {
+			// Fusionne les headers existants avec les nouveaux
+			const merged = stored.map((storedHeader) => {
+				const match = incoming.find(
+					h =>
+						(h.key && h.key === storedHeader.key)
+						|| (h.value && h.value === storedHeader.value),
+				)
+				return {
+					...storedHeader,
+					...(match || {}), // les nouveaux props écrasent les anciens
+				}
+			})
+
+			// Ajoute les headers qui n'existent pas encore dans le stockage
+			const extras = incoming.filter(
+				h =>
+					!merged.some(
+						x =>
+							(x.key && x.key === h.key)
+							|| (x.value && x.value === h.value),
+					),
+			)
+
+			headers = [...merged, ...extras]
+		}
+		else {
+			headers = (stored ?? incoming) as DataTableHeaders[]
+		}
+
+		// Normalisation finale
+		return headers.map((header) => {
+			const mapped = {
+				...header,
+				title: header.title ?? header.text,
+			} as TableColumnHeader
+
+			// Si maxWidth est défini sans width → applique-le à width
+			if (mapped.maxWidth != null && mapped.width == null) {
+				mapped.width = mapped.maxWidth
+			}
+
+			return mapped as unknown as DataTableHeaders
+		})
 	})
 
 	// Get filterable headers
@@ -72,6 +119,25 @@ export function useTableHeaders({
 		return normalizedHeaders.value?.find(header => header.key === key)
 	}
 
+	/**
+	 * Get original header from a rendered column (match by key or value)
+	 */
+	function getHeaderForColumn(column: TableColumnHeader): TableColumnHeader | undefined {
+		if (!normalizedHeaders.value) return undefined
+		const key = column.key as string | undefined
+		if (key) {
+			const byKey = normalizedHeaders.value.find(h => h.key === key)
+			if (byKey) return byKey
+		}
+		// Fallback: try matching by value when key is not present or didn’t match
+		const val = column.value as string | undefined
+		if (val) {
+			const byValue = normalizedHeaders.value.find(h => h.value === val)
+			if (byValue) return byValue
+		}
+		return undefined
+	}
+
 	/**
 	 * The headers filtered by visibility and sorted by order
 	 */
@@ -87,5 +153,6 @@ export function useTableHeaders({
 		filterableHeaders,
 		getEnhancedHeader,
 		getHeaderByKey,
+		getHeaderForColumn,
 	}
 }

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

@@ -2,15 +2,11 @@ import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Toolbar from '../ToolbarContainer.vue'
 import { VBtn } from 'vuetify/components'
-import { vuetify } from '@tests/unit/setup'
 import { defineComponent } from 'vue'
 
 describe('ToolbarContainer.vue', () => {
 	it('renders default slot content', () => {
 		const wrapper = mount(Toolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			slots: {
 				default: '<div class="toolbar-content">Toolbar Content</div>',
 			},
@@ -21,9 +17,6 @@ describe('ToolbarContainer.vue', () => {
 
 	it('applies custom classes', () => {
 		const wrapper = mount(Toolbar, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				class: 'custom-toolbar',
 			},
@@ -35,9 +28,6 @@ describe('ToolbarContainer.vue', () => {
 	it('set the focus to the first button', async () => {
 		const wrapper = mount(Toolbar, {
 			attachTo: document.body,
-			global: {
-				plugins: [vuetify],
-			},
 			slots: {
 				default: `
 				<div>
@@ -58,9 +48,6 @@ describe('ToolbarContainer.vue', () => {
 	it('focuses the button when the navigation key are pressed', async () => {
 		const wrapper = mount(Toolbar, {
 			attachTo: document.body,
-			global: {
-				plugins: [vuetify],
-			},
 			slots: {
 				default: `
 					<div>
@@ -89,9 +76,6 @@ describe('ToolbarContainer.vue', () => {
 	it('focuses the first and last buttons when Home and End keys are pressed', async () => {
 		const wrapper = mount(Toolbar, {
 			attachTo: document.body,
-			global: {
-				plugins: [vuetify],
-			},
 			slots: {
 				default: `
 					<div>
@@ -134,9 +118,6 @@ describe('ToolbarContainer.vue', () => {
 		})
 		const wrapper = mount(TestComponent, {
 			attachTo: document.body,
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		const toolbar = wrapper.find('.sy-toolbar')

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

@@ -1,6 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
 
 import UploadWorkflow from '../UploadWorkflow.vue'
 import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
@@ -28,9 +27,6 @@ describe('UploadWorkflow', () => {
 					},
 				],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		expect(wrapper.html()).toMatchSnapshot()
@@ -52,9 +48,6 @@ describe('UploadWorkflow', () => {
 					},
 				],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		await wrapper.find('.file-item button').trigger('click')
@@ -87,9 +80,6 @@ describe('UploadWorkflow', () => {
 					},
 				],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		await wrapper.findAll('.file-item button')[1].trigger('click')
@@ -134,7 +124,6 @@ describe('UploadWorkflow', () => {
 				],
 			},
 			global: {
-				plugins: [vuetify],
 				stubs: {
 					VDialog: {
 						template: '<div><slot /></div>',
@@ -188,9 +177,6 @@ describe('UploadWorkflow', () => {
 					},
 				],
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 
 		await wrapper.find('.file-item button').trigger('click')
@@ -227,7 +213,6 @@ describe('UploadWorkflow', () => {
 				showFilePreview: false,
 			},
 			global: {
-				plugins: [vuetify],
 				stubs: {
 					VDialog: {
 						template: '<div><slot /></div>',

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

@@ -1,15 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
-import { vuetify } from '@tests/unit/setup'
 import Usages from '../Usages.vue'
 
 describe('Usages.vue', () => {
 	it('renders the component with default props', () => {
-		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(Usages)
 
 		// Vérifier que le composant est rendu
 		expect(wrapper.exists()).toBe(true)
@@ -33,9 +28,6 @@ describe('Usages.vue', () => {
 		const items2 = ['Item A', 'Item B']
 
 		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items1,
 				items2,
@@ -61,9 +53,6 @@ describe('Usages.vue', () => {
 		const items1 = ['Item 1', 'Item 2']
 
 		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items1,
 			},
@@ -82,9 +71,6 @@ describe('Usages.vue', () => {
 		const items2 = ['Item A', 'Item B', 'Item C']
 
 		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items2,
 			},
@@ -100,11 +86,7 @@ describe('Usages.vue', () => {
 	})
 
 	it('uses the correct icons', () => {
-		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(Usages)
 
 		const icons = wrapper.findAll('.v-icon')
 
@@ -119,11 +101,7 @@ describe('Usages.vue', () => {
 	})
 
 	it('applies the correct styling to columns', () => {
-		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
+		const wrapper = mount(Usages)
 
 		// Vérifier les classes CSS pour la première colonne
 		const checkColumn = wrapper.find('.check')
@@ -140,9 +118,6 @@ describe('Usages.vue', () => {
 
 	it('handles empty arrays for both item lists', () => {
 		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items1: [],
 				items2: [],
@@ -160,9 +135,6 @@ describe('Usages.vue', () => {
 
 	it('renders with custom props from CustomizableOptions', () => {
 		const wrapper = mount(Usages, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				color: 'primary',
 				disabled: true,

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

@@ -1,15 +1,11 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import UserMenuBtn from '../UserMenuBtn.vue'
-import { vuetify } from '@tests/unit/setup'
 import { nextTick } from 'vue'
 
 describe('UserMenuBtn', () => {
 	it('renders the component', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				menuItems: [{ text: 'Item 1', value: 'item1' }],
@@ -25,9 +21,6 @@ describe('UserMenuBtn', () => {
 
 	it('displays the full name', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				fullName: 'John Doe',
@@ -38,9 +31,6 @@ describe('UserMenuBtn', () => {
 
 	it('does not render logout button when hidden', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				hideLogoutBtn: true,
@@ -51,9 +41,6 @@ describe('UserMenuBtn', () => {
 
 	it('renders user icon when not hidden', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				hideUserIcon: false,
@@ -64,9 +51,6 @@ describe('UserMenuBtn', () => {
 
 	it('does not render user icon when hidden', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				hideUserIcon: true,
@@ -77,9 +61,6 @@ describe('UserMenuBtn', () => {
 
 	it('emits "update:modelValue" when selected changes', async () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 			},
@@ -95,9 +76,6 @@ describe('UserMenuBtn', () => {
 
 	it('computes mobile view correctly based on props and display', () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				isMobileView: true,
@@ -107,9 +85,6 @@ describe('UserMenuBtn', () => {
 	})
 	it('emits "update:modelValue" when updateModelValue is called via event', async () => {
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				menuItems: [{ text: 'Item 1', value: 'item1' }],
@@ -127,9 +102,6 @@ describe('UserMenuBtn', () => {
 	it('possède la prop logoutText  custom', async () => {
 		const customLogoutText = 'Déconnexion'
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				logoutText: customLogoutText,
@@ -148,9 +120,6 @@ describe('UserMenuBtn', () => {
 	it('possède la prop logoutText  par défaut', async () => {
 		const defaultLogoutText = 'Logout'
 		const wrapper = mount(UserMenuBtn, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				modelValue: null,
 				hideLogoutBtn: false,

package/src/composables/useFilterable/useFilterable.ts

@@ -28,6 +28,31 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 		return slugify(name, { lower: true })
 	}
 
+	/**
+	 * Handle various types of items to extract a displayable text
+	 */
+	function getDisplayText(item: unknown): string {
+		if (item === null || item === undefined) {
+			return ''
+		}
+
+		if (typeof item !== 'object') {
+			return item.toString()
+		}
+
+		const obj = item as Record<string, unknown>
+
+		const possibleKeys = ['title', 'text', 'label', 'name', 'value']
+		for (const key of possibleKeys) {
+			if (typeof obj[key] === 'string' || typeof obj[key] === 'number') {
+				const existingDisplayableValue = obj[key] as string | number
+				return existingDisplayableValue.toString()
+			}
+		}
+
+		return JSON.stringify(item)
+	}
+
 	function getChips(filter: FilterItem): ChipItem[] {
 		const { value, formatChip } = filter
 
@@ -54,19 +79,10 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 		}
 
 		if (isArray) {
-			return value.map((item) => {
-				if (typeof item !== 'object') {
-					return {
-						text: item.toString(),
-						value: item,
-					}
-				}
-
-				return {
-					text: item.title || item.text || item.value.toString(),
-					value: item,
-				}
-			})
+			return value.map(item => ({
+				text: getDisplayText(item),
+				value: item,
+			}))
 		}
 
 		if (isObject) {
@@ -90,11 +106,11 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 
 			// Handle single select objects (VSelect with return-object but without multiple)
 			// Check if this looks like a select option object with title/text and value properties
-			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined) && typedValue.value !== undefined
+			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined || typedValue.label !== undefined) && typedValue.value !== undefined
 			if (hasSelectStructure) {
 				return [
 					{
-						text: typedValue.title || typedValue.text || typedValue.value.toString(),
+						text: getDisplayText(typedValue),
 						value: typedValue,
 					},
 				]
@@ -102,15 +118,8 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 
 			// Any other object - iterate over keys
 			return Object.keys(typedValue).map((key) => {
-				// Use text property if it exists, else use value property or default to key value
-				const text
-					= typedValue[key].title
-						|| typedValue[key].text
-						|| typedValue[key].value?.toString()
-						|| typedValue[key].toString()
-
 				return {
-					text,
+					text: getDisplayText(typedValue[key]),
 					value: typedValue[key],
 				}
 			})
@@ -174,7 +183,7 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			}
 
 			// Handle single select objects (VSelect with return-object but without multiple)
-			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined) && typedValue.value !== undefined
+			const hasSelectStructure = (typedValue.title !== undefined || typedValue.text !== undefined || typedValue.label !== undefined) && typedValue.value !== undefined
 			if (hasSelectStructure) {
 				// For single select objects, clear the entire value
 				filter.value = undefined

package/src/composables/validation/{AvecVosComposants.mdx → AvecVosComposants.mdx.old}

@@ -1,6 +1,6 @@
 import { Meta, Source } from '@storybook/blocks';
 
-<Meta title="Composables/ValidationSystem/Avec Vos Composants" />
+<Meta title="Guide Du Dev/SyForm/Avec Vos Composants" />
 
 <div className="header">
   <h1>Etendre le système à vos propres composants</h1>

package/src/composables/validation/{FormValidation.stories.ts → FormValidation.stories.ts.old}

@@ -11,7 +11,7 @@ import { VBtn, VTextField } from 'vuetify/components'
  * La documentation sur le système de validation en cascade de Synapse Design System.
  */
 export default {
-	title: 'Composables/ValidationSystem',
+	title: 'Guide Du Dev/SyForm',
 	component: SyForm,
 	argTypes: {
 		validateOnSubmit: {
@@ -32,7 +32,7 @@ export default {
 type Story = StoryObj<typeof SyForm>
 
 // Exemple de base
-export const SimpleForm: Story = {
+export const FormulaireSimple: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -100,7 +100,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple de formulaire avec composants mixtes
-export const MixedComponentsForm: Story = {
+export const FormulaireMixte: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, SySelect, SyCheckbox, DatePicker, VBtn, VTextField },
 		setup() {
@@ -216,7 +216,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple de formulaire imbriqué
-export const NestedForm: Story = {
+export const FormulaireImbrique: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -313,7 +313,7 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 // Exemple d'implémentation personnalisée
-export const CustomImplementation: Story = {
+export const ImplementationPersonnalisee: Story = {
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {

package/src/stories/Accessibilite/Introduction.mdx

@@ -220,7 +220,7 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
   <div>
     <h3>Besoin d'accompagnement ?</h3>
     <p>Si vous avez besoin d'un accompagnement sur le sujet, merci de prendre contact avec <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a>.</p>
-    <p>Pour toute remontée de problème liée à l'accessibilité, veuillez <a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/new?template=accessibility.md">signaler un problème d'accessibilité</a>.</p>
+    <p>Pour toute remontée de problème liée à l'accessibilité, veuillez <a href="/?path=/docs/démarrer-signaler-une-anomalie--docs">signaler un problème d'accessibilité</a>.</p>
   </div>
 </div>
 

package/src/stories/Demarrer/EnrichirLeDesignSystem.mdx

@@ -0,0 +1,43 @@
+import {Meta, Story} from '@storybook/addon-docs/blocks';
+import * as ComponentStories from './EnrichirLeDesignSystem.stories.ts';
+import '../styles/shared.css';
+
+<Meta title="Démarrer/Enrichir le Design System"/>
+
+<div className="header">
+    <h1>Enrichir le Design System</h1>
+</div>
+
+## Introduction
+
+Le Design System de l'Assurance Maladie est un projet vivant qui évolue constamment pour répondre aux besoins des utilisateurs et aux avancées technologiques.<br/>
+Votre contribution est essentielle pour garantir que le Design System reste pertinent, accessible et efficace.<br/>
+Toute demande ne sera pas nécessairement intégrée, mais chaque suggestion est examinée avec attention par l'équipe du Studio Design.
+
+<Story of={ComponentStories.InfoIntro}/>
+
+<a id="exigences" />
+## Exigences requises pour acceptation d'un nouveau composant ou d'une nouvelle fonctionnalité
+
+1. Être **conforme aux exigences de la charte graphique** de la CNAM (tokens associés).
+2. Avoir un **intérêt d'usage pour plusieurs produits** de l'Assurance Maladie (une justification métier peut être demandée).
+3. Avoir un **intérêt d'usage ou de pertinence** par rapport aux **composants de la bibliothèque Vuetify**.
+4. Avoir un **intérêt d'usage ou de pertinence** par rapport aux **composants existant du Design System**.
+5. Doit permettre la **responsivité**.
+6. Doit permettre le **respect du Référentiel général d'amélioration de l'accessibilité** (RGAA).
+7. Doit permettre aux produits utilisateurs du composant de respecter des **bonnes pratiques d’éco-conception**.
+8. Doit permettre la **maintenabilité du composant**.
+9. Ne doit pas engendrer de **conflit** ou **régression** avec l'existant.
+10. Doit se conformer aux **exigences techniques** du Design System et à son bon fonctionnement sur le Starter Kit (VueJS 3, version des plugins...).
+
+## Créer une nouvelle demande
+
+<Story of={ComponentStories.Optimisation}/>
+
+<Story of={ComponentStories.AjoutFonctionnalite}/>
+
+<Story of={ComponentStories.DeclinaisonFonctionnalite}/>
+
+<Story of={ComponentStories.CreationComposant}/>
+
+<Story of={ComponentStories.IntegrationComposant}/>