From 7f50b2b57779e8a00d2a9f48a627dc3a999597e0 Mon Sep 17 00:00:00 2001
From: PierreGAMEN <pierre.gamen@gmail.com>
Date: Fri, 6 Jun 2025 11:27:17 +0200
Subject: [PATCH] feat: add scroll handling and gradient effects to ATabs
 component

---
 components/ATabs.vue | 80 ++++++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 28 deletions(-)

diff --git a/components/ATabs.vue b/components/ATabs.vue
index 4ce9559..92db3ea 100644
--- a/components/ATabs.vue
+++ b/components/ATabs.vue
@@ -50,34 +50,34 @@ function toggle(value: string) {
     emit("tabSelected", value);
     activeValue.value = value;
 }
+
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+const tabsContainer = ref<HTMLElement | null>(null);
+const showLeftGradient = ref(false);
+
+function handleScroll() {
+    if (tabsContainer.value) {
+        showLeftGradient.value = tabsContainer.value.scrollLeft > 0;
+    }
+}
+
+onMounted(() => {
+    handleScroll();
+});
+
 </script>
 
 <template>
-    <div class="a-tabs" :style="{ '--shadow': shadow }">
-        <div class="a-tabs-container">
-            <div
-                v-for="(tab, key) in tabs"
-                :key="key"
-                class="a-tab"
+    <div class="a-tabs" :style="{ '--shadow': shadow }" :class="{ 'show-left-gradient': showLeftGradient }">
+        <div class="a-tabs-container" ref="tabsContainer" @scroll="handleScroll">
+            <div v-for="(tab, key) in tabs" :key="key" class="a-tab"
                 :class="[activeValue === tab.value && 'is-active']">
-                <slot
-                    name="tab-link"
-                    :active-value="activeValue"
-                    :tab="tab"
-                    :index="key"
-                    :toggle="toggle">
-                    <a
-                        tabindex="0"
-                        role="button"
-                        @keydown.space.prevent="toggle(tab.value)"
-                        @click="toggle(tab.value)">
+                <slot name="tab-link" :active-value="activeValue" :tab="tab" :index="key" :toggle="toggle">
+                    <a tabindex="0" role="button" @keydown.space.prevent="toggle(tab.value)" @click="toggle(tab.value)">
                         <VIcon v-if="tab.icon" :icon="tab.icon" />
                         <span>
-                            <slot
-                                name="tab-link-label"
-                                :active-value="activeValue"
-                                :tab="tab"
-                                :index="key">
+                            <slot name="tab-link-label" :active-value="activeValue" :tab="tab" :index="key">
                                 {{ tab.label }}
                             </slot>
                             <div class="tab-notif" v-if="tab.notif">
@@ -107,6 +107,13 @@ function toggle(value: string) {
         flex-wrap: wrap;
         overflow: auto;
 
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
         .a-tab {
             display: flex;
             outline-offset: 10px;
@@ -178,6 +185,7 @@ function toggle(value: string) {
                         0% {
                             width: 0%;
                         }
+
                         100% {
                             width: calc(100% - 20px);
                         }
@@ -187,6 +195,7 @@ function toggle(value: string) {
                         0% {
                             width: 0%;
                         }
+
                         100% {
                             width: calc(100% - 9px);
                         }
@@ -196,6 +205,7 @@ function toggle(value: string) {
                         0% {
                             width: 0%;
                         }
+
                         100% {
                             width: calc(100%);
                         }
@@ -203,6 +213,7 @@ function toggle(value: string) {
 
                     //IF IMG OR SVG ADD
                     span {
+
                         :slotted(img),
                         :slotted(svg) {
                             path {
@@ -221,6 +232,7 @@ function toggle(value: string) {
 
                     //IF IMG OR SVG ADD
                     span {
+
                         :slotted(img),
                         :slotted(svg) {
                             path {
@@ -264,21 +276,33 @@ function toggle(value: string) {
         &::after {
             content: "";
             position: absolute;
-            width: 20px;
+            width: 25px;
             height: 56px;
-            background: linear-gradient(
-                to right,
-                var(--a-transparent),
-                var(--shadow) 100%
-            );
+            background: linear-gradient(to right,
+                    var(--a-transparent),
+                    var(--a-white) 100%);
             top: 0;
             right: 0;
         }
 
+
         .a-tabs-container {
             flex-wrap: nowrap;
             padding-right: 20px;
         }
+
+        &.show-left-gradient::before {
+            display: block;
+            content: "";
+            position: absolute;
+            width: 25px;
+            height: 56px;
+            background: linear-gradient(to left, var(--a-transparent), var(--a-white) 100%);
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            z-index: 1;
+        }
     }
 }
 </style>