@mantine-vue/notifications 3.2.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/index.cjs +255 -23
  2. package/cjs/index.cjs.map +1 -1
  3. package/esm/index.mjs +255 -23
  4. package/esm/index.mjs.map +1 -1
  5. package/lib/components/NotificationContainer/NotificationContainer.types.d.ts +20 -1
  6. package/lib/components/NotificationContainer/NotificationContainer.vue.d.ts +4 -0
  7. package/lib/components/Notifications/Notifications.types.d.ts +6 -1
  8. package/lib/notifications.store.d.ts +6 -1
  9. package/package.json +4 -4
  10. package/styles.css +16 -8
  11. package/styles.layer.css +16 -8
package/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","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 } 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 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\ninterface 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} 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\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 startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\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 ])\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 notificationStyle = computed(() => {\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 return {\n ...baseStyle,\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 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)',\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration:\n active.value || scrollDismissActive.value ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n }\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 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 emit('hoverStart')\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n emit('hoverEnd')\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})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n if (hovered.value) emit('hoverEnd')\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n})\n</script>\n\n<template>\n <Notification\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"(node: any) => (notificationRef = node?.$el ?? node)\"\n :style=\"notificationStyle\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\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} 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\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 startX = ref(0)\nconst startTime = ref(0)\nlet autoCloseTimeout = -1\nlet hideTimeout = -1\nlet scrollDismissTimeout = -1\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 ])\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 notificationStyle = computed(() => {\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 return {\n ...baseStyle,\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 'var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)',\n opacity: 'calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))',\n transitionDuration:\n active.value || scrollDismissActive.value ? '0ms, 0ms, 0ms' : transitionDuration,\n cursor: 'default',\n touchAction: 'pan-y',\n }\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 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 emit('hoverStart')\n}\n\nfunction handleMouseLeave() {\n hovered.value = false\n if (!scrollDismissActive.value) {\n resetSwipe()\n handleAutoClose()\n }\n emit('hoverEnd')\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})\n\nfunction handleResize() {\n if (dismissed.value) offset.value = getExitOffset(dismissDirection.value)\n}\n\nonBeforeUnmount(() => {\n if (hovered.value) emit('hoverEnd')\n cancelAutoClose()\n cancelHide()\n cancelScrollDismissReset()\n cancelPointerDrag(false)\n notificationRef.value?.removeEventListener('wheel', handleWheel)\n window.removeEventListener('resize', handleResize)\n})\n</script>\n\n<template>\n <Notification\n v-bind=\"{ ...attrs, ...getNotificationProps() }\"\n :ref=\"(node: any) => (notificationRef = node?.$el ?? node)\"\n :style=\"notificationStyle\"\n :with-close-button=\"isCloseDisabled ? false : props.data.withCloseButton\"\n @close=\"handleHide\"\n @mouseenter=\"handleMouseEnter\"\n @mouseleave=\"handleMouseLeave\"\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","<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, 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 { NotificationData, NotificationPosition } 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})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst hoveredCount = ref(0)\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))\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</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 >\n <TransitionGroup\n :css=\"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 in grouped[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=\"props.pauseResetOnHover === 'all' && hoveredCount > 0\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"hoveredCount += 1\"\n @hover-end=\"hoveredCount = Math.max(0, hoveredCount - 1)\"\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, 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 { NotificationData, NotificationPosition } 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})\nconst attrs = useAttrs()\nconst props = useProps('Notifications', null, rawProps)\nconst theme = useMantineTheme()\nconst shouldReduceMotion = useReducedMotion()\nconst hoveredCount = ref(0)\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))\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</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 >\n <TransitionGroup\n :css=\"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 in grouped[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=\"props.pauseResetOnHover === 'all' && hoveredCount > 0\"\n @hide=\"(id) => hideNotification(id, props.store)\"\n @hover-start=\"hoveredCount += 1\"\n @hover-end=\"hoveredCount = Math.max(0, hoveredCount - 1)\"\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.mjs","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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"}
package/lib/components/NotificationContainer/NotificationContainer.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import type { NotificationData } from '../../notifications.store';
1
+ import type { VNodeChild } from 'vue';
2
+ import type { NotificationData, NotificationPosition } from '../../notifications.store';
2
3
  /** Internal props accepted by `NotificationContainer`. */
3
4
  export interface NotificationContainerProps {
4
5
  /** Notification data rendered by the container. */
@@ -13,6 +14,22 @@ export interface NotificationContainerProps {
13
14
  allowScrollDismiss: boolean;
14
15
  /** Pauses the auto-close timer. */
15
16
  paused: boolean;
17
+ /** Custom renderer used instead of the default Notification component. */
18
+ renderNotification?: ((notification: NotificationData) => VNodeChild) | null;
19
+ /** Notification layout inherited from the notifications container. */
20
+ layout?: 'default' | 'stacked';
21
+ /** Zero-based position of the notification in its stack. */
22
+ stackIndex?: number;
23
+ /** Total number of notifications in the stack. */
24
+ stackSize?: number;
25
+ /** Screen position used to determine stack expansion direction. */
26
+ stackPosition?: NotificationPosition;
27
+ /** Determines whether the notification stack is expanded. */
28
+ stackExpanded?: boolean;
29
+ /** Pixel offset applied when the notification stack is expanded. */
30
+ stackExpandedOffset?: number;
31
+ /** Current transition state used to coordinate stacked transforms. */
32
+ transitionState?: 'entered' | 'exited' | 'exiting';
16
33
  }
17
34
  /** Events emitted by `NotificationContainer`. */
18
35
  export interface NotificationContainerEmits {
@@ -22,4 +39,6 @@ export interface NotificationContainerEmits {
22
39
  hoverStart: [];
23
40
  /** Emitted when the pointer leaves the notification. */
24
41
  hoverEnd: [];
42
+ expandRequest: [];
43
+ heightChange: [height: number];
25
44
  }
package/lib/components/NotificationContainer/NotificationContainer.vue.d.ts CHANGED
@@ -3,10 +3,14 @@ declare const __VLS_export: import("vue").DefineComponent<NotificationContainerP
3
3
  hide: (id: string) => any;
4
4
  hoverStart: () => any;
5
5
  hoverEnd: () => any;
6
+ expandRequest: () => any;
7
+ heightChange: (height: number) => any;
6
8
  }, string, import("vue").PublicProps, Readonly<NotificationContainerProps> & Readonly<{
7
9
  onHide?: ((id: string) => any) | undefined;
8
10
  onHoverStart?: (() => any) | undefined;
9
11
  onHoverEnd?: (() => any) | undefined;
12
+ onExpandRequest?: (() => any) | undefined;
13
+ onHeightChange?: ((height: number) => any) | undefined;
10
14
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
11
15
  declare const _default: typeof __VLS_export;
12
16
  export default _default;
package/lib/components/Notifications/Notifications.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import type { VNodeChild } from 'vue';
1
2
  import type { ClassNames, Styles, Vars } from '@mantine-vue/core';
2
- import type { NotificationPosition, NotificationsStore } from '../../notifications.store';
3
+ import type { NotificationData, NotificationPosition, NotificationsStore } from '../../notifications.store';
3
4
  export type NotificationsStylesNames = 'root' | 'notification';
4
5
  export type NotificationsCssVariables = {
5
6
  root: '--notifications-z-index' | '--notifications-container-width';
@@ -32,6 +33,10 @@ export interface NotificationsProps {
32
33
  withinPortal?: boolean;
33
34
  /** Determines which notifications should pause auto close on hover, `'all'` – pauses auto close for all notifications when any notification is hovered, `'notification'` – pauses auto close only for the hovered notification. @default 'all' */
34
35
  pauseResetOnHover?: 'all' | 'notification';
36
+ /** Custom render function that replaces the default notification. Can be overridden per notification. */
37
+ renderNotification?: (notification: NotificationData) => VNodeChild;
38
+ /** Controls notification layout. @default 'default' */
39
+ layout?: 'default' | 'stacked';
35
40
  /** CSS classes applied to component elements. */
36
41
  classNames?: ClassNames<NotificationsProps>;
37
42
  /** Inline styles applied to component elements. */
package/lib/notifications.store.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type Ref } from 'vue';
1
+ import { type Ref, type VNodeChild } from 'vue';
2
2
  import { type MantineStore } from '@mantine-vue/store';
3
3
  export type NotificationPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
4
4
  export interface NotificationData extends Record<`data-${string}`, any> {
@@ -18,6 +18,8 @@ export interface NotificationData extends Record<`data-${string}`, any> {
18
18
  onClose?: (props: NotificationData) => void;
19
19
  /** Called when notification opens. */
20
20
  onOpen?: (props: NotificationData) => void;
21
+ /** Custom renderer that replaces the default notification. Set to `null` to use default rendering when a global renderer is configured. */
22
+ renderNotification?: ((notification: NotificationData) => VNodeChild) | null;
21
23
  style?: any;
22
24
  withCloseButton?: boolean;
23
25
  [key: string]: any;
@@ -29,6 +31,9 @@ export interface NotificationsState {
29
31
  limit: number;
30
32
  }
31
33
  export type NotificationsStore = MantineStore<NotificationsState>;
34
+ export interface SequencedNotificationData extends NotificationData {
35
+ __sequence?: number;
36
+ }
32
37
  export declare const createNotificationsStore: () => MantineStore<NotificationsState>;
33
38
  export declare const notificationsStore: MantineStore<NotificationsState>;
34
39
  export declare const useNotifications: (store?: NotificationsStore) => Readonly<Ref<NotificationsState>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine-vue/notifications",
3
- "version": "3.2.0",
3
+ "version": "3.4.0",
4
4
  "description": "Vue notifications system equivalent to @mantine/notifications",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -40,9 +40,9 @@
40
40
  "vue": "^3.5.0"
41
41
  },
42
42
  "peerDependencies": {
43
- "@mantine-vue/core": "3.2.0",
44
- "@mantine-vue/hooks": "3.2.0",
45
- "@mantine-vue/store": "3.2.0",
43
+ "@mantine-vue/core": "3.4.0",
44
+ "@mantine-vue/hooks": "3.4.0",
45
+ "@mantine-vue/store": "3.4.0",
46
46
  "vue": "^3.5.0"
47
47
  }
48
48
  }
package/styles.css CHANGED
@@ -1,43 +1,51 @@
1
- ._root_1izcx_1 {
1
+ ._root_1hrsl_1 {
2
2
  width: calc(100% - var(--mantine-spacing-md) * 2);
3
3
  position: fixed;
4
4
  z-index: var(--notifications-z-index);
5
5
  max-width: var(--notifications-container-width);
6
6
  }
7
7
 
8
- ._root_1izcx_1:where([data-position='top-center']) {
8
+ ._root_1hrsl_1:where([data-position='top-center']) {
9
9
  top: var(--mantine-spacing-md);
10
10
  left: 50%;
11
11
  transform: translateX(-50%);
12
12
  }
13
13
 
14
- ._root_1izcx_1:where([data-position='top-left']) {
14
+ ._root_1hrsl_1:where([data-position='top-left']) {
15
15
  top: var(--mantine-spacing-md);
16
16
  left: var(--mantine-spacing-md);
17
17
  }
18
18
 
19
- ._root_1izcx_1:where([data-position='top-right']) {
19
+ ._root_1hrsl_1:where([data-position='top-right']) {
20
20
  top: var(--mantine-spacing-md);
21
21
  right: var(--mantine-spacing-md);
22
22
  }
23
23
 
24
- ._root_1izcx_1:where([data-position='bottom-center']) {
24
+ ._root_1hrsl_1:where([data-position='bottom-center']) {
25
25
  bottom: var(--mantine-spacing-md);
26
26
  left: 50%;
27
27
  transform: translateX(-50%);
28
28
  }
29
29
 
30
- ._root_1izcx_1:where([data-position='bottom-left']) {
30
+ ._root_1hrsl_1:where([data-position='bottom-left']) {
31
31
  bottom: var(--mantine-spacing-md);
32
32
  left: var(--mantine-spacing-md);
33
33
  }
34
34
 
35
- ._root_1izcx_1:where([data-position='bottom-right']) {
35
+ ._root_1hrsl_1:where([data-position='bottom-right']) {
36
36
  bottom: var(--mantine-spacing-md);
37
37
  right: var(--mantine-spacing-md);
38
38
  }
39
39
 
40
- ._notification_1izcx_40 + ._notification_1izcx_40 {
40
+ ._notification_1hrsl_40 + ._notification_1hrsl_40 {
41
41
  margin-top: var(--mantine-spacing-md);
42
42
  }
43
+
44
+ :where([data-layout='stacked']) ._notification_1hrsl_40 {
45
+ margin-top: 0;
46
+ }
47
+
48
+ ._root_1hrsl_1:where([data-layout='stacked']) > * {
49
+ display: grid;
50
+ }
43
51
  /*$vite$:1*/
package/styles.layer.css CHANGED
@@ -1,45 +1,53 @@
1
1
  @layer mantine {
2
- ._root_1izcx_1 {
2
+ ._root_1hrsl_1 {
3
3
  width: calc(100% - var(--mantine-spacing-md) * 2);
4
4
  position: fixed;
5
5
  z-index: var(--notifications-z-index);
6
6
  max-width: var(--notifications-container-width);
7
7
  }
8
8
 
9
- ._root_1izcx_1:where([data-position='top-center']) {
9
+ ._root_1hrsl_1:where([data-position='top-center']) {
10
10
  top: var(--mantine-spacing-md);
11
11
  left: 50%;
12
12
  transform: translateX(-50%);
13
13
  }
14
14
 
15
- ._root_1izcx_1:where([data-position='top-left']) {
15
+ ._root_1hrsl_1:where([data-position='top-left']) {
16
16
  top: var(--mantine-spacing-md);
17
17
  left: var(--mantine-spacing-md);
18
18
  }
19
19
 
20
- ._root_1izcx_1:where([data-position='top-right']) {
20
+ ._root_1hrsl_1:where([data-position='top-right']) {
21
21
  top: var(--mantine-spacing-md);
22
22
  right: var(--mantine-spacing-md);
23
23
  }
24
24
 
25
- ._root_1izcx_1:where([data-position='bottom-center']) {
25
+ ._root_1hrsl_1:where([data-position='bottom-center']) {
26
26
  bottom: var(--mantine-spacing-md);
27
27
  left: 50%;
28
28
  transform: translateX(-50%);
29
29
  }
30
30
 
31
- ._root_1izcx_1:where([data-position='bottom-left']) {
31
+ ._root_1hrsl_1:where([data-position='bottom-left']) {
32
32
  bottom: var(--mantine-spacing-md);
33
33
  left: var(--mantine-spacing-md);
34
34
  }
35
35
 
36
- ._root_1izcx_1:where([data-position='bottom-right']) {
36
+ ._root_1hrsl_1:where([data-position='bottom-right']) {
37
37
  bottom: var(--mantine-spacing-md);
38
38
  right: var(--mantine-spacing-md);
39
39
  }
40
40
 
41
- ._notification_1izcx_40 + ._notification_1izcx_40 {
41
+ ._notification_1hrsl_40 + ._notification_1hrsl_40 {
42
42
  margin-top: var(--mantine-spacing-md);
43
43
  }
44
+
45
+ :where([data-layout='stacked']) ._notification_1hrsl_40 {
46
+ margin-top: 0;
47
+ }
48
+
49
+ ._root_1hrsl_1:where([data-layout='stacked']) > * {
50
+ display: grid;
51
+ }
44
52
  /*$vite$:1*/
45
53
  }