quasar 1.20.2 → 1.21.0

package/src/components/tabs/QTabs.js

@@ -7,9 +7,10 @@ import TimeoutMixin from '../../mixins/timeout.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import { stop, noop } from '../../utils/event.js'
-import { slot } from '../../utils/slot.js'
-import cache from '../../utils/cache.js'
+import { slot } from '../../utils/private/slot.js'
+import cache from '../../utils/private/cache.js'
 import { rtlHasScrollBug } from '../../utils/scroll.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -19,44 +20,26 @@ function getIndicatorClass (color, top, vertical) {
   return `absolute-${top === true ? pos[0] : pos[1]}${color ? ` text-${color}` : ''}`
 }
 
-function bufferPrioritySort (t1, t2) {
-  if (t1.priorityMatched === t2.priorityMatched) {
-    return t2.priorityHref - t1.priorityHref
+const alignValues = [ 'left', 'center', 'right', 'justify' ]
+const getDefaultBestScore = () => ({ matchedLen: 0, queryDiff: 9999, hrefLen: 0, exact: false, redirected: true })
+
+function hasQueryIncluded (targetQuery, matchingQuery) {
+  for (const key in targetQuery) {
+    if (targetQuery[ key ] !== matchingQuery[ key ]) {
+      return false
+    }
   }
-  return t2.priorityMatched - t1.priorityMatched
-}
 
-function bufferCleanSelected (t) {
-  t.selected = false
-  return t
+  return true
 }
 
-const
-  bufferFilters = [
-    t => t.selected === true && t.exact === true && t.redirected !== true,
-    t => t.selected === true && t.exact === true,
-    t => t.selected === true && t.redirected !== true,
-    t => t.selected === true,
-    t => t.exact === true && t.redirected !== true,
-    t => t.redirected !== true,
-    t => t.exact === true,
-    t => true
-  ],
-  bufferFiltersLen = bufferFilters.length
-
 export default Vue.extend({
   name: 'QTabs',
 
   mixins: [ TimeoutMixin, ListenersMixin ],
 
   provide () {
-    return {
-      tabs: this.tabs,
-      __recalculateScroll: this.__recalculateScroll,
-      __activateTab: this.__activateTab,
-      __activateRoute: this.__activateRoute,
-      __onKbdNavigate: this.__onKbdNavigate
-    }
+    return { $tabs: this }
   },
 
   props: {
@@ -65,7 +48,7 @@ export default Vue.extend({
     align: {
       type: String,
       default: 'center',
-      validator: v => ['left', 'center', 'right', 'justify'].includes(v)
+      validator: v => alignValues.includes(v)
     },
     breakpoint: {
       type: [String, Number],
@@ -99,67 +82,27 @@ export default Vue.extend({
 
   data () {
     return {
-      tabs: {
-        current: this.value,
-        hasFocus: false,
-        activeClass: this.activeClass,
-        activeColor: this.activeColor,
-        activeBgColor: this.activeBgColor,
-        indicatorClass: getIndicatorClass(
-          this.indicatorColor,
-          this.switchIndicator,
-          this.vertical
-        ),
-        narrowIndicator: this.narrowIndicator,
-        inlineLabel: this.inlineLabel,
-        noCaps: this.noCaps
-      },
       scrollable: false,
-      startArrow: true,
-      endArrow: false,
-      justify: false
+      leftArrow: true,
+      rightArrow: false,
+      justify: false,
+
+      tabNameList: [],
+
+      // used by children
+      currentModel: this.value,
+      hasFocus: false,
+      avoidRouteWatcher: false // false | string (uid)
     }
   },
 
   watch: {
-    value (name) {
-      this.__activateTab(name, true, true)
-    },
-
-    activeClass (v) {
-      this.tabs.activeClass = v
-    },
-
-    activeColor (v) {
-      this.tabs.activeColor = v
-    },
-
-    activeBgColor (v) {
-      this.tabs.activeBgColor = v
-    },
-
-    vertical (v) {
-      this.tabs.indicatorClass = getIndicatorClass(this.indicatorColor, this.switchIndicator, v)
-    },
-
-    indicatorColor (v) {
-      this.tabs.indicatorClass = getIndicatorClass(v, this.switchIndicator, this.vertical)
-    },
-
-    switchIndicator (v) {
-      this.tabs.indicatorClass = getIndicatorClass(this.indicatorColor, v, this.vertical)
-    },
-
-    narrowIndicator (v) {
-      this.tabs.narrowIndicator = v
-    },
-
-    inlineLabel (v) {
-      this.tabs.inlineLabel = v
+    isRTL () {
+      this.__localUpdateArrows()
     },
 
-    noCaps (v) {
-      this.tabs.noCaps = v
+    value (name) {
+      this.__updateModel({ name, setCurrent: true, skipEmit: true })
     },
 
     outsideArrows () {
@@ -167,32 +110,39 @@ export default Vue.extend({
     },
 
     arrowsEnabled (v) {
-      this.__updateArrows = v === true
+      this.__localUpdateArrows = v === true
         ? this.__updateArrowsFn
         : noop
 
       this.__recalculateScroll()
-    },
-
-    isRTL () {
-      this.__updateArrows()
     }
   },
 
   computed: {
-    arrowsEnabled () {
-      return this.$q.platform.is.desktop === true || this.mobileArrows === true
+    // used by children
+    tabProps () {
+      return {
+        activeClass: this.activeClass,
+        activeColor: this.activeColor,
+        activeBgColor: this.activeBgColor,
+        indicatorClass: getIndicatorClass(
+          this.indicatorColor,
+          this.switchIndicator,
+          this.vertical
+        ),
+        narrowIndicator: this.narrowIndicator,
+        inlineLabel: this.inlineLabel,
+        noCaps: this.noCaps
+      }
     },
 
-    arrowIcons () {
-      const sides = this.isRTL === true
-        ? [ 'end', 'start' ]
-        : [ 'start', 'end' ]
+    // used by children
+    hasActiveTab () {
+      return this.tabNameList.some(entry => entry.name === this.currentModel)
+    },
 
-      return {
-        [sides[0]]: this.leftIcon || (this.vertical === true ? this.$q.iconSet.tabs.up : this.$q.iconSet.tabs.left),
-        [sides[1]]: this.rightIcon || (this.vertical === true ? this.$q.iconSet.tabs.down : this.$q.iconSet.tabs.right)
-      }
+    arrowsEnabled () {
+      return this.$q.platform.is.desktop === true || this.mobileArrows === true
     },
 
     alignClass () {
@@ -204,7 +154,8 @@ export default Vue.extend({
     },
 
     classes () {
-      return `q-tabs--${this.scrollable === true ? '' : 'not-'}scrollable` +
+      return 'q-tabs row no-wrap items-center' +
+        ` q-tabs--${this.scrollable === true ? '' : 'not-'}scrollable` +
         ` q-tabs--${this.vertical === true ? 'vertical' : 'horizontal'}` +
         ` q-tabs__arrows--${this.arrowsEnabled === true && this.outsideArrows === true ? 'outside' : 'inside'}` +
         (this.dense === true ? ' q-tabs--dense' : '') +
@@ -213,7 +164,8 @@ export default Vue.extend({
     },
 
     innerClass () {
-      return this.alignClass +
+      return 'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position ' +
+        this.alignClass +
         (this.contentClass !== void 0 ? ` ${this.contentClass}` : '') +
         (this.$q.platform.is.mobile === true ? ' scroll' : '')
     },
@@ -228,41 +180,20 @@ export default Vue.extend({
       return this.vertical !== true && this.$q.lang.rtl === true
     },
 
-    __getScrollPosition () {
-      return this.vertical === true
-        ? el => el.scrollTop
-        : (
-          this.$q.lang.rtl !== true
-            ? el => el.scrollLeft
-            : (
-              this.rtlHasScrollBug === true
-                ? el => el.scrollWidth - el.clientWidth - el.scrollLeft
-                : el => 1 - el.scrollLeft
-            )
-        )
-    },
-
-    __setScrollPosition () {
-      return this.vertical === true
-        ? (el, value) => { el.scrollTop = value }
-        : (
-          this.$q.lang.rtl !== true
-            ? (el, value) => { el.scrollLeft = value }
-            : (
-              this.rtlHasScrollBug === true
-                ? (el, value) => { el.scrollLeft = el.scrollWidth - el.clientWidth - value }
-                : (el, value) => { el.scrollLeft = 1 - value }
-            )
-        )
+    rtlPosCorrection () {
+      return rtlHasScrollBug() === false && this.isRTL === true
     },
 
-    __getScrollOffset () {
-      return this.vertical === true
-        ? el => el.offsetTop
+    // let's speed up execution of time-sensitive scrollTowards()
+    // with a computed variable by directly applying the minimal
+    // number of instructions on get/set functions
+    posFn () {
+      return this.rtlPosCorrection === true
+        ? { get: content => Math.abs(content.scrollLeft), set: (content, pos) => { content.scrollLeft = -pos } }
         : (
-          this.$q.lang.rtl !== true || this.rtlHasScrollBug === true
-            ? el => el.offsetLeft
-            : el => el.offsetParent.offsetWidth - el.offsetLeft - el.clientWidth
+          this.vertical === true
+            ? { get: content => content.scrollTop, set: (content, pos) => { content.scrollTop = pos } }
+            : { get: content => content.scrollLeft, set: (content, pos) => { content.scrollLeft = pos } }
         )
     },
 
@@ -277,78 +208,42 @@ export default Vue.extend({
   },
 
   methods: {
-    __onFocusin (e) {
-      this.tabs.hasFocus = true
-      this.qListeners.focusin !== void 0 && this.$emit('focusin', e)
-    },
-
-    __onFocusout (e) {
-      this.tabs.hasFocus = false
-      this.qListeners.focusout !== void 0 && this.$emit('focusout', e)
-    },
-
-    __activateTab (name, setCurrent, skipEmit) {
-      if (this.tabs.current !== name) {
-        skipEmit !== true && this.$emit('input', name)
-        if (setCurrent === true || this.qListeners.input === void 0) {
-          this.__animate(this.tabs.current, name)
-          this.tabs.current = name
+    // used by children too
+    __updateModel ({ name, setCurrent, skipEmit }) {
+      if (this.currentModel !== name) {
+        if (skipEmit !== true && this.qListeners.input !== void 0) {
+          this.$emit('input', name)
         }
-      }
-    },
-
-    __activateRoute (params) {
-      if (this.bufferRoute !== this.$route && this.buffer.length > 0) {
-        clearTimeout(this.bufferTimer)
-        this.bufferTimer = void 0
-        this.buffer.length = 0
-      }
-      this.bufferRoute = this.$route
 
-      if (params !== void 0) {
-        if (params.remove === true) {
-          this.buffer = this.buffer.filter(t => t.name !== params.name)
-        }
-        else {
-          this.buffer.push(params)
+        if (setCurrent === true || this.qListeners.input === void 0) {
+          this.__animate(this.currentModel, name)
+          this.currentModel = name
         }
       }
-
-      if (this.bufferTimer === void 0) {
-        this.bufferTimer = setTimeout(() => {
-          let tabs = []
-
-          for (let i = 0; i < bufferFiltersLen && tabs.length === 0; i++) {
-            tabs = this.buffer.filter(bufferFilters[i])
-          }
-
-          tabs.sort(bufferPrioritySort)
-          this.__activateTab(tabs.length === 0 ? null : tabs[0].name, true)
-          this.buffer = this.buffer.map(bufferCleanSelected)
-          this.bufferTimer = void 0
-        }, 1)
-      }
     },
 
     __recalculateScroll () {
-      this.__nextTick(() => {
-        this._isDestroyed !== true && this.__updateContainer({
+      this.__registerScrollTick(() => {
+        this.__updateContainer({
           width: this.$el.offsetWidth,
           height: this.$el.offsetHeight
         })
       })
-
-      this.__prepareTick()
     },
 
     __updateContainer (domSize) {
+      // it can be called faster than component being initialized
+      // so we need to protect against that case
+      // (one example of such case is the docs release notes page)
+      if (this.domProps === void 0 || !this.$refs.content) { return }
+
       const
-        size = domSize[this.domProps.container],
+        size = domSize[ this.domProps.container ],
         scrollSize = Math.min(
           this.$refs.content[this.domProps.scroll],
           Array.prototype.reduce.call(
             this.$refs.content.children,
-            (acc, el) => acc + (el[this.domProps.content] || 0),
+            (acc, el) => acc + (el[ this.domProps.content ] || 0),
             0
           )
         ),
@@ -359,28 +254,28 @@ export default Vue.extend({
       }
 
       // Arrows need to be updated even if the scroll status was already true
-      scroll === true && this.$nextTick(() => this.__updateArrows())
+      scroll === true && this.__registerUpdateArrowsTick(this.__localUpdateArrows)
 
-      const justify = size < parseInt(this.breakpoint, 10)
+      const localJustify = size < parseInt(this.breakpoint, 10)
 
-      if (this.justify !== justify) {
-        this.justify = justify
+      if (this.justify !== localJustify) {
+        this.justify = localJustify
       }
     },
 
     __animate (oldName, newName) {
       const
         oldTab = oldName !== void 0 && oldName !== null && oldName !== ''
-          ? this.$children.find(tab => tab.name === oldName)
+          ? this.tabVmList.find(tab => tab.name === oldName)
           : null,
         newTab = newName !== void 0 && newName !== null && newName !== ''
-          ? this.$children.find(tab => tab.name === newName)
+          ? this.tabVmList.find(tab => tab.name === newName)
           : null
 
       if (oldTab && newTab) {
         const
-          oldEl = oldTab.$el.getElementsByClassName('q-tab__indicator')[0],
-          newEl = newTab.$el.getElementsByClassName('q-tab__indicator')[0]
+          oldEl = oldTab.$refs.tabIndicator,
+          newEl = newTab.$refs.tabIndicator
 
         clearTimeout(this.animateTimer)
 
@@ -398,7 +293,7 @@ export default Vue.extend({
           : `translate3d(${oldPos.left - newPos.left}px,0,0) scale3d(${newPos.width ? oldPos.width / newPos.width : 1},1,1)`
 
         // allow scope updates to kick in (QRouteTab needs more time)
-        this.$nextTick(() => {
+        this.__registerAnimateTick(() => {
           this.animateTimer = setTimeout(() => {
             newEl.style.transition = 'transform .25s cubic-bezier(.4, 0, .2, 1)'
             newEl.style.transform = 'none'
@@ -407,72 +302,129 @@ export default Vue.extend({
       }
 
       if (newTab && this.scrollable === true) {
-        this.__scrollToTab(newTab.$el, void 0, true)
+        this.__scrollToTabEl(newTab.$el)
       }
-      else {
-        this.__updateArrows()
+    },
+
+    __scrollToTabEl (el) {
+      const
+        contentRef = this.$refs.content,
+        { left, width, top, height } = contentRef.getBoundingClientRect(),
+        newPos = el.getBoundingClientRect()
+
+      let offset = this.vertical === true ? newPos.top - top : newPos.left - left
+
+      if (offset < 0) {
+        contentRef[ this.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.floor(offset)
+        this.__localUpdateArrows()
+        return
+      }
+
+      offset += this.vertical === true ? newPos.height - height : newPos.width - width
+      if (offset > 0) {
+        contentRef[ this.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.ceil(offset)
+        this.__localUpdateArrows()
       }
     },
 
     __updateArrowsFn () {
-      const { content } = this.$refs
-
-      if (content !== void 0) {
+      const content = this.$refs.content
+      if (content !== null) {
         const
           rect = content.getBoundingClientRect(),
-          pos = this.__getScrollPosition(content)
+          pos = this.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft)
 
-        this.startArrow = pos > (this.isRTL === true ? 1 : 0)
-        this.endArrow = this.vertical === true
-          ? Math.ceil(pos + rect.height) < content.scrollHeight
-          : Math.ceil(pos + rect.width) < content.scrollWidth
+        if (this.isRTL === true) {
+          this.leftArrow = Math.ceil(pos + rect.width) < content.scrollWidth - 1
+          this.rightArrow = pos > 0
+        }
+        else {
+          this.leftArrow = pos > 0
+          this.rightArrow = this.vertical === true
+            ? Math.ceil(pos + rect.height) < content.scrollHeight
+            : Math.ceil(pos + rect.width) < content.scrollWidth
+        }
       }
     },
 
-    __animScrollTo (value, onEnd) {
+    __animScrollTo (value) {
       this.__stopAnimScroll()
-
-      this.__onAnimScrollEnd = onEnd
-      this.__scrollTowards(value)
-
       this.scrollTimer = setInterval(() => {
-        if (this.__scrollTowards(value)) {
+        if (this.__scrollTowards(value) === true) {
           this.__stopAnimScroll()
         }
       }, 5)
     },
 
     __scrollToStart () {
-      this.__animScrollTo(0)
+      this.__animScrollTo(this.rtlPosCorrection === true ? Number.MAX_SAFE_INTEGER : 0)
     },
 
     __scrollToEnd () {
-      this.__animScrollTo(Number.MAX_SAFE_INTEGER)
+      this.__animScrollTo(this.rtlPosCorrection === true ? 0 : Number.MAX_SAFE_INTEGER)
     },
 
     __stopAnimScroll () {
       clearInterval(this.scrollTimer)
+    },
 
-      if (this.__onAnimScrollEnd !== void 0) {
-        this.__onAnimScrollEnd()
-        this.__onAnimScrollEnd = void 0
+    // used by children
+    __onKbdNavigate (keyCode, fromEl) {
+      const tabs = Array.prototype.filter.call(
+        this.$refs.content.children,
+        el => el === fromEl || (el.matches && el.matches('.q-tab.q-focusable') === true)
+      )
+
+      const len = tabs.length
+      if (len === 0) { return }
+
+      if (keyCode === 36) { // Home
+        this.__scrollToTabEl(tabs[ 0 ])
+        tabs[ 0 ].focus()
+        return true
+      }
+      if (keyCode === 35) { // End
+        this.__scrollToTabEl(tabs[ len - 1 ])
+        tabs[ len - 1 ].focus()
+        return true
+      }
+
+      const dirPrev = keyCode === (this.vertical === true ? 38 /* ArrowUp */ : 37 /* ArrowLeft */)
+      const dirNext = keyCode === (this.vertical === true ? 40 /* ArrowDown */ : 39 /* ArrowRight */)
+
+      const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0)
+
+      if (dir !== void 0) {
+        const rtlDir = this.isRTL === true ? -1 : 1
+        const index = tabs.indexOf(fromEl) + dir * rtlDir
+
+        if (index >= 0 && index < len) {
+          this.__scrollToTabEl(tabs[ index ])
+          tabs[ index ].focus({ preventScroll: true })
+        }
+
+        return true
       }
     },
 
     __scrollTowards (value) {
-      const content = this.$refs.content
-      const max = this.vertical === true ? content.scrollHeight - content.offsetHeight : content.scrollWidth - content.offsetWidth
-
-      let pos = this.__getScrollPosition(content)
-      let done = false
+      const
+        content = this.$refs.content,
+        { get, set } = this.posFn
 
-      value = Math.max(0, Math.min(max, value))
+      let
+        done = false,
+        pos = get(content)
 
       const direction = value < pos ? -1 : 1
 
       pos += direction * 5
 
-      if (
+      if (pos < 0) {
+        done = true
+        pos = 0
+      }
+      else if (
         (direction === -1 && pos <= value) ||
         (direction === 1 && pos >= value)
       ) {
@@ -480,140 +432,272 @@ export default Vue.extend({
         pos = value
       }
 
-      this.__setScrollPosition(content, pos)
-      this.__updateArrows()
+      set(content, pos)
+      this.__localUpdateArrows()
 
       return done
     },
 
-    __scrollToTab (tab, alignEnd, skipFocus) {
-      if (this.$refs.content === void 0) {
-        return
-      }
+    // do not use directly; use __verifyRouteModel() instead
+    __updateActiveRoute () {
+      let name = null, bestScore = getDefaultBestScore()
 
-      const content = this.$refs.content
-      const startContent = this.__getScrollPosition(content)
-      const sizeContent = this.vertical === true ? content.offsetHeight : content.offsetWidth
-      const sizeScroll = this.vertical === true ? content.scrollHeight : content.scrollWidth
+      const vmList = this.tabVmList.filter(tab => tab.hasRouterLink === true)
+      const vmLen = vmList.length
 
-      const startTab = this.__getScrollOffset(tab)
-      const endTab = startTab + (this.vertical === true ? tab.offsetHeight : tab.offsetWidth)
+      const { query: currentQuery } = this.$route
+      const currentQueryLen = Object.keys(currentQuery).length
 
-      const startsBefore = startTab < startContent
-      const endsAfter = endTab > startContent + sizeContent
+      for (let tabIndex = 0; tabIndex < vmLen; tabIndex++) {
+        const tab = vmList[tabIndex]
+        const exact = tab.exact === true
 
-      if (startsBefore !== true && endsAfter !== true) {
-        alignEnd = void 0
-      }
-      else if (alignEnd === void 0) {
-        if (endTab >= sizeScroll - 1) {
-          alignEnd = true
+        // if a) it doesn't respect the active/exact active status
+        // or b) we already found an exact match and this one isn't set as exact
+        // then we don't deal with it
+        if (
+          tab[ exact === true ? 'linkIsExactActive' : 'linkIsActive' ] !== true ||
+          (bestScore.exact === true && exact !== true)
+        ) {
+          continue
         }
-        else if (startsBefore === true || (endsAfter === true && startTab < endTab - sizeContent)) {
-          alignEnd = false
+
+        const { route, href } = tab.resolvedLink
+        const { matched, query, hash } = route
+        const redirected = route.redirectedFrom !== void 0
+
+        if (exact === true) {
+          // hey, we found the perfect match; no more searching!
+          if (redirected === false) {
+            name = tab.name
+            break
+          }
+
+          if (bestScore.exact === false) {
+            // we reset values so we can discard previous non-exact matches
+            // and so we can register this exact one below
+            bestScore = getDefaultBestScore()
+          }
         }
-        else if (startsBefore !== endsAfter) {
-          alignEnd = endsAfter
+
+        // if best is non-redirected and this one is redirected
+        // then this one is inferior so we don't care about it
+        if (bestScore.redirected === false && redirected === true) {
+          continue
         }
-      }
 
-      if (alignEnd !== void 0) {
-        this.__animScrollTo(
-          alignEnd === true ? (endTab >= sizeScroll - 1 ? sizeScroll : endTab - sizeContent) : (startTab <= 1 ? 0 : startTab),
-          skipFocus !== true
-            ? () => {
-              setTimeout(() => {
-                tab && tab.focus()
-              })
-            }
-            : void 0
-        )
+        const queryLen = Object.keys(query).length
+
+        if (
+          // if it's exact it already perfectly includes current query
+          // so no point in computing it
+          exact === false &&
+          queryLen !== 0 &&
+          hasQueryIncluded(query, currentQuery) === false
+        ) {
+          // it has query and it doesn't includes the current one
+          continue
+        }
+
+        const newScore = {
+          exact,
+          redirected,
+          matchedLen: matched.length,
+          queryDiff: exact === true
+            ? 0 // avoid computing as it's 0 anyway
+            : currentQueryLen - queryLen,
+          hrefLen: href.length - hash.length
+        }
+
+        if (newScore.matchedLen > bestScore.matchedLen) {
+          // it matches more routes so it's more specific so we set it as current champion
+          name = tab.name
+          bestScore = newScore
+          continue
+        }
+        else if (newScore.matchedLen !== bestScore.matchedLen) {
+          // it matches less routes than the current champion so we discard it
+          continue
+        }
+
+        if (newScore.queryDiff < bestScore.queryDiff) {
+          // query is closer to the current one so we set it as current champion
+          name = tab.name
+          bestScore = newScore
+          continue
+        }
+        else if (newScore.queryDiff !== bestScore.queryDiff) {
+          continue
+        }
+
+        if (newScore.hrefLen > bestScore.hrefLen) {
+          // href is lengthier so it's more specific so we set it as current champion
+          name = tab.name
+          bestScore = newScore
+        }
       }
-      else if (skipFocus !== true) {
-        tab.focus()
+
+      if (
+        name === null &&
+        this.tabVmList.some(tab => tab.hasRouterLink === void 0 && tab.name === this.currentModel) === true
+      ) {
+        // we shouldn't interfere if non-route tab is active
+        return
       }
+
+      this.__updateModel({ name, setCurrent: true })
     },
 
-    __onKbdNavigate (keyCode, fromEl) {
-      const matchTab = el => el === fromEl || (el.matches && el.matches('.q-tab.q-focusable') === true)
-      const tabs = Array.prototype.filter.call(this.$refs.content.children, matchTab)
-      const tabsLength = tabs.length
+    __onFocusin (e) {
+      this.__removeFocusTimeout()
 
-      if (tabsLength === 0) {
-        return
-      }
+      if (
+        this.hasFocus !== true &&
+        this.$el &&
+        e.target &&
+        typeof e.target.closest === 'function'
+      ) {
+        const tab = e.target.closest('.q-tab')
 
-      if (keyCode === 36) { // Home
-        if (tabs[0].contains(document.activeElement) === true) {
-          return false
+        // if the target is contained by a QTab/QRouteTab
+        // (it might be other elements focused, like additional QBtn)
+        if (tab && this.$el.contains(tab) === true) {
+          this.hasFocus = true
+
+          if (this.scrollable === true) {
+            this.__scrollToTabEl(tab)
+          }
         }
+      }
 
-        this.__scrollToTab(tabs[0], false)
-        this.__recalculateScroll()
+      this.qListeners.focusin !== void 0 && this.$emit('focusin', e)
+    },
 
-        return true
+    __onFocusout (e) {
+      this.__registerFocusTimeout(() => { this.hasFocus = false }, 30)
+      this.qListeners.focusout !== void 0 && this.$emit('focusout', e)
+    },
+
+    // used by children
+    __verifyRouteModel () {
+      if (this.avoidRouteWatcher === false) {
+        this.__registerScrollToTabTimeout(this.__updateActiveRoute)
       }
-      if (keyCode === 35) { // End
-        if (tabs[tabsLength - 1].contains(document.activeElement) === true) {
-          return false
+      else {
+        this.__removeScrollToTabTimeout()
+      }
+    },
+
+    __watchRoute () {
+      if (this.unwatchRoute === void 0) {
+        const unwatch = this.$watch(() => this.$route.fullPath, this.__verifyRouteModel)
+        this.unwatchRoute = () => {
+          unwatch()
+          this.unwatchRoute = void 0
         }
+      }
+    },
 
-        this.__scrollToTab(tabs[tabsLength - 1], true)
-        this.__recalculateScroll()
+    // used by children
+    __registerTab (tabVm) {
+      // we avoid setting tabVmList in data() as this would
+      // make the whole vm reactive
+      this.tabVmList.push(tabVm)
+      // ...so we extract only the needed stuff out of it
+      // into data() defined tabNameList
+      this.tabNameList.push(
+        injectProp({}, 'name', () => tabVm.name)
+      )
 
-        return true
+      this.__recalculateScroll()
+
+      // if it's a QTab
+      if (tabVm.hasRouterLink === void 0) {
+        // we should position to the currently active tab (if any)
+        this.__registerScrollToTabTimeout(() => {
+          if (this.scrollable === true) {
+            const value = this.currentModel
+            const newTab = value !== void 0 && value !== null && value !== ''
+              ? this.tabVmList.find(tab => tab.name === value)
+              : null
+
+            newTab && this.__scrollToTabEl(newTab.$el)
+          }
+        })
       }
+      // else if it's a QRouteTab with a valid link
+      else {
+        this.__watchRoute()
 
-      const dirPrev = (this.vertical === true && keyCode === 38 /* ArrowUp */) ||
-        (this.vertical !== true && keyCode === 37 /* ArrowLeft */)
-      const dirNext = (this.vertical === true && keyCode === 40 /* ArrowDown */) ||
-        (this.vertical !== true && keyCode === 39 /* ArrowRight */)
-      const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0)
+        if (tabVm.hasRouterLink === true) {
+          this.__verifyRouteModel()
+        }
+      }
+    },
 
-      if (dir !== void 0) {
-        const rtlDir = this.isRTL === true ? -1 : 1
-        const index = tabs.indexOf(fromEl) + dir * rtlDir
+    /*
+     * Vue has an aggressive diff (in-place replacement) so we cannot
+     * ensure that the instance getting destroyed is the actual tab
+     * reported here. As a result, we cannot use its name or check
+     * if it's a route one to make the necessary updates. We need to
+     * always check the existing list again and infer the changes.
+     */
+    // used by children
+    __unregisterTab (tabVm) {
+      const index = this.tabVmList.indexOf(tabVm)
 
-        if (
-          index < 0 ||
-          index >= tabsLength ||
-          tabs[index].contains(document.activeElement) === true
-        ) {
-          return false
-        }
+      this.tabVmList.splice(index, 1)
+      this.tabNameList.splice(index, 1)
 
-        this.__scrollToTab(tabs[index], dir === rtlDir)
-        this.__recalculateScroll()
+      this.__recalculateScroll()
 
-        return true
+      // if we're watching route and this tab is a QRouteTab
+      if (this.unwatchRoute !== void 0 && tabVm.hasRouterLink !== void 0) {
+        // unwatch route if we don't have any QRouteTabs left
+        if (this.tabVmList.every(tab => tab.hasRouterLink === void 0) === true) {
+          this.unwatchRoute()
+        }
+
+        // then update model
+        this.__verifyRouteModel()
       }
+    },
+
+    __cleanup () {
+      clearTimeout(this.animateTimer)
+      this.__stopAnimScroll()
+      this.unwatchRoute !== void 0 && this.unwatchRoute()
     }
   },
 
   created () {
-    this.buffer = []
+    this.__useTick('__registerScrollTick')
+    this.__useTick('__registerUpdateArrowsTick')
+    this.__useTick('__registerAnimateTick')
 
-    this.__updateArrows = this.arrowsEnabled === true
-      ? this.__updateArrowsFn
-      : noop
-  },
+    this.__useTimeout('__registerFocusTimeout', '__removeFocusTimeout')
+    this.__useTimeout('__registerScrollToTabTimeout', '__removeScrollToTabTimeout')
 
-  mounted () {
-    this.rtlHasScrollBug = rtlHasScrollBug()
+    Object.assign(this, {
+      tabVmList: [],
+      __localUpdateArrows: this.arrowsEnabled === true
+        ? this.__updateArrowsFn
+        : noop
+    })
   },
 
   activated () {
-    if (this.shouldActivate !== true) { return }
+    this.hadRouteWatcher === true && this.__watchRoute()
     this.__recalculateScroll()
   },
 
   deactivated () {
-    this.shouldActivate = true
+    this.hadRouteWatcher = this.unwatchRoute !== void 0
+    this.__cleanup()
   },
 
   beforeDestroy () {
-    clearTimeout(this.bufferTimer)
-    clearTimeout(this.animateTimer)
+    this.__cleanup()
   },
 
   render (h) {
@@ -624,7 +708,6 @@ export default Vue.extend({
 
       h('div', {
         ref: 'content',
-        staticClass: 'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position',
         class: this.innerClass,
         on: this.arrowsEnabled === true ? cache(this, 'scroll', { scroll: this.__updateArrowsFn }) : void 0
       }, slot(this, 'default'))
@@ -632,34 +715,33 @@ export default Vue.extend({
 
     this.arrowsEnabled === true && child.push(
       h(QIcon, {
-        staticClass: 'q-tabs__arrow q-tabs__arrow--start absolute q-tab__icon',
-        class: this.startArrow === true ? '' : 'q-tabs__arrow--faded',
-        props: { name: this.arrowIcons.start },
+        class: 'q-tabs__arrow q-tabs__arrow--start absolute q-tab__icon' +
+            (this.leftArrow === true ? '' : ' q-tabs__arrow--faded'),
+        props: { name: this.leftIcon || this.$q.iconSet.tabs[ this.vertical === true ? 'up' : 'left' ] },
         on: cache(this, 'onS', {
-          mousedown: this.__scrollToStart,
-          touchstart: this.__scrollToStart,
-          mouseup: this.__stopAnimScroll,
-          mouseleave: this.__stopAnimScroll,
-          touchend: this.__stopAnimScroll
+          '&mousedown': this.__scrollToStart,
+          '&touchstart': this.__scrollToStart,
+          '&mouseup': this.__stopAnimScroll,
+          '&mouseleave': this.__stopAnimScroll,
+          '&touchend': this.__stopAnimScroll
         })
       }),
 
       h(QIcon, {
-        staticClass: 'q-tabs__arrow q-tabs__arrow--end absolute q-tab__icon',
-        class: this.endArrow === true ? '' : 'q-tabs__arrow--faded',
-        props: { name: this.arrowIcons.end },
+        class: 'q-tabs__arrow q-tabs__arrow--end absolute q-tab__icon' +
+            (this.rightArrow === true ? '' : ' q-tabs__arrow--faded'),
+        props: { name: this.rightIcon || this.$q.iconSet.tabs[ this.vertical === true ? 'down' : 'right' ] },
         on: cache(this, 'onE', {
-          mousedown: this.__scrollToEnd,
-          touchstart: this.__scrollToEnd,
-          mouseup: this.__stopAnimScroll,
-          mouseleave: this.__stopAnimScroll,
-          touchend: this.__stopAnimScroll
+          '&mousedown': this.__scrollToEnd,
+          '&touchstart': this.__scrollToEnd,
+          '&mouseup': this.__stopAnimScroll,
+          '&mouseleave': this.__stopAnimScroll,
+          '&touchend': this.__stopAnimScroll
         })
       })
     )
 
     return h('div', {
-      staticClass: 'q-tabs row no-wrap items-center',
       class: this.classes,
       on: this.onEvents,
       attrs: { role: 'tablist' }