mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
2556de1f38
# Pull Request Template ## Description Fixes https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### **Loom video** https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f ## 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 - [x] 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
98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref, useTemplateRef, provide, computed, watch } from 'vue';
|
|
import { useElementSize } from '@vueuse/core';
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isCompact: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['change']);
|
|
|
|
const tabsContainer = useTemplateRef('tabsContainer');
|
|
const tabsList = useTemplateRef('tabsList');
|
|
|
|
const { width: containerWidth } = useElementSize(tabsContainer);
|
|
const { width: listWidth } = useElementSize(tabsList);
|
|
|
|
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 = () => {
|
|
if (tabsContainer.value && tabsList.value) {
|
|
hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
|
|
}
|
|
};
|
|
|
|
const onScrollClick = direction => {
|
|
if (tabsContainer.value && tabsList.value) {
|
|
let scrollPosition = tabsList.value.scrollLeft;
|
|
scrollPosition += direction === 'left' ? -100 : 100;
|
|
tabsList.value.scrollTo({
|
|
top: 0,
|
|
left: scrollPosition,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
};
|
|
|
|
// Watch for changes in element sizes with immediate execution
|
|
watch(
|
|
[containerWidth, listWidth],
|
|
() => {
|
|
computeScrollWidth();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="tabsContainer"
|
|
:class="{
|
|
'tabs--container--with-border': border,
|
|
'tabs--container--compact': isCompact,
|
|
}"
|
|
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 ref="tabsList" :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>
|