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

package/dist/NotificationProvider.d.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, PropType, Ref } from 'vue';
+import { InjectionKey, Ref } from 'vue';
 export interface NotificationContextProps {
     classNames?: {
         notice?: string;
@@ -8,22 +8,3 @@ 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,4 +1,4 @@
-import { computed, defineComponent, inject, provide, ref } from "vue";
+import { inject, provide, ref } from "vue";
 //#region src/NotificationProvider.tsx
 var NotificationContext = Symbol("NotificationContext");
 function useNotificationProvider(props) {
@@ -8,16 +8,5 @@ function useNotificationProvider(props) {
 function useNotificationContext() {
 	return inject(NotificationContext, ref({}));
 }
-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 };
+export { NotificationContext, useNotificationContext, useNotificationProvider };

package/dist/Notifications.d.ts

@@ -1,20 +1,21 @@
+import { CSSProperties, TransitionGroupProps } from 'vue';
 import { VueNode } from '@v-c/util/dist/type';
-import { CSSProperties, PropType, TransitionGroupProps } from 'vue';
-import { ComponentsType, NotificationClassNames, NotificationListConfig, NotificationStyles, Placement, StackInput } from './NotificationList';
-type Key = string | number | symbol;
+import { Key, NotificationListConfig, Placement, StackConfig } from './interface';
+import { ComponentsType } from './Notification';
+import { NotificationClassNames, NotificationStyles } from './NotificationList';
 export interface NotificationsProps {
     prefixCls?: string;
+    motion?: TransitionGroupProps | ((placement: Placement) => TransitionGroupProps);
+    container?: HTMLElement | ShadowRoot;
+    maxCount?: number;
+    pauseOnHover?: boolean;
     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;
@@ -25,128 +26,5 @@ export interface NotificationsRef {
     close: (key: Key) => void;
     destroy: () => void;
 }
-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>;
+declare const Notifications: import('vue').DefineSetupFnComponent<NotificationsProps, {}, {}, NotificationsProps & {}, import('vue').PublicProps>;
 export default Notifications;

package/dist/Notifications.js

@@ -1,149 +1,164 @@
 import NotificationList from "./NotificationList/index.js";
-import { Teleport, createVNode, defineComponent, isVNode, shallowRef, watch } from "vue";
+import { Teleport, createVNode, defineComponent, isVNode, mergeDefaults, shallowRef, watch } from "vue";
 //#region src/Notifications.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-var Notifications = /* @__PURE__ */ defineComponent({
-	name: "Notifications",
-	inheritAttrs: false,
-	props: {
+var defaults = { prefixCls: "vc-notification" };
+var Notifications = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const configList = shallowRef([]);
+	const onNoticeClose = (key) => {
+		const config = configList.value.find((item) => item.key === key);
+		const closable = config?.closable;
+		(closable && typeof closable === "object" ? closable : null)?.onClose?.();
+		config?.onClose?.();
+		configList.value = configList.value.filter((item) => item.key !== key);
+	};
+	expose({
+		open: (config) => {
+			const list = configList.value;
+			let clone = [...list];
+			const index = clone.findIndex((item) => item.key === config.key);
+			const innerConfig = { ...config };
+			if (index >= 0) {
+				innerConfig.times = (list[index]?.times ?? 0) + 1;
+				clone[index] = innerConfig;
+			} else {
+				innerConfig.times = 0;
+				clone.push(innerConfig);
+			}
+			const maxCount = props.maxCount ?? 0;
+			if (maxCount > 0 && clone.length > maxCount) clone = clone.slice(-maxCount);
+			configList.value = clone;
+		},
+		close: onNoticeClose,
+		destroy: () => {
+			configList.value = [];
+		}
+	});
+	const placements = shallowRef({});
+	watch(configList, () => {
+		const next = {};
+		configList.value.forEach((config) => {
+			const placement = config.placement ?? "topRight";
+			next[placement] = next[placement] || [];
+			next[placement].push(config);
+		});
+		Object.keys(placements.value).forEach((placement) => {
+			next[placement] = next[placement] || [];
+		});
+		placements.value = next;
+	});
+	const onAllNoticeRemoved = (placement) => {
+		const clone = { ...placements.value };
+		if (!(clone[placement] || []).length) delete clone[placement];
+		placements.value = clone;
+	};
+	const emptyRef = shallowRef(false);
+	watch(placements, () => {
+		if (Object.keys(placements.value).length > 0) emptyRef.value = true;
+		else if (emptyRef.value) {
+			props?.onAllRemoved?.();
+			emptyRef.value = false;
+		}
+	});
+	return () => {
+		let _slot;
+		const { container } = props;
+		const prefixCls = props.prefixCls ?? defaults.prefixCls;
+		if (!container) return null;
+		return createVNode(Teleport, { "to": container }, _isSlot(_slot = Object.keys(placements.value).map((rawPlacement) => {
+			const placement = rawPlacement;
+			const placementConfigList = placements.value[placement];
+			const list = createVNode(NotificationList, {
+				"key": placement,
+				"configList": placementConfigList,
+				"placement": placement,
+				"prefixCls": prefixCls,
+				"pauseOnHover": props.pauseOnHover,
+				"classNames": props.classNames,
+				"styles": props.styles,
+				"components": props.components,
+				"className": props.className?.(placement),
+				"style": props.style?.(placement),
+				"motion": props.motion,
+				"stack": props.stack,
+				"onAllRemoved": onAllNoticeRemoved,
+				"onNoticeClose": onNoticeClose
+			}, null);
+			return props.renderNotifications ? props.renderNotifications(list, {
+				prefixCls,
+				key: placement
+			}) : list;
+		})) ? _slot : { default: () => [_slot] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
 		prefixCls: {
 			type: String,
-			default: "vc-notification"
+			required: false,
+			default: void 0
+		},
+		motion: {
+			type: [Object, Function],
+			required: false,
+			default: void 0
+		},
+		container: {
+			required: false,
+			default: void 0
+		},
+		maxCount: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		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
 		},
 		className: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
 		style: {
 			type: Function,
+			required: false,
 			default: void 0
 		},
-		container: {
-			type: Object,
-			default: void 0
-		},
-		motion: {
-			type: [Object, Function],
-			default: void 0
-		},
-		maxCount: {
-			type: Number,
-			default: void 0
-		},
-		pauseOnHover: {
-			type: Boolean,
+		onAllRemoved: {
+			required: false,
 			default: void 0
 		},
 		stack: {
 			type: [Boolean, Object],
-			default: void 0
-		},
-		onAllRemoved: {
-			type: Function,
+			required: false,
 			default: void 0
 		},
 		renderNotifications: {
 			type: Function,
+			required: false,
 			default: void 0
 		}
-	},
-	setup(props, { expose }) {
-		const configList = shallowRef([]);
-		const placements = shallowRef({});
-		const emptyRef = shallowRef(false);
-		expose({
-			open: (config) => {
-				const list = configList.value;
-				let clone = [...list];
-				const index = clone.findIndex((item) => item.key === config.key);
-				const innerConfig = { ...config };
-				if (index >= 0) {
-					innerConfig.times = (list[index]?.times ?? 0) + 1;
-					clone[index] = innerConfig;
-				} else {
-					innerConfig.times = 0;
-					clone.push(innerConfig);
-				}
-				const maxCount = props.maxCount ?? 0;
-				if (maxCount > 0 && clone.length > maxCount) clone = clone.slice(-maxCount);
-				configList.value = clone;
-			},
-			close: (key) => {
-				configList.value = configList.value.filter((item) => item.key !== key);
-			},
-			destroy: () => {
-				configList.value = [];
-			}
-		});
-		watch(configList, () => {
-			const next = {};
-			configList.value.forEach((config) => {
-				const placement = config.placement ?? "topRight";
-				next[placement] = next[placement] || [];
-				next[placement].push(config);
-			});
-			Object.keys(placements.value).forEach((placement) => {
-				next[placement] = next[placement] || [];
-			});
-			placements.value = next;
-		}, { immediate: true });
-		function onAllNoticeRemoved(placement) {
-			const clone = { ...placements.value };
-			if (!(clone[placement] || []).length) delete clone[placement];
-			placements.value = clone;
-		}
-		watch(placements, () => {
-			if (Object.keys(placements.value).length > 0) emptyRef.value = true;
-			else if (emptyRef.value) {
-				props.onAllRemoved?.();
-				emptyRef.value = false;
-			}
-		});
-		return () => {
-			let _slot;
-			const { container, prefixCls = "vc-notification" } = props;
-			if (!container) return null;
-			const placementList = Object.keys(placements.value);
-			return createVNode(Teleport, { "to": container }, _isSlot(_slot = placementList.map((placement) => {
-				const list = createVNode(NotificationList, {
-					"key": placement,
-					"configList": placements.value[placement],
-					"placement": placement,
-					"prefixCls": prefixCls,
-					"pauseOnHover": props.pauseOnHover,
-					"classNames": props.classNames,
-					"styles": props.styles,
-					"components": props.components,
-					"class": props.className?.(placement),
-					"style": props.style?.(placement),
-					"motion": props.motion,
-					"stack": props.stack,
-					"onNoticeClose": (key) => {
-						configList.value = configList.value.filter((item) => item.key !== key);
-					},
-					"onAllRemoved": onAllNoticeRemoved
-				}, null);
-				return props.renderNotifications ? props.renderNotifications(list, {
-					prefixCls,
-					key: placement
-				}) : list;
-			})) ? _slot : { default: () => [_slot] });
-		};
-	}
+	}, defaults),
+	name: "Notifications"
 });
 //#endregion
 export { Notifications as default };

package/dist/Progress.d.ts

@@ -1,8 +1,8 @@
-import { CSSProperties, FunctionalComponent } from 'vue';
+import { CSSProperties } from 'vue';
 export interface NotificationProgressProps {
-    class?: string;
+    className?: string;
     style?: CSSProperties;
     percent: number;
 }
-declare const Progress: FunctionalComponent<NotificationProgressProps>;
+declare const Progress: import('vue').DefineSetupFnComponent<NotificationProgressProps, {}, {}, NotificationProgressProps & {}, import('vue').PublicProps>;
 export default Progress;

package/dist/Progress.js

@@ -1,18 +1,31 @@
-import { createVNode } from "vue";
+import { createVNode, defineComponent } from "vue";
 //#region src/Progress.tsx
-var Progress = (props) => {
-	return createVNode("progress", {
-		"class": props.class,
+var Progress = /* @__PURE__ */ defineComponent((props) => {
+	return () => createVNode("progress", {
+		"class": props.className,
 		"max": "100",
 		"value": props.percent,
 		"style": props.style
 	}, null);
-};
-Progress.props = [
-	"class",
-	"style",
-	"percent"
-];
-Progress.inheritAttrs = false;
+}, {
+	props: {
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		percent: {
+			type: Number,
+			required: true
+		}
+	},
+	name: "NotificationProgress",
+	inheritAttrs: false
+});
 //#endregion
 export { Progress as default };

package/dist/hooks/useClosable.d.ts

@@ -1,22 +1,17 @@
+import { AriaAttributes, ComputedRef } from 'vue';
 import { VueNode } from '@v-c/util/dist/type';
-import { ComputedRef, MaybeRef } from 'vue';
 export type ClosableConfig = {
     closeIcon?: VueNode;
     disabled?: boolean;
     onClose?: VoidFunction;
-} & Record<string, any>;
+} & AriaAttributes & Record<`data-${string}`, unknown>;
 export type ClosableType = boolean | ClosableConfig | null | undefined;
-export interface ParsedClosableConfig {
+export interface ParsedClosableConfig extends ClosableConfig {
     closeIcon: VueNode;
     disabled: boolean;
-    onClose?: VoidFunction;
-    [key: string]: any;
 }
 /**
- * Normalize the closable option into an enabled flag, parsed config, and aria props.
+ * Normalizes the closable option into a boolean flag, parsed config, and
+ * aria props for the close button. Mirrors rc-notification@2.0 useClosable.
  */
-export default function useClosable(closable: MaybeRef<ClosableType>): [
-    ComputedRef<boolean>,
-    ComputedRef<ParsedClosableConfig>,
-    ComputedRef<Record<string, any>>
-];
+export default function useClosable(closable: ComputedRef<ClosableType>): [ComputedRef<boolean>, ComputedRef<ParsedClosableConfig>, ComputedRef<Record<string, unknown>>];

package/dist/hooks/useClosable.js

@@ -1,12 +1,13 @@
-import { computed, unref } from "vue";
+import { computed } from "vue";
 import pickAttrs from "@v-c/util/dist/pickAttrs";
 //#region src/hooks/useClosable.ts
 /**
-* Normalize the closable option into an enabled flag, parsed config, and aria props.
+* Normalizes the closable option into a boolean flag, parsed config, and
+* aria props for the close button. Mirrors rc-notification@2.0 useClosable.
 */
 function useClosable(closable) {
 	const closableObj = computed(() => {
-		const value = unref(closable);
+		const value = closable.value;
 		if (value === false) return {
 			closeIcon: null,
 			disabled: true
@@ -14,7 +15,6 @@ function useClosable(closable) {
 		if (typeof value === "object" && value !== null) return value;
 		return {};
 	});
-	const enabled = computed(() => !!unref(closable));
 	const closableConfig = computed(() => {
 		const obj = closableObj.value;
 		return {
@@ -23,10 +23,11 @@ function useClosable(closable) {
 			disabled: obj.disabled ?? false
 		};
 	});
+	const closableAriaProps = computed(() => pickAttrs(closableConfig.value, true));
 	return [
-		enabled,
+		computed(() => !!closable.value),
 		closableConfig,
-		computed(() => pickAttrs(closableConfig.value, true))
+		closableAriaProps
 	];
 }
 //#endregion

package/dist/hooks/useListPosition/index.d.ts

@@ -1,17 +1,18 @@
-import { ComputedRef, MaybeRef } from 'vue';
-import { StackConfig } from '../useStack';
-type Key = string | number | symbol;
-export interface ConfigItem {
-    key: Key;
+import { ComputedRef, Ref } from 'vue';
+import { Key } from '../../interface';
+export interface ListPositionStackConfig {
+    threshold?: number;
+    offset?: number;
 }
 /**
  * Calculates each notification's position and the full list height.
+ * Mirrors rc-notification@2.0 useListPosition.
  */
-export default function useListPosition(configList: MaybeRef<readonly ConfigItem[]>, stack: MaybeRef<StackConfig | undefined>, gap?: MaybeRef<number>): [
-    ComputedRef<Map<string, number>>,
-    (key: string, node: HTMLElement | null) => void,
-    ComputedRef<number>,
-    ComputedRef<number | undefined>,
-    ComputedRef<number | undefined>
-];
-export {};
+export default function useListPosition(configList: ComputedRef<{
+    key: Key;
+}[]>, stack: ComputedRef<ListPositionStackConfig | undefined>, gap: Ref<number>): readonly [ComputedRef<{
+    notificationPosition: Map<string, number>;
+    totalHeight: number;
+    topNoticeHeight: number | undefined;
+    topNoticeWidth: number | undefined;
+}>, (key: string, node: HTMLDivElement | null) => void];