@cnamts/synapse 1.1.0 → 1.1.1

package/src/composantsVuetify/VCarousel/v-carousel.stories.ts

@@ -0,0 +1,531 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VCarousel, VCarouselItem, VCard, VCardTitle, VCardText, VBtn } from 'vuetify/components'
+
+const meta: Meta<typeof VCarousel> = {
+	title: 'Composants/Composants Vuetify/VCarousel',
+	component: VCarousel,
+	tags: ['!dev'],
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) =>
+					src
+						.replace(/VCarousel/g, 'v-carousel')
+						.replace(/VCarouselItem/g, 'v-carousel-item'),
+			},
+		},
+	},
+	argTypes: {
+		cycle: {
+			control: { type: 'boolean' },
+			description: 'Active le défilement automatique',
+			table: {
+				defaultValue: { summary: 'false' },
+			},
+		},
+		hideDelimiters: {
+			control: { type: 'boolean' },
+			description: 'Masque les indicateurs de pagination',
+			table: {
+				defaultValue: { summary: 'false' },
+			},
+		},
+		hideDelimiterBackground: {
+			control: { type: 'boolean' },
+			description: 'Masque le fond des indicateurs',
+			table: {
+				defaultValue: { summary: 'false' },
+			},
+		},
+		showArrows: {
+			control: { type: 'select' },
+			options: [true, false, 'hover'],
+			description: 'Affiche les flèches de navigation',
+			table: {
+				defaultValue: { summary: 'true' },
+			},
+		},
+		height: {
+			control: { type: 'text' },
+			description: 'Hauteur du carousel',
+			table: {
+				defaultValue: { summary: '500' },
+			},
+		},
+		interval: {
+			control: { type: 'number' },
+			description: 'Intervalle de défilement automatique (ms)',
+			table: {
+				defaultValue: { summary: '6000' },
+			},
+		},
+		continuous: {
+			control: { type: 'boolean' },
+			description: 'Continue le défilement en boucle',
+			table: {
+				defaultValue: { summary: 'true' },
+			},
+		},
+		progress: {
+			control: { type: 'select' },
+			options: [false, 'primary', 'secondary', 'success', 'info', 'warning', 'error'],
+			description: 'Affiche une barre de progression',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VCarousel>
+
+export const Primary: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const colors = ['primary', 'secondary', 'success', 'info', 'warning']
+			return { args, colors }
+		},
+		template: `
+            <VCarousel v-bind="args" class="carousel-white-controls">
+                <VCarouselItem
+                    v-for="(color, i) in colors"
+                    :key="i"
+                    :color="color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">Slide {{ i + 1 }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400">
+    <v-carousel-item
+        v-for="(color, i) in colors"
+        :key="i"
+        :color="color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">Slide {{ i + 1 }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const WithCycle: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const slides = [
+				{ title: 'Slide 1', color: 'primary' },
+				{ title: 'Slide 2', color: 'secondary' },
+				{ title: 'Slide 3', color: 'success' },
+			]
+			return { args, slides }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(slide, i) in slides"
+                    :key="i"
+                    :color="slide.color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">{{ slide.title }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+		cycle: true,
+		interval: 3000,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400" cycle :interval="3000">
+    <v-carousel-item
+        v-for="(slide, i) in slides"
+        :key="i"
+        :color="slide.color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">{{ slide.title }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const HideDelimiters: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const colors = ['primary', 'secondary', 'success']
+			return { args, colors }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(color, i) in colors"
+                    :key="i"
+                    :color="color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">Slide {{ i + 1 }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+		hideDelimiters: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400" hide-delimiters>
+    <v-carousel-item
+        v-for="(color, i) in colors"
+        :key="i"
+        :color="color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">Slide {{ i + 1 }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const ShowArrowsOnHover: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const colors = ['primary', 'secondary', 'success', 'info']
+			return { args, colors }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(color, i) in colors"
+                    :key="i"
+                    :color="color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">Slide {{ i + 1 }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+		showArrows: 'hover',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400" show-arrows="hover">
+    <v-carousel-item
+        v-for="(color, i) in colors"
+        :key="i"
+        :color="color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">Slide {{ i + 1 }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const WithProgress: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const colors = ['primary', 'secondary', 'success']
+			return { args, colors }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(color, i) in colors"
+                    :key="i"
+                    :color="color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">Slide {{ i + 1 }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+		cycle: true,
+		progress: 'primary',
+		interval: 4000,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400" cycle progress="primary" :interval="4000">
+    <v-carousel-item
+        v-for="(color, i) in colors"
+        :key="i"
+        :color="color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">Slide {{ i + 1 }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const WithImages: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const images = [
+				'https://picsum.photos/800/400?random=1',
+				'https://picsum.photos/800/400?random=2',
+				'https://picsum.photos/800/400?random=3',
+			]
+			return { args, images }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(image, i) in images"
+                    :key="i"
+                    :src="image"
+                    cover
+                />
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 400,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="400">
+    <v-carousel-item
+        v-for="(image, i) in images"
+        :key="i"
+        :src="image"
+        cover
+    />
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const CustomHeight: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem },
+		setup() {
+			const colors = ['primary', 'secondary', 'success']
+			return { args, colors }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem
+                    v-for="(color, i) in colors"
+                    :key="i"
+                    :color="color"
+                >
+                    <div class="d-flex fill-height justify-center align-center">
+                        <div class="text-h2">Slide {{ i + 1 }}</div>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 600,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-carousel :height="600">
+    <v-carousel-item
+        v-for="(color, i) in colors"
+        :key="i"
+        :color="color"
+    >
+        <div class="d-flex fill-height justify-center align-center">
+            <div class="text-h2">Slide {{ i + 1 }}</div>
+        </div>
+    </v-carousel-item>
+</v-carousel>`,
+			},
+		},
+	},
+}
+
+export const WithCustomSlots: Story = {
+	render: args => ({
+		components: { VCarousel, VCarouselItem, VCard, VCardTitle, VCardText, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCarousel v-bind="args">
+                <VCarouselItem>
+                    <div class="d-flex fill-height justify-center align-center pa-4">
+                        <VCard style="width: calc(100% - 112px);">
+                            <VCardTitle>Slide 1</VCardTitle>
+                            <VCardText>
+                                <p class="mb-0">
+                                    Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                                    à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                                    faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                                    un texte en faux latin, le Lorem ipsum ou Lipsum.
+                                </p>
+                                <VBtn color="primary" class="mt-2">
+                                    Bouton slide 1
+                                </VBtn>
+                            </VCardText>
+                        </VCard>
+                    </div>
+                </VCarouselItem>
+
+                <VCarouselItem>
+                    <div class="d-flex fill-height justify-center align-center pa-4">
+                        <VCard style="width: calc(100% - 112px);">
+                            <VCardTitle>Slide 2</VCardTitle>
+                            <VCardText>
+                                <p class="mb-0">
+                                    Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                                    à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                                    faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                                    un texte en faux latin, le Lorem ipsum ou Lipsum.
+                                </p>
+                                <VBtn color="primary" class="mt-2">
+                                    Bouton slide 2
+                                </VBtn>
+                            </VCardText>
+                        </VCard>
+                    </div>
+                </VCarouselItem>
+
+                <VCarouselItem>
+                    <div class="d-flex fill-height justify-center align-center pa-4">
+                         <VCard style="width: calc(100% - 112px);">
+                            <VCardTitle>Slide 3</VCardTitle>
+                            <VCardText>
+                                <p class="mb-0">
+                                    Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                                    à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                                    faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                                    un texte en faux latin, le Lorem ipsum ou Lipsum.
+                                </p>
+                                <VBtn color="primary" class="mt-2">
+                                    Bouton slide 3
+                                </VBtn>
+                            </VCardText>
+                        </VCard>
+                    </div>
+                </VCarouselItem>
+            </VCarousel>
+        `,
+	}),
+	args: {
+		height: 500,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-carousel :height="500" show-arrows="hover">
+        <v-carousel-item>
+            <div class="d-flex fill-height justify-center align-center pa-4">
+                 <v-card style="width: calc(100% - 112px);">
+                    <v-card-title>Slide 1</v-card-title>
+                    <v-card-text>
+                        <p class="mb-0">
+                            Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                            à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                            faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                            un texte en faux latin, le Lorem ipsum ou Lipsum.
+                        </p>
+                        <v-btn color="primary" class="mt-2">
+                            Bouton slide 1
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </div>
+        </v-carousel-item>
+
+        <v-carousel-item>
+            <div class="d-flex fill-height justify-center align-center pa-4">
+                 <v-card style="width: calc(100% - 112px);">
+                    <v-card-title>Slide 2</v-card-title>
+                    <v-card-text>
+                        <p class="mb-0">
+                            Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                            à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                            faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                            un texte en faux latin, le Lorem ipsum ou Lipsum.
+                        </p>
+                        <v-btn color="primary" class="mt-2">
+                            Bouton slide 2
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </div>
+        </v-carousel-item>
+
+        <v-carousel-item>
+            <div class="d-flex fill-height justify-center align-center pa-4">
+                 <v-card style="width: calc(100% - 112px);">
+                    <v-card-title>Slide 3</v-card-title>
+                    <v-card-text>
+                        <p class="mb-0">
+                            Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+                            à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+                            faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+                            un texte en faux latin, le Lorem ipsum ou Lipsum.
+                        </p>
+                        <v-btn color="primary" class="mt-2">
+                            Bouton slide 3
+                        </v-btn>
+                    </v-card-text>
+                </v-card>
+            </div>
+        </v-carousel-item>
+    </v-carousel>
+</template>
+
+<script setup lang="ts">
+import { VCarousel, VCarouselItem, VCard, VCardTitle, VCardText, VBtn } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VNavigationDrawer/VNavgationDrawer.mdx

@@ -0,0 +1,53 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VNavigationDrawerStories from './v-navigation-drawer.stories'
+
+<Meta title="Composants/Composants Vuetify/VNavigationDrawer" />
+
+<div className="header">
+    <h1>VNavigationDrawer</h1>
+Ce composant utilise directement le composant natif `v-navigation-drawer` 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-navigation-drawer/#props).
+</div>
+
+### Composants associés
+
+- `v-list` : Liste des éléments de navigation
+- `v-list-item` : Élément individuel de la liste
+- `v-list-item-title` : Titre de l'élément
+- `v-divider` : Séparateur visuel
+
+## Variantes
+
+Le composant `v-navigation-drawer` propose plusieurs variantes de style :
+
+### Default
+
+<Canvas of={VNavigationDrawerStories.Default} />
+
+### Permanent
+
+Drawer toujours visible, non repliable.
+
+<Canvas of={VNavigationDrawerStories.Permanent} />
+
+### Temporary
+
+Drawer temporaire qui se superpose au contenu.
+
+<Canvas of={VNavigationDrawerStories.Temporary} />
+
+### With Custom Content
+
+Drawer avec contenu personnalisé.
+
+<Canvas of={VNavigationDrawerStories.WithCustomContent} />
+
+## Props principales
+
+- **modelValue** : Contrôle l'ouverture/fermeture du drawer
+- **rail** : Active le mode rail (icônes seulement)
+- **permanent** : Rend le drawer permanent
+- **temporary** : Rend le drawer temporaire
+- **location** : Position du drawer (`start`, `end`, `left`, `right`, `top`, `bottom`)
+- **width** : Largeur du drawer
+- **color** : Couleur de fond du drawer