tabs-view.vue
2.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<script setup lang="ts">
import type { TabsEmits, TabsProps } from './types';
import { useForwardPropsEmits } from '@vben-core/composables';
import { ChevronLeft, ChevronRight } from '@vben-core/icons';
import { VbenScrollbar } from '@vben-core/shadcn-ui';
import { Tabs, TabsChrome } from './components';
import { useTabsDrag } from './use-tabs-drag';
import { useTabsViewScroll } from './use-tabs-view-scroll';
interface Props extends TabsProps {}
defineOptions({
name: 'TabsView',
});
const props = withDefaults(defineProps<Props>(), {
contentClass: 'vben-tabs-content',
draggable: true,
styleType: 'chrome',
wheelable: true,
});
const emit = defineEmits<TabsEmits>();
const forward = useForwardPropsEmits(props, emit);
const {
handleScrollAt,
handleWheel,
scrollbarRef,
scrollDirection,
scrollIsAtLeft,
scrollIsAtRight,
showScrollButton,
} = useTabsViewScroll(props);
function onWheel(e: WheelEvent) {
if (props.wheelable) {
handleWheel(e);
e.stopPropagation();
e.preventDefault();
}
}
useTabsDrag(props, emit);
</script>
<template>
<div class="flex h-full flex-1 overflow-hidden">
<!-- 左侧滚动按钮 -->
<span
v-show="showScrollButton"
:class="{
'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtLeft,
'pointer-events-none opacity-30': scrollIsAtLeft,
}"
class="border-r px-2"
@click="scrollDirection('left')"
>
<ChevronLeft class="size-4 h-full" />
</span>
<div
:class="{
'pt-[3px]': styleType === 'chrome',
}"
class="size-full flex-1 overflow-hidden"
>
<VbenScrollbar
ref="scrollbarRef"
:shadow-bottom="false"
:shadow-top="false"
class="h-full"
horizontal
scroll-bar-class="z-10 hidden "
shadow
shadow-left
shadow-right
@scroll-at="handleScrollAt"
@wheel="onWheel"
>
<TabsChrome
v-if="styleType === 'chrome'"
v-bind="{ ...forward, ...$attrs, ...$props }"
/>
<Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }" />
</VbenScrollbar>
</div>
<!-- 右侧滚动按钮 -->
<span
v-show="showScrollButton"
:class="{
'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtRight,
'pointer-events-none opacity-30': scrollIsAtRight,
}"
class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
@click="scrollDirection('right')"
>
<ChevronRight class="size-4 h-full" />
</span>
</div>
</template>