refactor: use VSlideGroup directly

vuetifyjs · Feb 28, 2022 · d288891 · d288891
1 parent 80034ed
commit d288891
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 53 deletions.
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -7,13 +7,14 @@ import { useSlideGroup } from '@/composables/slideGroup'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 import { computed } from 'vue'
 
 export const VSlideGroup = defineComponent({
   name: 'VSlideGroup',
 
   props: {
+    symbol: null,
     ...makeTagProps(),
     ...makeGroupProps({
       mandatory: true,
@@ -32,8 +33,9 @@ export const VSlideGroup = defineComponent({
       next,
       prev,
       select,
+      selected,
       isSelected,
-    } = useSlideGroup(props)
+    } = useSlideGroup(props, props.symbol)
 
     const slotProps = computed(() => ({
       next,
@@ -42,7 +44,7 @@ export const VSlideGroup = defineComponent({
       isSelected,
     }))
 
-    return () => (
+    useRender(() => (
       <props.tag
         class={[
           'v-slide-group',
@@ -52,7 +54,7 @@ export const VSlideGroup = defineComponent({
           <div class="v-slide-group__prepend">
             { slots.prepend(slotProps.value) }
           </div>
-        ) }
+        )}
 
         <div
           ref={ containerRef }
@@ -71,9 +73,13 @@ export const VSlideGroup = defineComponent({
           <div class="v-slide-group__append">
             { slots.append(slotProps.value) }
           </div>
-        ) }
+        )}
       </props.tag>
-    )
+    ))
+
+    return {
+      selected,
+    }
   },
 })
 

diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx
@@ -1,19 +1,20 @@
 import './VTab.sass'
 
-// Mixins
+// Components
+import { VBtn } from '@/components/VBtn'
+import { VTabsSymbol } from './VTabs'
 
-// Utilities
-import { makeRouterProps } from '@/composables/router'
-import { makeTagProps } from '@/composables/tag'
-import { defineComponent, pick, standardEasing } from '@/util'
-import { VBtn } from '..'
+// Composables
+import { useTextColor } from '@/composables/color'
 import { provideDefaults } from '@/composables/defaults'
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
-import { VTabsSymbol } from './VTabs'
-import { computed, ref, toRef, watch } from 'vue'
+import { makeRouterProps } from '@/composables/router'
+import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps } from '@/composables/theme'
 
-// Types
+// Utilities
+import { computed, ref, toRef, watch } from 'vue'
+import { defineComponent, pick, standardEasing, useRender } from '@/util'
 
 export const VTab = defineComponent({
   name: 'VTab',
@@ -32,6 +33,7 @@ export const VTab = defineComponent({
       default: true,
     },
     color: String,
+    sliderColor: String,
 
     ...makeTagProps(),
     ...makeRouterProps(),
@@ -43,6 +45,7 @@ export const VTab = defineComponent({
 
   setup (props, { slots, attrs }) {
     const { isSelected, select, selectedClass } = useGroupItem(props, VTabsSymbol)
+    const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(props, 'sliderColor')
 
     provideDefaults({
       VBtn: {
@@ -66,6 +69,8 @@ export const VTab = defineComponent({
 
         if (!prevEl || !nextEl) return
 
+        const color = getComputedStyle(prevEl).color
+
         const prevBox = prevEl.getBoundingClientRect()
         const nextBox = nextEl.getBoundingClientRect()
 
@@ -79,6 +84,7 @@ export const VTab = defineComponent({
 
         const sigma = 1.5
         nextEl.animate({
+          backgroundColor: [color, ''],
           transform: [`translateX(${delta}px)`, `translateX(${delta / sigma}px) scaleX(${(scale - 1) / sigma + 1})`, ''],
           transformOrigin: Array(3).fill(origin),
         }, {
@@ -88,7 +94,7 @@ export const VTab = defineComponent({
       }
     })
 
-    return () => {
+    useRender(() => {
       const [btnProps] = pick(props, [
         'href',
         'to',
@@ -111,11 +117,23 @@ export const VTab = defineComponent({
           ]}
           onClick={ () => !props.disabled && select(!isSelected.value) }
           { ...btnProps }
+          { ...attrs }
         >
           { slots.default ? slots.default() : props.title }
-          <div ref={ sliderEl } class="v-tab__slider"></div>
+          <div
+            ref={ sliderEl }
+            class={[
+              'v-tab__slider',
+              sliderColorClasses.value,
+            ]}
+            style={ sliderColorStyles.value }
+          />
         </VBtn>
       )
+    })
+
+    return {
+      isSelected,
     }
   },
 })

diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -3,21 +3,21 @@ import './VTabs.sass'
 
 // Components
 import { VTab } from './VTab'
+import { VSlideGroup } from '@/components/VSlideGroup'
 
-// Directives
+// Composables
+import { provideDefaults } from '@/composables/defaults'
+import { makeDensityProps, useDensity } from '@/composables/density'
+import { makeGroupProps } from '@/composables/group'
+import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { defineComponent } from '@/util'
-import { makeTagProps } from '@/composables/tag'
 import { computed, toRef } from 'vue'
+import { defineComponent } from '@/util'
 
 // Types
 import type { InjectionKey, PropType } from 'vue'
-import { provideDefaults } from '@/composables/defaults'
 import type { GroupProvide } from '@/composables/group'
-import { makeGroupProps } from '@/composables/group'
-import { useSlideGroup } from '@/composables/slideGroup'
-import { makeDensityProps, useDensity } from '@/composables/density'
 
 export type TabItem = string | Record<string, any>
 
@@ -52,7 +52,6 @@ export const VTabs = defineComponent({
     stacked: Boolean,
 
     ...makeDensityProps(),
-    ...makeGroupProps({ mandatory: 'force' as const }),
     ...makeTagProps(),
     //     backgroundColor: String,
     //     centered: Boolean,
@@ -82,19 +81,9 @@ export const VTabs = defineComponent({
     //     },
   },
 
-  emits: {
-    'update:modelValue': (value: any) => true,
-  },
-
-  setup (props, { slots }) {
+  setup (props, { slots, attrs }) {
     const parsedItems = computed(() => parseItems(props.items))
     const { densityClasses } = useDensity(props)
-    const {
-      containerRef,
-      containerListeners,
-      contentRef,
-      contentStyles,
-    } = useSlideGroup(props, VTabsSymbol)
 
     provideDefaults({
       VTab: {
@@ -105,7 +94,7 @@ export const VTabs = defineComponent({
     })
 
     return () => (
-      <props.tag
+      <VSlideGroup
         class={[
           'v-tabs',
           `v-tabs--${props.direction}`,
@@ -115,23 +104,14 @@ export const VTabs = defineComponent({
           densityClasses.value,
         ]}
         role="tablist"
+        symbol={ VTabsSymbol }
+        mandatory="force"
+        { ...attrs }
       >
-        <div
-          ref={ containerRef }
-          class="v-tabs__container"
-          { ...containerListeners }
-        >
-          <div
-            ref={ contentRef }
-            class="v-tabs__content"
-            style={ contentStyles.value }
-          >
-            { slots.default ? slots.default() : parsedItems.value.map(item => (
-              <VTab { ...item } key={ item.text } />
-            )) }
-          </div>
-        </div>
-      </props.tag>
+        { slots.default ? slots.default() : parsedItems.value.map(item => (
+          <VTab { ...item } key={ item.title } />
+        )) }
+      </VSlideGroup>
     )
   },
 })