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

Merge branch 'next' into feat/fix-buglist

pull/2/head
qingwei.li 2016-08-23 15:09:12 +08:00
parent 6975c481fe e5e6140d37
commit a44c25dfd4
12 changed files with 202 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components.json
View File

@ -26,6 +26,9 @@
"menu-item": [ "menu-item": [
"./packages/menu-item/index.js" "./packages/menu-item/index.js"
], ],
"menu-item-group": [
"./packages/menu-item-group/index.js"
],
"input": [ "input": [
"./packages/input/index.js" "./packages/input/index.js"
], ],

93
examples/docs/menu.md
View File

@ -133,7 +133,7 @@
```html ```html
<div class="nav"> <div class="nav">
<h1>Element</h1> <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="1">处理中心</el-menu-item>
<el-menu-item index="2">我的工作台</el-menu-item> <el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item> <el-menu-item index="3">订单管理</el-menu-item>
@ -196,19 +196,23 @@
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" default-active="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item-group title="分组一">
<el-submenu index="sub1"> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="sub1">
<el-menu-item index="2-1">选项1</el-menu-item> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu> <el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="sub2"> </el-submenu>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-menu-item-group>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item-group title="分组二">
<el-menu-item index="3-2">选项2</el-menu-item> <el-submenu index="sub2">
<el-menu-item index="3-3">选项3</el-menu-item> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
</el-submenu> <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> </el-menu>
</div> </div>
</div> </div>
@ -217,19 +221,23 @@
<div class="nav nav-vertical"> <div class="nav nav-vertical">
<h1>Element</h1> <h1>Element</h1>
<el-menu mode="vertical" default-active="2-1"> <el-menu mode="vertical" default-active="2-1">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item> <el-menu-item-group title="分组一">
<el-submenu index="sub1"> <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-submenu index="sub1">
<el-menu-item index="2-1">选项1</el-menu-item> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu> <el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="sub2"> </el-submenu>
<template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-menu-item-group>
<el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item-group title="分组二">
<el-menu-item index="3-2">选项2</el-menu-item> <el-submenu index="sub2">
<el-menu-item index="3-3">选项3</el-menu-item> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
</el-submenu> <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> </el-menu>
</div> </div>
``` ```
@ -237,13 +245,18 @@
<div class="demo-box" style="width: 200px;"> <div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <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-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item-group title="分组1">
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</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>
<el-submenu index="sub3"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -270,13 +283,18 @@
```html ```html
<div class="nav nav-vertical nav-dark"> <div class="nav nav-vertical nav-dark">
<h1>Element</h1> <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-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2"> <el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template> <template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item-group title="分组1">
<el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-3">选项3</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>
<el-submenu index="sub3"> <el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template> <template slot="title"><i class="el-icon-setting"></i>导航三</template>
@ -322,3 +340,8 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| key | 唯一标志 | string | | | | key | 唯一标志 | string | | |
## menu-group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | | |

10
examples/docs/tabs.md
View File

@ -38,7 +38,7 @@
## 基础使用 ## 基础使用
<div> <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> <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> <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> <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}} {{activeName2}}
```html ```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> <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 | | | type | 风格类型 | string | card, border-card | |
| closable | 真实值 | boolean | true, false | false | | closable | 真实值 | boolean | true, false | false |
| activeName | 当前选中面板的 name | string | | | | activeName | 当前选中面板的 name | string | | |
| on-click | tab 被点击的钩子 | string | | | | tab-click | tab 被点击的钩子 | string | | |
| on-remove | tab 被删除的钩子 | string | | | | tab-remove | tab 被删除的钩子 | string | | |
## TAB-PANE API ## TAB-PANE API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |

1
package.json
View File

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

7
packages/menu-item-group/index.js Normal file
View File

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

52
packages/menu/src/menu-item-group.vue Normal file
View File

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

2
packages/menu/src/submenu.vue
View File

@ -55,7 +55,7 @@
<template> <template>
<li class="el-submenu" :class="{'is-opened': opened}"> <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> <slot name="title"></slot>
<i class="el-submenu__icon-arrow el-icon-arrow-up"></i> <i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
</div> </div>

28
packages/tabs/src/tabs.vue
View File

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

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

@ -378,4 +378,16 @@
--steps-border-color: var(--disabled-border-base); --steps-border-color: var(--disabled-border-base);
--steps-border-radius: 4px; --steps-border-radius: 4px;
--steps-padding: 20px; --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;
} }

71
packages/theme-default/src/menu.css
View File

@ -5,11 +5,14 @@
@b menu { @b menu {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
background-color: #eff2f7;
list-style: none; list-style: none;
position: relative; position: relative;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
& li {
list-style: none;
}
@m vertical { @m vertical {
height: auto; height: auto;
@ -22,10 +25,9 @@
padding-left: 20px; padding-left: 20px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
color: #475669;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--menu-item-hover-fill);
} }
& .el-menu-item__bar { & .el-menu-item__bar {
display: none; display: none;
@ -36,18 +38,20 @@
} }
} }
@m dark { @m dark {
background-color: #324057;
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
color: #c0ccda; color: #c0ccda;
} }
& .el-menu-item {
background-color: var(--dark-menu-item-fill);
}
&.el-menu--vertical { &.el-menu--vertical {
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
&:hover { &:hover {
background-color: #475669; background-color: var(--dark-menu-item-hover-fill);
} }
&.is-active { &.is-active {
background-color: #5e6d82; background-color: #5e6d82;
@ -55,13 +59,15 @@
} }
} }
} }
& .el-submenu .el-menu {
& .el-submenu .el-menu-item { background-color: var(--dark-submenu-item-fill);
background-color: #1f2d3d; }
& .el-submenu .el-menu-item:not(.el-submenu__title) {
background-color: transparent;
color: #99a9bf; color: #99a9bf;
&:hover { &:hover {
background-color: #475669; background-color: var(--dark-menu-item-hover-fill);
} }
&.is-active { &.is-active {
background-color: #5e6d82; background-color: #5e6d82;
@ -71,8 +77,8 @@
} }
} }
@b menu-item { @b menu-item {
font-size: 16px; font-size: 14px;
color: #475669; color: var(--menu-item-color);
float: left; float: left;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
@ -81,6 +87,7 @@
position: relative; position: relative;
transition: var(--md-fade-transition); transition: var(--md-fade-transition);
transform-origin: center center; transform-origin: center center;
background-color: var(--menu-item-fill);
@e bar { @e bar {
content: ''; content: '';
@ -107,29 +114,20 @@
@b submenu { @b submenu {
& .el-menu { & .el-menu {
height: auto; 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; padding-left: 46px;
} background-color: transparent;
@e title {
float: none;
height: 56px;
line-height: 56px;
margin: 0;
padding-left: 20px;
cursor: pointer;
position: relative;
color: #475669;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--menu-item-hover-fill);
}
& [class^="el-icon-"] {
vertical-align: baseline;
margin-right: 10px;
} }
} }
@e title [class^="el-icon-"] {
vertical-align: baseline;
margin-right: 10px;
}
@e icon-arrow { @e icon-arrow {
position: absolute; position: absolute;
margin: 0; 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;
}
}
} }

2
packages/theme-default/src/tabs.css
View File

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

12
scripts/cooking.demo.js
View File

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