fix: some typo

examples/index.tsx

 import { createApp, reactive } from 'vue';
 import { Button, message } from 'ant-design-vue';
-import BasicLayout from '../src/BasicLayout';
+import { default as BasicLayout } from '../src/BasicLayout';
 import 'ant-design-vue/dist/antd.less';
 
+import { menus } from './menus';
+import BaseMenu, { useMenuState } from '../src/SiderMenu/BaseMenu';
+import * as Icon from '@ant-design/icons-vue';
+
 const SimpleDemo = {
   setup() {
-    const state = reactive({
+    const { state: menuState } = useMenuState({
       collapsed: false,
-    });
+      openKeys: [],
+      selectedKeys: [],
+    })
 
     return () => (
-      <div className="components">
+      <div class="components">
         <h2># BasicLayout</h2>
         <BasicLayout
-          collapsed={state.collapsed}
-          onCollapsed={collapsed => {
-            state.collapsed = collapsed;
+          menus={menus}
+          collapsed={menuState.collapsed}
+          openKeys={menuState.openKeys}
+          selectedKeys={menuState.selectedKeys}
+          {...{
+            'onUpdate:collapsed': $event => {
+              menuState.collapsed = $event;
+            },
+            'onUpdate:openKeys': $event => {
+              menuState.openKeys = $event
+            },
+            'onUpdate:selectedKeys': $event => {
+              menuState.selectedKeys = $event
+            }
           }}
         >
           <Button
@@ -33,4 +50,11 @@ const SimpleDemo = {
 
 const app = createApp(SimpleDemo);
 
+const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
+Object.keys(Icon)
+  .filter(k => !filterIcons.includes(k))
+  .forEach(k => {
+    app.component(Icon[k].displayName, Icon[k])
+  })
+
 app.use(BasicLayout).mount('#__vue-content>div');

examples/pro-provider.tsx

@@ -53,12 +53,13 @@ const ProProviderDemo = defineComponent({
 
 const TestChildComponent = defineComponent({
   setup () {
-    const config = inject(injectProConfigKey, defaultProProviderProps)
+    const config = inject(injectProConfigKey, defaultProProviderProps);
+    const prefixCls = config.getPrefixCls('child-component');
 
     return () => {
       const { i18n, contentWidth } = config
       return (
-        <div class="test-child-component">
+        <div class={prefixCls}>
           <p>TestChildComponent:</p>
           <div>
             i18n: {i18n.toString()}

package.json

@@ -60,13 +60,14 @@
   "dependencies": {
     "@babel/runtime": "^7.10.4",
     "ant-design-vue": "^2.0.0-beta.10",
-    "lodash": "^4.17.15"
+    "lodash-es": "^4.17.15",
+    "vue-types": "^3.0.1"
   },
   "config": {
     "port": 9528,
     "entry": {
       "@ant-design-vue/pro-layout": [
-        "./src/index.jsx"
+        "./index.tsx"
       ]
     },
     "loaders": [

src/BasicLayout.tsx

@@ -4,31 +4,35 @@ import { h, App } from 'vue';
 
 import { Layout, Menu } from 'ant-design-vue';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-import ProProvider from './ProProvider';
+import { default as ProProvider } from './ProProvider';
+import { default as SiderMenu } from './SiderMenu/SiderMenu';
+import { createContext } from './RouteContext';
 
 const defaultI18nRender = (key: string) => key
 
+const { state, provider: RouteContextProvider } = createContext({
+  isMobile: false,
+  menuData: [],
+  hasSiderMenu: true,
+  hasHeader: true,
+  siderWidth: 208,
+})
+
 const BasicLayout = (props, { emit, slots }) => {
   const handleClick = () => {
-    emit('collapsed', !props.collapsed)
+    emit('update:collapsed', !props.collapsed)
+  }
+  const handleOpenChange = (openKeys): void => {
+    emit('update:openKeys', openKeys)
+  }
+  const handleSelect = (selectedKeys: string[]): void => {
+    emit('update:selectedKeys', selectedKeys)
   }
   return (
     <ProProvider {...props} i18n={defaultI18nRender}>
+      <RouteContextProvider>
         <Layout class="ant-pro-basicLayout">
-        <Layout.Sider collapsed={props.collapsed} trigger={null} collapsible>
-          <div class="logo" />
-          <Menu theme="dark" mode="inline" selectedKeys={props.selectedKeys}>
-            <Menu.Item key="1">
-              <span>nav 1</span>
-            </Menu.Item>
-            <Menu.Item key="2">
-              <span>nav 2</span>
-            </Menu.Item>
-            <Menu.Item key="3">
-              <span>nav 3</span>
-            </Menu.Item>
-          </Menu>
-        </Layout.Sider>
+          <SiderMenu {...props} />
           <Layout>
             <Layout.Header style="background: #fff; padding: 0">
               {
@@ -42,6 +46,7 @@ const BasicLayout = (props, { emit, slots }) => {
             </Layout.Content>
           </Layout>
         </Layout>
+      </RouteContextProvider>
     </ProProvider>
   )
 };

src/ProProvider/index.tsx

@@ -2,13 +2,13 @@ import { defineComponent, reactive, toRefs, Ref, InjectionKey, provide, SetupCon
 import { ContentWidth } from '../typings';
 
 export interface ProProviderData {
-  getPrefixCls?: (suffixCls: string, customizePrefixCls: string) => string;
+  getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
   i18n?: (t: string) => string;
   contentWidth?: ContentWidth;
 }
 
 export const defaultProProviderProps: ProProviderData = {
-  getPrefixCls: (suffixCls: string, customizePrefixCls: string) => {
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
     if (customizePrefixCls) return customizePrefixCls;
     return `ant-pro-${suffixCls}`;
   },
@@ -36,7 +36,7 @@ const ProProvider = defineComponent({
   },
   setup (props, { slots }: SetupContext) {
     const { prefixCls, i18n, contentWidth } = toRefs(props)
-    const getPrefixCls = (suffixCls: string, customizePrefixCls: string): string => {
+    const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string): string => {
       if (customizePrefixCls) return customizePrefixCls;
       return suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value;
     }

src/RouteContext.tsx

 import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
 
 import { RouteProps } from './typings';
 import { PureSettings } from './defaultSettings';

src/SiderMenu/BaseMenu.tsx

@@ -68,6 +68,7 @@ export interface BaseMenuProps extends Partial<PureSettings> {
   mode?: MenuMode;
   onCollapse?: (collapsed: boolean) => void;
   openKeys?: WithFalse<string[]> | undefined;
+  selectedKeys?: WithFalse<string[]> | undefined;
   handleOpenChange?: (openKeys: string[]) => void;
   theme?: MenuTheme | 'realDark';
   i18n?: (t: string) => string | VNodeChild;
@@ -91,15 +92,11 @@ export const VueBaseMenuProps = {
     default: false,
   },
   openKeys: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<WithFalse<string[]>>,
     required: true,
   },
-  handleOpenChange: {
-    type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
-    default: () => undefined,
-  },
   selectedKeys: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<WithFalse<string[]>>,
     required: true,
   },
 }
@@ -217,8 +214,8 @@ export default defineComponent({
   }, VueBaseMenuProps),
   emits: ['update:openKeys', 'update:selectedKeys'],
   setup (props, { emit } ) {
-    console.log('props.mode', props.mode)
-    const isInline = computed(() => props.mode === 'inline')
+    const { mode } = toRefs(props);
+    const isInline = computed(() => mode.value === 'inline')
     const handleOpenChange: OpenEventHandler = (openKeys): void => {
       emit('update:openKeys', openKeys)
     }

src/SiderMenu/SiderMenu.tsx

 import './index.less';
 
-import { VNodeChild, SetupContext } from 'vue';
+import { VNodeChild, SetupContext, inject } from 'vue';
 
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
@@ -8,6 +8,8 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu';
 import { WithFalse } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
+import { menus } from '../../examples/menus';
+import { defaultProProviderProps, injectProConfigKey } from '../ProProvider';
 
 const { Sider } = Layout;
 
@@ -25,6 +27,7 @@ export interface SiderMenuProps extends Pick<BaseMenuProps, Exclude<keyof BaseMe
   onMenuHeaderClick?: (e: MouseEvent) => void;
   hide?: boolean;
   onOpenChange?: (openKeys: WithFalse<string[]>) => void;
+  onSelect?: (selectedKeys: WithFalse<string[]>) => void;
 }
 
 export const defaultRenderLogo = (logo: VNodeChild | JSX.Element): VNodeChild | JSX.Element => {
@@ -87,9 +90,13 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
     menuContentRender,
     prefixCls,
     onOpenChange,
+    onSelect,
     headerHeight,
   } = props;
-  const baseClassName = `${props.prefixCls}-sider`;
+  console.log('props', props)
+  const config = inject(injectProConfigKey, defaultProProviderProps)
+  const baseClassName = config.getPrefixCls('sider');
+
   const siderClassName = {
     [baseClassName]: true,
     [`${baseClassName}-fixed`]: fixSiderbar,
@@ -101,15 +108,26 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
 
   const extraDom = menuExtraRender && menuExtraRender(props);
 
-  const menuDom = menuContentRender !== false && (
+  return (
+    <Sider
+      class={siderClassName}
+      collapsed={collapsed}
+    >
       <BaseMenu
         {...props}
-      mode="inline"
-      handleOpenChange={onOpenChange}
+        menus={menus}
+        theme={props.theme}
+        mode={props.mode}
+        collapsed={props.collapsed}
+        openKeys={props.openKeys}
+        selectedKeys={props.selectedKeys}
         style={{
           width: '100%',
         }}
         class={`${baseClassName}-menu`}
       />
+    </Sider>
   );
 };
+
+export default SiderMenu;