@v-c/notification 2.0.0-beta.1 → 2.0.0-rc.1

package/dist/hooks/useListPosition/index.js

@@ -1,48 +1,41 @@
 import useSizes from "./useSizes.js";
-import { computed, unref } from "vue";
+import { computed } from "vue";
 //#region src/hooks/useListPosition/index.ts
 /**
 * Calculates each notification's position and the full list height.
+* Mirrors rc-notification@2.0 useListPosition.
 */
-function useListPosition(configList, stack, gap = 0) {
+function useListPosition(configList, stack, gap) {
 	const [sizeMap, setNodeSize] = useSizes();
-	const result = computed(() => {
-		const list = unref(configList);
-		const stackValue = unref(stack);
-		const gapValue = unref(gap) ?? 0;
+	return [computed(() => {
 		let offsetY = 0;
 		let nextTotalHeight = 0;
-		const stackThreshold = stackValue?.threshold ?? 0;
-		const positions = /* @__PURE__ */ new Map();
+		const stackParams = stack.value;
+		const stackThreshold = stackParams?.threshold ?? 0;
+		const stackOffset = stackParams?.offset ?? 0;
+		const notificationPosition = /* @__PURE__ */ new Map();
 		let topNoticeHeight;
 		let topNoticeWidth;
-		list.slice().reverse().forEach((config, index) => {
+		configList.value.slice().reverse().forEach((config, index) => {
 			const key = String(config.key);
 			const height = sizeMap.value[key]?.height ?? 0;
-			const y = stackValue && index > 0 ? offsetY + (stackValue.offset ?? 0) - height : offsetY;
-			positions.set(key, y);
+			const y = stackParams && index > 0 ? offsetY + stackOffset - height : offsetY;
+			notificationPosition.set(key, y);
 			if (index === 0) {
 				topNoticeHeight = height;
 				topNoticeWidth = sizeMap.value[key]?.width ?? 0;
 			}
-			if (!stackValue || index < stackThreshold) nextTotalHeight = Math.max(nextTotalHeight, y + height);
-			if (stackValue) offsetY = y + height;
-			else offsetY += height + gapValue;
+			if (!stackParams || index < stackThreshold) nextTotalHeight = Math.max(nextTotalHeight, y + height);
+			if (stackParams) offsetY = y + height;
+			else offsetY += height + gap.value;
 		});
 		return {
-			positions,
+			notificationPosition,
 			totalHeight: nextTotalHeight,
 			topNoticeHeight,
 			topNoticeWidth
 		};
-	});
-	return [
-		computed(() => result.value.positions),
-		setNodeSize,
-		computed(() => result.value.totalHeight),
-		computed(() => result.value.topNoticeHeight),
-		computed(() => result.value.topNoticeWidth)
-	];
+	}), setNodeSize];
 }
 //#endregion
 export { useListPosition as default };

package/dist/hooks/useListPosition/useSizes.d.ts

@@ -1,13 +1,10 @@
-import { Ref } from 'vue';
 export interface NodeSize {
     width: number;
     height: number;
 }
 export type NodeSizeMap = Record<string, NodeSize>;
 /**
- * Track measured node sizes by key. Returns the size map ref and a setter callback.
+ * Stores measured node sizes by key and exposes a callback to update them.
+ * Mirrors rc-notification@2.0 useSizes.
  */
-export default function useSizes(): [
-    Ref<NodeSizeMap>,
-    (key: string, node: HTMLElement | null) => void
-];
+export default function useSizes(): readonly [import('vue').ShallowRef<NodeSizeMap, NodeSizeMap>, (key: string, node: HTMLDivElement | null) => void];

package/dist/hooks/useListPosition/useSizes.js

@@ -1,28 +1,30 @@
-import { ref } from "vue";
+import { shallowRef } from "vue";
 //#region src/hooks/useListPosition/useSizes.ts
 /**
-* Track measured node sizes by key. Returns the size map ref and a setter callback.
+* Stores measured node sizes by key and exposes a callback to update them.
+* Mirrors rc-notification@2.0 useSizes.
 */
 function useSizes() {
-	const sizeMap = ref({});
-	function setNodeSize(key, node) {
+	const sizeMap = shallowRef({});
+	const setNodeSize = (key, node) => {
 		if (!node) {
 			if (!(key in sizeMap.value)) return;
-			const { [key]: _, ...rest } = sizeMap.value;
-			sizeMap.value = rest;
+			const next = { ...sizeMap.value };
+			delete next[key];
+			sizeMap.value = next;
 			return;
 		}
-		const next = {
+		const nextSize = {
 			width: node.offsetWidth,
 			height: node.offsetHeight
 		};
 		const prev = sizeMap.value[key];
-		if (prev && prev.width === next.width && prev.height === next.height) return;
+		if (prev && prev.width === nextSize.width && prev.height === nextSize.height) return;
 		sizeMap.value = {
 			...sizeMap.value,
-			[key]: next
+			[key]: nextSize
 		};
-	}
+	};
 	return [sizeMap, setNodeSize];
 }
 //#endregion

package/dist/hooks/useNoticeTimer.d.ts

@@ -1,6 +1,7 @@
-import { ComputedRef, MaybeRef } from 'vue';
+import { ComputedRef } from 'vue';
 /**
- * Run the auto-close timer for a notice and report progress updates.
- * Returns controls to pause and resume the timer.
+ * Runs the notice auto-close timer and reports progress updates via rAF.
+ * Returns controls to pause and resume the timer. Mirrors rc-notification@2.0
+ * useNoticeTimer.
  */
-export default function useNoticeTimer(duration: MaybeRef<number | false | null | undefined>, onClose: () => void, onUpdate: (ptg: number) => void): [() => void, () => void, ComputedRef<number>];
+export default function useNoticeTimer(duration: ComputedRef<number | false | null | undefined>, onClose: () => void, onUpdate: (percent: number) => void): [() => void, () => void];

package/dist/hooks/useNoticeTimer.js

@@ -1,71 +1,63 @@
-import { computed, onBeforeUnmount, shallowRef, unref, watch } from "vue";
-import raf from "@v-c/util/dist/raf";
+import { onScopeDispose, shallowRef, watch } from "vue";
 //#region src/hooks/useNoticeTimer.ts
 /**
-* Run the auto-close timer for a notice and report progress updates.
-* Returns controls to pause and resume the timer.
+* Runs the notice auto-close timer and reports progress updates via rAF.
+* Returns controls to pause and resume the timer. Mirrors rc-notification@2.0
+* useNoticeTimer.
 */
 function useNoticeTimer(duration, onClose, onUpdate) {
-	const durationMs = computed(() => {
-		const value = unref(duration);
-		return Math.max(typeof value === "number" ? value : 0, 0) * 1e3;
-	});
-	const walking = shallowRef(durationMs.value > 0);
-	const passTime = shallowRef(0);
+	const durationMs = shallowRef(0);
+	const walking = shallowRef(false);
+	let passTime = 0;
 	let lastRafTime = null;
 	let rafId = null;
-	function syncPassTime() {
+	const syncPassTime = () => {
 		const now = Date.now();
-		if (lastRafTime !== null) passTime.value += now - lastRafTime;
+		if (lastRafTime !== null) passTime += now - lastRafTime;
 		lastRafTime = now;
-	}
-	function cancelRaf() {
+	};
+	const cancelStep = () => {
 		if (rafId !== null) {
-			raf.cancel(rafId);
+			cancelAnimationFrame(rafId);
 			rafId = null;
 		}
-	}
-	function onPause() {
+	};
+	const onPause = () => {
 		syncPassTime();
 		walking.value = false;
-	}
-	function onResume() {
+	};
+	const onResume = () => {
 		if (durationMs.value > 0) {
 			lastRafTime = Date.now();
 			walking.value = true;
 		} else onUpdate(0);
-	}
-	watch(durationMs, () => {
-		passTime.value = 0;
-		lastRafTime = null;
+	};
+	watch(duration, () => {
+		const next = typeof duration.value === "number" ? duration.value : 0;
+		durationMs.value = Math.max(next, 0) * 1e3;
+		passTime = 0;
 		walking.value = durationMs.value > 0;
-	});
+	}, { immediate: true });
 	watch(walking, (isWalking) => {
-		cancelRaf();
+		cancelStep();
 		if (!isWalking) return;
-		function step() {
+		lastRafTime = Date.now();
+		const step = () => {
 			syncPassTime();
-			if (passTime.value >= durationMs.value) {
+			if (passTime >= durationMs.value) {
 				onUpdate(1);
 				onClose();
-			} else {
-				onUpdate(Math.min(passTime.value / durationMs.value, 1));
-				rafId = raf(step);
+				return;
 			}
-		}
+			onUpdate(Math.min(passTime / durationMs.value, 1));
+			rafId = requestAnimationFrame(step);
+		};
 		step();
 	}, { immediate: true });
-	onBeforeUnmount(() => {
-		cancelRaf();
+	onScopeDispose(() => {
+		cancelStep();
 	});
-	return [
-		onResume,
-		onPause,
-		computed(() => {
-			if (durationMs.value <= 0) return 0;
-			return Math.min(passTime.value / durationMs.value, 1);
-		})
-	];
+	return [onResume, onPause];
 }
 //#endregion
 export { useNoticeTimer as default };

package/dist/hooks/useNotification.d.ts

@@ -1,15 +1,33 @@
+import { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue';
 import { VueNode } from '@v-c/util/dist/type';
-import { MaybeRef } from 'vue';
-import { NotificationListConfig, Placement } from '../NotificationList';
+import { ClosableType, Key, NotificationListConfig, Placement, StackConfig } from '../interface';
+import { ComponentsType } from '../Notification';
+import { NotificationClassNames, NotificationStyles } from '../NotificationList';
 import { NotificationsProps } from '../Notifications';
-type Key = string | number | symbol;
 type OptionalConfig = Partial<NotificationListConfig>;
-export interface NotificationConfig extends Omit<NotificationsProps, 'container'> {
-    placement?: Placement;
+export interface NotificationConfig {
+    prefixCls?: string;
+    /** Customize container. It will repeat call which means you should return same container element. */
     getContainer?: () => HTMLElement | ShadowRoot;
-    closable?: NotificationListConfig['closable'];
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    closable?: ClosableType;
+    maxCount?: number;
     duration?: number | false | null;
-    showProgress?: NotificationListConfig['showProgress'];
+    showProgress?: boolean;
+    pauseOnHover?: boolean;
+    placement?: Placement;
+    classNames?: NotificationClassNames;
+    styles?: NotificationStyles;
+    components?: ComponentsType;
+    /** @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;

package/dist/hooks/useNotification.js

@@ -7,8 +7,8 @@ function mergeConfig(...objList) {
 	const clone = {};
 	objList.forEach((obj) => {
 		if (obj) Object.keys(obj).forEach((key) => {
-			const value = obj[key];
-			if (value !== void 0) clone[key] = value;
+			const val = obj[key];
+			if (val !== void 0) clone[key] = val;
 		});
 	});
 	return clone;
@@ -16,23 +16,17 @@ function mergeConfig(...objList) {
 function useNotification(rootConfig = {}) {
 	const configRef = computed(() => unref(rootConfig) || {});
 	const container = shallowRef();
-	const notificationsRef = shallowRef();
-	const taskQueue = shallowRef([]);
+	const notificationRef = shallowRef();
 	const shareConfig = computed(() => {
-		const { placement, closable, duration, showProgress } = configRef.value;
-		return {
-			placement,
-			closable,
-			duration,
-			showProgress
-		};
+		const { getContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications, pauseOnHover, classNames, styles, components, ...restConfig } = configRef.value;
+		return restConfig;
 	});
-	function resolveContainer() {
+	const resolveContainer = () => {
 		return (configRef.value.getContainer || defaultGetContainer)();
-	}
+	};
 	const contextHolder = () => createVNode(Notifications, {
 		"container": container.value,
-		"ref": notificationsRef,
+		"ref": notificationRef,
 		"prefixCls": configRef.value.prefixCls,
 		"motion": configRef.value.motion,
 		"maxCount": configRef.value.maxCount,
@@ -46,16 +40,17 @@ function useNotification(rootConfig = {}) {
 		"stack": configRef.value.stack,
 		"renderNotifications": configRef.value.renderNotifications
 	}, null);
+	const taskQueue = shallowRef([]);
 	const api = {
 		open(config) {
-			const merged = mergeConfig(shareConfig.value, config);
-			if (merged.key === null || merged.key === void 0) {
-				merged.key = `vc-notification-${uniqueKey}`;
+			const mergedConfig = mergeConfig(shareConfig.value, config);
+			if (mergedConfig.key === null || mergedConfig.key === void 0) {
+				mergedConfig.key = `vc-notification-${uniqueKey}`;
 				uniqueKey += 1;
 			}
 			taskQueue.value = [...taskQueue.value, {
 				type: "open",
-				config: merged
+				config: mergedConfig
 			}];
 		},
 		close(key) {
@@ -75,22 +70,22 @@ function useNotification(rootConfig = {}) {
 		container.value = resolveContainer();
 	});
 	watch(taskQueue, () => {
-		if (notificationsRef.value && taskQueue.value.length) {
-			const tasks = taskQueue.value;
-			tasks.forEach((task) => {
+		if (notificationRef.value && taskQueue.value.length) {
+			taskQueue.value.forEach((task) => {
 				switch (task.type) {
 					case "open":
-						notificationsRef.value?.open(task.config);
+						notificationRef.value?.open(task.config);
 						break;
 					case "close":
-						notificationsRef.value?.close(task.key);
+						notificationRef.value?.close(task.key);
 						break;
 					case "destroy":
-						notificationsRef.value?.destroy();
+						notificationRef.value?.destroy();
 						break;
+					default: break;
 				}
 			});
-			taskQueue.value = taskQueue.value.filter((task) => !tasks.includes(task));
+			taskQueue.value = [];
 		}
 	});
 	return [api, contextHolder];

package/dist/hooks/useStack.d.ts

@@ -1,10 +1,11 @@
-import { ComputedRef, MaybeRef } from 'vue';
-export interface StackConfig {
-    threshold?: number;
-    offset?: number;
-}
-type StackParams = Required<StackConfig>;
-export type StackInput = boolean | StackConfig;
-type UseStack = (config?: MaybeRef<StackInput | undefined>) => [ComputedRef<boolean>, ComputedRef<StackParams>];
+import { ComputedRef, MaybeRef, ToRefs } from 'vue';
+import { StackConfig } from '../interface';
+type StackParams = Exclude<StackConfig, boolean>;
+type UseStack = (config?: MaybeRef<StackConfig | undefined>) => [ComputedRef<boolean>, ToRefs<StackParams>];
+/**
+ * Resolves the stack setting into an enabled flag and normalized stack params.
+ * Mirrors rc-notification@2.0 useStack. The `gap` config is no longer surfaced
+ * here — gap is now read from the list-content CSS `gap`/`row-gap`.
+ */
 declare const useStack: UseStack;
 export default useStack;

package/dist/hooks/useStack.js

@@ -1,19 +1,25 @@
-import { computed, unref } from "vue";
+import { computed, reactive, toRefs, unref, watchEffect } from "vue";
 //#region src/hooks/useStack.ts
 var DEFAULT_OFFSET = 8;
 var DEFAULT_THRESHOLD = 3;
+/**
+* Resolves the stack setting into an enabled flag and normalized stack params.
+* Mirrors rc-notification@2.0 useStack. The `gap` config is no longer surfaced
+* here — gap is now read from the list-content CSS `gap`/`row-gap`.
+*/
 var useStack = (config) => {
-	return [computed(() => !!unref(config)), computed(() => {
+	const result = reactive({
+		offset: DEFAULT_OFFSET,
+		threshold: DEFAULT_THRESHOLD
+	});
+	watchEffect(() => {
 		const value = unref(config);
-		if (value && typeof value === "object") return {
-			offset: value.offset ?? DEFAULT_OFFSET,
-			threshold: value.threshold ?? DEFAULT_THRESHOLD
-		};
-		return {
-			offset: DEFAULT_OFFSET,
-			threshold: DEFAULT_THRESHOLD
-		};
-	})];
+		if (value && typeof value === "object") {
+			result.offset = value.offset ?? DEFAULT_OFFSET;
+			result.threshold = value.threshold ?? DEFAULT_THRESHOLD;
+		}
+	});
+	return [computed(() => !!unref(config)), toRefs(result)];
 };
 //#endregion
 export { useStack as default };

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-import { NotificationAPI, NotificationConfig, default as useNotification } from './hooks/useNotification';
-import { ComponentsType, NotificationProps, default as Notification } from './Notification';
-import { NotificationProgressProps, default as Progress } from './Progress';
-import { default as NotificationList } from './NotificationList';
-import { default as NotificationProvider, useNotificationProvider } from './NotificationProvider';
-export { Notification, NotificationList, NotificationProvider, Progress, useNotification, useNotificationProvider, };
-export type { ComponentsType, NotificationAPI, NotificationConfig, NotificationProgressProps, NotificationProps, };
-export type { NotificationClassNames, NotificationListConfig, NotificationListProps, NotificationStyles, Placement, StackConfig, StackInput, } from './NotificationList';
+import { default as useNotification, NotificationAPI, NotificationConfig } from './hooks/useNotification';
+import { default as Notification, ComponentsType, NotificationClassNames as NoticeClassNames, NotificationProps, NotificationStyles as NoticeStyles } from './Notification';
+import { default as NotificationList, NotificationClassNames, NotificationListProps, NotificationStyles, Placement } from './NotificationList';
+import { useNotificationContext, useNotificationProvider } from './NotificationProvider';
+import { default as Progress, NotificationProgressProps } from './Progress';
+import { Key, NotificationListConfig, StackConfig } from './interface';
+import { ClosableType, ParsedClosableConfig } from './hooks/useClosable';
+export { Notification, NotificationList, Progress, useNotification, useNotificationContext, useNotificationProvider, };
+export type { ClosableType, ComponentsType, Key, NoticeClassNames, NoticeStyles, NotificationAPI, NotificationClassNames, NotificationConfig, NotificationListConfig, NotificationListProps, NotificationProgressProps, NotificationProps, NotificationStyles, ParsedClosableConfig, Placement, StackConfig, };

package/dist/index.js

@@ -1,6 +1,6 @@
 import Progress from "./Progress.js";
 import Notification from "./Notification.js";
-import NotificationProvider, { useNotificationProvider } from "./NotificationProvider.js";
+import { useNotificationContext, useNotificationProvider } from "./NotificationProvider.js";
 import NotificationList from "./NotificationList/index.js";
 import useNotification from "./hooks/useNotification.js";
-export { Notification, NotificationList, NotificationProvider, Progress, useNotification, useNotificationProvider };
+export { Notification, NotificationList, Progress, useNotification, useNotificationContext, useNotificationProvider };

package/dist/interface.d.ts

@@ -0,0 +1,30 @@
+import { ClosableType } from './hooks/useClosable';
+import { ComponentsType, NotificationProps } from './Notification';
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type Key = string | number;
+export type StackConfig = boolean | {
+    /**
+     * When the notice count exceeds this threshold, notices will be stacked.
+     * @default 3
+     */
+    threshold?: number;
+    /**
+     * Vertical offset applied between stacked notices.
+     * @default 8
+     */
+    offset?: number;
+};
+/**
+ * Configuration accepted by the public `api.open` call.
+ * Mirrors rc-notification@2.0 NotificationListConfig.
+ */
+export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
+    key: Key;
+    placement?: Placement;
+    times?: number;
+}
+export type Placements = Partial<Record<Placement, NotificationListConfig[]>>;
+export type InnerOpenConfig = NotificationListConfig & {
+    times?: number;
+};
+export type { ClosableType, ComponentsType, NotificationProps, };

package/docs/context.vue

@@ -5,7 +5,7 @@ import motion from './motion'
 
 const [{ open }, holder] = useNotification({ motion })
 const NOTICE = {
-  description: h('span', ['simple show']),
+  content: h('span', ['simple show']),
   onclose() {
     console.log('simple close')
   },

package/docs/hooks.vue

@@ -11,7 +11,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          description: `${new Date().toISOString()}`,
+          content: `${new Date().toISOString()}`,
         })
       }"
     >
@@ -20,7 +20,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          description: `${Array(Math.round(Math.random() * 5) + 1)
+          content: `${Array(Math.round(Math.random() * 5) + 1)
             .fill(1)
             .map(() => new Date().toISOString())
             .join('\n')}`,
@@ -34,7 +34,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          description: `${Array(5)
+          content: `${Array(5)
             .fill(1)
             .map(() => new Date().toISOString())
             .join('\n')}`,
@@ -50,7 +50,7 @@ const [notice, contextHolder] = useNotification({ motion, closable: true })
     <button
       @click="() => {
         notice.open({
-          description: `No Close! ${new Date().toISOString()}`,
+          content: `No Close! ${new Date().toISOString()}`,
           duration: null,
           closable: false,
           key: 'No Close',