merge upstream/master

dist/styles/article.css

@@ -1 +1 @@
-.ivu-article h1{font-size:28px}.ivu-article h2{font-size:22px}.ivu-article h3{font-size:18px}.ivu-article h4{font-size:14px}.ivu-article h5,.ivu-article h6{font-size:12px}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px}
+.ivu-article h1{font-size:26px;font-weight:400}.ivu-article h2{font-size:20px;font-weight:400}.ivu-article h3{font-size:16px;font-weight:400}.ivu-article h4{font-size:14px;font-weight:400}.ivu-article h5,.ivu-article h6{font-size:12px;font-weight:400}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px;font-size:14px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px;font-size:14px}

src/components/base/notification/notice.vue

@@ -47,6 +47,11 @@
                 type: String
             }
         },
+        data () {
+            return {
+                withDesc: false
+            }
+        },
         computed: {
             baseClass () {
                 return `${this.prefixCls}-notice`;
@@ -56,7 +61,8 @@
                     this.baseClass,
                     {
                         [`${this.className}`]: !!this.className,
-                        [`${this.baseClass}-closable`]: this.closable
+                        [`${this.baseClass}-closable`]: this.closable,
+                        [`${this.baseClass}-with-desc`]: this.withDesc
                     }
                 ]
             },
@@ -85,6 +91,11 @@
                     this.close();
                 }, this.duration * 1000)
             }
+
+            // check if with desc in Notice component
+            if (this.prefixCls === 'ivu-notice') {
+                this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+            }
         },
         beforeDestroy () {
             this.clearCloseTimer();

src/components/checkbox/checkbox.vue

@@ -18,7 +18,7 @@
                 v-model="checked"
                 @change="change">
         </span>
-        <slot><span>{{ value }}</span></slot>
+        <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
     </label>
 </template>
 <script>
@@ -42,7 +42,8 @@
             return {
                 model: [],
                 selected: false,
-                group: false
+                group: false,
+                showSlot: true
             }
         },
         computed: {
@@ -75,6 +76,9 @@
         ready () {
             if (!this.group) {
                 this.updateModel();
+                if (this.$els.slot && this.$els.slot.innerHTML === '') {
+                    this.showSlot = false;
+                }
             }
         },
         methods: {

src/components/input/input.vue

@@ -1,20 +1,44 @@
 <template>
-    <input
+    <div :class="wrapClasses">
-        :class="classes"
+        <template v-if="type !== 'textarea'">
-        :type="type"
+            <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
-        :placeholder="placeholder"
+            <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
-        :name="name"
+            <input
-        v-model="value">
+                type="text"
+                :class="inputClasses"
+                :placeholder="placeholder"
+                :disabled="disabled"
+                :maxlength="maxlength"
+                v-model="value"
+                @keyup.enter="handleEnter">
+            <div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
+        </template>
+        <textarea
+            v-else
+            v-el:textarea
+            :class="textareaClasses"
+            :style="textareaStyles"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :rows="rows"
+            :maxlength="maxlength"
+            v-model="value"
+            @keyup.enter="handleEnter">
+        </textarea>
+    </div>
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
+    import calcTextareaHeight from '../../utils/calcTextareaHeight';
 
     const prefixCls = 'ivu-input';
 
     export default {
         props: {
             type: {
-                type: String,
+                validator (value) {
+                    return oneOf(value, ['text', 'textarea']);
+                },
                 default: 'text'
             },
             value: {
@@ -22,28 +46,105 @@
                 default: '',
                 twoWay: true
             },
-            placeholder: String,
-            name: String,
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large']);
                 }
+            },
+            placeholder: {
+                type: String,
+                default: ''
+            },
+            maxlength: {
+                type: Number
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            icon: String,
+            autosize: {
+                type: [Boolean, Object],
+                default: false
+            },
+            rows: {
+                type: Number,
+                default: 2
             }
         },
         data () {
             return {
-            
+                prefixCls: prefixCls,
+                prepend: true,
+                append: true,
+                textareaStyles: {}
             }        
         },
         computed: {
-            classes () {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-type`]: this.type,
+                        [`${prefixCls}-group`]: this.prepend || this.append,
+                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
+                    }
+                ]
+            },
+            inputClasses () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            },
+            textareaClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled
                     }
                 ]
             }
+        },
+        methods: {
+            handleEnter () {
+                this.$emit('on-enter');
+            },
+            handleIconClick () {
+                this.$emit('on-click');
+            },
+            resizeTextarea () {
+                const autosize = this.autosize;
+                if (!autosize || this.type !== 'textarea') {
+                    return false;
+                }
+
+                const minRows = autosize.minRows;
+                const maxRows = autosize.maxRows;
+
+                this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
+            }
+        },
+        watch: {
+            value (val) {
+                this.$nextTick(() => {
+                    this.resizeTextarea();
+                });
+                this.$emit('on-change', val);
+            }
+        },
+        ready () {
+            if (this.type === 'text') {
+                this.prepend = this.$els.prepend.innerHTML !== '';
+                this.append = this.$els.append.innerHTML !== '';
+            } else {
+                this.prepend = false;
+                this.append = false;
+            }
+            this.resizeTextarea();
         }
     }
 </script>

src/components/modal/modal.vue

@@ -8,7 +8,7 @@
                         <Icon type="ios-close-empty"></Icon>
                     </slot>
                 </a>
-                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
+                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
                 <div :class="[prefixCls + '-body']"><slot></slot></div>
                 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                     <slot name="footer">
@@ -175,7 +175,7 @@
 
             let showHead = true;
 
-            if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
+            if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
                 showHead = false;
             }
 
@@ -199,6 +199,11 @@
                     this.wrapShow = true;
                     this.addScrollEffect();
                 }
+            },
+            loading (val) {
+                if (!val) {
+                    this.buttonLoading = false;
+                }
             }
         }
     }

src/components/notice/index.js

@@ -42,9 +42,11 @@ function notice (type, options) {
 
     let content;
 
+    const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
+
     if (type == 'normal') {
         content = `
-            <div class="${prefixCls}-custom-content">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
                 <div class="${prefixCls}-title">${title}</div>
                 <div class="${prefixCls}-desc">${desc}</div>
             </div>
@@ -52,7 +54,7 @@ function notice (type, options) {
     } else {
         const iconType = iconTypes[type];
         content = `
-            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
+            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
                 <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
                     <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
                 </span>

src/components/poptip/poptip.vue

@@ -26,9 +26,9 @@
                     </div>
                 </div>
                 <div :class="[prefixCls + '-inner']" v-if="!confirm">
-                    <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
+                    <div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
                     <div :class="[prefixCls + '-body']">
-                        <div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
+                        <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
                     </div>
                 </div>
             </div>
@@ -163,7 +163,7 @@
         },
         ready () {
             if (!this.confirm) {
-                this.showTitle = this.$els.title.innerHTML != '';
+                this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
             }
         }
     }

src/components/radio/radio.vue

@@ -8,8 +8,7 @@
                 :disabled="disabled"
                 :checked="selected"
                 @change="change">
-        </span>
+        </span><slot>{{ value }}</slot>
-        <slot>{{ value }}</slot>
     </label>
 </template>
 <script>

src/index.js

@@ -52,7 +52,8 @@ const iview = {
     Modal,
     Notice,
     iOption: Option,
-    OptionGroup: OptionGroup,
+    OptionGroup,
+    iOptionGroup: OptionGroup,
     Page,
     Panel: Collapse.Panel,
     Poptip,

src/styles/article/index.less

@@ -1,21 +1,27 @@
 .ivu-article {
     h1{
-        font-size: 28px;
+        font-size: 26px;
+        font-weight: normal;
     }
     h2{
-        font-size: 22px;
+        font-size: 20px;
+        font-weight: normal;
     }
     h3{
-        font-size: 18px;
+        font-size: 16px;
+        font-weight: normal;
     }
     h4{
         font-size: 14px;
+        font-weight: normal;
     }
     h5{
         font-size: 12px;
+        font-weight: normal;
     }
     h6{
         font-size: 12px;
+        font-weight: normal;
     }
 
     blockquote{
@@ -33,6 +39,7 @@
     }
     li{
         margin-bottom: 5px;
+        font-size: 14px;
     }
     ul ul, ol ul{
         list-style-type: circle;
@@ -40,5 +47,6 @@
 
     p{
         margin: 5px;
+        font-size: 14px;
     }
 }

src/styles/common/base.less

@@ -12,7 +12,7 @@
 
 body {
     font-family: @font-family;
-    font-size: @font-size-base;
+    font-size: @font-size-small;
     line-height: @line-height-base;
     color: @text-color;
     background-color: @body-background;
@@ -64,7 +64,7 @@ a {
 
     &[disabled] {
         color: #ccc;
-        cursor: not-allowed;
+        cursor: @cursor-disabled;
         pointer-events: none;
     }
 }

src/styles/components/alert.less

@@ -6,7 +6,7 @@
     padding: 8px 48px 8px 16px;
     border-radius: @border-radius-base;
     color: @text-color;
-    font-size: 12px;
+    font-size: @font-size-small;
     line-height: 16px;
     margin-bottom: 10px;
 
@@ -15,14 +15,14 @@
     }
 
     &-icon {
-        font-size: 14px;
+        font-size: @font-size-base;
         top: 8px;
         left: 16px;
         position: absolute;
     }
 
     &-desc {
-        font-size: 12px;
+        font-size: @font-size-small;
         color: @text-color;
         line-height: 21px;
         display: none;

src/styles/components/card.less

@@ -41,7 +41,7 @@
     &-extra {
         position: absolute;
         right: 16px;
-        top: 10px;
+        top: 14px;
     }
 
     &-body {

src/styles/components/index.less

@@ -23,4 +23,5 @@
 @import "select";
 @import "select-dropdown";
 @import "tooltip";
-@import "poptip";
+@import "poptip";
+@import "input";

src/styles/components/input-number.less

@@ -13,8 +13,8 @@
     margin: 0;
     padding: 0;
     width: 80px;
-    height: 28px;
+    height: @input-height-base;
-    line-height: 28px;
+    line-height: @input-height-base;
     vertical-align: middle;
     border: 1px solid @border-color-base;
     border-radius: @btn-border-radius;
@@ -53,7 +53,7 @@
     &-handler {
         display: block;
         width: 100%;
-        height: 14px;
+        height: @input-height-base / 2;
         line-height: 0;
         text-align: center;
         overflow: hidden;
@@ -93,13 +93,13 @@
 
     &-input-wrap {
         overflow: hidden;
-        height: 28px;
+        height: @input-height-base;
     }
 
     &-input {
         width: 100%;
-        height: 28px;
+        height: @input-height-base;
-        line-height: 28px;
+        line-height: @input-height-base;
         padding: 0 7px;
         text-align: left;
         outline: 0;
@@ -117,15 +117,15 @@
     &-large {
         padding: 0;
         .@{input-number-prefix-cls}-input-wrap {
-            height: 32px;
+            height: @input-height-large;
         }
         .@{input-number-prefix-cls}-handler {
-            height: 16px;
+            height: @input-height-large / 2;
         }
 
         input {
-            height: 32px;
+            height: @input-height-large;
-            line-height: 32px;
+            line-height: @input-height-large;
         }
 
         .@{input-number-prefix-cls}-handler-up-inner {
@@ -139,15 +139,15 @@
     &-small {
         padding: 0;
         .@{input-number-prefix-cls}-input-wrap {
-            height: 22px;
+            height: @input-height-small;
         }
         .@{input-number-prefix-cls}-handler {
-            height: 11px;
+            height: @input-height-small / 2;
         }
 
         input {
-            height: 22px;
+            height: @input-height-small;
-            line-height: 22px;
+            line-height: @input-height-small;
             margin-top: -1px;
             vertical-align: top;
         }

src/styles/components/input.less

@@ -0,0 +1,35 @@
+@input-prefix-cls: ~"@{css-prefix}input";
+
+.@{input-prefix-cls} {
+    .input;
+    &-wrapper{
+        display: inline-block;
+        width: 100%;
+        position: relative;
+    }
+    &-icon {
+        width: 32px;
+        height: 100%;
+        font-size: 16px;
+        text-align: center;
+        color: @subsidiary-color;
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        &:after{
+            content: '';
+            display: inline-block;
+            width: 0;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+    &-icon + &{
+        padding-right: 32px;
+    }
+}
+
+.@{input-prefix-cls}-group{
+    .input-group(~"@{input-prefix-cls}");
+}

src/styles/components/message.less

@@ -2,7 +2,7 @@
 @icon-prefix-cls: ~"@{css-prefix}icon";
 
 .@{message-prefix-cls} {
-    font-size: 12px;
+    font-size: @font-size-small;
     position: fixed;
     z-index: @zindex-message;
     width: 100%;

src/styles/components/modal.less

@@ -46,7 +46,7 @@
     }
 
     &-close {
-        .content-close;
+        .content-close(1px, 31px);
     }
 
     &-body {
@@ -57,7 +57,7 @@
 
     &-footer {
         border-top: 1px solid @border-color-split;
-        padding: 10px 18px 10px 10px;
+        padding: 12px 18px 12px 10px;
         text-align: right;
         button + button {
             margin-left: 8px;

src/styles/components/notice.less

@@ -6,26 +6,26 @@
 @notice-margin-bottom: 10px;
 
 .@{notice-prefix-cls} {
-    position: fixed;
-    z-index: @zindex-notification;
     width: @notice-width;
     margin-right: 24px;
+    position: fixed;
+    z-index: @zindex-notification;
 
     &-notice {
-        padding: @notice-padding;
-        border-radius: @border-radius-base;
-        box-shadow: @shadow-base;
-        border: 1px solid @border-color-base;
-        background: #fff;
-        line-height: 1.5;
-        position: relative;
         margin-bottom: @notice-margin-bottom;
+        padding: @notice-padding;
+        border: 1px solid @border-color-split;
+        border-radius: @border-radius-small;
+        box-shadow: @shadow-base;
+        background: #fff;
+        line-height: 1;
+        position: relative;
         overflow: hidden;
 
         &-close {
             position: absolute;
             right: 16px;
-            top: 10px;
+            top: 15px;
             color: #999;
             outline: none;
 
@@ -33,35 +33,48 @@
                 .close-base(-3px);
             }
         }
+
+        &-with-desc{
+            .@{notice-prefix-cls}-notice-close{
+                top: 11px;
+            }
+        }
     }
 
     &-title {
         font-size: @font-size-base;
-        color: @text-color;
+        color: @title-color;
-        margin-bottom: 4px;
+        padding-right: 10px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    &-with-desc &-title{
+        margin-bottom: 8px;
+    }
+    &-with-desc&-with-icon &-title{
+        margin-left: 51px;
     }
 
     &-desc {
         font-size: 12px;
         color: @legend-color;
         text-align: justify;
+        line-height: 1.5;
+    }
+    &-with-desc&-with-icon &-desc{
+        margin-left: 51px;
     }
 
     &-with-icon &-title{
-        margin-left: 51px;
+        margin-left: 26px;
-        margin-bottom: 4px;
-    }
-
-    &-with-icon  &-desc {
-        margin-left: 51px;
     }
 
     &-icon {
         position: absolute;
-        left: 21px;
+        left: 20px;
-        top: 50%;
+        margin-top: -1px;
-        margin-top: -21px;
+        font-size: 16px;
-        font-size: 28px;
 
         &-success {
             color: @success-color;
@@ -76,4 +89,44 @@
             color: @error-color;
         }
     }
+    &-with-desc &-icon{
+        font-size: 36px;
+    }
+
+    &-custom-content{
+        &:after{
+            content: "";
+            display: block;
+            width: 4px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+        }
+    }
+    &-with-normal{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-info{
+        &:after{
+            background: @primary-color;
+        }
+    }
+    &-with-success{
+        &:after{
+            background: @success-color;
+        }
+    }
+    &-with-warning{
+        &:after{
+            background: @warning-color;
+        }
+    }
+    &-with-error{
+        &:after{
+            background: @error-color;
+        }
+    }
 }

src/styles/components/page.less

@@ -12,9 +12,9 @@
 
     &-item {
         float: left;
-        min-width: 28px;
+        min-width: @btn-circle-size;
-        height: 28px;
+        height: @btn-circle-size;
-        line-height: 28px;
+        line-height: @btn-circle-size - 2px;
         margin-right: 4px;
         text-align: center;
         list-style: none;
@@ -54,7 +54,7 @@
         &:after {
             content: "•••";
             display: block;
-            letter-spacing: 2px;
+            letter-spacing: 1px;
             color: #ccc;
             text-align: center;
         }
@@ -85,36 +85,45 @@
         }
     }
 
-    &-prev,
+    &-prev{
-    &-item-jump-prev,
-    &-item-jump-next {
         margin-right: 8px;
     }
+
+    &-item-jump-prev,
+    &-item-jump-next{
+        margin-right: 4px;
+    }
+
+    &-next{
+        margin-left: 4px;
+    }
+
     &-prev,
     &-next,
     &-item-jump-prev,
     &-item-jump-next {
         display: inline-block;
         float: left;
-        min-width: 28px;
+        min-width: @btn-circle-size;
-        height: 28px;
+        height: @btn-circle-size;
-        line-height: 28px;
+        line-height: @btn-circle-size - 2px;
         list-style: none;
         text-align: center;
         cursor: pointer;
         color: #666;
         font-family: Arial;
+        border: 1px solid @border-color-base;
         border-radius: @btn-border-radius;
         .transition(all @transition-time @ease-in-out);
     }
 
     &-prev,
     &-next {
-        border: 1px solid @border-color-base;
         background-color: #fff;
 
         a {
             color: #666;
+            font-size: 14px;
         }
 
         &:hover {
@@ -150,8 +159,8 @@
 
         &-elevator {
             float: left;
-            height: 28px;
+            height: @btn-circle-size;
-            line-height: 28px;
+            line-height: @btn-circle-size;
 
             input {
                 .input;
@@ -164,8 +173,8 @@
 
     &-total {
         float: left;
-        height: 30px;
+        height: @btn-circle-size;
-        line-height: 30px;
+        line-height: @btn-circle-size;
         margin-right: 10px;
     }
 
@@ -199,51 +208,57 @@
                 border-color: @primary-color;
             }
         }
+
+        span{
+            padding: 0 8px 0 2px;
+        }
     }
 }
 
 .@{page-prefix-cls} {
     &.mini &-total {
-        height: 20px;
+        height: @btn-circle-size-small;
-        line-height: 20px;
+        line-height: @btn-circle-size-small;
     }
 
     &.mini &-item {
         border: 0;
         margin: 0;
-        min-width: 20px;
+        min-width: @btn-circle-size-small;
-        height: 20px;
+        height: @btn-circle-size-small;
-        line-height: 20px;
+        line-height: @btn-circle-size-small;
         border-radius: @btn-border-radius-small;
     }
 
     &.mini &-prev,
     &.mini &-next {
         margin: 0;
-        min-width: 20px;
+        min-width: @btn-circle-size-small;
-        height: 20px;
+        height: @btn-circle-size-small;
-        line-height: 20px;
+        line-height: @btn-circle-size-small;
         border: 0;
 
         a {
             i:after {
-                height: 20px;
+                height: @btn-circle-size-small;
-                line-height: 20px;
+                line-height: @btn-circle-size-small;
             }
         }
     }
 
     &.mini &-item-jump-prev,
     &.mini &-item-jump-next {
-        height: 20px;
+        height: @btn-circle-size-small;
-        line-height: 20px;
+        line-height: @btn-circle-size-small;
+        border: none;
+        margin-right: 0;
     }
 
     &.mini &-options {
         margin-left: 8px;
         &-elevator {
-            height: 20px;
+            height: @btn-circle-size-small;
-            line-height: 20px;
+            line-height: @btn-circle-size-small;
 
             input {
                 .input-small;

src/styles/components/poptip.less

@@ -17,11 +17,24 @@
 
     &-title {
         margin: 0;
-        padding: 0 16px;
+        padding: 8px 16px;
-        height: 32px;
+        position: relative;
-        line-height: 32px;
+
-        border-bottom: 1px solid @border-color-split;
+        &:after{
-        color: #666;
+            content: '';
+            display: block;
+            height: 1px;
+            position: absolute;
+            left: 8px;
+            right: 8px;
+            bottom: 0;
+            background-color: @border-color-split;
+        }
+
+        &-inner{
+            color: @title-color;
+            font-size: @font-size-base;
+        }
     }
 
     &-body{
@@ -29,6 +42,10 @@
 
         &-content{
             overflow: auto;
+
+            &-inner{
+                color: @text-color;
+            }
         }
     }
 
@@ -36,7 +53,7 @@
         width: 100%;
         background-color: #fff;
         background-clip: padding-box;
-        border: 1px solid @border-color-split;
+        //border: 1px solid @border-color-split;
         border-radius: @border-radius-small;
         box-shadow: @shadow-base;
         white-space: nowrap;
@@ -108,8 +125,9 @@
     &-confirm &-body{
         padding: 16px 16px 8px;
         .ivu-icon{
+            font-size: 16px;
             color: @warning-color;
-            line-height: 17px;
+            line-height: 18px;
             position: absolute;
         }
 

src/styles/components/progress.less

@@ -3,7 +3,7 @@
 .@{progress-prefix-cls} {
     display: inline-block;
     width: 100%;
-    font-size: 14px;
+    font-size: @font-size-small;
     position: relative;
 
     &-outer {

src/styles/components/radio.less

@@ -5,12 +5,12 @@
 
 .@{radio-group-prefix-cls} {
     display: inline-block;
-    font-size: @font-size-base;
+    font-size: @font-size-small;
 }
 
 // 普通状态
 .@{radio-prefix-cls}-wrapper {
-    font-size: @font-size-base;
+    font-size: @font-size-small;
     vertical-align: middle;
     display: inline-block;
     position: relative;
@@ -19,9 +19,10 @@
 }
 
 .@{radio-prefix-cls} {
+    display: inline-block;
+    margin-right: 4px;
     white-space: nowrap;
     outline: none;
-    display: inline-block;
     position: relative;
     line-height: 1;
     vertical-align: middle;
@@ -124,19 +125,24 @@ span.@{radio-prefix-cls} + * {
     font-size: 0;
     -webkit-text-size-adjust:none;
 
+    .@{radio-prefix-cls}{
+        width: 0;
+        margin-right: 0;
+    }
+
     .@{radio-prefix-cls}-wrapper {
-        font-size: 14px;
-        margin: 0;
-        height: 28px;
-        line-height: 26px;
-        color: @btn-default-color;
         display: inline-block;
+        height: @btn-circle-size;
+        line-height: @btn-circle-size - 2px;
+        margin: 0;
+        padding: 0 16px;
+        font-size: @font-size-small;
+        color: @btn-default-color;
         .transition(all @transition-time ease-in-out);
         cursor: pointer;
         border: 1px solid @border-color-base;
         border-left: 0;
         background: #fff;
-        padding: 0 16px;
 
         > span {
             margin-left: 0;
@@ -232,15 +238,16 @@ span.@{radio-prefix-cls} + * {
 }
 
 .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
-    height: 32px;
+    height: @btn-circle-size-large;
-    line-height: 30px;
+    line-height: @btn-circle-size-large - 2px;
+    font-size: @font-size-base;
 }
 
 .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
-    height: 22px;
+    height: @btn-circle-size-small;
-    line-height: 20px;
+    line-height: @btn-circle-size-small - 2px;
     padding: 0 12px;
-    font-size: 12px;
+    font-size: @font-size-small;
     &:first-child {
         border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
     }

src/styles/components/select-dropdown.less

@@ -5,12 +5,13 @@
     max-height: 200px;
     overflow: auto;
     margin: 5px 0;
-    padding: 7px 0;
+    padding: 5px 0;
     background-color: #fff;
     box-sizing: border-box;
-    border: 1px solid @border-color-base;
+    border: 1px solid @border-color-split;
     border-radius: @btn-border-radius;
-    box-shadow: 0 1px 3px rgba(0,0,0,.2);
+    //box-shadow: 0 1px 3px rgba(0,0,0,.2);
+    box-shadow: @shadow-base;
     position: absolute;
     z-index: @zindex-select;
 }

src/styles/components/select.less

@@ -80,7 +80,7 @@
     }
 
     &-single &-selection{
-        height: 28px;
+        height: @input-height-base;
         position: relative;
 
         .@{select-prefix-cls}-placeholder{
@@ -89,8 +89,9 @@
 
         .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
             display: block;
-            height: 26px;
+            height: @input-height-base - 2px;
-            line-height: 26px;
+            line-height: @input-height-base - 2px;
+            font-size: @font-size-small;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -100,32 +101,33 @@
     }
 
     &-large&-single &-selection{
-        height: 32px;
+        height: @input-height-large;
 
         .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
-            height: 30px;
+            height: @input-height-large - 2px;
-            line-height: 30px;
+            line-height: @input-height-large - 2px;
+            font-size: @font-size-base;
         }
     }
 
     &-small&-single &-selection{
-        height: 22px;
+        height: @input-height-small;
         border-radius: @btn-border-radius-small;
 
         .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
-            height: 20px;
+            height: @input-height-small - 2px;
-            line-height: 20px;
+            line-height: @input-height-small - 2px;
         }
     }
 
     &-multiple &-selection{
-        padding: 0 24px 0 2px;
+        padding: 0 24px 0 4px;
-        min-height: 28px;
+        min-height: @input-height-base;
 
         .@{select-prefix-cls}-placeholder{
             display: block;
-            height: 26px;
+            height: @input-height-base - 2px;
-            line-height: 26px;
+            line-height: @input-height-base - 2px;
             color: @input-placeholder-color;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -141,7 +143,7 @@
         height: @input-height-base;
         line-height: @input-height-base;
         padding: 0 24px 0 8px;
-        font-size: @font-size-base;
+        font-size: @font-size-small;
         outline: none;
         border: none;
         box-sizing: border-box;
@@ -157,6 +159,7 @@
     }
 
     &-large &-input{
+        font-size: @font-size-base;
         height: @input-height-large;
     }
 
@@ -165,8 +168,8 @@
     }
 
     &-multiple &-input{
-        height: 25px;
+        height: @input-height-base - 3px;
-        line-height: 28px;
+        line-height: @input-height-base;
         padding: 0 0 0 6px;
     }
 
@@ -174,13 +177,18 @@
         text-align: center;
         color: @btn-disable-color;
     }
+
+    &-multiple .@{css-prefix}tag{
+        margin: 3px 4px 2px 0;
+    }
 }
 
 .@{select-item-prefix-cls} {
     margin: 0;
-    padding: 7px 15px;
+    padding: 7px 16px 8px;
     clear: both;
     color: @text-color;
+    font-size: @font-size-small;
     //border-radius: @btn-border-radius-small;
     white-space: nowrap;
     cursor: pointer;
@@ -244,7 +252,7 @@
     padding: 0;
 
     &-title {
-        padding-left: 10px;
+        padding-left: 8px;
         font-size: 12px;
         color: @legend-color;
         height: 30px;

src/styles/components/switch.less

@@ -16,7 +16,7 @@
 
     &-inner {
         color: #fff;
-        font-size: 12px;
+        font-size: @font-size-small;
         position: absolute;
         left: 25px;
 

src/styles/components/timeline.less

@@ -55,7 +55,7 @@
             line-height: 1;
             border: 0;
             border-radius: 0;
-            font-size: 14px;
+            font-size: @font-size-base;
             position: absolute;
             left: -14px;
             .transform(translateY(-50%));
@@ -63,9 +63,9 @@
 
         &-content {
             padding: 1px 1px 10px 24px;
-            font-size: @font-size-base;
+            font-size: @font-size-small;
             position: relative;
-            top: -5px;
+            top: -4px;
         }
 
         &:last-child {

src/styles/components/tooltip.less

@@ -19,14 +19,14 @@
     &-inner{
         max-width: @tooltip-max-width;
         min-height: 34px;
-        padding: 8px 10px;
+        padding: 8px 12px;
         color: @tooltip-color;
         text-align: left;
         text-decoration: none;
         background-color: @tooltip-bg;
         border-radius: @border-radius-small;
         box-shadow: @shadow-base;
-        white-space:nowrap;
+        white-space: nowrap;
     }
 
     &-arrow{

src/styles/mixins/checkbox.less

@@ -32,7 +32,7 @@
             &:after {
                 content: '';
                 display: table;
-                width: 5px;
+                width: 4px;
                 height: 8px;
                 position: absolute;
                 top: 1px;
@@ -75,7 +75,7 @@
             &:after {
                 content: '';
                 display: table;
-                width: 5px;
+                width: 4px;
                 height: 8px;
                 position: absolute;
                 top: 1px;
@@ -136,7 +136,7 @@
 
     .@{checkbox-prefix-cls}-wrapper {
         cursor: pointer;
-        font-size: @font-size-base;
+        font-size: @font-size-small;
         display: inline-block;
         & + & {
             margin-left: 8px;
@@ -145,7 +145,7 @@
 
     .@{checkbox-prefix-cls}-wrapper + span,
     .@{checkbox-prefix-cls} + span {
-        margin-left: 4px;
+        //margin-left: 4px;
         margin-right: 4px;
     }
 

src/styles/mixins/close.less

@@ -1,5 +1,5 @@
-.close-base(@top: 0) {
+.close-base(@top: 0, @icon-font-size: 22px) {
-    font-size: 22px;
+    font-size: @icon-font-size;
     color: @legend-color;
     transition: color @transition-time ease;
     position: relative;

src/styles/mixins/content.less

@@ -2,15 +2,18 @@
 
 .content-header() {
     border-bottom: 1px solid @border-color-split;
-    padding: 10px 16px;
+    padding: 14px 16px;
     line-height: 1;
 
-    p {
+    p,
+    &-inner
+    {
         display: inline-block;
         width: 100%;
         height: 20px;
         line-height: 20px;
-        font-size: 14px;
+        font-size: @font-size-base;
+        color: @title-color;
         font-weight: bold;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -18,8 +21,8 @@
     }
 }
 
-.content-close(@top: 0) {
+.content-close(@top: 0, @icon-font-size: 22px) {
-    font-size: 12px;
+    font-size: @font-size-small;
     position: absolute;
     right: 16px;
     top: 8px;
@@ -27,6 +30,6 @@
     cursor: pointer;
 
     .@{icon-prefix-cls}-ios-close-empty {
-        .close-base(@top);
+        .close-base(@top, @icon-font-size);
     }
 }

src/styles/mixins/input.less

@@ -19,6 +19,7 @@
 }
 
 .input-large() {
+    font-size: @font-size-base;
     padding: @input-padding-vertical-large @input-padding-horizontal;
     height: @input-height-large;
 }
@@ -35,7 +36,7 @@
     height: @input-height-base;
     line-height: @line-height-base;
     padding: @input-padding-vertical-base @input-padding-horizontal;
-    font-size: @font-size-base;
+    font-size: @font-size-small;
     border: 1px solid @input-border-color;
     border-radius: @border-radius-base;
     color: @input-color;
@@ -64,6 +65,7 @@
         max-width: 100%;
         height: auto;
         vertical-align: bottom;
+        font-size: @font-size-base;
     }
 
     // Size
@@ -74,4 +76,141 @@
     &-small {
         .input-small();
     }
-}
+}
+
+.input-group(@inputClass) {
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+    position: relative;
+    font-size: @font-size-small;
+
+    &-large{
+        font-size: @font-size-base;
+    }
+
+    // Undo padding and float of grid classes
+    &[class*="col-"] {
+        float: none;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    > [class*="col-"] {
+        padding-right: 8px;
+    }
+
+    &-prepend,
+    &-append,
+    > .@{inputClass} {
+        display: table-cell;
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+    }
+
+    &-prepend .@{css-prefix}btn,
+    &-append .@{css-prefix}btn
+    {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
+    }
+
+    &-prepend,
+    &-append
+    {
+        width: 1px; // To make addon/wrap as small as possible
+        white-space: nowrap;
+        vertical-align: middle;
+    }
+
+    .@{inputClass} {
+        width: 100%;
+        float: left;
+        margin-bottom: 0;
+        position: relative;
+        z-index: 2;
+    }
+
+    &-prepend,
+    &-append
+    {
+        padding: @input-padding-vertical-base @input-padding-horizontal;
+        font-size: inherit;
+        font-weight: normal;
+        line-height: 1;
+        color: @input-color;
+        text-align: center;
+        background-color: #eee;
+        border: 1px solid @input-border-color;
+        border-radius: @border-radius-base;
+
+        // Reset Select's style in addon
+        .@{css-prefix}select {
+            margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
+
+            &-selection {
+                background-color: inherit;
+                margin: -1px;
+                border: 1px solid transparent;
+            }
+
+            &-visible .@{css-prefix}select-selection{
+                box-shadow: none;
+            }
+        }
+    }
+
+    // Reset rounded corners
+    > span > .@{inputClass}:first-child,
+    > .@{inputClass}:first-child,
+    &-prepend
+    {
+        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+
+    > .@{inputClass}:last-child,
+    &-append
+    {
+        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0 !important;
+
+        // Reset Select's style in addon
+        .@{css-prefix}-select .@{css-prefix}-select-selection {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+    }
+
+    // Sizing options
+    &-large .@{inputClass},
+    &-large > &-prepend,
+    &-large > &-append
+    {
+        .input-large();
+    }
+
+    &-small .@{inputClass},
+    &-small > &-prepend,
+    &-small > &-append
+    {
+        .input-small();
+    }
+}

src/styles/themes/default/custom.less

@@ -12,6 +12,7 @@
 @link-active-color      : shade(@link-color, 5%);
 @selected-color         : fade(@primary-color, 90%);
 @tooltip-color          : #fff;
+@subsidiary-color       : #9ea7b4;
 
 // Base
 @body-background        : #fff;
@@ -34,10 +35,10 @@
 // Background color
 @background-color-base        : #f7f7f7;  // base
 @background-color-select-hover: @input-disabled-bg;
-@tooltip-bg                   : #373737;
+@tooltip-bg                   : rgba(70, 76, 91, .9);
 
 // Shadow
-@shadow-color           : rgba(100, 100, 100, .2);
+@shadow-color           : rgba(0, 0, 0, .2);
 @shadow-base            : @shadow-down;
 @shadow-card            : 0 1px 1px 0 rgba(0,0,0,.1);
 @shadow-up              : 0 -1px 6px @shadow-color;
@@ -47,7 +48,7 @@
 
 // Button
 @btn-font-weight        : normal;
-@btn-padding-base       : 4px 15px;
+@btn-padding-base       : 6px 15px;
 @btn-padding-large      : 6px 15px 7px 15px;
 @btn-padding-small      : 2px 7px;
 @btn-font-size          : 12px;
@@ -71,7 +72,7 @@
 @btn-ghost-bg           : transparent;
 @btn-ghost-border       : @border-color-base;
 
-@btn-circle-size        : 28px;
+@btn-circle-size        : 32px;
 @btn-circle-size-large  : 36px;
 @btn-circle-size-small  : 24px;
 
@@ -83,9 +84,9 @@
 @legend-color           : #999;
 
 // Input
-@input-height-base           : 28px;
+@input-height-base           : 32px;
-@input-height-large          : 32px;
+@input-height-large          : 36px;
-@input-height-small          : 22px;
+@input-height-small          : 24px;
 
 @input-padding-horizontal    : 7px;
 @input-padding-vertical-base : 4px;

src/utils/calcTextareaHeight.js

@@ -0,0 +1,108 @@
+// Thanks to
+// https://github.com/andreypopp/react-textarea-autosize/
+// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
+
+let hiddenTextarea;
+
+const HIDDEN_STYLE = `
+    height:0 !important;
+    min-height:0 !important;
+    max-height:none !important;
+    visibility:hidden !important;
+    overflow:hidden !important;
+    position:absolute !important;
+    z-index:-1000 !important;
+    top:0 !important;
+    right:0 !important
+`;
+
+const CONTEXT_STYLE = [
+    'letter-spacing',
+    'line-height',
+    'padding-top',
+    'padding-bottom',
+    'font-family',
+    'font-weight',
+    'font-size',
+    'text-rendering',
+    'text-transform',
+    'width',
+    'text-indent',
+    'padding-left',
+    'padding-right',
+    'border-width',
+    'box-sizing'
+];
+
+function calculateNodeStyling(node) {
+    const style = window.getComputedStyle(node);
+
+    const boxSizing = style.getPropertyValue('box-sizing');
+
+    const paddingSize = (
+        parseFloat(style.getPropertyValue('padding-bottom')) +
+        parseFloat(style.getPropertyValue('padding-top'))
+    );
+
+    const borderSize = (
+        parseFloat(style.getPropertyValue('border-bottom-width')) +
+        parseFloat(style.getPropertyValue('border-top-width'))
+    );
+
+    const contextStyle = CONTEXT_STYLE
+        .map(name => `${name}:${style.getPropertyValue(name)}`)
+        .join(';');
+
+    return {contextStyle, paddingSize, borderSize, boxSizing};
+}
+
+export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
+    if (!hiddenTextarea) {
+        hiddenTextarea = document.createElement('textarea');
+        document.body.appendChild(hiddenTextarea);
+    }
+
+    let {
+        paddingSize,
+        borderSize,
+        boxSizing,
+        contextStyle
+    } = calculateNodeStyling(targetNode);
+
+    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+    hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
+
+    let height = hiddenTextarea.scrollHeight;
+    let minHeight = -Infinity;
+    let maxHeight = Infinity;
+
+    if (boxSizing === 'border-box') {
+        height = height + borderSize;
+    } else if (boxSizing === 'content-box') {
+        height = height - paddingSize;
+    }
+
+    hiddenTextarea.value = '';
+    let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
+    if (minRows !== null) {
+        minHeight = singleRowHeight * minRows;
+        if (boxSizing === 'border-box') {
+            minHeight = minHeight + paddingSize + borderSize;
+        }
+        height = Math.max(minHeight, height);
+    }
+    if (maxRows !== null) {
+        maxHeight = singleRowHeight * maxRows;
+        if (boxSizing === 'border-box') {
+            maxHeight = maxHeight + paddingSize + borderSize;
+        }
+        height = Math.min(maxHeight, height);
+    }
+
+    return {
+        height: `${height}px`,
+        minHeight: `${minHeight}px`,
+        maxHeight: `${maxHeight}px`
+    };
+};

test/app.vue

@@ -31,6 +31,7 @@ li + li {
                 <li><a v-link="'/more'">More</a></li>
                 <li><a v-link="'/page'">Page</a></li>
                 <li><a v-link="'/poptip'">Poptip</a></li>
+                <li><a v-link="'/tooltip'">Tooltip</a></li>
                 <li><a v-link="'/radio'">Radio</a></li>
                 <li><a v-link="'/select'">Select</a></li>
                 <li><a v-link="'/slider'">Slider</a></li>
@@ -38,6 +39,7 @@ li + li {
                 <li><a v-link="'/switch'">Switch</a></li>
                 <li><a v-link="'/alert'">Alert</a></li>
                 <li><a v-link="'/tag'">Tag</a></li>
+                <li><a v-link="'/input'">Input</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -80,6 +80,16 @@ router.map({
         component: function (resolve) {
             require(['./routers/tag.vue'], resolve);
         }
+    },
+    '/input': {
+        component: function (resolve) {
+            require(['./routers/input.vue'], resolve);
+        }
+    },
+    '/tooltip': {
+        component: function (resolve) {
+            require(['./routers/tooltip.vue'], resolve);
+        }
     }
 });
 

test/routers/input.vue

@@ -0,0 +1,121 @@
+<template>
+    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
+    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
+    <i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
+    <br>
+    <br>
+    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
+    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
+    <i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
+    {{ v }}
+    <br>
+    <br>
+    <i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
+    {{ t }}
+    <br>
+    <br>
+    <div style="width: 400px">
+        <i-input :value.sync="v">
+            <span slot="prepend">http://</span>
+            <span slot="append">
+                <i-button icon="ios-search"></i-button>
+            </span>
+        </i-input>
+        <br>
+        <i-input :value.sync="v">
+            <span slot="prepend">http://</span>
+            <span slot="append"><Icon type="ios-search"></Icon></span>
+        </i-input>
+        <br>
+        <i-input :value.sync="v" size="small">
+            <span slot="prepend">http://</span>
+            <span slot="append"><Icon type="ios-search"></Icon></span>
+        </i-input>
+
+        <br>
+        <i-input :value.sync="v" size="large">
+            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
+                <i-option value="http">http://</i-option>
+                <i-option value="https">https://</i-option>
+            </i-select>
+            <i-select :model.sync="select2" slot="append" style="width: 70px">
+                <i-option value="com">.com</i-option>
+                <i-option value="cn">.cn</i-option>
+                <i-option value="net">.net</i-option>
+                <i-option value="io">.io</i-option>
+            </i-select>
+        </i-input>
+        <br>
+        <i-input :value.sync="v">
+            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
+                <i-option value="http">http://</i-option>
+                <i-option value="https">https://</i-option>
+            </i-select>
+            <i-select :model.sync="select2" slot="append" style="width: 70px">
+                <i-option value="com">.com</i-option>
+                <i-option value="cn">.cn</i-option>
+                <i-option value="net">.net</i-option>
+                <i-option value="io">.io</i-option>
+            </i-select>
+        </i-input>
+        <br>
+        <i-input :value.sync="v" size="small">
+            <i-select :model.sync="select1" slot="prepend" style="width: 80px">
+                <i-option value="http">http://</i-option>
+                <i-option value="https">https://</i-option>
+            </i-select>
+            <i-select :model.sync="select2" slot="append" style="width: 70px">
+                <i-option value="com">.com</i-option>
+                <i-option value="cn">.cn</i-option>
+                <i-option value="net">.net</i-option>
+                <i-option value="io">.io</i-option>
+            </i-select>
+        </i-input>
+        <Input-number :value="2" size="small"></Input-number>
+        <Input-number :value="2"></Input-number>
+        <Input-number :value="2" size="large"></Input-number>
+    </div>
+</template>
+<script>
+    import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
+
+    export default {
+        components: {
+            iInput,
+            Icon,
+            iButton,
+            iSelect,
+            iOption,
+            InputNumber
+        },
+        props: {
+
+        },
+        data () {
+            return {
+                v: 'hello',
+                t: '',
+                autosize: {
+                    minRows: 2,
+                    maxRows: 5
+                },
+                select1: 'http',
+                select2: 'com'
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            enter () {
+                console.log(123)
+            },
+            iconclick () {
+                console.log('iconclicked')
+            },
+            change (val) {
+                console.log(val)
+            }
+        }
+    }
+</script>

test/routers/message.vue

@@ -1,65 +1,117 @@
 <template>
-    <i-button @click="info">info</i-button>
+    <i-button @click="mInfo">m信息</i-button>
-    <i-button @click="success">success</i-button>
+    <i-button @click="open">打开</i-button>
-    <i-button @click="error">error</i-button>
+    <i-button @click="info2">消息2</i-button>
-    <i-button @click="warning">warning</i-button>
+    <i-button @click="info">消息</i-button>
-    <i-button @click="loading">手动消失</i-button>
+    <i-button @click="success">成功</i-button>
-    <i-button @click="destroy">destroy</i-button>
+    <i-button @click="warning">警告</i-button>
-    <Alert closable>消息提示文案</Alert>
+    <i-button @click="error">错误</i-button>
-    <Alert type="success" show-icon closable>
+    <i-button @click="modal1 = true"></i-button>
-        成功提示文案
+    <Modal
-        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+            :visible.sync="modal1"
-    </Alert>
+            title="普通的Modal对话框标题">
-    <Card :bordered="false">
+        <p>对话框内容</p>
-        <p slot="title">无边框标题</p>
+        <p>对话框内容</p>
-        <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
+        <p>对话框内容</p>
-    </Card>
+    </Modal>
 </template>
 <script>
-    import { Message, iButton, Alert, Card } from 'iview';
+    import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
 
     export default {
         components: {
             Message,
             iButton,
             Alert,
-            Card
+            Card,
+            Notice,
+            iButton,
+            Modal
         },
         props: {
 
         },
         data () {
             return {
-
+                modal1: true
             }
         },
         computed: {
 
         },
         methods: {
+            open () {
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                })
+            },
             info () {
-                Message.info('欢迎来到iView', 1000, () => {
+                Notice.info({
-                    console.log('close info');
+                    duration: 1000,
+                    title: '这是通知标题',
+//                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            info2 () {
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                });
+                Notice.info({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                });
+                Notice.open({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.info({
+                    duration: 1000,
+                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.success({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.warning({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+                Notice.error({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
                 });
             },
             success () {
-                Message.success('成功啦', 5, () => {
+                Notice.success({
-                    console.log('close successs');
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
+            },
+            warning () {
+                Notice.warning({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
                 });
             },
             error () {
-                Message.error('错误啦');
+                Notice.error({
+                    duration: 1000,
+                    title: '这是通知标题',
+                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                });
             },
-            warning () {
+            mInfo () {
-                Message.warning('来个警告');
+                Message.info('飞机飞士大夫', 1000);
-            },
-            loading () {
-                const hide = Message.loading('我是loading', 0);
-
-                setTimeout(hide, 5000);
-            },
-            destroy () {
-                Message.destroy();
             }
         },
         ready () {

test/routers/page.vue

@@ -1,59 +1,13 @@
-<style>
-
-</style>
 <template>
-    <Page :total="40" size="small"></Page>
+    <Page :total="1000" show-sizer show-elevator show-total></Page>
-    <Page :total="40" size="small" show-elevator show-sizer></Page>
+    <br><br>
-    <Page :total="40" size="small" show-total></Page>
+    <Page :total="1000" show-sizer show-elevator show-total size="small"></Page>
-    <Page :total="100" show-sizer :page-size="5" :page-size-opts="[5,10,15,20]"></Page>
+    <br><br>
+    <Page :current="2" :total="50" simple></Page>
 </template>
 <script>
-    import { Modal, Button, Message, Page } from 'iview';
+    import { Page } from 'iview';
-
     export default {
-        components: { Modal, Button, Page },
+        components: { Page }
-        props: {
-        
-        },
-        data () {
-            return {
-
-            }        
-        },
-        methods: {
-            info () {
-                Modal.info({
-                    title: '这是对话框标题',
-                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
-                });
-            },
-            success () {
-                Modal.success();
-            },
-            warning () {
-                Modal.warning();
-            },
-            error () {
-                Modal.error();
-            },
-            confirm () {
-                Modal.confirm({
-//                    okText: 'OK',
-//                    cancelText: 'Cancel',
-                    title: '删除提示',
-                    content: '删除后将不可找回，您确定要删除吗？',
-                    onCancel () {
-                        Message.info('cancel it');
-                    },
-                    onOk () {
-                        setTimeout(() => {
-                            Modal.remove();
-                            Message.success('OK!');
-                        }, 2000);
-                    },
-                    loading: true
-                });
-            }
-        }
     }
 </script>

test/routers/poptip.vue

@@ -27,57 +27,105 @@
         padding: 8px 16px;
         text-align: left;
     }
+    .tip{
+        width: 24px;
+        position: fixed;
+        top: 10px;
+        right: 10px;
+    }
+    .tip-inner{
+        width: 24px;
+        height: 24px;
+        line-height: 22px;
+        text-align: center;
+        background: #fff;
+        border: 1px solid #3399ff;
+        color: #3399ff;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .tip-content{
+        width: 200px;
+        height: 100px;
+        white-space: normal;
+    }
 </style>
 <template>
+    <Tooltip content="这里是提示文字">
+        当鼠标经过这段文字时，会显示一个气泡框
+    </Tooltip>
     <div class="tooltip_out">
-        <Poptip>
+        <!--<Tooltip placement="top" content="Tooltip 文字提示">-->
-            <a>click 激活</a>
+            <!--<strong>-->
-            <div slot="title"><i>自定义标题</i></div>
+                <!--<a>Link</a>-->
-            <div slot="content">
+            <!--</strong>-->
-                <a>关闭提示框</a>
+        <!--</Tooltip>-->
-            </div>
+        <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
-        </Poptip>
+            <!--<i-button>hover 激活</i-button>-->
-        <Poptip placement="right" width="300">
+        <!--</Poptip>-->
-            <i-button type="ghost">click 激活</i-button>
+        <!--<Poptip content="提示内容" title="tip">-->
-            <div class="api" slot="content">
+            <!--<i-button>click 激活</i-button>-->
-                <table>
+        <!--</Poptip>-->
-                    <thead>
+        <!--<Poptip content="提示内容">-->
-                    <tr>
+            <!--<div slot="title"><i>自定义标题</i></div>-->
-                        <th>属性</th>
+            <!--<i-button>click 激活</i-button>-->
-                        <th>说明</th>
+        <!--</Poptip>-->
-                        <th>类型</th>
+        <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
-                        <th>默认值</th>
+            <!--<div class="tip-inner">-->
-                    </tr>
+                <!--<Icon type="information"></Icon>-->
-                    </thead>
+            <!--</div>-->
-                    <tbody>
+            <!--<div class="tip-content" slot="content">-->
-                    <tr>
+                <!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
-                        <td>content</td>
+            <!--</div>-->
-                        <td>显示的内容</td>
+        <!--</Tooltip>-->
-                        <td>String | Number</td>
+        <!--<Poptip>-->
-                        <td>空</td>
+            <!--<a>click 激活</a>-->
-                    </tr>
+            <!--<div slot="title"><i>自定义标题</i></div>-->
-                    <tr>
+            <!--<div slot="content">-->
-                        <td>placement</td>
+                <!--<a>关闭提示框</a>-->
-                        <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
+            <!--</div>-->
-                        <td>String</td>
+        <!--</Poptip>-->
-                        <td>bottom</td>
+        <!--<Poptip placement="right" width="300">-->
-                    </tr>
+            <!--<i-button type="ghost">click 激活</i-button>-->
-                    <tr>
+            <!--<div class="api" slot="content">-->
-                        <td>disabled</td>
+                <!--<table>-->
-                        <td>是否禁用提示框</td>
+                    <!--<thead>-->
-                        <td>Boolean</td>
+                    <!--<tr>-->
-                        <td>false</td>
+                        <!--<th>属性</th>-->
-                    </tr>
+                        <!--<th>说明</th>-->
-                    <tr>
+                        <!--<th>类型</th>-->
-                        <td>delay</td>
+                        <!--<th>默认值</th>-->
-                        <td>延迟显示，单位毫秒</td>
+                    <!--</tr>-->
-                        <td>Number</td>
+                    <!--</thead>-->
-                        <td>0</td>
+                    <!--<tbody>-->
-                    </tr>
+                    <!--<tr>-->
-                    </tbody>
+                        <!--<td>content</td>-->
-                </table>
+                        <!--<td>显示的内容</td>-->
-            </div>
+                        <!--<td>String | Number</td>-->
-        </Poptip>
+                        <!--<td>空</td>-->
+                    <!--</tr>-->
+                    <!--<tr>-->
+                        <!--<td>placement</td>-->
+                        <!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
+                        <!--<td>String</td>-->
+                        <!--<td>bottom</td>-->
+                    <!--</tr>-->
+                    <!--<tr>-->
+                        <!--<td>disabled</td>-->
+                        <!--<td>是否禁用提示框</td>-->
+                        <!--<td>Boolean</td>-->
+                        <!--<td>false</td>-->
+                    <!--</tr>-->
+                    <!--<tr>-->
+                        <!--<td>delay</td>-->
+                        <!--<td>延迟显示，单位毫秒</td>-->
+                        <!--<td>Number</td>-->
+                        <!--<td>0</td>-->
+                    <!--</tr>-->
+                    <!--</tbody>-->
+                <!--</table>-->
+            <!--</div>-->
+        <!--</Poptip>-->
         <!--<Poptip title="标题" content="内容">-->
             <!--<Button>click 触发</Button>-->
         <!--</Poptip>-->
@@ -96,19 +144,19 @@
         <!--<Tooltip content="这里是提示文字">-->
             <!--当鼠标经过这段文字时，会显示一个气泡框-->
         <!--</Tooltip>-->
-        <Poptip>
+        <!--<Poptip>-->
-            <a>click 激活</a>
+            <!--<a>click 激活</a>-->
-            <div slot="content">
+            <!--<div slot="content">-->
-                <a>关闭提示框</a>
+                <!--<a>关闭提示框</a>-->
-            </div>
+            <!--</div>-->
-        </Poptip>
+        <!--</Poptip>-->
     </div>
 </template>
 <script>
-    import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
+    import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
 
     export default {
-        components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message },
+        components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
         props: {
 
         },

test/routers/radio.vue

@@ -141,6 +141,8 @@
         <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
         <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
     </Breadcrumb>
+    <br><br>
+    <Checkbox :checked.sync="single"></Checkbox>
 </template>
 <script>
     import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
@@ -172,6 +174,7 @@
         },
         data () {
             return {
+                single: false,
                 radio: false,
                 radioGroup: '段模',
                 activeKey: [1,2],

test/routers/select.vue

@@ -1,26 +1,44 @@
 <template>
-    <!--<i-select :model.sync="model1" style="width:200px">-->
+    <i-select :model.sync="model1" style="width:200px" clearable>
-        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-    <!--</i-select>-->
+    </i-select>
-    <!--{{ model1 | json }}-->
+    {{ model1 | json }}
     <i-button @click="change">修改数据</i-button>
-    <!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
+    <i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">
-        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-    <!--</i-select>-->
+    </i-select>
-    <!--{{ model10 | json }}-->
+    {{ model10 | json }}
-    <!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
+    <i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">
-        <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-    <!--</i-select>-->
+    </i-select>
-    <!--{{ model11 | json }}-->
+    {{ model11 | json }}
     <i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
         <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
     </i-select>
     {{ model12 | json }}
+    <br><br>
+    <i-select :model.sync="model2" size="small" style="width:100px">
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+    </i-select>
+    <i-select :model.sync="model3" style="width:100px">
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+    </i-select>
+    <i-select :model.sync="model4" size="large" style="width:100px">
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+    </i-select>
+    <i-select :model.sync="model7" style="width:200px">
+        <i-option-group label="热门城市">
+            <i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
+        </i-option-group>
+        <i-option-group label="其它城市">
+            <i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
+        </i-option-group>
+    </i-select>
 </template>
 <script>
-    import { iSelect, iOption, iButton } from 'iview';
+    import { iSelect, iOption, iButton, iOptionGroup } from 'iview';
     export default {
-        components: { iSelect, iOption, iButton },
+        components: { iSelect, iOption, iButton, iOptionGroup },
         data () {
             return {
                 cityList: [
@@ -36,23 +54,27 @@
                         value: 'shenzhen',
                         label: '深圳市'
                     },
-                    {
+//                    {
-                        value: 'hangzhou',
+//                        value: 'hangzhou',
-                        label: '杭州市'
+//                        label: '杭州市'
-                    },
+//                    },
-                    {
+//                    {
-                        value: 'nanjing',
+//                        value: 'nanjing',
-                        label: '南京市'
+//                        label: '南京市'
-                    },
+//                    },
-                    {
+//                    {
-                        value: 'chongqing',
+//                        value: 'chongqing',
-                        label: '重庆市'
+//                        label: '重庆市'
-                    }
+//                    }
                 ],
                 model1: '',
                 model10: [],
                 model11: '',
-                model12: []
+                model12: [],
+                model2: '',
+                model3: '',
+                model4: '',
+                model7: ''
             }
         },
         methods: {

test/routers/tag.vue

@@ -31,10 +31,14 @@
     <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
     <Modal
             :visible.sync="modal1"
-            title="普通的Modal对话框标题">
+            title="普通的Modal对话框标题"
+            :loading="loading" @on-ok="ok">
         <p>对话框内容</p>
         <p>对话框内容</p>
         <p>对话框内容</p>
+        {{ loading }}
+        <i-button @click="loading = true">true</i-button>
+        <i-button @click="loading = false">false</i-button>
     </Modal>
 </template>
 <script>
@@ -43,7 +47,13 @@
         components: { Tag, Modal, iButton },
         data () {
             return {
-                modal1: false
+                modal1: false,
+                loading: true
+            }
+        },
+        methods: {
+            ok () {
+
             }
         }
     }

test/routers/tooltip.vue

@@ -0,0 +1,70 @@
+<style scoped>
+    .top,.bottom{
+        text-align: center;
+    }
+    .center{
+        width: 300px;
+        margin: 10px auto;
+        overflow: hidden;
+    }
+    .center-left{
+        float: left;
+    }
+    .center-right{
+        float: right;
+    }
+</style>
+<template>
+    <div class="top">
+        <Tooltip content="Top Left 文字提示" placement="top-start">
+            <i-button>上左</i-button>
+        </Tooltip>
+        <Tooltip content="Top Center 文字提示" placement="top">
+            <i-button>上边</i-button>
+        </Tooltip>
+        <Tooltip content="Top Right 文字提示" placement="top-end">
+            <i-button>上右</i-button>
+        </Tooltip>
+    </div>
+    <div class="center">
+        <div class="center-left">
+            <Tooltip content="Left Top 文字提示" placement="left-start">
+                <i-button>左上</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Left Center 文字提示" placement="left">
+                <i-button>左边</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Left Bottom 文字提示" placement="left-end">
+                <i-button>左下</i-button>
+            </Tooltip>
+        </div>
+        <div class="center-right">
+            <Tooltip content="Right Top 文字提示" placement="right-start">
+                <i-button>右上</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Right Center 文字提示" placement="right">
+                <i-button>右边</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Right Bottom 文字提示" placement="right-end">
+                <i-button>右下</i-button>
+            </Tooltip>
+        </div>
+    </div>
+    <div class="bottom">
+        <Tooltip content="Bottom Left 文字提示" placement="bottom-start">
+            <i-button>下左</i-button>
+        </Tooltip>
+        <Tooltip content="Bottom Center 文字提示" placement="bottom">
+            <i-button>下边</i-button>
+        </Tooltip>
+        <Tooltip content="Bottom Right 文字提示" placement="bottom-end">
+            <i-button>下右</i-button>
+        </Tooltip>
+    </div>
+</template>
+<script>
+    import { Tooltip, iButton } from 'iview';
+    export default {
+        components: { Tooltip, iButton }
+    }
+</script>