@cnamts/synapse 0.0.12-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.stories.ts

@@ -751,7 +751,7 @@ export const WithCustomRules: Story = {
 						{
 							type: 'custom',
 							options: {
-								validate: (value: string) => {
+								validate: (value) => {
 									if (!value || !/[A-Z]/.test(value)) {
 										return 'Le mot de passe doit contenir au moins une lettre majuscule'
 									}
@@ -763,7 +763,7 @@ export const WithCustomRules: Story = {
 						{
 							type: 'custom',
 							options: {
-								validate: (value: string) => {
+								validate: (value) => {
 									if (!value || !/[0-9]/.test(value)) {
 										return 'Le mot de passe doit contenir au moins un chiffre'
 									}
@@ -893,7 +893,7 @@ export const WithFormValidation: Story = {
 						{
 							type: 'custom',
 							options: {
-								validate: (value: string) => {
+								validate: (value) => {
 									if (!value || value.length < 8) {
 										return 'Le mot de passe doit contenir au moins 8 caractères'
 									}
@@ -905,7 +905,7 @@ export const WithFormValidation: Story = {
 						{
 							type: 'custom',
 							options: {
-								validate: (value: string) => {
+								validate: (value) => {
 									if (!value || !/[A-Z]/.test(value)) {
 										return 'Le mot de passe doit contenir au moins une lettre majuscule'
 									}
@@ -1015,3 +1015,190 @@ export const WithFormValidation: Story = {
 		`,
 	}),
 }
+
+export const WithoutSuccessMessages: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Messages de succès
+
+Cette story illustre l'utilisation de la propriété \`showSuccessMessages\` qui permet de contrôler
+l'affichage des messages de succès lors de la validation. Par défaut, cette propriété est à \`true\`.
+
+Cela peut être utile pour réduire la verbosité de l'interface lorsque les messages de succès
+ne sont pas nécessaires dans certains contextes.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec messages de succès (par défaut) -->
+  <PasswordField
+    v-model="value1"
+    label="Mot de passe avec messages de succès"
+    required
+  />
+
+  <!-- Champ sans messages de succès -->
+  <PasswordField
+    v-model="value2"
+    label="Mot de passe sans messages de succès"
+    required
+    :showSuccessMessages="false"
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { PasswordField },
+		setup() {
+			const value1 = ref('P@ssw0rd123')
+			const value2 = ref('P@ssw0rd123')
+
+			return { value1, value2 }
+		},
+		template: `
+      <div>
+        <p class="mb-4">Cette démonstration compare un PasswordField avec <code>showSuccessMessages=true</code> (par défaut) et un avec <code>showSuccessMessages=false</code>.</p>
+
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
+          <div>
+            <p class="text-subtitle-2 mb-2">Avec messages de succès</p>
+            <PasswordField
+              v-model="value1"
+              label="Mot de passe avec messages de succès"
+              required
+              showSuccessMessages
+            />
+          </div>
+
+          <div>
+            <p class="text-subtitle-2 mb-2">Sans messages de succès</p>
+            <PasswordField
+              v-model="value2"
+              label="Mot de passe sans messages de succès"
+              required
+              :showSuccessMessages="false"
+            />
+          </div>
+        </div>
+
+        <div class="mt-4 text-body-2">
+          <p>Observations :</p>
+          <ul>
+            <li class="ml-4">Les deux champs ont la même valeur valide</li>
+            <li class="ml-4">Le champ de gauche affiche un message de succès et un indicateur visuel vert</li>
+            <li class="ml-4">Le champ de droite n'affiche pas de message de succès, mais conserve l'indicateur visuel</li>
+            <li class="ml-4">Essayez de modifier les valeurs puis de les rendre à nouveau valides</li>
+          </ul>
+        </div>
+      </div>
+    `,
+	}),
+}
+
+export const DisableErrorHandling: Story = {
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Désactivation de la gestion des erreurs
+
+Cette story illustre l'utilisation de la propriété \`disableErrorHandling\` qui permet de désactiver complètement
+la gestion et l'affichage des erreurs dans un champ, même si des règles de validation sont définies.
+
+Cela peut être utile dans des cas particuliers où vous souhaitez définir des règles de validation
+mais gérer leur affichage différemment, ou utiliser la validation uniquement au niveau du formulaire parent.
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <!-- Champ avec validation normale -->
+  <PasswordField
+    v-model="value1"
+    label="Mot de passe avec validation"
+    required
+    :custom-rules="customRules"
+  />
+
+  <!-- Champ avec gestion d'erreurs désactivée -->
+  <PasswordField
+    v-model="value2"
+    label="Mot de passe sans gestion d'erreurs"
+    required
+    disableErrorHandling
+    :custom-rules="customRules"
+  />
+</template>`,
+			},
+		],
+	},
+	render: () => ({
+		components: { PasswordField },
+		setup() {
+			const value1 = ref('')
+			const value2 = ref('')
+
+			const customRules = [
+				{
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							if (!value || value.length < 8) {
+								return 'Le mot de passe doit contenir au moins 8 caractères'
+							}
+							return true
+						},
+						fieldIdentifier: 'password',
+					},
+				},
+			]
+
+			return { value1, value2, customRules }
+		},
+		template: `
+			<div>
+				<p class="mb-4">Cette démonstration compare un PasswordField standard et un avec \`disableErrorHandling=true\`.</p>
+
+				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px;">
+					<div>
+						<p class="text-subtitle-2 mb-2">Validation normale</p>
+						<PasswordField
+							v-model="value1"
+							label="Mot de passe avec validation"
+							required
+							:custom-rules="customRules"
+						/>
+					</div>
+
+					<div>
+						<p class="text-subtitle-2 mb-2">Sans gestion d'erreurs</p>
+						<PasswordField
+							v-model="value2"
+							label="Mot de passe sans gestion d'erreurs"
+							required
+							disableErrorHandling
+							:custom-rules="customRules"
+						/>
+					</div>
+				</div>
+
+				<div class="mt-4 text-body-2">
+					<p>Instructions :</p>
+					<ol>
+						<li class="ml-4">Cliquez dans un champ puis en dehors pour déclencher la validation</li>
+						<li class="ml-4">Le champ de gauche affichera une erreur requise, mais pas celui de droite</li>
+						<li class="ml-4">Vous pouvez également essayer de soumettre les deux champs pour voir la différence de comportement</li>
+					</ol>
+				</div>
+			</div>
+		`,
+	}),
+}

package/src/components/PasswordField/PasswordField.vue

@@ -32,6 +32,7 @@
 		showSuccessMessages?: boolean
 		displayAsterisk?: boolean
 		isValidateOnBlur?: boolean
+		disableErrorHandling?: boolean
 	} & CustomizableOptions>(), {
 		modelValue: null,
 		variantStyle: 'outlined',
@@ -50,6 +51,7 @@
 		showSuccessMessages: true,
 		displayAsterisk: false,
 		isValidateOnBlur: true,
+		disableErrorHandling: false,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -105,6 +107,7 @@
 		successRules: props.customSuccessRules || [],
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label || 'password',
+		disableErrorHandling: props.disableErrorHandling,
 	})
 
 	// Computed pour les états de validation