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

package/src/index.ts

@@ -1,9 +1,50 @@
-import type { NotificationAPI, NotificationConfig } from './hooks/useNotification'
 import useNotification from './hooks/useNotification'
-import Notice from './Notice'
-import { useNotificationProvider } from './NotificationProvider'
+import Notification from './Notification'
+import NotificationList from './NotificationList'
+import { useNotificationContext, useNotificationProvider } from './NotificationProvider'
+import Progress from './Progress'
+
+import type { NotificationAPI, NotificationConfig } from './hooks/useNotification'
+import type {
+  ComponentsType,
+  NotificationClassNames as NoticeClassNames,
+  NotificationProps,
+  NotificationStyles as NoticeStyles,
+} from './Notification'
+import type {
+  NotificationClassNames,
+  NotificationListProps,
+  NotificationStyles,
+  Placement,
+} from './NotificationList'
+import type { NotificationProgressProps } from './Progress'
+import type { Key, NotificationListConfig, StackConfig } from './interface'
+import type { ClosableType, ParsedClosableConfig } from './hooks/useClosable'
 
-export { Notice, useNotification, useNotificationProvider }
-export type { NotificationAPI, NotificationConfig }
+export {
+  Notification,
+  NotificationList,
+  Progress,
+  useNotification,
+  useNotificationContext,
+  useNotificationProvider,
+}
 
-export type { NoticeProps } from './Notice'
+export type {
+  ClosableType,
+  ComponentsType,
+  Key,
+  NoticeClassNames,
+  NoticeStyles,
+  NotificationAPI,
+  NotificationClassNames,
+  NotificationConfig,
+  NotificationListConfig,
+  NotificationListProps,
+  NotificationProgressProps,
+  NotificationProps,
+  NotificationStyles,
+  ParsedClosableConfig,
+  Placement,
+  StackConfig,
+}

package/src/interface.ts

@@ -1,61 +1,45 @@
-import type { VueNode } from '@v-c/util/dist/type'
-import type { CSSProperties } from 'vue'
+import type { ClosableType } from './hooks/useClosable'
+import type {
+  ComponentsType,
+  NotificationProps,
+} from './Notification'
 
 export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight'
 
-type NoticeSemanticProps = 'wrapper'
-
 export type Key = string | number
-export interface NoticeConfig {
-  content?: VueNode
-  duration?: number | false | null
-  showProgress?: boolean
-  pauseOnHover?: boolean
-  closeIcon?: VueNode
-  closable?:
-    | boolean
-    | ({ closeIcon?: VueNode, onClose?: VoidFunction } & Record<string, any>)
-  className?: string
-  style?: CSSProperties
-  classNames?: {
-    [key in NoticeSemanticProps]?: string;
-  }
-  styles?: {
-    [key in NoticeSemanticProps]?: CSSProperties;
-  }
-  /** @private Internal usage. Do not override in your code */
-  props?: Record<string, any>
-
-  onClose?: VoidFunction
-  onClick?: (event: Event) => void
-}
-
-export interface OpenConfig extends NoticeConfig {
-  key: Key
-  placement?: Placement
-  content?: VueNode
-  duration?: number | false | null
-}
-
-export type InnerOpenConfig = OpenConfig & { times?: number }
-
-export type Placements = Partial<Record<Placement, OpenConfig[]>>
 
 export type StackConfig
   = | boolean
     | {
     /**
-     * When number is greater than threshold, notifications will be stacked together.
+     * When the notice count exceeds this threshold, notices will be stacked.
      * @default 3
      */
       threshold?: number
       /**
-       * Offset when notifications are stacked together.
+       * Vertical offset applied between stacked notices.
        * @default 8
        */
       offset?: number
-      /**
-       * Spacing between each notification when expanded.
-       */
-      gap?: number
     }
+
+/**
+ * Configuration accepted by the public `api.open` call.
+ * Mirrors rc-notification@2.0 NotificationListConfig.
+ */
+export interface NotificationListConfig extends Omit<NotificationProps, 'prefixCls'> {
+  key: Key
+  placement?: Placement
+  times?: number
+}
+
+export type Placements = Partial<Record<Placement, NotificationListConfig[]>>
+
+export type InnerOpenConfig = NotificationListConfig & { times?: number }
+
+// Re-export common surfaces consumers used to import from interface.ts directly.
+export type {
+  ClosableType,
+  ComponentsType,
+  NotificationProps,
+}

package/vite.config.ts

@@ -1,12 +1,13 @@
 import type { UserConfig } from 'vite'
-import fg from 'fast-glob'
 import { defineConfig, mergeConfig } from 'vite'
-import { buildCommon } from '../../scripts/build.common'
+import { buildCommon, resolveBuildEntries } from '../../scripts/build.common'
 
-const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
+const packageRoot = new URL('.', import.meta.url)
+const entry = resolveBuildEntries(packageRoot, ['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/tests'])
 
 export default defineConfig({
   ...mergeConfig(buildCommon({
+    packageRoot,
     external: ['vue', 'classnames', /^@v-c\/util/],
   }), {
     build: {

package/dist/Notice.cjs

@@ -1,235 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
-let vue = require("vue");
-let _v_c_util = require("@v-c/util");
-let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
-_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
-let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
-_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
-var defaults = {
-	duration: 4.5,
-	pauseOnHover: true,
-	closeIcon: "x"
-};
-var Notify = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
-	const hovering = (0, vue.shallowRef)(false);
-	const percent = (0, vue.shallowRef)(0);
-	const spentTime = (0, vue.shallowRef)(0);
-	const mergedHovering = (0, vue.computed)(() => props.hovering || hovering.value);
-	const mergedDuration = (0, vue.computed)(() => {
-		if (typeof props.duration === "number") return props.duration;
-		if (props.duration === void 0) return defaults.duration;
-		return 0;
-	});
-	const mergedPauseOnHover = (0, vue.computed)(() => props.pauseOnHover === void 0 ? defaults.pauseOnHover : props.pauseOnHover);
-	const mergedShowProgress = (0, vue.computed)(() => mergedDuration.value > 0 && props.showProgress);
-	const mergedCloseIcon = (0, vue.computed)(() => props.closeIcon ?? defaults.closeIcon);
-	const onInternalClose = () => {
-		props.onNoticeClose?.(props.eventKey);
-	};
-	const onCloseKeyDown = (e) => {
-		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === _v_c_util_dist_KeyCode.default.ENTER) onInternalClose();
-	};
-	(0, vue.watch)([
-		() => props.times,
-		mergedDuration,
-		mergedHovering
-	], (_n, _, onCleanup) => {
-		const duration = mergedDuration.value;
-		const hoveringValue = mergedHovering.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		if (!hoveringValue && duration > 0) {
-			const start = Date.now() - spentTime.value;
-			const timeoutId = window.setTimeout(() => {
-				onInternalClose();
-			}, duration * 1e3 - spentTime.value);
-			onCleanup(() => {
-				if (pauseOnHover) clearTimeout(timeoutId);
-				spentTime.value = Date.now() - start;
-			});
-		}
-	}, { immediate: true });
-	(0, vue.watch)([
-		() => props.times,
-		mergedDuration,
-		spentTime,
-		mergedHovering,
-		mergedShowProgress
-	], (_n, _, onCleanup) => {
-		const hoveringValue = mergedHovering.value;
-		const showProgress = mergedShowProgress.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		const duration = mergedDuration.value;
-		const baseSpentTime = spentTime.value;
-		if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
-			const start = performance.now();
-			let animationFrame = 0;
-			const calculate = () => {
-				cancelAnimationFrame(animationFrame);
-				animationFrame = requestAnimationFrame((timestamp) => {
-					const runtime = timestamp + baseSpentTime - start;
-					const progress = Math.min(runtime / (duration * 1e3), 1);
-					percent.value = progress * 100;
-					if (progress < 1) calculate();
-				});
-			};
-			calculate();
-			onCleanup(() => {
-				if (pauseOnHover) cancelAnimationFrame(animationFrame);
-			});
-		}
-	}, { immediate: true });
-	return () => {
-		const { closable, prefixCls, props: divProps, onClick, content, className, style } = props;
-		const closableConfig = typeof closable === "object" && closable !== null ? closable : closable ? { closeIcon: mergedCloseIcon.value } : {};
-		const ariaProps = (0, _v_c_util_dist_pickAttrs.default)(closableConfig, true);
-		const validPercent = 100 - (percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value);
-		const noticePrefixCls = `${prefixCls}-notice`;
-		const mergedStyle = {
-			...typeof divProps?.style === "object" && divProps?.style ? divProps.style : {},
-			...typeof attrs.style === "object" && attrs.style ? attrs.style : {},
-			...typeof style === "object" && style ? style : {}
-		};
-		return (0, vue.createVNode)("div", (0, vue.mergeProps)(divProps, {
-			"class": (0, _v_c_util.classNames)(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
-			"style": mergedStyle,
-			"onMouseenter": (e) => {
-				hovering.value = true;
-				divProps?.onMouseEnter?.(e);
-			},
-			"onMouseleave": (e) => {
-				hovering.value = false;
-				divProps?.onMouseLeave?.(e);
-			},
-			"onClick": onClick
-		}), [
-			(0, vue.createVNode)("div", { "class": `${noticePrefixCls}-content` }, [content]),
-			closable && (0, vue.createVNode)("button", (0, vue.mergeProps)({
-				"type": "button",
-				"class": `${noticePrefixCls}-close`,
-				"onKeydown": onCloseKeyDown,
-				"aria-label": "Close"
-			}, ariaProps, { "onClick": (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onInternalClose();
-			} }), [closableConfig.closeIcon ?? mergedCloseIcon.value]),
-			mergedShowProgress.value && (0, vue.createVNode)("progress", {
-				"class": `${noticePrefixCls}-progress`,
-				"max": "100",
-				"value": validPercent
-			}, [`${validPercent}%`])
-		]);
-	};
-}, { props: {
-	prefixCls: {
-		type: String,
-		required: true,
-		default: void 0
-	},
-	eventKey: {
-		type: [String, Number],
-		required: true,
-		default: void 0
-	},
-	onClick: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onNoticeClose: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	hovering: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	props: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	content: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	duration: {
-		type: [
-			Number,
-			Boolean,
-			null
-		],
-		required: false,
-		default: void 0
-	},
-	showProgress: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	pauseOnHover: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	closeIcon: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	closable: {
-		type: [Boolean, Object],
-		required: false,
-		default: void 0
-	},
-	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
-	},
-	times: {
-		type: Number,
-		required: false,
-		default: void 0
-	}
-} });
-var Notice_default = Notify;
-exports.default = Notice_default;

package/dist/Notice.d.ts

@@ -1,15 +0,0 @@
-import { Key, NoticeConfig } from './interface.ts';
-export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
-    prefixCls: string;
-    eventKey: Key;
-    onClick?: (event: Event) => void;
-    onNoticeClose?: (key: Key) => void;
-    hovering?: boolean;
-    props?: Record<string, any>;
-}
-declare const Notify: import('vue').DefineSetupFnComponent<NoticeProps & {
-    times?: number;
-}, {}, {}, NoticeProps & {
-    times?: number;
-} & {}, import('vue').PublicProps>;
-export default Notify;

package/dist/Notice.js

@@ -1,227 +0,0 @@
-import { computed, createVNode, defineComponent, mergeProps, shallowRef, watch } from "vue";
-import { classNames } from "@v-c/util";
-import KeyCode from "@v-c/util/dist/KeyCode";
-import pickAttrs from "@v-c/util/dist/pickAttrs";
-var defaults = {
-	duration: 4.5,
-	pauseOnHover: true,
-	closeIcon: "x"
-};
-var Notice_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
-	const hovering = shallowRef(false);
-	const percent = shallowRef(0);
-	const spentTime = shallowRef(0);
-	const mergedHovering = computed(() => props.hovering || hovering.value);
-	const mergedDuration = computed(() => {
-		if (typeof props.duration === "number") return props.duration;
-		if (props.duration === void 0) return defaults.duration;
-		return 0;
-	});
-	const mergedPauseOnHover = computed(() => props.pauseOnHover === void 0 ? defaults.pauseOnHover : props.pauseOnHover);
-	const mergedShowProgress = computed(() => mergedDuration.value > 0 && props.showProgress);
-	const mergedCloseIcon = computed(() => props.closeIcon ?? defaults.closeIcon);
-	const onInternalClose = () => {
-		props.onNoticeClose?.(props.eventKey);
-	};
-	const onCloseKeyDown = (e) => {
-		if (e.key === "Enter" || e.code === "Enter" || e.keyCode === KeyCode.ENTER) onInternalClose();
-	};
-	watch([
-		() => props.times,
-		mergedDuration,
-		mergedHovering
-	], (_n, _, onCleanup) => {
-		const duration = mergedDuration.value;
-		const hoveringValue = mergedHovering.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		if (!hoveringValue && duration > 0) {
-			const start = Date.now() - spentTime.value;
-			const timeoutId = window.setTimeout(() => {
-				onInternalClose();
-			}, duration * 1e3 - spentTime.value);
-			onCleanup(() => {
-				if (pauseOnHover) clearTimeout(timeoutId);
-				spentTime.value = Date.now() - start;
-			});
-		}
-	}, { immediate: true });
-	watch([
-		() => props.times,
-		mergedDuration,
-		spentTime,
-		mergedHovering,
-		mergedShowProgress
-	], (_n, _, onCleanup) => {
-		const hoveringValue = mergedHovering.value;
-		const showProgress = mergedShowProgress.value;
-		const pauseOnHover = mergedPauseOnHover.value;
-		const duration = mergedDuration.value;
-		const baseSpentTime = spentTime.value;
-		if (!hoveringValue && showProgress && (pauseOnHover || baseSpentTime === 0)) {
-			const start = performance.now();
-			let animationFrame = 0;
-			const calculate = () => {
-				cancelAnimationFrame(animationFrame);
-				animationFrame = requestAnimationFrame((timestamp) => {
-					const runtime = timestamp + baseSpentTime - start;
-					const progress = Math.min(runtime / (duration * 1e3), 1);
-					percent.value = progress * 100;
-					if (progress < 1) calculate();
-				});
-			};
-			calculate();
-			onCleanup(() => {
-				if (pauseOnHover) cancelAnimationFrame(animationFrame);
-			});
-		}
-	}, { immediate: true });
-	return () => {
-		const { closable, prefixCls, props: divProps, onClick, content, className, style } = props;
-		const closableConfig = typeof closable === "object" && closable !== null ? closable : closable ? { closeIcon: mergedCloseIcon.value } : {};
-		const ariaProps = pickAttrs(closableConfig, true);
-		const validPercent = 100 - (percent.value <= 0 ? 0 : percent.value > 100 ? 100 : percent.value);
-		const noticePrefixCls = `${prefixCls}-notice`;
-		const mergedStyle = {
-			...typeof divProps?.style === "object" && divProps?.style ? divProps.style : {},
-			...typeof attrs.style === "object" && attrs.style ? attrs.style : {},
-			...typeof style === "object" && style ? style : {}
-		};
-		return createVNode("div", mergeProps(divProps, {
-			"class": classNames(noticePrefixCls, className, attrs.class, { [`${noticePrefixCls}-closable`]: !!closable }),
-			"style": mergedStyle,
-			"onMouseenter": (e) => {
-				hovering.value = true;
-				divProps?.onMouseEnter?.(e);
-			},
-			"onMouseleave": (e) => {
-				hovering.value = false;
-				divProps?.onMouseLeave?.(e);
-			},
-			"onClick": onClick
-		}), [
-			createVNode("div", { "class": `${noticePrefixCls}-content` }, [content]),
-			closable && createVNode("button", mergeProps({
-				"type": "button",
-				"class": `${noticePrefixCls}-close`,
-				"onKeydown": onCloseKeyDown,
-				"aria-label": "Close"
-			}, ariaProps, { "onClick": (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				onInternalClose();
-			} }), [closableConfig.closeIcon ?? mergedCloseIcon.value]),
-			mergedShowProgress.value && createVNode("progress", {
-				"class": `${noticePrefixCls}-progress`,
-				"max": "100",
-				"value": validPercent
-			}, [`${validPercent}%`])
-		]);
-	};
-}, { props: {
-	prefixCls: {
-		type: String,
-		required: true,
-		default: void 0
-	},
-	eventKey: {
-		type: [String, Number],
-		required: true,
-		default: void 0
-	},
-	onClick: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	onNoticeClose: {
-		type: Function,
-		required: false,
-		default: void 0
-	},
-	hovering: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	props: {
-		type: Object,
-		required: false,
-		default: void 0
-	},
-	content: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	duration: {
-		type: [
-			Number,
-			Boolean,
-			null
-		],
-		required: false,
-		default: void 0
-	},
-	showProgress: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	pauseOnHover: {
-		type: Boolean,
-		required: false,
-		default: void 0
-	},
-	closeIcon: {
-		type: [
-			Object,
-			Function,
-			String,
-			Number,
-			null,
-			Boolean,
-			Array
-		],
-		required: false,
-		default: void 0
-	},
-	closable: {
-		type: [Boolean, Object],
-		required: false,
-		default: void 0
-	},
-	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
-	},
-	times: {
-		type: Number,
-		required: false,
-		default: void 0
-	}
-} });
-export { Notice_default as default };