From 94165e359ada1106a788c77747b6a3f9ef81f95f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Nov 2020 16:17:23 +0300
Subject: [PATCH] Fixed #616 - TabView does not support dynamic tabs

---
 src/components/tabview/TabView.vue | 21 ++++++++++-
 src/views/tabview/TabViewDemo.vue  | 31 +++++++++++++++-
 src/views/tabview/TabViewDoc.vue   | 59 +++++++++++++++++++++++++++++-
 3 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 935eea005..d38bea3e4 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -72,12 +72,29 @@ export default {
         },
         isTabDisabled(tab) {
             return tab.props?.disabled;
+        },
+        isTabPanel(child) {
+            return child.type.name === 'tabpanel'
         }
     },
     computed: {
         tabs() {
-            return this.$slots.default().filter(child => child.type.name === 'tabpanel');
-        }
+            const tabs = []
+            this.$slots.default().forEach(child => {
+                    if (this.isTabPanel(child)) {
+                        tabs.push(child);
+                    }
+                    else if (child.children.length > 0) {
+                        child.children.forEach(nestedChild => {
+                            if (this.isTabPanel(nestedChild)) {
+                                tabs.push(nestedChild)
+                            }
+                        });
+                    }
+                }
+            )
+            return tabs;
+        },
     },
     directives: {
         'ripple': Ripple
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index 71358cf5f..c2707103b 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@@ -111,6 +111,15 @@
                     </TabPanel>
                 </TabView>
             </div>
+
+            <div class="card">
+                <h5>Dynamic Tabs</h5>
+                <TabView>
+                    <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
+                        <p>{{tab.content}}</p>
+                    </TabPanel>
+                </TabView>
+            </div>
         </div>
 
         <TabViewDoc/>
@@ -124,7 +133,27 @@ import EventBus from '@/EventBus';
 export default {
     data() {
         return {
-            active: 0
+            active: 0,
+            tabs: [
+                {
+                    title: 'Header I', 
+                    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+                },
+                {
+                    title: 'Header II', 
+                    content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+                },
+                {
+                    title: 'Header III', 
+                    content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+                }
+            ]
         }
     },
     timeout: null,
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index be911d3f2..96ebe1248 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -136,6 +136,34 @@ export default {
     }
 }
 
+</code></pre>
+
+                <h5>Dynamic Tabs</h5>
+				<p>Tabs can be generated dynamically using the standard <i>v-for</i> directive.</p>
+<pre v-code>
+<code><template v-pre>
+&lt;TabView&gt;
+	&lt;TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
+		&lt;p&gt;{{tab.content}}&lt;/p&gt;
+	&lt;/TabPanel&gt;
+&lt;/TabView&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+	data() {
+		return {
+			tabs: [
+				{title: 'Title 1', content: 'Content 1'},
+				{title: 'Title 3', content: 'Content 2'},
+				{title: 'Title 3', content: 'Content 3'}
+			]
+		}
+	}
+}
+
 </code></pre>
 
 				<h5>Properties of TabPanel</h5>
@@ -359,6 +387,15 @@ export default {
         &lt;/TabPanel&gt;
     &lt;/TabView&gt;
 &lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Dynamic Tabs&lt;/h5&gt;
+    &lt;TabView&gt;
+        &lt;TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title"&gt;
+            &lt;p&gt;{{tab.content}}&lt;/p&gt;
+        &lt;/TabPanel&gt;
+    &lt;/TabView&gt;
+&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -367,7 +404,27 @@ export default {
 export default {
     data() {
         return {
-            active: 0
+            active: 0,
+            tabs: [
+                {
+                    title: 'Header I', 
+                    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+                },
+                {
+                    title: 'Header II', 
+                    content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+                },
+                {
+                    title: 'Header III', 
+                    content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+                }
+            ]
         }
     }
 }