From e99320431095b04b723424f92c0d89efd97810d7 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 31 May 2017 13:59:14 +0800
Subject: [PATCH 01/23] fixed #978

---
 examples/routers/select.vue      | 304 +++++++++++++++----------------
 src/components/select/select.vue |  13 +-
 2 files changed, 159 insertions(+), 158 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index b2986b89..90a52417 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -1,166 +1,166 @@
-<!--<template>-->
-    <!--<Row>-->
-        <!--<i-col span="4">{{model}}</i-col>-->
-        <!--<i-col span="8">-->
-            <!--<i-select v-model="model" :label="['L Alabama', 'L Hawaii']" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>-->
-                <!--<i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>-->
-            <!--</i-select>-->
-        <!--</i-col>-->
-    <!--</Row>-->
-<!--</template>-->
-
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-<!--//                model: 'Alabama',-->
-                <!--model: ['Alabama', 'Hawaii'],-->
-                <!--options: [-->
-
-                <!--],-->
-                <!--list: [],-->
-                <!--loading: false,-->
-                <!--states: ["Al", "Alabama", "Alaska", "Arizona",-->
-                    <!--"Arkansas", "California", "Colorado",-->
-                    <!--"Connecticut", "Delaware", "Florida",-->
-                    <!--"Georgia", "Hawaii", "Idaho", "Illinois",-->
-                    <!--"Indiana", "Iowa", "Kansas", "Kentucky",-->
-                    <!--"Louisiana", "Maine", "Maryland",-->
-                    <!--"Massachusetts", "Michigan", "Minnesota",-->
-                    <!--"Mississippi", "Missouri", "Montana",-->
-                    <!--"Nebraska", "Nevada", "New Hampshire",-->
-                    <!--"New Jersey", "New Mexico", "New York",-->
-                    <!--"North Carolina", "North Dakota", "Ohio",-->
-                    <!--"Oklahoma", "Oregon", "Pennsylvania",-->
-                    <!--"Rhode Island", "South Carolina",-->
-                    <!--"South Dakota", "Tennessee", "Texas",-->
-                    <!--"Utah", "Vermont", "Virginia",-->
-                    <!--"Washington", "West Virginia", "Wisconsin",-->
-                    <!--"Wyoming"]-->
-            <!--}-->
-        <!--},-->
-        <!--mounted () {-->
-            <!--this.options = [-->
-<!--//                {-->
-<!--//                    label: '全部',-->
-<!--//                    value: 0-->
-<!--//                },{-->
-<!--//                    label: '苹果',-->
-<!--//                    value: 1-->
-<!--//                },{-->
-<!--//                    label: '香蕉',-->
-<!--//                    value: 2-->
-<!--//                },{-->
-<!--//                    label: '西瓜',-->
-<!--//                    value: 3-->
-<!--//                }-->
-            <!--];-->
-        <!--},-->
-        <!--methods: {-->
-            <!--handleAdd () {-->
-                <!--this.options = [-->
-                    <!--{-->
-                        <!--label: '全部',-->
-                        <!--value: 0-->
-                    <!--},{-->
-                        <!--label: '苹果',-->
-                        <!--value: 1-->
-                    <!--},{-->
-                        <!--label: '香蕉',-->
-                        <!--value: 2-->
-                    <!--},{-->
-                        <!--label: '西瓜',-->
-                        <!--value: 3-->
-                    <!--}-->
-                <!--]-->
-            <!--},-->
-            <!--remoteMethod (query) {-->
-                <!--console.log(13)-->
-                <!--if (query !== '') {-->
-                    <!--this.loading = true;-->
-                    <!--setTimeout(() => {-->
-                        <!--this.loading = false;-->
-                        <!--this.options = this.list.filter(item => {-->
-                            <!--return item.label.toLowerCase()-->
-                                    <!--.indexOf(query.toLowerCase()) > -1;-->
-                        <!--});-->
-                    <!--}, 500);-->
-                <!--} else {-->
-                    <!--this.options = [];-->
-                <!--}-->
-            <!--},-->
-            <!--handleInput () {-->
-<!--//                console.log(1)-->
-            <!--}-->
-        <!--},-->
-        <!--mounted () {-->
-            <!--this.list = this.states.map(item => {-->
-                <!--return {-->
-                    <!--value: item,-->
-                    <!--label: 'L ' + item-->
-                <!--};-->
-            <!--});-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
-
-
 <template>
-    <div>
-        <Row style="width: 400px;">
-            <i-col span="12" style="padding-right:10px">
-                <Select v-model="model11" filterable>
-                    <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
-                </Select>
-            </i-col>
-            <i-col span="12">
-                <Select v-model="model12" filterable multiple>
-                    <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
-                </Select>
-            </i-col>
-        </Row>
-        <Button @click="handleSet">set</Button>
-    </div>
+    <Row>
+        <i-col span="4">{{model}}</i-col>
+        <i-col span="8">
+            <i-select v-model="model" multiple @input="handleInput" filterable remote :remote-method="remoteMethod" :loading="loading" clearable>
+                <i-option v-for="option in options" :value="option.value" :key="new Date()">{{option.label}}</i-option>
+            </i-select>
+        </i-col>
+    </Row>
 </template>
+
 <script>
     export default {
         data () {
             return {
-                cityList: [
-                    {
-                        value: 'beijing',
-                        label: '北京市'
-                    },
-                    {
-                        value: 'shanghai',
-                        label: '上海市'
-                    },
-                    {
-                        value: 'shenzhen',
-                        label: '深圳市'
-                    },
-                    {
-                        value: 'hangzhou',
-                        label: '杭州市'
-                    },
-                    {
-                        value: 'nanjing',
-                        label: '南京市'
-                    },
-                    {
-                        value: 'chongqing',
-                        label: '重庆市'
-                    }
+//                model: 'Alabama',
+                model: ['Alabama', 'Hawaii'],
+                options: [
+
                 ],
-                model11: '',
-                model12: []
+                list: [],
+                loading: false,
+                states: ["Al", "Alabama", "Alaska", "Arizona",
+                    "Arkansas", "California", "Colorado",
+                    "Connecticut", "Delaware", "Florida",
+                    "Georgia", "Hawaii", "Idaho", "Illinois",
+                    "Indiana", "Iowa", "Kansas", "Kentucky",
+                    "Louisiana", "Maine", "Maryland",
+                    "Massachusetts", "Michigan", "Minnesota",
+                    "Mississippi", "Missouri", "Montana",
+                    "Nebraska", "Nevada", "New Hampshire",
+                    "New Jersey", "New Mexico", "New York",
+                    "North Carolina", "North Dakota", "Ohio",
+                    "Oklahoma", "Oregon", "Pennsylvania",
+                    "Rhode Island", "South Carolina",
+                    "South Dakota", "Tennessee", "Texas",
+                    "Utah", "Vermont", "Virginia",
+                    "Washington", "West Virginia", "Wisconsin",
+                    "Wyoming"]
             }
         },
+        mounted () {
+            this.options = [
+//                {
+//                    label: '全部',
+//                    value: 0
+//                },{
+//                    label: '苹果',
+//                    value: 1
+//                },{
+//                    label: '香蕉',
+//                    value: 2
+//                },{
+//                    label: '西瓜',
+//                    value: 3
+//                }
+            ];
+        },
         methods: {
-            handleSet () {
-                this.model11 = 'shanghai';
-//                this.model12 = ['beijing'];
+            handleAdd () {
+                this.options = [
+                    {
+                        label: '全部',
+                        value: 0
+                    },{
+                        label: '苹果',
+                        value: 1
+                    },{
+                        label: '香蕉',
+                        value: 2
+                    },{
+                        label: '西瓜',
+                        value: 3
+                    }
+                ]
+            },
+            remoteMethod (query) {
+                console.log(13)
+                if (query !== '') {
+                    this.loading = true;
+                    setTimeout(() => {
+                        this.loading = false;
+                        this.options = this.list.filter(item => {
+                            return item.label.toLowerCase()
+                                    .indexOf(query.toLowerCase()) > -1;
+                        });
+                    }, 500);
+                } else {
+                    this.options = [];
+                }
+            },
+            handleInput () {
+//                console.log(1)
             }
+        },
+        mounted () {
+            this.list = this.states.map(item => {
+                return {
+                    value: item,
+                    label: 'L ' + item
+                };
+            });
         }
     }
 </script>
+
+
+<!--<template>-->
+    <!--<div>-->
+        <!--<Row style="width: 400px;">-->
+            <!--<i-col span="12" style="padding-right:10px">-->
+                <!--<Select v-model="model11" filterable>-->
+                    <!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
+                <!--</Select>-->
+            <!--</i-col>-->
+            <!--<i-col span="12">-->
+                <!--<Select v-model="model12" filterable multiple>-->
+                    <!--<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>-->
+                <!--</Select>-->
+            <!--</i-col>-->
+        <!--</Row>-->
+        <!--<Button @click="handleSet">set</Button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--cityList: [-->
+                    <!--{-->
+                        <!--value: 'beijing',-->
+                        <!--label: '北京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shanghai',-->
+                        <!--label: '上海市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'shenzhen',-->
+                        <!--label: '深圳市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'hangzhou',-->
+                        <!--label: '杭州市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'nanjing',-->
+                        <!--label: '南京市'-->
+                    <!--},-->
+                    <!--{-->
+                        <!--value: 'chongqing',-->
+                        <!--label: '重庆市'-->
+                    <!--}-->
+                <!--],-->
+                <!--model11: '',-->
+                <!--model12: []-->
+            <!--}-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleSet () {-->
+                <!--this.model11 = 'shanghai';-->
+<!--//                this.model12 = ['beijing'];-->
+            <!--}-->
+        <!--}-->
+    <!--}-->
+<!--</script>-->
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index a14fe109..3c258165 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -127,7 +127,8 @@
                 inputLength: 20,
                 notFound: false,
                 slotChangeDuration: false,    // if slot change duration and in multiple, set true and after slot change, set false
-                model: this.value
+                model: this.value,
+                currentLabel: this.label
             };
         },
         computed: {
@@ -593,15 +594,15 @@
             if (this.remote) {
                 if (!this.multiple && this.model !== '') {
                     this.selectToChangeQuery = true;
-                    if (this.label === '') this.label = this.model;
-                    this.lastQuery = this.label;
-                    this.query = this.label;
+                    if (this.currentLabel === '') this.currentLabel = this.model;
+                    this.lastQuery = this.currentLabel;
+                    this.query = this.currentLabel;
                 } else if (this.multiple && this.model.length) {
-                    if (this.label.length !== this.model.length) this.label = this.model;
+                    if (this.currentLabel.length !== this.model.length) this.currentLabel = this.model;
                     this.selectedMultiple = this.model.map((item, index) => {
                         return {
                             value: item,
-                            label: this.label[index]
+                            label: this.currentLabel[index]
                         };
                     });
                 }

From e0bd31a64c8ea0452dba1c3e6b4f9a40594f587a Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 31 May 2017 15:49:41 +0800
Subject: [PATCH 02/23] update Message

Message add closable func, and update params
---
 examples/routers/message.vue                  | 12 ++++
 src/components/base/notification/notice.vue   | 21 +++++--
 .../base/notification/notification.vue        |  1 +
 src/components/message/index.js               | 56 +++++++++++++++----
 src/components/notice/index.js                |  3 +-
 src/styles/components/message.less            | 21 +++++++
 6 files changed, 97 insertions(+), 17 deletions(-)

diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 4ff90ec4..19644db9 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <i-button @click.native="info">显示普通提示</i-button>
         <i-button @click.native="success">显示成功提示</i-button>
         <i-button @click.native="warning">显示警告提示</i-button>
         <i-button @click.native="error">显示错误提示</i-button>
@@ -9,6 +10,17 @@
 <script>
     export default {
         methods: {
+            info () {
+//                this.$Message.info('这是一条普通提示');
+                this.$Message.success({
+                    content: '这是一条普通提示2',
+                    duration: 500,
+                    onClose () {
+                        console.log(123)
+                    },
+                    closable: true
+                })
+            },
             success () {
                 this.$Message.success('这是一条成功的提示');
             },
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index dfa0c652..bec1f2fe 100644
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@@ -1,10 +1,20 @@
 <template>
     <transition :name="transitionName">
         <div :class="classes" :style="styles">
-            <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
-            <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
-            </a>
+            <template v-if="type === 'notice'">
+                <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+                <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                    <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                </a>
+            </template>
+            <template v-if="type === 'message'">
+                <div :class="[baseClass + '-content']" ref="content">
+                    <div :class="[baseClass + '-content-text']" v-html="content"></div>
+                    <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                        <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                    </a>
+                </div>
+            </template>
         </div>
     </transition>
 </template>
@@ -19,6 +29,9 @@
                 type: Number,
                 default: 1.5
             },
+            type: {
+                type: String
+            },
             content: {
                 type: String,
                 default: ''
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index 9695b55e..f3750f6b 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -5,6 +5,7 @@
             :key="notice.name"
             :prefix-cls="prefixCls"
             :styles="notice.styles"
+            :type="notice.type"
             :content="notice.content"
             :duration="notice.duration"
             :closable="notice.closable"
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 3b9847ed..60d012b1 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -28,7 +28,7 @@ function getMessageInstance () {
     return messageInstance;
 }
 
-function notice (content, duration = defaultDuration, type, onClose) {
+function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
     if (!onClose) {
         onClose = function () {
 
@@ -52,7 +52,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
                 <span>${content}</span>
             </div>
         `,
-        onClose: onClose
+        onClose: onClose,
+        closable: closable,
+        type: 'message'
     });
 
     // 用于手动消除
@@ -66,20 +68,50 @@ function notice (content, duration = defaultDuration, type, onClose) {
 }
 
 export default {
-    info (content, duration, onClose) {
-        return notice(content, duration, 'info', onClose);
+    info (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'info', options.onClose, options.closable);
     },
-    success (content, duration, onClose) {
-        return notice(content, duration, 'success', onClose);
+    success (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'success', options.onClose, options.closable);
     },
-    warning (content, duration, onClose) {
-        return notice(content, duration, 'warning', onClose);
+    warning (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
     },
-    error (content, duration, onClose) {
-        return notice(content, duration, 'error', onClose);
+    error (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'error', options.onClose, options.closable);
     },
-    loading (content, duration, onClose) {
-        return notice(content, duration, 'loading', onClose);
+    loading (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
     },
     config (options) {
         if (options.top) {
diff --git a/src/components/notice/index.js b/src/components/notice/index.js
index 13927748..d6104d60 100644
--- a/src/components/notice/index.js
+++ b/src/components/notice/index.js
@@ -71,7 +71,8 @@ function notice (type, options) {
         transitionName: 'move-notice',
         content: content,
         onClose: onClose,
-        closable: true
+        closable: true,
+        type: 'notice'
     });
 }
 
diff --git a/src/styles/components/message.less b/src/styles/components/message.less
index 7196d63b..6e706f12 100644
--- a/src/styles/components/message.less
+++ b/src/styles/components/message.less
@@ -14,6 +14,18 @@
         vertical-align: middle;
         position: absolute;
         left: 50%;
+
+        &-close {
+            position: absolute;
+            right: 4px;
+            top: 9px;
+            color: #999;
+            outline: none;
+
+            i.@{icon-prefix-cls}{
+                .close-base(-3px);
+            }
+        }
     }
 
     &-notice-content {
@@ -25,6 +37,15 @@
         box-shadow: @shadow-base;
         background: #fff;
         display: block;
+        &-text{
+            display: inline-block;
+        }
+    }
+
+    &-notice-closable{
+        .@{message-prefix-cls}-notice-content-text{
+            padding-right: 32px;
+        }
     }
 
     &-success .@{icon-prefix-cls} {

From a50a847ca5f6155623d36dcdd7ec7e6d59b36a6d Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 31 May 2017 16:14:25 +0800
Subject: [PATCH 03/23] update message

---
 src/components/message/index.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/message/index.js b/src/components/message/index.js
index 60d012b1..70dea763 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -29,11 +29,6 @@ function getMessageInstance () {
 }
 
 function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
-    if (!onClose) {
-        onClose = function () {
-
-        };
-    }
     const iconType = iconTypes[type];
 
     // if loading

From 9b2034a5abb7a87b17beb7bf845a0aae23aa36bc Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 31 May 2017 16:40:24 +0800
Subject: [PATCH 04/23] release 2.0.0-rc.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index befcef38..18419777 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "2.0.0-rc.14",
+  "version": "2.0.0-rc.15",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

From e8e1677b47576ae728ff0d77a8e3d229f2fb7624 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 10:48:03 +0800
Subject: [PATCH 05/23] Message & Notice support SSR

---
 build/webpack.dev.config.js               |  3 +-
 examples/routers/notice.vue               | 43 +++++++++++++++++------
 src/components/base/notification/index.js | 19 +++++-----
 3 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/build/webpack.dev.config.js b/build/webpack.dev.config.js
index 5803c51e..8c07d166 100644
--- a/build/webpack.dev.config.js
+++ b/build/webpack.dev.config.js
@@ -27,7 +27,8 @@ module.exports = merge(webpackBaseConfig, {
     resolve: {
         alias: {
             iview: '../../src/index',
-            vue: 'vue/dist/vue.js'
+            // vue: 'vue/dist/vue.js'
+            vue: 'vue/dist/vue.runtime.js'
         }
     },
     plugins: [
diff --git a/examples/routers/notice.vue b/examples/routers/notice.vue
index aa0f4e0b..d1a76c58 100644
--- a/examples/routers/notice.vue
+++ b/examples/routers/notice.vue
@@ -1,21 +1,44 @@
 <template>
-    <i-button type="primary" @click.native="time">打开提醒</i-button>
+    <div>
+        <p>带描述信息</p>
+        <Button @click="info(false)">消息</Button>
+        <Button @click="success(false)">成功</Button>
+        <Button @click="warning(false)">警告</Button>
+        <Button @click="error(false)">错误</Button>
+        <p>仅标题</p>
+        <Button @click="info(true)">消息</Button>
+        <Button @click="success(true)">成功</Button>
+        <Button @click="warning(true)">警告</Button>
+        <Button @click="error(true)">错误</Button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
-            time () {
-                this.$Notice.open({
+            info (nodesc) {
+                this.$Notice.info({
                     title: '这是通知标题',
-                    desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。'
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            success (nodesc) {
+                this.$Notice.success({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            warning (nodesc) {
+                this.$Notice.warning({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                });
+            },
+            error (nodesc) {
+                this.$Notice.error({
+                    title: '这是通知标题',
+                    desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
                 });
             }
-        },
-        mounted () {
-            this.$Notice.config({
-                top: 150,
-                duration: 30
-            });
         }
     }
 </script>
diff --git a/src/components/base/notification/index.js b/src/components/base/notification/index.js
index 7ab2c625..794bac56 100644
--- a/src/components/base/notification/index.js
+++ b/src/components/base/notification/index.js
@@ -10,15 +10,18 @@ Notification.newInstance = properties => {
         props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
     });
 
-    const div = document.createElement('div');
-    div.innerHTML = `<notification${props}></notification>`;
-    document.body.appendChild(div);
-
-    const notification = new Vue({
-        el: div,
+    const Instance = new Vue({
         data: _props,
-        components: { Notification }
-    }).$children[0];
+        render (h) {
+            return h(Notification, {
+                props: _props
+            })
+        }
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const notification = Instance.$children[0];
 
     return {
         notice (noticeProps) {

From dd28e57f2726346fc32bae4088345da29b3d400c Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 10:52:27 +0800
Subject: [PATCH 06/23] update Notice

---
 src/components/base/notification/index.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/base/notification/index.js b/src/components/base/notification/index.js
index 794bac56..b9453cf8 100644
--- a/src/components/base/notification/index.js
+++ b/src/components/base/notification/index.js
@@ -1,21 +1,15 @@
 import Notification from './notification.vue';
 import Vue from 'vue';
-import { camelcaseToHyphen } from '../../../utils/assist';
 
 Notification.newInstance = properties => {
     const _props = properties || {};
 
-    let props = '';
-    Object.keys(_props).forEach(prop => {
-        props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
-    });
-
     const Instance = new Vue({
         data: _props,
         render (h) {
             return h(Notification, {
                 props: _props
-            })
+            });
         }
     });
 

From 24c8f4eaba6250092d30f0c7b2282a3a7f5797e6 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 11:07:30 +0800
Subject: [PATCH 07/23] LoadingBar support SSR

---
 src/components/loading-bar/loading-bar.js | 27 +++++++++++------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/loading-bar/loading-bar.js b/src/components/loading-bar/loading-bar.js
index e978fb48..eb30043f 100644
--- a/src/components/loading-bar/loading-bar.js
+++ b/src/components/loading-bar/loading-bar.js
@@ -1,24 +1,21 @@
 import LoadingBar from './loading-bar.vue';
 import Vue from 'vue';
-import { camelcaseToHyphen } from '../../utils/assist';
 
 LoadingBar.newInstance = properties => {
     const _props = properties || {};
 
-    let props = '';
-    Object.keys(_props).forEach(prop => {
-        props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
+    const Instance = new Vue({
+        data: _props,
+        render (h) {
+            return h(LoadingBar, {
+                props: _props
+            });
+        }
     });
 
-    const div = document.createElement('div');
-    div.innerHTML = `<loading-bar${props}></loading-bar>`;
-    document.body.appendChild(div);
-
-    const loading_bar = new Vue({
-        el: div,
-        data: _props,
-        components: { LoadingBar }
-    }).$children[0];
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const loading_bar = Instance.$children[0];
 
     return {
         update (options) {
@@ -34,7 +31,9 @@ LoadingBar.newInstance = properties => {
         },
         component: loading_bar,
         destroy () {
-            document.body.removeChild(div);
+            setTimeout(function() {
+                document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0].parentElement);
+            }, 500);
         }
     };
 };

From 77cf1cd5738221778b0a6b180ddb787c66429740 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 12:32:00 +0800
Subject: [PATCH 08/23] $Modal support SSR

---
 examples/routers/modal.vue      |  56 +++++++-----
 src/components/modal/confirm.js | 145 +++++++++++++++++++++++++-------
 src/components/modal/modal.vue  |   2 +-
 3 files changed, 148 insertions(+), 55 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 7e9cae22..335473d0 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,33 +1,45 @@
 <template>
     <div>
-        <Button type="primary" @click="modal1 = true">显示对话框</Button>
-        
-        <Modal
-                v-model="modal1"
-                :title="title"
-                @on-ok="ok"
-                :mask-closable="false"
-                @on-cancel="cancel">
-            <p><Button type="ghost" @click="title = '这是标题'">设置标题</Button> {{title}}</p>
-            <p>对话框内容</p>
-            <p>对话框内容</p>
-        </Modal>
+        <Button @click="confirm">标准</Button>
+        <Button @click="custom">自定义按钮文字</Button>
+        <Button @click="async">异步关闭</Button>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                modal1: true,
-                title:''
-            }
-        },
         methods: {
-            ok () {
-                this.$Message.info('点击了确定');
+            confirm () {
+                this.$Modal.confirm({
+                    title: '确认对话框标题',
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    onOk: () => {
+                        this.$Message.info('点击了确定');
+                    },
+                    onCancel: () => {
+                        this.$Message.info('点击了取消');
+                    }
+                });
             },
-            cancel () {
-                this.$Message.info('点击了取消');
+            custom () {
+                this.$Modal.confirm({
+                    title: '确认对话框标题',
+                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    okText: 'OK',
+                    cancelText: 'Cancel'
+                });
+            },
+            async () {
+                this.$Modal.confirm({
+                    title: '确认对话框标题',
+                    content: '<p>对话框将在 2秒 后关闭</p>',
+                    loading: true,
+                    onOk: () => {
+                        setTimeout(() => {
+                            this.$Modal.remove();
+                            this.$Message.info('异步关闭了对话框');
+                        }, 2000);
+                    }
+                });
             }
         }
     }
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index 04ccb5c9..e5681ddb 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -1,8 +1,6 @@
 import Vue from 'vue';
 import Modal from './modal.vue';
-import Icon from '../icon/icon.vue';
-import iButton from '../button/button.vue';
-import { camelcaseToHyphen } from '../../utils/assist';
+import Button from '../button/button.vue';
 import Locale from '../../mixins/locale';
 
 const prefixCls = 'ivu-modal-confirm';
@@ -10,36 +8,34 @@ const prefixCls = 'ivu-modal-confirm';
 Modal.newInstance = properties => {
     const _props = properties || {};
 
-    let props = '';
-    Object.keys(_props).forEach(prop => {
-        props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
-    });
+    // let props = '';
+    // Object.keys(_props).forEach(prop => {
+    //     props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
+    // });
+    //
+    // const div = document.createElement('div');
+    // div.innerHTML = `
+    //     <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
+    //         <div class="${prefixCls}">
+    //             <div class="${prefixCls}-head">
+    //                 <div class="${prefixCls}-head-title" v-html="title"></div>
+    //             </div>
+    //             <div class="${prefixCls}-body">
+    //                 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
+    //                 <div v-html="body"></div>
+    //             </div>
+    //             <div class="${prefixCls}-footer">
+    //                 <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
+    //                 <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
+    //             </div>
+    //         </div>
+    //     </Modal>
+    // `;
+    // document.body.appendChild(div);
 
-    const div = document.createElement('div');
-    div.innerHTML = `
-        <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
-            <div class="${prefixCls}">
-                <div class="${prefixCls}-head">
-                    <div class="${prefixCls}-head-title" v-html="title"></div>
-                </div>
-                <div class="${prefixCls}-body">
-                    <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
-                    <div v-html="body"></div>
-                </div>
-                <div class="${prefixCls}-footer">
-                    <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
-                    <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
-                </div>
-            </div>
-        </Modal>
-    `;
-    document.body.appendChild(div);
-
-    const modal = new Vue({
-        el: div,
+    const Instance = new Vue({
         mixins: [ Locale ],
-        components: { Modal, iButton, Icon },
-        data: Object.assign(_props, {
+        data: Object.assign({}, _props, {
             visible: false,
             width: 416,
             title: '',
@@ -53,6 +49,87 @@ Modal.newInstance = properties => {
             buttonLoading: false,
             scrollable: false
         }),
+        render (h) {
+            let footerVNodes = [];
+            if (this.showCancel) {
+                footerVNodes.push(h(Button, {
+                    props: {
+                        type: 'text',
+                        size: 'large'
+                    },
+                    on: {
+                        click: this.cancel
+                    }
+                }, this.localeCancelText));
+            }
+            footerVNodes.push(h(Button, {
+                props: {
+                    type: 'primary',
+                    size: 'large',
+                    loading: this.buttonLoading
+                },
+                on: {
+                    click: this.ok
+                }
+            }, this.localeOkText));
+
+            return h(Modal, {
+                props: Object.assign({}, _props, {
+                    width: this.width,
+                    scrollable: this.scrollable
+                }),
+                domProps: {
+                    value: this.visible
+                },
+                on: {
+                    input: (status) => {
+                        this.visible = status;
+                    }
+                }
+            }, [
+                h('div', {
+                    attrs: {
+                        class: prefixCls
+                    }
+                }, [
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-head`
+                        }
+                    }, h('div', {
+                        attrs: {
+                            class: `${prefixCls}-head-title`
+                        },
+                        domProps: {
+                            innerHTML: this.title
+                        }
+                    })),
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-body`
+                        }
+                    }, [
+                        h('div', {
+                            class: this.iconTypeCls
+                        }, [
+                            h('i', {
+                                class: this.iconNameCls
+                            })
+                        ]),
+                        h('div', {
+                            domProps: {
+                                innerHTML: this.body
+                            }
+                        })
+                    ]),
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-footer`
+                        }
+                    }, footerVNodes)
+                ])
+            ]);
+        },
         computed: {
             iconTypeCls () {
                 return [
@@ -111,7 +188,11 @@ Modal.newInstance = properties => {
             onCancel () {},
             onRemove () {}
         }
-    }).$children[0];
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const modal = Instance.$children[0];
 
     return {
         show (props) {
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index b27b6ac6..7840e9bb 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-transfer-dom>
+    <div>
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" @click="mask"></div>
         </transition>

From 48e7799edf1a3d707f0ddc0ae7fb4205785fdf2b Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 12:36:44 +0800
Subject: [PATCH 09/23] update $Modal

---
 src/components/modal/confirm.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index e5681ddb..edef2fc1 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -96,14 +96,16 @@ Modal.newInstance = properties => {
                         attrs: {
                             class: `${prefixCls}-head`
                         }
-                    }, h('div', {
-                        attrs: {
-                            class: `${prefixCls}-head-title`
-                        },
-                        domProps: {
-                            innerHTML: this.title
-                        }
-                    })),
+                    }, [
+                        h('div', {
+                            attrs: {
+                                class: `${prefixCls}-head-title`
+                            },
+                            domProps: {
+                                innerHTML: this.title
+                            }
+                        })
+                    ]),
                     h('div', {
                         attrs: {
                             class: `${prefixCls}-body`

From 1c82a9abbf1c64ae33b72ca2822c530f4ca468cb Mon Sep 17 00:00:00 2001
From: Lawrence Lee <lawrence.lee@foxmail.com>
Date: Thu, 1 Jun 2017 18:05:20 +0800
Subject: [PATCH 10/23] bugfix: notice & message 's destroy method.

---
 examples/routers/notice.vue               | 4 ++++
 src/components/base/notification/index.js | 4 ++--
 src/components/message/index.js           | 2 +-
 src/components/notice/index.js            | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/routers/notice.vue b/examples/routers/notice.vue
index d1a76c58..d09dd088 100644
--- a/examples/routers/notice.vue
+++ b/examples/routers/notice.vue
@@ -10,6 +10,7 @@
         <Button @click="success(true)">成功</Button>
         <Button @click="warning(true)">警告</Button>
         <Button @click="error(true)">错误</Button>
+        <Button @click="destroy()">销毁</Button>
     </div>
 </template>
 <script>
@@ -38,6 +39,9 @@
                     title: '这是通知标题',
                     desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
                 });
+            },
+            destroy () {
+                this.$Notice.destroy();
             }
         }
     }
diff --git a/src/components/base/notification/index.js b/src/components/base/notification/index.js
index b9453cf8..0c06aa27 100644
--- a/src/components/base/notification/index.js
+++ b/src/components/base/notification/index.js
@@ -25,10 +25,10 @@ Notification.newInstance = properties => {
             notification.close(name);
         },
         component: notification,
-        destroy () {
+        destroy (element) {
             notification.closeAll();
             setTimeout(function() {
-                document.body.removeChild(document.getElementsByClassName('ivu-message')[0].parentElement);
+                document.body.removeChild(document.getElementsByClassName(element)[0]);
             }, 500);
         }
     };
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 70dea763..06bde55a 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -119,6 +119,6 @@ export default {
     destroy () {
         let instance = getMessageInstance();
         messageInstance = null;
-        instance.destroy();
+        instance.destroy('ivu-message');
     }
 };
\ No newline at end of file
diff --git a/src/components/notice/index.js b/src/components/notice/index.js
index d6104d60..77362222 100644
--- a/src/components/notice/index.js
+++ b/src/components/notice/index.js
@@ -113,6 +113,6 @@ export default {
     destroy () {
         let instance = getNoticeInstance();
         noticeInstance = null;
-        instance.destroy();
+        instance.destroy('ivu-notice');
     }
 };
\ No newline at end of file

From 4fbcd591837a42e5c429d0ae6cef67e96f749893 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 18:24:55 +0800
Subject: [PATCH 11/23] update

---
 src/components/loading-bar/loading-bar.js |  4 +---
 src/components/modal/confirm.js           | 25 -----------------------
 2 files changed, 1 insertion(+), 28 deletions(-)

diff --git a/src/components/loading-bar/loading-bar.js b/src/components/loading-bar/loading-bar.js
index eb30043f..deea7d3f 100644
--- a/src/components/loading-bar/loading-bar.js
+++ b/src/components/loading-bar/loading-bar.js
@@ -31,9 +31,7 @@ LoadingBar.newInstance = properties => {
         },
         component: loading_bar,
         destroy () {
-            setTimeout(function() {
-                document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0].parentElement);
-            }, 500);
+            document.body.removeChild(document.getElementsByClassName('ivu-loading-bar')[0]);
         }
     };
 };
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index edef2fc1..58edf637 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -8,31 +8,6 @@ const prefixCls = 'ivu-modal-confirm';
 Modal.newInstance = properties => {
     const _props = properties || {};
 
-    // let props = '';
-    // Object.keys(_props).forEach(prop => {
-    //     props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
-    // });
-    //
-    // const div = document.createElement('div');
-    // div.innerHTML = `
-    //     <Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
-    //         <div class="${prefixCls}">
-    //             <div class="${prefixCls}-head">
-    //                 <div class="${prefixCls}-head-title" v-html="title"></div>
-    //             </div>
-    //             <div class="${prefixCls}-body">
-    //                 <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
-    //                 <div v-html="body"></div>
-    //             </div>
-    //             <div class="${prefixCls}-footer">
-    //                 <i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ localeCancelText }}</i-button>
-    //                 <i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
-    //             </div>
-    //         </div>
-    //     </Modal>
-    // `;
-    // document.body.appendChild(div);
-
     const Instance = new Vue({
         mixins: [ Locale ],
         data: Object.assign({}, _props, {

From dce5a3ea6b3e600a2973d0e7b4c17de14615bf68 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Thu, 1 Jun 2017 19:00:37 +0800
Subject: [PATCH 12/23] update Modal

---
 examples/routers/modal.vue     | 21 +++++++++++++++++++++
 src/components/modal/modal.vue |  2 +-
 src/directives/transfer-dom.js |  6 +++++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 335473d0..2dd90860 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -3,11 +3,32 @@
         <Button @click="confirm">标准</Button>
         <Button @click="custom">自定义按钮文字</Button>
         <Button @click="async">异步关闭</Button>
+        <Button type="primary" @click="modal1 = true">显示对话框</Button>
+        <Modal
+                v-model="modal1"
+                title="普通的Modal对话框标题"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                modal1: false
+            }
+        },
         methods: {
+            ok () {
+                this.$Message.info('点击了确定');
+            },
+            cancel () {
+                this.$Message.info('点击了取消');
+            },
             confirm () {
                 this.$Modal.confirm({
                     title: '确认对话框标题',
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 7840e9bb..b27b6ac6 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-transfer-dom>
         <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" @click="mask"></div>
         </transition>
diff --git a/src/directives/transfer-dom.js b/src/directives/transfer-dom.js
index d1357b96..76e6012e 100644
--- a/src/directives/transfer-dom.js
+++ b/src/directives/transfer-dom.js
@@ -18,6 +18,7 @@ const directive = {
     inserted (el, { value }, vnode) {
         el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
         const parentNode = el.parentNode;
+        if (!parentNode) return;
         const home = document.createComment('');
         let hasMovedOut = false;
 
@@ -38,6 +39,7 @@ const directive = {
     componentUpdated (el, { value }) {
         // need to make sure children are done updating (vs. `update`)
         const ref$1 = el.__transferDomData;
+        if (!ref$1) return;
         // homes.get(el)
         const parentNode = ref$1.parentNode;
         const home = ref$1.home;
@@ -59,7 +61,9 @@ const directive = {
         }
     },
     unbind: function unbind (el, binding) {
-        el.className = el.className.replace('v-transfer-dom', '')
+        el.className = el.className.replace('v-transfer-dom', '');
+        const ref$1 = el.__transferDomData;
+        if (!ref$1) return;
         if (el.__transferDomData.hasMovedOut === true) {
             el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
         }

From 144ee9024db5475c2aca6eda0808299d2ed8585a Mon Sep 17 00:00:00 2001
From: Thomas Menga <tom.menga@gmail.com>
Date: Fri, 2 Jun 2017 02:36:16 +0200
Subject: [PATCH 13/23] Add fr-FR.js lang

---
 src/locale/lang/fr-FR.js | 96 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/locale/lang/fr-FR.js

diff --git a/src/locale/lang/fr-FR.js b/src/locale/lang/fr-FR.js
new file mode 100644
index 00000000..f31ef297
--- /dev/null
+++ b/src/locale/lang/fr-FR.js
@@ -0,0 +1,96 @@
+export default {
+    i: {
+        select: {
+            placeholder: 'Sélectionnez',
+            noMatch: 'Aucun résultat',
+            loading: 'Chargement'
+        },
+        table: {
+            noDataText: 'Aucune donnée',
+            noFilteredDataText: 'No filter data',
+            confirmFilter: 'Confirmez',
+            resetFilter: 'Reset',
+            clearFilter: 'Tout'
+        },
+        datepicker: {
+            selectDate: 'Sélectionnez une date',
+            selectTime: 'Sélectionnez une heure',
+            startTime: 'Heure de début',
+            endTime: 'Heure de fin',
+            clear: 'Annuler',
+            ok: 'OK',
+            month: '',
+            month1: 'Janvier',
+            month2: 'Février',
+            month3: 'Mars',
+            month4: 'Avril',
+            month5: 'Mai',
+            month6: 'Juin',
+            month7: 'Juillet',
+            month8: 'Août',
+            month9: 'Septembre',
+            month10: 'Octobre',
+            month11: 'Novembre',
+            month12: 'Decembre',
+            year: '',
+            weeks: {
+                sun: 'Dim',
+                mon: 'Lun',
+                tue: 'Mar',
+                wed: 'Mer',
+                thu: 'Jeu',
+                fri: 'Ven',
+                sat: 'Sam'
+            },
+            months: {
+                m1: 'Jan',
+                m2: 'Fev',
+                m3: 'Mar',
+                m4: 'Avr',
+                m5: 'Mai',
+                m6: 'Jun',
+                m7: 'Jul',
+                m8: 'Aoû',
+                m9: 'Sep',
+                m10: 'Oct',
+                m11: 'Nov',
+                m12: 'Déc'
+            }
+        },
+        transfer: {
+            titles: {
+                source: 'Source',
+                target: 'Cible'
+            },
+            filterPlaceholder: 'Recherche',
+            notFoundText: 'Pas de résultat'
+        },
+        modal: {
+            okText: 'OK',
+            cancelText: 'Annuler'
+        },
+        poptip: {
+            okText: 'OK',
+            cancelText: 'Annuler'
+        },
+        page: {
+            prev: 'Page Précédente',
+            next: 'Page Suivante',
+            total: 'Total',
+            item: 'élément',
+            items: 'éléments',
+            prev5: '5 Pages en Avant',
+            next5: '5 Pages en Arrière',
+            page: '/page',
+            goto: 'Aller à',
+            p: ''
+        },
+        rate: {
+            star: 'Étoile',
+            stars: 'Étoiles'
+        },
+        tree: {
+            emptyText: 'Aucune donnée'
+        }
+    }
+};

From 3ef24d5fe5046ed3ebbfa607d6df20ad4521bbe7 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 10:04:49 +0800
Subject: [PATCH 14/23] $Modal support render, fixed #1041

---
 examples/routers/modal.vue       | 17 ++++++++++-
 src/components/modal/confirm.js  | 48 ++++++++++++++++++++------------
 src/components/modal/index.js    |  8 ++++--
 src/styles/components/modal.less |  5 ++++
 4 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 2dd90860..680b5279 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        {{ val }}
         <Button @click="confirm">标准</Button>
         <Button @click="custom">自定义按钮文字</Button>
         <Button @click="async">异步关闭</Button>
@@ -19,7 +20,8 @@
     export default {
         data () {
             return {
-                modal1: false
+                modal1: false,
+                val: ''
             }
         },
         methods: {
@@ -33,6 +35,19 @@
                 this.$Modal.confirm({
                     title: '确认对话框标题',
                     content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    render: (h) => {
+                        return h('Input', {
+                            props: {
+                                value: this.val,
+                                autofocus: true
+                            },
+                            on: {
+                                input: (val) => {
+                                    this.val = val;
+                                }
+                            }
+                        }, '一个按钮')
+                    },
                     onOk: () => {
                         this.$Message.info('点击了确定');
                     },
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index 58edf637..31f858c6 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -48,6 +48,35 @@ Modal.newInstance = properties => {
                 }
             }, this.localeOkText));
 
+            // render content
+            let body_render;
+            if (this.render) {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body ${prefixCls}-body-render`
+                    }
+                }, [this.render(h)]);
+            } else {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body`
+                    }
+                }, [
+                    h('div', {
+                        class: this.iconTypeCls
+                    }, [
+                        h('i', {
+                            class: this.iconNameCls
+                        })
+                    ]),
+                    h('div', {
+                        domProps: {
+                            innerHTML: this.body
+                        }
+                    })
+                ]);
+            }
+
             return h(Modal, {
                 props: Object.assign({}, _props, {
                     width: this.width,
@@ -81,24 +110,7 @@ Modal.newInstance = properties => {
                             }
                         })
                     ]),
-                    h('div', {
-                        attrs: {
-                            class: `${prefixCls}-body`
-                        }
-                    }, [
-                        h('div', {
-                            class: this.iconTypeCls
-                        }, [
-                            h('i', {
-                                class: this.iconNameCls
-                            })
-                        ]),
-                        h('div', {
-                            domProps: {
-                                innerHTML: this.body
-                            }
-                        })
-                    ]),
+                    body_render,
                     h('div', {
                         attrs: {
                             class: `${prefixCls}-footer`
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index a817fdfd..9fc4c809 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -2,18 +2,20 @@ import Modal from './confirm';
 
 let modalInstance;
 
-function getModalInstance () {
+function getModalInstance (render = undefined) {
     modalInstance = modalInstance || Modal.newInstance({
         closable: false,
         maskClosable: false,
-        footerHide: true
+        footerHide: true,
+        render: render
     });
 
     return modalInstance;
 }
 
 function confirm (options) {
-    let instance  = getModalInstance();
+    const render = ('render' in options) ? options.render : undefined;
+    let instance  = getModalInstance(render);
 
     options.onRemove = function () {
         modalInstance = null;
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 6728b3c6..c68e0a11 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -98,6 +98,11 @@
         color: @text-color;
         position: relative;
 
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
+
         &-icon {
             font-size: 36px;
             position: absolute;

From e4e8711d0f0d35120c8b04f45bb6c2586110561d Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 10:35:18 +0800
Subject: [PATCH 15/23] Table support disableExpand

---
 examples/routers/table.vue    | 3 ++-
 src/components/table/cell.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 6f52f0c1..41b5c4ad 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -84,7 +84,8 @@
                     {
                         name: '张小刚',
                         age: 25,
-                        address: '北京市海淀区西二旗'
+                        address: '北京市海淀区西二旗',
+                        _disableExpand: true
                     },
                     {
                         name: '李小红',
diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue
index 50f5a3b3..abd61bc9 100644
--- a/src/components/table/cell.vue
+++ b/src/components/table/cell.vue
@@ -5,7 +5,7 @@
             <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
         </template>
         <template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
-        <template v-if="renderType === 'expand'">
+        <template v-if="renderType === 'expand' && !row._disableExpand">
             <div :class="expandCls" @click="toggleExpand">
                 <Icon type="ios-arrow-right"></Icon>
             </div>

From 75c32564f0fce4e9e16ba24fc7148e23c364d6d6 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 11:43:02 +0800
Subject: [PATCH 16/23] fixed #646

---
 examples/routers/badge.vue     | 33 ++++++++++-----------------------
 src/components/badge/badge.vue | 14 +++-----------
 2 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/examples/routers/badge.vue b/examples/routers/badge.vue
index 241e2677..7074ba1b 100644
--- a/examples/routers/badge.vue
+++ b/examples/routers/badge.vue
@@ -14,37 +14,24 @@
 </style>
 <template>
     <div>
-        <Badge count="3">
+        <Badge dot :count="count">
             <a href="#" class="demo-badge"></a>
         </Badge>
-        <Badge dot>
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <Badge dot>
-            <Icon type="ios-bell-outline" size="26"></Icon>
-        </Badge>
-        <Badge dot>
-            <a href="#">可以是一个链接</a>
-        </Badge>
-        <Badge count="100">
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <Badge count="1000" overflow-count="999">
-            <a href="#" class="demo-badge"></a>
-        </Badge>
-        <br>
-        <Badge count="10"></Badge>
-        <br><br>
-        <Badge count="20" class-name="demo-badge-alone"></Badge>
+        <Button @click="setCount">set count</Button>
     </div>
 </template>
 <script>
     export default {
         props: {},
         data () {
-            return {};
+            return {
+                count: 50
+            };
         },
-        computed: {},
-        methods: {}
+        methods: {
+            setCount () {
+                this.count = 10;
+            }
+        }
     };
 </script>
\ No newline at end of file
diff --git a/src/components/badge/badge.vue b/src/components/badge/badge.vue
index cc1880d6..688b4626 100644
--- a/src/components/badge/badge.vue
+++ b/src/components/badge/badge.vue
@@ -61,17 +61,9 @@
                 }
 
                 return status;
-            }
-        },
-        data () {
-            return {
-                alone: false
-            };
-        },
-        mounted () {
-            const child_length = this.$refs.badge.children.length;
-            if (child_length === 1) {
-                this.alone = true;
+            },
+            alone () {
+                return this.$slots.default === undefined;
             }
         }
     };

From 841cb1fe67c9b6143a89d30f8c51ef0f4264e57d Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 14:23:34 +0800
Subject: [PATCH 17/23] Menu support transition fixed #514

---
 examples/routers/form.vue                  |  16 +-
 examples/routers/menu.vue                  | 209 ++++-----------------
 src/components/base/collapse-transition.js |  79 ++++++++
 src/components/menu/submenu.vue            |   7 +-
 src/styles/animation/index.less            |   6 +-
 src/utils/assist.js                        |  64 ++++++-
 6 files changed, 195 insertions(+), 186 deletions(-)
 create mode 100644 src/components/base/collapse-transition.js

diff --git a/examples/routers/form.vue b/examples/routers/form.vue
index d494cf3e..b4b3a82e 100644
--- a/examples/routers/form.vue
+++ b/examples/routers/form.vue
@@ -2,12 +2,7 @@
     <div style="width: 300px;">
         <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
             <Form-item label="爱好" prop="interest">
-                <Checkbox-group v-model="formValidate.interest">
-                    <Checkbox label="吃饭"></Checkbox>
-                    <Checkbox label="睡觉"></Checkbox>
-                    <Checkbox label="跑步"></Checkbox>
-                    <Checkbox label="看电影"></Checkbox>
-                </Checkbox-group>
+                <Input v-model="formValidate.interest" number></Input>
             </Form-item>
             <Form-item>
                 <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
@@ -21,12 +16,15 @@
         data () {
             return {
                 formValidate: {
-                    interest: ['吃饭', '跑步']
+                    interest: ''
                 },
                 ruleValidate: {
                     interest: [
-                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
-                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
+                        {
+                            required: true,
+                            type: 'number',
+                            trigger: 'change'
+                        }
                     ]
                 }
             }
diff --git a/examples/routers/menu.vue b/examples/routers/menu.vue
index 3d2f8251..8190a9e6 100644
--- a/examples/routers/menu.vue
+++ b/examples/routers/menu.vue
@@ -1,44 +1,48 @@
 <template>
     <div>
-        <Menu mode="horizontal" :theme="theme1" @on-select="s">
-            <Row type="flex" justify="center" align="middle">
-                <i-col span="12">
-                    <Menu-item name="1">
+        <Row>
+            <i-col span="8">
+            <Menu :theme="theme2">
+                <Submenu name="1">
+                    <template slot="title">
                         <Icon type="ios-paper"></Icon>
                         内容管理
-                    </Menu-item>
-                    <Menu-item name="2">
+                    </template>
+                    <Menu-item name="1-1">文章管理</Menu-item>
+                    <Menu-item name="1-2">评论管理</Menu-item>
+                    <Menu-item name="1-3">举报管理</Menu-item>
+                </Submenu>
+                <Submenu name="2">
+                    <template slot="title">
                         <Icon type="ios-people"></Icon>
                         用户管理
-                    </Menu-item>
-                    <Submenu name="3">
-                        <template slot="title">
-                            <Icon type="stats-bars"></Icon>
-                            统计分析
-                        </template>
-                        <Menu-group title="使用">
-                            <Menu-item name="3-1">新增和启动</Menu-item>
-                            <Menu-item name="3-2">活跃分析</Menu-item>
-                            <Menu-item name="3-3">时段分析</Menu-item>
-                        </Menu-group>
-                        <Menu-group title="留存">
-                            <Menu-item name="3-4">用户留存</Menu-item>
-                            <Menu-item name="3-5">流失用户</Menu-item>
-                        </Menu-group>
-                    </Submenu>
-                    <Menu-item name="4">
-                        <Icon type="settings"></Icon>
-                        综合设置
-                    </Menu-item>
-                </i-col>
-            </Row>
-        </Menu>
+                    </template>
+                    <Menu-item name="2-1">新增用户</Menu-item>
+                    <Menu-item name="2-2">活跃用户</Menu-item>
+                </Submenu>
+                <Submenu name="3">
+                    <template slot="title">
+                        <Icon type="stats-bars"></Icon>
+                        统计分析
+                    </template>
+                    <Menu-group title="使用">
+                        <Menu-item name="3-1">新增和启动</Menu-item>
+                        <Menu-item name="3-2">活跃分析</Menu-item>
+                        <Menu-item name="3-3">时段分析</Menu-item>
+                    </Menu-group>
+                    <Menu-group title="留存">
+                        <Menu-item name="3-4">用户留存</Menu-item>
+                        <Menu-item name="3-5">流失用户</Menu-item>
+                    </Menu-group>
+                </Submenu>
+            </Menu>
+            </i-col>
+        </Row>
         <br>
         <p>切换主题</p>
-        <Radio-group v-model="theme1">
+        <Radio-group v-model="theme2">
             <Radio label="light"></Radio>
             <Radio label="dark"></Radio>
-            <Radio label="primary"></Radio>
         </Radio-group>
     </div>
 </template>
@@ -46,149 +50,8 @@
     export default {
         data () {
             return {
-                theme1: 'light'
-            }
-        },
-        methods: {
-            s (s) {
-                console.log(s)
+                theme2: 'light'
             }
         }
     }
 </script>
-
-
-<!--<template>-->
-    <!--<div>-->
-        <!--<Row>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" active-name="1-2" :open-names="['1']" @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-            <!--<i-col span="8">-->
-                <!--<Menu :theme="theme2" :open-names="['1']" accordion @on-select="s">-->
-                    <!--<Submenu name="1">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-paper"></Icon>-->
-                            <!--内容管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="1-1">文章管理</Menu-item>-->
-                        <!--<Menu-item name="1-2">评论管理</Menu-item>-->
-                        <!--<Menu-item name="1-3">举报管理</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="2">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="ios-people"></Icon>-->
-                            <!--用户管理-->
-                        <!--</template>-->
-                        <!--<Menu-item name="2-1">新增用户</Menu-item>-->
-                        <!--<Menu-item name="2-2">活跃用户</Menu-item>-->
-                    <!--</Submenu>-->
-                    <!--<Submenu name="3">-->
-                        <!--<template slot="title">-->
-                            <!--<Icon type="stats-bars"></Icon>-->
-                            <!--统计分析-->
-                        <!--</template>-->
-                        <!--<Menu-group title="使用">-->
-                            <!--<Menu-item name="3-1">新增和启动</Menu-item>-->
-                            <!--<Menu-item name="3-2">活跃分析</Menu-item>-->
-                            <!--<Menu-item name="3-3">时段分析</Menu-item>-->
-                        <!--</Menu-group>-->
-                        <!--<Menu-group title="留存">-->
-                            <!--<Menu-item name="3-4">用户留存</Menu-item>-->
-                            <!--<Menu-item name="3-5">流失用户</Menu-item>-->
-                        <!--</Menu-group>-->
-                    <!--</Submenu>-->
-                <!--</Menu>-->
-            <!--</i-col>-->
-        <!--</Row>-->
-        <!--<br>-->
-        <!--<p>切换主题</p>-->
-        <!--<Radio-group v-model="theme2">-->
-            <!--<Radio label="light"></Radio>-->
-            <!--<Radio label="dark"></Radio>-->
-        <!--</Radio-group>-->
-    <!--</div>-->
-<!--</template>-->
-<!--<script>-->
-    <!--export default {-->
-        <!--data () {-->
-            <!--return {-->
-                <!--theme2: 'light'-->
-            <!--}-->
-        <!--},-->
-        <!--methods: {-->
-            <!--s (s) {-->
-                <!--console.log(s);-->
-            <!--}-->
-        <!--}-->
-    <!--}-->
-<!--</script>-->
diff --git a/src/components/base/collapse-transition.js b/src/components/base/collapse-transition.js
new file mode 100644
index 00000000..4c3c43dc
--- /dev/null
+++ b/src/components/base/collapse-transition.js
@@ -0,0 +1,79 @@
+// Thanks to https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js
+
+import { addClass, removeClass } from '../../utils/assist';
+
+const Transition = {
+    beforeEnter(el) {
+        addClass(el, 'collapse-transition');
+        if (!el.dataset) el.dataset = {};
+
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+        el.style.height = '0';
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+    },
+
+    enter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+            el.style.height = el.scrollHeight + 'px';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        } else {
+            el.style.height = '';
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+
+        el.style.overflow = 'hidden';
+    },
+
+    afterEnter(el) {
+        // for safari: remove class then reset height is necessary
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+    },
+
+    beforeLeave(el) {
+        if (!el.dataset) el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+
+        el.style.height = el.scrollHeight + 'px';
+        el.style.overflow = 'hidden';
+    },
+
+    leave(el) {
+        if (el.scrollHeight !== 0) {
+            // for safari: add class after set height, or it will jump to zero height suddenly, weired
+            addClass(el, 'collapse-transition');
+            el.style.height = 0;
+            el.style.paddingTop = 0;
+            el.style.paddingBottom = 0;
+        }
+    },
+
+    afterLeave(el) {
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+    }
+};
+
+export default {
+    name: 'CollapseTransition',
+    functional: true,
+    render(h, { children }) {
+        const data = {
+            on: Transition
+        };
+
+        return h('transition', data, children);
+    }
+};
diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue
index b0cba7db..1fcdc55b 100644
--- a/src/components/menu/submenu.vue
+++ b/src/components/menu/submenu.vue
@@ -4,7 +4,9 @@
             <slot name="title"></slot>
             <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
-        <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
+        <collapse-transition v-if="mode === 'vertical'">
+            <ul :class="[prefixCls]" v-show="opened"><slot></slot></ul>
+        </collapse-transition>
         <transition name="slide-up" v-else>
             <Drop
                 v-show="opened"
@@ -17,6 +19,7 @@
 <script>
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     import { getStyle, findComponentUpward } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -25,7 +28,7 @@
     export default {
         name: 'Submenu',
         mixins: [ Emitter ],
-        components: { Icon, Drop },
+        components: { Icon, Drop, CollapseTransition },
         props: {
             name: {
                 type: [String, Number],
diff --git a/src/styles/animation/index.less b/src/styles/animation/index.less
index 66033203..116f9b69 100644
--- a/src/styles/animation/index.less
+++ b/src/styles/animation/index.less
@@ -25,4 +25,8 @@
 @import "fade";
 @import "move";
 @import "ease";
-@import "slide";
\ No newline at end of file
+@import "slide";
+
+.collapse-transition {
+    transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
+}
\ No newline at end of file
diff --git a/src/utils/assist.js b/src/utils/assist.js
index daabffd7..71ece1cf 100644
--- a/src/utils/assist.js
+++ b/src/utils/assist.js
@@ -232,4 +232,66 @@ function findComponentsDownward (context, componentName, components = []) {
     }
     return components;
 }
-export {findComponentsDownward};
\ No newline at end of file
+export {findComponentsDownward};
+
+/* istanbul ignore next */
+const trim = function(string) {
+    return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+    if (!el || !cls) return false;
+    if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+    if (el.classList) {
+        return el.classList.contains(cls);
+    } else {
+        return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+    }
+}
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+    if (!el) return;
+    let curClass = el.className;
+    const classes = (cls || '').split(' ');
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.add(clsName);
+        } else {
+            if (!hasClass(el, clsName)) {
+                curClass += ' ' + clsName;
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = curClass;
+    }
+}
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+    if (!el || !cls) return;
+    const classes = cls.split(' ');
+    let curClass = ' ' + el.className + ' ';
+
+    for (let i = 0, j = classes.length; i < j; i++) {
+        const clsName = classes[i];
+        if (!clsName) continue;
+
+        if (el.classList) {
+            el.classList.remove(clsName);
+        } else {
+            if (hasClass(el, clsName)) {
+                curClass = curClass.replace(' ' + clsName + ' ', ' ');
+            }
+        }
+    }
+    if (!el.classList) {
+        el.className = trim(curClass);
+    }
+}
\ No newline at end of file

From b80c48ffce0077451fd452ba0373fd2ea1e4bae2 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 14:25:43 +0800
Subject: [PATCH 18/23] Collapse support transition

---
 src/components/collapse/panel.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/collapse/panel.vue b/src/components/collapse/panel.vue
index f6c0ae0f..80c955ae 100644
--- a/src/components/collapse/panel.vue
+++ b/src/components/collapse/panel.vue
@@ -4,18 +4,21 @@
             <Icon type="arrow-right-b"></Icon>
             <slot></slot>
         </div>
-        <div :class="contentClasses" v-show="isActive">
-            <div :class="boxClasses"><slot name="content"></slot></div>
-        </div>
+        <collapse-transition>
+            <div :class="contentClasses" v-show="isActive">
+                <div :class="boxClasses"><slot name="content"></slot></div>
+            </div>
+        </collapse-transition>
     </div>
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     const prefixCls = 'ivu-collapse';
 
     export default {
         name: 'Panel',
-        components: { Icon },
+        components: { Icon, CollapseTransition },
         props: {
             name: {
                 type: String

From eae3e936c8a7822416eb83a5514698ff92c05238 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 14:30:03 +0800
Subject: [PATCH 19/23] Tree support transition

---
 src/components/tree/node.vue | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/tree/node.vue b/src/components/tree/node.vue
index 4c7be821..1ecfd3fa 100644
--- a/src/components/tree/node.vue
+++ b/src/components/tree/node.vue
@@ -1,32 +1,33 @@
 <template>
-    <transition name="slide-up">
+    <collapse-transition>
         <ul :class="classes" v-show="visible">
             <li>
                 <span :class="arrowClasses" @click="handleExpand">
                     <Icon type="arrow-right-b"></Icon>
                 </span>
                 <Checkbox
-                    v-if="showCheckbox"
-                    :value="data.checked"
-                    :indeterminate="indeterminate"
-                    :disabled="data.disabled || data.disableCheckbox"
-                    @click.native.prevent="handleCheck"></Checkbox>
+                        v-if="showCheckbox"
+                        :value="data.checked"
+                        :indeterminate="indeterminate"
+                        :disabled="data.disabled || data.disableCheckbox"
+                        @click.native.prevent="handleCheck"></Checkbox>
                 <span :class="titleClasses" v-html="data.title" @click="handleSelect"></span>
                 <Tree-node
-                    v-for="item in data.children"
-                    :key="item"
-                    :data="item"
-                    :visible="data.expand"
-                    :multiple="multiple"
-                    :show-checkbox="showCheckbox">
+                        v-for="item in data.children"
+                        :key="item"
+                        :data="item"
+                        :visible="data.expand"
+                        :multiple="multiple"
+                        :show-checkbox="showCheckbox">
                 </Tree-node>
             </li>
         </ul>
-    </transition>
+    </collapse-transition>
 </template>
 <script>
     import Checkbox from '../checkbox/checkbox.vue';
     import Icon from '../icon/icon.vue';
+    import CollapseTransition from '../base/collapse-transition';
     import Emitter from '../../mixins/emitter';
     import { findComponentsDownward } from '../../utils/assist';
 
@@ -35,7 +36,7 @@
     export default {
         name: 'TreeNode',
         mixins: [ Emitter ],
-        components: { Checkbox, Icon },
+        components: { Checkbox, Icon, CollapseTransition },
         props: {
             data: {
                 type: Object,

From 1f974700deabaed164cea2fbd1f08e8bcc50caf4 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 15:05:01 +0800
Subject: [PATCH 20/23] Tabs support render head

---
 examples/routers/tabs.vue      | 10 ++++++++--
 src/components/base/render.vue | 30 ++++++++++++++++++++++++++++++
 src/components/tabs/tabs.vue   |  7 +++++--
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/components/base/render.vue

diff --git a/examples/routers/tabs.vue b/examples/routers/tabs.vue
index 72dd6500..ea1f6be8 100644
--- a/examples/routers/tabs.vue
+++ b/examples/routers/tabs.vue
@@ -1,6 +1,6 @@
 <template>
-    <Tabs value="name1" :animated="false">
-        <Tab-pane label="标签一" name="name1">
+    <Tabs value="name1" :animated="true">
+        <Tab-pane :label="label1" name="name1">
             <Table :columns="columns1" :data="data1"></Table>
         </Tab-pane>
         <Tab-pane label="标签二" name="name2">
@@ -15,6 +15,12 @@
     export default {
         data () {
             return {
+                label1: (h) => {
+                    return h('div', [
+                        h('span', '标签一'),
+                        h('Button', 'button')
+                    ]);
+                },
                 columns1: [
                     {
                         title: '姓名',
diff --git a/src/components/base/render.vue b/src/components/base/render.vue
new file mode 100644
index 00000000..7f2209c4
--- /dev/null
+++ b/src/components/base/render.vue
@@ -0,0 +1,30 @@
+<template>
+    <div ref="cell"></div>
+</template>
+<script>
+    import Vue from 'vue';
+    export default {
+        name: 'RenderCell',
+        props: {
+            render: Function
+        },
+        methods: {
+            compile () {
+                if (this.render) {
+                    this.$el.innerHTML = '';
+                    const component = new Vue({
+                        functional: true,
+                        render: (h) => {
+                            return this.render(h);
+                        }
+                    });
+                    const Cell = component.$mount();
+                    this.$refs.cell.appendChild(Cell.$el);
+                }
+            }
+        },
+        mounted () {
+            this.compile();
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/components/tabs/tabs.vue b/src/components/tabs/tabs.vue
index cc882acc..30f8a293 100644
--- a/src/components/tabs/tabs.vue
+++ b/src/components/tabs/tabs.vue
@@ -8,7 +8,8 @@
                             <div :class="barClasses" :style="barStyle"></div>
                             <div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
                                 <Icon v-if="item.icon !== ''" :type="item.icon"></Icon>
-                                {{ item.label }}
+                                <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>
                             </div>
                         </div>
@@ -22,6 +23,7 @@
 </template>
 <script>
     import Icon from '../icon/icon.vue';
+    import Render from '../base/render.vue';
     import { oneOf, getStyle } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
 
@@ -30,7 +32,7 @@
     export default {
         name: 'Tabs',
         mixins: [ Emitter ],
-        components: { Icon },
+        components: { Icon, Render },
         props: {
             value: {
                 type: [String, Number]
@@ -128,6 +130,7 @@
                 this.navList = [];
                 this.getTabs().forEach((pane, index) => {
                     this.navList.push({
+                        labelType: typeof pane.label,
                         label: pane.label,
                         icon: pane.icon || '',
                         name: pane.currentName || index,

From bef89707269f4b1dabb291320f698ccdc92bbf33 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 15:52:55 +0800
Subject: [PATCH 21/23] update tabs

---
 src/components/tabs/pane.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tabs/pane.vue b/src/components/tabs/pane.vue
index 07f4c82a..234c3ee7 100644
--- a/src/components/tabs/pane.vue
+++ b/src/components/tabs/pane.vue
@@ -11,7 +11,7 @@
                 type: String
             },
             label: {
-                type: String,
+                type: [String, Function],
                 default: ''
             },
             icon: {

From 25177f5ab46d50fbf73eff38aadcfa2a7a949ef4 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 18:40:15 +0800
Subject: [PATCH 22/23] Update README.md

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fc0c3baf..7a1aba4a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,13 @@
     </a>
 </p>
 
-# iView  [![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) [![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview) [![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview) [![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+# iView  [![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) 
+[![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview)
+[![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
+[![NPM downloads](https://img.shields.io/npm/dt/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
+![JS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/iview.min.js?compression=gzip&label=gzip%20size:%20JS&style=flat-square)
+![CSS gzip size](http://img.badgesize.io/https://unpkg.com/iview/dist/styles/iview.css?compression=gzip&label=gzip%20size:%20CSS&style=flat-square)
+[![Join the chat at https://gitter.im/iview/iview](https://img.shields.io/badge/chat-on_gitter-30b392.svg?style=flat-square)](https://gitter.im/iview/iview?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 ### A high quality  UI Toolkit built on Vue.js.
 

From 7efef86b0d70494467d46e8b94fc0883cf62f46f Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 18:41:07 +0800
Subject: [PATCH 23/23] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a1aba4a..2d2f04c4 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,8 @@
     </a>
 </p>
 
-# iView  [![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) 
+# iView 
+[![](https://img.shields.io/travis/iview/iview.svg?style=flat-square)](https://travis-ci.org/iview/iview) 
 [![iView](https://img.shields.io/npm/v/iview.svg?style=flat-square)](https://www.npmjs.org/package/iview)
 [![NPM downloads](http://img.shields.io/npm/dm/iview.svg?style=flat-square)](https://npmjs.org/package/iview)
 [![NPM downloads](https://img.shields.io/npm/dt/iview.svg?style=flat-square)](https://npmjs.org/package/iview)