Removed TabViewHeaderSlot in favor of component

pull/496/head
Cagatay Civici 2020-09-11 20:58:51 +03:00
parent 4a56b810fd
commit 9431e0486c
1 changed files with 1 additions and 12 deletions

View File

@ -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}]"> <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> <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> <span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
<TabPanelHeaderSlot :tab="tab" v-if="tab.$slots.header" /> <component :is="tab.$slots.header"></component>
</a> </a>
</li> </li>
<li ref="inkbar" class="p-tabview-ink-bar"></li> <li ref="inkbar" class="p-tabview-ink-bar"></li>
@ -18,11 +18,6 @@
<script> <script>
import DomHandler from '../utils/DomHandler'; import DomHandler from '../utils/DomHandler';
import Ripple from '../ripple/Ripple'; import Ripple from '../ripple/Ripple';
import { h } from 'vue';
const TabPanelHeaderSlot = (props) => {
return h(props.tab.$slots['header']);
}
export default { export default {
data() { data() {
@ -30,9 +25,6 @@ export default {
tabs: [] tabs: []
}; };
}, },
mounted() {
this.d_children = this.$children;
},
updated() { updated() {
let activeTab = this.tabs[this.findActiveTabIndex()]; let activeTab = this.tabs[this.findActiveTabIndex()];
if (!activeTab && this.tabs.length) { if (!activeTab && this.tabs.length) {
@ -85,9 +77,6 @@ export default {
}, },
directives: { directives: {
'ripple': Ripple 'ripple': Ripple
},
components: {
'TabPanelHeaderSlot': TabPanelHeaderSlot
} }
} }
</script> </script>