@uzum-tech/ui 2.0.2 → 2.0.3

package/dist/index.js

@@ -111399,6 +111399,7 @@
   const notificationEnvOptions = {
     ...notificationProps,
     duration: Number,
+    pauseOnVisibilityChange: Boolean,
     onClose: Function,
     onLeave: Function,
     onAfterEnter: Function,
@@ -111428,10 +111429,45 @@
       const { wipTransitionCountRef } = vue.inject(notificationProviderInjectionKey);
       const showRef = vue.ref(true);
       let timerId = null;
+      let remainingDuration = null;
+      let timerStartedAt = null;
+      let timerPausedForVisibility = false;
+      function clearTimer() {
+        if (timerId !== null) {
+          window.clearTimeout(timerId);
+          timerId = null;
+        }
+      }
       function hide() {
         showRef.value = false;
-        if (timerId) {
-          window.clearTimeout(timerId);
+        clearTimer();
+      }
+      function startTimer(duration) {
+        clearTimer();
+        remainingDuration = duration;
+        timerStartedAt = Date.now();
+        timerId = window.setTimeout(hide, duration);
+      }
+      function handleVisibilityChange() {
+        if (document.visibilityState === "hidden") {
+          if (timerId !== null) {
+            clearTimer();
+            if (timerStartedAt !== null && remainingDuration !== null) {
+              remainingDuration = Math.max(
+                0,
+                remainingDuration - (Date.now() - timerStartedAt)
+              );
+            }
+            timerStartedAt = null;
+            timerPausedForVisibility = true;
+          }
+        } else if (timerPausedForVisibility) {
+          timerPausedForVisibility = false;
+          if (remainingDuration !== null && remainingDuration > 0) {
+            startTimer(remainingDuration);
+          } else {
+            hide();
+          }
         }
       }
       function handleBeforeEnter(el) {
@@ -111480,16 +111516,13 @@
       function setHideTimeout() {
         const { duration } = props;
         if (duration) {
-          timerId = window.setTimeout(hide, duration);
+          startTimer(duration);
         }
       }
       function handleMouseenter(e) {
         if (e.currentTarget !== e.target)
           return;
-        if (timerId !== null) {
-          window.clearTimeout(timerId);
-          timerId = null;
-        }
+        clearTimer();
       }
       function handleMouseleave(e) {
         if (e.currentTarget !== e.target)
@@ -111510,8 +111543,14 @@
       }
       vue.onMounted(() => {
         if (props.duration) {
-          timerId = window.setTimeout(hide, props.duration);
+          startTimer(props.duration);
         }
+        if (props.pauseOnVisibilityChange) {
+          document.addEventListener("visibilitychange", handleVisibilityChange);
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        document.removeEventListener("visibilitychange", handleVisibilityChange);
       });
       return {
         show: showRef,
@@ -111558,12 +111597,16 @@
   var style = c$1([cB("notification-container", `
     z-index: 4000;
     position: fixed;
+    left: 0;
+    right: 0;
     overflow: visible;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    pointer-events: none;
   `, [c$1(">", [cB("scrollbar", `
-        width: initial;
+        width: -moz-fit-content;
+        width: fit-content;
         overflow: visible;
         height: -moz-fit-content !important;
         height: fit-content !important;
@@ -111589,8 +111632,7 @@
         margin-bottom: 0;
         margin-top: 12px;
       `)]), cM("top, bottom", `
-      left: 50%;
-      transform: translateX(-50%);
+      align-items: center;
     `, [cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
           transform: scale(0.85);
         `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
@@ -111599,15 +111641,11 @@
         transform-origin: top center;
       `)]), cM("bottom", [cB("notification-wrapper", `
         transform-origin: bottom center;
-      `)]), cM("top-right", `
-      right: 0;
-    `, [placementTransformStyle("top-right")]), cM("top-left", `
-      left: 0;
-    `, [placementTransformStyle("top-left")]), cM("bottom-right", `
-      right: 0;
-    `, [placementTransformStyle("bottom-right")]), cM("bottom-left", `
-      left: 0;
-    `, [placementTransformStyle("bottom-left")]), cM("scrollable", [cM("top-right", `
+      `)]), cM("top-right, bottom-right", `
+      align-items: flex-end;
+    `), cM("top-left, bottom-left", `
+      align-items: flex-start;
+    `), cM("scrollable", [cM("top-right", `
         top: 0;
       `), cM("top-left", `
         top: 0;
@@ -111644,6 +111682,7 @@
       `)]), cB("notification", `
       background-color: var(--u-color);
       color: var(--u-text-color);
+      pointer-events: auto;
       transition:
         background-color .3s var(--u-bezier),
         color .3s var(--u-bezier),
@@ -111742,16 +111781,6 @@
         `, [c$1("&:first-child", {
     margin: 0
   })])])])])]);
-  function placementTransformStyle(placement) {
-    const direction = placement.split("-")[1];
-    const transformXEnter = direction === "left" ? "calc(-100%)" : "calc(100%)";
-    const transformXLeave = "0";
-    return cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
-      transform: translate(${transformXEnter}, 0);
-    `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
-      transform: translate(${transformXLeave}, 0);
-    `)]);
-  }
 
   const notificationApiInjectionKey = createInjectionKey("u-notification-api");
   const notificationProviderProps = {
@@ -112596,7 +112625,7 @@
     });
   }
 
-  var version = "2.0.2";
+  var version = "2.0.3";
 
   function create({
     componentPrefix = "U",

package/dist/index.mjs

@@ -111395,6 +111395,7 @@ const Notification = defineComponent({
 const notificationEnvOptions = {
   ...notificationProps,
   duration: Number,
+  pauseOnVisibilityChange: Boolean,
   onClose: Function,
   onLeave: Function,
   onAfterEnter: Function,
@@ -111424,10 +111425,45 @@ const NotificationEnvironment = defineComponent({
     const { wipTransitionCountRef } = inject(notificationProviderInjectionKey);
     const showRef = ref(true);
     let timerId = null;
+    let remainingDuration = null;
+    let timerStartedAt = null;
+    let timerPausedForVisibility = false;
+    function clearTimer() {
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+        timerId = null;
+      }
+    }
     function hide() {
       showRef.value = false;
-      if (timerId) {
-        window.clearTimeout(timerId);
+      clearTimer();
+    }
+    function startTimer(duration) {
+      clearTimer();
+      remainingDuration = duration;
+      timerStartedAt = Date.now();
+      timerId = window.setTimeout(hide, duration);
+    }
+    function handleVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        if (timerId !== null) {
+          clearTimer();
+          if (timerStartedAt !== null && remainingDuration !== null) {
+            remainingDuration = Math.max(
+              0,
+              remainingDuration - (Date.now() - timerStartedAt)
+            );
+          }
+          timerStartedAt = null;
+          timerPausedForVisibility = true;
+        }
+      } else if (timerPausedForVisibility) {
+        timerPausedForVisibility = false;
+        if (remainingDuration !== null && remainingDuration > 0) {
+          startTimer(remainingDuration);
+        } else {
+          hide();
+        }
       }
     }
     function handleBeforeEnter(el) {
@@ -111476,16 +111512,13 @@ const NotificationEnvironment = defineComponent({
     function setHideTimeout() {
       const { duration } = props;
       if (duration) {
-        timerId = window.setTimeout(hide, duration);
+        startTimer(duration);
       }
     }
     function handleMouseenter(e) {
       if (e.currentTarget !== e.target)
         return;
-      if (timerId !== null) {
-        window.clearTimeout(timerId);
-        timerId = null;
-      }
+      clearTimer();
     }
     function handleMouseleave(e) {
       if (e.currentTarget !== e.target)
@@ -111506,8 +111539,14 @@ const NotificationEnvironment = defineComponent({
     }
     onMounted(() => {
       if (props.duration) {
-        timerId = window.setTimeout(hide, props.duration);
+        startTimer(props.duration);
       }
+      if (props.pauseOnVisibilityChange) {
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
     });
     return {
       show: showRef,
@@ -111554,12 +111593,16 @@ const NotificationEnvironment = defineComponent({
 var style = c$1([cB("notification-container", `
     z-index: 4000;
     position: fixed;
+    left: 0;
+    right: 0;
     overflow: visible;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    pointer-events: none;
   `, [c$1(">", [cB("scrollbar", `
-        width: initial;
+        width: -moz-fit-content;
+        width: fit-content;
         overflow: visible;
         height: -moz-fit-content !important;
         height: fit-content !important;
@@ -111585,8 +111628,7 @@ var style = c$1([cB("notification-container", `
         margin-bottom: 0;
         margin-top: 12px;
       `)]), cM("top, bottom", `
-      left: 50%;
-      transform: translateX(-50%);
+      align-items: center;
     `, [cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
           transform: scale(0.85);
         `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
@@ -111595,15 +111637,11 @@ var style = c$1([cB("notification-container", `
         transform-origin: top center;
       `)]), cM("bottom", [cB("notification-wrapper", `
         transform-origin: bottom center;
-      `)]), cM("top-right", `
-      right: 0;
-    `, [placementTransformStyle("top-right")]), cM("top-left", `
-      left: 0;
-    `, [placementTransformStyle("top-left")]), cM("bottom-right", `
-      right: 0;
-    `, [placementTransformStyle("bottom-right")]), cM("bottom-left", `
-      left: 0;
-    `, [placementTransformStyle("bottom-left")]), cM("scrollable", [cM("top-right", `
+      `)]), cM("top-right, bottom-right", `
+      align-items: flex-end;
+    `), cM("top-left, bottom-left", `
+      align-items: flex-start;
+    `), cM("scrollable", [cM("top-right", `
         top: 0;
       `), cM("top-left", `
         top: 0;
@@ -111640,6 +111678,7 @@ var style = c$1([cB("notification-container", `
       `)]), cB("notification", `
       background-color: var(--u-color);
       color: var(--u-text-color);
+      pointer-events: auto;
       transition:
         background-color .3s var(--u-bezier),
         color .3s var(--u-bezier),
@@ -111738,16 +111777,6 @@ var style = c$1([cB("notification-container", `
         `, [c$1("&:first-child", {
   margin: 0
 })])])])])]);
-function placementTransformStyle(placement) {
-  const direction = placement.split("-")[1];
-  const transformXEnter = direction === "left" ? "calc(-100%)" : "calc(100%)";
-  const transformXLeave = "0";
-  return cB("notification-wrapper", [c$1("&.notification-transition-enter-from, &.notification-transition-leave-to", `
-      transform: translate(${transformXEnter}, 0);
-    `), c$1("&.notification-transition-leave-from, &.notification-transition-enter-to", `
-      transform: translate(${transformXLeave}, 0);
-    `)]);
-}
 
 const notificationApiInjectionKey = createInjectionKey("u-notification-api");
 const notificationProviderProps = {
@@ -112592,7 +112621,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.2";
+var version = "2.0.3";
 
 function create({
   componentPrefix = "U",