@cnamts/synapse 1.0.27 → 1.1.0

package/src/composables/useFilterable/useFilterable.ts

@@ -1,4 +1,4 @@
-import { ref, watch, type Ref } from 'vue'
+import { ref, toRaw, watch, type Ref } from 'vue'
 import type { ChipItem } from '@/components/ChipList/types'
 import slugify from 'slugify'
 import { deepCopy } from '@/utils/functions/deepCopy'
@@ -13,11 +13,11 @@ export type FilterItem = {
 
 export type FilterProp = FilterItem[]
 
-export default function useFilterable(model: Ref<FilterProp>, emits) {
+export default function useFilterable(model: Ref<FilterProp>) {
 	const filters = ref<FilterProp>([])
 
 	watch(model, (newFilters) => {
-		filters.value = deepCopy(newFilters)
+		filters.value = deepCopy(toRaw(newFilters))
 	}, { deep: true, immediate: true })
 
 	function getFilterCount(filter: FilterItem): number {
@@ -172,7 +172,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 				: undefined
 
 			filter.value = newValue
-			updateValue()
 
 			return
 		}
@@ -187,7 +186,6 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 
 			if (isPeriodField) {
 				filter.value = undefined
-				updateValue()
 
 				return
 			}
@@ -197,7 +195,7 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			if (hasSelectStructure) {
 				// For single select objects, clear the entire value
 				filter.value = undefined
-				updateValue()
+
 				return
 			}
 
@@ -205,29 +203,20 @@ export default function useFilterable(model: Ref<FilterProp>, emits) {
 			delete typedValue[chipValue]
 			filter.value = typedValue
 		}
-		updateValue()
 	}
 
 	function resetFilter(filter: FilterItem): void {
 		filter.value = undefined
-		updateValue()
 	}
 
 	function resetAllFilters(): void {
-		filters.value.forEach((filter) => {
-			filter.value = undefined
+		filters.value.forEach((filter: FilterItem) => {
+			resetFilter(filter)
 		})
-
-		updateValue()
-	}
-
-	function updateValue(): void {
-		emits('update:modelValue', filters.value)
 	}
 
 	return {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		resetAllFilters,

package/src/composables/useFormFieldErrorHandling.ts

@@ -38,7 +38,7 @@ export const useFormFieldErrorHandling = (
 	emitUpdate?: () => void,
 ): UseFormFieldErrorHandlingReturn => {
 	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages ?? true,
+		showSuccessMessages: props.showSuccessMessages ?? false,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling ?? false,
 	})

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

@@ -1,6 +1,6 @@
-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, useValidatableComponent } from '../useFormValidation'
 import type { ValidatableComponent } from '../useFormValidation'
 
@@ -35,6 +35,15 @@ const ParentWithForm = defineComponent({
 })
 
 describe('useFormValidation', () => {
+	beforeEach(() => {
+		lastChildApi = null
+		vi.clearAllMocks()
+	})
+
+	afterEach(async () => {
+		await flushPromises()
+	})
+
 	it('registers components and avoids duplicates', () => {
 		lastChildApi = null
 

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,14 @@ Le composant `v-card` propose plusieurs variantes de style :
 
 <Canvas of={VCardStories.Disabled} />
 
+### Avec Image
+
+<Canvas of={VCardStories.WithImage} />
+
+### Customization
+
+<Canvas of={VCardStories.WithCustomActions} />
+
 ## 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 } from 'vuetify/components'
 import { VBtn } from 'vuetify/components'
 
 const meta: Meta<typeof VCard> = {
@@ -277,3 +277,193 @@ 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>`,
+			},
+		},
+	},
+}

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.)