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

package/dist/NotificationList/index.d.ts

@@ -0,0 +1,156 @@
+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;
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type { StackConfig, StackInput } from '../hooks/useStack';
+export type { ComponentsType } from '../Notification';
+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?: StackInput;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    class?: 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>;
+export default NotificationList;

package/dist/NotificationList/index.js

@@ -0,0 +1,204 @@
+import Notification from "../Notification.js";
+import { NotificationContext } 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 { getTransitionGroupProps } from "@v-c/util/dist/utils/transition";
+//#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(classNamesList) {
+	return noticeSlotKeys.reduce((merged, key) => {
+		merged[key] = classNames(...classNamesList.map((cn) => cn?.[key]));
+		return merged;
+	}, {});
+}
+function fillStyles(stylesList) {
+	return noticeSlotKeys.reduce((merged, key) => {
+		merged[key] = Object.assign({}, ...stylesList.map((s) => s?.[key]));
+		return merged;
+	}, {});
+}
+var NotificationList = /* @__PURE__ */ defineComponent({
+	name: "NotificationList",
+	inheritAttrs: false,
+	props: {
+		configList: {
+			type: Array,
+			default: () => []
+		},
+		prefixCls: {
+			type: String,
+			default: "vc-notification"
+		},
+		placement: {
+			type: String,
+			required: true
+		},
+		pauseOnHover: {
+			type: Boolean,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			default: void 0
+		},
+		stack: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		motion: {
+			type: [Object, Function],
+			default: void 0
+		},
+		class: {
+			type: String,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			default: void 0
+		},
+		onNoticeClose: {
+			type: Function,
+			default: void 0
+		},
+		onAllRemoved: {
+			type: Function,
+			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] })]);
+		};
+	}
+});
+//#endregion
+export { NotificationList as default };

package/dist/NotificationProvider.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref } from 'vue';
+import { InjectionKey, PropType, Ref } from 'vue';
 export interface NotificationContextProps {
     classNames?: {
         notice?: string;
@@ -8,3 +8,22 @@ export interface NotificationContextProps {
 export declare const NotificationContext: InjectionKey<Ref<NotificationContextProps>>;
 export declare function useNotificationProvider(props: Ref<NotificationContextProps>): Ref<NotificationContextProps, NotificationContextProps>;
 export declare function useNotificationContext(): Ref<{}, {}>;
+declare const NotificationProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    classNames: {
+        type: PropType<NotificationContextProps["classNames"]>;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    classNames: {
+        type: PropType<NotificationContextProps["classNames"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    classNames: {
+        notice?: string;
+        list?: string;
+    } | undefined;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default NotificationProvider;

package/dist/NotificationProvider.js

@@ -1,5 +1,6 @@
-import { inject, provide, ref } from "vue";
-const NotificationContext = Symbol("NotificationContext");
+import { computed, defineComponent, inject, provide, ref } from "vue";
+//#region src/NotificationProvider.tsx
+var NotificationContext = Symbol("NotificationContext");
 function useNotificationProvider(props) {
 	provide(NotificationContext, props);
 	return props;
@@ -7,4 +8,16 @@ function useNotificationProvider(props) {
 function useNotificationContext() {
 	return inject(NotificationContext, ref({}));
 }
-export { NotificationContext, useNotificationContext, useNotificationProvider };
+var NotificationProvider = /* @__PURE__ */ defineComponent({
+	name: "NotificationProvider",
+	props: { classNames: {
+		type: Object,
+		default: void 0
+	} },
+	setup(props, { slots }) {
+		provide(NotificationContext, computed(() => ({ classNames: props.classNames })));
+		return () => slots.default?.();
+	}
+});
+//#endregion
+export { NotificationContext, NotificationProvider as default, useNotificationContext, useNotificationProvider };

package/dist/Notifications.d.ts

@@ -1,24 +1,152 @@
 import { VueNode } from '@v-c/util/dist/type';
-import { CSSProperties, TransitionGroupProps } from 'vue';
-import { Key, OpenConfig, Placement, StackConfig } from './interface.ts';
+import { CSSProperties, PropType, TransitionGroupProps } from 'vue';
+import { ComponentsType, NotificationClassNames, NotificationListConfig, NotificationStyles, Placement, StackInput } from './NotificationList';
+type Key = string | number | symbol;
 export interface NotificationsProps {
     prefixCls?: string;
-    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
-    container?: HTMLElement | ShadowRoot;
-    maxCount?: number;
+    classNames?: NotificationClassNames;
+    styles?: NotificationStyles;
+    components?: ComponentsType;
     className?: (placement: Placement) => string;
     style?: (placement: Placement) => CSSProperties;
+    container?: HTMLElement | ShadowRoot;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    maxCount?: number;
+    pauseOnHover?: boolean;
+    stack?: StackInput;
     onAllRemoved?: VoidFunction;
-    stack?: StackConfig;
     renderNotifications?: (node: VueNode, info: {
         prefixCls: string;
         key: Key;
     }) => VueNode;
 }
 export interface NotificationsRef {
-    open: (config: OpenConfig) => void;
+    open: (config: NotificationListConfig) => void;
     close: (key: Key) => void;
     destroy: () => void;
 }
-declare const Notifications: import('vue').DefineSetupFnComponent<NotificationsProps, {}, {}, NotificationsProps & {}, import('vue').PublicProps>;
+declare const Notifications: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    classNames: {
+        type: PropType<NotificationClassNames>;
+        default: undefined;
+    };
+    styles: {
+        type: PropType<NotificationStyles>;
+        default: undefined;
+    };
+    components: {
+        type: PropType<ComponentsType>;
+        default: undefined;
+    };
+    className: {
+        type: PropType<(p: Placement) => string>;
+        default: undefined;
+    };
+    style: {
+        type: PropType<(p: Placement) => CSSProperties>;
+        default: undefined;
+    };
+    container: {
+        type: PropType<HTMLElement | ShadowRoot>;
+        default: undefined;
+    };
+    motion: {
+        type: PropType<NotificationsProps["motion"]>;
+        default: undefined;
+    };
+    maxCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    stack: {
+        type: PropType<StackInput>;
+        default: undefined;
+    };
+    onAllRemoved: {
+        type: PropType<VoidFunction>;
+        default: undefined;
+    };
+    renderNotifications: {
+        type: PropType<NotificationsProps["renderNotifications"]>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    classNames: {
+        type: PropType<NotificationClassNames>;
+        default: undefined;
+    };
+    styles: {
+        type: PropType<NotificationStyles>;
+        default: undefined;
+    };
+    components: {
+        type: PropType<ComponentsType>;
+        default: undefined;
+    };
+    className: {
+        type: PropType<(p: Placement) => string>;
+        default: undefined;
+    };
+    style: {
+        type: PropType<(p: Placement) => CSSProperties>;
+        default: undefined;
+    };
+    container: {
+        type: PropType<HTMLElement | ShadowRoot>;
+        default: undefined;
+    };
+    motion: {
+        type: PropType<NotificationsProps["motion"]>;
+        default: undefined;
+    };
+    maxCount: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    pauseOnHover: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    stack: {
+        type: PropType<StackInput>;
+        default: undefined;
+    };
+    onAllRemoved: {
+        type: PropType<VoidFunction>;
+        default: undefined;
+    };
+    renderNotifications: {
+        type: PropType<NotificationsProps["renderNotifications"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    style: (p: Placement) => CSSProperties;
+    prefixCls: string;
+    classNames: NotificationClassNames;
+    styles: NotificationStyles;
+    components: ComponentsType;
+    pauseOnHover: boolean;
+    container: HTMLElement | ShadowRoot;
+    motion: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps) | undefined;
+    stack: StackInput;
+    onAllRemoved: VoidFunction;
+    renderNotifications: ((node: VueNode, info: {
+        prefixCls: string;
+        key: Key;
+    }) => VueNode) | undefined;
+    className: (p: Placement) => string;
+    maxCount: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default Notifications;