vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge branch 'master' of https://github.com/primefaces/primevue

pull/1533/head
Tuğçe Küçükoğlu 2021-08-31 09:50:49 +03:00
parent 75113d0a7f 7744691246
commit bbc9f284dd
4 changed files with 124 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/tabview.js
View File

@ -10,6 +10,12 @@ const TabViewProps = [
type: "boolean",
default: "false",
description: "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
},
{
name: "scrollable",
type: "boolean",
default: "false",
description: "When specified, enables horizontal scrolling."
}
];

1
src/components/tabview/TabView.d.ts vendored
View File

@ -3,6 +3,7 @@ import { VNode } from 'vue';
interface TabViewProps {
activeIndex?: number;
lazy?: boolean;
scrollable?: boolean;
}
declare class TabView {

99
src/components/tabview/TabView.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="p-tabview p-component">
<div :class="contentClasses">
<div class="p-tabview-nav-container">
<button v-if="scrollable" :class="prevButtonClasses" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
<span class="pi pi-chevron-left"></span>
</button>
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
<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 === i" v-ripple>
@ -9,6 +14,11 @@
</li>
<li ref="inkbar" class="p-tabview-ink-bar"></li>
</ul>
</div>
<button v-if="scrollable" :class="nextButtonClasses" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
<span class="pi pi-chevron-right"></span>
</button>
</div>
<div class="p-tabview-panels">
<template v-for="(tab, i) of tabs" :key="getKey(tab,i)">
<div class="p-tabview-panel" role="tabpanel" v-if="lazy ? (d_activeIndex === i) : true" v-show="lazy ? true: (d_activeIndex === i)">
@ -34,16 +44,24 @@ export default {
lazy: {
type: Boolean,
default: false
},
scrollable: {
type: Boolean,
default: false
}
},
data() {
return {
d_activeIndex: this.activeIndex
d_activeIndex: this.activeIndex,
backwardIsDisabled: true,
forwardIsDisabled: false
}
},
watch: {
activeIndex(newValue) {
this.d_activeIndex = newValue;
this.updateScrollBar(newValue);
}
},
updated() {
@ -62,6 +80,8 @@ export default {
originalEvent: event,
index: i
});
this.updateScrollBar(i);
}
this.$emit('tab-click', {
@ -79,6 +99,18 @@ export default {
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';
},
updateScrollBar(index) {
let tabHeader = this.$refs.nav.children[index];
tabHeader.scrollIntoView(false);
},
updateButtonState() {
const content = this.$refs.content;
const { scrollLeft, scrollWidth } = content;
const width = DomHandler.getWidth(content);
this.backwardIsDisabled = scrollLeft === 0;
this.forwardIsDisabled = scrollLeft === scrollWidth - width;
},
getKey(tab, i) {
return (tab.props && tab.props.header) ? tab.props.header : i;
},
@ -87,9 +119,37 @@ export default {
},
isTabPanel(child) {
return child.type.name === 'TabPanel'
},
onScroll(event) {
this.scrollable && this.updateButtonState();
event.preventDefault();
},
navBackward() {
const content = this.$refs.content;
const width = DomHandler.getWidth(content);
const pos = content.scrollLeft - width;
content.scrollLeft = pos <= 0 ? 0 : pos;
},
navForward() {
const content = this.$refs.content;
const width = DomHandler.getWidth(content);
const pos = content.scrollLeft + width;
const lastPos = content.scrollWidth - width;
content.scrollLeft = pos >= lastPos ? lastPos : pos;
}
},
computed: {
contentClasses() {
return ['p-tabview p-component', {'p-tabview-scrollable': this.scrollable}];
},
prevButtonClasses() {
return ['p-tabview-nav-prev p-tabview-nav-btn p-link', {'p-disabled': this.backwardIsDisabled}]
},
nextButtonClasses() {
return ['p-tabview-nav-next p-tabview-nav-btn p-link', {'p-disabled': this.forwardIsDisabled}]
},
tabs() {
const tabs = []
this.$slots.default().forEach(child => {
@ -106,7 +166,7 @@ export default {
}
)
return tabs;
},
}
},
directives: {
'ripple': Ripple
@ -115,12 +175,23 @@ export default {
</script>
<style>
.p-tabview-nav-container {
position: relative;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
}
.p-tabview-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-wrap: wrap;
flex: 1 1 auto;
}
.p-tabview-nav-link {
@ -144,5 +215,25 @@ export default {
.p-tabview-title {
line-height: 1;
white-space: nowrap;
}
.p-tabview-nav-btn {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
}
.p-tabview-nav-prev {
left: 0;
}
.p-tabview-nav-next {
right: 0;
}
.p-tabview-nav-content::-webkit-scrollbar {
display: none;
}
</style>

6
src/views/tabview/TabViewDoc.vue
View File

@ -225,6 +225,12 @@ export default {
<td>boolean</td>
<td>false</td>
<td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
</tr>
<tr>
<td>scrollable</td>
<td>boolean</td>
<td>false</td>
<td>When specified, enables horizontal scrolling.</td>
</tr>
</tbody>
</table>