@v-c/notification 0.0.2

package/dist/NoticeList.js

@@ -0,0 +1,154 @@
+import Notice_default from "./Notice.js";
+import useStack_default from "./hooks/useStack.js";
+import { useNotificationContext } from "./NotificationProvider.js";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, reactive, ref, shallowRef, toRef, watch, watchEffect } from "vue";
+import { classNames } from "@v-c/util";
+import { getTransitionGroupProps } from "@v-c/util/dist/utils/transition";
+import { unrefElement } from "@v-c/util/dist/vueuse/unref-element";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const ctx = useNotificationContext();
+	const dictRef = reactive({});
+	const keys = computed(() => (props.configList ?? []).map((config) => ({
+		config,
+		key: String(config.key)
+	})));
+	const latestNotice = shallowRef(null);
+	const hoverKeys = ref([]);
+	const [stackEnabled, stackOptions] = useStack_default(toRef(props, "stack"));
+	const expanded = computed(() => stackEnabled.value && (hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold.value));
+	const placementMotion = computed(() => {
+		if (typeof props.motion === "function") return props.placement ? props.motion(props.placement) : void 0;
+		return props.motion;
+	});
+	watch([
+		hoverKeys,
+		keys,
+		stackEnabled
+	], () => {
+		if (stackEnabled.value && hoverKeys.value.length > 1) hoverKeys.value = hoverKeys.value.filter((key) => keys.value.some(({ key: dataKey }) => key === dataKey));
+	});
+	watchEffect(() => {
+		if (!stackEnabled.value) {
+			latestNotice.value = null;
+			return;
+		}
+		const lastKey = keys.value[keys.value.length - 1]?.key;
+		latestNotice.value = lastKey ? dictRef[lastKey] ?? null : null;
+	}, { flush: "post" });
+	const checkAllClosed = () => {
+		if (!props.placement) return;
+		if (keys.value.length === 0) props.onAllNoticeRemoved?.(props.placement);
+	};
+	return () => {
+		let _slot;
+		const { prefixCls = "", placement = "topRight", onNoticeClose } = props;
+		const renderNotify = () => keys.value.map(({ config }, motionIndex) => {
+			const { key, times } = config;
+			const strKey = String(key);
+			const { className: configClassName, style: configStyle, classNames: configClassNames, styles: configStyles,...restConfig } = config;
+			const dataIndex = keys.value.findIndex((item) => item.key === strKey);
+			const stackStyle = {};
+			if (stackEnabled.value) {
+				const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
+				const transformX = placement === "top" || placement === "bottom" ? "-50%" : "0";
+				if (index > 0) {
+					stackStyle.height = expanded.value ? dictRef[strKey]?.offsetHeight : latestNotice.value?.offsetHeight;
+					if (stackStyle.height && typeof stackStyle.height === "number") stackStyle.height = `${stackStyle.height}px`;
+					let verticalOffset = 0;
+					for (let i = 0; i < index; i += 1) {
+						const targetKey = keys.value[keys.value.length - 1 - i]?.key;
+						const node = targetKey ? dictRef[targetKey] : null;
+						verticalOffset += (node?.offsetHeight ?? 0) + stackOptions.gap.value;
+					}
+					const transformY = (expanded.value ? verticalOffset : index * stackOptions.offset.value) * (placement.startsWith("top") ? 1 : -1);
+					const currentWidth = dictRef[strKey]?.offsetWidth;
+					const latestWidth = latestNotice.value?.offsetWidth;
+					stackStyle.transform = `translate3d(${transformX}, ${transformY}px, 0) scaleX(${!expanded.value && latestWidth && currentWidth ? (latestWidth - stackOptions.offset.value * 2 * (index < 3 ? index : 3)) / currentWidth : 1})`;
+				} else stackStyle.transform = `translate3d(${transformX}, 0, 0)`;
+			}
+			return createVNode("div", {
+				"key": strKey,
+				"class": classNames(`${prefixCls}-notice-wrapper`, configClassNames?.wrapper),
+				"style": {
+					...stackStyle,
+					...configStyles?.wrapper
+				},
+				"onMouseenter": () => {
+					hoverKeys.value = hoverKeys.value.includes(strKey) ? hoverKeys.value : [...hoverKeys.value, strKey];
+				},
+				"onMouseleave": () => {
+					hoverKeys.value = hoverKeys.value.filter((k) => k !== strKey);
+				}
+			}, [createVNode(Notice_default, mergeProps(restConfig, {
+				"ref": (el) => {
+					const element = unrefElement(el) ?? void 0;
+					if (dataIndex > -1) dictRef[strKey] = element;
+					else delete dictRef[strKey];
+				},
+				"prefixCls": prefixCls,
+				"classNames": configClassNames,
+				"styles": configStyles,
+				"class": classNames(configClassName, ctx.value?.classNames?.notice),
+				"style": configStyle,
+				"times": times,
+				"eventKey": key,
+				"onNoticeClose": onNoticeClose,
+				"hovering": stackEnabled.value && hoverKeys.value.length > 0
+			}), null)]);
+		});
+		let motionGroupProps = {};
+		if (placementMotion.value) motionGroupProps = getTransitionGroupProps(placementMotion.value.name, placementMotion.value);
+		return createVNode(TransitionGroup, mergeProps({
+			"key": placement,
+			"tag": "div",
+			"appear": true
+		}, {
+			class: classNames(prefixCls, `${prefixCls}-${placement}`, ctx.value?.classNames?.list, attrs.class, {
+				[`${prefixCls}-stack-expanded`]: expanded.value,
+				[`${prefixCls}-stack`]: stackEnabled.value
+			}),
+			style: attrs.style
+		}, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderNotify()) ? _slot : { default: () => [_slot] });
+	};
+}, { props: {
+	configList: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	placement: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	prefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	motion: {
+		type: Function,
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	stack: {
+		type: [Boolean, Object],
+		required: false,
+		default: void 0
+	},
+	onAllNoticeRemoved: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	onNoticeClose: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+} });
+export { NoticeList_default as default };

package/dist/NotificationProvider.cjs

@@ -0,0 +1,13 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+const NotificationContext = Symbol("NotificationContext");
+function useNotificationProvider(props) {
+	(0, vue.provide)(NotificationContext, props);
+	return props;
+}
+function useNotificationContext() {
+	return (0, vue.inject)(NotificationContext, (0, vue.ref)({}));
+}
+exports.NotificationContext = NotificationContext;
+exports.useNotificationContext = useNotificationContext;
+exports.useNotificationProvider = useNotificationProvider;

package/dist/NotificationProvider.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+export interface NotificationContextProps {
+    classNames?: {
+        notice?: string;
+        list?: string;
+    };
+}
+export declare const NotificationContext: InjectionKey<Ref<NotificationContextProps>>;
+export declare function useNotificationProvider(props: Ref<NotificationContextProps>): Ref<NotificationContextProps, NotificationContextProps>;
+export declare function useNotificationContext(): Ref<{}, {}>;

package/dist/NotificationProvider.js

@@ -0,0 +1,10 @@
+import { inject, provide, ref } from "vue";
+const NotificationContext = Symbol("NotificationContext");
+function useNotificationProvider(props) {
+	provide(NotificationContext, props);
+	return props;
+}
+function useNotificationContext() {
+	return inject(NotificationContext, ref({}));
+}
+export { NotificationContext, useNotificationContext, useNotificationProvider };

package/dist/Notifications.cjs

@@ -0,0 +1,146 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_NoticeList = require("./NoticeList.cjs");
+let vue = require("vue");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var defaults = { prefixCls: "vc-notification" };
+var Notifications = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose }) => {
+	const configList = (0, vue.shallowRef)([]);
+	const onNoticeClose = (key) => {
+		const config = configList.value.find((item) => item.key === key);
+		const closable = config?.closable;
+		(closable && typeof closable === "object" ? closable : {}).onClose?.();
+		config?.onClose?.();
+		configList.value = configList.value.filter((item) => item.key !== key);
+	};
+	expose({
+		open: (config) => {
+			const list = configList.value;
+			let clone = [...configList.value];
+			const index = clone.findIndex((item) => item.key === config.key);
+			const innerConfig = { ...config };
+			if (index >= 0) {
+				innerConfig.times = (list[index]?.times || 0) + 1;
+				clone[index] = innerConfig;
+			} else {
+				innerConfig.times = 0;
+				clone.push(innerConfig);
+			}
+			const maxCount = props.maxCount ?? 0;
+			if (maxCount > 0 && clone.length > maxCount) clone = clone.slice(-maxCount);
+			configList.value = clone;
+		},
+		close: onNoticeClose,
+		destroy: () => {
+			configList.value = [];
+		}
+	});
+	const placements = (0, vue.shallowRef)({});
+	(0, vue.watch)(configList, () => {
+		const nextPlacements = {};
+		configList.value.forEach((config) => {
+			const { placement = "topRight" } = config;
+			if (placement) {
+				nextPlacements[placement] = nextPlacements[placement] || [];
+				nextPlacements[placement].push(config);
+			}
+		});
+		Object.keys(placements.value).forEach((_placement) => {
+			const placement = _placement;
+			nextPlacements[placement] = nextPlacements[placement] || [];
+		});
+		placements.value = nextPlacements;
+	});
+	const onAllNoticeRemoved = (placement) => {
+		const clone = { ...placements.value };
+		if (!(clone[placement] || []).length) delete clone[placement];
+		placements.value = clone;
+	};
+	const emptyRef = (0, vue.shallowRef)(false);
+	(0, vue.watch)(placements, () => {
+		if (Object.keys(placements.value).length > 0) emptyRef.value = true;
+		else if (emptyRef.value) {
+			props?.onAllRemoved?.();
+			emptyRef.value = false;
+		}
+	});
+	return () => {
+		let _slot;
+		const { container } = props;
+		const prefixCls = props.prefixCls ?? defaults.prefixCls ?? "";
+		if (!container) return null;
+		return (0, vue.createVNode)(vue.Teleport, { "to": container }, _isSlot(_slot = Object.keys(placements.value).map((placement) => {
+			const placementConfigList = placements.value[placement];
+			const list = (0, vue.createVNode)(require_NoticeList.default, {
+				"key": placement,
+				"configList": placementConfigList,
+				"placement": placement,
+				"prefixCls": prefixCls,
+				"class": props.className?.(placement),
+				"style": props.style?.(placement),
+				"motion": props.motion,
+				"stack": props.stack,
+				"onAllNoticeRemoved": () => onAllNoticeRemoved(placement),
+				"onNoticeClose": onNoticeClose
+			}, null);
+			return props.renderNotifications ? props.renderNotifications(list, {
+				prefixCls,
+				key: placement
+			}) : list;
+		})) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		motion: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		container: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onAllRemoved: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		stack: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		renderNotifications: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "Notifications"
+});
+var Notifications_default = Notifications;
+exports.default = Notifications_default;

package/dist/Notifications.d.ts

@@ -0,0 +1,24 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties, TransitionGroupProps } from 'vue';
+import { Key, OpenConfig, Placement, StackConfig } from './interface.ts';
+export interface NotificationsProps {
+    prefixCls?: string;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    container?: HTMLElement | ShadowRoot;
+    maxCount?: number;
+    className?: (placement: Placement) => string;
+    style?: (placement: Placement) => CSSProperties;
+    onAllRemoved?: VoidFunction;
+    stack?: StackConfig;
+    renderNotifications?: (node: VueNode, info: {
+        prefixCls: string;
+        key: Key;
+    }) => VueNode;
+}
+export interface NotificationsRef {
+    open: (config: OpenConfig) => void;
+    close: (key: Key) => void;
+    destroy: () => void;
+}
+declare const Notifications: import('vue').DefineSetupFnComponent<NotificationsProps, {}, {}, NotificationsProps & {}, import('vue').PublicProps>;
+export default Notifications;

package/dist/Notifications.js

@@ -0,0 +1,143 @@
+import NoticeList_default from "./NoticeList.js";
+import { Teleport, createVNode, defineComponent, isVNode, mergeDefaults, shallowRef, watch } from "vue";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var defaults = { prefixCls: "vc-notification" };
+var Notifications_default = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const configList = shallowRef([]);
+	const onNoticeClose = (key) => {
+		const config = configList.value.find((item) => item.key === key);
+		const closable = config?.closable;
+		(closable && typeof closable === "object" ? closable : {}).onClose?.();
+		config?.onClose?.();
+		configList.value = configList.value.filter((item) => item.key !== key);
+	};
+	expose({
+		open: (config) => {
+			const list = configList.value;
+			let clone = [...configList.value];
+			const index = clone.findIndex((item) => item.key === config.key);
+			const innerConfig = { ...config };
+			if (index >= 0) {
+				innerConfig.times = (list[index]?.times || 0) + 1;
+				clone[index] = innerConfig;
+			} else {
+				innerConfig.times = 0;
+				clone.push(innerConfig);
+			}
+			const maxCount = props.maxCount ?? 0;
+			if (maxCount > 0 && clone.length > maxCount) clone = clone.slice(-maxCount);
+			configList.value = clone;
+		},
+		close: onNoticeClose,
+		destroy: () => {
+			configList.value = [];
+		}
+	});
+	const placements = shallowRef({});
+	watch(configList, () => {
+		const nextPlacements = {};
+		configList.value.forEach((config) => {
+			const { placement = "topRight" } = config;
+			if (placement) {
+				nextPlacements[placement] = nextPlacements[placement] || [];
+				nextPlacements[placement].push(config);
+			}
+		});
+		Object.keys(placements.value).forEach((_placement) => {
+			const placement = _placement;
+			nextPlacements[placement] = nextPlacements[placement] || [];
+		});
+		placements.value = nextPlacements;
+	});
+	const onAllNoticeRemoved = (placement) => {
+		const clone = { ...placements.value };
+		if (!(clone[placement] || []).length) delete clone[placement];
+		placements.value = clone;
+	};
+	const emptyRef = shallowRef(false);
+	watch(placements, () => {
+		if (Object.keys(placements.value).length > 0) emptyRef.value = true;
+		else if (emptyRef.value) {
+			props?.onAllRemoved?.();
+			emptyRef.value = false;
+		}
+	});
+	return () => {
+		let _slot;
+		const { container } = props;
+		const prefixCls = props.prefixCls ?? defaults.prefixCls ?? "";
+		if (!container) return null;
+		return createVNode(Teleport, { "to": container }, _isSlot(_slot = Object.keys(placements.value).map((placement) => {
+			const placementConfigList = placements.value[placement];
+			const list = createVNode(NoticeList_default, {
+				"key": placement,
+				"configList": placementConfigList,
+				"placement": placement,
+				"prefixCls": prefixCls,
+				"class": props.className?.(placement),
+				"style": props.style?.(placement),
+				"motion": props.motion,
+				"stack": props.stack,
+				"onAllNoticeRemoved": () => onAllNoticeRemoved(placement),
+				"onNoticeClose": onNoticeClose
+			}, null);
+			return props.renderNotifications ? props.renderNotifications(list, {
+				prefixCls,
+				key: placement
+			}) : list;
+		})) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		motion: {
+			type: Function,
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		container: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onAllRemoved: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		stack: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		renderNotifications: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "Notifications"
+});
+export { Notifications_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/hooks/useNotification.cjs

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_Notifications = require("../Notifications.cjs");
+let vue = require("vue");
+var defaultGetContainer = () => document.body;
+var uniqueKey = 0;
+function mergeConfig(...objList) {
+	const clone = {};
+	objList.forEach((obj) => {
+		if (obj) Object.keys(obj).forEach((key) => {
+			const val = obj[key];
+			if (val !== void 0) clone[key] = val;
+		});
+	});
+	return clone;
+}
+function useNotification(rootConfig = {}) {
+	const { getContainer = defaultGetContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications,...shareConfig } = rootConfig;
+	const container = (0, vue.shallowRef)();
+	const notificationRef = (0, vue.shallowRef)();
+	const contextHolder = () => (0, vue.createVNode)(require_Notifications.default, {
+		"container": container.value,
+		"ref": notificationRef,
+		"prefixCls": prefixCls,
+		"motion": motion,
+		"maxCount": maxCount,
+		"className": className,
+		"style": style,
+		"onAllRemoved": onAllRemoved,
+		"stack": stack,
+		"renderNotifications": renderNotifications
+	}, null);
+	const taskQueue = (0, vue.shallowRef)([]);
+	const api = {
+		open(config) {
+			const mergedConfig = mergeConfig(shareConfig, config);
+			if (mergedConfig.key === null || mergedConfig.key === void 0) {
+				mergedConfig.key = `vc-notification-${uniqueKey}`;
+				uniqueKey += 1;
+			}
+			taskQueue.value = [...taskQueue.value, {
+				type: "open",
+				config: mergedConfig
+			}];
+		},
+		close(key) {
+			taskQueue.value = [...taskQueue.value, {
+				type: "close",
+				key
+			}];
+		},
+		destroy() {
+			taskQueue.value = [...taskQueue.value, { type: "destroy" }];
+		}
+	};
+	(0, vue.onMounted)(() => {
+		container.value = getContainer();
+	});
+	(0, vue.watch)(taskQueue, () => {
+		if (notificationRef.value && taskQueue.value.length) {
+			taskQueue.value.forEach((task) => {
+				switch (task.type) {
+					case "open":
+						notificationRef.value?.open(task.config);
+						break;
+					case "close":
+						notificationRef.value?.close(task.key);
+						break;
+					case "destroy":
+						notificationRef.value?.destroy();
+						break;
+					default: break;
+				}
+			});
+			taskQueue.value = taskQueue.value.filter((task) => !taskQueue.value.includes(task));
+		}
+	});
+	return [api, contextHolder];
+}
+exports.default = useNotification;

package/dist/hooks/useNotification.d.ts

@@ -0,0 +1,36 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties, TransitionGroupProps } from 'vue';
+import { Key, OpenConfig, Placement, StackConfig } from '../interface';
+import { NotificationsProps } from '../Notifications';
+type OptionalConfig = Partial<OpenConfig>;
+export interface NotificationConfig {
+    prefixCls?: string;
+    /** Customize container. It will repeat call which means you should return same container element. */
+    getContainer?: () => HTMLElement | ShadowRoot;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    closeIcon?: VueNode;
+    closable?: boolean | ({
+        closeIcon?: VueNode;
+        onClose?: VoidFunction;
+    } & Record<string, any>);
+    maxCount?: number;
+    duration?: number | false | null;
+    showProgress?: boolean;
+    pauseOnHover?: boolean;
+    /** @private. Config for notification holder style. Safe to remove if refactor */
+    className?: (placement: Placement) => string;
+    /** @private. Config for notification holder style. Safe to remove if refactor */
+    style?: (placement: Placement) => CSSProperties;
+    /** @private Trigger when all the notification closed. */
+    onAllRemoved?: VoidFunction;
+    stack?: StackConfig;
+    /** @private Slot for style in Notifications */
+    renderNotifications?: NotificationsProps['renderNotifications'];
+}
+export interface NotificationAPI {
+    open: (config: OptionalConfig) => void;
+    close: (key: Key) => void;
+    destroy: () => void;
+}
+export default function useNotification(rootConfig?: NotificationConfig): [NotificationAPI, () => VueNode];
+export {};