From 11b8c3d9db1ec62b1c3557703c7ab5c99cb42df5 Mon Sep 17 00:00:00 2001
From: Harsh Patel <harshnpatel9@gmail.com>
Date: Tue, 26 Nov 2024 02:39:40 +0530
Subject: [PATCH] feat(Notification): add `pauseTimeoutOnHover` prop (#2661)

---
 docs/content/2.components/notification.md        | 5 +++--
 src/runtime/components/overlays/Notification.vue | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/content/2.components/notification.md b/docs/content/2.components/notification.md
index c21c6c8a..e7569967 100644
--- a/docs/content/2.components/notification.md
+++ b/docs/content/2.components/notification.md
@@ -137,9 +137,9 @@ excludedProps:
 
 ### Timeout
 
-Use the `timeout` prop to configure how long the Notification will remain. The default value is  `5000`, set it to `0` to disable the timeout.
+Use the `timeout` prop to configure how long the Notification will remain. The default value is  `5000`, set it to `0` to disable the timeout. The `pauseTimeoutOnHover` prop (`true` by default) controls whether hovering the notification should pause the timeout.
 
-You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
+You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused if `pauseTimeoutOnHover` is enabled; otherwise, it won't stop.
 
 ::component-card
 ---
@@ -149,6 +149,7 @@ baseProps:
   description: 'This is a notification.'
 props:
   timeout: 60000
+  pauseTimeoutOnHover: true
 ---
 ::
 
diff --git a/src/runtime/components/overlays/Notification.vue b/src/runtime/components/overlays/Notification.vue
index d974101c..9b026d29 100644
--- a/src/runtime/components/overlays/Notification.vue
+++ b/src/runtime/components/overlays/Notification.vue
@@ -117,6 +117,10 @@ export default defineComponent({
     ui: {
       type: Object as PropType<DeepPartial<typeof config> & { strategy?: Strategy }>,
       default: () => ({})
+    },
+    pauseTimeoutOnHover: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close'],
@@ -157,13 +161,13 @@ export default defineComponent({
     })
 
     function onMouseover() {
-      if (timer) {
+      if (props.pauseTimeoutOnHover && timer) {
         timer.pause()
       }
     }
 
     function onMouseleave() {
-      if (timer) {
+      if (props.pauseTimeoutOnHover && timer) {
         timer.resume()
       }
     }