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";