@uzum-tech/ui 2.0.2 → 2.0.4

package/dist/index.js

@@ -5772,22 +5772,24 @@
         const instance = vue.getCurrentInstance();
         const config = instance ? findConfig(instance) : null;
         const componentRef = vue.ref(null);
-        const mergedProps = vue.computed(() => {
-          if (!config) return props;
-          const defaults = config.mergedComponentPropsRef?.value?.[component.name] ?? {};
-          return {
-            ...defaults,
-            ...props
-          };
-        });
         if (ctx.expose) {
           ctx.expose(useExposeProxy(componentRef));
         }
-        return () => vue.h(component, {
-          ref: componentRef,
-          ...mergedProps.value,
-          ...ctx.attrs
-        }, ctx.slots);
+        return () => {
+          let finalProps = props;
+          if (config) {
+            const defaults = config.mergedComponentPropsRef?.value?.[component.name] ?? {};
+            finalProps = {
+              ...defaults,
+              ...props
+            };
+          }
+          return vue.h(component, {
+            ref: componentRef,
+            ...finalProps,
+            ...ctx.attrs
+          }, ctx.slots);
+        };
       }
     });
     wrapped.__wrapped__ = true;
@@ -111399,6 +111401,7 @@
   const notificationEnvOptions = {
     ...notificationProps,
     duration: Number,
+    pauseOnVisibilityChange: Boolean,
     onClose: Function,
     onLeave: Function,
     onAfterEnter: Function,
@@ -111428,10 +111431,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 +111518,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,9 +111545,15 @@
       }
       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,
         hide,
@@ -111558,12 +111599,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 +111634,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 +111643,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 +111684,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 +111783,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 +112627,7 @@
     });
   }
 
-  var version = "2.0.2";
+  var version = "2.0.4";
 
   function create({
     componentPrefix = "U",

package/dist/index.mjs

@@ -5768,22 +5768,24 @@ function wrap(component) {
       const instance = getCurrentInstance();
       const config = instance ? findConfig(instance) : null;
       const componentRef = ref(null);
-      const mergedProps = computed(() => {
-        if (!config) return props;
-        const defaults = config.mergedComponentPropsRef?.value?.[component.name] ?? {};
-        return {
-          ...defaults,
-          ...props
-        };
-      });
       if (ctx.expose) {
         ctx.expose(useExposeProxy(componentRef));
       }
-      return () => h(component, {
-        ref: componentRef,
-        ...mergedProps.value,
-        ...ctx.attrs
-      }, ctx.slots);
+      return () => {
+        let finalProps = props;
+        if (config) {
+          const defaults = config.mergedComponentPropsRef?.value?.[component.name] ?? {};
+          finalProps = {
+            ...defaults,
+            ...props
+          };
+        }
+        return h(component, {
+          ref: componentRef,
+          ...finalProps,
+          ...ctx.attrs
+        }, ctx.slots);
+      };
     }
   });
   wrapped.__wrapped__ = true;
@@ -111395,6 +111397,7 @@ const Notification = defineComponent({
 const notificationEnvOptions = {
   ...notificationProps,
   duration: Number,
+  pauseOnVisibilityChange: Boolean,
   onClose: Function,
   onLeave: Function,
   onAfterEnter: Function,
@@ -111424,10 +111427,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 +111514,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,9 +111541,15 @@ 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,
       hide,
@@ -111554,12 +111595,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 +111630,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 +111639,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 +111680,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 +111779,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 +112623,7 @@ function useThemeVars() {
   });
 }
 
-var version = "2.0.2";
+var version = "2.0.4";
 
 function create({
   componentPrefix = "U",