@cnamts/synapse 1.1.0 → 1.1.1

package/src/composantsVuetify/VNavigationDrawer/v-navigation-drawer.stories.ts

@@ -0,0 +1,310 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VNavigationDrawer, VList, VListItem, VListItemTitle, VDivider, VBtn, VApp, VMain } from 'vuetify/components'
+import { ref } from 'vue'
+
+const meta = {
+	title: 'Composants/Composants Vuetify/VNavigationDrawer',
+	tags: ['!dev'],
+	component: VNavigationDrawer,
+	parameters: {
+		docs: {
+			description: {
+				component: 'Le composant VNavigationDrawer est utilisé pour créer des tiroirs de navigation latéraux.',
+			},
+		},
+	},
+} satisfies Meta<typeof VNavigationDrawer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	render: args => ({
+		components: { VNavigationDrawer, VList, VListItem, VListItemTitle, VDivider, VBtn, VApp, VMain },
+		setup() {
+			const drawer = ref(true)
+			return { args, drawer }
+		},
+		template: `
+            <VApp style="height: 400px; overflow-y: hidden;">
+                <VNavigationDrawer v-model="drawer" v-bind="args">
+                    <VList>
+                        <VListItem value="home">
+                            <VListItemTitle>Accueil</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="about">
+                            <VListItemTitle>À propos</VListItemTitle>
+                        </VListItem>
+                        <VDivider />
+                        <VListItem value="profile">
+                            <VListItemTitle>Profil</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="settings">
+                            <VListItemTitle>Paramètres</VListItemTitle>
+                        </VListItem>
+                    </VList>
+                </VNavigationDrawer>
+                <VMain>
+                    <div class="pa-4">
+                        <VBtn @click="drawer = !drawer" color="primary">
+                            Toggle Drawer
+                        </VBtn>
+                    </div>
+                </VMain>
+            </VApp>
+        `,
+	}),
+	args: {
+		width: 256,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-app>
+        <v-navigation-drawer v-model="drawer" :width="256">
+            <v-list>
+                <v-list-item value="home">
+                    <v-list-item-title>Accueil</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="about">
+                    <v-list-item-title>À propos</v-list-item-title>
+                </v-list-item>
+                <v-divider />
+                <v-list-item value="profile">
+                    <v-list-item-title>Profil</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="settings">
+                    <v-list-item-title>Paramètres</v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+        <v-main>
+            <div class="pa-4">
+                <v-btn @click="drawer = !drawer" color="primary">
+                    Toggle Drawer
+                </v-btn>
+            </div>
+        </v-main>
+    </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const drawer = ref(true)
+</script>`,
+			},
+		},
+	},
+}
+
+export const Permanent: Story = {
+	render: args => ({
+		components: { VNavigationDrawer, VList, VListItem, VListItemTitle, VApp, VMain },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VApp style="height: 400px; overflow-y: hidden;">
+                <VNavigationDrawer v-bind="args" permanent>
+                    <VList>
+                        <VListItem value="dashboard">
+                            <VListItemTitle>Tableau de bord</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="messages">
+                            <VListItemTitle>Messages</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="notifications">
+                            <VListItemTitle>Notifications</VListItemTitle>
+                        </VListItem>
+                    </VList>
+                </VNavigationDrawer>
+                <VMain>
+                    <div class="pa-4">
+                        <p>Contenu principal de l'application</p>
+                    </div>
+                </VMain>
+            </VApp>
+        `,
+	}),
+	args: {
+		width: 256,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-app>
+        <v-navigation-drawer permanent :width="256">
+            <v-list>
+                <v-list-item value="dashboard">
+                    <v-list-item-title>Tableau de bord</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="messages">
+                    <v-list-item-title>Messages</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="notifications">
+                    <v-list-item-title>Notifications</v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+        <v-main>
+            <div class="pa-4">
+                <p>Contenu principal de l'application</p>
+            </div>
+        </v-main>
+    </v-app>
+</template>`,
+			},
+		},
+	},
+}
+
+export const Temporary: Story = {
+	render: args => ({
+		components: { VNavigationDrawer, VList, VListItem, VListItemTitle, VBtn, VApp, VMain },
+		setup() {
+			const drawer = ref(false)
+			return { args, drawer }
+		},
+		template: `
+            <VApp style="height: 400px; overflow-y: hidden;">
+                <VNavigationDrawer v-model="drawer" v-bind="args" temporary>
+                    <VList>
+                        <VListItem value="item1">
+                            <VListItemTitle>Élément 1</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="item2">
+                            <VListItemTitle>Élément 2</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="item3">
+                            <VListItemTitle>Élément 3</VListItemTitle>
+                        </VListItem>
+                    </VList>
+                </VNavigationDrawer>
+                <VMain>
+                    <div class="pa-4">
+                        <VBtn @click="drawer = !drawer" color="primary">
+                            Ouvrir le drawer
+                        </VBtn>
+                        <p class="mt-4">Le drawer temporaire se superpose au contenu et se ferme en cliquant en dehors.</p>
+                    </div>
+                </VMain>
+            </VApp>
+        `,
+	}),
+	args: {
+		width: 256,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-app>
+        <v-navigation-drawer v-model="drawer" temporary :width="256">
+            <v-list>
+                <v-list-item value="item1">
+                    <v-list-item-title>Élément 1</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item2">
+                    <v-list-item-title>Élément 2</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item3">
+                    <v-list-item-title>Élément 3</v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+        <v-main>
+            <div class="pa-4">
+                <v-btn @click="drawer = !drawer" color="primary">
+                    Ouvrir le drawer
+                </v-btn>
+            </div>
+        </v-main>
+    </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const drawer = ref(false)
+</script>`,
+			},
+		},
+	},
+}
+
+export const WithCustomContent: Story = {
+	render: args => ({
+		components: { VNavigationDrawer, VList, VListItem, VListItemTitle, VDivider, VApp, VMain },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VApp style="height: 400px; overflow-y: hidden;">
+                <VNavigationDrawer v-bind="args" permanent>
+                    <div class="pa-4">
+                        <h3 class="text-h6 mb-2">Menu Principal</h3>
+                        <p class="text-caption text-medium-emphasis">Sélectionnez une option</p>
+                    </div>
+                    <VDivider />
+                    <VList>
+                        <VListItem value="option1">
+                            <VListItemTitle>Option 1</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="option2">
+                            <VListItemTitle>Option 2</VListItemTitle>
+                        </VListItem>
+                        <VListItem value="option3">
+                            <VListItemTitle>Option 3</VListItemTitle>
+                        </VListItem>
+                    </VList>
+                    <VDivider />
+                </VNavigationDrawer>
+                <VMain>
+                    <div class="pa-4">
+                        <p>Contenu principal avec menu personnalisé</p>
+                    </div>
+                </VMain>
+            </VApp>
+        `,
+	}),
+	args: {
+		width: 256,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-app>
+        <v-navigation-drawer permanent :width="256">
+            <div class="pa-4">
+                <h3 class="text-h6 mb-2">Menu Principal</h3>
+                <p class="text-caption text-medium-emphasis">Sélectionnez une option</p>
+            </div>
+            <v-divider />
+            <v-list>
+                <v-list-item value="option1">
+                    <v-list-item-title>Option 1</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="option2">
+                    <v-list-item-title>Option 2</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="option3">
+                    <v-list-item-title>Option 3</v-list-item-title>
+                </v-list-item>
+            </v-list>
+            <v-divider />
+        </v-navigation-drawer>
+        <v-main>
+            <div class="pa-4">
+                <p>Contenu principal avec menu personnalisé</p>
+            </div>
+        </v-main>
+    </v-app>
+</template>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VSlideGroup/VSlideGroup.mdx

@@ -0,0 +1,105 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VSlideGroupStories from './v-slide-group.stories'
+
+<Meta title="Composants/Composants Vuetify/VSlideGroup" />
+
+<div className="header">
+    <h1>VSlideGroup</h1>
+Ce composant utilise directement le composant natif `v-slide-group` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-slide-group/#props).
+</div>
+
+### Composants associés
+
+- `v-slide-group-item` : Élément individuel du groupe de diapositives
+
+## Description
+
+Le composant `v-slide-group` est utilisé pour afficher une collection d'éléments défilables horizontalement. Il est particulièrement utile pour :
+- Afficher des catégories ou des filtres
+- Créer des carrousels d'éléments
+- Organiser des onglets ou des navigation horizontales
+- Permettre la sélection parmi plusieurs options
+
+## Variantes
+
+### Default
+
+Groupe de diapositives basique avec des cartes numérotées.
+
+<Canvas of={VSlideGroupStories.Default} />
+
+### Avec Chips
+
+Utilisation avec des chips pour créer un système de filtres ou de tags.
+
+<Canvas of={VSlideGroupStories.WithChips} />
+
+### Centre l'élément actif
+
+L'élément sélectionné est automatiquement centré.
+
+<Canvas of={VSlideGroupStories.CenterActive} />
+
+### Sélection multiple
+
+Permet de sélectionner plusieurs éléments à la fois.
+
+<Canvas of={VSlideGroupStories.MultipleSelection} />
+
+### Pseudo carousel
+
+Pour afficher les informations de manière créative sur les feuilles.
+
+<Canvas of={VSlideGroupStories.Misc} />
+
+### Cartes personnalisées
+
+Cartes colorées avec différentes variantes selon l'état de sélection.
+
+<Canvas of={VSlideGroupStories.CustomCards} />
+
+## Props principales
+
+- **showArrows** : Affiche les flèches de navigation
+- **centerActive** : Centre automatiquement l'élément actif
+- **multiple** : Permet la sélection multiple
+- **mandatory** : Rend la sélection obligatoire (au moins un élément doit être sélectionné)
+- **selectedClass** : Classe CSS personnalisée appliquée aux éléments sélectionnés
+- **modelValue** : Valeur(s) sélectionnée(s)
+
+## Accessibilité
+
+### Bonnes pratiques
+
+Le composant `v-slide-group` doit être utilisé de manière accessible :
+
+#### Navigation au clavier
+
+- **Tab** : Navigue entre les éléments du groupe
+- **Flèches gauche/droite** : Défile entre les éléments
+- **Enter/Espace** : Sélectionne l'élément focalisé
+- **Home** : Va au premier élément
+- **End** : Va au dernier élément
+
+#### Contraste et lisibilité
+
+- Assurez-vous que l'état sélectionné est clairement visible
+- Utilisez des couleurs avec un contraste suffisant (ratio minimum de 4.5:1)
+- Fournissez des indicateurs visuels clairs pour l'état de sélection
+- Les flèches de navigation doivent être suffisamment grandes et contrastées
+
+#### Focus visible
+
+- Assurez-vous que le focus clavier est clairement visible
+- N'utilisez pas `outline: none` sans fournir une alternative
+- Testez la navigation au clavier
+
+### Points d'attention
+
+- **Évitez trop d'éléments** : Un groupe trop long peut être difficile à naviguer
+- **Fournissez des labels clairs** : Chaque élément doit avoir un label descriptif
+- **Testez avec des lecteurs d'écran** : Vérifiez que la navigation est logique
+- **Assurez-vous que les flèches sont accessibles** : Elles doivent être utilisables au clavier
+- **Considérez l'ordre de tabulation** : L'ordre doit être logique et prévisible
+- **État de sélection clair** : L'utilisateur doit toujours savoir quel(s) élément(s) est/sont sélectionné(s)