From 4a56b810fd019e701a5706196ab385f26c835861 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 11 Sep 2020 20:52:54 +0300
Subject: [PATCH] Migrated TabView

---
 src/components/tabpanel/TabPanel.vue |  8 ++++++
 src/components/tabview/TabView.vue   | 37 ++++++++++------------------
 src/views/tabview/TabViewDemo.vue    |  6 ++---
 src/views/tabview/TabViewDoc.vue     | 10 ++++----
 4 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue
index e9cd4745f..5ebbcc408 100755
--- a/src/components/tabpanel/TabPanel.vue
+++ b/src/components/tabpanel/TabPanel.vue
@@ -21,6 +21,14 @@ export default {
         active(newValue) {
             this.d_active = newValue;
         }
+    },
+    mounted() {
+        if (!this.$parent.tabs.includes(this)) {
+            this.$parent.tabs.push(this);
+        }
+    },
+    beforeDestroy() {
+        this.$parent.tabs = this.$parent.tabs.filter(tab => tab !== this);
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 5f3ad675f..8ac503075 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -4,7 +4,7 @@
             <li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="[{'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
                 <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active" v-ripple>
                     <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
-                    <TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
+                    <TabPanelHeaderSlot :tab="tab" v-if="tab.$slots.header" />
                 </a>
             </li>
             <li ref="inkbar" class="p-tabview-ink-bar"></li>
@@ -18,24 +18,16 @@
 <script>
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
+import { h } from 'vue';
 
-const TabPanelHeaderSlot = {
-    functional: true,
-    props: {
-        tab: {
-            type: null,
-            default: null
-        }
-    },
-    render(createElement, context) {
-        return [context.props.tab.$scopedSlots['header']()];
-    }
-};
+const TabPanelHeaderSlot = (props) => {
+    return h(props.tab.$slots['header']);
+}
 
 export default {
     data() {
         return {
-            d_children: []
+            tabs: []
         };
     },
     mounted() {
@@ -85,20 +77,17 @@ export default {
         },
         updateInkBar() {
             let tabHeader = this.$refs.nav.children[this.findActiveTabIndex()];
-            this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
-            this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+            if (tabHeader) {
+                this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
+                this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
+            }
         }
     },
-    computed: {
-        tabs() {
-            return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
-        }
-    },
-    components: {
-        'TabPanelHeaderSlot': TabPanelHeaderSlot
-    },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'TabPanelHeaderSlot': TabPanelHeaderSlot
     }
 }
 </script>
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index f8666dfbd..c963b1fb4 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@@ -82,7 +82,7 @@
                 <h5>Custom Headers</h5>
                 <TabView class="tabview-custom" ref="tabview4">
                     <TabPanel>
-                        <template slot="header">
+                        <template #header>
                             <i class="pi pi-calendar"></i>
                             <span>Header I</span>
                         </template>
@@ -91,7 +91,7 @@
                             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     </TabPanel>
                     <TabPanel>
-                        <template slot="header">
+                        <template #header>
                             <span>Header II</span>
                             <i class="pi pi-user"></i>
                         </template>
@@ -100,7 +100,7 @@
                             voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
                     </TabPanel>
                     <TabPanel>
-                        <template slot="header">
+                        <template #header>
                             <i class="pi pi-search"></i>
                             <span>Header III</span>
                             <i class="pi pi-cog"></i>
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index efe023bb9..0e84e104b 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -76,14 +76,14 @@ import TabPanel from 'primevue/tabpanel';
 <CodeHighlight>
 &lt;TabView class="tabview-custom"&gt;
 	&lt;TabPanel&gt;
-		&lt;template slot="header"&gt;
+		&lt;template #header&gt;
 			&lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
 			&lt;span&gt;Header I&lt;/span&gt;
 		&lt;/template&gt;
 		Content I
 	&lt;/TabPanel&gt;
 	&lt;TabPanel&gt;
-		&lt;template slot="header"&gt;
+		&lt;template #header&gt;
 			&lt;span&gt;Header II&lt;/span&gt;
 			&lt;i class="pi pi-user"&gt;&lt;/i&gt;
 		&lt;/template&gt;
@@ -310,7 +310,7 @@ export default {
     &lt;h5&gt;Custom Headers&lt;/h5&gt;
     &lt;TabView class="tabview-custom"&gt;
         &lt;TabPanel&gt;
-            &lt;template slot="header"&gt;
+            &lt;template #header&gt;
                 &lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
                 &lt;span&gt;Header I&lt;/span&gt;
             &lt;/template&gt;
@@ -319,7 +319,7 @@ export default {
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
         &lt;/TabPanel&gt;
         &lt;TabPanel&gt;
-            &lt;template slot="header"&gt;
+            &lt;template #header&gt;
                 &lt;span&gt;Header II&lt;/span&gt;
                 &lt;i class="pi pi-user"&gt;&lt;/i&gt;
             &lt;/template&gt;
@@ -328,7 +328,7 @@ export default {
                 voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
         &lt;/TabPanel&gt;
         &lt;TabPanel&gt;
-            &lt;template slot="header"&gt;
+            &lt;template #header&gt;
                 &lt;i class="pi pi-search"&gt;&lt;/i&gt;
                 &lt;span&gt;Header III&lt;/span&gt;
                 &lt;i class="pi pi-cog"&gt;&lt;/i&gt;