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

package/dist/components/PageContainer/PageContainerBase.js

@@ -0,0 +1,349 @@
+import PageLoading from "../PageLoading/index.js";
+import { useRouteContext } from "../../context/RouteContext.js";
+import FooterToolbar from "../FooterToolbar/index.js";
+import GridContent from "../GridContent/index.js";
+import PageHeader from "../PageHeader/index.js";
+import style_default from "./style/index.js";
+import { useStylish } from "./style/stylish.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { useEffect } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { Affix, Tabs, Watermark } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/components/PageContainer/PageContainerBase.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function genLoading(spinProps) {
+	if (typeof spinProps === "object") return spinProps;
+	return { spinning: spinProps };
+}
+/**
+* Render Footer tabList In order to be compatible with the old version of the PageHeader basically
+* all the functions are implemented.
+*/
+function renderFooter({ tabList, tabActiveKey, onTabChange, hashId, cssVarCls, tabBarExtraContent, tabProps, prefixedClassName }) {
+	if (Array.isArray(tabList) || tabBarExtraContent) return createVNode(Tabs, mergeProps(tabProps, {
+		"class": classNames(`${prefixedClassName}-tabs`, hashId, cssVarCls),
+		"activeKey": tabActiveKey,
+		"tabBarExtraContent": tabBarExtraContent,
+		"onChange": (key) => {
+			if (onTabChange) onTabChange(key);
+		},
+		"styles": tabProps?.styles || (!tabList?.filter((item) => item.content).length ? { header: { marginBlockEnd: 0 } } : {}),
+		"items": tabList?.map((item, index) => ({
+			...item,
+			key: item.key?.toString() || index?.toString()
+		}))
+	}), null);
+	return null;
+}
+function renderPageHeader(content, extraContent, prefixedClassName, hashId, cssVarCls) {
+	if (!content && !extraContent) return null;
+	return createVNode("div", { "class": classNames(`${prefixedClassName}-detail`, hashId, cssVarCls) }, [createVNode("div", { "class": classNames(`${prefixedClassName}-main `, hashId, cssVarCls) }, [createVNode("div", { "class": classNames(`${prefixedClassName}-row`, hashId, cssVarCls) }, [content && createVNode("div", { "class": classNames(`${prefixedClassName}-content`, hashId, cssVarCls) }, [content]), extraContent && createVNode("div", { "class": classNames(`${prefixedClassName}-extraContent`, hashId, cssVarCls) }, [extraContent])])])]);
+}
+const PageContainerBase = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const routeContext = useRouteContext();
+	const proProvide = useProConfig();
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-page-container`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	/** 告诉 props 是否存在 footerBar */
+	useEffect(() => {
+		if (!routeContext.value || !routeContext.value?.setHasPageContainer) return () => {};
+		routeContext.value?.setHasPageContainer?.((routeContext.value.hasPageContainer || 0) + 1);
+		return () => {
+			routeContext.value?.setHasPageContainer?.((routeContext.value.hasPageContainer || 0) - 1);
+		};
+	}, []);
+	useStylish(computed(() => `${baseClassName.value}.${baseClassName.value}-stylish`), { stylish: computed(() => props.stylish) });
+	const memoBreadcrumbRender = computed(() => {
+		const { header, breadcrumbRender = slots.breadcrumbRender } = props;
+		if (breadcrumbRender === false) return false;
+		return breadcrumbRender || header?.breadcrumbRender;
+	});
+	const loadingDom = computed(() => {
+		const { loading = false } = props;
+		if (isVNode(loading)) return loading;
+		if (typeof loading === "boolean" && !loading) return null;
+		const spinProps = genLoading(loading);
+		return spinProps?.spinning ? createVNode(PageLoading, spinProps, null) : null;
+	});
+	const pageHeaderDom = computed(() => {
+		const { loading, footer, affixProps, pageHeaderRender, fixedHeader, breadcrumbRender = memoBreadcrumbRender.value, footerToolBarProps, ...restProps } = props;
+		if (pageHeaderRender === false) return null;
+		if (pageHeaderRender) return pageHeaderRender({ props: {
+			...restProps,
+			title: routeContext.value.title,
+			breadcrumb: routeContext.value.breadcrumb
+		} });
+		let pageHeaderTitle = restProps.title;
+		if (!restProps.title && restProps.title !== false) pageHeaderTitle = routeContext.value.title;
+		const pageHeaderProps = {
+			...routeContext.value,
+			...restProps,
+			breadcrumb: routeContext.value.breadcrumb || restProps.breadcrumb,
+			title: pageHeaderTitle,
+			footer: renderFooter({
+				...restProps,
+				hashId: hashId?.value,
+				cssVarCls: cssVarCls?.value,
+				breadcrumbRender,
+				prefixedClassName: baseClassName.value
+			}),
+			...restProps.header
+		};
+		const { breadcrumb } = pageHeaderProps;
+		const noHasBreadCrumb = (!breadcrumb || !breadcrumb?.itemRender && !breadcrumb?.items?.length) && !breadcrumbRender;
+		if ([
+			"title",
+			"subTitle",
+			"extra",
+			"tags",
+			"footer",
+			"avatar",
+			"backIcon"
+		].every((item) => !pageHeaderProps[item]) && noHasBreadCrumb && !restProps.content && !restProps.extraContent) return null;
+		const children = restProps.header?.children || renderPageHeader(restProps.content, restProps.extraContent, baseClassName.value, hashId?.value, cssVarCls?.value);
+		return createVNode(PageHeader, mergeProps(pageHeaderProps, {
+			"class": classNames(`${baseClassName.value}-wrap-page-header`, { [`${baseClassName.value}-wrap-page-header-wide`]: routeContext.value.contentWidth === "Fixed" && routeContext.value.layout === "top" }),
+			"breadcrumb": breadcrumbRender === false ? void 0 : {
+				...pageHeaderProps.breadcrumb,
+				...routeContext.value.breadcrumbProps
+			},
+			"breadcrumbRender": !breadcrumbRender ? void 0 : breadcrumbRender
+		}), children ? { default: () => children } : {});
+	});
+	const contentDom = computed(() => {
+		return slots.default?.() ? createVNode("div", { "class": classNames(`${baseClassName.value}-children-content`, hashId?.value, cssVarCls?.value, { [`${baseClassName.value}-children-content-no-header`]: !pageHeaderDom.value }) }, [slots.default?.()]) : null;
+	});
+	const renderContentDom = computed(() => {
+		const { waterMarkProps } = props;
+		const dom = loadingDom.value || contentDom.value;
+		return waterMarkProps || routeContext.value.waterMarkProps ? createVNode(Watermark, {
+			...routeContext.value.waterMarkProps,
+			...props.waterMarkProps
+		}, _isSlot(dom) ? dom : { default: () => [dom] }) : dom;
+	});
+	return () => {
+		const { loading, footer, affixProps, fixedHeader, breadcrumbRender, footerToolBarProps, ...restProps } = props;
+		return createVNode(Fragment, null, [createVNode("div", { "class": classNames(baseClassName.value, hashId?.value, cssVarCls?.value, attrs.class, {
+			[`${baseClassName.value}-with-footer`]: footer,
+			[`${baseClassName.value}-with-affix`]: fixedHeader && pageHeaderDom.value,
+			[`${baseClassName.value}-stylish`]: !!restProps.stylish
+		}) }, [fixedHeader && pageHeaderDom.value ? createVNode(Affix, mergeProps(affixProps, {
+			"offsetTop": routeContext.value.hasHeader && routeContext.value.fixedHeader ? proProvide.value.token.layout?.header?.heightLayoutHeader : 1,
+			"class": classNames(`${baseClassName.value}-affix`, hashId?.value, cssVarCls?.value)
+		}), { default: () => [createVNode("div", { "class": classNames(`${baseClassName.value}-wrap`, hashId?.value, cssVarCls?.value) }, [pageHeaderDom.value])] }) : createVNode("div", { "class": classNames(`${baseClassName.value}-wrap`, hashId?.value, cssVarCls?.value) }, [pageHeaderDom.value]), renderContentDom.value && createVNode(GridContent, null, { default: () => [renderContentDom.value] })]), footer && createVNode(FooterToolbar, mergeProps(footerToolBarProps, {
+			"stylish": restProps.footerStylish,
+			"prefixCls": prefixCls.value
+		}), _isSlot(footer) ? footer : { default: () => [footer] })]);
+	};
+}, {
+	props: {
+		avatar: {
+			type: Object,
+			required: false
+		},
+		tabList: {
+			type: Array,
+			required: false
+		},
+		tabActiveKey: {
+			type: String,
+			required: false
+		},
+		onTabChange: {
+			type: Function,
+			required: false
+		},
+		tabBarExtraContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		tabProps: {
+			type: Object,
+			required: false
+		},
+		fixedHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		breadcrumb: {
+			type: Object,
+			required: false
+		},
+		breadcrumbRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		content: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		footer: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		extraContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			required: false
+		},
+		pageHeaderRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		affixProps: {
+			type: Object,
+			required: false
+		},
+		loading: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		waterMarkProps: {
+			type: Object,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		},
+		footerStylish: {
+			type: Function,
+			required: false
+		},
+		footerToolBarProps: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		backIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		subTitle: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		tags: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		onBack: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "PageContainerBase",
+	inheritAttrs: false
+});
+//#endregion
+export { PageContainerBase as default };

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

@@ -0,0 +1,57 @@
+import { FooterToolbarProps } from "../FooterToolbar/index.js";
+import { PageHeaderProps } from "../PageHeader/index.js";
+import { PageContainerToken } from "./style/index.js";
+import { PageContainerProps } from "./PageContainerBase.js";
+import { BreadcrumbRender, PageHeaderRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+import * as _$_antdv_vue_pro_provider0 from "@antdv-vue/pro-provider";
+import * as _$antdv_next0 from "antdv-next";
+import { VueNode } from "antdv-next/dist/_util/type";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/PageContainer/index.d.ts
+declare const _PageContainer: _$vue.DefineSetupFnComponent<PageContainerProps, {}, CustomSlotsType<{
+  default?: VueNode;
+  footer?: VueNode;
+  extra?: VueNode;
+  title?: VueNode;
+  backIcon?: VueNode;
+  tags?: VueNode;
+  content?: VueNode;
+  subTitle?: VueNode;
+  extraContent?: VueNode;
+  tabBarExtraContent?: VueNode;
+  pageHeaderRender?: PageHeaderRender;
+  breadcrumbRender?: BreadcrumbRender;
+}>, {
+  avatar?: _$antdv_next0.AvatarProps;
+  tabList?: _$antdv_next0.TabsProps["items"];
+  tabActiveKey?: _$antdv_next0.TabsProps["activeKey"];
+  onTabChange?: _$antdv_next0.TabsProps["onChange"];
+  tabBarExtraContent?: VueNode | {
+    left?: VueNode;
+    right?: VueNode;
+  };
+  tabProps?: _$antdv_next0.TabsProps;
+  fixedHeader?: boolean;
+  title?: VueNode;
+  breadcrumb?: _$antdv_next0.BreadcrumbProps;
+  breadcrumbRender?: PageHeaderProps["breadcrumbRender"] | false;
+  content?: VueNode;
+  footer?: VueNode | _$vue.VNode | _$vue.VNode[];
+  extraContent?: VueNode;
+  header?: PageHeaderProps & {
+    children?: VueNode;
+  };
+  pageHeaderRender?: PageHeaderRender | false;
+  affixProps?: _$antdv_next0.AffixProps;
+  loading?: _$antdv_next0.SpinProps | VueNode | (() => VueNode);
+  waterMarkProps?: _$antdv_next0.WatermarkProps;
+  stylish?: _$_antdv_vue_pro_provider0.GenerateStyle<PageContainerToken>;
+  footerStylish?: _$_antdv_vue_pro_provider0.GenerateStyle<PageContainerToken>;
+  footerToolBarProps?: FooterToolbarProps;
+} & Omit<PageHeaderProps, "title" | "breadcrumb" | "breadcrumbRender" | "footer"> & {}, _$vue.PublicProps>;
+declare const PageContainer: typeof _PageContainer & Plugin;
+//#endregion
+export { type PageContainerProps, PageContainer as default };

package/dist/components/PageContainer/index.js

@@ -0,0 +1,234 @@
+import PageContainerBase from "./PageContainerBase.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { ProConfigProvider } from "@antdv-vue/pro-provider";
+import { getSlot } from "@antdv-vue/pro-utils";
+//#region src/components/PageContainer/index.tsx
+const PageContainer = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	return () => {
+		const { footer = slots.footer, tabBarExtraContent = slots.tabBarExtraContent, extraContent = slots.extraContent, extra = slots.extra, tags = slots.tags, title = slots.title, content = slots.content, subTitle = slots.subTitle, backIcon = slots.backIcon } = props;
+		const pageHeaderRender = getSlot(slots, props, "pageHeaderRender");
+		const breadcrumbRender = getSlot(slots, props, "breadcrumbRender");
+		return createVNode(ProConfigProvider, { "needDeps": true }, { default: () => [createVNode(PageContainerBase, mergeProps(attrs, props, {
+			"pageHeaderRender": pageHeaderRender,
+			"title": title,
+			"subTitle": subTitle,
+			"content": content,
+			"extraContent": extraContent,
+			"tabBarExtraContent": tabBarExtraContent,
+			"extra": extra,
+			"footer": footer,
+			"tags": tags,
+			"backIcon": backIcon,
+			"breadcrumbRender": breadcrumbRender
+		}), slots)] });
+	};
+}, {
+	props: {
+		avatar: {
+			type: Object,
+			required: false
+		},
+		tabList: {
+			type: Array,
+			required: false
+		},
+		tabActiveKey: {
+			type: String,
+			required: false
+		},
+		onTabChange: {
+			type: Function,
+			required: false
+		},
+		tabBarExtraContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		tabProps: {
+			type: Object,
+			required: false
+		},
+		fixedHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		breadcrumb: {
+			type: Object,
+			required: false
+		},
+		breadcrumbRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		content: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		footer: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		extraContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		header: {
+			type: Object,
+			required: false
+		},
+		pageHeaderRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		affixProps: {
+			type: Object,
+			required: false
+		},
+		loading: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		waterMarkProps: {
+			type: Object,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		},
+		footerStylish: {
+			type: Function,
+			required: false
+		},
+		footerToolBarProps: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		backIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		subTitle: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		tags: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		onBack: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "PageContainer",
+	inheritAttrs: false
+});
+PageContainer.install = (app) => {
+	app.component(PageContainer.name, PageContainer);
+	return app;
+};
+//#endregion
+export { PageContainer as default };

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

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

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

@@ -0,0 +1,63 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/PageContainer/style/index.ts
+const [sm, md, lg, xl] = [
+	576,
+	768,
+	992,
+	1200
+].map((bp) => `@media (max-width: ${bp}px)`);
+const genPageContainerStyle = (token) => {
+	return { [token.componentCls]: {
+		position: "relative",
+		"&-wrap": {
+			backgroundColor: token.colorBgContainer,
+			"&-page-header": { [`&-wide${token.antCls}-page-header`]: {
+				maxWidth: 1152,
+				margin: "0 auto"
+			} }
+		},
+		"&-children-content": {
+			paddingBlockStart: token.proLayoutPageContainerPaddingBlockPageContainerContent,
+			paddingBlockEnd: token.proLayoutPageContainerPaddingBlockPageContainerContent,
+			paddingInline: token.proLayoutPageContainerPaddingInlinePageContainerContent
+		},
+		"&-affix": { [`${token.antCls}-affix`]: { [`${token.componentCls}-warp`]: {
+			backgroundColor: token.proLayoutPageContainerColorBgPageContainerFixed,
+			transition: "background-color 0.3s",
+			boxShadow: "0 2px 8px #f0f1f2"
+		} } },
+		"&-detail": {
+			display: "flex",
+			[sm]: { display: "block" }
+		},
+		"&-main": { width: "100%" },
+		"&-row": {
+			display: "flex",
+			width: "100%",
+			[md]: { display: "block" }
+		},
+		"&-content": {
+			flex: "auto",
+			width: "100%"
+		},
+		"&-extraContent": {
+			flex: "0 1 auto",
+			minWidth: 242,
+			marginInlineStart: 88,
+			textAlign: "end",
+			[xl]: { marginInlineStart: 44 },
+			[lg]: { marginInlineStart: 20 },
+			[md]: {
+				marginInlineStart: 0,
+				textAlign: "start"
+			},
+			[sm]: { marginInlineStart: 0 }
+		}
+	} };
+};
+var style_default = useStyle("PageContainer", (token) => {
+	return [genPageContainerStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };