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

package/dist/NotificationList/Content.d.ts

@@ -1,88 +1,11 @@
-import { CSSProperties, PropType, TransitionGroupProps } from 'vue';
+import { CSSProperties } from 'vue';
 export interface ContentProps {
     listPrefixCls: string;
     height: number;
     topNoticeHeight?: number;
     topNoticeWidth?: number;
-    class?: string;
+    className?: string;
     style?: CSSProperties;
-    motionProps?: TransitionGroupProps;
-    onAfterLeave?: () => void;
 }
-declare const Content: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    listPrefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
-    topNoticeHeight: {
-        type: NumberConstructor;
-        default: number;
-    };
-    topNoticeWidth: {
-        type: NumberConstructor;
-        default: number;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    motionProps: {
-        type: PropType<TransitionGroupProps>;
-        default: undefined;
-    };
-    onAfterLeave: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    listPrefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
-    topNoticeHeight: {
-        type: NumberConstructor;
-        default: number;
-    };
-    topNoticeWidth: {
-        type: NumberConstructor;
-        default: number;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    motionProps: {
-        type: PropType<TransitionGroupProps>;
-        default: undefined;
-    };
-    onAfterLeave: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    onAfterLeave: () => void;
-    topNoticeHeight: number;
-    topNoticeWidth: number;
-    motionProps: TransitionGroupProps;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const Content: import('vue').DefineSetupFnComponent<ContentProps, {}, {}, ContentProps & {}, import('vue').PublicProps>;
 export default Content;

package/dist/NotificationList/Content.js

@@ -1,9 +1,28 @@
-import { TransitionGroup, defineComponent, h, shallowRef } from "vue";
-import { classNames } from "@v-c/util";
+import { createVNode, defineComponent, ref } from "vue";
+import { clsx } from "@v-c/util";
 //#region src/NotificationList/Content.tsx
-var Content = /* @__PURE__ */ defineComponent({
-	name: "NotificationListContent",
-	inheritAttrs: false,
+var Content = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const contentRef = ref(null);
+	let prevHeight = props.height;
+	expose({ nativeElement: contentRef });
+	return () => {
+		const { listPrefixCls, height, topNoticeHeight = 0, topNoticeWidth = 0, className, style } = props;
+		const heightStatus = height < prevHeight ? "decrease" : "increase";
+		prevHeight = height;
+		const contentPrefixCls = `${listPrefixCls}-content`;
+		const contentStyle = {
+			...style,
+			height,
+			"--top-notificiation-height": `${topNoticeHeight}px`,
+			"--top-notificiation-width": `${topNoticeWidth}px`
+		};
+		return createVNode("div", {
+			"ref": contentRef,
+			"class": clsx(contentPrefixCls, `${contentPrefixCls}-${heightStatus}`, className),
+			"style": contentStyle
+		}, [slots.default?.()]);
+	};
+}, {
 	props: {
 		listPrefixCls: {
 			type: String,
@@ -15,60 +34,27 @@ var Content = /* @__PURE__ */ defineComponent({
 		},
 		topNoticeHeight: {
 			type: Number,
-			default: 0
+			required: false,
+			default: void 0
 		},
 		topNoticeWidth: {
 			type: Number,
-			default: 0
+			required: false,
+			default: void 0
 		},
-		class: {
+		className: {
 			type: String,
+			required: false,
 			default: void 0
 		},
 		style: {
 			type: Object,
-			default: void 0
-		},
-		motionProps: {
-			type: Object,
-			default: void 0
-		},
-		onAfterLeave: {
-			type: Function,
+			required: false,
 			default: void 0
 		}
 	},
-	setup(props, { slots, expose }) {
-		let prevHeight = props.height;
-		const innerRef = shallowRef(null);
-		expose({ get nativeElement() {
-			return innerRef.value;
-		} });
-		return () => {
-			const { listPrefixCls, height, topNoticeHeight, topNoticeWidth, class: className, style, motionProps, onAfterLeave } = props;
-			const heightStatus = height < prevHeight ? "decrease" : "increase";
-			prevHeight = height;
-			const contentPrefixCls = `${listPrefixCls}-content`;
-			const contentStyle = {
-				...style,
-				"height": `${height}px`,
-				"--top-notificiation-height": `${topNoticeHeight ?? 0}px`,
-				"--top-notificiation-width": `${topNoticeWidth ?? 0}px`
-			};
-			const contentClass = classNames(contentPrefixCls, `${contentPrefixCls}-${heightStatus}`, className);
-			return h(TransitionGroup, {
-				tag: "div",
-				appear: true,
-				...motionProps,
-				ref: (el) => {
-					innerRef.value = el?.$el ?? el;
-				},
-				class: contentClass,
-				style: contentStyle,
-				onAfterLeave
-			}, () => slots.default?.());
-		};
-	}
+	name: "NotificationListContent",
+	inheritAttrs: false
 });
 //#endregion
 export { Content as default };

package/dist/NotificationList/index.d.ts

@@ -1,10 +1,8 @@
-import { CSSProperties, PropType, TransitionGroupProps } from 'vue';
-import { StackInput } from '../hooks/useStack';
-import { ComponentsType, NotificationClassNames as NoticeClassNames, NotificationStyles as NoticeStyles, NotificationProps } from '../Notification';
-type Key = string | number | symbol;
+import { CSSProperties, TransitionGroupProps } from 'vue';
+import { Key, StackConfig } from '../interface';
+import { ComponentsType, NotificationClassNames as NoticeClassNames, NotificationProps, NotificationStyles as NoticeStyles } from '../Notification';
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
-export type { StackConfig, StackInput } from '../hooks/useStack';
-export type { ComponentsType } from '../Notification';
+export type { StackConfig };
 export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
     key: Key;
     placement?: Placement;
@@ -26,131 +24,12 @@ export interface NotificationListProps {
     classNames?: NotificationClassNames;
     styles?: NotificationStyles;
     components?: ComponentsType;
-    stack?: StackInput;
+    stack?: StackConfig;
     motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
-    class?: string;
+    className?: string;
     style?: CSSProperties;
     onNoticeClose?: (key: Key) => void;
     onAllRemoved?: (placement: Placement) => void;
 }
-declare const NotificationList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    configList: {
-        type: PropType<NotificationListConfig[]>;
-        default: () => never[];
-    };
-    prefixCls: {
-        type: StringConstructor;
-        default: string;
-    };
-    placement: {
-        type: PropType<Placement>;
-        required: true;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    classNames: {
-        type: PropType<NotificationClassNames>;
-        default: undefined;
-    };
-    styles: {
-        type: PropType<NotificationStyles>;
-        default: undefined;
-    };
-    components: {
-        type: PropType<ComponentsType>;
-        default: undefined;
-    };
-    stack: {
-        type: PropType<StackInput>;
-        default: undefined;
-    };
-    motion: {
-        type: PropType<NotificationListProps["motion"]>;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    onNoticeClose: {
-        type: PropType<(key: Key) => void>;
-        default: undefined;
-    };
-    onAllRemoved: {
-        type: PropType<(placement: Placement) => void>;
-        default: undefined;
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    configList: {
-        type: PropType<NotificationListConfig[]>;
-        default: () => never[];
-    };
-    prefixCls: {
-        type: StringConstructor;
-        default: string;
-    };
-    placement: {
-        type: PropType<Placement>;
-        required: true;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    classNames: {
-        type: PropType<NotificationClassNames>;
-        default: undefined;
-    };
-    styles: {
-        type: PropType<NotificationStyles>;
-        default: undefined;
-    };
-    components: {
-        type: PropType<ComponentsType>;
-        default: undefined;
-    };
-    stack: {
-        type: PropType<StackInput>;
-        default: undefined;
-    };
-    motion: {
-        type: PropType<NotificationListProps["motion"]>;
-        default: undefined;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    onNoticeClose: {
-        type: PropType<(key: Key) => void>;
-        default: undefined;
-    };
-    onAllRemoved: {
-        type: PropType<(placement: Placement) => void>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    class: string;
-    style: CSSProperties;
-    prefixCls: string;
-    classNames: NotificationClassNames;
-    styles: NotificationStyles;
-    components: ComponentsType;
-    pauseOnHover: boolean;
-    motion: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps) | undefined;
-    configList: NotificationListConfig[];
-    stack: StackInput;
-    onNoticeClose: (key: Key) => void;
-    onAllRemoved: (placement: Placement) => void;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const NotificationList: import('vue').DefineSetupFnComponent<NotificationListProps, {}, {}, NotificationListProps & {}, import('vue').PublicProps>;
 export default NotificationList;

package/dist/NotificationList/index.js

@@ -1,11 +1,12 @@
 import Notification from "../Notification.js";
-import { NotificationContext } from "../NotificationProvider.js";
+import { useNotificationContext } from "../NotificationProvider.js";
 import useListPosition from "../hooks/useListPosition/index.js";
 import useStack from "../hooks/useStack.js";
 import Content from "./Content.js";
-import { computed, createVNode, defineComponent, inject, isVNode, mergeProps, nextTick, onMounted, ref, shallowRef, toRef, watch } from "vue";
-import { classNames } from "@v-c/util";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRef, watch, watchEffect } from "vue";
+import { clsx } from "@v-c/util";
 import { getTransitionGroupProps } from "@v-c/util/dist/utils/transition";
+import { unrefElement } from "@v-c/util/dist/vueuse/unref-element";
 //#region src/NotificationList/index.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -21,29 +22,142 @@ var noticeSlotKeys = [
 	"close",
 	"progress"
 ];
-function fillClassNames(classNamesList) {
+function fillClassNames(list) {
 	return noticeSlotKeys.reduce((merged, key) => {
-		merged[key] = classNames(...classNamesList.map((cn) => cn?.[key]));
+		merged[key] = clsx(...list.map((item) => item?.[key]));
 		return merged;
 	}, {});
 }
-function fillStyles(stylesList) {
+function fillStyles(list) {
 	return noticeSlotKeys.reduce((merged, key) => {
-		merged[key] = Object.assign({}, ...stylesList.map((s) => s?.[key]));
+		merged[key] = Object.assign({}, ...list.map((item) => item?.[key]));
 		return merged;
 	}, {});
 }
-var NotificationList = /* @__PURE__ */ defineComponent({
-	name: "NotificationList",
-	inheritAttrs: false,
+function getIndex(keys, key) {
+	const strKey = String(key);
+	const index = keys.findIndex((item) => String(item.key) === strKey);
+	if (index === -1) return;
+	return keys.length - index - 1;
+}
+var NotificationList = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const ctx = useNotificationContext();
+	const configList = computed(() => props.configList ?? []);
+	const keys = computed(() => configList.value.map((config) => ({
+		...config,
+		key: String(config.key)
+	})));
+	const [stackEnabled, stackParams] = useStack(toRef(props, "stack"));
+	const listHovering = shallowRef(false);
+	const expanded = computed(() => stackEnabled.value && (listHovering.value || keys.value.length <= (stackParams.threshold?.value ?? 0)));
+	const stackPosition = computed(() => {
+		if (!stackEnabled.value || expanded.value) return;
+		return {
+			offset: stackParams.offset?.value,
+			threshold: stackParams.threshold?.value
+		};
+	});
+	const gap = ref(0);
+	const contentRef = ref(null);
+	const [position, setNodeSize] = useListPosition(keys, stackPosition, gap);
+	const hasConfigList = computed(() => !!configList.value.length);
+	watchEffect(() => {
+		if (!hasConfigList.value) return;
+		const listNode = unrefElement(contentRef.value?.nativeElement);
+		if (!listNode) return;
+		const { gap: cssGap, rowGap } = window.getComputedStyle(listNode);
+		const nextGap = Number.parseFloat(rowGap || cssGap) || 0;
+		if (gap.value !== nextGap) gap.value = nextGap;
+	}, { flush: "post" });
+	const checkAllClosed = () => {
+		if (configList.value.length === 0) props.onAllRemoved?.(props.placement);
+	};
+	const placementMotion = computed(() => {
+		if (typeof props.motion === "function") return props.placement ? props.motion(props.placement) : void 0;
+		return props.motion;
+	});
+	watch(keys, (next, prev) => {
+		if (!prev) return;
+		const nextKeySet = new Set(next.map((item) => String(item.key)));
+		prev.forEach((item) => {
+			const key = String(item.key);
+			if (!nextKeySet.has(key)) setNodeSize(key, null);
+		});
+	});
+	return () => {
+		let _slot;
+		const { prefixCls = "vc-notification", pauseOnHover, classNames: ncs, styles: nss, components, placement, className, style, onNoticeClose } = props;
+		const listPrefixCls = `${prefixCls}-list`;
+		const positionResult = position.value;
+		let motionGroupProps = {};
+		if (placementMotion.value) motionGroupProps = getTransitionGroupProps(placementMotion.value.name, placementMotion.value);
+		const renderItems = () => keys.value.map((config) => {
+			const { key, placement: _itemPlacement, classNames: configClassNames, styles: configStyles, className: configClassName, style: configStyle, onClose: configOnClose, ...notificationConfig } = config;
+			const strKey = String(key);
+			const notificationIndex = getIndex(keys.value, key);
+			const stackInThreshold = stackEnabled.value && notificationIndex !== void 0 && notificationIndex < (stackParams.threshold?.value ?? 0);
+			return createVNode(Notification, mergeProps({ "key": strKey }, notificationConfig, {
+				"ref": (el) => {
+					setNodeSize(strKey, unrefElement(el?.nativeElement) ?? null);
+				},
+				"prefixCls": prefixCls,
+				"class": clsx(ctx.value?.classNames?.notice, configClassName),
+				"style": configStyle,
+				"classNames": fillClassNames([ncs, configClassNames]),
+				"styles": fillStyles([nss, configStyles]),
+				"components": {
+					...components,
+					...config.components
+				},
+				"hovering": stackEnabled.value && listHovering.value,
+				"pauseOnHover": config.pauseOnHover ?? pauseOnHover,
+				"offset": positionResult.notificationPosition.get(strKey),
+				"notificationIndex": notificationIndex,
+				"stackInThreshold": stackInThreshold,
+				"onClose": () => {
+					configOnClose?.();
+					onNoticeClose?.(key);
+				}
+			}), null);
+		});
+		return createVNode("div", {
+			"class": clsx(prefixCls, listPrefixCls, `${prefixCls}-${placement}`, ctx.value?.classNames?.list, className, ncs?.list, attrs.class, {
+				[`${prefixCls}-stack`]: stackEnabled.value,
+				[`${prefixCls}-stack-expanded`]: expanded.value,
+				[`${listPrefixCls}-hovered`]: listHovering.value
+			}),
+			"onMouseenter": () => {
+				listHovering.value = true;
+			},
+			"onMouseleave": () => {
+				listHovering.value = false;
+			},
+			"style": {
+				...nss?.list,
+				...style,
+				...attrs.style ?? {}
+			}
+		}, [createVNode(Content, {
+			"ref": contentRef,
+			"listPrefixCls": listPrefixCls,
+			"height": positionResult.totalHeight,
+			"topNoticeHeight": positionResult.topNoticeHeight,
+			"topNoticeWidth": positionResult.topNoticeWidth,
+			"className": ncs?.listContent,
+			"style": nss?.listContent
+		}, { default: () => [createVNode(TransitionGroup, mergeProps({ "appear": true }, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderItems()) ? _slot : { default: () => [_slot] })] })]);
+	};
+}, {
 	props: {
 		configList: {
 			type: Array,
-			default: () => []
+			required: false,
+			default: void 0
 		},
 		prefixCls: {
 			type: String,
-			default: "vc-notification"
+			required: false,
+			default: void 0
 		},
 		placement: {
 			type: String,
@@ -51,154 +165,57 @@ var NotificationList = /* @__PURE__ */ defineComponent({
 		},
 		pauseOnHover: {
 			type: Boolean,
+			required: false,
 			default: void 0
 		},
 		classNames: {
 			type: Object,
+			required: false,
 			default: void 0
 		},
 		styles: {
 			type: Object,
+			required: false,
 			default: void 0
 		},
 		components: {
 			type: Object,
+			required: false,
 			default: void 0
 		},
 		stack: {
 			type: [Boolean, Object],
+			required: false,
 			default: void 0
 		},
 		motion: {
 			type: [Object, Function],
+			required: false,
 			default: void 0
 		},
-		class: {
+		className: {
 			type: String,
+			required: false,
 			default: void 0
 		},
 		style: {
 			type: Object,
+			required: false,
 			default: void 0
 		},
 		onNoticeClose: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
 		onAllRemoved: {
 			type: Function,
+			required: false,
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
-		const ctx = inject(NotificationContext, ref({}));
-		const keys = computed(() => props.configList.map((config) => ({
-			config,
-			key: String(config.key)
-		})));
-		const placementMotion = computed(() => {
-			if (typeof props.motion === "function") return props.motion(props.placement);
-			return props.motion;
-		});
-		const motionGroupProps = computed(() => {
-			const motionVal = placementMotion.value;
-			if (!motionVal) return {};
-			if (motionVal.name) return getTransitionGroupProps(motionVal.name, motionVal);
-			return { ...motionVal };
-		});
-		const [stackEnabled, stackParams] = useStack(toRef(props, "stack"));
-		const listHovering = shallowRef(false);
-		const expanded = computed(() => stackEnabled.value && (listHovering.value || keys.value.length <= stackParams.value.threshold));
-		const stackPosition = computed(() => {
-			if (!stackEnabled.value || expanded.value) return;
-			return {
-				offset: stackParams.value.offset,
-				threshold: stackParams.value.threshold
-			};
-		});
-		const gap = shallowRef(0);
-		const contentRef = shallowRef(null);
-		const [notificationPosition, setNodeSize, totalHeight, topNoticeHeight, topNoticeWidth] = useListPosition(computed(() => props.configList), stackPosition, gap);
-		const hasConfigList = computed(() => keys.value.length > 0);
-		function syncGap() {
-			const node = contentRef.value?.nativeElement;
-			if (!node) return;
-			const { gap: cssGap, rowGap } = window.getComputedStyle(node);
-			const next = Number.parseFloat(rowGap || cssGap) || 0;
-			if (next !== gap.value) gap.value = next;
-		}
-		onMounted(syncGap);
-		watch(hasConfigList, () => {
-			nextTick(syncGap);
-		});
-		function checkAllClosed() {
-			if (!props.placement) return;
-			if (keys.value.length === 0) props.onAllRemoved?.(props.placement);
-		}
-		return () => {
-			let _slot;
-			const { prefixCls = "vc-notification", placement, classNames: classNames$1, styles, components, pauseOnHover, class: className, style, onNoticeClose } = props;
-			const listPrefixCls = `${prefixCls}-list`;
-			const ctxClassNames = ctx.value?.classNames;
-			const renderItems = () => keys.value.map(({ config }) => {
-				const { key, placement: itemPlacement, onClose: configOnClose, ...notificationConfig } = config;
-				const strKey = String(key);
-				const dataIndex = keys.value.findIndex((item) => item.key === strKey);
-				const notificationIndex = dataIndex === -1 ? void 0 : keys.value.length - dataIndex - 1;
-				const stackInThreshold = stackEnabled.value && notificationIndex !== void 0 && notificationIndex < stackParams.value.threshold;
-				return createVNode(Notification, mergeProps(notificationConfig, {
-					"key": strKey,
-					"ref": (el) => {
-						setNodeSize(strKey, el?.nativeElement ?? null);
-					},
-					"prefixCls": prefixCls,
-					"class": classNames(ctxClassNames?.notice, config.class),
-					"classNames": fillClassNames([classNames$1, config.classNames]),
-					"styles": fillStyles([styles, config.styles]),
-					"components": {
-						...components,
-						...config.components
-					},
-					"hovering": stackEnabled.value && listHovering.value,
-					"pauseOnHover": config.pauseOnHover ?? pauseOnHover,
-					"offset": notificationPosition.value.get(strKey),
-					"notificationIndex": notificationIndex,
-					"stackInThreshold": !!stackInThreshold,
-					"onClose": () => {
-						configOnClose?.();
-						onNoticeClose?.(key);
-					}
-				}), null);
-			});
-			return createVNode("div", {
-				"class": classNames(prefixCls, listPrefixCls, `${prefixCls}-${placement}`, ctxClassNames?.list, className, attrs.class, classNames$1?.list, {
-					[`${prefixCls}-stack`]: stackEnabled.value,
-					[`${prefixCls}-stack-expanded`]: expanded.value,
-					[`${listPrefixCls}-hovered`]: listHovering.value
-				}),
-				"onMouseenter": () => {
-					listHovering.value = true;
-				},
-				"onMouseleave": () => {
-					listHovering.value = false;
-				},
-				"style": {
-					...styles?.list,
-					...style
-				}
-			}, [createVNode(Content, {
-				"ref": contentRef,
-				"listPrefixCls": listPrefixCls,
-				"height": totalHeight.value,
-				"topNoticeHeight": topNoticeHeight.value,
-				"topNoticeWidth": topNoticeWidth.value,
-				"class": classNames$1?.listContent,
-				"style": styles?.listContent,
-				"motionProps": motionGroupProps.value,
-				"onAfterLeave": checkAllClosed
-			}, _isSlot(_slot = renderItems()) ? _slot : { default: () => [_slot] })]);
-		};
-	}
+	name: "NotificationList",
+	inheritAttrs: false
 });
 //#endregion
 export { NotificationList as default };