From 5d2778a416141b5059ab57c65ea8f82018c68a81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 31 May 2021 09:53:50 +0300
Subject: [PATCH] Fixed #1019, Fixed #1209, Fixed #1221: New build Accordion
 and TabView

---
 src/components/accordion/Accordion.vue        | 122 +++---------------
 src/components/accordiontab/AccordionTab.d.ts |   1 -
 src/components/accordiontab/AccordionTab.vue  |  68 +++++++++-
 src/components/tabpanel/TabPanel.d.ts         |   1 -
 src/components/tabpanel/TabPanel.vue          |  38 +++++-
 src/components/tabview/TabView.d.ts           |   1 +
 src/components/tabview/TabView.vue            |  99 +++++++-------
 src/views/tabview/TabViewDoc.vue              |   9 +-
 8 files changed, 183 insertions(+), 156 deletions(-)

diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 0885220112..a44d9eeba5 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -1,132 +1,48 @@
-<script>
-import UniqueComponentId from '../utils/UniqueComponentId';
+<template>
+    <div class="p-accordion p-component">
+        <slot></slot>
+    </div>
+</template>
 
+<script>
 export default {
-    name: 'accordion',
     props: {
         multiple: Boolean,
         activeIndex: [Number,Array]
     },
     data() {
         return {
-            d_activeIndex: this.activeIndex,
-            allChildren: null
+            d_activeIndex: this.activeIndex
         }
     },
-    mounted() {
-        this.allChildren = this.$children;
-    },
     watch: {
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
         }
     },
     methods: {
-        onTabClick(event, tab, i) {
-            if (!this.isTabDisabled(tab)) {
-                const active = this.isTabActive(i);
-                const eventName = active ? 'tab-close' : 'tab-open';
+        onToggle(tab, index) {
+            if (this.multiple) {
+                let x = this.d_activeIndex;
 
-                if (this.multiple) {
-                    if (active) {
-                        this.d_activeIndex = this.d_activeIndex.filter(index => index !== i);
-                    }
-                    else {
-                        if (this.d_activeIndex)
-                            this.d_activeIndex.push(i);
-                        else
-                            this.d_activeIndex = [i];
-                    }
+                if (x && x.some(i => i === index)) {
+                    this.d_activeIndex = x.filter(i => i !== index);
                 }
-                else {
-                    this.d_activeIndex = this.d_activeIndex === i ? null : i;
-                }
-
-                this.$emit('update:activeIndex', this.d_activeIndex);
 
-                this.$emit(eventName, {
-                    originalEvent: event,
-                    index: i
-                });
+                else x ? this.d_activeIndex.push(index) : this.d_activeIndex = [index]
             }
-        },
-        onTabKeydown(event, tab, i) {
-            if (event.which === 13) {
-                this.onTabClick(event, i);
+
+            else {
+                index === this.d_activeIndex ? this.d_activeIndex = null : this.d_activeIndex = index;
             }
-        },
-        isTabActive(index) {
-            if (this.multiple)
-                return this.d_activeIndex && this.d_activeIndex.includes(index);
-            else
-                return index === this.d_activeIndex;
-        },
-        isTabDisabled(tab) {
-            return tab.disabled;
-        },
-        getTabClass(i) {
-            return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
-        },
-        getTabHeaderClass(tab, i) {
-            return ['p-accordion-header', {'p-highlight': this.isTabActive(i), 'p-disabled': this.isTabDisabled(tab)}];
-        },
-        getTabAriaId(i) {
-            return this.ariaId + + '_' + i;
-        },
-        getHeaderIcon(i) {
-            const active = this.isTabActive(i);
-            return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
-        },
-        isAccordionTab(child) {
-            return child.componentOptions.tag === 'AccordionTab';
+
+            this.$emit('update:activeIndex', this.d_activeIndex);
         }
     },
     computed: {
         tabs() {
-           let tabs = [];
-
-            if (this.allChildren) {
-                tabs = this.allChildren.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
-            }
-            return tabs;
-        },
-        ariaId() {
-            return UniqueComponentId();
+            return this.$children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
         }
-    },
-    render() {
-        return (
-            <div class="p-accordion p-component">
-             {this.$slots.default}
-                {
-                    this.tabs.map((tab, i) => {
-                        const headerContent = tab.header || [
-                            <span class="p-accordion-header-text">{tab.$slots.header}</span>,
-                            <span></span>
-                        ]
-                        return ([
-                            <div class={this.getTabClass(i)}>
-                                <div class={this.getTabHeaderClass(tab, i)}>
-                                    <a role="tab" class="p-accordion-header-link" on-click={e => this.onTabClick(e, tab, i)} on-keydown={e => this.onTabKeydown(e, tab, i)} tabindex={this.isTabDisabled(tab) ? null : '0'}
-                                            aria-expanded={this.isTabActive(i)} id={this.getTabAriaId(i) + '_header'} aria-controls={this.getTabAriaId(i) + '_content'}>
-                                        <span class={this.getHeaderIcon(i)}></span>
-                                        {headerContent}
-                                    </a>
-                                </div>
-                            </div>,
-                            <transition name="p-toggleable-content">
-                                <div class="p-toggleable-content" v-show={this.isTabActive(i)}
-                                        role="region" id={this.getTabAriaId(i) + '_content'} aria-labelledby={this.getTabAriaId(i) + '_header'}>
-                                    <div class="p-accordion-content">
-                                        {tab.$slots.default}
-                                    </div>
-                                </div>
-                            </transition>
-                        ])
-                    })
-                }
-            </div>
-        );
     }
 }
 </script>
diff --git a/src/components/accordiontab/AccordionTab.d.ts b/src/components/accordiontab/AccordionTab.d.ts
index 11f4638e3b..569d581195 100755
--- a/src/components/accordiontab/AccordionTab.d.ts
+++ b/src/components/accordiontab/AccordionTab.d.ts
@@ -2,7 +2,6 @@ import Vue, { VNode } from 'vue';
 
 declare class AccordionTab extends Vue {
     header?: string;
-    active?: boolean;
     disabled?: boolean;
     $slot: {
         '': VNode[];
diff --git a/src/components/accordiontab/AccordionTab.vue b/src/components/accordiontab/AccordionTab.vue
index 039f6327dd..72fd3b805b 100755
--- a/src/components/accordiontab/AccordionTab.vue
+++ b/src/components/accordiontab/AccordionTab.vue
@@ -1,13 +1,75 @@
+<template>
+    <div :class="['p-accordion-tab', {'p-accordion-tab-active': showPanel}]">
+        <div :class="['p-accordion-header', {'p-highlight': showPanel, 'p-disabled': disabled}]">
+            <a role="tab" class="p-accordion-header-link" @click="onTabClick" @keydown="onTabKeydown" :tabindex="disabled ? null : '0'"
+                :aria-expanded="showPanel" :id="ariaId + '_header'" :aria-controls="ariaId + '_content'">
+                <span :class="['p-accordion-toggle-icon pi', {'pi-chevron-right': !showPanel, 'pi-chevron-down': showPanel}]"></span>
+                <span class="p-accordion-header-text" v-if="header">{{header}}</span>
+                <slot name="header"></slot>
+            </a>
+        </div>
+        <transition name="p-toggleable-content">
+            <div class="p-toggleable-content" v-if="showPanel"
+                role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
+                <div class="p-accordion-content">
+                    <slot></slot>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
 
 <script>
+import UniqueComponentId from '../utils/UniqueComponentId';
+import DomHandler from '../utils/DomHandler';
+
 export default {
-    name: 'accordiontab',
     props: {
         header: null,
         disabled: Boolean
     },
-    render() {
-        return null;
+    data() {
+        return {
+            el: null
+        }
+    },
+    mounted() {
+        this.el = this.$el;
+    },
+    methods: {
+        onTabClick() {
+            if (!this.disabled) {
+                this.$parent.onToggle(this, DomHandler.index(this.el));
+            }
+        },
+        onTabKeydown(event) {
+            if (event.which === 13) {
+                this.onTabClick(event);
+            }
+        },
+        findIsActive() {
+            return this.isTabActive(DomHandler.index(this.el));
+        },
+        isTabActive(index) {
+            let activeArray = this.$parent.d_activeIndex;
+
+            if (this.$parent.multiple) {
+                return activeArray && activeArray.includes(index);
+            }
+            else
+                return index === activeArray;
+        },
+    },
+    computed: {
+        showPanel() {
+            if (this.el) {
+                return this.findIsActive();
+            }
+            return false;
+        },
+        ariaId() {
+            return UniqueComponentId();
+        }
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/tabpanel/TabPanel.d.ts b/src/components/tabpanel/TabPanel.d.ts
index 51a24f199c..c942c9e1ef 100755
--- a/src/components/tabpanel/TabPanel.d.ts
+++ b/src/components/tabpanel/TabPanel.d.ts
@@ -2,7 +2,6 @@ import Vue, { VNode } from 'vue';
 
 declare class TabPanel extends Vue {
     header?: any;
-    active?: boolean;
     disabled?: boolean;
     $slots: {
         '': VNode[];
diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue
index 6a7d53a39a..73caf534e9 100755
--- a/src/components/tabpanel/TabPanel.vue
+++ b/src/components/tabpanel/TabPanel.vue
@@ -1,12 +1,46 @@
+<template>
+    <div class="p-tabview-panel" role="tabpanel" v-show="showPanel">
+        <slot></slot>
+    </div>
+</template>
+
 <script>
+import DomHandler from '../utils/DomHandler';
 export default {
     name: 'tabpanel',
     props: {
         header: null,
         disabled: Boolean
     },
-    render() {
-        return null;
+    data() {
+        return {
+            el: null
+        }
+    },
+    mounted() {
+        this.el = this.$el;
+    },
+    computed: {
+        showPanel() {
+            if (this.el) {
+                return this.findIsActive();
+            }
+            return false;
+        }
+    },
+    methods: {
+        findIsActive() {
+            return this.isTabActive(DomHandler.index(this.el));
+        },
+        isTabActive(index) {
+            let activeArray = this.$parent.d_activeIndex;
+            if (this.$parent.multiple) {
+                return activeArray && activeArray.includes(index);
+            }
+            else {
+                return index === activeArray;
+            }
+        }
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/tabview/TabView.d.ts b/src/components/tabview/TabView.d.ts
index b6fe61fbbf..fc285ac1cc 100755
--- a/src/components/tabview/TabView.d.ts
+++ b/src/components/tabview/TabView.d.ts
@@ -3,6 +3,7 @@ import Vue, { VNode } from 'vue';
 declare class TabView extends Vue {
     activeIndex?: number;
     $emit(eventName: 'tab-change', e: { originalEvent: Event, tab: any }): this;
+    $emit(eventName: 'tab-click', e: { originalEvent: Event, tab: any }): this;
     $slots: {
         '': VNode[];
     }
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index f95d2486a7..cdf497175d 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -1,20 +1,51 @@
+<template>
+    <div class="p-tabview p-component">
+        <ul ref="nav" class="p-tabview-nav" role="tablist">
+            <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
+                <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex" v-ripple>
+                    <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
+                    <TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header"/>
+                </a>
+            </li>
+            <li ref="inkbar" class="p-tabview-ink-bar"></li>
+        </ul>
+        <div class="p-tabview-panels">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
 <script>
 import DomHandler from '../utils/DomHandler';
+import ObjectUtils from '../utils/ObjectUtils';
 import Ripple from '../ripple/Ripple';
 
-export default {
-    data() {
-        return {
-            allChildren: null,
-            d_activeIndex: this.activeIndex
-        };
+const TabPanelHeaderSlot = {
+    functional: true,
+    props: {
+        tab: {
+            type: null,
+            default: null
+        }
     },
+    render(createElement, context) {
+        return [context.props.tab.$scopedSlots['header']()];
+    }
+};
+
+export default {
     props: {
         activeIndex: {
             type: Number,
             default: 0
         }
     },
+    data() {
+        return {
+            allChildren: [],
+            d_activeIndex: this.activeIndex,
+        };
+    },
     watch: {
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
@@ -32,11 +63,17 @@ export default {
             if (!this.isTabDisabled(this.tabs[i]) && i !== this.d_activeIndex) {
                 this.d_activeIndex = i;
                 this.$emit('update:activeIndex', this.d_activeIndex);
+
                 this.$emit('tab-change', {
                     originalEvent: event,
                     index: i
                 });
             }
+
+            this.$emit('tab-click', {
+                originalEvent: event,
+                index: i
+            });
         },
         onTabKeydown(event, i) {
             if (event.which === 13) {
@@ -44,9 +81,14 @@ export default {
             }
         },
         updateInkBar() {
-            let tabHeader = this.$refs.nav.children[this.d_activeIndex];
-            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 (this.$refs.nav.children.length > 1) {
+                let tabHeader = this.$refs.nav.children[this.d_activeIndex];
+                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';
+            }
+        },
+        getKey(tab, index) {
+            return tab.header ? ObjectUtils.resolveFieldData(tab, tab.header) : index;
         },
         isTabDisabled(tab) {
             return tab.disabled;
@@ -59,45 +101,12 @@ export default {
             if (this.allChildren) {
                 tabs = this.allChildren.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
             }
+
             return tabs;
         }
     },
-    render() {
-        return (
-            <div class="p-tabview p-component">
-                {this.$slots.default}
-                <ul ref="nav" class="p-tabview-nav" role="tablist">
-                    {
-                        this.tabs.map((tab, i) => {
-                            const headerContent = tab.header || [
-                                <span class="p-tabview-title">{tab.$slots.header}</span>,
-                                <span></span>
-                            ]
-                            return ([
-                                <li role="presentation" key={tab.header || i} class={[{'p-highlight': (this.d_activeIndex === i), 'p-disabled': tab.disabled}]}>
-                                    <a role="tab" class="p-tabview-nav-link" on-click={e => this.onTabClick(e, i)} on-keydown={e => this.onTabKeydown(e, tab)}
-                                            tabindex={tab.disabled ? null : '0'} aria-selected={tab.d_activeIndex} v-ripple>
-                                        {headerContent}
-                                    </a>
-                                </li>
-                            ])
-                        })
-                    }
-                    <li ref="inkbar" class="p-tabview-ink-bar"></li>
-                </ul>
-                <div class="p-tabview-panels">
-                {
-                    this.tabs.map((tab, i) => {
-                        return(
-                            <div class="p-tabview-panel" role="tabpanel" v-show={(this.d_activeIndex === i)}>
-                                {tab.$slots.default}
-                            </div>
-                        )
-                    })
-                }
-            </div>
-                </div>
-        );
+    components: {
+        'TabPanelHeaderSlot': TabPanelHeaderSlot
     },
     directives: {
         'ripple': Ripple
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index cd56136939..35e6654a11 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -211,9 +211,16 @@ export default {
                             <tr>
                                 <td>tab-change</td>
                                 <td>event.originalEvent: Browser event  <br/>
-                                    event.tab: Selected tab
+                                    event.index: Index of the selected tab
                                 </td>
                                 <td>Callback to invoke when an active tab is changed.</td>
+                            </tr>
+                            <tr>
+                                <td>tab-click</td>
+                                <td>event.originalEvent: Browser event  <br/>
+                                    event.index: Index of the clicked tab
+                                </td>
+                                <td>Callback to invoke when an active tab is clicked.</td>
                             </tr>
 						</tbody>
 					</table>