@mantine-vue/notifications 1.1.2

package/esm/index.mjs

@@ -0,0 +1,626 @@
+import { createStore } from "@mantine-vue/store";
+import { TransitionGroup, computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Box, Notification, OptionalPortal, createVarsResolver, getDefaultZIndex, rem, useMantineTheme, useProps, useStyles } from "@mantine-vue/core";
+import { useReducedMotion } from "@mantine-vue/hooks";
+//#region src/notifications.store.ts
+function randomId() {
+	return `mantine-${Math.random().toString(36).slice(2, 11)}`;
+}
+function getDistributedNotifications(data, defaultPosition, limit) {
+	const queue = [];
+	const notifications = [];
+	const count = {};
+	for (const item of data) {
+		const position = item.position || defaultPosition;
+		count[position] = count[position] || 0;
+		count[position] += 1;
+		if (count[position] <= limit) notifications.push(item);
+		else queue.push(item);
+	}
+	return {
+		notifications,
+		queue
+	};
+}
+var createNotificationsStore = () => createStore({
+	notifications: [],
+	queue: [],
+	defaultPosition: "bottom-right",
+	limit: 5
+});
+var notificationsStore = createNotificationsStore();
+var useNotifications = (store = notificationsStore) => store.value;
+function updateNotificationsState(store, update) {
+	const state = store.getState();
+	const updated = getDistributedNotifications(update([...state.notifications, ...state.queue]), state.defaultPosition, state.limit);
+	store.setState({
+		notifications: updated.notifications,
+		queue: updated.queue,
+		limit: state.limit,
+		defaultPosition: state.defaultPosition
+	});
+}
+function showNotification(notification, store = notificationsStore) {
+	const id = notification.id || randomId();
+	updateNotificationsState(store, (notifications) => {
+		if (notification.id && notifications.some((n) => n.id === notification.id)) return notifications;
+		return [...notifications, {
+			...notification,
+			id
+		}];
+	});
+	return id;
+}
+function hideNotification(id, store = notificationsStore) {
+	updateNotificationsState(store, (notifications) => notifications.filter((notification) => {
+		if (notification.id === id) {
+			notification.onClose?.(notification);
+			return false;
+		}
+		return true;
+	}));
+	return id;
+}
+function updateNotification(notification, store = notificationsStore) {
+	updateNotificationsState(store, (notifications) => notifications.map((item) => item.id === notification.id ? {
+		...item,
+		...notification
+	} : item));
+	return notification.id;
+}
+function cleanNotifications(store = notificationsStore) {
+	updateNotificationsState(store, () => []);
+}
+function cleanNotificationsQueue(store = notificationsStore) {
+	updateNotificationsState(store, (notifications) => notifications.slice(0, store.getState().limit));
+}
+var notifications = {
+	show: showNotification,
+	hide: hideNotification,
+	update: updateNotification,
+	clean: cleanNotifications,
+	cleanQueue: cleanNotificationsQueue,
+	updateState: updateNotificationsState
+};
+//#endregion
+//#region src/get-grouped-notifications/get-grouped-notifications.ts
+var positions = [
+	"bottom-center",
+	"bottom-left",
+	"bottom-right",
+	"top-center",
+	"top-left",
+	"top-right"
+];
+function getGroupedNotifications(notifications, defaultPosition) {
+	return notifications.reduce((acc, notification) => {
+		acc[notification.position || defaultPosition].push(notification);
+		return acc;
+	}, positions.reduce((acc, item) => {
+		acc[item] = [];
+		return acc;
+	}, {}));
+}
+//#endregion
+//#region src/get-notification-state-styles.ts
+var transforms = {
+	left: "translateX(-100%)",
+	right: "translateX(100%)",
+	"top-center": "translateY(-100%)",
+	"bottom-center": "translateY(100%)"
+};
+var noTransform = {
+	left: "translateX(0)",
+	right: "translateX(0)",
+	"top-center": "translateY(0)",
+	"bottom-center": "translateY(0)"
+};
+function toCssLength(value) {
+	return typeof value === "number" ? `${value}px` : value;
+}
+function getNotificationStateStyles({ state, maxHeight, position, transitionDuration }) {
+	const [vertical, horizontal] = position.split("-");
+	const property = horizontal === "center" ? `${vertical}-center` : horizontal;
+	const commonStyles = {
+		opacity: 0,
+		maxHeight: toCssLength(maxHeight),
+		transform: transforms[property],
+		transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,
+		transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",
+		transitionProperty: "opacity, transform, max-height"
+	};
+	const inState = {
+		opacity: 1,
+		transform: noTransform[property]
+	};
+	const outState = {
+		opacity: 0,
+		maxHeight: toCssLength(0),
+		transform: transforms[property]
+	};
+	const transitionStyles = {
+		entering: inState,
+		entered: inState,
+		exiting: outState,
+		exited: outState
+	};
+	return {
+		...commonStyles,
+		...transitionStyles[state]
+	};
+}
+//#endregion
+//#region src/get-auto-close/get-auto-close.ts
+function getAutoClose(autoClose, notificationAutoClose) {
+	if (typeof notificationAutoClose === "number") return notificationAutoClose;
+	if (notificationAutoClose === false || autoClose === false) return false;
+	return autoClose;
+}
+//#endregion
+//#region src/NotificationContainer.ts
+var SCROLL_DISMISS_RESET_TIMEOUT = 120;
+function normalizeStyle(style) {
+	if (!style) return {};
+	if (Array.isArray(style)) return style.reduce((acc, item) => Object.assign(acc, normalizeStyle(item)), {});
+	return typeof style === "object" ? style : {};
+}
+function renderContent(value) {
+	return typeof value === "function" ? value() : value;
+}
+function getNotificationProps(data) {
+	const omittedKeys = new Set([
+		"autoClose",
+		"message",
+		"allowClose",
+		"position",
+		"style",
+		"withCloseButton",
+		"onOpen",
+		"onClose",
+		"id"
+	]);
+	return Object.entries(data).reduce((acc, [key, value]) => {
+		if (!omittedKeys.has(key)) acc[key] = value;
+		return acc;
+	}, {});
+}
+var NotificationContainer = defineComponent({
+	name: "NotificationContainer",
+	inheritAttrs: false,
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		autoClose: {
+			type: [Boolean, Number],
+			required: true
+		},
+		transitionDuration: {
+			type: Number,
+			required: true
+		},
+		allowDragDismiss: {
+			type: Boolean,
+			required: true
+		},
+		allowScrollDismiss: {
+			type: Boolean,
+			required: true
+		},
+		paused: {
+			type: Boolean,
+			required: true
+		},
+		onHide: {
+			type: Function,
+			required: true
+		},
+		onHoverStart: {
+			type: Function,
+			default: void 0
+		},
+		onHoverEnd: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(props, { attrs }) {
+		const notificationRef = ref(null);
+		const offset = ref(0);
+		const dismissed = ref(false);
+		const dismissDirection = ref(1);
+		const active = ref(false);
+		const scrollDismissActive = ref(false);
+		const hovered = ref(false);
+		const startX = ref(0);
+		const startTime = ref(0);
+		let autoCloseTimeout = -1;
+		let hideTimeout = -1;
+		let scrollDismissTimeout = -1;
+		const autoCloseDuration = computed(() => getAutoClose(props.autoClose, props.data.autoClose));
+		const isCloseDisabled = computed(() => props.data.allowClose === false);
+		const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout);
+		const cancelHide = () => window.clearTimeout(hideTimeout);
+		const cancelScrollDismissReset = () => window.clearTimeout(scrollDismissTimeout);
+		const setSwipeOffset = (value) => {
+			offset.value = value;
+		};
+		const handleHide = () => {
+			props.onHide(props.data.id);
+			cancelAutoClose();
+			cancelHide();
+			cancelScrollDismissReset();
+		};
+		const handleAutoClose = () => {
+			if (typeof window === "undefined" || dismissed.value || active.value || props.paused || hovered.value || typeof autoCloseDuration.value !== "number") return;
+			cancelAutoClose();
+			autoCloseTimeout = window.setTimeout(handleHide, autoCloseDuration.value);
+		};
+		const getExitOffset = (direction) => {
+			return direction * ((notificationRef.value?.offsetWidth ?? 440) + 40);
+		};
+		const shouldDismiss = (movement, velocity) => {
+			const width = notificationRef.value?.offsetWidth ?? 440;
+			return Math.abs(movement) > width * .35 || velocity > .5;
+		};
+		const resetSwipe = () => {
+			cancelScrollDismissReset();
+			scrollDismissActive.value = false;
+			setSwipeOffset(0);
+		};
+		const dismissNotification = (direction) => {
+			dismissDirection.value = direction;
+			dismissed.value = true;
+			scrollDismissActive.value = false;
+			setSwipeOffset(getExitOffset(direction));
+			cancelAutoClose();
+			cancelHide();
+			cancelScrollDismissReset();
+			hideTimeout = window.setTimeout(handleHide, props.transitionDuration);
+		};
+		const scheduleScrollDismissReset = () => {
+			cancelScrollDismissReset();
+			scrollDismissTimeout = window.setTimeout(() => {
+				scrollDismissActive.value = false;
+				setSwipeOffset(0);
+				handleAutoClose();
+			}, SCROLL_DISMISS_RESET_TIMEOUT);
+		};
+		const handlePointerMove = (event) => {
+			if (!active.value || dismissed.value) return;
+			setSwipeOffset(event.clientX - startX.value);
+		};
+		const finishPointerDrag = (event) => {
+			if (!active.value) return;
+			active.value = false;
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", finishPointerDrag);
+			window.removeEventListener("pointercancel", cancelPointerDragEvent);
+			const movement = event.clientX - startX.value;
+			const elapsed = Math.max(Date.now() - startTime.value, 1);
+			const velocity = Math.abs(movement) / elapsed;
+			const direction = movement === 0 ? 1 : movement > 0 ? 1 : -1;
+			if (shouldDismiss(movement, velocity)) dismissNotification(direction);
+			else {
+				setSwipeOffset(0);
+				handleAutoClose();
+			}
+		};
+		function cancelPointerDrag(shouldRestartAutoClose = true) {
+			active.value = false;
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", finishPointerDrag);
+			window.removeEventListener("pointercancel", cancelPointerDragEvent);
+			setSwipeOffset(0);
+			if (shouldRestartAutoClose) handleAutoClose();
+		}
+		const cancelPointerDragEvent = () => cancelPointerDrag();
+		const handlePointerDown = (event) => {
+			if (!props.allowDragDismiss || isCloseDisabled.value || dismissed.value || event.button !== 0) return;
+			cancelAutoClose();
+			active.value = true;
+			startX.value = event.clientX;
+			startTime.value = Date.now();
+			window.addEventListener("pointermove", handlePointerMove);
+			window.addEventListener("pointerup", finishPointerDrag);
+			window.addEventListener("pointercancel", cancelPointerDragEvent);
+		};
+		const handleWheel = (event) => {
+			if (dismissed.value || active.value) return;
+			const isDocumentEvent = event.currentTarget === document;
+			if (!isDocumentEvent && !hovered.value) return;
+			const { deltaX, deltaY } = event;
+			if (Math.abs(deltaX) <= Math.abs(deltaY) || deltaX === 0) return;
+			if (!props.allowScrollDismiss || isCloseDisabled.value) return;
+			if (!isDocumentEvent) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			cancelAutoClose();
+			scrollDismissActive.value = true;
+			const nextOffset = offset.value - deltaX;
+			const direction = nextOffset > 0 ? 1 : -1;
+			if (shouldDismiss(nextOffset, 0)) {
+				dismissNotification(direction);
+				return;
+			}
+			setSwipeOffset(nextOffset);
+			scheduleScrollDismissReset();
+		};
+		const handleMouseEnter = () => {
+			hovered.value = true;
+			cancelAutoClose();
+			props.onHoverStart?.();
+		};
+		const handleMouseLeave = () => {
+			hovered.value = false;
+			if (!scrollDismissActive.value) {
+				resetSwipe();
+				handleAutoClose();
+			}
+			props.onHoverEnd?.();
+		};
+		const handleResize = () => {
+			if (dismissed.value) setSwipeOffset(getExitOffset(dismissDirection.value));
+		};
+		watch(() => scrollDismissActive.value, (value, _, onCleanup) => {
+			if (!value) return;
+			document.addEventListener("wheel", handleWheel, { passive: false });
+			onCleanup(() => document.removeEventListener("wheel", handleWheel));
+		});
+		watch([
+			autoCloseDuration,
+			active,
+			dismissed,
+			() => props.paused
+		], () => {
+			if (props.paused) cancelAutoClose();
+			else handleAutoClose();
+		}, { immediate: true });
+		onMounted(() => {
+			props.data.onOpen?.(props.data);
+			notificationRef.value?.addEventListener("wheel", handleWheel, { passive: false });
+			window.addEventListener("resize", handleResize);
+		});
+		onBeforeUnmount(() => {
+			cancelAutoClose();
+			cancelHide();
+			cancelScrollDismissReset();
+			cancelPointerDrag(false);
+			notificationRef.value?.removeEventListener("wheel", handleWheel);
+			window.removeEventListener("resize", handleResize);
+		});
+		return () => {
+			const resolvedAttrsStyle = normalizeStyle(attrs.style);
+			const resolvedDataStyle = normalizeStyle(props.data.style);
+			const baseStyle = {
+				...resolvedAttrsStyle,
+				...resolvedDataStyle
+			};
+			const baseOpacity = typeof baseStyle.opacity === "number" ? baseStyle.opacity : 1;
+			const swipeOpacity = dismissed.value ? 0 : 1 - Math.min(Math.abs(offset.value) / 200, 1) * .6;
+			const resolvedTransitionDuration = baseStyle.transitionDuration ?? `${props.transitionDuration}ms, ${props.transitionDuration}ms, ${props.transitionDuration}ms`;
+			const notificationStyle = {
+				...baseStyle,
+				"--notifications-state-transform": typeof baseStyle.transform === "string" ? baseStyle.transform : "translateX(0)",
+				"--notifications-state-opacity": String(baseOpacity),
+				"--notifications-swipe-offset": `${offset.value}px`,
+				"--notifications-swipe-opacity": String(swipeOpacity),
+				transform: "var(--notifications-state-transform) translate3d(var(--notifications-swipe-offset), 0, 0)",
+				opacity: "calc(var(--notifications-state-opacity) * var(--notifications-swipe-opacity))",
+				transitionDuration: active.value || scrollDismissActive.value ? "0ms, 0ms, 0ms" : resolvedTransitionDuration,
+				cursor: "default",
+				touchAction: "pan-y"
+			};
+			return h(Notification, {
+				...attrs,
+				...getNotificationProps(props.data),
+				ref: (node) => {
+					notificationRef.value = node?.$el ?? node;
+				},
+				style: notificationStyle,
+				withCloseButton: isCloseDisabled.value ? false : props.data.withCloseButton,
+				onClose: handleHide,
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave,
+				onPointerdown: handlePointerDown
+			}, () => renderContent(props.data.message));
+		};
+	}
+});
+var Notifications_module_default = {
+	root: "_root_1izcx_1",
+	notification: "_notification_1izcx_40"
+};
+//#endregion
+//#region src/Notifications.ts
+var defaultProps = {
+	position: "bottom-right",
+	autoClose: 4e3,
+	transitionDuration: 250,
+	allowDragDismiss: true,
+	allowScrollDismiss: true,
+	containerWidth: 440,
+	notificationMaxHeight: 200,
+	limit: 5,
+	zIndex: getDefaultZIndex("overlay"),
+	store: notificationsStore,
+	withinPortal: true,
+	pauseResetOnHover: "all"
+};
+var varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ root: {
+	"--notifications-z-index": zIndex?.toString(),
+	"--notifications-container-width": rem(containerWidth)
+} }));
+function applyTransitionStyles(element, state, position, transitionDuration, maxHeight) {
+	Object.assign(element.style, getNotificationStateStyles({
+		state,
+		position,
+		transitionDuration,
+		maxHeight
+	}));
+}
+var NotificationsBase = defineComponent({
+	name: "Notifications",
+	inheritAttrs: false,
+	props: {
+		position: {
+			type: String,
+			default: void 0
+		},
+		autoClose: {
+			type: [Number, Boolean],
+			default: void 0
+		},
+		transitionDuration: {
+			type: Number,
+			default: void 0
+		},
+		allowDragDismiss: {
+			type: Boolean,
+			default: void 0
+		},
+		allowScrollDismiss: {
+			type: Boolean,
+			default: void 0
+		},
+		containerWidth: {
+			type: [Number, String],
+			default: void 0
+		},
+		notificationMaxHeight: {
+			type: [Number, String],
+			default: void 0
+		},
+		limit: {
+			type: Number,
+			default: void 0
+		},
+		zIndex: {
+			type: [Number, String],
+			default: void 0
+		},
+		portalProps: {
+			type: Object,
+			default: void 0
+		},
+		store: {
+			type: Object,
+			default: void 0
+		},
+		withinPortal: {
+			type: Boolean,
+			default: void 0
+		},
+		pauseResetOnHover: {
+			type: String,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(rawProps, { attrs }) {
+		const props = useProps("Notifications", defaultProps, rawProps);
+		const theme = useMantineTheme();
+		const shouldReduceMotion = useReducedMotion();
+		const hoveredCount = ref(0);
+		const data = useNotifications(props.store);
+		const reduceMotion = computed(() => theme.value.respectReducedMotion ? shouldReduceMotion.value : false);
+		const duration = computed(() => reduceMotion.value ? 1 : props.transitionDuration);
+		const getStyles = useStyles({
+			name: "Notifications",
+			classes: Notifications_module_default,
+			props,
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			vars: props.vars,
+			varsResolver
+		});
+		watch(() => [
+			props.limit,
+			props.position,
+			props.store
+		], () => {
+			props.store?.setState((current) => ({
+				...current,
+				limit: props.limit || 5,
+				defaultPosition: props.position
+			}));
+		}, { immediate: true });
+		const handleHoverStart = () => {
+			hoveredCount.value += 1;
+		};
+		const handleHoverEnd = () => {
+			hoveredCount.value = Math.max(0, hoveredCount.value - 1);
+		};
+		return () => {
+			const grouped = getGroupedNotifications(data.value.notifications, props.position);
+			const rootProps = (position) => ({
+				...attrs,
+				...getStyles("root"),
+				"data-position": position
+			});
+			const renderGroup = (position) => h(Box, rootProps(position), () => h(TransitionGroup, {
+				css: false,
+				onBeforeEnter: (el) => applyTransitionStyles(el, "exited", position, duration.value, props.notificationMaxHeight),
+				onEnter: (el, done) => {
+					el.offsetHeight;
+					applyTransitionStyles(el, "entered", position, duration.value, props.notificationMaxHeight);
+					window.setTimeout(done, duration.value);
+				},
+				onLeave: (el, done) => {
+					applyTransitionStyles(el, "exiting", position, duration.value, props.notificationMaxHeight);
+					window.setTimeout(done, duration.value);
+				}
+			}, () => grouped[position].map(({ style: notificationStyle, ...notification }) => h(NotificationContainer, {
+				key: notification.id,
+				data: notification,
+				onHide: (id) => hideNotification(id, props.store),
+				autoClose: props.autoClose,
+				transitionDuration: duration.value,
+				allowDragDismiss: props.allowDragDismiss,
+				allowScrollDismiss: props.allowScrollDismiss,
+				paused: props.pauseResetOnHover === "all" ? hoveredCount.value > 0 : false,
+				onHoverStart: handleHoverStart,
+				onHoverEnd: handleHoverEnd,
+				...getStyles("notification", { style: notificationStyle })
+			}))));
+			return h(OptionalPortal, {
+				withinPortal: props.withinPortal,
+				...props.portalProps
+			}, () => positions.map((position) => renderGroup(position)));
+		};
+	}
+});
+var Notifications = Object.assign(NotificationsBase, {
+	classes: Notifications_module_default,
+	varsResolver,
+	show: notifications.show,
+	hide: notifications.hide,
+	update: notifications.update,
+	clean: notifications.clean,
+	cleanQueue: notifications.cleanQueue,
+	updateState: notifications.updateState
+});
+//#endregion
+export { Notifications, cleanNotifications, cleanNotificationsQueue, createNotificationsStore, hideNotification, notifications, notificationsStore, showNotification, updateNotification, updateNotificationsState, useNotifications };
+
+//# sourceMappingURL=index.mjs.map