Fixed #1019, Fixed #1209, Fixed #1221: New build Accordion and TabView

primefaces · May 31, 2021 · 5d2778a · 5d2778a
1 parent c4a23e3
commit 5d2778a
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 156 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git 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
@@ -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>
diff --git 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[];
     }