Merge branch '2.0' of https://github.com/iview/iview into anchor

src/components/alert/alert.vue

@@ -10,7 +10,7 @@
             <span :class="descClasses"><slot name="desc"></slot></span>
             <a :class="closeClasses" v-if="closable" @click="close">
                 <slot name="close">
-                    <Icon type="ios-close-empty"></Icon>
+                    <Icon type="ios-close"></Icon>
                 </slot>
             </a>
         </div>
@@ -80,19 +80,20 @@
 
                 switch (this.type) {
                     case 'success':
-                        type = 'checkmark-circled';
+                        type = 'ios-checkmark-circle';
                         break;
                     case 'info':
-                        type = 'information-circled';
+                        type = 'ios-information-circle';
                         break;
                     case 'warning':
-                        type = 'android-alert';
+                        type = 'ios-alert';
                         break;
                     case 'error':
-                        type = 'close-circled';
+                        type = 'ios-close-circle';
                         break;
                 }
 
+                if (this.desc) type += '-outline';
                 return type;
             }
         },

src/components/anchor/anchor-link.vue

@@ -5,9 +5,9 @@
     </div>
 </template>
 <script>
-import { findComponentUpward } from '../../utils/assist';
 export default {
     name: 'AnchorLink',
+    inject: ['anchorCom'],
     props: {
         href: String,
         title: String
@@ -21,29 +21,23 @@ export default {
         anchorLinkClasses () {
             return [
                 this.prefix,
-                this.currentLink === this.href ? `${this.prefix}-active` : ''
+                this.anchorCom.currentLink === this.href ? `${this.prefix}-active` : ''
             ];
         },
         linkTitleClasses () {
             return [
                 `${this.prefix}-title`
             ];
-        },
-        parentAnchor () {
-            return findComponentUpward(this, 'Anchor');
-        },
-        currentLink () {
-            return this.parentAnchor.currentLink;
         }
     },
     methods: {
         goAnchor () {
-            this.parentAnchor.turnTo(this.href);
+            this.anchorCom.turnTo(this.href);
         }
     },
     mounted () {
         this.$nextTick(() => {
-            this.parentAnchor.init();
+            this.anchorCom.init();
         });
     }
 };

src/components/anchor/anchor.vue

@@ -15,6 +15,11 @@ import { scrollTop, findComponentDownward, findComponentsDownward, sharpMatcherR
 import { on, off } from '../../utils/dom';
 export default {
     name: 'Anchor',
+    provide () {
+        return {
+            anchorCom: this
+        };
+    },
     data () {
         return {
             prefix: 'ivu-anchor',

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

@@ -73,6 +73,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             icon: {
@@ -90,7 +93,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             name: {
                 type: String

src/components/avatar/avatar.vue

@@ -25,7 +25,9 @@
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
                 },
-                default: 'default'
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
+                }
             },
             src: {
                 type: String

src/components/back-top/back-top.vue

@@ -2,7 +2,7 @@
     <div :class="classes" :style="styles" @click="back">
         <slot>
             <div :class="innerClasses">
-                <i class="ivu-icon ivu-icon-chevron-up"></i>
+                <i class="ivu-icon ivu-icon-ios-arrow-up"></i>
             </div>
         </slot>
     </div>

src/components/badge/badge.vue

@@ -1,20 +1,25 @@
 <template>
     <span v-if="dot" :class="classes" ref="badge">
         <slot></slot>
-        <sup :class="dotClasses" v-show="badge"></sup>
+        <sup :class="dotClasses" :style="styles" v-show="badge"></sup>
+    </span>
+    <span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
+        <span :class="statusClasses"></span>
+        <span class="ivu-badge-status-text">{{ text }}</span>
     </span>
     <span v-else :class="classes" ref="badge">
         <slot></slot>
-        <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
+        <sup v-if="hasCount" :style="styles" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
     </span>
 </template>
 <script>
+    import { oneOf } from '../../utils/assist';
     const prefixCls = 'ivu-badge';
 
     export default {
         name: 'Badge',
         props: {
-            count: [Number, String],
+            count: Number,
             dot: {
                 type: Boolean,
                 default: false
@@ -23,7 +28,28 @@
                 type: [Number, String],
                 default: 99
             },
-            className: String
+            className: String,
+            showZero: {
+                type: Boolean,
+                default: false
+            },
+            text: {
+                type: String,
+                default: ''
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']);
+                }
+            },
+            type: {
+                validator (value) {
+                    return oneOf(value, ['success', 'primary', 'normal', 'error', 'warning', 'info']);
+                }
+            },
+            offset: {
+                type: Array
+            }
         },
         computed: {
             classes () {
@@ -37,11 +63,29 @@
                     `${prefixCls}-count`,
                     {
                         [`${this.className}`]: !!this.className,
-                        [`${prefixCls}-count-alone`]: this.alone
+                        [`${prefixCls}-count-alone`]: this.alone,
+                        [`${prefixCls}-count-${this.type}`]: !!this.type
                     }
                 ];
             },
+            statusClasses () {
+                return [
+                    `${prefixCls}-status-dot`,
+                    {
+                        [`${prefixCls}-status-${this.status}`]: !!this.status
+                    }
+                ];
+            },
+            styles () {
+                const style = {};
+                if (this.offset && this.offset.length === 2) {
+                    style['margin-top'] = `${this.offset[0]}px`;
+                    style['margin-right'] = `${this.offset[1]}px`;
+                }
+                return style;
+            },
             finalCount () {
+                if (this.text !== '') return this.text;
                 return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
             },
             badge () {
@@ -60,7 +104,14 @@
                     }
                 }
 
-                return status;
+                if (this.text !== '') status = true;
+
+                return status || this.showZero;
+            },
+            hasCount() {
+                if(this.count || this.text !== '') return true;
+                if(this.showZero && parseInt(this.count) === 0) return true;
+                else return false;
             },
             alone () {
                 return this.$slots.default === undefined;

src/components/base/notification/notice.vue

@@ -9,7 +9,7 @@
                     ></render-cell>
                 </div>
                 <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-                    <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                    <i class="ivu-icon ivu-icon-ios-close"></i>
                 </a>
             </template>
             <template v-if="type === 'message'">
@@ -21,7 +21,7 @@
                         ></render-cell>
                     </div>
                     <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-                        <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                        <i class="ivu-icon ivu-icon-ios-close"></i>
                     </a>
                 </div>
             </template>

src/components/breadcrumb/breadcrumb-item.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <a v-if="to || href" :class="linkClasses" @click="handleClick">
+        <a v-if="to" :href="linkUrl" :target="target" :class="linkClasses" @click="handleCheckClick">
             <slot></slot>
         </a>
         <span v-else :class="linkClasses">
@@ -13,22 +13,14 @@
     </span>
 </template>
 <script>
-    // todo 3.0 时废弃 href
+    import mixinsLink from '../../mixins/link';
     const prefixCls = 'ivu-breadcrumb-item';
 
     export default {
         name: 'BreadcrumbItem',
+        mixins: [ mixinsLink ],
         props: {
-            href: {
-                type: [Object, String]
-            },
-            to: {
-                type: [Object, String]
-            },
-            replace: {
-                type: Boolean,
-                default: false
-            }
+
         },
         data () {
             return {
@@ -46,16 +38,6 @@
         },
         mounted () {
             this.showSeparator = this.$slots.separator !== undefined;
-        },
-        methods: {
-            handleClick () {
-                const isRoute = this.$router;
-                if (isRoute) {
-                    this.replace ? this.$router.replace(this.to || this.href) : this.$router.push(this.to || this.href);
-                } else {
-                    window.location.href = this.to || this.href;
-                }
-            }
         }
     };
 </script>

src/components/button/button.vue

@@ -1,28 +1,43 @@
 <template>
+    <a
+        v-if="to"
+        :class="classes"
+        :disabled="disabled"
+        :href="linkUrl"
+        :target="target"
+        @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>
+    </a>
     <button
+        v-else
         :type="htmlType"
         :class="classes"
         :disabled="disabled"
-        @click="handleClick">
-        <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
-        <Icon :type="icon" v-if="icon && !loading"></Icon>
+        @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>
 </template>
 <script>
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
+    import mixinsLink from '../../mixins/link';
 
     const prefixCls = 'ivu-btn';
 
     export default {
         name: 'Button',
+        mixins: [ mixinsLink ],
         components: { Icon },
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default']);
-                }
+                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
+                },
+                default: 'default'
             },
             shape: {
                 validator (value) {
@@ -32,6 +47,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             loading: Boolean,
@@ -42,10 +60,21 @@
                     return oneOf(value, ['button', 'submit', 'reset']);
                 }
             },
-            icon: String,
+            icon: {
+                type: String,
+                default: ''
+            },
+            customIcon: {
+                type: String,
+                default: ''
+            },
             long: {
                 type: Boolean,
                 default: false
+            },
+            ghost: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -63,14 +92,17 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading),
+                        [`${prefixCls}-ghost`]: this.ghost
                     }
                 ];
             }
         },
         methods: {
-            handleClick (event) {
+            handleClickLink (event) {
                 this.$emit('click', event);
+
+                this.handleCheckClick(event);
             }
         },
         mounted () {

src/components/carousel/carousel.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classes">
         <button type="button" :class="arrowClasses" class="left" @click="arrowEvent(-1)">
-            <Icon type="chevron-left"></Icon>
+            <Icon type="ios-arrow-back"></Icon>
         </button>
         <div :class="[prefixCls + '-list']">
             <div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
@@ -11,7 +11,7 @@
             </div>
         </div>
         <button type="button" :class="arrowClasses" class="right" @click="arrowEvent(1)">
-            <Icon type="chevron-right"></Icon>
+            <Icon type="ios-arrow-forward"></Icon>
         </button>
         <ul :class="dotsClasses">
             <template v-for="n in slides.length">
@@ -227,6 +227,7 @@
                 } else {
                     this.trackIndex = index;
                 }
+                this.currentIndex = index;
             },
             add (offset) {
                 // 获取单个轨道的图片数
@@ -306,8 +307,10 @@
                 this.updatePos();
             },
             value (val) {
-                this.currentIndex = val;
-                this.trackIndex = val;
+//                this.currentIndex = val;
+//                this.trackIndex = val;
+                this.updateTrackIndex(val);
+                this.setAutoplay();
             }
         },
         mounted () {

src/components/cascader/cascader.vue

@@ -16,8 +16,8 @@
                     :class="[prefixCls + '-label']"
                     v-show="filterable && query === ''"
                     @click="handleFocus">{{ displayRender }}</div>
-                <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
-                <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
+                <Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
+                <Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']"></Icon>
             </slot>
         </div>
         <transition name="transition-drop">
@@ -97,7 +97,10 @@
             },
             size: {
                 validator (value) {
-                    return oneOf(value, ['small', 'large']);
+                    return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             trigger: {
@@ -128,7 +131,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             name: {
                 type: String

src/components/cascader/casitem.vue

@@ -1,8 +1,8 @@
 <template>
     <li :class="classes">
         {{ data.label }}
-        <i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-right"></i>
-        <i v-if="showLoading" class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>
+        <i v-if="showArrow" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
+        <i v-if="showLoading" class="ivu-icon ivu-icon-ios-loading ivu-load-loop"></i>
     </li>
 </template>
 <script>

src/components/cell-group/index.js

@@ -0,0 +1,2 @@
+import CellGroup from '../cell/cell-group.vue';
+export default CellGroup;

src/components/cell/cell-group.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="ivu-cell-group">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'CellGroup',
+        provide () {
+            return {
+                cellGroup: this
+            };
+        },
+        methods: {
+            handleClick (name) {
+                this.$emit('on-click', name);
+            }
+        }
+    };
+</script>

src/components/cell/cell-item.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="ivu-cell-item">
+        <div class="ivu-cell-icon">
+            <slot name="icon"></slot>
+        </div>
+        <div class="ivu-cell-main">
+            <div class="ivu-cell-title"><slot>{{ title }}</slot></div>
+            <div class="ivu-cell-label"><slot name="label">{{ label }}</slot></div>
+        </div>
+        <div class="ivu-cell-footer">
+            <span class="ivu-cell-extra"><slot name="extra">{{ extra }}</slot></span>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+            label: {
+                type: String,
+                default: ''
+            },
+            extra: {
+                type: String,
+                default: ''
+            },
+        }
+    };
+</script>

src/components/cell/cell.vue

@@ -0,0 +1,93 @@
+<template>
+    <div :class="classes">
+        <a v-if="to" :href="linkUrl" class="ivu-cell-link" @click.prevent="handleClick" @click="handleClickItem">
+            <CellItem :title="title" :label="label" :extra="extra">
+                <slot name="icon" slot="icon"></slot>
+                <slot slot="default"></slot>
+                <slot name="extra" slot="extra"></slot>
+                <slot name="label" slot="label"></slot>
+            </CellItem>
+        </a>
+        <div class="ivu-cell-link" v-else @click="handleClickItem">
+            <CellItem :title="title" :label="label" :extra="extra">
+                <slot name="icon" slot="icon"></slot>
+                <slot slot="default"></slot>
+                <slot name="extra" slot="extra"></slot>
+                <slot name="label" slot="label"></slot>
+            </CellItem>
+        </div>
+        <div class="ivu-cell-arrow" v-if="to">
+            <slot name="arrow">
+                <Icon type="ios-arrow-forward"></Icon>
+            </slot>
+        </div>
+    </div>
+</template>
+<script>
+    import CellItem from './cell-item.vue';
+    import Icon from '../icon/icon.vue';
+    import mixinsLink from '../../mixins/link';
+
+    const prefixCls = 'ivu-cell';
+
+    export default {
+        name: 'Cell',
+        inject: ['cellGroup'],
+        mixins: [ mixinsLink ],
+        components: { CellItem, Icon },
+        props: {
+            name: {
+                type: [String, Number]
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            label: {
+                type: String,
+                default: ''
+            },
+            extra: {
+                type: String,
+                default: ''
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            selected: {
+                type: Boolean,
+                default: false
+            },
+            to: {
+                type: [Object, String]
+            },
+            replace: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-selected`]: this.selected,
+                        [`${prefixCls}-with-link`]: this.to
+                    }
+                ];
+            },
+        },
+        methods: {
+            handleClickItem () {
+                this.cellGroup.handleClick(this.name);
+            }
+        }
+    };
+</script>

src/components/cell/index.js

@@ -0,0 +1,5 @@
+import Cell from './cell.vue';
+import CellGroup from './cell-group.vue';
+
+Cell.Group = CellGroup;
+export default Cell;

src/components/checkbox/checkbox-group.vue

@@ -22,6 +22,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             }
         },

src/components/checkbox/checkbox.vue

@@ -63,6 +63,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             name: {

src/components/circle/circle.vue

@@ -1,8 +1,8 @@
 <template>
     <div :style="circleSize" :class="wrapClasses">
         <svg viewBox="0 0 100 100">
-            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
-            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
+            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" />
+            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
         </svg>
         <div :class="innerClasses">
             <slot></slot>
@@ -31,7 +31,7 @@
             },
             strokeColor: {
                 type: String,
-                default: '#2db7f5'
+                default: '#2d8cf0'
             },
             strokeLinecap: {
                 validator (value) {
@@ -46,6 +46,10 @@
             trailColor: {
                 type: String,
                 default: '#eaeef2'
+            },
+            dashboard: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
@@ -55,23 +59,53 @@
                     height: `${this.size}px`
                 };
             },
+            computedStrokeWidth () {
+                return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth;
+            },
             radius () {
                 return 50 - this.strokeWidth / 2;
             },
             pathString () {
-                return `M 50,50 m 0,-${this.radius}
-                a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
-                a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+                if (this.dashboard) {
+                    return `M 50,50 m 0,${this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}`;
+                } else {
+                    return `M 50,50 m 0,-${this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+                }
             },
             len () {
                 return Math.PI * 2 * this.radius;
             },
+            trailStyle () {
+                let style = {};
+                if (this.dashboard) {
+                    style = {
+                        'stroke-dasharray': `${this.len - 75}px ${this.len}px`,
+                        'stroke-dashoffset': `-${75 / 2}px`,
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
+                    };
+                }
+                return style;
+            },
             pathStyle () {
-                return {
-                    'stroke-dasharray': `${this.len}px ${this.len}px`,
-                    'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
-                    'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
-                };
+                let style = {};
+                if (this.dashboard) {
+                    style = {
+                        'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
+                        'stroke-dashoffset': `-${75 / 2}px`,
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
+                    };
+                } else {
+                    style = {
+                        'stroke-dasharray': `${this.len}px ${this.len}px`,
+                        'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
+                        'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+                    };
+                }
+                return style;
             },
             wrapClasses () {
                 return `${prefixCls}`;

src/components/collapse/collapse.vue

@@ -15,6 +15,10 @@
             },
             value: {
                 type: [Array, String]
+            },
+            simple: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -24,7 +28,12 @@
         },
         computed: {
             classes () {
-                return `${prefixCls}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-simple`]: this.simple
+                    }
+                ];
             }
         },
         mounted () {

src/components/collapse/panel.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="itemClasses">
         <div :class="headerClasses" @click="toggle">
-            <Icon type="arrow-right-b"></Icon>
+            <Icon type="ios-arrow-forward" v-if="!hideArrow"></Icon>
             <slot></slot>
         </div>
         <collapse-transition>
@@ -22,6 +22,10 @@
         props: {
             name: {
                 type: String
+            },
+            hideArrow: {
+                type: Boolean,
+                default: false
             }
         },
         data () {

src/components/color-picker/color-picker.vue

@@ -25,7 +25,7 @@
                     <div
                         v-show="value === '' && !visible"
                         :class="[prefixCls + '-color-empty']">
-                        <i :class="[iconPrefixCls, iconPrefixCls + '-ios-close-empty']"></i>
+                        <i :class="[iconPrefixCls, iconPrefixCls + '-ios-close']"></i>
                     </div>
                     <div
                         v-show="value || visible"
@@ -87,7 +87,6 @@
                                 ref="clear"
                                 :tabindex="0"
                                 size="small"
-                                type="ghost"
                                 @click.native="handleClear"
                                 @keydown.enter="handleClear"
                                 @keydown.native.esc="closer"
@@ -169,11 +168,12 @@ export default {
             default: false,
         },
         size: {
-            type: String,
             validator(value) {
                 return oneOf(value, ['small', 'large', 'default']);
             },
-            default: 'default',
+            default () {
+                return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
+            }
         },
         hideDropDown: {
             type: Boolean,
@@ -201,7 +201,9 @@ export default {
         },
         transfer: {
             type: Boolean,
-            default: false,
+            default () {
+                return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+            }
         },
         name: {
             type: String,
@@ -248,7 +250,7 @@ export default {
         arrowClasses() {
             return [
                 this.iconPrefixCls,
-                `${this.iconPrefixCls}-arrow-down-b`,
+                `${this.iconPrefixCls}-ios-arrow-down`,
                 `${this.inputPrefixCls}-icon`,
                 `${this.inputPrefixCls}-icon-normal`,
             ];

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

@@ -3,7 +3,7 @@
         <i-button :class="timeClasses" size="small" type="text" :disabled="timeDisabled" v-if="showTime" @click="handleToggleTime">
             {{labels.time}}
         </i-button>
-        <i-button size="small" type="ghost" @click.native="handleClear" @keydown.enter.native="handleClear">
+        <i-button size="small" @click.native="handleClear" @keydown.enter.native="handleClear">
             {{labels.clear}}
         </i-button>
         <i-button size="small" type="primary" @click.native="handleSuccess" @keydown.enter.native="handleSuccess">

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

@@ -11,12 +11,12 @@
                 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                     <span
                         :class="iconBtnCls('prev', '-double')"
-                        @click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
+                        @click="prevYear('left')"><Icon type="ios-arrow-back"></Icon></span>
                     <span
                         v-if="leftPickerTable === 'date-table'"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('left')"
-                        v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
                     <date-panel-label
                         :date-panel-label="leftDatePanelLabel"
                         :current-view="leftDatePanelView"
@@ -24,12 +24,12 @@
                     <span
                         v-if="splitPanels || leftPickerTable !== 'date-table'"
                         :class="iconBtnCls('next', '-double')"
-                        @click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
+                        @click="nextYear('left')"><Icon type="ios-arrow-forward"></Icon></span>
                     <span
                         v-if="splitPanels && leftPickerTable === 'date-table'"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('left')"
-                        v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
                 </div>
                 <component
                     :is="leftPickerTable"
@@ -53,24 +53,24 @@
                     <span
                         v-if="splitPanels || rightPickerTable !== 'date-table'"
                         :class="iconBtnCls('prev', '-double')"
-                        @click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
+                        @click="prevYear('right')"><Icon type="ios-arrow-back"></Icon></span>
                     <span
                         v-if="splitPanels && rightPickerTable === 'date-table'"
                         :class="iconBtnCls('prev')"
                         @click="prevMonth('right')"
-                        v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
                     <date-panel-label
                         :date-panel-label="rightDatePanelLabel"
                         :current-view="rightDatePanelView"
                         :date-prefix-cls="datePrefixCls"></date-panel-label>
                     <span
                         :class="iconBtnCls('next', '-double')"
-                        @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
+                        @click="nextYear('right')"><Icon type="ios-arrow-forward"></Icon></span>
                     <span
                         v-if="rightPickerTable === 'date-table'"
                         :class="iconBtnCls('next')"
                         @click="nextMonth('right')"
-                        v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+                        v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
                 </div>
                 <component
                     :is="rightPickerTable"

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

@@ -10,24 +10,24 @@
             <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                 <span
                     :class="iconBtnCls('prev', '-double')"
-                    @click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
+                    @click="changeYear(-1)"><Icon type="ios-arrow-back"></Icon></span>
                 <span
                     v-if="pickerTable === 'date-table'"
                     :class="iconBtnCls('prev')"
                     @click="changeMonth(-1)"
-                    v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
+                    v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
                 <date-panel-label
                     :date-panel-label="datePanelLabel"
                     :current-view="pickerTable.split('-').shift()"
                     :date-prefix-cls="datePrefixCls"></date-panel-label>
                 <span
                     :class="iconBtnCls('next', '-double')"
-                    @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
+                    @click="changeYear(+1)"><Icon type="ios-arrow-forward"></Icon></span>
                 <span
                     v-if="pickerTable === 'date-table'"
                     :class="iconBtnCls('next')"
                     @click="changeMonth(+1)"
-                    v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
+                    v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
             </div>
             <div :class="[prefixCls + '-content']">
                 <component

src/components/date-picker/picker.vue

@@ -171,6 +171,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             placeholder: {
@@ -185,7 +188,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             name: {
                 type: String
@@ -259,8 +264,8 @@
             },
             iconType () {
                 let icon = 'ios-calendar-outline';
-                if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
-                if (this.showClose) icon = 'ios-close';
+                if (this.type === 'time' || this.type === 'timerange') icon = 'ios-time-outline';
+                if (this.showClose) icon = 'ios-close-circle';
                 return icon;
             },
             transition () {

src/components/divider/divider.vue

@@ -0,0 +1,57 @@
+<template>
+    <div :class="classes">
+        <span v-if="hasSlot" :class="slotClasses">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+    import {oneOf} from '../../utils/assist';
+
+    const prefixCls = 'ivu-divider';
+
+    export default {
+        name: 'Divider',
+        props: {
+            type: {
+                type: String,
+                default: 'horizontal',
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                }
+            },
+            orientation: {
+                type: String,
+                default: 'center',
+                validator (value) {
+                    return oneOf(value, ['left', 'right', 'center']);
+                }
+            },
+            dashed: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        computed: {
+            hasSlot() {
+                return !!this.$slots.default;
+            },
+            classes() {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.type}`,
+                    {
+                        [`${prefixCls}-with-text-${this.orientation}`]: this.hasSlot,
+                        [`${prefixCls}-dashed`]: !!this.dashed
+                    }
+                ];
+            },
+            slotClasses() {
+                return [
+                    `${prefixCls}-inner-text`,
+                ];
+            }
+        }
+    };
+</script>

src/components/divider/index.js

@@ -0,0 +1,3 @@
+import Divider from './divider.vue';
+
+export default Divider;

src/components/dropdown/dropdown.vue

@@ -4,7 +4,7 @@
         v-click-outside="onClickoutside"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
-        <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
+        <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
         <transition name="transition-drop">
             <Drop
                 :class="dropdownCls"
@@ -33,7 +33,7 @@
         props: {
             trigger: {
                 validator (value) {
-                    return oneOf(value, ['click', 'hover', 'custom']);
+                    return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
                 },
                 default: 'hover'
             },
@@ -49,7 +49,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             }
         },
         computed: {
@@ -60,6 +62,14 @@
                 return {
                     [prefixCls + '-transfer']: this.transfer
                 };
+            },
+            relClasses () {
+                return [
+                    `${prefixCls}-rel`,
+                    {
+                        [`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
+                    }
+                ];
             }
         },
         data () {
@@ -89,6 +99,13 @@
                 }
                 this.currentVisible = !this.currentVisible;
             },
+            handleRightClick () {
+                if (this.trigger === 'custom') return false;
+                if (this.trigger !== 'contextMenu') {
+                    return false;
+                }
+                this.currentVisible = !this.currentVisible;
+            },
             handleMouseenter () {
                 if (this.trigger === 'custom') return false;
                 if (this.trigger !== 'hover') {
@@ -113,6 +130,7 @@
             },
             onClickoutside (e) {
                 this.handleClose();
+                this.handleRightClose();
                 if (this.currentVisible) this.$emit('on-clickoutside', e);
             },
             handleClose () {
@@ -122,6 +140,13 @@
                 }
                 this.currentVisible = false;
             },
+            handleRightClose () {
+                if (this.trigger === 'custom') return false;
+                if (this.trigger !== 'contextMenu') {
+                    return false;
+                }
+                this.currentVisible = false;
+            },
             hasParent () {
 //                const $parent = this.$parent.$parent.$parent;
                 const $parent = findComponentUpward(this, 'Dropdown');

src/components/icon/icon.vue

@@ -7,13 +7,26 @@
     export default {
         name: 'Icon',
         props: {
-            type: String,
+            type: {
+                type: String,
+                default: ''
+            },
             size: [Number, String],
-            color: String
+            color: String,
+            custom: {
+                type: String,
+                default: ''
+            }
         },
         computed: {
             classes () {
-                return `${prefixCls} ${prefixCls}-${this.type}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.type}`]: this.type !== '',
+                        [`${this.custom}`]: this.custom !== '',
+                    }
+                ];
             },
             styles () {
                 let style = {};

src/components/input-number/input-number.vue

@@ -89,6 +89,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             disabled: {

src/components/input/input.vue

@@ -2,10 +2,12 @@
     <div :class="wrapClasses">
         <template v-if="type !== 'textarea'">
             <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
-            <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
+            <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
+            <i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
+            <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
             <transition name="fade">
-                <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
+                <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
             <input
                 :id="elementId"
@@ -31,6 +33,11 @@
                 @input="handleInput"
                 @change="handleChange">
             <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
+            <div :class="[prefixCls + '-group-append', prefixCls + '-search']" v-else-if="search && enterButton" @click="handleSearch">
+                <i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
+                <template v-else>{{ enterButton }}</template>
+            </div>
+            <span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-' + prefix]" v-if="prefix"></i></slot></span>
         </template>
         <textarea
             v-else
@@ -83,6 +90,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             placeholder: {
@@ -142,6 +152,22 @@
                     return oneOf(value, ['hard', 'soft']);
                 },
                 default: 'soft'
+            },
+            prefix: {
+                type: String,
+                default: ''
+            },
+            suffix: {
+                type: String,
+                default: ''
+            },
+            search: {
+                type: Boolean,
+                default: false
+            },
+            enterButton: {
+                type: [Boolean, String],
+                default: false
             }
         },
         data () {
@@ -151,7 +177,9 @@
                 prepend: true,
                 append: true,
                 slotReady: false,
-                textareaStyles: {}
+                textareaStyles: {},
+                showPrefix: false,
+                showSuffix: false
             };
         },
         computed: {
@@ -161,11 +189,12 @@
                     {
                         [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
                         [`${prefixCls}-type`]: this.type,
-                        [`${prefixCls}-group`]: this.prepend || this.append,
-                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
+                        [`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
+                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
                         [`${prefixCls}-group-with-prepend`]: this.prepend,
-                        [`${prefixCls}-group-with-append`]: this.append,
-                        [`${prefixCls}-hide-icon`]: this.append  // #554
+                        [`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
+                        [`${prefixCls}-hide-icon`]: this.append,  // #554
+                        [`${prefixCls}-with-search`]: (this.search && this.enterButton)
                     }
                 ];
             },
@@ -174,7 +203,9 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-disabled`]: this.disabled
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-with-prefix`]: this.showPrefix,
+                        [`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
                     }
                 ];
             },
@@ -190,6 +221,7 @@
         methods: {
             handleEnter (event) {
                 this.$emit('on-enter', event);
+                if (this.search) this.$emit('on-search', this.currentValue);
             },
             handleKeydown (event) {
                 this.$emit('on-keydown', event);
@@ -262,6 +294,11 @@
                 this.$emit('input', '');
                 this.setCurrentValue('');
                 this.$emit('on-change', e);
+            },
+            handleSearch () {
+                if (this.disabled) return false;
+                this.$refs.input.focus();
+                this.$emit('on-search', this.currentValue);
             }
         },
         watch: {
@@ -273,6 +310,8 @@
             if (this.type !== 'textarea') {
                 this.prepend = this.$slots.prepend !== undefined;
                 this.append = this.$slots.append !== undefined;
+                this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
+                this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
             } else {
                 this.prepend = false;
                 this.append = false;

src/components/layout/sider.vue

@@ -3,7 +3,7 @@
         :class="wrapClasses" 
         :style="wrapStyles">
         <span v-show="showZeroTrigger" @click="toggleCollapse" :class="zeroWidthTriggerClasses">
-            <i class="ivu-icon ivu-icon-navicon-round"></i>
+            <i class="ivu-icon ivu-icon-ios-menu"></i>
         </span>
         <div :class="childClasses">
             <slot></slot>
@@ -98,7 +98,7 @@
             triggerIconClasses () {
                 return [
                     'ivu-icon',
-                    `ivu-icon-chevron-${this.reverseArrow ? 'right' : 'left'}`,
+                    `ivu-icon-ios-arrow-${this.reverseArrow ? 'forward' : 'back'}`,
                     `${prefixCls}-trigger-icon`,
                 ];
             },

src/components/loading-bar/index.js

@@ -55,7 +55,7 @@ export default {
         });
 
         timer = setInterval(() => {
-            percent += Math.floor(Math.random () * 3 + 5);
+            percent += Math.floor(Math.random () * 3 + 1);
             if (percent > 95) {
                 clearTimer();
             }

src/components/menu/menu-item.vue

@@ -1,15 +1,18 @@
 <template>
-    <li :class="classes" @click.stop="handleClick" :style="itemStyle"><slot></slot></li>
+    <a v-if="to" :href="linkUrl" :target="target" :class="classes" @click="handleClickItem" :style="itemStyle"><slot></slot></a>
+    <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li>
 </template>
 <script>
     import Emitter from '../../mixins/emitter';
     import { findComponentUpward } from '../../utils/assist';
-    const prefixCls = 'ivu-menu';
     import mixin from './mixin';
+    import mixinsLink from '../../mixins/link';
+
+    const prefixCls = 'ivu-menu';
 
     export default {
         name: 'MenuItem',
-        mixins: [ Emitter, mixin ],
+        mixins: [ Emitter, mixin, mixinsLink ],
         props: {
             name: {
                 type: [String, Number],
@@ -18,7 +21,7 @@
             disabled: {
                 type: Boolean,
                 default: false
-            }
+            },
         },
         data () {
             return {
@@ -43,7 +46,7 @@
             }
         },
         methods: {
-            handleClick () {
+            handleClickItem (event) {
                 if (this.disabled) return;
 
                 let parent = findComponentUpward(this, 'Submenu');
@@ -53,6 +56,8 @@
                 } else {
                     this.dispatch('Menu', 'on-menu-item-select', this.name);
                 }
+
+                this.handleCheckClick(event);
             }
         },
         mounted () {

src/components/message/index.js

@@ -13,11 +13,11 @@ let messageInstance;
 let name = 1;
 
 const iconTypes = {
-    'info': 'information-circled',
-    'success': 'checkmark-circled',
-    'warning': 'android-alert',
-    'error': 'close-circled',
-    'loading': 'load-c'
+    'info': 'ios-information-circle',
+    'success': 'ios-checkmark-circle',
+    'warning': 'ios-alert',
+    'error': 'ios-close-circle',
+    'loading': 'ios-loading'
 };
 
 function getMessageInstance () {
@@ -46,7 +46,7 @@ function notice (content = '', duration = defaults.duration, type, onClose = fun
         transitionName: 'move-up',
         content: `
             <div class="${prefixCls}-custom-content ${prefixCls}-${type}">
-                <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>
+                <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType} ${loadCls}"></i>
                 <span>${content}</span>
             </div>
         `,

src/components/modal/confirm.js

@@ -62,6 +62,22 @@ Modal.newInstance = properties => {
                     attrs: {
                         class: `${prefixCls}-body`
                     }
+                }, [
+                    h('div', {
+                        domProps: {
+                            innerHTML: this.body
+                        }
+                    })
+                ]);
+            }
+
+            // when render with no title, hide head
+            let head_render;
+            if (this.title) {
+                head_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-head`
+                    }
                 }, [
                     h('div', {
                         class: this.iconTypeCls
@@ -71,8 +87,11 @@ Modal.newInstance = properties => {
                         })
                     ]),
                     h('div', {
+                        attrs: {
+                            class: `${prefixCls}-head-title`
+                        },
                         domProps: {
-                            innerHTML: this.body
+                            innerHTML: this.title
                         }
                     })
                 ]);
@@ -98,20 +117,7 @@ Modal.newInstance = properties => {
                         class: prefixCls
                     }
                 }, [
-                    h('div', {
-                        attrs: {
-                            class: `${prefixCls}-head`
-                        }
-                    }, [
-                        h('div', {
-                            attrs: {
-                                class: `${prefixCls}-head-title`
-                            },
-                            domProps: {
-                                innerHTML: this.title
-                            }
-                        })
-                    ]),
+                    head_render,
                     body_render,
                     h('div', {
                         attrs: {
@@ -124,8 +130,8 @@ Modal.newInstance = properties => {
         computed: {
             iconTypeCls () {
                 return [
-                    `${prefixCls}-body-icon`,
-                    `${prefixCls}-body-icon-${this.iconType}`
+                    `${prefixCls}-head-icon`,
+                    `${prefixCls}-head-icon-${this.iconType}`
                 ];
             },
             iconNameCls () {
@@ -192,19 +198,19 @@ Modal.newInstance = properties => {
 
             switch (props.icon) {
                 case 'info':
-                    modal.$parent.iconName = 'information-circled';
+                    modal.$parent.iconName = 'ios-information-circle';
                     break;
                 case 'success':
-                    modal.$parent.iconName = 'checkmark-circled';
+                    modal.$parent.iconName = 'ios-checkmark-circle';
                     break;
                 case 'warning':
-                    modal.$parent.iconName = 'android-alert';
+                    modal.$parent.iconName = 'ios-alert';
                     break;
                 case 'error':
-                    modal.$parent.iconName = 'close-circled';
+                    modal.$parent.iconName = 'ios-close-circle';
                     break;
                 case 'confirm':
-                    modal.$parent.iconName = 'help-circled';
+                    modal.$parent.iconName = 'ios-help-circle';
                     break;
             }
 

src/components/modal/modal.vue

@@ -1,18 +1,21 @@
 <template>
     <div v-transfer-dom :data-transfer="transfer">
         <transition :name="transitionNames[1]">
-            <div :class="maskClasses" v-show="visible" @click="mask"></div>
+            <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
                 <div :class="classes" :style="mainStyles" v-show="visible">
-                    <div :class="[prefixCls + '-content']">
+                    <div :class="contentClasses" ref="content" :style="contentStyles">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
-                                <Icon type="ios-close-empty"></Icon>
+                                <Icon type="ios-close"></Icon>
                             </slot>
                         </a>
-                        <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-header']"
+                             @mousedown="handleMoveStart"
+                             v-if="showHead"
+                        ><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">
@@ -34,6 +37,8 @@
     import Emitter from '../../mixins/emitter';
     import ScrollbarMixins from './mixins-scrollbar';
 
+    import { on, off } from '../../utils/dom';
+
     const prefixCls = 'ivu-modal';
 
     export default {
@@ -93,8 +98,22 @@
                 }
             },
             transfer: {
+                type: Boolean,
+                default () {
+                    return this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
+                }
+            },
+            fullscreen: {
+                type: Boolean,
+                default: false
+            },
+            mask: {
                 type: Boolean,
                 default: true
+            },
+            dragable: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -103,7 +122,14 @@
                 wrapShow: false,
                 showHead: true,
                 buttonLoading: false,
-                visible: this.value
+                visible: this.value,
+                dragData: {
+                    x: null,
+                    y: null,
+                    dragX: null,
+                    dragY: null,
+                    dragging: false
+                }
             };
         },
         computed: {
@@ -112,7 +138,8 @@
                     `${prefixCls}-wrap`,
                     {
                         [`${prefixCls}-hidden`]: !this.wrapShow,
-                        [`${this.className}`]: !!this.className
+                        [`${this.className}`]: !!this.className,
+                        [`${prefixCls}-no-mask`]: !this.showMask
                     }
                 ];
             },
@@ -120,13 +147,32 @@
                 return `${prefixCls}-mask`;
             },
             classes () {
-                return `${prefixCls}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-fullscreen`]: this.fullscreen,
+                        [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
+                        [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
+                    }
+                ];
+            },
+            contentClasses () {
+                return [
+                    `${prefixCls}-content`,
+                    {
+                        [`${prefixCls}-content-no-mask`]: !this.showMask,
+                        [`${prefixCls}-content-drag`]: this.dragable,
+                        [`${prefixCls}-content-dragging`]: this.dragable && this.dragData.dragging
+                    }
+                ];
             },
             mainStyles () {
                 let style = {};
 
                 const width = parseInt(this.width);
-                const styleWidth = {
+                const styleWidth = this.dragData.x !== null ? {
+                    top: 0
+                } : {
                     width: width <= 100 ? `${width}%` : `${width}px`
                 };
 
@@ -136,6 +182,22 @@
 
                 return style;
             },
+            contentStyles () {
+                let style = {};
+
+                if (this.dragable) {
+                    if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
+                    if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
+                    const width = parseInt(this.width);
+                    const styleWidth = {
+                        width: width <= 100 ? `${width}%` : `${width}px`
+                    };
+
+                    Object.assign(style, styleWidth);
+                }
+
+                return style;
+            },
             localeOkText () {
                 if (this.okText === undefined) {
                     return this.t('i.modal.okText');
@@ -149,6 +211,9 @@
                 } else {
                     return this.cancelText;
                 }
+            },
+            showMask () {
+                return this.dragable ? false : this.mask;
             }
         },
         methods: {
@@ -157,15 +222,15 @@
                 this.$emit('input', false);
                 this.$emit('on-cancel');
             },
-            mask () {
-                if (this.maskClosable) {
+            handleMask () {
+                if (this.maskClosable && this.showMask) {
                     this.close();
                 }
             },
             handleWrapClick (event) {
                 // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
                 const className = event.target.getAttribute('class');
-                if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
+                if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
             },
             cancel () {
                 this.close();
@@ -188,6 +253,51 @@
             },
             animationFinish() {
                 this.$emit('on-hidden');
+            },
+            handleMoveStart (event) {
+                if (!this.dragable) return false;
+
+                const $content = this.$refs.content;
+                const rect = $content.getBoundingClientRect();
+                this.dragData.x = rect.x;
+                this.dragData.y = rect.y;
+
+                const distance = {
+                    x: event.clientX,
+                    y: event.clientY
+                };
+
+                this.dragData.dragX = distance.x;
+                this.dragData.dragY = distance.y;
+
+                this.dragData.dragging = true;
+
+                on(window, 'mousemove', this.handleMoveMove);
+                on(window, 'mouseup', this.handleMoveEnd);
+            },
+            handleMoveMove (event) {
+                if (!this.dragData.dragging) return false;
+
+                const distance = {
+                    x: event.clientX,
+                    y: event.clientY
+                };
+
+                const diff_distance = {
+                    x: distance.x - this.dragData.dragX,
+                    y: distance.y - this.dragData.dragY
+                };
+
+                this.dragData.x += diff_distance.x;
+                this.dragData.y += diff_distance.y;
+
+                this.dragData.dragX = distance.x;
+                this.dragData.dragY = distance.y;
+            },
+            handleMoveEnd () {
+                this.dragData.dragging = false;
+                off(window, 'mousemove', this.handleMoveMove);
+                off(window, 'mouseup', this.handleMoveEnd);
             }
         },
         mounted () {

src/components/notice/index.js

@@ -10,10 +10,10 @@ let noticeInstance;
 let name = 1;
 
 const iconTypes = {
-    'info': 'information-circled',
-    'success': 'checkmark-circled',
-    'warning': 'android-alert',
-    'error': 'close-circled'
+    'info': 'ios-information-circle',
+    'success': 'ios-checkmark-circle',
+    'warning': 'ios-alert',
+    'error': 'ios-close-circle'
 };
 
 function getNoticeInstance () {
@@ -57,11 +57,12 @@ function notice (type, options) {
         `;
     } else {
         const iconType = iconTypes[type];
+        const outlineIcon = with_desc === '' ? '' : '-outline';
         withIcon = true;
         content = `
             <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>
+                    <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${outlineIcon}"></i>
                 </span>
                 <div class="${prefixCls}-title">${title}</div>
                 <div class="${prefixCls}-desc">${desc}</div>

src/components/page/page.vue

@@ -4,7 +4,7 @@
             :title="t('i.page.prev')"
             :class="prevClasses"
             @click="prev">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
         </li>
         <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
             <input
@@ -22,7 +22,7 @@
             :title="t('i.page.next')"
             :class="nextClasses"
             @click="next">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
+            <a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
         </li>
     </ul>
     <ul :class="wrapClasses" :style="styles" v-else>
@@ -33,22 +33,24 @@
             :title="t('i.page.prev')"
             :class="prevClasses"
             @click="prev">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
+            <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="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></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="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="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 - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="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 + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
-        <li :title="t('i.page.next5')" v-if="currentPage + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></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="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="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
         <li
             :title="t('i.page.next')"
             :class="nextClasses"
             @click="next">
-            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
+            <a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
         </li>
         <Options
             :show-sizer="showSizer"
@@ -104,7 +106,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             size: {
                 validator (value) {
@@ -132,6 +136,14 @@
             },
             styles: {
                 type: Object
+            },
+            prevText: {
+                type: String,
+                default: ''
+            },
+            nextText: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -188,7 +200,8 @@
                 return [
                     `${prefixCls}-prev`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === 1
+                        [`${prefixCls}-disabled`]: this.currentPage === 1,
+                        [`${prefixCls}-custom-text`]: this.prevText !== ''
                     }
                 ];
             },
@@ -196,7 +209,8 @@
                 return [
                     `${prefixCls}-next`,
                     {
-                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages
+                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages,
+                        [`${prefixCls}-custom-text`]: this.nextText !== ''
                     }
                 ];
             },

src/components/poptip/poptip.vue

@@ -27,7 +27,7 @@
                     <div :class="[prefixCls + '-arrow']"></div>
                     <div :class="[prefixCls + '-inner']" v-if="confirm">
                         <div :class="[prefixCls + '-body']">
-                            <i class="ivu-icon ivu-icon-help-circled"></i>
+                            <i class="ivu-icon ivu-icon-ios-help-circle"></i>
                             <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
                         </div>
                         <div :class="[prefixCls + '-footer']">
@@ -36,9 +36,9 @@
                         </div>
                     </div>
                     <div :class="[prefixCls + '-inner']" v-if="!confirm">
-                        <div :class="[prefixCls + '-title']" v-if="showTitle" ref="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"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
+                        <div :class="[prefixCls + '-title']" :style="contentPaddingStyle" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
+                        <div :class="[prefixCls + '-body']" :style="contentPaddingStyle">
+                            <div :class="contentClasses"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
                         </div>
                     </div>
                 </div>
@@ -96,10 +96,20 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             popperClass: {
                 type: String
+            },
+            wordWrap: {
+                type: Boolean,
+                default: false
+            },
+            // default by css: 8px 16px
+            padding: {
+                type: String
             }
         },
         data () {
@@ -149,6 +159,19 @@
                 } else {
                     return this.cancelText;
                 }
+            },
+            contentClasses () {
+                return [
+                    `${prefixCls}-body-content`,
+                    {
+                        [`${prefixCls}-body-content-word-wrap`]: this.wordWrap
+                    }
+                ];
+            },
+            contentPaddingStyle () {
+                const styles = {};
+                if (this.padding !== '') styles['padding'] = this.padding;
+                return styles;
             }
         },
         methods: {

src/components/progress/progress.vue

@@ -2,7 +2,7 @@
     <div :class="wrapClasses">
         <div :class="outerClasses">
             <div :class="innerClasses">
-                <div :class="bgClasses" :style="bgStyle"></div>
+                <div :class="bgClasses" :style="bgStyle"></div><div :class="successBgClasses" :style="successBgStyle"></div>
             </div>
         </div>
         <span v-if="!hideInfo" :class="textClasses">
@@ -30,6 +30,10 @@
                 type: Number,
                 default: 0
             },
+            successPercent: {
+                type: Number,
+                default: 0
+            },
             status: {
                 validator (value) {
                     return oneOf(value, ['normal', 'active', 'wrong', 'success']);
@@ -62,10 +66,10 @@
                 let type = '';
                 switch (this.currentStatus) {
                     case 'wrong':
-                        type = 'ios-close';
+                        type = 'ios-close-circle';
                         break;
                     case 'success':
-                        type = 'ios-checkmark';
+                        type = 'ios-checkmark-circle';
                         break;
                 }
 
@@ -80,6 +84,15 @@
                     height: `${this.strokeWidth}px`
                 };
             },
+            successBgStyle () {
+                return this.vertical ? {
+                    height: `${this.successPercent}%`,
+                    width: `${this.strokeWidth}px`
+                } : {
+                    width: `${this.successPercent}%`,
+                    height: `${this.strokeWidth}px`
+                };
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}`,
@@ -105,6 +118,9 @@
             },
             bgClasses () {
                 return `${prefixCls}-bg`;
+            },
+            successBgClasses () {
+                return `${prefixCls}-success-bg`;
             }
         },
         created () {

src/components/radio/radio-group.vue

@@ -24,6 +24,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             type: {

src/components/radio/radio.vue

@@ -46,6 +46,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             name: {

src/components/rate/rate.vue

@@ -5,8 +5,21 @@
             v-for="item in count"
             :class="starCls(item)"
             @mousemove="handleMousemove(item, $event)"
+            :key="item"
             @click="handleClick(item)">
-            <span :class="[prefixCls + '-star-content']" type="half"></span>
+            <template v-if="!showCharacter">
+                <span :class="[prefixCls + '-star-content']" type="half"></span>
+            </template>
+            <template v-else>
+                <span :class="[prefixCls + '-star-first']" type="half">
+                    <template v-if="character !== ''">{{ character }}</template>
+                    <i v-else :class="iconClasses" type="half"></i>
+                </span>
+                <span :class="[prefixCls + '-star-second']">
+                    <template v-if="character !== ''">{{ character }}</template>
+                    <i v-else :class="iconClasses"></i>
+                </span>
+            </template>
         </div>
         <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
             <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot>
@@ -17,11 +30,14 @@
     import Locale from '../../mixins/locale';
     import Emitter from '../../mixins/emitter';
 
+    import Icon from '../icon/icon.vue';
+
     const prefixCls = 'ivu-rate';
 
     export default {
         name: 'Rate',
         mixins: [ Locale, Emitter ],
+        components: { Icon },
         props: {
             count: {
                 type: Number,
@@ -49,6 +65,18 @@
             clearable: {
                 type: Boolean,
                 default: false
+            },
+            character: {
+                type: String,
+                default: ''
+            },
+            icon: {
+                type: String,
+                default: ''
+            },
+            customIcon: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -68,6 +96,18 @@
                         [`${prefixCls}-disabled`]: this.disabled
                     }
                 ];
+            },
+            iconClasses () {
+                return [
+                    'ivu-icon',
+                    {
+                        [`ivu-icon-${this.icon}`]: this.icon !== '',
+                        [`${this.customIcon}`]: this.customIcon !== '',
+                    }
+                ];
+            },
+            showCharacter () {
+                return this.character !== '' || this.icon !== '' || this.customIcon !== '';
             }
         },
         watch: {
@@ -95,8 +135,9 @@
                 }
 
                 return [
-                    `${prefixCls}-star`,
-                    {
+                    {   
+                        [`${prefixCls}-star`]: !this.showCharacter,
+                        [`${prefixCls}-star-chart`]: this.showCharacter,
                         [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
                         [`${prefixCls}-star-half`]: isLast && this.isHalf,
                         [`${prefixCls}-star-zero`]: !full

src/components/scroll/loading-component.vue

@@ -2,7 +2,7 @@
     <div :class="wrapperClasses">
         <div :class="spinnerClasses">
             <Spin fix>
-                <Icon type="load-c" size="18" :class="iconClasses"></Icon>
+                <Icon type="ios-loading" size="18" :class="iconClasses"></Icon>
                 <div v-if="text" :class="textClasses">{{text}}</div>
             </Spin>
 

src/components/select/select-head.vue

@@ -2,7 +2,7 @@
     <div @click="onHeaderClick">
         <div class="ivu-tag ivu-tag-checked" v-for="item in selectedMultiple">
             <span class="ivu-tag-text">{{ item.label }}</span>
-            <Icon type="ios-close-empty" @click.native.stop="removeTag(item)"></Icon>
+            <Icon type="ios-close" @click.native.stop="removeTag(item)"></Icon>
         </div>
         <span
             :class="singleDisplayClasses"
@@ -25,8 +25,8 @@
             @blur="onInputFocus"
 
             ref="input">
-        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="onClear"></Icon>
-        <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
+        <Icon type="ios-close-circle" :class="[prefixCls + '-arrow']" v-if="resetSelect" @click.native.stop="onClear"></Icon>
+        <Icon type="ios-arrow-down" :class="[prefixCls + '-arrow']" v-if="!resetSelect && !remote && !disabled"></Icon>
     </div>
 </template>
 <script>

src/components/select/select.vue

@@ -71,7 +71,6 @@
     </div>
 </template>
 <script>
-    import Icon from '../icon';
     import Drop from './dropdown.vue';
     import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
@@ -141,7 +140,7 @@
     export default {
         name: 'iSelect',
         mixins: [ Emitter, Locale ],
-        components: { FunctionalOptions, Drop, Icon, SelectHead },
+        components: { FunctionalOptions, Drop, SelectHead },
         directives: { clickOutside, TransferDom },
         props: {
             value: {
@@ -188,6 +187,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             labelInValue: {
@@ -205,7 +207,9 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
             },
             // Use for AutoComplete
             autoComplete: {

src/components/spin/spin.vue

@@ -20,7 +20,10 @@
         props: {
             size: {
                 validator (value) {
-                    return oneOf(value, ['small', 'large']);
+                    return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             fix: {

src/components/split/index.js

@@ -0,0 +1,2 @@
+import Split from './split.vue';
+export default Split;

src/components/split/split.vue

@@ -0,0 +1,155 @@
+<template>
+  <div ref="outerWrapper" :class="wrapperClasses">
+    <div v-if="isHorizontal" :class="`${prefix}-horizontal`">
+      <div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
+      <div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
+        <slot name="trigger">
+          <trigger mode="vertical"/>
+        </slot>
+      </div>
+      <div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
+    </div>
+    <div v-else :class="`${prefix}-vertical`">
+      <div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
+     <div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
+        <slot name="trigger">
+          <trigger mode="horizontal"/>
+        </slot>
+      </div>
+      <div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { oneOf } from '../../utils/assist';
+import { on, off } from '../../utils/dom';
+import Trigger from './trigger.vue';
+export default {
+    name: 'Split',
+    components: {
+        Trigger
+    },
+    props: {
+        value: {
+            type: [Number, String],
+            default: 0.5
+        },
+        mode: {
+            validator (value) {
+                return oneOf(value, ['horizontal', 'vertical']);
+            },
+            default: 'horizontal'
+        },
+        min: {
+            type: [Number, String],
+            default: '40px'
+        },
+        max: {
+            type: [Number, String],
+            default: '40px'
+        }
+    },
+  /**
+   * Events
+   * @on-move-start
+   * @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
+   * @on-move-end
+   */
+    data () {
+        return {
+            prefix: 'ivu-split',
+            offset: 0,
+            oldOffset: 0,
+            isMoving: false
+        };
+    },
+    computed: {
+        wrapperClasses () {
+            return [
+                `${this.prefix}-wrapper`,
+                this.isMoving ? 'no-select' : ''
+            ];
+        },
+        isHorizontal () {
+            return this.mode === 'horizontal';
+        },
+        anotherOffset () {
+            return 100 - this.offset;
+        },
+        valueIsPx () {
+            return typeof this.value === 'string';
+        },
+        offsetSize () {
+            return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
+        },
+        computedMin () {
+            return this.getComputedThresholdValue('min');
+        },
+        computedMax () {
+            return this.getComputedThresholdValue('max');
+        }
+    },
+    methods: {
+        px2percent (numerator, denominator) {
+            return parseFloat(numerator) / parseFloat(denominator);
+        },
+        getComputedThresholdValue (type) {
+            let size = this.$refs.outerWrapper[this.offsetSize];
+            if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type];
+            else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type];
+        },
+        getMin (value1, value2) {
+            if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`;
+            else return Math.min(value1, value2);
+        },
+        getMax (value1, value2) {
+            if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`;
+            else return Math.max(value1, value2);
+        },
+        getAnotherOffset (value) {
+            let res = 0;
+            if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`;
+            else res = 1 - value;
+            return res;
+        },
+        handleMove (e) {
+            let pageOffset = this.isHorizontal ? e.pageX : e.pageY;
+            let offset = pageOffset - this.initOffset;
+            let outerWidth = this.$refs.outerWrapper[this.offsetSize];
+            let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth));
+            let anotherValue = this.getAnotherOffset(value);
+            if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin);
+            if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax));
+            e.atMin = this.value === this.computedMin;
+            e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5);
+            this.$emit('input', value);
+            this.$emit('on-moving', e);
+        },
+        handleUp () {
+            this.isMoving = false;
+            off(document, 'mousemove', this.handleMove);
+            off(document, 'mouseup', this.handleUp);
+            this.$emit('on-move-end');
+        },
+        handleMousedown (e) {
+            this.initOffset = this.isHorizontal ? e.pageX : e.pageY;
+            this.oldOffset = this.value;
+            this.isMoving = true;
+            on(document, 'mousemove', this.handleMove);
+            on(document, 'mouseup', this.handleUp);
+            this.$emit('on-move-start');
+        }
+    },
+    watch: {
+        value () {
+            this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+        }
+    },
+    mounted () {
+        this.$nextTick(() => {
+            this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100;
+        });
+    }
+};
+</script>

src/components/split/trigger.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="classes">
+    <div :class="barConClasses">
+      <i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'Trigger',
+    props: {
+        mode: String
+    },
+    data () {
+        return {
+            prefix: 'ivu-split-trigger',
+            initOffset: 0
+        };
+    },
+    computed: {
+        isVertical () {
+            return this.mode === 'vertical';
+        },
+        classes () {
+            return [
+                this.prefix,
+                this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
+            ];
+        },
+        barConClasses () {
+            return [
+                `${this.prefix}-bar-con`,
+                this.isVertical ? 'vertical' : 'horizontal'
+            ];
+        }
+    }
+};
+</script>

src/components/steps/step.vue

@@ -69,9 +69,9 @@
                     icon = this.icon;
                 } else {
                     if (this.currentStatus == 'finish') {
-                        icon = 'ios-checkmark-empty';
+                        icon = 'ios-checkmark';
                     } else if (this.currentStatus == 'error') {
-                        icon = 'ios-close-empty';
+                        icon = 'ios-close';
                     }
                 }
 

src/components/switch/switch.vue

@@ -41,10 +41,17 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['large', 'small', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             name: {
                 type: String
+            },
+            loading: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -59,7 +66,8 @@
                     {
                         [`${prefixCls}-checked`]: this.currentValue === this.trueValue,
                         [`${prefixCls}-disabled`]: this.disabled,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-loading`]: this.loading,
                     }
                 ];
             },
@@ -70,7 +78,7 @@
         methods: {
             toggle (event) {
                 event.preventDefault();
-                if (this.disabled) {
+                if (this.disabled || this.loading) {
                     return false;
                 }
 

src/components/table/cell.vue

@@ -1,14 +1,21 @@
 <template>
     <div :class="classes" ref="cell">
-        <template v-if="renderType === 'index'"><span>{{naturalIndex + 1}}</span></template>
+        <template v-if="renderType === 'index'"><span>{{ column.indexMethod ? column.indexMethod(row) : (naturalIndex + 1) }}</span></template>
         <template v-if="renderType === 'selection'">
             <Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
-        <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
+        <template v-if="renderType === 'normal'">
+            <template v-if="column.tooltip">
+                <Tooltip transfer :content="row[column.key]" :disabled="!showTooltip" :max-width="300" class="ivu-table-cell-tooltip">
+                    <span ref="content" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut" class="ivu-table-cell-tooltip-content">{{ row[column.key] }}</span>
+                </Tooltip>
+            </template>
+            <span v-else>{{row[column.key]}}</span>
+        </template>
         <template v-if="renderType === 'expand' && !row._disableExpand">
             <div :class="expandCls" @click="toggleExpand">
-                <Icon type="ios-arrow-right"></Icon>
+                <Icon type="ios-arrow-forward"></Icon>
             </div>
         </template>
         <Cell
@@ -23,10 +30,11 @@
     import Cell 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 },
+        components: { Icon, Checkbox, Cell, Tooltip },
         props: {
             prefixCls: String,
             row: Object,
@@ -45,7 +53,8 @@
             return {
                 renderType: '',
                 uid: -1,
-                context: this.$parent.$parent.$parent.currentContext
+                context: this.$parent.$parent.$parent.currentContext,
+                showTooltip: false,  // 鼠标滑过overflow文本时，再检查是否需要显示
             };
         },
         computed: {
@@ -55,7 +64,8 @@
                     {
                         [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
                         [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
-                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
+                        [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand',
+                        [`${this.prefixCls}-cell-with-selection`]: this.renderType === 'selection'
                     }
                 ];
             },
@@ -77,6 +87,13 @@
             },
             handleClick () {
                 // 放置 Checkbox 冒泡
+            },
+            handleTooltipIn () {
+                const $content = this.$refs.content;
+                this.showTooltip = $content.scrollWidth > $content.offsetWidth;
+            },
+            handleTooltipOut () {
+                this.showTooltip = false;
             }
         },
         created () {

src/components/table/table-head.vue

@@ -21,8 +21,8 @@
                             <span v-if="!column.renderHeader" :class="{[prefixCls + '-cell-sort']: column.sortable}" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
                             <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
-                                <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
-                                <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
+                                <i class="ivu-icon ivu-icon-md-arrow-dropup" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
+                                <i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
                             </span>
                             <Poptip
                                 v-if="isPopperShow(column)"
@@ -32,7 +32,7 @@
                                 transfer
                                 @on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
                                 <span :class="[prefixCls + '-filter']">
-                                    <i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
+                                    <i class="ivu-icon ivu-icon-ios-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
                                 </span>
 
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
@@ -128,7 +128,8 @@
                 return [
                     `${this.prefixCls}-cell`,
                     {
-                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
+                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'),
+                        [`${this.prefixCls}-cell-with-selection`]: column.type === 'selection'
                     }
                 ];
             },

src/components/table/table.vue

@@ -130,6 +130,9 @@
             size: {
                 validator (value) {
                     return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
             },
             width: {

src/components/tabs/tabs.vue

@@ -19,7 +19,7 @@
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
                                 <Render v-if="item.labelType === 'function'" :render="item.label"></Render>
                                 <template v-else>{{ item.label }}</template>
-                                <Icon v-if="showClose(item)" type="ios-close-empty" @click.native.stop="handleRemove(index)"></Icon>
+                                <Icon v-if="showClose(item)" type="ios-close" @click.native.stop="handleRemove(index)"></Icon>
                             </div>
                         </div>
                     </div>

src/components/tag/tag.vue

@@ -3,20 +3,22 @@
         <div :class="classes" @click.stop="check" :style="wraperStyles">
             <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
             <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
-            <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
+            <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
         </div>
     </transition>
     <div v-else :class="classes" @click.stop="check" :style="wraperStyles">
         <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
         <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
-        <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
+        <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
     </div>
 </template>
 <script>
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
     const prefixCls = 'ivu-tag';
-    const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
+    const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
+    const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
+
     export default {
         name: 'Tag',
         components: { Icon },
@@ -74,7 +76,7 @@
                 return [
                     `${prefixCls}-text`,
                     this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
-                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
+                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
                 ];
             },
             dotClasses () {

src/components/time/time.js

@@ -65,7 +65,7 @@ export const getRelativeTime = timeStamp => {
     let resStr = '';
     const dirStr = IS_EARLY ? '前' : '后';
     // 少于等于59秒
-    if (diff <= 59) resStr = diff + '秒' + dirStr;
+    if (diff <= 59) resStr = parseInt(diff) + '秒' + dirStr;
     // 多于59秒，少于等于59分钟59秒
     else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr;
     // 多于59分钟59秒，少于等于23小时59分钟59秒

src/components/tooltip/tooltip.vue

@@ -5,7 +5,7 @@
         </div>
         <transition name="fade">
             <div
-                :class="[prefixCls + '-popper']"
+                :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
                 ref="popper"
                 v-show="!disabled && (visible || always)"
                 @mouseenter="handleShowPopper"
@@ -14,7 +14,7 @@
                 v-transfer-dom>
                 <div :class="[prefixCls + '-content']">
                     <div :class="[prefixCls + '-arrow']"></div>
-                    <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
+                    <div :class="innerClasses" :style="innerStyles"><slot name="content">{{ content }}</slot></div>
                 </div>
             </div>
         </transition>
@@ -60,7 +60,18 @@
             },
             transfer: {
                 type: Boolean,
-                default: false
+                default () {
+                    return this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
+                }
+            },
+            theme: {
+                validator (value) {
+                    return oneOf(value, ['dark', 'light']);
+                },
+                default: 'dark'
+            },
+            maxWidth: {
+                type: [String, Number]
             }
         },
         data () {
@@ -68,6 +79,21 @@
                 prefixCls: prefixCls
             };
         },
+        computed: {
+            innerStyles () {
+                const styles = {};
+                if (this.maxWidth) styles['max-width'] = `${this.maxWidth}px`;
+                return styles;
+            },
+            innerClasses () {
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-inner-with-width`]: !!this.maxWidth
+                    }
+                ];
+            }
+        },
         watch: {
             content () {
                 this.updatePopper();

src/components/transfer/operation.vue

@@ -1,10 +1,10 @@
 <template>
     <div :class="prefixCls + '-operation'">
         <i-button type="primary" size="small" :disabled="!rightActive" @click.native="moveToLeft">
-            <Icon type="ios-arrow-left"></Icon> {{ operations[0] }}
+            <Icon type="ios-arrow-back"></Icon> <span>{{ operations[0] }}</span>
         </i-button>
         <i-button type="primary" size="small" :disabled="!leftActive" @click.native="moveToRight">
-            {{ operations[1] }} <Icon type="ios-arrow-right"></Icon>
+            <span>{{ operations[1] }}</span> <Icon type="ios-arrow-forward"></Icon>
         </i-button>
     </div>
 </template>

src/components/transfer/search.vue

@@ -34,7 +34,7 @@
         },
         computed: {
             icon () {
-                return this.query === '' ? 'ios-search' : 'ios-close';
+                return this.query === '' ? 'ios-search' : 'ios-close-circle';
             }
         },
         methods: {

src/components/tree/node.vue

@@ -3,8 +3,8 @@
         <ul :class="classes">
             <li>
                 <span :class="arrowClasses" @click="handleExpand">
-                    <Icon v-if="showArrow" type="arrow-right-b"></Icon>
-                    <Icon v-if="showLoading" type="load-c" class="ivu-load-loop"></Icon>
+                    <Icon v-if="showArrow" type="md-arrow-dropright"></Icon>
+                    <Icon v-if="showLoading" type="ios-loading" class="ivu-load-loop"></Icon>
                 </span>
                 <Checkbox
                         v-if="showCheckbox"

src/components/upload/upload-list.vue

@@ -8,7 +8,7 @@
                 <Icon :type="format(file)"></Icon> {{ file.name }}
             </span>
             <Icon
-                type="ios-close-empty"
+                type="ios-close"
                 :class="[prefixCls + '-list-remove']"
                 v-show="file.status === 'finished'"
                 @click.native="handleRemove(file)"></Icon>
@@ -63,10 +63,10 @@
             },
             format (file) {
                 const format = file.name.split('.').pop().toLocaleLowerCase() || '';
-                let type = 'document';
+                let type = 'ios-document-outline';
 
                 if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
-                    type = 'image';
+                    type = 'ios-image';
                 }
                 if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
                     type = 'ios-film';
@@ -75,10 +75,10 @@
                     type = 'ios-musical-notes';
                 }
                 if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
-                    type = 'document-text';
+                    type = 'md-document';
                 }
                 if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
-                    type = 'stats-bars';
+                    type = 'ios-stats';
                 }
                 if (['keynote','ppt','pptx'].indexOf(format) > -1) {
                     type = 'ios-videocam';

src/index.js

@@ -11,12 +11,14 @@ import Button from './components/button';
 import Card from './components/card';
 import Carousel from './components/carousel';
 import Cascader from './components/cascader';
+import Cell from './components/cell';
 import Checkbox from './components/checkbox';
 import Circle from './components/circle';
 import Collapse from './components/collapse';
 import ColorPicker from './components/color-picker';
 import Content from './components/content';
 import DatePicker from './components/date-picker';
+import Divider from './components/divider';
 import Dropdown from './components/dropdown';
 import Footer from './components/footer';
 import Form from './components/form';
@@ -25,6 +27,7 @@ import Icon from './components/icon';
 import Input from './components/input';
 import InputNumber from './components/input-number';
 import Scroll from './components/scroll';
+import Split from './components/split';
 import Layout from './components/layout';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
@@ -72,6 +75,8 @@ const components = {
     Carousel,
     CarouselItem: Carousel.Item,
     Cascader,
+    Cell,
+    CellGroup: Cell.Group,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
     Col,
@@ -79,6 +84,7 @@ const components = {
     ColorPicker,
     Content: Content,
     DatePicker,
+    Divider,
     Dropdown,
     DropdownItem: Dropdown.Item,
     DropdownMenu: Dropdown.Menu,
@@ -91,6 +97,7 @@ const components = {
     InputNumber,
     Scroll,
     Sider: Sider,
+    Split,
     Submenu: Menu.Sub,
     Layout: Layout,
     LoadingBar,
@@ -157,6 +164,11 @@ const install = function(Vue, opts = {}) {
         Vue.component(key, iview[key]);
     });
 
+    Vue.prototype.$IVIEW = {
+        size: opts.size || '',
+        transfer: 'transfer' in opts ? opts.transfer : ''
+    };
+
     Vue.prototype.$Loading = LoadingBar;
     Vue.prototype.$Message = Message;
     Vue.prototype.$Modal = Modal;

src/locale/lang/mn-MN.js

@@ -0,0 +1,105 @@
+import setLang from '../lang';
+
+const lang = {
+    i: {
+        locale: 'mn-MN',
+        select: {
+            placeholder: 'Сонгох',
+            noMatch: 'Таарах өгөгдөл байхгүй байна',
+            loading: 'Ачааллаж байна'
+        },
+        table: {
+            noDataText: 'Өгөдөл алга',
+            noFilteredDataText: 'No filter data',
+            confirmFilter: 'Батлах',
+            resetFilter: 'Шинээр тохируулах',
+            clearFilter: 'Бүгд'
+        },
+        datepicker: {
+            selectDate: 'Огноо сонгох',
+            selectTime: 'Цаг сонгох',
+            startTime: 'Эхлэх Цаг',
+            endTime: 'Дуусах Цаг',
+            clear: 'Цэвэрлэх',
+            ok: 'OK',
+            datePanelLabel: '[mmmm] [yyyy]',
+            month: 'Сар',
+            month1: '1-р сар',
+            month2: '2-р сар',
+            month3: '3-р сар',
+            month4: '4-р сар',
+            month5: '5-р сар',
+            month6: '6-р сар',
+            month7: '7-р сар',
+            month8: '8-р сар',
+            month9: '9-р сар',
+            month10: '10-р сар',
+            month11: '11-р сар',
+            month12: '12-р сар',
+            year: 'Жил',
+            weekStartDay: '0',
+            weeks: {
+                sun: 'Ням',
+                mon: 'Дав',
+                tue: 'Мяг',
+                wed: 'Лха',
+                thu: 'Пүр',
+                fri: 'Баа',
+                sat: 'Бяа'
+            },
+            months: {
+                m1: '1-р сар',
+                m2: '2-р сар',
+                m3: '3-р сар',
+                m4: '4-р сар',
+                m5: '5-р сар',
+                m6: '6-р сар',
+                m7: '7-р сар',
+                m8: '8-р сар',
+                m9: '9-р сар',
+                m10: '10-р сар',
+                m11: '11-р сар',
+                m12: '12-р сар'
+            }
+        },
+        transfer: {
+            titles: {
+                source: 'Эх сурвалж',
+                target: 'Оноох бай'
+            },
+            filterPlaceholder: 'Эндээс хайх',
+            notFoundText: 'Олдсонгүй'
+        },
+        modal: {
+            okText: 'OK',
+            cancelText: 'Болих'
+        },
+        poptip: {
+            okText: 'OK',
+            cancelText: 'Болих'
+        },
+        page: {
+            prev: 'Өмнөх хуудас',
+            next: 'Дараах хуудас',
+            total: 'Нийт',
+            item: 'зүйл',
+            items: 'зүйлүүд',
+            prev5: 'Өмнөх 5 хуудас',
+            next5: 'Дараагийн 5 хуудас',
+            page: '/хуудсанд',
+            goto: 'Очих хуудас',
+            p: ''
+        },
+        rate: {
+            star: 'Од',
+            stars: 'Одууд'
+        },
+        tree: {
+            emptyText: 'Өгөгдөл алга'
+        }
+    }
+};
+
+setLang(lang);
+
+export default lang;

src/mixins/link.js

@@ -0,0 +1,46 @@
+import { oneOf } from '../utils/assist';
+
+export default {
+    props: {
+        to: {
+            type: [Object, String]
+        },
+        replace: {
+            type: Boolean,
+            default: false
+        },
+        target: {
+            type: String,
+            validator (value) {
+                return oneOf(value, ['_blank', '_self', '_parent', '_top']);
+            },
+            default: '_self'
+        }
+    },
+    computed: {
+        linkUrl () {
+            const type = typeof this.to;
+            return type === 'string' ? this.to : null;
+        }
+    },
+    methods: {
+        handleClick () {
+            const isRoute = this.$router;
+            if (isRoute) {
+                this.replace ? this.$router.replace(this.to) : this.$router.push(this.to);
+            } else {
+                window.location.href = this.to;
+            }
+        },
+        handleCheckClick (event) {
+            if (this.to) {
+                if (this.target === '_blank') {
+                    return false;
+                } else {
+                    event.preventDefault();
+                    this.handleClick();
+                }
+            }
+        }
+    }
+};

src/styles/color/bezierEasing.less

@@ -0,0 +1,110 @@
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+.bezierEasingMixin() {
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+  // less 3 requires a return
+  return '';
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.bezierEasingMixin();

src/styles/color/colorPalette.less

@@ -0,0 +1,75 @@
+/* stylelint-disable no-duplicate-selectors */
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+.colorPaletteMixin() {
+@functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 16;
+  var saturationStep2 = 5;
+  var brightnessStep1 = 5;
+  var brightnessStep2 = 15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
+    } else if (i == darkColorCount) {
+      saturation = Math.round(hsv.s * 100) + saturationStep;
+    } else {
+      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+    }
+    if (saturation > 100) {
+      saturation = 100;
+    }
+    if (isLight && i === lightColorCount && saturation > 10) {
+      saturation = 10;
+    }
+    if (saturation < 6) {
+      saturation = 6;
+    }
+    return Math.round(saturation);
+  };
+  var getValue = function(hsv, i, isLight) {
+    if (isLight) {
+      return Math.round(hsv.v * 100) + brightnessStep1 * i;
+    }
+    return Math.round(hsv.v * 100) - brightnessStep2 * i;
+  };
+
+  this.colorPalette = function(color, index) {
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.colorPaletteMixin();

src/styles/color/colors.less

@@ -0,0 +1,146 @@
+@import 'colorPalette';
+
+// color palettes
+@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
+@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
+@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
+@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
+@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
+@blue-6: #1890ff;
+@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
+@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
+@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
+@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
+
+@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
+@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
+@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
+@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
+@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
+@purple-6: #722ed1;
+@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
+@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
+@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
+@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
+
+@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
+@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
+@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
+@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
+@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
+@cyan-6: #13c2c2;
+@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
+@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
+@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
+@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
+
+@green-1: color(~`colorPalette("@{green-6}", 1)`);
+@green-2: color(~`colorPalette("@{green-6}", 2)`);
+@green-3: color(~`colorPalette("@{green-6}", 3)`);
+@green-4: color(~`colorPalette("@{green-6}", 4)`);
+@green-5: color(~`colorPalette("@{green-6}", 5)`);
+@green-6: #52c41a;
+@green-7: color(~`colorPalette("@{green-6}", 7)`);
+@green-8: color(~`colorPalette("@{green-6}", 8)`);
+@green-9: color(~`colorPalette("@{green-6}", 9)`);
+@green-10: color(~`colorPalette("@{green-6}", 10)`);
+
+@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
+@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
+@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
+@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
+@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
+@magenta-6: #eb2f96;
+@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
+@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
+@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
+@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
+
+// alias of magenta
+@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
+@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
+@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
+@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
+@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
+@pink-6: #eb2f96;
+@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
+@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
+@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
+@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
+
+@red-1: color(~`colorPalette("@{red-6}", 1)`);
+@red-2: color(~`colorPalette("@{red-6}", 2)`);
+@red-3: color(~`colorPalette("@{red-6}", 3)`);
+@red-4: color(~`colorPalette("@{red-6}", 4)`);
+@red-5: color(~`colorPalette("@{red-6}", 5)`);
+@red-6: #f5222d;
+@red-7: color(~`colorPalette("@{red-6}", 7)`);
+@red-8: color(~`colorPalette("@{red-6}", 8)`);
+@red-9: color(~`colorPalette("@{red-6}", 9)`);
+@red-10: color(~`colorPalette("@{red-6}", 10)`);
+
+@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
+@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
+@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
+@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
+@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
+@orange-6: #fa8c16;
+@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
+@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
+@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
+@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
+
+@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
+@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
+@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
+@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
+@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
+@yellow-6: #fadb14;
+@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
+@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
+@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
+@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
+
+@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
+@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
+@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
+@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
+@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
+@volcano-6: #fa541c;
+@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
+@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
+@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
+@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
+
+@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
+@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
+@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
+@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
+@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
+@geekblue-6: #2f54eb;
+@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
+@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
+@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
+@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
+
+@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
+@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
+@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
+@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
+@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
+@lime-6: #a0d911;
+@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
+@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
+@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
+@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
+
+@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
+@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
+@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
+@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
+@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
+@gold-6: #faad14;
+@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
+@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
+@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
+@gold-10: color(~`colorPalette("@{gold-6}", 10)`);

src/styles/common/article.less

@@ -51,7 +51,7 @@
     }
 
     a[target="_blank"]:after{
-        content: "\F220";
+        content: "\F24C";
         font-family: Ionicons;
         color: #aaa;
         margin-left: 3px;

src/styles/common/iconfont/_ionicons-font.less

@@ -3,11 +3,10 @@
 
 @font-face {
  font-family: @ionicons-font-family;
- src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}");
- src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}#iefix") format("embedded-opentype"),
-  url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"),
-  url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"),
-  url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg");
+    src:
+  url("@{ionicons-font-path}/Ionicons.ttf?v=@{ionicons-version}") format("truetype"),
+  url("@{ionicons-font-path}/Ionicons.woff?v=@{ionicons-version}") format("woff"),
+  url("@{ionicons-font-path}/Ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
 }

src/styles/common/iconfont/_ionicons-variables.less

@@ -9,739 +9,5 @@ MIT License: https://github.com/driftyco/ionicons
 
 @ionicons-font-path: "./fonts";
 @ionicons-font-family: "Ionicons";
-@ionicons-version: "2.0.0";
+@ionicons-version: "3.0.0";
 @ionicons-prefix: ivu-icon-;
-
-@ionicon-var-alert: "\f101";
-@ionicon-var-alert-circled: "\f100";
-@ionicon-var-android-add: "\f2c7";
-@ionicon-var-android-add-circle: "\f359";
-@ionicon-var-android-alarm-clock: "\f35a";
-@ionicon-var-android-alert: "\f35b";
-@ionicon-var-android-apps: "\f35c";
-@ionicon-var-android-archive: "\f2c9";
-@ionicon-var-android-arrow-back: "\f2ca";
-@ionicon-var-android-arrow-down: "\f35d";
-@ionicon-var-android-arrow-dropdown: "\f35f";
-@ionicon-var-android-arrow-dropdown-circle: "\f35e";
-@ionicon-var-android-arrow-dropleft: "\f361";
-@ionicon-var-android-arrow-dropleft-circle: "\f360";
-@ionicon-var-android-arrow-dropright: "\f363";
-@ionicon-var-android-arrow-dropright-circle: "\f362";
-@ionicon-var-android-arrow-dropup: "\f365";
-@ionicon-var-android-arrow-dropup-circle: "\f364";
-@ionicon-var-android-arrow-forward: "\f30f";
-@ionicon-var-android-arrow-up: "\f366";
-@ionicon-var-android-attach: "\f367";
-@ionicon-var-android-bar: "\f368";
-@ionicon-var-android-bicycle: "\f369";
-@ionicon-var-android-boat: "\f36a";
-@ionicon-var-android-bookmark: "\f36b";
-@ionicon-var-android-bulb: "\f36c";
-@ionicon-var-android-bus: "\f36d";
-@ionicon-var-android-calendar: "\f2d1";
-@ionicon-var-android-call: "\f2d2";
-@ionicon-var-android-camera: "\f2d3";
-@ionicon-var-android-cancel: "\f36e";
-@ionicon-var-android-car: "\f36f";
-@ionicon-var-android-cart: "\f370";
-@ionicon-var-android-chat: "\f2d4";
-@ionicon-var-android-checkbox: "\f374";
-@ionicon-var-android-checkbox-blank: "\f371";
-@ionicon-var-android-checkbox-outline: "\f373";
-@ionicon-var-android-checkbox-outline-blank: "\f372";
-@ionicon-var-android-checkmark-circle: "\f375";
-@ionicon-var-android-clipboard: "\f376";
-@ionicon-var-android-close: "\f2d7";
-@ionicon-var-android-cloud: "\f37a";
-@ionicon-var-android-cloud-circle: "\f377";
-@ionicon-var-android-cloud-done: "\f378";
-@ionicon-var-android-cloud-outline: "\f379";
-@ionicon-var-android-color-palette: "\f37b";
-@ionicon-var-android-compass: "\f37c";
-@ionicon-var-android-contact: "\f2d8";
-@ionicon-var-android-contacts: "\f2d9";
-@ionicon-var-android-contract: "\f37d";
-@ionicon-var-android-create: "\f37e";
-@ionicon-var-android-delete: "\f37f";
-@ionicon-var-android-desktop: "\f380";
-@ionicon-var-android-document: "\f381";
-@ionicon-var-android-done: "\f383";
-@ionicon-var-android-done-all: "\f382";
-@ionicon-var-android-download: "\f2dd";
-@ionicon-var-android-drafts: "\f384";
-@ionicon-var-android-exit: "\f385";
-@ionicon-var-android-expand: "\f386";
-@ionicon-var-android-favorite: "\f388";
-@ionicon-var-android-favorite-outline: "\f387";
-@ionicon-var-android-film: "\f389";
-@ionicon-var-android-folder: "\f2e0";
-@ionicon-var-android-folder-open: "\f38a";
-@ionicon-var-android-funnel: "\f38b";
-@ionicon-var-android-globe: "\f38c";
-@ionicon-var-android-hand: "\f2e3";
-@ionicon-var-android-hangout: "\f38d";
-@ionicon-var-android-happy: "\f38e";
-@ionicon-var-android-home: "\f38f";
-@ionicon-var-android-image: "\f2e4";
-@ionicon-var-android-laptop: "\f390";
-@ionicon-var-android-list: "\f391";
-@ionicon-var-android-locate: "\f2e9";
-@ionicon-var-android-lock: "\f392";
-@ionicon-var-android-mail: "\f2eb";
-@ionicon-var-android-map: "\f393";
-@ionicon-var-android-menu: "\f394";
-@ionicon-var-android-microphone: "\f2ec";
-@ionicon-var-android-microphone-off: "\f395";
-@ionicon-var-android-more-horizontal: "\f396";
-@ionicon-var-android-more-vertical: "\f397";
-@ionicon-var-android-navigate: "\f398";
-@ionicon-var-android-notifications: "\f39b";
-@ionicon-var-android-notifications-none: "\f399";
-@ionicon-var-android-notifications-off: "\f39a";
-@ionicon-var-android-open: "\f39c";
-@ionicon-var-android-options: "\f39d";
-@ionicon-var-android-people: "\f39e";
-@ionicon-var-android-person: "\f3a0";
-@ionicon-var-android-person-add: "\f39f";
-@ionicon-var-android-phone-landscape: "\f3a1";
-@ionicon-var-android-phone-portrait: "\f3a2";
-@ionicon-var-android-pin: "\f3a3";
-@ionicon-var-android-plane: "\f3a4";
-@ionicon-var-android-playstore: "\f2f0";
-@ionicon-var-android-print: "\f3a5";
-@ionicon-var-android-radio-button-off: "\f3a6";
-@ionicon-var-android-radio-button-on: "\f3a7";
-@ionicon-var-android-refresh: "\f3a8";
-@ionicon-var-android-remove: "\f2f4";
-@ionicon-var-android-remove-circle: "\f3a9";
-@ionicon-var-android-restaurant: "\f3aa";
-@ionicon-var-android-sad: "\f3ab";
-@ionicon-var-android-search: "\f2f5";
-@ionicon-var-android-send: "\f2f6";
-@ionicon-var-android-settings: "\f2f7";
-@ionicon-var-android-share: "\f2f8";
-@ionicon-var-android-share-alt: "\f3ac";
-@ionicon-var-android-star: "\f2fc";
-@ionicon-var-android-star-half: "\f3ad";
-@ionicon-var-android-star-outline: "\f3ae";
-@ionicon-var-android-stopwatch: "\f2fd";
-@ionicon-var-android-subway: "\f3af";
-@ionicon-var-android-sunny: "\f3b0";
-@ionicon-var-android-sync: "\f3b1";
-@ionicon-var-android-textsms: "\f3b2";
-@ionicon-var-android-time: "\f3b3";
-@ionicon-var-android-train: "\f3b4";
-@ionicon-var-android-unlock: "\f3b5";
-@ionicon-var-android-upload: "\f3b6";
-@ionicon-var-android-volume-down: "\f3b7";
-@ionicon-var-android-volume-mute: "\f3b8";
-@ionicon-var-android-volume-off: "\f3b9";
-@ionicon-var-android-volume-up: "\f3ba";
-@ionicon-var-android-walk: "\f3bb";
-@ionicon-var-android-warning: "\f3bc";
-@ionicon-var-android-watch: "\f3bd";
-@ionicon-var-android-wifi: "\f305";
-@ionicon-var-aperture: "\f313";
-@ionicon-var-archive: "\f102";
-@ionicon-var-arrow-down-a: "\f103";
-@ionicon-var-arrow-down-b: "\f104";
-@ionicon-var-arrow-down-c: "\f105";
-@ionicon-var-arrow-expand: "\f25e";
-@ionicon-var-arrow-graph-down-left: "\f25f";
-@ionicon-var-arrow-graph-down-right: "\f260";
-@ionicon-var-arrow-graph-up-left: "\f261";
-@ionicon-var-arrow-graph-up-right: "\f262";
-@ionicon-var-arrow-left-a: "\f106";
-@ionicon-var-arrow-left-b: "\f107";
-@ionicon-var-arrow-left-c: "\f108";
-@ionicon-var-arrow-move: "\f263";
-@ionicon-var-arrow-resize: "\f264";
-@ionicon-var-arrow-return-left: "\f265";
-@ionicon-var-arrow-return-right: "\f266";
-@ionicon-var-arrow-right-a: "\f109";
-@ionicon-var-arrow-right-b: "\f10a";
-@ionicon-var-arrow-right-c: "\f10b";
-@ionicon-var-arrow-shrink: "\f267";
-@ionicon-var-arrow-swap: "\f268";
-@ionicon-var-arrow-up-a: "\f10c";
-@ionicon-var-arrow-up-b: "\f10d";
-@ionicon-var-arrow-up-c: "\f10e";
-@ionicon-var-asterisk: "\f314";
-@ionicon-var-at: "\f10f";
-@ionicon-var-backspace: "\f3bf";
-@ionicon-var-backspace-outline: "\f3be";
-@ionicon-var-bag: "\f110";
-@ionicon-var-battery-charging: "\f111";
-@ionicon-var-battery-empty: "\f112";
-@ionicon-var-battery-full: "\f113";
-@ionicon-var-battery-half: "\f114";
-@ionicon-var-battery-low: "\f115";
-@ionicon-var-beaker: "\f269";
-@ionicon-var-beer: "\f26a";
-@ionicon-var-bluetooth: "\f116";
-@ionicon-var-bonfire: "\f315";
-@ionicon-var-bookmark: "\f26b";
-@ionicon-var-bowtie: "\f3c0";
-@ionicon-var-briefcase: "\f26c";
-@ionicon-var-bug: "\f2be";
-@ionicon-var-calculator: "\f26d";
-@ionicon-var-calendar: "\f117";
-@ionicon-var-camera: "\f118";
-@ionicon-var-card: "\f119";
-@ionicon-var-cash: "\f316";
-@ionicon-var-chatbox: "\f11b";
-@ionicon-var-chatbox-working: "\f11a";
-@ionicon-var-chatboxes: "\f11c";
-@ionicon-var-chatbubble: "\f11e";
-@ionicon-var-chatbubble-working: "\f11d";
-@ionicon-var-chatbubbles: "\f11f";
-@ionicon-var-checkmark: "\f122";
-@ionicon-var-checkmark-circled: "\f120";
-@ionicon-var-checkmark-round: "\f121";
-@ionicon-var-chevron-down: "\f123";
-@ionicon-var-chevron-left: "\f124";
-@ionicon-var-chevron-right: "\f125";
-@ionicon-var-chevron-up: "\f126";
-@ionicon-var-clipboard: "\f127";
-@ionicon-var-clock: "\f26e";
-@ionicon-var-close: "\f12a";
-@ionicon-var-close-circled: "\f128";
-@ionicon-var-close-round: "\f129";
-@ionicon-var-closed-captioning: "\f317";
-@ionicon-var-cloud: "\f12b";
-@ionicon-var-code: "\f271";
-@ionicon-var-code-download: "\f26f";
-@ionicon-var-code-working: "\f270";
-@ionicon-var-coffee: "\f272";
-@ionicon-var-compass: "\f273";
-@ionicon-var-compose: "\f12c";
-@ionicon-var-connection-bars: "\f274";
-@ionicon-var-contrast: "\f275";
-@ionicon-var-crop: "\f3c1";
-@ionicon-var-cube: "\f318";
-@ionicon-var-disc: "\f12d";
-@ionicon-var-document: "\f12f";
-@ionicon-var-document-text: "\f12e";
-@ionicon-var-drag: "\f130";
-@ionicon-var-earth: "\f276";
-@ionicon-var-easel: "\f3c2";
-@ionicon-var-edit: "\f2bf";
-@ionicon-var-egg: "\f277";
-@ionicon-var-eject: "\f131";
-@ionicon-var-email: "\f132";
-@ionicon-var-email-unread: "\f3c3";
-@ionicon-var-erlenmeyer-flask: "\f3c5";
-@ionicon-var-erlenmeyer-flask-bubbles: "\f3c4";
-@ionicon-var-eye: "\f133";
-@ionicon-var-eye-disabled: "\f306";
-@ionicon-var-female: "\f278";
-@ionicon-var-filing: "\f134";
-@ionicon-var-film-marker: "\f135";
-@ionicon-var-fireball: "\f319";
-@ionicon-var-flag: "\f279";
-@ionicon-var-flame: "\f31a";
-@ionicon-var-flash: "\f137";
-@ionicon-var-flash-off: "\f136";
-@ionicon-var-folder: "\f139";
-@ionicon-var-fork: "\f27a";
-@ionicon-var-fork-repo: "\f2c0";
-@ionicon-var-forward: "\f13a";
-@ionicon-var-funnel: "\f31b";
-@ionicon-var-gear-a: "\f13d";
-@ionicon-var-gear-b: "\f13e";
-@ionicon-var-grid: "\f13f";
-@ionicon-var-hammer: "\f27b";
-@ionicon-var-happy: "\f31c";
-@ionicon-var-happy-outline: "\f3c6";
-@ionicon-var-headphone: "\f140";
-@ionicon-var-heart: "\f141";
-@ionicon-var-heart-broken: "\f31d";
-@ionicon-var-help: "\f143";
-@ionicon-var-help-buoy: "\f27c";
-@ionicon-var-help-circled: "\f142";
-@ionicon-var-home: "\f144";
-@ionicon-var-icecream: "\f27d";
-@ionicon-var-image: "\f147";
-@ionicon-var-images: "\f148";
-@ionicon-var-information: "\f14a";
-@ionicon-var-information-circled: "\f149";
-@ionicon-var-ionic: "\f14b";
-@ionicon-var-ios-alarm: "\f3c8";
-@ionicon-var-ios-alarm-outline: "\f3c7";
-@ionicon-var-ios-albums: "\f3ca";
-@ionicon-var-ios-albums-outline: "\f3c9";
-@ionicon-var-ios-americanfootball: "\f3cc";
-@ionicon-var-ios-americanfootball-outline: "\f3cb";
-@ionicon-var-ios-analytics: "\f3ce";
-@ionicon-var-ios-analytics-outline: "\f3cd";
-@ionicon-var-ios-arrow-back: "\f3cf";
-@ionicon-var-ios-arrow-down: "\f3d0";
-@ionicon-var-ios-arrow-forward: "\f3d1";
-@ionicon-var-ios-arrow-left: "\f3d2";
-@ionicon-var-ios-arrow-right: "\f3d3";
-@ionicon-var-ios-arrow-thin-down: "\f3d4";
-@ionicon-var-ios-arrow-thin-left: "\f3d5";
-@ionicon-var-ios-arrow-thin-right: "\f3d6";
-@ionicon-var-ios-arrow-thin-up: "\f3d7";
-@ionicon-var-ios-arrow-up: "\f3d8";
-@ionicon-var-ios-at: "\f3da";
-@ionicon-var-ios-at-outline: "\f3d9";
-@ionicon-var-ios-barcode: "\f3dc";
-@ionicon-var-ios-barcode-outline: "\f3db";
-@ionicon-var-ios-baseball: "\f3de";
-@ionicon-var-ios-baseball-outline: "\f3dd";
-@ionicon-var-ios-basketball: "\f3e0";
-@ionicon-var-ios-basketball-outline: "\f3df";
-@ionicon-var-ios-bell: "\f3e2";
-@ionicon-var-ios-bell-outline: "\f3e1";
-@ionicon-var-ios-body: "\f3e4";
-@ionicon-var-ios-body-outline: "\f3e3";
-@ionicon-var-ios-bolt: "\f3e6";
-@ionicon-var-ios-bolt-outline: "\f3e5";
-@ionicon-var-ios-book: "\f3e8";
-@ionicon-var-ios-book-outline: "\f3e7";
-@ionicon-var-ios-bookmarks: "\f3ea";
-@ionicon-var-ios-bookmarks-outline: "\f3e9";
-@ionicon-var-ios-box: "\f3ec";
-@ionicon-var-ios-box-outline: "\f3eb";
-@ionicon-var-ios-briefcase: "\f3ee";
-@ionicon-var-ios-briefcase-outline: "\f3ed";
-@ionicon-var-ios-browsers: "\f3f0";
-@ionicon-var-ios-browsers-outline: "\f3ef";
-@ionicon-var-ios-calculator: "\f3f2";
-@ionicon-var-ios-calculator-outline: "\f3f1";
-@ionicon-var-ios-calendar: "\f3f4";
-@ionicon-var-ios-calendar-outline: "\f3f3";
-@ionicon-var-ios-camera: "\f3f6";
-@ionicon-var-ios-camera-outline: "\f3f5";
-@ionicon-var-ios-cart: "\f3f8";
-@ionicon-var-ios-cart-outline: "\f3f7";
-@ionicon-var-ios-chatboxes: "\f3fa";
-@ionicon-var-ios-chatboxes-outline: "\f3f9";
-@ionicon-var-ios-chatbubble: "\f3fc";
-@ionicon-var-ios-chatbubble-outline: "\f3fb";
-@ionicon-var-ios-checkmark: "\f3ff";
-@ionicon-var-ios-checkmark-empty: "\f3fd";
-@ionicon-var-ios-checkmark-outline: "\f3fe";
-@ionicon-var-ios-circle-filled: "\f400";
-@ionicon-var-ios-circle-outline: "\f401";
-@ionicon-var-ios-clock: "\f403";
-@ionicon-var-ios-clock-outline: "\f402";
-@ionicon-var-ios-close: "\f406";
-@ionicon-var-ios-close-empty: "\f404";
-@ionicon-var-ios-close-outline: "\f405";
-@ionicon-var-ios-cloud: "\f40c";
-@ionicon-var-ios-cloud-download: "\f408";
-@ionicon-var-ios-cloud-download-outline: "\f407";
-@ionicon-var-ios-cloud-outline: "\f409";
-@ionicon-var-ios-cloud-upload: "\f40b";
-@ionicon-var-ios-cloud-upload-outline: "\f40a";
-@ionicon-var-ios-cloudy: "\f410";
-@ionicon-var-ios-cloudy-night: "\f40e";
-@ionicon-var-ios-cloudy-night-outline: "\f40d";
-@ionicon-var-ios-cloudy-outline: "\f40f";
-@ionicon-var-ios-cog: "\f412";
-@ionicon-var-ios-cog-outline: "\f411";
-@ionicon-var-ios-color-filter: "\f414";
-@ionicon-var-ios-color-filter-outline: "\f413";
-@ionicon-var-ios-color-wand: "\f416";
-@ionicon-var-ios-color-wand-outline: "\f415";
-@ionicon-var-ios-compose: "\f418";
-@ionicon-var-ios-compose-outline: "\f417";
-@ionicon-var-ios-contact: "\f41a";
-@ionicon-var-ios-contact-outline: "\f419";
-@ionicon-var-ios-copy: "\f41c";
-@ionicon-var-ios-copy-outline: "\f41b";
-@ionicon-var-ios-crop: "\f41e";
-@ionicon-var-ios-crop-strong: "\f41d";
-@ionicon-var-ios-download: "\f420";
-@ionicon-var-ios-download-outline: "\f41f";
-@ionicon-var-ios-drag: "\f421";
-@ionicon-var-ios-email: "\f423";
-@ionicon-var-ios-email-outline: "\f422";
-@ionicon-var-ios-eye: "\f425";
-@ionicon-var-ios-eye-outline: "\f424";
-@ionicon-var-ios-fastforward: "\f427";
-@ionicon-var-ios-fastforward-outline: "\f426";
-@ionicon-var-ios-filing: "\f429";
-@ionicon-var-ios-filing-outline: "\f428";
-@ionicon-var-ios-film: "\f42b";
-@ionicon-var-ios-film-outline: "\f42a";
-@ionicon-var-ios-flag: "\f42d";
-@ionicon-var-ios-flag-outline: "\f42c";
-@ionicon-var-ios-flame: "\f42f";
-@ionicon-var-ios-flame-outline: "\f42e";
-@ionicon-var-ios-flask: "\f431";
-@ionicon-var-ios-flask-outline: "\f430";
-@ionicon-var-ios-flower: "\f433";
-@ionicon-var-ios-flower-outline: "\f432";
-@ionicon-var-ios-folder: "\f435";
-@ionicon-var-ios-folder-outline: "\f434";
-@ionicon-var-ios-football: "\f437";
-@ionicon-var-ios-football-outline: "\f436";
-@ionicon-var-ios-game-controller-a: "\f439";
-@ionicon-var-ios-game-controller-a-outline: "\f438";
-@ionicon-var-ios-game-controller-b: "\f43b";
-@ionicon-var-ios-game-controller-b-outline: "\f43a";
-@ionicon-var-ios-gear: "\f43d";
-@ionicon-var-ios-gear-outline: "\f43c";
-@ionicon-var-ios-glasses: "\f43f";
-@ionicon-var-ios-glasses-outline: "\f43e";
-@ionicon-var-ios-grid-view: "\f441";
-@ionicon-var-ios-grid-view-outline: "\f440";
-@ionicon-var-ios-heart: "\f443";
-@ionicon-var-ios-heart-outline: "\f442";
-@ionicon-var-ios-help: "\f446";
-@ionicon-var-ios-help-empty: "\f444";
-@ionicon-var-ios-help-outline: "\f445";
-@ionicon-var-ios-home: "\f448";
-@ionicon-var-ios-home-outline: "\f447";
-@ionicon-var-ios-infinite: "\f44a";
-@ionicon-var-ios-infinite-outline: "\f449";
-@ionicon-var-ios-information: "\f44d";
-@ionicon-var-ios-information-empty: "\f44b";
-@ionicon-var-ios-information-outline: "\f44c";
-@ionicon-var-ios-ionic-outline: "\f44e";
-@ionicon-var-ios-keypad: "\f450";
-@ionicon-var-ios-keypad-outline: "\f44f";
-@ionicon-var-ios-lightbulb: "\f452";
-@ionicon-var-ios-lightbulb-outline: "\f451";
-@ionicon-var-ios-list: "\f454";
-@ionicon-var-ios-list-outline: "\f453";
-@ionicon-var-ios-location: "\f456";
-@ionicon-var-ios-location-outline: "\f455";
-@ionicon-var-ios-locked: "\f458";
-@ionicon-var-ios-locked-outline: "\f457";
-@ionicon-var-ios-loop: "\f45a";
-@ionicon-var-ios-loop-strong: "\f459";
-@ionicon-var-ios-medical: "\f45c";
-@ionicon-var-ios-medical-outline: "\f45b";
-@ionicon-var-ios-medkit: "\f45e";
-@ionicon-var-ios-medkit-outline: "\f45d";
-@ionicon-var-ios-mic: "\f461";
-@ionicon-var-ios-mic-off: "\f45f";
-@ionicon-var-ios-mic-outline: "\f460";
-@ionicon-var-ios-minus: "\f464";
-@ionicon-var-ios-minus-empty: "\f462";
-@ionicon-var-ios-minus-outline: "\f463";
-@ionicon-var-ios-monitor: "\f466";
-@ionicon-var-ios-monitor-outline: "\f465";
-@ionicon-var-ios-moon: "\f468";
-@ionicon-var-ios-moon-outline: "\f467";
-@ionicon-var-ios-more: "\f46a";
-@ionicon-var-ios-more-outline: "\f469";
-@ionicon-var-ios-musical-note: "\f46b";
-@ionicon-var-ios-musical-notes: "\f46c";
-@ionicon-var-ios-navigate: "\f46e";
-@ionicon-var-ios-navigate-outline: "\f46d";
-@ionicon-var-ios-nutrition: "\f470";
-@ionicon-var-ios-nutrition-outline: "\f46f";
-@ionicon-var-ios-paper: "\f472";
-@ionicon-var-ios-paper-outline: "\f471";
-@ionicon-var-ios-paperplane: "\f474";
-@ionicon-var-ios-paperplane-outline: "\f473";
-@ionicon-var-ios-partlysunny: "\f476";
-@ionicon-var-ios-partlysunny-outline: "\f475";
-@ionicon-var-ios-pause: "\f478";
-@ionicon-var-ios-pause-outline: "\f477";
-@ionicon-var-ios-paw: "\f47a";
-@ionicon-var-ios-paw-outline: "\f479";
-@ionicon-var-ios-people: "\f47c";
-@ionicon-var-ios-people-outline: "\f47b";
-@ionicon-var-ios-person: "\f47e";
-@ionicon-var-ios-person-outline: "\f47d";
-@ionicon-var-ios-personadd: "\f480";
-@ionicon-var-ios-personadd-outline: "\f47f";
-@ionicon-var-ios-photos: "\f482";
-@ionicon-var-ios-photos-outline: "\f481";
-@ionicon-var-ios-pie: "\f484";
-@ionicon-var-ios-pie-outline: "\f483";
-@ionicon-var-ios-pint: "\f486";
-@ionicon-var-ios-pint-outline: "\f485";
-@ionicon-var-ios-play: "\f488";
-@ionicon-var-ios-play-outline: "\f487";
-@ionicon-var-ios-plus: "\f48b";
-@ionicon-var-ios-plus-empty: "\f489";
-@ionicon-var-ios-plus-outline: "\f48a";
-@ionicon-var-ios-pricetag: "\f48d";
-@ionicon-var-ios-pricetag-outline: "\f48c";
-@ionicon-var-ios-pricetags: "\f48f";
-@ionicon-var-ios-pricetags-outline: "\f48e";
-@ionicon-var-ios-printer: "\f491";
-@ionicon-var-ios-printer-outline: "\f490";
-@ionicon-var-ios-pulse: "\f493";
-@ionicon-var-ios-pulse-strong: "\f492";
-@ionicon-var-ios-rainy: "\f495";
-@ionicon-var-ios-rainy-outline: "\f494";
-@ionicon-var-ios-recording: "\f497";
-@ionicon-var-ios-recording-outline: "\f496";
-@ionicon-var-ios-redo: "\f499";
-@ionicon-var-ios-redo-outline: "\f498";
-@ionicon-var-ios-refresh: "\f49c";
-@ionicon-var-ios-refresh-empty: "\f49a";
-@ionicon-var-ios-refresh-outline: "\f49b";
-@ionicon-var-ios-reload: "\f49d";
-@ionicon-var-ios-reverse-camera: "\f49f";
-@ionicon-var-ios-reverse-camera-outline: "\f49e";
-@ionicon-var-ios-rewind: "\f4a1";
-@ionicon-var-ios-rewind-outline: "\f4a0";
-@ionicon-var-ios-rose: "\f4a3";
-@ionicon-var-ios-rose-outline: "\f4a2";
-@ionicon-var-ios-search: "\f4a5";
-@ionicon-var-ios-search-strong: "\f4a4";
-@ionicon-var-ios-settings: "\f4a7";
-@ionicon-var-ios-settings-strong: "\f4a6";
-@ionicon-var-ios-shuffle: "\f4a9";
-@ionicon-var-ios-shuffle-strong: "\f4a8";
-@ionicon-var-ios-skipbackward: "\f4ab";
-@ionicon-var-ios-skipbackward-outline: "\f4aa";
-@ionicon-var-ios-skipforward: "\f4ad";
-@ionicon-var-ios-skipforward-outline: "\f4ac";
-@ionicon-var-ios-snowy: "\f4ae";
-@ionicon-var-ios-speedometer: "\f4b0";
-@ionicon-var-ios-speedometer-outline: "\f4af";
-@ionicon-var-ios-star: "\f4b3";
-@ionicon-var-ios-star-half: "\f4b1";
-@ionicon-var-ios-star-outline: "\f4b2";
-@ionicon-var-ios-stopwatch: "\f4b5";
-@ionicon-var-ios-stopwatch-outline: "\f4b4";
-@ionicon-var-ios-sunny: "\f4b7";
-@ionicon-var-ios-sunny-outline: "\f4b6";
-@ionicon-var-ios-telephone: "\f4b9";
-@ionicon-var-ios-telephone-outline: "\f4b8";
-@ionicon-var-ios-tennisball: "\f4bb";
-@ionicon-var-ios-tennisball-outline: "\f4ba";
-@ionicon-var-ios-thunderstorm: "\f4bd";
-@ionicon-var-ios-thunderstorm-outline: "\f4bc";
-@ionicon-var-ios-time: "\f4bf";
-@ionicon-var-ios-time-outline: "\f4be";
-@ionicon-var-ios-timer: "\f4c1";
-@ionicon-var-ios-timer-outline: "\f4c0";
-@ionicon-var-ios-toggle: "\f4c3";
-@ionicon-var-ios-toggle-outline: "\f4c2";
-@ionicon-var-ios-trash: "\f4c5";
-@ionicon-var-ios-trash-outline: "\f4c4";
-@ionicon-var-ios-undo: "\f4c7";
-@ionicon-var-ios-undo-outline: "\f4c6";
-@ionicon-var-ios-unlocked: "\f4c9";
-@ionicon-var-ios-unlocked-outline: "\f4c8";
-@ionicon-var-ios-upload: "\f4cb";
-@ionicon-var-ios-upload-outline: "\f4ca";
-@ionicon-var-ios-videocam: "\f4cd";
-@ionicon-var-ios-videocam-outline: "\f4cc";
-@ionicon-var-ios-volume-high: "\f4ce";
-@ionicon-var-ios-volume-low: "\f4cf";
-@ionicon-var-ios-wineglass: "\f4d1";
-@ionicon-var-ios-wineglass-outline: "\f4d0";
-@ionicon-var-ios-world: "\f4d3";
-@ionicon-var-ios-world-outline: "\f4d2";
-@ionicon-var-ipad: "\f1f9";
-@ionicon-var-iphone: "\f1fa";
-@ionicon-var-ipod: "\f1fb";
-@ionicon-var-jet: "\f295";
-@ionicon-var-key: "\f296";
-@ionicon-var-knife: "\f297";
-@ionicon-var-laptop: "\f1fc";
-@ionicon-var-leaf: "\f1fd";
-@ionicon-var-levels: "\f298";
-@ionicon-var-lightbulb: "\f299";
-@ionicon-var-link: "\f1fe";
-@ionicon-var-load-a: "\f29a";
-@ionicon-var-load-b: "\f29b";
-@ionicon-var-load-c: "\f29c";
-@ionicon-var-load-d: "\f29d";
-@ionicon-var-location: "\f1ff";
-@ionicon-var-lock-combination: "\f4d4";
-@ionicon-var-locked: "\f200";
-@ionicon-var-log-in: "\f29e";
-@ionicon-var-log-out: "\f29f";
-@ionicon-var-loop: "\f201";
-@ionicon-var-magnet: "\f2a0";
-@ionicon-var-male: "\f2a1";
-@ionicon-var-man: "\f202";
-@ionicon-var-map: "\f203";
-@ionicon-var-medkit: "\f2a2";
-@ionicon-var-merge: "\f33f";
-@ionicon-var-mic-a: "\f204";
-@ionicon-var-mic-b: "\f205";
-@ionicon-var-mic-c: "\f206";
-@ionicon-var-minus: "\f209";
-@ionicon-var-minus-circled: "\f207";
-@ionicon-var-minus-round: "\f208";
-@ionicon-var-model-s: "\f2c1";
-@ionicon-var-monitor: "\f20a";
-@ionicon-var-more: "\f20b";
-@ionicon-var-mouse: "\f340";
-@ionicon-var-music-note: "\f20c";
-@ionicon-var-navicon: "\f20e";
-@ionicon-var-navicon-round: "\f20d";
-@ionicon-var-navigate: "\f2a3";
-@ionicon-var-network: "\f341";
-@ionicon-var-no-smoking: "\f2c2";
-@ionicon-var-nuclear: "\f2a4";
-@ionicon-var-outlet: "\f342";
-@ionicon-var-paintbrush: "\f4d5";
-@ionicon-var-paintbucket: "\f4d6";
-@ionicon-var-paper-airplane: "\f2c3";
-@ionicon-var-paperclip: "\f20f";
-@ionicon-var-pause: "\f210";
-@ionicon-var-person: "\f213";
-@ionicon-var-person-add: "\f211";
-@ionicon-var-person-stalker: "\f212";
-@ionicon-var-pie-graph: "\f2a5";
-@ionicon-var-pin: "\f2a6";
-@ionicon-var-pinpoint: "\f2a7";
-@ionicon-var-pizza: "\f2a8";
-@ionicon-var-plane: "\f214";
-@ionicon-var-planet: "\f343";
-@ionicon-var-play: "\f215";
-@ionicon-var-playstation: "\f30a";
-@ionicon-var-plus: "\f218";
-@ionicon-var-plus-circled: "\f216";
-@ionicon-var-plus-round: "\f217";
-@ionicon-var-podium: "\f344";
-@ionicon-var-pound: "\f219";
-@ionicon-var-power: "\f2a9";
-@ionicon-var-pricetag: "\f2aa";
-@ionicon-var-pricetags: "\f2ab";
-@ionicon-var-printer: "\f21a";
-@ionicon-var-pull-request: "\f345";
-@ionicon-var-qr-scanner: "\f346";
-@ionicon-var-quote: "\f347";
-@ionicon-var-radio-waves: "\f2ac";
-@ionicon-var-record: "\f21b";
-@ionicon-var-refresh: "\f21c";
-@ionicon-var-reply: "\f21e";
-@ionicon-var-reply-all: "\f21d";
-@ionicon-var-ribbon-a: "\f348";
-@ionicon-var-ribbon-b: "\f349";
-@ionicon-var-sad: "\f34a";
-@ionicon-var-sad-outline: "\f4d7";
-@ionicon-var-scissors: "\f34b";
-@ionicon-var-search: "\f21f";
-@ionicon-var-settings: "\f2ad";
-@ionicon-var-share: "\f220";
-@ionicon-var-shuffle: "\f221";
-@ionicon-var-skip-backward: "\f222";
-@ionicon-var-skip-forward: "\f223";
-@ionicon-var-social-android: "\f225";
-@ionicon-var-social-android-outline: "\f224";
-@ionicon-var-social-angular: "\f4d9";
-@ionicon-var-social-angular-outline: "\f4d8";
-@ionicon-var-social-apple: "\f227";
-@ionicon-var-social-apple-outline: "\f226";
-@ionicon-var-social-bitcoin: "\f2af";
-@ionicon-var-social-bitcoin-outline: "\f2ae";
-@ionicon-var-social-buffer: "\f229";
-@ionicon-var-social-buffer-outline: "\f228";
-@ionicon-var-social-chrome: "\f4db";
-@ionicon-var-social-chrome-outline: "\f4da";
-@ionicon-var-social-codepen: "\f4dd";
-@ionicon-var-social-codepen-outline: "\f4dc";
-@ionicon-var-social-css3: "\f4df";
-@ionicon-var-social-css3-outline: "\f4de";
-@ionicon-var-social-designernews: "\f22b";
-@ionicon-var-social-designernews-outline: "\f22a";
-@ionicon-var-social-dribbble: "\f22d";
-@ionicon-var-social-dribbble-outline: "\f22c";
-@ionicon-var-social-dropbox: "\f22f";
-@ionicon-var-social-dropbox-outline: "\f22e";
-@ionicon-var-social-euro: "\f4e1";
-@ionicon-var-social-euro-outline: "\f4e0";
-@ionicon-var-social-facebook: "\f231";
-@ionicon-var-social-facebook-outline: "\f230";
-@ionicon-var-social-foursquare: "\f34d";
-@ionicon-var-social-foursquare-outline: "\f34c";
-@ionicon-var-social-freebsd-devil: "\f2c4";
-@ionicon-var-social-github: "\f233";
-@ionicon-var-social-github-outline: "\f232";
-@ionicon-var-social-google: "\f34f";
-@ionicon-var-social-google-outline: "\f34e";
-@ionicon-var-social-googleplus: "\f235";
-@ionicon-var-social-googleplus-outline: "\f234";
-@ionicon-var-social-hackernews: "\f237";
-@ionicon-var-social-hackernews-outline: "\f236";
-@ionicon-var-social-html5: "\f4e3";
-@ionicon-var-social-html5-outline: "\f4e2";
-@ionicon-var-social-instagram: "\f351";
-@ionicon-var-social-instagram-outline: "\f350";
-@ionicon-var-social-javascript: "\f4e5";
-@ionicon-var-social-javascript-outline: "\f4e4";
-@ionicon-var-social-linkedin: "\f239";
-@ionicon-var-social-linkedin-outline: "\f238";
-@ionicon-var-social-markdown: "\f4e6";
-@ionicon-var-social-nodejs: "\f4e7";
-@ionicon-var-social-octocat: "\f4e8";
-@ionicon-var-social-pinterest: "\f2b1";
-@ionicon-var-social-pinterest-outline: "\f2b0";
-@ionicon-var-social-python: "\f4e9";
-@ionicon-var-social-reddit: "\f23b";
-@ionicon-var-social-reddit-outline: "\f23a";
-@ionicon-var-social-rss: "\f23d";
-@ionicon-var-social-rss-outline: "\f23c";
-@ionicon-var-social-sass: "\f4ea";
-@ionicon-var-social-skype: "\f23f";
-@ionicon-var-social-skype-outline: "\f23e";
-@ionicon-var-social-snapchat: "\f4ec";
-@ionicon-var-social-snapchat-outline: "\f4eb";
-@ionicon-var-social-tumblr: "\f241";
-@ionicon-var-social-tumblr-outline: "\f240";
-@ionicon-var-social-tux: "\f2c5";
-@ionicon-var-social-twitch: "\f4ee";
-@ionicon-var-social-twitch-outline: "\f4ed";
-@ionicon-var-social-twitter: "\f243";
-@ionicon-var-social-twitter-outline: "\f242";
-@ionicon-var-social-usd: "\f353";
-@ionicon-var-social-usd-outline: "\f352";
-@ionicon-var-social-vimeo: "\f245";
-@ionicon-var-social-vimeo-outline: "\f244";
-@ionicon-var-social-whatsapp: "\f4f0";
-@ionicon-var-social-whatsapp-outline: "\f4ef";
-@ionicon-var-social-windows: "\f247";
-@ionicon-var-social-windows-outline: "\f246";
-@ionicon-var-social-wordpress: "\f249";
-@ionicon-var-social-wordpress-outline: "\f248";
-@ionicon-var-social-yahoo: "\f24b";
-@ionicon-var-social-yahoo-outline: "\f24a";
-@ionicon-var-social-yen: "\f4f2";
-@ionicon-var-social-yen-outline: "\f4f1";
-@ionicon-var-social-youtube: "\f24d";
-@ionicon-var-social-youtube-outline: "\f24c";
-@ionicon-var-soup-can: "\f4f4";
-@ionicon-var-soup-can-outline: "\f4f3";
-@ionicon-var-speakerphone: "\f2b2";
-@ionicon-var-speedometer: "\f2b3";
-@ionicon-var-spoon: "\f2b4";
-@ionicon-var-star: "\f24e";
-@ionicon-var-stats-bars: "\f2b5";
-@ionicon-var-steam: "\f30b";
-@ionicon-var-stop: "\f24f";
-@ionicon-var-thermometer: "\f2b6";
-@ionicon-var-thumbsdown: "\f250";
-@ionicon-var-thumbsup: "\f251";
-@ionicon-var-toggle: "\f355";
-@ionicon-var-toggle-filled: "\f354";
-@ionicon-var-transgender: "\f4f5";
-@ionicon-var-trash-a: "\f252";
-@ionicon-var-trash-b: "\f253";
-@ionicon-var-trophy: "\f356";
-@ionicon-var-tshirt: "\f4f7";
-@ionicon-var-tshirt-outline: "\f4f6";
-@ionicon-var-umbrella: "\f2b7";
-@ionicon-var-university: "\f357";
-@ionicon-var-unlocked: "\f254";
-@ionicon-var-upload: "\f255";
-@ionicon-var-usb: "\f2b8";
-@ionicon-var-videocamera: "\f256";
-@ionicon-var-volume-high: "\f257";
-@ionicon-var-volume-low: "\f258";
-@ionicon-var-volume-medium: "\f259";
-@ionicon-var-volume-mute: "\f25a";
-@ionicon-var-wand: "\f358";
-@ionicon-var-waterdrop: "\f25b";
-@ionicon-var-wifi: "\f25c";
-@ionicon-var-wineglass: "\f2b9";
-@ionicon-var-woman: "\f25d";
-@ionicon-var-wrench: "\f2ba";
-@ionicon-var-xbox: "\f30c";

src/styles/components/alert.less

@@ -4,7 +4,7 @@
 .@{alert-prefix-cls}{
     position: relative;
     padding: 8px 48px 8px 16px;
-    border-radius: @border-radius-base;
+    border-radius: @border-radius-small;
     color: @text-color;
     font-size: @font-size-small;
     line-height: 16px;
@@ -15,9 +15,9 @@
     }
 
     &-icon {
-        font-size: @font-size-base;
+        font-size: @font-size-large;
         top: 8px;
-        left: 16px;
+        left: 12px;
         position: absolute;
     }
 
@@ -30,32 +30,36 @@
     }
 
     &-success {
-        border: 1px solid tint(@success-color, 80%);
-        background-color: tint(@success-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+        //background-color: tint(@success-color, 90%);
+        background-color: ~`colorPalette("@{success-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @success-color;
         }
     }
 
     &-info {
-        border: 1px solid tint(@primary-color, 80%);
-        background-color: tint(@primary-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 3)`;
+        //background-color: tint(@primary-color, 90%);
+        background-color: ~`colorPalette("@{primary-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @primary-color;
         }
     }
 
     &-warning {
-        border: 1px solid tint(@warning-color, 80%);
-        background-color: tint(@warning-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+        //background-color: tint(@warning-color, 90%);
+        background-color: ~`colorPalette("@{warning-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @warning-color;
         }
     }
 
     &-error {
-        border: 1px solid tint(@error-color, 80%);
-        background-color: tint(@error-color, 90%);
+        border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+        //background-color: tint(@error-color, 90%);
+        background-color: ~`colorPalette("@{error-color}", 1)`;
         .@{alert-prefix-cls}-icon {
             color: @error-color;
         }
@@ -68,7 +72,7 @@
     &-with-desc {
         padding: 16px;
         position: relative;
-        border-radius: @border-radius-base;
+        border-radius: @border-radius-small;
         margin-bottom: 10px;
         color: @text-color;
         line-height: 1.5;

src/styles/components/badge.less

@@ -1,6 +1,7 @@
 @badge-prefix-cls: ~"@{css-prefix}badge";
 
 .@{badge-prefix-cls} {
+    font-family: "Monospaced Number";
     position: relative;
     display: inline-block;
     line-height: 1;
@@ -37,6 +38,26 @@
             position: relative;
             transform: translateX(0);
         }
+
+        &-primary{
+            background: @primary-color;
+        }
+        &-success{
+            background: @success-color;
+        }
+        &-error{
+            background: @error-color;
+        }
+        &-warning{
+            background: @warning-color;
+        }
+        &-info{
+            background: @info-color;
+        }
+        &-normal{
+            background: @normal-color;
+            color: @subsidiary-color;
+        }
     }
 
     &-dot {
@@ -52,4 +73,63 @@
         z-index: 10;
         box-shadow: 0 0 0 1px #fff;
     }
+
+    &-status {
+        line-height: inherit;
+        vertical-align: baseline;
+
+        &-dot {
+            width: 6px;
+            height: 6px;
+            display: inline-block;
+            border-radius: 50%;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+        &-success {
+            background-color: @success-color;
+        }
+        &-processing {
+            background-color: @processing-color;
+            position: relative;
+            &:after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid @processing-color;
+                content: '';
+                animation: aniStatusProcessing 1.2s infinite ease-in-out;
+            }
+        }
+        &-default {
+            background-color: @normal-color;
+        }
+        &-error {
+            background-color: @error-color;
+        }
+        &-warning {
+            background-color: @warning-color;
+        }
+        &-text {
+            display: inline-block;
+            color: @text-color;
+            font-size: @font-size-small;
+            margin-left: 6px;
+        }
+    }
 }
+
+@keyframes aniStatusProcessing {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(2.4);
+        opacity: 0;
+    }
+}

src/styles/components/button.less

@@ -60,9 +60,9 @@
         }
     }
 
-    &-ghost {
-        .btn-ghost;
-    }
+    //&-ghost {
+    //    .btn-ghost;
+    //}
 
     &-dashed{
         .btn-dashed;
@@ -125,4 +125,66 @@
     &-group-vertical {
         .btn-group-vertical(@btn-prefix-cls);
     }
+
+    // The new ghost in 3.0
+    &-ghost{
+        color: #fff;
+        background: transparent;
+        &:hover{
+            background: transparent;
+        }
+    }
+    &-ghost&-dashed, &-ghost&-default{
+        color: #fff;
+        border-color: #fff;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            border-color: tint(@primary-color, 20%);
+        }
+    }
+    &-ghost&-primary{
+        color: @primary-color;
+        &:hover{
+            color: tint(@primary-color, 20%);
+            background: fade(tint(@primary-color, 95%), 50%);
+        }
+    }
+    &-ghost&-info{
+        color: @info-color;
+        &:hover{
+            color: tint(@info-color, 20%);
+            background: fade(tint(@info-color, 95%), 50%);
+        }
+    }
+    &-ghost&-success{
+        color: @success-color;
+        &:hover{
+            color: tint(@success-color, 20%);
+            background: fade(tint(@success-color, 95%), 50%);
+        }
+    }
+    &-ghost&-warning{
+        color: @warning-color;
+        &:hover{
+            color: tint(@warning-color, 20%);
+            background: fade(tint(@warning-color, 95%), 50%);
+        }
+    }
+    &-ghost&-error{
+        color: @error-color;
+        &:hover{
+            color: tint(@error-color, 20%);
+            background: fade(tint(@error-color, 95%), 50%);
+        }
+    }
+
+    &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+        border-color: @btn-disable-border;
+    }
+    &-ghost&-text[disabled]{
+        background: transparent;
+        color: fade(#000, 25%);
+    }
 }

src/styles/components/cell.less

@@ -0,0 +1,69 @@
+@cell-prefix-cls: ~"@{css-prefix}cell";
+
+
+.@{cell-prefix-cls} {
+    position: relative;
+    overflow: hidden;
+
+    &-link, &-link:hover, &-link:active{
+        color: inherit;
+    }
+
+    &-icon{
+        display: inline-block;
+        margin-right: 4px;
+        font-size: @font-size-base;
+        vertical-align: middle;
+        &:empty{
+            display: none
+        }
+    }
+    &-main{
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-title{
+        line-height: 24px;
+        font-size: @font-size-base;
+    }
+    &-label{
+        line-height: 1.2;
+        font-size: @font-size-small;
+        color: @subsidiary-color;
+    }
+    &-selected &-label{
+        color: inherit;
+    }
+    &-footer{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        color: @text-color;
+    }
+    &-with-link &-footer{
+        right: 32px;
+    }
+    &-selected &-footer{
+        color: inherit;
+    }
+
+    &-arrow{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        font-size: @font-size-base;
+    }
+
+    &:focus{
+        background: @background-color-select-hover;
+        outline: none;
+    }
+    &-selected:focus{
+        background: shade(@selected-color, 10%);
+    }
+}
+.select-item(@cell-prefix-cls, @cell-prefix-cls);

src/styles/components/collapse.less

@@ -5,6 +5,12 @@
     border-radius: 3px;
     border: 1px solid @border-color-base;
 
+    &-simple{
+        border-left: none;
+        border-right: none;
+        background-color: #fff;
+    }
+
     & > &-item{
         border-top: 1px solid @border-color-base;
         &:first-child {
@@ -14,16 +20,25 @@
         > .@{collapse-prefix-cls}-header{
             height: 38px;
             line-height: 38px;
-            padding-left: 32px;
+            padding-left: 16px;
             color: #666;
             cursor: pointer;
             position: relative;
+            border-bottom: 1px solid transparent;
+            transition: all @transition-time @ease-in-out;
 
             > i{
                 transition: transform @transition-time @ease-in-out;
+                margin-right: 14px;
             }
         }
     }
+    &  > &-item&-item-active > &-header{
+        border-bottom: 1px solid @border-color-base;
+    }
+    &-simple > &-item&-item-active > &-header{
+        border-bottom: 1px solid transparent;
+    }
     &  > &-item&-item-active > &-header > i{
         transform: rotate(90deg);
     }
@@ -40,6 +55,9 @@
             padding-bottom: 16px;
         }
     }
+    &-simple > &-item > &-content > &-content-box{
+        padding-top: 0;
+    }
     &-item-active > &-content{
         //display: block;
     }

src/styles/components/date-picker.less

@@ -190,7 +190,8 @@
         &-arrow-double{
             margin-left: 10px;
             i:after{
-                content: "\F3D2";
+                content: "\F115";
+                margin-left: -8px;
             }
         }
     }
@@ -199,7 +200,8 @@
         &-arrow-double{
             margin-right: 10px;
             i:after{
-                content: "\F3D3";
+                content: "\F11F";
+                margin-left: -8px;
             }
         }
     }

src/styles/components/divider.less

@@ -0,0 +1,96 @@
+@divider-prefix-cls: ~"@{css-prefix}divider";
+
+.@{divider-prefix-cls} {
+    .reset-component;
+    background: @border-color-split;
+
+    &, // for compatiable
+    &-vertical {
+        margin: 0 8px;
+        display: inline-block;
+        height: 0.9em;
+        width: 1px;
+        vertical-align: middle;
+        position: relative;
+        top: -0.06em;
+    }
+    &-horizontal {
+        display: block;
+        height: 1px;
+        width: 100%;
+        margin: 24px 0;
+        clear: both;
+    }
+    &-horizontal&-with-text-center,
+    &-horizontal&-with-text-left,
+    &-horizontal&-with-text-right {
+        display: table;
+        white-space: nowrap;
+        text-align: center;
+        background: transparent;
+        font-weight: 500;
+        color: @title-color;
+        font-size: @font-size-large;
+        margin: 16px 0;
+        &:before,
+        &:after {
+            content: '';
+            display: table-cell;
+            position: relative;
+            top: 50%;
+            width: 50%;
+            border-top: 1px solid @border-color-split;
+            transform: translateY(50%);
+        }
+    }
+
+    &-horizontal&-with-text-left,
+    &-horizontal&-with-text-right {
+        font-size: @font-size-base;
+        .@{divider-prefix-cls}-inner-text {
+            display: inline-block;
+            padding: 0 10px;
+        }
+    }
+
+    &-horizontal&-with-text-left {
+        &:before {
+            top: 50%;
+            width: 5%;
+        }
+        &:after {
+            top: 50%;
+            width: 95%;
+        }
+    }
+
+    &-horizontal&-with-text-right {
+        &:before {
+            top: 50%;
+            width: 95%;
+        }
+        &:after {
+            top: 50%;
+            width: 5%;
+        }
+    }
+
+    &-inner-text {
+        display: inline-block;
+        padding: 0 24px;
+    }
+
+    &-dashed {
+        background: none;
+        border-top: 1px dashed @border-color-split;
+    }
+    &-horizontal&-with-text&-dashed,
+    &-horizontal&-with-text-left&-dashed,
+    &-horizontal&-with-text-right&-dashed {
+        border-top: 0;
+        &:before,
+        &:after {
+            border-style: dashed none none;
+        }
+    }
+}

src/styles/components/dropdown.less

@@ -16,6 +16,11 @@
     &-rel{
         //display: inline-block;
         position: relative;
+        &-user-select-none{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
     }
 
     &-menu{

src/styles/components/index.less

@@ -24,6 +24,7 @@
 @import "modal";
 @import "select";
 @import "select-dropdown";
+@import "split";
 @import "tooltip";
 @import "poptip";
 @import "input";
@@ -44,4 +45,7 @@
 @import "avatar";
 @import "color-picker";
 @import "auto-complete";
+@import "divider";
 @import "anchor";
+@import "time";
+@import "cell";

src/styles/components/input-number.less

@@ -75,7 +75,7 @@
         color: #999;
         user-select: none;
         position: absolute;
-        right: 4px;
+        right: 5px;
         transition: all @transition-time linear;
     }
 

src/styles/components/input.less

@@ -62,6 +62,108 @@
         //    padding-right: 24px;
         //}
     }
+
+    // prefix & suffix
+    &-prefix, &-suffix{
+        width: 32px;
+        height: 100%;
+        text-align: center;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        i{
+            font-size: 16px;
+            line-height: @input-height-base;
+            color: @subsidiary-color;
+        }
+    }
+    &-suffix{
+        left: auto;
+        right: 0;
+    }
+    &-wrapper-small &-prefix, &-wrapper-small &-suffix{
+        i{
+            font-size: 14px;
+            line-height: @input-height-small;
+        }
+    }
+    &-wrapper-large &-prefix, &-wrapper-large &-suffix{
+        i{
+            font-size: 18px;
+            line-height: @input-height-large;
+        }
+    }
+
+    &-with-prefix{
+        padding-left: 32px;
+    }
+    &-with-suffix{
+        padding-right: 32px;
+    }
+
+    // search
+    &-search{
+        cursor: pointer;
+        padding: 0 16px !important;
+        background: @primary-color !important;
+        color: #fff !important;
+        border-color: @primary-color !important;
+        transition: all @transition-time @ease-in-out;
+        position: relative;
+        z-index: 2;
+
+        i{
+            font-size: 16px;
+        }
+
+        &:hover{
+            background: tint(@primary-color, 20%) !important;
+            border-color: tint(@primary-color, 20%) !important;
+        }
+        &:active{
+            background: shade(@primary-color, 5%) !important;
+            border-color: shade(@primary-color, 5%) !important;
+        }
+
+        &-icon{
+            cursor: pointer;
+            transition: color @transition-time @ease-in-out;
+            &:hover{
+                color: inherit;
+            }
+        }
+
+        &:before{
+            content: '';
+            display: block;
+            width: 1px;
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            background: inherit;
+        }
+    }
+    &-wrapper-small &-search{
+        padding: 0 12px !important;
+        i{
+            font-size: 14px;
+        }
+    }
+    &-wrapper-large &-search{
+        padding: 0 20px !important;
+        i{
+            font-size: 18px;
+        }
+    }
+    &-with-search{
+        &:hover{
+            .@{input-prefix-cls} {
+                border-color: tint(@primary-color, 20%);
+            }
+        }
+    }
 }
 
 .@{input-prefix-cls}-group{

src/styles/components/menu.less

@@ -66,6 +66,12 @@
         cursor: pointer;
         transition: all @transition-time @ease-in-out;
     }
+    a&-item{
+        color: inherit;
+        &:hover, &:active{
+            color: inherit;
+        }
+    }
     &-item > i{
         margin-right: 6px;
     }

src/styles/components/message.less

@@ -2,7 +2,7 @@
 @icon-prefix-cls: ~"@{css-prefix}icon";
 
 .@{message-prefix-cls} {
-    font-size: @font-size-small;
+    font-size: @font-size-base;
     position: fixed;
     z-index: @zindex-message;
     width: 100%;
@@ -22,7 +22,7 @@
         &-close {
             position: absolute;
             right: 4px;
-            top: 9px;
+            top: 10px;
             color: #999;
             outline: none;
 
@@ -70,9 +70,13 @@
     }
 
     .@{icon-prefix-cls} {
-        margin-right: 8px;
-        font-size: 14px;
-        top: 1px;
-        position: relative;
+        margin-right: 4px;
+        font-size: @font-size-large;
+        vertical-align: middle;
+    }
+    &-custom-content{
+        span{
+            vertical-align: middle;
+        }
     }
 }

src/styles/components/modal.less

@@ -39,6 +39,22 @@
         border: 0;
         border-radius: @border-radius-base;
         background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
+        &-drag{
+            position: absolute;
+            .@{modal-prefix-cls}-header{
+                cursor: move;
+            }
+        }
+        &-dragging{
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+        }
     }
 
     &-header {
@@ -46,6 +62,7 @@
     }
 
     &-close {
+        z-index: 1;
         .content-close(1px, 31px);
     }
 
@@ -64,6 +81,46 @@
             margin-bottom: 0;
         }
     }
+
+    &-fullscreen{
+        width: 100% !important;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+
+        @modal-header-height: 51px;
+        @modal-footer-height: 61px;
+
+        .@{modal-prefix-cls}-content{
+            width: 100%;
+            border-radius: 0;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+        }
+
+        .@{modal-prefix-cls}-body{
+            width: 100%;
+            overflow: auto;
+            position: absolute;
+            top: @modal-header-height;
+            bottom: @modal-footer-height;
+        }
+        &-no-header .@{modal-prefix-cls}-body{
+            top: 0;
+        }
+        &-no-footer .@{modal-prefix-cls}-body{
+            bottom: 0;
+        }
+        .@{modal-prefix-cls}-footer{
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+        }
+    }
+    &-no-mask{
+        pointer-events: none;
+    }
 }
 
 @media (max-width: 768px) {
@@ -81,33 +138,13 @@
 .@{confirm-prefix-cls} {
     padding: 0 4px;
     &-head {
-
-        &-title {
-            display: inline-block;
-            font-size: @font-size-base;
-            color: @title-color;
-            font-weight: 700;
-        }
-    }
-
-    &-body{
-        margin-top: 6px;
-        padding-left: 48px;
-        padding-top: 18px;
-        font-size: @font-size-small;
-        color: @text-color;
-        position: relative;
-
-        &-render{
-            margin: 0;
-            padding: 0;
-        }
-
+        padding: 0 12px 0 0;
         &-icon {
-            font-size: 36px;
-            position: absolute;
-            top: 0;
-            left: 0;
+            display: inline-block;
+            font-size: 28px;
+            vertical-align: middle;
+            position: relative;
+            top: 3px;
 
             &-info {
                 color: @primary-color;
@@ -125,10 +162,31 @@
                 color: @warning-color;
             }
         }
+
+        &-title {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 12px;
+            font-size: @font-size-large;
+            color: @title-color;
+            font-weight: 700;
+        }
+    }
+
+    &-body{
+        padding-left: 42px;
+        font-size: @font-size-base;
+        color: @text-color;
+        position: relative;
+
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
     }
 
     &-footer{
-        margin-top: 40px;
+        margin-top: 20px;
         text-align: right;
 
         button + button {

src/styles/components/notice.less

@@ -31,7 +31,7 @@
 
         &-close {
             position: absolute;
-            right: 16px;
+            right: 8px;
             top: 15px;
             color: #999;
             outline: none;
@@ -89,9 +89,8 @@
 
     &-icon {
         position: absolute;
-        left: 20px;
-        margin-top: -1px;
-        font-size: 16px;
+        left: 16px;
+        font-size: @font-size-large;
 
         &-success {
             color: @success-color;
@@ -121,29 +120,4 @@
             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

@@ -24,12 +24,14 @@
         user-select: none;
         cursor: pointer;
         font-family: Arial;
+        font-weight: 500;
         border: 1px solid @border-color-base;
         border-radius: @btn-border-radius;
         //transition: all @transition-time @ease-in-out;
         transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
 
         a {
+            font-family: "Monospaced Number";
             margin: 0 6px;
             text-decoration: none;
             color: @text-color;
@@ -44,11 +46,10 @@
         }
 
         &-active {
-            background-color: @primary-color;
             border-color: @primary-color;
 
             a, &:hover a {
-                color: #fff;
+                color: @primary-color;
             }
         }
     }
@@ -78,18 +79,20 @@
 
     &-item-jump-prev:hover {
         i:after {
-            content: "\F3D2";
+            content: "\F115";
+            margin-left: -8px;
         }
     }
 
     &-item-jump-next:hover {
         i:after {
-            content: "\F3D3";
+            content: "\F11F";
+            margin-left: -8px;
         }
     }
 
     &-prev{
-        margin-right: 8px;
+        margin-right: 4px;
     }
 
     &-item-jump-prev,
@@ -97,16 +100,13 @@
         margin-right: 4px;
     }
 
-    &-next{
-        margin-left: 4px;
-    }
-
     &-prev,
     &-next,
     &-item-jump-prev,
     &-item-jump-next {
         display: inline-block;
         vertical-align: middle;
+        user-select: none;
         //float: left;
         min-width: @btn-circle-size;
         height: @btn-circle-size;
@@ -120,6 +120,10 @@
         border-radius: @btn-border-radius;
         transition: all @transition-time @ease-in-out;
     }
+    &-item-jump-prev,
+    &-item-jump-next{
+        border-color: transparent;
+    }
 
     &-prev,
     &-next {
@@ -224,6 +228,10 @@
             padding: 0 8px 0 2px;
         }
     }
+
+    &-custom-text, &-custom-text:hover{
+        border-color: transparent;
+    }
 }
 
 .@{page-prefix-cls} {

src/styles/components/poptip.less

@@ -1,7 +1,7 @@
 @poptip-prefix-cls: ~"@{css-prefix}poptip";
 @poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
 @poptip-max-width: 250px;
-@poptip-arrow-width: 5px;
+@poptip-arrow-width: 7px;
 @poptip-arrow-outer-width: (@poptip-arrow-width + 1);
 @poptip-distance: @poptip-arrow-width - 1 + 4;
 //@poptip-arrow-color: fadein(@border-color-base, 5%);
@@ -43,6 +43,11 @@
         &-content{
             overflow: auto;
 
+            &-word-wrap{
+                white-space: pre-wrap;
+                text-align: justify;
+            }
+
             &-inner{
                 color: @text-color;
             }

src/styles/components/progress.less

@@ -34,6 +34,7 @@
         background-color: #f3f3f3;
         border-radius: 100px;
         vertical-align: middle;
+        position: relative;
     }
     &-vertical &-inner {
         height: 100%;
@@ -52,10 +53,18 @@
 
     &-bg {
         border-radius: 100px;
-        background-color: @info-color;
+        background-color: @primary-color;
         transition: all @transition-time linear;
         position: relative;
     }
+    &-success-bg{
+        border-radius: 100px;
+        background-color: @success-color;
+        transition: all @transition-time linear;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 
     &-text {
         display: inline-block;
@@ -80,6 +89,13 @@
         }
     }
 
+    &-vertical&-active{
+        .@{progress-prefix-cls}-bg:before {
+            top: auto;
+            animation: ivu-progress-active-vertical 2s @ease-in-out infinite;
+        }
+    }
+
     &-wrong {
         .@{progress-prefix-cls}-bg {
             background-color: @error-color;
@@ -109,3 +125,14 @@
         width: 100%;
     }
 }
+
+@keyframes ivu-progress-active-vertical {
+    0% {
+        opacity: .3;
+        height: 0;
+    }
+    100% {
+        opacity: 0;
+        height: 100%;
+    }
+}