@cnamts/synapse 1.0.27 → 1.1.1

package/src/composantsVuetify/VSlideGroup/v-slide-group.stories.ts

@@ -0,0 +1,463 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSlideGroup, VSlideGroupItem, VCard, VCardText, VBtn, VChip } from 'vuetify/components'
+import { ref } from 'vue'
+
+const meta: Meta<typeof VSlideGroup> = {
+	title: 'Composants/Composants Vuetify/VSlideGroup',
+	tags: ['!dev'],
+	component: VSlideGroup,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) => {
+					const templateMatch = src.match(/template:\s*`([\s\S]*?)`/)
+					if (templateMatch && templateMatch[1]) {
+						return templateMatch[1]
+							.trim()
+							.replace(/<VSlideGroup/g, '<v-slide-group')
+							.replace(/<\/VSlideGroup>/g, '</v-slide-group>')
+							.replace(/<VSlideGroupItem/g, '<v-slide-group-item')
+							.replace(/<\/VSlideGroupItem>/g, '</v-slide-group-item>')
+							.replace(/<VCard/g, '<v-card')
+							.replace(/<\/VCard>/g, '</v-card>')
+							.replace(/<VCardText/g, '<v-card-text')
+							.replace(/<\/VCardText>/g, '</v-card-text>')
+							.replace(/<VBtn/g, '<v-btn')
+							.replace(/<\/VBtn>/g, '</v-btn>')
+							.replace(/<VIcon/g, '<v-icon')
+							.replace(/<\/VIcon>/g, '</v-icon>')
+							.replace(/<VChip/g, '<v-chip')
+							.replace(/<\/VChip>/g, '</v-chip>')
+					}
+					return src
+				},
+			},
+		},
+	},
+	argTypes: {
+		selectedClass: {
+			control: { type: 'text' },
+			description: 'Classe CSS appliquée aux éléments sélectionnés',
+		},
+		showArrows: {
+			control: { type: 'boolean' },
+			description: 'Affiche les flèches de navigation',
+		},
+		centerActive: {
+			control: { type: 'boolean' },
+			description: 'Centre l\'élément actif',
+		},
+		multiple: {
+			control: { type: 'boolean' },
+			description: 'Permet la sélection multiple',
+		},
+		mandatory: {
+			control: { type: 'boolean' },
+			description: 'Rend la sélection obligatoire',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VSlideGroup>
+
+export const Default: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="n in 15" :key="n">
+                    <VCard
+                        color="primary"
+                        class="ma-2"
+                        height="150"
+                        width="150"
+                        :ripple="false"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h4">
+                            {{ n }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="n in 15" :key="n">
+            <v-card
+                color="primary"
+                class="ma-2"
+                height="150"
+                width="150"
+                :ripple="false"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h4">
+                    {{ n }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>`,
+			},
+		},
+	},
+}
+
+export const WithChips: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VChip },
+		setup() {
+			const tags = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8']
+			return { args, tags }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="(tag, index) in tags" :key="index" v-slot="{ isSelected, toggle }">
+                    <VChip
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ tag }}
+                    </VChip>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		mandatory: false,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="(tag, index) in tags" :key="index" v-slot="{ isSelected, toggle }">
+            <v-chip
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ tag }}
+            </v-chip>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>
+
+<script setup lang="ts">
+const tags = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8']
+</script>`,
+			},
+		},
+	},
+}
+
+export const CenterActive: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VBtn },
+		setup() {
+			const model = ref(3)
+			const items = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche']
+			return { args, model, items }
+		},
+		template: `
+            <VSlideGroup v-model="model" v-bind="args">
+                <VSlideGroupItem v-for="(item, index) in items" :key="index" :value="index" v-slot="{ isSelected, toggle }">
+                    <VBtn
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ item }}
+                    </VBtn>
+                </VSlideGroupItem>
+            </VSlideGroup>
+            <div class="text-center mt-4">
+                <p class="text-body-2">Jour sélectionné : {{ items[model] }}</p>
+            </div>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		centerActive: true,
+		mandatory: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group v-model="model" :show-arrows="true" :center-active="true" :mandatory="true">
+        <v-slide-group-item v-for="(item, index) in items" :key="index" :value="index" v-slot="{ isSelected, toggle }">
+            <v-btn
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ item }}
+            </v-btn>
+        </v-slide-group-item>
+    </v-slide-group>
+    <div class="text-center mt-4">
+        <p class="text-body-2">Jour sélectionné : {{ items[model] }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const model = ref(3)
+const items = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche']
+</script>`,
+			},
+		},
+	},
+}
+
+export const Misc: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VChip },
+		setup() {
+			const model = ref(0)
+			const items = [
+				{ text: 'Aperitifs', value: 'aperitifs' },
+				{ text: 'Appetizers', value: 'appetizers' },
+				{ text: 'Cocktails', value: 'cocktails' },
+				{ text: 'Dinner', value: 'dinner' },
+				{ text: 'Wines by the Bottle', value: 'wines_bottle' },
+				{ text: 'Wines by the Glass', value: 'wines_glass' },
+			]
+			return { args, model, items }
+		},
+		template: `
+            <VSlideGroup v-model="model" v-bind="args" selected-class="bg-primary">
+                <VSlideGroupItem
+                    v-for="(item, index) in items"
+                    :key="item.value"
+                    :value="index"
+                    v-slot="{ isSelected, toggle }"
+                >
+                    <VChip
+                        class="ma-2"
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ item.text }}
+                    </VChip>
+                </VSlideGroupItem>
+            </VSlideGroup>
+
+            <div class="text-center mt-4">
+                <p class="text-body-2 text-medium-emphasis">Selected: {{ items[model]?.text || 'None' }}</p>
+            </div>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		centerActive: true,
+		mandatory: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple de menu de navigation avec sélection et affichage de la valeur sélectionnée.',
+			},
+			source: {
+				code: `<template>
+    <v-slide-group v-model="model" :show-arrows="true" :center-active="true" :mandatory="true" selected-class="bg-primary">
+        <v-slide-group-item
+            v-for="(item, index) in items"
+            :key="item.value"
+            :value="index"
+            v-slot="{ isSelected, toggle }"
+        >
+            <v-chip
+                class="ma-2"
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ item.text }}
+            </v-chip>
+        </v-slide-group-item>
+    </v-slide-group>
+
+    <div class="text-center mt-4">
+        <p class="text-body-2 text-medium-emphasis">Selected: {{ items[model]?.text || 'None' }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const model = ref(0)
+const items = [
+    { text: 'Aperitifs', value: 'aperitifs' },
+    { text: 'Appetizers', value: 'appetizers' },
+    { text: 'Cocktails', value: 'cocktails' },
+    { text: 'Dinner', value: 'dinner' },
+    { text: 'Wines by the Bottle', value: 'wines_bottle' },
+    { text: 'Wines by the Glass', value: 'wines_glass' },
+]
+</script>`,
+			},
+		},
+	},
+}
+
+export const MultipleSelection: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="n in 10" :key="n" v-slot="{ isSelected, toggle }">
+                    <VCard
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        height="120"
+                        width="120"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h5">
+                            {{ n }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		multiple: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true" :multiple="true">
+        <v-slide-group-item v-for="n in 10" :key="n" v-slot="{ isSelected, toggle }">
+            <v-card
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                height="120"
+                width="120"
+                :ripple="false"
+                @click="toggle"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h5">
+                    {{ n }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>`,
+			},
+		},
+	},
+}
+
+export const CustomCards: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			const categories = [
+				{ title: 'Catégorie 1', color: 'primary' },
+				{ title: 'Catégorie 2', color: 'secondary' },
+				{ title: 'Catégorie 3', color: 'success' },
+				{ title: 'Catégorie 4', color: 'info' },
+				{ title: 'Catégorie 5', color: 'warning' },
+				{ title: 'Catégorie 6', color: 'error' },
+			]
+			return { args, categories }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="(category, index) in categories" :key="index" v-slot="{ isSelected, toggle }">
+                    <VCard
+                        :color="category.color"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        :elevation="isSelected ? 4 : 0"
+                        class="ma-2"
+                        height="180"
+                        width="180"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h6 text-center">
+                            {{ category.title }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		mandatory: false,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="(category, index) in categories" :key="index" v-slot="{ isSelected, toggle }">
+            <v-card
+                :color="category.color"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                :elevation="isSelected ? 4 : 0"
+                class="ma-2"
+                height="180"
+                width="180"
+                :ripple="false"
+                @click="toggle"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h6 text-center">
+                    {{ category.title }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>
+
+<script setup lang="ts">
+const categories = [
+    { title: 'Catégorie 1', color: 'primary' },
+    { title: 'Catégorie 2', color: 'secondary' },
+    { title: 'Catégorie 3', color: 'success' },
+    { title: 'Catégorie 4', color: 'info' },
+    { title: 'Catégorie 5', color: 'warning' },
+    { title: 'Catégorie 6', color: 'error' },
+]
+</script>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VStepper/VStepper.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VStepperStories from './v-stepper.stories'
+
+<Meta title="Composants/Composants Vuetify/VStepper" />
+
+<div className="header">
+    <h1>VStepper</h1>
+Ce composant utilise directement le composant natif `v-stepper` 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-stepper/#props).
+</div>
+
+## Primary
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.Primary} />
+</div>
+
+## Primary – Alt Labels
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryAltLabels} />
+</div>
+
+## Primary – Flat
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryFlat} />
+</div>
+
+## Primary – Désactivé
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryDisabled} />
+</div>
+
+## Primary – Avec icônes
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryWithIcons} />
+</div>
+
+## Primary – Avec erreur
+
+<div style={{ padding: '24px' }}>
+  <Canvas of={VStepperStories.PrimaryWithError} />
+</div>
+
+## Options disponibles
+
+- `alt-labels` – Affiche les labels en dessous des étapes
+- `flat` – Supprime l'élévation du stepper
+- `disabled` – Désactive toutes les interactions
+- `icon` – Icône personnalisée pour chaque étape
+- `complete` – Marque une étape comme complétée
+- `error` – Marque une étape en erreur
+- Personnalisation avec slots (actions, item, etc.)