feat(components/tabbar): support direction prop

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/tabs/TabItem.vue

@@ -18,8 +18,7 @@ const isActive = computed(() => {
 });
 </script>
 <template>
-  <div v-if="isActive">
+  <div v-if="isActive" class="tabs-item-wrapper">
     <slot />
   </div>
 </template>
-<style lang="scss"></style>

src/components/base/tabs/Tabbar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PropType } from "vue";
 import { computed } from "vue";
-import type { Type } from "./interface";
+import type { Direction, Type } from "./interface";
 
 const props = defineProps({
   activeId: {
@@ -14,6 +14,10 @@ const props = defineProps({
     type: String as PropType<Type>,
     default: "default",
   },
+  direction: {
+    type: String as PropType<Direction>,
+    default: "row",
+  },
   idKey: {
     type: String,
     default: "id",
@@ -27,7 +31,7 @@ const props = defineProps({
 const emit = defineEmits(["update:activeId", "change"]);
 
 const classes = computed(() => {
-  return [`tabbar-${props.type}`];
+  return [`tabbar-${props.type}`, `tabbar-direction-${props.direction}`];
 });
 
 const handleChange = (id: number | string) => {
@@ -60,6 +64,7 @@ const handleChange = (id: number | string) => {
   .tabbar-items {
     @apply flex;
     @apply items-center;
+    @apply flex-row;
   }
 
   .tabbar-item {
@@ -155,5 +160,38 @@ const handleChange = (id: number | string) => {
       }
     }
   }
+
+  &.tabbar-direction-row {
+    .tabbar-items {
+      @apply flex-row;
+    }
+  }
+
+  &.tabbar-direction-column {
+    .tabbar-items {
+      @apply flex-col;
+    }
+
+    &.tabbar-default {
+      border-bottom-width: 0;
+      @apply border-b-0;
+      border-right-width: 2px;
+      @apply border-r-gray-100;
+
+      .tabbar-items {
+        margin-bottom: 0;
+        margin-right: -2px;
+      }
+
+      .tabbar-item {
+        border-bottom-width: 0;
+        border-right-width: 2px;
+
+        &.tabbar-item-active {
+          border-right-color: #0e1731;
+        }
+      }
+    }
+  }
 }
 </style>

src/components/base/tabs/Tabs.vue

@@ -2,7 +2,7 @@
 import { computed, provide, useSlots } from "vue";
 import type { PropType, ComputedRef } from "vue";
 import { VTabbar } from "./index";
-import type { Type } from "@/components/base/tabs/interface";
+import type { Type, Direction } from "@/components/base/tabs/interface";
 
 const props = defineProps({
   activeId: {
@@ -12,6 +12,10 @@ const props = defineProps({
     type: String as PropType<Type>,
     default: "default",
   },
+  direction: {
+    type: String as PropType<Direction>,
+    default: "row",
+  },
   idKey: {
     type: String,
     default: "id",
@@ -40,18 +44,23 @@ const tabItems = computed(() => {
   });
 });
 
+const classes = computed(() => {
+  return [`tabs-direction-${props.direction}`];
+});
+
 const handleChange = (id: string | number) => {
   emit("update:activeId", id);
   emit("change", id);
 };
 </script>
 <template>
-  <div class="tabs-wrapper">
+  <div class="tabs-wrapper" :class="classes">
     <div class="tabs-bar-wrapper">
       <VTabbar
         :activeId="activeId"
         :items="tabItems"
         :type="type"
+        :direction="direction"
         @change="handleChange"
       />
     </div>
@@ -60,4 +69,25 @@ const handleChange = (id: string | number) => {
     </div>
   </div>
 </template>
-<style lang="scss"></style>
+<style lang="scss">
+.tabs-wrapper {
+  @apply flex;
+
+  .tabs-items-wrapper {
+    @apply flex;
+  }
+
+  &.tabs-direction-row {
+    @apply flex-col;
+
+    .tabs-items-wrapper {
+      @apply mt-2;
+    }
+  }
+  &.tabs-direction-column {
+    .tabs-items-wrapper {
+      @apply ml-2;
+    }
+  }
+}
+</style>

src/components/base/tabs/interface.ts

@@ -1 +1,2 @@
 export type Type = "default" | "pills" | "outline";
+export type Direction = "row" | "column";