antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/notification/style/index.d.ts

@@ -0,0 +1,45 @@
+import "../../theme/internal.js";
+import "vue";
+import { CSSObject } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 提醒框 z-index
+   * @descEN z-index of Notification
+   */
+  zIndexPopup: number;
+  /**
+   * @desc 提醒框宽度
+   * @descEN Width of Notification
+   */
+  width: number | string;
+  /**
+   * @desc 提醒框进度条背景色
+   * @descEN Background color of Notification progress bar
+   */
+  progressBg: string;
+  /**
+   * @desc 成功提醒框容器背景色
+   * @descEN Background color of success notification container
+   */
+  colorSuccessBg?: string;
+  /**
+   * @desc 错误提醒框容器背景色
+   * @descEN Background color of error notification container
+   */
+  colorErrorBg?: string;
+  /**
+   * @desc 信息提醒框容器背景色
+   * @descEN Background color of info notification container
+   */
+  colorInfoBg?: string;
+  /**
+   * @desc 警告提醒框容器背景色
+   * @descEN Background color of warning notification container
+   */
+  colorWarningBg?: string;
+}
+//#endregion
+export { ComponentToken };

package/dist/notification/style/index.js

@@ -0,0 +1,206 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { CONTAINER_MAX_OFFSET } from "../../_util/hooks/useZIndex.js";
+import "../../_util/hooks/index.js";
+import placement_default from "./placement.js";
+import stack_default from "./stack.js";
+import { Keyframes, unit } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/index.ts
+function genNoticeStyle(token) {
+	const { iconCls, componentCls, boxShadow, fontSizeLG, notificationMarginBottom, borderRadiusLG, colorSuccess, colorInfo, colorWarning, colorError, colorTextHeading, notificationBg, notificationPadding, notificationMarginEdge, progressBg, notificationProgressHeight, fontSize, lineHeight, width, notificationIconSize, colorText, colorSuccessBg, colorErrorBg, colorInfoBg, colorWarningBg } = token;
+	const noticeCls = `${componentCls}-notice`;
+	return {
+		position: "relative",
+		marginBottom: notificationMarginBottom,
+		marginInlineStart: "auto",
+		background: notificationBg,
+		borderRadius: borderRadiusLG,
+		boxShadow,
+		[noticeCls]: {
+			"padding": notificationPadding,
+			width,
+			"maxWidth": `calc(100vw - ${unit(token.calc(notificationMarginEdge).mul(2).equal())})`,
+			lineHeight,
+			"wordWrap": "break-word",
+			"borderRadius": borderRadiusLG,
+			"overflow": "hidden",
+			"&-success": { background: colorSuccessBg },
+			"&-error": { background: colorErrorBg },
+			"&-info": { background: colorInfoBg },
+			"&-warning": { background: colorWarningBg }
+		},
+		[`${noticeCls}-title`]: {
+			marginBottom: token.marginXS,
+			color: colorTextHeading,
+			fontSize: fontSizeLG,
+			lineHeight: token.lineHeightLG
+		},
+		[`${noticeCls}-description`]: {
+			fontSize,
+			color: colorText,
+			marginTop: token.marginXS
+		},
+		[`${noticeCls}-closable ${noticeCls}-title`]: { paddingInlineEnd: token.paddingLG },
+		[`${noticeCls}-with-icon ${noticeCls}-title`]: {
+			marginBottom: token.marginXS,
+			marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
+			fontSize: fontSizeLG
+		},
+		[`${noticeCls}-with-icon ${noticeCls}-description`]: {
+			marginInlineStart: token.calc(token.marginSM).add(notificationIconSize).equal(),
+			fontSize
+		},
+		[`${noticeCls}-icon`]: {
+			position: "absolute",
+			fontSize: notificationIconSize,
+			lineHeight: 1,
+			[`&-success${iconCls}`]: { color: colorSuccess },
+			[`&-info${iconCls}`]: { color: colorInfo },
+			[`&-warning${iconCls}`]: { color: colorWarning },
+			[`&-error${iconCls}`]: { color: colorError }
+		},
+		[`${noticeCls}-close`]: {
+			"position": "absolute",
+			"top": token.notificationPaddingVertical,
+			"insetInlineEnd": token.notificationPaddingHorizontal,
+			"color": token.colorIcon,
+			"outline": "none",
+			"width": token.notificationCloseButtonSize,
+			"height": token.notificationCloseButtonSize,
+			"borderRadius": token.borderRadiusSM,
+			"transition": `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`,
+			"display": "flex",
+			"alignItems": "center",
+			"justifyContent": "center",
+			"background": "none",
+			"border": "none",
+			"&:hover": {
+				color: token.colorIconHover,
+				backgroundColor: token.colorBgTextHover
+			},
+			"&:active": { backgroundColor: token.colorBgTextActive },
+			...genFocusStyle(token)
+		},
+		[`${noticeCls}-progress`]: {
+			"position": "absolute",
+			"display": "block",
+			"appearance": "none",
+			"inlineSize": `calc(100% - ${unit(borderRadiusLG)} * 2)`,
+			"left": {
+				_skip_check_: true,
+				value: borderRadiusLG
+			},
+			"right": {
+				_skip_check_: true,
+				value: borderRadiusLG
+			},
+			"bottom": 0,
+			"blockSize": notificationProgressHeight,
+			"border": 0,
+			"&, &::-webkit-progress-bar": {
+				borderRadius: borderRadiusLG,
+				backgroundColor: `rgba(0, 0, 0, 0.04)`
+			},
+			"&::-moz-progress-bar": { background: progressBg },
+			"&::-webkit-progress-value": {
+				borderRadius: borderRadiusLG,
+				background: progressBg
+			}
+		},
+		[`${noticeCls}-actions`]: {
+			float: "right",
+			marginTop: token.marginSM
+		}
+	};
+}
+const genNotificationStyle = (token) => {
+	const { componentCls, notificationMarginBottom, notificationMarginEdge, motionDurationMid, motionEaseInOut } = token;
+	const noticeCls = `${componentCls}-notice`;
+	const fadeOut = new Keyframes("antNotificationFadeOut", {
+		"0%": {
+			maxHeight: token.animationMaxHeight,
+			marginBottom: notificationMarginBottom
+		},
+		"100%": {
+			maxHeight: 0,
+			marginBottom: 0,
+			paddingTop: 0,
+			paddingBottom: 0,
+			opacity: 0
+		}
+	});
+	return [{ [componentCls]: {
+		...resetComponent(token),
+		"position": "fixed",
+		"zIndex": token.zIndexPopup,
+		"marginRight": {
+			value: notificationMarginEdge,
+			_skip_check_: true
+		},
+		[`${componentCls}-hook-holder`]: { position: "relative" },
+		[`${componentCls}-fade-appear-prepare`]: { opacity: "0 !important" },
+		[`${componentCls}-fade-enter, ${componentCls}-fade-appear`]: {
+			animationDuration: token.motionDurationMid,
+			animationTimingFunction: motionEaseInOut,
+			animationFillMode: "both",
+			opacity: 0,
+			animationPlayState: "paused"
+		},
+		[`${componentCls}-fade-leave`]: {
+			animationTimingFunction: motionEaseInOut,
+			animationFillMode: "both",
+			animationDuration: motionDurationMid,
+			animationPlayState: "paused"
+		},
+		[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationPlayState: "running" },
+		[`${componentCls}-fade-leave${componentCls}-fade-leave-active`]: {
+			animationName: fadeOut,
+			animationPlayState: "running"
+		},
+		"&-rtl": {
+			direction: "rtl",
+			[`${noticeCls}-actions`]: { float: "left" }
+		}
+	} }, { [componentCls]: { [`${noticeCls}-wrapper`]: genNoticeStyle(token) } }];
+};
+function prepareComponentToken(token) {
+	return {
+		zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
+		width: 384,
+		progressBg: `linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary})`,
+		colorSuccessBg: token.colorSuccessBg,
+		colorErrorBg: token.colorErrorBg,
+		colorInfoBg: token.colorInfoBg,
+		colorWarningBg: token.colorWarningBg
+	};
+}
+const prepareNotificationToken = (token) => {
+	const notificationPaddingVertical = token.paddingMD;
+	const notificationPaddingHorizontal = token.paddingLG;
+	return mergeToken(token, {
+		notificationBg: token.colorBgElevated,
+		notificationPaddingVertical,
+		notificationPaddingHorizontal,
+		notificationIconSize: token.calc(token.fontSizeLG).mul(token.lineHeightLG).equal(),
+		notificationCloseButtonSize: token.calc(token.controlHeightLG).mul(.55).equal(),
+		notificationMarginBottom: token.margin,
+		notificationPadding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
+		notificationMarginEdge: token.marginLG,
+		animationMaxHeight: 150,
+		notificationStackLayer: 3,
+		notificationProgressHeight: 2
+	});
+};
+var style_default = genStyleHooks("Notification", (token) => {
+	const notificationToken = prepareNotificationToken(token);
+	return [
+		genNotificationStyle(notificationToken),
+		placement_default(notificationToken),
+		stack_default(notificationToken)
+	];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default, genNoticeStyle, prepareComponentToken, prepareNotificationToken };

package/dist/notification/style/placement.js

@@ -0,0 +1,75 @@
+import { Keyframes } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/placement.ts
+const genNotificationPlacementStyle = (token) => {
+	const { componentCls, notificationMarginEdge, animationMaxHeight } = token;
+	const noticeCls = `${componentCls}-notice`;
+	const rightFadeIn = new Keyframes("antNotificationFadeIn", {
+		"0%": {
+			transform: `translate3d(100%, 0, 0)`,
+			opacity: 0
+		},
+		"100%": {
+			transform: `translate3d(0, 0, 0)`,
+			opacity: 1
+		}
+	});
+	const topFadeIn = new Keyframes("antNotificationTopFadeIn", {
+		"0%": {
+			top: -animationMaxHeight,
+			opacity: 0
+		},
+		"100%": {
+			top: 0,
+			opacity: 1
+		}
+	});
+	const bottomFadeIn = new Keyframes("antNotificationBottomFadeIn", {
+		"0%": {
+			bottom: token.calc(animationMaxHeight).mul(-1).equal(),
+			opacity: 0
+		},
+		"100%": {
+			bottom: 0,
+			opacity: 1
+		}
+	});
+	const leftFadeIn = new Keyframes("antNotificationLeftFadeIn", {
+		"0%": {
+			transform: `translate3d(-100%, 0, 0)`,
+			opacity: 0
+		},
+		"100%": {
+			transform: `translate3d(0, 0, 0)`,
+			opacity: 1
+		}
+	});
+	return { [componentCls]: {
+		[`&${componentCls}-top, &${componentCls}-bottom`]: {
+			marginInline: 0,
+			[noticeCls]: { marginInline: "auto auto" }
+		},
+		[`&${componentCls}-top`]: { [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationName: topFadeIn } },
+		[`&${componentCls}-bottom`]: { [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationName: bottomFadeIn } },
+		[`&${componentCls}-topRight, &${componentCls}-bottomRight`]: { [`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationName: rightFadeIn } },
+		[`&${componentCls}-topLeft, &${componentCls}-bottomLeft`]: {
+			marginRight: {
+				value: 0,
+				_skip_check_: true
+			},
+			marginLeft: {
+				value: notificationMarginEdge,
+				_skip_check_: true
+			},
+			[noticeCls]: {
+				marginInlineEnd: "auto",
+				marginInlineStart: 0
+			},
+			[`${componentCls}-fade-enter${componentCls}-fade-enter-active, ${componentCls}-fade-appear${componentCls}-fade-appear-active`]: { animationName: leftFadeIn }
+		}
+	} };
+};
+var placement_default = genNotificationPlacementStyle;
+
+//#endregion
+export { placement_default as default };

package/dist/notification/style/pure-panel.js

@@ -0,0 +1,19 @@
+import { genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { genNoticeStyle, prepareComponentToken, prepareNotificationToken } from "./index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/pure-panel.ts
+var pure_panel_default = genSubStyleComponent(["Notification", "PurePanel"], (token) => {
+	const noticeCls = `${token.componentCls}-notice`;
+	const notificationToken = prepareNotificationToken(token);
+	return { [`${noticeCls}-pure-panel`]: {
+		...genNoticeStyle(notificationToken),
+		width: notificationToken.width,
+		maxWidth: `calc(100vw - ${unit(token.calc(notificationToken.notificationMarginEdge).mul(2).equal())})`,
+		margin: 0
+	} };
+}, prepareComponentToken);
+
+//#endregion
+export { pure_panel_default as default };

package/dist/notification/style/stack.js

@@ -0,0 +1,88 @@
+import { NotificationPlacements } from "../interface.js";
+
+//#region src/notification/style/stack.ts
+const placementAlignProperty = {
+	topLeft: "left",
+	topRight: "right",
+	bottomLeft: "left",
+	bottomRight: "right",
+	top: "left",
+	bottom: "left"
+};
+function genPlacementStackStyle(token, placement) {
+	const { componentCls } = token;
+	return { [`${componentCls}-${placement}`]: { [`&${componentCls}-stack > ${componentCls}-notice-wrapper`]: {
+		[placement.startsWith("top") ? "top" : "bottom"]: 0,
+		[placementAlignProperty[placement]]: {
+			value: 0,
+			_skip_check_: true
+		}
+	} } };
+}
+function genStackChildrenStyle(token) {
+	const childrenStyle = {};
+	for (let i = 1; i < token.notificationStackLayer; i++) childrenStyle[`&:nth-last-child(${i + 1})`] = {
+		overflow: "hidden",
+		[`& > ${token.componentCls}-notice`]: {
+			opacity: 0,
+			transition: `opacity ${token.motionDurationMid}`
+		}
+	};
+	return {
+		[`&:not(:nth-last-child(-n+${token.notificationStackLayer}))`]: {
+			opacity: 0,
+			overflow: "hidden",
+			color: "transparent",
+			pointerEvents: "none"
+		},
+		...childrenStyle
+	};
+}
+function genStackedNoticeStyle(token) {
+	const childrenStyle = {};
+	for (let i = 1; i < token.notificationStackLayer; i++) childrenStyle[`&:nth-last-child(${i + 1})`] = {
+		"background": token.colorBgBlur,
+		"backdropFilter": "blur(10px)",
+		"-webkit-backdrop-filter": "blur(10px)"
+	};
+	return { ...childrenStyle };
+}
+const genStackStyle = (token) => {
+	const { componentCls } = token;
+	return {
+		[`${componentCls}-stack`]: { [`& > ${componentCls}-notice-wrapper`]: {
+			transition: `transform ${token.motionDurationSlow}, backdrop-filter 0s`,
+			willChange: "transform, opacity",
+			position: "absolute",
+			...genStackChildrenStyle(token)
+		} },
+		[`${componentCls}-stack:not(${componentCls}-stack-expanded)`]: { [`& > ${componentCls}-notice-wrapper`]: { ...genStackedNoticeStyle(token) } },
+		[`${componentCls}-stack${componentCls}-stack-expanded`]: { [`& > ${componentCls}-notice-wrapper`]: {
+			"&:not(:nth-last-child(-n + 1))": {
+				opacity: 1,
+				overflow: "unset",
+				color: "inherit",
+				pointerEvents: "auto",
+				[`& > ${token.componentCls}-notice`]: { opacity: 1 }
+			},
+			"&:after": {
+				content: "\"\"",
+				position: "absolute",
+				height: token.margin,
+				width: "100%",
+				insetInline: 0,
+				bottom: token.calc(token.margin).mul(-1).equal(),
+				background: "transparent",
+				pointerEvents: "auto"
+			}
+		} },
+		...NotificationPlacements.map((placement) => genPlacementStackStyle(token, placement)).reduce((acc, cur) => ({
+			...acc,
+			...cur
+		}), {})
+	};
+};
+var stack_default = genStackStyle;
+
+//#endregion
+export { stack_default as default };

package/dist/notification/useNotification.d.ts

@@ -0,0 +1,8 @@
+import { NotificationConfig, NotificationInstance } from "./interface.js";
+import * as vue_jsx_runtime1 from "vue/jsx-runtime";
+
+//#region src/notification/useNotification.d.ts
+
+declare function useNotification(notificationConfig?: NotificationConfig): readonly [NotificationInstance, () => vue_jsx_runtime1.JSX.Element];
+//#endregion
+export { useNotification };

package/dist/notification/useNotification.js

@@ -0,0 +1,251 @@
+import { useBaseConfig, useComponentBaseConfig } from "../config-provider/context.js";
+import useToken from "../theme/useToken.js";
+import "../theme/internal.js";
+import { mergeClassNames, mergeStyles, resolveStyleOrClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { devUseWarning } from "../_util/warning.js";
+import "../_util/hooks/index.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { computeClosable, pickClosable } from "../_util/hooks/useClosable.js";
+import style_default from "./style/index.js";
+import { PureContent, getCloseIcon } from "./PurePanel.js";
+import { getCloseIconConfig, getMotion, getPlacementStyle } from "./util.js";
+import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { useNotification, useNotificationProvider } from "@v-c/notification";
+
+//#region src/notification/useNotification.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const DEFAULT_OFFSET = 24;
+const DEFAULT_DURATION = 4.5;
+const DEFAULT_PLACEMENT = "topRight";
+const Wrapper = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const prefixCls = computed(() => props.prefixCls);
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useNotificationProvider(computed(() => {
+		return { classNames: { list: clsx(hashId.value, cssVarCls.value, rootCls.value) } };
+	}));
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: { prefixCls: {
+	type: String,
+	required: true
+} } });
+const renderNotifications = (node, { prefixCls, key }) => {
+	return createVNode(Wrapper, {
+		"prefixCls": prefixCls,
+		"key": key
+	}, _isSlot(node) ? node : { default: () => [node] });
+};
+const holderDefaultProps = {
+	duration: DEFAULT_DURATION,
+	pauseOnHover: true
+};
+const Holder = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const { getPrefixCls, getPopupContainer, notification, direction } = useBaseConfig("notification");
+	const { classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("notification", props);
+	const { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const [, token] = useToken();
+	const prefixCls = computed(() => props.prefixCls || getPrefixCls("notification"));
+	const mergedDuration = computed(() => {
+		return typeof props.duration === "number" && props.duration > 0 ? props.duration : false;
+	});
+	const getStyle = (placement) => {
+		return getPlacementStyle(placement, props?.top ?? DEFAULT_OFFSET, props?.bottom ?? DEFAULT_DURATION);
+	};
+	const getClassName = () => clsx({ [`${prefixCls.value}-rtl`]: props.rtl ?? direction.value === "rtl" });
+	const getNotificationMotion = () => getMotion(prefixCls.value);
+	const [api, holder] = useNotification({
+		prefixCls: prefixCls.value,
+		style: getStyle,
+		className: getClassName,
+		motion: getNotificationMotion,
+		closable: { closeIcon: getCloseIcon(prefixCls.value) },
+		duration: mergedDuration.value,
+		getContainer: () => props?.getContainer?.() || getPopupContainer?.() || document.body,
+		maxCount: props?.maxCount,
+		pauseOnHover: props?.pauseOnHover,
+		showProgress: props?.showProgress,
+		onAllRemoved: props.onAllRemoved,
+		renderNotifications,
+		stack: props.stack === false ? false : {
+			threshold: typeof props.stack === "object" ? props.stack.threshold : void 0,
+			offset: 8,
+			gap: token.value?.margin
+		}
+	});
+	const mergedProps = computed(() => props);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	expose({
+		...api,
+		prefixCls,
+		notification,
+		classes: mergedClassNames,
+		styles: mergedStyles
+	});
+	return () => {
+		return holder?.();
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		top: {
+			type: Number,
+			required: false
+		},
+		bottom: {
+			type: Number,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		getContainer: {
+			type: Function,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		maxCount: {
+			type: Number,
+			required: false
+		},
+		rtl: {
+			type: Boolean,
+			required: false
+		},
+		stack: {
+			type: [Boolean, Object],
+			required: false
+		},
+		duration: {
+			type: [Number, Boolean],
+			required: false
+		},
+		showProgress: {
+			type: Boolean,
+			required: false
+		},
+		pauseOnHover: {
+			type: Boolean,
+			required: false
+		},
+		closeIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		onAllRemoved: { required: false }
+	}, holderDefaultProps),
+	name: "NotificationHolder",
+	inheritAttrs: false
+});
+function useInternalNotification(notificationConfig) {
+	const holderRef = shallowRef();
+	const warning = devUseWarning("Notification");
+	const { notification: notificationContext } = useBaseConfig("notification");
+	const wrapAPIFn = () => {
+		const open = (config) => {
+			if (!holderRef.value) {
+				warning(false, "usage", "You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.");
+				return;
+			}
+			const { open: originOpen, prefixCls, notification, classNames: originClassNames, styles: originStyles } = holderRef.value;
+			const contextClassName = notification?.class || {};
+			const contextStyle = notification?.style || {};
+			const noticePrefixCls = `${prefixCls}-notice`;
+			const { title, description, icon, type, actions, class: className, style, role = "alert", closeIcon, closable, classes: configClassNames = {}, styles = {},...restConfig } = config;
+			const mergedTitle = title;
+			const mergedActions = actions;
+			const realCloseIcon = getCloseIcon(noticePrefixCls, getCloseIconConfig(closeIcon, notificationConfig, notification));
+			const [rawClosable, mergedCloseIcon, , ariaProps] = computeClosable(pickClosable(computed(() => ({
+				...notificationConfig || {},
+				...config
+			}))), pickClosable(notificationContext), computed(() => ({
+				closable: true,
+				closeIcon: realCloseIcon
+			})));
+			const mergedClosable = rawClosable ? {
+				onClose: closable && typeof closable === "object" ? closable.onClose : void 0,
+				closeIcon: mergedCloseIcon,
+				...ariaProps
+			} : false;
+			const semanticClassNames = resolveStyleOrClass(configClassNames, { props: config });
+			const semanticStyles = resolveStyleOrClass(styles, { props: config });
+			const mergedClassNames = mergeClassNames(void 0, originClassNames, semanticClassNames);
+			const mergedStyles = mergeStyles(originStyles, semanticStyles);
+			return originOpen({
+				placement: notificationConfig?.placement ?? DEFAULT_PLACEMENT,
+				...restConfig,
+				content: createVNode(PureContent, {
+					"prefixCls": noticePrefixCls,
+					"icon": icon,
+					"type": type,
+					"title": mergedTitle,
+					"description": description,
+					"actions": mergedActions,
+					"role": role,
+					"classes": mergedClassNames,
+					"styles": mergedStyles
+				}, null),
+				className: clsx({ [`${noticePrefixCls}-${type}`]: type }, className, contextClassName, mergedClassNames.root),
+				style: {
+					...contextStyle,
+					...mergedStyles.root,
+					...style
+				},
+				closable: mergedClosable
+			});
+		};
+		const destroy = (key) => {
+			if (key !== void 0) holderRef.value?.close(key);
+			else holderRef.value?.destroy();
+		};
+		const clone = {
+			open,
+			destroy
+		};
+		[
+			"success",
+			"info",
+			"warning",
+			"error"
+		].forEach((type) => {
+			clone[type] = (config) => open({
+				...config,
+				type
+			});
+		});
+		return clone;
+	};
+	const holderContext = () => {
+		return createVNode(Holder, mergeProps({ "key": "notificaion-holder" }, notificationConfig, { "ref": holderRef }), null);
+	};
+	return [wrapAPIFn(), holderContext];
+}
+function useNotification$1(notificationConfig) {
+	return useInternalNotification(notificationConfig);
+}
+
+//#endregion
+export { useNotification$1 as default, useInternalNotification };