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> </a>
</p> </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. ### 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) | | [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) | | [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) | | [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) | | [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) | | [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> </style>
<template> <template>
<div> <div>
<Badge count="3"> <Badge dot :count="count">
<a href="#" class="demo-badge"></a> <a href="#" class="demo-badge"></a>
</Badge> </Badge>
<Badge dot> <Button @click="setCount">set count</Button>
<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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {}, props: {},
data () { data () {
return {}; return {
count: 50
};
}, },
computed: {}, methods: {
methods: {} setCount () {
this.count = 10;
}
}
}; };
</script> </script>

16
examples/routers/form.vue
View file

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

175
examples/routers/menu.vue
View file

@ -1,16 +1,25 @@
<template> <template>
<div> <div>
<Menu mode="horizontal" :theme="theme1" @on-select="s"> <Row>
<Row type="flex" justify="center" align="middle"> <i-col span="8">
<i-col span="12"> <Menu :theme="theme2">
<Menu-item name="1"> <Submenu name="1">
<template slot="title">
<Icon type="ios-paper"></Icon> <Icon type="ios-paper"></Icon>
内容管理 内容管理
</Menu-item> </template>
<Menu-item name="2"> <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> <Icon type="ios-people"></Icon>
用户管理 用户管理
</Menu-item> </template>
<Menu-item name="2-1">新增用户</Menu-item>
<Menu-item name="2-2">活跃用户</Menu-item>
</Submenu>
<Submenu name="3"> <Submenu name="3">
<template slot="title"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="stats-bars"></Icon>
@ -26,19 +35,14 @@
<Menu-item name="3-5">流失用户</Menu-item> <Menu-item name="3-5">流失用户</Menu-item>
</Menu-group> </Menu-group>
</Submenu> </Submenu>
<Menu-item name="4"> </Menu>
<Icon type="settings"></Icon>
综合设置
</Menu-item>
</i-col> </i-col>
</Row> </Row>
</Menu>
<br> <br>
<p>切换主题</p> <p>切换主题</p>
<Radio-group v-model="theme1"> <Radio-group v-model="theme2">
<Radio label="light"></Radio> <Radio label="light"></Radio>
<Radio label="dark"></Radio> <Radio label="dark"></Radio>
<Radio label="primary"></Radio>
</Radio-group> </Radio-group>
</div> </div>
</template> </template>
@ -46,149 +50,8 @@
export default { export default {
data () { data () {
return { return {
theme1: 'light' theme2: 'light'
}
},
methods: {
s (s) {
console.log(s)
} }
} }
} }
</script> </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> <template>
<div> <div>
{{ val }}
<Button @click="confirm">标准</Button> <Button @click="confirm">标准</Button>
<Button @click="custom">自定义按钮文字</Button> <Button @click="custom">自定义按钮文字</Button>
<Button @click="async">异步关闭</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> </div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
modal1: false,
val: ''
}
},
methods: { methods: {
ok () {
this.$Message.info('点击了确定');
},
cancel () {
this.$Message.info('点击了取消');
},
confirm () { confirm () {
this.$Modal.confirm({ this.$Modal.confirm({
title: '确认对话框标题', title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>', content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
render: (h) => {
return h('Input', {
props: {
value: this.val,
autofocus: true
},
on: {
input: (val) => {
this.val = val;
}
}
}, '一个按钮')
},
onOk: () => { onOk: () => {
this.$Message.info('点击了确定'); this.$Message.info('点击了确定');
}, },

3
examples/routers/table.vue
View file

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

10
examples/routers/tabs.vue
View file

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

2
package.json
View file

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

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

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

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); this.$emit('input', checked);
if (this.group) { if (this.group) {
this.$parent.change(this.model); this.parent.change(this.model);
} else { } else {
this.$emit('on-change', checked); this.$emit('on-change', checked);
this.dispatch('FormItem', 'on-form-change', checked); this.dispatch('FormItem', 'on-form-change', checked);

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

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

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

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

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

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

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

@ -8,31 +8,6 @@ const prefixCls = 'ivu-modal-confirm';
Modal.newInstance = properties => { Modal.newInstance = properties => {
const _props = 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({ const Instance = new Vue({
mixins: [ Locale ], mixins: [ Locale ],
data: Object.assign({}, _props, { data: Object.assign({}, _props, {
@ -73,6 +48,35 @@ Modal.newInstance = properties => {
} }
}, this.localeOkText)); }, 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, { return h(Modal, {
props: Object.assign({}, _props, { props: Object.assign({}, _props, {
width: this.width, width: this.width,
@ -106,24 +110,7 @@ Modal.newInstance = properties => {
} }
}) })
]), ]),
h('div', { body_render,
attrs: {
class: `${prefixCls}-body`
}
}, [
h('div', {
class: this.iconTypeCls
}, [
h('i', {
class: this.iconNameCls
})
]),
h('div', {
domProps: {
innerHTML: this.body
}
})
]),
h('div', { h('div', {
attrs: { attrs: {
class: `${prefixCls}-footer` class: `${prefixCls}-footer`

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

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

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <template>
<transition name="slide-up"> <collapse-transition>
<ul :class="classes" v-show="visible"> <ul :class="classes" v-show="visible">
<li> <li>
<span :class="arrowClasses" @click="handleExpand"> <span :class="arrowClasses" @click="handleExpand">
@ -22,11 +22,12 @@
</Tree-node> </Tree-node>
</li> </li>
</ul> </ul>
</transition> </collapse-transition>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import Icon from '../icon/icon.vue'; import Icon from '../icon/icon.vue';
import CollapseTransition from '../base/collapse-transition';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
import { findComponentsDownward } from '../../utils/assist'; import { findComponentsDownward } from '../../utils/assist';
@ -35,7 +36,7 @@
export default { export default {
name: 'TreeNode', name: 'TreeNode',
mixins: [ Emitter ], mixins: [ Emitter ],
components: { Checkbox, Icon }, components: { Checkbox, Icon, CollapseTransition },
props: { props: {
data: { data: {
type: Object, type: Object,

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

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

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

@ -26,3 +26,7 @@
@import "move"; @import "move";
@import "ease"; @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; color: @text-color;
position: relative; position: relative;
&-render{
margin: 0;
padding: 0;
}
&-icon { &-icon {
font-size: 36px; font-size: 36px;
position: absolute; position: absolute;

62
src/utils/assist.js
View file

@ -233,3 +233,65 @@ function findComponentsDownward (context, componentName, components = []) {
return 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);
}
}