@cnamts/synapse 1.0.27 → 1.1.1

package/src/composables/validation/tests/useValidatable.spec.ts

@@ -1,14 +1,21 @@
 /* eslint-disable vue/one-component-per-file */
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { defineComponent, h } from 'vue'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { useFormValidation } from '../useFormValidation'
 import { useValidatable } from '../useValidatable'
 
 type FormValidationApi = ReturnType<typeof useFormValidation>
 
 describe('useValidatable', () => {
-	it('registers component on mount and unregisters on unmount', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+	})
+	it('registers component on mount and unregisters on unmount', async () => {
 		const ChildComponent = defineComponent({
 			name: 'ValidatableChild',
 			setup() {
@@ -63,10 +70,11 @@ describe('useValidatable', () => {
 		expect(childVm.reset).toHaveBeenCalledTimes(1)
 
 		wrapper.unmount()
+		await flushPromises()
 		expect(form.validatableComponents.value).toHaveLength(0)
 	})
 
-	it('does nothing harmful when no form provider is present', () => {
+	it('does nothing harmful when no form provider is present', async () => {
 		const OrphanComponent = defineComponent({
 			name: 'OrphanValidatable',
 			setup() {
@@ -80,11 +88,13 @@ describe('useValidatable', () => {
 			},
 		})
 
-		const mountOrphan = () => {
+		const mountOrphan = async () => {
 			const wrapper = mount(OrphanComponent)
+			await flushPromises()
 			wrapper.unmount()
+			await flushPromises()
 		}
 
-		expect(mountOrphan).not.toThrow()
+		await expect(mountOrphan()).resolves.not.toThrow()
 	})
 })

package/src/composables/validation/tests/useValidation.spec.ts

@@ -14,7 +14,7 @@ describe('useValidation', () => {
 	})
 
 	it('should handle basic validation rules', async () => {
-		const validation = useValidation()
+		const validation = useValidation({ showSuccessMessages: true })
 		const rules = [{
 			type: 'required',
 			options: {
@@ -206,7 +206,7 @@ describe('useValidation', () => {
 
 	it('should discard a slow async validation when a newer one is triggered after', async () => {
 		vi.useFakeTimers()
-		const validation = useValidation()
+		const validation = useValidation({ showSuccessMessages: true })
 
 		// Slow rule: resolves after 100ms with an error
 		const slowRules = [{

package/src/composables/validation/useValidation.ts

@@ -55,7 +55,7 @@ export interface ValidationResult {
  * @param options Options de configuration de la validation
  * @returns Un objet contenant les états et méthodes de validation
  */
-export function useValidation(options: ValidationOptions = { showSuccessMessages: true }) {
+export function useValidation(options: ValidationOptions = { showSuccessMessages: false }) {
 	const errors = ref<string[]>([])
 	const warnings = ref<string[]>([])
 	const successes = ref<string[]>([])

package/src/composantsVuetify/VCard/VCard.mdx

@@ -51,6 +51,18 @@ Le composant `v-card` propose plusieurs variantes de style :
 
 <Canvas of={VCardStories.Disabled} />
 
+### Avec Image
+
+<Canvas of={VCardStories.WithImage} />
+
+### Customization
+
+<Canvas of={VCardStories.WithCustomActions} />
+
+### With Number
+
+<Canvas of={VCardStories.WithNumber} />
+
 ## Accessibilité
 
 - Utilisez des titres descriptifs pour les cartes

package/src/composantsVuetify/VCard/v-card.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { VCard, VCardTitle, VCardText, VCardActions } from 'vuetify/components'
+import { VCard, VCardTitle, VCardText, VCardActions, VDivider, VAvatar } from 'vuetify/components'
 import { VBtn } from 'vuetify/components'
 
 const meta: Meta<typeof VCard> = {
@@ -277,3 +277,285 @@ export const Disabled: Story = {
 		},
 	},
 }
+
+export const WithImage: Story = {
+	render: args => ({
+		components: { VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard 
+                v-bind="args" 
+                variant="outlined"
+                style="max-width: 250px; border: 2px solid #E0E0E0; padding: 2rem 1rem; cursor: pointer; transition: transform 0.2s ease-in-out;"
+                class="d-flex flex-column align-center text-center"
+                @mouseenter="$event.currentTarget.style.transform = 'translateY(-8px)'"
+                @mouseleave="$event.currentTarget.style.transform = 'translateY(0)'"
+            >
+                <div 
+                    style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;"
+                >
+                    <svg 
+                        xmlns="http://www.w3.org/2000/svg" 
+                        viewBox="0 0 24 24" 
+                        width="60" 
+                        height="60"
+                        style="fill: #757575;"
+                        aria-hidden="true"
+                    >
+                        <path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8Z" />
+                    </svg>
+                </div>
+                
+                <VCardText class="pa-0">
+                    <p class="mb-2 text-body-2 font-weight-bold" style="color: #424242;">
+                        Label 1
+                    </p>
+                    <p class="mb-0 text-caption text-uppercase" style="color: #757575; letter-spacing: 0.5px;">
+                        Label 2
+                    </p>
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		elevation: 0,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-card 
+        variant="outlined"
+        :elevation="0"
+        style="max-width: 250px; border: 2px solid #E0E0E0; padding: 2rem 1rem; cursor: pointer; transition: transform 0.2s ease-in-out;"
+        class="d-flex flex-column align-center text-center"
+        @mouseenter="$event.currentTarget.style.transform = 'translateY(-8px)'"
+        @mouseleave="$event.currentTarget.style.transform = 'translateY(0)'"
+    >
+        <div 
+            style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;"
+        >
+            <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                viewBox="0 0 24 24" 
+                width="60" 
+                height="60"
+                style="fill: #757575;"
+                aria-hidden="true"
+            >
+                <path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8Z" />
+            </svg>
+        </div>
+        
+        <v-card-text class="pa-0">
+            <p class="mb-2 text-body-2 font-weight-bold" style="color: #424242;">
+                Label 1
+            </p>
+            <p class="mb-0 text-caption text-uppercase" style="color: #757575; letter-spacing: 0.5px;">
+                Label 2
+            </p>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { VCard, VCardText } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}
+
+export const WithCustomActions: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn, VDivider },
+		setup() {
+			return { args }
+		},
+		template: `
+            <div class="w-100">
+                <VCard v-bind="args" variant="outlined" class="mb-6" style="max-width: 100%; border-color: #BDBDBD;">
+                    <VCardTitle style="color: #000000;">Titre de la carte</VCardTitle>
+                    <VDivider color="#BDBDBD" thickness="2" style="width: 96%; margin: 0 auto;"/>
+                    <VCardText style="color: #000000;">
+                        Contenu principal
+                    </VCardText>
+                </VCard>
+
+                <div class="d-flex align-center justify-space-between">
+                    <div>
+                        <VBtn 
+                            variant="text" 
+                            color="primary"
+                            class="text-none"
+                        >
+                            Action personnalisée
+                        </VBtn>
+                    </div>
+
+                    <div class="d-flex justify-end">
+                        <VBtn
+                            variant="outlined"
+                            color="primary"
+                            class="mr-2"
+                        >
+                            Annuler
+                        </VBtn>
+
+                        <VBtn
+                            variant="tonal"
+                            color="primary"
+                        >
+                            Confirmer
+                        </VBtn>
+                    </div>
+                </div>
+            </div>
+        `,
+	}),
+	args: {},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <div class="w-100">
+        <v-card class="mb-6" variant="outlined" style="max-width: 100%; border-color: #BDBDBD;">
+            <v-card-title style="color: #000000;">Titre de la carte</v-card-title>
+            <v-divider color="#BDBDBD" :thickness="2" style="width: 96%; margin: 0 auto;"/>
+            <v-card-text style="color: #000000;">
+                Contenu principal
+            </v-card-text>
+        </v-card>
+
+        <div class="d-flex align-center justify-space-between">
+            <div>
+                <v-btn 
+                    variant="text" 
+                    color="primary"
+                    class="text-none"
+                >
+                    Action personnalisée
+                </v-btn>
+            </div>
+
+            <div class="d-flex justify-end">
+                <v-btn
+                    variant="outlined"
+                    color="primary"
+                    class="mr-2"
+                >
+                    Annuler
+                </v-btn>
+
+                <v-btn
+                    variant="tonal"
+                    color="primary"
+                >
+                    Confirmer
+                </v-btn>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VCard, VCardTitle, VCardText, VDivider, VBtn } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}
+
+export const WithNumber: Story = {
+	render: args => ({
+		components: { VCard, VCardText, VAvatar },
+		setup() {
+			return { args }
+		},
+		template: `
+            <div class="w-100">
+				<VCard
+					v-bind="args"
+		            variant="outlined"
+		            class="mb-6"
+		            style="
+					width: 100%;
+					border-color: #BDBDBD;
+					position: relative;
+					overflow: visible;
+					padding-top: 32px;
+				  "
+				>
+					<v-avatar
+						color="primary"
+						variant="outlined"
+			            size="32"
+			            style="
+						position: absolute;
+						background: white;
+						top: 0;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						z-index: 1;
+						"
+					>
+						1
+					</v-avatar>
+
+					<v-card-text>
+						Cette carte est numérotée.
+					</v-card-text>
+				</VCard>
+            </div>
+        `,
+	}),
+	args: {},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+               <div class="w-100">
+				<VCard
+					v-bind="args"
+		            variant="outlined"
+		            class="mb-6"
+		            style="
+					width: 100%;
+					border-color: #BDBDBD;
+					position: relative;
+					overflow: visible;
+					padding-top: 32px;
+				  "
+				>
+					<v-avatar
+						color="primary"
+						variant="outlined"
+			            size="32"
+			            style="
+						position: absolute;
+						background: white;
+						top: 0;
+						left: 50%;
+						transform: translate(-50%, -50%);
+						z-index: 1;
+						"
+					>
+						1
+					</v-avatar>
+
+					<v-card-text>
+						Cette carte est numérotée.
+					</v-card-text>
+				</VCard>
+            </div>
+</template>
+
+<script setup lang="ts">
+import { VCard, VCardText, VAvatar } from 'vuetify/components'
+</script>`,
+			},
+		},
+	},
+}

package/src/composantsVuetify/VCarousel/VCarousel.mdx

@@ -0,0 +1,74 @@
+import { Meta, Canvas, Controls, Description } from '@storybook/blocks'
+import * as VCarouselStories from './v-carousel.stories'
+
+<Meta title="Composants/Composants Vuetify/VCarousel" />
+
+<div className="header">
+    <h1>VCarousel</h1>
+Le composant `v-carousel` est utilisé pour afficher un diaporama d'images ou de contenu. Il offre plusieurs options de personnalisation comme le défilement automatique, les indicateurs de pagination, et les flèches de navigation. Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-carousel/#props).
+</div>
+
+
+## Exemple par défaut
+
+<Canvas of={VCarouselStories.Primary} />
+
+## Variantes
+
+### Avec défilement automatique
+
+Utilisez la prop `cycle` pour activer le défilement automatique et `interval` pour définir la durée entre chaque slide.
+
+<Canvas of={VCarouselStories.WithCycle} />
+
+### Sans indicateurs
+
+Masquez les indicateurs de pagination avec la prop `hide-delimiters`.
+
+<Canvas of={VCarouselStories.HideDelimiters} />
+
+### Flèches au survol
+
+Affichez les flèches uniquement au survol avec `show-arrows="hover"`.
+
+<Canvas of={VCarouselStories.ShowArrowsOnHover} />
+
+### Avec barre de progression
+
+Ajoutez une barre de progression avec la prop `progress`.
+
+<Canvas of={VCarouselStories.WithProgress} />
+
+### Avec images
+
+Le carousel peut afficher des images avec la prop `src` sur `v-carousel-item`.
+
+<Canvas of={VCarouselStories.WithImages} />
+
+### Hauteur personnalisée
+
+Ajustez la hauteur du carousel avec la prop `height`.
+
+<Canvas of={VCarouselStories.CustomHeight} />
+
+### Customization
+
+<Canvas of={VCarouselStories.WithCustomSlots} />
+
+## Accessibilité
+
+- Les flèches de navigation sont accessibles au clavier
+- Les indicateurs de pagination peuvent être navigués avec Tab
+- Support des gestes tactiles sur mobile
+
+## Bonnes pratiques
+
+- ✅ Utilisez des images de taille cohérente pour éviter les sauts visuels
+- ✅ Définissez un `interval` raisonnable (3-6 secondes) pour le défilement automatique
+- ✅ Fournissez des alternatives textuelles pour les images
+- ⚠️ Évitez trop de slides (max 5-7 recommandé)
+- ⚠️ N'utilisez pas `cycle` si le contenu nécessite une lecture attentive
+
+## Documentation Vuetify
+
+Pour plus d'informations, consultez la [documentation officielle de Vuetify](https://vuetifyjs.com/en/components/carousels/).