Refactor #1019 #1209 #1221

primefaces · Jun 3, 2021 · a54f684 · a54f684
1 parent fb42c14
commit a54f684
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 54 deletions.
diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
@@ -38,11 +38,6 @@ export default {
 
             this.$emit('update:activeIndex', this.d_activeIndex);
         }
-    },
-    computed: {
-        tabs() {
-            return this.$children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
-        }
     }
 }
 </script>

diff --git a/src/components/accordiontab/AccordionTab.vue b/src/components/accordiontab/AccordionTab.vue
@@ -1,16 +1,15 @@
 <template>
-    <div :class="['p-accordion-tab', {'p-accordion-tab-active': showPanel}]">
-        <div :class="['p-accordion-header', {'p-highlight': showPanel, 'p-disabled': disabled}]">
+    <div :class="getTabClass()">
+        <div :class="getTabHeaderClass()">
             <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>
+                :aria-expanded="isTabActive()" :id="ariaId + '_header'" :aria-controls="ariaId + '_content'">
+                <span :class="getHeaderIcon()"></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-toggleable-content" v-show="isTabActive()" role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
                 <div class="p-accordion-content">
                     <slot></slot>
                 </div>
@@ -30,43 +29,41 @@ export default {
     },
     data() {
         return {
-            el: null
+            index: null
         }
     },
-    mounted() {
-        this.el = this.$el;
+    created() {
+        this.$parent.$children.forEach((child, i) => {
+            if (child === this) this.index = i
+        })
     },
     methods: {
         onTabClick() {
             if (!this.disabled) {
-                this.$parent.onToggle(this, DomHandler.index(this.el));
+                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) {
+        isTabActive() {
             let activeArray = this.$parent.d_activeIndex;
-
-            if (this.$parent.multiple) {
-                return activeArray && activeArray.includes(index);
-            }
-            else
-                return index === activeArray;
+            return this.$parent.multiple ? activeArray && activeArray.includes(this.index) : this.index === activeArray;
+        },
+        getTabClass() {
+            return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive()}];
         },
+        getTabHeaderClass() {
+            return ['p-accordion-header', {'p-highlight': this.isTabActive(), 'p-disabled': this.disabled}]
+        },
+        getHeaderIcon() {
+            const active = this.isTabActive();
+            return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
+        }
     },
     computed: {
-        showPanel() {
-            if (this.el) {
-                return this.findIsActive();
-            }
-            return false;
-        },
         ariaId() {
             return UniqueComponentId();
         }

diff --git a/src/components/tabpanel/TabPanel.vue b/src/components/tabpanel/TabPanel.vue
@@ -1,11 +1,10 @@
 <template>
-    <div class="p-tabview-panel" role="tabpanel" v-show="showPanel">
+    <div class="p-tabview-panel" role="tabpanel" v-show="isTabActive()">
         <slot></slot>
     </div>
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
 export default {
     name: 'tabpanel',
     props: {
@@ -14,32 +13,18 @@ export default {
     },
     data() {
         return {
-            el: null
+            index: null
         }
     },
-    mounted() {
-        this.el = this.$el;
-    },
-    computed: {
-        showPanel() {
-            if (this.el) {
-                return this.findIsActive();
-            }
-            return false;
-        }
+    created() {
+        this.$parent.$children.forEach((child, i) => {
+            if (child === this) this.index = i
+        })
     },
     methods: {
-        findIsActive() {
-            return this.isTabActive(DomHandler.index(this.el));
-        },
-        isTabActive(index) {
+        isTabActive() {
             let activeArray = this.$parent.d_activeIndex;
-            if (this.$parent.multiple) {
-                return activeArray && activeArray.includes(index);
-            }
-            else {
-                return index === activeArray;
-            }
+            return this.$parent.multiple ? activeArray && activeArray.includes(this.index) :this.index === activeArray;
         }
     }
 }