@v-c/notification 0.0.2 → 1.0.0

package/dist/Notice.cjs

@@ -1,11 +1,14 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
-__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
-let __v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
-__v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(__v_c_util_dist_pickAttrs);
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
+let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
+_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
 var defaults = {
 	duration: 4.5,
 	pauseOnHover: true,
@@ -28,7 +31,7 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 		props.onNoticeClose?.(props.eventKey);
 	};
 	const onCloseKeyDown = (e) => {
-		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === __v_c_util_dist_KeyCode.default.ENTER) onInternalClose();
+		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === _v_c_util_dist_KeyCode.default.ENTER) onInternalClose();
 	};
 	(0, vue.watch)([
 		() => props.times,
@@ -82,7 +85,7 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 	return () => {
 		const { closable, prefixCls, props: divProps, onClick, content, className, style } = props;
 		const closableConfig = typeof closable === "object" && closable !== null ? closable : closable ? { closeIcon: mergedCloseIcon.value } : {};
-		const ariaProps = (0, __v_c_util_dist_pickAttrs.default)(closableConfig, true);
+		const ariaProps = (0, _v_c_util_dist_pickAttrs.default)(closableConfig, true);
 		const validPercent = 100 - (percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value);
 		const noticePrefixCls = `${prefixCls}-notice`;
 		const mergedStyle = {
@@ -91,7 +94,7 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 			...typeof style === "object" && style ? style : {}
 		};
 		return (0, vue.createVNode)("div", (0, vue.mergeProps)(divProps, {
-			"class": (0, __v_c_util.classNames)(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
+			"class": (0, _v_c_util.classNames)(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
 			"style": mergedStyle,
 			"onMouseenter": (e) => {
 				hovering.value = true;
@@ -154,6 +157,8 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 	},
 	content: {
 		type: [
+			Object,
+			Function,
 			String,
 			Number,
 			null,
@@ -161,7 +166,6 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 			Array
 		],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	duration: {
@@ -185,6 +189,8 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 	},
 	closeIcon: {
 		type: [
+			Object,
+			Function,
 			String,
 			Number,
 			null,
@@ -192,7 +198,6 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 			Array
 		],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	closable: {
@@ -206,17 +211,17 @@ var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
 		default: void 0
 	},
 	style: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
 	classNames: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
 	styles: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},

package/dist/Notice.js

@@ -150,6 +150,8 @@ var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	},
 	content: {
 		type: [
+			Object,
+			Function,
 			String,
 			Number,
 			null,
@@ -157,7 +159,6 @@ var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			Array
 		],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	duration: {
@@ -181,6 +182,8 @@ var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	},
 	closeIcon: {
 		type: [
+			Object,
+			Function,
 			String,
 			Number,
 			null,
@@ -188,7 +191,6 @@ var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			Array
 		],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	closable: {
@@ -202,17 +204,17 @@ var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		default: void 0
 	},
 	style: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
 	classNames: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
 	styles: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},

package/dist/NoticeList.cjs

@@ -1,12 +1,15 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_Notice = require("./Notice.cjs");
 const require_useStack = require("./hooks/useStack.cjs");
 const require_NotificationProvider = require("./NotificationProvider.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
-let __v_c_util_dist_vueuse_unref_element = require("@v-c/util/dist/vueuse/unref-element");
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
+let _v_c_util_dist_vueuse_unref_element = require("@v-c/util/dist/vueuse/unref-element");
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 }
@@ -19,8 +22,14 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 	})));
 	const latestNotice = (0, vue.shallowRef)(null);
 	const hoverKeys = (0, vue.ref)([]);
-	const [stackEnabled, stackOptions] = require_useStack.default((0, vue.toRef)(props, "stack"));
-	const expanded = (0, vue.computed)(() => stackEnabled.value && (hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold.value));
+	const stackConfig = (0, vue.toRef)(props, "stack");
+	const [stackEnabled, stackOptions] = require_useStack.default(stackConfig);
+	const stackActive = (0, vue.computed)(() => stackEnabled.value || stackConfig.value === false);
+	const expanded = (0, vue.computed)(() => {
+		if (!stackActive.value) return false;
+		if (!stackEnabled.value) return true;
+		return hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold.value;
+	});
 	const placementMotion = (0, vue.computed)(() => {
 		if (typeof props.motion === "function") return props.placement ? props.motion(props.placement) : void 0;
 		return props.motion;
@@ -32,8 +41,11 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 	], () => {
 		if (stackEnabled.value && hoverKeys.value.length > 1) hoverKeys.value = hoverKeys.value.filter((key) => keys.value.some(({ key: dataKey }) => key === dataKey));
 	});
+	(0, vue.watch)(stackEnabled, (enabled) => {
+		if (!enabled && hoverKeys.value.length) hoverKeys.value = [];
+	});
 	(0, vue.watchEffect)(() => {
-		if (!stackEnabled.value) {
+		if (!stackActive.value) {
 			latestNotice.value = null;
 			return;
 		}
@@ -50,10 +62,10 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 		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 { className: configClassName, style: configStyle, classNames: configClassNames, styles: configStyles, ...restConfig } = config;
 			const dataIndex = keys.value.findIndex((item) => item.key === strKey);
 			const stackStyle = {};
-			if (stackEnabled.value) {
+			if (stackActive.value) {
 				const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
 				const transformX = placement === "top" || placement === "bottom" ? "-50%" : "0";
 				if (index > 0) {
@@ -73,27 +85,29 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 			}
 			return (0, vue.createVNode)("div", {
 				"key": strKey,
-				"class": (0, __v_c_util.classNames)(`${prefixCls}-notice-wrapper`, configClassNames?.wrapper),
+				"class": (0, _v_c_util.classNames)(`${prefixCls}-notice-wrapper`, configClassNames?.wrapper),
 				"style": {
 					...stackStyle,
 					...configStyles?.wrapper
 				},
 				"onMouseenter": () => {
+					if (!stackEnabled.value) return;
 					hoverKeys.value = hoverKeys.value.includes(strKey) ? hoverKeys.value : [...hoverKeys.value, strKey];
 				},
 				"onMouseleave": () => {
+					if (!stackEnabled.value) return;
 					hoverKeys.value = hoverKeys.value.filter((k) => k !== strKey);
 				}
 			}, [(0, vue.createVNode)(require_Notice.default, (0, vue.mergeProps)(restConfig, {
 				"ref": (el) => {
-					const element = (0, __v_c_util_dist_vueuse_unref_element.unrefElement)(el) ?? void 0;
+					const element = (0, _v_c_util_dist_vueuse_unref_element.unrefElement)(el) ?? void 0;
 					if (dataIndex > -1) dictRef[strKey] = element;
 					else delete dictRef[strKey];
 				},
 				"prefixCls": prefixCls,
 				"classNames": configClassNames,
 				"styles": configStyles,
-				"class": (0, __v_c_util.classNames)(configClassName, ctx.value?.classNames?.notice),
+				"class": (0, _v_c_util.classNames)(configClassName, ctx.value?.classNames?.notice),
 				"style": configStyle,
 				"times": times,
 				"eventKey": key,
@@ -102,15 +116,15 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 			}), null)]);
 		});
 		let motionGroupProps = {};
-		if (placementMotion.value) motionGroupProps = (0, __v_c_util_dist_utils_transition.getTransitionGroupProps)(placementMotion.value.name, placementMotion.value);
+		if (placementMotion.value) motionGroupProps = (0, _v_c_util_dist_utils_transition.getTransitionGroupProps)(placementMotion.value.name, placementMotion.value);
 		return (0, vue.createVNode)(vue.TransitionGroup, (0, vue.mergeProps)({
 			"key": placement,
 			"tag": "div",
 			"appear": true
 		}, {
-			class: (0, __v_c_util.classNames)(prefixCls, `${prefixCls}-${placement}`, ctx.value?.classNames?.list, attrs.class, {
+			class: (0, _v_c_util.classNames)(prefixCls, `${prefixCls}-${placement}`, ctx.value?.classNames?.list, attrs.class, {
 				[`${prefixCls}-stack-expanded`]: expanded.value,
-				[`${prefixCls}-stack`]: stackEnabled.value
+				[`${prefixCls}-stack`]: stackActive.value
 			}),
 			style: attrs.style
 		}, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderNotify()) ? _slot : { default: () => [_slot] });
@@ -132,9 +146,8 @@ var NoticeList = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) =>
 		default: void 0
 	},
 	motion: {
-		type: Function,
+		type: [Object, Function],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	stack: {

package/dist/NoticeList.js

@@ -17,8 +17,14 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	})));
 	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 stackConfig = toRef(props, "stack");
+	const [stackEnabled, stackOptions] = useStack_default(stackConfig);
+	const stackActive = computed(() => stackEnabled.value || stackConfig.value === false);
+	const expanded = computed(() => {
+		if (!stackActive.value) return false;
+		if (!stackEnabled.value) return true;
+		return 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;
@@ -30,8 +36,11 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	], () => {
 		if (stackEnabled.value && hoverKeys.value.length > 1) hoverKeys.value = hoverKeys.value.filter((key) => keys.value.some(({ key: dataKey }) => key === dataKey));
 	});
+	watch(stackEnabled, (enabled) => {
+		if (!enabled && hoverKeys.value.length) hoverKeys.value = [];
+	});
 	watchEffect(() => {
-		if (!stackEnabled.value) {
+		if (!stackActive.value) {
 			latestNotice.value = null;
 			return;
 		}
@@ -48,10 +57,10 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		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 { className: configClassName, style: configStyle, classNames: configClassNames, styles: configStyles, ...restConfig } = config;
 			const dataIndex = keys.value.findIndex((item) => item.key === strKey);
 			const stackStyle = {};
-			if (stackEnabled.value) {
+			if (stackActive.value) {
 				const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1);
 				const transformX = placement === "top" || placement === "bottom" ? "-50%" : "0";
 				if (index > 0) {
@@ -77,9 +86,11 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 					...configStyles?.wrapper
 				},
 				"onMouseenter": () => {
+					if (!stackEnabled.value) return;
 					hoverKeys.value = hoverKeys.value.includes(strKey) ? hoverKeys.value : [...hoverKeys.value, strKey];
 				},
 				"onMouseleave": () => {
+					if (!stackEnabled.value) return;
 					hoverKeys.value = hoverKeys.value.filter((k) => k !== strKey);
 				}
 			}, [createVNode(Notice_default, mergeProps(restConfig, {
@@ -108,7 +119,7 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		}, {
 			class: classNames(prefixCls, `${prefixCls}-${placement}`, ctx.value?.classNames?.list, attrs.class, {
 				[`${prefixCls}-stack-expanded`]: expanded.value,
-				[`${prefixCls}-stack`]: stackEnabled.value
+				[`${prefixCls}-stack`]: stackActive.value
 			}),
 			style: attrs.style
 		}, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderNotify()) ? _slot : { default: () => [_slot] });
@@ -130,9 +141,8 @@ var NoticeList_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		default: void 0
 	},
 	motion: {
-		type: Function,
+		type: [Object, Function],
 		required: false,
-		skipCheck: true,
 		default: void 0
 	},
 	stack: {

package/dist/NotificationProvider.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 const NotificationContext = Symbol("NotificationContext");

package/dist/Notifications.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_NoticeList = require("./NoticeList.cjs");
 let vue = require("vue");
@@ -99,13 +102,11 @@ var Notifications = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose })
 			default: void 0
 		},
 		motion: {
-			type: Function,
+			type: [Object, Function],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		container: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -125,7 +126,6 @@ var Notifications = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose })
 			default: void 0
 		},
 		onAllRemoved: {
-			type: null,
 			required: false,
 			default: void 0
 		},

package/dist/Notifications.js

@@ -97,13 +97,11 @@ var Notifications_default = /* @__PURE__ */ defineComponent((props, { expose })
 			default: void 0
 		},
 		motion: {
-			type: Function,
+			type: [Object, Function],
 			required: false,
-			skipCheck: true,
 			default: void 0
 		},
 		container: {
-			type: null,
 			required: false,
 			default: void 0
 		},
@@ -123,7 +121,6 @@ var Notifications_default = /* @__PURE__ */ defineComponent((props, { expose })
 			default: void 0
 		},
 		onAllRemoved: {
-			type: null,
 			required: false,
 			default: void 0
 		},

package/dist/hooks/useNotification.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_Notifications = require("../Notifications.cjs");
 let vue = require("vue");
@@ -15,25 +18,32 @@ function mergeConfig(...objList) {
 	return clone;
 }
 function useNotification(rootConfig = {}) {
-	const { getContainer = defaultGetContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications,...shareConfig } = rootConfig;
+	const configRef = (0, vue.computed)(() => (0, vue.unref)(rootConfig) || {});
 	const container = (0, vue.shallowRef)();
 	const notificationRef = (0, vue.shallowRef)();
+	const shareConfig = (0, vue.computed)(() => {
+		const { getContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications, ...restConfig } = configRef.value;
+		return restConfig;
+	});
+	const resolveContainer = () => {
+		return (configRef.value.getContainer || defaultGetContainer)();
+	};
 	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
+		"prefixCls": configRef.value.prefixCls,
+		"motion": configRef.value.motion,
+		"maxCount": configRef.value.maxCount,
+		"className": configRef.value.className,
+		"style": configRef.value.style,
+		"onAllRemoved": configRef.value.onAllRemoved,
+		"stack": configRef.value.stack,
+		"renderNotifications": configRef.value.renderNotifications
 	}, null);
 	const taskQueue = (0, vue.shallowRef)([]);
 	const api = {
 		open(config) {
-			const mergedConfig = mergeConfig(shareConfig, config);
+			const mergedConfig = mergeConfig(shareConfig.value, config);
 			if (mergedConfig.key === null || mergedConfig.key === void 0) {
 				mergedConfig.key = `vc-notification-${uniqueKey}`;
 				uniqueKey += 1;
@@ -54,7 +64,10 @@ function useNotification(rootConfig = {}) {
 		}
 	};
 	(0, vue.onMounted)(() => {
-		container.value = getContainer();
+		container.value = resolveContainer();
+	});
+	(0, vue.watch)(() => configRef.value.getContainer, () => {
+		container.value = resolveContainer();
 	});
 	(0, vue.watch)(taskQueue, () => {
 		if (notificationRef.value && taskQueue.value.length) {

package/dist/hooks/useNotification.d.ts

@@ -1,5 +1,5 @@
 import { VueNode } from '@v-c/util/dist/type';
-import { CSSProperties, TransitionGroupProps } from 'vue';
+import { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue';
 import { Key, OpenConfig, Placement, StackConfig } from '../interface';
 import { NotificationsProps } from '../Notifications';
 type OptionalConfig = Partial<OpenConfig>;
@@ -32,5 +32,5 @@ export interface NotificationAPI {
     close: (key: Key) => void;
     destroy: () => void;
 }
-export default function useNotification(rootConfig?: NotificationConfig): [NotificationAPI, () => VueNode];
+export default function useNotification(rootConfig?: MaybeRef<NotificationConfig>): [NotificationAPI, () => VueNode];
 export {};

package/dist/hooks/useNotification.js

@@ -1,5 +1,5 @@
 import Notifications_default from "../Notifications.js";
-import { createVNode, onMounted, shallowRef, watch } from "vue";
+import { computed, createVNode, onMounted, shallowRef, unref, watch } from "vue";
 var defaultGetContainer = () => document.body;
 var uniqueKey = 0;
 function mergeConfig(...objList) {
@@ -13,25 +13,32 @@ function mergeConfig(...objList) {
 	return clone;
 }
 function useNotification(rootConfig = {}) {
-	const { getContainer = defaultGetContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications,...shareConfig } = rootConfig;
+	const configRef = computed(() => unref(rootConfig) || {});
 	const container = shallowRef();
 	const notificationRef = shallowRef();
+	const shareConfig = computed(() => {
+		const { getContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications, ...restConfig } = configRef.value;
+		return restConfig;
+	});
+	const resolveContainer = () => {
+		return (configRef.value.getContainer || defaultGetContainer)();
+	};
 	const contextHolder = () => createVNode(Notifications_default, {
 		"container": container.value,
 		"ref": notificationRef,
-		"prefixCls": prefixCls,
-		"motion": motion,
-		"maxCount": maxCount,
-		"className": className,
-		"style": style,
-		"onAllRemoved": onAllRemoved,
-		"stack": stack,
-		"renderNotifications": renderNotifications
+		"prefixCls": configRef.value.prefixCls,
+		"motion": configRef.value.motion,
+		"maxCount": configRef.value.maxCount,
+		"className": configRef.value.className,
+		"style": configRef.value.style,
+		"onAllRemoved": configRef.value.onAllRemoved,
+		"stack": configRef.value.stack,
+		"renderNotifications": configRef.value.renderNotifications
 	}, null);
 	const taskQueue = shallowRef([]);
 	const api = {
 		open(config) {
-			const mergedConfig = mergeConfig(shareConfig, config);
+			const mergedConfig = mergeConfig(shareConfig.value, config);
 			if (mergedConfig.key === null || mergedConfig.key === void 0) {
 				mergedConfig.key = `vc-notification-${uniqueKey}`;
 				uniqueKey += 1;
@@ -52,7 +59,10 @@ function useNotification(rootConfig = {}) {
 		}
 	};
 	onMounted(() => {
-		container.value = getContainer();
+		container.value = resolveContainer();
+	});
+	watch(() => configRef.value.getContainer, () => {
+		container.value = resolveContainer();
 	});
 	watch(taskQueue, () => {
 		if (notificationRef.value && taskQueue.value.length) {

package/dist/hooks/useStack.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 var DEFAULT_OFFSET = 8;

package/dist/index.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Notice = require("./Notice.cjs");
 const require_NotificationProvider = require("./NotificationProvider.cjs");
 const require_useNotification = require("./hooks/useNotification.cjs");

package/dist/interface.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/notification",
   "type": "module",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "0.0.16"
+    "@v-c/util": "^1.0.9"
   },
   "scripts": {
     "build": "vite build",

package/src/NoticeList.tsx

@@ -34,11 +34,16 @@ const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
 
   const stackConfig = toRef(props, 'stack')
   const [stackEnabled, stackOptions] = useStack(stackConfig)
-  const expanded = computed(
-    () =>
-      stackEnabled.value
-      && (hoverKeys.value.length > 0 || keys.value.length <= stackOptions.threshold!.value!),
-  )
+  const stackActive = computed(() => stackEnabled.value || stackConfig.value === false)
+  const expanded = computed(() => {
+    if (!stackActive.value) {
+      return false
+    }
+    if (!stackEnabled.value) {
+      return true
+    }
+    return 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) : undefined
@@ -54,11 +59,16 @@ const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
       )
     }
   })
+  watch(stackEnabled, (enabled) => {
+    if (!enabled && hoverKeys.value.length) {
+      hoverKeys.value = []
+    }
+  })
 
   // Sync latest notice after DOM updates so collapsed stack uses accurate height
   watchEffect(
     () => {
-      if (!stackEnabled.value) {
+      if (!stackActive.value) {
         latestNotice.value = null
         return
       }
@@ -95,7 +105,7 @@ const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
         const dataIndex = keys.value.findIndex(item => item.key === strKey)
         const stackStyle: CSSProperties = {}
 
-        if (stackEnabled.value) {
+        if (stackActive.value) {
           const index = keys.value.length - 1 - (dataIndex > -1 ? dataIndex : motionIndex - 1)
           const transformX = placement === 'top' || placement === 'bottom' ? '-50%' : '0'
           if (index > 0) {
@@ -137,11 +147,17 @@ const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
               ...configStyles?.wrapper,
             }}
             onMouseenter={() => {
+              if (!stackEnabled.value) {
+                return
+              }
               hoverKeys.value = hoverKeys.value.includes(strKey)
                 ? hoverKeys.value
                 : [...hoverKeys.value, strKey]
             }}
             onMouseleave={() => {
+              if (!stackEnabled.value) {
+                return
+              }
               hoverKeys.value = hoverKeys.value.filter(k => k !== strKey)
             }}
           >
@@ -186,7 +202,7 @@ const NoticeList = defineComponent<NoticeListProps>((props, { attrs }) => {
             (attrs as any).class,
             {
               [`${prefixCls}-stack-expanded`]: expanded.value,
-              [`${prefixCls}-stack`]: stackEnabled.value,
+              [`${prefixCls}-stack`]: stackActive.value,
             },
           ),
           style: (attrs as any).style,

package/src/hooks/useNotification.tsx

@@ -1,8 +1,8 @@
 import type { VueNode } from '@v-c/util/dist/type'
-import type { CSSProperties, TransitionGroupProps } from 'vue'
+import type { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue'
 import type { Key, OpenConfig, Placement, StackConfig } from '../interface'
 import type { NotificationsProps, NotificationsRef } from '../Notifications'
-import { onMounted, shallowRef, watch } from 'vue'
+import { computed, onMounted, shallowRef, unref, watch } from 'vue'
 import Notifications from '../Notifications'
 
 const defaultGetContainer = () => document.body
@@ -75,35 +75,45 @@ function mergeConfig<T>(...objList: Partial<T>[]): T {
   return clone
 }
 
-export default function useNotification(rootConfig: NotificationConfig = {}) {
-  const {
-    getContainer = defaultGetContainer,
-    motion,
-    prefixCls,
-    maxCount,
-    className,
-    style,
-    onAllRemoved,
-    stack,
-    renderNotifications,
-    ...shareConfig
-  } = rootConfig
+export default function useNotification(rootConfig: MaybeRef<NotificationConfig> = {}) {
+  const configRef = computed(() => unref(rootConfig) || {})
   const container = shallowRef<HTMLElement | ShadowRoot>()
 
   const notificationRef = shallowRef<NotificationsRef>()
 
+  const shareConfig = computed(() => {
+    const {
+      getContainer,
+      motion,
+      prefixCls,
+      maxCount,
+      className,
+      style,
+      onAllRemoved,
+      stack,
+      renderNotifications,
+      ...restConfig
+    } = configRef.value
+    return restConfig
+  })
+
+  const resolveContainer = () => {
+    const getContainer = configRef.value.getContainer || defaultGetContainer
+    return getContainer()
+  }
+
   const contextHolder = () => (
     <Notifications
       container={container.value}
       ref={notificationRef}
-      prefixCls={prefixCls}
-      motion={motion}
-      maxCount={maxCount}
-      className={className}
-      style={style}
-      onAllRemoved={onAllRemoved}
-      stack={stack}
-      renderNotifications={renderNotifications}
+      prefixCls={configRef.value.prefixCls}
+      motion={configRef.value.motion}
+      maxCount={configRef.value.maxCount}
+      className={configRef.value.className}
+      style={configRef.value.style}
+      onAllRemoved={configRef.value.onAllRemoved}
+      stack={configRef.value.stack}
+      renderNotifications={configRef.value.renderNotifications}
     />
   )
 
@@ -113,7 +123,7 @@ export default function useNotification(rootConfig: NotificationConfig = {}) {
 
   const api: NotificationAPI = {
     open(config) {
-      const mergedConfig = mergeConfig(shareConfig, config)
+      const mergedConfig = mergeConfig(shareConfig.value, config)
       if (mergedConfig.key === null || mergedConfig.key === undefined) {
         mergedConfig.key = `vc-notification-${uniqueKey}`
         uniqueKey += 1
@@ -134,7 +144,13 @@ export default function useNotification(rootConfig: NotificationConfig = {}) {
   // Which means getContainer should be stable.
   onMounted(
     () => {
-      container.value = getContainer()
+      container.value = resolveContainer()
+    },
+  )
+  watch(
+    () => configRef.value.getContainer,
+    () => {
+      container.value = resolveContainer()
     },
   )
   watch(taskQueue, () => {

package/src/interface.ts

@@ -14,7 +14,7 @@ export interface NoticeConfig {
   closeIcon?: VueNode
   closable?:
     | boolean
-    | ({ closeIcon?: VueNode; onClose?: VoidFunction } & Record<string, any>)
+    | ({ closeIcon?: VueNode, onClose?: VoidFunction } & Record<string, any>)
   className?: string
   style?: CSSProperties
   classNames?: {

package/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config.ts'
+import configShared from '../../vitest.config'
 
 export default mergeConfig(
   configShared,