@antdv-vue/pro-layout 0.0.0-stage → 2.0.3

package/dist/components/SiderMenu/style/index.js

@@ -0,0 +1,301 @@
+import { useStyle as useStyle$1 } from "@antdv-vue/pro-provider";
+import { Keyframes, mergeToken, unit } from "@antdv-next/cssinjs";
+//#region src/components/SiderMenu/style/index.ts
+const proLayoutTitleHide = new Keyframes("proLayoutTitleHide", {
+	"0%": {
+		display: "none",
+		opacity: 0,
+		overflow: "hidden"
+	},
+	"80%": { overflow: "hidden" },
+	"100%": {
+		display: "unset",
+		opacity: 1
+	}
+});
+const genSiderMenuStyle = (token) => {
+	return {
+		[token.componentCls]: {
+			[`&${token.antCls}-layout-sider`]: {
+				zIndex: 10,
+				[`&${token.componentCls}-light`]: {
+					boxShadow: "2px 0 8px rgba(29, 35, 41, .05)",
+					[`&${token.componentCls}-mix`]: { zIndex: 9 },
+					[`& ${token.antCls}-layout-sider-children`]: {
+						"& ::-webkit-scrollbar-thumb": {
+							backgroundColor: "rgba(0,0,0,.12)",
+							borderRadius: 3,
+							boxShadow: "inset 0 0 5px rgba(0,21,41,.05)"
+						},
+						"& ::-webkit-scrollbar-track": {
+							backgroundColor: "rgba(0,0,0,.06)",
+							borderRadius: 3,
+							boxShadow: "inset 0 0 5px rgba(0,21,41,.05)"
+						}
+					}
+				},
+				[`&${token.componentCls}-dark`]: {
+					[`${token.componentCls}-logo`]: {
+						color: "rgba(255,255,255,0.85)",
+						"> a": { "> h1": { color: "rgba(255,255,255,0.85)" } },
+						[`${token.proComponentsCls}-layout-apps`]: { "&-icon": {
+							color: "rgba(255, 255, 255, 0.85)",
+							"&:hover": {
+								color: "rgba(255, 255, 255, 1)",
+								backgroundColor: "rgba(255,255,255, 0.05)"
+							},
+							"&-active": {
+								color: "rgba(255, 255, 255, 1)",
+								backgroundColor: "rgba(255,255,255, 0.05)"
+							}
+						} }
+					},
+					[`${token.componentCls}-actions`]: { color: "rgba(255,255,255,0.85)" }
+				}
+			},
+			[`& ${token.antCls}-layout-sider-children`]: {
+				display: "flex",
+				flexDirection: "column",
+				height: "100%",
+				"& ::-webkit-scrollbar": {
+					width: 6,
+					height: 6
+				},
+				"& ::-webkit-scrollbar-thumb": {
+					backgroundColor: "rgba(255,255,255,0.2)",
+					borderRadius: 3,
+					boxShadow: "inset 0 0 5px rgba(255,255,255,.05)"
+				},
+				"& ::-webkit-scrollbar-track": {
+					backgroundColor: "rgba(255,255,255,0.15)",
+					borderRadius: 3,
+					boxShadow: "inset 0 0 5px rgba(37,37,37,.05)"
+				},
+				[`${token.componentCls}-collapsed-button`]: { [`& ${token.antCls}-menu-light`]: { borderInlineEnd: "none" } }
+			},
+			"&-logo": {
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				paddingInline: 8,
+				paddingBlock: 16,
+				color: token.proLayoutSiderColorTextMenu,
+				cursor: "pointer",
+				"> a": {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					minHeight: 32,
+					fontSize: 32,
+					"> img": {
+						display: "inline-block",
+						height: 32,
+						verticalAlign: "middle",
+						transition: "height 0.2s"
+					},
+					"> svg": { fontSize: 32 },
+					"> img + h1, > svg+ h1": { marginInlineStart: 10 },
+					"> h1": {
+						display: "inline-block",
+						height: 32,
+						marginBlock: 0,
+						marginInlineEnd: 0,
+						color: token.proLayoutSiderColorTextMenuTitle,
+						animationName: proLayoutTitleHide,
+						animationDuration: ".4s",
+						animationTimingFunction: "ease",
+						fontWeight: 600,
+						fontSize: 18,
+						lineHeight: "32px",
+						verticalAlign: "middle"
+					}
+				},
+				"&-collapsed": {
+					flexDirection: "column-reverse",
+					margin: 0,
+					padding: 12,
+					[`${token.proComponentsCls}-layout-apps-icon`]: {
+						marginBlockEnd: 8,
+						fontSize: 16,
+						transition: "font-size 0.2s ease-in-out,color 0.2s ease-in-out"
+					}
+				}
+			},
+			"&-actions": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				marginBlock: 4,
+				marginInline: 0,
+				color: token.proLayoutSiderColorTextMenu,
+				"&-collapsed": {
+					flexDirection: "column-reverse",
+					paddingBlock: 0,
+					paddingInline: 8,
+					fontSize: 16,
+					transition: "font-size 0.3s ease-in-out"
+				},
+				"&-list": {
+					color: token.proLayoutSiderColorTextMenuSecondary,
+					"&-collapsed": {
+						marginBlockEnd: 8,
+						animationName: "none"
+					},
+					"&-item": {
+						paddingInline: 6,
+						paddingBlock: 6,
+						lineHeight: "16px",
+						fontSize: 16,
+						cursor: "pointer",
+						borderRadius: token.borderRadius,
+						"&:hover": { background: token.colorBgTextHover }
+					}
+				},
+				"&-avatar": {
+					fontSize: 14,
+					paddingInline: 8,
+					paddingBlock: 8,
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					borderRadius: token.borderRadius,
+					"& *": { cursor: "pointer" },
+					"&:hover": { background: token.colorBgTextHover }
+				}
+			},
+			"&-extra": {
+				marginBlockEnd: 16,
+				marginBlock: 0,
+				marginInline: 16,
+				"&-no-logo": { marginBlockStart: 16 }
+			},
+			"&-links": { width: "100%" },
+			"&-footer": {
+				color: token.proLayoutSiderColorTextMenuSecondary,
+				paddingBlockEnd: 16,
+				fontSize: token.fontSize,
+				animationName: proLayoutTitleHide,
+				animationDuration: ".3s",
+				animationTimingFunction: "ease"
+			},
+			[`&&-mix${token.antCls}-layout-sider`]: { insetBlockStart: token.proLayoutHeaderHeightLayoutHeader || 56 },
+			"&&-left": {
+				[`${token.componentCls}-left-container`]: {
+					display: "flex",
+					height: "100%"
+				},
+				[`${token.componentCls}-left-rail`]: {
+					flex: `0 0 ${token.calc(token.proLayoutFirstMenuWidth || 80).equal()}`,
+					width: token.proLayoutFirstMenuWidth || 80,
+					borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+					[`${token.componentCls}-left-logo`]: {
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						paddingInline: 8,
+						paddingBlock: 16,
+						"> img": {
+							display: "inline-block",
+							height: 32,
+							verticalAlign: "middle",
+							transition: "height 0.2s"
+						},
+						"> svg": { fontSize: 32 }
+					},
+					[`${token.antCls}-menu-light${token.antCls}-menu-root`]: { borderInlineEnd: "none" },
+					[`${token.antCls}-menu`]: {
+						"&-item": {
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							justifyContent: "center",
+							padding: 0,
+							height: token.calc(token.controlHeightLG).mul(1.5).equal(),
+							lineHeight: token.lineHeight,
+							marginInline: token.marginXS,
+							width: token.calc("100%").sub(token.calc(token.margin).equal()).equal({ unit: false }),
+							[`${token.iconCls}`]: { fontSize: token.fontSizeXL }
+						},
+						"&-title-content": {
+							marginInlineStart: 0,
+							paddingBlockStart: token.paddingXS,
+							fontSize: token.fontSizeSM
+						}
+					}
+				},
+				[`${token.componentCls}-left-menu`]: {
+					flex: 1,
+					display: "flex",
+					boxShadow: "2px 0 8px rgba(29, 35, 41, .05)",
+					"&-realDark": { boxShadow: "2px 0 8px  rgba(13,13,13, 0.65)" },
+					[`${token.componentCls}-logo-title`]: {
+						position: "relative",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						paddingInline: token.padding,
+						paddingBlock: token.padding,
+						color: token.proLayoutSiderColorTextMenuTitle,
+						cursor: "pointer",
+						"> a": {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							minHeight: 32,
+							fontSize: 32,
+							"> h1": {
+								display: "inline-block",
+								height: 32,
+								marginBlock: 0,
+								color: token.proLayoutSiderColorTextMenuTitle,
+								animationName: proLayoutTitleHide,
+								animationDuration: ".4s",
+								animationTimingFunction: "ease",
+								fontWeight: 600,
+								fontSize: 18,
+								lineHeight: "32px",
+								verticalAlign: "middle"
+							}
+						}
+					},
+					[`${token.componentCls}-menu`]: { paddingInline: token.paddingXXS }
+				}
+			},
+			"&&-mix": {
+				[`&${token.componentCls}-mix`]: { zIndex: 9 },
+				[`&${token.componentCls}-realDark`]: { boxShadow: " 0 2px 8px #0d0d0da6" },
+				[`& ${token.antCls}-layout-sider-children`]: {
+					"& ::-webkit-scrollbar-thumb": {
+						backgroundColor: "rgba(0,0,0,.12)",
+						borderRadius: 3,
+						boxShadow: "inset 0 0 5px rgba(0,21,41,.05)"
+					},
+					"& ::-webkit-scrollbar-track": {
+						backgroundColor: "rgba(0,0,0,.06)",
+						borderRadius: 3,
+						boxShadow: "inset 0 0 5px rgba(0,21,41,.05)"
+					}
+				}
+			}
+		},
+		[`${token.componentCls}${token.componentCls}-fixed`]: {
+			position: "fixed",
+			insetBlockStart: 0,
+			insetInlineStart: 0,
+			zIndex: 99,
+			height: "100%",
+			"&-mix": { height: token.calc("100%").sub(token.proLayoutHeaderHeightLayoutHeader || 56).equal() }
+		}
+	};
+};
+function useStyle(prefixCls, { proLayoutCollapsedWidth, proLayoutFirstMenuWidth }) {
+	return useStyle$1("ProLayoutSiderMenu", (token) => {
+		return [genSiderMenuStyle(mergeToken(token, {
+			proLayoutCollapsedWidth,
+			proLayoutFirstMenuWidth
+		}))];
+	})(prefixCls);
+}
+//#endregion
+export { proLayoutTitleHide, useStyle };

package/dist/components/SiderMenu/style/menu.d.ts

@@ -0,0 +1,10 @@
+import * as _$vue from "vue";
+import { ComputedRef } from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+import { MenuProps } from "antdv-next";
+
+//#region src/components/SiderMenu/style/menu.d.ts
+interface ProLayoutBaseMenuToken extends ProAliasCssVarToken {}
+declare function useStyle(prefixCls: ComputedRef<string>, mode?: MenuProps['mode']): readonly [_$vue.Ref<string, string>, ComputedRef<string | undefined>];
+//#endregion
+export { ProLayoutBaseMenuToken, useStyle };

package/dist/components/SiderMenu/style/menu.js

@@ -0,0 +1,23 @@
+import { useStyle as useStyle$1 } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/SiderMenu/style/menu.ts
+const genProLayoutBaseMenuStyle = (token, mode) => {
+	return {
+		[`${token.componentCls}${token.antCls}-menu`]: {
+			[`${token.antCls}-menu-item-group`]: { "&-title": {
+				paddingInlineStart: 8,
+				[`${token.iconCls}`]: { marginInlineEnd: 10 }
+			} },
+			[`${token.antCls}-menu-title-content`]: { "&>*": { display: "inline-block" } }
+		},
+		[`${token.proComponentsCls}-drawer-sider`]: { [`${token.componentCls}${token.proComponentsCls}-sider-menu${token.antCls}-menu-light${token.antCls}-menu-root`]: { borderInlineEnd: "none" } },
+		...mode?.includes("horizontal") ? { [`${token.componentCls}${token.antCls}-menu-light`]: { borderBlockEnd: "none" } } : { [`${token.componentCls}${token.proComponentsCls}-sider-menu${token.antCls}-menu-light${token.antCls}-menu-root`]: { borderInlineEnd: "none" } }
+	};
+};
+function useStyle(prefixCls, mode) {
+	return useStyle$1(`ProLayoutBaseMenu${(mode || "inline").charAt(0).toUpperCase()}${(mode || "inline").slice(1)}`, (token) => {
+		return [genProLayoutBaseMenuStyle(mergeToken(token, {}), mode || "inline")];
+	})(prefixCls);
+}
+//#endregion
+export { useStyle };

package/dist/components/SiderMenu/style/stylish.d.ts

@@ -0,0 +1,20 @@
+import * as _$vue from "vue";
+import { ComputedRef } from "vue";
+import { GenerateStyle, ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/SiderMenu/style/stylish.d.ts
+interface SiderMenuToken extends ProAliasCssVarToken {
+  proLayoutCollapsedWidth: number;
+  proLayoutFirstMenuWidth?: number;
+}
+declare function useStylish(prefixCls: ComputedRef<string>, {
+  stylish,
+  proLayoutCollapsedWidth,
+  proLayoutFirstMenuWidth
+}: {
+  stylish?: GenerateStyle<SiderMenuToken>;
+  proLayoutCollapsedWidth: number;
+  proLayoutFirstMenuWidth?: number;
+}): readonly [_$vue.Ref<string, string>, ComputedRef<string | undefined>];
+//#endregion
+export { SiderMenuToken, useStylish };

package/dist/components/SiderMenu/style/stylish.js

@@ -0,0 +1,15 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/SiderMenu/style/stylish.ts
+function useStylish(prefixCls, { stylish, proLayoutCollapsedWidth, proLayoutFirstMenuWidth }) {
+	return useStyle("ProLayoutSiderMenuStylish", (token) => {
+		const siderMenuToken = mergeToken(token, {
+			proLayoutCollapsedWidth,
+			proLayoutFirstMenuWidth
+		});
+		if (!stylish) return [];
+		return [{ [`${token.proComponentsCls}-basicLayout`]: { [`${siderMenuToken.componentCls}`]: stylish?.(siderMenuToken) } }];
+	})(prefixCls);
+}
+//#endregion
+export { useStylish };

package/dist/components/TopNavHeader/index.d.ts

@@ -0,0 +1,86 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { AppItemProps, AppListProps } from "../AppsLogoComponents/typing.js";
+import { MenuDataItem, MessageDescriptor, RouterTypes } from "../../typing.js";
+import { AvatarPropsType } from "../GlobalHeader/ActionsContent.js";
+import { PrivateSiderMenuProps, SiderMenuProps } from "../SiderMenu/SiderMenu.js";
+import { GlobalHeaderProps } from "../GlobalHeader/index.js";
+import { ActionsRender, AppListRender, CollapsedButtonRender, HeaderContentRender, HeaderRender, HeaderTitleRender, MenuContentRender, MenuExtraRender, MenuFooterRender, MenuHeaderRender, MenuItemRender, MenuRender, SlotsRenderType, SubMenuItemRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import * as _$_antdv_vue_pro_provider0 from "@antdv-vue/pro-provider";
+import * as _$_antdv_vue_pro_utils0 from "@antdv-vue/pro-utils";
+import * as _$antdv_next0 from "antdv-next";
+import * as _$antdv_next_dist__util_type0 from "antdv-next/dist/_util/type";
+import { CustomSlotsType, VueNode as VueNode$2 } from "@v-c/util/dist/type";
+import * as _$antdv_next_dist_menu_index0 from "antdv-next/dist/menu/index";
+import * as _$antdv_next_dist__util_responsiveObserver0 from "antdv-next/dist/_util/responsiveObserver";
+import * as _$antdv_next_dist_layout_Sider0 from "antdv-next/dist/layout/Sider";
+
+//#region src/components/TopNavHeader/index.d.ts
+type TopNavHeaderProps = PrivateSiderMenuProps & SiderMenuProps & GlobalHeaderProps;
+declare const TopNavHeader: _$vue.DefineSetupFnComponent<TopNavHeaderProps, {}, CustomSlotsType<Pick<SlotsRenderType, "menuItemRender" | "subMenuItemRender" | "appListRender" | "menuHeaderRender" | "actionsRender" | "headerRender" | "menuRender" | "headerTitleRender" | "headerContentRender"> & {
+  default: () => VueNode$2[];
+}>, PrivateSiderMenuProps & {
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  isMobile?: boolean;
+  onOpenChange?: (openKeys?: _$_antdv_vue_pro_utils0.Key[] | false) => void;
+  menuData?: MenuDataItem[];
+  onCollapse?: (collapsed: boolean) => void;
+  openKeys?: string[] | false;
+  mode?: _$antdv_next0.MenuProps["mode"];
+  menuProps?: _$antdv_next0.MenuProps;
+  menuItemRender?: MenuItemRender | false;
+  subMenuItemRender?: SubMenuItemRender | false;
+  iconPrefixes?: string;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  postMenuData?: (menusData?: MenuDataItem[]) => MenuDataItem[];
+  onSelect?: (selectedKeys: _$_antdv_vue_pro_utils0.Key[]) => void;
+} & Partial<RouterTypes> & Omit<_$antdv_next_dist_menu_index0.InternalMenuProps, "openKeys" | "onOpenChange" | "title"> & Partial<PureSettings> & {
+  collapsedWidth?: number;
+  firstMenuWidth?: number;
+  theme?: _$antdv_next_dist_layout_Sider0.SiderProps["theme"];
+  logo?: _$antdv_next_dist__util_type0.VueNode;
+  appList?: AppListProps;
+  appListRender?: AppListRender | false;
+  itemClick?: (item: AppItemProps, popoverRef: _$vue.ShallowRef<HTMLSpanElement | null>) => void;
+  links?: ({
+    icon?: _$vue.VNode;
+    title?: string;
+    label?: _$vue.VNode;
+  }[] | VueNode$2[]) | false;
+  siderWidth?: number;
+  menuHeaderRender?: MenuHeaderRender | false;
+  menuContentRender?: MenuContentRender | false;
+  menuFooterRender?: MenuFooterRender | false;
+  collapsedButtonRender?: CollapsedButtonRender | false;
+  siderProps?: _$antdv_next_dist_layout_Sider0.SiderProps;
+  breakpoint?: _$antdv_next_dist__util_responsiveObserver0.Breakpoint | false;
+  avatarProps?: AvatarPropsType;
+  actionsRender?: ActionsRender | false;
+  menuExtraRender?: MenuExtraRender | false;
+  onMenuHeaderClick?: (e: _$vue.Events["onClick"]) => void;
+  logoStyle?: _$vue.CSSProperties;
+  headerRender?: HeaderRender | false;
+} & {
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  isMobile?: boolean;
+  logo?: _$antdv_next_dist__util_type0.VueNode;
+  menuRender?: MenuRender | false;
+  menuProps?: _$antdv_next0.MenuProps;
+  prefixCls?: string;
+  appList?: AppListProps;
+  itemClick?: (item: AppItemProps, popoverRef: _$vue.ShallowRef<HTMLSpanElement | null>) => void;
+  menuData?: MenuDataItem[];
+  onMenuHeaderClick?: (e: _$vue.Events["onClick"]) => void;
+  menuHeaderRender?: MenuHeaderRender | false;
+  headerTitleRender?: HeaderTitleRender | false;
+  token?: _$_antdv_vue_pro_provider0.ProTokenType["layout"];
+  headerContentRender?: HeaderContentRender | false;
+  actionsRender?: ActionsRender | false;
+  avatarProps?: AvatarPropsType;
+  formatMessage?: (message: MessageDescriptor) => string | undefined;
+  appListRender?: AppListRender | false;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { TopNavHeaderProps, TopNavHeader as default };