Merge pull request #39 from iview/2.0

升级官方版本

.github/ISSUE_TEMPLATE.md

@@ -1,18 +1,14 @@
-<!--
+<!--  
-注意：关于用法、咨询等问题，请到 iView Developer 提问：
-  
-  https://dev.iviewui.com
-  
   Bug 反馈、新功能请求，请到下面提交 issues：
   
-  https://www.iviewui.com/new-issue
+  http://iview.talkingdata.com/#/new-issue
 
 不是用上面的链接创建的 issue 会被立即关闭。
 -->
 <!--
 IMPORTANT: Please use the following link to create a new issue:
 
-  https://www.iviewui.com/new-issue
+  http://iview.talkingdata.com/#/new-issue
 
 If your issue was not created using the app above, it will be closed immediately.
 -->

README.md

@@ -130,11 +130,6 @@ If you want to contribute or have questions or bugs to report:
 - [iView-Area](https://github.com/iview/iview-area)
 - [iView-Editor](https://github.com/iview/iview-editor)
 
-## Sponsors
-![](https://opencollective.com/iview/tiers/sponsor.svg?avatarHeight=36)
-
-## Backers
-![](https://opencollective.com/iview/tiers/backer.svg?avatarHeight=36)
 
 ## License
 [MIT](http://opensource.org/licenses/MIT)

examples/routers/auto-complete.vue

@@ -1,36 +1,47 @@
 <template>
     <div style="margin: 100px;width: 200px;">
-        <AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm">
+        <AutoComplete
+            placement="top"
+            transfer
+            v-model="value"
+            icon="ios-search"
+            :data="data"
+            @on-search="onHandleSearch"
+            @on-change="onChange"
+            @on-select="onSelect"
+        >
             <!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
-                <!--<span style="color: red">{{ item }}</span>-->
+            <!--<span style="color: red">{{ item }}</span>-->
             <!--</Option>-->
         </AutoComplete>
     </div>
 </template>
 <script>
-
     export default {
-        props: {
+        props: {},
-
-        },
         data () {
             return {
-                value: '',
+                value: "",
-                data: [],
+                source: ["1", "2", "3", "11", "12", "13"],
-//                data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
+                data: []
             };
         },
         computed: {},
         methods: {
-            handleSearch (value) {
+            onHandleSearch (value) {
-                this.data = !value ? [] : [
+                let result = [];
-                    value + '@qq.com',
+                for (let val of this.source) {
-                    value + '@sina.com',
+                    if (val.includes(value)) {
-                    value + '@163.com'
+                        result.push(val);
-                ]
+                    }
+                }
+                this.data = result;
             },
-            hc (v) {
+            onSelect (e) {
-//                console.log(v)
+                console.log('onSelect', e);
+            },
+            onChange (v) {
+                console.log("onChange", v);
             },
             fm (value, item) {
                 return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;

examples/routers/carousel.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <!--#6076-->
-        <Carousel loop>
+        <Carousel loop @on-change="onChange">
             <CarouselItem>
                 <div class="demo-carousel">111111111111</div>
             </CarouselItem>
@@ -25,7 +25,9 @@
             }
         },
         methods: {
-
+            onChange(oldIndex,newIndex){
+                console.log(oldIndex,newIndex,'------')
+            }
         },
         mounted () {
 

examples/routers/date.vue

@@ -250,7 +250,7 @@
 <template>
     <div style="width: 500px;margin: 100px;">
         <p><input type="text"></p>
-
+        
         <DatePicker type="month" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
         <DatePicker type="year" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
 
@@ -260,10 +260,12 @@
         <DatePicker type="daterange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
         <DatePicker type="datetimerange" transfer show-week-numbers placeholder="Select date" style="width: 400px"></DatePicker>
         <Time-Picker :steps="[1, 1, 15]" :value="new Date()"></Time-Picker>
+
+        <DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px"></DatePicker>
     </div>
 </template>
 <script>
     export default {
 
-    }
+    };
 </script>

examples/routers/input.vue

@@ -139,8 +139,9 @@
         <!--<br><br>-->
         <!--<Input v-model="value" search enter-button="Search" style="width: 300px" @on-search="hs" />-->
     <!--</div>-->
+    <!--#6338-->
     <div style="width: 200px">
-        <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
+        <Input search enter-button="搜索" clearable placeholder="Enter something..." />
     </div>
 </template>
 <script>
@@ -154,8 +155,8 @@
                 select1: 'http',
                 select2: 'com',
                 select3: 'day',
-                value7: ``
+                value7: ''
-            }
+            };
         },
         methods: {
             hs (val) {

examples/routers/select.vue

@@ -1,58 +1,81 @@
 <template>
-    <div style="margin: 100px;">
+   <div>
-        <Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
+       {{formValidate}}
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+       <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+           <FormItem label="Hobby" prop="ainterest">
+               <Select
+                   multiple
+                   :max-tag-count="1"
+                   v-model="formValidate.ainterest"
+               >
+                   <Option value="Eat">Eat</Option>
+                   <Option value="Sleep">Sleep</Option>
+                   <Option value="Run">Run</Option>
+                   <Option value="Movie">Movie</Option>
+               </Select>
+           </FormItem>
+           <FormItem label="Hobby" prop="binterest">
+               <CheckboxGroup v-model="formValidate.binterest">
+                   <Checkbox label="Eat"></Checkbox>
+                   <Checkbox label="Sleep"></Checkbox>
+                   <Checkbox label="Run"></Checkbox>
+                   <Checkbox label="Movie"></Checkbox>
+               </CheckboxGroup>
+           </FormItem>
+           <FormItem>
+               <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
+               <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
+           </FormItem>
+       </Form>
+       <h2 style="margin-top:20px">#5327 feature</h2>
+       <Select v-model='test' filterable clearable>
+            <Option v-for='item in list' :value='item.value' :label="item.name" :key="item.value"></Option>
+            <div slot="empty">2222</div>
         </Select>
-
+        <h2 style="margin-top:20px">#5216</h2>
-        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
+        <Select v-model="model11" filterable clearable>
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <OptionGroup label="分组">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </OptionGroup>
         </Select>
-
+        <h2 style="margin-top:20px">Demo</h2>
-        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
+        <Select v-model="model12">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            <OptionGroup label="分组">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </OptionGroup>
         </Select>
-
+   </div>
-        <br><br>
-
-        <Select v-model="model1" style="width:200px">
-            <Icon type="ios-alarm" slot="prefix" color="red" />
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select v-model="model1" style="width:200px">
-            <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select v-model="model10" :max-tag-count="3" :max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <br><br>
-
-        <Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <br><br>
-
-        <Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-
-        <Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
-        </Select>
-    </div>
 </template>
 <script>
     export default {
         data () {
             return {
+                formValidate: {
+                    ainterest: [],
+                    binterest: [],
+                },
+                ruleValidate: {
+                    ainterest: [
+                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
+                    ],
+                    binterest: [
+                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
+                    ],
+                },
+                test:'',
+                list:[{
+                    name: '测试测试2',
+                    value:1
+                },{
+                    name: 'dddddd',
+                    value:2
+                },{
+                    name:'测试测试',
+                    value:8
+                },{
+                    name: '\"年龄\"123',
+                    value:9
+                }],
                 cityList: [
                     {
                         value: 'New York',
@@ -79,14 +102,23 @@
                         label: 'Canberra'
                     }
                 ],
-                model1: '',
+                model11: '',
-                model10: []
+                model12: ''
-            }
+            };
         },
         methods: {
-            more (num) {
+            handleSubmit (name) {
-                return 'more' + num;
+                this.$refs[name].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('Success!');
+                    } else {
+                        this.$Message.error('Fail!');
+                    }
+                });
+            },
+            handleReset (name) {
+                this.$refs[name].resetFields();
             }
         }
-    }
+    };
 </script>

examples/routers/slider.vue

@@ -1,103 +1,30 @@
 <template>
-    <Form :model="formItem" :label-width="80">
+    <div style="margin: 200px;">
-        <FormItem label="Input">
+        <Slider v-model="value5"></Slider>
-            <Input v-model="formItem.input" placeholder="Enter something..."></Input>
+        <Slider v-model="value6" :step="10" show-stops></Slider>
-        </FormItem>
+        <br><br>
-        <FormItem label="Select">
+        <Slider v-model="value7" range :marks="marks"></Slider>
-            <Select v-model="formItem.select">
+    </div>
-                <Option value="beijing">New York</Option>
-                <Option value="shanghai">London</Option>
-                <Option value="shenzhen">Sydney</Option>
-            </Select>
-        </FormItem>
-        <FormItem label="DatePicker">
-            <Row>
-                <Col span="11">
-                <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
-                </Col>
-                <Col span="2" style="text-align: center">-</Col>
-                <Col span="11">
-                <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
-                </Col>
-            </Row>
-        </FormItem>
-        <FormItem label="Radio">
-            <RadioGroup v-model="formItem.radio">
-                <Radio label="male">Male</Radio>
-                <Radio label="female">Female</Radio>
-            </RadioGroup>
-        </FormItem>
-        <FormItem label="Checkbox">
-            <CheckboxGroup v-model="formItem.checkbox">
-                <Checkbox label="Eat"></Checkbox>
-                <Checkbox label="Sleep"></Checkbox>
-                <Checkbox label="Run"></Checkbox>
-                <Checkbox label="Movie"></Checkbox>
-            </CheckboxGroup>
-        </FormItem>
-        <FormItem label="Switch">
-            <i-switch v-model="formItem.switch" size="large">
-                <span slot="open">On</span>
-                <span slot="close">Off</span>
-            </i-switch>
-        </FormItem>
-        <FormItem label="Slider">
-            <Slider v-model="formItem.slider" range></Slider>
-        </FormItem>
-        <FormItem label="Text">
-            <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
-        </FormItem>
-        <FormItem>
-            <Button type="primary">Submit</Button>
-            <Button type="default" ghost style="margin-left: 8px">Cancel</Button>
-        </FormItem>
-    </Form>
 </template>
 <script>
     export default {
         data () {
             return {
-                formItem: {
+                value5: 10,
-                    input: '',
+                value6: 30,
-                    select: '',
+                value7: [20, 100],
-                    radio: 'male',
+                marks: {
-                    checkbox: [],
+                    0: '0°C',
-                    switch: true,
+                    26: '26°C',
-                    date: '',
+                    37: '37°C',
-                    time: '',
+                    100: {
-                    slider: [20, 50],
+                        style: {
-                    textarea: ''
+                            color: '#1989FA'
+                        },
+                        label: this.$createElement('strong', '100%')
+                    }
                 }
             }
         }
     }
-</script>
+</script>
-
-
-
-<!--<template>-->
-    <!--<div>-->
-        <!--<Button type="primary" @click="modal1 = true">Display dialog box</Button>-->
-        <!--<Modal v-model="modal1">-->
-            <!--<Slider v-model="value2" range show-tip="always"></Slider>-->
-        <!--</Modal>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--modal1: false,-->
-                <!--value2: [20, 50],-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--ok () {-->
-                <!--this.$Message.info('Clicked ok');-->
-            <!--},-->
-            <!--cancel () {-->
-                <!--this.$Message.info('Clicked cancel');-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->

examples/routers/split.vue

@@ -1,90 +1,31 @@
 <template>
-    <div>
+    <div class="demo-split">
-        <div class="demo-split">
+        <Split v-model="split1" v-bind:min="min1">
-            <Split v-model="split1">
+            <div slot="left" class="demo-split-pane">
-                <div slot="left" class="demo-split-pane">
+                Left Pane
-                    左边面板
+            </div>
-                </div>
+            <div slot="right" class="demo-split-pane">
-                <div slot="right" class="demo-split-pane">
+                Right Pane
-                    右边面板
+            </div>
-                </div>
+        </Split>
-            </Split>
-        </div>
-        <div class="demo-split">
-            <Split v-model="split1" mode="vertical">
-                <div slot="left" class="demo-split-pane">
-                    左边面板
-                </div>
-                <div slot="right" class="demo-split-pane">
-                    右边面板
-                </div>
-            </Split>
-        </div>
     </div>
 </template>
-
 <script>
     export default {
-        name: 'split_pane_page',
         data () {
             return {
-                offset: 0.6,
+                split1: 0.6,
-                offsetVertical: '250px',
+                min1: '400px'
-                split1: 0.5
             }
         },
-        methods: {
-            handleMoving (e) {
-                console.log(e.atMin, e.atMax)
-            }
-        }
     }
 </script>
-
-<style lang="less">
-    .center-middle {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    .split-pane-page-wrapper {
-        height: 600px;
-        .pane {
-            width: 100%;
-            height: 100%;
-            &.left-pane {
-                background: sandybrown;
-            }
-            &.right-pane {
-                background: palevioletred;
-            }
-            &.top-pane {
-                background: sandybrown;
-            }
-            &.bottom-pane {
-                background: palevioletred;
-            }
-        }
-        .custom-trigger {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #fff;
-            position: absolute;
-            .center-middle;
-            box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
-            cursor: row-resize;
-            i.trigger-icon {
-                .center-middle;
-            }
-        }
-    }
-</style>
 <style>
     .demo-split{
-        height: 300px;
+        height: 200px;
-        border: 1px solid #dddee1;
+        border: 1px solid #dcdee2;
     }
-</style>
+    .demo-split-pane{
+        padding: 10px;
+    }
+</style>

examples/routers/steps.vue

@@ -1,7 +1,15 @@
 <style>
-    .ivu-steps{
+.demo-status{
-        background: greenyellow;
+    display: block;
-    }
+    color: #fff;
+}
+
+.demo-step-tip .ivu-steps-status-finish .ivu-icon{
+    color: #2d8cf0
+}
+.demo-step-tip .ivu-steps-status-error .ivu-icon{
+    color: #ed4014
+}
 </style>
 <template>
 <div>
@@ -11,6 +19,42 @@
         <!--<Step title="结束"></Step>-->
     </Steps>
     <Button @click="change">change</Button>
+    <div style="margin:30px">
+        <h2>
+            <a href="https://github.com/iview/iview/issues/6078">#6078</a>
+        </h2>
+        <br><br>
+        <Steps class="demo-step-tip" :current="2" status="error" size="small">
+            <Step>
+                <div slot="status">
+                    <Tooltip content="已完成" size="14" placement="top" transfer>
+                        <Icon size="18" type="ios-checkmark" />
+                    </Tooltip>
+                </div>
+            </Step>
+            <Step>
+                <div slot="status">
+                    <Tooltip content="进行中" size="14" placement="top" transfer>
+                        <Icon size="18" type="ios-checkmark" />
+                    </Tooltip>
+                </div>
+            </Step>
+            <Step>
+                <div slot="status">
+                    <Tooltip content="待处理" placement="top" transfer>
+                        <Icon size="18" type="ios-checkmark" />
+                    </Tooltip>
+                </div>
+            </Step>
+            <Step>
+                <div slot="status">
+                    <Tooltip content="待进行" placement="top" transfer>
+                        <Icon size="18" type="ios-checkmark" />
+                    </Tooltip>
+                </div>
+            </Step>
+        </Steps>
+    </div>
     <br><br><br><br>
     <hr>
     <!--<Steps :current="1" size="small">-->
@@ -102,12 +146,21 @@
                 activitiList:[
                     {
                         approveUserName:'123',
+                        tooltip:'测试标题',
                         startTime:'1'
                     },{
                         approveUserName:'123',
+                        tooltip:'测试标题2',
                         startTime:'2'
                     }
                 ],
+                statusList:[
+                    {
+                        tooltip:'测试标题',
+                    },{
+                        tooltip:'测试标题2',
+                    }
+                ],
                 changeList:[
                     {
                         approveUserName:'456',

examples/routers/tree.vue

@@ -1,81 +1,55 @@
 <template>
-    <Tree :data="data3" :load-data="loadData" show-checkbox></Tree>
+    <div>
+        <Tree ref="treeRef" :data="data4" show-checkbox multiple></Tree>
+        <Button @click="get">
+            get
+        </Button>
+    </div>
 </template>
 <script>
-    //验证bug #6139
     export default {
         data () {
             return {
-                data3: [
+                data4: [
                     {
-                        title: 'parent',
+                        title: 'parent 1',
-                        loading: false,
+                        expand: true,
-                        children: []
+                        children: [
+                            {
+                                title: 'parent 1-1',
+                                expand: true,
+                                children: [
+                                    {
+                                        title: 'leaf 1-1-1',
+                                        checked : false,
+                                        disabled: true
+                                    },
+                                    {
+                                        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) {
+            get(){
-                setTimeout(() => {
+                console.log(this.$refs.treeRef.getCheckedNodes())
-                    const isSet = Math.ceil(Math.random()*10)%2;
-                    let data = [];
-                    if( isSet ){
-                        data = [
-                            {
-                                title: 'children-1',
-                                loading: false,
-                                children: []
-                            }
-                        ];
-                    }
-                    callback(data);
-                }, 1000);
             }
         }
-    };
+    }
 </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>-->

package.json

@@ -1,9 +1,9 @@
 {
     "name": "iview",
-    "version": "3.5.1",
+    "version": "3.5.4",
     "title": "iView",
     "description": "A high quality UI components Library with Vue.js",
-    "homepage": "http://www.iviewui.com",
+    "homepage": "http://iview.talkingdata.com",
     "keywords": [
         "iview",
         "vue",

src/components/affix/affix.vue

@@ -48,6 +48,10 @@
             },
             offsetBottom: {
                 type: Number
+            },
+            useCapture: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -78,8 +82,8 @@
         mounted () {
 //            window.addEventListener('scroll', this.handleScroll, false);
 //            window.addEventListener('resize', this.handleScroll, false);
-            on(window, 'scroll', this.handleScroll);
+            on(window, 'scroll', this.handleScroll, this.useCapture);
-            on(window, 'resize', this.handleScroll);
+            on(window, 'resize', this.handleScroll, this.useCapture);
             this.$nextTick(() => {
                 this.handleScroll();
             });
@@ -87,8 +91,8 @@
         beforeDestroy () {
 //            window.removeEventListener('scroll', this.handleScroll, false);
 //            window.removeEventListener('resize', this.handleScroll, false);
-            off(window, 'scroll', this.handleScroll);
+            off(window, 'scroll', this.handleScroll, this.useCapture);
-            off(window, 'resize', this.handleScroll);
+            off(window, 'resize', this.handleScroll, this.useCapture);
         },
         methods: {
             handleScroll () {

src/components/auto-complete/auto-complete.vue

@@ -13,7 +13,7 @@
         remote
         auto-complete
         :remote-method="remoteMethod"
-        @on-change="handleChange"
+        @on-select="handleSelect"
         @on-clickoutside="handleClickOutside"
         :transfer="transfer">
         <slot name="input">
@@ -88,7 +88,7 @@
             },
             placement: {
                 validator (value) {
-                    return oneOf(value, ['top', 'bottom']);
+                    return oneOf(value, ['top', 'bottom', 'top-start', 'bottom-start', 'top-end', 'bottom-end']);
                 },
                 default: 'bottom'
             },
@@ -152,9 +152,10 @@
             remoteMethod (query) {
                 this.$emit('on-search', query);
             },
-            handleChange (val) {
+            handleSelect (val) {
                 if (val === undefined || val === null) return;
                 this.currentValue = val;
+
                 this.$refs.input.blur();
                 this.$emit('on-select', val);
             },

src/components/carousel/carousel.vue

@@ -201,7 +201,7 @@
                     child.width = this.listWidth;
                     child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
                 });
-                const slidesLength = this.slides.length || 0
+                const slidesLength = this.slides.length || 0;
                 this.trackWidth = slidesLength * this.listWidth;
             },
             // use when slot changed
@@ -272,8 +272,10 @@
             },
             dotsEvent (event, n) {
                 let curIndex = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex;
+                const oldCurrentIndex = this.currentIndex;
                 if (event === this.trigger && curIndex !== n) {
                     this.updateTrackIndex(n);
+                    this.$emit('on-change', oldCurrentIndex, this.currentIndex);
                     this.$emit('input', n);
                     // Reset autoplay timer when trigger be activated
                     this.setAutoplay();

src/components/cascader/cascader.vue

@@ -44,6 +44,7 @@
                                     [selectPrefixCls + '-item-disabled']: item.disabled
                                 }]"
                                 v-for="(item, index) in querySelections"
+                                :key="index"
                                 @click="handleSelectItem(index)" v-html="item.display"></li>
                         </ul>
                     </div>

src/components/cascader/caspanel.vue

@@ -7,9 +7,18 @@
                 :prefix-cls="prefixCls"
                 :data="item"
                 :tmp-item="tmpItem"
-                @click.native.stop="handleClickItem(item)"
+                @click.native.stop="handleClickItem(item, $event)"
-                @mouseenter.native.stop="handleHoverItem(item)"></Casitem>
+                @mouseenter.native.stop="handleHoverItem(item)"
-        </ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
+                ></Casitem>
+        </ul>
+        <Caspanel
+      v-if="sublist && sublist.length"
+      :prefix-cls="prefixCls"
+      :data="sublist"
+      :disabled="disabled"
+      :trigger="trigger"
+      :change-on-select="changeOnSelect">
+      </Caspanel>
     </span>
 </template>
 <script>
@@ -48,16 +57,25 @@
             }
         },
         methods: {
-            handleClickItem (item) {
+            isIcon(node){
+                let nodeName = (node.nodeName || '').toLocaleUpperCase();
+                let isIvu = node.classList.contains('ivu-icon');
+                if(nodeName == 'I' && isIvu){
+                    return true;
+                }
+                return false;
+            },
+            handleClickItem (item, ev) {
+                let isIcon = this.isIcon(ev.target);
                 if (this.trigger !== 'click' && item.children && item.children.length) return;  // #1922
-                this.handleTriggerItem(item, false, true);
+                this.handleTriggerItem(item, false, true,isIcon);
             },
             handleHoverItem (item) {
                 if (this.trigger !== 'hover' || !item.children || !item.children.length) return;  // #1922
-                this.handleTriggerItem(item, false, true);
+                this.handleTriggerItem(item, false, true,false);
             },
             //#6158 -- default fromInit = false to fromInit = true;
-            handleTriggerItem (item, fromInit = true, fromUser = false) {
+            handleTriggerItem (item, fromInit = true, fromUser = false,isIcon=false) {
                 if (item.disabled) return;
 
                 const cascader = findComponentUpward(this, 'Cascader');
@@ -90,7 +108,7 @@
 
                 if (item.children && item.children.length){
                     this.sublist = item.children;
-                    this.dispatch('Cascader', 'on-result-change', {
+                    !isIcon && this.dispatch('Cascader', 'on-result-change', {
                         lastValue: false,
                         changeOnSelect: this.changeOnSelect,
                         fromInit: fromInit
@@ -105,7 +123,7 @@
                     }
                 } else {
                     this.sublist = [];
-                    this.dispatch('Cascader', 'on-result-change', {
+                    !isIcon && this.dispatch('Cascader', 'on-result-change', {
                         lastValue: true,
                         changeOnSelect: this.changeOnSelect,
                         fromInit: fromInit

src/components/date-picker/base/date-table.vue

@@ -75,7 +75,10 @@
 
                 return this.calendar(tableYear, tableMonth, (cell) => {
                     // normalize date offset from the dates provided by jsCalendar
-                    if (cell.date instanceof Date) cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 60000);
+                    // Comment out this code to fix daylight saving time bug 
+                    // https://www.cnblogs.com/hamsterPP/p/5415472.html
+                    if (cell.date instanceof Date) cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 60000 + 480 * 60 * 1000);
+                    //if (cell.date instanceof Date) cell.date.setTime(clearHours(cell.date));
 
                     const time = cell.date && clearHours(cell.date);
                     const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();

src/components/date-picker/panel/Date/date-range.vue

@@ -296,7 +296,18 @@
             },
             changePanelDate(panel, type, increment, updateOtherPanel = true){
                 const current = new Date(this[`${panel}PanelDate`]);
-                current[`set${type}`](current[`get${type}`]() + increment);
+                
+                if (this.splitPanels) {
+                    // fix #6404
+                    current[`set${type}`](current[`get${type}`]() + increment);
+                } else {
+                    if (panel === 'left') {
+                        current[`set${type}`](current[`get${type}`]() + increment);
+                    } else {
+                        current[`set${type}`](current[`get${type}`]() + increment);
+                    }
+                }
+
                 this[`${panel}PanelDate`] = current;
 
                 if (!updateOtherPanel) return;

src/components/drawer/drawer.vue

@@ -1,11 +1,11 @@
 <template>
     <div v-transfer-dom :data-transfer="transfer">
         <transition name="fade">
-            <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
+            <div :class="maskClasses" :style="maskStyle" v-if="mask && visible" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
             <transition :name="'move-' + placement">
-                <div :class="classes" :style="mainStyles" v-show="visible">
+                <div :class="classes" :style="mainStyles" v-if="visible">
                     <div :class="contentClasses" ref="content">
                         <a class="ivu-drawer-close" v-if="closable" @click="close">
                             <slot name="close">

src/components/form/form-item.vue

@@ -178,33 +178,36 @@
                 return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
             },
             validate(trigger, callback = function () {}) {
-                let rules = this.getFilteredRule(trigger);
+                this.$nextTick(() => {
-                if (!rules || rules.length === 0) {
+                    let rules = this.getFilteredRule(trigger);
-                    if (!this.required) {
+                    if (!rules || rules.length === 0) {
-                        callback();
+                        if (!this.required) {
-                        return true;
+                            this.validateState = '';
-                    }else {
+                            callback();
-                        rules = [{required: true}];
+                            return true;
+                        }else {
+                            rules = [{required: true}];
+                        }
                     }
-                }
 
-                this.validateState = 'validating';
+                    this.validateState = 'validating';
 
-                let descriptor = {};
+                    let descriptor = {};
-                descriptor[this.prop] = rules;
+                    descriptor[this.prop] = rules;
 
-                const validator = new AsyncValidator(descriptor);
+                    const validator = new AsyncValidator(descriptor);
-                let model = {};
+                    let model = {};
 
-                model[this.prop] = this.fieldValue;
+                    model[this.prop] = this.fieldValue;
 
-                validator.validate(model, { firstFields: true }, errors => {
+                    validator.validate(model, { firstFields: true }, errors => {
-                    this.validateState = !errors ? 'success' : 'error';
+                        this.validateState = !errors ? 'success' : 'error';
-                    this.validateMessage = errors ? errors[0].message : '';
+                        this.validateMessage = errors ? errors[0].message : '';
 
-                    callback(this.validateMessage);
+                        callback(this.validateMessage);
+                    });
+                    this.validateDisabled = false;
                 });
-                this.validateDisabled = false;
             },
             resetField () {
                 this.validateState = '';

src/components/input/input.vue

@@ -2,39 +2,41 @@
     <div :class="wrapClasses">
         <template v-if="type !== 'textarea'">
             <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
-            <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
+            <div :class="[prefixCls + '-inner-container']">
-            <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
+                <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
-            <i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
+                <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
-            <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
+                <i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
-            <transition name="fade">
+                <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
-                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
+                <transition name="fade">
-            </transition>
+                    <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
-            <input
+                </transition>
-                :id="elementId"
+                <input
-                :autocomplete="autocomplete"
+                    :id="elementId"
-                :spellcheck="spellcheck"
+                    :autocomplete="autocomplete"
-                ref="input"
+                    :spellcheck="spellcheck"
-                :type="type"
+                    ref="input"
-                :class="inputClasses"
+                    :type="type"
-                :placeholder="placeholder"
+                    :class="inputClasses"
-                :disabled="disabled"
+                    :placeholder="placeholder"
-                :maxlength="maxlength"
+                    :disabled="disabled"
-                :readonly="readonly"
+                    :maxlength="maxlength"
-                :name="name"
+                    :readonly="readonly"
-                :value="currentValue"
+                    :name="name"
-                :number="number"
+                    :value="currentValue"
-                :autofocus="autofocus"
+                    :number="number"
-                @keyup.enter="handleEnter"
+                    :autofocus="autofocus"
-                @keyup="handleKeyup"
+                    @keyup.enter="handleEnter"
-                @keypress="handleKeypress"
+                    @keyup="handleKeyup"
-                @keydown="handleKeydown"
+                    @keypress="handleKeypress"
-                @focus="handleFocus"
+                    @keydown="handleKeydown"
-                @blur="handleBlur"
+                    @focus="handleFocus"
-                @compositionstart="handleComposition"
+                    @blur="handleBlur"
-                @compositionupdate="handleComposition"
+                    @compositionstart="handleComposition"
-                @compositionend="handleComposition"
+                    @compositionupdate="handleComposition"
-                @input="handleInput"
+                    @compositionend="handleComposition"
-                @change="handleChange">
+                    @input="handleInput"
+                    @change="handleChange">
+            </div>
             <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
             <div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
                 <i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>

src/components/select/select.vue

@@ -63,7 +63,9 @@
                 :transfer="transfer"
                 v-transfer-dom
             >
-                <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
+                <ul v-show="showNotFoundLabel && !$slots.empty" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
+                <!--feature #5327-->
+                <ul v-if="showNotFoundLabel && $slots.empty" :class="[prefixCls + '-not-found']"  @mousedown.prevent><li><slot name="empty"></slot></li></ul>
                 <ul :class="prefixCls + '-dropdown-list'">
                     <functional-options
                         v-if="(!remote) || (remote && !loading)"
@@ -258,7 +260,7 @@
             this.$on('on-select-selected', this.onOptionClick);
 
             // set the initial values if there are any
-            if (!this.remote && this.selectOptions.length > 0){
+            if ( this.selectOptions.length > 0){
                 this.values = this.getInitialValue().map(value => {
                     if (typeof value !== 'number' && !value) return null;
                     return this.getOptionData(value);
@@ -286,6 +288,8 @@
                 hasExpectedValue: false,
                 preventRemoteCall: false,
                 filterQueryChange: false,  // #4273
+                // #6349
+                hideMenuTimer: null
             };
         },
         computed: {
@@ -410,9 +414,8 @@
                             const optionPassesFilter = this.filterable ? this.validateOption(cOptions) : option;
                             if (!optionPassesFilter) continue;
                         }
-
                         optionCounter = optionCounter + 1;
-                        selectOptions.push(this.processOption(option, selectedValues, optionCounter === currentIndex));
+                        selectOptions.push(this.processOption(option, selectedValues, currentIndex === optionCounter));
                     }
                 }
 
@@ -442,9 +445,9 @@
                 }
             },
             clearSingleSelect(){ // PUBLIC API
-                this.$emit('on-clear');
                 this.hideMenu();
                 if (this.clearable) this.reset();
+                this.$emit('on-clear'); // #6331
             },
             getOptionData(value){
                 const option = this.flatOptions.find(({componentOptions}) => componentOptions.propsData.value === value);
@@ -472,7 +475,6 @@
                 const optionValue = option.componentOptions.propsData.value;
                 const disabled = option.componentOptions.propsData.disabled;
                 const isSelected = values.includes(optionValue);
-
                 const propsData = {
                     ...option.componentOptions.propsData,
                     selected: isSelected,
@@ -490,15 +492,18 @@
             },
 
             validateOption({children, elm, propsData}){
-                const value = propsData.value;
                 const label = propsData.label || '';
                 const textContent = (elm && elm.textContent) || (children || []).reduce((str, node) => {
                     const nodeText = node.elm ? node.elm.textContent : node.text;
                     return `${str} ${nodeText}`;
                 }, '') || '';
-                const stringValues = JSON.stringify([value, label, textContent]);
+                const stringValues = [label, textContent];
                 const query = this.query.toLowerCase().trim();
-                return stringValues.toLowerCase().includes(query);
+                const findValuesIndex = stringValues.findIndex(item=>{
+                    let itemToLowerCase = item.toLowerCase();
+                    return itemToLowerCase.includes(query);
+                });
+                return findValuesIndex === -1 ? false : true;
             },
 
             toggleMenu (e, force) {
@@ -512,9 +517,22 @@
                     this.broadcast('Drop', 'on-update-popper');
                 }
             },
+            updateFocusIndex(){
+                this.focusIndex = this.flatOptions.findIndex((opt) => {
+                    if (!opt || !opt.componentOptions) return false;
+                    return opt.componentOptions.propsData.value === this.publicValue;
+                });
+            },
             hideMenu () {
                 this.toggleMenu(null, false);
-                setTimeout(() => this.unchangedQuery = true, ANIMATION_TIMEOUT);
+                setTimeout(() =>{
+                    this.unchangedQuery = true;
+                    // resolve if we use filterable, dropItem not selected #6349
+                    this.hideMenuTimer = setTimeout(()=>{
+                        this.updateFocusIndex();
+                        this.hideMenuTimer = null;
+                    });
+                }, ANIMATION_TIMEOUT);
             },
             onClickOutside(event){
                 if (this.visible) {
@@ -632,7 +650,6 @@
             },
             onOptionClick(option) {
                 if (this.multiple){
-
                     // keep the query for remote select
                     if (this.remote) this.lastRemoteQuery = this.lastRemoteQuery || this.query;
                     else this.lastRemoteQuery = '';
@@ -643,25 +660,19 @@
                     } else {
                         this.values = this.values.concat(option);
                     }
-
                     this.isFocused = true; // so we put back focus after clicking with mouse on option elements
                 } else {
-                    this.query = String(option.label).trim();
+                    this.query = '';
                     this.values = [option];
                     this.lastRemoteQuery = '';
                     this.hideMenu();
                 }
-
-                this.focusIndex = this.flatOptions.findIndex((opt) => {
-                    if (!opt || !opt.componentOptions) return false;
-                    return opt.componentOptions.propsData.value === option.value;
-                });
-
                 if (this.filterable){
                     const inputField = this.$el.querySelector('input[type="text"]');
                     if (!this.autoComplete) this.$nextTick(() => inputField.focus());
                 }
                 this.broadcast('Drop', 'on-update-popper');
+                this.$emit('on-select', this.publicValue); // # 4441
                 setTimeout(() => {
                     this.filterQueryChange = false;
                 }, ANIMATION_TIMEOUT);
@@ -685,6 +696,9 @@
                 this.query = query;
                 this.unchangedQuery = this.visible;
                 this.filterQueryChange = true;
+                if(this.filterable){
+                    this.updateFocusIndex();
+                }
             },
             toggleHeaderFocus({type}){
                 if (this.disabled) {
@@ -704,13 +718,13 @@
         watch: {
             value(value){
                 const {getInitialValue, getOptionData, publicValue, values} = this;
-
                 this.checkUpdateStatus();
-
+                const vModelValue = (publicValue && this.labelInValue) ? 
+                                    (this.multiple ? publicValue.map(({value}) => value) : publicValue.value) : publicValue;
                 if (value === '') this.values = [];
-                else if (checkValuesNotEqual(value,publicValue,values)) {
+                else if (checkValuesNotEqual(value,vModelValue,values)) {
                     this.$nextTick(() => this.values = getInitialValue().map(getOptionData).filter(Boolean));
-                    this.dispatch('FormItem', 'on-form-change', this.publicValue);
+                    if (!this.multiple) this.dispatch('FormItem', 'on-form-change', this.publicValue);
                 }
             },
             values(now, before){
@@ -772,14 +786,15 @@
                 const optionInstance = findChild(this, ({$options}) => {
                     return $options.componentName === 'select-item' && $options.propsData.value === optionValue;
                 });
-
+                if(optionInstance && optionInstance.$el ){
-                let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
+                    let bottomOverflowDistance = optionInstance.$el.getBoundingClientRect().bottom - this.$refs.dropdown.$el.getBoundingClientRect().bottom;
-                let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
+                    let topOverflowDistance = optionInstance.$el.getBoundingClientRect().top - this.$refs.dropdown.$el.getBoundingClientRect().top;
-                if (bottomOverflowDistance > 0) {
+                    if (bottomOverflowDistance > 0) {
-                    this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
+                        this.$refs.dropdown.$el.scrollTop += bottomOverflowDistance;
-                }
+                    }
-                if (topOverflowDistance < 0) {
+                    if (topOverflowDistance < 0) {
-                    this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
+                        this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
+                    }
                 }
             },
             dropVisible(open){

src/components/slider/marker.js

@@ -0,0 +1,16 @@
+export default {
+    name: 'SliderMarker',
+    props: {
+        mark: {
+            type: [String, Object]
+        }
+    },
+    render (h) {
+        let label = typeof this.mark === 'string' ? this.mark : [this.mark.label];
+
+        return h('div', {
+            class: 'ivu-slider-marks-item',
+            style: this.mark.style || {}
+        }, label);
+    }
+};

src/components/slider/slider.vue

@@ -7,7 +7,7 @@
             :max="max"
             :step="step"
             :value="exportValue[0]"
-            :disabled="disabled"
+            :disabled="itemDisabled"
             :active-change="activeChange"
             @on-change="handleInputChange"></Input-number>
         <div
@@ -15,18 +15,37 @@
             ref="slider" @click.self="sliderClick"
         >
             <input type="hidden" :name="name" :value="exportValue">
-            <template v-if="showStops">
-                <div
-                    :class="[prefixCls + '-stop']"
-                    v-for="item in stops"
-                    :style="{ 'left': item + '%' }"
-                    @click.self="sliderClick"
-                ></div>
-            </template>
             <div
                 :class="[prefixCls + '-bar']"
                 :style="barStyle"
                 @click.self="sliderClick"></div>
+            <template v-if="showStops">
+                <div
+                    :class="[prefixCls + '-stop']"
+                    v-for="(item,index) in stops" 
+                    :key="index"
+                    :style="{ 'left': item + '%' }"
+                    @click.self="sliderClick"
+                ></div>
+            </template>
+            <template v-if="markList.length > 0">
+                <div
+                    v-for="(item, key) in markList"
+                    :key="key"
+                    :class="[prefixCls + '-stop']"
+                    :style="{ 'left': item.position + '%' }"
+                    @click.self="sliderClick"
+                ></div>
+                <div class="ivu-slider-marks">
+                    <SliderMarker
+                        v-for="(item, key) in markList"
+                        :key="key"
+                        :mark="item.mark"
+                        :style="{ 'left': item.position + '%' }"
+                        @click.native="sliderClick"
+                    />
+                </div>
+            </template>
             <div
                 :class="[prefixCls + '-button-wrap']"
                 :style="{left: minPosition + '%'}"
@@ -83,17 +102,19 @@
 <script>
     import InputNumber from '../../components/input-number/input-number.vue';
     import Tooltip from '../../components/tooltip/tooltip.vue';
+    import SliderMarker from './marker';
     import { getStyle, oneOf } from '../../utils/assist';
     import { on, off } from '../../utils/dom';
     import Emitter from '../../mixins/emitter';
+    import mixinsForm from '../../mixins/form';
     import elementResizeDetectorMaker from 'element-resize-detector';
 
     const prefixCls = 'ivu-slider';
 
     export default {
         name: 'Slider',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, mixinsForm ],
-        components: { InputNumber, Tooltip },
+        components: { InputNumber, Tooltip, SliderMarker },
         props: {
             min: {
                 type: Number,
@@ -154,6 +175,10 @@
             activeChange: {
                 type: Boolean,
                 default: true
+            },
+            // 3.5.4
+            marks: {
+                type: Object
             }
         },
         data () {
@@ -200,7 +225,7 @@
                     {
                         [`${prefixCls}-input`]: this.showInput && !this.range,
                         [`${prefixCls}-range`]: this.range,
-                        [`${prefixCls}-disabled`]: this.disabled
+                        [`${prefixCls}-disabled`]: this.itemDisabled
                     }
                 ];
             },
@@ -254,6 +279,19 @@
                 }
                 return result;
             },
+            markList() {
+                if (!this.marks) return [];
+
+                const marksKeys = Object.keys(this.marks);
+                return marksKeys.map(parseFloat)
+                    .sort((a, b) => a - b)
+                    .filter(point => point <= this.max && point >= this.min)
+                    .map(point => ({
+                        point,
+                        position: (point - this.min) * 100 / (this.max - this.min),
+                        mark: this.marks[point]
+                    }));
+            },
             tipDisabled () {
                 return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
             },
@@ -280,7 +318,7 @@
                 return [min, max];
             },
             getCurrentValue (event, type) {
-                if (this.disabled) {
+                if (this.itemDisabled) {
                     return;
                 }
 
@@ -304,7 +342,7 @@
                 }
             },
             onPointerDown (event, type) {
-                if (this.disabled) return;
+                if (this.itemDisabled) return;
                 event.preventDefault();
                 this.pointerDown = type;
 
@@ -359,10 +397,10 @@
                 this.currentValue = [...value];
 
                 if (!this.dragging) {
-                    if (this.currentValue[index] !== this.oldValue[index]) {
+                    // if (this.currentValue[index] !== this.oldValue[index]) {
-                        this.emitChange();
+                    this.emitChange();
-                        this.oldValue[index] = this.currentValue[index];
+                        // this.oldValue[index] = this.currentValue[index];
-                    }
+                    // }
                 }
             },
             handleDecimal(pos,step){
@@ -386,7 +424,7 @@
             },
 
             sliderClick (event) {
-                if (this.disabled) return;
+                if (this.itemDisabled) return;
                 const currentX = this.getPointerX(event);
                 const sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
                 let newPos = ((currentX - sliderOffsetLeft) / this.sliderWidth * this.valueRange) + this.min;
@@ -437,4 +475,4 @@
             this.observer.removeListener(this.$refs.slider, this.handleSetSliderWidth);
         }
     };
-</script>
+</script>

src/components/split/split.vue

@@ -69,7 +69,10 @@
                 prefix: 'ivu-split',
                 offset: 0,
                 oldOffset: 0,
-                isMoving: false
+                isMoving: false,
+                computedMin: 0,
+                computedMax: 0,
+                currentValue: 0.5
             };
         },
         computed: {
@@ -98,12 +101,6 @@
             },
             offsetSize () {
                 return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
-            },
-            computedMin () {
-                return this.getComputedThresholdValue('min');
-            },
-            computedMax () {
-                return this.getComputedThresholdValue('max');
             }
         },
         methods: {
@@ -157,22 +154,35 @@
                 this.$emit('on-move-start');
             },
             computeOffset(){
-                this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+                this.$nextTick(() => {
+                    this.computedMin = this.getComputedThresholdValue('min');
+                    this.computedMax = this.getComputedThresholdValue('max');
+                    let value = this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value;
+                    let anotherValue = this.getAnotherOffset(value);
+                    if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
+                    if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
+                    this.offset = value * 10000 / 100;
+                    this.currentValue = value;
+                    this.$emit('input', value);
+                });
             }
         },
         watch: {
-            value () {
+            value (val) {
-                this.computeOffset();
+                if (val !== this.currentValue) {
+                    this.currentValue = val;
+                    this.computeOffset();
+                }
             }
         },
         mounted () {
             this.$nextTick(() => {
                 this.computeOffset();
             });
-
+            on(window, 'resize', this.computeOffset);
-            window.addEventListener('resize', ()=>{
+        },
-                this.computeOffset();
+        beforeDestroy () {
-            });
+            off(window, 'resize', this.computeOffset);
         }
     };
 </script>

src/components/steps/step.vue

@@ -3,8 +3,10 @@
         <div :class="[prefixCls + '-tail']"><i></i></div>
         <div :class="[prefixCls + '-head']">
             <div :class="[prefixCls + '-head-inner']">
-                <span v-if="!icon && currentStatus != 'finish' && currentStatus != 'error'">{{ stepNumber }}</span>
+                <slot name="status">
-                <span v-else :class="iconClasses"></span>
+                    <span v-if="!icon && currentStatus != 'finish' && currentStatus != 'error'">{{ stepNumber }}</span>
+                    <span v-else :class="iconClasses"></span>
+                </slot>
             </div>
         </div>
         <div :class="[prefixCls + '-main']">

src/components/tabs/tabs.vue

@@ -100,6 +100,13 @@
             name: {
                 type: String
             },
+            custContentClass: {
+                type: String,
+                default: ''
+            },
+            custContentStyle: {
+                type: Object,
+            }
         },
         data () {
             return {
@@ -133,7 +140,8 @@
                     `${prefixCls}-content`,
                     {
                         [`${prefixCls}-content-animated`]: this.animated
-                    }
+                    },
+                    this.custContentClass
                 ];
             },
             barClasses () {
@@ -154,6 +162,12 @@
                         transform: `translateX(${p}) translateZ(0px)`
                     };
                 }
+                const { custContentStyle } = this;
+                if (custContentStyle) {
+                    for (const key in custContentStyle){
+                        style[key] = custContentStyle[key];
+                    }
+                }
                 return style;
             },
             barStyle () {

src/components/tree/tree.vue

@@ -121,9 +121,9 @@
                 const node = this.flatState[nodeKey].node;
                 const parent = this.flatState[parentKey].node;
                 if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
-
                 if (node.checked == true) {
-                    this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
+                    // #6121
+                    this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked || node.disabled !== undefined ));
                     this.$set(parent, 'indeterminate', !parent.checked);
                 } else {
                     this.$set(parent, 'checked', false);
@@ -160,10 +160,16 @@
             },
             updateTreeDown(node, changes = {}) {
                 if (this.checkStrictly) return;
-
                 for (let key in changes) {
-                    this.$set(node, key, changes[key]);
+                    // after #6121
+                    if( key === 'checked' && node.disabled ){
+                        this.$set(node, key, node.checked);
+                    }else{
+                        this.$set(node, key, changes[key]);
+                    }
+                    // before -- this.$set(node, key, changes[key]);
                 }
+
                 if (node[this.childrenKey]) {
                     node[this.childrenKey].forEach(child => {
                         this.updateTreeDown(child, changes);

src/mixins/form.js

@@ -0,0 +1,14 @@
+export default {
+    inject: {
+        FormInstance: {
+            default: ''
+        }
+    },
+    computed: {
+        itemDisabled () {
+            let state = this.disabled;
+            if (!state && this.FormInstance) state = this.FormInstance.disabled;
+            return state;
+        }
+    }
+};

src/styles/components/slider.less

@@ -68,6 +68,19 @@
         background-color: @slider-disabled-color;
         transform: translateX(-50%);
     }
+    &-marks{
+        top: 0;
+        left: 12px;
+        width: 18px;
+        height: 100%;
+
+        &-item{
+            position: absolute;
+            transform: translateX(-50%);
+            color: @subsidiary-color;
+            margin-top: 15px;
+        }
+    }
 }
 
 .@{slider-prefix-cls}-disabled{

src/styles/components/steps.less

@@ -126,7 +126,6 @@
     .@{steps-prefix-cls}-main {
         position: relative;
         display: inline-block;
-        vertical-align: top;
     }
 
     .@{steps-prefix-cls}-head-inner {

src/styles/mixins/input.less

@@ -159,7 +159,8 @@
         vertical-align: middle;
     }
 
-    .@{inputClass} {
+    .@{inputClass},
+    .@{inputClass}-inner-container {
         width: 100%;
         float: left;
         margin-bottom: 0;

src/utils/assist.js

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

src/utils/dom.js

@@ -4,9 +4,9 @@ const isServer = Vue.prototype.$isServer;
 /* istanbul ignore next */
 export const on = (function() {
     if (!isServer && document.addEventListener) {
-        return function(element, event, handler) {
+        return function(element, event, handler, useCapture = false) {
             if (element && event && handler) {
-                element.addEventListener(event, handler, false);
+                element.addEventListener(event, handler, useCapture);
             }
         };
     } else {
@@ -21,9 +21,9 @@ export const on = (function() {
 /* istanbul ignore next */
 export const off = (function() {
     if (!isServer && document.removeEventListener) {
-        return function(element, event, handler) {
+        return function(element, event, handler, useCapture = false) {
             if (element && event) {
-                element.removeEventListener(event, handler, false);
+                element.removeEventListener(event, handler, useCapture);
             }
         };
     } else {

types/iview.components.d.ts

@@ -37,7 +37,7 @@ export { Scroll } from './scroll';
 export { Split } from './split';
 export { Layout } from './layout';
 export { LoadingBar, LoadingBarConfig } from './loading-bar';
-export { Menu, MenuGroup, MenuItem, MenuSub } from './menu';
+export { Menu, MenuGroup, MenuItem, Submenu } from './menu';
 export { Message, MessageConfig } from './message';
 export { Modal, ModalInstance, ModalConfig } from './modal';
 export { Notice, NoticeConfig, NoticeGlobalConfig } from './notice';

types/menu.d.ts

@@ -38,7 +38,7 @@ export declare class Menu extends Vue {
    */
   $emit(eventName: 'on-select', name?: string | number): this;
   /**
-   * 当 展开/收起 子菜单时触发	
+   * 当 展开/收起 子菜单时触发
    * @default 当前展开的 Submenu 的 name 值数组
    */
   $emit(eventName: 'on-open-change', names: string[] | number[]): this;
@@ -78,7 +78,7 @@ export declare class MenuItem extends Vue {
   append?: boolean;
 }
 
-export declare class MenuSub extends Vue {
+export declare class Submenu extends Vue {
   /**
    * 子菜单的唯一标识，必填
    */
@@ -104,4 +104,4 @@ export declare class MenuGroup extends Vue {
    * @default 空
    */
   title?: string;
-}
+}