mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 20:18:08 +00:00
7b6195f28b
# Pull Request Template ## Description This PR will fix reactivity issue with `<woot-tabs />` component. **Cause of issue** The `<woot-tabs />` component used an internal ref, `internalActiveIndex` to track the `active` tab. However, it didn’t sync with the `index` prop when updated by the parent, causing mismatched tab selections. **Solution** The component now directly uses `props.index` to ensure it always reflects the latest value from the parent. The unnecessary `internalActiveIndex` ref has been removed. Changes to the active tab emit a `change` event to update the parent. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? **Loom video** **Before** https://www.loom.com/share/76eb32f1e7f7422f84055a102bf80951?sid=bc28c6ff-9640-4d3b-956c-99c1ec164971 **After** https://www.loom.com/share/6bd8125ede5d43dc8fe115c3f1fb159b?sid=c376617a-94fb-4f71-8664-e0bd9e7af0b4 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref, provide, onMounted, computed } from 'vue';
|
|
import { useEventListener } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['change']);
|
|
|
|
const hasScroll = ref(false);
|
|
|
|
const activeIndex = computed({
|
|
get: () => props.index,
|
|
set: newValue => {
|
|
emit('change', newValue);
|
|
},
|
|
});
|
|
|
|
provide('activeIndex', activeIndex);
|
|
provide('updateActiveIndex', index => {
|
|
activeIndex.value = index;
|
|
});
|
|
|
|
const computeScrollWidth = () => {
|
|
// TODO: use useElementSize from vueuse
|
|
const tabElement = document.querySelector('.tabs');
|
|
if (tabElement) {
|
|
hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
|
|
}
|
|
};
|
|
|
|
const onScrollClick = direction => {
|
|
// TODO: use useElementSize from vueuse
|
|
const tabElement = document.querySelector('.tabs');
|
|
if (tabElement) {
|
|
let scrollPosition = tabElement.scrollLeft;
|
|
scrollPosition += direction === 'left' ? -100 : 100;
|
|
tabElement.scrollTo({
|
|
top: 0,
|
|
left: scrollPosition,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
};
|
|
|
|
useEventListener(window, 'resize', computeScrollWidth);
|
|
onMounted(() => {
|
|
computeScrollWidth();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="{ 'tabs--container--with-border': border }"
|
|
class="tabs--container"
|
|
>
|
|
<button
|
|
v-if="hasScroll"
|
|
class="tabs--scroll-button button clear secondary button--only-icon"
|
|
@click="onScrollClick('left')"
|
|
>
|
|
<fluent-icon icon="chevron-left" :size="16" />
|
|
</button>
|
|
<ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
|
|
<slot />
|
|
</ul>
|
|
<button
|
|
v-if="hasScroll"
|
|
class="tabs--scroll-button button clear secondary button--only-icon"
|
|
@click="onScrollClick('right')"
|
|
>
|
|
<fluent-icon icon="chevron-right" :size="16" />
|
|
</button>
|
|
</div>
|
|
</template>
|