fix: sidemenu collapsed not work

- fix: layout style
- fix: mix mode render headerTitle

examples/index.tsx

@@ -114,13 +114,13 @@ const routes = [
   {
     path: '/welcome',
     name: 'welcome',
-    meta: { title: 'Welcome' },
+    meta: { title: 'Welcome', icon: 'SmileOutlined' },
     component: Welcome,
   },
   {
     path: '/dashboard',
     name: 'dashboard',
-    meta: { title: 'dashboard' },
+    meta: { title: 'dashboard', icon: 'SmileOutlined' },
     redirect: '/dashboard/analysis',
     component: RouteView,
     children: [

package.json

@@ -23,7 +23,7 @@
     "prepublishOnly": "npm run lint && npm run compile && npm run test"
   },
   "peerDependencies": {
-    "ant-design-vue": ">=2.0.0",
+    "ant-design-vue": "^2.0.0",
     "vue": ">=3.0.0"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "ant-design-vue": "^2.0.0-rc.8",
+    "ant-design-vue": "^2.0.0",
     "lodash-es": "^4.17.20",
     "vue-types": "^3.0.1"
   },

src/BasicLayout.tsx

@@ -55,6 +55,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => {
   const {
     onCollapse: propsOnCollapse,
+    onOpenKeys: propsOnOpenKeys,
+    onSelect: propsOnSelect,
     contentStyle,
     disableContentMargin,
     isChildrenLayout: propsIsChildrenLayout,
@@ -70,15 +72,16 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   // const isMix = computed(() => layout === 'mix');
 
   const handleCollapse = (collapsed: boolean) => {
-    console.log('handleCollapse', collapsed);
     propsOnCollapse && propsOnCollapse(collapsed);
     emit('update:collapsed', collapsed);
   };
   const handleOpenKeys = (openKeys: string[] | false): void => {
+    propsOnOpenKeys && propsOnOpenKeys(openKeys);
     emit('update:open-keys', openKeys);
   };
   const handleSelect = (selectedKeys: string[] | false): void => {
-    selectedKeys && emit('update:selected-keys', selectedKeys);
+    propsOnSelect && propsOnSelect(selectedKeys);
+    emit('update:selected-keys', selectedKeys);
   };
   const colSize = useMediaQuery();
   const isMobile = computed(() => (colSize.value === 'sm' || colSize.value === 'xs') && !props.disableMobile);
@@ -87,15 +90,24 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
   const className = computed(() => {
     return {
       [baseClassName.value]: true,
-      [`screen-${props.colSize}`]: props.colSize,
+      [`screen-${colSize.value}`]: colSize.value,
       [`${baseClassName.value}-top-menu`]: props.layout === 'top',
       [`${baseClassName.value}-is-children`]: props.isChildrenLayout,
       [`${baseClassName.value}-fix-siderbar`]: props.fixSiderbar,
       [`${baseClassName.value}-${props.layout}`]: props.layout,
-      [colSize.value]: colSize.value,
     };
   });
 
+  // siderMenuDom 为空的时候，不需要 padding
+  const genLayoutStyle: CSSProperties = {
+    position: 'relative',
+  };
+
+  // if is some layout children, don't need min height
+  if (propsIsChildrenLayout || (contentStyle && contentStyle.minHeight)) {
+    genLayoutStyle.minHeight = 0;
+  }
+
   // const [collapsed, onCollapse] = useMergedState<boolean>(defaultCollapsed || false, {
   //   value: props.collapsed,
   //   onChange: propsOnCollapse,
@@ -158,7 +170,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
                 onOpenKeys={handleOpenKeys}
               />
             )}
-            <Layout>
+            <Layout style={genLayoutStyle}>
               {headerDom}
               <WrapContent
                 isChildrenLayout={propsIsChildrenLayout}
@@ -246,6 +258,9 @@ ProLayout.props = {
   // settings
   /* 侧边菜单宽度 */
   siderWidth: PropTypes.number.def(208),
+  /* 侧边栏收起宽度 */
+  collapsedWidth: PropTypes.number.def(48),
+  /* 是否分割菜单 (仅 mix 模式有效) */
   splitMenus: PropTypes.bool,
   /* 控制菜单的收起和展开 */
   collapsed: PropTypes.bool,

src/SiderMenu/BaseMenu.tsx

@@ -9,6 +9,7 @@ import {
   isVNode,
   toRefs,
   toRaw,
+  unref,
 } from 'vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 import 'ant-design-vue/es/menu/style';
@@ -180,7 +181,7 @@ export default defineComponent({
     const { mode, i18n } = toRefs(props);
     const isInline = computed(() => mode.value === 'inline');
     const openKeysProps = computed(() =>
-      getOpenKeysProps(toRaw(props.openKeys), { layout: props.layout, collapsed: props.collapsed }),
+      getOpenKeysProps(props.openKeys, { layout: props.layout, collapsed: props.collapsed }),
     );
 
     const handleOpenChange: OpenEventHandler = (openKeys: string[]): void => {
@@ -202,7 +203,7 @@ export default defineComponent({
         inlineIndent={16}
         mode={props.mode}
         theme={props.theme as 'dark' | 'light'}
-        openKeys={openKeysProps.value}
+        openKeys={props.openKeys === false ? [] : props.openKeys}
         selectedKeys={props.selectedKeys || []}
         onOpenChange={handleOpenChange}
         onSelect={handleSelect}

src/SiderMenu/SiderMenu.tsx

@@ -88,15 +88,16 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const {
     collapsed,
     siderWidth,
-    onCollapse,
-    onOpenKeys,
-    onSelect,
     breakpoint,
     collapsedWidth = 48,
     menuExtraRender = false,
     menuContentRender = false,
     menuFooterRender = false,
     collapsedButtonRender = defaultRenderCollapsedButton,
+
+    onCollapse,
+    onOpenKeys,
+    onSelect,
   } = props;
   const { getPrefixCls } = useProProvider();
   const context = useRouteContext();
@@ -108,9 +109,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const runtimeSideWidth = computed(() =>
     props.collapsed ? props.collapsedWidth : props.siderWidth,
   );
-
-  console.log('runtimeSideWidth', runtimeSideWidth);
-
   const classNames = computed(() => {
     return {
       [baseClassName]: true,
@@ -119,7 +117,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
       [`${baseClassName}-fixed`]: context.fixSiderbar,
     };
   });
-  const hasSide = computed(() => props.layout === 'mix' && context.splitMenus);
+  const hasSide = computed(() => props.layout === 'mix' && props.splitMenus);
   const flatMenuData = computed(() => {
     return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]);
   });

src/SiderMenu/index.tsx

@@ -32,7 +32,7 @@ const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
   );
 };
 
-SiderMenuWrapper.inheritAttrs = false;
+SiderMenuWrapper.inheritAttrs = true;
 SiderMenuWrapper.displayName = 'SiderMenuWrapper';
 
 export default SiderMenuWrapper;

src/TopNavHeader/index.tsx

@@ -63,15 +63,16 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
   const prefixCls = `${propPrefixCls || 'ant-pro'}-top-nav-header`;
   const headerDom = defaultRenderLogoAndTitle(
     { ...props, collapsed: false },
-    layout === 'mix' ? 'headerTitleRender' : undefined,
+    // REMARK:: Any time render header title
+    // layout === 'mix' ? 'headerTitleRender' : undefined,
+    layout !== 'side' ? 'headerTitleRender' : undefined,
   );
   const className = computed(() => {
     return {
       [prefixCls]: true,
       light: props.theme === 'light',
     };
   });
-  console.log('onOpenKeys', onOpenKeys);
   return (
     <div class={className.value}>
       <div ref={headerRef} class={`${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>

yarn.lock

@@ -145,14 +145,13 @@
   resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
   integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
 
-"@ant-design/icons-vue@^5.1.9":
-  version "5.1.9"
-  resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-5.1.9.tgz#8d741a3290be61af7c71618c308cc1a946c4e434"
-  integrity sha1-jXQaMpC+Ya98cWGMMIzBqUbE5DQ=
+"@ant-design/icons-vue@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-6.0.1.tgz?cache=0&sync_timestamp=1611990511152&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design%2Ficons-vue%2Fdownload%2F%40ant-design%2Ficons-vue-6.0.1.tgz#9d804c3c74d2cfaf97cb18e582d3b9400934f5fd"
+  integrity sha1-nYBMPHTSz6+XyxjlgtO5QAk09f0=
   dependencies:
     "@ant-design/colors" "^5.0.0"
     "@ant-design/icons-svg" "^4.0.0"
-    "@babel/runtime" "^7.10.4"
     "@types/lodash" "^4.14.165"
     lodash "^4.17.15"
 
@@ -1341,7 +1340,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -1757,12 +1756,12 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@simonwep/pickr@~1.7.0":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@simonwep/pickr/-/pickr-1.7.4.tgz#b14fcd945890388b870cd6db4d6c78d531f25141"
-  integrity sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g==
+"@simonwep/pickr@~1.8.0":
+  version "1.8.0"
+  resolved "https://registry.npm.taobao.org/@simonwep/pickr/download/@simonwep/pickr-1.8.0.tgz#adbff9a4f7f0e59dec9946508c5e481b7abae0f8"
+  integrity sha1-rb/5pPfw5Z3smUZQjF5IG3q64Pg=
   dependencies:
-    core-js "^3.6.5"
+    core-js "^3.8.0"
     nanopop "^2.1.0"
 
 "@sinonjs/commons@^1.7.0":
@@ -3042,15 +3041,15 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
   integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
 
-ant-design-vue@^2.0.0-rc.8:
-  version "2.0.0-rc.8"
-  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0-rc.8.tgz?cache=0&sync_timestamp=1610025633191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-2.0.0-rc.8.tgz#0f219aedb27f1797228aab79fbbd8328a7389a9f"
-  integrity sha1-DyGa7bJ/F5ciiqt5+72DKKc4mp8=
+ant-design-vue@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0.tgz?cache=0&sync_timestamp=1612620390789&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-2.0.0.tgz#d30ec06938dc3b43b08a117818fab91d7b083e5f"
+  integrity sha1-0w7AaTjcO0OwihF4GPq5HXsIPl8=
   dependencies:
     "@ant-design-vue/use" "^0.0.1-0"
-    "@ant-design/icons-vue" "^5.1.9"
+    "@ant-design/icons-vue" "^6.0.0"
     "@babel/runtime" "^7.10.5"
-    "@simonwep/pickr" "~1.7.0"
+    "@simonwep/pickr" "~1.8.0"
     array-tree-filter "^2.1.0"
     async-validator "^3.3.0"
     dom-align "^1.10.4"
@@ -5101,6 +5100,11 @@ core-js@^3.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47"
   integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg==
 
+core-js@^3.8.0:
+  version "3.8.3"
+  resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.8.3.tgz?cache=0&sync_timestamp=1611038902573&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
+  integrity sha1-whkG4fFPNon5OrzG4miDVQ3ZLdA=
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"