@cnamts/synapse 1.0.26 → 1.1.0

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/apContextual.ts

@@ -63,4 +63,10 @@ export const apContextualTokens = {
 		switchWidth: '3.5rem',
 		switchTrackOpacity: '1',
 	},
+	radius: {
+		rounded0: '0',
+		rounded: '12px',
+		roundedLg: '24px',
+		roundedPill: '64px',
+	},
 }

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

@@ -1,5 +1,5 @@
-// import { apColorsTokens } from '../amelipro/apColors'
+import { baseTokens } from '@/designTokens/tokens/baseTokens'
 
 export const apDarkTheme = {
-	// backgroundSurface: apColorsTokens.parma.darken60,
+	backgroundSurface: baseTokens.color.parma.darken60,
 }