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

package/dist/Notifications.js

@@ -1,140 +1,149 @@
-import NoticeList_default from "./NoticeList.js";
-import { Teleport, createVNode, defineComponent, isVNode, mergeDefaults, shallowRef, watch } from "vue";
+import NotificationList from "./NotificationList/index.js";
+import { Teleport, createVNode, defineComponent, isVNode, shallowRef, watch } from "vue";
+//#region src/Notifications.tsx
 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({
+var Notifications = /* @__PURE__ */ defineComponent({
+	name: "Notifications",
+	inheritAttrs: false,
+	props: {
 		prefixCls: {
 			type: String,
-			required: false,
-			default: void 0
+			default: "vc-notification"
 		},
-		motion: {
-			type: [Object, Function],
-			required: false,
+		classNames: {
+			type: Object,
 			default: void 0
 		},
-		container: {
-			required: false,
+		styles: {
+			type: Object,
 			default: void 0
 		},
-		maxCount: {
-			type: Number,
-			required: false,
+		components: {
+			type: Object,
 			default: void 0
 		},
 		className: {
 			type: Function,
-			required: false,
 			default: void 0
 		},
 		style: {
 			type: Function,
-			required: false,
 			default: void 0
 		},
-		onAllRemoved: {
-			required: false,
+		container: {
+			type: Object,
+			default: void 0
+		},
+		motion: {
+			type: [Object, Function],
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			default: void 0
+		},
+		pauseOnHover: {
+			type: Boolean,
 			default: void 0
 		},
 		stack: {
 			type: [Boolean, Object],
-			required: false,
+			default: void 0
+		},
+		onAllRemoved: {
+			type: Function,
 			default: void 0
 		},
 		renderNotifications: {
 			type: Function,
-			required: false,
 			default: void 0
 		}
-	}, defaults),
-	name: "Notifications"
+	},
+	setup(props, { expose }) {
+		const configList = shallowRef([]);
+		const placements = shallowRef({});
+		const emptyRef = shallowRef(false);
+		expose({
+			open: (config) => {
+				const list = configList.value;
+				let clone = [...list];
+				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: (key) => {
+				configList.value = configList.value.filter((item) => item.key !== key);
+			},
+			destroy: () => {
+				configList.value = [];
+			}
+		});
+		watch(configList, () => {
+			const next = {};
+			configList.value.forEach((config) => {
+				const placement = config.placement ?? "topRight";
+				next[placement] = next[placement] || [];
+				next[placement].push(config);
+			});
+			Object.keys(placements.value).forEach((placement) => {
+				next[placement] = next[placement] || [];
+			});
+			placements.value = next;
+		}, { immediate: true });
+		function onAllNoticeRemoved(placement) {
+			const clone = { ...placements.value };
+			if (!(clone[placement] || []).length) delete clone[placement];
+			placements.value = clone;
+		}
+		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, prefixCls = "vc-notification" } = props;
+			if (!container) return null;
+			const placementList = Object.keys(placements.value);
+			return createVNode(Teleport, { "to": container }, _isSlot(_slot = placementList.map((placement) => {
+				const list = createVNode(NotificationList, {
+					"key": placement,
+					"configList": placements.value[placement],
+					"placement": placement,
+					"prefixCls": prefixCls,
+					"pauseOnHover": props.pauseOnHover,
+					"classNames": props.classNames,
+					"styles": props.styles,
+					"components": props.components,
+					"class": props.className?.(placement),
+					"style": props.style?.(placement),
+					"motion": props.motion,
+					"stack": props.stack,
+					"onNoticeClose": (key) => {
+						configList.value = configList.value.filter((item) => item.key !== key);
+					},
+					"onAllRemoved": onAllNoticeRemoved
+				}, null);
+				return props.renderNotifications ? props.renderNotifications(list, {
+					prefixCls,
+					key: placement
+				}) : list;
+			})) ? _slot : { default: () => [_slot] });
+		};
+	}
 });
-export { Notifications_default as default };
+//#endregion
+export { Notifications as default };

package/dist/Progress.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FunctionalComponent } from 'vue';
+export interface NotificationProgressProps {
+    class?: string;
+    style?: CSSProperties;
+    percent: number;
+}
+declare const Progress: FunctionalComponent<NotificationProgressProps>;
+export default Progress;

package/dist/Progress.js

@@ -0,0 +1,18 @@
+import { createVNode } from "vue";
+//#region src/Progress.tsx
+var Progress = (props) => {
+	return createVNode("progress", {
+		"class": props.class,
+		"max": "100",
+		"value": props.percent,
+		"style": props.style
+	}, null);
+};
+Progress.props = [
+	"class",
+	"style",
+	"percent"
+];
+Progress.inheritAttrs = false;
+//#endregion
+export { Progress as default };

package/dist/hooks/useClosable.d.ts

@@ -0,0 +1,22 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { ComputedRef, MaybeRef } from 'vue';
+export type ClosableConfig = {
+    closeIcon?: VueNode;
+    disabled?: boolean;
+    onClose?: VoidFunction;
+} & Record<string, any>;
+export type ClosableType = boolean | ClosableConfig | null | undefined;
+export interface ParsedClosableConfig {
+    closeIcon: VueNode;
+    disabled: boolean;
+    onClose?: VoidFunction;
+    [key: string]: any;
+}
+/**
+ * Normalize the closable option into an enabled flag, parsed config, and aria props.
+ */
+export default function useClosable(closable: MaybeRef<ClosableType>): [
+    ComputedRef<boolean>,
+    ComputedRef<ParsedClosableConfig>,
+    ComputedRef<Record<string, any>>
+];

package/dist/hooks/useClosable.js

@@ -0,0 +1,33 @@
+import { computed, unref } from "vue";
+import pickAttrs from "@v-c/util/dist/pickAttrs";
+//#region src/hooks/useClosable.ts
+/**
+* Normalize the closable option into an enabled flag, parsed config, and aria props.
+*/
+function useClosable(closable) {
+	const closableObj = computed(() => {
+		const value = unref(closable);
+		if (value === false) return {
+			closeIcon: null,
+			disabled: true
+		};
+		if (typeof value === "object" && value !== null) return value;
+		return {};
+	});
+	const enabled = computed(() => !!unref(closable));
+	const closableConfig = computed(() => {
+		const obj = closableObj.value;
+		return {
+			...obj,
+			closeIcon: "closeIcon" in obj ? obj.closeIcon : "×",
+			disabled: obj.disabled ?? false
+		};
+	});
+	return [
+		enabled,
+		closableConfig,
+		computed(() => pickAttrs(closableConfig.value, true))
+	];
+}
+//#endregion
+export { useClosable as default };

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

@@ -0,0 +1,17 @@
+import { ComputedRef, MaybeRef } from 'vue';
+import { StackConfig } from '../useStack';
+type Key = string | number | symbol;
+export interface ConfigItem {
+    key: Key;
+}
+/**
+ * Calculates each notification's position and the full list height.
+ */
+export default function useListPosition(configList: MaybeRef<readonly ConfigItem[]>, stack: MaybeRef<StackConfig | undefined>, gap?: MaybeRef<number>): [
+    ComputedRef<Map<string, number>>,
+    (key: string, node: HTMLElement | null) => void,
+    ComputedRef<number>,
+    ComputedRef<number | undefined>,
+    ComputedRef<number | undefined>
+];
+export {};

package/dist/hooks/useListPosition/index.js

@@ -0,0 +1,48 @@
+import useSizes from "./useSizes.js";
+import { computed, unref } from "vue";
+//#region src/hooks/useListPosition/index.ts
+/**
+* Calculates each notification's position and the full list height.
+*/
+function useListPosition(configList, stack, gap = 0) {
+	const [sizeMap, setNodeSize] = useSizes();
+	const result = computed(() => {
+		const list = unref(configList);
+		const stackValue = unref(stack);
+		const gapValue = unref(gap) ?? 0;
+		let offsetY = 0;
+		let nextTotalHeight = 0;
+		const stackThreshold = stackValue?.threshold ?? 0;
+		const positions = /* @__PURE__ */ new Map();
+		let topNoticeHeight;
+		let topNoticeWidth;
+		list.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);
+			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;
+		});
+		return {
+			positions,
+			totalHeight: nextTotalHeight,
+			topNoticeHeight,
+			topNoticeWidth
+		};
+	});
+	return [
+		computed(() => result.value.positions),
+		setNodeSize,
+		computed(() => result.value.totalHeight),
+		computed(() => result.value.topNoticeHeight),
+		computed(() => result.value.topNoticeWidth)
+	];
+}
+//#endregion
+export { useListPosition as default };

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

@@ -0,0 +1,13 @@
+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.
+ */
+export default function useSizes(): [
+    Ref<NodeSizeMap>,
+    (key: string, node: HTMLElement | null) => void
+];

package/dist/hooks/useListPosition/useSizes.js

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+//#region src/hooks/useListPosition/useSizes.ts
+/**
+* Track measured node sizes by key. Returns the size map ref and a setter callback.
+*/
+function useSizes() {
+	const sizeMap = ref({});
+	function setNodeSize(key, node) {
+		if (!node) {
+			if (!(key in sizeMap.value)) return;
+			const { [key]: _, ...rest } = sizeMap.value;
+			sizeMap.value = rest;
+			return;
+		}
+		const next = {
+			width: node.offsetWidth,
+			height: node.offsetHeight
+		};
+		const prev = sizeMap.value[key];
+		if (prev && prev.width === next.width && prev.height === next.height) return;
+		sizeMap.value = {
+			...sizeMap.value,
+			[key]: next
+		};
+	}
+	return [sizeMap, setNodeSize];
+}
+//#endregion
+export { useSizes as default };

package/dist/hooks/useNoticeTimer.d.ts

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

package/dist/hooks/useNoticeTimer.js

@@ -0,0 +1,71 @@
+import { computed, onBeforeUnmount, shallowRef, unref, watch } from "vue";
+import raf from "@v-c/util/dist/raf";
+//#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.
+*/
+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);
+	let lastRafTime = null;
+	let rafId = null;
+	function syncPassTime() {
+		const now = Date.now();
+		if (lastRafTime !== null) passTime.value += now - lastRafTime;
+		lastRafTime = now;
+	}
+	function cancelRaf() {
+		if (rafId !== null) {
+			raf.cancel(rafId);
+			rafId = null;
+		}
+	}
+	function onPause() {
+		syncPassTime();
+		walking.value = false;
+	}
+	function onResume() {
+		if (durationMs.value > 0) {
+			lastRafTime = Date.now();
+			walking.value = true;
+		} else onUpdate(0);
+	}
+	watch(durationMs, () => {
+		passTime.value = 0;
+		lastRafTime = null;
+		walking.value = durationMs.value > 0;
+	});
+	watch(walking, (isWalking) => {
+		cancelRaf();
+		if (!isWalking) return;
+		function step() {
+			syncPassTime();
+			if (passTime.value >= durationMs.value) {
+				onUpdate(1);
+				onClose();
+			} else {
+				onUpdate(Math.min(passTime.value / durationMs.value, 1));
+				rafId = raf(step);
+			}
+		}
+		step();
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		cancelRaf();
+	});
+	return [
+		onResume,
+		onPause,
+		computed(() => {
+			if (durationMs.value <= 0) return 0;
+			return Math.min(passTime.value / durationMs.value, 1);
+		})
+	];
+}
+//#endregion
+export { useNoticeTimer as default };

package/dist/hooks/useNotification.d.ts

@@ -1,31 +1,15 @@
 import { VueNode } from '@v-c/util/dist/type';
-import { CSSProperties, MaybeRef, TransitionGroupProps } from 'vue';
-import { Key, OpenConfig, Placement, StackConfig } from '../interface';
+import { MaybeRef } from 'vue';
+import { NotificationListConfig, Placement } from '../NotificationList';
 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. */
+type Key = string | number | symbol;
+type OptionalConfig = Partial<NotificationListConfig>;
+export interface NotificationConfig extends Omit<NotificationsProps, 'container'> {
+    placement?: Placement;
     getContainer?: () => HTMLElement | ShadowRoot;
-    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
-    closeIcon?: VueNode;
-    closable?: boolean | ({
-        closeIcon?: VueNode;
-        onClose?: VoidFunction;
-    } & Record<string, any>);
-    maxCount?: number;
+    closable?: NotificationListConfig['closable'];
     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'];
+    showProgress?: NotificationListConfig['showProgress'];
 }
 export interface NotificationAPI {
     open: (config: OptionalConfig) => void;

package/dist/hooks/useNotification.js

@@ -1,13 +1,14 @@
-import Notifications_default from "../Notifications.js";
+import Notifications from "../Notifications.js";
 import { computed, createVNode, onMounted, shallowRef, unref, watch } from "vue";
+//#region src/hooks/useNotification.tsx
 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;
+			const value = obj[key];
+			if (value !== void 0) clone[key] = value;
 		});
 	});
 	return clone;
@@ -15,37 +16,46 @@ function mergeConfig(...objList) {
 function useNotification(rootConfig = {}) {
 	const configRef = computed(() => unref(rootConfig) || {});
 	const container = shallowRef();
-	const notificationRef = shallowRef();
+	const notificationsRef = shallowRef();
+	const taskQueue = shallowRef([]);
 	const shareConfig = computed(() => {
-		const { getContainer, motion, prefixCls, maxCount, className, style, onAllRemoved, stack, renderNotifications, ...restConfig } = configRef.value;
-		return restConfig;
+		const { placement, closable, duration, showProgress } = configRef.value;
+		return {
+			placement,
+			closable,
+			duration,
+			showProgress
+		};
 	});
-	const resolveContainer = () => {
+	function resolveContainer() {
 		return (configRef.value.getContainer || defaultGetContainer)();
-	};
-	const contextHolder = () => createVNode(Notifications_default, {
+	}
+	const contextHolder = () => createVNode(Notifications, {
 		"container": container.value,
-		"ref": notificationRef,
+		"ref": notificationsRef,
 		"prefixCls": configRef.value.prefixCls,
 		"motion": configRef.value.motion,
 		"maxCount": configRef.value.maxCount,
+		"pauseOnHover": configRef.value.pauseOnHover,
+		"classNames": configRef.value.classNames,
+		"styles": configRef.value.styles,
+		"components": configRef.value.components,
 		"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.value, config);
-			if (mergedConfig.key === null || mergedConfig.key === void 0) {
-				mergedConfig.key = `vc-notification-${uniqueKey}`;
+			const merged = mergeConfig(shareConfig.value, config);
+			if (merged.key === null || merged.key === void 0) {
+				merged.key = `vc-notification-${uniqueKey}`;
 				uniqueKey += 1;
 			}
 			taskQueue.value = [...taskQueue.value, {
 				type: "open",
-				config: mergedConfig
+				config: merged
 			}];
 		},
 		close(key) {
@@ -65,24 +75,25 @@ function useNotification(rootConfig = {}) {
 		container.value = resolveContainer();
 	});
 	watch(taskQueue, () => {
-		if (notificationRef.value && taskQueue.value.length) {
-			taskQueue.value.forEach((task) => {
+		if (notificationsRef.value && taskQueue.value.length) {
+			const tasks = taskQueue.value;
+			tasks.forEach((task) => {
 				switch (task.type) {
 					case "open":
-						notificationRef.value?.open(task.config);
+						notificationsRef.value?.open(task.config);
 						break;
 					case "close":
-						notificationRef.value?.close(task.key);
+						notificationsRef.value?.close(task.key);
 						break;
 					case "destroy":
-						notificationRef.value?.destroy();
+						notificationsRef.value?.destroy();
 						break;
-					default: break;
 				}
 			});
-			taskQueue.value = taskQueue.value.filter((task) => !taskQueue.value.includes(task));
+			taskQueue.value = taskQueue.value.filter((task) => !tasks.includes(task));
 		}
 	});
 	return [api, contextHolder];
 }
+//#endregion
 export { useNotification as default };