@cnamts/synapse 1.0.27 → 1.1.1

package/src/composantsVuetify/VStepper/v-stepper.stories.ts

@@ -0,0 +1,563 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import {
+	VStepper,
+	VStepperHeader,
+	VStepperItem,
+	VStepperWindow,
+	VStepperWindowItem,
+	VStepperActions,
+} from 'vuetify/components'
+import { ref } from 'vue'
+
+const meta: Meta<typeof VStepper> = {
+	title: 'Composants/Composants Vuetify/VStepper',
+	tags: ['!dev'],
+	component: VStepper,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src
+						.replace(/VStepper/g, 'v-stepper')
+						.replace(/VStepperHeader/g, 'v-stepper-header')
+						.replace(/VStepperItem/g, 'v-stepper-item')
+						.replace(/VStepperWindow/g, 'v-stepper-window')
+						.replace(/VStepperWindowItem/g, 'v-stepper-window-item')
+						.replace(/VStepperActions/g, 'v-stepper-actions'),
+			},
+		},
+	},
+	argTypes: {
+		color: {
+			control: { type: 'text' },
+			description: 'Couleur du stepper',
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Désactive le stepper',
+		},
+		altLabels: {
+			control: { type: 'boolean' },
+			description: 'Affiche les labels en dessous des étapes',
+		},
+		flat: {
+			control: { type: 'boolean' },
+			description: 'Supprime l\'élévation du stepper',
+		},
+		hideActions: {
+			control: { type: 'boolean' },
+			description: 'Masque les boutons d\'action',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VStepper>
+
+// Primary
+
+export const Primary: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(1)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Étape 1" :value="1" color="primary" />
+                        <VStepperItem title="Étape 2" :value="2" color="primary" />
+                        <VStepperItem title="Étape 3" :value="3" color="primary" />
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 1</h3>
+                                <p>Ceci est le contenu de la première étape.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 2</h3>
+                                <p>Ceci est le contenu de la deuxième étape.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 3</h3>
+                                <p>Ceci est le contenu de la troisième étape.</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary">
+    <template #default="{ prev, next }">
+        <v-stepper-header>
+            <v-stepper-item title="Étape 1" :value="1" color="primary" />
+            <v-stepper-item title="Étape 2" :value="2" color="primary" />
+            <v-stepper-item title="Étape 3" :value="3" color="primary" />
+        </v-stepper-header>
+        
+        <v-stepper-window>
+            <!-- contenu -->
+        </v-stepper-window>
+        
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}
+
+export const PrimaryAltLabels: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(2)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Étape 1" subtitle="Description" :value="1" color="primary" />
+                        <VStepperItem title="Étape 2" subtitle="Description" :value="2" color="primary" />
+                        <VStepperItem title="Étape 3" subtitle="Description" :value="3" color="primary" />
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 1</h3>
+                                <p>Labels alternatifs affichés en dessous.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 2</h3>
+                                <p>Labels alternatifs affichés en dessous.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 3</h3>
+                                <p>Labels alternatifs affichés en dessous.</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		altLabels: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary" alt-labels>
+    <template #default="{ prev, next }">
+        <!-- contenu -->
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}
+
+export const PrimaryFlat: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(3)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Étape 1" :value="1" color="primary" />
+                        <VStepperItem title="Étape 2" :value="2" color="primary" />
+                        <VStepperItem title="Étape 3" :value="3" color="primary" />
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 1</h3>
+                                <p>Stepper sans élévation (flat).</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 2</h3>
+                                <p>Stepper sans élévation (flat).</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 3</h3>
+                                <p>Stepper sans élévation (flat).</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		flat: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary" flat>
+    <template #default="{ prev, next }">
+        <!-- contenu -->
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}
+
+export const PrimaryDisabled: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(2)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Étape 1" :value="1" color="primary" />
+                        <VStepperItem title="Étape 2" :value="2" color="primary" />
+                        <VStepperItem title="Étape 3" :value="3" color="primary" />
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 1</h3>
+                                <p>Stepper désactivé.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 2</h3>
+                                <p>Stepper désactivé - Toutes les interactions sont désactivées.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 3</h3>
+                                <p>Stepper désactivé.</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		disabled: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary" disabled>
+    <template #default="{ prev, next }">
+        <!-- contenu -->
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}
+
+export const PrimaryWithIcons: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(2)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Informations" :value="1" color="primary">
+                            <template v-slot:icon>
+                                <span style="font-size: 20px;">👤</span>
+                            </template>
+                        </VStepperItem>
+                        <VStepperItem title="Adresse" :value="2" color="primary">
+                            <template v-slot:icon>
+                                <span style="font-size: 20px;">📍</span>
+                            </template>
+                        </VStepperItem>
+                        <VStepperItem title="Confirmation" :value="3" color="primary">
+                            <template v-slot:icon>
+                                <span style="font-size: 20px;">✓</span>
+                            </template>
+                        </VStepperItem>
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Informations personnelles</h3>
+                                <p>Saisissez vos informations personnelles.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Adresse</h3>
+                                <p>Saisissez votre adresse.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Confirmation</h3>
+                                <p>Vérifiez et confirmez vos informations.</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary">
+    <template #default="{ prev, next }">
+        <v-stepper-header>
+            <v-stepper-item title="Informations" :value="1" color="primary">
+                <template v-slot:icon>
+                    <span style="font-size: 20px;">👤</span>
+                </template>
+            </v-stepper-item>
+            <!-- ... autres items avec icônes -->
+        </v-stepper-header>
+        <!-- Contenu et actions -->
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}
+
+export const PrimaryWithError: Story = {
+	render: args => ({
+		components: {
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+		},
+		setup() {
+			const step = ref(2)
+			return { args, step }
+		},
+		template: `
+            <VStepper v-bind="args" v-model="step">
+                <template #default="{ prev, next }">
+                    <VStepperHeader>
+                        <VStepperItem title="Étape 1" :value="1" color="primary" complete />
+                        <VStepperItem title="Étape 2" :value="2" color="primary" error />
+                        <VStepperItem title="Étape 3" :value="3" color="primary" />
+                    </VStepperHeader>
+                    
+                    <VStepperWindow>
+                        <VStepperWindowItem :value="1">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 1</h3>
+                                <p>Cette étape est complétée.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="2">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 2</h3>
+                                <p style="color: rgb(var(--v-theme-error));">Cette étape contient des erreurs.</p>
+                            </div>
+                        </VStepperWindowItem>
+                        
+                        <VStepperWindowItem :value="3">
+                            <div style="padding: 24px;">
+                                <h3>Contenu de l'étape 3</h3>
+                                <p>Ceci est le contenu de la troisième étape.</p>
+                            </div>
+                        </VStepperWindowItem>
+                    </VStepperWindow>
+                    
+                    <VStepperActions 
+                        @click:prev="prev"
+                        @click:next="next"
+                        prev-text="Précédent" 
+                        next-text="Suivant"
+                    />
+                </template>
+            </VStepper>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-stepper v-model="step" color="primary">
+    <template #default="{ prev, next }">
+        <v-stepper-header>
+            <v-stepper-item title="Étape 1" :value="1" color="primary" complete />
+            <v-stepper-item title="Étape 2" :value="2" color="primary" error />
+            <v-stepper-item title="Étape 3" :value="3" color="primary" />
+        </v-stepper-header>
+        <!-- Contenu et actions -->
+        <v-stepper-actions 
+            @click:prev="prev"
+            @click:next="next"
+            prev-text="Précédent" 
+            next-text="Suivant"
+        />
+    </template>
+</v-stepper>`,
+			},
+		},
+	},
+}

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -46,6 +46,7 @@ export const apLightTheme = {
 	// Feedback
 	info: baseTokens.color.parma.darken40,
 	infoVariant: baseTokens.color.parma.lighten80,
+	infoVariant90: baseTokens.color.parma.lighten90,
 	onInfo: baseTokens.color.white.base,
 	onInfoVariant: baseTokens.color.parma.darken60,
 	error: baseTokens.color.red.darken20,

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -11,7 +11,7 @@ export const apSemanticTokens = {
 			accent: apColorsTokens.cyan.darken20,
 			accentContrasted: apColorsTokens.cyan.darken60,
 			accentAlt: apColorsTokens.grey.base,
-			info: apColorsTokens.blue.lighten80,
+			info: apColorsTokens.parma.lighten80,
 			infoSubdued: apColorsTokens.blue.lighten90,
 			infoContrasted: apColorsTokens.parma.darken40,
 			success: apColorsTokens.forestGreen.lighten80,

package/src/designTokens/tokens/baseColors.ts

@@ -123,7 +123,7 @@ export const baseColors = {
 		lighten38: 'rgba(255, 255, 255, 0.38)',
 		lighten40: 'rgba(255, 255, 255, 0.40)',
 		lighten70: 'rgba(255, 255, 255, 0.70)',
-		lighten8: 'rgba(255, 255, 255, 0.080)',
+		lighten8: 'rgba(255, 255, 255, 0.08)',
 		base: '#ffffff',
 	},
 }

package/src/designTokens/tokens/baseTokens.ts

@@ -156,37 +156,37 @@ export const baseTokens = {
 			lighten80: '#DDDEDE',
 			lighten90: '#EEEEEE',
 			lighten97: '#FAFAFA',
-			alpha40: 'rgba(152,155,155,0.4000000059604645)',
+			alpha40: 'rgba(152,155,155,0.4)',
 		},
 		white: {
 			base: '#FFFFFF',
-			alpha70: 'rgba(255,255,255,0.699999988079071)',
-			alpha40: 'rgba(255,255,255,0.4000000059604645)',
-			alpha38: 'rgba(255,255,255,0.3799999952316284)',
-			alpha20: 'rgba(255,255,255,0.20000000298023224)',
-			alpha08: 'rgba(255,255,255,0.07999999821186066)',
+			alpha70: 'rgba(255,255,255,0.7)',
+			alpha40: 'rgba(255,255,255,0.4)',
+			alpha38: 'rgba(255,255,255,0.38)',
+			alpha20: 'rgba(255,255,255,0.2)',
+			alpha08: 'rgba(255,255,255,0.08)',
 			alpha00: 'rgba(255,255,255,0)',
 		},
 		transparentBlue: {
-			alpha40: 'rgba(12,65,154,0.4000000059604645)',
-			alpha20: 'rgba(12,65,154,0.20000000298023224)',
-			alpha18: 'rgba(12,65,154,0.18000000715255737)',
-			alpha08: 'rgba(12,65,154,0.07999999821186066)',
+			alpha40: 'rgba(12,65,154,0.4)',
+			alpha20: 'rgba(12,65,154,0.2)',
+			alpha18: 'rgba(12,65,154,0.18)',
+			alpha08: 'rgba(12,65,154,0.08)',
 			alpha00: 'rgba(12,65,154,0)',
 		},
 		transparentCyan: {
 			alpha00: 'rgba(0,132,178,0)',
-			alpha08: 'rgba(0,132,178,0.07999999821186066)',
-			alpha18: 'rgba(0,132,178,0.18000000715255737)',
-			alpha20: 'rgba(0,132,178,0.20000000298023224)',
-			alpha40: 'rgba(0,132,178,0.4000000059604645)',
+			alpha08: 'rgba(0,132,178,0.08)',
+			alpha18: 'rgba(0,132,178,0.18)',
+			alpha20: 'rgba(0,132,178,0.2)',
+			alpha40: 'rgba(0,132,178,0.4)',
 		},
 		transparentBlack: {
 			alpha00: 'rgba(0,0,0,0)',
-			alpha08: 'rgba(0,0,0,0.07999999821186066)',
-			alpha18: 'rgba(0,0,0,0.18000000715255737)',
-			alpha20: 'rgba(0,0,0,0.20000000298023224)',
-			alpha40: 'rgba(0,0,0,0.4000000059604645)',
+			alpha08: 'rgba(0,0,0,0.08)',
+			alpha18: 'rgba(0,0,0,0.18)',
+			alpha20: 'rgba(0,0,0,0.2)',
+			alpha40: 'rgba(0,0,0,0.4)',
 		},
 		amber: {
 			darken80: '#502C01',

package/src/designTokens/tokens/pa/paLightTheme.ts

@@ -46,6 +46,7 @@ export const paLightTheme = {
 	// Feedback
 	info: baseTokens.color.blue.base,
 	infoVariant: baseTokens.color.blue.lighten80,
+	infoVariant90: baseTokens.color.blue.lighten90,
 	onInfo: baseTokens.color.white.base,
 	onInfoVariant: baseTokens.color.blue.darken20,
 	error: baseTokens.color.orange.darken20,

package/src/stories/Accessibilite/DesignSystem/a11y-status.json

@@ -568,7 +568,7 @@
       "hasA11yDisabledInStories": false,
       "mdxStatus": "Complète",
       "isFullyCompliant": true,
-      "storybookTitle": "Composants/Formulaires/SearchListField",
+      "storybookTitle": "Composants/Filtres/SearchListField",
       "hasManualAudit": true
     },
     {