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

Refactor #6826 - For TabList

pull/6841/head
Mert Sincan 2024-11-22 12:29:45 +00:00
parent de770d5a3b
commit baa082677e
1 changed files with 11 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,7 @@
</template> </template>
<script> <script>
import { findSingle, getHeight, getOffset, getOuterHeight, getOuterWidth, getWidth } from '@primeuix/utils/dom'; import { findSingle, getHeight, getOffset, getOuterHeight, getOuterWidth, getWidth, isRTL } from '@primeuix/utils/dom';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -47,12 +47,10 @@ export default {
extends: BaseTabList, extends: BaseTabList,
inheritAttrs: false, inheritAttrs: false,
inject: ['$pcTabs'], inject: ['$pcTabs'],
mutationObserver: null,
data() { data() {
return { return {
isPrevButtonEnabled: false, isPrevButtonEnabled: false,
isNextButtonEnabled: true, isNextButtonEnabled: true
isRTL: false
}; };
}, },
resizeObserver: undefined, resizeObserver: undefined,
@ -76,19 +74,12 @@ export default {
this.updateButtonState(); this.updateButtonState();
this.bindResizeObserver(); this.bindResizeObserver();
} }
this.updateDirection();
this.observeDirectionChanges();
}, },
updated() { updated() {
this.showNavigators && this.updateButtonState(); this.showNavigators && this.updateButtonState();
}, },
beforeUnmount() { beforeUnmount() {
this.unbindResizeObserver(); this.unbindResizeObserver();
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}, },
methods: { methods: {
onScroll(event) { onScroll(event) {
@ -99,30 +90,19 @@ export default {
onPrevButtonClick() { onPrevButtonClick() {
const content = this.$refs.content; const content = this.$refs.content;
const width = getWidth(content); const width = getWidth(content);
let pos; const pos = Math.abs(content.scrollLeft) - width;
const scrollLeft = pos <= 0 ? 0 : pos;
if (this.isRTL) { content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
pos = content.scrollLeft + width;
} else {
pos = content.scrollLeft - width;
}
content.scrollLeft = pos <= 0 ? 0 : pos;
}, },
onNextButtonClick() { onNextButtonClick() {
const content = this.$refs.content; const content = this.$refs.content;
const width = getWidth(content) - this.getVisibleButtonWidths(); const width = getWidth(content) - this.getVisibleButtonWidths();
let pos, lastPos; const pos = width + Math.abs(content.scrollLeft);
const lastPos = content.scrollWidth - width;
const scrollLeft = pos >= lastPos ? lastPos : pos;
if (this.isRTL) { content.scrollLeft = isRTL(content) ? -1 * scrollLeft : scrollLeft;
pos = content.scrollLeft - width;
lastPos = content.scrollWidth + width;
} else {
pos = content.scrollLeft + width;
lastPos = content.scrollWidth - width;
}
content.scrollLeft = pos >= lastPos ? lastPos : pos;
}, },
bindResizeObserver() { bindResizeObserver() {
this.resizeObserver = new ResizeObserver(() => this.updateButtonState()); this.resizeObserver = new ResizeObserver(() => this.updateButtonState());
@ -146,7 +126,8 @@ export default {
}, },
updateButtonState() { updateButtonState() {
const { list, content } = this.$refs; const { list, content } = this.$refs;
const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content; const { scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content;
const scrollLeft = Math.abs(content.scrollLeft);
const [width, height] = [getWidth(content), getHeight(content)]; const [width, height] = [getWidth(content), getHeight(content)];
if (this.$pcTabs.isVertical()) { if (this.$pcTabs.isVertical()) {
@ -161,19 +142,6 @@ export default {
const { prevBtn, nextBtn } = this.$refs; const { prevBtn, nextBtn } = this.$refs;
return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0); return [prevBtn, nextBtn].reduce((acc, el) => (el ? acc + getWidth(el) : acc), 0);
},
updateDirection() {
this.isRTL = !!this.$el.closest('[dir="rtl"]');
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
} }
}, },
computed: { computed: {