Merge pull request #122 from shariquerik/tabs-component-fix-2

fix: Tabs Component fixes
frappe · Jan 12, 2024 · f0f1d51 · f0f1d51
2 parents f5f5665 + 178b637
commit f0f1d51
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
@@ -6,18 +6,21 @@
     :selectedIndex="changedIndex"
     @change="(idx) => (changedIndex = idx)"
   >
-    <TabList class="relative flex items-center gap-6 border-b pl-5">
+    <TabList
+      class="relative flex items-center gap-6 overflow-x-auto border-b pl-5"
+      :class="tablistClass"
+    >
       <Tab
         ref="tabRef"
         as="template"
         v-for="(tab, i) in tabs"
         :key="i"
         v-slot="{ selected }"
-        class="focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
+        class="focus:outline-none focus:transition-none"
       >
         <slot name="tab" v-bind="{ tab, selected }">
           <button
-            class="-mb-px flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
+            class="flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
             :class="{ 'text-gray-900': selected }"
           >
             <component v-if="tab.icon" :is="tab.icon" class="h-5" />
@@ -27,12 +30,12 @@
       </Tab>
       <div
         ref="indicator"
-        class="absolute -bottom-px h-px bg-gray-900"
+        class="absolute bottom-0 h-px bg-gray-900"
         :class="transitionClass"
         :style="{ left: `${indicatorLeft}px` }"
       />
     </TabList>
-    <TabPanels class="flex flex-1 overflow-hidden">
+    <TabPanels class="flex flex-1 overflow-hidden" :class="tabPanelClass">
       <TabPanel
         class="flex flex-1 flex-col overflow-y-auto focus:outline-none"
         v-for="(tab, i) in tabs"
@@ -57,6 +60,14 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  tablistClass: {
+    type: String,
+    default: '',
+  },
+  tabPanelClass: {
+    type: String,
+    default: '',
+  },
   options: {
     type: Object,
     default: () => ({