@mantine-vue/notifications 3.0.0 → 3.2.0

package/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/notifications.store.ts","../src/get-grouped-notifications/get-grouped-notifications.ts","../src/get-notification-state-styles.ts","../src/get-auto-close/get-auto-close.ts","../src/NotificationContainer.ts","../src/Notifications.module.css","../src/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  id?: string\n  position?: NotificationPosition\n  message: any\n  autoClose?: boolean | number\n  allowClose?: boolean\n  onClose?: (props: NotificationData) => void\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\nfunction getDistributedNotifications(\n  data: NotificationData[],\n  defaultPosition: NotificationPosition,\n  limit: number,\n) {\n  const queue: NotificationData[] = []\n  const notifications: NotificationData[] = []\n  const count: Record<string, number> = {}\n\n  for (const item of data) {\n    const position = item.position || defaultPosition\n    count[position] = count[position] || 0\n    count[position] += 1\n\n    if (count[position] <= limit) {\n      notifications.push(item)\n    } else {\n      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  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  updateNotificationsState(store, (notifications) => notifications.slice(0, store.getState().limit))\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","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","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","import {\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  type CSSProperties,\n  type PropType,\n} from 'vue'\nimport { Notification } from '@mantine-vue/core'\nimport { getAutoClose } from './get-auto-close/get-auto-close'\nimport type { NotificationData } from './notifications.store'\n\nconst SCROLL_DISMISS_RESET_TIMEOUT = 120\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      (acc, item) => Object.assign(acc, normalizeStyle(item)),\n      {},\n    )\n  }\n  return typeof style === 'object' ? style : {}\n}\n\nfunction renderContent(value: any) {\n  return typeof value === 'function' ? value() : value\n}\n\nfunction getNotificationProps(data: NotificationData) {\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\n  return Object.entries(data).reduce<Record<string, any>>((acc, [key, value]) => {\n    if (!omittedKeys.has(key)) {\n      acc[key] = value\n    }\n\n    return acc\n  }, {})\n}\n\nexport const NotificationContainer = defineComponent({\n  name: 'NotificationContainer',\n  inheritAttrs: false,\n  props: {\n    data: { type: Object as PropType<NotificationData>, required: true },\n    autoClose: { type: [Boolean, Number] as PropType<number | false>, required: true },\n    transitionDuration: { type: Number, required: true },\n    allowDragDismiss: { type: Boolean, required: true },\n    allowScrollDismiss: { type: Boolean, required: true },\n    paused: { type: Boolean, required: true },\n    onHide: { type: Function as PropType<(id: string) => void>, required: true },\n    onHoverStart: { type: Function as PropType<() => void>, default: undefined },\n    onHoverEnd: { type: Function as PropType<() => void>, default: undefined },\n  },\n  setup(props, { attrs }) {\n    const notificationRef = ref<HTMLElement | null>(null)\n    const offset = ref(0)\n    const dismissed = ref(false)\n    const dismissDirection = ref<-1 | 1>(1)\n    const active = ref(false)\n    const scrollDismissActive = ref(false)\n    const hovered = ref(false)\n    const startX = ref(0)\n    const startTime = ref(0)\n    let autoCloseTimeout = -1\n    let hideTimeout = -1\n    let scrollDismissTimeout = -1\n\n    const autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose))\n    const isCloseDisabled = computed(() => props.data.allowClose === false)\n\n    const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout)\n    const cancelHide = () => window.clearTimeout(hideTimeout)\n    const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout)\n\n    const setSwipeOffset = (value: number) => {\n      offset.value = value\n    }\n\n    const handleHide = () => {\n      props.onHide(props.data.id!)\n      cancelAutoClose()\n      cancelHide()\n      cancelScrollDismissReset()\n    }\n\n    const 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\n      cancelAutoClose()\n      autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value)\n    }\n\n    const getExitOffset = (direction: -1 | 1) => {\n      const width = notificationRef.value?.offsetWidth ?? 440\n      return direction * (width + 40)\n    }\n\n    const shouldDismiss = (movement: number, velocity: number) => {\n      const width = notificationRef.value?.offsetWidth ?? 440\n      return Math.abs(movement) > width * 0.35 || velocity > 0.5\n    }\n\n    const resetSwipe = () => {\n      cancelScrollDismissReset()\n      scrollDismissActive.value = false\n      setSwipeOffset(0)\n    }\n\n    const dismissNotification = (direction: -1 | 1) => {\n      dismissDirection.value = direction\n      dismissed.value = true\n      scrollDismissActive.value = false\n      setSwipeOffset(getExitOffset(direction))\n      cancelAutoClose()\n      cancelHide()\n      cancelScrollDismissReset()\n      hideTimeout = window.setTimeout(handleHide, props.transitionDuration)\n    }\n\n    const scheduleScrollDismissReset = () => {\n      cancelScrollDismissReset()\n      scrollDismissTimeout = window.setTimeout(() => {\n        scrollDismissActive.value = false\n        setSwipeOffset(0)\n        handleAutoClose()\n      }, SCROLL_DISMISS_RESET_TIMEOUT)\n    }\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (!active.value || dismissed.value) {\n        return\n      }\n\n      setSwipeOffset(event.clientX - startX.value)\n    }\n\n    const finishPointerDrag = (event: PointerEvent) => {\n      if (!active.value) {\n        return\n      }\n\n      active.value = false\n      window.removeEventListener('pointermove', handlePointerMove)\n      window.removeEventListener('pointerup', finishPointerDrag)\n      window.removeEventListener('pointercancel', cancelPointerDragEvent)\n\n      const movement = event.clientX - startX.value\n      const elapsed = Math.max(Date.now() - startTime.value, 1)\n      const velocity = Math.abs(movement) / elapsed\n      const direction = movement === 0 ? 1 : movement > 0 ? 1 : -1\n\n      if (shouldDismiss(movement, velocity)) {\n        dismissNotification(direction)\n      } else {\n        setSwipeOffset(0)\n        handleAutoClose()\n      }\n    }\n\n    function cancelPointerDrag(shouldRestartAutoClose = true) {\n      active.value = false\n      window.removeEventListener('pointermove', handlePointerMove)\n      window.removeEventListener('pointerup', finishPointerDrag)\n      window.removeEventListener('pointercancel', cancelPointerDragEvent)\n      setSwipeOffset(0)\n      if (shouldRestartAutoClose) {\n        handleAutoClose()\n      }\n    }\n\n    const cancelPointerDragEvent = () => cancelPointerDrag()\n\n    const handlePointerDown = (event: PointerEvent) => {\n      if (\n        !props.allowDragDismiss ||\n        isCloseDisabled.value ||\n        dismissed.value ||\n        event.button !== 0\n      ) {\n        return\n      }\n\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\n    const handleWheel = (event: WheelEvent) => {\n      if (dismissed.value || active.value) {\n        return\n      }\n\n      const isDocumentEvent = event.currentTarget === document\n      if (!isDocumentEvent && !hovered.value) {\n        return\n      }\n\n      const { deltaX, deltaY } = event\n      if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) {\n        return\n      }\n\n      if (!props.allowScrollDismiss || isCloseDisabled.value) {\n        return\n      }\n\n      if (!isDocumentEvent) {\n        event.preventDefault()\n        event.stopPropagation()\n      }\n\n      cancelAutoClose()\n      scrollDismissActive.value = true\n\n      const nextOffset = offset.value - deltaX\n      const direction = nextOffset > 0 ? 1 : -1\n\n      if (shouldDismiss(nextOffset, 0)) {\n        dismissNotification(direction)\n        return\n      }\n\n      setSwipeOffset(nextOffset)\n      scheduleScrollDismissReset()\n    }\n\n    const handleMouseEnter = () => {\n      hovered.value = true\n      cancelAutoClose()\n      props.onHoverStart?.()\n    }\n\n    const handleMouseLeave = () => {\n      hovered.value = false\n\n      if (!scrollDismissActive.value) {\n        resetSwipe()\n        handleAutoClose()\n      }\n\n      props.onHoverEnd?.()\n    }\n\n    const handleResize = () => {\n      if (dismissed.value) {\n        setSwipeOffset(getExitOffset(dismissDirection.value))\n      }\n    }\n\n    watch(\n      () => scrollDismissActive.value,\n      (value, _, onCleanup) => {\n        if (!value) {\n          return\n        }\n\n        document.addEventListener('wheel', handleWheel, { passive: false })\n        onCleanup(() => document.removeEventListener('wheel', handleWheel))\n      },\n    )\n\n    watch(\n      [autoCloseDuration, active, dismissed, () => props.paused],\n      () => {\n        if (props.paused) {\n          cancelAutoClose()\n        } else {\n          handleAutoClose()\n        }\n      },\n      { immediate: true },\n    )\n\n    onMounted(() => {\n      props.data.onOpen?.(props.data)\n      notificationRef.value?.addEventListener('wheel', handleWheel, { passive: false })\n      window.addEventListener('resize', handleResize)\n    })\n\n    onBeforeUnmount(() => {\n      cancelAutoClose()\n      cancelHide()\n      cancelScrollDismissReset()\n      cancelPointerDrag(false)\n      notificationRef.value?.removeEventListener('wheel', handleWheel)\n      window.removeEventListener('resize', handleResize)\n    })\n\n    return () => {\n      const resolvedAttrsStyle = normalizeStyle(attrs.style)\n      const resolvedDataStyle = normalizeStyle(props.data.style)\n      const baseStyle = { ...resolvedAttrsStyle, ...resolvedDataStyle }\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 resolvedTransitionDuration =\n        baseStyle.transitionDuration ??\n        `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`\n      const notificationStyle: CSSProperties = {\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' : resolvedTransitionDuration,\n        cursor: 'default',\n        touchAction: 'pan-y',\n      } as CSSProperties\n\n      return h(\n        Notification,\n        {\n          ...attrs,\n          ...getNotificationProps(props.data),\n          ref: (node: any) => {\n            notificationRef.value = node?.$el ?? node\n          },\n          style: notificationStyle,\n          withCloseButton: isCloseDisabled.value ? false : props.data.withCloseButton,\n          onClose: handleHide,\n          onMouseenter: handleMouseEnter,\n          onMouseleave: handleMouseLeave,\n          onPointerdown: handlePointerDown,\n        },\n        () => renderContent(props.data.message),\n      )\n    }\n  },\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","import { TransitionGroup, computed, defineComponent, h, ref, watch, type PropType } from 'vue'\nimport {\n  Box,\n  OptionalPortal,\n  createVarsResolver,\n  getDefaultZIndex,\n  rem,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine-vue/core'\nimport { useReducedMotion } from '@mantine-vue/hooks'\nimport {\n  getGroupedNotifications,\n  positions,\n} from './get-grouped-notifications/get-grouped-notifications'\nimport { getNotificationStateStyles } from './get-notification-state-styles'\nimport { NotificationContainer } from './NotificationContainer'\nimport {\n  hideNotification,\n  notifications,\n  notificationsStore,\n  useNotifications,\n  type NotificationPosition,\n  type NotificationsStore,\n} from './notifications.store'\nimport classes from './Notifications.module.css'\n\nexport type NotificationsStylesNames = 'root' | 'notification'\nexport type NotificationsCssVariables = {\n  root: '--notifications-z-index' | '--notifications-container-width'\n}\n\nexport interface NotificationsProps {\n  position?: NotificationPosition\n  autoClose?: number | false\n  transitionDuration?: number\n  allowDragDismiss?: boolean\n  allowScrollDismiss?: boolean\n  containerWidth?: number | string\n  notificationMaxHeight?: number | string\n  limit?: number\n  zIndex?: string | number\n  portalProps?: Record<string, any>\n  store?: NotificationsStore\n  withinPortal?: boolean\n  pauseResetOnHover?: 'all' | 'notification'\n  classNames?: Record<string, any>\n  styles?: Record<string, any>\n  vars?: Record<string, any>\n  unstyled?: boolean\n}\n\nconst defaultProps = {\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} satisfies Partial<NotificationsProps>\n\nconst varsResolver = createVarsResolver<any>((_, { zIndex, containerWidth }) => ({\n  root: {\n    '--notifications-z-index': zIndex?.toString(),\n    '--notifications-container-width': rem(containerWidth),\n  },\n}))\n\nfunction applyTransitionStyles(\n  element: Element,\n  state: 'entered' | 'exited' | 'exiting',\n  position: NotificationPosition,\n  transitionDuration: number,\n  maxHeight: number | string,\n) {\n  Object.assign(\n    (element as HTMLElement).style,\n    getNotificationStateStyles({\n      state,\n      position,\n      transitionDuration,\n      maxHeight,\n    }),\n  )\n}\n\nconst NotificationsBase = defineComponent({\n  name: 'Notifications',\n  inheritAttrs: false,\n  props: {\n    position: { type: String as PropType<NotificationPosition>, default: undefined },\n    autoClose: { type: [Number, Boolean] as PropType<number | false>, default: undefined },\n    transitionDuration: { type: Number, default: undefined },\n    allowDragDismiss: { type: Boolean, default: undefined },\n    allowScrollDismiss: { type: Boolean, default: undefined },\n    containerWidth: { type: [Number, String] as PropType<number | string>, default: undefined },\n    notificationMaxHeight: {\n      type: [Number, String] as PropType<number | string>,\n      default: undefined,\n    },\n    limit: { type: Number, default: undefined },\n    zIndex: { type: [Number, String] as PropType<number | string>, default: undefined },\n    portalProps: { type: Object as PropType<Record<string, any>>, default: undefined },\n    store: { type: Object as PropType<NotificationsStore>, default: undefined },\n    withinPortal: { type: Boolean, default: undefined },\n    pauseResetOnHover: { type: String as PropType<'all' | 'notification'>, default: undefined },\n    classNames: { type: [Object, Function], default: undefined },\n    styles: { type: [Object, Function], default: undefined },\n    vars: { type: [Object, Function], default: undefined },\n    unstyled: { type: Boolean, default: false },\n  },\n  setup(rawProps, { attrs }) {\n    const props = useProps<NotificationsProps>('Notifications', defaultProps, rawProps as any)\n    const theme = useMantineTheme()\n    const shouldReduceMotion = useReducedMotion()\n    const hoveredCount = ref(0)\n    const data = useNotifications(props.store)\n    const reduceMotion = computed(() =>\n      theme.value.respectReducedMotion ? shouldReduceMotion.value : false,\n    )\n    const duration = computed(() => (reduceMotion.value ? 1 : props.transitionDuration!))\n\n    const 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\n    watch(\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\n    const handleHoverStart = () => {\n      hoveredCount.value += 1\n    }\n\n    const handleHoverEnd = () => {\n      hoveredCount.value = Math.max(0, hoveredCount.value - 1)\n    }\n\n    return () => {\n      const grouped = getGroupedNotifications(data.value.notifications, props.position!)\n      const rootProps = (position: NotificationPosition) => ({\n        ...attrs,\n        ...getStyles('root'),\n        'data-position': position,\n      })\n\n      const renderGroup = (position: NotificationPosition) =>\n        h(Box, rootProps(position), () =>\n          h(\n            TransitionGroup,\n            {\n              css: false,\n              onBeforeEnter: (el: Element) =>\n                applyTransitionStyles(\n                  el,\n                  'exited',\n                  position,\n                  duration.value,\n                  props.notificationMaxHeight!,\n                ),\n              onEnter: (el: Element, done: () => void) => {\n                void (el as HTMLElement).offsetHeight\n                applyTransitionStyles(\n                  el,\n                  'entered',\n                  position,\n                  duration.value,\n                  props.notificationMaxHeight!,\n                )\n                window.setTimeout(done, duration.value)\n              },\n              onLeave: (el: Element, done: () => void) => {\n                applyTransitionStyles(\n                  el,\n                  'exiting',\n                  position,\n                  duration.value,\n                  props.notificationMaxHeight!,\n                )\n                window.setTimeout(done, duration.value)\n              },\n            },\n            () =>\n              grouped[position].map(({ style: notificationStyle, ...notification }) =>\n                h(NotificationContainer, {\n                  key: notification.id,\n                  data: notification,\n                  onHide: (id) => hideNotification(id, props.store),\n                  autoClose: props.autoClose!,\n                  transitionDuration: duration.value,\n                  allowDragDismiss: props.allowDragDismiss!,\n                  allowScrollDismiss: props.allowScrollDismiss!,\n                  paused: props.pauseResetOnHover === 'all' ? hoveredCount.value > 0 : false,\n                  onHoverStart: handleHoverStart,\n                  onHoverEnd: handleHoverEnd,\n                  ...getStyles('notification', { style: notificationStyle }),\n                }),\n              ),\n          ),\n        )\n\n      return h(OptionalPortal, { withinPortal: props.withinPortal, ...props.portalProps }, () =>\n        positions.map((position) => renderGroup(position)),\n      )\n    }\n  },\n})\n\nexport const Notifications = Object.assign(NotificationsBase, {\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"],"mappings":"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"}
+{"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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"}

package/lib/components/NotificationContainer/NotificationContainer.types.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationData } from '../../notifications.store';
+/** Internal props accepted by `NotificationContainer`. */
+export interface NotificationContainerProps {
+    /** Notification data rendered by the container. */
+    data: NotificationData;
+    /** Default auto-close timeout. */
+    autoClose: number | false;
+    /** Exit transition duration in milliseconds. */
+    transitionDuration: number;
+    /** Enables pointer-drag dismissal. */
+    allowDragDismiss: boolean;
+    /** Enables horizontal scroll dismissal. */
+    allowScrollDismiss: boolean;
+    /** Pauses the auto-close timer. */
+    paused: boolean;
+}
+/** Events emitted by `NotificationContainer`. */
+export interface NotificationContainerEmits {
+    /** Emitted when the notification should be removed. */
+    hide: [id: string];
+    /** Emitted when the pointer enters the notification. */
+    hoverStart: [];
+    /** Emitted when the pointer leaves the notification. */
+    hoverEnd: [];
+}

package/lib/components/NotificationContainer/NotificationContainer.vue.d.ts

@@ -0,0 +1,12 @@
+import type { NotificationContainerProps } from './NotificationContainer.types';
+declare const __VLS_export: import("vue").DefineComponent<NotificationContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (id: string) => any;
+    hoverStart: () => any;
+    hoverEnd: () => any;
+}, string, import("vue").PublicProps, Readonly<NotificationContainerProps> & Readonly<{
+    onHide?: ((id: string) => any) | undefined;
+    onHoverStart?: (() => any) | undefined;
+    onHoverEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/components/NotificationContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NotificationContainer } from './NotificationContainer.vue';
+export type { NotificationContainerProps } from './NotificationContainer.types';
+export type { NotificationContainerEmits } from './NotificationContainer.types';

package/lib/components/Notifications/Notifications.d.ts

@@ -0,0 +1,23 @@
+export declare const Notifications: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Notifications.types").NotificationsProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./Notifications.types").NotificationsProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./Notifications.types").NotificationsProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    classes: Record<string, string>;
+    varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+    show: typeof import("../../notifications.store").showNotification;
+    hide: typeof import("../../notifications.store").hideNotification;
+    update: typeof import("../../notifications.store").updateNotification;
+    clean: typeof import("../../notifications.store").cleanNotifications;
+    cleanQueue: typeof import("../../notifications.store").cleanNotificationsQueue;
+    updateState: typeof import("../../notifications.store").updateNotificationsState;
+};
+export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './Notifications.types';

package/lib/components/Notifications/Notifications.types.d.ts

@@ -0,0 +1,43 @@
+import type { ClassNames, Styles, Vars } from '@mantine-vue/core';
+import type { NotificationPosition, NotificationsStore } from '../../notifications.store';
+export type NotificationsStylesNames = 'root' | 'notification';
+export type NotificationsCssVariables = {
+    root: '--notifications-z-index' | '--notifications-container-width';
+};
+/** Props accepted by `Notifications`. */
+export interface NotificationsProps {
+    /** Notifications default position. @default 'bottom-right' */
+    position?: NotificationPosition;
+    /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function. @default 4000 */
+    autoClose?: number | false;
+    /** Notification transition duration in ms. @default 250 */
+    transitionDuration?: number;
+    /** Determines whether notifications can be dismissed by dragging left or right. @default true */
+    allowDragDismiss?: boolean;
+    /** Determines whether notifications can be dismissed with horizontal scroll gesture while hovered. @default true */
+    allowScrollDismiss?: boolean;
+    /** Notification width, cannot exceed 100%. @default 440 */
+    containerWidth?: number | string;
+    /** Notification `max-height`, used for transitions. @default 200 */
+    notificationMaxHeight?: number | string;
+    /** Maximum number of notifications displayed at a time, other new notifications will be added to queue. @default 5 */
+    limit?: number;
+    /** Notifications container z-index. @default 400 */
+    zIndex?: string | number;
+    /** Props passed down to the `Portal` component. */
+    portalProps?: Record<string, any>;
+    /** Store for notifications state, can be used to create multiple instances of notifications system in your application. */
+    store?: NotificationsStore;
+    /** Determines whether notifications container should be rendered inside `Portal`. @default true */
+    withinPortal?: boolean;
+    /** 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' */
+    pauseResetOnHover?: 'all' | 'notification';
+    /** CSS classes applied to component elements. */
+    classNames?: ClassNames<NotificationsProps>;
+    /** Inline styles applied to component elements. */
+    styles?: Styles<NotificationsProps>;
+    /** CSS variables resolver. */
+    vars?: Vars<NotificationsProps>;
+    /** Removes default component styles. @default false */
+    unstyled?: boolean;
+}

package/lib/components/Notifications/Notifications.vue.d.ts

@@ -0,0 +1,6 @@
+import type { NotificationsProps } from './Notifications.types';
+declare const varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<NotificationsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotificationsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/lib/components/Notifications/index.d.ts

@@ -0,0 +1 @@
+export * from './Notifications';

package/lib/index.d.mts

@@ -1,4 +1,4 @@
 export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
-export { Notifications } from './Notifications';
+export { Notifications } from './components/Notifications';
 export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, } from './notifications.store';
-export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './Notifications';
+export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './components/Notifications';

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export { notifications, showNotification, hideNotification, cleanNotifications, cleanNotificationsQueue, updateNotification, updateNotificationsState, createNotificationsStore, notificationsStore, useNotifications, } from './notifications.store';
-export { Notifications } from './Notifications';
+export { Notifications } from './components/Notifications';
 export type { NotificationData, NotificationPosition, NotificationsState, NotificationsStore, } from './notifications.store';
-export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './Notifications';
+export type { NotificationsCssVariables, NotificationsProps, NotificationsStylesNames, } from './components/Notifications';

package/lib/notifications.store.d.ts

@@ -2,12 +2,21 @@ import { type Ref } from 'vue';
 import { type MantineStore } from '@mantine-vue/store';
 export type NotificationPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
 export interface NotificationData extends Record<`data-${string}`, any> {
+    /** Notification id, can be used to close or update notification. */
     id?: string;
+    /** Position of the notification, if not set, the position is determined based on `position` prop on Notifications component. */
     position?: NotificationPosition;
+    /** Notification message, required for all notifications. */
     message: any;
+    /** 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 */
+    priority?: number;
+    /** Determines whether notification should be closed automatically, number is auto close timeout in ms, overrides `autoClose` from `Notifications`. */
     autoClose?: boolean | number;
+    /** Determines whether notification can be closed with close button, drag or horizontal scroll swipe. @default true */
     allowClose?: boolean;
+    /** Called when notification closes. */
     onClose?: (props: NotificationData) => void;
+    /** Called when notification opens. */
     onOpen?: (props: NotificationData) => void;
     style?: any;
     withCloseButton?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/notifications",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Vue notifications system equivalent to @mantine/notifications",
   "license": "MIT",
   "files": [
@@ -40,9 +40,9 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "3.0.0",
-    "@mantine-vue/hooks": "3.0.0",
-    "@mantine-vue/store": "3.0.0",
+    "@mantine-vue/core": "3.2.0",
+    "@mantine-vue/hooks": "3.2.0",
+    "@mantine-vue/store": "3.2.0",
     "vue": "^3.5.0"
   }
 }

package/lib/NotificationContainer.d.ts

@@ -1,82 +0,0 @@
-import { type PropType } from 'vue';
-import type { NotificationData } from './notifications.store';
-export declare const NotificationContainer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    data: {
-        type: PropType<NotificationData>;
-        required: true;
-    };
-    autoClose: {
-        type: PropType<number | false>;
-        required: true;
-    };
-    transitionDuration: {
-        type: NumberConstructor;
-        required: true;
-    };
-    allowDragDismiss: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    allowScrollDismiss: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    paused: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onHide: {
-        type: PropType<(id: string) => void>;
-        required: true;
-    };
-    onHoverStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onHoverEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    data: {
-        type: PropType<NotificationData>;
-        required: true;
-    };
-    autoClose: {
-        type: PropType<number | false>;
-        required: true;
-    };
-    transitionDuration: {
-        type: NumberConstructor;
-        required: true;
-    };
-    allowDragDismiss: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    allowScrollDismiss: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    paused: {
-        type: BooleanConstructor;
-        required: true;
-    };
-    onHide: {
-        type: PropType<(id: string) => void>;
-        required: true;
-    };
-    onHoverStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onHoverEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    onHoverStart: () => void;
-    onHoverEnd: () => void;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;