fix: support ant-design-vue@2.2.x and vue3.1.x

examples/index.tsx

@@ -67,12 +67,11 @@ const BasicLayout = defineComponent({
           }
         },
       );
-
       // watch route
-      watchEffect(() => {
+      watch(route, () => {
         updateSelectedMenu();
         updateOpenKeys();
-      });
+      })
     });
 
     return () => (
@@ -98,7 +97,7 @@ const BasicLayout = defineComponent({
         onOpenKeys={$event => {
           state.openKeys = $event;
         }}
-        onSelect={updateSelectedMenu}
+        // onSelect={updateSelectedMenu}
         onMenuHeaderClick={e => {
           console.log('onMenuHeaderClick', e);
         }}

package.json

 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.7",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "repository": {
@@ -67,7 +67,7 @@
     "ts-node": "^9.1.1",
     "typescript": "~3.9.3",
     "vue": "^3.1.1",
-    "vue-jest": "^5.0.0-alpha.3",
+    "vue-jest": "^5.0.0-alpha.10",
     "vue-router": "^4.0.3"
   },
   "dependencies": {

src/BasicLayout.tsx

-import { computed, reactive, unref, provide, defineComponent } from 'vue';
+import { computed, reactive, unref, provide, defineComponent, toRefs } from 'vue';
 import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
@@ -74,6 +74,7 @@ const ProLayout = defineComponent({
   ],
   props: basicLayoutProps,
   setup(props, { emit, slots }) {
+    const refProps = toRefs(props);
     const isTop = computed(() => props.layout === 'top');
     // const isSide = computed(() => layout === 'side');
     // const isMix = computed(() => layout === 'mix');
@@ -170,28 +171,29 @@ const ProLayout = defineComponent({
     const routeContext = reactive({
       getPrefixCls,
       ...props,
-      locale: props.locale,
+      locale: refProps.locale,
       breadcrumb: computed(() => {
         return {
-          ...props.breadcrumb,
+          ...refProps.breadcrumb,
           itemRender: breadcrumbRender,
         };
       }),
       contentWidth: 'Fluid',
-      layout: props.layout,
-      navTheme: props.navTheme,
-      splitMenus: props.splitMenus,
-      fixedHeader: props.fixSiderbar,
-      fixSiderbar: props.fixSiderbar,
+      layout: refProps.layout,
+      navTheme: refProps.navTheme,
+      splitMenus: refProps.splitMenus,
+      fixedHeader: refProps.fixSiderbar,
+      fixSiderbar: refProps.fixSiderbar,
       sideWidth: siderWidth,
       hasFooterToolbar: false,
-      menuData: props.menuData,
-      selectedKeys: props.selectedKeys || [],
-      openKeys: props.openKeys || [],
+      menuData: refProps.menuData,
+      selectedKeys: refProps.selectedKeys,
+      openKeys: refProps.openKeys,
     });
 
     const restProps = computed(() => omit(props, ['onCollapse', 'onOpenKeys', 'onSelect']));
     provide('route-context', routeContext);
+
     return () => (
       <>
         {pure.value ? (

src/GlobalHeader/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '../SiderMenu/SiderMenu';
 import { TopNavHeader } from '../TopNavHeader';
 import { clearMenuItem, PropTypes } from '../utils';
-import type { HeaderViewProps } from '../Header';
 import { useRouteContext } from '../RouteContext';
 
 import './index.less';

src/SiderMenu/BaseMenu.tsx

@@ -7,7 +7,6 @@ import {
   VNode,
   PropType,
   isVNode,
-  toRefs,
   ExtractPropTypes,
 } from 'vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
@@ -67,15 +66,15 @@ export const baseMenuProps = {
   },
   collapsed: {
     type: Boolean as PropType<boolean | undefined>,
-    default: false,
+    default: () => false,
   },
   openKeys: {
     type: Array as PropType<WithFalse<string[]>>,
-    default: undefined,
+    default: () => undefined,
   },
   selectedKeys: {
     type: Array as PropType<WithFalse<string[]>>,
-    default: undefined,
+    default: () => undefined,
   },
   menuProps: {
     type: Object as PropType<Record<string, any>>,
@@ -136,11 +135,11 @@ class MenuUtil {
     this.props = props;
   }
 
-  getNavMenuItems = (menusData: MenuDataItem[] = [], isChildren: boolean) => {
-    return menusData.map(item => this.getSubMenuOrItem(item, isChildren)).filter(item => item);
+  getNavMenuItems = (menusData: MenuDataItem[] = []) => {
+    return menusData.map(item => this.getSubMenuOrItem(item)).filter(item => item);
   };
 
-  getSubMenuOrItem = (item: MenuDataItem, isChildren: boolean): VNode => {
+  getSubMenuOrItem = (item: MenuDataItem): VNode => {
     if (
       Array.isArray(item.children) &&
       item.children.length > 0 &&
@@ -172,7 +171,7 @@ class MenuUtil {
           key={item.path}
           icon={hasGroup ? null : <LazyIcon icon={item.meta?.icon} />}
         >
-          {this.getNavMenuItems(item.children, true)}
+          {this.getNavMenuItems(item.children)}
         </MenuComponent>
       );
     }
@@ -186,13 +185,13 @@ class MenuUtil {
           icon={item.meta?.icon && <LazyIcon icon={item.meta.icon} />}
           // onClick={}
         >
-          {this.getMenuItem(item, isChildren)}
+          {this.getMenuItem(item)}
         </Menu.Item>
       )
     );
   };
 
-  getMenuItem = (item: MenuDataItem, isChildren: boolean) => {
+  getMenuItem = (item: MenuDataItem) => {
     const meta = Object.assign({}, item.meta);
     const target = (meta.target || null) as string | null;
     const hasUrl = isUrl(item.path);
@@ -228,8 +227,6 @@ export default defineComponent({
   props: baseMenuProps,
   emits: ['update:openKeys', 'update:selectedKeys'],
   setup(props, { emit }) {
-    const { mode } = toRefs(props);
-    const isInline = computed(() => mode.value === 'inline');
     const menuUtil = new MenuUtil(props);
 
     const handleOpenChange = (openKeys: string[]): void => {

src/SiderMenu/SiderMenu.tsx

@@ -10,7 +10,7 @@ import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
-import { FormatMessage, WithFalse, CustomRender } from '../typings';
+import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
 import { defaultSettingProps } from '../defaultSettings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
@@ -95,7 +95,7 @@ export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties
     return null;
   }
   if (typeof logo === 'string') {
-    return <img src={logo} alt="logo" />;
+    return <img src={logo} alt="logo" style={logoStyle} />;
   }
   if (typeof logo === 'function') {
     return logo();
@@ -155,7 +155,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
     onMenuHeaderClick,
   } = props;
   const context = useRouteContext();
-  const { getPrefixCls, locale } = context;
+  const { getPrefixCls } = context;
   const baseClassName = getPrefixCls('sider');
   // const isMix = computed(() => props.layout === 'mix');
   // const fixed = computed(() => context.fixSiderbar);
@@ -182,7 +182,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
   const defaultMenuDom = (
     <BaseMenu
       prefixCls={getPrefixCls()}
-      locale={props.locale}
+      locale={context.locale}
       theme={sTheme.value === 'realDark' ? 'dark' : sTheme.value}
       mode="inline"
       menuData={hasSide.value ? flatMenuData.value : context.menuData}
@@ -261,6 +261,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
             selectedKeys={[]}
             openKeys={[]}
             mode="inline"
+            // @ts-ignore
             onClick={() => {
               if (onCollapse) {
                 onCollapse(!props.collapsed);

src/TopNavHeader/index.tsx

 import { ref, computed, FunctionalComponent, ExtractPropTypes } from 'vue';
-import {
-  siderMenuProps,
-  SiderMenuProps,
-  defaultRenderLogoAndTitle,
-  PrivateSiderMenuProps,
-} from '../SiderMenu/SiderMenu';
+import { siderMenuProps, SiderMenuProps, defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
 import BaseMenu from '../SiderMenu/BaseMenu';
 import { globalHeaderProps } from '../GlobalHeader';
 import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';

src/index.ts

@@ -22,6 +22,6 @@ export {
   SelectInfo,
   baseMenuProps,
 } from './SiderMenu/BaseMenu';
-export { default as WaterMark } from './WaterMark/index';
+export { default as WaterMark, WaterMarkProps } from './WaterMark/index';
 
 export { default, BasicLayoutProps } from './BasicLayout';

src/vue-tsx-shim.d.ts

-import 'vue';
-
-type EventHandler = (...args: any[]) => void;
-
-declare module 'vue' {
-  interface ComponentCustomProps {
-    role?: string;
-    tabindex?: number | string;
-    // should be removed after Vue supported component events typing
-    // see: https://github.com/vuejs/vue-next/issues/1553
-    //      https://github.com/vuejs/vue-next/issues/3029
-    onBlur?: EventHandler;
-    onOpen?: EventHandler;
-    onEdit?: EventHandler;
-    onLoad?: EventHandler;
-    onClose?: EventHandler;
-    onFocus?: EventHandler;
-    onInput?: EventHandler;
-    onClick?: EventHandler;
-    onPress?: EventHandler;
-    onCancel?: EventHandler;
-    onChange?: EventHandler;
-    onDelete?: EventHandler;
-    onScroll?: EventHandler;
-    onSubmit?: EventHandler;
-    onSelect?: EventHandler;
-    onConfirm?: EventHandler;
-    onPreview?: EventHandler;
-    onKeypress?: EventHandler;
-    onTouchend?: EventHandler;
-    onTouchmove?: EventHandler;
-    onTouchstart?: EventHandler;
-    onTouchcancel?: EventHandler;
-    onMouseenter?: EventHandler;
-    onMouseleave?: EventHandler;
-    onMousemove?: EventHandler;
-    onKeydown?: EventHandler;
-    onKeyup?: EventHandler;
-    onDeselect?: EventHandler;
-  }
-}

yarn.lock

@@ -14233,6 +14233,11 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
+
 source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -15818,15 +15823,16 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-jest@^5.0.0-alpha.3:
-  version "5.0.0-alpha.8"
-  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.8.tgz#45b12335dbb73c9ab8309f1e24b2fc8781d519f9"
-  integrity sha512-4FqH69T6X6rOglrEui/mDWvOTGB9ammmCXLVdS4s524D4Emx8fBC4sKAPFAUZfbWpYh/7i7xWoPwF4agfyGWwA==
+vue-jest@^5.0.0-alpha.10:
+  version "5.0.0-alpha.10"
+  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.10.tgz#4326977b3b0268b1def140f3b69113c2d82fb090"
+  integrity sha512-iN62cTi4AL0UsgxEyVeJtHG6qXEv+8Ci2wX1vP3b/dAZvyBRmqy5aJHQrP6VCEuio+HgHQ1LAZ+ccM2pouBmlg==
   dependencies:
     "@babel/plugin-transform-modules-commonjs" "^7.2.0"
     chalk "^2.1.0"
     convert-source-map "^1.6.0"
     extract-from-css "^0.4.4"
+    source-map "0.5.6"
     tsconfig "^7.0.0"
 
 "vue-loader-v16@npm:vue-loader@^16.1.0":