@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/UserMenuBtn/UserMenuBtn.mdx

@@ -19,7 +19,6 @@ import * as UserMenuBtnStories from './UserMenuBtn.stories';
 <Source dark code={`
   <script setup lang="ts">
   import { UserMenuBtn } from '@cnamts/synapse';
-import '../../stories/styles/shared.css';
 
   const menuItems = [
     { text: 'Administration', value: 'Administration' },

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -720,3 +720,180 @@ export const Slot: Story = {
 		}
 	},
 }
+
+export const WithPsInfo: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <UserMenuBtn
+        v-model="selected"
+        :hide-user-icon="false"
+        :hide-logout-btn="true"
+        :is-mobile-view="true"
+    >
+        <template #default>
+            <div class="pa-4">
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Nom</div>
+                    <div class="text-body-2">{{ userName }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Profil</div>
+                    <div class="text-body-2">{{ profil }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">RPPS</div>
+                    <div class="text-body-2">{{ rpps }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">ADELI</div>
+                    <div class="text-body-2">{{ adeli }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Email</div>
+                    <div class="text-body-2">{{ email }}</div>
+                </div>
+                <p class="mt-6 mb-0 text-caption">
+                    Dernière connexion : {{ lastConnexion }}
+                </p>
+            </div>
+
+            <div class="d-flex bg-primary-lighten-3" style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;">
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleAccount"
+                >
+                    Mon Compte
+                </v-btn>
+
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleLogout"
+                >
+                    Déconnexion
+                </v-btn>
+            </div>
+        </template>
+    </UserMenuBtn>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+    import { ref } from 'vue'
+    import { UserMenuBtn } from '@cnamts/synapse'
+
+    const selected = ref(null)
+    const userName = ref('userName')
+    const profil = ref('profil')
+    const rpps = ref('RPPS')
+    const adeli = ref('ADELI')
+    const email = ref('email')
+    const lastConnexion = ref('01/01/2024')
+
+    const handleAccount = () => {
+        console.log('Mon Compte clicked')
+    }
+
+    const handleLogout = () => {
+        console.log('Déconnexion clicked')
+    }
+</script>`,
+			},
+		],
+	},
+	args: {
+		modelValue: null,
+		hideLogoutBtn: true,
+		hideUserIcon: false,
+		isMobileView: true,
+		vuetifyOptions: undefined,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				const userDetails = {
+					userName: 'John Doe',
+					profil: 'Médecin généraliste',
+					rpps: 'RPPS',
+					adeli: 'ADELI',
+					email: 'johndoe@gmail.com',
+					lastConnexion: '01/01/2024',
+				}
+
+				const handleAccount = () => {
+					console.log('Mon Compte clicked')
+				}
+
+				const handleLogout = () => {
+					console.log('Déconnexion clicked')
+				}
+
+				return { args, userDetails, handleAccount, handleLogout }
+			},
+			template: `
+<div style="display: flex; justify-content: center; height: 500px;">
+    <UserMenuBtn v-bind="args">
+        <template #default>
+            <div class="pa-4">
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Nom</div>
+                    <div class="text-body-2">{{ userDetails.userName }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Profil</div>
+                    <div class="text-body-2">{{ userDetails.profil }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">RPPS</div>
+                    <div class="text-body-2">{{ userDetails.rpps }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">ADELI</div>
+                    <div class="text-body-2">{{ userDetails.adeli }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Email</div>
+                    <div class="text-body-2">{{ userDetails.email }}</div>
+                </div>
+                <p class="mt-6 mb-0 text-caption">
+                    Dernière connexion : {{ userDetails.lastConnexion }}
+                </p>
+            </div>
+
+            <div class="d-flex bg-primary-lighten-3" style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;">
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleAccount"
+                >
+                    Mon Compte
+                </v-btn>
+
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleLogout"
+                >
+                    Déconnexion
+                </v-btn>
+            </div>
+        </template>
+    </UserMenuBtn>
+</div>`,
+		}
+	},
+}

package/src/composables/unifyValidation/documentationValidationProps.ts

@@ -18,7 +18,7 @@ function generateBuiltInRuleType(type: 'base' | 'date' | 'number' | 'string' | '
 	}
 }
 
-export function getValidationDocumentation(type: 'date' | 'number' | 'string' | 'all' = 'all') {
+export function getValidationDocumentation(type: 'base' | 'date' | 'number' | 'string' | 'all' = 'all') {
 	const builtInRuleType = generateBuiltInRuleType(type)
 
 	return {

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

@@ -114,6 +114,18 @@ describe('useValidation (unifyValidation)', () => {
 			expect(result.errors.value).toContain('Nouvelle erreur')
 		})
 
+		it('limits the number of errors from errorMessages according to maxErrors', async () => {
+			const errorMessages = ref<string[] | null>(['E1', 'E2', 'E3'])
+			const params = makeParams({ errorMessages, maxErrors: ref(2) })
+			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
+
+			await nextTick()
+			expect(result.errors.value).toHaveLength(2)
+
+			expect(result.errors.value).toEqual(['E1', 'E2'])
+			expect(result.errors.value).not.toContain('E3')
+		})
+
 		it('combines rule validation errors with external errorMessages', async () => {
 			const errorMessages = ref<string[] | null>(['Erreur par défaut'])
 			const params = makeParams({
@@ -125,7 +137,7 @@ describe('useValidation (unifyValidation)', () => {
 
 			const valid = await result.validate()
 			expect(valid).toBe(false)
-			expect(result.errors.value).toEqual(['Erreur règle', 'Erreur par défaut'])
+			expect(result.errors.value).toEqual(['Erreur par défaut', 'Erreur règle'])
 			expect(result.hasError.value).toBe(true)
 		})
 

package/src/composables/unifyValidation/useValidation.ts

@@ -76,40 +76,26 @@ export function useValidation(params: {
 	hasErrorProp?: Ref<boolean>
 	hasWarningProp?: Ref<boolean>
 	hasSuccessProp?: Ref<boolean>
+	maxErrors?: Ref<number>
 } & ({
 	useVuetifyValidation: true
 	rules: Ref<VuetifyValidationRule[] | undefined>
 	customRules?: never
 	customWarningRules?: never
 	customSuccessRules?: never
-	maxErrors?: Ref<number>
 } | {
 	useVuetifyValidation: false
 	customRules: Ref<SyValidationRule[]>
 	customWarningRules?: Ref<SyValidationRule[]>
 	customSuccessRules?: Ref<SyValidationRule[]>
 	rules?: never
-	maxErrors?: Ref<number>
 } | {
 	useVuetifyValidation: Ref<boolean>
 	customRules: Ref<SyValidationRule[]>
 	customWarningRules?: Ref<SyValidationRule[]>
 	customSuccessRules?: Ref<SyValidationRule[]>
 	rules: Ref<VuetifyValidationRule[] | undefined>
-	maxErrors?: Ref<number>
 })) {
-	if (params.disableErrorHandling.value) {
-		return {
-			errors: computed(() => params.errorMessages?.value || []),
-			warnings: computed(() => params.warningMessages?.value || []),
-			successes: computed(() => params.successMessages?.value || []),
-			hasError: computed(() => (params.errorMessages?.value?.length ?? 0) > 0 || (params.hasErrorProp?.value ?? false)),
-			hasWarning: computed(() => (params.warningMessages?.value?.length ?? 0) > 0 || (params.hasWarningProp?.value ?? false)),
-			hasSuccess: computed(() => params.hasSuccessProp?.value ?? false),
-			validate: async () => true,
-			clearValidation: () => {},
-		}
-	}
 	const vuetifyErrors = ref<string[]>([])
 	const customErrors = ref<string[]>([])
 	const innerWarnings = ref<string[]>([])
@@ -127,7 +113,7 @@ export function useValidation(params: {
 			computed(() => params.errorMessages?.value || []),
 			params.focused,
 			params.maxErrors,
-			params.label,
+			computed(() => toValue(params.useVuetifyValidation) ? params.label?.value : undefined),
 			params.label,
 			params.readonly,
 			computed(() => params.isValidateOnBlur.value ? 'blur' : 'input'),
@@ -173,27 +159,44 @@ export function useValidation(params: {
 	}
 
 	const errors = computed(() => {
-		const allErrors = [...new Set([
-			...vuetifyErrors.value,
-			...customErrors.value,
-			...(params.errorMessages?.value || []),
-		])]
-		// Plafonne le nombre d'erreurs affichées (maxErrors, défaut 1), tous modes confondus.
+		const errorslist = [...params.errorMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			errorslist.push(...vuetifyErrors.value)
+			errorslist.push(...customErrors.value)
+		}
+
 		const max = params.maxErrors?.value
-		return max && max > 0 ? allErrors.slice(0, max) : allErrors
+		return max && max > 0 ? [...new Set(errorslist)].slice(0, max) : [...new Set(errorslist)]
+	})
+
+	const warnings = computed(() => {
+		const warningsList = [...params.warningMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			warningsList.push(...innerWarnings.value)
+		}
+		const max = params.maxErrors?.value
+		return max && max > 0 ? [...new Set(warningsList)].slice(0, max) : [...new Set(warningsList)]
+	})
+	const successes = computed(() => {
+		const successesList = [...params.successMessages?.value || []]
+		if (toValue(params.disableErrorHandling) !== true) {
+			successesList.push(...innerSuccesses.value)
+		}
+		const max = params.maxErrors?.value
+		return max && max > 0 ? [...new Set(successesList)].slice(0, max) : [...new Set(successesList)]
 	})
-	const warnings = computed(() => [...new Set([
-		...innerWarnings.value,
-		...(params.warningMessages?.value || []),
-	])])
-	const successes = computed(() => [...new Set([
-		...(params.showSuccessMessages.value ? innerSuccesses.value : []),
-		...(params.successMessages?.value || []),
-	])])
 	const internalHasSuccess = computed(() => customValidator.hasSuccess.value)
 
-	const hasError = computed(() => errors.value.length > 0 || params.hasErrorProp?.value)
-	const hasWarning = computed(() => warnings.value.length > 0 || params.hasWarningProp?.value)
+	const hasError = computed(() => errors.value.length > 0 || Boolean(params.hasErrorProp?.value))
+	const hasWarning = computed(() => warnings.value.length > 0 || Boolean(params.hasWarningProp?.value))
+
+	const state = computed(() => {
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return 'default'
+	})
+
 	// TODO: vérifier si c'est la meilleure approche pour supprimer le succès en mode Vuetify
 	const hasSuccess = computed(() => {
 		if (toValue(params.useVuetifyValidation)) {
@@ -218,6 +221,7 @@ export function useValidation(params: {
 		hasError,
 		hasWarning,
 		hasSuccess,
+		state,
 		validate,
 		clearValidation,
 	}

package/src/composantsVuetify/VCard/VCard.mdx

@@ -59,6 +59,10 @@ Le composant `v-card` propose plusieurs variantes de style :
 
 <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, VDivider } from 'vuetify/components'
+import { VCard, VCardTitle, VCardText, VCardActions, VDivider, VAvatar } from 'vuetify/components'
 import { VBtn } from 'vuetify/components'
 
 const meta: Meta<typeof VCard> = {
@@ -467,3 +467,95 @@ import { VCard, VCardTitle, VCardText, VDivider, VBtn } from 'vuetify/components
 		},
 	},
 }
+
+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/).