Tabs refactoring

docs/components/index.js

@@ -24,5 +24,6 @@ export default {
     'popover': require('./popover').default,
     'progress': require('./progress').default,
     'table': require('./table').default,
+    'tabs': require('./tabs').default,
     'tooltip': require('./tooltip').default
 };

docs/components/tabs/README.md

@@ -0,0 +1,42 @@
+# Tabs
+
+**Basic usage**
+
+```html
+<b-tabs>
+  <b-tab title="first" active>
+    I'm the first fading tab
+  </b-tab>
+  <b-tab title="second" >
+    I'm the second tab content
+  </b-tab>
+  <b-tab title="disabled" disabled>
+    <b-card>I'm the card in tab</b-card>
+  </b-tab>
+</b-tabs>
+```
+
+**Cards Integration**
+
+Tabs support integrating with cards. Just add `card` prop!
+
+Note that you should add `no-block` prop on `<b-card>` element in order to decorate header.
+
+```html
+<b-card no-block>
+    <b-tabs ref="tabs" v-model="tabIndex" card>
+        <b-tab title="Tab 1" active>
+            Tab Contents
+        </b-tab>
+    </b-tabs>
+</b-card>
+```
+
+**Pills variant**
+
+Just add `nav-style="pills"` property to tabs component.
+
+**Fade**
+
+Fade is enabled by default when changing tabs. It can disabled with `no-fade` prop.
+

docs/components/tabs/index.js

@@ -0,0 +1,4 @@
+import meta from './meta.json';
+import readme from './README.md';
+
+export default {meta, readme};

docs/components/tabs/meta.json

@@ -0,0 +1,9 @@
+{
+  "title": "Tabs",
+  "new": true,
+  "component": "bTabs",
+  "components": [
+    "bTab"
+  ],
+  "jsfiddle": "3xwmm1qt"
+}

docs/nuxt/pages/play.vue

@@ -217,6 +217,11 @@ methods: {
         },
         methods: {
             log(tag, args) {
+                // We have to ignore props mutation warning due to vue bug when we have two instances
+                if (String(args[0]).indexOf('Avoid mutating a prop directly') !== -1) {
+                    return;
+                }
+
                 const argsArr = [tag];
                 for (let i = 0; i < args.length; i++) {
                     argsArr.push(args[i]);
@@ -227,7 +232,7 @@ methods: {
                 if (this.messages.length > 10) {
                     this.messages.splice(10);
                 }
-                this.messages.unshift([argsArr.shift(), argsArr.map(JSON.stringify).join(' ')]);
+                this.messages.unshift([argsArr.shift(), argsArr.map(String).join(' ')]);
             },
             run() {
                 // Commit latest changes

examples/tabs/demo.css

@@ -0,0 +1,4 @@
+#app {
+    padding: 20px;
+    height: 400px;
+}

examples/tabs/demo.details

@@ -0,0 +1,16 @@
+ /*
+ ---
+ name: Tabs - BootstrapVue
+ description: https://bootstrap-vue.github.io/docs/components/tabs
+ authors:
+   - Vitaly Mosin
+   - Pooya Parsa
+ resources:
+   - https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css
+   - https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css
+   - https://unpkg.com/vue@latest/dist/vue.min.js
+   - https://unpkg.com/tether@latest/dist/js/tether.min.js
+   - https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js
+ js_wrap: l
+...
+*/

examples/tabs/demo.html

@@ -0,0 +1,30 @@
+<div id="app">
+
+    <!-- Tabs with card integration -->
+    <b-card no-block>
+        <b-tabs small card ref="tabs" v-model="tabIndex">
+            <b-tab title="General">
+                I'm the first fading tab
+            </b-tab>
+            <b-tab title="Edit profile">
+                I'm the second tab
+                <b-card>I'm the card in tab</b-card>
+            </b-tab>
+            <b-tab title="Premium Plan" disabled>
+                Sibzamini!
+            </b-tab>
+        </b-tabs>
+
+    </b-card>
+
+    <!-- Control buttons-->
+    <div class="text-center">
+        <b-button-group class="mt-2">
+            <b-btn @click="$refs.tabs.previousTab()">Previous</b-btn>
+            <b-btn @click="$refs.tabs.nextTab()">Next</b-btn>
+        </b-button-group>
+        <br>
+        <span class="text-muted">Current Tab: {{tabIndex}}</span>
+    </div>
+
+</div>

examples/tabs/demo.js

@@ -0,0 +1,4 @@
+window.app = new Vue({
+    el: '#app',
+    tabIndex: null /* Binding to model is optional */
+});

lib/components/tab.vue

@@ -1,37 +1,51 @@
 <template>
-  <div role="tabpanel" class="tab-pane" :class="{active: active, disabled: disabled, fade: fade, in: animate, show: active}">
-    <slot></slot>
-  </div>
+    <transition enterToClass="show" leaveClass="show" @after-enter="afterEnter" mode="out-in">
+        <div role="tabpanel" class="tab-pane"
+             :class="[{fade, disabled, active: localActive}]"
+             v-if="localActive || !lazy" v-show="localActive || lazy"
+        ref="panel"
+   >
+       <slot></slot>
+        </div>
+    </transition>
 </template>
 
 <script>
-export default {
-    replace: true,
-    data() {
-        return {
-            fade: this.$parent.fade,
-            animate: false,
-            active: false
-        };
-    },
-    props: {
-        id: {
-            type: String,
-            default: ''
+    export default {
+        methods: {
+            afterEnter(el) {
+                el.classList.add('show');
+            }
         },
-        title: {
-            type: String,
-            default: ''
+        data() {
+            return {
+                fade: false,
+                localActive: false,
+                lazy: true
+            };
         },
-        disabled: {
-            type: Boolean,
-            default: false
+        props: {
+            id: {
+                type: String,
+                default: ''
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            active: {
+                type: Boolean,
+                default: false
+            },
+            href: {
+                type: String,
+                default: '#'
+            }
         }
-    },
-    mounted() {
-        const items = this.$parent.items;
-        items.push({id: this.id, title: this.title, active: this.active, disabled: this.disabled});
-    }
-};
+    };
 
 </script>