github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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

# Conflicts:
#	src/index.js
pull/2/head
Leopoldthecoder 2016-08-17 19:58:59 +08:00
parent 1c3d119caf 383c60966d
commit 05e7ea8311
21 changed files with 394 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components.json
View File

@ -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"
],

5
examples/app.vue
View File

@ -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>

139
examples/docs/badge.md Normal file
View File

@ -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 |

92
examples/docs/input.md
View File

@ -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 placeholder="请输入内容" :value.sync="input2">
<template slot="append">.com</template>
</el-input>
<span class="el-input-group__label" slot="append">.com</span>
</el-input-group>
</div>
```html
<el-input-group>
<el-input
placeholder="请输入内容"
:value.sync="input2">
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="append">.com</template>
</el-input>
<span class="el-input-group__label" slot="append">.com</span>
</el-input-group>
```
### 前置元素
<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 placeholder="请输入内容" :value.sync="input2">
<template slot="prepend">Http://</template>
</el-input>
</el-input-group>
</div>
```html
<el-input-group>
<el-button slot="prepend" type="text">按钮</el-button>
<el-input
placeholder="请输入内容"
:value.sync="input2">
<el-input placeholder="请输入内容" :value.sync="input2">
<template slot="prepend">Http://</template>
</el-input>
</el-input-group>
```
### 前置和后置元素
<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>
```
## 尺寸

6
examples/nav.config.json
View File

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

4
examples/route.config.js
View File

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

31
packages/badge/cooking.conf.js Normal file
View File

@ -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();

7
packages/badge/index.js Normal file
View File

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

15
packages/badge/package.json Normal file
View File

@ -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": {}
}

36
packages/badge/src/main.vue Normal file
View File

@ -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>

4
packages/dropdown/src/dropdown.vue
View File

@ -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>

7
packages/input-group/index.js
View File

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

2
packages/input/index.js
View File

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

20
packages/input/src/input-group.vue
View File

@ -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>

18
packages/input/src/input.vue
View File

@ -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>

40
packages/theme-default/src/badge.css Normal file
View File

@ -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%;
}
}
}
}

10
packages/theme-default/src/common/var.css
View File

@ -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);

1
packages/theme-default/src/index.css
View File

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

29
packages/theme-default/src/input-recommend.css
View File

@ -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);
}
}
}
}

72
packages/theme-default/src/input.css
View File

@ -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,77 +71,89 @@
}
@b input-large {
& .el-input__inner {
font-size: var(--input-large-font-size);
& .el-input__inner {
height: var(--input-large-height);
}
}
@b input-small {
& .el-input__inner {
font-size: var(--input-small-font-size);
& .el-input__inner {
height: var(--input-small-height);
}
}
@b input-mini {
& .el-input__inner {
font-size: var(--input-mini-font-size);
& .el-input__inner {
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 {
@e append, prepend {
background-color: #f9fafc;
color: #99a9bf;
vertical-align: middle;
display: table-cell;
position: relative;
border: var(--border-base);
border-radius: 4px;
padding: 0 10px;
font-size: 13px;
width: 1%;
white-space: nowrap;
& .el-select,
& .el-button {
display: block;
margin: -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 {
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;
& .el-dropdown--text {
padding: 0 10px;
}
}
@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 {
& .el-input__inner:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
& .el-input:last-child {
.el-input__inner {
& .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 {
& .el-input__inner:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
}
@b textarea {

10
src/index.js
View File

@ -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
};