@cnamts/synapse 1.0.22 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -18,7 +18,10 @@
       "require": "./dist/design-system-v3.umd.cjs"
     },
     "./style.css": "./dist/style.css",
-    "./*": "./src/*"
+    "./*": {
+      "types": "./src/*",
+      "default": "./src/*"
+    }
   },
   "scripts": {
     "dev": "vite",
@@ -31,6 +34,7 @@
     "test:unit": "vitest run --exclude='**/*.a11y.spec.ts'",
     "test:a11y": "pnpm vitest run a11y.spec.ts",
     "a11y:report": "node ./scripts/a11y-report.mjs",
+    "a11y:status": "node generate-a11y-report.mjs",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
   },
@@ -83,7 +87,7 @@
     "eslint-plugin-storybook": "^0.11.3",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "happy-dom": "^20.0.0",
+    "happy-dom": "^20.8.8",
     "husky": "^9.1.6",
     "jsdom": "^27.3.0",
     "marked": "^16.0.0",
@@ -144,7 +148,9 @@
       "parse5": "7.1.2",
       "npm": "^11.8.1",
       "minimatch": ">=10.2.3",
-      "immutable": ">=5.1.5"
+      "immutable": ">=5.1.5",
+      "flatted": ">=3.4.2",
+      "handlebars": ">=4.7.9"
     },
     "patchedDependencies": {
       "vuetify@3.12.2": "patches/vuetify@3.12.2.patch"

package/src/assets/apTokens.scss

@@ -334,8 +334,8 @@ $colors-interactive-negative-primary-action-hover: #99dbf2;
 $colors-interactive-negative-primary-action-pressed: #66c9ec;
 $colors-interactive-negative-primary-action-disabled: #dddede;
 $colors-interactive-positive-secondary-action-enabled: rgb(255 255 255 / 0%);
-$colors-interactive-positive-secondary-action-hover: #ccedf9;
-$colors-interactive-positive-secondary-action-pressed: #99dbf2;
+$colors-interactive-positive-secondary-action-hover: #f7fcfe;
+$colors-interactive-positive-secondary-action-pressed: #ccedf9;
 $colors-interactive-positive-secondary-action-disabled: rgb(255 255 255 / 0%);
 $colors-interactive-negative-secondary-action-enabled: rgb(255 255 255 / 0%);
 $colors-interactive-negative-secondary-action-hover: rgb(255 255 255 / 8%);

package/src/assets/overrides/_btns.scss

@@ -1,3 +1,5 @@
+@use '@/assets/apTokens';
+
 .v-btn {
 	text-transform: inherit !important;
 	font-weight: 700 !important;
@@ -13,3 +15,9 @@
 .v-btn.v-tab {
 	text-transform: uppercase !important;
 }
+
+.theme-ap .v-btn {
+	&:hover {
+		background-color: apTokens.$colors-interactive-positive-secondary-action-hover !important;
+	}
+}

package/src/assets/overrides/_forms.scss

@@ -12,3 +12,12 @@
 .v-radio .v-selection-control {
 	min-height: 40px;
 }
+
+// AP theme: inset the loader bar to match the larger field border-radius (12px)
+.theme-ap,
+.theme-ap2026 {
+	.v-field__loader .v-progress-linear {
+		margin-inline: 10px;
+		width: calc(100% - 20px);
+	}
+}

package/src/assets/overrides/_icons.scss

@@ -1,20 +1,49 @@
 @use '@/assets/apTokens';
 @use '@/assets/amelipro/apTokens2026';
+@use '@/assets/tokens';
 
 .v-theme--ap.v-btn--icon .v-icon {
-	color: apTokens.$colors-icon-accent-primary !important;
+	color: apTokens.$colors-icon-accent-primary;
 	transition: color 0.2s ease;
-
-	&:hover {
-		color: apTokens.$colors-icon-accent-secondary !important;
-	}
 }
 
 .v-theme--ap2026.v-btn--icon .v-icon {
-	color: apTokens2026.$ap-blue-darken1 !important;
+	color: apTokens2026.$ap-blue-darken1;
+	transition: color 0.2s ease;
+}
+
+.v-theme--cnam.v-btn--icon .v-icon,
+.v-theme--pa.v-btn--icon .v-icon {
+	color: tokens.$colors-icon-accent-primary;
+	transition: color 0.2s ease;
+}
+
+.v-theme--ap .v-btn--icon:hover,
+.v-theme--ap2026 .v-btn--icon:hover,
+.v-theme--cnam .v-btn--icon:hover,
+.v-theme--pa .v-btn--icon:hover {
+	opacity: 0.08;
+}
+
+.v-theme--ap.v-icon,
+.v-theme--ap2026.v-icon,
+.v-theme--cnam.v-icon,
+.v-theme--pa.v-icon {
 	transition: color 0.2s ease;
+}
+
+.v-theme--ap.v-btn--icon .v-ripple__animation {
+	background-color: apTokens.$colors-icon-accent-primary !important;
+	opacity: 0.18;
+}
+
+.v-theme--ap2026.v-btn--icon .v-ripple__animation {
+	background-color: apTokens2026.$ap-blue-darken1 !important;
+	opacity: 0.18;
+}
 
-	&:hover {
-		color: apTokens2026.$ap-blue-darken2 !important;
-	}
+.v-theme--cnam.v-btn--icon .v-ripple__animation,
+.v-theme--pa.v-btn--icon .v-ripple__animation {
+	background-color: tokens.$colors-icon-accent-primary !important;
+	opacity: 0.18;
 }

package/src/assets/overrides/_tables.scss

@@ -1,4 +1,5 @@
 @use '@/assets/tokens';
+@use '@/assets/apTokens';
 
 .v-data-table thead th .v-data-table-header__content {
 	opacity: 0.65;
@@ -16,3 +17,21 @@
 		background: tokens.$primary-base !important;
 	}
 }
+
+// Pagination color variables
+.theme-cnam,
+.theme-pa {
+	--pagination-color: #{tokens.$primary-base};
+	--pagination-border: #{tokens.$primary-base};
+	--pagination-ellipsis: #{tokens.$primary-base};
+	--pagination-focused-background-color: rgba(tokens.$primary-base, 0.1);
+	--pagination-background-color: #{tokens.$primary-base};
+}
+
+.theme-ap {
+	--pagination-color: #{apTokens.$primary-base};
+	--pagination-border: #{apTokens.$primary-base};
+	--pagination-ellipsis: #{apTokens.$primary-base};
+	--pagination-focused-background-color: rgba(apTokens.$primary-base, 0.1);
+	--pagination-background-color: #{apTokens.$primary-base};
+}

package/src/components/Accordion/Accordion.mdx

@@ -16,6 +16,17 @@ L'accordéon standard affiche une liste d'éléments avec un titre et un contenu
 
 <Canvas of={AccordionStories.Default} />
 
+## API
+
+<Controls of={AccordionStories.Default} />
+
+## Événements
+
+### update:modelValue
+
+- **Type** : `(value: string[]) => void`
+- **Description** : Émis lors de l'ouverture ou la fermeture d'un élément. La valeur est le tableau mis à jour des identifiants des éléments ouverts.
+
 ## Contenu avec objet
 
 L'accordéon peut également afficher un contenu structuré sous forme d'objet avec un titre et un contenu détaillé.
@@ -34,26 +45,28 @@ Vous pouvez également utiliser des slots pour personnaliser le rendu des titres
 
 <Canvas of={AccordionStories.WithSlots} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+## Contrôle programmatique (v-model)
 
-Le composant Accordion respecte les normes d'accessibilité ARIA :
+Le composant supporte `v-model` pour contrôler programmatiquement les éléments ouverts.
+La valeur est un tableau de chaînes correspondant aux `id` des éléments ouverts.
 
-- Chaque bouton de dévoilement est contenu dans un élément de titre (h1-h6)
-- Chaque bouton possède les attributs `aria-expanded` et `aria-controls`
-- Chaque section de contenu a l'attribut `role="region"` et `aria-labelledby` qui pointe vers l'ID du bouton
+<Canvas of={AccordionStories.WithVModel} />
 
-## API
+## Éléments pré-ouverts
 
-<Controls of={AccordionStories.Default} />
+Vous pouvez pré-ouvrir des éléments en initialisant le `v-model` avec les identifiants souhaités.
+
+<Canvas of={AccordionStories.PreOpened} />
 
 ## Exemple d'utilisation
 
 <Source dark code={`
 <script setup lang="ts">
+import { ref } from 'vue'
 import { Accordion } from '@cnamts/synapse'
 
+const openItems = ref<string[]>([])
+
 const accordionItems = [
   { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
   { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
@@ -71,6 +84,7 @@ const accordionItems = [
 <template>
   <main>
     <Accordion
+      v-model="openItems"
       :items="accordionItems"
       :heading-level="3"
     />

package/src/components/Accordion/Accordion.stories.ts

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
 import Accordion from './Accordion.vue'
+import { ref } from 'vue'
 
 const meta: Meta<typeof Accordion> = {
 	title: 'Composants/Données/Accordion',
@@ -8,20 +10,40 @@ const meta: Meta<typeof Accordion> = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
-		items: {
+		'items': {
 			control: { type: 'object' },
 			description: 'Liste des éléments de l\'accordéon',
 		},
-		headingLevel: {
+		'headingLevel': {
 			control: { type: 'number', min: 1, max: 6 },
 			description: 'Niveau de titre pour les boutons de dévoilement',
 			default: 3,
 		},
-		groupId: {
+		'groupId': {
 			control: { type: 'text' },
 			description: 'Identifiant de groupe pour synchroniser le focus entre plusieurs accordions',
 			default: 'default',
 		},
+		'modelValue': {
+			control: 'object',
+			description: 'Liste des identifiants des éléments ouverts (v-model)',
+			table: {
+				type: { summary: 'string[]' },
+				category: 'props',
+				defaultValue: { summary: '[]' },
+			},
+		},
+		'onUpdate:modelValue': {
+			action: 'update:modelValue',
+			description: 'Événement émis lors de l\'ouverture ou la fermeture d\'un élément',
+			table: {
+				type: { summary: '(value: string[]) => void' },
+				category: 'events',
+			},
+		},
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
 	},
 }
 
@@ -339,3 +361,131 @@ export const WithSlots: Story = {
 		`,
 	}),
 }
+
+export const WithVModel: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				language: 'vue',
+				name: 'Template',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Accordion } from '@cnamts/synapse'
+
+  const openItems = ref<string[]>([])
+
+  const items = [
+    { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+    { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
+    { id: 'item3', title: 'Section 3', content: 'Contenu de la section 3' },
+  ]
+
+  function openAll() {
+    openItems.value = items.map(i => i.id)
+  }
+
+  function closeAll() {
+    openItems.value = []
+  }
+</script>
+
+<template>
+  <Accordion
+    v-model="openItems"
+    :items="items"
+    :heading-level="3"
+  />
+
+  <p>Éléments ouverts : {{ openItems }}</p>
+
+  <v-btn variant="outlined" color="primary" @click="openAll">Tout ouvrir</v-btn>
+  <v-btn variant="outlined" color="primary" @click="closeAll">Tout fermer</v-btn>
+</template>`,
+			},
+		],
+	},
+	args: {
+		items: defaultItems,
+		headingLevel: 3,
+	},
+	render: args => ({
+		components: { Accordion },
+		setup() {
+			const openItems = ref<string[]>([])
+
+			const openAll = () => {
+				openItems.value = (args.items ?? []).map((i: { id: string }) => i.id)
+			}
+
+			const closeAll = () => {
+				openItems.value = []
+			}
+
+			return { args, openItems, openAll, closeAll }
+		},
+		template: `
+			<div class="pa-4">
+				<Accordion v-bind="args" v-model="openItems" />
+
+				<div class="mt-4" style="font-family: monospace; color: #666;">
+					Éléments ouverts : {{ openItems }}
+				</div>
+
+				<div class="mt-2 d-flex ga-2">
+					<v-btn variant="outlined" color="primary" @click="openAll">Tout ouvrir</v-btn>
+					<v-btn variant="outlined" color="primary" @click="closeAll">Tout fermer</v-btn>
+				</div>
+			</div>
+		`,
+	}),
+}
+
+export const PreOpened: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				language: 'vue',
+				name: 'Template',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Accordion } from '@cnamts/synapse'
+
+  // Pré-ouvrir la section 2
+  const openItems = ref<string[]>(['item2'])
+</script>
+
+<template>
+  <Accordion
+    v-model="openItems"
+    :items="[
+      { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+      { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
+      { id: 'item3', title: 'Section 3', content: 'Contenu de la section 3' },
+    ]"
+    :heading-level="3"
+  />
+</template>`,
+			},
+		],
+	},
+	args: {
+		items: defaultItems,
+		headingLevel: 3,
+	},
+	render: args => ({
+		components: { Accordion },
+		setup() {
+			const openItems = ref<string[]>(['item2'])
+			return { args, openItems }
+		},
+		template: `
+			<div class="pa-4">
+				<Accordion v-bind="args" v-model="openItems" />
+
+				<div class="mt-4" style="font-family: monospace; color: #666;">
+					Éléments ouverts : {{ openItems }}
+				</div>
+			</div>
+		`,
+	}),
+}

package/src/components/Accordion/Accordion.vue

@@ -2,7 +2,6 @@
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from '@/components/Accordion/config'
 	import { mdiChevronRight } from '@mdi/js'
-
 	// Importation des composables
 	import useAccordionState from './composables/useAccordionState'
 	import useAccordionGroupCommunication from './composables/useAccordionGroupCommunication'
@@ -12,7 +11,7 @@
 	interface AccordionItem {
 		id: string
 		title: string
-		content: string | Record<string, unknown>
+		content?: string | { title: string, content: string }
 		headingLevel?: number
 		disabled?: boolean
 	}
@@ -38,6 +37,8 @@
 		vuetifyOptions: () => ({}),
 	})
 
+	const openItems = defineModel<string[]>({ default: () => [] })
+
 	const options = useCustomizableOptions(config, props)
 
 	// Génération d'un ID unique pour cette instance d'accordéon
@@ -49,7 +50,7 @@
 		isItemOpen,
 		isItemFocused,
 		setFocus,
-	} = useAccordionState()
+	} = useAccordionState(openItems)
 
 	// Utilisation du composable pour gérer la communication entre accordéons
 	const { emitFocusChange } = useAccordionGroupCommunication(
@@ -167,13 +168,13 @@
 								{{ item.content }}
 							</p>
 						</template>
-						<template v-else>
+						<template v-else-if="typeof item.content === 'object' && item.content !== null && 'title' in item.content && 'content' in item.content">
 							<div class="sy-accordion-content-item">
 								<p class="sy-accordion-content-text">
-									<strong>{{ (item.content as any).title }}</strong>
+									<strong>{{ item.content.title }}</strong>
 								</p>
 								<p class="sy-accordion-content-text">
-									{{ (item.content as any).content }}
+									{{ item.content.content }}
 								</p>
 							</div>
 						</template>

package/src/components/Accordion/composables/__tests__/useAccordionState.spec.ts

@@ -1,10 +1,11 @@
 import { describe, it, expect } from 'vitest'
+import { ref } from 'vue'
 import useAccordionState from '../useAccordionState'
 
 describe('useAccordionState', () => {
 	describe('toggleItem', () => {
 		it('adds an item to openItems when it is not already open', () => {
-			const { toggleItem, isItemOpen, openItems } = useAccordionState()
+			const { toggleItem, isItemOpen, openItems } = useAccordionState(ref<string[]>([]))
 
 			toggleItem('item1')
 
@@ -13,7 +14,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('removes an item from openItems when it is already open', () => {
-			const { toggleItem, isItemOpen, openItems } = useAccordionState()
+			const { toggleItem, isItemOpen, openItems } = useAccordionState(ref<string[]>([]))
 
 			// Ouvrir d'abord l'élément
 			toggleItem('item1')
@@ -29,7 +30,7 @@ describe('useAccordionState', () => {
 
 	describe('isItemOpen', () => {
 		it('returns true when the item is open', () => {
-			const { toggleItem, isItemOpen } = useAccordionState()
+			const { toggleItem, isItemOpen } = useAccordionState(ref<string[]>([]))
 
 			toggleItem('item1')
 
@@ -37,7 +38,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('returns false when the item is not open', () => {
-			const { isItemOpen } = useAccordionState()
+			const { isItemOpen } = useAccordionState(ref<string[]>([]))
 
 			expect(isItemOpen('item1')).toBe(false)
 		})
@@ -45,7 +46,7 @@ describe('useAccordionState', () => {
 
 	describe('isItemFocused', () => {
 		it('returns true when the item is focused', () => {
-			const { setFocus, isItemFocused } = useAccordionState()
+			const { setFocus, isItemFocused } = useAccordionState(ref<string[]>([]))
 
 			setFocus('item1')
 
@@ -53,7 +54,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('returns false when the item is not focused', () => {
-			const { isItemFocused } = useAccordionState()
+			const { isItemFocused } = useAccordionState(ref<string[]>([]))
 
 			expect(isItemFocused('item1')).toBe(false)
 		})
@@ -61,7 +62,7 @@ describe('useAccordionState', () => {
 
 	describe('setFocus', () => {
 		it('sets the focus on the specified item', () => {
-			const { setFocus, focusedItemId } = useAccordionState()
+			const { setFocus, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			setFocus('item1')
 
@@ -69,7 +70,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('removes focus when null is passed', () => {
-			const { setFocus, focusedItemId } = useAccordionState()
+			const { setFocus, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			// D'abord définir le focus
 			setFocus('item1')
@@ -82,7 +83,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('does nothing when the same item is already focused', () => {
-			const { setFocus, focusedItemId } = useAccordionState()
+			const { setFocus, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			setFocus('item1')
 			const originalFocusedItem = focusedItemId.value
@@ -96,7 +97,7 @@ describe('useAccordionState', () => {
 
 	describe('focus behavior during toggle', () => {
 		it('sets focus when opening an item', () => {
-			const { toggleItem, focusedItemId } = useAccordionState()
+			const { toggleItem, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			toggleItem('item1')
 
@@ -104,7 +105,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('maintains focus when closing a non-focused item', () => {
-			const { toggleItem, setFocus, focusedItemId } = useAccordionState()
+			const { toggleItem, setFocus, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			// Ouvrir deux éléments
 			toggleItem('item1')
@@ -128,7 +129,7 @@ describe('useAccordionState', () => {
 		})
 
 		it('removes focus when closing the focused item', () => {
-			const { toggleItem, focusedItemId } = useAccordionState()
+			const { toggleItem, focusedItemId } = useAccordionState(ref<string[]>([]))
 
 			// Ouvrir un élément (qui sera automatiquement focalisé)
 			toggleItem('item1')
@@ -141,4 +142,31 @@ describe('useAccordionState', () => {
 			expect(focusedItemId.value).toBeNull()
 		})
 	})
+
+	describe('external ref synchronization', () => {
+		it('uses the provided ref for openItems', () => {
+			const externalRef = ref<string[]>(['item1'])
+			const { isItemOpen } = useAccordionState(externalRef)
+
+			expect(isItemOpen('item1')).toBe(true)
+		})
+
+		it('mutates the provided ref when toggling', () => {
+			const externalRef = ref<string[]>([])
+			const { toggleItem } = useAccordionState(externalRef)
+
+			toggleItem('item1')
+
+			expect(externalRef.value).toContain('item1')
+		})
+
+		it('reflects external changes to the ref', () => {
+			const externalRef = ref<string[]>([])
+			const { isItemOpen } = useAccordionState(externalRef)
+
+			externalRef.value = ['item2']
+
+			expect(isItemOpen('item2')).toBe(true)
+		})
+	})
 })

package/src/components/Accordion/composables/useAccordionState.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 
 export interface AccordionState {
 	openItems: { value: string[] }
@@ -9,8 +9,7 @@ export interface AccordionState {
 	setFocus: (itemId: string | null) => void
 }
 
-export default function useAccordionState(): AccordionState {
-	const openItems = ref<string[]>([])
+export default function useAccordionState(openItems: Ref<string[]>): AccordionState {
 	const focusedItemId = ref<string | null>(null)
 
 	const toggleItem = (itemId: string) => {
@@ -23,7 +22,7 @@ export default function useAccordionState(): AccordionState {
 			setFocus(itemId)
 		}
 		else {
-			openItems.value.splice(index, 1)
+			openItems.value = openItems.value.filter(id => id !== itemId)
 			if (!wasFocused) {
 				setFocus(itemId)
 			}