@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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

@@ -1,19 +1,68 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
-"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-14 vd-page-container d-flex justify-center">
-  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 800px;">
-    <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
       <!---->
       <div class="v-card__loader">
-        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+        >
           <!---->
-          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
-          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="opacity: NaN; width: 0%;"
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long"></div>
-              <div class="v-progress-linear__indeterminate short"></div>
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
             </div>
           </transition-stub>
           <!---->
@@ -21,37 +70,136 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
       </div>
       <!---->
       <!---->
-      <div data-v-8f2b5bad="" class="v-row max-width-none">
-        <div data-v-8f2b5bad="" class="v-col-sm-6 v-col-12 order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start">
-          <div data-v-8f2b5bad="" class="vd-code text-primary mb-4"><span data-v-8f2b5bad="" class="d-sr-only">Code d'erreur&nbsp;: </span> 404</div>
-          <h2 data-v-8f2b5bad="" class="mb-2 font-weight-bold text-h5 mb-4">Page non trouvée</h2>
-          <p data-v-8f2b5bad="">Cette page n’existe pas ou a été déplacée.</p>
-          <p data-v-c9c5b952="" class="mt-4">Votre identifiant de support est <b data-v-c9c5b952="">1234 5678 9012 3456 789</b> . </p>
-          <!--v-if-->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-6
+        ">
+          <div class="
+            mb-4
+            sy-code
+            text-primary
+          ">
+            <span class="d-sr-only">
+              Code d'erreur&nbsp;:
+            </span>
+            404
+          </div>
+          <h2 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            text-h5
+          ">
+            Page non trouvée
+          </h2>
+          <p>
+            Cette page n’existe pas ou a été déplacée.
+          </p>
+          <p class="mt-4">
+            Votre identifiant de support est
+            <b>
+              1234 5678 9012 3456 789
+            </b>
+            .
+          </p>
+          <!-- v-if -->
+        </div>
+        <div class="
+          align-center
+          d-flex
+          justify-center
+          v-col-12
+          v-col-sm-6
+        ">
+          <img
+            alt="Page non trouvée"
+            src="/src/components/NotFoundPage/assets/not-found.svg"
+          />
         </div>
-        <div data-v-8f2b5bad="" class="v-col-sm-6 v-col-12 d-flex align-center justify-center"><img data-v-c9c5b952="" src="/src/components/NotFoundPage/assets/not-found.svg" alt="Page non trouvée"></div>
       </div>
       <!---->
-      <!----><span class="v-card__underlay"></span>
+      <!---->
+      <span class="v-card__underlay"></span>
     </div>
   </div>
-</div>"
+</div>
 `;
 
 exports[`NotFoundPage > renders correctly 1`] = `
-"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-14 vd-page-container d-flex justify-center">
-  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 800px;">
-    <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
       <!---->
       <div class="v-card__loader">
-        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+        >
           <!---->
-          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
-          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="opacity: NaN; width: 0%;"
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long"></div>
-              <div class="v-progress-linear__indeterminate short"></div>
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
             </div>
           </transition-stub>
           <!---->
@@ -59,18 +207,62 @@ exports[`NotFoundPage > renders correctly 1`] = `
       </div>
       <!---->
       <!---->
-      <div data-v-8f2b5bad="" class="v-row max-width-none">
-        <div data-v-8f2b5bad="" class="v-col-sm-6 v-col-12 order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start">
-          <div data-v-8f2b5bad="" class="vd-code text-primary mb-4"><span data-v-8f2b5bad="" class="d-sr-only">Code d'erreur&nbsp;: </span> 404</div>
-          <h2 data-v-8f2b5bad="" class="mb-2 font-weight-bold text-h5 mb-4">Page non trouvée</h2>
-          <p data-v-8f2b5bad="">Cette page n’existe pas ou a été déplacée.</p>
-          <!--v-if-->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-6
+        ">
+          <div class="
+            mb-4
+            sy-code
+            text-primary
+          ">
+            <span class="d-sr-only">
+              Code d'erreur&nbsp;:
+            </span>
+            404
+          </div>
+          <h2 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            text-h5
+          ">
+            Page non trouvée
+          </h2>
+          <p>
+            Cette page n’existe pas ou a été déplacée.
+          </p>
+          <!-- v-if -->
+        </div>
+        <div class="
+          align-center
+          d-flex
+          justify-center
+          v-col-12
+          v-col-sm-6
+        ">
+          <img
+            alt="Page non trouvée"
+            src="/src/components/NotFoundPage/assets/not-found.svg"
+          />
         </div>
-        <div data-v-8f2b5bad="" class="v-col-sm-6 v-col-12 d-flex align-center justify-center"><img data-v-c9c5b952="" src="/src/components/NotFoundPage/assets/not-found.svg" alt="Page non trouvée"></div>
       </div>
       <!---->
-      <!----><span class="v-card__underlay"></span>
+      <!---->
+      <span class="v-card__underlay"></span>
     </div>
   </div>
-</div>"
+</div>
 `;

package/src/components/NotificationBar/NotificationBar.mdx

@@ -31,8 +31,8 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
 	import { NotificationBar } from '@cnamts/synapse'
-	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
-	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
+	import { useNotificationService } from '@cnamts/synapse'
+	import type { Notification } from '@cnamts/synapse'
 
 	const { addNotification } = useNotificationService()
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -115,7 +115,6 @@ Default.args = {
 	closeBtnText: 'Fermer',
 	type: 'info',
 	bottom: false,
-	rounded: '4',
 }
 
 Default.parameters = {
@@ -173,7 +172,6 @@ Default.parameters = {
 export const Success: Story = Default.bind({})
 Success.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'success',
 }
 Success.parameters = {
@@ -186,7 +184,6 @@ Success.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="success"
 				>
 					<template #default>This is a success notification</template>
@@ -232,7 +229,6 @@ Success.parameters = {
 export const Warning: Story = Default.bind({})
 Warning.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'warning',
 }
 Warning.parameters = {
@@ -245,7 +241,6 @@ Warning.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="warning"
 				>
 					<template #default>This is a warning notification</template>
@@ -291,7 +286,6 @@ Warning.parameters = {
 export const Error: Story = Default.bind({})
 Error.args = {
 	...Default.args,
-	rounded: 'pill',
 	type: 'error',
 }
 Error.parameters = {
@@ -304,7 +298,6 @@ Error.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="bottom"
-					:rounded="pill"
 					type="error"
 				>
 					<template #default>This is an error notification</template>
@@ -350,7 +343,6 @@ Error.parameters = {
 export const Bottom: Story = Default.bind({})
 Bottom.args = {
 	...Default.args,
-	rounded: 'pill',
 	bottom: true,
 }
 Bottom.parameters = {
@@ -363,7 +355,6 @@ Bottom.parameters = {
 					v-model="showNotification"
 					:close-btn-text="closeBtnText"
 					:bottom="true"
-					:rounded="pill"
 					:type="type"
 				>
 					<template #default>This is a bottom-positioned notification</template>
@@ -409,7 +400,6 @@ Bottom.parameters = {
 export const CustomCloseBtnText: Story = Default.bind({})
 CustomCloseBtnText.args = {
 	...Default.args,
-	rounded: 'pill',
 	closeBtnText: 'Masquer',
 }
 CustomCloseBtnText.parameters = {
@@ -448,7 +438,6 @@ CustomCloseBtnText.parameters = {
 
 				const { addNotification } = useNotificationService()
 				const showNotification = ref(false)
-				const rounded = 'pill'
 
 				const envoyerNotification = (message: string) => {
 					const notification = {
@@ -465,3 +454,62 @@ CustomCloseBtnText.parameters = {
 		},
 	],
 }
+
+export const Customization: Story = Default.bind({})
+Customization.args = {
+	...Default.args,
+	rounded: 'pill',
+	type: 'success',
+}
+Customization.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="pill"
+					type="success"
+				>
+					<template #default>This is a success notification</template>
+				</NotificationBar>
+				<VBtn
+					color="success"
+					@click="envoyerNotification('This is a success notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@cnamts/synpase'
+
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
+
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'success',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
+}

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>