From aee78fab7a97ae72a3782aa419bb7c99c4199a22 Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Mon, 29 Jul 2019 16:40:11 +0800
Subject: [PATCH 1/9] feature: the most basic of tab

---
 demo/components/tabDemo.vue          | 111 +++++++++++++++++++++++++++
 demo/demo.vue                        |   4 +
 demo/index.js                        |   2 +
 index.js                             |   2 +
 packages/common/Tab/index.js         |   9 +++
 packages/common/Tab/src/TabPanel.vue |  50 ++++++++++++
 packages/common/Tab/src/main.vue     |  89 +++++++++++++++++++++
 styles/Tab.scss                      |  22 ++++++
 styles/index.scss                    |   1 +
 9 files changed, 290 insertions(+)
 create mode 100644 demo/components/tabDemo.vue
 create mode 100644 packages/common/Tab/index.js
 create mode 100644 packages/common/Tab/src/TabPanel.vue
 create mode 100644 packages/common/Tab/src/main.vue
 create mode 100644 styles/Tab.scss

diff --git a/demo/components/tabDemo.vue b/demo/components/tabDemo.vue
new file mode 100644
index 000000000..8a43149f6
--- /dev/null
+++ b/demo/components/tabDemo.vue
@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="doc"
+    class="n-doc"
+  >
+    <div class="n-doc-header">
+      <n-gradient-text :font-size="20">
+        Tab / hahah
+      </n-gradient-text>
+    </div>
+    <div class="n-doc-body">
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Basic Usage
+        </div>
+        <div class="n-doc-section__view">
+          <n-tab>
+            <n-tab-panel label="form">
+              <n-form
+                inline
+                :label-width="80"
+              >
+                <n-form-item label="name">
+                  <n-input placeholder="Input your name" />
+                </n-form-item>
+                <n-form-item label="age">
+                  <n-input placeholder="Input your age" />
+                </n-form-item>
+                <n-form-item label="phone">
+                  <n-input placeholder="Input your phone number" />
+                </n-form-item>
+              </n-form>
+            </n-tab-panel>
+            <n-tab-panel label="lal">
+              <n-advance-table
+                :columns="columns0"
+                :data="data"
+              >
+                <template #table-operation>
+                  <n-button>custom operation by v-slot:table-operation</n-button>
+                </template>
+              </n-advance-table>
+            </n-tab-panel>
+          </n-tab>
+        </div>
+        <div class="n-doc-section__source" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import docCodeEditorMixin from './docCodeEditorMixin'
+
+export default {
+  mixins: [docCodeEditorMixin],
+  data () {
+    let d = new Array(20).fill(0)
+    d = d.map((item, idx) => {
+      return {
+        name: 'xiaobai' + idx,
+        age: Math.ceil((Math.random() * 20))
+      }
+    })
+    return {
+      data: d,
+      columns0: [
+        {
+          title: 'Name',
+          key: 'name',
+          width: 300
+        },
+        {
+          title: '#',
+          render: (h, params) => {
+            return (
+              <n-button
+                style="margin:0;"
+                size="small"
+                onClick={() => this.handleClick(params)}
+              >
+                delete
+              </n-button>
+            )
+          }
+        },
+        {
+          title: 'Age',
+          key: 'age',
+          render: (h, params) => {
+            return <b>{params.row.age}</b>
+          }
+        },
+        {
+          title: '#',
+          render: (h, params) => {
+            return (
+              <n-button
+                style="margin:0;"
+                size="small"
+                onClick={() => this.handleClick(params)}
+              >
+                delete
+              </n-button>
+            )
+          }
+        }]
+    }
+  }
+
+}
+</script>
diff --git a/demo/demo.vue b/demo/demo.vue
index 18a121569..97b7c1498 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -134,6 +134,10 @@ export default {
             {
               name: 'Form',
               path: '/n-form'
+            },
+            {
+              name: 'Tab',
+              path: '/n-tab'
             }
           ]
         },
diff --git a/demo/index.js b/demo/index.js
index 042ca2e5f..1b34372dc 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -27,6 +27,7 @@ import inputNumberDemo from './components/inputNumberDemo'
 import nimbusIconDemo from './components/nimbusIconDemo'
 import radioDemo from './components/radioDemo'
 import formDemo from './components/formDemo'
+import tabDemo from './components/tabDemo'
 import timePickerDemo from './components/timePickerDemo'
 
 import notificationDemo from './components/notificationDemo'
@@ -82,6 +83,7 @@ const routes = [
       { path: '/n-nimbus-icon', component: nimbusIconDemo },
       { path: '/n-radio', component: radioDemo },
       { path: '/n-form', component: formDemo },
+      { path: '/n-tab', component: tabDemo },
       { path: '/n-time-picker', component: timePickerDemo },
       { path: '/n-router-debug', component: routerDebug }
     ]
diff --git a/index.js b/index.js
index 994833cec..7d897ed1d 100644
--- a/index.js
+++ b/index.js
@@ -24,6 +24,7 @@ import DatePicker from './packages/common/DatePicker'
 import InputNumber from './packages/common/InputNumber'
 import Radio from './packages/common/Radio'
 import Form from './packages/common/Form'
+import Tab from './packages/common/Tab'
 import TimePicker from './packages/common/TimePicker'
 import ServiceCard from './packages/nimbus/ServiceCard'
 import HomeLayout from './packages/nimbus/HomeLayout'
@@ -67,6 +68,7 @@ function install (Vue) {
   NimbusIcon.install(Vue)
   Radio.install(Vue)
   Form.install(Vue)
+  Tab.install(Vue)
   TimePicker.install(Vue)
 }
 
diff --git a/packages/common/Tab/index.js b/packages/common/Tab/index.js
new file mode 100644
index 000000000..413ed1516
--- /dev/null
+++ b/packages/common/Tab/index.js
@@ -0,0 +1,9 @@
+import Tab from './src/main.vue'
+import NTabPanel from './src/TabPanel.vue'
+
+Tab.install = function (Vue) {
+  Vue.component(Tab.name, Tab)
+  Vue.component(NTabPanel.name, NTabPanel)
+}
+
+export default Tab
diff --git a/packages/common/Tab/src/TabPanel.vue b/packages/common/Tab/src/TabPanel.vue
new file mode 100644
index 000000000..4eb0d4336
--- /dev/null
+++ b/packages/common/Tab/src/TabPanel.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="NTabPanel">
+    <div v-show="isShow">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NTabPanel',
+  inject: [ 'NTab' ],
+  props: {
+    label: {
+      type: String,
+      default: undefined
+    },
+    name: {
+      type: String || Number,
+      default: undefined
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: false
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.NTab.updateLabels()
+    this.initActive()
+  },
+  methods: {
+    updateIsShow (flag) {
+      this.isShow = flag
+      // 这里应该是根据切换的方向(左右) 来设置
+    },
+    initActive () {
+      if ((this.active || this.NTab.name === this.name) && this.NTab.active === null) {
+        this.updateIsShow(true)
+        this.NTab.initActive()
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
new file mode 100644
index 000000000..51333d872
--- /dev/null
+++ b/packages/common/Tab/src/main.vue
@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="n-tab"
+  >
+    <div
+      class="n-tab--label"
+    >
+      <div
+        v-for="(label, i) in labels"
+        :key="i"
+        class="n-tab--label-item"
+        @click="updateActive($event, i)"
+      >
+        {{ label }}
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  name: 'NTab',
+  provide () {
+    return {
+      NTab: this
+    }
+  },
+  props: {
+    name: {
+      type: String || Number,
+      default: undefined
+    }
+  },
+  data () {
+    return {
+      labels: [],
+      active: null // number
+    }
+  },
+  created () {
+    // this.updateOrder()
+    // this.initActive()
+  },
+  beforeMount () {
+    console.log('slot', this.$slots)
+  },
+  mounted () {
+    if (this.active === null) {
+      this.active = 0
+      let panel = this.$children.find(i => { return i.$options.name === 'NTabPanel' })
+      panel.updateIsShow(true)
+    }
+  },
+  methods: {
+    updateLabels () {
+      let labels = []
+      this.$children.forEach((i, order) => {
+        if (i.$options.name === 'NTabPanel') {
+          labels.push(i.label || '')
+          i._NaiveTabOrder = order
+        }
+      })
+      this.$set(this, 'labels', labels)
+    },
+    initActive () {
+      // let res = this.$children.findIndex(i => { return i.$options.name === 'NTabPanel' && i.active })
+      // let order = res > -1 ? res : 0
+      // this.$children[order].updateIsShow(true)
+      // this.active = order
+      this.active = this.labels.length - 1
+    },
+    updateActive (e, i) {
+      if (e.target.className === 'n-tab--label-item' && i !== this.active) {
+        this.$children[this.active].updateIsShow(false)
+        this.active = i
+        this.$children[i].updateIsShow(true)
+      }
+    },
+    updateOrder () {
+      // method duplicate with updateLabels
+      this.$children.forEach((i, order) => {
+        if (i.$options.name === 'NTabPanel') {
+          i._NaiveTabOrder = order
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/styles/Tab.scss b/styles/Tab.scss
new file mode 100644
index 000000000..aeb93364e
--- /dev/null
+++ b/styles/Tab.scss
@@ -0,0 +1,22 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(tab) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  .n-tab--label {
+    display: flex;
+    align-items: center;
+    justify-items: flex-start;
+    background-color: bisque;
+    padding-bottom: 10px;
+    .n-tab--label-item {
+      padding: 2px 5px;
+      border-right: 1px solid #cccccc;
+    }
+    .n-tab--label-item_active {
+      color: aquamarine;
+    }
+  }
+}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index 250f79c05..2f3f7bee9 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -23,6 +23,7 @@
 @import './Radio.scss';
 @import './Form.scss';
 @import './TimePicker.scss';
+@import './Tab.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popover.scss";

From 01ab476f8908addfbdc7bab0d56fd3cd060267e5 Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Tue, 30 Jul 2019 10:59:21 +0800
Subject: [PATCH 2/9] store

---
 demo/components/formDemo.vue           |  5 +++-
 demo/components/tabDemo.vue            |  8 ++++++-
 packages/common/Form/src/form-item.vue |  4 +++-
 packages/common/Tab/src/TabPanel.vue   | 33 ++++++++++++++++++++------
 packages/common/Tab/src/main.vue       | 15 +++++++-----
 styles/Form.scss                       |  6 ++++-
 styles/Tab.scss                        | 20 +++++++++++++++-
 7 files changed, 73 insertions(+), 18 deletions(-)

diff --git a/demo/components/formDemo.vue b/demo/components/formDemo.vue
index d3ecf469d..de99732a4 100644
--- a/demo/components/formDemo.vue
+++ b/demo/components/formDemo.vue
@@ -182,7 +182,10 @@
             :label-width="200"
             label-position="top"
           >
-            <n-form-item label="Top1">
+            <n-form-item
+              required
+              label="Top1"
+            >
               <n-input />
             </n-form-item>
             <n-form-item label="Top2">
diff --git a/demo/components/tabDemo.vue b/demo/components/tabDemo.vue
index 8a43149f6..f57cddb72 100644
--- a/demo/components/tabDemo.vue
+++ b/demo/components/tabDemo.vue
@@ -31,7 +31,10 @@
                 </n-form-item>
               </n-form>
             </n-tab-panel>
-            <n-tab-panel label="lal">
+            <n-tab-panel
+              active
+              label="table"
+            >
               <n-advance-table
                 :columns="columns0"
                 :data="data"
@@ -41,6 +44,9 @@
                 </template>
               </n-advance-table>
             </n-tab-panel>
+            <n-tab-panel label="input">
+              haha: <n-input />
+            </n-tab-panel>
           </n-tab>
         </div>
         <div class="n-doc-section__source" />
diff --git a/packages/common/Form/src/form-item.vue b/packages/common/Form/src/form-item.vue
index 1e55a1e0e..0dbdb069c 100644
--- a/packages/common/Form/src/form-item.vue
+++ b/packages/common/Form/src/form-item.vue
@@ -7,7 +7,9 @@
       :class="`${prefix}__label`"
       :style="style"
     >
-      {{ label }}
+      <span :class="`${prefix}__label-span`">
+        {{ label }}
+      </span>
     </label>
     <div
       class="n-form-item__content"
diff --git a/packages/common/Tab/src/TabPanel.vue b/packages/common/Tab/src/TabPanel.vue
index 4eb0d4336..c98ad2dfa 100644
--- a/packages/common/Tab/src/TabPanel.vue
+++ b/packages/common/Tab/src/TabPanel.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="NTabPanel">
-    <div v-show="isShow">
-      <slot />
-    </div>
+  <div
+    :class="cls"
+    :style="style"
+  >
+    <slot />
   </div>
 </template>
 <script>
@@ -25,22 +26,40 @@ export default {
   },
   data () {
     return {
-      isShow: false
+      isShow: false,
+      style: {}
     }
   },
   computed: {
+    cls () {
+      return this.isShow ? 'n-tab-panel n-tab-panel_active' : 'n-tab-panel'
+    },
+    order () {
+      return this.$vnode._NaiveTabOrder
+    }
+  },
+  watch: {
+    order: {
+
+    }
   },
   created () {
     this.NTab.updateLabels()
     this.initActive()
+    // this.setTransfer('-', )
   },
   methods: {
-    updateIsShow (flag) {
+    updateIsShow (flag, dir = 'left') {
       this.isShow = flag
+      // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
+      // this.$refs['panel'].classList.toggle('n-tab-panel_active')
       // 这里应该是根据切换的方向(左右) 来设置
     },
+    setTransfer (dir, per) {
+      this.style.transform = 'translateX(' + dir + per + '%)'
+    },
     initActive () {
-      if ((this.active || this.NTab.name === this.name) && this.NTab.active === null) {
+      if ((this.active || (this.NTab.name === this.name && this.name !== undefined)) && this.NTab.active === null) {
         this.updateIsShow(true)
         this.NTab.initActive()
       }
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
index 51333d872..2a2288709 100644
--- a/packages/common/Tab/src/main.vue
+++ b/packages/common/Tab/src/main.vue
@@ -14,7 +14,12 @@
         {{ label }}
       </div>
     </div>
-    <slot />
+    <div
+      ref="slot"
+      class="n-tab--slot"
+    >
+      <slot />
+    </div>
   </div>
 </template>
 <script>
@@ -38,7 +43,7 @@ export default {
     }
   },
   created () {
-    // this.updateOrder()
+    this.updateOrder()
     // this.initActive()
   },
   beforeMount () {
@@ -78,10 +83,8 @@ export default {
     },
     updateOrder () {
       // method duplicate with updateLabels
-      this.$children.forEach((i, order) => {
-        if (i.$options.name === 'NTabPanel') {
-          i._NaiveTabOrder = order
-        }
+      this.$slots.default.forEach((i, order) => {
+        i._NaiveTabOrder = order
       })
     }
   }
diff --git a/styles/Form.scss b/styles/Form.scss
index 223127c0e..7d3d6d58a 100644
--- a/styles/Form.scss
+++ b/styles/Form.scss
@@ -19,11 +19,12 @@
     .n-form-item__label {
       display: block;
       overflow-wrap: unset;
+      padding-top: 0;
       align-items: center;
       text-align: left;
     }
   }
-  .n-form-item__label--require .n-form-item__label::before {
+  .n-form-item__label--require .n-form-item__label-span::before {
     float: right;
     content: '*';
     color:rgba(255, 146, 164, 1);
@@ -59,6 +60,9 @@
     padding: 10px 10px 10px 0; 
     overflow-wrap: break-word;
   }
+  .n-form-item__label-span {
+    display: inline-block;
+  }
   .n-form-item__content {
     position: relative;
     flex-grow: 1;
diff --git a/styles/Tab.scss b/styles/Tab.scss
index aeb93364e..c43ac1af2 100644
--- a/styles/Tab.scss
+++ b/styles/Tab.scss
@@ -2,7 +2,6 @@
 @import './theme/default.scss';
 
 @include b(tab) {
-  display: block;
   width: 100%;
   height: 100%;
   .n-tab--label {
@@ -19,4 +18,23 @@
       color: aquamarine;
     }
   }
+  .n-tab--slot {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+@include b(tab-panel) {
+  position: absolute;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  transition: width 0.3s;
+  &.n-tab-panel_active {
+    visibility: visible;
+  }
 }
\ No newline at end of file

From b7ecdc2b802a76306476049d2a91dc88b334c70b Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Tue, 30 Jul 2019 13:50:13 +0800
Subject: [PATCH 3/9] fix: the resetFunciton of form

---
 demo/components/formDemo.vue         | 27 +++++++++++++++-----------
 packages/common/Form/src/main.vue    | 22 +++++++++++++--------
 packages/common/Tab/src/TabPanel.vue | 29 ++++++++++++++--------------
 packages/common/Tab/src/main.vue     | 19 +++++++++++++++++-
 styles/Tab.scss                      |  4 +---
 5 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/demo/components/formDemo.vue b/demo/components/formDemo.vue
index de99732a4..39a8aacd1 100644
--- a/demo/components/formDemo.vue
+++ b/demo/components/formDemo.vue
@@ -271,19 +271,24 @@
             >
               The key in form-model does not support the form with ' . '.<br>
               And does not init the value of parameters with 'undefined'.<br>
-              ResetForm Method: only can reset the item with prop.<br>
+              ResetForm Method: only can reset the item with prop. And Donnot deal the nesting form context<br>
               ValidateForm Method: support validate specified items by the second parameter in form of array.<br>
             </n-form-item>
-            <n-form-item
-              :required-logo="false"
-              prop="input"
-              label="Input"
-            >
-              <n-input
-                v-model="validateForm.input"
-                placeholder="Enter string"
-              />
-            </n-form-item>
+            <n-popover>
+              <template v-slot:activator>
+                <n-form-item
+                  :required-logo="false"
+                  prop="input"
+                  label="Input"
+                >
+                  <n-input
+                    v-model="validateForm.input"
+                    placeholder="Enter string"
+                  />
+                </n-form-item>
+              </template>
+              <span>Test nesting Form Item</span>
+            </n-popover>
             <n-form-item
               prop="muti.deep.select"
               label="Select"
diff --git a/packages/common/Form/src/main.vue b/packages/common/Form/src/main.vue
index c5e85572d..d248738a8 100644
--- a/packages/common/Form/src/main.vue
+++ b/packages/common/Form/src/main.vue
@@ -10,6 +10,7 @@
 </template>
 <script>
 import { deepClone, getObjValue } from '../../../utils/index'
+import { debuglog } from 'util';
 
 export default {
   name: 'NForm',
@@ -100,24 +101,29 @@ export default {
     /**
      * just can reset the value with prop in form-item
      */
-    resetForm () {
-      this.$children.forEach(child => {
-        if (child.prop) {
+    resetForm (target = this) {
+      for (let i = 0; i < target.$children.length; i++) {
+        let child = target.$children[i]
+        if (child.$options.name === 'NFormItem' && child.prop) {
           let keys = child.prop.split('.')
           let obj = this.model
           let j = 0
-          keys.forEach((k, i) => {
-            if (i !== keys.length - 1) {
-              obj = obj[k]
+          keys.forEach((m, n) => {
+            if (n !== keys.length - 1) {
+              obj = obj[m]
             }
-            j = i
+            j = n
           })
           obj[keys[j]] = getObjValue(this.initialValue, keys)
           if (child.validateFlag) {
             child.clearValidateClass()
           }
+        } else if (child.$options.name === 'NForm') {
+          break
+        } else {
+          this.resetForm(child)
         }
-      })
+      }
     }
   }
 }
diff --git a/packages/common/Tab/src/TabPanel.vue b/packages/common/Tab/src/TabPanel.vue
index c98ad2dfa..c81070202 100644
--- a/packages/common/Tab/src/TabPanel.vue
+++ b/packages/common/Tab/src/TabPanel.vue
@@ -34,35 +34,34 @@ export default {
     cls () {
       return this.isShow ? 'n-tab-panel n-tab-panel_active' : 'n-tab-panel'
     },
-    order () {
-      return this.$vnode._NaiveTabOrder
+    offset () {
+      return this.NTab.offset
     }
   },
   watch: {
-    order: {
-
+    offset: {
+      handler (n) {
+        this.setTransfer(n)
+        console.log('zhixing', n)
+      },
+      immediate: true
     }
   },
   created () {
     this.NTab.updateLabels()
-    this.initActive()
-    // this.setTransfer('-', )
+    if (this._NaiveTabOrder === this.NTab.active) {
+      this.updateIsShow(true)
+    }
   },
   methods: {
-    updateIsShow (flag, dir = 'left') {
+    updateIsShow (flag) {
       this.isShow = flag
       // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
       // this.$refs['panel'].classList.toggle('n-tab-panel_active')
       // 这里应该是根据切换的方向(左右) 来设置
     },
-    setTransfer (dir, per) {
-      this.style.transform = 'translateX(' + dir + per + '%)'
-    },
-    initActive () {
-      if ((this.active || (this.NTab.name === this.name && this.name !== undefined)) && this.NTab.active === null) {
-        this.updateIsShow(true)
-        this.NTab.initActive()
-      }
+    setTransfer (per) {
+      this.style.transform = 'translateX(' + per + ')'
     }
   }
 }
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
index 2a2288709..745ad0723 100644
--- a/packages/common/Tab/src/main.vue
+++ b/packages/common/Tab/src/main.vue
@@ -39,11 +39,13 @@ export default {
   data () {
     return {
       labels: [],
-      active: null // number
+      active: null, // number
+      offset: null
     }
   },
   created () {
     this.updateOrder()
+    this.initOffset()
     // this.initActive()
   },
   beforeMount () {
@@ -79,6 +81,7 @@ export default {
         this.$children[this.active].updateIsShow(false)
         this.active = i
         this.$children[i].updateIsShow(true)
+        this.offset = '-' + this.active * 100 + '%'
       }
     },
     updateOrder () {
@@ -86,6 +89,20 @@ export default {
       this.$slots.default.forEach((i, order) => {
         i._NaiveTabOrder = order
       })
+    },
+    initOffset () {
+      // method duplicate with updateLabels
+      let order = this.$slots.default.findIndex((i) => {
+        let props = i.componentOptions.propsData
+        if ([undefined, false].indexOf(props.active) === -1) {
+          return true
+        }
+        if (this.name === props.name && this.name !== undefined) {
+          return true
+        }
+      })
+      this.active = order > -1 ? order : 0
+      this.offset = '-' + this.active * 100 + '%'
     }
   }
 }
diff --git a/styles/Tab.scss b/styles/Tab.scss
index c43ac1af2..ce71c90d2 100644
--- a/styles/Tab.scss
+++ b/styles/Tab.scss
@@ -20,7 +20,6 @@
   }
   .n-tab--slot {
     display: flex;
-    position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -28,12 +27,11 @@
 }
 
 @include b(tab-panel) {
-  position: absolute;
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   visibility: hidden;
-  transition: width 0.3s;
+  transition: transform 0.3s;
   &.n-tab-panel_active {
     visibility: visible;
   }

From 485be90f105a102c9bda3dd19a7d1074ba21fdd3 Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Thu, 1 Aug 2019 17:15:29 +0800
Subject: [PATCH 4/9] feature: most funciton

---
 demo/components/formDemo.vue         |  22 +++++-
 demo/components/tabDemo.vue          |  35 ++++++++-
 packages/common/Form/src/main.vue    |   1 -
 packages/common/Tab/src/TabPanel.vue |  27 ++++++-
 packages/common/Tab/src/main.vue     | 109 ++++++++++++++++++++++-----
 packages/mixins/emitter.js           |   2 +-
 styles/Tab.scss                      |  85 +++++++++++++++++++--
 7 files changed, 246 insertions(+), 35 deletions(-)

diff --git a/demo/components/formDemo.vue b/demo/components/formDemo.vue
index 39a8aacd1..538a9c52e 100644
--- a/demo/components/formDemo.vue
+++ b/demo/components/formDemo.vue
@@ -299,6 +299,17 @@
                 :items="items"
               />
             </n-form-item>
+            <n-form-item
+              prop="mutiSelect.0"
+              label="multi-select"
+            >
+              <n-select
+                v-model="validateForm.mutiSelect[0]"
+                multiple
+                placeholder="Please Select Type"
+                :items="items"
+              />
+            </n-form-item>
             <n-form-item
               label="Switch"
               prop="switch"
@@ -701,6 +712,10 @@ export default {
         callback()
       }
     }
+    let arrayValidate = (rule, value, callback) => {
+      console.log('arrya validate value', value)
+      debugger
+    }
     return {
       form: {
         name: '',
@@ -738,6 +753,9 @@ export default {
             select: 'Public'
           }
         },
+        mutiSelect: [
+          []
+        ],
         datepicker: 0,
         switch: false,
         radio: ''
@@ -746,6 +764,9 @@ export default {
         input: [
           { required: true, message: 'input cannot be empty', trigger: 'blur' }
         ],
+        'mutiSelect.0': [{
+          validator: arrayValidate, trigger: 'change'
+        }],
         'muti.deep.select': [
           {
             required: true,
@@ -890,7 +911,6 @@ export default {
           console.log('unpass', e)
         })
     },
-
     formReset (ref) {
       this.$refs[ref].resetForm()
     },
diff --git a/demo/components/tabDemo.vue b/demo/components/tabDemo.vue
index f57cddb72..fac79eaeb 100644
--- a/demo/components/tabDemo.vue
+++ b/demo/components/tabDemo.vue
@@ -14,7 +14,12 @@
           Basic Usage
         </div>
         <div class="n-doc-section__view">
-          <n-tab>
+          <n-tab
+            type="card"
+            closable
+            addable
+            :add-panel="addPanel"
+          >
             <n-tab-panel label="form">
               <n-form
                 inline
@@ -44,9 +49,25 @@
                 </template>
               </n-advance-table>
             </n-tab-panel>
-            <n-tab-panel label="input">
+            <n-tab-panel
+              disabled
+              label="input"
+            >
               haha: <n-input />
             </n-tab-panel>
+            <n-tab-panel label="icon">
+              lala: <n-icon />
+            </n-tab-panel>
+            <n-tab-panel label="button">
+              hehe: <n-button />
+            </n-tab-panel>
+            <n-tab-panel
+              v-for="(item, i) in panels"
+              :key="i"
+              :label="item.label"
+            >
+              {{ item.content }}
+            </n-tab-panel>
           </n-tab>
         </div>
         <div class="n-doc-section__source" />
@@ -68,6 +89,7 @@ export default {
       }
     })
     return {
+      panels: [],
       data: d,
       columns0: [
         {
@@ -111,7 +133,14 @@ export default {
           }
         }]
     }
+  },
+  methods: {
+    addPanel () {
+      this.panels.push({
+        label: this.panels.length,
+        content: 'i am number' + this.panels.length
+      })
+    }
   }
-
 }
 </script>
diff --git a/packages/common/Form/src/main.vue b/packages/common/Form/src/main.vue
index d248738a8..727f068ae 100644
--- a/packages/common/Form/src/main.vue
+++ b/packages/common/Form/src/main.vue
@@ -10,7 +10,6 @@
 </template>
 <script>
 import { deepClone, getObjValue } from '../../../utils/index'
-import { debuglog } from 'util';
 
 export default {
   name: 'NForm',
diff --git a/packages/common/Tab/src/TabPanel.vue b/packages/common/Tab/src/TabPanel.vue
index c81070202..f787801d7 100644
--- a/packages/common/Tab/src/TabPanel.vue
+++ b/packages/common/Tab/src/TabPanel.vue
@@ -1,5 +1,7 @@
 <template>
   <div
+    v-if="unDelete"
+    ref="tab-panel"
     :class="cls"
     :style="style"
   >
@@ -12,7 +14,7 @@ export default {
   inject: [ 'NTab' ],
   props: {
     label: {
-      type: String,
+      type: [String, Number],
       default: undefined
     },
     name: {
@@ -22,10 +24,19 @@ export default {
     active: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
+      unDelete: true,
       isShow: false,
       style: {}
     }
@@ -42,7 +53,7 @@ export default {
     offset: {
       handler (n) {
         this.setTransfer(n)
-        console.log('zhixing', n)
+        this.$forceUpdate()
       },
       immediate: true
     }
@@ -52,16 +63,28 @@ export default {
     if (this._NaiveTabOrder === this.NTab.active) {
       this.updateIsShow(true)
     }
+    this.$on('display-none', this.setDisplayNone)
+  },
+  beforeDestroy () {
+    console.log('before destory call')
+    this.$off('display-none', this.setDisplayNone)
   },
   methods: {
     updateIsShow (flag) {
       this.isShow = flag
+      this.$forceUpdate()
       // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
       // this.$refs['panel'].classList.toggle('n-tab-panel_active')
       // 这里应该是根据切换的方向(左右) 来设置
     },
     setTransfer (per) {
       this.style.transform = 'translateX(' + per + ')'
+    },
+    setDisplayNone (i) {
+      if (i === this._NaiveTabOrder) {
+        // this.$set(this.style, 'display', 'none')
+        this.unDelete = false
+      }
     }
   }
 }
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
index 745ad0723..17a4b20b9 100644
--- a/packages/common/Tab/src/main.vue
+++ b/packages/common/Tab/src/main.vue
@@ -3,16 +3,25 @@
     class="n-tab"
   >
     <div
-      class="n-tab--label"
+      :class="addable ? 'n-tab--label_addable n-tab--label' : 'n-tab--label'"
     >
       <div
         v-for="(label, i) in labels"
         :key="i"
-        class="n-tab--label-item"
+        :class="getClass(i)"
         @click="updateActive($event, i)"
       >
-        {{ label }}
+        <span class="n-tab--label-content">{{ label }}
+          <span class="n-tab--label-delete"> + </span>
+        </span>
       </div>
+      <n-button
+        size="small"
+        class="n-tab--label-add"
+        @click="addPanelItem"
+      >
+        +
+      </n-button>
     </div>
     <div
       ref="slot"
@@ -23,6 +32,8 @@
   </div>
 </template>
 <script>
+import Emitter from '../../../mixins/emitter'
+
 export default {
   name: 'NTab',
   provide () {
@@ -30,26 +41,42 @@ export default {
       NTab: this
     }
   },
+  mixins: [ Emitter ],
   props: {
     name: {
       type: String || Number,
       default: undefined
+    },
+    closable: {
+      type: Boolean,
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: 'normal' // card board?
+    },
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    addPanel: {
+      type: Function,
+      default: () => {}
     }
   },
   data () {
     return {
       labels: [],
       active: null, // number
-      offset: null
+      offset: null,
+      prefix: 'n-tab--label'
     }
   },
+  computed: {
+  },
   created () {
     this.updateOrder()
     this.initOffset()
-    // this.initActive()
-  },
-  beforeMount () {
-    console.log('slot', this.$slots)
   },
   mounted () {
     if (this.active === null) {
@@ -59,35 +86,66 @@ export default {
     }
   },
   methods: {
+    getClass (i) {
+      let panel = this.getTabPanel(i) || {}
+      let cName = this.prefix + '-item '
+      cName += (panel.disabled ? this.prefix + '-item_disabled ' : '')
+      cName += (this.active === i ? this.prefix + '-item_active ' : '')
+      cName += this.type === 'card' ? this.prefix + '-item_card ' : ''
+      cName += this.type === 'card' && (this.closable || panel.closable) ? this.prefix + '-item_close ' : ''
+      // cName += this.addable ? this.prefix + '-item_addable ' : ''
+
+      return cName
+    },
     updateLabels () {
       let labels = []
-      this.$children.forEach((i, order) => {
+      let j = 0
+      this.$children.forEach((i) => {
         if (i.$options.name === 'NTabPanel') {
           labels.push(i.label || '')
-          i._NaiveTabOrder = order
+          i._NaiveTabOrder = j++
         }
       })
       this.$set(this, 'labels', labels)
     },
     initActive () {
-      // let res = this.$children.findIndex(i => { return i.$options.name === 'NTabPanel' && i.active })
-      // let order = res > -1 ? res : 0
-      // this.$children[order].updateIsShow(true)
-      // this.active = order
       this.active = this.labels.length - 1
     },
     updateActive (e, i) {
-      if (e.target.className === 'n-tab--label-item' && i !== this.active) {
-        this.$children[this.active].updateIsShow(false)
+      let eName = e.target.className
+      let eParentName = e.target.parentElement.className
+      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
+      if (eName === 'n-tab--label-delete') {
+        // steps while deleting, need to set display none to label and the tab panel and then init the display
+        this.labels.splice(i, 1)
+        this.broadcast('NTabPanel', 'display-none', i)
+        this.updateOrder(false)
+        if (this.active === i) {
+          this.active = 0
+          this.getTabPanel(this.active).updateIsShow(true)
+        } else {
+          this.active = i > this.active ? this.active : this.active - 1
+        }
+        this.offset = '-' + this.active * 100 + '%'
+      } else if (isLabel && i !== this.active) {
+        this.getTabPanel(this.active).updateIsShow(false)
         this.active = i
-        this.$children[i].updateIsShow(true)
+        let temp = this.getTabPanel(i)
+        console.log(temp, this.$children, i)
+        temp.updateIsShow(true)
         this.offset = '-' + this.active * 100 + '%'
       }
     },
-    updateOrder () {
+    updateOrder (init = true) {
       // method duplicate with updateLabels
-      this.$slots.default.forEach((i, order) => {
-        i._NaiveTabOrder = order
+      let j = 0
+      let arr = init ? this.$slots.default : this.$children
+      arr.forEach((i) => {
+        if (init || i.unDelete) {
+          i._NaiveTabOrder = j++
+        } else {
+          delete i._NaiveTabOrder
+        }
       })
     },
     initOffset () {
@@ -103,6 +161,17 @@ export default {
       })
       this.active = order > -1 ? order : 0
       this.offset = '-' + this.active * 100 + '%'
+      console.log('active', this.active)
+    },
+    getTabPanel (i) {
+      if (i === undefined) return
+      return this.$children.find(c => {
+        return c._NaiveTabOrder === i
+      })
+    },
+    addPanelItem () {
+      this.addPanel()
+      this.updateOrder(false)
     }
   }
 }
diff --git a/packages/mixins/emitter.js b/packages/mixins/emitter.js
index a6497a100..1f71e9f87 100644
--- a/packages/mixins/emitter.js
+++ b/packages/mixins/emitter.js
@@ -1,6 +1,6 @@
 function broadcast (componentName, eventName, params) {
   this.$children.forEach(child => {
-    let name = child.$options.componentName
+    let name = child.$options.name
     if (name === componentName) {
       child.$emit.apply(child, [eventName].concat(params))
     } else {
diff --git a/styles/Tab.scss b/styles/Tab.scss
index ce71c90d2..2d1ec8a93 100644
--- a/styles/Tab.scss
+++ b/styles/Tab.scss
@@ -4,18 +4,88 @@
 @include b(tab) {
   width: 100%;
   height: 100%;
+  background-color: #171D33;
   .n-tab--label {
     display: flex;
     align-items: center;
     justify-items: flex-start;
-    background-color: bisque;
-    padding-bottom: 10px;
+    font-weight: bold;
+    font-size: 15px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    color: #ffffff;
+    // .n-tab--label-item:not(:last-child) {
+    //   margin-right: 25px;
+    // }
     .n-tab--label-item {
-      padding: 2px 5px;
-      border-right: 1px solid #cccccc;
+      margin-left: 25px;
+      padding-bottom: 8px;
+      // .n-tab--label-content {
+        // padding-bottom: 8px;
+        // border-bottom: 0px solid rgba(99, 226, 183, 1);
+      // }
+      .n-tab--label-delete {
+        display: none;
+        margin-left: 9px;
+      }
+      &:hover {
+        color: #55E8C7;
+        // border-bottom: 2px;
+        // border-bottom: 2px solid rgba(99, 226, 183, 1);
+      }
+     
     }
     .n-tab--label-item_active {
-      color: aquamarine;
+      color: #63E2B7;
+      // border-bottom: 2px;
+      border-bottom: 2px solid rgba(99, 226, 183, 1);
+    }
+    .n-tab--label-item_delete {
+      .n-tab--label-delete {
+        display: inline-block;
+      }
+    }
+    .n-tab--label-item_disabled {
+      color: #FFFFFF; 
+      opacity: 0.3;
+      pointer-events: none;
+    }
+    .n-tab--label-item_card {
+      margin-left: 0;
+      margin-right: 6px;
+      padding: 8px 16px;
+      border-radius: 6px 6px 0 0;
+      background-color: rgba(255, 255, 255, 0.3);
+      .n-tab--label-content {
+        border: none;
+        color: #50E3C2
+      }
+      &.n-tab--label-item_active {
+        border: none;
+      }
+      &:hover {
+        color: #55E8C7;
+        border: none;
+      }
+      &.n-tab--label-item_close {
+        .n-tab--label-delete {
+          display: inline-block;
+          margin-left: 9px;
+        }
+      }
+    }
+    // .n-tab--label-item_active {
+    //   color: #63E2B7;
+    //   // border-bottom: 2px;
+    //   border-bottom: 2px solid rgba(99, 226, 183, 1);
+    // }
+    .n-tab--label-add {
+      display: none;
+    }
+    &.n-tab--label_addable {
+      .n-tab--label-add {
+        display: inline-block;
+      }
     }
   }
   .n-tab--slot {
@@ -29,10 +99,11 @@
 @include b(tab-panel) {
   flex-shrink: 0;
   width: 100%;
-  height: 100%;
   visibility: hidden;
-  transition: transform 0.3s;
+  transition: transform 0.2s;
+  height: 0;
   &.n-tab-panel_active {
     visibility: visible;
+    height: 100%;
   }
 }
\ No newline at end of file

From cf671dabd9f9e55875e01b8118ac25c45b664c0a Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Mon, 5 Aug 2019 14:28:13 +0800
Subject: [PATCH 5/9] fix(advance table): del some log

---
 demo/components/advanceTableDemo.vue      | 5 ++++-
 packages/common/AdvanceTable/src/main.vue | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/demo/components/advanceTableDemo.vue b/demo/components/advanceTableDemo.vue
index 7e5b306dc..5f91fc3ae 100644
--- a/demo/components/advanceTableDemo.vue
+++ b/demo/components/advanceTableDemo.vue
@@ -789,7 +789,7 @@ export default {
           className: (params) => {
             let row = params.row
             if (row.age > 10) {
-              return 'older'
+              return 'older higher'
             }
             return ''
           },
@@ -1000,4 +1000,7 @@ export default {
 .older{
  background:rgb(255, 204, 146);
 }
+.higher {
+  color: blue;
+}
 </style>
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index 61552048e..7215d4e33 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -218,7 +218,7 @@ export default {
     // const sortIndexs = new Array(this.columns.length).fill(0).map((item, idx) => {
     //   return this.columns[idx].order ? this.columns[idx].order : 0
     // })
-    console.log(sortIndexs)
+    // console.log(sortIndexs)
     return {
       copyData: this.data.slice(0),
       sortIndexs,
@@ -401,7 +401,7 @@ export default {
       } else if (typeof column.className === 'function') {
         className.push(column.className(params))
       }
-      console.log(className)
+      // console.log(className)
       return className
     },
     /**

From 0f88dfead089128f8b67124bbaaa190217bc16f0 Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Mon, 5 Aug 2019 16:41:00 +0800
Subject: [PATCH 6/9] update: store befor update scss

---
 demo/components/tabDemo.vue          | 304 +++++++++++++++++++++------
 packages/common/Tab/src/TabPanel.vue |   6 +-
 packages/common/Tab/src/main.vue     | 117 ++++++++---
 packages/utils/index.js              |  16 +-
 styles/Tab.scss                      | 224 ++++++++++++--------
 5 files changed, 486 insertions(+), 181 deletions(-)

diff --git a/demo/components/tabDemo.vue b/demo/components/tabDemo.vue
index fac79eaeb..24266ca3c 100644
--- a/demo/components/tabDemo.vue
+++ b/demo/components/tabDemo.vue
@@ -5,7 +5,7 @@
   >
     <div class="n-doc-header">
       <n-gradient-text :font-size="20">
-        Tab / hahah
+        Tab / n-tab
       </n-gradient-text>
     </div>
     <div class="n-doc-body">
@@ -16,11 +16,8 @@
         <div class="n-doc-section__view">
           <n-tab
             type="card"
-            closable
-            addable
-            :add-panel="addPanel"
           >
-            <n-tab-panel label="form">
+            <n-tab-panel label="Select">
               <n-form
                 inline
                 :label-width="80"
@@ -37,17 +34,46 @@
               </n-form>
             </n-tab-panel>
             <n-tab-panel
-              active
-              label="table"
+              label="Hover"
             >
-              <n-advance-table
-                :columns="columns0"
-                :data="data"
+              haha: <n-input />
+            </n-tab-panel>
+            <n-tab-panel label="Normal">
+              lala: <n-icon />
+            </n-tab-panel>
+            <n-tab-panel
+              disabled
+              label="Disable"
+            >
+              hehe: <n-button />
+            </n-tab-panel>
+            <n-tab-panel
+              v-for="(item, i) in panels"
+              :key="i"
+              :label="item.label"
+            >
+              {{ item.content }}
+            </n-tab-panel>
+          </n-tab>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+          <n-tab>
+            <n-tab-panel label="form">
+              <n-form
+                inline
+                :label-width="80"
               >
-                <template #table-operation>
-                  <n-button>custom operation by v-slot:table-operation</n-button>
-                </template>
-              </n-advance-table>
+                <n-form-item label="name">
+                  <n-input placeholder="Input your name" />
+                </n-form-item>
+                <n-form-item label="age">
+                  <n-input placeholder="Input your age" />
+                </n-form-item>
+                <n-form-item label="phone">
+                  <n-input placeholder="Input your phone number" />
+                </n-form-item>
+              </n-form>
             </n-tab-panel>
             <n-tab-panel
               disabled
@@ -69,8 +95,191 @@
               {{ item.content }}
             </n-tab-panel>
           </n-tab>
+          </textarea>
+        </div>
+      </div>
+
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Basic Usage / name attribute
+        </div>
+        <div class="n-doc-section__view">
+          <n-button @click="updateName">
+            Change Name
+          </n-button>
+          <n-tab
+            :name="toggleName"
+          >
+            <n-tab-panel
+              name="a"
+              label="a"
+            >
+              Name: a. <br>
+              We can control the element display by setting the tab's name attribute.<br>
+              Also we can use tab-panel's active attribute to init the display.
+              And tab-panels's active attribute is the first priority.
+            </n-tab-panel>
+            <n-tab-panel
+              name="b"
+              label="b"
+            >
+              Name: b. <br>
+            </n-tab-panel>
+          </n-tab>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+          <n-button @click="updateName">
+            Change Name
+          </n-button>
+          <n-tab
+            :name="toggleName"
+          >
+            <n-tab-panel
+              name="a"
+              label="a"
+            >
+              Name: a. <br>
+            </n-tab-panel>
+            <n-tab-panel
+              name="b"
+              label="b"
+            >
+              Name: b. <br>
+              We can control the element display by setting the tab's name attribute.<br>
+              Also we can use tab-panel's active attribute to init the display.
+              And tab-panels's active attribute is the first priority.
+            </n-tab-panel>
+          </n-tab>
+          <script>
+          export default {
+            data () {
+              return {
+                toggleName: 'b'
+              }
+            },
+            methods: {
+              updateName () {
+                this.toggleName = this.toggleName === 'a' ? 'b' : 'a'
+              }
+            }
+          }
+          </script>
+          </textarea>
+        </div>
+      </div>
+
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Basic Usage / name attribute
+        </div>
+        <div class="n-doc-section__view">
+          <n-tab
+            type="card"
+            closable
+            addable
+            :add-panel="addPanelItem"
+            :tab-remove="tabRemove"
+            :before-leave="beforeLeave"
+          >
+            <n-tab-panel label="closable">
+              I am a input <n-input placeholder="lalala" />
+            </n-tab-panel>
+            <n-tab-panel
+              active
+              label="card mode"
+            >
+              I am an active button <n-button> hahaha </n-button>
+              <br>Two mode supported now: normal and card.
+              closable only can use in card mode.
+              <br>
+              Configure addable and add-panel attributes to dynamically add panels.
+              <br>
+              before-leave attribute: callback before tab-panel changed
+              <br>
+              tab-remove attribute: callback after tab removed, param is the instance of the panel.
+              <br>
+            </n-tab-panel>
+            <n-tab-panel label="addable">
+              I am a button <n-button> hahaha </n-button>
+            </n-tab-panel>
+            <n-tab-panel
+              v-for="(i, j) in panels"
+              :key="j"
+              :label="i.label"
+            >
+              {{ i.content }}
+            </n-tab-panel>
+          </n-tab>
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+             <n-tab
+            type="card"
+            closable
+            addable
+            :add-panel="addPanelItem"
+            :tab-remove="tabRemove"
+            :before-leave="beforeLeave"
+          >
+            <n-tab-panel label="closable">
+              I am a input <n-input placeholder="lalala" />
+            </n-tab-panel>
+            <n-tab-panel
+              active
+              label="card mode"
+            >
+              I am an active button <n-button> hahaha </n-button>
+              <br>Two mode supported now: normal and card.
+              closable only can use in card mode.
+              <br>
+              Configure addable and add-panel attributes to dynamically add panels.
+              <br>
+              before-leave attribute: callback before tab-panel changed
+              <br>
+              tab-remove attribute: callback after tab removed, param is the instance of the panel.
+              <br>
+            </n-tab-panel>
+            <n-tab-panel label="addable">
+              I am a button <n-button> hahaha </n-button>
+            </n-tab-panel>
+            <n-tab-panel
+              v-for="(i, j) in panels"
+              :key="j"
+              :label="i.label"
+            >
+              {{ i.content }}
+            </n-tab-panel>
+          </n-tab>
+          <script>
+            export {
+              data () {
+                return {
+
+                }
+              },
+              methods: {
+                addPanelItem () {
+                  this.panels.push({
+                    label: this.panels.length,
+                    content: 'i am number' + this.panels.length
+                  })
+                },
+                tabRemove (i) {
+                  console.log('callback tab-remove', i)
+                },
+                beforeLeave (n, o) {
+                  return new Promise((resolve, reject) => {
+                    setTimeout(() => {
+                      resolve('e')
+                    }, 500)
+                  })
+                }
+              }
+            }
+          </script>
+          </textarea>
         </div>
-        <div class="n-doc-section__source" />
       </div>
     </div>
   </div>
@@ -81,65 +290,30 @@ import docCodeEditorMixin from './docCodeEditorMixin'
 export default {
   mixins: [docCodeEditorMixin],
   data () {
-    let d = new Array(20).fill(0)
-    d = d.map((item, idx) => {
-      return {
-        name: 'xiaobai' + idx,
-        age: Math.ceil((Math.random() * 20))
-      }
-    })
     return {
       panels: [],
-      data: d,
-      columns0: [
-        {
-          title: 'Name',
-          key: 'name',
-          width: 300
-        },
-        {
-          title: '#',
-          render: (h, params) => {
-            return (
-              <n-button
-                style="margin:0;"
-                size="small"
-                onClick={() => this.handleClick(params)}
-              >
-                delete
-              </n-button>
-            )
-          }
-        },
-        {
-          title: 'Age',
-          key: 'age',
-          render: (h, params) => {
-            return <b>{params.row.age}</b>
-          }
-        },
-        {
-          title: '#',
-          render: (h, params) => {
-            return (
-              <n-button
-                style="margin:0;"
-                size="small"
-                onClick={() => this.handleClick(params)}
-              >
-                delete
-              </n-button>
-            )
-          }
-        }]
+      toggleName: 'b'
     }
   },
   methods: {
-    addPanel () {
+    addPanelItem () {
       this.panels.push({
         label: this.panels.length,
         content: 'i am number' + this.panels.length
       })
+    },
+    tabRemove (i) {
+      console.log('callback tab-remove', i)
+    },
+    updateName () {
+      this.toggleName = this.toggleName === 'a' ? 'b' : 'a'
+    },
+    beforeLeave (n, o) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve('e')
+        }, 500)
+      })
     }
   }
 }
diff --git a/packages/common/Tab/src/TabPanel.vue b/packages/common/Tab/src/TabPanel.vue
index f787801d7..292ddc4ea 100644
--- a/packages/common/Tab/src/TabPanel.vue
+++ b/packages/common/Tab/src/TabPanel.vue
@@ -66,23 +66,19 @@ export default {
     this.$on('display-none', this.setDisplayNone)
   },
   beforeDestroy () {
-    console.log('before destory call')
     this.$off('display-none', this.setDisplayNone)
   },
   methods: {
     updateIsShow (flag) {
       this.isShow = flag
       this.$forceUpdate()
-      // window.getComputedStyle(this.NTab.refs['slot'], null).getPropertyValue('width')
-      // this.$refs['panel'].classList.toggle('n-tab-panel_active')
-      // 这里应该是根据切换的方向(左右) 来设置
     },
     setTransfer (per) {
+      // 这里可以优化, 直接在上层div做整体移动, 不需要对子元素移动
       this.style.transform = 'translateX(' + per + ')'
     },
     setDisplayNone (i) {
       if (i === this._NaiveTabOrder) {
-        // this.$set(this.style, 'display', 'none')
         this.unDelete = false
       }
     }
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
index 17a4b20b9..ea12f751b 100644
--- a/packages/common/Tab/src/main.vue
+++ b/packages/common/Tab/src/main.vue
@@ -1,27 +1,32 @@
 <template>
   <div
-    class="n-tab"
+    :class="tabCls"
   >
     <div
       :class="addable ? 'n-tab--label_addable n-tab--label' : 'n-tab--label'"
     >
-      <div
-        v-for="(label, i) in labels"
-        :key="i"
-        :class="getClass(i)"
-        @click="updateActive($event, i)"
-      >
-        <span class="n-tab--label-content">{{ label }}
-          <span class="n-tab--label-delete"> + </span>
-        </span>
+      <div style="display: inline-flex;">
+        <div
+          v-for="(label, i) in labels"
+          :key="i"
+          :class="getClass(i)"
+          @click="clickChange($event, i)"
+        >
+          <span class="n-tab--label-content">
+            <span class="n-tab--label-text">{{ label }}</span>
+            <n-icon
+              class="n-tab--label-delete"
+              type="ios-close"
+              size="20"
+            />
+          </span>
+        </div>
       </div>
-      <n-button
-        size="small"
+      <n-icon
+        type="ios-add"
         class="n-tab--label-add"
         @click="addPanelItem"
-      >
-        +
-      </n-button>
+      />
     </div>
     <div
       ref="slot"
@@ -53,7 +58,7 @@ export default {
     },
     type: {
       type: String,
-      default: 'normal' // card board?
+      default: 'normal' // card board
     },
     addable: {
       type: Boolean,
@@ -62,17 +67,52 @@ export default {
     addPanel: {
       type: Function,
       default: () => {}
+    },
+    beforeLeave: {
+      type: Function,
+      default: () => { return true }
+    },
+    // tabClick: {
+    //   type: Function,
+    //   default: () => {}
+    // },
+    tabRemove: {
+      type: Function,
+      default: () => {}
     }
+    // tabAdd: {
+    //   type: Function,
+    //   default: () => {}
+    // },
+    // edit: {
+    //   type: Function,
+    //   default: () => {}
+    // }
   },
   data () {
     return {
       labels: [],
+      names: [],
       active: null, // number
       offset: null,
       prefix: 'n-tab--label'
     }
   },
   computed: {
+    tabCls () {
+      let type = ['normal', 'card', 'board']
+      let cls = 'n-tab '
+      return type.indexOf(this.type) > -1 ? cls + 'n-tab_' + this.type + '' : ''
+    }
+  },
+  watch: {
+    name (n, o) {
+      let i = this.names.indexOf(n)
+      if (i === -1) {
+        return
+      }
+      this.specPanel(i)
+    }
   },
   created () {
     this.updateOrder()
@@ -89,20 +129,23 @@ export default {
     getClass (i) {
       let panel = this.getTabPanel(i) || {}
       let cName = this.prefix + '-item '
+      let type = ['normal', 'card', 'board']
       cName += (panel.disabled ? this.prefix + '-item_disabled ' : '')
       cName += (this.active === i ? this.prefix + '-item_active ' : '')
-      cName += this.type === 'card' ? this.prefix + '-item_card ' : ''
-      cName += this.type === 'card' && (this.closable || panel.closable) ? this.prefix + '-item_close ' : ''
-      // cName += this.addable ? this.prefix + '-item_addable ' : ''
+      cName += type.indexOf(this.type) > -1 ? this.prefix + '-item_' + this.type + '' : ''
+      cName += type.indexOf(this.type) && (this.closable || panel.closable) ? this.prefix + '-item_close ' : ''
 
       return cName
     },
     updateLabels () {
       let labels = []
       let j = 0
+      this.names = []
       this.$children.forEach((i) => {
         if (i.$options.name === 'NTabPanel') {
-          labels.push(i.label || '')
+          let l = i.label === undefined ? '' : i.label
+          labels.push(l)
+          this.names.push(i.name)
           i._NaiveTabOrder = j++
         }
       })
@@ -111,13 +154,30 @@ export default {
     initActive () {
       this.active = this.labels.length - 1
     },
+    clickChange (e, i) {
+      let oldName = this.names[this.active]
+      let newName = this.names[i]
+      let eName = e.target.className
+      let eParentName = e.target.parentElement.className
+      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
+      if (isLabel) {
+        Promise.resolve(this.beforeLeave(newName, oldName)).then(res => {
+          if (res) {
+            this.updateActive(e, i)
+          }
+        })
+      } else {
+        this.updateActive(e, i)
+      }
+    },
     updateActive (e, i) {
       let eName = e.target.className
       let eParentName = e.target.parentElement.className
       let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
-      if (eName === 'n-tab--label-delete') {
+      if (eName.indexOf('n-tab--label-delete') > -1) {
         // steps while deleting, need to set display none to label and the tab panel and then init the display
         this.labels.splice(i, 1)
+        this.names.splice(i, 1)
         this.broadcast('NTabPanel', 'display-none', i)
         this.updateOrder(false)
         if (this.active === i) {
@@ -127,15 +187,17 @@ export default {
           this.active = i > this.active ? this.active : this.active - 1
         }
         this.offset = '-' + this.active * 100 + '%'
+        this.tabRemove(this.getTabPanel(i))
       } else if (isLabel && i !== this.active) {
-        this.getTabPanel(this.active).updateIsShow(false)
-        this.active = i
-        let temp = this.getTabPanel(i)
-        console.log(temp, this.$children, i)
-        temp.updateIsShow(true)
-        this.offset = '-' + this.active * 100 + '%'
+        this.specPanel(i)
       }
     },
+    specPanel (i) {
+      this.getTabPanel(this.active).updateIsShow(false)
+      this.active = i
+      this.getTabPanel(i).updateIsShow(true)
+      this.offset = '-' + this.active * 100 + '%'
+    },
     updateOrder (init = true) {
       // method duplicate with updateLabels
       let j = 0
@@ -161,7 +223,6 @@ export default {
       })
       this.active = order > -1 ? order : 0
       this.offset = '-' + this.active * 100 + '%'
-      console.log('active', this.active)
     },
     getTabPanel (i) {
       if (i === undefined) return
diff --git a/packages/utils/index.js b/packages/utils/index.js
index edd65e806..0045e47a7 100644
--- a/packages/utils/index.js
+++ b/packages/utils/index.js
@@ -27,8 +27,22 @@ const getObjValue = (obj, keys) => {
   return keys.reduce((res, n) => (res !== undefined && res[n] !== undefined ? res[n] : null), obj)
 }
 
+/**
+ * transfer function into promise
+ */
+const funcToPromise = (fn, receiver) => {
+  return (...args) => {
+    return new Promise((resolve, reject) => {
+      fn.apply(receiver, [...args, (err, res) => {
+        return err ? reject(err) : resolve(res)
+      }])
+    })
+  }
+}
+
 export {
   getScrollParent,
   deepClone,
-  getObjValue
+  getObjValue,
+  funcToPromise
 }
diff --git a/styles/Tab.scss b/styles/Tab.scss
index 2d1ec8a93..66c230da0 100644
--- a/styles/Tab.scss
+++ b/styles/Tab.scss
@@ -1,98 +1,158 @@
 @import './mixins/mixins.scss';
 @import './theme/default.scss';
 
+// @include b(tab) {
+//   width: 100%;
+//   height: 100%;
+//   padding: 0 10px;
+//   background-color: #171D33;
+//   .n-tab--label {
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     font-weight: bold;
+//     font-size: 15px;
+//     color: #ffffff;
+//     .n-tab--label-item {
+//       &:not(:last-child) {
+//         margin-right: 25px;
+//       }
+//       padding-bottom: 8px;
+//       .n-tab--label-delete {
+//         display: none;
+//         margin-left: 9px;
+//       }
+//       &:hover {
+//         color: #55E8C7;
+//       }
+     
+//     }
+//     .n-tab--label-item_active {
+//       color: #63E2B7;
+//       border-bottom: 2px solid rgba(99, 226, 183, 1);
+//     }
+//     .n-tab--label-item_delete {
+//       .n-tab--label-delete {
+//         display: inline-block;
+//       }
+//     }
+//     .n-tab--label-item_disabled {
+//       color: #FFFFFF; 
+//       opacity: 0.3;
+//       pointer-events: none;
+//     }
+//     .n-tab--label-item_card {
+//       margin-left: 0;
+//       margin-right: 6px;
+//       padding: 8px 16px;
+//       border-radius: 6px 6px 0 0;
+//       background-color: rgba(255, 255, 255, 0.3);
+//       .n-tab--label-content {
+//         display: flex;
+//         align-items: center;
+//         border: none;
+//         color: #50E3C2
+//       }
+//       &.n-tab--label-item_active {
+//         border: none;
+//       }
+//       &:hover {
+//         color: #55E8C7;
+//         border: none;
+//       }
+//       &.n-tab--label-item_close {
+//         .n-tab--label-delete {
+//           display: inline-block;
+//           margin-left: 9px;
+//         }
+//       }
+//     }
+//     .n-tab--label-add {
+//       display: none;
+//       font-size: 24px;
+//     }
+//     &.n-tab--label_addable {
+//       .n-tab--label-add {
+//         display: inline-block;
+//       }
+//     }
+//   }
+//   .n-tab--slot {
+//     display: flex;
+//     width: 100%;
+//     height: 100%;
+//     overflow: hidden;
+//   }
+// }
+
 @include b(tab) {
   width: 100%;
   height: 100%;
-  background-color: #171D33;
+  // border-radius: 9px;
   .n-tab--label {
     display: flex;
     align-items: center;
-    justify-items: flex-start;
+    justify-content: space-between;
     font-weight: bold;
     font-size: 15px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    color: #ffffff;
-    // .n-tab--label-item:not(:last-child) {
-    //   margin-right: 25px;
-    // }
-    .n-tab--label-item {
-      margin-left: 25px;
-      padding-bottom: 8px;
-      // .n-tab--label-content {
-        // padding-bottom: 8px;
-        // border-bottom: 0px solid rgba(99, 226, 183, 1);
-      // }
-      .n-tab--label-delete {
-        display: none;
-        margin-left: 9px;
-      }
-      &:hover {
-        color: #55E8C7;
-        // border-bottom: 2px;
-        // border-bottom: 2px solid rgba(99, 226, 183, 1);
-      }
-     
-    }
-    .n-tab--label-item_active {
-      color: #63E2B7;
-      // border-bottom: 2px;
-      border-bottom: 2px solid rgba(99, 226, 183, 1);
-    }
-    .n-tab--label-item_delete {
-      .n-tab--label-delete {
-        display: inline-block;
-      }
-    }
-    .n-tab--label-item_disabled {
-      color: #FFFFFF; 
-      opacity: 0.3;
-      pointer-events: none;
-    }
-    .n-tab--label-item_card {
-      margin-left: 0;
-      margin-right: 6px;
-      padding: 8px 16px;
-      border-radius: 6px 6px 0 0;
-      background-color: rgba(255, 255, 255, 0.3);
-      .n-tab--label-content {
-        border: none;
-        color: #50E3C2
-      }
-      &.n-tab--label-item_active {
-        border: none;
-      }
-      &:hover {
-        color: #55E8C7;
-        border: none;
-      }
-      &.n-tab--label-item_close {
-        .n-tab--label-delete {
-          display: inline-block;
-          margin-left: 9px;
-        }
-      }
-    }
-    // .n-tab--label-item_active {
-    //   color: #63E2B7;
-    //   // border-bottom: 2px;
-    //   border-bottom: 2px solid rgba(99, 226, 183, 1);
-    // }
-    .n-tab--label-add {
-      display: none;
-    }
-    &.n-tab--label_addable {
-      .n-tab--label-add {
-        display: inline-block;
-      }
+    .n-tab--label-delete {
+      display: inline-block;
+      margin-left: 9px;
     }
   }
-  .n-tab--slot {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
+  &.n-tab_card {
+    // background-color: rgb(75, 81, 106);
+    padding-top: 6px;
+    padding-bottom: 16px;
+    .n-tab--label {
+      padding: 0 8px;
+      // margin-bottom: 12px;
+      .n-tab--label-item:not(:last-child) {
+        margin-right: 6px;
+      }
+      .n-tab--label-content {
+        display: flex;
+        align-items: center;
+        padding: 8px 16px;
+        border: none;
+        color: #ffffff;
+        background-color: rgba(255, 255, 255, .1);
+        border-radius: 6px 6px 0 0;
+        .n-tab--label-delete {
+          color: #F2F2F4;
+          opacity: 0.5;
+        }
+      }
+      .n-tab--label-item_active {
+        .n-tab--label-content {
+          color: #50E3C2;
+          background-color: rgba(71, 228, 194, 0.1);
+        }
+      }
+      .n-tab--label-item_disabled {
+        pointer-events: none;
+        .n-tab--label-content {
+          opacity: 0.25;
+          background-color: rgba(255, 255, 255, .1);
+        }
+        .n-tab--label-delete {
+          opacity: 0.2;
+        }
+      }
+      .n-tab--label-text:hover {
+        color: #50E3C2;
+      }
+      .n-tab--label-delete:hover {
+        color: #63E2B7;
+      }
+    }
+    .n-tab--slot {
+      // margin: 12px 24px 16px;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
   }
 }
 

From 8955d36127db45a8f5e959eaf05c15ca99ce6419 Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Mon, 5 Aug 2019 19:22:27 +0800
Subject: [PATCH 7/9] feat(advance table): can update a row data by  then
 filters will be responsive

---
 demo/components/advanceTableDemo.vue      |  4 ++++
 package.json                              |  2 +-
 packages/common/AdvanceTable/row/index.js |  7 ++-----
 packages/common/AdvanceTable/src/main.vue | 23 ++++++++++++++++++-----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/demo/components/advanceTableDemo.vue b/demo/components/advanceTableDemo.vue
index 5f91fc3ae..b6095b15d 100644
--- a/demo/components/advanceTableDemo.vue
+++ b/demo/components/advanceTableDemo.vue
@@ -980,6 +980,10 @@ export default {
   methods: {
     handleClick (params) {
       alert('delete' + JSON.stringify(params))
+      this.$set(this.data, params._index, {
+        ...params.row,
+        age: 100
+      })
     },
     onChange1 ({ filter, sorter, pagination, search }) {
       console.log('执行', { filter, sorter, pagination, search })
diff --git a/package.json b/package.json
index e24f43d4a..cdefc89c7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.72",
+  "version": "0.2.73",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/common/AdvanceTable/row/index.js b/packages/common/AdvanceTable/row/index.js
index fe8b8f8c3..5de7c083f 100644
--- a/packages/common/AdvanceTable/row/index.js
+++ b/packages/common/AdvanceTable/row/index.js
@@ -8,14 +8,11 @@ export default {
     keyName: String
   },
   render: (h, ctx) => {
-    const params = {
-      row: ctx.props.row,
-      index: ctx.props.index
-    }
+    const params = ctx.props.row
 
     const { keyName, render, row } = ctx.props
     if (render) {
       return h('div', [render(h, params)])
-    } else return h('div', [row[keyName]])
+    } else return h('div', [params.row[keyName]])
   }
 }
diff --git a/packages/common/AdvanceTable/src/main.vue b/packages/common/AdvanceTable/src/main.vue
index 7215d4e33..0a7e2e4db 100644
--- a/packages/common/AdvanceTable/src/main.vue
+++ b/packages/common/AdvanceTable/src/main.vue
@@ -106,7 +106,7 @@
             v-for="column in columns"
             :key="column.key"
             :style="computeAlign(column)"
-            :class="computeTdClass(column,{row:rowData,index:i,key:column.key})"
+            :class="computeTdClass(column,rowData)"
           >
             <row
               :index="i"
@@ -219,8 +219,14 @@ export default {
     //   return this.columns[idx].order ? this.columns[idx].order : 0
     // })
     // console.log(sortIndexs)
+    let copyData = this.data.slice(0).map((row, idx) => {
+      return {
+        row,
+        _index: idx
+      }
+    })
     return {
-      copyData: this.data.slice(0),
+      copyData,
       sortIndexs,
       wrapperWidth: 'unset',
       tbodyWidth: 'auto;',
@@ -342,7 +348,12 @@ export default {
       this.$emit('on-page-change', this.paginationer)
     },
     data () {
-      this.copyData = this.data.slice(0)
+      this.copyData = this.data.slice(0).map((row, idx) => {
+        return {
+          row,
+          _index: idx
+        }
+      })
       this.searchData = this.computeShowingData()
       this.searchDataNoSort = null
     },
@@ -487,7 +498,7 @@ export default {
           const { value, filterFn } = this.currentFilterColumn[key]
           if (value && filterFn !== 'custom') {
             data = data.filter(item => {
-              return filterFn(value, item)
+              return filterFn(value, item.row)
             })
           }
         })
@@ -496,7 +507,7 @@ export default {
       if (this.currentSearchColumn && this.search.onSearch !== 'custom') {
         const { key, word } = this.currentSearchColumn
         data = data.filter(item => {
-          return this.search.onSearch(key, word, item)
+          return this.search.onSearch(key, word, item.row)
         })
       }
 
@@ -524,6 +535,8 @@ export default {
           }
         } else {
           data = data.sort((a, b) => {
+            a = a.row
+            b = b.row
             if (type > 0) {
               if (column.sorter) {
                 return column.sorter(a, b)

From d2bb3901af49e7925c03ed7a969267a2d46003ac Mon Sep 17 00:00:00 2001
From: mangogan <1261639871@qq.com>
Date: Mon, 5 Aug 2019 20:06:51 +0800
Subject: [PATCH 8/9] not-finished: vertical mode and custom label need to add

---
 demo/components/tabDemo.vue      |  18 ++-
 packages/common/Tab/src/main.vue |  19 +--
 styles/Tab.scss                  | 215 +++++++++++++++++++------------
 3 files changed, 154 insertions(+), 98 deletions(-)

diff --git a/demo/components/tabDemo.vue b/demo/components/tabDemo.vue
index 24266ca3c..a619f4690 100644
--- a/demo/components/tabDemo.vue
+++ b/demo/components/tabDemo.vue
@@ -11,11 +11,12 @@
     <div class="n-doc-body">
       <div class="n-doc-section">
         <div class="n-doc-section__header">
-          Basic Usage
+          Basic Usage / board mode
         </div>
         <div class="n-doc-section__view">
           <n-tab
-            type="card"
+            type="board"
+            addable
           >
             <n-tab-panel label="Select">
               <n-form
@@ -58,7 +59,10 @@
         </div>
         <div class="n-doc-section__source">
           <textarea v-pre>
-          <n-tab>
+          <n-tab
+            type="board"
+            addable
+          >
             <n-tab-panel label="form">
               <n-form
                 inline
@@ -112,7 +116,7 @@
           >
             <n-tab-panel
               name="a"
-              label="a"
+              label="Select"
             >
               Name: a. <br>
               We can control the element display by setting the tab's name attribute.<br>
@@ -121,10 +125,14 @@
             </n-tab-panel>
             <n-tab-panel
               name="b"
-              label="b"
+              label="Hover"
             >
               Name: b. <br>
             </n-tab-panel>
+            <n-tab-panel
+              disabled
+              label="Disabled"
+            />
           </n-tab>
         </div>
         <div class="n-doc-section__source">
diff --git a/packages/common/Tab/src/main.vue b/packages/common/Tab/src/main.vue
index ea12f751b..de4e5558c 100644
--- a/packages/common/Tab/src/main.vue
+++ b/packages/common/Tab/src/main.vue
@@ -5,7 +5,7 @@
     <div
       :class="addable ? 'n-tab--label_addable n-tab--label' : 'n-tab--label'"
     >
-      <div style="display: inline-flex;">
+      <div style="display: inline-flex;margin-bottom: -1px;">
         <div
           v-for="(label, i) in labels"
           :key="i"
@@ -17,22 +17,23 @@
             <n-icon
               class="n-tab--label-delete"
               type="ios-close"
-              size="20"
             />
           </span>
         </div>
       </div>
       <n-icon
-        type="ios-add"
+        type="ios-add-circle-outline"
         class="n-tab--label-add"
         @click="addPanelItem"
       />
     </div>
     <div
       ref="slot"
-      class="n-tab--slot"
+      class="n-tab--slot-panel"
     >
-      <slot />
+      <div class="n-tab--slot">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
@@ -102,7 +103,7 @@ export default {
     tabCls () {
       let type = ['normal', 'card', 'board']
       let cls = 'n-tab '
-      return type.indexOf(this.type) > -1 ? cls + 'n-tab_' + this.type + '' : ''
+      return type.indexOf(this.type) > -1 ? cls + 'n-tab_' + this.type + '' : cls + 'n-tab_normal '
     }
   },
   watch: {
@@ -159,7 +160,8 @@ export default {
       let newName = this.names[i]
       let eName = e.target.className
       let eParentName = e.target.parentElement.className
-      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
+      let ePPName = ((e.target.parentElement || {}).parentElement || {}).className
+      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1 || ePPName.indexOf('n-tab--label-item') > -1
       if (isLabel) {
         Promise.resolve(this.beforeLeave(newName, oldName)).then(res => {
           if (res) {
@@ -173,7 +175,8 @@ export default {
     updateActive (e, i) {
       let eName = e.target.className
       let eParentName = e.target.parentElement.className
-      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
+      let ePPName = ((e.target.parentElement || {}).parentElement || {}).className
+      let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1 || ePPName.indexOf('n-tab--label-item') > -1
       if (eName.indexOf('n-tab--label-delete') > -1) {
         // steps while deleting, need to set display none to label and the tab panel and then init the display
         this.labels.splice(i, 1)
diff --git a/styles/Tab.scss b/styles/Tab.scss
index 66c230da0..22e3c9312 100644
--- a/styles/Tab.scss
+++ b/styles/Tab.scss
@@ -1,94 +1,21 @@
 @import './mixins/mixins.scss';
 @import './theme/default.scss';
 
-// @include b(tab) {
-//   width: 100%;
-//   height: 100%;
-//   padding: 0 10px;
-//   background-color: #171D33;
-//   .n-tab--label {
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     font-weight: bold;
-//     font-size: 15px;
-//     color: #ffffff;
-//     .n-tab--label-item {
-//       &:not(:last-child) {
-//         margin-right: 25px;
-//       }
-//       padding-bottom: 8px;
-//       .n-tab--label-delete {
-//         display: none;
-//         margin-left: 9px;
-//       }
-//       &:hover {
-//         color: #55E8C7;
-//       }
-     
-//     }
-//     .n-tab--label-item_active {
-//       color: #63E2B7;
-//       border-bottom: 2px solid rgba(99, 226, 183, 1);
-//     }
-//     .n-tab--label-item_delete {
-//       .n-tab--label-delete {
-//         display: inline-block;
-//       }
-//     }
-//     .n-tab--label-item_disabled {
-//       color: #FFFFFF; 
-//       opacity: 0.3;
-//       pointer-events: none;
-//     }
-//     .n-tab--label-item_card {
-//       margin-left: 0;
-//       margin-right: 6px;
-//       padding: 8px 16px;
-//       border-radius: 6px 6px 0 0;
-//       background-color: rgba(255, 255, 255, 0.3);
-//       .n-tab--label-content {
-//         display: flex;
-//         align-items: center;
-//         border: none;
-//         color: #50E3C2
-//       }
-//       &.n-tab--label-item_active {
-//         border: none;
-//       }
-//       &:hover {
-//         color: #55E8C7;
-//         border: none;
-//       }
-//       &.n-tab--label-item_close {
-//         .n-tab--label-delete {
-//           display: inline-block;
-//           margin-left: 9px;
-//         }
-//       }
-//     }
-//     .n-tab--label-add {
-//       display: none;
-//       font-size: 24px;
-//     }
-//     &.n-tab--label_addable {
-//       .n-tab--label-add {
-//         display: inline-block;
-//       }
-//     }
-//   }
-//   .n-tab--slot {
-//     display: flex;
-//     width: 100%;
-//     height: 100%;
-//     overflow: hidden;
-//   }
-// }
-
 @include b(tab) {
   width: 100%;
   height: 100%;
-  // border-radius: 9px;
+  border-radius: 9px;
+  background-color: rgb(23, 29, 51);
+  .n-tab--label-add {
+    display: none;
+    font-size: 24px;
+    margin-right: 8px;
+  }
+  .n-tab--label_addable {
+    .n-tab--label-add {
+      display: inline-block;
+    }
+  }
   .n-tab--label {
     display: flex;
     align-items: center;
@@ -97,6 +24,7 @@
     font-size: 15px;
     .n-tab--label-delete {
       display: inline-block;
+      font-size: 20px;
       margin-left: 9px;
     }
   }
@@ -146,6 +74,123 @@
         color: #63E2B7;
       }
     }
+    .n-tab--slot-panel {
+      padding: 12px 24px 16px;
+    }
+    .n-tab--slot {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+  &.n-tab_board {
+    background-color: rgb(23, 29, 51);
+    .n-tab--label {
+      border-bottom: 1px solid rgba(255, 255, 255, .3);
+      .n-tab--label-item:not(:last-child) {
+        margin-right: 3px;
+      }
+      .n-tab--label-content {
+        display: flex;
+        align-items: center;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 6px 6px 0 0;
+        border: 1px solid rgba(255, 255, 255, .5);
+        background-color: rgba(255, 255, 255, .1);
+        color: #ffffff;
+        .n-tab--label-delete {
+          color: #F2F2F4;
+          opacity: 0.5;
+        }
+      }
+      .n-tab--label-item_active {
+        .n-tab--label-content {
+          color: #63E2B7;
+          border-color: #63E2B7;
+          border-bottom: none;
+          background: rgb(23, 29, 51);
+        }
+        &:after {
+          display: block;
+          content: '';
+          width: 100%;
+          height: 1px;
+          background-color: #171D33;
+        }
+      }
+      .n-tab--label-item_disabled {
+        pointer-events: none;
+        .n-tab--label-content {
+          opacity: 0.3;
+        }
+        .n-tab--label-delete {
+          opacity: 0.2;
+        }
+      }
+      .n-tab--label-text:hover {
+        color: #50E3C2;
+      }
+      .n-tab--label-delete:hover {
+        color: #63E2B7;
+      }
+    }
+    .n-tab--slot-panel {
+      padding: 13px 4px 16px 16px;
+      border-radius: 0px 0px 9px 9px;
+    }
+    .n-tab--slot {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+  &.n-tab_normal {
+    padding: 14px 23px 20px;
+    background-color: rgb(31, 38, 62);
+    .n-tab--label-add {
+      margin-right: -15px;
+    }
+    .n-tab--label {
+      padding-bottom: 8px;
+      .n-tab--label-item:not(:last-child) {
+        margin-right: 35px;
+      }
+      .n-tab--label-content {
+        display: flex;
+        align-items: center;
+        border: none;
+        padding-bottom: 8px;
+        color: #ffffff;
+        .n-tab--label-delete {
+          color: #F2F2F4;
+          opacity: 0.5;
+        }
+      }
+      .n-tab--label-item_active {
+        .n-tab--label-content {
+          color: #63E2B7;
+          border-bottom: 2px solid #63E2B7;
+        }
+      }
+      .n-tab--label-item_disabled {
+        pointer-events: none;
+        .n-tab--label-content {
+          opacity: 0.3;
+        }
+        .n-tab--label-delete {
+          opacity: 0.2;
+        }
+      }
+      .n-tab--label-text:hover {
+        color: #50E3C2;
+      }
+      .n-tab--label-delete:hover {
+        color: #63E2B7;
+      }
+    }
     .n-tab--slot {
       // margin: 12px 24px 16px;
       display: flex;

From 7306683ba9acda3c84ed4a14171abb6e7cb81869 Mon Sep 17 00:00:00 2001
From: JiwenBai <jiwen.bai@tusimple.ai>
Date: Tue, 6 Aug 2019 10:40:52 +0800
Subject: [PATCH 9/9] fixed(input-number): button in from ,the type will submit
 when type not set

---
 packages/common/InputNumber/src/main.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/common/InputNumber/src/main.vue b/packages/common/InputNumber/src/main.vue
index c2f800dc8..00e8fefff 100644
--- a/packages/common/InputNumber/src/main.vue
+++ b/packages/common/InputNumber/src/main.vue
@@ -7,6 +7,7 @@
     }"
   >
     <button
+      type="button"
       class="n-input-number__minus-button"
       :class="{
         [`n-input-bumber__button--disabled`]: value !== null && safeMin !== null && value <= safeMin
@@ -24,6 +25,7 @@
       @keyup.enter="handleBlurOrEnter"
     >
     <button
+      type="button"
       class="n-input-number__add-button"
       :class="{
         [`n-input-bumber__button--disabled`]: value !== null && safeMax !== null && value >= safeMax