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

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

@@ -0,0 +1,17 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/GridContent/style/index.ts
+const genGridContentStyle = (token) => {
+	return { [token.componentCls]: {
+		width: "100%",
+		"&-wide": {
+			maxWidth: 1152,
+			margin: "0 auto"
+		}
+	} };
+};
+var style_default = useStyle("ProLayoutGridContent", (token) => {
+	return [genGridContentStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };

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

@@ -0,0 +1,106 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { AppItemProps, AppListProps } from "../AppsLogoComponents/typing.js";
+import { MenuDataItem, MessageDescriptor } from "../../typing.js";
+import { AvatarPropsType } from "../GlobalHeader/ActionsContent.js";
+import { PrivateSiderMenuProps } from "../SiderMenu/SiderMenu.js";
+import { GlobalHeaderProps } from "../GlobalHeader/index.js";
+import { ActionsRender, AppListRender, HeaderContentRender, HeaderRender, HeaderTitleRender, MenuHeaderRender, MenuItemRender, MenuRender, SlotsRenderType } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import * as _$_antdv_vue_pro_provider0 from "@antdv-vue/pro-provider";
+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$1 } from "@v-c/util/dist/type";
+
+//#region src/components/Header/index.d.ts
+type HeaderViewProps = {
+  headerRender?: HeaderRender | false;
+  selectedKeys?: string[];
+  openKeys?: string[] | false;
+  collapsedWidth?: number;
+  /**
+   * @name location 当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性
+   */
+  location?: {
+    path?: string;
+  };
+  menuItemRender?: MenuItemRender | false;
+  siderWidth?: number;
+  firstMenuWidth?: number;
+} & GlobalHeaderProps;
+declare const HeaderView: _$vue.DefineSetupFnComponent<{
+  headerRender?: HeaderRender | false;
+  selectedKeys?: string[];
+  openKeys?: string[] | false;
+  collapsedWidth?: number;
+  /**
+   * @name location 当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性
+   */
+  location?: {
+    path?: string;
+  };
+  menuItemRender?: MenuItemRender | false;
+  siderWidth?: number;
+  firstMenuWidth?: number;
+} & {
+  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;
+} & Partial<PureSettings> & PrivateSiderMenuProps & {
+  hasSiderMenu?: boolean;
+}, {}, CustomSlotsType<Pick<SlotsRenderType, "menuItemRender" | "appListRender" | "menuHeaderRender" | "actionsRender" | "headerRender" | "menuRender" | "headerTitleRender" | "headerContentRender"> & {
+  default: () => VueNode$1[];
+}>, {
+  headerRender?: HeaderRender | false;
+  selectedKeys?: string[];
+  openKeys?: string[] | false;
+  collapsedWidth?: number;
+  /**
+   * @name location 当前应用会话的位置信息。如果你的应用创建了自定义的 history，则需要显示指定 location 属性
+   */
+  location?: {
+    path?: string;
+  };
+  menuItemRender?: MenuItemRender | false;
+  siderWidth?: number;
+  firstMenuWidth?: number;
+} & {
+  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;
+} & Partial<PureSettings> & PrivateSiderMenuProps & {
+  hasSiderMenu?: boolean;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { HeaderViewProps, HeaderView as default };

package/dist/components/Header/index.js

@@ -0,0 +1,330 @@
+import { clearMenuItem } from "../../utils/index.js";
+import { getSiderMenuWidth } from "../../utils/siderWidth.js";
+import TopNavHeader from "../TopNavHeader/index.js";
+import GlobalHeader from "../GlobalHeader/index.js";
+import header_default from "./style/header.js";
+import { useStylish } from "./style/stylish.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { getSlot } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { LayoutHeader } from "antdv-next";
+//#region src/components/Header/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const HeaderView = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const proProvide = useProConfig();
+	const baseClassName = computed(() => `${props.prefixCls}-layout-header`);
+	const needFixedHeader = computed(() => props.fixedHeader || props.layout === "mix");
+	const [hashId, cssVarCls] = header_default(baseClassName);
+	const collapsedWidth = computed(() => props.collapsedWidth || 64);
+	const isTop = computed(() => props.layout === "top");
+	useStylish(computed(() => `${baseClassName.value}.${baseClassName.value}-stylish`), {
+		proLayoutCollapsedWidth: collapsedWidth,
+		stylish: computed(() => props.stylish)
+	});
+	const renderContent = () => {
+		const { onCollapse, menuData = [], isMobile } = props;
+		const clearMenuData = clearMenuItem(menuData || []);
+		const headerContentRender = getSlot(slots, props, "headerContentRender");
+		const headerRender = getSlot(slots, props, "headerRender");
+		const headerTitleRender = getSlot(slots, props, "headerTitleRender");
+		const menuRender = getSlot(slots, props, "menuRender");
+		const menuHeaderRender = getSlot(slots, props, "menuHeaderRender");
+		const actionsRender = getSlot(slots, props, "actionsRender");
+		const appListRender = getSlot(slots, props, "appListRender");
+		let defaultDom = createVNode(GlobalHeader, mergeProps(props, {
+			"headerContentRender": headerContentRender,
+			"menuRender": menuRender,
+			"menuHeaderRender": menuHeaderRender,
+			"actionsRender": actionsRender,
+			"appListRender": appListRender,
+			"headerTitleRender": headerTitleRender,
+			"onCollapse": props.onCollapse,
+			"menuData": clearMenuData
+		}), { default: () => [headerContentRender && headerContentRender({
+			props,
+			dom: null
+		})] });
+		if (isTop.value && !isMobile) defaultDom = createVNode(TopNavHeader, mergeProps(props, {
+			"headerContentRender": headerContentRender,
+			"menuRender": menuRender,
+			"menuHeaderRender": menuHeaderRender,
+			"actionsRender": actionsRender,
+			"appListRender": appListRender,
+			"headerTitleRender": headerTitleRender,
+			"mode": "horizontal",
+			"onCollapse": onCollapse,
+			"menuData": clearMenuData
+		}), null);
+		if (headerRender && typeof headerRender === "function") return headerRender({
+			props: {
+				...props,
+				headerContentRender,
+				menuRender,
+				menuHeaderRender,
+				actionsRender,
+				appListRender
+			},
+			dom: defaultDom
+		});
+		return defaultDom;
+	};
+	return () => {
+		let _slot;
+		const { layout, headerRender, hasSiderMenu, firstMenuWidth = 80, isMobile, collapsed, siderWidth = 256 } = props;
+		if (layout === "side" && headerRender === false) return null;
+		return createVNode(Fragment, null, [needFixedHeader.value && createVNode(LayoutHeader, { "style": {
+			...attrs.style || {},
+			height: `${proProvide.value.token.layout?.header?.heightLayoutHeader || 56}px`,
+			lineHeight: `${proProvide.value.token.layout?.header?.heightLayoutHeader || 56}px`,
+			background: "transparent"
+		} }, null), createVNode(LayoutHeader, {
+			"class": classNames(baseClassName.value, attrs.class, hashId?.value, cssVarCls?.value, {
+				[`${baseClassName.value}-fixed`]: needFixedHeader.value,
+				[`${baseClassName.value}-stylish`]: !!props.stylish
+			}),
+			"style": {
+				...attrs.style || {},
+				width: !needFixedHeader.value || !["side", "left"].includes(layout) || isMobile || !hasSiderMenu ? "100%" : `calc(100% - ${getSiderMenuWidth({
+					layout,
+					collapsed,
+					siderWidth,
+					collapsedWidth: collapsedWidth.value,
+					firstMenuWidth
+				})}px)`
+			}
+		}, _isSlot(_slot = renderContent()) ? _slot : { default: () => [_slot] })]);
+	};
+}, {
+	props: {
+		headerRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		openKeys: {
+			type: [Array, Boolean],
+			required: false,
+			default: void 0
+		},
+		collapsedWidth: {
+			type: Number,
+			required: false
+		},
+		location: {
+			type: Object,
+			required: false
+		},
+		menuItemRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		siderWidth: {
+			type: Number,
+			required: false
+		},
+		firstMenuWidth: {
+			type: Number,
+			required: false
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		isMobile: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		logo: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		menuRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuProps: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		appList: {
+			type: Array,
+			required: false
+		},
+		itemClick: {
+			type: Function,
+			required: false
+		},
+		menuData: {
+			type: Array,
+			required: false
+		},
+		onMenuHeaderClick: {
+			type: Function,
+			required: false
+		},
+		menuHeaderRender: {
+			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
+		},
+		actionsRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		avatarProps: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		formatMessage: {
+			type: Function,
+			required: false
+		},
+		appListRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		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
+		},
+		matchMenuKeys: {
+			type: Array,
+			required: false
+		},
+		originCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menuRenderType: {
+			type: String,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		},
+		hasSiderMenu: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "HeaderView",
+	inheritAttrs: false
+});
+//#endregion
+export { HeaderView as default };

package/dist/components/Header/style/header.d.ts

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/Header/style/header.d.ts
+interface ProLayoutHeaderToken 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 { ProLayoutHeaderToken, _default as default };

package/dist/components/Header/style/header.js

@@ -0,0 +1,39 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/Header/style/header.ts
+const genProLayoutHeaderStyle = (token) => {
+	return {
+		[`${token.componentCls}`]: {
+			[`&${token.antCls}-layout-header`]: {
+				height: token?.proLayoutHeaderHeightLayoutHeader || 56,
+				lineHeight: token.calc(token?.proLayoutHeaderHeightLayoutHeader || 56).equal(),
+				zIndex: 9,
+				paddingBlock: 0,
+				paddingInline: 0,
+				transition: "width .2s"
+			},
+			[`&-fixed${token.antCls}-layout-header`]: {
+				position: "fixed",
+				insetBlockStart: 0,
+				insetInlineEnd: 0
+			},
+			"&-actions": {
+				display: "flex",
+				alignItems: "center",
+				fontSize: 16,
+				cursor: "pointer",
+				"& &-item": {
+					paddingBlock: 0,
+					paddingInline: 8,
+					"&:hover": { color: token.colorText }
+				}
+			}
+		},
+		"&-mix": { [`${token.componentCls}`]: { [`&${token.antCls}-layout-header`]: { zIndex: 99 } } }
+	};
+};
+var header_default = useStyle("ProLayoutHeader", (token) => {
+	return [genProLayoutHeaderStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { header_default as default };

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

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

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

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

package/dist/components/Help/AsyncContentPanel.d.ts

@@ -0,0 +1,11 @@
+import { ProHelpDataSource } from "./HelpProvide.js";
+import * as _$vue from "vue";
+
+//#region src/components/Help/AsyncContentPanel.d.ts
+interface AsyncContentPanelProps {
+  item?: ProHelpDataSource<any>['children'][number];
+  onInit?: (ref: HTMLDivElement) => void;
+}
+declare const AsyncContentPanel: _$vue.DefineSetupFnComponent<AsyncContentPanelProps, {}, {}, AsyncContentPanelProps & {}, _$vue.PublicProps>;
+//#endregion
+export { AsyncContentPanelProps, AsyncContentPanel as default };

package/dist/components/Help/AsyncContentPanel.js

@@ -0,0 +1,51 @@
+import { useProHelpContext } from "./HelpProvide.js";
+import RenderContentPanel from "./RenderContentPanel.js";
+import { createVNode, defineComponent } from "vue";
+import { useEffect, useState } from "@antdv-vue/pro-utils";
+import { Spin } from "antdv-next";
+//#region src/components/Help/AsyncContentPanel.tsx
+const AsyncContentPanel = /* @__PURE__ */ defineComponent((props) => {
+	const proHelpContextProvide = useProHelpContext();
+	const [loading, setLoading] = useState(false);
+	const [content, setContent] = useState();
+	useEffect(() => {
+		if (!props.item?.key) return;
+		setLoading(true);
+		proHelpContextProvide.value.onLoadContext?.(props.item.key, props.item).then((res) => {
+			setLoading(false);
+			setContent(res);
+		});
+	}, [() => props.item?.key]);
+	return () => {
+		const { item, onInit } = props;
+		if (!props.item?.key) return null;
+		if (loading.value && item?.key) return createVNode("div", {
+			"key": item.key,
+			"style": {
+				display: "flex",
+				justifyContent: "center",
+				width: "100%",
+				boxSizing: "border-box",
+				padding: "24px"
+			}
+		}, [createVNode(Spin, null, null)]);
+		return createVNode(RenderContentPanel, {
+			"onInit": (ref) => {
+				onInit?.(ref);
+			},
+			"dataSourceChildren": content.value
+		}, null);
+	};
+}, {
+	props: {
+		item: { required: false },
+		onInit: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "AsyncContentPanel",
+	inheritAttrs: false
+});
+//#endregion
+export { AsyncContentPanel as default };