perf: improve tabs-view scrolling (#4164)

packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts

@@ -0,0 +1,59 @@
+import { nextTick, ref } from 'vue';
+
+type El = Element | null | undefined;
+
+export function useTabsViewScroll(scrollDistance: number = 150) {
+  const scrollbarEl = ref<El>(null);
+  const scrollViewportEl = ref<El>(null);
+
+  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'
+          ? -(scrollbarWidth - distance)
+          : +(scrollbarWidth - distance),
+    });
+  }
+
+  async function initScrollbar() {
+    await nextTick();
+    const barEl = document.querySelector('#tabs-scrollbar');
+
+    const viewportEl = barEl?.querySelector(
+      'div[data-radix-scroll-area-viewport]',
+    );
+
+    scrollbarEl.value = barEl;
+    scrollViewportEl.value = viewportEl;
+
+    const activeItem = viewportEl?.querySelector('.is-active');
+    activeItem?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  return {
+    initScrollbar,
+    scrollDirection,
+  };
+}