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

Merge pull request #35 from iview/2.0

Browse source 
update
This commit is contained in:
yangdan8 2019-09-06 18:39:59 +08:00 • committed by GitHub
commit f3ea5e9d78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 3359 additions and 18589 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -20,3 +20,4 @@ examples/dist/
yarn-error.log yarn-error.log
test/unit/coverage test/unit/coverage
.vscode .vscode
package-lock.json

5132
dist/iview.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/iview.js.map vendored
View file

File diff suppressed because one or more lines are too long

8
dist/iview.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/iview.min.js.gz vendored
View file

Binary file not shown.

2
dist/iview.min.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

174
examples/routers/cascader.vue
View file

@ -1,70 +1,60 @@
<template> <template>
<div> <div>
<Row> <Alert show-icon>#6158</Alert>
<i-col span="18"> <Cascader :data="data" v-model="value" :load-data="loadData"></Cascader>
<i-button v-on:click="setValue">setValue</i-button> <Cascader :data="data2" v-model="value2" change-on-select :load-data="loadData" @on-change="handlerChange"></Cascader>
</i-col> <p style="margin-top:2rem">异步加载数据同时赋初值会导致不能正确的显示</p>
<i-col span="4"> <p>所有数据均相同，第二个级联增加change-on-select</p>
<Cascader :data="data" v-model="value1" transfer></Cascader> <p>第一个北京、故宫、故宫3级正常</p>
</i-col> <p>第二个强制将值设置为['beijing']</p>
</Row>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
value1: [], value: ['beijing','gugong','gugong3'],
value2: ['beijing','gugong','gugong3'],
data: [{ data: [{
value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331', value: 'beijing',
label: '北京', label: '北京',
children: [{ level: 1,
value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c', loading: false,
label: '故宫' children: [
}, {
value: 'tiantan',
label: '天坛' ]
}, { }],
value: 'wangfujing', data2: [{
label: '王府井' value: 'beijing',
}] label: '北京',
}, { level: 1,
value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b', loading: false,
label: '江苏', children: [
children: [{
value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',
label: '南京', ]
children: [{
value: '44736384-0ede-41ba-bf7a-59c84241851a',
label: '夫子庙中国第一庙来自南京',
children:[{
value: '44736384-0ede-41ba-bf7a-59c84241851c',
label:'自定义产品系统来自黑龙江地区'
}]
}]
}, {
value: 'suzhou',
label: '苏州',
children: [{
value: 'zhuozhengyuan',
label: '拙政园',
}, {
value: 'shizilin',
label: '狮子林',
}]
}],
}] }]
} }
}, },
methods: { methods: {
setValue() { handlerChange(val,selectData){
var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a"; console.log(val,selectData,'-----val');
var x = v.split(',') },
var x1 = x[0].toString(); loadData(item,callback){
var x2 = x[1].toString(); item.loading = true;
var x3 = x[2].toString(); setTimeout(() => {
if(item.level === 1){
this.value1 = x; item.children=[
{label: '故宫',value:'gugong',level: 2,loading: false,children:[]},
{label: '故宫2',value:'gugong2',level: 2,children:[]}
];
}else if(item.level === 2){
item.children=[{label: '故宫3级',value:'gugong3',level: 3}]
}
item.loading = false;
callback();
}, 600);
} }
}, },
mounted () { mounted () {
@ -72,6 +62,80 @@
} }
} }
</script> </script>
<style> <!--<template>-->
<!-- <div>-->
<!-- <Row>-->
<!-- <i-col span="18">-->
<!-- <i-button v-on:click="setValue">setValue</i-button>-->
<!-- </i-col>-->
<!-- <i-col span="4">-->
<!-- <Cascader :data="data" v-model="value1" transfer></Cascader>-->
<!-- </i-col>-->
<!-- </Row>-->
<!-- </div>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- value1: [],-->
<!-- data: [{-->
<!-- value: '9ecec83c-cf6b-4cfe-aa75-eb3510875331',-->
<!-- label: '北京',-->
<!-- children: [{-->
<!-- value: 'a873a9bd-7d75-4f46-9369-4d25a1feb13c',-->
<!-- label: '故宫'-->
<!-- }, {-->
<!-- value: 'tiantan',-->
<!-- label: '天坛'-->
<!-- }, {-->
<!-- value: 'wangfujing',-->
<!-- label: '王府井'-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'ca7c0fbc-728d-42e8-b111-f5f73cf9171b',-->
<!-- label: '江苏',-->
<!-- children: [{-->
<!-- value: 'a89d891b-5c50-44c0-87b4-d4f934edc921',-->
<!-- label: '南京',-->
<!-- children: [{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851a',-->
<!-- label: '夫子庙中国第一庙来自南京',-->
<!-- children:[{-->
<!-- value: '44736384-0ede-41ba-bf7a-59c84241851c',-->
<!-- label:'自定义产品系统来自黑龙江地区'-->
<!-- }]-->
<!-- }]-->
<!-- }, {-->
<!-- value: 'suzhou',-->
<!-- label: '苏州',-->
<!-- children: [{-->
<!-- value: 'zhuozhengyuan',-->
<!-- label: '拙政园',-->
<!-- }, {-->
<!-- value: 'shizilin',-->
<!-- label: '狮子林',-->
<!-- }]-->
<!-- }],-->
<!-- }]-->
<!-- }-->
<!-- },-->
<!-- methods: {-->
<!-- setValue() {-->
<!-- var v = "ca7c0fbc-728d-42e8-b111-f5f73cf9171b,a89d891b-5c50-44c0-87b4-d4f934edc921,44736384-0ede-41ba-bf7a-59c84241851a";-->
<!-- var x = v.split(',')-->
<!-- var x1 = x[0].toString();-->
<!-- var x2 = x[1].toString();-->
<!-- var x3 = x[2].toString();-->
</style> <!-- this.value1 = x;-->
<!-- }-->
<!-- },-->
<!-- mounted () {-->
<!-- }-->
<!-- }-->
<!--</script>-->
<!--<style>-->
<!--</style>-->

4
examples/routers/input-number.vue
View file

@ -72,6 +72,9 @@
:formatter="value => `${value}%`" :formatter="value => `${value}%`"
:parser="value => value.replace('%', '')"></InputNumber> :parser="value => value.replace('%', '')"></InputNumber>
</div> </div>
<div style="margin-top: 10px">
<InputNumber :min="100" :max="3000" v-model="value4" style="width: 200px" :active-change="false"></InputNumber>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -81,6 +84,7 @@
value1: 1800000, value1: 1800000,
value2: 55, value2: 55,
value3: 100, value3: 100,
value4 : null,
valueNull:null, valueNull:null,
formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','), formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
parser: (value) => value.replace(/\$\s?|(,*)/g, ''), parser: (value) => value.replace(/\$\s?|(,*)/g, ''),

68
examples/routers/notice.vue
View file

@ -1,39 +1,43 @@
<template> <template>
<Select v-model="model1" style="width:200px"> <div>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> <p>With desc</p>
</Select> <Button @click="info(false)">Info</Button>
<Button @click="success(false)">Success</Button>
<Button @click="warning(false)">Warning</Button>
<Button @click="error(false)">Error</Button>
<p>Only title</p>
<Button @click="info(true)">Info</Button>
<Button @click="success(true)">Success</Button>
<Button @click="warning(true)">Warning</Button>
<Button @click="error(true)">Error</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { methods: {
return { info (nodesc) {
cityList: [ this.$Notice.info({
{ title: 'Notification title',
value: 'New York', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
label: 'New York' });
}, },
{ success (nodesc) {
value: 'London', this.$Notice.success({
label: 'London' title: 'Notification title',
}, desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
{ });
value: 'Sydney', },
label: 'Sydney' warning (nodesc) {
}, this.$Notice.warning({
{ title: 'Notification title',
value: 'Ottawa', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
label: 'Ottawa' });
}, },
{ error (nodesc) {
value: 'Paris', this.$Notice.error({
label: 'Paris' title: 'Notification title',
}, desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
{ });
value: 'Canberra',
label: 'Canberra'
}
],
model1: 'Sydney'
} }
} }
} }

10
examples/routers/progress.vue
View file

@ -11,10 +11,18 @@
<Progress :percent="65" status="wrong"></Progress> <Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress> <Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress> <Progress :percent="25" hide-info></Progress>
<Progress :percent="10" :stroke-width="20" text-inside></Progress>
<Progress :percent="90" :stroke-color="color1"></Progress>
<Progress :percent="90" :stroke-color="color2" status="active"></Progress>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
color1: '#ff6600',
color2: ['#108ee9', '#87d068']
}
}
} }
</script> </script>

21
examples/routers/switch.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<i-switch v-model="m1" :loading="loading"> <i-switch v-model="m1" :loading="loading" @on-change="change" :before-change="beforeChange">
<span slot="open">开</span> <span slot="open">开</span>
<span slot="close">关</span> <span slot="close">关</span>
</i-switch> </i-switch>
@ -32,6 +32,8 @@
<br><br> <br><br>
<i-switch :disabled="disabled"></i-switch> <i-switch :disabled="disabled"></i-switch>
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button> <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
<Divider></Divider>
<i-switch v-model="switch1" true-color="#13ce66" false-color="#ff4949" />
</div> </div>
</template> </template>
<script> <script>
@ -40,12 +42,27 @@
return { return {
m1: true, m1: true,
disabled: true, disabled: true,
loading: false loading: false,
switch1: true
} }
}, },
methods: { methods: {
change (status) { change (status) {
console.log(status) console.log(status)
},
beforeChange () {
return new Promise((resolve, reject) => {
this.$Modal.confirm({
title: '切换确认',
content: '您确认要切换开关状态吗？',
onOk: () => {
resolve();
},
onCancel: () => {
reject();
}
});
});
} }
} }
} }

57
examples/routers/tabs.vue
View file

@ -1,3 +1,60 @@
<!--<template>-->
<!-- <Tabs :animated="false" value="name1">-->
<!-- <Tab-pane label="标签一" name="name1">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签二" name="name2">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签三" name="name3">-->
<!-- <Table :columns="columns1" ></Table>-->
<!-- </Tab-pane>-->
<!-- </Tabs>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data() {-->
<!-- return {-->
<!-- columns1: [-->
<!-- {-->
<!-- title: '姓名',-->
<!-- key: 'name'-->
<!-- },-->
<!-- {-->
<!-- title: '年龄',-->
<!-- key: 'age'-->
<!-- },-->
<!-- {-->
<!-- title: '地址',-->
<!-- key: 'address'-->
<!-- }-->
<!-- ],-->
<!-- data1: [-->
<!-- {-->
<!-- name: '王小明',-->
<!-- age: 18,-->
<!-- address: '北京市朝阳区芍药居'-->
<!-- },-->
<!-- {-->
<!-- name: '张小刚',-->
<!-- age: 25,-->
<!-- address: '北京市海淀区西二旗'-->
<!-- },-->
<!-- {-->
<!-- name: '李小红',-->
<!-- age: 30,-->
<!-- address: '上海市浦东新区世纪大道'-->
<!-- },-->
<!-- {-->
<!-- name: '周小伟',-->
<!-- age: 26,-->
<!-- address: '深圳市南山区深南大道'-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<template> <template>
<div> <div>
<Button @click="showSecond = !showSecond">change</Button> <Button @click="showSecond = !showSecond">change</Button>

84
examples/routers/tooltip.vue
View file

@ -1,28 +1,70 @@
<style scoped>
.top,.bottom{
text-align: center;
}
.center{
width: 300px;
margin: 10px auto;
overflow: hidden;
}
.center-left{
float: left;
}
.center-right{
float: right;
}
</style>
<template> <template>
<div style="margin: 200px;"> <div>
<Tooltip always placement="top-end" :content="text" :delay="1000" theme="light"> <div class="top">
<Button @click="disabled = true">延时1秒显示</Button> <Tooltip content="Top Left text" placement="top-start">
</Tooltip> <Button>Top Left</Button>
<Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长"> </Tooltip>
<Button @click="handleChange">change</Button> <Tooltip content="Top Center text" placement="top">
</Tooltip> <Button>Top Center</Button>
<Button @click="handleChange">change</Button> </Tooltip>
<Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长"> <Tooltip content="Top Right text" placement="top-end">
<Button>Click</Button> <Button>Top Right</Button>
</Poptip> </Tooltip>
</div>
<div class="center">
<div class="center-left">
<Tooltip content="Left Top text" placement="left-start">
<Button>Left Top</Button>
</Tooltip><br><br>
<Tooltip content="Left Center text" placement="left">
<Button>Left Center</Button>
</Tooltip><br><br>
<Tooltip content="Left Bottom text" placement="left-end">
<Button>Left Bottom</Button>
</Tooltip>
</div>
<div class="center-right">
<Tooltip content="Right Top text" placement="right-start">
<Button>Right Top</Button>
</Tooltip><br><br>
<Tooltip content="Right Center text" placement="right">
<Button>Right Center</Button>
</Tooltip><br><br>
<Tooltip content="Right Bottom text" placement="right-end">
<Button>Right Bottom</Button>
</Tooltip>
</div>
</div>
<div class="bottom">
<Tooltip content="Bottom Left text" placement="bottom-start">
<Button>Bottom Left</Button>
</Tooltip>
<Tooltip content="Bottom Center text" placement="bottom">
<Button>Bottom Center</Button>
</Tooltip>
<Tooltip content="Bottom Right text" placement="bottom-end">
<Button>Bottom Right</Button>
</Tooltip>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
text: 'Tooltip 文字提示'
};
},
methods: {
handleChange () {
this.text = '提示'
}
}
} }
</script> </script>

100
examples/routers/tree.vue
View file

@ -1,43 +1,81 @@
<template> <template>
<Tree :data="data2" check-directly show-checkbox></Tree> <Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
</template> </template>
<script> <script>
//验证bug #6139
export default { export default {
data () { data () {
return { return {
data2: [ data3: [
{ {
title: 'parent 1', title: 'parent',
expand: true, loading: false,
children: [ children: []
{
title: 'parent 1-1',
expand: true,
children: [
{
title: 'leaf 1-1-1'
},
{
title: 'leaf 1-1-2'
}
]
},
{
title: 'parent 1-2',
expand: true,
children: [
{
title: 'leaf 1-2-1'
},
{
title: 'leaf 1-2-1'
}
]
}
]
} }
] ]
};
},
methods: {
loadData (item, callback) {
setTimeout(() => {
const isSet = Math.ceil(Math.random()*10)%2;
let data = [];
if( isSet ){
data = [
{
title: 'children-1',
loading: false,
children: []
}
];
}
callback(data);
}, 1000);
} }
} }
} };
</script> </script>
<!--<template>-->
<!-- <Tree :data="data2" check-directly show-checkbox></Tree>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data () {-->
<!-- return {-->
<!-- data2: [-->
<!-- {-->
<!-- title: 'parent 1',-->
<!-- expand: true,-->
<!-- children: [-->
<!-- {-->
<!-- title: 'parent 1-1',-->
<!-- expand: true,-->
<!-- children: [-->
<!-- {-->
<!-- title: 'leaf 1-1-1'-->
<!-- },-->
<!-- {-->
<!-- title: 'leaf 1-1-2'-->
<!-- }-->
<!-- ]-->
<!-- },-->
<!-- {-->
<!-- title: 'parent 1-2',-->
<!-- expand: true,-->
<!-- children: [-->
<!-- {-->
<!-- title: 'leaf 1-2-1'-->
<!-- },-->
<!-- {-->
<!-- title: 'leaf 1-2-1'-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->

16057
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -44,14 +44,14 @@
"url": "https://github.com/iview/iview/issues" "url": "https://github.com/iview/iview/issues"
}, },
"dependencies": { "dependencies": {
"async-validator": "^1.10.0", "async-validator": "^1.12.2",
"deepmerge": "^2.2.1", "deepmerge": "^2.2.1",
"element-resize-detector": "^1.2.0", "element-resize-detector": "^1.2.0",
"js-calendar": "^1.2.3", "js-calendar": "^1.2.3",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"popper.js": "^1.14.6", "popper.js": "^1.14.6",
"tinycolor2": "^1.4.1", "tinycolor2": "^1.4.1",
"v-click-outside-x": "^3.5.6" "v-click-outside-x": "^4.0.19"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "^2.5.2" "vue": "^2.5.2"

9
src/components/auto-complete/auto-complete.vue
View file

@ -14,6 +14,7 @@
auto-complete auto-complete
:remote-method="remoteMethod" :remote-method="remoteMethod"
@on-change="handleChange" @on-change="handleChange"
@on-clickoutside="handleClickOutside"
:transfer="transfer"> :transfer="transfer">
<slot name="input"> <slot name="input">
<i-input <i-input
@ -113,7 +114,8 @@
computed: { computed: {
inputIcon () { inputIcon () {
let icon = ''; let icon = '';
if (this.clearable && this.currentValue) { //#6161 #7
if (this.clearable && this.currentValue && !this.disabled) {
icon = 'ios-close'; icon = 'ios-close';
} else if (this.icon) { } else if (this.icon) {
icon = this.icon; icon = this.icon;
@ -167,6 +169,11 @@
this.currentValue = ''; this.currentValue = '';
this.$refs.select.reset(); this.$refs.select.reset();
this.$emit('on-clear'); this.$emit('on-clear');
},
handleClickOutside(){
this.$nextTick(() => {
this.$refs.input.blur();
});
} }
} }
}; };

3
src/components/cascader/caspanel.vue
View file

@ -56,7 +56,8 @@
if (this.trigger !== 'hover' || !item.children || !item.children.length) return; // #1922 if (this.trigger !== 'hover' || !item.children || !item.children.length) return; // #1922
this.handleTriggerItem(item, false, true); this.handleTriggerItem(item, false, true);
}, },
handleTriggerItem (item, fromInit = false, fromUser = false) { //#6158 -- default fromInit = false to fromInit = true;
handleTriggerItem (item, fromInit = true, fromUser = false) {
if (item.disabled) return; if (item.disabled) return;
const cascader = findComponentUpward(this, 'Cascader'); const cascader = findComponentUpward(this, 'Cascader');

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

@ -49,7 +49,7 @@
}, },
methods: { methods: {
updateModel (update) { updateModel (update) {
this.childrens = findComponentsDownward(this, 'Checkbox'); this.childrens = findComponentsDownward(this, 'Checkbox', 'CheckboxGroup');
if (this.childrens) { if (this.childrens) {
const { value } = this; const { value } = this;
this.childrens.forEach(child => { this.childrens.forEach(child => {

8
src/components/dropdown/dropdown-item.vue
View file

@ -37,14 +37,10 @@
}, },
methods: { methods: {
handleClick () { handleClick () {
if (this.disabled) return;
const $parent = findComponentUpward(this, 'Dropdown'); const $parent = findComponentUpward(this, 'Dropdown');
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
if (hasChildren) {
if (this.disabled) {
this.$nextTick(() => {
$parent.currentVisible = true;
});
} else if (hasChildren) {
this.$parent.$emit('on-haschild-click'); this.$parent.$emit('on-haschild-click');
} else { } else {
if ($parent && $parent.$options.name === 'Dropdown') { if ($parent && $parent.$options.name === 'Dropdown') {

30
src/components/input-number/input-number.vue
View file

@ -24,6 +24,7 @@
@blur="blur" @blur="blur"
@keydown.stop="keyDown" @keydown.stop="keyDown"
@input="change" @input="change"
ref="precisionCursor"
@mouseup="preventDefault" @mouseup="preventDefault"
@change="change" @change="change"
:readonly="readonly || !editable" :readonly="readonly || !editable"
@ -219,7 +220,6 @@
if (this.disabled || this.readonly) { if (this.disabled || this.readonly) {
return false; return false;
} }
const targetVal = Number(e.target.value); const targetVal = Number(e.target.value);
let val = Number(this.currentValue); let val = Number(this.currentValue);
const step = Number(this.step); const step = Number(this.step);
@ -256,7 +256,8 @@
if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision)); if (val && !isNaN(this.precision)) val = Number(Number(val).toFixed(this.precision));
const {min, max} = this; const {min, max} = this;
if (val!==null) { // #6245
if ( val!==null && !this.activeChange ) {
if (val > max) { if (val > max) {
val = max; val = max;
} else if (val < min) { } else if (val < min) {
@ -305,15 +306,24 @@
this.setValue(null); this.setValue(null);
return; return;
} }
if (event.type == 'input' && val.match(/^\-?\.?$|\.$/)) return; // prevent fire early if decimal. If no more input the change event will fire later if (event.type == 'input' && val.match(/^\-?\.?$|\.$/g)) return; // prevent fire early if decimal. If no more input the change event will fire later
//#fixed when setting the precision val, input point cannot show problem
const precision = this.precision;
let cacheVal = this.currentValue;
if( precision ){
const valMatchPointArr = (val+'').match(/\./g);
if( valMatchPointArr && valMatchPointArr.length >= 2 ){
cacheVal = this.currentValue + '.';
}
}
val = Number(val); val = Number(val);
if (!isNaN(val) ) {
if (!isNaN(val)) {
this.currentValue = val; this.currentValue = val;
this.setValue(val); this.setValue(val);
} else { } else {
event.target.value = this.currentValue; event.target.value = cacheVal;
} }
}, },
changeVal (val) { changeVal (val) {
@ -338,6 +348,14 @@
}, },
currentValue (val) { currentValue (val) {
this.changeVal(val); this.changeVal(val);
//optimization - Solve the problem of cursor positioning inaccuracy
this.$nextTick(()=>{
if( this.precision ){
const currentValueLength = ( this.currentValue || 0 ).toString().length;
const precisionCursor = this.$refs.precisionCursor;
precisionCursor.selectionStart = precisionCursor.selectionEnd = currentValueLength;
}
});
}, },
min () { min () {
this.changeVal(this.currentValue); this.changeVal(this.currentValue);

16
src/components/progress/progress.vue
View file

@ -2,7 +2,7 @@
<div :class="wrapClasses"> <div :class="wrapClasses">
<div :class="outerClasses"> <div :class="outerClasses">
<div :class="innerClasses"> <div :class="innerClasses">
<div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div> <div :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="textInside">{{ percent }}%</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
</div> </div>
</div> </div>
<span v-if="!hideInfo" :class="textClasses"> <span v-if="!hideInfo" :class="textClasses">
@ -54,7 +54,11 @@
default: false default: false
}, },
strokeColor: { strokeColor: {
type: String type: [String, Array]
},
textInside: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -89,7 +93,11 @@
}; };
if (this.strokeColor) { if (this.strokeColor) {
style['background-color'] = this.strokeColor; if (typeof this.strokeColor === 'string') {
style['background-color'] = this.strokeColor;
} else {
style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`;
}
} }
return style; return style;
@ -108,7 +116,7 @@
`${prefixCls}`, `${prefixCls}`,
`${prefixCls}-${this.currentStatus}`, `${prefixCls}-${this.currentStatus}`,
{ {
[`${prefixCls}-show-info`]: !this.hideInfo, [`${prefixCls}-show-info`]: !this.hideInfo && !this.textInside,
[`${prefixCls}-vertical`]: this.vertical [`${prefixCls}-vertical`]: this.vertical
} }

5
src/components/select/select-head.vue
View file

@ -227,8 +227,9 @@
this.inputLength = this.$refs.input.value.length * 12 + 20; this.inputLength = this.$refs.input.value.length * 12 + 20;
this.$emit('on-keydown'); this.$emit('on-keydown');
}, },
handleInputDelete () { handleInputDelete (e) {
if (this.multiple && this.selectedMultiple.length && this.query === '') { const targetValue = e.target.value;
if (this.multiple && this.selectedMultiple.length && this.query === '' && targetValue === '' ) {
this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1]); this.removeTag(this.selectedMultiple[this.selectedMultiple.length - 1]);
} }
}, },

1
src/components/select/select.vue
View file

@ -544,6 +544,7 @@
event.preventDefault(); event.preventDefault();
this.hideMenu(); this.hideMenu();
this.isFocused = true; this.isFocused = true;
this.$emit('on-clickoutside', event);
} else { } else {
this.caretPosition = -1; this.caretPosition = -1;
this.isFocused = false; this.isFocused = false;

48
src/components/switch/switch.vue
View file

@ -2,6 +2,7 @@
<span <span
tabindex="0" tabindex="0"
:class="wrapClasses" :class="wrapClasses"
:style="wrapStyles"
@click="toggle" @click="toggle"
@keydown.space="toggle" @keydown.space="toggle"
> >
@ -15,9 +16,7 @@
<script> <script>
import { oneOf } from '../../utils/assist'; import { oneOf } from '../../utils/assist';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-switch'; const prefixCls = 'ivu-switch';
export default { export default {
name: 'iSwitch', name: 'iSwitch',
mixins: [ Emitter ], mixins: [ Emitter ],
@ -52,7 +51,14 @@
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
} },
trueColor: {
type: String
},
falseColor: {
type: String
},
beforeChange: Function
}, },
data () { data () {
return { return {
@ -71,23 +77,45 @@
} }
]; ];
}, },
wrapStyles () {
let style = {};
if (this.trueColor && this.currentValue === this.trueValue) {
style['border-color'] = this.trueColor;
style['background-color'] = this.trueColor;
} else if (this.falseColor && this.currentValue === this.falseValue) {
style['border-color'] = this.falseColor;
style['background-color'] = this.falseColor;
}
return style;
},
innerClasses () { innerClasses () {
return `${prefixCls}-inner`; return `${prefixCls}-inner`;
} }
}, },
methods: { methods: {
handleToggle () {
const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue;
this.currentValue = checked;
this.$emit('input', checked);
this.$emit('on-change', checked);
this.dispatch('FormItem', 'on-form-change', checked);
},
toggle (event) { toggle (event) {
event.preventDefault(); event.preventDefault();
if (this.disabled || this.loading) { if (this.disabled || this.loading) {
return false; return false;
} }
if (!this.beforeChange) {
const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue; return this.handleToggle();
}
this.currentValue = checked; const before = this.beforeChange();
this.$emit('input', checked); if (before && before.then) {
this.$emit('on-change', checked); before.then(() => {
this.dispatch('FormItem', 'on-form-change', checked); this.handleToggle();
});
} else {
this.handleToggle();
}
} }
}, },
watch: { watch: {

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="prefixCls" v-show="show" :style="contentStyle"><slot></slot></div> <div :class="prefixCls" v-if="show" :style="contentStyle"><slot></slot></div>
</template> </template>
<script> <script>
const prefixCls = 'ivu-tabs-tabpane'; const prefixCls = 'ivu-tabs-tabpane';

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

@ -235,9 +235,11 @@
}, },
handleLeftCheckedKeysChange (keys) { handleLeftCheckedKeysChange (keys) {
this.leftCheckedKeys = keys; this.leftCheckedKeys = keys;
this.handleCheckedKeys();
}, },
handleRightCheckedKeysChange (keys) { handleRightCheckedKeysChange (keys) {
this.rightCheckedKeys = keys; this.rightCheckedKeys = keys;
this.handleCheckedKeys();
}, },
handleCheckedKeys () { handleCheckedKeys () {
const sourceSelectedKeys = this.getValidKeys('left'); const sourceSelectedKeys = this.getValidKeys('left');

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

@ -71,7 +71,9 @@
data () { data () {
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
appearByClickArrow: false appearByClickArrow: false,
// #6139
loadingChildrenState : true
}; };
}, },
computed: { computed: {
@ -105,7 +107,7 @@
]; ];
}, },
showArrow () { showArrow () {
return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading); return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading && this.loadingChildrenState);
}, },
showLoading () { showLoading () {
return 'loading' in this.data && this.data.loading; return 'loading' in this.data && this.data.loading;
@ -188,6 +190,8 @@
if (children.length) { if (children.length) {
this.$set(this.data, this.childrenKey, children); this.$set(this.data, this.childrenKey, children);
this.$nextTick(() => this.handleExpand()); this.$nextTick(() => this.handleExpand());
}else{
this.loadingChildrenState = false;
} }
}); });
return; return;

2
src/styles/animation/fade.less
View file

@ -1,5 +1,5 @@
.fade-motion(@className, @keyframeName) { .fade-motion(@className, @keyframeName) {
.make-motion(@className, @keyframeName); .make-motion(@className, @keyframeName, @animation-time-quick);
.@{className}-enter-active, .@{className}-appear { .@{className}-enter-active, .@{className}-appear {
opacity: 0; opacity: 0;
animation-timing-function: linear; animation-timing-function: linear;

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

@ -1,15 +1,15 @@
.motion-common() { .motion-common(@time) {
animation-duration: @animation-time; animation-duration: @time;
animation-fill-mode: both; animation-fill-mode: both;
} }
.make-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName, @time: @animation-time) {
.@{className}-enter-active, .@{className}-appear { .@{className}-enter-active, .@{className}-appear {
.motion-common(); .motion-common(@time);
animation-play-state: paused; animation-play-state: paused;
} }
.@{className}-leave-active { .@{className}-leave-active {
.motion-common(); .motion-common(@time);
animation-play-state: paused; animation-play-state: paused;
} }
.@{className}-enter-active, .@{className}-appear { .@{className}-enter-active, .@{className}-appear {

14
src/styles/components/progress.less
View file

@ -35,6 +35,13 @@
border-radius: 100px; border-radius: 100px;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
&-text{
display: inline-block;
vertical-align: middle;
color: #fff;
font-size: 12px;
margin: 0 6px;
}
} }
&-vertical &-inner { &-vertical &-inner {
height: 100%; height: 100%;
@ -52,10 +59,17 @@
} }
&-bg { &-bg {
text-align: right;
border-radius: 100px; border-radius: 100px;
background-color: @primary-color; background-color: @primary-color;
transition: all @transition-time linear; transition: all @transition-time linear;
position: relative; position: relative;
&:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
} }
&-success-bg{ &-success-bg{
border-radius: 100px; border-radius: 100px;

1
src/styles/custom.less
View file

@ -198,6 +198,7 @@
// Animation // Animation
@animation-time : .3s; @animation-time : .3s;
@animation-time-quick : .15s;
@transition-time : .2s; @transition-time : .2s;
@ease-in-out : ease-in-out; @ease-in-out : ease-in-out;

13
src/utils/assist.js
View file

@ -212,11 +212,18 @@ export function findComponentDownward (context, componentName) {
} }
// Find components downward // Find components downward
export function findComponentsDownward (context, componentName) { export function findComponentsDownward (context, componentName, ignoreComponentNames = []) {
if (!Array.isArray(ignoreComponentNames)) {
ignoreComponentNames = [ignoreComponentNames]
}
return context.$children.reduce((components, child) => { return context.$children.reduce((components, child) => {
if (child.$options.name === componentName) components.push(child); if (child.$options.name === componentName) components.push(child);
const foundChilds = findComponentsDownward(child, componentName); if (ignoreComponentNames.indexOf(child.$options.name) < 0) {
return components.concat(foundChilds); const foundChilds = findComponentsDownward(child, componentName);
return components.concat(foundChilds);
} else {
return components
}
}, []); }, []);
} }