feat: add left and right scroll buttons to Tabs bar (#4161) (#4162)

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -72,6 +72,7 @@ function scrollIntoView() {
 <template>
   <div :style="style" class="tabs-chrome size-full flex-1 overflow-hidden pt-1">
     <VbenScrollbar
+      id="tabs-scrollbar"
       class="tabs-chrome__scrollbar h-full"
       horizontal
       scroll-bar-class="z-10"

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -74,6 +74,7 @@ function scrollIntoView() {
 <template>
   <div class="h-full flex-1 overflow-hidden">
     <VbenScrollbar
+      id="tabs-scrollbar"
       class="tabs-scrollbar h-full"
       horizontal
       scroll-bar-class="z-10"

packages/effects/layouts/package.json

@@ -20,6 +20,7 @@
     }
   },
   "dependencies": {
+    "@radix-icons/vue": "^1.0.0",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useContentMaximize, useTabs } from '@vben/hooks';
@@ -12,6 +12,9 @@ import {
   TabsView,
 } from '@vben-core/tabs-ui';
 
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue';
+
+import { useTabViewScroll } from './use-tab-view-scroll';
 import { useTabbar } from './use-tabbar';
 
 defineOptions({
@@ -49,9 +52,26 @@ const menus = computed(() => {
 if (!preferences.tabbar.persist) {
   tabbarStore.closeOtherTabs(route);
 }
+
+const { scrollDirection, setScrollBarEl, setScrollViewEl } = useTabViewScroll();
+
+onMounted(() => {
+  const scrollBarEl: HTMLElement | null =
+    document.querySelector('#tabs-scrollbar');
+
+  const scrollViewportEl: HTMLElement | null | undefined =
+    scrollBarEl?.querySelector('div[data-radix-scroll-area-viewport]');
+
+  setScrollBarEl(scrollBarEl);
+  setScrollViewEl(scrollViewportEl);
+});
 </script>
 
 <template>
+  <ChevronLeftIcon
+    class="mx-2 h-full cursor-pointer"
+    @click="scrollDirection('left')"
+  />
   <TabsView
     :active="currentActive"
     :class="theme"
@@ -66,6 +86,10 @@ if (!preferences.tabbar.persist) {
     @update:active="handleClick"
   />
   <div class="flex-center h-full">
+    <ChevronRightIcon
+      class="mx-2 h-full cursor-pointer"
+      @click="scrollDirection('right')"
+    />
     <TabsToolRefresh
       v-if="preferences.tabbar.showRefresh"
       @refresh="refreshTab"

packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue';
+
+type El = HTMLElement | null | undefined;
+
+export function useTabViewScroll(scrollDistance: number = 150) {
+  const scrollbarEl = ref<El>(null);
+  const scrollViewportEl = ref<El>(null);
+
+  function setScrollBarEl(el: El) {
+    scrollbarEl.value = el;
+  }
+
+  function setScrollViewEl(el: El) {
+    scrollViewportEl.value = el;
+  }
+
+  function getScrollClientWidth() {
+    if (!scrollbarEl.value || !scrollViewportEl.value) return {};
+
+    const scrollbarWidth = scrollbarEl.value.clientWidth;
+    const scrollViewWidth = scrollViewportEl.value.clientWidth;
+
+    return {
+      scrollbarWidth,
+      scrollViewWidth,
+    };
+  }
+
+  function scrollDirection(
+    direction: 'left' | 'right',
+    distance: number = scrollDistance,
+  ) {
+    const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
+
+    if (!scrollbarWidth || !scrollViewWidth) return;
+
+    if (scrollbarWidth > scrollViewWidth) return;
+
+    scrollViewportEl.value?.scrollBy({
+      behavior: 'smooth',
+      left: direction === 'left' ? -distance : +distance,
+    });
+  }
+
+  return {
+    scrollDirection,
+    setScrollBarEl,
+    setScrollViewEl,
+  };
+}