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/6844/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() { onPrevButtonClick() {
const content = this.$refs.content; const content = this.$refs.content;
const width = getWidth(content); const buttonWidths = this.getVisibleButtonWidths();
const pos = Math.abs(content.scrollLeft) - width; const width = getWidth(content) - buttonWidths;
const scrollLeft = pos <= 0 ? 0 : pos; 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; content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
}, },
onNextButtonClick() { onNextButtonClick() {
const content = this.$refs.content; const content = this.$refs.content;
const width = getWidth(content) - this.getVisibleButtonWidths(); const buttonWidths = this.getVisibleButtonWidths();
const pos = width + Math.abs(content.scrollLeft); const width = getWidth(content) - buttonWidths;
const lastPos = content.scrollWidth - width; const currentScrollLeft = Math.abs(content.scrollLeft);
const scrollLeft = pos >= lastPos ? lastPos : pos; 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; content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
}, },
@ -139,9 +145,14 @@ export default {
} }
}, },
getVisibleButtonWidths() { 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: { computed: {