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

package/dist/Notification.d.ts

@@ -0,0 +1,286 @@
+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 {
+    wrapper?: string;
+    root?: string;
+    icon?: string;
+    section?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+    close?: string;
+    progress?: string;
+}
+export interface NotificationStyles {
+    wrapper?: CSSProperties;
+    root?: CSSProperties;
+    icon?: CSSProperties;
+    section?: CSSProperties;
+    title?: CSSProperties;
+    description?: CSSProperties;
+    actions?: CSSProperties;
+    close?: CSSProperties;
+    progress?: CSSProperties;
+}
+export interface ComponentsType {
+    progress?: Component<NotificationProgressProps>;
+}
+export interface NotificationProps {
+    prefixCls: string;
+    class?: string;
+    style?: CSSProperties;
+    classNames?: NotificationClassNames;
+    styles?: NotificationStyles;
+    components?: ComponentsType;
+    title?: VueNode;
+    description?: VueNode;
+    icon?: VueNode;
+    actions?: VueNode;
+    role?: string;
+    closable?: ClosableType;
+    offset?: number;
+    notificationIndex?: number;
+    stackInThreshold?: boolean;
+    props?: 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;
+    /** @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>;
+export default Notification;

package/dist/Notification.js

@@ -0,0 +1,237 @@
+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";
+//#region src/Notification.tsx
+var Notification = /* @__PURE__ */ defineComponent({
+	name: "Notification",
+	inheritAttrs: false,
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		class: {
+			type: String,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			default: void 0
+		},
+		title: {
+			type: null,
+			default: void 0
+		},
+		description: {
+			type: null,
+			default: void 0
+		},
+		icon: {
+			type: null,
+			default: void 0
+		},
+		actions: {
+			type: null,
+			default: void 0
+		},
+		role: {
+			type: String,
+			default: void 0
+		},
+		closable: {
+			type: [
+				Boolean,
+				Object,
+				null
+			],
+			default: void 0
+		},
+		offset: {
+			type: Number,
+			default: void 0
+		},
+		notificationIndex: {
+			type: Number,
+			default: void 0
+		},
+		stackInThreshold: {
+			type: Boolean,
+			default: false
+		},
+		props: {
+			type: Object,
+			default: void 0
+		},
+		duration: {
+			type: [Number, Boolean],
+			default: 4.5
+		},
+		showProgress: {
+			type: Boolean,
+			default: false
+		},
+		times: {
+			type: Number,
+			default: void 0
+		},
+		hovering: {
+			type: Boolean,
+			default: false
+		},
+		pauseOnHover: {
+			type: Boolean,
+			default: true
+		},
+		onClick: {
+			type: Function,
+			default: void 0
+		},
+		onMouseEnter: {
+			type: Function,
+			default: void 0
+		},
+		onMouseLeave: {
+			type: Function,
+			default: void 0
+		},
+		onClose: {
+			type: Function,
+			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)
+			]);
+		};
+	}
+});
+//#endregion
+export { Notification as default };

package/dist/NotificationList/Content.d.ts

@@ -0,0 +1,88 @@
+import { CSSProperties, PropType, TransitionGroupProps } from 'vue';
+export interface ContentProps {
+    listPrefixCls: string;
+    height: number;
+    topNoticeHeight?: number;
+    topNoticeWidth?: number;
+    class?: 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>;
+export default Content;

package/dist/NotificationList/Content.js

@@ -0,0 +1,74 @@
+import { TransitionGroup, defineComponent, h, shallowRef } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/NotificationList/Content.tsx
+var Content = /* @__PURE__ */ defineComponent({
+	name: "NotificationListContent",
+	inheritAttrs: false,
+	props: {
+		listPrefixCls: {
+			type: String,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		topNoticeHeight: {
+			type: Number,
+			default: 0
+		},
+		topNoticeWidth: {
+			type: Number,
+			default: 0
+		},
+		class: {
+			type: String,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		motionProps: {
+			type: Object,
+			default: void 0
+		},
+		onAfterLeave: {
+			type: Function,
+			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?.());
+		};
+	}
+});
+//#endregion
+export { Content as default };