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

package/dist/Notification.d.ts

@@ -0,0 +1,59 @@
+import { Component, CSSProperties, HTMLAttributes } from 'vue';
+import { VueNode } from '@v-c/util/dist/type';
+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;
+    className?: 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?: HTMLAttributes & Record<string, any>;
+    duration?: number | false | null;
+    showProgress?: boolean;
+    times?: number;
+    hovering?: boolean;
+    pauseOnHover?: boolean;
+    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').DefineSetupFnComponent<NotificationProps, {}, {}, NotificationProps & {}, import('vue').PublicProps>;
+export default Notification;

package/dist/Notification.js

@@ -0,0 +1,301 @@
+import useClosable from "./hooks/useClosable.js";
+import useNoticeTimer from "./hooks/useNoticeTimer.js";
+import Progress from "./Progress.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+//#region src/Notification.tsx
+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
+		},
+		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: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		actions: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		role: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		closable: {
+			type: [
+				Boolean,
+				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,
+			required: false,
+			default: void 0
+		},
+		props: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		duration: {
+			type: [
+				Number,
+				Boolean,
+				null
+			],
+			required: false,
+			default: void 0
+		},
+		showProgress: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		times: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		hovering: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pauseOnHover: {
+			type: Boolean,
+			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
+		}
+	},
+	name: "Notification",
+	inheritAttrs: false
+});
+//#endregion
+export { Notification as default };

package/dist/NotificationList/Content.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'vue';
+export interface ContentProps {
+    listPrefixCls: string;
+    height: number;
+    topNoticeHeight?: number;
+    topNoticeWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Content: import('vue').DefineSetupFnComponent<ContentProps, {}, {}, ContentProps & {}, import('vue').PublicProps>;
+export default Content;

package/dist/NotificationList/Content.js

@@ -0,0 +1,60 @@
+import { createVNode, defineComponent, ref } from "vue";
+import { clsx } from "@v-c/util";
+//#region src/NotificationList/Content.tsx
+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,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		topNoticeHeight: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		topNoticeWidth: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "NotificationListContent",
+	inheritAttrs: false
+});
+//#endregion
+export { Content as default };

package/dist/NotificationList/index.d.ts

@@ -0,0 +1,35 @@
+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 };
+export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
+    key: Key;
+    placement?: Placement;
+    times?: number;
+}
+export interface NotificationClassNames extends NoticeClassNames {
+    list?: string;
+    listContent?: string;
+}
+export interface NotificationStyles extends NoticeStyles {
+    list?: CSSProperties;
+    listContent?: CSSProperties;
+}
+export interface NotificationListProps {
+    configList?: NotificationListConfig[];
+    prefixCls?: string;
+    placement: Placement;
+    pauseOnHover?: boolean;
+    classNames?: NotificationClassNames;
+    styles?: NotificationStyles;
+    components?: ComponentsType;
+    stack?: StackConfig;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    className?: string;
+    style?: CSSProperties;
+    onNoticeClose?: (key: Key) => void;
+    onAllRemoved?: (placement: Placement) => void;
+}
+declare const NotificationList: import('vue').DefineSetupFnComponent<NotificationListProps, {}, {}, NotificationListProps & {}, import('vue').PublicProps>;
+export default NotificationList;

package/dist/NotificationList/index.js

@@ -0,0 +1,224 @@
+import Notification from "../Notification.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 { 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);
+}
+var noticeSlotKeys = [
+	"wrapper",
+	"root",
+	"icon",
+	"section",
+	"title",
+	"description",
+	"actions",
+	"close",
+	"progress"
+];
+function fillClassNames(list) {
+	return noticeSlotKeys.reduce((merged, key) => {
+		merged[key] = clsx(...list.map((item) => item?.[key]));
+		return merged;
+	}, {});
+}
+function fillStyles(list) {
+	return noticeSlotKeys.reduce((merged, key) => {
+		merged[key] = Object.assign({}, ...list.map((item) => item?.[key]));
+		return merged;
+	}, {});
+}
+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, ...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": () => {
+					config.onClose?.();
+					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({
+			"tag": false,
+			"appear": true
+		}, motionGroupProps, { "onAfterLeave": checkAllClosed }), _isSlot(_slot = renderItems()) ? _slot : { default: () => [_slot] })] })]);
+	};
+}, {
+	props: {
+		configList: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placement: {
+			type: String,
+			required: true
+		},
+		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
+		},
+		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
+		}
+	},
+	name: "NotificationList",
+	inheritAttrs: false
+});
+//#endregion
+export { NotificationList as default };

package/dist/NotificationProvider.js

@@ -1,5 +1,6 @@
 import { inject, provide, ref } from "vue";
-const NotificationContext = Symbol("NotificationContext");
+//#region src/NotificationProvider.tsx
+var NotificationContext = Symbol("NotificationContext");
 function useNotificationProvider(props) {
 	provide(NotificationContext, props);
 	return props;
@@ -7,4 +8,5 @@ function useNotificationProvider(props) {
 function useNotificationContext() {
 	return inject(NotificationContext, ref({}));
 }
+//#endregion
 export { NotificationContext, useNotificationContext, useNotificationProvider };