fix(VTabs): allow proper adjustment of sldier size

fixes #8014
vuetifyjs · Jul 25, 2019 · c31b01d · c31b01d
1 parent ce27c73
commit c31b01d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/packages/docs/src/lang/en/components/Tabs.json b/packages/docs/src/lang/en/components/Tabs.json
@@ -85,6 +85,7 @@
     "right": "Aligns tabs to the right",
     "showArrows": "Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop.",
     "sliderColor": "Changes the background color of an auto-generated `v-tabs-slider`",
+    "sliderSize": "Changes the size of the slider, **height** for horizontal, **width** for vertical.",
     "touchless": "Components.NavigationDrawers.props.touchless",
     "transition": "Mixins.Transitionable.props.transition",
     "vertical": "Stacks tabs on top of each other vertically."

diff --git a/packages/vuetify/src/components/VTabs/VTabs.sass b/packages/vuetify/src/components/VTabs/VTabs.sass
@@ -88,7 +88,7 @@
 
 .v-tabs-slider
   background-color: currentColor
-  height: $tabs-slider-height
+  height: 100%
   width: 100%
 
   &-wrapper

diff --git a/packages/vuetify/src/components/VTabs/VTabs.ts b/packages/vuetify/src/components/VTabs/VTabs.ts
@@ -74,6 +74,10 @@ export default baseMixins.extend<options>().extend({
     right: Boolean,
     showArrows: Boolean,
     sliderColor: String,
+    sliderSize: {
+      type: [Number, String],
+      default: 2,
+    },
     vertical: Boolean,
   },
 
@@ -167,11 +171,11 @@ export default baseMixins.extend<options>().extend({
         const el = activeTab.$el as HTMLElement
 
         this.slider = {
-          height: this.vertical ? el.offsetHeight : 2,
+          height: !this.vertical ? Number(this.sliderSize) : el.scrollHeight,
           left: this.vertical ? 0 : el.offsetLeft,
           right: this.vertical ? 0 : el.offsetLeft + el.offsetWidth,
           top: el.offsetTop,
-          width: this.vertical ? 2 : el.scrollWidth,
+          width: this.vertical ? Number(this.sliderSize) : el.scrollWidth,
         }
       })
 

diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.ts b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.ts
@@ -151,4 +151,39 @@ describe('VTabs.ts', () => {
     expect(wrapper.vm.slider.left).toBe(0)
     expect(wrapper.vm.slider.width).toBe(0)
   })
+
+  it('should adjust slider size', async () => {
+    const el = {
+      $el: {
+        scrollHeight: 99,
+        scrollWidth: 99,
+      },
+    }
+    const wrapper = mountFunction({
+      propsData: {
+        value: 0,
+      },
+    })
+    wrapper.vm.$refs.items.items.push(el)
+    wrapper.vm.callSlider()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.slider.height).toBe(2)
+
+    wrapper.setProps({ sliderSize: 4 })
+    wrapper.vm.callSlider()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.slider.height).toBe(4)
+
+    wrapper.setProps({ vertical: true })
+    wrapper.vm.callSlider()
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.slider.height).toBe(99)
+    expect(wrapper.vm.slider.width).toBe(4)
+  })
 })
diff --git a/packages/vuetify/src/components/VTabs/_variables.scss b/packages/vuetify/src/components/VTabs/_variables.scss
@@ -6,6 +6,5 @@ $tabs-item-max-width: 360px !default;
 $tabs-item-padding: 0 16px !default;
 $tabs-item-hover-opacity: 0.16 !default;
 $tabs-item-focus-opacity: 0.20 !default;
-$tabs-slider-height: 2px !default;
 $tabs-item-vertical-height: $tabs-bar-height !default;
 $tabs-item-vertical-icons-and-text-height: $tabs-icons-and-text-bar-height !default;