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

package/dist/Notification.d.ts

@@ -1,5 +1,5 @@
+import { Component, CSSProperties, HTMLAttributes } from 'vue';
 import { VueNode } from '@v-c/util/dist/type';
-import { Component, CSSProperties, PropType } from 'vue';
 import { ClosableType } from './hooks/useClosable';
 import { NotificationProgressProps } from './Progress';
 export interface NotificationClassNames {
@@ -29,7 +29,7 @@ export interface ComponentsType {
 }
 export interface NotificationProps {
     prefixCls: string;
-    class?: string;
+    className?: string;
     style?: CSSProperties;
     classNames?: NotificationClassNames;
     styles?: NotificationStyles;
@@ -43,244 +43,17 @@ export interface NotificationProps {
     offset?: number;
     notificationIndex?: number;
     stackInThreshold?: boolean;
-    props?: Record<string, any>;
+    props?: HTMLAttributes & Record<string, any>;
     duration?: number | false | null;
     showProgress?: boolean;
     times?: number;
     hovering?: boolean;
     pauseOnHover?: boolean;
-    onClick?: (event: MouseEvent) => void;
-    onMouseEnter?: (event: MouseEvent) => void;
-    onMouseLeave?: (event: MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
     /** @deprecated Please use `closable.onClose` instead. */
     onClose?: () => void;
 }
-declare const Notification: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    prefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    classNames: {
-        type: PropType<NotificationClassNames>;
-        default: undefined;
-    };
-    styles: {
-        type: PropType<NotificationStyles>;
-        default: undefined;
-    };
-    components: {
-        type: PropType<ComponentsType>;
-        default: undefined;
-    };
-    title: {
-        type: any;
-        default: undefined;
-    };
-    description: {
-        type: any;
-        default: undefined;
-    };
-    icon: {
-        type: any;
-        default: undefined;
-    };
-    actions: {
-        type: any;
-        default: undefined;
-    };
-    role: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    closable: {
-        type: PropType<ClosableType>;
-        default: undefined;
-    };
-    offset: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    notificationIndex: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    stackInThreshold: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    props: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    duration: {
-        type: PropType<number | false | null>;
-        default: number;
-    };
-    showProgress: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    times: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    hovering: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onMouseEnter: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onMouseLeave: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    prefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    class: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    style: {
-        type: PropType<CSSProperties>;
-        default: undefined;
-    };
-    classNames: {
-        type: PropType<NotificationClassNames>;
-        default: undefined;
-    };
-    styles: {
-        type: PropType<NotificationStyles>;
-        default: undefined;
-    };
-    components: {
-        type: PropType<ComponentsType>;
-        default: undefined;
-    };
-    title: {
-        type: any;
-        default: undefined;
-    };
-    description: {
-        type: any;
-        default: undefined;
-    };
-    icon: {
-        type: any;
-        default: undefined;
-    };
-    actions: {
-        type: any;
-        default: undefined;
-    };
-    role: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    closable: {
-        type: PropType<ClosableType>;
-        default: undefined;
-    };
-    offset: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    notificationIndex: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    stackInThreshold: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    props: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    duration: {
-        type: PropType<number | false | null>;
-        default: number;
-    };
-    showProgress: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    times: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    hovering: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onClick: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onMouseEnter: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onMouseLeave: {
-        type: PropType<(event: MouseEvent) => void>;
-        default: undefined;
-    };
-    onClose: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    onClose: () => void;
-    class: string;
-    style: CSSProperties;
-    title: any;
-    onClick: (event: MouseEvent) => void;
-    props: Record<string, any>;
-    classNames: NotificationClassNames;
-    styles: NotificationStyles;
-    components: ComponentsType;
-    description: any;
-    icon: any;
-    actions: any;
-    role: string;
-    closable: ClosableType;
-    offset: number;
-    notificationIndex: number;
-    stackInThreshold: boolean;
-    duration: number | false | null;
-    showProgress: boolean;
-    times: number;
-    hovering: boolean;
-    pauseOnHover: boolean;
-    onMouseEnter: (event: MouseEvent) => void;
-    onMouseLeave: (event: MouseEvent) => void;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const Notification: import('vue').DefineSetupFnComponent<NotificationProps, {}, {}, NotificationProps & {}, import('vue').PublicProps>;
 export default Notification;

package/dist/Notification.js

@@ -1,55 +1,218 @@
 import useClosable from "./hooks/useClosable.js";
 import useNoticeTimer from "./hooks/useNoticeTimer.js";
 import Progress from "./Progress.js";
-import { computed, createVNode, defineComponent, mergeProps, shallowRef, toRef, watch } from "vue";
-import { classNames } from "@v-c/util";
+import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
 //#region src/Notification.tsx
-var Notification = /* @__PURE__ */ defineComponent({
-	name: "Notification",
-	inheritAttrs: false,
+var Notification = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const nodeRef = ref(null);
+	const percent = shallowRef(0);
+	const hovering = shallowRef(false);
+	expose({ nativeElement: nodeRef });
+	const [mergedClosable, closableConfig, closeBtnAriaProps] = useClosable(computed(() => props.closable));
+	const onInternalClose = () => {
+		closableConfig.value.onClose?.();
+		props.onClose?.();
+	};
+	const [onResume, onPause] = useNoticeTimer(computed(() => {
+		if (props.duration === void 0) return 4.5;
+		return props.duration;
+	}), onInternalClose, (next) => {
+		percent.value = next;
+	});
+	watch([
+		() => props.hovering,
+		hovering,
+		() => props.pauseOnHover
+	], () => {
+		if (!(props.pauseOnHover ?? true)) return;
+		if (props.hovering) onPause();
+		else if (!hovering.value) onResume();
+	}, { immediate: true });
+	const offsetRef = shallowRef(props.offset);
+	const indexRef = shallowRef(props.notificationIndex);
+	watch(() => props.offset, (next) => {
+		if (next !== void 0) offsetRef.value = next;
+	});
+	watch(() => props.notificationIndex, (next) => {
+		if (next !== void 0) indexRef.value = next;
+	});
+	const onInternalMouseEnter = (e) => {
+		hovering.value = true;
+		if (props.pauseOnHover ?? true) onPause();
+		props.onMouseEnter?.(e);
+		props.props?.onMouseenter?.(e);
+	};
+	const onInternalMouseLeave = (e) => {
+		hovering.value = false;
+		if ((props.pauseOnHover ?? true) && !props.hovering) onResume();
+		props.onMouseLeave?.(e);
+		props.props?.onMouseleave?.(e);
+	};
+	const onInternalCloseClick = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onInternalClose();
+	};
+	return () => {
+		const { prefixCls, className, style, classNames: ncs, styles: nss, components, title, description, icon, actions, role, stackInThreshold, props: rootProps, showProgress, duration } = props;
+		const noticePrefixCls = `${prefixCls}-notice`;
+		const titleNode = title !== void 0 && title !== null ? createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-title`, ncs?.title),
+			"style": nss?.title
+		}, [title]) : null;
+		const descNode = description !== void 0 && description !== null ? createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-description`, ncs?.description),
+			"style": nss?.description
+		}, [description]) : null;
+		const hasTitle = titleNode !== null;
+		const hasDescription = descNode !== null;
+		let contentNode = null;
+		if (hasTitle && hasDescription) contentNode = createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-section`, ncs?.section),
+			"style": nss?.section
+		}, [titleNode, descNode]);
+		else contentNode = titleNode || descNode;
+		if (icon !== void 0 && icon !== null) contentNode = createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-wrapper`, ncs?.wrapper),
+			"style": nss?.wrapper
+		}, [createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-icon`, ncs?.icon),
+			"style": nss?.icon
+		}, [icon]), contentNode]);
+		const actionsNode = actions ? createVNode("div", {
+			"class": clsx(`${noticePrefixCls}-actions`, ncs?.actions),
+			"style": nss?.actions
+		}, [actions]) : null;
+		const mergedOffset = props.offset ?? offsetRef.value;
+		const mergedIndex = props.notificationIndex ?? indexRef.value ?? 0;
+		const validPercent = 100 - Math.min(Math.max(percent.value * 100, 0), 100);
+		const ProgressComponent = components?.progress || Progress;
+		const mergedStyle = {
+			"--notification-index": mergedIndex,
+			...nss?.root,
+			...style
+		};
+		if (mergedOffset !== void 0) mergedStyle["--notification-y"] = `${mergedOffset}px`;
+		const mergedRole = role ?? rootProps?.role ?? "alert";
+		return createVNode("div", mergeProps(rootProps, {
+			"ref": nodeRef,
+			"role": mergedRole,
+			"data-notification-index": mergedIndex,
+			"class": clsx(noticePrefixCls, className, attrs.class, ncs?.root, {
+				[`${noticePrefixCls}-closable`]: mergedClosable.value,
+				[`${noticePrefixCls}-stack-in-threshold`]: stackInThreshold
+			}),
+			"style": {
+				...mergedStyle,
+				...attrs.style
+			},
+			"onClick": props.onClick,
+			"onMouseenter": onInternalMouseEnter,
+			"onMouseleave": onInternalMouseLeave
+		}), [
+			contentNode,
+			actionsNode,
+			mergedClosable.value && createVNode("button", mergeProps({
+				"class": clsx(`${noticePrefixCls}-close`, ncs?.close),
+				"aria-label": "Close"
+			}, closeBtnAriaProps.value, {
+				"style": nss?.close,
+				"onClick": onInternalCloseClick
+			}), [closableConfig.value.closeIcon]),
+			showProgress && typeof duration === "number" && duration > 0 && createVNode(ProgressComponent, {
+				className: clsx(`${noticePrefixCls}-progress`, ncs?.progress),
+				percent: validPercent,
+				style: nss?.progress
+			}, null)
+		]);
+	};
+}, {
 	props: {
 		prefixCls: {
 			type: String,
 			required: true
 		},
-		class: {
+		className: {
 			type: String,
+			required: false,
 			default: void 0
 		},
 		style: {
 			type: Object,
+			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
 		},
 		title: {
-			type: null,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
 			default: void 0
 		},
 		description: {
-			type: null,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
 			default: void 0
 		},
 		icon: {
-			type: null,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
 			default: void 0
 		},
 		actions: {
-			type: null,
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
 			default: void 0
 		},
 		role: {
 			type: String,
+			required: false,
 			default: void 0
 		},
 		closable: {
@@ -58,180 +221,81 @@ var Notification = /* @__PURE__ */ defineComponent({
 				Object,
 				null
 			],
+			required: false,
 			default: void 0
 		},
 		offset: {
 			type: Number,
+			required: false,
 			default: void 0
 		},
 		notificationIndex: {
 			type: Number,
+			required: false,
 			default: void 0
 		},
 		stackInThreshold: {
 			type: Boolean,
-			default: false
+			required: false,
+			default: void 0
 		},
 		props: {
 			type: Object,
+			required: false,
 			default: void 0
 		},
 		duration: {
-			type: [Number, Boolean],
-			default: 4.5
+			type: [
+				Number,
+				Boolean,
+				null
+			],
+			required: false,
+			default: void 0
 		},
 		showProgress: {
 			type: Boolean,
-			default: false
+			required: false,
+			default: void 0
 		},
 		times: {
 			type: Number,
+			required: false,
 			default: void 0
 		},
 		hovering: {
 			type: Boolean,
-			default: false
+			required: false,
+			default: void 0
 		},
 		pauseOnHover: {
 			type: Boolean,
-			default: true
+			required: false,
+			default: void 0
 		},
 		onClick: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
 		onMouseEnter: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
 		onMouseLeave: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
 		onClose: {
 			type: Function,
+			required: false,
 			default: void 0
 		}
 	},
-	setup(props, { attrs, expose }) {
-		const noticeRef = shallowRef(null);
-		expose({ get nativeElement() {
-			return noticeRef.value;
-		} });
-		const noticePrefixCls = computed(() => `${props.prefixCls}-notice`);
-		const localHovering = shallowRef(false);
-		const percent = shallowRef(0);
-		const [mergedClosable, closableConfig, closeBtnAriaProps] = useClosable(toRef(props, "closable"));
-		const onInternalClose = () => {
-			closableConfig.value.onClose?.();
-			props.onClose?.();
-		};
-		const [onResume, onPause] = useNoticeTimer(toRef(props, "duration"), onInternalClose, (ptg) => {
-			percent.value = ptg;
-		});
-		watch([
-			() => props.pauseOnHover,
-			() => props.hovering,
-			localHovering
-		], ([pauseOnHover, forcedHovering, hovering]) => {
-			if (!pauseOnHover) return;
-			if (forcedHovering) onPause();
-			else if (!hovering) onResume();
-		}, { immediate: true });
-		function onInternalMouseEnter(event) {
-			localHovering.value = true;
-			if (props.pauseOnHover) onPause();
-			props.onMouseEnter?.(event);
-		}
-		function onInternalMouseLeave(event) {
-			localHovering.value = false;
-			if (props.pauseOnHover && !props.hovering) onResume();
-			props.onMouseLeave?.(event);
-		}
-		function onInternalCloseClick(event) {
-			event.preventDefault();
-			event.stopPropagation();
-			onInternalClose();
-		}
-		let lastOffset = props.offset;
-		let lastIndex = props.notificationIndex;
-		watch(() => props.offset, (val) => {
-			if (val !== void 0) lastOffset = val;
-		}, { immediate: true });
-		watch(() => props.notificationIndex, (val) => {
-			if (val !== void 0) lastIndex = val;
-		}, { immediate: true });
-		return () => {
-			const { title, description, icon, actions, role, showProgress, duration, classNames: classNames$1, styles, components, class: className, style, props: rootProps, onClick } = props;
-			const validPercent = 100 - Math.min(Math.max(percent.value * 100, 0), 100);
-			const ProgressComponent = components?.progress || Progress;
-			const titleNode = title !== void 0 && title !== null ? createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-title`, classNames$1?.title),
-				"style": styles?.title
-			}, [title]) : null;
-			const descNode = description !== void 0 && description !== null ? createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-description`, classNames$1?.description),
-				"style": styles?.description
-			}, [description]) : null;
-			const hasTitle = titleNode !== null;
-			const hasDescription = descNode !== null;
-			let contentNode = null;
-			if (hasTitle && hasDescription) contentNode = createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-section`, classNames$1?.section),
-				"style": styles?.section
-			}, [titleNode, descNode]);
-			else contentNode = titleNode || descNode;
-			if (icon !== void 0 && icon !== null) contentNode = createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-wrapper`, classNames$1?.wrapper),
-				"style": styles?.wrapper
-			}, [createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-icon`, classNames$1?.icon),
-				"style": styles?.icon
-			}, [icon]), contentNode]);
-			const actionsNode = actions ? createVNode("div", {
-				"class": classNames(`${noticePrefixCls.value}-actions`, classNames$1?.actions),
-				"style": styles?.actions
-			}, [actions]) : null;
-			const mergedOffset = props.offset ?? lastOffset;
-			const mergedIndex = props.notificationIndex ?? lastIndex ?? 0;
-			const mergedStyle = {
-				"--notification-index": mergedIndex,
-				...styles?.root,
-				...style
-			};
-			if (mergedOffset !== void 0) mergedStyle["--notification-y"] = `${mergedOffset}px`;
-			const mergedRole = role ?? rootProps?.role ?? "alert";
-			return createVNode("div", mergeProps(rootProps, {
-				"ref": noticeRef,
-				"role": mergedRole,
-				"data-notification-index": mergedIndex,
-				"class": classNames(noticePrefixCls.value, className, attrs.class, classNames$1?.root, {
-					[`${noticePrefixCls.value}-closable`]: mergedClosable.value,
-					[`${noticePrefixCls.value}-stack-in-threshold`]: props.stackInThreshold
-				}),
-				"style": mergedStyle,
-				"onClick": onClick,
-				"onMouseenter": onInternalMouseEnter,
-				"onMouseleave": onInternalMouseLeave
-			}), [
-				contentNode,
-				actionsNode,
-				mergedClosable.value && createVNode("button", mergeProps({
-					"type": "button",
-					"class": classNames(`${noticePrefixCls.value}-close`, classNames$1?.close),
-					"aria-label": "Close"
-				}, closeBtnAriaProps.value, {
-					"style": styles?.close,
-					"onClick": onInternalCloseClick
-				}), [closableConfig.value.closeIcon]),
-				showProgress && typeof duration === "number" && duration > 0 && createVNode(ProgressComponent, {
-					"class": classNames(`${noticePrefixCls.value}-progress`, classNames$1?.progress),
-					"percent": validPercent,
-					"style": styles?.progress
-				}, null)
-			]);
-		};
-	}
+	name: "Notification",
+	inheritAttrs: false
 });
 //#endregion
 export { Notification as default };