From 866643ef2b7e1fd105ab51f9a88222ede43ff02f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 25 Apr 2024 01:44:13 +0100
Subject: [PATCH] Refactor #5621

---
 components/lib/tablist/TabList.vue | 22 ++++++++++++++++------
 components/lib/tabs/Tabs.vue       |  3 +++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/components/lib/tablist/TabList.vue b/components/lib/tablist/TabList.vue
index dd402efab..43f8c3fd5 100644
--- a/components/lib/tablist/TabList.vue
+++ b/components/lib/tablist/TabList.vue
@@ -113,16 +113,26 @@ export default {
             const { content, inkbar, tabs } = this.$refs;
             const activeTab = DomHandler.findSingle(content, '[data-pc-name="tab"][data-p-active="true"]');
 
-            inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
-            inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';
+            if (this.$pcTabs.isVertical()) {
+                inkbar.style.height = DomHandler.getOuterHeight(activeTab) + 'px';
+                inkbar.style.top = DomHandler.getOffset(activeTab).top - DomHandler.getOffset(tabs).top + 'px';
+            } else {
+                inkbar.style.width = DomHandler.getOuterWidth(activeTab) + 'px';
+                inkbar.style.left = DomHandler.getOffset(activeTab).left - DomHandler.getOffset(tabs).left + 'px';
+            }
         },
         updateButtonState() {
             const { list, content } = this.$refs;
-            const { scrollLeft, scrollWidth, offsetWidth } = content;
-            const width = DomHandler.getWidth(content);
+            const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } = content;
+            const [width, height] = [DomHandler.getWidth(content), DomHandler.getHeight(content)];
 
-            this.isPrevButtonEnabled = scrollLeft !== 0;
-            this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;
+            if (this.$pcTabs.isVertical()) {
+                this.isPrevButtonEnabled = scrollTop !== 0;
+                this.isNextButtonEnabled = list.offsetHeight >= offsetHeight && parseInt(scrollTop) !== scrollHeight - height;
+            } else {
+                this.isPrevButtonEnabled = scrollLeft !== 0;
+                this.isNextButtonEnabled = list.offsetWidth >= offsetWidth && parseInt(scrollLeft) !== scrollWidth - width;
+            }
         },
         getVisibleButtonWidths() {
             const { prevBtn, nextBtn } = this.$refs;
diff --git a/components/lib/tabs/Tabs.vue b/components/lib/tabs/Tabs.vue
index e1591e917..fcc4ac635 100644
--- a/components/lib/tabs/Tabs.vue
+++ b/components/lib/tabs/Tabs.vue
@@ -36,6 +36,9 @@ export default {
                 this.d_value = newValue;
                 this.$emit('update:value', newValue);
             }
+        },
+        isVertical() {
+            return this.orientation === 'vertical';
         }
     }
 };