feat(Tabs): add new grow style

gitsindonesia · Jun 15, 2023 · 5a2bbc6 · 5a2bbc6
1 parent 2f4802f
commit 5a2bbc6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/packages/tabs/src/VTabGroup.vue b/packages/tabs/src/VTabGroup.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
     vertical?: boolean;
     centerActive?: boolean;
     color?: DefaultColors;
+    grow?: boolean;
   }>(),
   {
     variant: 'underline',
@@ -39,6 +40,7 @@ function onTabChange(value: number) {
       {
         'v-tabs--vertical': vertical,
         'v-tabs--center-active': centerActive,
+        'v-tabs--grow': grow,
       },
     ]"
     as="div"

diff --git a/packages/tabs/src/VTabs.stories.ts b/packages/tabs/src/VTabs.stories.ts
@@ -588,6 +588,7 @@ export const HeadlessUI: Story = (args) => ({
     return {args, tab, tabVariants};
   },
   template: `
+    <h3 class="font-semibold mb-2">Default</h3>
     <VTabGroup
       v-model="tab"
       v-bind="args"
@@ -607,6 +608,7 @@ export const HeadlessUI: Story = (args) => ({
       </VTabPanels>
     </VTabGroup>
 
+    <h3 class="font-semibold mb-2 mt-4">Vertical</h3>
     <VTabGroup
       v-model="tab"
       v-bind="args"
@@ -626,5 +628,25 @@ export const HeadlessUI: Story = (args) => ({
         <VTabPanel>Tab 3 content</VTabPanel>
       </VTabPanels>
     </VTabGroup>
+    <h3 class="font-semibold mb-2 mt-4">Grow</h3>
+    <VTabGroup
+      v-model="tab"
+      v-bind="args"
+      v-for="variant in tabVariants"
+      :key="variant"
+      :variant="variant"
+      grow
+    >
+      <VTabList>
+        <VTabItem>Tab 1</VTabItem>
+        <VTabItem>Tab 2</VTabItem>
+        <VTabItem>Tab 3</VTabItem>
+      </VTabList>
+      <VTabPanels>
+        <VTabPanel>Tab 1 content</VTabPanel>
+        <VTabPanel>Tab 2 content</VTabPanel>
+        <VTabPanel>Tab 3 content</VTabPanel>
+      </VTabPanels>
+    </VTabGroup>
   `,
 });
diff --git a/packages/themes/src/morpheme/_tabs.scss b/packages/themes/src/morpheme/_tabs.scss
@@ -368,4 +368,16 @@
       --v-tabs-item-active-text-color: var(--color-success-700);
     }
   }
+
+  // grow
+  &--grow {
+    .v-tabs-items {
+      width: 100%;
+    }
+    .v-tabs-item {
+      flex-grow: 1;
+      justify-content: center;
+      text-align: center;
+    }
+  }
 }