quasar 2.8.4 → 2.9.0

package/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, onDeactivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, onActivated, onDeactivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -11,7 +11,6 @@ import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
 import { rtlHasScrollBug } from '../../utils/private/rtl.js'
-import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -22,7 +21,6 @@ function getIndicatorClass (color, top, vertical) {
 }
 
 const alignValues = [ 'left', 'center', 'right', 'justify' ]
-const emptyFn = () => {}
 
 export default createComponent({
   name: 'QTabs',
@@ -68,12 +66,15 @@ export default createComponent({
   },
 
   setup (props, { slots, emit }) {
-    const vm = getCurrentInstance()
-    const { proxy: { $q } } = vm
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
 
     const { registerTick: registerScrollTick } = useTick()
+    const { registerTick: registerUpdateArrowsTick } = useTick()
+    const { registerTick: registerAnimateTick } = useTick()
+
     const { registerTimeout: registerFocusTimeout, removeTimeout: removeFocusTimeout } = useTimeout()
-    const { registerTimeout } = useTimeout()
+    const { registerTimeout: registerScrollToTabTimeout, removeTimeout: removeScrollToTabTimeout } = useTimeout()
 
     const rootRef = ref(null)
     const contentRef = ref(null)
@@ -88,10 +89,11 @@ export default createComponent({
       $q.platform.is.desktop === true || props.mobileArrows === true
     )
 
-    const tabList = []
+    const tabDataList = []
+    const tabDataListLen = ref(0)
     const hasFocus = ref(false)
 
-    let localFromRoute = false, animateTimer, scrollTimer, unwatchRoute
+    let animateTimer, scrollTimer, unwatchRoute
     let localUpdateArrows = arrowsEnabled.value === true
       ? updateArrowsFn
       : noop
@@ -110,6 +112,19 @@ export default createComponent({
       noCaps: props.noCaps
     }))
 
+    const hasActiveTab = computed(() => {
+      const len = tabDataListLen.value
+      const val = currentModel.value
+
+      for (let i = 0; i < len; i++) {
+        if (tabDataList[ i ].name.value === val) {
+          return true
+        }
+      }
+
+      return false
+    })
+
     const alignClass = computed(() => {
       const align = scrollable.value === true
         ? 'left'
@@ -151,7 +166,7 @@ export default createComponent({
     })
 
     watch(() => props.outsideArrows, () => {
-      nextTick(recalculateScroll())
+      recalculateScroll()
     })
 
     watch(arrowsEnabled, v => {
@@ -159,12 +174,15 @@ export default createComponent({
         ? updateArrowsFn
         : noop
 
-      nextTick(recalculateScroll())
+      recalculateScroll()
     })
 
     function updateModel ({ name, setCurrent, skipEmit, fromRoute }) {
       if (currentModel.value !== name) {
-        skipEmit !== true && emit('update:modelValue', name)
+        if (skipEmit !== true && props[ 'onUpdate:modelValue' ] !== void 0) {
+          emit('update:modelValue', name)
+        }
+
         if (
           setCurrent === true
           || props[ 'onUpdate:modelValue' ] === void 0
@@ -173,20 +191,14 @@ export default createComponent({
           currentModel.value = name
         }
       }
-
-      if (fromRoute !== void 0) {
-        localFromRoute = fromRoute
-      }
     }
 
     function recalculateScroll () {
       registerScrollTick(() => {
-        if (vmIsDestroyed(vm) === false) {
-          updateContainer({
-            width: rootRef.value.offsetWidth,
-            height: rootRef.value.offsetHeight
-          })
-        }
+        updateContainer({
+          width: rootRef.value.offsetWidth,
+          height: rootRef.value.offsetHeight
+        })
       })
     }
 
@@ -208,27 +220,21 @@ export default createComponent({
         ),
         scroll = size > 0 && scrollSize > size // when there is no tab, in Chrome, size === 0 and scrollSize === 1
 
-      if (scrollable.value !== scroll) {
-        scrollable.value = scroll
-      }
+      scrollable.value = scroll
 
       // Arrows need to be updated even if the scroll status was already true
-      scroll === true && nextTick(localUpdateArrows)
+      scroll === true && registerUpdateArrowsTick(localUpdateArrows)
 
-      const localJustify = size < parseInt(props.breakpoint, 10)
-
-      if (justify.value !== localJustify) {
-        justify.value = localJustify
-      }
+      justify.value = size < parseInt(props.breakpoint, 10)
     }
 
     function animate (oldName, newName) {
       const
         oldTab = oldName !== void 0 && oldName !== null && oldName !== ''
-          ? tabList.find(tab => tab.name.value === oldName)
+          ? tabDataList.find(tab => tab.name.value === oldName)
           : null,
         newTab = newName !== void 0 && newName !== null && newName !== ''
-          ? tabList.find(tab => tab.name.value === newName)
+          ? tabDataList.find(tab => tab.name.value === newName)
           : null
 
       if (oldTab && newTab) {
@@ -252,7 +258,7 @@ export default createComponent({
           : `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)
-        nextTick(() => {
+        registerAnimateTick(() => {
           animateTimer = setTimeout(() => {
             newEl.style.transition = 'transform .25s cubic-bezier(.4, 0, .2, 1)'
             newEl.style.transform = 'none'
@@ -307,8 +313,6 @@ export default createComponent({
 
     function animScrollTo (value) {
       stopAnimScroll()
-      scrollTowards(value)
-
       scrollTimer = setInterval(() => {
         if (scrollTowards(value) === true) {
           stopAnimScroll()
@@ -339,10 +343,12 @@ export default createComponent({
 
       if (keyCode === 36) { // Home
         scrollToTabEl(tabs[ 0 ])
+        tabs[ 0 ].focus()
         return true
       }
       if (keyCode === 35) { // End
         scrollToTabEl(tabs[ len - 1 ])
+        tabs[ len - 1 ].focus()
         return true
       }
 
@@ -408,77 +414,113 @@ export default createComponent({
       return done
     }
 
-    function getRouteList () {
-      return tabList.filter(tab => tab.routerProps !== void 0 && tab.routerProps.hasRouterLink.value === true)
+    function hasQueryIncluded (targetQuery, matchingQuery) {
+      for (const key in targetQuery) {
+        if (targetQuery[ key ] !== matchingQuery[ key ]) {
+          return false
+        }
+      }
+
+      return true
     }
 
     // do not use directly; use verifyRouteModel() instead
     function updateActiveRoute () {
-      let name = null, wasActive = localFromRoute
+      let name = null, bestScore = { matchedLen: 0, queryDiff: 9999, hrefLen: 0 }
 
-      const
-        best = { matchedLen: 0, hrefLen: 0, exact: false, found: false },
-        { hash } = vm.proxy.$route,
-        model = currentModel.value
-
-      let wasItActive = wasActive === true
-        ? emptyFn
-        : tab => {
-          if (model === tab.name.value) {
-            wasActive = true
-            wasItActive = emptyFn
-          }
-        }
+      const list = tabDataList.filter(tab => tab.routeData !== void 0 && tab.routeData.hasRouterLink.value === true)
+      const { hash: currentHash, query: currentQuery } = proxy.$route
+      const currentQueryLen = Object.keys(currentQuery).length
 
-      const tabList = getRouteList()
+      // Vue Router does not keep account of hash & query when matching
+      // so we're doing this as well
 
-      for (const tab of tabList) {
-        const exact = tab.routerProps.exact.value === true
+      for (const tab of list) {
+        const exact = tab.routeData.exact.value === true
 
-        if (
-          tab.routerProps[ exact === true ? 'linkIsExactActive' : 'linkIsActive' ].value !== true
-          || (best.exact === true && exact !== true)
-        ) {
-          wasItActive(tab)
+        if (tab.routeData[ exact === true ? 'linkIsExactActive' : 'linkIsActive' ].value !== true) {
+          // it cannot match anything as it's not active nor exact-active
           continue
         }
 
-        const
-          linkRoute = tab.routerProps.linkRoute.value,
-          tabHash = linkRoute.hash
+        const { hash, query, matched, href } = tab.routeData.resolvedLink.value
+        const queryLen = Object.keys(query).length
 
-        // Vue Router does not match the hash too, even if link is set to "exact"
         if (exact === true) {
-          if (hash === tabHash) {
-            name = tab.name.value
-            break
+          if (hash !== currentHash) {
+            // it's set to exact but it doesn't matches the hash
+            continue
           }
-          else if (hash !== '' && tabHash !== '') {
-            wasItActive(tab)
+
+          if (
+            queryLen !== currentQueryLen
+            || hasQueryIncluded(currentQuery, query) === false
+          ) {
+            // it's set to exact but it doesn't matches the query
             continue
           }
+
+          // yey, we found the perfect match (route + hash + query)
+          name = tab.name.value
+          break
         }
 
-        const
-          matchedLen = linkRoute.matched.length,
-          hrefLen = linkRoute.href.length - tabHash.length
+        if (hash !== '' && hash !== currentHash) {
+          // it has hash and it doesn't matches
+          continue
+        }
 
         if (
-          matchedLen === best.matchedLen
-            ? hrefLen > best.hrefLen
-            : matchedLen > best.matchedLen
+          queryLen !== 0
+          && hasQueryIncluded(query, currentQuery) === false
         ) {
+          // it has query and it doesn't includes the current one
+          continue
+        }
+
+        const newScore = {
+          matchedLen: matched.length,
+          queryDiff: 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.value
-          Object.assign(best, { matchedLen, hrefLen, exact })
+          bestScore = newScore
+          continue
+        }
+        else if (newScore.matchedLen !== bestScore.matchedLen) {
+          // it matches less routes than the current champion so we discard it
           continue
         }
 
-        wasItActive(tab)
+        if (newScore.queryDiff < bestScore.queryDiff) {
+          // query is closer to the current one so we set it as current champion
+          name = tab.name.value
+          bestScore = newScore
+        }
+        else if (newScore.queryDiff !== bestScore.queryDiff) {
+          // it matches less routes than the current champion so we discard it
+          continue
+        }
+
+        if (newScore.hrefLen > bestScore.hrefLen) {
+          // href is lengthier so it's more specific so we set it as current champion
+          name = tab.name.value
+          bestScore = newScore
+        }
       }
 
-      if (wasActive === true || name !== null) {
-        updateModel({ name, setCurrent: true, fromRoute: true })
+      if (
+        name === null
+        && tabDataList.some(tab => tab.routeData === void 0 && tab.name.value === currentModel.value) === true
+      ) {
+        // we shouldn't interfere if non-route tab is active
+        return
       }
+
+      updateModel({ name, setCurrent: true })
     }
 
     function onFocusin (e) {
@@ -496,6 +538,7 @@ export default createComponent({
         // (it might be other elements focused, like additional QBtn)
         if (tab && rootRef.value.contains(tab) === true) {
           hasFocus.value = true
+          scrollable.value === true && scrollToTabEl(tab)
         }
       }
     }
@@ -505,22 +548,52 @@ export default createComponent({
     }
 
     function verifyRouteModel () {
-      if ($tabs.avoidRouteWatcher !== true) {
-        registerTimeout(updateActiveRoute)
+      if ($tabs.avoidRouteWatcher === false) {
+        registerScrollToTabTimeout(updateActiveRoute)
+      }
+      else {
+        removeScrollToTabTimeout()
       }
     }
 
-    function registerTab (getTab) {
-      tabList.push(getTab)
+    function watchRoute () {
+      if (unwatchRoute === void 0) {
+        const unwatch = watch(() => proxy.$route.fullPath, verifyRouteModel)
+        unwatchRoute = () => {
+          unwatch()
+          unwatchRoute = void 0
+        }
+      }
+    }
 
-      const routeList = getRouteList()
+    function registerTab (tabData) {
+      tabDataList.push(tabData)
+      tabDataListLen.value++
 
-      if (routeList.length > 0) {
-        if (unwatchRoute === void 0) {
-          unwatchRoute = watch(() => vm.proxy.$route, verifyRouteModel)
-        }
+      recalculateScroll()
 
-        verifyRouteModel()
+      // if it's a QTab
+      if (tabData.routeData === void 0) {
+        // we should position to the currently active tab (if any)
+        registerScrollToTabTimeout(() => {
+          if (scrollable.value === true) {
+            const value = currentModel.value
+            const newTab = value !== void 0 && value !== null && value !== ''
+              ? tabDataList.find(tab => tab.name.value === value)
+              : null
+
+            newTab && scrollToTabEl(newTab.rootRef.value)
+          }
+        })
+      }
+      // else if it's a QRouteTab with a valid link
+      else {
+        // start watching route
+        watchRoute()
+
+        if (tabData.routeData.hasRouterLink.value === true) {
+          verifyRouteModel()
+        }
       }
     }
 
@@ -532,16 +605,18 @@ export default createComponent({
      * always check the existing list again and infer the changes.
      */
     function unregisterTab (tabData) {
-      tabList.splice(tabList.indexOf(tabData), 1)
+      tabDataList.splice(tabDataList.indexOf(tabData), 1)
+      tabDataListLen.value--
 
-      if (unwatchRoute !== void 0) {
-        const routeList = getRouteList()
+      recalculateScroll()
 
-        if (routeList.length === 0) {
+      if (unwatchRoute !== void 0 && tabData.routeData !== void 0) {
+        // unwatch route if we don't have any QRouteTabs left
+        if (tabDataList.every(tab => tab.routeData === void 0) === true) {
           unwatchRoute()
-          unwatchRoute = void 0
         }
 
+        // then update model
         verifyRouteModel()
       }
     }
@@ -550,33 +625,38 @@ export default createComponent({
       currentModel,
       tabProps,
       hasFocus,
+      hasActiveTab,
 
       registerTab,
       unregisterTab,
 
       verifyRouteModel,
       updateModel,
-      recalculateScroll,
       onKbdNavigate,
 
-      avoidRouteWatcher: false
+      avoidRouteWatcher: false // false | string (uid)
     }
 
     provide(tabsKey, $tabs)
 
-    onBeforeUnmount(() => {
+    function cleanup () {
       clearTimeout(animateTimer)
+      stopAnimScroll()
       unwatchRoute !== void 0 && unwatchRoute()
-    })
+    }
+
+    let hadRouteWatcher
 
-    let shouldActivate = false
+    onBeforeUnmount(cleanup)
 
     onDeactivated(() => {
-      shouldActivate = true
+      hadRouteWatcher = unwatchRoute !== void 0
+      cleanup()
     })
 
     onActivated(() => {
-      shouldActivate === true && recalculateScroll()
+      hadRouteWatcher === true && watchRoute()
+      recalculateScroll()
     })
 
     return () => {
@@ -595,22 +675,22 @@ export default createComponent({
           class: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon'
             + (leftArrow.value === true ? '' : ' q-tabs__arrow--faded'),
           name: props.leftIcon || $q.iconSet.tabs[ props.vertical === true ? 'up' : 'left' ],
-          onMousedown: scrollToStart,
+          onMousedownPassive: scrollToStart,
           onTouchstartPassive: scrollToStart,
-          onMouseup: stopAnimScroll,
-          onMouseleave: stopAnimScroll,
-          onTouchend: stopAnimScroll
+          onMouseupPassive: stopAnimScroll,
+          onMouseleavePassive: stopAnimScroll,
+          onTouchendPassive: stopAnimScroll
         }),
 
         h(QIcon, {
           class: 'q-tabs__arrow q-tabs__arrow--right absolute q-tab__icon'
             + (rightArrow.value === true ? '' : ' q-tabs__arrow--faded'),
           name: props.rightIcon || $q.iconSet.tabs[ props.vertical === true ? 'down' : 'right' ],
-          onMousedown: scrollToEnd,
+          onMousedownPassive: scrollToEnd,
           onTouchstartPassive: scrollToEnd,
-          onMouseup: stopAnimScroll,
-          onMouseleave: stopAnimScroll,
-          onTouchend: stopAnimScroll
+          onMouseupPassive: stopAnimScroll,
+          onMouseleavePassive: stopAnimScroll,
+          onTouchendPassive: stopAnimScroll
         })
       )
 

package/src/components/tabs/use-tab.js

@@ -8,8 +8,10 @@ import { hMergeSlot } from '../../utils/private/render.js'
 import { isKeyCode, shouldIgnoreKey } from '../../utils/private/key-composition.js'
 import { tabsKey } from '../../utils/private/symbols.js'
 import { stopAndPrevent } from '../../utils/event.js'
+import uid from '../../utils/uid.js'
+import { isDeepEqual } from '../../utils/is.js'
 
-let uid = 0
+let id = 0
 
 export const useTabEmits = [ 'click', 'keydown' ]
 
@@ -22,7 +24,7 @@ export const useTabProps = {
 
   name: {
     type: [ Number, String ],
-    default: () => `t_${ uid++ }`
+    default: () => `t_${ id++ }`
   },
 
   noCaps: Boolean,
@@ -38,7 +40,7 @@ export const useTabProps = {
   }
 }
 
-export default function (props, slots, emit, routerProps) {
+export default function (props, slots, emit, routeData) {
   const $tabs = inject(tabsKey, () => {
     console.error('QTab/QRouteTab component needs to be child of QTabs')
   })
@@ -75,7 +77,7 @@ export default function (props, slots, emit, routerProps) {
     + (props.icon && props.label && $tabs.tabProps.value.inlineLabel === false ? ' q-tab--full' : '')
     + (props.noCaps === true || $tabs.tabProps.value.noCaps === true ? ' q-tab--no-caps' : '')
     + (props.disable === true ? ' disabled' : ' q-focusable q-hoverable cursor-pointer')
-    + (routerProps !== void 0 && routerProps.linkClass.value !== '' ? ` ${ routerProps.linkClass.value }` : '')
+    + (routeData !== void 0 ? routeData.linkClass.value : '')
   )
 
   const innerClass = computed(() =>
@@ -85,53 +87,77 @@ export default function (props, slots, emit, routerProps) {
   )
 
   const tabIndex = computed(() => (
-    props.disable === true || $tabs.hasFocus.value === true
+    (
+      props.disable === true
+      || $tabs.hasFocus.value === true
+      || (isActive.value === false && $tabs.hasActiveTab.value === true)
+    )
       ? -1
       : props.tabindex || 0
   ))
 
   function onClick (e, keyboard) {
-    keyboard !== true && blurTargetRef.value !== null && blurTargetRef.value.focus()
-
-    if (props.disable !== true) {
-      let go
+    if (keyboard !== true && blurTargetRef.value !== null) {
+      blurTargetRef.value.focus()
+    }
 
-      if (routerProps !== void 0) {
-        if (routerProps.hasRouterLink.value === true) {
-          go = () => {
-            e.__qNavigate = true
-            $tabs.avoidRouteWatcher = true
+    if (props.disable === true) {
+      // we should hinder native navigation though
+      if (routeData !== void 0 && routeData.hasRouterLink.value === true) {
+        stopAndPrevent(e)
+      }
+      return
+    }
 
-            const res = routerProps.navigateToRouterLink(e)
+    // do we have a QTab?
+    if (routeData === void 0) {
+      $tabs.updateModel({ name: props.name })
+      emit('click', e)
+      return
+    }
 
-            if (res === false) {
+    if (routeData.hasRouterLink.value === true) {
+      const go = (opts = {}) => {
+        // if requiring to go to another route, then we
+        // let the QTabs route watcher do its job,
+        // otherwise directly select this
+        let hardError
+        const reqId = opts.to === void 0 || isDeepEqual(opts.to, props.to) === true
+          ? ($tabs.avoidRouteWatcher = uid())
+          : null
+
+        return routeData.navigateToRouterLink(e, { ...opts, returnRouterError: true })
+          .catch(err => { hardError = err })
+          .then(softError => {
+            if (reqId === $tabs.avoidRouteWatcher) {
               $tabs.avoidRouteWatcher = false
+
+              // if we don't have any hard errors or any soft errors, except for
+              // when navigating to the same route (on all other soft errors,
+              // like when navigation was aborted in a nav guard, we don't activate this tab)
+              if (
+                hardError === void 0 && (
+                  softError === void 0
+                  || softError.message.startsWith('Avoided redundant navigation') === true
+                )
+              ) {
+                $tabs.updateModel({ name: props.name })
+              }
             }
-            else {
-              res.then(err => {
-                $tabs.avoidRouteWatcher = false
-
-                if (err === void 0) {
-                  $tabs.updateModel({ name: props.name, fromRoute: true })
-                }
-              })
+
+            if (opts.returnRouterError === true) {
+              return hardError !== void 0 ? Promise.reject(hardError) : softError
             }
-          }
-        }
-        else {
-          emit('click', e)
-          return
-        }
-      }
-      else {
-        go = () => {
-          $tabs.updateModel({ name: props.name, fromRoute: false })
-        }
+          })
       }
 
       emit('click', e, go)
       e.defaultPrevented !== true && go()
+
+      return
     }
+
+    emit('click', e)
   }
 
   function onKeydown (e) {
@@ -205,17 +231,15 @@ export default function (props, slots, emit, routerProps) {
     name: computed(() => props.name),
     rootRef,
     tabIndicatorRef,
-    routerProps
+    routeData
   }
 
   onBeforeUnmount(() => {
     $tabs.unregisterTab(tabData)
-    $tabs.recalculateScroll()
   })
 
   onMounted(() => {
     $tabs.registerTab(tabData)
-    $tabs.recalculateScroll()
   })
 
   function renderTab (tag, customData) {