@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/components/NotificationBar/NotificationBar.vue

@@ -28,8 +28,6 @@
 	const currentNotification = ref<Notification>()
 	const isNotificationVisible = ref(false)
 
-	const isProcessingNotifications = ref(false) // Nouvelle variable pour suivre le traitement
-
 	const hasActionSlot = computed(() => !!instance?.slots.action)
 	const isMobileVersion = computed(() => display.name.value === 'xs')
 	const isTabletVersion = computed(() => display.name.value === 'sm')
@@ -73,91 +71,47 @@
 
 	const smallCloseBtn = computed(() => isMobileVersion.value && !hasLongContent.value && !hasActionSlot.value)
 
-	const setNotification = (notification: Notification) => {
-		currentNotification.value = { ...notification }
-	}
-
-	const processNotificationQueue = async () => {
-		isProcessingNotifications.value = true
+	watch(() => notificationQueue.value.length, async (queueLength) => {
+		if (queueLength > 0 && currentNotification.value === undefined) {
+			openNotification(notificationQueue.value[0])
+		}
+	}, { immediate: true })
 
-		while (notificationQueue.value.length > 0) {
-			const nextNotification = notificationQueue.value[0]
-			setNotification(nextNotification)
-			isNotificationVisible.value = true
+	let timeoutID: ReturnType<typeof setTimeout>
+	function openNotification(notification: Notification) {
+		currentNotification.value = notification
+		isNotificationVisible.value = true
 
-			let timeout = nextNotification.timeout ?? -1
+		if ((notification.timeout || 0) > 0) {
+			timeoutID = setTimeout(() => {
+				isNotificationVisible.value = false
+			}, notification.timeout)
+		}
+	}
 
-			if (timeout <= 0) {
-				// Attend que la notification soit fermée manuellement car pas de timeout
-				await new Promise<void>((resolve) => {
-					const stopWatch = watch(isNotificationVisible, (visible) => {
-						if (!visible) {
-							stopWatch()
-							resolve()
-						}
-					})
-				})
+	watch(isNotificationVisible, async (isVisible) => {
+		if (!isVisible) {
+			// wait for the snackbar close animation to finish
+			await new Promise(resolve => setTimeout(resolve, 100))
+			if (currentNotification.value) {
+				removeNotification(currentNotification.value.id)
 			}
-			else {
-				// Attend la fin du délai du timeout avant de fermer la notification automatiquement
-				await new Promise<void>((resolve) => {
-					const timeoutId = setTimeout(() => {
-						handleClearNotification()
-						resolve()
-					}, timeout)
+			currentNotification.value = undefined
 
-					const stopWatch = watch(isNotificationVisible, (visible) => {
-						if (!visible) {
-							clearTimeout(timeoutId)
-							stopWatch()
-							resolve()
-						}
-					})
-				})
+			if (notificationQueue.value.length > 0) {
+				openNotification(notificationQueue.value[0])
 			}
-
-			// Retire la notification de la file
-			removeNotification(nextNotification.id)
 		}
+	})
 
-		isProcessingNotifications.value = false
-	}
-
-	const handleClearNotification = () => {
+	function showNextNotification() {
+		clearTimeout(timeoutID)
 		isNotificationVisible.value = false
-		if (currentNotification.value) {
-			removeNotification(currentNotification.value.id)
-			currentNotification.value = undefined
-		}
-	}
-
-	const openNotification = (notification: Notification) => {
-		setNotification(notification)
-		isNotificationVisible.value = true
-	}
-
-	const showNextNotification = () => {
-		if (notificationQueue.value.length > 0) {
-			const nextNotification = notificationQueue.value[0]
-			setNotification(nextNotification)
-			isNotificationVisible.value = true
-		}
 	}
 
-	watch(
-		() => notificationQueue.value.length,
-		(newLength) => {
-			if (newLength > 0 && !isProcessingNotifications.value) {
-				processNotificationQueue()
-			}
-		},
-	)
-
 	defineExpose({
 		openNotification,
-		handleClearNotification,
 		showNextNotification,
-		processNotificationQueue,
 		currentNotification,
 		isNotificationVisible,
 		hasActionSlot,
@@ -173,11 +127,12 @@
 </script>
 
 <template>
-	<div v-if="currentNotification">
+	<div>
 		<VSnackbar
 			v-bind="options.snackbar"
 			v-model="isNotificationVisible"
 			role="status"
+			:eager="true"
 			:color="color"
 			:location="props.bottom ? 'bottom' : 'top'"
 			:vertical="hasLongContent"
@@ -195,7 +150,10 @@
 					size="24"
 					aria-hidden="true"
 				/>
-				<p :class="'text-' + contentStyle.contentColor">
+				<p
+					class="sy-notification-content"
+					:class="'text-' + contentStyle.contentColor"
+				>
 					{{ currentNotification?.message }}
 				</p>
 			</div>
@@ -212,7 +170,7 @@
 						:class="{ 'ma-0': smallCloseBtn }"
 						aria-label="Fermer la notification"
 						v-bind="options.btn"
-						@click="handleClearNotification"
+						@click="isNotificationVisible = false"
 					>
 						<template v-if="!smallCloseBtn">
 							{{ closeBtnText }}
@@ -230,18 +188,12 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.vd-notification-content {
-	display: flex;
-	align-items: center;
-}
-
-.vd-notification-bar :deep(.v-snack__wrapper) {
-	padding: 16px;
-	min-width: 0;
-	max-width: none;
+:deep(.v-overlay__content) {
+	max-width: 100%;
 }
 
 :deep(.v-snackbar__content) {
+	width: 100%;
 	padding: tokens.$padding-4 !important;
 }
 
@@ -249,35 +201,6 @@
 	margin-inline-end: 10px;
 }
 
-.vd-notification-bar.v-snackbar--vertical :deep() {
-	.v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
-		width: 100% !important;
-		align-self: auto;
-	}
-
-	.v-snack__wrapper {
-		align-items: stretch;
-		flex-direction: row;
-	}
-
-	.v-snack__action {
-		align-self: stretch;
-		align-items: stretch;
-		flex-direction: column;
-	}
-
-	.v-snackbar__content {
-		margin: 0;
-		width: 100%;
-		display: flex;
-	}
-
-	.vd-notification-content {
-		flex-direction: column;
-		display: flex;
-	}
-}
-
 .long-text :deep(.v-snackbar__actions) {
 	width: 98% !important;
 }
@@ -293,4 +216,9 @@
 .action-section-short-text {
 	justify-content: end !important;
 }
+
+.sy-notification-content {
+	min-width: 0;
+	word-wrap: break-word;
+}
 </style>

package/src/components/NotificationBar/tests/NotificationBar.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
 import { vi } from 'vitest'
 import { mount, shallowMount } from '@vue/test-utils'
 import NotificationBar from '../NotificationBar.vue'
@@ -6,6 +6,7 @@ import { type Notification } from '@/components/NotificationBar/types'
 import { useNotificationService } from '@/services/NotificationService'
 import { nextTick, type Ref, ref } from 'vue'
 import { vuetify } from '@tests/unit/setup'
+import { VDefaultsProvider } from 'vuetify/components'
 
 vi.mock('@/services/NotificationService')
 describe('NotificationBar.vue', () => {
@@ -17,6 +18,7 @@ describe('NotificationBar.vue', () => {
 
 	let notificationServiceMock: NotificationServiceMock
 	beforeEach(() => {
+		vi.useFakeTimers()
 		notificationServiceMock = {
 			notificationQueue: ref([]),
 			addNotification: vi.fn(),
@@ -26,6 +28,11 @@ describe('NotificationBar.vue', () => {
 		(useNotificationService as vi.Mock).mockReturnValue(notificationServiceMock)
 	})
 
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
 	it('should render notification bar', async () => {
 		const notification: Notification = {
 			id: '1',
@@ -67,29 +74,11 @@ describe('NotificationBar.vue', () => {
 		expect(wrapper.vm.color).toBe('#56C271')
 	})
 
-	it('should close notification when handleClearNotification is called', async () => {
-		const notification: Notification = {
-			id: '1',
-			message: 'Test message',
-			type: 'info',
-			timeout: -1,
-			icon: null,
-		}
-		const wrapper = mount(NotificationBar, {
-			props: { notification },
-			global: {
-				plugins: [vuetify],
-			},
+	it('should show the next notification in the queue', async () => {
+		notificationServiceMock.removeNotification = vi.fn(() => {
+			notificationServiceMock.notificationQueue.value.shift()
 		})
-		wrapper.vm.openNotification(notification)
-		wrapper.vm.handleClearNotification()
 
-		await nextTick()
-		expect(wrapper.vm.isNotificationVisible).toBe(false)
-		expect(notificationServiceMock.removeNotification).toHaveBeenCalledWith(notification.id)
-	})
-
-	it('should show the next notification in the queue', async () => {
 		const notification1: Notification = {
 			id: '1',
 			message: 'Test message 1',
@@ -97,26 +86,28 @@ describe('NotificationBar.vue', () => {
 			timeout: -1,
 			icon: null,
 		}
-		const notification2: Notification = {
+		const notification2 = {
 			id: '2',
 			message: 'Test message 2',
 			type: 'success',
 			timeout: -1,
 			icon: null,
-		}
+		} as const satisfies Notification
 		notificationServiceMock.notificationQueue.value = [notification1, notification2]
 
 		const wrapper = mount(NotificationBar, {
-			props: { notification: notification1 },
 			global: {
 				plugins: [vuetify],
 			},
 		})
 
 		wrapper.vm.showNextNotification()
-
 		await nextTick()
-		expect(wrapper.vm.currentNotification).toEqual(notification1)
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(notificationServiceMock.removeNotification).toHaveBeenCalledWith(notification1.id)
+		expect(wrapper.vm.currentNotification).toEqual(notification2)
 		expect(wrapper.vm.isNotificationVisible).toBe(true)
 	})
 
@@ -315,8 +306,14 @@ describe('NotificationBar.vue', () => {
 		expect(removeNotification).toHaveBeenCalledWith(1)
 	})
 
-	it('should handle empty notification queue correctly', async () => {
-		notificationServiceMock.notificationQueue.value = []
+	it('should show the item in queue', async () => {
+		notificationServiceMock.notificationQueue.value = [{
+			id: '1',
+			message: 'Test message',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}]
 
 		const wrapper = mount(NotificationBar, {
 			global: {
@@ -324,9 +321,7 @@ describe('NotificationBar.vue', () => {
 			},
 		})
 
-		await wrapper.vm.processNotificationQueue()
-
-		expect(wrapper.vm.isNotificationVisible).toBe(false)
-		expect(notificationServiceMock.removeNotification).not.toHaveBeenCalled()
+		const provider = wrapper.findComponent(VDefaultsProvider)
+		expect(provider.element.parentElement.textContent).toContain('Test message')
 	})
 })

package/src/components/NotificationBar/tests/__snapshots__/NotificationBar.spec.ts.snap

@@ -2,6 +2,6 @@
 
 exports[`NotificationBar.vue > should render notification bar 1`] = `
 "<div data-v-867cdd3c="" notification="[object Object]">
-  <v-snackbar-stub data-v-867cdd3c="" color="info" width="960px" class="" multiline="false" timer="false" timeout="-1" vertical="false" location="top" rounded="4" tile="false" variant="elevated" absolute="false" attach="false" closeonback="true" contained="false" disabled="false" modelvalue="true" zindex="2000" activatorprops="[object Object]" openonhover="false" closeoncontentclick="false" eager="false" locationstrategy="static" origin="auto" transition="v-snackbar-transition" role="status"></v-snackbar-stub>
+  <v-snackbar-stub data-v-867cdd3c="" color="info" width="960px" class="" multiline="false" timer="false" timeout="-1" vertical="false" location="top" rounded="4" tile="false" variant="elevated" absolute="false" attach="false" closeonback="true" contained="false" disabled="false" modelvalue="true" zindex="2000" activatorprops="[object Object]" openonhover="false" closeoncontentclick="false" eager="true" locationstrategy="static" origin="auto" transition="v-snackbar-transition" role="status"></v-snackbar-stub>
 </div>"
 `;

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -134,7 +134,10 @@
 </script>
 
 <template>
-	<div id="paginated-table">
+	<div
+		id="paginated-table"
+		class="sy-paginated-table"
+	>
 		<VDataTable
 			v-if="!serverItemsLength"
 			color="primary"
@@ -170,11 +173,10 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @use '@/assets/tokens';
 
-.vd-data-table,
-.v-data-table {
+.sy-paginated-table :deep() {
 	table thead tr {
 		white-space: nowrap;
 	}
@@ -187,12 +189,6 @@
 		}
 	}
 
-	table :not(thead) tr {
-		&:hover {
-			background-color: rgb(12 65 154 / 10%);
-		}
-	}
-
 	&.row-clickable table tbody tr {
 		cursor: pointer;
 	}

package/src/components/PaginatedTable/tests/__snapshots__/PaginatedTable.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PaginatedTable > render correctly in server mode 1`] = `
-"<div id="paginated-table">
-  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+"<div data-v-50a8727d="" id="paginated-table" class="sy-paginated-table">
+  <div data-v-50a8727d="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
     <!---->
     <div class="v-table__wrapper">
       <table>
@@ -109,8 +109,8 @@ exports[`PaginatedTable > render correctly in server mode 1`] = `
 `;
 
 exports[`PaginatedTable > renders correctly in local mode 1`] = `
-"<div id="paginated-table" items="[object Object],[object Object],[object Object]" headers="[object Object],[object Object],[object Object]">
-  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+"<div data-v-50a8727d="" id="paginated-table" class="sy-paginated-table" items="[object Object],[object Object],[object Object]" headers="[object Object],[object Object],[object Object]">
+  <div data-v-50a8727d="" class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
     <!---->
     <div class="v-table__wrapper">
       <table>

package/src/components/PasswordField/PasswordField.mdx

@@ -1,70 +1,152 @@
-import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
-import * as PasswordFieldStories from './PasswordField.stories';
-import PasswordField from './PasswordField.vue';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
+import * as PasswordFieldStories from './PasswordField.stories'
 
-<Meta title="Composants/Formulaires/PasswordField" component={PasswordField}/>
+<Meta of={PasswordFieldStories} />
 
 # PasswordField
 
-Le composant `PasswordField` est utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.
-Il permet également d’afficher ou de masquer le contenu du champ à l’aide d’une icône.
+Le composant `PasswordField` est un champ de saisie sécurisé conçu pour la gestion des mots de passe. Il hérite des fonctionnalités du composant `SyTextField` tout en ajoutant des fonctionnalités spécifiques à la saisie de mots de passe.
 
-<Canvas story={{height: '150px'}} of={PasswordFieldStories.Default}/>
+## Utilisation basique
 
-# API
+La version de base du composant avec le style outlined par défaut.
 
-<Controls of={PasswordFieldStories.Default}/>
+<Canvas of={PasswordFieldStories.Default} />
 
-## Utilisation de base
+## Fonctionnalités principales
+
+- **Masquage/affichage du mot de passe** : Une icône permet de basculer entre l'affichage en clair et masqué
+- **Validation personnalisable** : Support des messages d'erreur, d'avertissement et de succès
+- **Styles configurables** : Choix entre les styles `outlined` et `underlined`
+- **États spéciaux** : Support des états désactivé et lecture seule
+- **Validation automatique** : Validation à la perte de focus configurable
+
+## API
+
+<Controls of={PasswordFieldStories.Default} />
+
+<Source
+    dark code={`
+<template>
+	<PasswordField
+		v-model="password"
+		label="Mot de passe"
+	/>
+</template>
 
-    <Source
-        dark
-        code={`
 <script setup lang="ts">
-    import { ref } from 'vue'
-    import { PasswordField } from '@cnamts/synapse'
-
-    const password = ref('')
-    const passwordFieldRef = ref() // Référence Vue pour accéder au composant enfant
-
-    function handleSubmit() {
-    // Appeler la méthode exposée validateOnSubmit via la référence
-    const isValid = passwordFieldRef.value?.validateOnSubmit()
-    if (!isValid) {
-    alert('Veuillez corriger les erreurs avant de soumettre.')
-} else {
-    alert('Formulaire soumis avec succès !')
-}
-}
-</script>
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
 
-    <template>
-      <form @submit.prevent="handleSubmit">
-        <PasswordField
-          ref="passwordFieldRef"
-          v-model="password"
-          outlined
-          :is-validate-on-blur="true"
-        />
-        <button type="submit">Soumettre</button>
-      </form>
-    </template>
+const password = ref('')
+</script>
 `}
 />
 
-## Gestion de la validation
+## Validation
+
+### Validation simple
+
+Le composant peut être requis et afficher un message d'erreur si le champ est vide.
+
+<Canvas of={PasswordFieldStories.Required} />
+
+### Validation avancée
+
+Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).
+
+<Canvas of={PasswordFieldStories.WithValidation} />
+
+### Exemples d'états de validation
+
+<div className="sb-grid">
+  <div>
+    <h4>Avec erreur</h4>
+    <Canvas of={PasswordFieldStories.WithError} />
+  </div>
+  <div>
+    <h4>Avec avertissement</h4>
+    <Canvas of={PasswordFieldStories.WithWarning} />
+  </div>
+  <div>
+    <h4>Avec succès</h4>
+    <Canvas of={PasswordFieldStories.WithSuccess} />
+  </div>
+</div>
+
+### Validation de formulaire
+
+Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.
+
+<Canvas of={PasswordFieldStories.WithFormValidation} />
+
+<Source
+    dark code={`
+<template>
+	<form @submit.prevent="handleSubmit">
+		<PasswordField
+			ref="passwordFieldRef"
+			v-model="password"
+			required
+			:custom-rules="customRules"
+		/>
+		<button type="submit">Valider</button>
+	</form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PasswordField } from '@cnamts/synapse'
+
+const password = ref('')
+const passwordFieldRef = ref()
+
+const customRules = [{
+	type: 'custom',
+	options: {
+		message: 'Le mot de passe doit contenir au moins 8 caractères',
+		validate: (value: string) => value.length >= 8
+	}
+}]
+
+function handleSubmit() {
+	const isValid = passwordFieldRef.value?.validateOnSubmit()
+	if (!isValid) {
+		// Gérer l'erreur
+		return
+	}
+	// Continuer avec la soumission
+}
+</script>
+`}
+/>
 
-### Validation par défaut
+### Méthodes exposées
 
-- **required** : Si `true`, le champ est obligatoire et affiche une erreur si le champ est vide.
-- **isValidateOnBlur** : Si `true`, la validation se déclenche automatiquement lors du blur (perte de focus).
+Le composant expose les méthodes et propriétés suivantes via `defineExpose` :
 
-### Règles de validation personnalisées (props `customRules`)
+- **showEyeIcon** : (ref) Contrôle l'affichage du mot de passe
+- **errors** : (ref) Liste des erreurs de validation actuelles
+- **warnings** : (ref) Liste des avertissements actuels
+- **successes** : (ref) Liste des messages de succès actuels
+- **validateOnSubmit** : () => boolean - Méthode pour valider le champ, retourne true si valide
 
-Vous pouvez définir des règles de validation personnalisées sous forme de tableau d’objets.
+## Bonnes pratiques
 
-Pour savoir comment utiliser les règles personnalisées, veuillez consulter la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+1. **Validation progressive** :
+   - Utilisez `isValidateOnBlur` pour une validation en temps réel
+   - Combinez erreurs, avertissements et succès pour guider l'utilisateur
 
+2. **Messages clairs** :
+   - Utilisez des messages d'erreur explicites
+   - Fournissez des suggestions d'amélioration via les warnings
+   - Confirmez les bonnes pratiques avec les messages de succès
 
+3. **Accessibilité** :
+   - Toujours fournir un label explicite
+   - Utiliser la prop `required` quand nécessaire
+   - Considérer l'utilisation de `displayAsterisk` pour les champs requis
 
+## En savoir plus
 
+Pour plus d'informations sur l'utilisation des règles de validation, consultez la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).