Merge branch 'next' of github.com:eleme/element-ui into next

# Conflicts:
#	src/index.js

components.json

@@ -32,9 +32,6 @@
   "input-number": [
     "./packages/input-number/index.js"
   ],
-  "input-group": [
-    "./packages/input-group/index.js"
-  ],
   "radio": [
     "./packages/radio/index.js"
   ],
@@ -149,6 +146,9 @@
   "message": [
     "./packages/message/index.js"
   ],
+  "badge": [
+    "./packages/badge/index.js"
+  ],
   "card": [
     "./packages/card/index.js"
   ],

examples/app.vue

@@ -11,6 +11,7 @@
   }
 
   body {
+    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
     overflow: auto;
   }
 
@@ -299,10 +300,10 @@
       </div>
       <div class="pure-u-5-6 app__content">
         <header class="app__header">
-          <h1 class="app__headline">{{ $route.title || 'element 后台组件' }}</h1>
+          <h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
         </header>
         <section class="app__main" ref="main">
-          <p class="app__description">{{ $route.description }}</p>
+          <p class="app__description">{{ $route.meta.description }}</p>
           <router-view></router-view>
         </section>
         <toc main=".app__main"></toc>

examples/docs/badge.md

@@ -0,0 +1,139 @@
+## 基础用法
+展示新消息数量
+
+<el-row>
+  <el-col :span="12">
+    <el-badge :value="12" class="item">
+      <el-button size="small">评论</el-button>
+    </el-badge>
+    <el-badge :value="3" class="item">
+      <el-button size="small">回复</el-button>
+    </el-badge>
+  </el-col>
+  <el-col :span="12">
+    <el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
+      <el-dropdown-item class="clearfix">
+        评论
+        <el-badge class="mark" :value="12" />
+      </el-dropdown-item>
+      <el-dropdown-item class="clearfix">
+        回复
+        <el-badge class="mark" :value="3" />
+      </el-dropdown-item>
+    </el-dropdown>
+  </el-col>
+</el-row>
+
+```html
+<el-badge :value="12" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="3" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+
+<el-dropdown text="点我查看" type="text" :icon-separate="false" trigger="click">
+  <el-dropdown-item class="clearfix">
+    评论
+    <el-badge class="mark" :value="12" />
+  </el-dropdown-item>
+  <el-dropdown-item class="clearfix">
+    回复
+    <el-badge class="mark" :value="3" />
+  </el-dropdown-item>
+</el-dropdown>
+```
+
+## 最大值
+可自定义最大值
+
+<el-row>
+  <el-col :span="12">
+    <el-badge :value="200" :max="99" class="item">
+      <el-button size="small">评论</el-button>
+    </el-badge>
+    <el-badge :value="100" :max="10" class="item">
+      <el-button size="small">回复</el-button>
+    </el-badge>
+  </el-col>
+</el-row>
+
+```html
+<el-badge :value="200" :max="99" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="100" :max="10" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+```
+
+
+## 自定义内容
+可以显示数字外的文本内容
+
+<el-row>
+  <el-col :span="12">
+    <el-badge value="new" class="item">
+      <el-button size="small">评论</el-button>
+    </el-badge>
+    <el-badge value="hot" class="item">
+      <el-button size="small">回复</el-button>
+    </el-badge>
+  </el-col>
+</el-row>
+
+```html
+<el-badge value="new" class="item">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge value="hot" class="item">
+  <el-button size="small">回复</el-button>
+</el-badge>
+```
+
+## 小红点
+以红点的形式标注需要关注的内容
+
+<el-row>
+  <el-col :span="12">
+    <el-badge is-dot class="item">数据查询</el-badge>
+    <el-badge is-dot class="item">
+      <el-button class="share-button" icon="share" type="primary"></el-button>
+    </el-badge>
+  </el-col>
+</el-row>
+
+```html
+<el-badge is-dot class="item">数据查询</el-badge>
+<el-badge is-dot class="item">
+  <el-button class="share-button" icon="share" type="primary"></el-button>
+</el-badge>
+```
+
+<style scoped>
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+</style>
+
+## API
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| value          | 显示值      | string, number          |                       |         |
+| max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |                       |         |
+| is-dot       | 小圆点    | boolean  |    |  false |

examples/docs/input.md

@@ -9,7 +9,8 @@
         input4: '',
         input5: '',
         input6: '',
-        textarea: ''
+        textarea: '',
+        select: ''
       };
     }
   };
@@ -28,6 +29,9 @@
     .el-textarea {
       width: 414px;
     }
+    .el-input-group {
+      min-width: 260px;
+    }
     .el-input-group + .el-input-group {
       margin-top: 15px;
     }
@@ -82,22 +86,6 @@
 </el-input>
 ```
 
-<!-- ## readonly 状态
-
-<el-input
-  :readonly="true"
-  placeholder="请输入内容"
-  :value.sync="input1">
-</el-input>
-
-```html
-<el-input
-  :readonly="true"
-  placeholder="请输入内容"
-  :value.sync="input1">
-</el-input>
-``` -->
-
 ## Input 图标
 
 <div class="demo-box demo-input">
@@ -118,76 +106,54 @@
 
 ## Input Group
 
-前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
-
 ### 后置元素
 
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-input
-      placeholder="请输入内容"
-      :value.sync="input2">
-    </el-input>
-    <span class="el-input-group__label" slot="append">.com</span>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2">
+    <template slot="append">.com</template>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-input
-    placeholder="请输入内容"
-    :value.sync="input2">
-  </el-input>
-  <span class="el-input-group__label" slot="append">.com</span>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2">
+  <template slot="append">.com</template>
+</el-input>
 ```
 
 ### 前置元素
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-button slot="prepend" type="text">按钮</el-button>
-    <el-input
-      placeholder="请输入内容"
-      :value.sync="input2">
-    </el-input>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2">
+    <template slot="prepend">Http://</template>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-button slot="prepend" type="text">按钮</el-button>
-  <el-input
-    placeholder="请输入内容"
-    :value.sync="input2">
-  </el-input>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2">
+  <template slot="prepend">Http://</template>
+</el-input>
 ```
 
 ### 前置和后置元素
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
-      <li>选项一</li>
-      <li>选项二</li>
-      <li>选项三</li>
-      <li class="divider">选项四</li>
-    </el-dropdown>
-    <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
-    <el-button type="text" slot="append">搜索</el-button>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
+    <el-select v-model="select" slot="prepend" :width="100">
+      <el-option label="餐厅名" value="1"></el-option>
+      <el-option label="订单号" value="2"></el-option>
+      <el-option label="用户电话" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="search"></el-button>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
-    <li>选项一</li>
-    <li>选项二</li>
-    <li>选项三</li>
-    <li class="divider">选项四</li>
-  </el-dropdown>
-  <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
-  <el-button type="text" slot="append">搜索</el-button>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
+  <el-select v-model="select" slot="prepend" :width="100">
+    <el-option label="餐厅名" value="1"></el-option>
+    <el-option label="订单号" value="2"></el-option>
+    <el-option label="用户电话" value="3"></el-option>
+  </el-select>
+  <el-button slot="append" icon="search"></el-button>
+</el-input>
 ```
 
 ## 尺寸

examples/nav.config.json

@@ -233,6 +233,12 @@
         "path": "/tree",
         "name": "tree (tree)",
         "title": "tree"
+      },
+      {
+        "path": "/badge",
+        "name": "标记 (badge)",
+        "title": " Badge 标记",
+        "description": "出现在按钮、图标旁的数字或状态标记"
       }
     ]
   }

examples/route.config.js

@@ -10,8 +10,10 @@ const registerRoute = (config) => {
 
         route.push({
           path: page.path,
-          title: page.title || page.name,
-          description: page.description,
+          meta: {
+            title: page.title || page.name,
+            description: page.description
+          },
           component: component.default || component
         });
       })

packages/badge/cooking.conf.js

@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'ElBadge',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();

packages/badge/index.js

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

packages/badge/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "el-badge",
+  "version": "0.0.0",
+  "description": "A badge component for Vue.js.",
+  "keywords": [
+    "element",
+    "vue",
+    "component"
+  ],
+  "main": "./lib/index.js",
+  "repository": "https://github.com/element-component/element/tree/master/packages/badge",
+  "author": "elemefe",
+  "license": "MIT",
+  "dependencies": {}
+}

packages/badge/src/main.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <sup
+      v-text="content"
+      class="el-badge__content"
+      :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'el-badge',
+
+  props: {
+    value: {},
+    max: Number,
+    isDot: Boolean
+  },
+
+  computed: {
+    content() {
+      if (this.isDot) return;
+
+      const value = this.value;
+      const max = this.max;
+
+      if (typeof value === 'number' && typeof max === 'number') {
+        return max < value ? `${max}+` : value;
+      }
+
+      return value;
+    }
+  }
+};
+</script>

packages/dropdown/src/dropdown.vue

@@ -23,11 +23,9 @@
     <!-- 下拉菜单 -->
     <transition name="md-fade-bottom">
       <el-dropdown-menu
-        ref:menu
         v-if="visible"
         @mouseenter.native="handleMouseEnter"
-        @mouseleave.native="handleMouseLeave"
-      >
+        @mouseleave.native="handleMouseLeave">
         <slot></slot>
       </el-dropdown-menu>
     </transition>

packages/input-group/index.js

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

packages/input/index.js

@@ -1,9 +1,7 @@
 const ElInput = require('./src/input');
-const ElInputGroup = require('./src/input-group');
 
 ElInput.install = function(Vue) {
   Vue.component(ElInput.name, ElInput);
-  Vue.component(ElInputGroup.name, ElInputGroup);
 };
 
 module.exports = ElInput;

packages/input/src/input-group.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="el-input-group">
-    <div class="el-input-group__prepend" v-if="_slotContents.prepend">
-      <slot name="prepend"></slot>
-    </div>
-    <slot></slot>
-    <div class="el-input-group__append" v-if="_slotContents.append">
-      <slot name="append"></slot>
-    </div>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'ElInputGroup',
-    data() {
-      return {
-      };
-    }
-  };
-</script>

packages/input/src/input.vue

@@ -2,11 +2,16 @@
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
     size ? 'el-input-' + size : '',
-    {'is-disabled': disabled}
+    {
+      'is-disabled': disabled,
+      'el-input-group': $slots.prepend || $slots.append
+    }
   ]">
     <template v-if="type !== 'textarea'">
-      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
-      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 前置元素 -->
+      <div class="el-input-group__prepend" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
       <input
         :type="type"
         :name="name"
@@ -23,6 +28,13 @@
         :autocomplete="autoComplete"
         ref="input"
       >
+      <!-- input 图标 -->
+      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
+      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 后置元素 -->
+      <div class="el-input-group__append" v-if="$slots.append">
+        <slot name="append"></slot>
+      </div>
     </template>
     <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
     <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>

packages/theme-default/src/badge.css

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b badge {
+    position: relative;
+    vertical-align: middle;
+    display: inline-block;
+
+    @e content {
+      background-color: var(--badge-fill);
+      border-radius: var(--badge-radius);
+      color: #fff;
+      display: inline-block;
+      font-size: var(--badge-font-size);
+      height: var(--badge-size);
+      line-height: var(--badge-size);
+      padding: 0 var(--badge-padding);
+      text-align: center;
+      white-space: nowrap;
+      border: 1px solid #fff;
+
+      @when fixed {
+        position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
+        transform: translateY(-50%) translateX(100%);
+
+        @when dot {
+          right: 5px;
+        }
+      }
+
+      @when dot {
+        size: 8px 8px;
+        padding: 0;
+        right: 0;
+        border-radius: 50%;
+      }
+    }
+  }
+}

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

@@ -151,7 +151,7 @@
   --input-large-height: 42px;
 
   --input-small-font-size: 13px;
-  --input-small-height: 28px;
+  --input-small-height: 30px;
 
   --input-mini-font-size: 12px;
   --input-mini-height: 22px;
@@ -354,6 +354,14 @@
     --dropdown-menuItem-hover-fill: #e5e9f2;
     --dropdown-menuItem-hover-color: #475669;
 
+  /* Badge
+   -------------------------- */
+   --badge-fill: var(--color-danger);
+   --badge-radius: 10px;
+   --badge-font-size: 12px;
+   --badge-padding: 6px;
+   --badge-size: 18px;
+
     /*Card
     --------------------------*/
     --card-border-color: var(--disabled-border-base);

packages/theme-default/src/index.css

@@ -32,5 +32,6 @@
 @import "./row.css";
 @import "./col.css";
 @import "./spinner.css";
+@import "./badge.css";
 @import "./card.css";
 @import "./rate.css";

packages/theme-default/src/input-recommend.css

@@ -1,29 +0,0 @@
-@charset "UTF-8";
-@import "./common/var.css";
-/*@import "./core/dropdown.css";*/
-@import "./core/tag.css";
-@import "./core/input.css";
-
-@component-namespace element {
-  @b input {
-    display: inline-block;
-    font-size: var(--input-font-size);
-    position: relative;
-
-    @e placeholder {
-      background-color: #fff;
-      color: var(--input-border-color);
-      left: 4px;
-      padding: 0 2px;
-      position: absolute;
-      top: calc(var(--input-height) / 2 - var(--input-font-size) + 4);
-      transition: all 0.2s ease-out;
-      z-index: var(--index-normal);
-
-      @when enter {
-        color: var(--input-border-color-hover);
-        top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1);
-      }
-    }
-  }
-}

packages/theme-default/src/input.css

@@ -4,6 +4,7 @@
 @component-namespace el {
   @b input {
     position: relative;
+    font-size: var(--font-size-base);
     
     @e inner {
       display: block;
@@ -11,7 +12,6 @@
       box-sizing: border-box;
       width: 100%;
       height: var(--input-height);
-      font-size: var(--font-size-base);
       color: var(--input-color);
       background-color: #fff;
       background-image: none;
@@ -71,75 +71,87 @@
   }
 
   @b input-large {
+    font-size: var(--input-large-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-large-font-size);
       height: var(--input-large-height);
     }
   }
   @b input-small {
+    font-size: var(--input-small-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-small-font-size);
       height: var(--input-small-height);
     }
   }
   @b input-mini {
+    font-size: var(--input-mini-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-mini-font-size);
       height: var(--input-mini-height);
     }
   }
 
   @b input-group {
     display: table;
+    border-collapse: separate;
 
-    & .el-input {
+    & > .el-input__inner {
       vertical-align: middle;
       display: table-cell;
     }
-    @e label {
-      padding: 0 10px;
-      font-size: 13px;
-    }
-    @e prepend {
+    @e append, prepend {
+      background-color: #f9fafc;
+      color: #99a9bf;
       vertical-align: middle;
       display: table-cell;
       position: relative;
       border: var(--border-base);
-      border-right: 0;
       border-radius: 4px;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      padding: 0 10px;
+      width: 1%;
+      white-space: nowrap;
+
+      & .el-select,
+      & .el-button {
+        display: block;
+        margin: -10px;
+      }
 
-      & .el-dropdown--text {
-        padding: 0 10px;
+      & .el-button,
+      & .el-select .el-input__inner,
+      & .el-select:hover .el-input__inner {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        border-top: 0;
+        border-bottom: 0;
       }
+      & .el-button,
+      & .el-input {
+        font-size: inherit;
+      }
+    }
+    @e prepend {
+      border-right: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
     @e append {
-      vertical-align: middle;
-      display: table-cell;
-      position: relative;
-      border: var(--border-base);
       border-left: 0;
-      border-radius: 4px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    & .el-input:first-child {
-      .el-input__inner {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    & .el-input__inner:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
-    & .el-input:last-child {
-      .el-input__inner {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+    & .el-input__inner:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    & .el-input:not(:first-child):not(:last-child) {
-      .el-input__inner {
-        border-radius: 0;
-      }
+    & .el-input__inner:not(:first-child):not(:last-child) {
+      border-radius: 0;
     }
   }
 

src/index.js

@@ -9,7 +9,6 @@ import Submenu from '../packages/submenu/index.js';
 import MenuItem from '../packages/menu-item/index.js';
 import Input from '../packages/input/index.js';
 import InputNumber from '../packages/input-number/index.js';
-import InputGroup from '../packages/input-group/index.js';
 import Radio from '../packages/radio/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import RadioButton from '../packages/radio-button/index.js';
@@ -50,6 +49,7 @@ import Spinner from '../packages/spinner/index.js';
 import Message from '../packages/message/index.js';
 import Card from '../packages/card/index.js';
 import Rate from '../packages/rate/index.js';
+import Badge from '../packages/badge/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -65,7 +65,6 @@ const install = function(Vue) {
   Vue.component(MenuItem.name, MenuItem);
   Vue.component(Input.name, Input);
   Vue.component(InputNumber.name, InputNumber);
-  Vue.component(InputGroup.name, InputGroup);
   Vue.component(Radio.name, Radio);
   Vue.component(RadioGroup.name, RadioGroup);
   Vue.component(RadioButton.name, RadioButton);
@@ -103,6 +102,7 @@ const install = function(Vue) {
   Vue.component(Message.name, Message);
   Vue.component(Card.name, Card);
   Vue.component(Rate.name, Rate);
+  Vue.component(Badge.name, Badge);
 
   Vue.use(Loading);
 
@@ -132,7 +132,6 @@ module.exports = {
   MenuItem,
   Input,
   InputNumber,
-  InputGroup,
   Radio,
   RadioGroup,
   RadioButton,
@@ -170,7 +169,8 @@ module.exports = {
   Upload,
   Progress,
   Spinner,
-  Message,
   Card,
-  Rate
+  Rate,
+  Message,
+  Badge
 };