Merge pull request #93 from eleme/feat/menu

menu item group

components.json

@@ -26,6 +26,9 @@
   "menu-item": [
     "./packages/menu-item/index.js"
   ],
+  "menu-item-group": [
+    "./packages/menu-item-group/index.js"
+  ],
   "input": [
     "./packages/input/index.js"
   ],

examples/docs/menu.md

@@ -133,7 +133,7 @@
 ```html
 <div class="nav">
   <h1>Element</h1>
-  <el-menu default-active="1">
+  <el-menu default-active="2">
     <el-menu-item index="1">处理中心</el-menu-item>
     <el-menu-item index="2">我的工作台</el-menu-item>
     <el-menu-item index="3">订单管理</el-menu-item>
@@ -196,6 +196,7 @@
   <div class="nav nav-vertical">
     <h1>Element</h1>
     <el-menu mode="vertical" default-active="2-1">
+      <el-menu-item-group title="分组一">
         <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
         <el-submenu index="sub1">
           <template slot="title"><i class="el-icon-menu"></i>导航二</template>
@@ -203,12 +204,15 @@
           <el-menu-item index="2-2">选项2</el-menu-item>
           <el-menu-item index="2-3">选项3</el-menu-item>
         </el-submenu>
+      </el-menu-item-group>
+      <el-menu-item-group title="分组二">
         <el-submenu index="sub2">
           <template slot="title"><i class="el-icon-setting"></i>导航三</template>
           <el-menu-item index="3-1">选项1</el-menu-item>
           <el-menu-item index="3-2">选项2</el-menu-item>
           <el-menu-item index="3-3">选项3</el-menu-item>
         </el-submenu>
+      </el-menu-item-group>
     </el-menu>
   </div>
 </div>
@@ -217,6 +221,7 @@
 <div class="nav nav-vertical">
   <h1>Element</h1>
   <el-menu mode="vertical" default-active="2-1">
+    <el-menu-item-group title="分组一">
       <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
       <el-submenu index="sub1">
         <template slot="title"><i class="el-icon-menu"></i>导航二</template>
@@ -224,12 +229,15 @@
         <el-menu-item index="2-2">选项2</el-menu-item>
         <el-menu-item index="2-3">选项3</el-menu-item>
       </el-submenu>
+    </el-menu-item-group>
+    <el-menu-item-group title="分组二">
       <el-submenu index="sub2">
         <template slot="title"><i class="el-icon-setting"></i>导航三</template>
         <el-menu-item index="3-1">选项1</el-menu-item>
         <el-menu-item index="3-2">选项2</el-menu-item>
         <el-menu-item index="3-3">选项3</el-menu-item>
       </el-submenu>
+    </el-menu-item-group>
   </el-menu>
 </div>
 ```
@@ -237,13 +245,18 @@
 <div class="demo-box" style="width: 200px;">
   <div class="nav nav-vertical nav-dark">
     <h1>Element</h1>
-    <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
+    <el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
       <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
       <el-submenu index="sub2">
         <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+        <el-menu-item-group title="分组1">
           <el-menu-item index="2-1">选项1</el-menu-item>
           <el-menu-item index="2-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
           <el-menu-item index="2-3">选项3</el-menu-item>
+          <el-menu-item index="2-4">选项4</el-menu-item>
+        </el-menu-item-group>
       </el-submenu>
       <el-submenu index="sub3">
         <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@@ -270,13 +283,18 @@
 ```html
 <div class="nav nav-vertical nav-dark">
   <h1>Element</h1>
-  <el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
+  <el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
     <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
     <el-submenu index="sub2">
       <template slot="title"><i class="el-icon-menu"></i>导航二</template>
+      <el-menu-item-group title="分组1">
         <el-menu-item index="2-1">选项1</el-menu-item>
         <el-menu-item index="2-2">选项2</el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="分组2">
         <el-menu-item index="2-3">选项3</el-menu-item>
+        <el-menu-item index="2-4">选项4</el-menu-item>
+      </el-menu-item-group>
     </el-submenu>
     <el-submenu index="sub3">
       <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@@ -322,3 +340,8 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | key     | 唯一标志   | string  |      |  |
+
+## menu-group API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| title     | 分组标题   | string  |      |  |

packages/menu-item-group/index.js

@@ -0,0 +1,7 @@
+const ElMenuItemGroup = require('../menu/src/menu-item-group');
+
+ElMenuItemGroup.install = function(Vue) {
+  Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);
+};
+
+module.exports = ElMenuItemGroup;

packages/menu/src/menu-item-group.vue

@@ -0,0 +1,52 @@
+<script>
+  module.exports = {
+    name: 'el-menu-item-group',
+
+    componentName: 'menu-item-group',
+
+    props: {
+      title: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        paddingLeft: 15
+      };
+    },
+    computed: {
+      activeIndex() {
+        return this.$parent.activeIndex;
+      }
+    },
+    methods: {
+      initPadding() {
+        var parent = this.$parent;
+        var level = 0;
+        var componentTag = parent.$options._componentTag;
+
+        while (componentTag !== 'el-menu') {
+          if (componentTag === 'el-submenu') {
+            level++;
+          }
+          parent = parent.$parent;
+          componentTag = parent.$options._componentTag;
+        }
+        this.paddingLeft += level * 10;
+      }
+    },
+    mounted() {
+      this.initPadding();
+    }
+  };
+</script>
+
+<template>
+  <li class="el-menu-item-group">
+    <div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">{{title}}</div>
+    <ul>
+      <slot></slot>
+    </ul>
+  </li>
+</template>

packages/menu/src/submenu.vue

@@ -55,7 +55,7 @@
 
 <template>
   <li class="el-submenu" :class="{'is-opened': opened}">
-    <div class="el-submenu__title" @click="handleClick">
+    <div class="el-menu-item el-submenu__title" @click="handleClick">
       <slot name="title"></slot>
       <i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
     </div>

packages/theme-default/src/common/var.css

@@ -378,4 +378,16 @@
     --steps-border-color: var(--disabled-border-base);
     --steps-border-radius: 4px;
     --steps-padding: 20px;
+
+    /*Steps
+    --------------------------*/
+    --menu-item-color: #475669;
+    --menu-item-fill: #eff2f7;
+    --menu-item-hover-fill: #d3dce6;
+    --submenu-item-fill: #e5e9f2;
+
+    --dark-menu-item-color: #475669;
+    --dark-menu-item-fill: #324057;
+    --dark-menu-item-hover-fill: #475669;
+    --dark-submenu-item-fill: #1f2d3d;
 }

packages/theme-default/src/menu.css

@@ -5,12 +5,15 @@
   @b menu {
     height: 60px;
     line-height: 60px;
-    background-color: #eff2f7;
     list-style: none;
     position: relative;
     margin: 0;
     padding-left: 0;
     
+    & li {
+      list-style: none;
+    }
+
     @m vertical {
       height: auto;
 
@@ -22,10 +25,9 @@
         padding-left: 20px;
         cursor: pointer;
         position: relative;
-        color: #475669;
         
         &:hover {
-          background-color: #d3dce6;
+          background-color: var(--menu-item-hover-fill);
         }
         & .el-menu-item__bar {
           display: none;
@@ -36,18 +38,20 @@
       }
     }
     @m dark {
-      background-color: #324057;
-
       & .el-menu-item,
       & .el-submenu__title {
         color: #c0ccda;
       }
 
+      & .el-menu-item {
+        background-color: var(--dark-menu-item-fill);
+      }
+
       &.el-menu--vertical {
         & .el-menu-item,
         & .el-submenu__title {
           &:hover {
-            background-color: #475669;
+            background-color: var(--dark-menu-item-hover-fill);
           }
           &.is-active {
             background-color: #5e6d82;
@@ -55,13 +59,15 @@
           }
         }
       }
-
+      & .el-submenu .el-menu {
-      & .el-submenu .el-menu-item {
+        background-color: var(--dark-submenu-item-fill);
-        background-color: #1f2d3d;
+      }
+      & .el-submenu .el-menu-item:not(.el-submenu__title) {
+        background-color: transparent;
         color: #99a9bf;
 
         &:hover {
-          background-color: #475669;
+          background-color: var(--dark-menu-item-hover-fill);
         }
         &.is-active {
           background-color: #5e6d82;
@@ -71,8 +77,8 @@
     }
   }
   @b menu-item {
-    font-size: 16px;
+    font-size: 14px;
-    color: #475669;
+    color: var(--menu-item-color);
     float: left;
     height: 100%;
     padding: 0 10px;
@@ -81,6 +87,7 @@
     position: relative;
     transition: var(--md-fade-transition);
     transform-origin: center center;
+    background-color: var(--menu-item-fill);
     
     @e bar {
       content: '';
@@ -107,29 +114,20 @@
   @b submenu {
     & .el-menu {
       height: auto;
-      background-color: darken(#eff2f7, 5%);
+      background-color: var(--submenu-item-fill);
     }
-    & .el-menu-item {
+    & .el-menu-item:not(.el-submenu__title) {
       padding-left: 46px;
-    }
+      background-color: transparent;
-    @e title {
-      float: none;
-      height: 56px;
-      line-height: 56px;
-      margin: 0;
-      padding-left: 20px;
-      cursor: pointer;
-      position: relative;
-      color: #475669;
 
       &:hover {
-        background-color: #d3dce6;
+        background-color: var(--menu-item-hover-fill);        
       }
-      & [class^="el-icon-"] {
+    }
+    @e title [class^="el-icon-"] {
       vertical-align: baseline;
       margin-right: 10px;
     }
-    }
     @e icon-arrow {
       position: absolute;
       margin: 0;
@@ -146,4 +144,17 @@
       }
     }
   }
+
+  @b menu-item-group {
+    > ul {
+      padding: 0;
+    }
+    @e title {
+      padding-top: 15px;
+      line-height: normal;
+      font-size: 14px;
+      padding-left: 25px;
+      color: #99a9bf;
+    }
+  }
 }