@gx-design-vue/pro-layout 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/style/breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/breadcrumb.d.ts
+declare const genBreadcrumbStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genBreadcrumbStyle as default };

package/dist/style/breadcrumb.js

@@ -0,0 +1,77 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/style/breadcrumb.ts
+const genBreadcrumbStyle = (token) => {
+	const breadcrumbCls = `${token.componentCls}-breadcrumb`;
+	return { [breadcrumbCls]: {
+		color: token.colorTextDescription,
+		fontSize: token.fontSize,
+		lineHeight: token.lineHeight,
+		ol: {
+			display: "flex",
+			flexWrap: "wrap",
+			margin: 0,
+			padding: 0,
+			listStyle: "none",
+			alignItems: "center"
+		},
+		li: {
+			display: "flex",
+			alignItems: "center"
+		},
+		[`${breadcrumbCls}-link`]: {
+			color: token.colorTextDescription,
+			padding: `0 ${unit(token.paddingXXS)}`,
+			borderRadius: token.borderRadiusSM,
+			cursor: "pointer",
+			transition: `color ${token.motionDurationMid}`,
+			display: "inline-flex",
+			alignItems: "center",
+			gap: token.marginXXS,
+			marginInline: token.calc(token.marginXXS).mul(-1).equal(),
+			"&:hover": {
+				color: token.colorText,
+				backgroundColor: token.colorBgTextHover
+			},
+			[`&${breadcrumbCls}-link-last`]: {
+				color: token.colorText,
+				cursor: "default",
+				"&:hover": {
+					color: token.colorText,
+					backgroundColor: "unset"
+				}
+			}
+		},
+		[`${breadcrumbCls}-item-icon`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			fontSize: token.fontSize,
+			minHeight: unit(token.fontHeight)
+		},
+		[`${breadcrumbCls}-overlay-link`]: {
+			color: token.colorTextDescription,
+			padding: `0 ${unit(token.paddingXXS)}`,
+			borderRadius: token.borderRadiusSM,
+			cursor: "pointer",
+			transition: `color ${token.motionDurationMid}`,
+			display: "inline-flex",
+			alignItems: "center",
+			gap: token.marginXXS,
+			marginInline: token.calc(token.marginXXS).mul(-1).equal(),
+			"> .anticon": {
+				marginInlineStart: token.marginXXS,
+				fontSize: token.fontSizeIcon
+			},
+			"&:hover": {
+				color: token.colorText,
+				backgroundColor: token.colorBgTextHover
+			}
+		},
+		[`${breadcrumbCls}-separator`]: {
+			marginInline: token.marginXS,
+			color: token.colorTextDescription
+		},
+		"li:last-child": { cursor: "default" }
+	} };
+};
+//#endregion
+export { genBreadcrumbStyle as default };

package/dist/style/collapseButton.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/collapseButton.d.ts
+declare const genCollapseButtonStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genCollapseButtonStyle as default };

package/dist/style/collapseButton.js

@@ -0,0 +1,57 @@
+//#region src/style/collapseButton.ts
+const genCollapseButtonStyle = (token) => {
+	const iconBtnSize = token.controlHeightSM;
+	return { [`${token.componentCls}-collapse-button`]: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: iconBtnSize,
+		height: iconBtnSize,
+		cursor: "pointer",
+		color: token.colorIcon,
+		transition: `all ${token.motionDurationMid}`,
+		borderRadius: token.borderRadiusSM,
+		border: "none",
+		outline: "none",
+		"&:hover": {
+			color: token.colorIconHover,
+			backgroundColor: token.colorBgTextHover
+		},
+		"&:active": { backgroundColor: token.colorBgTextActive },
+		"&-header": {
+			display: "inline-flex",
+			fontSize: token.fontSizeXL
+		},
+		"&-sider": {
+			position: "absolute",
+			insetBlockStart: "18px",
+			zIndex: "102",
+			width: "24px",
+			height: "24px",
+			fontSize: ["14px", "16px"],
+			textAlign: "center",
+			borderRadius: "40px",
+			insetInlineEnd: "-13px",
+			transition: "transform 0.3s",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			cursor: "pointer",
+			color: token.siderColorTextCollapsedButton,
+			backgroundColor: token.siderColorBgCollapsedButton,
+			boxShadow: token.boxShadowTertiary,
+			"&:hover": {
+				color: token.siderColorTextCollapsedButtonHover,
+				boxShadow: token.boxShadow
+			},
+			"& > svg": {
+				transition: "transform  0.3s",
+				transform: "rotate(90deg)"
+			},
+			"&-collapsed": { "& > svg": { transform: "rotate(-90deg)" } }
+		}
+	} };
+};
+//#endregion
+export { genCollapseButtonStyle as default };

package/dist/style/content.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/content.d.ts
+declare const genContentStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genContentStyle as default };

package/dist/style/content.js

@@ -0,0 +1,29 @@
+//#region src/style/content.ts
+const genContentStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return {
+		[`${componentCls} ${antCls}-layout-content${componentCls}-content`]: {
+			flex: "1 1 auto",
+			color: token.colorText,
+			minHeight: 0,
+			display: "flex",
+			flexDirection: "column"
+		},
+		[`${componentCls}-content`]: {
+			"&-breadcrumb": {
+				paddingBlock: token.paddingSM,
+				paddingInline: token.pageContainerPadding || token.paddingLG,
+				flexShrink: 0
+			},
+			"&-inner": {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column"
+			},
+			"&-has-footer-toolbar": { [`${componentCls}-content-inner`]: { paddingBottom: token.controlHeightLG } }
+		}
+	};
+};
+//#endregion
+export { genContentStyle as default };

package/dist/style/footer.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/footer.d.ts
+declare const genFooterStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genFooterStyle as default };

package/dist/style/footer.js

@@ -0,0 +1,33 @@
+//#region src/style/footer.ts
+const genFooterStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return {
+		[`${componentCls} ${antCls}-layout-footer${componentCls}-footer`]: {
+			paddingBlock: token.paddingLG,
+			paddingInline: token.padding,
+			color: token.colorTextSecondary,
+			textAlign: "center",
+			background: "transparent"
+		},
+		[`${componentCls}-footer`]: {
+			"&-links": {
+				display: "flex",
+				justifyContent: "center",
+				flexWrap: "wrap",
+				gap: token.marginSM,
+				marginBlockEnd: token.marginXS
+			},
+			"&-link": {
+				color: token.colorTextSecondary,
+				textDecoration: token.linkDecoration,
+				"&:hover": { color: token.colorPrimary }
+			},
+			"&-copyright": {
+				color: token.colorText,
+				fontSize: token.fontSize
+			}
+		}
+	};
+};
+//#endregion
+export { genFooterStyle as default };

package/dist/style/header.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/header.d.ts
+declare const genHeaderStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genHeaderStyle as default };

package/dist/style/header.js

@@ -0,0 +1,76 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/style/header.ts
+const genHeaderStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const headerHeight = token.headerHeightLayoutHeader || token.controlHeightLG * 2;
+	return {
+		[`${componentCls} ${antCls}-layout-header${componentCls}-header`]: {
+			height: unit(headerHeight),
+			lineHeight: unit(headerHeight),
+			zIndex: 101,
+			width: "100%",
+			paddingBlock: 0,
+			paddingInline: 0,
+			borderBlockEnd: `${token.lineWidth} solid ${token.colorSplit}`,
+			backgroundColor: token.headerColorBgHeader,
+			WebkitBackdropFilter: "blur(8px)",
+			backdropFilter: "blur(8px)",
+			transition: `background-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+			"&-fixed-scrolled": { backgroundColor: token.headerColorBgScrollHeader },
+			"&-hidden": {
+				transform: "translateY(-100%)",
+				transition: `transform ${token.motionDurationMid} ${token.motionEaseInOut}`
+			},
+			"&-dark": {
+				backgroundColor: token.colorBgContainer,
+				color: token.colorTextLightSolid,
+				borderBlockEnd: "none"
+			}
+		},
+		[`${componentCls}-header`]: {
+			"&-fixed": {
+				position: "fixed",
+				insetBlockStart: 0,
+				insetInlineEnd: 0,
+				zIndex: 101
+			},
+			"&-main": {
+				display: "flex",
+				width: "100%",
+				height: "100%",
+				paddingInline: token.paddingLG,
+				gap: token.marginXS
+			},
+			"&-main-left": {
+				display: "flex",
+				alignItems: "center",
+				gap: token.marginXS,
+				flexShrink: 0
+			},
+			"&-main-right": {
+				display: "flex",
+				alignItems: "center",
+				marginLeft: "auto",
+				gap: token.marginXS,
+				flexShrink: 0
+			},
+			"&-breadcrumb": { minWidth: 0 },
+			"&-menu": {
+				flex: 1,
+				minWidth: 0,
+				display: "flex",
+				alignItems: "center",
+				paddingInline: token.marginXS,
+				overflow: "hidden"
+			}
+		},
+		[`${componentCls}-top`]: { [`${componentCls}-header`]: { "&-main": { maxWidth: "100%" } } },
+		[`${componentCls}-mix`]: { [`${componentCls}-header`]: { "&-main": { maxWidth: "100%" } } },
+		[`${componentCls}-wide`]: { [`${componentCls}-header`]: { "&-main": {
+			margin: "0 auto",
+			maxWidth: "100%"
+		} } }
+	};
+};
+//#endregion
+export { genHeaderStyle as default };

package/dist/style/index.d.ts

@@ -1,24 +1,5 @@
-import { GenerateStyle, ProAliasToken } from "@gx-design-vue/pro-provider";
-
 //#region src/style/index.d.ts
-interface ProLayoutToken extends ProAliasToken {
-  componentCls: string;
-}
-declare function iconStyle(token: ProLayoutToken): {
-  paddingInline: number;
-  paddingBlock: number;
-  lineHeight: string;
-  fontSize: number;
-  cursor: string;
-  color: string;
-  borderRadius: number;
-  transition: string;
-  '&:hover': {
-    color: string;
-    backgroundColor: string;
-  };
-};
-declare const compatibleStyle: GenerateStyle<ProLayoutToken>;
-declare const genProLayoutStyle: GenerateStyle<ProLayoutToken>;
+type ComponentToken = Record<string, any>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
 //#endregion
-export { ProLayoutToken, compatibleStyle, genProLayoutStyle, iconStyle };
+export { ComponentToken, _default as default };

package/dist/style/index.js

@@ -1,62 +1,58 @@
-import { getTokenLayoutTheme } from "../config/index.js";
-
+import genBreadcrumbStyle from "./breadcrumb.js";
+import genCollapseButtonStyle from "./collapseButton.js";
+import genContentStyle from "./content.js";
+import genFooterStyle from "./footer.js";
+import genHeaderStyle from "./header.js";
+import genLogoStyle from "./logo.js";
+import genMenuStyle from "./menu.js";
+import genSearchStyle from "./search.js";
+import genSiderStyle from "./sider.js";
+import genTabsStyle from "./tabs.js";
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
 //#region src/style/index.ts
-function iconStyle(token) {
-	return {
-		paddingInline: 6,
-		paddingBlock: 6,
-		lineHeight: "16px",
-		fontSize: 14,
-		cursor: "pointer",
-		color: token.layout?.header?.colorTextRightActionsItem,
-		borderRadius: token.borderRadius,
-		transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
-		"&:hover": {
-			color: token.layout?.header?.colorTextRightActionsItemHover,
-			backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
-		}
-	};
-}
-const compatibleStyle = (token) => {
+/** ProLayout 根样式：布局容器 */
+const genRootStyle = (token) => {
 	return { [token.componentCls]: {
 		display: "flex",
 		flexDirection: "column",
-		width: "100%",
-		minHeight: "100vh"
+		minHeight: "100vh",
+		height: "100%",
+		backgroundColor: "transparent",
+		[`${token.componentCls}-bg-list`]: {
+			pointerEvents: "none",
+			position: "fixed",
+			overflow: "hidden",
+			insetBlockStart: 0,
+			insetInlineStart: 0,
+			zIndex: 0,
+			height: "100%",
+			width: "100%",
+			background: token.colorBgLayout
+		},
+		[`${token.componentCls}-container`]: {
+			flex: 1,
+			width: "100%",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			minHeight: 0,
+			backgroundColor: "transparent"
+		},
+		"&-has-sider": { flexDirection: "row" }
 	} };
 };
-const genProLayoutStyle = (token) => {
-	const { layout } = getTokenLayoutTheme(token);
-	const pageContainerToken = token.layout?.pageContainer;
-	return {
-		[`${token.antCls}-layout`]: { background: "transparent !important" },
-		[token.componentCls]: {
-			[`${token.componentCls}-bg-list`]: {
-				pointerEvents: "none",
-				position: "fixed",
-				overflow: "hidden",
-				insetBlockStart: 0,
-				insetInlineStart: 0,
-				zIndex: 0,
-				height: "100%",
-				width: "100%",
-				background: token.layout?.bgLayout
-			},
-			[`${token.antCls}-menu-submenu-title`]: { [`${token.proComponentsCls}-menu-item-badge`]: { right: 40 } },
-			[`${token.componentCls}-container`]: {
-				position: "relative",
-				width: "100%",
-				display: "flex",
-				flexGrow: 1,
-				flexDirection: "column",
-				minWidth: 0,
-				minHeight: 0,
-				backgroundColor: "transparent",
-				[`&${token.componentCls}-container-has-silder`]: { margin: layout === "wide" ? pageContainerToken?.padding : 0 }
-			}
-		}
-	};
-};
-
+var style_default = proGenStyleHooks("ProLayout", (token) => [
+	genRootStyle(token),
+	genLogoStyle(token),
+	genCollapseButtonStyle(token),
+	genHeaderStyle(token),
+	genSearchStyle(token),
+	genBreadcrumbStyle(token),
+	genSiderStyle(token),
+	genMenuStyle(token),
+	genContentStyle(token),
+	genFooterStyle(token),
+	genTabsStyle(token)
+]);
 //#endregion
-export { compatibleStyle, genProLayoutStyle, iconStyle };
+export { style_default as default };

package/dist/style/logo.d.ts

@@ -0,0 +1,8 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/logo.d.ts
+declare const genLogoStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genLogoStyle as default };

package/dist/style/logo.js

@@ -0,0 +1,76 @@
+//#region src/style/logo.ts
+const genLogoStyle = (token) => {
+	return {
+		[`${token.componentCls}-sider-header ${token.componentCls}-logo`]: { borderBlockEnd: `1px solid ${token.siderColorMenuItemDivider}` },
+		[`${token.componentCls}-mix ${token.componentCls}-sider-header ${token.componentCls}-logo, ${token.componentCls}-wide ${token.componentCls}-sider-header ${token.componentCls}-logo`]: {
+			paddingBlock: 0,
+			paddingInline: 12,
+			height: "100%"
+		},
+		[`${token.componentCls}-logo`]: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			cursor: "pointer",
+			paddingInline: 12,
+			paddingBlock: 16,
+			color: token.colorText,
+			transition: `all ${token.motionDurationMid}`,
+			"> a": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				minHeight: 22,
+				fontSize: 22,
+				textDecoration: "none",
+				"> span > img": {
+					display: "inline-block",
+					height: 28,
+					verticalAlign: "middle"
+				},
+				"> img": {
+					display: "inline-block",
+					height: 28,
+					verticalAlign: "middle"
+				},
+				"> h1": {
+					display: "inline-block",
+					height: 22,
+					marginBlock: 0,
+					marginInlineEnd: 0,
+					marginInlineStart: 8,
+					color: token.siderColorTextMenuTitle,
+					fontWeight: 600,
+					fontSize: 16,
+					lineHeight: "22px",
+					verticalAlign: "middle",
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					opacity: 1,
+					transition: `opacity ${token.motionDurationMid}, width ${token.motionDurationMid}`
+				}
+			},
+			"&-collapsed": { justifyContent: "center" },
+			"&-mobile": {
+				borderBlockEnd: 0,
+				paddingInlineStart: 0
+			}
+		},
+		[`${token.componentCls}-side ${token.componentCls}-logo-collapsed, ${token.componentCls}-mix ${token.componentCls}-logo-collapsed, ${token.componentCls}-wide ${token.componentCls}-logo-collapsed`]: {
+			paddingInline: 0,
+			paddingBlock: 16
+		},
+		[`${token.componentCls}-top ${token.componentCls}-header ${token.componentCls}-logo, ${token.componentCls}-mix ${token.componentCls}-header ${token.componentCls}-logo, ${token.componentCls}-wide ${token.componentCls}-header ${token.componentCls}-logo`]: {
+			paddingInline: 0,
+			paddingBlock: 0,
+			borderBlockEnd: 0,
+			"> a": {
+				justifyContent: "flex-start",
+				width: "auto"
+			}
+		}
+	};
+};
+//#endregion
+export { genLogoStyle as default };

package/dist/style/menu.d.ts

@@ -0,0 +1,15 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/menu.d.ts
+/**
+ * ProMenu 结构样式 —— 颜色/背景/选中/hover 由 ProMenu 内层 ConfigProvider 的
+ * `components.Menu` token 负责，这里只补 antdv 未 token 化的结构/尺寸。
+ *
+ * 全部置于父级 `${componentCls}` 下命中 `${antCls}-menu`，靠 (0,2,0) 压过 antdv 的
+ * 零特异性 `:where()`；popup 走 portal 不在 `.pro-layout` 内，单独用 `-menu-popup` 类命中。
+ */
+declare const genMenuStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genMenuStyle as default };

package/dist/style/menu.js

@@ -0,0 +1,49 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/style/menu.ts
+/**
+* ProMenu 结构样式 —— 颜色/背景/选中/hover 由 ProMenu 内层 ConfigProvider 的
+* `components.Menu` token 负责，这里只补 antdv 未 token 化的结构/尺寸。
+*
+* 全部置于父级 `${componentCls}` 下命中 `${antCls}-menu`，靠 (0,2,0) 压过 antdv 的
+* 零特异性 `:where()`；popup 走 portal 不在 `.pro-layout` 内，单独用 `-menu-popup` 类命中。
+*/
+const genMenuStyle = (token) => {
+	const { componentCls, antCls, iconCls } = token;
+	const iconSize = unit(token.menuItemIconSize || token.fontSize);
+	return {
+		[`${componentCls} ${antCls}-menu${antCls}-menu-root`]: {
+			background: "transparent",
+			[`&${antCls}-menu-inline,&${antCls}-menu-vertical`]: { border: "none" },
+			"&::after": { display: "none" },
+			[`${antCls}-menu-title-content`]: {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			[`${antCls}-menu-item-icon, ${iconCls}`]: {
+				fontSize: iconSize,
+				verticalAlign: "middle"
+			},
+			[`${antCls}-menu-item-group-title`]: {
+				fontSize: 12,
+				color: token.colorTextLabel
+			},
+			[`&${antCls}-menu-inline-collapsed`]: { [`${antCls}-menu-item-icon`]: { marginInlineEnd: 0 } }
+		},
+		[`${componentCls}-menu-popup`]: {
+			WebkitBackdropFilter: "blur(8px)",
+			backdropFilter: "blur(8px)",
+			[`${antCls}-menu-title-content`]: {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			[`${antCls}-menu-item-icon, ${iconCls}`]: {
+				fontSize: iconSize,
+				verticalAlign: "middle"
+			}
+		}
+	};
+};
+//#endregion
+export { genMenuStyle as default };

package/dist/style/rightContent.d.ts

@@ -0,0 +1,12 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/style/rightContent.d.ts
+/**
+ * RightContent 操作区样式
+ * - 注册在 ProLayout 下，使用 ProLayout 扁平 token
+ */
+declare const genRightContentStyle: GenerateStyle<ProFullToken<'ProLayout'>, CSSObject>;
+//#endregion
+export { genRightContentStyle as default };