antdv-next 1.2.2 → 1.3.0

package/dist/notification/style/index.js

@@ -1,173 +1,14 @@
-import { genFocusStyle, resetComponent } from "../../style/index.js";
-import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks, genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
 import { mergeToken } from "../../theme/internal.js";
 import { CONTAINER_MAX_OFFSET } from "../../_util/hooks/useZIndex.js";
+import notification_default, { genPurePanelStyle } from "./notification.js";
 import placement_default from "./placement.js";
-import stack_default from "./stack.js";
-import { Keyframes, unit } from "@antdv-next/cssinjs";
+import { unit } from "@antdv-next/cssinjs";
 
 //#region src/notification/style/index.ts
-const 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, motionDurationMid } = 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": colorSuccessBg ? { background: colorSuccessBg } : {},
-			"&-error": colorErrorBg ? { background: colorErrorBg } : {},
-			"&-info": colorInfoBg ? { background: colorInfoBg } : {},
-			"&-warning": colorWarningBg ? { background: colorWarningBg } : {}
-		},
-		[`${noticeCls}-title`]: {
-			marginBottom: token.marginXS,
-			color: colorTextHeading,
-			fontSize: fontSizeLG,
-			lineHeight: token.lineHeightLG
-		},
-		[`${noticeCls}-description`]: {
-			fontSize,
-			color: colorText,
-			marginTop: token.marginXS,
-			"&:first-child": {
-				marginTop: 0,
-				marginInlineEnd: token.marginSM
-			}
-		},
-		[`${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: ["color", "background-color"].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
-			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) } }];
-};
+const DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT = 3;
+/** Provide default public ComponentToken values for Notification. */
 function prepareComponentToken(token) {
 	return {
 		zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
@@ -179,6 +20,7 @@ function prepareComponentToken(token) {
 		colorWarningBg: void 0
 	};
 }
+/** Derive internal Notification style tokens from alias and component tokens. */
 const prepareNotificationToken = (token) => {
 	const notificationPaddingVertical = token.paddingMD;
 	const notificationPaddingHorizontal = token.paddingLG;
@@ -191,19 +33,107 @@ const prepareNotificationToken = (token) => {
 		notificationMarginBottom: token.margin,
 		notificationPadding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
 		notificationMarginEdge: token.marginLG,
-		animationMaxHeight: 150,
-		notificationStackLayer: 3,
-		notificationProgressHeight: 2
+		notificationProgressHeight: 2,
+		notificationMotionOffset: 64
 	});
 };
-var style_default = genStyleHooks("Notification", (token) => {
-	const notificationToken = prepareNotificationToken(token);
+/** Build a clip-path inset that keeps stack shadows visible. */
+function getStackNoticeClipPath(offset) {
+	return `inset(${offset} ${offset} ${offset} ${offset})`;
+}
+/** Generate shared list content and motion base styles. */
+const genNotificationListContentStyle = (token) => {
+	const { componentCls, motionDurationMid, motionDurationSlow, motionEaseInOut } = token;
+	const listContentCls = `${`${componentCls}-list`}-content`;
+	return {
+		[listContentCls]: {
+			position: "relative",
+			display: "flex",
+			flexShrink: 0,
+			flexDirection: "column",
+			gap: token.notificationMarginBottom,
+			width: "100%",
+			willChange: "height, transform",
+			transition: "none",
+			[`&${listContentCls}-decrease`]: { transition: `height calc(${motionDurationSlow} * 2) ${motionEaseInOut} ${motionDurationMid}` }
+		},
+		[`${componentCls}-fade`]: {
+			backfaceVisibility: "hidden",
+			willChange: "transform, opacity"
+		}
+	};
+};
+/** Generate the root holder, list, stack, and RTL styles for notifications. */
+function genNotificationListStyle(token, config) {
+	const { componentCls, notificationMarginEdge } = token;
+	const notificationMarginEdgeVar = "--notification-margin-edge";
+	const noticeCls = `${componentCls}-notice`;
+	const listCls = `${componentCls}-list`;
+	const listWidth = config.listWidthKey ? token.calc(token[config.listWidthKey]).add(token.calc(notificationMarginEdge).mul(2)).equal() : "100%";
+	const noticeBeyondStackVisibleCountCls = `${noticeCls}:nth-last-child(n + ${(config.stackVisibleCount ?? DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT) + 1})`;
+	const stackNoticeClipPath = getStackNoticeClipPath(unit(token.calc(token.marginXXL).mul(-1).equal()));
+	return { [componentCls]: {
+		...resetComponent(token),
+		[notificationMarginEdgeVar]: unit(notificationMarginEdge),
+		position: "fixed",
+		zIndex: token.zIndexPopup,
+		width: listWidth,
+		maxWidth: "100vw",
+		height: "100vh",
+		overflow: "hidden",
+		overscrollBehavior: "contain",
+		[`${componentCls}-hook-holder`]: { position: "relative" },
+		[`&${listCls}`]: {
+			maxHeight: "100vh",
+			padding: `var(${notificationMarginEdgeVar})`,
+			overflowX: "hidden",
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			scrollbarWidth: "none",
+			msOverflowStyle: "none",
+			pointerEvents: "none",
+			"&::-webkit-scrollbar": {
+				display: "none",
+				width: 0,
+				height: 0
+			}
+		},
+		...genNotificationListContentStyle(token),
+		[`&${componentCls}-stack`]: {
+			[noticeCls]: { clipPath: stackNoticeClipPath },
+			[`&:not(${componentCls}-stack-expanded)`]: {
+				[noticeCls]: { "--notification-scale": "calc(1 - min(var(--notification-index, 0), 2) * 0.06)" },
+				[`${noticeCls}:not(${noticeCls}-stack-in-threshold)`]: {
+					opacity: 0,
+					pointerEvents: "none"
+				},
+				[noticeBeyondStackVisibleCountCls]: {
+					opacity: 0,
+					pointerEvents: "none"
+				}
+			}
+		},
+		"&-rtl": {
+			direction: "rtl",
+			[`${noticeCls}-actions`]: { float: "left" }
+		}
+	} };
+}
+/** Register the PurePanel sub-style component for Notification. */
+const PurePanelStyle = genSubStyleComponent(["Notification", "PurePanel"], (token) => genPurePanelStyle(prepareNotificationToken(token)), prepareComponentToken);
+/** Compose the shared list, item, and placement styles. */
+function sharedGenerateStyle(token, config) {
+	const itemStyle = config.itemStyle ?? notification_default;
 	return [
-		genNotificationStyle(notificationToken),
-		placement_default(notificationToken),
-		stack_default(notificationToken)
+		genNotificationListStyle(token, config),
+		itemStyle(token),
+		placement_default(token)
 	];
+}
+/** Register the main style hook for Notification. */
+var style_default = genStyleHooks("Notification", (token) => {
+	return sharedGenerateStyle(prepareNotificationToken(token), { listWidthKey: "width" });
 }, prepareComponentToken);
 
 //#endregion
-export { style_default as default, genNoticeStyle, prepareComponentToken, prepareNotificationToken };
+export { PurePanelStyle, style_default as default, prepareNotificationToken, sharedGenerateStyle };

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

@@ -0,0 +1,23 @@
+import { NotificationToken } from "./index.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/notification.d.ts
+interface NotificationItemSharedStyleConfig {
+  width: number | string;
+  iconFontSize: number | string;
+  titleFontSize: number | string;
+  titleLineHeight: number | string;
+  contentStyle: CSSObject;
+  noticeStyle?: CSSObject;
+  typeStyle?: boolean;
+}
+/** Generate item styles shared by Notification and Message notice cards. */
+declare function genListItemSharedStyle(token: NotificationToken, config: NotificationItemSharedStyleConfig): CSSObject;
+/** Generate standalone PurePanel styles for Notification. */
+declare function genPurePanelStyle(token: NotificationToken): CSSObject;
+/** Wrap Notification item styles under the component root selector. */
+declare const genNotificationStyle: GenerateStyle<NotificationToken, CSSObject>;
+//#endregion
+export { genNotificationStyle as default, genListItemSharedStyle, genPurePanelStyle };

package/dist/notification/style/notification.js

@@ -0,0 +1,195 @@
+import { genFocusStyle } from "../../style/index.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/notification/style/notification.ts
+/** Generate motion transitions shared by notification-like notice cards. */
+function genNotificationItemMotionStyle(token) {
+	const { motionDurationMid, motionEaseInOut } = token;
+	const transition = `${motionDurationMid} ${motionEaseInOut}`;
+	return {
+		transform: "scale(var(--notification-scale, 1))",
+		transition: [
+			"transform",
+			"inset",
+			"clip-path",
+			"opacity"
+		].map((property) => `${property} ${transition}`).join(", ")
+	};
+}
+/** Generate item styles shared by Notification and Message notice cards. */
+function genListItemSharedStyle(token, config) {
+	const { componentCls, antCls, colorSuccess, colorInfo, colorWarning, colorError, colorTextHeading, colorText, boxShadow, borderRadiusLG, fontSize, lineHeight, notificationBg, notificationPadding, notificationMarginEdge, margin, calc } = token;
+	const noticeCls = `${componentCls}-notice`;
+	const [varName, varRef] = genCssVar(antCls, "notification");
+	return {
+		[noticeCls]: {
+			position: "absolute",
+			width: config.width,
+			maxWidth: `calc(100vw - ${unit(calc(notificationMarginEdge).mul(2).equal())})`,
+			padding: notificationPadding,
+			pointerEvents: "auto",
+			[varName("icon-font-size")]: config.iconFontSize,
+			[varName("title-font-size")]: config.titleFontSize,
+			[varName("title-line-height")]: config.titleLineHeight,
+			boxSizing: "border-box",
+			color: colorText,
+			background: notificationBg,
+			borderRadius: borderRadiusLG,
+			boxShadow,
+			fontSize,
+			lineHeight,
+			wordWrap: "break-word",
+			overflow: "visible",
+			...genNotificationItemMotionStyle(token),
+			...config.noticeStyle,
+			"&::after": {
+				position: "absolute",
+				insetInline: 0,
+				top: calc(margin).mul(-1).equal(),
+				height: margin,
+				content: "\"\""
+			},
+			...config.typeStyle && {
+				"&-success": { background: varRef("color-success-bg", notificationBg) },
+				"&-error": { background: varRef("color-error-bg", notificationBg) },
+				"&-info": { background: varRef("color-info-bg", notificationBg) },
+				"&-warning": { background: varRef("color-warning-bg", notificationBg) }
+			}
+		},
+		[`${noticeCls}-wrapper`]: {
+			display: "flex",
+			...config.contentStyle
+		},
+		[`${noticeCls}-title`]: {
+			color: colorTextHeading,
+			fontSize: varRef("title-font-size"),
+			lineHeight: varRef("title-line-height")
+		},
+		[`${noticeCls}-icon`]: {
+			flex: "none",
+			fontSize: varRef("icon-font-size"),
+			lineHeight: 1,
+			[`&${noticeCls}-icon-success`]: { color: colorSuccess },
+			[`&${noticeCls}-icon-info, &${noticeCls}-icon-loading`]: { color: colorInfo },
+			[`&${noticeCls}-icon-warning`]: { color: colorWarning },
+			[`&${noticeCls}-icon-error`]: { color: colorError }
+		}
+	};
+}
+/** Generate the complete notice item styles for Notification. */
+function genNotificationItemStyle(token) {
+	const { componentCls, progressBg, notificationProgressHeight, fontSize, borderRadiusLG, width, notificationIconSize, colorText, motionDurationMid, fontSizeLG, lineHeightLG, marginSM, marginXS, paddingLG, notificationPaddingVertical, notificationPaddingHorizontal, notificationCloseButtonSize, colorIcon, borderRadiusSM, colorIconHover, colorBgTextHover, colorBgTextActive } = token;
+	const noticeCls = `${componentCls}-notice`;
+	return {
+		...genListItemSharedStyle(token, {
+			width,
+			iconFontSize: notificationIconSize,
+			titleFontSize: fontSizeLG,
+			titleLineHeight: lineHeightLG,
+			contentStyle: {
+				alignItems: "flex-start",
+				gap: marginSM
+			},
+			typeStyle: true
+		}),
+		[`${noticeCls}-section`]: {
+			display: "flex",
+			flexDirection: "column",
+			flex: "auto",
+			gap: marginXS,
+			minWidth: 0
+		},
+		[`${noticeCls}-description`]: {
+			color: colorText,
+			fontSize
+		},
+		[`${noticeCls}-closable ${noticeCls}-title`]: { paddingInlineEnd: paddingLG },
+		[`${noticeCls}-closable ${noticeCls}-description`]: { paddingInlineEnd: paddingLG },
+		[`${noticeCls}-closable ${noticeCls}-title + ${noticeCls}-description`]: { paddingInlineEnd: 0 },
+		[`${noticeCls}-close`]: {
+			position: "absolute",
+			top: notificationPaddingVertical,
+			insetInlineEnd: notificationPaddingHorizontal,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: notificationCloseButtonSize,
+			height: notificationCloseButtonSize,
+			color: colorIcon,
+			background: "none",
+			border: "none",
+			borderRadius: borderRadiusSM,
+			outline: "none",
+			transition: ["color", "background-color"].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
+			"&:hover": {
+				color: colorIconHover,
+				backgroundColor: colorBgTextHover
+			},
+			"&:active": { backgroundColor: colorBgTextActive },
+			...genFocusStyle(token)
+		},
+		[`${noticeCls}-progress`]: {
+			position: "absolute",
+			bottom: 0,
+			display: "block",
+			appearance: "none",
+			inlineSize: `calc(100% - ${unit(borderRadiusLG)} * 2)`,
+			blockSize: notificationProgressHeight,
+			border: 0,
+			left: {
+				_skip_check_: true,
+				value: borderRadiusLG
+			},
+			right: {
+				_skip_check_: true,
+				value: borderRadiusLG
+			},
+			"&, &::-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: marginSM
+		}
+	};
+}
+/** Generate standalone PurePanel styles for Notification. */
+function genPurePanelStyle(token) {
+	const { componentCls, width } = token;
+	const noticeCls = `${componentCls}-notice`;
+	const actionsCls = `${noticeCls}-actions`;
+	const notificationItemStyle = genNotificationItemStyle(token);
+	return { [`${noticeCls}-pure-panel`]: {
+		width,
+		maxWidth: "100%",
+		...notificationItemStyle,
+		[noticeCls]: {
+			...notificationItemStyle[noticeCls],
+			position: "relative",
+			width: "100%",
+			maxWidth: "100%"
+		},
+		[actionsCls]: {
+			...notificationItemStyle[actionsCls],
+			float: "none",
+			textAlign: "end"
+		}
+	} };
+}
+/** Wrap Notification item styles under the component root selector. */
+const genNotificationStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: genNotificationItemStyle(token) };
+};
+var notification_default = genNotificationStyle;
+
+//#endregion
+export { notification_default as default, genListItemSharedStyle, genPurePanelStyle };

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

@@ -4,6 +4,7 @@ import "../../theme/internal.js";
 import { CSSObject } from "@antdv-next/cssinjs";
 
 //#region src/notification/style/placement.d.ts
+/** Wrap placement styles under the component root selector. */
 declare const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>;
 //#endregion
 export { genNotificationPlacementStyle as default };