Merge pull request #15 from iview/2.0

更新到最新版本

dist/types/tabs.d.ts

@@ -58,7 +58,7 @@ export declare interface Tabs extends Vue {
   };
 }
 
-export declare interface TabsPane extends Vue {
+export declare interface TabPane extends Vue {
   /**
    * 用于标识当前面板，对应 value，默认为其索引值
    */
@@ -82,4 +82,4 @@ export declare interface TabsPane extends Vue {
    * @default null
    */
   closable?: boolean;
-}
+}

package.json

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

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

@@ -151,6 +151,7 @@
                 this.$emit('on-search', query);
             },
             handleChange (val) {
+                if (val === undefined || val === null) return;
                 this.currentValue = val;
                 this.$refs.input.blur();
                 this.$emit('on-select', val);

src/components/button/button.vue

@@ -1,27 +1,9 @@
 <template>
-    <a
-        v-if="to"
-        :class="classes"
-        :disabled="disabled"
-        :href="linkUrl"
-        :target="target"
-        @click.exact="handleClickLink($event, false)"
-        @click.ctrl="handleClickLink($event, true)"
-        @click.meta="handleClickLink($event, true)">
+    <component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps">
         <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
         <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
-    </a>
-    <button
-        v-else
-        :type="htmlType"
-        :class="classes"
-        :disabled="disabled"
-        @click="handleClickLink">
-        <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon>
-        <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
-        <span v-if="showSlot" ref="slot"><slot></slot></span>
-    </button>
+    </component>
 </template>
 <script>
     import Icon from '../icon';
@@ -98,14 +80,34 @@
                         [`${prefixCls}-ghost`]: this.ghost
                     }
                 ];
+            },
+            // Point out if it should render as <a> tag
+            isHrefPattern() {
+                const {to} = this;
+                return !!to;
+            },
+            tagName() {
+                const {isHrefPattern} = this;
+                return isHrefPattern ? 'a' : 'button';
+            },
+            tagProps() {
+                const {isHrefPattern} = this;
+                if(isHrefPattern) {
+                    const {linkUrl,target}=this;
+                    return {href: linkUrl, target};
+                } else {
+                    const {htmlType} = this;
+                    return {type: htmlType};
+                }
             }
         },
         methods: {
             // Ctrl or CMD and click, open in new window when use `to`
-            handleClickLink (event, new_window = false) {
+            handleClickLink (event) {
                 this.$emit('click', event);
+                const openInNewWindow = event.ctrlKey || event.metaKey;
 
-                this.handleCheckClick(event, new_window);
+                this.handleCheckClick(event, openInNewWindow);
             }
         },
         mounted () {

src/components/select/select.vue

@@ -753,7 +753,14 @@
             },
             visible(state){
                 this.$emit('on-open-change', state);
-            }
+            },
+            slotOptions(options, old){
+                // 当 dropdown 在控件上部显示时，如果选项列表的长度由外部动态变更了，
+                // dropdown 的位置会有点问题，需要重新计算
+                if (options && old && options.length !== old.length) {
+                    this.broadcast('Drop', 'on-update-popper');
+                }
+            },
         }
     };
 </script>

src/components/slider/slider.vue

@@ -379,7 +379,7 @@
             },
 
             handleInputChange (val) {
-                this.currentValue = [val, this.currentValue[1]];
+                this.currentValue = [val || this.min, this.currentValue[1]];
                 this.emitChange();
             },
 

src/components/table/cell.vue

@@ -18,23 +18,23 @@
                 <Icon type="ios-arrow-forward"></Icon>
             </div>
         </template>
-        <Cell
+        <table-expand
             v-if="renderType === 'render'"
             :row="row"
             :column="column"
             :index="index"
-            :render="column.render"></Cell>
+            :render="column.render"></table-expand>
     </div>
 </template>
 <script>
-    import Cell from './expand';
+    import TableExpand from './expand';
     import Icon from '../icon/icon.vue';
     import Checkbox from '../checkbox/checkbox.vue';
     import Tooltip from '../tooltip/tooltip.vue';
 
     export default {
         name: 'TableCell',
-        components: { Icon, Checkbox, Cell, Tooltip },
+        components: { Icon, Checkbox, TableExpand, Tooltip },
         props: {
             prefixCls: String,
             row: Object,

src/components/table/table-body.vue

@@ -14,7 +14,7 @@
                     @click.native="clickCurrentRow(row._index)"
                     @dblclick.native.stop="dblclickCurrentRow(row._index)">
                     <td v-for="column in columns" :class="alignCls(column, row)">
-                        <Cell
+                        <table-cell
                             :fixed="fixed"
                             :prefix-cls="prefixCls"
                             :row="row"
@@ -25,7 +25,7 @@
                             :checked="rowChecked(row._index)"
                             :disabled="rowDisabled(row._index)"
                             :expanded="rowExpanded(row._index)"
-                        ></Cell>
+                        ></table-cell>
                     </td>
                 </table-tr>
                 <tr v-if="rowExpanded(row._index)" :class="{[prefixCls + '-expanded-hidden']: fixed}">
@@ -40,14 +40,14 @@
 <script>
     // todo :key="row"
     import TableTr from './table-tr.vue';
-    import Cell from './cell.vue';
+    import TableCell from './cell.vue';
     import Expand from './expand.js';
     import Mixin from './mixin';
 
     export default {
         name: 'TableBody',
         mixins: [ Mixin ],
-        components: { Cell, Expand, TableTr },
+        components: { TableCell, Expand, TableTr },
         props: {
             prefixCls: String,
             styleObject: Object,

src/styles/components/switch.less

@@ -153,16 +153,29 @@
 
     &-disabled {
         cursor: @cursor-disabled;
-        background: #f3f3f3;
-        border-color: #f3f3f3;
+        opacity: .4;
 
         &:after {
-            background: #ccc;
+            background: #fff;
             cursor: not-allowed;
         }
 
         .@{switch-prefix-cls}-inner {
-            color: #ccc;
+            color: #fff;
+        }
+    }
+
+    &-disabled&-checked{
+        border-color: @primary-color;
+        background-color: @primary-color;
+        opacity: .4;
+        
+        &:after {
+            background: #fff;
+        }
+
+        .@{switch-prefix-cls}-inner {
+            color: #fff;
         }
     }
 
@@ -175,4 +188,4 @@
     100% {
         transform: rotate(360deg);
     }
-}
+}

test/unit/specs/assets/locale-expects.js

@@ -2,6 +2,7 @@ export default {
   'de-DE': 'Oktober 2030',
   'en-US': 'October 2030',
   'es-ES': 'octubre 2030',
+  'fi-FI': 'lokakuu 2030',
   'fr-FR': 'octobre 2030',
   'id-ID': 'Oktober 2030',
   'ja-JP': '2030年 10月',

test/unit/specs/button.spec.js

@@ -0,0 +1,66 @@
+import { createVue, destroyVM } from '../util';
+
+describe('Button.vue', () => {
+  let vm;
+  afterEach(() => {
+    destroyVM(vm);
+  });
+
+  it('should render as <a>', done => {
+    vm = createVue(`
+      <Button to="http://www.thinkinfe.tech/">Think in FE</Button>
+    `);
+    expect(vm.$el.tagName).to.equal('A');
+    done();
+  });
+
+  it('should render as <button>', done => {
+    vm = createVue(`
+      <Button>Think in FE</Button>
+    `);
+    expect(vm.$el.tagName).to.equal('BUTTON');
+    done();
+  });
+
+  it('handle with `type` attribute', done => {
+    // should render with `type` attribute
+    // if it is a <button>
+    vm = createVue(`
+      <Button htmlType="reset">Think in FE</Button>
+    `);
+    expect(vm.$el.getAttribute('type')).to.equal('reset');
+
+    // should't render with `type` attribute
+    // if it is a <button>
+    vm = createVue(`
+      <Button to="http://www.thinkinfe.tech/" htmlType="reset">Think in FE</Button>
+    `);
+    expect(vm.$el.getAttribute('type')).to.equal(null);
+    done();
+  });
+
+  it('should change loading state', done => {
+    vm = createVue({
+        template: `
+            <Button :loading="loading" @click="fetch">Think in FE</Button>
+        `,
+        data() {
+            return {loading: false};
+        },
+        methods: {
+            fetch() {
+                this.loading = true;
+            }
+        }
+    });
+    vm.$el.click();
+    vm.$nextTick(() => {
+      expect(vm.$el.classList.contains('ivu-btn-loading')).to.equal(true);
+      const $icons = vm.$el.querySelectorAll('.ivu-icon');
+      expect($icons.length).to.equal(1);
+      expect($icons[0].classList.contains('ivu-load-loop')).to.equal(true);
+      expect($icons[0].classList.contains('ivu-icon-ios-loading')).to.equal(true);
+      done();
+    });
+  });
+});

test/unit/specs/date-picker.spec.js

@@ -371,7 +371,7 @@ describe('DatePicker.vue', () => {
     const formater = require('../../../src/components/date-picker/util').formatDateLabels;
     const expectedResults = require('./assets/locale-expects.js').default;
     const locales = [
-      'de-DE', 'en-US', 'es-ES', 'fr-FR', 'id-ID', 'ja-JP', 'ko-KR', 'pt-BR',
+      'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'id-ID', 'ja-JP', 'ko-KR', 'pt-BR',
       'pt-PT', 'ru-RU', 'sv-SE', 'tr-TR', 'vi-VN', 'zh-CN', 'zh-TW'
     ].reduce((obj, locale) => {
       obj[locale] = require('../../../src/locale/lang/' + locale).default;

types/tabs.d.ts

@@ -58,7 +58,7 @@ export declare interface Tabs extends Vue {
   };
 }
 
-export declare interface TabsPane extends Vue {
+export declare interface TabPane extends Vue {
   /**
    * 用于标识当前面板，对应 value，默认为其索引值
    */
@@ -82,4 +82,4 @@ export declare interface TabsPane extends Vue {
    * @default null
    */
   closable?: boolean;
-}
+}