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

package/dist/components/TopNavHeader/index.js

@@ -0,0 +1,536 @@
+import AppsLogoComponents from "../AppsLogoComponents/index.js";
+import BaseMenu from "../SiderMenu/BaseMenu.js";
+import { renderLogoAndTitle } from "../SiderMenu/SiderMenu.js";
+import ActionsContent from "../GlobalHeader/ActionsContent.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { getSlot } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { ConfigProvider } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/components/TopNavHeader/index.tsx
+const TopNavHeader = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => `${props.prefixCls || config.value.getPrefixCls("pro")}`);
+	const baseClassName = computed(() => `${prefixCls.value}-top-nav-header`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const headerDom = computed(() => {
+		let renderKey;
+		const menuHeaderRender = getSlot(slots, props, "menuHeaderRender");
+		const headerTitleRender = getSlot(slots, props, "headerTitleRender");
+		if (menuHeaderRender !== void 0) renderKey = "menuHeaderRender";
+		else if (props.layout === "mix" || props.layout === "top") renderKey = "headerTitleRender";
+		return renderLogoAndTitle({
+			...props,
+			menuHeaderRender,
+			headerTitleRender,
+			collapsed: false
+		}, renderKey);
+	});
+	const contentDom = computed(() => {
+		const menuItemRender = getSlot(slots, props, "menuItemRender");
+		const subMenuItemRender = getSlot(slots, props, "subMenuItemRender");
+		const defaultDom = createVNode(ConfigProvider, null, { default: () => [createVNode(BaseMenu, mergeProps(props, {
+			"menuItemRender": menuItemRender,
+			"subMenuItemRender": subMenuItemRender,
+			"class": `${baseClassName.value}-base-menu`,
+			"theme": props.navTheme !== "realDark" ? props.navTheme : "dark",
+			"collapsed": false,
+			"menuRenderType": "header",
+			"mode": "horizontal"
+		}), null)] });
+		if (props.headerContentRender) return props.headerContentRender({
+			props: {
+				...props,
+				menuItemRender,
+				subMenuItemRender
+			},
+			dom: defaultDom
+		});
+		return defaultDom;
+	});
+	return () => {
+		const { contentWidth, layout, onMenuHeaderClick, navTheme, avatarProps } = props;
+		const actionsRender = getSlot(slots, props, "actionsRender");
+		const appListRender = getSlot(slots, props, "appListRender");
+		return createVNode("div", {
+			"class": classNames(baseClassName.value, hashId?.value, cssVarCls?.value, attrs.class, { [`${baseClassName.value}-${navTheme}`]: true }),
+			"style": attrs.style
+		}, [createVNode("div", { "class": classNames(`${baseClassName.value}-main`, hashId?.value, cssVarCls?.value, { [`${baseClassName.value}-wide`]: contentWidth === "Fixed" && layout === "top" }) }, [
+			headerDom.value && createVNode("div", {
+				"class": classNames(`${baseClassName.value}-main-left`, hashId?.value, cssVarCls?.value),
+				"onClick": onMenuHeaderClick
+			}, [createVNode(AppsLogoComponents, mergeProps(props, { "appListRender": appListRender }), null), createVNode("div", {
+				"class": classNames(`${baseClassName.value}-logo`, hashId?.value, cssVarCls?.value),
+				"key": "logo",
+				"id": "logo"
+			}, [headerDom.value])]),
+			createVNode("div", {
+				"style": { flex: 1 },
+				"class": classNames(`${baseClassName.value}-menu`, hashId?.value, cssVarCls?.value)
+			}, [contentDom.value]),
+			(actionsRender || avatarProps) && createVNode(ActionsContent, mergeProps(props, {
+				"actionsRender": actionsRender,
+				"prefixCls": baseClassName.value
+			}), null)
+		])]);
+	};
+}, {
+	props: {
+		matchMenuKeys: {
+			type: Array,
+			required: false
+		},
+		originCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menuRenderType: {
+			type: String,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		isMobile: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onOpenChange: {
+			type: Function,
+			required: false
+		},
+		menuData: {
+			type: Array,
+			required: false
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		openKeys: {
+			type: [Array, Boolean],
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: void 0,
+			required: false
+		},
+		menuProps: {
+			type: Object,
+			required: false
+		},
+		menuItemRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		subMenuItemRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		iconPrefixes: {
+			type: String,
+			required: false
+		},
+		formatMessage: {
+			type: Function,
+			required: false
+		},
+		postMenuData: {
+			type: Function,
+			required: false
+		},
+		onSelect: {
+			type: Function,
+			required: false
+		},
+		route: {
+			type: Object,
+			required: false
+		},
+		location: {
+			type: Object,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		},
+		inlineIndent: {
+			type: Number,
+			required: false
+		},
+		tooltip: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		_internalDisableMenuItemTitleTooltip: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		extraRender: {
+			type: Function,
+			required: false
+		},
+		iconRender: {
+			type: Function,
+			required: false
+		},
+		itemIcon: {
+			type: Function,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabledOverflow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		inlineCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultOpenKeys: {
+			type: Array,
+			required: false
+		},
+		selectable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultSelectedKeys: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		motion: {
+			type: Object,
+			required: false
+		},
+		defaultMotions: {
+			type: Object,
+			required: false
+		},
+		subMenuOpenDelay: {
+			type: Number,
+			required: false
+		},
+		subMenuCloseDelay: {
+			type: Number,
+			required: false
+		},
+		forceSubMenuRender: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		triggerSubMenuAction: { required: false },
+		builtinPlacements: { required: false },
+		expandIcon: { required: false },
+		overflowedIndicator: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		overflowedIndicatorPopupClassName: {
+			type: String,
+			required: false
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		_internalRenderMenuItem: {
+			type: Function,
+			required: false
+		},
+		_internalRenderSubMenuItem: {
+			type: Function,
+			required: false
+		},
+		popupRender: { required: false },
+		id: {
+			type: String,
+			required: false
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		onDeselect: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:openKeys": {
+			type: Function,
+			required: false
+		},
+		"onUpdate:selectedKeys": {
+			type: Function,
+			required: false
+		},
+		navTheme: {
+			type: String,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		contentWidth: {
+			type: String,
+			required: false
+		},
+		compact: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedSiderbar: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		title: {
+			type: [String, Boolean],
+			required: false,
+			default: void 0
+		},
+		iconfontUrl: {
+			type: String,
+			required: false
+		},
+		colorPrimary: {
+			type: String,
+			required: false
+		},
+		colorWeak: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		splitMenus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		suppressSiderWhenMenuEmpty: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		siderMenuType: {
+			type: String,
+			required: false
+		},
+		fixedMultiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsedWidth: {
+			type: Number,
+			required: false
+		},
+		firstMenuWidth: {
+			type: Number,
+			required: false
+		},
+		logo: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		appList: {
+			type: Array,
+			required: false
+		},
+		appListRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		itemClick: {
+			type: Function,
+			required: false
+		},
+		links: {
+			type: [Array, Boolean],
+			required: false,
+			default: void 0
+		},
+		siderWidth: {
+			type: Number,
+			required: false
+		},
+		menuHeaderRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuContentRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuFooterRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		collapsedButtonRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		siderProps: {
+			type: Object,
+			required: false
+		},
+		breakpoint: {
+			type: [String, Boolean],
+			required: false,
+			default: void 0
+		},
+		avatarProps: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		actionsRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuExtraRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		onMenuHeaderClick: {
+			type: Function,
+			required: false
+		},
+		logoStyle: {
+			type: Object,
+			required: false
+		},
+		headerRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		headerTitleRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		token: {
+			type: Object,
+			required: false
+		},
+		headerContentRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "TopNavHeader",
+	inheritAttrs: false
+});
+//#endregion
+export { TopNavHeader as default };

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

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/TopNavHeader/style/index.d.ts
+interface TopNavHeaderToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { TopNavHeaderToken, _default as default };

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

@@ -0,0 +1,71 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/TopNavHeader/style/index.ts
+const genTopNavHeaderStyle = (token) => {
+	return { [token.componentCls]: {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		"&-light": {
+			backgroundColor: token.proLayoutHeaderColorBgHeader || token.colorBgContainer,
+			boxShadow: "0 1px 4px rgba(0,21,41,.08)"
+		},
+		"&-dark": {
+			backgroundColor: "inherit",
+			[`${token.componentCls}-logo`]: { "> *:first-child > h1": { color: "rgba(255,255,255,0.85)" } }
+		},
+		".anticon": { color: "inherit" },
+		"&-main": {
+			display: "flex",
+			height: "100%",
+			paddingInlineStart: 16,
+			"&-left": {
+				display: "flex",
+				alignItems: "center",
+				[`${token.proComponentsCls}-layout-apps-icon`]: { marginInlineEnd: 16 }
+			}
+		},
+		"&-wide": {
+			maxWidth: 1152,
+			margin: "0 auto"
+		},
+		"&-logo": {
+			position: "relative",
+			display: "flex",
+			height: "100%",
+			alignItems: "center",
+			overflow: "hidden",
+			"> *:first-child": {
+				display: "flex",
+				alignItems: "center",
+				minHeight: 32,
+				fontSize: 32
+			},
+			"> *:first-child > img": {
+				display: "inline-block",
+				height: 32,
+				verticalAlign: "middle"
+			},
+			"> *:first-child > h1": {
+				display: "inline-block",
+				marginBlock: 0,
+				marginInline: 0,
+				lineHeight: "24px",
+				marginInlineStart: 12,
+				fontWeight: 600,
+				fontSize: 16,
+				color: token.proLayoutHeaderColorHeaderTitle,
+				verticalAlign: "top"
+			}
+		},
+		"&-menu": {
+			minWidth: 0,
+			paddingInlineStart: 60
+		}
+	} };
+};
+var style_default = useStyle("ProTopNavHeader", (token) => {
+	return [genTopNavHeaderStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };

package/dist/context/RouteContext.d.ts

@@ -0,0 +1,39 @@
+import { PureSettings } from "../defaultSettings.js";
+import { MenuDataItem } from "../typing.js";
+import { LayoutBreadcrumbProps } from "../ProLayout.js";
+import { BreadcrumbListReturn } from "../utils/getBreadcrumbProps.js";
+import { InjectionKey, Ref } from "vue";
+import { BreadcrumbProps, WatermarkProps } from "antdv-next";
+
+//#region src/context/RouteContext.d.ts
+type RouteContextType = {
+  breadcrumb?: BreadcrumbListReturn;
+  menuData?: MenuDataItem[];
+  isMobile?: boolean;
+  prefixCls?: string;
+  collapsed?: boolean;
+  siderWidth?: number;
+  isChildrenLayout?: boolean;
+  hasSiderMenu?: boolean;
+  hasHeader?: boolean;
+  hasFooter?: boolean;
+  hasFooterToolbar?: boolean;
+  setHasFooterToolbar?: (val: boolean) => void;
+  hasPageContainer?: number;
+  setHasPageContainer?: (val: number) => void;
+  pageTitleInfo?: {
+    title: string;
+    id: string;
+    pageName: string;
+  };
+  matchMenus?: MenuDataItem[];
+  matchMenuKeys?: string[];
+  currentMenu?: PureSettings & MenuDataItem; /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
+  breadcrumbProps?: Omit<BreadcrumbProps, 'itemRender'> & LayoutBreadcrumbProps;
+  waterMarkProps?: WatermarkProps;
+} & PureSettings;
+declare const routeContextKey: InjectionKey<Ref<RouteContextType>>;
+declare function useRouteContextProvider(props: Ref<RouteContextType>): void;
+declare const useRouteContext: () => Ref<RouteContextType, RouteContextType>;
+//#endregion
+export { RouteContextType, routeContextKey, useRouteContext, useRouteContextProvider };

package/dist/context/RouteContext.js

@@ -0,0 +1,9 @@
+import { inject, provide, ref } from "vue";
+//#region src/context/RouteContext.ts
+const routeContextKey = Symbol("routeContext");
+function useRouteContextProvider(props) {
+	return provide(routeContextKey, props);
+}
+const useRouteContext = () => inject(routeContextKey, ref({}));
+//#endregion
+export { routeContextKey, useRouteContext, useRouteContextProvider };