fix: splitMenus

gweiguo · Jan 10, 2021 · 91f5f09 · 91f5f09
1 parent 52e6196
commit 91f5f09
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 147 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <link href="index.css" type="text/css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app">
+      <div></div>
+    </div>
+  </body>
+  <script src="index.js"></script>
+</html>
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -1,7 +1,7 @@
 import 'ant-design-vue/dist/antd.less';
 import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
 import { RouterLink } from './mock-router';
-import { Button, Avatar, message } from 'ant-design-vue';
+import { Button, Avatar, Space, message } from 'ant-design-vue';
 import { default as ProLayout } from '../src/';
 import { menus } from './menus';
 import * as Icon from '@ant-design/icons-vue';
@@ -21,7 +21,7 @@ const BasicLayout = defineComponent({
         console.log('keys', keys);
         state.selectedKeys = keys;
       },
-
+      navTheme: 'dark',
       isMobile: false,
       fixSiderbar: false,
       fixedHeader: false,
@@ -57,7 +57,7 @@ const BasicLayout = defineComponent({
         <ProLayout
           v-model={[state.collapsed, 'collapsed']}
           layout={'mix'}
-          navTheme={'light'}
+          navTheme={state.navTheme}
           i18n={(key: string) => key}
           isMobile={state.isMobile}
           fixSiderbar={state.fixSiderbar}
@@ -69,7 +69,7 @@ const BasicLayout = defineComponent({
           splitMenus={state.splitMenus}
           v-slots={{
             rightContentRender: () => (
-              <div style="color: #FFF;margin-right: 16px;">
+              <div style="margin-right: 16px;">
                 <Avatar icon={<Icon.UserOutlined />} /> Sendya
               </div>
             ),
@@ -81,13 +81,24 @@ const BasicLayout = defineComponent({
             ),
           }}
         >
-          <Button
-            onClick={() => {
-              message.info('clicked.');
-            }}
-          >
-            Click Me!!
-          </Button>
+          <Space>
+            <Button
+              type="primary"
+              onClick={() => {
+                message.info('clicked.');
+              }}
+            >
+              Click Me!!
+            </Button>
+            <Button
+              onClick={() => {
+                state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
+              }}
+            >
+              Switch Theme
+            </Button>
+          </Space>
+
         </ProLayout>
       </RouteContextProvider>
     );
@@ -98,10 +109,7 @@ const SimpleDemo = {
   setup() {
     return () => (
       <div class="components">
-        <h2># BasicLayout</h2>
-        <div>
-          <BasicLayout />
-        </div>
+         <BasicLayout />
       </div>
     );
   },
@@ -116,4 +124,4 @@ Object.keys(Icon)
     app.component(Icon[k].displayName, Icon[k]);
   });
 
-app.use(RouterLink).use(ProLayout).mount('#__vue-content>div');
+app.use(RouterLink).use(ProLayout).mount('#app');
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "sideEffects": false,
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "ant-design-vue": "^2.0.0-rc.5",
+    "ant-design-vue": "^2.0.0-rc.8",
     "lodash-es": "^4.17.20",
     "vue-types": "^3.0.1"
   },

diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx
@@ -86,7 +86,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeTy
 
 const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
   const {
-    navTheme,
     // menuData,
     collapsed,
     siderWidth,
@@ -104,15 +103,15 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
 
   // const isMix = computed(() => props.layout === 'mix');
   // const fixed = computed(() => context.fixSiderbar);
-  // const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || 'dark');
+  const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
   const runtimeSideWidth = computed(() =>
     props.collapsed ? props.collapsedWidth : props.siderWidth,
   );
 
   const classNames = computed(() => {
     return {
       [baseClassName]: true,
-      [`${baseClassName}-${navTheme}`]: true,
+      [`${baseClassName}-${runtimeTheme.value}`]: true,
       [`${baseClassName}-${props.layout}`]: true,
       [`${baseClassName}-fixed`]: context.fixSiderbar,
     };
@@ -129,7 +128,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   }
   const defaultMenuDom = (
     <BaseMenu
-      theme={navTheme === 'realDark' ? 'dark' : navTheme}
+      theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
       mode="inline"
       menuData={hasSide.value ? flatMenuData.value : context.menuData}
       collapsed={props.collapsed}
@@ -165,7 +164,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
       )}
       <Sider
         class={classNames.value}
-        theme={navTheme === 'realDark' ? 'dark' : navTheme}
+        theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
         width={siderWidth}
         breakpoint={breakpoint || undefined}
         collapsed={collapsed}
@@ -185,7 +184,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
           <Menu
             class={`${baseClassName}-link-menu`}
             inlineIndent={16}
-            theme={navTheme as 'light' | 'dark'}
+            theme={runtimeTheme.value as 'light' | 'dark'}
             selectedKeys={[]}
             openKeys={[]}
             mode="inline"

diff --git a/src/SiderMenu/index.less b/src/SiderMenu/index.less
@@ -1,4 +1,4 @@
-@import "~ant-design-vue/es/style/themes/default.less";
+@import '~ant-design-vue/es/style/themes/default.less';
 @import '../BasicLayout.less';
 
 @pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
@@ -31,23 +31,23 @@
 
   .@{ant-prefix}-menu-inline-collapsed > .@{ant-prefix}-menu-item .anticon + span,
   .@{ant-prefix}-menu-inline-collapsed
-  > .@{ant-prefix}-menu-item-group
-  > .@{ant-prefix}-menu-item-group-list
-  > .@{ant-prefix}-menu-item
-  .anticon
-  + span,
+    > .@{ant-prefix}-menu-item-group
+    > .@{ant-prefix}-menu-item-group-list
+    > .@{ant-prefix}-menu-item
+    .anticon
+    + span,
   .@{ant-prefix}-menu-inline-collapsed
-  > .@{ant-prefix}-menu-item-group
-  > .@{ant-prefix}-menu-item-group-list
-  > .@{ant-prefix}-menu-submenu
-  > .@{ant-prefix}-menu-submenu-title
-  .anticon
-  + span,
+    > .@{ant-prefix}-menu-item-group
+    > .@{ant-prefix}-menu-item-group-list
+    > .@{ant-prefix}-menu-submenu
+    > .@{ant-prefix}-menu-submenu-title
+    .anticon
+    + span,
   .@{ant-prefix}-menu-inline-collapsed
-  > .@{ant-prefix}-menu-submenu
-  > .@{ant-prefix}-menu-submenu-title
-  .anticon
-  + span {
+    > .@{ant-prefix}-menu-submenu
+    > .@{ant-prefix}-menu-submenu-title
+    .anticon
+    + span {
     display: none;
   }
 
@@ -148,16 +148,16 @@
   .@{ant-prefix}-menu-inline-collapsed {
     & > .@{ant-prefix}-menu-item .sider-menu-item-img + span,
     &
-    > .@{ant-prefix}-menu-item-group
-    > .@{ant-prefix}-menu-item-group-list
-    > .@{ant-prefix}-menu-item
-    .sider-menu-item-img
-    + span,
+      > .@{ant-prefix}-menu-item-group
+      > .@{ant-prefix}-menu-item-group-list
+      > .@{ant-prefix}-menu-item
+      .sider-menu-item-img
+      + span,
     &
-    > .@{ant-prefix}-menu-submenu
-    > .@{ant-prefix}-menu-submenu-title
-    .sider-menu-item-img
-    + span {
+      > .@{ant-prefix}-menu-submenu
+      > .@{ant-prefix}-menu-submenu-title
+      .sider-menu-item-img
+      + span {
       display: inline-block;
       max-width: 0;
       opacity: 0;
@@ -208,7 +208,7 @@
   .@{ant-prefix}-menu-inline {
     .@{ant-prefix}-menu-item,
     .@{ant-prefix}-menu-submenu-title {
-      width: 100%;
+      // width: 100%;
     }
   }
 
@@ -261,6 +261,10 @@
     .anticon {
       font-size: 16px;
     }
+    > span::after {
+      content: '';
+      display: inline;
+    }
   }
 
   .top-nav-menu li.@{ant-prefix}-menu-item {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -63,7 +63,7 @@ export function flatMap(menusData: MenuDataItem[]): MenuDataItem[] {
 }
 
 export function getMenuFirstChildren(menus: MenuDataItem[], key: string) {
-  return (menus[menus.findIndex(menu => menu.path === key)] || {}).children;
+  return (menus[menus.findIndex(menu => menu.path === key)] || {}).children || [];
 }
 
 export const PropRenderType = {