@gx-design-vue/pro-layout 0.1.0-alpha.3 → 0.1.0-alpha.5

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

@@ -64,9 +64,9 @@ declare const ProAppPage: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
 }>> & Readonly<{}>, {
   emptyText: _$_gx_design_vue_pro_utils0.CustomRender;
   indicator: _$_gx_design_vue_pro_utils0.CustomRender;
+  prefixCls: string;
   spinning: AppPageSpinning;
   class: string;
-  prefixCls: string;
   style: CSSProperties;
 }, SlotsType<{
   default: () => any;

package/dist/components/Breadcrumb/index.js

@@ -43,7 +43,7 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 	const breadcrumbRoutes = computed(() => props.routes ?? menuState?.breadcrumbRoutes.value ?? []);
 	const homeIconConfig = computed(() => {
 		if (props.homeIcon !== void 0) return props.homeIcon;
-		return breadcrumbConfig ? breadcrumbConfig.value.showHome : void 0;
+		return breadcrumbConfig ? breadcrumbConfig.value?.showHome : void 0;
 	});
 	const lookup = computed(() => menuState?.lookup.value);
 	const selectedKeys = computed(() => menuState?.selectedKeys.value ?? []);

package/dist/components/CollapseButton/index.js

@@ -5,7 +5,7 @@ import { MenuFoldOutlined, MenuUnfoldOutlined } from "@antdv-next/icons";
 //#region src/components/CollapseButton/index.tsx
 const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	const { prefixCls, collapseConfig } = useLayoutBase();
-	const placement = computed(() => collapseConfig.value?.placement);
+	const placement = computed(() => props.placement ?? collapseConfig?.value?.placement ?? "sider");
 	const collapseButtonClassNames = computed(() => classNames(`${prefixCls.value}-collapse-button`, `${prefixCls.value}-collapse-button-${placement.value}`, props.collapsed && `${prefixCls.value}-collapse-button-${placement.value}-collapsed`));
 	function handleClick(event) {
 		emit("click", event);
@@ -24,13 +24,19 @@ const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slo
 					handleClick(event);
 				}
 			}
-		}, [collapseConfig.value ? slots.icon?.({ collapsed: props.collapsed }) : props.collapsed ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]);
+		}, [collapseConfig?.value ? slots.icon?.({ collapsed: props.collapsed }) : props.collapsed ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]);
 	};
 }, {
-	props: { collapsed: {
-		type: Boolean,
-		required: true
-	} },
+	props: {
+		collapsed: {
+			type: Boolean,
+			required: true
+		},
+		placement: {
+			type: String,
+			required: false
+		}
+	},
 	emits: ["click"],
 	name: "LayoutCollapseButton",
 	inheritAttrs: false

package/dist/components/CollapseButton/interface.d.ts

@@ -7,6 +7,8 @@ interface LayoutCollapseButtonEmitsProps {
 }
 interface LayoutCollapseButtonProps extends LayoutCollapseButtonEmitsProps {
   collapsed: boolean;
+  /** 折叠按钮位置：优先于 context 的 collapseConfig.placement */
+  placement?: 'sider' | 'header' | 'floating';
 }
 interface LayoutCollapseButtonSlots {
   icon?: (props: {

package/dist/components/Logo/index.js

@@ -15,10 +15,10 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 	const { layout, isMobile, prefixCls, collapsed, logoConfig, proClasses, proStyles, collapseConfig } = useLayoutBase();
 	const collapsedWidth = computed(() => collapseConfig?.value?.width);
 	const title = computed(() => {
-		if (!logoConfig.value) return "";
-		return logoConfig.value.title;
+		if (!logoConfig?.value) return "";
+		return logoConfig?.value.title;
 	});
-	const logoSource = computed(() => !logoConfig.value ? false : logoConfig.value.logo);
+	const logoSource = computed(() => !logoConfig?.value ? false : logoConfig?.value.logo);
 	const hideTitle = computed(() => collapsed.value && ["side", "simple"].includes(layout.value ?? ""));
 	const showLogo = computed(() => !collapsed.value || !!collapsedWidth.value);
 	const logoClassNames = computed(() => classNames(`${prefixCls.value}-logo`, proClasses.value.logo, {

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

@@ -50,8 +50,8 @@ declare const GPageTransition: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   };
 }>> & Readonly<{}>, {
   reverse: boolean;
-  name: string;
   direction: string;
+  name: string;
   disabled: boolean;
 }, SlotsType<GPageTransitionSlots>, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion

package/dist/components/Sider/style.js

@@ -99,8 +99,7 @@ const genSiderMenuStyle = (token) => {
 	const siderMenuPaddingWithArrow = token.calc(siderMenuArrowSize).add(token.padding).add(token.marginXS).equal();
 	const siderMenuTitleGap = token.iconMarginInlineEnd ?? token.marginSM;
 	const activeBarWidth = token.activeBarWidth ?? 0;
-	const activeBarBorderWidth = token.activeBarBorderWidth ?? token.lineWidth;
-	const itemWidth = activeBarWidth ? `calc(100% + ${unit$1(activeBarBorderWidth)})` : `calc(100% - ${unit$1(token.calc(siderMenuItemMarginInline).mul(2).equal())})`;
+	const itemWidth = token.itemWidth || `calc(100% - ${unit$1(token.calc(siderMenuItemMarginInline).mul(2).equal())})`;
 	return {
 		[`${componentCls}`]: {
 			boxSizing: "border-box",

package/dist/hooks/useLayoutBase.d.ts

@@ -17,7 +17,7 @@ declare function useLayoutBase(props?: {
   collapsed?: boolean;
 }): {
   layoutContext: LayoutContextProps;
-  layout: _$vue.ComputedRef<"side" | "top" | "mix" | "wide" | "simple">;
+  layout: _$vue.ComputedRef<"top" | "side" | "mix" | "wide" | "simple">;
   sider: _$vue.ComputedRef<Required<LayoutSiderConfig>>;
   header: _$vue.ComputedRef<Required<LayoutHeaderConfig>>;
   zIndex: _$vue.Ref<number, number>;
@@ -43,12 +43,12 @@ declare function useLayoutBase(props?: {
     breadcrumb?: string;
     footer?: string;
     header?: string;
-    root?: string;
+    content?: string;
     sider?: string;
+    root?: string;
     siderChildren?: string;
     logo?: string;
     logoImage?: string;
-    content?: string;
     menu?: string;
     tabs?: string;
   }>;
@@ -58,12 +58,12 @@ declare function useLayoutBase(props?: {
     breadcrumb?: _$vue.CSSProperties;
     footer?: _$vue.CSSProperties;
     header?: _$vue.CSSProperties;
-    root?: _$vue.CSSProperties;
+    content?: _$vue.CSSProperties;
     sider?: _$vue.CSSProperties;
+    root?: _$vue.CSSProperties;
     siderChildren?: _$vue.CSSProperties;
     logo?: _$vue.CSSProperties;
     logoImage?: _$vue.CSSProperties;
-    content?: _$vue.CSSProperties;
     menu?: _$vue.CSSProperties;
     tabs?: _$vue.CSSProperties;
   }>;

package/dist/hooks/useLayoutBase.js

@@ -7,23 +7,23 @@ import { computed } from "vue";
 */
 function useLayoutBase(props) {
 	const layoutContext = useInjectLayoutContext();
-	const sider = layoutContext.sider;
-	const header = layoutContext.header;
-	const zIndex = layoutContext.zIndex;
-	const prefixCls = layoutContext.prefixCls;
-	const hashId = layoutContext.hashId;
-	const cssVarCls = layoutContext.cssVarCls;
-	const rootCls = layoutContext.rootCls;
-	const watermark = layoutContext.watermark;
-	const menuState = layoutContext.menuState;
-	const breadcrumbRender = layoutContext.breadcrumbRender;
-	const breadcrumbConfig = layoutContext.breadcrumbConfig;
-	const pageContainerConfig = layoutContext.pageContainerConfig;
-	const collapseConfig = layoutContext.collapseConfig;
-	const contentFullscreen = layoutContext.contentFullscreen;
-	const renderRouterView = layoutContext.renderRouterView;
-	const navigate = layoutContext.navigate;
-	const setHasFooterToolbar = layoutContext.setHasFooterToolbar;
+	const sider = layoutContext?.sider;
+	const header = layoutContext?.header;
+	const zIndex = layoutContext?.zIndex;
+	const prefixCls = layoutContext?.prefixCls;
+	const hashId = layoutContext?.hashId;
+	const cssVarCls = layoutContext?.cssVarCls;
+	const rootCls = layoutContext?.rootCls;
+	const watermark = layoutContext?.watermark;
+	const menuState = layoutContext?.menuState;
+	const breadcrumbRender = layoutContext?.breadcrumbRender;
+	const breadcrumbConfig = layoutContext?.breadcrumbConfig;
+	const pageContainerConfig = layoutContext?.pageContainerConfig;
+	const collapseConfig = layoutContext?.collapseConfig;
+	const contentFullscreen = layoutContext?.contentFullscreen;
+	const renderRouterView = layoutContext?.renderRouterView;
+	const navigate = layoutContext?.navigate;
+	const setHasFooterToolbar = layoutContext?.setHasFooterToolbar;
 	const layout = computed(() => layoutContext?.layout.value);
 	const collapsed = computed(() => props?.collapsed ?? layoutContext?.collapsed.value ?? false);
 	const isMobile = computed(() => layoutContext?.isMobile.value ?? false);