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": [
"./packages/menu-item/index.js"
],
"menu-item-group": [
"./packages/menu-item-group/index.js"
],
"input": [
"./packages/input/index.js"
],

93
examples/docs/menu.md
View File

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

10
examples/docs/tabs.md
View File

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

1
package.json
View File

@ -44,6 +44,7 @@
"oui-dom-events": "^0.2.1",
"postcss": "^5.0.21",
"purecss": "^0.6.0",
"strip-tags": "^0.1.1",
"uppercamelcase": "^1.1.0",
"vue": "^2.0.0-rc.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>
<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>
<i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
</div>

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

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

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

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

12
scripts/cooking.demo.js
View File

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