@mantine-vue/notifications 1.1.2

package/esm/index.mjs.map

@@ -0,0 +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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"}

package/lib/NotificationContainer.d.ts

@@ -0,0 +1,82 @@
+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>;

package/lib/Notifications.d.ts

@@ -0,0 +1,314 @@
+import { type PropType } from 'vue';
+import { hideNotification, type NotificationPosition, type NotificationsStore } from './notifications.store';
+export type NotificationsStylesNames = 'root' | 'notification';
+export type NotificationsCssVariables = {
+    root: '--notifications-z-index' | '--notifications-container-width';
+};
+export interface NotificationsProps {
+    position?: NotificationPosition;
+    autoClose?: number | false;
+    transitionDuration?: number;
+    allowDragDismiss?: boolean;
+    allowScrollDismiss?: boolean;
+    containerWidth?: number | string;
+    notificationMaxHeight?: number | string;
+    limit?: number;
+    zIndex?: string | number;
+    portalProps?: Record<string, any>;
+    store?: NotificationsStore;
+    withinPortal?: boolean;
+    pauseResetOnHover?: 'all' | 'notification';
+    classNames?: Record<string, any>;
+    styles?: Record<string, any>;
+    vars?: Record<string, any>;
+    unstyled?: boolean;
+}
+export declare const Notifications: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        position: {
+            type: PropType<NotificationPosition>;
+            default: undefined;
+        };
+        autoClose: {
+            type: PropType<number | false>;
+            default: undefined;
+        };
+        transitionDuration: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        allowDragDismiss: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        allowScrollDismiss: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        containerWidth: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        notificationMaxHeight: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        limit: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        zIndex: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        portalProps: {
+            type: PropType<Record<string, any>>;
+            default: undefined;
+        };
+        store: {
+            type: PropType<NotificationsStore>;
+            default: undefined;
+        };
+        withinPortal: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        pauseResetOnHover: {
+            type: PropType<"all" | "notification">;
+            default: undefined;
+        };
+        classNames: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        styles: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        vars: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        unstyled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        limit: number;
+        position: NotificationPosition;
+        transitionDuration: number;
+        zIndex: string | number;
+        vars: Function | Record<string, any>;
+        unstyled: boolean;
+        withinPortal: boolean;
+        portalProps: Record<string, any>;
+        containerWidth: string | number;
+        store: NotificationsStore;
+        autoClose: number | false;
+        allowDragDismiss: boolean;
+        allowScrollDismiss: boolean;
+        notificationMaxHeight: string | number;
+        pauseResetOnHover: "all" | "notification";
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        position: {
+            type: PropType<NotificationPosition>;
+            default: undefined;
+        };
+        autoClose: {
+            type: PropType<number | false>;
+            default: undefined;
+        };
+        transitionDuration: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        allowDragDismiss: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        allowScrollDismiss: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        containerWidth: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        notificationMaxHeight: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        limit: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+        zIndex: {
+            type: PropType<number | string>;
+            default: undefined;
+        };
+        portalProps: {
+            type: PropType<Record<string, any>>;
+            default: undefined;
+        };
+        store: {
+            type: PropType<NotificationsStore>;
+            default: undefined;
+        };
+        withinPortal: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
+        pauseResetOnHover: {
+            type: PropType<"all" | "notification">;
+            default: undefined;
+        };
+        classNames: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        styles: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        vars: {
+            type: (ObjectConstructor | FunctionConstructor)[];
+            default: undefined;
+        };
+        unstyled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        classNames: Function | Record<string, any>;
+        styles: Function | Record<string, any>;
+        limit: number;
+        position: NotificationPosition;
+        transitionDuration: number;
+        zIndex: string | number;
+        vars: Function | Record<string, any>;
+        unstyled: boolean;
+        withinPortal: boolean;
+        portalProps: Record<string, any>;
+        containerWidth: string | number;
+        store: NotificationsStore;
+        autoClose: number | false;
+        allowDragDismiss: boolean;
+        allowScrollDismiss: boolean;
+        notificationMaxHeight: string | number;
+        pauseResetOnHover: "all" | "notification";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    position: {
+        type: PropType<NotificationPosition>;
+        default: undefined;
+    };
+    autoClose: {
+        type: PropType<number | false>;
+        default: undefined;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    allowDragDismiss: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    allowScrollDismiss: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    containerWidth: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    notificationMaxHeight: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    limit: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    zIndex: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    portalProps: {
+        type: PropType<Record<string, any>>;
+        default: undefined;
+    };
+    store: {
+        type: PropType<NotificationsStore>;
+        default: undefined;
+    };
+    withinPortal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    pauseResetOnHover: {
+        type: PropType<"all" | "notification">;
+        default: undefined;
+    };
+    classNames: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    styles: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    vars: {
+        type: (ObjectConstructor | FunctionConstructor)[];
+        default: undefined;
+    };
+    unstyled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    classNames: Function | Record<string, any>;
+    styles: Function | Record<string, any>;
+    limit: number;
+    position: NotificationPosition;
+    transitionDuration: number;
+    zIndex: string | number;
+    vars: Function | Record<string, any>;
+    unstyled: boolean;
+    withinPortal: boolean;
+    portalProps: Record<string, any>;
+    containerWidth: string | number;
+    store: NotificationsStore;
+    autoClose: number | false;
+    allowDragDismiss: boolean;
+    allowScrollDismiss: boolean;
+    notificationMaxHeight: string | number;
+    pauseResetOnHover: "all" | "notification";
+}, {}, 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 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;
+};

package/lib/get-auto-close/get-auto-close.d.ts

@@ -0,0 +1 @@
+export declare function getAutoClose(autoClose: boolean | number | undefined, notificationAutoClose: boolean | number | undefined): number | boolean | undefined;

package/lib/get-grouped-notifications/get-grouped-notifications.d.ts

@@ -0,0 +1,4 @@
+import type { NotificationData, NotificationPosition } from '../notifications.store';
+export type GroupedNotifications = Record<NotificationPosition, NotificationData[]>;
+export declare const positions: NotificationPosition[];
+export declare function getGroupedNotifications(notifications: NotificationData[], defaultPosition: NotificationPosition): GroupedNotifications;

package/lib/get-notification-state-styles.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from 'vue';
+import type { NotificationPosition } from './notifications.store';
+export type NotificationTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+interface NotificationStateStylesProps {
+    state: NotificationTransitionStatus;
+    maxHeight: number | string;
+    position: NotificationPosition;
+    transitionDuration: number;
+}
+export declare function getNotificationStateStyles({ state, maxHeight, position, transitionDuration, }: NotificationStateStylesProps): CSSProperties;
+export {};

package/lib/index.d.mts

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

package/lib/index.d.ts

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

package/lib/notifications.store.d.ts

@@ -0,0 +1,39 @@
+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> {
+    id?: string;
+    position?: NotificationPosition;
+    message: any;
+    autoClose?: boolean | number;
+    allowClose?: boolean;
+    onClose?: (props: NotificationData) => void;
+    onOpen?: (props: NotificationData) => void;
+    style?: any;
+    withCloseButton?: boolean;
+    [key: string]: any;
+}
+export interface NotificationsState {
+    notifications: NotificationData[];
+    queue: NotificationData[];
+    defaultPosition: NotificationPosition;
+    limit: number;
+}
+export type NotificationsStore = MantineStore<NotificationsState>;
+export declare const createNotificationsStore: () => MantineStore<NotificationsState>;
+export declare const notificationsStore: MantineStore<NotificationsState>;
+export declare const useNotifications: (store?: NotificationsStore) => Readonly<Ref<NotificationsState>>;
+export declare function updateNotificationsState(store: NotificationsStore, update: (notifications: NotificationData[]) => NotificationData[]): void;
+export declare function showNotification(notification: NotificationData, store?: NotificationsStore): string;
+export declare function hideNotification(id: string, store?: NotificationsStore): string;
+export declare function updateNotification(notification: NotificationData, store?: NotificationsStore): string | undefined;
+export declare function cleanNotifications(store?: NotificationsStore): void;
+export declare function cleanNotificationsQueue(store?: NotificationsStore): void;
+export declare const notifications: {
+    readonly show: typeof showNotification;
+    readonly hide: typeof hideNotification;
+    readonly update: typeof updateNotification;
+    readonly clean: typeof cleanNotifications;
+    readonly cleanQueue: typeof cleanNotificationsQueue;
+    readonly updateState: typeof updateNotificationsState;
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@mantine-vue/notifications",
+  "version": "1.1.2",
+  "description": "Vue notifications system equivalent to @mantine/notifications",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "@mantine-vue/hooks": "workspace:*",
+    "@mantine-vue/store": "workspace:*",
+    "@vue/compiler-dom": "^3.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "1.1.1",
+    "@mantine-vue/hooks": "1.1.2",
+    "@mantine-vue/store": "1.1.1",
+    "vue": "^3.5.0"
+  }
+}

package/styles.css

@@ -0,0 +1,43 @@
+._root_1izcx_1 {
+  width: calc(100% - var(--mantine-spacing-md) * 2);
+  position: fixed;
+  z-index: var(--notifications-z-index);
+  max-width: var(--notifications-container-width);
+}
+
+  ._root_1izcx_1:where([data-position='top-center']) {
+    top: var(--mantine-spacing-md);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  ._root_1izcx_1:where([data-position='top-left']) {
+    top: var(--mantine-spacing-md);
+    left: var(--mantine-spacing-md);
+  }
+
+  ._root_1izcx_1:where([data-position='top-right']) {
+    top: var(--mantine-spacing-md);
+    right: var(--mantine-spacing-md);
+  }
+
+  ._root_1izcx_1:where([data-position='bottom-center']) {
+    bottom: var(--mantine-spacing-md);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  ._root_1izcx_1:where([data-position='bottom-left']) {
+    bottom: var(--mantine-spacing-md);
+    left: var(--mantine-spacing-md);
+  }
+
+  ._root_1izcx_1:where([data-position='bottom-right']) {
+    bottom: var(--mantine-spacing-md);
+    right: var(--mantine-spacing-md);
+  }
+
+._notification_1izcx_40 + ._notification_1izcx_40 {
+    margin-top: var(--mantine-spacing-md);
+  }
+/*$vite$:1*/