@uzum-tech/ui 2.0.2 → 2.0.3

package/es/notification/src/NotificationEnvironment.d.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 export declare const notificationEnvOptions: {
     readonly duration: NumberConstructor;
+    readonly pauseOnVisibilityChange: BooleanConstructor;
     readonly onClose: PropType<() => Promise<boolean> | boolean | any>;
     readonly onLeave: PropType<() => void>;
     readonly onAfterEnter: PropType<() => void>;
@@ -41,6 +42,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -87,6 +89,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -116,5 +119,6 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
     type: "default" | "error" | "warning" | "success" | "info" | "primary";
     closable: boolean;
     keepAliveOnHover: boolean;
+    pauseOnVisibilityChange: boolean;
     hideIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/notification/src/NotificationEnvironment.mjs

@@ -1,9 +1,10 @@
-import { defineComponent, h, inject, nextTick, onMounted, ref, Transition } from 'vue';
+import { defineComponent, h, inject, nextTick, onBeforeUnmount, onMounted, ref, Transition } from 'vue';
 import { keep } from "../../_utils/index.mjs";
 import { notificationProviderInjectionKey } from "./context.mjs";
 import { Notification, notificationPropKeys, notificationProps } from "./Notification.mjs";
 export const notificationEnvOptions = Object.assign(Object.assign({}, notificationProps), {
   duration: Number,
+  pauseOnVisibilityChange: Boolean,
   onClose: Function,
   onLeave: Function,
   onAfterEnter: Function,
@@ -34,10 +35,42 @@ export const NotificationEnvironment = defineComponent({
     } = 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) {
@@ -95,15 +128,12 @@ export const NotificationEnvironment = defineComponent({
         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) return;
@@ -124,9 +154,15 @@ export 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,

package/es/notification/src/NotificationProvider.d.ts

@@ -741,6 +741,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
@@ -766,6 +767,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;

package/es/notification/src/styles/index.cssr.d.ts

@@ -1,3 +1,2 @@
-import type { CNode } from 'css-render';
-declare const _default: CNode;
+declare const _default: import("css-render").CNode;
 export default _default;

package/es/notification/src/styles/index.cssr.mjs

@@ -31,12 +31,16 @@ import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
 export default c([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('>', [cB('scrollbar', `
- width: initial;
+ width: -moz-fit-content;
+ width: fit-content;
  overflow: visible;
  height: -moz-fit-content !important;
  height: fit-content !important;
@@ -62,8 +66,7 @@ export default c([cB('notification-container', `
  margin-bottom: 0;
  margin-top: 12px;
  `)]), cM('top, bottom', `
- left: 50%;
- transform: translateX(-50%);
+ align-items: center;
  `, [cB('notification-wrapper', [c('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  transform: scale(0.85);
  `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
@@ -72,15 +75,11 @@ export default c([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;
@@ -117,6 +116,7 @@ export default c([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),
@@ -214,14 +214,4 @@ export default c([cB('notification-container', `
  color: var(--u-text-color);
  `, [c('&: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('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, 0);
- `), c('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, 0);
- `)]);
-}
+})])])])])]);

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.2";
+declare const _default: "2.0.3";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.2';
+export default '2.0.3';

package/lib/notification/src/NotificationEnvironment.d.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 export declare const notificationEnvOptions: {
     readonly duration: NumberConstructor;
+    readonly pauseOnVisibilityChange: BooleanConstructor;
     readonly onClose: PropType<() => Promise<boolean> | boolean | any>;
     readonly onLeave: PropType<() => void>;
     readonly onAfterEnter: PropType<() => void>;
@@ -41,6 +42,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -87,6 +89,7 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
         required: true;
     };
     duration: NumberConstructor;
+    pauseOnVisibilityChange: BooleanConstructor;
     onClose: PropType<() => Promise<boolean> | boolean | any>;
     onLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
@@ -116,5 +119,6 @@ export declare const NotificationEnvironment: import("vue").DefineComponent<Extr
     type: "default" | "error" | "warning" | "success" | "info" | "primary";
     closable: boolean;
     keepAliveOnHover: boolean;
+    pauseOnVisibilityChange: boolean;
     hideIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/notification/src/NotificationEnvironment.js

@@ -5,7 +5,7 @@ const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const context_1 = require("./context");
 const Notification_1 = require("./Notification");
-exports.notificationEnvOptions = Object.assign(Object.assign({}, Notification_1.notificationProps), { duration: Number, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
+exports.notificationEnvOptions = Object.assign(Object.assign({}, Notification_1.notificationProps), { duration: Number, pauseOnVisibilityChange: Boolean, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
     onHide: Function, 
     /** @deprecated */
@@ -27,10 +27,44 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
         const { wipTransitionCountRef } = (0, vue_1.inject)(context_1.notificationProviderInjectionKey);
         const showRef = (0, vue_1.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) {
@@ -81,16 +115,13 @@ exports.NotificationEnvironment = (0, vue_1.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)
@@ -112,8 +143,14 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
         }
         (0, vue_1.onMounted)(() => {
             if (props.duration) {
-                timerId = window.setTimeout(hide, props.duration);
+                startTimer(props.duration);
             }
+            if (props.pauseOnVisibilityChange) {
+                document.addEventListener('visibilitychange', handleVisibilityChange);
+            }
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
         });
         return {
             show: showRef,

package/lib/notification/src/NotificationProvider.d.ts

@@ -741,6 +741,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
@@ -766,6 +767,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         type?: "default" | "error" | "warning" | "success" | "info" | "primary" | undefined;
         closable?: boolean | undefined;
         keepAliveOnHover?: boolean | undefined;
+        pauseOnVisibilityChange?: boolean | undefined;
         hideIcon?: boolean | undefined;
         avatar?: (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;

package/lib/notification/src/styles/index.cssr.d.ts

@@ -1,3 +1,2 @@
-import type { CNode } from 'css-render';
-declare const _default: CNode;
+declare const _default: import("css-render").CNode;
 export default _default;

package/lib/notification/src/styles/index.cssr.js

@@ -36,12 +36,16 @@ const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.c)([(0, cssr_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;
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar', `
- width: initial;
+ width: -moz-fit-content;
+ width: fit-content;
  overflow: visible;
  height: -moz-fit-content !important;
  height: fit-content !important;
@@ -67,8 +71,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  margin-bottom: 0;
  margin-top: 12px;
  `)]), (0, cssr_1.cM)('top, bottom', `
- left: 50%;
- transform: translateX(-50%);
+ align-items: center;
  `, [(0, cssr_1.cB)('notification-wrapper', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
  transform: scale(0.85);
  `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
@@ -77,15 +80,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  transform-origin: top center;
  `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cB)('notification-wrapper', `
  transform-origin: bottom center;
- `)]), (0, cssr_1.cM)('top-right', `
- right: 0;
- `, [placementTransformStyle('top-right')]), (0, cssr_1.cM)('top-left', `
- left: 0;
- `, [placementTransformStyle('top-left')]), (0, cssr_1.cM)('bottom-right', `
- right: 0;
- `, [placementTransformStyle('bottom-right')]), (0, cssr_1.cM)('bottom-left', `
- left: 0;
- `, [placementTransformStyle('bottom-left')]), (0, cssr_1.cM)('scrollable', [(0, cssr_1.cM)('top-right', `
+ `)]), (0, cssr_1.cM)('top-right, bottom-right', `
+ align-items: flex-end;
+ `), (0, cssr_1.cM)('top-left, bottom-left', `
+ align-items: flex-start;
+ `), (0, cssr_1.cM)('scrollable', [(0, cssr_1.cM)('top-right', `
  top: 0;
  `), (0, cssr_1.cM)('top-left', `
  top: 0;
@@ -122,6 +121,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  `)]), (0, cssr_1.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),
@@ -219,14 +219,4 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  color: var(--u-text-color);
  `, [(0, cssr_1.c)('&:first-child', {
   margin: 0
-})])])])])]);
-function placementTransformStyle(placement) {
-  const direction = placement.split('-')[1];
-  const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';
-  const transformXLeave = '0';
-  return (0, cssr_1.cB)('notification-wrapper', [(0, cssr_1.c)('&.notification-transition-enter-from, &.notification-transition-leave-to', `
- transform: translate(${transformXEnter}, 0);
- `), (0, cssr_1.c)('&.notification-transition-leave-from, &.notification-transition-enter-to', `
- transform: translate(${transformXLeave}, 0);
- `)]);
-}
+})])])])])]);

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.2";
+declare const _default: "2.0.3";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.0.2';
+exports.default = '2.0.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "author": {
     "name": "KapitalLab",
@@ -181,6 +181,9 @@
     "overrides": {
       "cssstyle": "5.2.1"
     },
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ],
     "peerDependencyRules": {
       "ignoreMissing": [
         "@babel/core",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {