refactor(VTabs): tuning pass (#15262)

vuetifyjs · Jun 23, 2022 · 900d02e · 900d02e
1 parent e7ec0fb
commit 900d02e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx
@@ -5,19 +5,19 @@ import './VTab.sass'
 import { VBtn } from '@/components/VBtn'
 
 // Composables
+import { IconValue } from '@/composables/icons'
 import { makeGroupItemProps } from '@/composables/group'
 import { makeRouterProps } from '@/composables/router'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps } from '@/composables/theme'
 import { useTextColor } from '@/composables/color'
-import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { computed, ref } from 'vue'
 import { defineComponent, pick, standardEasing, useRender } from '@/util'
-import { VTabsSymbol } from './shared'
 
 // Types
+import { VTabsSymbol } from './shared'
 import type { PropType } from 'vue'
 
 export const VTab = defineComponent({

diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -6,17 +6,17 @@ import { VSlideGroup } from '@/components/VSlideGroup'
 import { VTab } from './VTab'
 
 // Composables
-import { useBackgroundColor } from '@/composables/color'
-import { provideDefaults } from '@/composables/defaults'
 import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeTagProps } from '@/composables/tag'
+import { provideDefaults } from '@/composables/defaults'
+import { useBackgroundColor } from '@/composables/color'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { defineComponent } from '@/util'
-import { VTabsSymbol } from './shared'
+import { defineComponent, useRender } from '@/util'
 
 // Types
+import { VTabsSymbol } from './shared'
 import type { PropType } from 'vue'
 
 export type TabItem = string | Record<string, any>
@@ -84,7 +84,7 @@ export const VTabs = defineComponent({
       },
     })
 
-    return () => (
+    useRender(() => (
       <VSlideGroup
         class={[
           'v-tabs',
@@ -112,7 +112,9 @@ export const VTabs = defineComponent({
           <VTab { ...item } key={ item.title } />
         )) }
       </VSlideGroup>
-    )
+    ))
+
+    return {}
   },
 })
 

diff --git a/packages/vuetify/src/components/VTabs/_variables.scss b/packages/vuetify/src/components/VTabs/_variables.scss
@@ -1,10 +1,12 @@
 @use 'sass:math';
 @use 'sass:map';
 
-$tabs-density: ('default': 0, 'comfortable' : -1, 'compact': -3) !default;
+// VTabs
+$tabs-density: ( 'default': 0, 'comfortable' : -1, 'compact': -3) !default;
 $tabs-height: 48px !default;
 $tabs-stacked-height: 72px !default;
 
+// VTab
 $tab-align-with-title-margin: 42px !default;
 $tab-max-width: 360px !default;
 $tab-min-width: 90px !default;