Va-Tabs flex direction (#3348)

epicmaxco · May 1, 2023 · 29dfcd9 · 29dfcd9
1 parent 9dc7d01
commit 29dfcd9
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Color.vue b/packages/docs/page-config/ui-elements/tabs/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 280px;">
+  <div style="max-width: 280px;">
     <va-tabs
       v-model="value"
       color="danger"

diff --git a/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue b/packages/docs/page-config/ui-elements/tabs/examples/Pagination.vue
@@ -1,7 +1,7 @@
 <template>
   <va-tabs
     v-model="value"
-    style="width: 280px;"
+    style="max-width: 280px;"
   >
     <template #tabs>
       <va-tab

diff --git a/packages/docs/page-config/ui-elements/tabs/index.ts b/packages/docs/page-config/ui-elements/tabs/index.ts
@@ -17,8 +17,6 @@ export default definePageConfig({
     block.subtitle("all.api"),
     block.api("VaTabs", apiOptions),
 
-
-
     block.subtitle("all.faq"),
     block.headline("tabs.faq.questions[0].question"),
     block.paragraph("tabs.faq.questions[0].answer"),

diff --git a/packages/ui/src/components/va-tabs/VaTabs.demo.vue b/packages/ui/src/components/va-tabs/VaTabs.demo.vue
@@ -388,30 +388,36 @@
         <template #tabs>
           <va-tab
             v-for="title in tabDynamic"
-            :name="title"
             :key="title"
           >
             {{ title }}
           </va-tab>
         </template>
       </va-tabs>
-      Value: {{ tabValue2 }}
-      <div>
-        <button @click="tabDynamic.push(`Tab #${tabDynamic.length + 1}`)">
+      Value: {{ tabDynamic[tabValue2] }}
+      <div class="mt-2">
+        <va-button
+          preset="primary"
+          @click="tabDynamic = [...tabDynamic, `Tab #${tabDynamic.length + 1}`]"
+        >
           Add tab
-        </button>
+        </va-button>
 
-        <input style="width: 50px;" v-model="deletedTabIndex" placeholder="Index">
-        <button @click="tabDynamic.splice(deletedTabIndex || 0,1)">
+        <va-input class="ml-10 mr-1" style="width: 70px;" v-model="deletedTabIndex" placeholder="Index" />
+        <va-button
+          preset="primary"
+          :disabled="!deletedTabIndex"
+          @click="removeTab"
+        >
           Remove tab
-        </button>
+        </va-button>
       </div>
     </VbCard>
   </VbDemo>
 </template>
 
 <script>
-import { VaCard, VaCardTitle, VaCardContent, VaIcon } from '../index'
+import { VaCard, VaCardTitle, VaCardContent, VaIcon, VaButton, VaInput } from '../index'
 import { VaTabs, VaTab } from './index'
 
 const TABS_WITH_CONTENT = [
@@ -429,6 +435,8 @@ export default {
     VaCard,
     VaCardTitle,
     VaCardContent,
+    VaButton,
+    VaInput,
   },
 
   data () {
@@ -437,7 +445,7 @@ export default {
       tabDynamic: ['One', 'Two', 'Three'],
       tabValue: 2,
       tabValue1: 'One',
-      tabValue2: 'One',
+      tabValue2: 0,
       tabValue3: 0,
       tabValue4: 'share',
       tabValueWithPagination: 'Four',
@@ -455,5 +463,25 @@ export default {
       return this.tabsWithContent.find(tab => tab.title === this.tabsWithContentValue)
     },
   },
+  methods: {
+    removeTab () {
+      const index = Number(this.deletedTabIndex)
+      if (index < this.tabDynamic.length) {
+        this.tabDynamic = [
+          ...this.tabDynamic.slice(0, index),
+          ...this.tabDynamic.slice(index + 1),
+        ]
+
+        if (this.tabValue2 > this.tabDynamic.length - 1) {
+          this.tabValue2 = this.tabDynamic.length - 1
+          return
+        }
+
+        if (this.tabValue2 >= index) {
+          this.tabValue2 = this.tabValue2 - 1
+        }
+      }
+    },
+  },
 }
 </script>
diff --git a/packages/ui/src/components/va-tabs/VaTabs.vue b/packages/ui/src/components/va-tabs/VaTabs.vue
@@ -446,6 +446,7 @@ export default defineComponent({
 .va-tabs {
   display: var(--va-tabs-display);
   align-items: var(--va-tabs-align-items-horizontal);
+  flex-direction: column;
   position: relative;
   font-family: var(--va-font-family);
 
@@ -454,6 +455,7 @@ export default defineComponent({
     contain: content;
     display: flex;
     flex: 1 1 auto;
+    width: 100%;
   }
 
   .va-tabs__pagination {
@@ -510,9 +512,11 @@ export default defineComponent({
 
   &--vertical {
     align-items: var(--va-tabs-align-items-vertical);
+    flex-direction: row;
 
     .va-tabs__wrapper {
       flex: 0 0 auto;
+      width: unset;
     }
 
     .va-tabs__container {