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 {