@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 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 = () => window.clearTimeout(autoCloseTimeout);
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: "_root_1hrsl_1",
526
- notification: "_notification_1hrsl_40"
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
- className: attrs.class,
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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"}