@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -17,6 +17,10 @@ import {
 	iconSrc={AccessibilityIcon}
 	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/"
 >
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/Accordion.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/926" target="_blank" style={{color:'#0C41BD'}}>issue #926</a>)</p>
+	</div>
 	<CriteriaSection>
 		<CriteriaCard icon="🔍" title="Structure sémantique">
 			<ul>
@@ -74,8 +78,5 @@ import {
 		</ul>
 	</ResourcesSection>
 
-	<div class="mt-8">
-		<p>Rapport d’audit manuel : <a href="/audits/Accordion.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/926" target="_blank" style={{color:'#0C41BD'}}>issue #926</a>)</p>
-	</div>
+
 </AccessibilityGuideLayout>

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)
 			}