fix: ProLayout props

examples/index.tsx

-import { createApp, reactive } from 'vue';
+import { createApp, defineComponent, reactive } from 'vue';
 import 'ant-design-vue/dist/antd.less';
 import { Button, message } from 'ant-design-vue';
-import { default as BasicLayout } from '../src/BasicLayout';
+import { default as ProLayout } from '../src/BasicLayout';
 import { menus } from './menus';
 import { useMenuState } from '../src/SiderMenu/BaseMenu';
 import * as Icon from '@ant-design/icons-vue';
+import { createRouteContext } from '../src/RouteContext';
 
-const SimpleDemo = {
-  setup() {
+const BasicLayout = defineComponent({
+  name: 'BasicLayout',
+  inheritAttrs: false,
+  setup(_, { slots, attrs }) {
     const { state: menuState } = useMenuState({
       collapsed: false,
       openKeys: [],
-      selectedKeys: [],
+      selectedKeys: ['/welcome'],
+    });
+
+    const { state: routeContext, Provider: RouteContextProvider } = createRouteContext({
+      isMobile: false,
+      menuData: [],
+      sideWidth: 208,
+      hasSideMenu: true,
+      hasHeader: true,
+      hasFooterToolbar: false,
+      setHasFooterToolbar: (has: boolean) => (routeContext.hasFooterToolbar = has),
     });
 
     return () => (
-      <div class="components">
-        <h2># BasicLayout</h2>
-        <BasicLayout
+      <RouteContextProvider>
+        <ProLayout
+          {...attrs}
           v-model={[menuState.collapsed, 'collapsed']}
           title={'Pro Layout'}
           layout={'side'}
@@ -31,10 +44,10 @@ const SimpleDemo = {
           openKeys={menuState.openKeys}
           selectedKeys={menuState.selectedKeys}
           onOpenChange={$event => {
-            menuState.openKeys = $event;
+            $event && (menuState.openKeys = $event);
           }}
           onSelect={$event => {
-            menuState.selectedKeys = $event;
+            $event && (menuState.selectedKeys = $event);
           }}
         >
           <Button
@@ -44,7 +57,18 @@ const SimpleDemo = {
           >
             Click Me!!
           </Button>
-        </BasicLayout>
+        </ProLayout>
+      </RouteContextProvider>
+    );
+  },
+});
+
+const SimpleDemo = {
+  setup() {
+    return () => (
+      <div class="components">
+        <h2># BasicLayout</h2>
+        <BasicLayout />
       </div>
     );
   },

package.json

@@ -28,7 +28,7 @@
     "vue": ">=3.0.0"
   },
   "devDependencies": {
-    "@ant-design-vue/tools": "^3.0.3",
+    "@ant-design-vue/tools": "^3.0.4",
     "@babel/runtime": "^7.11.2",
     "@types/fs-extra": "^9.0.2",
     "@types/jest": "^24.0.17",

src/BasicLayout.tsx

 import './BasicLayoutTest.less';
 
-import { App } from 'vue';
+import { App, FunctionalComponent } from 'vue';
 
 import { Layout } from 'ant-design-vue';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { default as ProProvider } from './ProProvider';
+import { default as GlobalFooter } from './GlobalFooter';
+import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { createRouteContext } from './RouteContext';
 import { WrapContent } from './WrapContent';
-import { default as GlobalFooter } from './GlobalFooter';
-import SiderMenuWrapper from './SiderMenu';
 
 const defaultI18nRender = (key: string) => key;
 
@@ -20,7 +20,9 @@ const { state: routeContext, Provider: RouteContextProvider } = createRouteConte
   hasHeader: true,
 });
 
-const BasicLayout = (props, { emit, slots }) => {
+export type ProLayoutProps = SiderMenuWrapperProps;
+
+const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots }) => {
   const handleClick = () => {
     emit('update:collapsed', !props.collapsed);
   };
@@ -32,7 +34,6 @@ const BasicLayout = (props, { emit, slots }) => {
   };
   return (
     <ProProvider {...props} i18n={defaultI18nRender}>
-      <RouteContextProvider>
       <Layout class="ant-pro-basicLayout">
         <SiderMenuWrapper
           {...props}
@@ -54,7 +55,7 @@ const BasicLayout = (props, { emit, slots }) => {
               minHeight: '280px',
             }}
           >
-              <div>Context</div>
+            {slots.default?.()}
           </WrapContent>
           <GlobalFooter
             links={[
@@ -75,19 +76,22 @@ const BasicLayout = (props, { emit, slots }) => {
                 title: '@Sendya',
                 href: 'https://www.github.com/sendya/',
                 blankTarget: true,
-                }
+              },
             ]}
-              copyright={(<a href="https://github.com/vueComponent" target="_blank">vueComponent</a>)}
+            copyright={
+              <a href="https://github.com/vueComponent" target="_blank">
+                vueComponent
+              </a>
+            }
           />
         </Layout>
       </Layout>
-      </RouteContextProvider>
     </ProProvider>
   );
 };
 
-BasicLayout.install = function(app: App) {
-  app.component('pro-layout', BasicLayout);
+ProLayout.install = function(app: App) {
+  app.component('pro-layout', ProLayout);
 };
 
-export default BasicLayout;
+export default ProLayout;

src/FooterToolbar/index.tsx

@@ -17,6 +17,7 @@ export interface FooterToolbarProps {
     props: FooterToolbarProps & RouteContextProps & { leftWidth?: string },
     dom: JSX.Element,
   ) => VNodeChild | JSX.Element;
+  getContainer?: (triggerNode: HTMLElement) => HTMLElement | null;
   prefixCls?: string;
 }
 
@@ -25,6 +26,9 @@ const FooterToolbarProps = {
   renderContent: {
     type: Function as PropType<FooterToolbarProps['renderContent']>,
   },
+  getContainer: {
+    type: Function as PropType<FooterToolbarProps['getContainer']>,
+  },
   prefixCls: { type: String as PropType<string> },
 };
 
@@ -33,11 +37,13 @@ const FooterToolbar = defineComponent({
   props: FooterToolbarProps,
   setup(props, { slots }) {
     const { getPrefixCls } = inject(injectProConfigKey, defaultProProviderProps);
+    const baseClassName = props.prefixCls || getPrefixCls('footer-bar');
+    // const container = typeof props.getContainer === 'function' ? props.getContainer()
 
-    const baseClassName = computed(() => {
-      const prefixCls = props.prefixCls || getPrefixCls();
-      return `${prefixCls}-footer-bar`;
-    });
+    // const baseClassName = computed(() => {
+    //   const prefixCls = props.prefixCls || getPrefixCls();
+    //   return `${prefixCls}-footer-bar`;
+    // });
     const routeContext = useRouteContext();
     const width = computed(() => {
       const { hasSideMenu, isMobile, sideWidth } = routeContext;

src/RouteContext.tsx

 import { InjectionKey } from 'vue';
 import { createContext, useContext } from './hooks/context';
 import { PureSettings } from './defaultSettings';
+import { useProProvider } from './ProProvider';
 
 export interface RouteContextProps extends Partial<PureSettings> {
   breadcrumb?: any;

src/SiderMenu/BaseMenu.tsx

@@ -218,8 +218,8 @@ export default defineComponent({
     const handleOpenChange: OpenEventHandler = (openKeys): void => {
       emit('update:openKeys', openKeys);
     };
-    const handleSelect = ({ selectedKeys }: SelectInfo & MenuInfo) => {
-      emit('update:selectedKeys', selectedKeys);
+    const handleSelect = (params: SelectInfo): void => {
+      emit('update:selectedKeys', params.selectedKeys);
     };
 
     return () => (
@@ -230,7 +230,9 @@ export default defineComponent({
         openKeys={props.openKeys || []}
         selectedKeys={props.selectedKeys || []}
         onOpenChange={handleOpenChange}
-        onSelect={handleSelect}
+        onSelect={({ selectedKeys }) => {
+          emit('update:selectedKeys', selectedKeys);
+        }}
       >
         {props.menus &&
           props.menus.map(menu => {

src/SiderMenu/SiderMenu.tsx

@@ -33,7 +33,7 @@ export interface SiderMenuProps
     (props: SiderMenuProps, defaultDom: VNodeChild | JSX.Element) => VNodeChild
   >;
   menuExtraRender?: WithFalse<(props: SiderMenuProps) => VNodeChild>;
-  collapsedButtonRender?: WithFalse<(collapsed?: boolean) => VNodeChild>;
+  collapsedButtonRender?: WithFalse<(collapsed?: boolean) => JSX.Element | VNodeChild>;
   breakpoint?: SiderProps['breakpoint'] | false;
   onMenuHeaderClick?: (e: MouseEvent) => void;
   fixed?: boolean;
@@ -82,7 +82,7 @@ export const defaultRenderLogoAndTitle = (
   );
 };
 
-export const defaultRenderCollapsedButton = (collapsed?: boolean) =>
+export const defaultRenderCollapsedButton = (collapsed?: boolean): JSX.Element | VNodeChild =>
   collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />;
 
 const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
@@ -148,7 +148,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
         <div style="flex: 1; overflow: hidden auto;">
           <BaseMenu
             menus={menuData}
-            theme={props.theme}
+            theme={props.theme === 'realDark' ? 'dark' : props.theme}
             mode="inline"
             collapsed={props.collapsed}
             openKeys={props.openKeys}
@@ -177,6 +177,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
             mode="inline"
           >
             <Menu.Item
+              key={'collapsed-button'}
               class={`${baseClassName}-collapsed-button`}
               title={false}
               onClick={() => {
@@ -185,7 +186,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
                 }
               }}
             >
-              {collapsedButtonRender(collapsed)}
+              {collapsedButtonRender && collapsedButtonRender(collapsed)}
             </Menu.Item>
           </Menu>
         </div>

src/SiderMenu/index.tsx

@@ -5,10 +5,9 @@ import Drawer from 'ant-design-vue/es/drawer';
 
 import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
 
-const SiderMenuWrapper: FunctionalComponent<SiderMenuProps & PrivateSiderMenuProps> = (
-  props,
-  { emit },
-) => {
+export type SiderMenuWrapperProps = SiderMenuProps & PrivateSiderMenuProps;
+
+const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = (props, { emit }) => {
   return props.isMobile ? (
     <Drawer>
       <SiderMenu {...props} />

src/SiderMenu/typings.ts

@@ -9,7 +9,7 @@ export interface MenuInfo {
   domEvent: MouseEvent;
 }
 
-export interface SelectInfo {
+export interface SelectInfo extends MenuInfo {
   selectedKeys: string[];
 }
 

src/WrapContent.tsx

-import { FunctionalComponent, ref, toRefs } from 'vue';
+import { FunctionalComponent, reactive, toRefs, CSSProperties } from 'vue';
 import { Layout } from 'ant-design-vue';
 import { useProProvider } from './ProProvider';
 import { ContentWidth } from './typings';
@@ -6,21 +6,27 @@ import { ContentWidth } from './typings';
 const { Content } = Layout;
 
 export interface WrapContentProps {
+  style?: CSSProperties;
+  class?: string | string[] | object;
   isChildrenLayout?: boolean;
   location?: string | string[] | any;
   contentHeight?: number;
   contentWidth?: ContentWidth;
 }
 
-export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots }) => {
+export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
   const { getPrefixCls } = toRefs(useProProvider());
   const prefixCls = getPrefixCls.value('basicLayout');
-  const classNames = ref({
+  const classNames = reactive({
     [`${prefixCls}-content`]: true,
     [`${prefixCls}-has-header`]: true,
   });
 
-  return <Content class={classNames.value}>{slots.default?.()}</Content>;
+  return (
+    <Content class={classNames} {...attrs}>
+      {slots.default?.()}
+    </Content>
+  );
 };
 
-export default WrapContent;
+WrapContent.inheritAttrs = false;