@mantine-vue/notifications 3.4.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/index.cjs +82 -8
  2. package/cjs/index.cjs.map +1 -1
  3. package/esm/index.mjs +83 -10
  4. package/esm/index.mjs.map +1 -1
  5. package/lib/components/NotificationContainer/NotificationContainer.types.d.ts +4 -0
  6. package/lib/components/Notifications/Notifications.d.ts +1 -0
  7. package/lib/components/Notifications/Notifications.types.d.ts +3 -1
  8. package/lib/index.d.mts +2 -2
  9. package/lib/index.d.ts +2 -2
  10. package/lib/notifications.store.d.ts +15 -0
  11. package/package.json +4 -4
  12. package/styles.css +50 -10
  13. package/styles.layer.css +50 -10
package/lib/components/Notifications/Notifications.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare const Notifications: {
16
16
  show: typeof import("../../notifications.store").showNotification;
17
17
  hide: typeof import("../../notifications.store").hideNotification;
18
18
  update: typeof import("../../notifications.store").updateNotification;
19
+ promise: typeof import("../../notifications.store").promiseNotification;
19
20
  clean: typeof import("../../notifications.store").cleanNotifications;
20
21
  cleanQueue: typeof import("../../notifications.store").cleanNotificationsQueue;
21
22
  updateState: typeof import("../../notifications.store").updateNotificationsState;
package/lib/components/Notifications/Notifications.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { VNodeChild } from 'vue';
2
2
  import type { ClassNames, Styles, Vars } from '@mantine-vue/core';
3
3
  import type { NotificationData, NotificationPosition, NotificationsStore } from '../../notifications.store';
4
- export type NotificationsStylesNames = 'root' | 'notification';
4
+ export type NotificationsStylesNames = 'root' | 'notification' | 'progress';
5
5
  export type NotificationsCssVariables = {
6
6
  root: '--notifications-z-index' | '--notifications-container-width';
7
7
  };
@@ -37,6 +37,8 @@ export interface NotificationsProps {
37
37
  renderNotification?: (notification: NotificationData) => VNodeChild;
38
38
  /** Controls notification layout. @default 'default' */
39
39
  layout?: 'default' | 'stacked';
40
+ /** Displays a progress line that fills until each notification auto-closes. @default false */
41
+ withAutoCloseProgress?: boolean;
40
42
  /** CSS classes applied to component elements. */
41
43
  classNames?: ClassNames<NotificationsProps>;
42
44
  /** Inline styles applied to component elements. */
package/lib/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
1
+ export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, promiseNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
2
2
  export { Notifications } from './components/Notifications';
3
- export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, } from './notifications.store';
3
+ export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, PromiseNotificationData, PromiseNotificationOptions, } from './notifications.store';
4
4
  export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './components/Notifications';
package/lib/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
1
+ export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, promiseNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
2
2
  export { Notifications } from './components/Notifications';
3
- export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, } from './notifications.store';
3
+ export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, PromiseNotificationData, PromiseNotificationOptions, } from './notifications.store';
4
4
  export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './components/Notifications';
package/lib/notifications.store.d.ts CHANGED
@@ -14,6 +14,8 @@ export interface NotificationData extends Record<`data-${string}`, any> {
14
14
  autoClose?: boolean | number;
15
15
  /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */
16
16
  allowClose?: boolean;
17
+ /** Displays an auto-close progress line, overriding the Notifications default. */
18
+ withAutoCloseProgress?: boolean;
17
19
  /** Called when notification closes. */
18
20
  onClose?: (props: NotificationData) => void;
19
21
  /** Called when notification opens. */
@@ -41,12 +43,25 @@ export declare function updateNotificationsState(store: NotificationsStore, upda
41
43
  export declare function showNotification(notification: NotificationData, store?: NotificationsStore): string;
42
44
  export declare function hideNotification(id: string, store?: NotificationsStore): string;
43
45
  export declare function updateNotification(notification: NotificationData, store?: NotificationsStore): string | undefined;
46
+ export type PromiseNotificationData = Omit<NotificationData, 'id'> & Pick<NotificationData, 'message'>;
47
+ export interface PromiseNotificationOptions<T> {
48
+ /** Notification id shared by all promise states. */
49
+ id?: string;
50
+ /** Notification displayed while the promise is pending. */
51
+ loading: PromiseNotificationData;
52
+ /** Notification displayed after resolution, or a function of the resolved value. */
53
+ success: PromiseNotificationData | ((value: T) => PromiseNotificationData);
54
+ /** Notification displayed after rejection, or a function of the rejection reason. */
55
+ error: PromiseNotificationData | ((error: unknown) => PromiseNotificationData);
56
+ }
57
+ export declare function promiseNotification<T>(promise: Promise<T>, options: PromiseNotificationOptions<T>, store?: NotificationsStore): Promise<T>;
44
58
  export declare function cleanNotifications(store?: NotificationsStore): void;
45
59
  export declare function cleanNotificationsQueue(store?: NotificationsStore): void;
46
60
  export declare const notifications: {
47
61
  readonly show: typeof showNotification;
48
62
  readonly hide: typeof hideNotification;
49
63
  readonly update: typeof updateNotification;
64
+ readonly promise: typeof promiseNotification;
50
65
  readonly clean: typeof cleanNotifications;
51
66
  readonly cleanQueue: typeof cleanNotificationsQueue;
52
67
  readonly updateState: typeof updateNotificationsState;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine-vue/notifications",
3
- "version": "3.4.0",
3
+ "version": "3.6.0",
4
4
  "description": "Vue notifications system equivalent to @mantine/notifications",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -40,9 +40,9 @@
40
40
  "vue": "^3.5.0"
41
41
  },
42
42
  "peerDependencies": {
43
- "@mantine-vue/core": "3.4.0",
44
- "@mantine-vue/hooks": "3.4.0",
45
- "@mantine-vue/store": "3.4.0",
43
+ "@mantine-vue/core": "3.6.0",
44
+ "@mantine-vue/hooks": "3.6.0",
45
+ "@mantine-vue/store": "3.6.0",
46
46
  "vue": "^3.5.0"
47
47
  }
48
48
  }
package/styles.css CHANGED
@@ -1,51 +1,91 @@
1
- ._root_1hrsl_1 {
1
+ ._root_76vbt_1 {
2
2
  width: calc(100% - var(--mantine-spacing-md) * 2);
3
3
  position: fixed;
4
4
  z-index: var(--notifications-z-index);
5
5
  max-width: var(--notifications-container-width);
6
6
  }
7
7
 
8
- ._root_1hrsl_1:where([data-position='top-center']) {
8
+ ._root_76vbt_1:where([data-position='top-center']) {
9
9
  top: var(--mantine-spacing-md);
10
10
  left: 50%;
11
11
  transform: translateX(-50%);
12
12
  }
13
13
 
14
- ._root_1hrsl_1:where([data-position='top-left']) {
14
+ ._root_76vbt_1:where([data-position='top-left']) {
15
15
  top: var(--mantine-spacing-md);
16
16
  left: var(--mantine-spacing-md);
17
17
  }
18
18
 
19
- ._root_1hrsl_1:where([data-position='top-right']) {
19
+ ._root_76vbt_1:where([data-position='top-right']) {
20
20
  top: var(--mantine-spacing-md);
21
21
  right: var(--mantine-spacing-md);
22
22
  }
23
23
 
24
- ._root_1hrsl_1:where([data-position='bottom-center']) {
24
+ ._root_76vbt_1:where([data-position='bottom-center']) {
25
25
  bottom: var(--mantine-spacing-md);
26
26
  left: 50%;
27
27
  transform: translateX(-50%);
28
28
  }
29
29
 
30
- ._root_1hrsl_1:where([data-position='bottom-left']) {
30
+ ._root_76vbt_1:where([data-position='bottom-left']) {
31
31
  bottom: var(--mantine-spacing-md);
32
32
  left: var(--mantine-spacing-md);
33
33
  }
34
34
 
35
- ._root_1hrsl_1:where([data-position='bottom-right']) {
35
+ ._root_76vbt_1:where([data-position='bottom-right']) {
36
36
  bottom: var(--mantine-spacing-md);
37
37
  right: var(--mantine-spacing-md);
38
38
  }
39
39
 
40
- ._notification_1hrsl_40 + ._notification_1hrsl_40 {
40
+ ._notification_76vbt_40:where(._notification_76vbt_40 + ._notification_76vbt_40) {
41
41
  margin-top: var(--mantine-spacing-md);
42
42
  }
43
43
 
44
- :where([data-layout='stacked']) ._notification_1hrsl_40 {
44
+ :where([data-layout='stacked']) ._notification_76vbt_40 {
45
45
  margin-top: 0;
46
46
  }
47
47
 
48
- ._root_1hrsl_1:where([data-layout='stacked']) > * {
48
+ ._root_76vbt_1:where([data-layout='stacked']) > * {
49
49
  display: grid;
50
50
  }
51
+
52
+ ._progress_76vbt_56 {
53
+ position: absolute;
54
+ bottom: 0;
55
+ inset-inline-start: 0;
56
+ width: 100%;
57
+ height: calc(0.1875rem * var(--mantine-scale));
58
+ background-color: var(--notification-color);
59
+ transform: scaleX(0);
60
+ transform-origin: left center;
61
+ transition: opacity 200ms ease;
62
+ animation:
63
+ _notifications-progress_76vbt_1 var(--notifications-progress-duration) linear forwards,
64
+ _notifications-progress-fade-in_76vbt_1 200ms ease;
65
+ }
66
+
67
+ [dir="rtl"] ._progress_76vbt_56 {
68
+ transform-origin: right center;
69
+ }
70
+
71
+ ._progress_76vbt_56:where([data-paused]) {
72
+ opacity: 0;
73
+ animation-play-state: paused, running;
74
+ }
75
+
76
+ @keyframes _notifications-progress_76vbt_1 {
77
+ from {
78
+ transform: scaleX(0);
79
+ }
80
+
81
+ to {
82
+ transform: scaleX(1);
83
+ }
84
+ }
85
+
86
+ @keyframes _notifications-progress-fade-in_76vbt_1 {
87
+ from {
88
+ opacity: 0;
89
+ }
90
+ }
51
91
  /*$vite$:1*/
package/styles.layer.css CHANGED
@@ -1,53 +1,93 @@
1
1
  @layer mantine {
2
- ._root_1hrsl_1 {
2
+ ._root_76vbt_1 {
3
3
  width: calc(100% - var(--mantine-spacing-md) * 2);
4
4
  position: fixed;
5
5
  z-index: var(--notifications-z-index);
6
6
  max-width: var(--notifications-container-width);
7
7
  }
8
8
 
9
- ._root_1hrsl_1:where([data-position='top-center']) {
9
+ ._root_76vbt_1:where([data-position='top-center']) {
10
10
  top: var(--mantine-spacing-md);
11
11
  left: 50%;
12
12
  transform: translateX(-50%);
13
13
  }
14
14
 
15
- ._root_1hrsl_1:where([data-position='top-left']) {
15
+ ._root_76vbt_1:where([data-position='top-left']) {
16
16
  top: var(--mantine-spacing-md);
17
17
  left: var(--mantine-spacing-md);
18
18
  }
19
19
 
20
- ._root_1hrsl_1:where([data-position='top-right']) {
20
+ ._root_76vbt_1:where([data-position='top-right']) {
21
21
  top: var(--mantine-spacing-md);
22
22
  right: var(--mantine-spacing-md);
23
23
  }
24
24
 
25
- ._root_1hrsl_1:where([data-position='bottom-center']) {
25
+ ._root_76vbt_1:where([data-position='bottom-center']) {
26
26
  bottom: var(--mantine-spacing-md);
27
27
  left: 50%;
28
28
  transform: translateX(-50%);
29
29
  }
30
30
 
31
- ._root_1hrsl_1:where([data-position='bottom-left']) {
31
+ ._root_76vbt_1:where([data-position='bottom-left']) {
32
32
  bottom: var(--mantine-spacing-md);
33
33
  left: var(--mantine-spacing-md);
34
34
  }
35
35
 
36
- ._root_1hrsl_1:where([data-position='bottom-right']) {
36
+ ._root_76vbt_1:where([data-position='bottom-right']) {
37
37
  bottom: var(--mantine-spacing-md);
38
38
  right: var(--mantine-spacing-md);
39
39
  }
40
40
 
41
- ._notification_1hrsl_40 + ._notification_1hrsl_40 {
41
+ ._notification_76vbt_40:where(._notification_76vbt_40 + ._notification_76vbt_40) {
42
42
  margin-top: var(--mantine-spacing-md);
43
43
  }
44
44
 
45
- :where([data-layout='stacked']) ._notification_1hrsl_40 {
45
+ :where([data-layout='stacked']) ._notification_76vbt_40 {
46
46
  margin-top: 0;
47
47
  }
48
48
 
49
- ._root_1hrsl_1:where([data-layout='stacked']) > * {
49
+ ._root_76vbt_1:where([data-layout='stacked']) > * {
50
50
  display: grid;
51
51
  }
52
+
53
+ ._progress_76vbt_56 {
54
+ position: absolute;
55
+ bottom: 0;
56
+ inset-inline-start: 0;
57
+ width: 100%;
58
+ height: calc(0.1875rem * var(--mantine-scale));
59
+ background-color: var(--notification-color);
60
+ transform: scaleX(0);
61
+ transform-origin: left center;
62
+ transition: opacity 200ms ease;
63
+ animation:
64
+ _notifications-progress_76vbt_1 var(--notifications-progress-duration) linear forwards,
65
+ _notifications-progress-fade-in_76vbt_1 200ms ease;
66
+ }
67
+
68
+ [dir="rtl"] ._progress_76vbt_56 {
69
+ transform-origin: right center;
70
+ }
71
+
72
+ ._progress_76vbt_56:where([data-paused]) {
73
+ opacity: 0;
74
+ animation-play-state: paused, running;
75
+ }
76
+
77
+ @keyframes _notifications-progress_76vbt_1 {
78
+ from {
79
+ transform: scaleX(0);
80
+ }
81
+
82
+ to {
83
+ transform: scaleX(1);
84
+ }
85
+ }
86
+
87
+ @keyframes _notifications-progress-fade-in_76vbt_1 {
88
+ from {
89
+ opacity: 0;
90
+ }
91
+ }
52
92
  /*$vite$:1*/
53
93
  }