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

Fixed #6915 - Tabs: Scrollable tabs being skipped

pull/6577/merge
tugcekucukoglu 2024-12-11 11:11:05 +03:00
parent b1ece7953d
commit ca7ccce0c1
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/primevue/src/tablist/TabList.vue
View File

@ -89,18 +89,24 @@ export default {
},
onPrevButtonClick() {
const content = this.$refs.content;
const width = getWidth(content);
const pos = Math.abs(content.scrollLeft) - width;
const scrollLeft = pos <= 0 ? 0 : pos;
const buttonWidths = this.getVisibleButtonWidths();
const width = getWidth(content) - buttonWidths;
const currentScrollLeft = Math.abs(content.scrollLeft);
const scrollStep = width * 0.8;
const targetScrollLeft = currentScrollLeft - scrollStep;
const scrollLeft = Math.max(targetScrollLeft, 0);
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
},
onNextButtonClick() {
const content = this.$refs.content;
const width = getWidth(content) - this.getVisibleButtonWidths();
const pos = width + Math.abs(content.scrollLeft);
const lastPos = content.scrollWidth - width;
const scrollLeft = pos >= lastPos ? lastPos : pos;
const buttonWidths = this.getVisibleButtonWidths();
const width = getWidth(content) - buttonWidths;
const currentScrollLeft = Math.abs(content.scrollLeft);
const scrollStep = width * 0.8;
const targetScrollLeft = currentScrollLeft + scrollStep;
const maxScrollLeft = content.scrollWidth - width;
const scrollLeft = Math.min(targetScrollLeft, maxScrollLeft);
content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
},
@ -139,9 +145,14 @@ export default {
}
},
getVisibleButtonWidths() {
const { prevBtn, nextBtn } = this.$refs;
const { prevButton, nextButton } = this.$refs;
let width = 0;
return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
if (this.showNavigators) {
width = (prevButton?.offsetWidth || 0) + (nextButton?.offsetWidth || 0);
}
return width;
}
},
computed: {