refactor(v-tabs): refactored v-tabs functionality

src/components/VTabs/VTabs.js

@@ -2,101 +2,90 @@ require('../../stylus/components/_tabs.styl')
 
 import Resize from '../../directives/resize'
 
+import {
+ provide as RegistrableProvide
+} from '../../mixins/registrable'
+import SSRBootable from '../../mixins/ssr-bootable'
+
 export default {
  name: 'v-tabs',
 
  directives: {
  Resize
  },
 
+ mixins: [
+ RegistrableProvide('tabs'),
+ SSRBootable
+ ],
+
  provide () {
  return {
- registerContent: this.registerContent,
- unregisterContent: this.unregisterContent,
- registerTabItem: this.registerTabItem,
- unregisterTabItem: this.unregisterTabItem,
  next: this.next,
  prev: this.prev,
- slider: this.slider,
- tabClick: this.tabClick,
- isScrollable: () => this.scrollable,
- isMobile: () => this.isMobile
+ tabClick: this.tabClick
  }
  },
 
- data () {
- return {
- activeIndex: null,
- content: [],
- isBooted: false,
- resizeTimeout: null,
- reverse: false,
- tabItems: [],
- tabsContainer: null,
- tabsSlider: null,
- target: null,
- targetEl: null,
- transitionTime: 300
- }
- },
+ data: () => ({
+ activeIndex: null,
+ content: [],
+ bar: [],
+ isBooted: false,
+ resizeTimeout: null,
+ reverse: false,
+ tabItems: [],
+ target: null,
+ transitionTime: 300
+ }),
 
  props: {
- centered: Boolean,
- fixed: Boolean,
- grow: Boolean,
- icons: Boolean,
- mobileBreakPoint: {
- type: [Number, String],
- default: 1280
- },
- value: String,
- scrollable: {
- type: Boolean,
- default: true
- }
+ value: String
  },
 
  computed: {
- classes () {
- return {
- 'tabs': true,
- 'tabs--centered': this.centered,
- 'tabs--fixed': this.fixed,
- 'tabs--grow': this.grow,
- 'tabs--icons': this.icons,
- 'tabs--mobile': this.isMobile,
- 'tabs--scroll-bars': this.scrollable
- }
- },
- isMobile () {
- return this.$vuetify.breakpoint.width < this.mobileBreakPoint
+ activeTab () {
+ if (!this.tabItems.length) return undefined
+
+ return this.tabItems[this.activeIndex]
  }
  },
 
  watch: {
- value () {
- this.tabClick(this.value)
- },
  activeIndex () {
  this.updateTabs()
- this.$nextTick(() => (this.isBooted = true))
+ },
+ bar (val) {
+ if (!val || !this.activeTab) return
+
+ // Welcome to suggestions for solving
+ // initial load positioning
+ setTimeout(() => this.activeTab.toggle(this.activeTab.id), 100)
  },
  tabItems (newItems, oldItems) {
+ let activeIndex = this.activeIndex
+
  // Tab item was removed and
  // there are still more
  if (oldItems.length > newItems.length &&
  newItems.length > 0
  ) {
- if (!newItems.find(o => o.id === this.target)) {
- const i = oldItems.findIndex(o => o.id === this.target)
+ const i = oldItems.findIndex(o => o.id === this.target)
 
- this.$nextTick(() => {
- this.activeIndex = this.tabItems[i > 0 ? i - 1 : 0].id
- this.target = this.activeIndex
- })
- }
+ activeIndex = i > 0 ? i - 1 : 0
  }
- this.slider()
+
+ const activeTab = this.tabItems[activeIndex]
+
+ // On boot activeIndex may not
+ // be set yet, just abort
+ if (!activeTab) return
+
+ this.tabClick(activeTab.id)
+ this.callBar()
+ },
+ value () {
+ this.tabClick(this.value)
  },
  '$vuetify.application.left' () {
  this.onContainerResize()
@@ -109,32 +98,30 @@ export default {
  mounted () {
  // This is a workaround to detect if link is active
  // when being used as a router or nuxt link
- const i = this.tabItems.findIndex(({ el }) => {
- return el.firstChild.classList.contains('tabs__item--active')
+ const i = this.tabItems.findIndex(tabItem => {
+ return tabItem.id === this.value ||
+ tabItem.el.firstChild.className.indexOf('tabs__item--active') > -1
  })
 
- const tab = this.value || (this.tabItems[i !== -1 ? i : 0] || {}).id
+ const activeIndex = i > -1 ? i : 0
+
+ if (activeIndex > this.tabItems.length - 1) return
 
- tab && this.tabClick(tab)
+ this.tabClick(this.tabItems[activeIndex].id)
  },
 
  methods: {
- registerContent (id, toggle) {
- this.content.push({ id, toggle })
- },
- registerTabItem (id, toggle, el) {
- this.tabItems.push({ id, toggle, el })
- },
- unregisterContent (id) {
- this.content = this.content.filter(o => o.id !== id)
- },
- unregisterTabItem (id) {
- this.tabItems = this.tabItems.filter(o => o.id !== id)
+ // Force v-tabs-bar to re-evaluate
+ // overflow when items change
+ callBar () {
+ if (!this.bar.length) return
+
+ this.bar[0].action()
  },
  next (cycle) {
  let nextIndex = this.activeIndex + 1
 
- if (!this.content[nextIndex]) {
+ if (!this.tabItems[nextIndex]) {
  if (!cycle) return
  nextIndex = 0
  }
@@ -144,16 +131,13 @@ export default {
  prev (cycle) {
  let prevIndex = this.activeIndex - 1
 
- if (!this.content[prevIndex]) {
+ if (!this.tabItems[prevIndex]) {
  if (!cycle) return
- prevIndex = this.content.length - 1
+ prevIndex = this.tabItems.length - 1
  }
 
  this.tabClick(this.tabItems[prevIndex].id)
  },
- onResize () {
- this.slider()
- },
  /**
  * When v-navigation-drawer changes the
  * width of the container, call resize
@@ -163,35 +147,10 @@ export default {
  */
  onContainerResize () {
  clearTimeout(this.resizeTimeout)
- this.resizeTimeout = setTimeout(this.onResize, this.transitionTime)
+ this.resizeTimeout = setTimeout(this.callBar, this.transitionTime)
  },
- slider (el) {
- this.tabsSlider = this.tabsSlider ||
- !!this.$el && this.$el.querySelector('.tabs__slider')
-
- this.tabsContainer = this.tabsContainer ||
- !!this.$el && this.$el.querySelector('.tabs__container')
-
- if (!this.tabsSlider || !this.tabsContainer) return
-
- this.targetEl = el || this.targetEl
-
- if (!this.targetEl) return
-
- // Gives DOM time to paint when
- // processing slider for
- // dynamic tabs
- this.$nextTick(() => {
- // #684 Calculate width as %
- const width = (
- this.targetEl.scrollWidth /
- this.tabsContainer.clientWidth *
- 100
- )
-
- this.tabsSlider.style.width = `${width}%`
- this.tabsSlider.style.left = `${this.targetEl.offsetLeft}px`
- })
+ register (type, args) {
+ this[type].push(args)
  },
  tabClick (target) {
  const setActiveIndex = index => {
@@ -207,13 +166,16 @@ export default {
  this.target = target
 
  this.$nextTick(() => {
- const nextIndex = this.content.findIndex(o => o.id === target)
+ const nextIndex = this.tabItems.findIndex(o => o.id === target)
  this.reverse = nextIndex < this.activeIndex
  setActiveIndex(nextIndex)
 
  this.$emit('input', this.target)
  })
  },
+ unregister (type, id) {
+ this[type] = this[type].filter(o => o.id !== id)
+ },
  updateTabs () {
  this.content.forEach(({ toggle }) => {
  toggle(this.target, this.reverse, this.isBooted)
@@ -227,11 +189,7 @@ export default {
 
  render (h) {
  return h('div', {
- 'class': this.classes,
- directives: [{
- name: 'resize',
- value: this.onResize
- }]
+ staticClass: 'tabs'
  }, this.$slots.default)
  }
 }