Migrated TabView to V3
Cagatay Civici
parent
86360a6df1
commit
50f5fd7bc2
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="p-tabview-panel" role="tabpanel" v-show="d_active">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -9,18 +7,7 @@ export default {
|
|||
name: 'tabpanel',
|
||||
props: {
|
||||
header: null,
|
||||
active: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_active: this.active
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
active(newValue) {
|
||||
this.d_active = newValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
<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="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>
|
||||
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
||||
<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 === i" v-ripple>
|
||||
<span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
|
||||
<component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
|
||||
</a>
|
||||
</li>
|
||||
<li ref="inkbar" class="p-tabview-ink-bar"></li>
|
||||
</ul>
|
||||
<div class="p-tabview-panels">
|
||||
<slot></slot>
|
||||
<div v-for="(tab, i) of tabs" :key="getKey(tab,i)" class="p-tabview-panel" role="tabpanel" v-show="(d_activeIndex === i)">
|
||||
<component :is="tab"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -19,84 +21,63 @@
|
|||
import DomHandler from '../utils/DomHandler';
|
||||
import Ripple from '../ripple/Ripple';
|
||||
|
||||
const TabPanelHeaderSlot = {
|
||||
functional: true,
|
||||
export default {
|
||||
props: {
|
||||
tab: {
|
||||
type: null,
|
||||
default: null
|
||||
activeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
render(createElement, context) {
|
||||
return [context.props.tab.$scopedSlots['header']()];
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
d_children: []
|
||||
};
|
||||
d_activeIndex: this.activeIndex
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.d_children = this.$children;
|
||||
watch: {
|
||||
activeIndex(newValue) {
|
||||
this.d_activeIndex = newValue;
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
let activeTab = this.tabs[this.findActiveTabIndex()];
|
||||
if (!activeTab && this.tabs.length) {
|
||||
this.tabs[0].d_active = true;
|
||||
}
|
||||
this.updateInkBar();
|
||||
},
|
||||
mounted() {
|
||||
this.updateInkBar();
|
||||
},
|
||||
methods: {
|
||||
onTabClick(event, tab) {
|
||||
if (!tab.disabled && !tab.d_active) {
|
||||
this.activateTab(tab);
|
||||
onTabClick(event, i) {
|
||||
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,
|
||||
tab: tab
|
||||
index: i
|
||||
});
|
||||
}
|
||||
},
|
||||
activateTab(tab) {
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
let active = this.tabs[i] === tab;
|
||||
this.tabs[i].d_active = active;
|
||||
this.tabs[i].$emit('update:active', active);
|
||||
}
|
||||
|
||||
this.updateInkBar();
|
||||
},
|
||||
onTabKeydown(event, tab) {
|
||||
onTabKeydown(event, i) {
|
||||
if (event.which === 13) {
|
||||
this.onTabClick(event, tab);
|
||||
this.onTabClick(event, i);
|
||||
}
|
||||
},
|
||||
findActiveTabIndex() {
|
||||
for (let i = 0; i < this.tabs.length; i++) {
|
||||
let tab = this.tabs[i];
|
||||
if (tab.d_active) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
updateInkBar() {
|
||||
let tabHeader = this.$refs.nav.children[this.findActiveTabIndex()];
|
||||
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, i) {
|
||||
return tab.props && tab.props.header ? tab.props.header : i;
|
||||
},
|
||||
isTabDisabled(tab) {
|
||||
return tab.props && tab.props.disabled;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
|
||||
return this.$slots.default().filter(child => child.type.name === 'tabpanel');
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
||||
},
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,24 +31,24 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5rem 0 1rem 0">
|
||||
<Button @click="activate(0)" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="activate(1)" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="activate(2)" class="p-button-text" label="Activate 3rd" />
|
||||
<div style="padding: .5rem 0 1rem 0" class="p-t-2 p-b-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<TabView ref="tabview2">
|
||||
<TabPanel header="Header I" v-model:active="active[0]">
|
||||
<TabView ref="tabview2" v-model:activeIndex="active">
|
||||
<TabPanel header="Header I">
|
||||
<p>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.</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" v-model:active="active[1]">
|
||||
<TabPanel header="Header II">
|
||||
<p>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.</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" v-model:active="active[2]">
|
||||
<TabPanel header="Header III">
|
||||
<p>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.</p>
|
||||
|
|
@ -124,7 +124,7 @@ import EventBus from '@/EventBus';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: [true, false, false]
|
||||
active: 0
|
||||
}
|
||||
},
|
||||
timeout: null,
|
||||
|
|
@ -142,15 +142,6 @@ export default {
|
|||
clearTimeout(this.timeout);
|
||||
EventBus.off('change-theme');
|
||||
},
|
||||
methods: {
|
||||
activate(index) {
|
||||
let activeArray = [...this.active];
|
||||
for (let i = 0 ; i < activeArray.length; i++) {
|
||||
activeArray[i] = (i === index);
|
||||
}
|
||||
this.active = activeArray;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TabViewDoc': TabViewDoc
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@ import TabPanel from 'primevue/tabpanel';
|
|||
</CodeHighlight>
|
||||
|
||||
<h5>Active</h5>
|
||||
<p>Visibility of the content is specified with the active property that supports one or two-way binding.</p>
|
||||
<p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
|
||||
<CodeHighlight>
|
||||
<TabView>
|
||||
<TabView :activeIndex="activeIndex">
|
||||
<TabPanel header="Header I">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" :active="true">
|
||||
<TabPanel header="Header II">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III">
|
||||
|
|
@ -40,16 +40,16 @@ import TabPanel from 'primevue/tabpanel';
|
|||
</TabView>
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Two-way binding requires the sync operator.</p>
|
||||
<p>Two-way binding requires v-model.</p>
|
||||
<CodeHighlight>
|
||||
<TabView>
|
||||
<TabPanel header="Header I" :active.sync="active1">
|
||||
<TabView v-model:activeIndex="activeIndex">
|
||||
<TabPanel header="Header I">
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" :active.sync="active2">
|
||||
<TabPanel header="Header II">
|
||||
Content II
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" :active.sync="active3">
|
||||
<TabPanel header="Header III"">
|
||||
Content III
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
|
|
@ -74,7 +74,7 @@ import TabPanel from 'primevue/tabpanel';
|
|||
<h5>Header Template</h5>
|
||||
<p>Custom content for the title section of a panel is defined using the header template.</p>
|
||||
<CodeHighlight>
|
||||
<TabView class="tabview-custom">
|
||||
<TabView>
|
||||
<TabPanel>
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
|
|
@ -95,11 +95,11 @@ import TabPanel from 'primevue/tabpanel';
|
|||
<h5>Programmatic Control</h5>
|
||||
<p>Tabs can be controlled programmatically using active property that defines the active tab.</p>
|
||||
<CodeHighlight>
|
||||
<Button @click="activate(0)" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="activate(1)" class="p-button-text" label="Activate 2st" />
|
||||
<Button @click="activate(2)" class="p-button-text" label="Activate 3st" />
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
|
||||
<TabView>
|
||||
<TabView v-model:activeIndex="active">
|
||||
<TabPanel header="Header I" :active.sync="active[0]">
|
||||
Content I
|
||||
</TabPanel>
|
||||
|
|
@ -117,18 +117,9 @@ import TabPanel from 'primevue/tabpanel';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: [true, false, false]
|
||||
active: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate(index) {
|
||||
let activeArray = [...this.active];
|
||||
for (let i = 0 ; i < activeArray.length; i++) {
|
||||
activeArray[i] = (i === index);
|
||||
}
|
||||
this.active = activeArray;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -136,32 +127,26 @@ export default {
|
|||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Orientation of tab headers.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>active</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Visibility of the content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Whether the tab is disabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>header</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Orientation of tab headers.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Whether the tab is disabled.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -259,24 +244,24 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Programmatic</h5>
|
||||
<div style="padding: .5rem 0 1rem 0">
|
||||
<Button @click="activate(0)" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="activate(1)" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="activate(2)" class="p-button-text" label="Activate 3rd" />
|
||||
<div style="padding: .5rem 0 1rem 0" class="p-t-2 p-b-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<TabView>
|
||||
<TabPanel header="Header I" :active.sync="active[0]">
|
||||
<TabView ref="tabview2" v-model:activeIndex="active">
|
||||
<TabPanel header="Header I">
|
||||
<p>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.</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header II" :active.sync="active[1]">
|
||||
<TabPanel header="Header II">
|
||||
<p>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.</p>
|
||||
</TabPanel>
|
||||
<TabPanel header="Header III" :active.sync="active[2]">
|
||||
<TabPanel header="Header III">
|
||||
<p>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.</p>
|
||||
|
|
@ -346,18 +331,10 @@ export default {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: [true, false, false]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activate(index) {
|
||||
let activeArray = [...this.active];
|
||||
for (let i = 0 ; i < activeArray.length; i++) {
|
||||
activeArray[i] = (i === index);
|
||||
}
|
||||
this.active = activeArray;
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
|
|
|
|||
Loading…
Reference in New Issue