drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2 from iview/2.0

Browse source 
Merge
This commit is contained in:
Lawrence Lee 2017-06-06 15:25:24 +08:00 • committed by GitHub
commit af43876007
27 changed files with 467 additions and 299 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -4,7 +4,14 @@
</a>
</p>
# iView [![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) [![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview) [![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview) [![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
# iView
[![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview)
[![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview)
[![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
[![NPM downloads](https://img.shields.io/npm/dt/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/iview.min.js?compression=gzip&label=gzip%20size:%20JS&style=flat-square)
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/styles/iview.css?compression=gzip&label=gzip%20size:%20CSS&style=flat-square)
[![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
### A high quality UI Toolkit built on Vue.js.
@ -82,6 +89,7 @@ Normal browsers and Internet Explorer 9+.
| [Aresn](https://github.com/icarusion) | ![](https://avatars3.githubusercontent.com/u/5370542?v=3&s=60) |
| [jingsam](https://github.com/jingsam) | ![](https://avatars3.githubusercontent.com/u/1522494?v=3&s=60) |
| [rijn](https://github.com/rijn) | ![](https://avatars2.githubusercontent.com/u/6976367?v=3&s=60) |
| [lcx960324](https://github.com/lcx960324) | ![](https://avatars3.githubusercontent.com/u/9768245?v=3&s=60) |
| [GITleonine1989](https://github.com/GITleonine1989) | ![](https://avatars1.githubusercontent.com/u/7582490?v=3&s=60) |
| [huixisheng](https://github.com/huixisheng) | ![](https://avatars1.githubusercontent.com/u/1518967?v=3&s=60) |

33
examples/routers/badge.vue
View file

@ -14,37 +14,24 @@
</style>
<template>
<div>
<Badge count="3">
<Badge dot :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge dot>
<a href="#" class="demo-badge"></a>
</Badge>
<Badge dot>
<Icon type="ios-bell-outline" size="26"></Icon>
</Badge>
<Badge dot>
<a href="#">可以是一个链接</a>
</Badge>
<Badge count="100">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge count="1000" overflow-count="999">
<a href="#" class="demo-badge"></a>
</Badge>
<br>
<Badge count="10"></Badge>
<br><br>
<Badge count="20" class-name="demo-badge-alone"></Badge>
<Button @click="setCount">set count</Button>
</div>
</template>
<script>
export default {
props: {},
data () {
return {};
return {
count: 50
};
},
computed: {},
methods: {}
methods: {
setCount () {
this.count = 10;
}
}
};
</script>

16
examples/routers/form.vue
View file

@ -2,12 +2,7 @@
<div style="width: 300px;">
<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<Form-item label="爱好" prop="interest">
<Checkbox-group v-model="formValidate.interest">
<Checkbox label="吃饭"></Checkbox>
<Checkbox label="睡觉"></Checkbox>
<Checkbox label="跑步"></Checkbox>
<Checkbox label="看电影"></Checkbox>
</Checkbox-group>
<Input v-model="formValidate.interest" number></Input>
</Form-item>
<Form-item>
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
@ -21,12 +16,15 @@
data () {
return {
formValidate: {
interest: ['吃饭', '跑步']
interest: ''
},
ruleValidate: {
interest: [
{ required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
{ type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
{
required: true,
type: 'number',
trigger: 'change'
}
]
}
}

209
examples/routers/menu.vue
View file

@ -1,44 +1,48 @@
<template>
<div>
<Menu mode="horizontal" :theme="theme1" @on-select="s">
<Row type="flex" justify="center" align="middle">
<i-col span="12">
<Menu-item name="1">
<Row>
<i-col span="8">
<Menu :theme="theme2">
<Submenu name="1">
<template slot="title">
<Icon type="ios-paper"></Icon>
内容管理
</Menu-item>
<Menu-item name="2">
</template>
<Menu-item name="1-1">文章管理</Menu-item>
<Menu-item name="1-2">评论管理</Menu-item>
<Menu-item name="1-3">举报管理</Menu-item>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-people"></Icon>
用户管理
</Menu-item>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</template>
<Menu-group title="使用">
<Menu-item name="3-1">新增和启动</Menu-item>
<Menu-item name="3-2">活跃分析</Menu-item>
<Menu-item name="3-3">时段分析</Menu-item>
</Menu-group>
<Menu-group title="留存">
<Menu-item name="3-4">用户留存</Menu-item>
<Menu-item name="3-5">流失用户</Menu-item>
</Menu-group>
</Submenu>
<Menu-item name="4">
<Icon type="settings"></Icon>
综合设置
</Menu-item>
</i-col>
</Row>
</Menu>
</template>
<Menu-item name="2-1">新增用户</Menu-item>
<Menu-item name="2-2">活跃用户</Menu-item>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</template>
<Menu-group title="使用">
<Menu-item name="3-1">新增和启动</Menu-item>
<Menu-item name="3-2">活跃分析</Menu-item>
<Menu-item name="3-3">时段分析</Menu-item>
</Menu-group>
<Menu-group title="留存">
<Menu-item name="3-4">用户留存</Menu-item>
<Menu-item name="3-5">流失用户</Menu-item>
</Menu-group>
</Submenu>
</Menu>
</i-col>
</Row>
<br>
<p>切换主题</p>
<Radio-group v-model="theme1">
<Radio-group v-model="theme2">
<Radio label="light"></Radio>
<Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</Radio-group>
</div>
</template>
@ -46,149 +50,8 @@
export default {
data () {
return {
theme1: 'light'
}
},
methods: {
s (s) {
console.log(s)
theme2: 'light'
}
}
}
</script>
<!--<template>-->
<!--<div>-->
<!--<Row>-->
<!--<i-col span="8">-->
<!--<Menu :theme="theme2" @on-select="s">-->
<!--<Submenu name="1">-->
<!--<template slot="title">-->
<!--<Icon type="ios-paper"></Icon>-->
<!--内容管理-->
<!--</template>-->
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="2">-->
<!--<template slot="title">-->
<!--<Icon type="ios-people"></Icon>-->
<!--用户管理-->
<!--</template>-->
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="3">-->
<!--<template slot="title">-->
<!--<Icon type="stats-bars"></Icon>-->
<!--统计分析-->
<!--</template>-->
<!--<Menu-group title="使用">-->
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
<!--</Menu-group>-->
<!--<Menu-group title="留存">-->
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
<!--</Menu-group>-->
<!--</Submenu>-->
<!--</Menu>-->
<!--</i-col>-->
<!--<i-col span="8">-->
<!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
<!--<Submenu name="1">-->
<!--<template slot="title">-->
<!--<Icon type="ios-paper"></Icon>-->
<!--内容管理-->
<!--</template>-->
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="2">-->
<!--<template slot="title">-->
<!--<Icon type="ios-people"></Icon>-->
<!--用户管理-->
<!--</template>-->
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="3">-->
<!--<template slot="title">-->
<!--<Icon type="stats-bars"></Icon>-->
<!--统计分析-->
<!--</template>-->
<!--<Menu-group title="使用">-->
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
<!--</Menu-group>-->
<!--<Menu-group title="留存">-->
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
<!--</Menu-group>-->
<!--</Submenu>-->
<!--</Menu>-->
<!--</i-col>-->
<!--<i-col span="8">-->
<!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
<!--<Submenu name="1">-->
<!--<template slot="title">-->
<!--<Icon type="ios-paper"></Icon>-->
<!--内容管理-->
<!--</template>-->
<!--<Menu-item name="1-1">文章管理</Menu-item>-->
<!--<Menu-item name="1-2">评论管理</Menu-item>-->
<!--<Menu-item name="1-3">举报管理</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="2">-->
<!--<template slot="title">-->
<!--<Icon type="ios-people"></Icon>-->
<!--用户管理-->
<!--</template>-->
<!--<Menu-item name="2-1">新增用户</Menu-item>-->
<!--<Menu-item name="2-2">活跃用户</Menu-item>-->
<!--</Submenu>-->
<!--<Submenu name="3">-->
<!--<template slot="title">-->
<!--<Icon type="stats-bars"></Icon>-->
<!--统计分析-->
<!--</template>-->
<!--<Menu-group title="使用">-->
<!--<Menu-item name="3-1">新增和启动</Menu-item>-->
<!--<Menu-item name="3-2">活跃分析</Menu-item>-->
<!--<Menu-item name="3-3">时段分析</Menu-item>-->
<!--</Menu-group>-->
<!--<Menu-group title="留存">-->
<!--<Menu-item name="3-4">用户留存</Menu-item>-->
<!--<Menu-item name="3-5">流失用户</Menu-item>-->
<!--</Menu-group>-->
<!--</Submenu>-->
<!--</Menu>-->
<!--</i-col>-->
<!--</Row>-->
<!--<br>-->
<!--<p>切换主题</p>-->
<!--<Radio-group v-model="theme2">-->
<!--<Radio label="light"></Radio>-->
<!--<Radio label="dark"></Radio>-->
<!--</Radio-group>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--theme2: 'light'-->
<!--}-->
<!--},-->
<!--methods: {-->
<!--s (s) {-->
<!--console.log(s);-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->

36
examples/routers/modal.vue
View file

@ -1,17 +1,53 @@
<template>
<div>
{{ val }}
<Button @click="confirm">标准</Button>
<Button @click="custom">自定义按钮文字</Button>
<Button @click="async">异步关闭</Button>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
<Modal
v-model="modal1"
title="普通的Modal对话框标题"
@on-ok="ok"
@on-cancel="cancel">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false,
val: ''
}
},
methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
},
confirm () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
render: (h) => {
return h('Input', {
props: {
value: this.val,
autofocus: true
},
on: {
input: (val) => {
this.val = val;
}
}
}, '一个按钮')
},
onOk: () => {
this.$Message.info('点击了确定');
},

3
examples/routers/table.vue
View file

@ -84,7 +84,8 @@
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗'
address: '北京市海淀区西二旗',
_disableExpand: true
},
{
name: '李小红',

10
examples/routers/tabs.vue
View file

@ -1,6 +1,6 @@
<template>
<Tabs value="name1" :animated="false">
<Tab-pane label="标签一" name="name1">
<Tabs value="name1" :animated="true">
<Tab-pane :label="label1" name="name1">
<Table :columns="columns1" :data="data1"></Table>
</Tab-pane>
<Tab-pane label="标签二" name="name2">
@ -15,6 +15,12 @@
export default {
data () {
return {
label1: (h) => {
return h('div', [
h('span', '标签一'),
h('Button', 'button')
]);
},
columns1: [
{
title: '姓名',

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "2.0.0-rc.15",
"version": "2.0.0-rc.16",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

14
src/components/badge/badge.vue
View file

@ -61,17 +61,9 @@
}
return status;
}
},
data () {
return {
alone: false
};
},
mounted () {
const child_length = this.$refs.badge.children.length;
if (child_length === 1) {
this.alone = true;
},
alone () {
return this.$slots.default === undefined;
}
}
};

79
src/components/base/collapse-transition.js Normal file
View file

@ -0,0 +1,79 @@
// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
import { addClass, removeClass } from '../../utils/assist';
const Transition = {
beforeEnter(el) {
addClass(el, 'collapse-transition');
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = '0';
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = '';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = 'hidden';
},
afterEnter(el) {
// for safari: remove class then reset height is necessary
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
},
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + 'px';
el.style.overflow = 'hidden';
},
leave(el) {
if (el.scrollHeight !== 0) {
// for safari: add class after set height, or it will jump to zero height suddenly, weired
addClass(el, 'collapse-transition');
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el) {
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
};
export default {
name: 'CollapseTransition',
functional: true,
render(h, { children }) {
const data = {
on: Transition
};
return h('transition', data, children);
}
};

30
src/components/base/render.vue Normal file
View file

@ -0,0 +1,30 @@
<template>
<div ref="cell"></div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'RenderCell',
props: {
render: Function
},
methods: {
compile () {
if (this.render) {
this.$el.innerHTML = '';
const component = new Vue({
functional: true,
render: (h) => {
return this.render(h);
}
});
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
}
}
},
mounted () {
this.compile();
}
};
</script>

2
src/components/checkbox/checkbox.vue
View file

@ -105,7 +105,7 @@
this.$emit('input', checked);
if (this.group) {
this.$parent.change(this.model);
this.parent.change(this.model);
} else {
this.$emit('on-change', checked);
this.dispatch('FormItem', 'on-form-change', checked);

11
src/components/collapse/panel.vue
View file

@ -4,18 +4,21 @@
<Icon type="arrow-right-b"></Icon>
<slot></slot>
</div>
<div :class="contentClasses" v-show="isActive">
<div :class="boxClasses"><slot name="content"></slot></div>
</div>
<collapse-transition>
<div :class="contentClasses" v-show="isActive">
<div :class="boxClasses"><slot name="content"></slot></div>
</div>
</collapse-transition>
</div>
</template>
<script>
import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
const prefixCls = 'ivu-collapse';
export default {
name: 'Panel',
components: { Icon },
components: { Icon, CollapseTransition },
props: {
name: {
type: String

4
src/components/loading-bar/loading-bar.js
View file

@ -31,9 +31,7 @@ LoadingBar.newInstance = properties => {
},
component: loading_bar,
destroy () {
setTimeout(function() {
document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0].parentElement);
}, 500);
document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
}
};
};

7
src/components/menu/submenu.vue
View file

@ -4,7 +4,9 @@
<slot name="title"></slot>
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
<collapse-transition v-if="mode === 'vertical'">
<ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
</collapse-transition>
<transition name="slide-up" v-else>
<Drop
v-show="opened"
@ -17,6 +19,7 @@
<script>
import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
import { getStyle, findComponentUpward } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
@ -25,7 +28,7 @@
export default {
name: 'Submenu',
mixins: [ Emitter ],
components: { Icon, Drop },
components: { Icon, Drop, CollapseTransition },
props: {
name: {
type: [String, Number],

73
src/components/modal/confirm.js
View file

@ -8,31 +8,6 @@ const prefixCls = 'ivu-modal-confirm';
Modal.newInstance = properties => {
const _props = properties || {};
// let props = '';
// Object.keys(_props).forEach(prop => {
// props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
// });
//
// const div = document.createElement('div');
// div.innerHTML = `
// <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
// <div class="${prefixCls}">
// <div class="${prefixCls}-head">
// <div class="${prefixCls}-head-title" v-html="title"></div>
// </div>
// <div class="${prefixCls}-body">
// <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
// <div v-html="body"></div>
// </div>
// <div class="${prefixCls}-footer">
// <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
// <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
// </div>
// </div>
// </Modal>
// `;
// document.body.appendChild(div);
const Instance = new Vue({
mixins: [ Locale ],
data: Object.assign({}, _props, {
@ -73,6 +48,35 @@ Modal.newInstance = properties => {
}
}, this.localeOkText));
// render content
let body_render;
if (this.render) {
body_render = h('div', {
attrs: {
class: `${prefixCls}-body ${prefixCls}-body-render`
}
}, [this.render(h)]);
} else {
body_render = h('div', {
attrs: {
class: `${prefixCls}-body`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
domProps: {
innerHTML: this.body
}
})
]);
}
return h(Modal, {
props: Object.assign({}, _props, {
width: this.width,
@ -106,24 +110,7 @@ Modal.newInstance = properties => {
}
})
]),
h('div', {
attrs: {
class: `${prefixCls}-body`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
domProps: {
innerHTML: this.body
}
})
]),
body_render,
h('div', {
attrs: {
class: `${prefixCls}-footer`

8
src/components/modal/index.js
View file

@ -2,18 +2,20 @@ import Modal from './confirm';
let modalInstance;
function getModalInstance () {
function getModalInstance (render = undefined) {
modalInstance = modalInstance || Modal.newInstance({
closable: false,
maskClosable: false,
footerHide: true
footerHide: true,
render: render
});
return modalInstance;
}
function confirm (options) {
let instance = getModalInstance();
const render = ('render' in options) ? options.render : undefined;
let instance = getModalInstance(render);
options.onRemove = function () {
modalInstance = null;

2
src/components/modal/modal.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div v-transfer-dom>
<transition :name="transitionNames[1]">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
</transition>

2
src/components/table/cell.vue
View file

@ -5,7 +5,7 @@
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template>
<template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'expand'">
<template v-if="renderType === 'expand' && !row._disableExpand">
<div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon>
</div>

2
src/components/tabs/pane.vue
View file

@ -11,7 +11,7 @@
type: String
},
label: {
type: String,
type: [String, Function],
default: ''
},
icon: {

7
src/components/tabs/tabs.vue
View file

@ -8,7 +8,8 @@
<div :class="barClasses" :style="barStyle"></div>
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
<Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
{{ item.label }}
<Render v-if="item.labelType === 'function'" :render="item.label"></Render>
<template v-else>{{ item.label }}</template>
<Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
</div>
</div>
@ -22,6 +23,7 @@
</template>
<script>
import Icon from '../icon/icon.vue';
import Render from '../base/render.vue';
import { oneOf, getStyle } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
@ -30,7 +32,7 @@
export default {
name: 'Tabs',
mixins: [ Emitter ],
components: { Icon },
components: { Icon, Render },
props: {
value: {
type: [String, Number]
@ -128,6 +130,7 @@
this.navList = [];
this.getTabs().forEach((pane, index) => {
this.navList.push({
labelType: typeof pane.label,
label: pane.label,
icon: pane.icon || '',
name: pane.currentName || index,

29
src/components/tree/node.vue
View file

@ -1,32 +1,33 @@
<template>
<transition name="slide-up">
<collapse-transition>
<ul :class="classes" v-show="visible">
<li>
<span :class="arrowClasses" @click="handleExpand">
<Icon type="arrow-right-b"></Icon>
</span>
<Checkbox
v-if="showCheckbox"
:value="data.checked"
:indeterminate="indeterminate"
:disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox>
v-if="showCheckbox"
:value="data.checked"
:indeterminate="indeterminate"
:disabled="data.disabled || data.disableCheckbox"
@click.native.prevent="handleCheck"></Checkbox>
<span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
<Tree-node
v-for="item in data.children"
:key="item"
:data="item"
:visible="data.expand"
:multiple="multiple"
:show-checkbox="showCheckbox">
v-for="item in data.children"
:key="item"
:data="item"
:visible="data.expand"
:multiple="multiple"
:show-checkbox="showCheckbox">
</Tree-node>
</li>
</ul>
</transition>
</collapse-transition>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue';
import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
import Emitter from '../../mixins/emitter';
import { findComponentsDownward } from '../../utils/assist';
@ -35,7 +36,7 @@
export default {
name: 'TreeNode',
mixins: [ Emitter ],
components: { Checkbox, Icon },
components: { Checkbox, Icon, CollapseTransition },
props: {
data: {
type: Object,

6
src/directives/transfer-dom.js
View file

@ -18,6 +18,7 @@ const directive = {
inserted (el, { value }, vnode) {
el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
const parentNode = el.parentNode;
if (!parentNode) return;
const home = document.createComment('');
let hasMovedOut = false;
@ -38,6 +39,7 @@ const directive = {
componentUpdated (el, { value }) {
// need to make sure children are done updating (vs. `update`)
const ref$1 = el.__transferDomData;
if (!ref$1) return;
// homes.get(el)
const parentNode = ref$1.parentNode;
const home = ref$1.home;
@ -59,7 +61,9 @@ const directive = {
}
},
unbind: function unbind (el, binding) {
el.className = el.className.replace('v-transfer-dom', '')
el.className = el.className.replace('v-transfer-dom', '');
const ref$1 = el.__transferDomData;
if (!ref$1) return;
if (el.__transferDomData.hasMovedOut === true) {
el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
}

96
src/locale/lang/fr-FR.js Normal file
View file

@ -0,0 +1,96 @@
export default {
i: {
select: {
placeholder: 'Sélectionnez',
noMatch: 'Aucun résultat',
loading: 'Chargement'
},
table: {
noDataText: 'Aucune donnée',
noFilteredDataText: 'No filter data',
confirmFilter: 'Confirmez',
resetFilter: 'Reset',
clearFilter: 'Tout'
},
datepicker: {
selectDate: 'Sélectionnez une date',
selectTime: 'Sélectionnez une heure',
startTime: 'Heure de début',
endTime: 'Heure de fin',
clear: 'Annuler',
ok: 'OK',
month: '',
month1: 'Janvier',
month2: 'Février',
month3: 'Mars',
month4: 'Avril',
month5: 'Mai',
month6: 'Juin',
month7: 'Juillet',
month8: 'Août',
month9: 'Septembre',
month10: 'Octobre',
month11: 'Novembre',
month12: 'Decembre',
year: '',
weeks: {
sun: 'Dim',
mon: 'Lun',
tue: 'Mar',
wed: 'Mer',
thu: 'Jeu',
fri: 'Ven',
sat: 'Sam'
},
months: {
m1: 'Jan',
m2: 'Fev',
m3: 'Mar',
m4: 'Avr',
m5: 'Mai',
m6: 'Jun',
m7: 'Jul',
m8: 'Aoû',
m9: 'Sep',
m10: 'Oct',
m11: 'Nov',
m12: 'Déc'
}
},
transfer: {
titles: {
source: 'Source',
target: 'Cible'
},
filterPlaceholder: 'Recherche',
notFoundText: 'Pas de résultat'
},
modal: {
okText: 'OK',
cancelText: 'Annuler'
},
poptip: {
okText: 'OK',
cancelText: 'Annuler'
},
page: {
prev: 'Page Précédente',
next: 'Page Suivante',
total: 'Total',
item: 'élément',
items: 'éléments',
prev5: '5 Pages en Avant',
next5: '5 Pages en Arrière',
page: '/page',
goto: 'Aller à',
p: ''
},
rate: {
star: 'Étoile',
stars: 'Étoiles'
},
tree: {
emptyText: 'Aucune donnée'
}
}
};

6
src/styles/animation/index.less
View file

@ -25,4 +25,8 @@
@import "fade";
@import "move";
@import "ease";
@import "slide";
@import "slide";
.collapse-transition {
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
}

5
src/styles/components/modal.less
View file

@ -98,6 +98,11 @@
color: @text-color;
position: relative;
&-render{
margin: 0;
padding: 0;
}
&-icon {
font-size: 36px;
position: absolute;

64
src/utils/assist.js
View file

@ -232,4 +232,66 @@ function findComponentsDownward (context, componentName, components = []) {
}
return components;
}
export {findComponentsDownward};
export {findComponentsDownward};
/* istanbul ignore next */
const trim = function(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
/* istanbul ignore next */
export function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
}
/* istanbul ignore next */
export function addClass(el, cls) {
if (!el) return;
let curClass = el.className;
const classes = (cls || '').split(' ');
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else {
if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
}
if (!el.classList) {
el.className = curClass;
}
}
/* istanbul ignore next */
export function removeClass(el, cls) {
if (!el || !cls) return;
const classes = cls.split(' ');
let curClass = ' ' + el.className + ' ';
for (let i = 0, j = classes.length; i < j; i++) {
const clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else {
if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
}
if (!el.classList) {
el.className = trim(curClass);
}
}