Fix buefy#1387

Add a fix to keep defined slots position for tabs

docs/pages/components/tabs/Tabs.vue

@@ -2,6 +2,11 @@
     <div>
         <Example :component="ExSimple" :code="ExSimpleCode"/>
 
+        <Example :component="ExDynamic" :code="ExDynamicCode" title="Dynamic">
+            <p>Items can be created / modified / deleted and will always keep the defined order.</p>
+            <p>You can also use <code>v-if</code> to show (or not) a Tab Item.</p>
+        </Example>
+
         <Example :component="ExPosition" :code="ExPositionCode" title="Position"/>
 
         <Example :component="ExIcons" :code="ExIconsCode" title="Icons"/>
@@ -33,6 +38,9 @@
     import ExSimple from './examples/ExSimple'
     import ExSimpleCode from '!!raw-loader!./examples/ExSimple'
 
+    import ExDynamic from './examples/ExDynamic'
+    import ExDynamicCode from '!!raw-loader!./examples/ExDynamic'
+
     import ExPosition from './examples/ExPosition'
     import ExPositionCode from '!!raw-loader!./examples/ExPosition'
 
@@ -56,12 +64,14 @@
             return {
                 api,
                 ExSimple,
+                ExDynamic,
                 ExPosition,
                 ExIcons,
                 ExSizes,
                 ExTypes,
                 ExExpanded,
                 ExSimpleCode,
+                ExDynamicCode,
                 ExPositionCode,
                 ExIconsCode,
                 ExSizesCode,

docs/pages/components/tabs/examples/ExDynamic.vue

@@ -0,0 +1,67 @@
+<template>
+    <section>
+        <div class="block">
+            <b-switch v-model="showMusic"> Show Music item (using <code>v-if</code>) </b-switch>
+        </div>
+        <div class="block">
+            <b-switch v-model="showBooks"> Show books item (by adding / removing from the array) </b-switch>
+        </div>
+        <b-tabs v-model="activeTab">
+            <template v-for="(tab, index) in tabs">
+                <b-tab-item
+                    v-if="tab.displayed"
+                    :key="index"
+                    :label="tab.label">
+                    {{ tab.content }}
+                </b-tab-item>
+            </template>
+        </b-tabs>
+    </section>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                activeTab: 0,
+                showMusic: true,
+                showBooks: false
+            }
+        },
+        computed: {
+            baseTabs() {
+                return [
+                    {
+                        label: 'Pictures',
+                        content: 'Lorem ipsum dolor sit amet.',
+                        displayed: true,
+                    },
+                    {
+                        label: 'Music',
+                        content: 'Lorem ipsum dolor sit amet.',
+                        displayed: this.showMusic,
+                    },
+                    {
+                        label: 'Videos',
+                        content: 'Lorem ipsum dolor sit amet.',
+                        displayed: true,
+                    }
+                ]
+            },
+            tabs() {
+                const tabs = [...this.baseTabs]
+                if (this.showBooks) {
+                    tabs.splice(tabs.length - 1, 0, this.bookTab);
+                }
+                return tabs
+            },
+            bookTab() {
+                return {
+                    label: 'Books',
+                    content: 'Lorem ipsum dolor sit amet.',
+                    displayed: true,
+                }
+            }
+        }
+    }
+</script>

src/components/tabs/TabItem.vue

@@ -43,13 +43,14 @@ export default {
             this.$destroy()
             throw new Error('You should wrap bTabItem on a bTabs')
         }
-        this.$parent.tabItems.push(this)
+        this.$parent.refreshSlots()
     },
     beforeDestroy() {
         const index = this.$parent.tabItems.indexOf(this)
         if (index >= 0) {
             this.$parent.tabItems.splice(index, 1)
         }
+        this.$parent.refreshSlots()
     },
     render(createElement) {
         // if destroy apply v-if

src/components/tabs/Tabs.vue

@@ -60,7 +60,7 @@ export default {
     data() {
         return {
             activeTab: this.value || 0,
-            tabItems: [],
+            defaultSlots: [],
             contentHeight: 0,
             isTransitioning: false,
             _isTabs: true // Used internally by TabItem
@@ -77,6 +77,11 @@ export default {
                     'is-toggle-rounded is-toggle': this.type === 'is-toggle-rounded'
                 }
             ]
+        },
+        tabItems() {
+            return this.defaultSlots
+                .filter((vnode) => vnode.componentInstance && vnode.componentOptions && vnode.componentOptions.tag === 'b-tab-item')
+                .map((vnode) => vnode.componentInstance)
         }
     },
     watch: {
@@ -97,6 +102,9 @@ export default {
         }
     },
     methods: {
+        refreshSlots() {
+            this.defaultSlots = this.$slots.default
+        },
         /**
         * Change the active tab and emit change event.
         */
@@ -123,6 +131,7 @@ export default {
         if (this.activeTab < this.tabItems.length) {
             this.tabItems[this.activeTab].isActive = true
         }
+        this.refreshSlots()
     }
 }
 </script>