Merge pull request bootstrap-vue#124 from salestreamsoft/master

pi0 · web-flow · commit 95d97dbc55d9 · 2017-03-02T23:04:19.000+03:30
[Tabs component] updates
diff --git a/components/tab.vue b/components/tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="tabpanel" class="tab-pane" :class="{active: active, disabled: disabled, fade: fade, in: animate}">
+  <div role="tabpanel" class="tab-pane" :class="{active: active, disabled: disabled, fade: fade, in: animate, show: active}">
     <slot></slot>
   </div>
 </template>
diff --git a/components/tabs.vue b/components/tabs.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="tabs">
-    <ul class="nav nav-tabs">
+  <div class="tabs" >
+    <ul :class="['nav','nav-' + navStyle]">
       <li class="nav-item" v-for="(item,index) in items" @click="setActive(index)">
                 <span :class="['nav-link','btn',btnSize,item.active ? 'active' : '',item.disabled ? 'disabled' : '']">
                     {{item.title}}
@@ -24,7 +24,9 @@
   export default {
       replace: true,
       data() {
+          let currentTab = this.value || 0
           return {
+              currentTab,
               items: []
           };
       },
@@ -41,6 +43,22 @@
           size: {
               type: String,
               default: 'md'
+          },
+          value: {
+              type: Number,
+              default: 0
+          },
+          navStyle: {
+              type: String,
+              default: 'tabs'
+          }
+      },
+      watch: {
+          currentTab (val) {
+              this.$emit('input', val)
+          },
+          value (val) {
+             this.setActive(val);
           }
       },
       methods: {
@@ -85,12 +103,15 @@
                   this.$set(this.$children[index], 'animate', true);
                   this.$root.$emit('changed::tab', this.items[index].id);
               }, this.fade ? TRANSITION_DURATION : 0);
+
+          // store currentActive
+              this.currentTab = index
           }
       },
       mounted() {
       // if no active tab, set the first one by default
           if (this.getActive() === -1) {
-              this.setActive(0);
+              this.setActive(this.currentTab);
           }
       },
       destroyed() {
