Merge branch 'next' into feat/fix-buglist

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,32 @@
   <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>
+          <el-menu-item index="2-1">选项1</el-menu-item>
+          <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>
+
+```html
+<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,33 +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>
-  </div>
-</div>
-
-```html
-<div class="nav nav-vertical">
-  <h1>Element</h1>
-  <el-menu mode="vertical" default-active="2-1">
-    <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>
-      <el-menu-item index="2-1">选项1</el-menu-item>
-      <el-menu-item index="2-2">选项2</el-menu-item>
-      <el-menu-item index="2-3">选项3</el-menu-item>
-    </el-submenu>
-    <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 index="2-1">选项1</el-menu-item>
-        <el-menu-item index="2-2">选项2</el-menu-item>
-        <el-menu-item index="2-3">选项3</el-menu-item>
+        <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 index="2-1">选项1</el-menu-item>
-      <el-menu-item index="2-2">选项2</el-menu-item>
-      <el-menu-item index="2-3">选项3</el-menu-item>
+      <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  |      |  |

examples/docs/tabs.md

@@ -38,7 +38,7 @@
 ## 基础使用
 
 <div>
-  <el-tabs>
+  <el-tabs :active-name="activeName">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -78,7 +78,7 @@
 ## 可关闭的标签
 
 <div>
-  <el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
+  <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -88,7 +88,7 @@
 {{activeName2}}
 
 ```html
-<el-tabs type="card" :closable="true" :on-remove="handleRemove" :on-click="handleClick">
+<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
   <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
   <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
   <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -122,8 +122,8 @@
 | type     | 风格类型   | string   | card, border-card  |         |
 | closable  | 真实值   | boolean   | true, false |  false  |
 | activeName  | 当前选中面板的 name  | string   |    |    |
-| on-click  | tab 被点击的钩子  | string   |    |    |
-| on-remove  | tab 被删除的钩子  | string   |    |    |
+| tab-click  | tab 被点击的钩子  | string   |    |    |
+| tab-remove  | tab 被删除的钩子  | string   |    |    |
 
 ## TAB-PANE API
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |

package.json

@@ -44,6 +44,7 @@
     "oui-dom-events": "^0.2.1",
     "postcss": "^5.0.21",
     "purecss": "^0.6.0",
+    "strip-tags": "^0.1.1",
     "uppercamelcase": "^1.1.0",
     "vue": "^2.0.0-rc.2",
     "vue-loader": "^9.3.2",

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/tabs/src/tabs.vue

@@ -1,8 +1,6 @@
 <script>
   import ElTab from './tab';
 
-  function noop() {}
-
   module.exports = {
     name: 'el-tabs',
 
@@ -15,14 +13,6 @@
       tabPosition: String,
       activeName: String,
       closable: false,
-      onRemove: {
-        type: Function,
-        default: noop
-      },
-      onClick: {
-        type: Function,
-        default: noop
-      },
       tabWidth: 0
     },
 
@@ -39,7 +29,8 @@
     watch: {
       activeName: {
         handler(val) {
-          this.currentName = val || this.$children[0].key;
+          var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+          this.currentName = val || fisrtKey;
         }
       },
 
@@ -66,13 +57,13 @@
 
           this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
         }
-        this.onRemove(tab.key);
+        this.$emit('tab-remove', tab.key);
       },
       handleTabClick(tab, event) {
         this.currentName = tab.key;
-        this.onClick(tab.key, event);
+        this.$emit('tab-click', tab.key, event);
       },
-      calcBarStyle() {
+      calcBarStyle(firstRendering) {
         if (this.type || !this.$refs.tabs) return {};
         var style = {};
         var offset = 0;
@@ -92,16 +83,19 @@
         style.width = tabWidth + 'px';
         style.transform = `translateX(${offset}px)`;
 
+        if (!firstRendering) {
+          style.transition = 'transform .3s cubic-bezier(.645,.045,.355,1), -webkit-transform .3s cubic-bezier(.645,.045,.355,1)';
+        }
         this.barStyle = style;
       }
     },
-
     mounted() {
       if (!this.currentName) {
-        this.currentName = this.$children[0].key;
+        var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+        this.currentName = this.activeName || fisrtKey;
       }
       this.$children.forEach(tab => this.tabs.push(tab));
-      this.$nextTick(() => this.calcBarStyle());
+      this.$nextTick(() => this.calcBarStyle(true));
     }
   };
 </script>

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,11 +5,14 @@
   @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-item {
-        background-color: #1f2d3d;
+      & .el-submenu .el-menu {
+        background-color: var(--dark-submenu-item-fill);
+      }
+      & .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;
-    color: #475669;
+    font-size: 14px;
+    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;
-    }
-    @e title {
-      float: none;
-      height: 56px;
-      line-height: 56px;
-      margin: 0;
-      padding-left: 20px;
-      cursor: pointer;
-      position: relative;
-      color: #475669;
-      
+      background-color: transparent;
+
       &:hover {
-        background-color: #d3dce6;
-      }
-      & [class^="el-icon-"] {
-        vertical-align: baseline;
-        margin-right: 10px;
+        background-color: var(--menu-item-hover-fill);        
       }
     }
+    @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;
+    }
+  }
 }

packages/theme-default/src/tabs.css

@@ -19,7 +19,7 @@
       height: 3px;
       background-color: var(--color-primary);
       z-index: 1;
-      transition: transform .3s cubic-bezier(.645,.045,.355,1);
+      /*transition: transform .3s cubic-bezier(.645,.045,.355,1);*/
       list-style: none;
     }
     @e item {

scripts/cooking.demo.js

@@ -2,6 +2,7 @@ var cooking = require('cooking');
 var path = require('path');
 var md = require('markdown-it')();
 var Components = require('../components.json');
+var striptags = require('strip-tags');
 
 cooking.set({
   entry: {
@@ -60,12 +61,19 @@ cooking.add('vueMarkdown', {
 
       render: function (tokens, idx) {
         var m = tokens[idx].info.trim().match(/^demo\s+(.*)$/);
+
         if (tokens[idx].nesting === 1) {
-          var html = tokens[idx + 1].content;
+          var description = (m && m.length > 1) ? m[1] : '';
+          var html = striptags(tokens[idx + 1].content, 'script');
+
+          var descriptionHTML = description
+            ? '<div class="description">' + md.render(description) + '</div>'
+            : '';
+
           return `<section class="demo">
                     <div class="source">${html}</div>
                     <div class="meta">
-                      <div class="description">${md.utils.escapeHtml(m[1])}</div>
+                      ${descriptionHTML}
                       <div class="highlight">`;
         }
         return '</section>\n';