@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.
- package/cjs/index.cjs +82 -8
- package/cjs/index.cjs.map +1 -1
- package/esm/index.mjs +83 -10
- package/esm/index.mjs.map +1 -1
- package/lib/components/NotificationContainer/NotificationContainer.types.d.ts +4 -0
- package/lib/components/Notifications/Notifications.d.ts +1 -0
- package/lib/components/Notifications/Notifications.types.d.ts +3 -1
- package/lib/index.d.mts +2 -2
- package/lib/index.d.ts +2 -2
- package/lib/notifications.store.d.ts +15 -0
- package/package.json +4 -4
- package/styles.css +50 -10
- package/styles.layer.css +50 -10
package/cjs/index.cjs
CHANGED
|
@@ -81,6 +81,46 @@ function updateNotification(notification, store = notificationsStore) {
|
|
|
81
81
|
} : item));
|
|
82
82
|
return notification.id;
|
|
83
83
|
}
|
|
84
|
+
function resolvePromiseNotificationData(data, value) {
|
|
85
|
+
return typeof data === "function" ? data(value) : data;
|
|
86
|
+
}
|
|
87
|
+
function upsertNotification(notification, store) {
|
|
88
|
+
const state = store.getState();
|
|
89
|
+
return [...state.notifications, ...state.queue].some((item) => item.id === notification.id) ? updateNotification(notification, store) : showNotification(notification, store);
|
|
90
|
+
}
|
|
91
|
+
var pendingPromises = /* @__PURE__ */ new WeakMap();
|
|
92
|
+
function promiseNotification(promise, options, store = notificationsStore) {
|
|
93
|
+
const id = options.id || randomId();
|
|
94
|
+
const owners = pendingPromises.get(store) || /* @__PURE__ */ new Map();
|
|
95
|
+
const owner = {};
|
|
96
|
+
pendingPromises.set(store, owners);
|
|
97
|
+
owners.set(id, owner);
|
|
98
|
+
upsertNotification({
|
|
99
|
+
loading: true,
|
|
100
|
+
autoClose: false,
|
|
101
|
+
...options.loading,
|
|
102
|
+
id
|
|
103
|
+
}, store);
|
|
104
|
+
const settle = (data) => {
|
|
105
|
+
if (owners.get(id) !== owner) return;
|
|
106
|
+
owners.delete(id);
|
|
107
|
+
upsertNotification({
|
|
108
|
+
...options.loading,
|
|
109
|
+
loading: false,
|
|
110
|
+
autoClose: void 0,
|
|
111
|
+
...data,
|
|
112
|
+
id
|
|
113
|
+
}, store);
|
|
114
|
+
};
|
|
115
|
+
promise.then((value) => settle({
|
|
116
|
+
color: "teal",
|
|
117
|
+
...resolvePromiseNotificationData(options.success, value)
|
|
118
|
+
}), (error) => settle({
|
|
119
|
+
color: "red",
|
|
120
|
+
...resolvePromiseNotificationData(options.error, error)
|
|
121
|
+
}));
|
|
122
|
+
return promise;
|
|
123
|
+
}
|
|
84
124
|
function cleanNotifications(store = notificationsStore) {
|
|
85
125
|
updateNotificationsState(store, () => []);
|
|
86
126
|
}
|
|
@@ -92,6 +132,7 @@ var notifications = {
|
|
|
92
132
|
show: showNotification,
|
|
93
133
|
hide: hideNotification,
|
|
94
134
|
update: updateNotification,
|
|
135
|
+
promise: promiseNotification,
|
|
95
136
|
clean: cleanNotifications,
|
|
96
137
|
cleanQueue: cleanNotificationsQueue,
|
|
97
138
|
updateState: updateNotificationsState
|
|
@@ -106,6 +147,7 @@ function getAutoClose(autoClose, notificationAutoClose) {
|
|
|
106
147
|
//#endregion
|
|
107
148
|
//#region src/components/NotificationContainer/NotificationContainer.vue?vue&type=script&setup=true&lang.ts
|
|
108
149
|
var _hoisted_1 = ["role", "inert"];
|
|
150
|
+
var _hoisted_2 = ["data-paused"];
|
|
109
151
|
var SCROLL_DISMISS_RESET_TIMEOUT = 120;
|
|
110
152
|
var MAX_VISIBLE_STACK_DEPTH = 4;
|
|
111
153
|
//#endregion
|
|
@@ -121,6 +163,8 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
121
163
|
allowDragDismiss: { type: Boolean },
|
|
122
164
|
allowScrollDismiss: { type: Boolean },
|
|
123
165
|
paused: { type: Boolean },
|
|
166
|
+
withAutoCloseProgress: { type: Boolean },
|
|
167
|
+
progressProps: {},
|
|
124
168
|
renderNotification: { type: [Function, null] },
|
|
125
169
|
layout: {},
|
|
126
170
|
stackIndex: {},
|
|
@@ -149,6 +193,8 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
149
193
|
const scrollDismissActive = (0, vue.ref)(false);
|
|
150
194
|
const hovered = (0, vue.ref)(false);
|
|
151
195
|
const focused = (0, vue.ref)(false);
|
|
196
|
+
const progressRunning = (0, vue.ref)(false);
|
|
197
|
+
const progressCycle = (0, vue.ref)(0);
|
|
152
198
|
const contributedActive = (0, vue.ref)(false);
|
|
153
199
|
const startX = (0, vue.ref)(0);
|
|
154
200
|
const startTime = (0, vue.ref)(0);
|
|
@@ -157,6 +203,7 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
157
203
|
let scrollDismissTimeout = -1;
|
|
158
204
|
let resizeObserver;
|
|
159
205
|
const autoCloseDuration = (0, vue.computed)(() => getAutoClose(props.autoClose, props.data.autoClose));
|
|
206
|
+
const hasAutoCloseProgress = (0, vue.computed)(() => (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) && typeof autoCloseDuration.value === "number");
|
|
160
207
|
const isCloseDisabled = (0, vue.computed)(() => props.data.allowClose === false);
|
|
161
208
|
function normalizeStyle(style) {
|
|
162
209
|
if (!style) return {};
|
|
@@ -176,7 +223,8 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
176
223
|
"id",
|
|
177
224
|
"renderNotification",
|
|
178
225
|
"priority",
|
|
179
|
-
"__sequence"
|
|
226
|
+
"__sequence",
|
|
227
|
+
"withAutoCloseProgress"
|
|
180
228
|
]);
|
|
181
229
|
return Object.fromEntries(Object.entries(props.data).filter(([key]) => !omittedKeys.has(key)).map(([key, value]) => [key, cloneRenderable(value)]));
|
|
182
230
|
}
|
|
@@ -233,7 +281,10 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
233
281
|
};
|
|
234
282
|
});
|
|
235
283
|
const isCollapsed = (0, vue.computed)(() => props.layout === "stacked" && (props.stackIndex ?? 0) > 0 && !props.stackExpanded);
|
|
236
|
-
const cancelAutoClose = () =>
|
|
284
|
+
const cancelAutoClose = () => {
|
|
285
|
+
window.clearTimeout(autoCloseTimeout);
|
|
286
|
+
progressRunning.value = false;
|
|
287
|
+
};
|
|
237
288
|
const cancelHide = () => window.clearTimeout(hideTimeout);
|
|
238
289
|
const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout);
|
|
239
290
|
function handleHide() {
|
|
@@ -246,6 +297,10 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
246
297
|
if (typeof window === "undefined" || dismissed.value || active.value || props.paused || hovered.value || focused.value || typeof autoCloseDuration.value !== "number") return;
|
|
247
298
|
cancelAutoClose();
|
|
248
299
|
autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value);
|
|
300
|
+
if (hasAutoCloseProgress.value) {
|
|
301
|
+
progressCycle.value += 1;
|
|
302
|
+
progressRunning.value = true;
|
|
303
|
+
}
|
|
249
304
|
}
|
|
250
305
|
function getExitOffset(direction) {
|
|
251
306
|
return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40);
|
|
@@ -379,7 +434,8 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
379
434
|
autoCloseDuration,
|
|
380
435
|
active,
|
|
381
436
|
dismissed,
|
|
382
|
-
() => props.paused
|
|
437
|
+
() => props.paused,
|
|
438
|
+
hasAutoCloseProgress
|
|
383
439
|
], () => {
|
|
384
440
|
if (props.paused) cancelAutoClose();
|
|
385
441
|
else handleAutoClose();
|
|
@@ -444,7 +500,13 @@ var NotificationContainer_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
444
500
|
onPointerdownCapture: handlePointerDownCapture,
|
|
445
501
|
onPointerdown: handlePointerDown
|
|
446
502
|
}), {
|
|
447
|
-
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderMessage)))
|
|
503
|
+
default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(renderMessage))), hasAutoCloseProgress.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
|
|
504
|
+
key: progressCycle.value,
|
|
505
|
+
"aria-hidden": "true"
|
|
506
|
+
}, props.progressProps, {
|
|
507
|
+
"data-paused": !progressRunning.value || void 0,
|
|
508
|
+
style: [props.progressProps.style, { "--notifications-progress-duration": `${autoCloseDuration.value}ms` }]
|
|
509
|
+
}), null, 16, _hoisted_2)) : (0, vue.createCommentVNode)("", true)]),
|
|
448
510
|
_: 1
|
|
449
511
|
}, 16, [
|
|
450
512
|
"style",
|
|
@@ -522,8 +584,11 @@ function getNotificationStateStyles({ state, maxHeight, position, transitionDura
|
|
|
522
584
|
};
|
|
523
585
|
}
|
|
524
586
|
var Notifications_module_default = {
|
|
525
|
-
root: "
|
|
526
|
-
notification: "
|
|
587
|
+
root: "_root_76vbt_1",
|
|
588
|
+
notification: "_notification_76vbt_40",
|
|
589
|
+
progress: "_progress_76vbt_56",
|
|
590
|
+
"notifications-progress": "_notifications-progress_76vbt_1",
|
|
591
|
+
"notifications-progress-fade-in": "_notifications-progress-fade-in_76vbt_1"
|
|
527
592
|
};
|
|
528
593
|
//#endregion
|
|
529
594
|
//#region src/components/Notifications/Notifications.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -565,6 +630,10 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
565
630
|
pauseResetOnHover: { default: "all" },
|
|
566
631
|
renderNotification: {},
|
|
567
632
|
layout: { default: "default" },
|
|
633
|
+
withAutoCloseProgress: {
|
|
634
|
+
type: Boolean,
|
|
635
|
+
default: false
|
|
636
|
+
},
|
|
568
637
|
classNames: {},
|
|
569
638
|
styles: {},
|
|
570
639
|
vars: {},
|
|
@@ -592,8 +661,7 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
592
661
|
name: "Notifications",
|
|
593
662
|
classes: Notifications_module_default,
|
|
594
663
|
props,
|
|
595
|
-
|
|
596
|
-
style: attrs.style,
|
|
664
|
+
attrs,
|
|
597
665
|
classNames: props.classNames,
|
|
598
666
|
styles: props.styles,
|
|
599
667
|
unstyled: props.unstyled,
|
|
@@ -741,6 +809,8 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
741
809
|
paused: (0, vue.unref)(props).pauseResetOnHover === "all" && hoveredCount.value > 0 || (0, vue.unref)(props).layout === "stacked" && !isStackExpanded(position) && stackIndex > 0,
|
|
742
810
|
"render-notification": "renderNotification" in notification ? notification.renderNotification : (0, vue.unref)(props).renderNotification,
|
|
743
811
|
layout: (0, vue.unref)(props).layout,
|
|
812
|
+
"with-auto-close-progress": (0, vue.unref)(props).withAutoCloseProgress,
|
|
813
|
+
"progress-props": (0, vue.unref)(getStyles)("progress"),
|
|
744
814
|
"stack-index": stackIndex,
|
|
745
815
|
"stack-size": orderedGroup(position).length,
|
|
746
816
|
"stack-position": position,
|
|
@@ -764,6 +834,8 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
764
834
|
"paused",
|
|
765
835
|
"render-notification",
|
|
766
836
|
"layout",
|
|
837
|
+
"with-auto-close-progress",
|
|
838
|
+
"progress-props",
|
|
767
839
|
"stack-index",
|
|
768
840
|
"stack-size",
|
|
769
841
|
"stack-position",
|
|
@@ -802,6 +874,7 @@ var Notifications = Object.assign(/* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
802
874
|
show: notifications.show,
|
|
803
875
|
hide: notifications.hide,
|
|
804
876
|
update: notifications.update,
|
|
877
|
+
promise: notifications.promise,
|
|
805
878
|
clean: notifications.clean,
|
|
806
879
|
cleanQueue: notifications.cleanQueue,
|
|
807
880
|
updateState: notifications.updateState
|
|
@@ -814,6 +887,7 @@ exports.createNotificationsStore = createNotificationsStore;
|
|
|
814
887
|
exports.hideNotification = hideNotification;
|
|
815
888
|
exports.notifications = notifications;
|
|
816
889
|
exports.notificationsStore = notificationsStore;
|
|
890
|
+
exports.promiseNotification = promiseNotification;
|
|
817
891
|
exports.showNotification = showNotification;
|
|
818
892
|
exports.updateNotification = updateNotification;
|
|
819
893
|
exports.updateNotificationsState = updateNotificationsState;
|
package/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../src/notifications.store.ts","../src/get-auto-close/get-auto-close.ts","../src/components/NotificationContainer/NotificationContainer.vue","../src/components/NotificationContainer/NotificationContainer.vue","../src/get-grouped-notifications/get-grouped-notifications.ts","../src/get-notification-state-styles.ts","../src/Notifications.module.css","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.ts"],"sourcesContent":["import { type Ref, type VNodeChild } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nexport type NotificationPosition =\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center'\n\nexport interface NotificationData extends Record<`data-${string}`, any> {\n /** Notification id, can be used to close or update notification. */\n id?: string\n /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component. */\n position?: NotificationPosition\n /** Notification message, required for all notifications. */\n message: any\n /** Display priority. Higher numbers are shown before lower ones when the number of active notifications exceeds `limit`. Notifications with equal priority keep insertion order (FIFO). @default 0 */\n priority?: number\n /** Determines whether notification should be closed automatically, number is auto close timeout in ms, overrides `autoClose` from `Notifications`. */\n autoClose?: boolean | number\n /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */\n allowClose?: boolean\n /** Called when notification closes. */\n onClose?: (props: NotificationData) => void\n /** Called when notification opens. */\n onOpen?: (props: NotificationData) => void\n /** Custom renderer that replaces the default notification. Set to `null` to use default rendering when a global renderer is configured. */\n renderNotification?: ((notification: NotificationData) => VNodeChild) | null\n style?: any\n withCloseButton?: boolean\n [key: string]: any\n}\n\nexport interface NotificationsState {\n notifications: NotificationData[]\n queue: NotificationData[]\n defaultPosition: NotificationPosition\n limit: number\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>\n\nfunction randomId() {\n return `mantine-${Math.random().toString(36).slice(2, 11)}`\n}\n\nexport interface SequencedNotificationData extends NotificationData {\n __sequence?: number\n}\n\nlet notificationSequence = 0\n\nfunction getDistributedNotifications(\n data: SequencedNotificationData[],\n defaultPosition: NotificationPosition,\n limit: number,\n) {\n const queue: NotificationData[] = []\n const notifications: NotificationData[] = []\n const groups = new Map<string, SequencedNotificationData[]>()\n\n for (const item of data) {\n const position = item.position || defaultPosition\n const group = groups.get(position)\n if (group) {\n group.push(item)\n } else {\n groups.set(position, [item])\n }\n }\n\n for (const group of groups.values()) {\n group.sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0),\n )\n group.forEach((item, index) => {\n if (index < limit) notifications.push(item)\n else queue.push(item)\n })\n }\n\n return { notifications, queue }\n}\n\nexport const createNotificationsStore = () =>\n createStore<NotificationsState>({\n notifications: [],\n queue: [],\n defaultPosition: 'bottom-right',\n limit: 5,\n })\n\nexport const notificationsStore = createNotificationsStore()\nexport const useNotifications = (\n store: NotificationsStore = notificationsStore,\n): Readonly<Ref<NotificationsState>> => store.value\n\nexport function updateNotificationsState(\n store: NotificationsStore,\n update: (notifications: NotificationData[]) => NotificationData[],\n) {\n const state = store.getState()\n const notifications = update([...state.notifications, ...state.queue])\n for (const item of notifications as SequencedNotificationData[]) {\n if (item.__sequence === undefined) {\n item.__sequence = notificationSequence\n notificationSequence += 1\n }\n }\n const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit)\n\n store.setState({\n notifications: updated.notifications,\n queue: updated.queue,\n limit: state.limit,\n defaultPosition: state.defaultPosition,\n })\n}\n\nexport function showNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore,\n) {\n const id = notification.id || randomId()\n\n updateNotificationsState(store, (notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications\n }\n\n return [...notifications, { ...notification, id }]\n })\n\n return id\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, (notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n notification.onClose?.(notification)\n return false\n }\n\n return true\n }),\n )\n\n return id\n}\n\nexport function updateNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore,\n) {\n updateNotificationsState(store, (notifications) =>\n notifications.map((item) =>\n item.id === notification.id ? { ...item, ...notification } : item,\n ),\n )\n\n return notification.id\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, () => [])\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n const { defaultPosition, limit } = store.getState()\n updateNotificationsState(\n store,\n (notifications) =>\n getDistributedNotifications(notifications, defaultPosition, limit).notifications,\n )\n}\n\nexport const notifications = {\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n clean: cleanNotifications,\n cleanQueue: cleanNotificationsQueue,\n updateState: updateNotificationsState,\n} as const\n","export function getAutoClose(\n autoClose: boolean | number | undefined,\n notificationAutoClose: boolean | number | undefined,\n) {\n if (typeof notificationAutoClose === 'number') {\n return notificationAutoClose\n }\n\n if (notificationAutoClose === false || autoClose === false) {\n return false\n }\n\n return autoClose\n}\n","<script setup lang=\"ts\">\nimport {\n cloneVNode,\n computed,\n isVNode,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs,\n watch,\n type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n NotificationContainerEmits,\n NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n if (!style) return {}\n if (Array.isArray(style)) {\n return style.reduce<Record<string, any>>(\n (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n {},\n )\n }\n return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n const omittedKeys = new Set([\n 'autoClose',\n 'message',\n 'allowClose',\n 'position',\n 'style',\n 'withCloseButton',\n 'onOpen',\n 'onClose',\n 'id',\n 'renderNotification',\n 'priority',\n '__sequence',\n ])\n return Object.fromEntries(\n Object.entries(props.data)\n .filter(([key]) => !omittedKeys.has(key))\n .map(([key, value]) => [key, cloneRenderable(value)]),\n )\n}\n\nfunction cloneRenderable(value: any): any {\n if (isVNode(value)) return cloneVNode(value)\n if (Array.isArray(value)) return value.map(cloneRenderable)\n return value\n}\n\nconst renderMessage = () =>\n cloneRenderable(\n typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n const transitionDuration =\n baseStyle.transitionDuration ??\n `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n const isStackedLayout = props.layout === 'stacked'\n const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n const isCollapsed = isStacked && !props.stackExpanded\n const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n const isDragging = active.value || scrollDismissActive.value\n\n let transform =\n 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n if (isStackedLayout) {\n if (isExiting) {\n const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n transform = `translateY(${exitOffset}px) ${transform}`\n } else if (props.stackExpanded) {\n transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n } else if (isStacked) {\n transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n }\n }\n\n return {\n ...baseStyle,\n ...(isStackedLayout ? { maxHeight: undefined } : {}),\n '--notifications-state-transform':\n typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n '--notifications-state-opacity': String(baseOpacity),\n '--notifications-swipe-offset': `${offset.value}px`,\n '--notifications-swipe-opacity': String(swipeOpacity),\n transform,\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n ...(isStackedLayout\n ? {\n gridArea: '1 / 1',\n zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n pointerEvents: isCollapsed ? ('none' as const) : undefined,\n alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n transition: isDragging\n ? 'none'\n : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n }\n : {}),\n }\n})\n\nconst isCollapsed = computed(\n () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => window.clearTimeout(autoCloseTimeout)\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n emit('hide', props.data.id!)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n if (\n typeof window === 'undefined' ||\n dismissed.value ||\n active.value ||\n props.paused ||\n hovered.value ||\n focused.value ||\n typeof autoCloseDuration.value !== 'number'\n )\n return\n\n cancelAutoClose()\n autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n cancelScrollDismissReset()\n scrollDismissActive.value = false\n offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n dismissDirection.value = direction\n dismissed.value = true\n scrollDismissActive.value = false\n offset.value = getExitOffset(direction)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n cancelScrollDismissReset()\n scrollDismissTimeout = window.setTimeout(() => {\n scrollDismissActive.value = false\n offset.value = 0\n handleAutoClose()\n }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n if (!active.value) return\n active.value = false\n removePointerListeners()\n const movement = event.clientX - startX.value\n const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n else {\n offset.value = 0\n handleAutoClose()\n }\n}\n\nfunction removePointerListeners() {\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', finishPointerDrag)\n window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n active.value = false\n removePointerListeners()\n offset.value = 0\n if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n return\n cancelAutoClose()\n active.value = true\n startX.value = event.clientX\n startTime.value = Date.now()\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', finishPointerDrag)\n window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n if (dismissed.value || active.value) return\n const documentEvent = event.currentTarget === document\n if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n if (!props.allowScrollDismiss || isCloseDisabled.value) return\n if (!documentEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n cancelAutoClose()\n scrollDismissActive.value = true\n const nextOffset = offset.value - event.deltaX\n if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n else {\n offset.value = nextOffset\n scheduleScrollDismissReset()\n }\n}\n\nfunction handleMouseEnter() {\n hovered.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n const isActive = hovered.value || focused.value\n if (isActive && !contributedActive.value) {\n contributedActive.value = true\n emit('hoverStart')\n } else if (!isActive && contributedActive.value) {\n contributedActive.value = false\n emit('hoverEnd')\n }\n}\n\nfunction handleFocusIn() {\n if (props.layout !== 'stacked') return\n focused.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n if (props.layout !== 'stacked') return\n const next = event.relatedTarget as Node | null\n if (next && notificationRef.value?.contains(next)) return\n focused.value = false\n if (!scrollDismissActive.value) handleAutoClose()\n syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n if (\n props.layout === 'stacked' &&\n (event.pointerType === 'touch' || event.pointerType === 'pen')\n ) {\n emit('expandRequest')\n }\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n if (!enabled) return\n document.addEventListener('wheel', handleWheel, { passive: false })\n onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n [autoCloseDuration, active, dismissed, () => props.paused],\n () => {\n if (props.paused) cancelAutoClose()\n else handleAutoClose()\n },\n { immediate: true },\n)\n\nonMounted(() => {\n props.data.onOpen?.(props.data)\n notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n window.addEventListener('resize', handleResize)\n if (notificationRef.value) {\n emit('heightChange', notificationRef.value.offsetHeight)\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(() => {\n if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n })\n resizeObserver.observe(notificationRef.value)\n }\n }\n})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n hovered.value = false\n focused.value = false\n syncActiveContribution()\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n <div\n v-if=\"props.renderNotification\"\n v-bind=\"attrs\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :role=\"(attrs.role as string) || 'alert'\"\n :inert=\"isCollapsed || undefined\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderCustomNotification\" />\n </div>\n <Notification\n v-else\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :inert=\"isCollapsed || undefined\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderMessage\" />\n </Notification>\n</template>\n","<script setup lang=\"ts\">\nimport {\n cloneVNode,\n computed,\n isVNode,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs,\n watch,\n type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n NotificationContainerEmits,\n NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n if (!style) return {}\n if (Array.isArray(style)) {\n return style.reduce<Record<string, any>>(\n (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n {},\n )\n }\n return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n const omittedKeys = new Set([\n 'autoClose',\n 'message',\n 'allowClose',\n 'position',\n 'style',\n 'withCloseButton',\n 'onOpen',\n 'onClose',\n 'id',\n 'renderNotification',\n 'priority',\n '__sequence',\n ])\n return Object.fromEntries(\n Object.entries(props.data)\n .filter(([key]) => !omittedKeys.has(key))\n .map(([key, value]) => [key, cloneRenderable(value)]),\n )\n}\n\nfunction cloneRenderable(value: any): any {\n if (isVNode(value)) return cloneVNode(value)\n if (Array.isArray(value)) return value.map(cloneRenderable)\n return value\n}\n\nconst renderMessage = () =>\n cloneRenderable(\n typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n const transitionDuration =\n baseStyle.transitionDuration ??\n `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n const isStackedLayout = props.layout === 'stacked'\n const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n const isCollapsed = isStacked && !props.stackExpanded\n const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n const isDragging = active.value || scrollDismissActive.value\n\n let transform =\n 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n if (isStackedLayout) {\n if (isExiting) {\n const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n transform = `translateY(${exitOffset}px) ${transform}`\n } else if (props.stackExpanded) {\n transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n } else if (isStacked) {\n transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n }\n }\n\n return {\n ...baseStyle,\n ...(isStackedLayout ? { maxHeight: undefined } : {}),\n '--notifications-state-transform':\n typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n '--notifications-state-opacity': String(baseOpacity),\n '--notifications-swipe-offset': `${offset.value}px`,\n '--notifications-swipe-opacity': String(swipeOpacity),\n transform,\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n ...(isStackedLayout\n ? {\n gridArea: '1 / 1',\n zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n pointerEvents: isCollapsed ? ('none' as const) : undefined,\n alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n transition: isDragging\n ? 'none'\n : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n }\n : {}),\n }\n})\n\nconst isCollapsed = computed(\n () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => window.clearTimeout(autoCloseTimeout)\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n emit('hide', props.data.id!)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n if (\n typeof window === 'undefined' ||\n dismissed.value ||\n active.value ||\n props.paused ||\n hovered.value ||\n focused.value ||\n typeof autoCloseDuration.value !== 'number'\n )\n return\n\n cancelAutoClose()\n autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n cancelScrollDismissReset()\n scrollDismissActive.value = false\n offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n dismissDirection.value = direction\n dismissed.value = true\n scrollDismissActive.value = false\n offset.value = getExitOffset(direction)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n cancelScrollDismissReset()\n scrollDismissTimeout = window.setTimeout(() => {\n scrollDismissActive.value = false\n offset.value = 0\n handleAutoClose()\n }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n if (!active.value) return\n active.value = false\n removePointerListeners()\n const movement = event.clientX - startX.value\n const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n else {\n offset.value = 0\n handleAutoClose()\n }\n}\n\nfunction removePointerListeners() {\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', finishPointerDrag)\n window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n active.value = false\n removePointerListeners()\n offset.value = 0\n if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n return\n cancelAutoClose()\n active.value = true\n startX.value = event.clientX\n startTime.value = Date.now()\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', finishPointerDrag)\n window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n if (dismissed.value || active.value) return\n const documentEvent = event.currentTarget === document\n if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n if (!props.allowScrollDismiss || isCloseDisabled.value) return\n if (!documentEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n cancelAutoClose()\n scrollDismissActive.value = true\n const nextOffset = offset.value - event.deltaX\n if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n else {\n offset.value = nextOffset\n scheduleScrollDismissReset()\n }\n}\n\nfunction handleMouseEnter() {\n hovered.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n const isActive = hovered.value || focused.value\n if (isActive && !contributedActive.value) {\n contributedActive.value = true\n emit('hoverStart')\n } else if (!isActive && contributedActive.value) {\n contributedActive.value = false\n emit('hoverEnd')\n }\n}\n\nfunction handleFocusIn() {\n if (props.layout !== 'stacked') return\n focused.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n if (props.layout !== 'stacked') return\n const next = event.relatedTarget as Node | null\n if (next && notificationRef.value?.contains(next)) return\n focused.value = false\n if (!scrollDismissActive.value) handleAutoClose()\n syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n if (\n props.layout === 'stacked' &&\n (event.pointerType === 'touch' || event.pointerType === 'pen')\n ) {\n emit('expandRequest')\n }\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n if (!enabled) return\n document.addEventListener('wheel', handleWheel, { passive: false })\n onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n [autoCloseDuration, active, dismissed, () => props.paused],\n () => {\n if (props.paused) cancelAutoClose()\n else handleAutoClose()\n },\n { immediate: true },\n)\n\nonMounted(() => {\n props.data.onOpen?.(props.data)\n notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n window.addEventListener('resize', handleResize)\n if (notificationRef.value) {\n emit('heightChange', notificationRef.value.offsetHeight)\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(() => {\n if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n })\n resizeObserver.observe(notificationRef.value)\n }\n }\n})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n hovered.value = false\n focused.value = false\n syncActiveContribution()\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n <div\n v-if=\"props.renderNotification\"\n v-bind=\"attrs\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :role=\"(attrs.role as string) || 'alert'\"\n :inert=\"isCollapsed || undefined\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderCustomNotification\" />\n </div>\n <Notification\n v-else\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :inert=\"isCollapsed || undefined\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderMessage\" />\n </Notification>\n</template>\n","import type { NotificationData, NotificationPosition } from '../notifications.store'\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n]\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition,\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification)\n return acc\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = []\n return acc\n }, {} as GroupedNotifications),\n )\n}\n","import type { CSSProperties } from 'vue'\nimport type { NotificationPosition } from './notifications.store'\n\nexport type NotificationTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited'\n\ninterface NotificationStateStylesProps {\n state: NotificationTransitionStatus\n maxHeight: number | string\n position: NotificationPosition\n transitionDuration: number\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n}\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n}\n\nfunction toCssLength(value: number | string): string {\n return typeof value === 'number' ? `${value}px` : value\n}\n\nexport function getNotificationStateStyles({\n state,\n maxHeight,\n position,\n transitionDuration,\n}: NotificationStateStylesProps): CSSProperties {\n const [vertical, horizontal] = position.split('-')\n const property = (\n horizontal === 'center' ? `${vertical}-center` : horizontal\n ) as keyof typeof transforms\n\n const commonStyles: CSSProperties = {\n opacity: 0,\n maxHeight: toCssLength(maxHeight),\n transform: transforms[property],\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',\n transitionProperty: 'opacity, transform, max-height',\n }\n\n const inState: CSSProperties = {\n opacity: 1,\n transform: noTransform[property],\n }\n\n const outState: CSSProperties = {\n opacity: 0,\n maxHeight: toCssLength(0),\n transform: transforms[property],\n }\n\n const transitionStyles = {\n entering: inState,\n entered: inState,\n exiting: outState,\n exited: outState,\n }\n\n return { ...commonStyles, ...transitionStyles[state] }\n}\n",".root {\n width: calc(100% - var(--mantine-spacing-md) * 2);\n position: fixed;\n z-index: var(--notifications-z-index);\n max-width: var(--notifications-container-width);\n\n &:where([data-position='top-center']) {\n top: var(--mantine-spacing-md);\n left: 50%;\n transform: translateX(-50%);\n }\n\n &:where([data-position='top-left']) {\n top: var(--mantine-spacing-md);\n left: var(--mantine-spacing-md);\n }\n\n &:where([data-position='top-right']) {\n top: var(--mantine-spacing-md);\n right: var(--mantine-spacing-md);\n }\n\n &:where([data-position='bottom-center']) {\n bottom: var(--mantine-spacing-md);\n left: 50%;\n transform: translateX(-50%);\n }\n\n &:where([data-position='bottom-left']) {\n bottom: var(--mantine-spacing-md);\n left: var(--mantine-spacing-md);\n }\n\n &:where([data-position='bottom-right']) {\n bottom: var(--mantine-spacing-md);\n right: var(--mantine-spacing-md);\n }\n}\n\n.notification {\n & + & {\n margin-top: var(--mantine-spacing-md);\n }\n\n :where([data-layout='stacked']) & {\n margin-top: 0;\n }\n}\n\n.root:where([data-layout='stacked']) {\n & > * {\n display: grid;\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n Box,\n OptionalPortal,\n getDefaultZIndex,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n getGroupedNotifications,\n positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n NotificationData,\n NotificationPosition,\n SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: () => getDefaultZIndex('overlay'),\n store: () => notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n layout: 'default',\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n () =>\n Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n name: 'Notifications',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames as any,\n styles: props.styles as any,\n unstyled: props.unstyled,\n vars: props.vars as any,\n varsResolver,\n})\n\nwatch(\n () => [props.limit, props.position, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n limit: props.limit || 5,\n defaultPosition: props.position,\n }))\n },\n { immediate: true },\n)\n\nfunction applyTransitionStyles(\n element: Element,\n state: 'entered' | 'exited' | 'exiting',\n position: NotificationPosition,\n) {\n Object.assign(\n (element as HTMLElement).style,\n getNotificationStateStyles({\n state,\n position,\n transitionDuration: duration.value,\n maxHeight: props.notificationMaxHeight,\n }),\n )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n void (element as HTMLElement).offsetHeight\n applyTransitionStyles(element, 'entered', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n applyTransitionStyles(element, 'exiting', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n const data = { ...notification }\n delete data.style\n return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n const items = grouped.value[position]\n if (props.layout !== 'stacked') return items\n return [...(items as SequencedNotificationData[])].sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n if (!isStackExpanded(position)) return 0\n const direction = position.startsWith('top') ? 1 : -1\n return (\n orderedGroup(position)\n .slice(0, index)\n .reduce(\n (sum, item) =>\n sum +\n (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n STACK_EXPANDED_GAP,\n 0,\n ) * direction\n )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n window.clearTimeout(collapseTimeouts[position])\n if (\n (hoveredCounts.value[position] ?? 0) > 0 ||\n hoveredGroups.value[position] ||\n pinnedPosition.value === position\n )\n return\n collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: (hoveredCounts.value[position] ?? 0) + 1,\n }\n if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n }\n if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n if (props.layout !== 'stacked') return\n hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n if (hovered) {\n window.clearTimeout(collapseTimeouts[position])\n setExpanded(position, true)\n } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n pinnedPosition.value = position\n setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n if (!pinnedPosition.value) return\n const target = event.target as Element | null\n if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n const previous = pinnedPosition.value\n pinnedPosition.value = null\n scheduleCollapse(previous)\n }\n}\n\nwatch(\n () => props.layout,\n (layout) => {\n if (layout !== 'stacked') {\n pinnedPosition.value = null\n hoveredGroups.value = {}\n expandedPositions.value = {}\n }\n },\n)\n\nwatch(grouped, (groups) => {\n if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n pinnedPosition.value = null\n }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', handleDocumentPointerDown)\n positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Box\n v-for=\"position in positions\"\n :key=\"position\"\n v-bind=\"{ ...attrs, ...getStyles('root') }\"\n :data-position=\"position\"\n :data-notifications-position=\"position\"\n :data-layout=\"props.layout\"\n >\n <TransitionGroup\n tag=\"div\"\n :css=\"false\"\n @mouseenter=\"handleGroupHover(position, true)\"\n @mouseleave=\"handleGroupHover(position, false)\"\n @focusin=\"handleGroupHover(position, true)\"\n @focusout=\"handleGroupHover(position, false)\"\n @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n @enter=\"(element, done) => enter(element, done, position)\"\n @leave=\"(element, done) => leave(element, done, position)\"\n >\n <NotificationContainer\n v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n :key=\"notification.id\"\n v-bind=\"getStyles('notification', { style: notification.style })\"\n :data=\"notificationData(notification)\"\n :auto-close=\"props.autoClose\"\n :transition-duration=\"duration\"\n :allow-drag-dismiss=\"props.allowDragDismiss\"\n :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n :paused=\"\n (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n \"\n :render-notification=\"\n 'renderNotification' in notification\n ? notification.renderNotification\n : props.renderNotification\n \"\n :layout=\"props.layout\"\n :stack-index=\"stackIndex\"\n :stack-size=\"orderedGroup(position).length\"\n :stack-position=\"position\"\n :stack-expanded=\"isStackExpanded(position)\"\n :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n transition-state=\"entered\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"handleHoverStart(position)\"\n @hover-end=\"handleHoverEnd(position)\"\n @expand-request=\"handleExpandRequest(position)\"\n @height-change=\"\n (height) =>\n (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n \"\n />\n </TransitionGroup>\n </Box>\n </OptionalPortal>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n Box,\n OptionalPortal,\n getDefaultZIndex,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n getGroupedNotifications,\n positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n NotificationData,\n NotificationPosition,\n SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: () => getDefaultZIndex('overlay'),\n store: () => notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n layout: 'default',\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n () =>\n Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n name: 'Notifications',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames as any,\n styles: props.styles as any,\n unstyled: props.unstyled,\n vars: props.vars as any,\n varsResolver,\n})\n\nwatch(\n () => [props.limit, props.position, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n limit: props.limit || 5,\n defaultPosition: props.position,\n }))\n },\n { immediate: true },\n)\n\nfunction applyTransitionStyles(\n element: Element,\n state: 'entered' | 'exited' | 'exiting',\n position: NotificationPosition,\n) {\n Object.assign(\n (element as HTMLElement).style,\n getNotificationStateStyles({\n state,\n position,\n transitionDuration: duration.value,\n maxHeight: props.notificationMaxHeight,\n }),\n )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n void (element as HTMLElement).offsetHeight\n applyTransitionStyles(element, 'entered', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n applyTransitionStyles(element, 'exiting', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n const data = { ...notification }\n delete data.style\n return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n const items = grouped.value[position]\n if (props.layout !== 'stacked') return items\n return [...(items as SequencedNotificationData[])].sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n if (!isStackExpanded(position)) return 0\n const direction = position.startsWith('top') ? 1 : -1\n return (\n orderedGroup(position)\n .slice(0, index)\n .reduce(\n (sum, item) =>\n sum +\n (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n STACK_EXPANDED_GAP,\n 0,\n ) * direction\n )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n window.clearTimeout(collapseTimeouts[position])\n if (\n (hoveredCounts.value[position] ?? 0) > 0 ||\n hoveredGroups.value[position] ||\n pinnedPosition.value === position\n )\n return\n collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: (hoveredCounts.value[position] ?? 0) + 1,\n }\n if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n }\n if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n if (props.layout !== 'stacked') return\n hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n if (hovered) {\n window.clearTimeout(collapseTimeouts[position])\n setExpanded(position, true)\n } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n pinnedPosition.value = position\n setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n if (!pinnedPosition.value) return\n const target = event.target as Element | null\n if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n const previous = pinnedPosition.value\n pinnedPosition.value = null\n scheduleCollapse(previous)\n }\n}\n\nwatch(\n () => props.layout,\n (layout) => {\n if (layout !== 'stacked') {\n pinnedPosition.value = null\n hoveredGroups.value = {}\n expandedPositions.value = {}\n }\n },\n)\n\nwatch(grouped, (groups) => {\n if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n pinnedPosition.value = null\n }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', handleDocumentPointerDown)\n positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Box\n v-for=\"position in positions\"\n :key=\"position\"\n v-bind=\"{ ...attrs, ...getStyles('root') }\"\n :data-position=\"position\"\n :data-notifications-position=\"position\"\n :data-layout=\"props.layout\"\n >\n <TransitionGroup\n tag=\"div\"\n :css=\"false\"\n @mouseenter=\"handleGroupHover(position, true)\"\n @mouseleave=\"handleGroupHover(position, false)\"\n @focusin=\"handleGroupHover(position, true)\"\n @focusout=\"handleGroupHover(position, false)\"\n @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n @enter=\"(element, done) => enter(element, done, position)\"\n @leave=\"(element, done) => leave(element, done, position)\"\n >\n <NotificationContainer\n v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n :key=\"notification.id\"\n v-bind=\"getStyles('notification', { style: notification.style })\"\n :data=\"notificationData(notification)\"\n :auto-close=\"props.autoClose\"\n :transition-duration=\"duration\"\n :allow-drag-dismiss=\"props.allowDragDismiss\"\n :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n :paused=\"\n (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n \"\n :render-notification=\"\n 'renderNotification' in notification\n ? notification.renderNotification\n : props.renderNotification\n \"\n :layout=\"props.layout\"\n :stack-index=\"stackIndex\"\n :stack-size=\"orderedGroup(position).length\"\n :stack-position=\"position\"\n :stack-expanded=\"isStackExpanded(position)\"\n :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n transition-state=\"entered\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"handleHoverStart(position)\"\n @hover-end=\"handleHoverEnd(position)\"\n @expand-request=\"handleExpandRequest(position)\"\n @height-change=\"\n (height) =>\n (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n \"\n />\n </TransitionGroup>\n </Box>\n </OptionalPortal>\n</template>\n","import NotificationsComponent, { varsResolver } from './Notifications.vue'\nimport { notifications } from '../../notifications.store'\nimport classes from '../../Notifications.module.css'\n\nexport const Notifications = Object.assign(NotificationsComponent, {\n classes,\n varsResolver,\n show: notifications.show,\n hide: notifications.hide,\n update: notifications.update,\n clean: notifications.clean,\n cleanQueue: notifications.cleanQueue,\n updateState: notifications.updateState,\n})\n\nexport type {\n NotificationsCssVariables,\n NotificationsProps,\n NotificationsStylesNames,\n} from './Notifications.types'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../src/notifications.store.ts","../src/get-auto-close/get-auto-close.ts","../src/components/NotificationContainer/NotificationContainer.vue","../src/components/NotificationContainer/NotificationContainer.vue","../src/get-grouped-notifications/get-grouped-notifications.ts","../src/get-notification-state-styles.ts","../src/Notifications.module.css","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.vue","../src/components/Notifications/Notifications.ts"],"sourcesContent":["import { type Ref, type VNodeChild } from 'vue'\nimport { createStore, type MantineStore } from '@mantine-vue/store'\n\nexport type NotificationPosition =\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center'\n\nexport interface NotificationData extends Record<`data-${string}`, any> {\n /** Notification id, can be used to close or update notification. */\n id?: string\n /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component. */\n position?: NotificationPosition\n /** Notification message, required for all notifications. */\n message: any\n /** Display priority. Higher numbers are shown before lower ones when the number of active notifications exceeds `limit`. Notifications with equal priority keep insertion order (FIFO). @default 0 */\n priority?: number\n /** Determines whether notification should be closed automatically, number is auto close timeout in ms, overrides `autoClose` from `Notifications`. */\n autoClose?: boolean | number\n /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */\n allowClose?: boolean\n /** Displays an auto-close progress line, overriding the Notifications default. */\n withAutoCloseProgress?: boolean\n /** Called when notification closes. */\n onClose?: (props: NotificationData) => void\n /** Called when notification opens. */\n onOpen?: (props: NotificationData) => void\n /** Custom renderer that replaces the default notification. Set to `null` to use default rendering when a global renderer is configured. */\n renderNotification?: ((notification: NotificationData) => VNodeChild) | null\n style?: any\n withCloseButton?: boolean\n [key: string]: any\n}\n\nexport interface NotificationsState {\n notifications: NotificationData[]\n queue: NotificationData[]\n defaultPosition: NotificationPosition\n limit: number\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>\n\nfunction randomId() {\n return `mantine-${Math.random().toString(36).slice(2, 11)}`\n}\n\nexport interface SequencedNotificationData extends NotificationData {\n __sequence?: number\n}\n\nlet notificationSequence = 0\n\nfunction getDistributedNotifications(\n data: SequencedNotificationData[],\n defaultPosition: NotificationPosition,\n limit: number,\n) {\n const queue: NotificationData[] = []\n const notifications: NotificationData[] = []\n const groups = new Map<string, SequencedNotificationData[]>()\n\n for (const item of data) {\n const position = item.position || defaultPosition\n const group = groups.get(position)\n if (group) {\n group.push(item)\n } else {\n groups.set(position, [item])\n }\n }\n\n for (const group of groups.values()) {\n group.sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (a.__sequence ?? 0) - (b.__sequence ?? 0),\n )\n group.forEach((item, index) => {\n if (index < limit) notifications.push(item)\n else queue.push(item)\n })\n }\n\n return { notifications, queue }\n}\n\nexport const createNotificationsStore = () =>\n createStore<NotificationsState>({\n notifications: [],\n queue: [],\n defaultPosition: 'bottom-right',\n limit: 5,\n })\n\nexport const notificationsStore = createNotificationsStore()\nexport const useNotifications = (\n store: NotificationsStore = notificationsStore,\n): Readonly<Ref<NotificationsState>> => store.value\n\nexport function updateNotificationsState(\n store: NotificationsStore,\n update: (notifications: NotificationData[]) => NotificationData[],\n) {\n const state = store.getState()\n const notifications = update([...state.notifications, ...state.queue])\n for (const item of notifications as SequencedNotificationData[]) {\n if (item.__sequence === undefined) {\n item.__sequence = notificationSequence\n notificationSequence += 1\n }\n }\n const updated = getDistributedNotifications(notifications, state.defaultPosition, state.limit)\n\n store.setState({\n notifications: updated.notifications,\n queue: updated.queue,\n limit: state.limit,\n defaultPosition: state.defaultPosition,\n })\n}\n\nexport function showNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore,\n) {\n const id = notification.id || randomId()\n\n updateNotificationsState(store, (notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications\n }\n\n return [...notifications, { ...notification, id }]\n })\n\n return id\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, (notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n notification.onClose?.(notification)\n return false\n }\n\n return true\n }),\n )\n\n return id\n}\n\nexport function updateNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore,\n) {\n updateNotificationsState(store, (notifications) =>\n notifications.map((item) =>\n item.id === notification.id ? { ...item, ...notification } : item,\n ),\n )\n\n return notification.id\n}\n\nexport type PromiseNotificationData = Omit<NotificationData, 'id'> &\n Pick<NotificationData, 'message'>\n\nexport interface PromiseNotificationOptions<T> {\n /** Notification id shared by all promise states. */\n id?: string\n /** Notification displayed while the promise is pending. */\n loading: PromiseNotificationData\n /** Notification displayed after resolution, or a function of the resolved value. */\n success: PromiseNotificationData | ((value: T) => PromiseNotificationData)\n /** Notification displayed after rejection, or a function of the rejection reason. */\n error: PromiseNotificationData | ((error: unknown) => PromiseNotificationData)\n}\n\nfunction resolvePromiseNotificationData<T>(\n data: PromiseNotificationData | ((value: T) => PromiseNotificationData),\n value: T,\n) {\n return typeof data === 'function' ? data(value) : data\n}\n\nfunction upsertNotification(notification: NotificationData, store: NotificationsStore) {\n const state = store.getState()\n const exists = [...state.notifications, ...state.queue].some(\n (item) => item.id === notification.id,\n )\n return exists ? updateNotification(notification, store) : showNotification(notification, store)\n}\n\nconst pendingPromises = new WeakMap<NotificationsStore, Map<string, object>>()\n\nexport function promiseNotification<T>(\n promise: Promise<T>,\n options: PromiseNotificationOptions<T>,\n store: NotificationsStore = notificationsStore,\n): Promise<T> {\n const id = options.id || randomId()\n const owners = pendingPromises.get(store) || new Map<string, object>()\n const owner = {}\n pendingPromises.set(store, owners)\n owners.set(id, owner)\n\n upsertNotification(\n { loading: true, autoClose: false, ...options.loading, id } as NotificationData,\n store,\n )\n\n const settle = (data: PromiseNotificationData) => {\n if (owners.get(id) !== owner) return\n owners.delete(id)\n upsertNotification(\n { ...options.loading, loading: false, autoClose: undefined, ...data, id } as NotificationData,\n store,\n )\n }\n\n promise.then(\n (value) => settle({ color: 'teal', ...resolvePromiseNotificationData(options.success, value) }),\n (error) => settle({ color: 'red', ...resolvePromiseNotificationData(options.error, error) }),\n )\n\n return promise\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, () => [])\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n const { defaultPosition, limit } = store.getState()\n updateNotificationsState(\n store,\n (notifications) =>\n getDistributedNotifications(notifications, defaultPosition, limit).notifications,\n )\n}\n\nexport const notifications = {\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n promise: promiseNotification,\n clean: cleanNotifications,\n cleanQueue: cleanNotificationsQueue,\n updateState: updateNotificationsState,\n} as const\n","export function getAutoClose(\n autoClose: boolean | number | undefined,\n notificationAutoClose: boolean | number | undefined,\n) {\n if (typeof notificationAutoClose === 'number') {\n return notificationAutoClose\n }\n\n if (notificationAutoClose === false || autoClose === false) {\n return false\n }\n\n return autoClose\n}\n","<script setup lang=\"ts\">\nimport {\n cloneVNode,\n computed,\n isVNode,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs,\n watch,\n type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n NotificationContainerEmits,\n NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst progressRunning = ref(false)\nconst progressCycle = ref(0)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst hasAutoCloseProgress = computed(\n () =>\n (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) &&\n typeof autoCloseDuration.value === 'number',\n)\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n if (!style) return {}\n if (Array.isArray(style)) {\n return style.reduce<Record<string, any>>(\n (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n {},\n )\n }\n return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n const omittedKeys = new Set([\n 'autoClose',\n 'message',\n 'allowClose',\n 'position',\n 'style',\n 'withCloseButton',\n 'onOpen',\n 'onClose',\n 'id',\n 'renderNotification',\n 'priority',\n '__sequence',\n 'withAutoCloseProgress',\n ])\n return Object.fromEntries(\n Object.entries(props.data)\n .filter(([key]) => !omittedKeys.has(key))\n .map(([key, value]) => [key, cloneRenderable(value)]),\n )\n}\n\nfunction cloneRenderable(value: any): any {\n if (isVNode(value)) return cloneVNode(value)\n if (Array.isArray(value)) return value.map(cloneRenderable)\n return value\n}\n\nconst renderMessage = () =>\n cloneRenderable(\n typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n const transitionDuration =\n baseStyle.transitionDuration ??\n `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n const isStackedLayout = props.layout === 'stacked'\n const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n const isCollapsed = isStacked && !props.stackExpanded\n const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n const isDragging = active.value || scrollDismissActive.value\n\n let transform =\n 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n if (isStackedLayout) {\n if (isExiting) {\n const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n transform = `translateY(${exitOffset}px) ${transform}`\n } else if (props.stackExpanded) {\n transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n } else if (isStacked) {\n transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n }\n }\n\n return {\n ...baseStyle,\n ...(isStackedLayout ? { maxHeight: undefined } : {}),\n '--notifications-state-transform':\n typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n '--notifications-state-opacity': String(baseOpacity),\n '--notifications-swipe-offset': `${offset.value}px`,\n '--notifications-swipe-opacity': String(swipeOpacity),\n transform,\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n ...(isStackedLayout\n ? {\n gridArea: '1 / 1',\n zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n pointerEvents: isCollapsed ? ('none' as const) : undefined,\n alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n transition: isDragging\n ? 'none'\n : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n }\n : {}),\n }\n})\n\nconst isCollapsed = computed(\n () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => {\n window.clearTimeout(autoCloseTimeout)\n progressRunning.value = false\n}\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n emit('hide', props.data.id!)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n if (\n typeof window === 'undefined' ||\n dismissed.value ||\n active.value ||\n props.paused ||\n hovered.value ||\n focused.value ||\n typeof autoCloseDuration.value !== 'number'\n )\n return\n\n cancelAutoClose()\n autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n if (hasAutoCloseProgress.value) {\n progressCycle.value += 1\n progressRunning.value = true\n }\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n cancelScrollDismissReset()\n scrollDismissActive.value = false\n offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n dismissDirection.value = direction\n dismissed.value = true\n scrollDismissActive.value = false\n offset.value = getExitOffset(direction)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n cancelScrollDismissReset()\n scrollDismissTimeout = window.setTimeout(() => {\n scrollDismissActive.value = false\n offset.value = 0\n handleAutoClose()\n }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n if (!active.value) return\n active.value = false\n removePointerListeners()\n const movement = event.clientX - startX.value\n const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n else {\n offset.value = 0\n handleAutoClose()\n }\n}\n\nfunction removePointerListeners() {\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', finishPointerDrag)\n window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n active.value = false\n removePointerListeners()\n offset.value = 0\n if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n return\n cancelAutoClose()\n active.value = true\n startX.value = event.clientX\n startTime.value = Date.now()\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', finishPointerDrag)\n window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n if (dismissed.value || active.value) return\n const documentEvent = event.currentTarget === document\n if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n if (!props.allowScrollDismiss || isCloseDisabled.value) return\n if (!documentEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n cancelAutoClose()\n scrollDismissActive.value = true\n const nextOffset = offset.value - event.deltaX\n if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n else {\n offset.value = nextOffset\n scheduleScrollDismissReset()\n }\n}\n\nfunction handleMouseEnter() {\n hovered.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n const isActive = hovered.value || focused.value\n if (isActive && !contributedActive.value) {\n contributedActive.value = true\n emit('hoverStart')\n } else if (!isActive && contributedActive.value) {\n contributedActive.value = false\n emit('hoverEnd')\n }\n}\n\nfunction handleFocusIn() {\n if (props.layout !== 'stacked') return\n focused.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n if (props.layout !== 'stacked') return\n const next = event.relatedTarget as Node | null\n if (next && notificationRef.value?.contains(next)) return\n focused.value = false\n if (!scrollDismissActive.value) handleAutoClose()\n syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n if (\n props.layout === 'stacked' &&\n (event.pointerType === 'touch' || event.pointerType === 'pen')\n ) {\n emit('expandRequest')\n }\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n if (!enabled) return\n document.addEventListener('wheel', handleWheel, { passive: false })\n onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n [autoCloseDuration, active, dismissed, () => props.paused, hasAutoCloseProgress],\n () => {\n if (props.paused) cancelAutoClose()\n else handleAutoClose()\n },\n { immediate: true },\n)\n\nonMounted(() => {\n props.data.onOpen?.(props.data)\n notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n window.addEventListener('resize', handleResize)\n if (notificationRef.value) {\n emit('heightChange', notificationRef.value.offsetHeight)\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(() => {\n if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n })\n resizeObserver.observe(notificationRef.value)\n }\n }\n})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n hovered.value = false\n focused.value = false\n syncActiveContribution()\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n <div\n v-if=\"props.renderNotification\"\n v-bind=\"attrs\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :role=\"(attrs.role as string) || 'alert'\"\n :inert=\"isCollapsed || undefined\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderCustomNotification\" />\n </div>\n <Notification\n v-else\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :inert=\"isCollapsed || undefined\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderMessage\" />\n <div\n v-if=\"hasAutoCloseProgress\"\n :key=\"progressCycle\"\n aria-hidden=\"true\"\n v-bind=\"props.progressProps\"\n :data-paused=\"!progressRunning || undefined\"\n :style=\"[\n props.progressProps.style,\n { '--notifications-progress-duration': `${autoCloseDuration}ms` },\n ]\"\n />\n </Notification>\n</template>\n","<script setup lang=\"ts\">\nimport {\n cloneVNode,\n computed,\n isVNode,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs,\n watch,\n type CSSProperties,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from '../../get-auto-close/get-auto-close'\nimport type {\n NotificationContainerEmits,\n NotificationContainerProps,\n} from './NotificationContainer.types'\n\ndefineOptions({ name: 'NotificationContainer', inheritAttrs: false })\n\nconst props = defineProps<NotificationContainerProps>()\nconst emit = defineEmits<NotificationContainerEmits>()\nconst attrs = useAttrs()\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\nconst MAX_VISIBLE_STACK_DEPTH = 4\n\nconst notificationRef = ref<HTMLElement | null>(null)\nconst offset = ref(0)\nconst dismissed = ref(false)\nconst dismissDirection = ref<-1 | 1>(1)\nconst active = ref(false)\nconst scrollDismissActive = ref(false)\nconst hovered = ref(false)\nconst focused = ref(false)\nconst progressRunning = ref(false)\nconst progressCycle = ref(0)\nconst contributedActive = ref(false)\nconst startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\nlet resizeObserver: ResizeObserver | undefined\n\nconst autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\nconst hasAutoCloseProgress = computed(\n () =>\n (props.data.withAutoCloseProgress ?? props.withAutoCloseProgress) &&\n typeof autoCloseDuration.value === 'number',\n)\nconst isCloseDisabled = computed(() => props.data.allowClose === false)\n\nfunction normalizeStyle(style: any): Record<string, any> {\n if (!style) return {}\n if (Array.isArray(style)) {\n return style.reduce<Record<string, any>>(\n (accumulator, item) => Object.assign(accumulator, normalizeStyle(item)),\n {},\n )\n }\n return typeof style === 'object' ? style : {}\n}\n\nfunction getNotificationProps() {\n const omittedKeys = new Set([\n 'autoClose',\n 'message',\n 'allowClose',\n 'position',\n 'style',\n 'withCloseButton',\n 'onOpen',\n 'onClose',\n 'id',\n 'renderNotification',\n 'priority',\n '__sequence',\n 'withAutoCloseProgress',\n ])\n return Object.fromEntries(\n Object.entries(props.data)\n .filter(([key]) => !omittedKeys.has(key))\n .map(([key, value]) => [key, cloneRenderable(value)]),\n )\n}\n\nfunction cloneRenderable(value: any): any {\n if (isVNode(value)) return cloneVNode(value)\n if (Array.isArray(value)) return value.map(cloneRenderable)\n return value\n}\n\nconst renderMessage = () =>\n cloneRenderable(\n typeof props.data.message === 'function' ? props.data.message() : props.data.message,\n )\n\nconst renderCustomNotification = () => cloneRenderable(props.renderNotification?.(props.data))\n\nconst notificationStyle = computed<CSSProperties>(() => {\n const baseStyle = { ...normalizeStyle(attrs.style), ...normalizeStyle(props.data.style) }\n const baseOpacity = typeof baseStyle.opacity === 'number' ? baseStyle.opacity : 1\n const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * 0.6\n const transitionDuration =\n baseStyle.transitionDuration ??\n `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n\n const isStackedLayout = props.layout === 'stacked'\n const isStacked = isStackedLayout && (props.stackIndex ?? 0) > 0\n const isCollapsed = isStacked && !props.stackExpanded\n const isExiting = props.transitionState === 'exiting' || props.transitionState === 'exited'\n const stackDirection = props.stackPosition?.startsWith('top') ? 1 : -1\n const stackDepth = Math.min(props.stackIndex ?? 0, MAX_VISIBLE_STACK_DEPTH)\n const collapsedOffset = isCollapsed ? stackDepth * 10 * stackDirection : 0\n const staggerDelay = isStackedLayout ? (props.stackIndex ?? 0) * 30 : 0\n const isDragging = active.value || scrollDismissActive.value\n\n let transform =\n 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)'\n\n if (isStackedLayout) {\n if (isExiting) {\n const exitOffset = props.stackExpanded ? (props.stackExpandedOffset ?? 0) : collapsedOffset\n transform = `translateY(${exitOffset}px) ${transform}`\n } else if (props.stackExpanded) {\n transform = `translateY(${props.stackExpandedOffset ?? 0}px) translate3d(var(--notifications-swipe-offset), 0, 0)`\n } else if (isStacked) {\n transform = `scale(${1 - stackDepth * 0.03}) translateY(${collapsedOffset}px)`\n }\n }\n\n return {\n ...baseStyle,\n ...(isStackedLayout ? { maxHeight: undefined } : {}),\n '--notifications-state-transform':\n typeof baseStyle.transform === 'string' ? baseStyle.transform : 'translateX(0)',\n '--notifications-state-opacity': String(baseOpacity),\n '--notifications-swipe-offset': `${offset.value}px`,\n '--notifications-swipe-opacity': String(swipeOpacity),\n transform,\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration: isDragging ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n ...(isStackedLayout\n ? {\n gridArea: '1 / 1',\n zIndex: (props.stackSize ?? 5) - (props.stackIndex ?? 0),\n pointerEvents: isCollapsed ? ('none' as const) : undefined,\n alignSelf: stackDirection === 1 ? ('start' as const) : ('end' as const),\n transition: isDragging\n ? 'none'\n : `transform ${props.transitionDuration}ms cubic-bezier(.51,.3,0,1.21), opacity ${props.transitionDuration}ms ease`,\n transitionDelay: isDragging || isExiting ? '0ms' : `${staggerDelay}ms`,\n }\n : {}),\n }\n})\n\nconst isCollapsed = computed(\n () => props.layout === 'stacked' && (props.stackIndex ?? 0) > 0 && !props.stackExpanded,\n)\n\nconst cancelAutoClose = () => {\n window.clearTimeout(autoCloseTimeout)\n progressRunning.value = false\n}\nconst cancelHide = () => window.clearTimeout(hideTimeout)\nconst cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\nfunction handleHide() {\n emit('hide', props.data.id!)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n}\n\nfunction handleAutoClose() {\n if (\n typeof window === 'undefined' ||\n dismissed.value ||\n active.value ||\n props.paused ||\n hovered.value ||\n focused.value ||\n typeof autoCloseDuration.value !== 'number'\n )\n return\n\n cancelAutoClose()\n autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n if (hasAutoCloseProgress.value) {\n progressCycle.value += 1\n progressRunning.value = true\n }\n}\n\nfunction getExitOffset(direction: -1 | 1) {\n return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40)\n}\n\nfunction shouldDismiss(movement: number, velocity: number) {\n return Math.abs(movement) > (notificationRef.value?.offsetWidth ?? 440) * 0.35 || velocity > 0.5\n}\n\nfunction resetSwipe() {\n cancelScrollDismissReset()\n scrollDismissActive.value = false\n offset.value = 0\n}\n\nfunction dismissNotification(direction: -1 | 1) {\n dismissDirection.value = direction\n dismissed.value = true\n scrollDismissActive.value = false\n offset.value = getExitOffset(direction)\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n}\n\nfunction scheduleScrollDismissReset() {\n cancelScrollDismissReset()\n scrollDismissTimeout = window.setTimeout(() => {\n scrollDismissActive.value = false\n offset.value = 0\n handleAutoClose()\n }, SCROLL_DISMISS_RESET_TIMEOUT)\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n if (active.value && !dismissed.value) offset.value = event.clientX - startX.value\n}\n\nfunction finishPointerDrag(event: PointerEvent) {\n if (!active.value) return\n active.value = false\n removePointerListeners()\n const movement = event.clientX - startX.value\n const velocity = Math.abs(movement) / Math.max(Date.now() - startTime.value, 1)\n if (shouldDismiss(movement, velocity)) dismissNotification(movement >= 0 ? 1 : -1)\n else {\n offset.value = 0\n handleAutoClose()\n }\n}\n\nfunction removePointerListeners() {\n window.removeEventListener('pointermove', handlePointerMove)\n window.removeEventListener('pointerup', finishPointerDrag)\n window.removeEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction cancelPointerDrag(restartAutoClose = true) {\n active.value = false\n removePointerListeners()\n offset.value = 0\n if (restartAutoClose) handleAutoClose()\n}\n\nconst cancelPointerDragEvent = () => cancelPointerDrag()\n\nfunction handlePointerDown(event: PointerEvent) {\n if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0)\n return\n cancelAutoClose()\n active.value = true\n startX.value = event.clientX\n startTime.value = Date.now()\n window.addEventListener('pointermove', handlePointerMove)\n window.addEventListener('pointerup', finishPointerDrag)\n window.addEventListener('pointercancel', cancelPointerDragEvent)\n}\n\nfunction handleWheel(event: WheelEvent) {\n if (dismissed.value || active.value) return\n const documentEvent = event.currentTarget === document\n if ((!documentEvent && !hovered.value) || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return\n if (!props.allowScrollDismiss || isCloseDisabled.value) return\n if (!documentEvent) {\n event.preventDefault()\n event.stopPropagation()\n }\n cancelAutoClose()\n scrollDismissActive.value = true\n const nextOffset = offset.value - event.deltaX\n if (shouldDismiss(nextOffset, 0)) dismissNotification(nextOffset > 0 ? 1 : -1)\n else {\n offset.value = nextOffset\n scheduleScrollDismissReset()\n }\n}\n\nfunction handleMouseEnter() {\n hovered.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction syncActiveContribution() {\n const isActive = hovered.value || focused.value\n if (isActive && !contributedActive.value) {\n contributedActive.value = true\n emit('hoverStart')\n } else if (!isActive && contributedActive.value) {\n contributedActive.value = false\n emit('hoverEnd')\n }\n}\n\nfunction handleFocusIn() {\n if (props.layout !== 'stacked') return\n focused.value = true\n cancelAutoClose()\n syncActiveContribution()\n}\n\nfunction handleFocusOut(event: FocusEvent) {\n if (props.layout !== 'stacked') return\n const next = event.relatedTarget as Node | null\n if (next && notificationRef.value?.contains(next)) return\n focused.value = false\n if (!scrollDismissActive.value) handleAutoClose()\n syncActiveContribution()\n}\n\nfunction handlePointerDownCapture(event: PointerEvent) {\n if (\n props.layout === 'stacked' &&\n (event.pointerType === 'touch' || event.pointerType === 'pen')\n ) {\n emit('expandRequest')\n }\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n syncActiveContribution()\n}\n\nwatch(scrollDismissActive, (enabled, _, onCleanup) => {\n if (!enabled) return\n document.addEventListener('wheel', handleWheel, { passive: false })\n onCleanup(() => document.removeEventListener('wheel', handleWheel))\n})\n\nwatch(\n [autoCloseDuration, active, dismissed, () => props.paused, hasAutoCloseProgress],\n () => {\n if (props.paused) cancelAutoClose()\n else handleAutoClose()\n },\n { immediate: true },\n)\n\nonMounted(() => {\n props.data.onOpen?.(props.data)\n notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n window.addEventListener('resize', handleResize)\n if (notificationRef.value) {\n emit('heightChange', notificationRef.value.offsetHeight)\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(() => {\n if (notificationRef.value) emit('heightChange', notificationRef.value.offsetHeight)\n })\n resizeObserver.observe(notificationRef.value)\n }\n }\n})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n hovered.value = false\n focused.value = false\n syncActiveContribution()\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n resizeObserver?.disconnect()\n})\n\nfunction setNotificationRef(node: any) {\n notificationRef.value = node?.$el ?? node ?? null\n}\n</script>\n\n<template>\n <div\n v-if=\"props.renderNotification\"\n v-bind=\"attrs\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :role=\"(attrs.role as string) || 'alert'\"\n :inert=\"isCollapsed || undefined\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderCustomNotification\" />\n </div>\n <Notification\n v-else\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"setNotificationRef\"\n :style=\"notificationStyle\"\n :inert=\"isCollapsed || undefined\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\n @focusin=\"handleFocusIn\"\n @focusout=\"handleFocusOut\"\n @pointerdown.capture=\"handlePointerDownCapture\"\n @pointerdown=\"handlePointerDown\"\n >\n <component :is=\"renderMessage\" />\n <div\n v-if=\"hasAutoCloseProgress\"\n :key=\"progressCycle\"\n aria-hidden=\"true\"\n v-bind=\"props.progressProps\"\n :data-paused=\"!progressRunning || undefined\"\n :style=\"[\n props.progressProps.style,\n { '--notifications-progress-duration': `${autoCloseDuration}ms` },\n ]\"\n />\n </Notification>\n</template>\n","import type { NotificationData, NotificationPosition } from '../notifications.store'\n\nexport type GroupedNotifications = Record<NotificationPosition, NotificationData[]>\n\nexport const positions: NotificationPosition[] = [\n 'bottom-center',\n 'bottom-left',\n 'bottom-right',\n 'top-center',\n 'top-left',\n 'top-right',\n]\n\nexport function getGroupedNotifications(\n notifications: NotificationData[],\n defaultPosition: NotificationPosition,\n) {\n return notifications.reduce<GroupedNotifications>(\n (acc, notification) => {\n acc[notification.position || defaultPosition].push(notification)\n return acc\n },\n positions.reduce<GroupedNotifications>((acc, item) => {\n acc[item] = []\n return acc\n }, {} as GroupedNotifications),\n )\n}\n","import type { CSSProperties } from 'vue'\nimport type { NotificationPosition } from './notifications.store'\n\nexport type NotificationTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited'\n\ninterface NotificationStateStylesProps {\n state: NotificationTransitionStatus\n maxHeight: number | string\n position: NotificationPosition\n transitionDuration: number\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n}\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n}\n\nfunction toCssLength(value: number | string): string {\n return typeof value === 'number' ? `${value}px` : value\n}\n\nexport function getNotificationStateStyles({\n state,\n maxHeight,\n position,\n transitionDuration,\n}: NotificationStateStylesProps): CSSProperties {\n const [vertical, horizontal] = position.split('-')\n const property = (\n horizontal === 'center' ? `${vertical}-center` : horizontal\n ) as keyof typeof transforms\n\n const commonStyles: CSSProperties = {\n opacity: 0,\n maxHeight: toCssLength(maxHeight),\n transform: transforms[property],\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',\n transitionProperty: 'opacity, transform, max-height',\n }\n\n const inState: CSSProperties = {\n opacity: 1,\n transform: noTransform[property],\n }\n\n const outState: CSSProperties = {\n opacity: 0,\n maxHeight: toCssLength(0),\n transform: transforms[property],\n }\n\n const transitionStyles = {\n entering: inState,\n entered: inState,\n exiting: outState,\n exited: outState,\n }\n\n return { ...commonStyles, ...transitionStyles[state] }\n}\n",".root {\n width: calc(100% - var(--mantine-spacing-md) * 2);\n position: fixed;\n z-index: var(--notifications-z-index);\n max-width: var(--notifications-container-width);\n\n &:where([data-position='top-center']) {\n top: var(--mantine-spacing-md);\n left: 50%;\n transform: translateX(-50%);\n }\n\n &:where([data-position='top-left']) {\n top: var(--mantine-spacing-md);\n left: var(--mantine-spacing-md);\n }\n\n &:where([data-position='top-right']) {\n top: var(--mantine-spacing-md);\n right: var(--mantine-spacing-md);\n }\n\n &:where([data-position='bottom-center']) {\n bottom: var(--mantine-spacing-md);\n left: 50%;\n transform: translateX(-50%);\n }\n\n &:where([data-position='bottom-left']) {\n bottom: var(--mantine-spacing-md);\n left: var(--mantine-spacing-md);\n }\n\n &:where([data-position='bottom-right']) {\n bottom: var(--mantine-spacing-md);\n right: var(--mantine-spacing-md);\n }\n}\n\n.notification {\n &:where(& + &) {\n margin-top: var(--mantine-spacing-md);\n }\n\n :where([data-layout='stacked']) & {\n margin-top: 0;\n }\n}\n\n.root:where([data-layout='stacked']) {\n & > * {\n display: grid;\n }\n}\n\n.progress {\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 3px;\n background-color: var(--notification-color);\n transform: scaleX(0);\n transform-origin: left center;\n transition: opacity 200ms ease;\n animation:\n notifications-progress var(--notifications-progress-duration) linear forwards,\n notifications-progress-fade-in 200ms ease;\n\n @mixin rtl {\n transform-origin: right center;\n }\n\n &:where([data-paused]) {\n opacity: 0;\n animation-play-state: paused, running;\n }\n}\n\n@keyframes notifications-progress {\n from {\n transform: scaleX(0);\n }\n\n to {\n transform: scaleX(1);\n }\n}\n\n@keyframes notifications-progress-fade-in {\n from {\n opacity: 0;\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n Box,\n OptionalPortal,\n getDefaultZIndex,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n getGroupedNotifications,\n positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n NotificationData,\n NotificationPosition,\n SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: () => getDefaultZIndex('overlay'),\n store: () => notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n layout: 'default',\n withAutoCloseProgress: false,\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n () =>\n Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n name: 'Notifications',\n classes,\n props,\n attrs,\n classNames: props.classNames as any,\n styles: props.styles as any,\n unstyled: props.unstyled,\n vars: props.vars as any,\n varsResolver,\n})\n\nwatch(\n () => [props.limit, props.position, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n limit: props.limit || 5,\n defaultPosition: props.position,\n }))\n },\n { immediate: true },\n)\n\nfunction applyTransitionStyles(\n element: Element,\n state: 'entered' | 'exited' | 'exiting',\n position: NotificationPosition,\n) {\n Object.assign(\n (element as HTMLElement).style,\n getNotificationStateStyles({\n state,\n position,\n transitionDuration: duration.value,\n maxHeight: props.notificationMaxHeight,\n }),\n )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n void (element as HTMLElement).offsetHeight\n applyTransitionStyles(element, 'entered', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n applyTransitionStyles(element, 'exiting', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n const data = { ...notification }\n delete data.style\n return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n const items = grouped.value[position]\n if (props.layout !== 'stacked') return items\n return [...(items as SequencedNotificationData[])].sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n if (!isStackExpanded(position)) return 0\n const direction = position.startsWith('top') ? 1 : -1\n return (\n orderedGroup(position)\n .slice(0, index)\n .reduce(\n (sum, item) =>\n sum +\n (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n STACK_EXPANDED_GAP,\n 0,\n ) * direction\n )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n window.clearTimeout(collapseTimeouts[position])\n if (\n (hoveredCounts.value[position] ?? 0) > 0 ||\n hoveredGroups.value[position] ||\n pinnedPosition.value === position\n )\n return\n collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: (hoveredCounts.value[position] ?? 0) + 1,\n }\n if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n }\n if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n if (props.layout !== 'stacked') return\n hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n if (hovered) {\n window.clearTimeout(collapseTimeouts[position])\n setExpanded(position, true)\n } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n pinnedPosition.value = position\n setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n if (!pinnedPosition.value) return\n const target = event.target as Element | null\n if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n const previous = pinnedPosition.value\n pinnedPosition.value = null\n scheduleCollapse(previous)\n }\n}\n\nwatch(\n () => props.layout,\n (layout) => {\n if (layout !== 'stacked') {\n pinnedPosition.value = null\n hoveredGroups.value = {}\n expandedPositions.value = {}\n }\n },\n)\n\nwatch(grouped, (groups) => {\n if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n pinnedPosition.value = null\n }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', handleDocumentPointerDown)\n positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Box\n v-for=\"position in positions\"\n :key=\"position\"\n v-bind=\"{ ...attrs, ...getStyles('root') }\"\n :data-position=\"position\"\n :data-notifications-position=\"position\"\n :data-layout=\"props.layout\"\n >\n <TransitionGroup\n tag=\"div\"\n :css=\"false\"\n @mouseenter=\"handleGroupHover(position, true)\"\n @mouseleave=\"handleGroupHover(position, false)\"\n @focusin=\"handleGroupHover(position, true)\"\n @focusout=\"handleGroupHover(position, false)\"\n @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n @enter=\"(element, done) => enter(element, done, position)\"\n @leave=\"(element, done) => leave(element, done, position)\"\n >\n <NotificationContainer\n v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n :key=\"notification.id\"\n v-bind=\"getStyles('notification', { style: notification.style })\"\n :data=\"notificationData(notification)\"\n :auto-close=\"props.autoClose\"\n :transition-duration=\"duration\"\n :allow-drag-dismiss=\"props.allowDragDismiss\"\n :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n :paused=\"\n (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n \"\n :render-notification=\"\n 'renderNotification' in notification\n ? notification.renderNotification\n : props.renderNotification\n \"\n :layout=\"props.layout\"\n :with-auto-close-progress=\"props.withAutoCloseProgress\"\n :progress-props=\"getStyles('progress')\"\n :stack-index=\"stackIndex\"\n :stack-size=\"orderedGroup(position).length\"\n :stack-position=\"position\"\n :stack-expanded=\"isStackExpanded(position)\"\n :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n transition-state=\"entered\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"handleHoverStart(position)\"\n @hover-end=\"handleHoverEnd(position)\"\n @expand-request=\"handleExpandRequest(position)\"\n @height-change=\"\n (height) =>\n (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n \"\n />\n </TransitionGroup>\n </Box>\n </OptionalPortal>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, rem } from '@mantine-vue/core'\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-container-width': rem(containerWidth),\n },\n}))\n\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'\nimport {\n Box,\n OptionalPortal,\n getDefaultZIndex,\n useMantineTheme,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport NotificationContainer from '../NotificationContainer/NotificationContainer.vue'\nimport {\n getGroupedNotifications,\n positions,\n} from '../../get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from '../../get-notification-state-styles'\nimport { hideNotification, notificationsStore, useNotifications } from '../../notifications.store'\nimport type {\n NotificationData,\n NotificationPosition,\n SequencedNotificationData,\n} from '../../notifications.store'\nimport type { NotificationsProps } from './Notifications.types'\nimport classes from '../../Notifications.module.css'\n\ndefineOptions({ name: 'Notifications', inheritAttrs: false })\n\nconst rawProps = withDefaults(defineProps<NotificationsProps>(), {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n allowDragDismiss: true,\n allowScrollDismiss: true,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: () => getDefaultZIndex('overlay'),\n store: () => notificationsStore,\n withinPortal: true,\n pauseResetOnHover: 'all',\n layout: 'default',\n withAutoCloseProgress: false,\n})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst STACK_EXPANDED_GAP = 16\nconst FALLBACK_NOTIFICATION_HEIGHT = 80\nconst hoveredCounts = ref<Partial<Record<NotificationPosition, number>>>({})\nconst hoveredGroups = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst expandedPositions = ref<Partial<Record<NotificationPosition, boolean>>>({})\nconst pinnedPosition = ref<NotificationPosition | null>(null)\nconst notificationHeights = ref<Record<string, number>>({})\nconst collapseTimeouts: Partial<Record<NotificationPosition, number>> = {}\nconst data = useNotifications(props.store)\nconst duration = computed(() =>\n theme.value.respectReducedMotion && shouldReduceMotion.value ? 1 : props.transitionDuration,\n)\nconst grouped = computed(() => getGroupedNotifications(data.value.notifications, props.position))\nconst hoveredCount = computed(\n () =>\n Object.values(hoveredCounts.value).reduce((sum, value) => sum + (value ?? 0), 0) +\n Object.values(hoveredGroups.value).filter(Boolean).length,\n)\n\nconst getStyles = useStyles({\n name: 'Notifications',\n classes,\n props,\n attrs,\n classNames: props.classNames as any,\n styles: props.styles as any,\n unstyled: props.unstyled,\n vars: props.vars as any,\n varsResolver,\n})\n\nwatch(\n () => [props.limit, props.position, props.store] as const,\n () => {\n props.store.setState((current) => ({\n ...current,\n limit: props.limit || 5,\n defaultPosition: props.position,\n }))\n },\n { immediate: true },\n)\n\nfunction applyTransitionStyles(\n element: Element,\n state: 'entered' | 'exited' | 'exiting',\n position: NotificationPosition,\n) {\n Object.assign(\n (element as HTMLElement).style,\n getNotificationStateStyles({\n state,\n position,\n transitionDuration: duration.value,\n maxHeight: props.notificationMaxHeight,\n }),\n )\n}\n\nfunction enter(element: Element, done: () => void, position: NotificationPosition) {\n void (element as HTMLElement).offsetHeight\n applyTransitionStyles(element, 'entered', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction leave(element: Element, done: () => void, position: NotificationPosition) {\n applyTransitionStyles(element, 'exiting', position)\n window.setTimeout(done, duration.value)\n}\n\nfunction notificationData(notification: NotificationData) {\n const data = { ...notification }\n delete data.style\n return data\n}\n\nfunction isStackExpanded(position: NotificationPosition) {\n return props.layout === 'stacked' && Boolean(expandedPositions.value[position])\n}\n\nfunction orderedGroup(position: NotificationPosition) {\n const items = grouped.value[position]\n if (props.layout !== 'stacked') return items\n return [...(items as SequencedNotificationData[])].sort(\n (a, b) => (b.priority ?? 0) - (a.priority ?? 0) || (b.__sequence ?? 0) - (a.__sequence ?? 0),\n )\n}\n\nfunction expandedOffset(position: NotificationPosition, index: number) {\n if (!isStackExpanded(position)) return 0\n const direction = position.startsWith('top') ? 1 : -1\n return (\n orderedGroup(position)\n .slice(0, index)\n .reduce(\n (sum, item) =>\n sum +\n (notificationHeights.value[item.id!] ?? FALLBACK_NOTIFICATION_HEIGHT) +\n STACK_EXPANDED_GAP,\n 0,\n ) * direction\n )\n}\n\nfunction setExpanded(position: NotificationPosition, expanded: boolean) {\n expandedPositions.value = { ...expandedPositions.value, [position]: expanded }\n}\n\nfunction scheduleCollapse(position: NotificationPosition) {\n window.clearTimeout(collapseTimeouts[position])\n if (\n (hoveredCounts.value[position] ?? 0) > 0 ||\n hoveredGroups.value[position] ||\n pinnedPosition.value === position\n )\n return\n collapseTimeouts[position] = window.setTimeout(() => setExpanded(position, false), 200)\n}\n\nfunction handleHoverStart(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: (hoveredCounts.value[position] ?? 0) + 1,\n }\n if (props.layout === 'stacked') setExpanded(position, true)\n}\n\nfunction handleHoverEnd(position: NotificationPosition) {\n hoveredCounts.value = {\n ...hoveredCounts.value,\n [position]: Math.max(0, (hoveredCounts.value[position] ?? 0) - 1),\n }\n if (props.layout === 'stacked') scheduleCollapse(position)\n}\n\nfunction handleGroupHover(position: NotificationPosition, hovered: boolean) {\n if (props.layout !== 'stacked') return\n hoveredGroups.value = { ...hoveredGroups.value, [position]: hovered }\n if (hovered) {\n window.clearTimeout(collapseTimeouts[position])\n setExpanded(position, true)\n } else scheduleCollapse(position)\n}\n\nfunction handleExpandRequest(position: NotificationPosition) {\n pinnedPosition.value = position\n setExpanded(position, true)\n}\n\nfunction handleDocumentPointerDown(event: PointerEvent) {\n if (!pinnedPosition.value) return\n const target = event.target as Element | null\n if (!target?.closest(`[data-notifications-position=\"${pinnedPosition.value}\"]`)) {\n const previous = pinnedPosition.value\n pinnedPosition.value = null\n scheduleCollapse(previous)\n }\n}\n\nwatch(\n () => props.layout,\n (layout) => {\n if (layout !== 'stacked') {\n pinnedPosition.value = null\n hoveredGroups.value = {}\n expandedPositions.value = {}\n }\n },\n)\n\nwatch(grouped, (groups) => {\n if (pinnedPosition.value && groups[pinnedPosition.value].length === 0) {\n pinnedPosition.value = null\n }\n})\n\nonMounted(() => document.addEventListener('pointerdown', handleDocumentPointerDown))\nonBeforeUnmount(() => {\n document.removeEventListener('pointerdown', handleDocumentPointerDown)\n positions.forEach((position) => window.clearTimeout(collapseTimeouts[position]))\n})\n</script>\n\n<template>\n <OptionalPortal v-bind=\"props.portalProps\" :within-portal=\"props.withinPortal\">\n <Box\n v-for=\"position in positions\"\n :key=\"position\"\n v-bind=\"{ ...attrs, ...getStyles('root') }\"\n :data-position=\"position\"\n :data-notifications-position=\"position\"\n :data-layout=\"props.layout\"\n >\n <TransitionGroup\n tag=\"div\"\n :css=\"false\"\n @mouseenter=\"handleGroupHover(position, true)\"\n @mouseleave=\"handleGroupHover(position, false)\"\n @focusin=\"handleGroupHover(position, true)\"\n @focusout=\"handleGroupHover(position, false)\"\n @before-enter=\"(element) => applyTransitionStyles(element, 'exited', position)\"\n @enter=\"(element, done) => enter(element, done, position)\"\n @leave=\"(element, done) => leave(element, done, position)\"\n >\n <NotificationContainer\n v-for=\"(notification, stackIndex) in orderedGroup(position)\"\n :key=\"notification.id\"\n v-bind=\"getStyles('notification', { style: notification.style })\"\n :data=\"notificationData(notification)\"\n :auto-close=\"props.autoClose\"\n :transition-duration=\"duration\"\n :allow-drag-dismiss=\"props.allowDragDismiss\"\n :allow-scroll-dismiss=\"props.allowScrollDismiss\"\n :paused=\"\n (props.pauseResetOnHover === 'all' && hoveredCount > 0) ||\n (props.layout === 'stacked' && !isStackExpanded(position) && stackIndex > 0)\n \"\n :render-notification=\"\n 'renderNotification' in notification\n ? notification.renderNotification\n : props.renderNotification\n \"\n :layout=\"props.layout\"\n :with-auto-close-progress=\"props.withAutoCloseProgress\"\n :progress-props=\"getStyles('progress')\"\n :stack-index=\"stackIndex\"\n :stack-size=\"orderedGroup(position).length\"\n :stack-position=\"position\"\n :stack-expanded=\"isStackExpanded(position)\"\n :stack-expanded-offset=\"expandedOffset(position, stackIndex)\"\n transition-state=\"entered\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"handleHoverStart(position)\"\n @hover-end=\"handleHoverEnd(position)\"\n @expand-request=\"handleExpandRequest(position)\"\n @height-change=\"\n (height) =>\n (notificationHeights = { ...notificationHeights, [notification.id!]: height })\n \"\n />\n </TransitionGroup>\n </Box>\n </OptionalPortal>\n</template>\n","import NotificationsComponent, { varsResolver } from './Notifications.vue'\nimport { notifications } from '../../notifications.store'\nimport classes from '../../Notifications.module.css'\n\nexport const Notifications = Object.assign(NotificationsComponent, {\n classes,\n varsResolver,\n show: notifications.show,\n hide: notifications.hide,\n update: notifications.update,\n promise: notifications.promise,\n clean: notifications.clean,\n cleanQueue: notifications.cleanQueue,\n updateState: notifications.updateState,\n})\n\nexport type {\n NotificationsCssVariables,\n NotificationsProps,\n NotificationsStylesNames,\n} from './Notifications.types'\n"],"mappings":"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"}
|