Add badge component

components.json

@@ -148,5 +148,8 @@
   ],
   "message": [
     "./packages/message/index.js"
+  ],
+  "badge": [
+    "./packages/badge/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 dot class="item">数据查询</el-badge>
+    <el-badge dot class="item">
+      <el-button class="share-button" icon="share" type="primary"></el-button>
+    </el-badge>
+  </el-col>
+</el-row>
+
+```html
+<el-badge dot class="item">数据查询</el-badge>
+<el-badge 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  |                       |         |
+| dot       | 小圆点    | boolean  |    |  false |

examples/nav.config.json

@@ -222,6 +222,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,34 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <sup
+      v-text="content"
+      class="el-badge__content"
+      :class="{ 'is-fixed': $slots.default, 'is-dot': dot }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'el-badge',
+
+  props: {
+    value: {},
+    max: Number,
+    dot: Boolean
+  },
+
+  computed: {
+    content() {
+      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/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

@@ -353,4 +353,12 @@
     --dropdown-menu-box-shadow: 0 0 6px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.12);
     --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;
 }

packages/theme-default/src/index.css

@@ -32,3 +32,4 @@
 @import "./row.css";
 @import "./col.css";
 @import "./spinner.css";
+@import "./badge.css";