Merge pull request #36 from iview/2.0

update

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <a href="https://www.iviewui.com">
+    <a href="http://iview.talkingdata.com/">
         <img width="200" src="https://file.iviewui.com/logo-new.svg">
     </a>
 </p>
@@ -22,7 +22,7 @@ iView
 
 ## Docs
 
-**[3.x](https://www.iviewui.com)** | [2.x](http://v2.iviewui.com) | [1.x](http://v1.iviewui.com)
+**[3.x](http://iview.talkingdata.com/)** | [2.x](http://v2.iviewui.com) | [1.x](http://v1.iviewui.com)
 
 ## Features
 

examples/routers/carousel.vue

@@ -1,18 +1,9 @@
-<style>
-    .demo-carousel{
-        height: 200px;
-        line-height: 200px;
-        text-align: center;
-        color: #fff;
-        font-size: 20px;
-        background: #506b9e;
-    }
-</style>
 <template>
-    <div style="width: 400px;">
+    <div>
-        <Carousel v-model="value1" loop arrow="always" @on-change="handleChange">
+        <!--#6076-->
+        <Carousel loop>
             <CarouselItem>
-                <div class="demo-carousel">1</div>
+                <div class="demo-carousel">111111111111</div>
             </CarouselItem>
             <CarouselItem>
                 <div class="demo-carousel">2</div>
@@ -24,20 +15,65 @@
                 <div class="demo-carousel">4</div>
             </CarouselItem>
         </Carousel>
-        <Button @click="value1 = 2">change</Button>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                value1: 0
+
             }
         },
         methods: {
-            handleChange (old, newval) {
+
-                console.log(old, newval);
+        },
-            }
+        mounted () {
+
         }
     }
 </script>
+<style>
+    .demo-carousel{
+        height: 100px;
+    }
+</style>
+<!--<style>-->
+<!--    .demo-carousel{-->
+<!--        height: 200px;-->
+<!--        line-height: 200px;-->
+<!--        text-align: center;-->
+<!--        font-size: 20px;-->
+<!--    }-->
+<!--</style>-->
+<!--<template>-->
+<!--    <div>-->
+<!--        <Carousel v-model="value1" loop @on-change="handleChange" @on-click="handlerClick">-->
+<!--            <CarouselItem v-for="it in 4" :key="it">-->
+<!--                <div class="demo-carousel">-->
+<!--                    {{it}}<Button @click="handlerIndexClick(it)">点击事件</Button>-->
+<!--                </div>-->
+<!--            </CarouselItem>-->
+<!--        </Carousel>-->
+<!--        <Button @click="value1 = 2">change</Button>-->
+<!--    </div>-->
+<!--</template>-->
+<!--<script>-->
+<!--    export default {-->
+<!--        data () {-->
+<!--            return {-->
+<!--                value1: 0-->
+<!--            }-->
+<!--        },-->
+<!--        methods: {-->
+<!--            handleChange (old, newval) {-->
+<!--                console.log(old, newval,'-&#45;&#45;on-change');-->
+<!--            },-->
+<!--            handlerClick(index){-->
+<!--                console.log(index,'&#45;&#45;&#45;&#45;&#45;&#45;on-click');-->
+<!--            },-->
+<!--            handlerIndexClick(it){-->
+<!--                console.log(it,'&#45;&#45;&#45;&#45;&#45;&#45;it')-->
+<!--            }-->
+<!--        },-->
+<!--    }-->
+<!--</script>-->

examples/routers/modal.vue

@@ -1,6 +1,12 @@
 <template>
     <div>
         <Button type="primary" @click="modal1 = true">Display dialog box</Button>
+        <Button type="primary" @click="modal2 = true">Display dialog box</Button>
+        <Modal v-model="modal2" draggable title="Common Modal dialog box title"
+               @on-ok="ok"
+               @on-cancel="cancel" :styles="{top: '300px', left: '100px'}">
+            <p>2123</p>
+        </Modal>
         <Modal
                 v-model="modal1"
                 title="Common Modal dialog box title"
@@ -52,6 +58,7 @@
         data () {
             return {
                 modal1: false,
+                modal2: false,
                 cityList: [
                     {
                         value: 'New York',

examples/routers/steps.vue

@@ -1,8 +1,13 @@
+<style>
+    .ivu-steps{
+        background: greenyellow;
+    }
+</style>
 <template>
 <div>
     <Steps :current="index">
         <!--<Step title="开始"></Step>-->
-        <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index" :content="item.startTime"></Step>
+        <Step v-for="(item, index) in activitiList" :title="item.approveUserName" :key="index"></Step>
         <!--<Step title="结束"></Step>-->
     </Steps>
     <Button @click="change">change</Button>

package.json

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

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

@@ -95,7 +95,7 @@
             transfer: {
                 type: Boolean,
                 default () {
-                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                    return !this.$IVIEW || this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
                 }
             },
             name: {

src/components/carousel/carousel.vue

@@ -4,10 +4,10 @@
             <Icon type="ios-arrow-back"></Icon>
         </button>
         <div :class="[prefixCls + '-list']">
-            <div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
+            <div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack" @click="handlerClickEvent('currentIndex')">
                 <slot></slot>
             </div>
-            <div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" ref="copyTrack" v-if="loop">
+            <div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" @click="handlerClickEvent('copyTrackIndex')" ref="copyTrack" v-if="loop">
             </div>
         </div>
         <button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
@@ -113,10 +113,13 @@
                 ];
             },
             trackStyles () {
+                // #6076
+                const visibleStyle = this.trackIndex === -1 ? 'hidden' : 'visible';
                 return {
                     width: `${this.trackWidth}px`,
                     transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`,
-                    transition: `transform 500ms ${this.easing}`
+                    transition: `transform 500ms ${this.easing}`,
+                    visibility : visibleStyle
                 };
             },
             copyTrackStyles () {
@@ -125,7 +128,7 @@
                     transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`,
                     transition: `transform 500ms ${this.easing}`,
                     position: 'absolute',
-                    top: 0
+                    //top: 0
                 };
             },
             arrowClasses () {
@@ -142,6 +145,9 @@
             }
         },
         methods: {
+            handlerClickEvent(type){
+                this.$emit('on-click',this[type]);
+            },
             // find option component
             findChild (cb) {
                 const find = function (child) {
@@ -195,8 +201,8 @@
                     child.width = this.listWidth;
                     child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
                 });
-
+                const slidesLength = this.slides.length || 0
-                this.trackWidth = (this.slides.length || 0) * this.listWidth;
+                this.trackWidth = slidesLength * this.listWidth;
             },
             // use when slot changed
             slotChange () {

src/components/cascader/cascader.vue

@@ -207,7 +207,7 @@
                     for (let i = 0; i < arr.length; i++) {
                         let item = arr[i];
                         item.__label = label ? label + ' / ' + item.label : item.label;
-                        item.__value = value ? value + ',' + item.value : item.value;
+                        item.__value = value ? [...value, item.value] : [item.value];
 
                         if (item.children && item.children.length) {
                             getSelections(item.children, item.__label, item.__value);
@@ -276,7 +276,7 @@
                 this.currentValue = this.selected = this.tmpSelected = [];
                 this.handleClose();
                 this.emitValue(this.currentValue, oldVal);
-//                this.$broadcast('on-clear');
+            //                this.$broadcast('on-clear');
                 this.broadcast('Caspanel', 'on-clear');
             },
             handleClose () {
@@ -328,7 +328,7 @@
                 this.query = '';
                 this.$refs.input.currentValue = '';
                 const oldVal = JSON.stringify(this.currentValue);
-                this.currentValue = item.value.split(',');
+                this.currentValue = item.value;
                 // use setTimeout for #4786, can not use nextTick, because @on-find-selected use nextTick
                 setTimeout(() => {
                     this.emitValue(this.currentValue, oldVal);
@@ -351,7 +351,7 @@
                     if ('__label' in new_item) {
                         delete new_item.__label;
                     }
-                    if ('children' in new_item && new_item.children.length) {
+                    if (Array.isArray(new_item.children) && new_item.children.length) {
                         new_item.children = new_item.children.map(i => deleteData(i));
                     }
                     return new_item;

src/components/modal/modal.vue

@@ -82,7 +82,10 @@
                 default: false
             },
             styles: {
-                type: Object
+                type: Object,
+                default() {
+                    return {};
+                }
             },
             className: {
                 type: String
@@ -202,8 +205,10 @@
                 let style = {};
 
                 if (this.draggable) {
-                    if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
+                    let customTop = this.styles.top ? parseFloat(this.styles.top) : 0;
-                    if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
+                    let customLeft = this.styles.left ? parseFloat(this.styles.left) : 0;
+                    if (this.dragData.x !== null) style.left = `${this.dragData.x - customLeft}px`;
+                    if (this.dragData.y !== null) style.top = `${this.dragData.y - customTop}px`;
                     const width = parseInt(this.width);
                     const styleWidth = {
                         width: width <= 100 ? `${width}%` : `${width}px`

src/components/page/page.vue

@@ -3,7 +3,7 @@
         <li
             :title="t('i.page.prev')"
             :class="prevClasses"
-            @click="prev">
+            @click.stop="prev">
             <a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
         </li>
         <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
@@ -21,7 +21,7 @@
         <li
             :title="t('i.page.next')"
             :class="nextClasses"
-            @click="next">
+            @click.stop="next">
             <a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
         </li>
     </ul>
@@ -32,24 +32,24 @@
         <li
             :title="t('i.page.prev')"
             :class="prevClasses"
-            @click="prev">
+            @click.stop="prev">
             <a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
         </li>
-        <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
+        <li title="1" :class="firstPageClasses" @click.stop="changePage(1)"><a>1</a></li>
-        <li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
+        <li :title="t('i.page.prev5')" v-if="currentPage > 5" :class="[prefixCls + '-item-jump-prev']" @click.stop="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
-        <li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
+        <li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li>
-        <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
+        <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
-        <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
+        <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
         <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
-        <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
+        <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
-        <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
+        <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
-        <li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
+        <li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click.stop="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li>
-        <li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
+        <li :title="t('i.page.next5')" v-if="allPages - currentPage >= 5" :class="[prefixCls + '-item-jump-next']" @click.stop="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
-        <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
+        <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click.stop="changePage(allPages)"><a>{{ allPages }}</a></li>
         <li
             :title="t('i.page.next')"
             :class="nextClasses"
-            @click="next">
+            @click.stop="next">
             <a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
         </li>
         <Options

src/components/progress/progress.vue

@@ -5,7 +5,7 @@
                 <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>
-        <span v-if="!hideInfo" :class="textClasses">
+        <span v-if="!hideInfo && !textInside" :class="textClasses">
             <slot>
                 <span v-if="isStatus" :class="textInnerClasses">
                     <Icon :type="statusIcon"></Icon>

src/components/select/select.vue

@@ -558,31 +558,32 @@
                 this.filterQueryChange = false;
             },
             handleKeydown (e) {
-                if (e.key === 'Backspace'){
+                const key = e.key || e.code;
+                if ( key === 'Backspace'){
                     return; // so we don't call preventDefault
                 }
 
                 if (this.visible) {
                     e.preventDefault();
-                    if (e.key === 'Tab'){
+                    if ( key === 'Tab'){
                         e.stopPropagation();
                     }
 
                     // Esc slide-up
-                    if (e.key === 'Escape') {
+                    if ( key === 'Escape') {
                         e.stopPropagation();
                         this.hideMenu();
                     }
                     // next
-                    if (e.key === 'ArrowUp') {
+                    if ( key === 'ArrowUp') {
                         this.navigateOptions(-1);
                     }
                     // prev
-                    if (e.key === 'ArrowDown') {
+                    if ( key === 'ArrowDown') {
                         this.navigateOptions(1);
                     }
                     // enter
-                    if (e.key === 'Enter') {
+                    if ( key === 'Enter') {
                         if (this.focusIndex === -1) return this.hideMenu();
                         const optionComponent = this.flatOptions[this.focusIndex];
 

src/components/table/table.vue

@@ -967,7 +967,9 @@
 
             this.$on('on-visible-change', (val) => {
                 if (val) {
+                    this.$nextTick(()=>{
                         this.handleResize();
+                    });
                 }
             });
         },

src/components/tabs/pane.vue

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

src/styles/components/carousel.less

@@ -24,15 +24,14 @@
 
     &-track {
         position: relative;
-        top: 0;
+        top: 100%;
         left: 0;
         display: block;
-
         overflow: hidden;
-
         z-index: 1;
         &.higher {
             z-index: 2;
+            top: 0;
         }
     }
 

src/styles/components/split.less

@@ -100,14 +100,14 @@
         }
     }
     &-horizontal {
-        .@{split-prefix-cls}-trigger-con {
+        >.@{split-prefix-cls}-trigger-con {
             top: 50%;
             height: 100%;
             width: 0;
         }
     }
     &-vertical {
-        .@{split-prefix-cls}-trigger-con {
+        >.@{split-prefix-cls}-trigger-con {
             left: 50%;
             height: 0;
             width: 100%;

src/styles/components/steps.less

@@ -128,9 +128,6 @@
         display: inline-block;
         vertical-align: top;
     }
-    .@{steps-prefix-cls}-head {
-        background: #fff;
-    }
 
     .@{steps-prefix-cls}-head-inner {
         display: block;
@@ -172,8 +169,6 @@
         font-size: 14px;
         font-weight: bold;
         color: #666;
-        background: #fff;
-
         > a:first-child:last-child {
             color: #666;
         }
@@ -342,12 +337,39 @@
     &.@{steps-prefix-cls}-hidden {
         visibility: hidden;
     }
+    .@{steps-prefix-cls}-tail {
+        display: none;
+    }
     .@{steps-prefix-cls}-content {
         //max-width: 100px;
-        padding-left: 35px;
+        padding-left: 45px;
     }
     .@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
         padding-left: 10px;
-        margin-left: -10px;
+    }
+    .@{steps-prefix-cls}-item {
+        overflow: hidden;
+        &:last-child .@{steps-prefix-cls}-title:after{
+            display: none;
+        }
+    }
+    .@{steps-prefix-cls}-title {
+        position: relative;
+        &:after{
+            content: '';
+            position: absolute;
+            width: 9999px;
+            height: 1px;
+            left: 100%;
+            top: 50%;
+            background: @border-color-split;
+        }
+    }
+    .@{steps-prefix-cls}-status-finish {
+        .@{steps-prefix-cls}-title:after {
+            background: @primary-color;
+            transition: all @transition-time @ease-in-out;
+            opacity: 1;
+        }
     }
 }