quasar 2.8.4 → 2.9.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.8.4
+ * Quasar Framework v2.9.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -16,12 +16,14 @@
       set,
       enumerable: true
     });
+    return target
   }
 
   function injectMultipleProps (target, props) {
     for (const key in props) {
       injectProp(target, key, props[ key ]);
     }
+    return target
   }
 
   /* eslint-disable no-useless-escape */
@@ -1608,7 +1610,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.8.4' };
+      const $q = { version: '2.9.0' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2733,30 +2735,34 @@
 
   // external props: type, tag
 
-  function useRouterLink (fallbackTag) {
+  function useRouterLink ({ fallbackTag, useDisableForRouterLinkProps = true } = {}) {
     const vm = vue.getCurrentInstance();
-    const { props, proxy } = vm;
+    const { props, proxy, emit } = vm;
 
     const hasRouter = vmHasRouter(vm);
     const hasHrefLink = vue.computed(() => props.disable !== true && props.href !== void 0);
 
-    const hasRouterLinkProps = vue.computed(() =>
-      hasRouter === true
-      && props.disable !== true
-      && hasHrefLink.value !== true
-      && props.to !== void 0 && props.to !== null && props.to !== ''
-    );
-
-    const linkRoute = vue.computed(() => {
-      if (hasRouterLinkProps.value === true) {
-        try { return proxy.$router.resolve(props.to) }
-        catch (err) {}
-      }
+    // for perf reasons, we use minimum amount of runtime work
+    const hasRouterLinkProps = useDisableForRouterLinkProps === true
+      ? vue.computed(() =>
+        hasRouter === true
+        && props.disable !== true
+        && hasHrefLink.value !== true
+        && props.to !== void 0 && props.to !== null && props.to !== ''
+      )
+      : vue.computed(() =>
+        hasRouter === true
+        && hasHrefLink.value !== true
+        && props.to !== void 0 && props.to !== null && props.to !== ''
+      );
 
-      return null
-    });
+    const resolvedLink = vue.computed(() => (
+      hasRouterLinkProps.value === true
+        ? getLink(props.to)
+        : null
+    ));
 
-    const hasRouterLink = vue.computed(() => linkRoute.value !== null);
+    const hasRouterLink = vue.computed(() => resolvedLink.value !== null);
     const hasLink = vue.computed(() => hasHrefLink.value === true || hasRouterLink.value === true);
 
     const linkTag = vue.computed(() => (
@@ -2765,7 +2771,7 @@
         : (props.tag || fallbackTag || 'div')
     ));
 
-    const linkProps = vue.computed(() => (
+    const linkAttrs = vue.computed(() => (
       hasHrefLink.value === true
         ? {
             href: props.href,
@@ -2774,7 +2780,7 @@
         : (
             hasRouterLink.value === true
               ? {
-                  href: linkRoute.value.href,
+                  href: resolvedLink.value.href,
                   target: props.target
                 }
               : {}
@@ -2783,11 +2789,11 @@
 
     const linkActiveIndex = vue.computed(() => {
       if (hasRouterLink.value === false) {
-        return null
+        return -1
       }
 
       const
-        { matched } = linkRoute.value,
+        { matched } = resolvedLink.value,
         { length } = matched,
         routeMatched = matched[ length - 1 ];
 
@@ -2830,14 +2836,14 @@
 
     const linkIsActive = vue.computed(() =>
       hasRouterLink.value === true
-      && linkActiveIndex.value > -1
-      && includesParams(proxy.$route.params, linkRoute.value.params)
+      && linkActiveIndex.value !== -1
+      && includesParams(proxy.$route.params, resolvedLink.value.params)
     );
 
     const linkIsExactActive = vue.computed(() =>
       linkIsActive.value === true
         && linkActiveIndex.value === proxy.$route.matched.length - 1
-        && isSameRouteLocationParams(proxy.$route.params, linkRoute.value.params)
+        && isSameRouteLocationParams(proxy.$route.params, resolvedLink.value.params)
     );
 
     const linkClass = vue.computed(() => (
@@ -2854,32 +2860,64 @@
         : ''
     ));
 
-    // should match RouterLink from Vue Router
-    function navigateToRouterLink (e) {
-      if (
-        // component is not disabled
-        props.disable === true
+    function getLink (to) {
+      try { return proxy.$router.resolve(to) }
+      catch (_) {}
 
-        // don't redirect with control keys
-        || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey
+      return null
+    }
 
-        // don't redirect when preventDefault called
-        // ...unless calling go() from @click(e, go)
-        || (e.__qNavigate !== true && e.defaultPrevented === true)
+    /**
+     * @returns Promise<RouterError | false | undefined>
+     */
+    function navigateToRouterLink (
+      e,
+      { returnRouterError, to = props.to, replace = props.replace } = {}
+    ) {
+      if (props.disable === true) {
+        // ensure native navigation is prevented in all cases,
+        // like when useDisableForRouterLinkProps === false (QRouteTab)
+        e.preventDefault();
+        return Promise.resolve(false)
+      }
+
+      if (
+        // don't redirect with control keys;
+        // should match RouterLink from Vue Router
+        e.metaKey || e.altKey || e.ctrlKey || e.shiftKey
 
         // don't redirect on right click
-        || (e.button !== undefined && e.button !== 0)
+        || (e.button !== void 0 && e.button !== 0)
 
         // don't redirect if it should open in a new window
         || props.target === '_blank'
       ) {
-        return false
+        return Promise.resolve(false)
       }
 
-      prevent(e);
+      // hinder the native navigation
+      e.preventDefault();
+
+      // then() can also return a "soft" router error (Vue Router behavior)
+      const promise = proxy.$router[ replace === true ? 'replace' : 'push' ](to);
+
+      return returnRouterError === true
+        ? promise
+        // else catching hard errors and also "soft" ones - then(err => ...)
+        : promise.then(() => {}).catch(() => {})
+    }
+
+    // warning! ensure that the component using it has 'click' included in its 'emits' definition prop
+    function navigateOnClick (e) {
+      if (hasRouterLink.value === true) {
+        const go = opts => navigateToRouterLink(e, opts);
 
-      return proxy.$router[ props.replace === true ? 'replace' : 'push' ](props.to)
-        .catch(err => err)
+        emit('click', e, go);
+        e.defaultPrevented !== true && go();
+      }
+      else {
+        emit('click', e);
+      }
     }
 
     return {
@@ -2888,13 +2926,15 @@
       hasLink,
 
       linkTag,
-      linkRoute,
+      resolvedLink,
       linkIsActive,
       linkIsExactActive,
       linkClass,
-      linkProps,
+      linkAttrs,
 
-      navigateToRouterLink
+      getLink,
+      navigateToRouterLink,
+      navigateOnClick
     }
   }
 
@@ -2913,20 +2953,19 @@
       }
     },
 
+    emits: [ 'click' ],
+
     setup (props, { slots }) {
-      const { linkTag, linkProps, linkClass, hasRouterLink, navigateToRouterLink } = useRouterLink();
+      const { linkTag, linkAttrs, linkClass, navigateOnClick } = useRouterLink();
 
       const data = vue.computed(() => {
-        const acc = {
+        return {
           class: 'q-breadcrumbs__el q-link '
             + 'flex inline items-center relative-position '
             + (props.disable !== true ? 'q-link--focusable' + linkClass.value : 'q-breadcrumbs__el--disable'),
-          ...linkProps.value
-        };
-        if (hasRouterLink.value === true) {
-          acc.onClick = navigateToRouterLink;
+          ...linkAttrs.value,
+          onClick: navigateOnClick
         }
-        return acc
       });
 
       const iconClass = vue.computed(() =>
@@ -3337,7 +3376,9 @@
   function useBtn (props) {
     const sizeStyle = useSize(props, defaultSizes$2);
     const alignClass = useAlign(props);
-    const { hasRouterLink, hasLink, linkTag, linkProps, navigateToRouterLink } = useRouterLink('button');
+    const { hasRouterLink, hasLink, linkTag, linkAttrs, navigateOnClick } = useRouterLink({
+      fallbackTag: 'button'
+    });
 
     const style = vue.computed(() => {
       const obj = props.fab === false && props.fabMini === false
@@ -3380,7 +3421,7 @@
       const acc = { tabindex: tabIndex.value };
 
       if (hasLink.value === true) {
-        Object.assign(acc, linkProps.value);
+        Object.assign(acc, linkAttrs.value);
       }
       else if (formTypes.includes(props.type) === true) {
         acc.type = props.type;
@@ -3393,6 +3434,7 @@
         else if (acc.href === void 0) {
           acc.role = 'button';
         }
+
         if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
           acc.type = props.type;
         }
@@ -3455,10 +3497,9 @@
       style,
       innerClasses,
       attributes,
-      hasRouterLink,
       hasLink,
       linkTag,
-      navigateToRouterLink,
+      navigateOnClick,
       isActionable
     }
   }
@@ -3477,10 +3518,12 @@
       ...useBtnProps,
 
       percentage: Number,
-      darkPercentage: Boolean
+      darkPercentage: Boolean,
+
+      onTouchstart: [ Function, Array ]
     },
 
-    emits: [ 'click', 'keydown', 'touchstart', 'mousedown', 'keyup' ],
+    emits: [ 'click', 'keydown', 'mousedown', 'keyup' ],
 
     setup (props, { slots, emit }) {
       const { proxy } = vue.getCurrentInstance();
@@ -3488,7 +3531,7 @@
       const {
         classes, style, innerClasses,
         attributes,
-        hasRouterLink, hasLink, linkTag, navigateToRouterLink,
+        hasLink, linkTag, navigateOnClick,
         isActionable
       } = useBtn(props);
 
@@ -3523,7 +3566,7 @@
         if (props.loading === true) {
           return {
             onMousedown: onLoadingEvt,
-            onTouchstartPassive: onLoadingEvt,
+            onTouchstart: onLoadingEvt,
             onClick: onLoadingEvt,
             onKeydown: onLoadingEvt,
             onKeyup: onLoadingEvt
@@ -3531,12 +3574,21 @@
         }
 
         if (isActionable.value === true) {
-          return {
+          const acc = {
             onClick,
             onKeydown,
-            onMousedown,
-            onTouchstart
+            onMousedown
+          };
+
+          if (proxy.$q.platform.has.touch === true) {
+            const suffix = props.onTouchstart !== void 0
+              ? ''
+              : 'Passive';
+
+            acc[ `onTouchstart${ suffix }` ] = onTouchstart;
           }
+
+          return acc
         }
 
         return {
@@ -3586,18 +3638,7 @@
           }
         }
 
-        if (hasRouterLink.value === true) {
-          const go = () => {
-            e.__qNavigate = true;
-            navigateToRouterLink(e);
-          };
-
-          emit('click', e, go);
-          e.defaultPrevented !== true && go();
-        }
-        else {
-          emit('click', e);
-        }
+        navigateOnClick(e);
       }
 
       function onKeydown (e) {
@@ -4541,49 +4582,64 @@
   /*
    * Usage:
    *    registerTick(fn)
-   *    registerTick(fn)
+   *    removeTick()
    */
 
   function useTick () {
     let tickFn;
+    const vm = vue.getCurrentInstance();
 
-    vue.onBeforeUnmount(() => {
+    function removeTick () {
       tickFn = void 0;
-    });
+    }
+
+    vue.onDeactivated(removeTick);
+    vue.onBeforeUnmount(removeTick);
 
     return {
+      removeTick,
+
       registerTick (fn) {
         tickFn = fn;
 
         vue.nextTick(() => {
           if (tickFn === fn) {
-            tickFn();
+            // we also check if VM is destroyed, since if it
+            // got to trigger one nextTick() we cannot stop it
+            vmIsDestroyed(vm) === false && tickFn();
             tickFn = void 0;
           }
         });
-      },
-
-      removeTick () {
-        tickFn = void 0;
       }
     }
   }
 
+  /*
+   * Usage:
+   *    registerTimeout(fn[, delay])
+   *    removeTimeout()
+   */
+
   function useTimeout () {
     let timer;
+    const vm = vue.getCurrentInstance();
 
-    vue.onBeforeUnmount(() => {
+    function removeTimeout () {
       clearTimeout(timer);
-    });
+    }
+
+    vue.onDeactivated(removeTimeout);
+    vue.onBeforeUnmount(removeTimeout);
 
     return {
+      removeTimeout,
+
       registerTimeout (fn, delay) {
         clearTimeout(timer);
-        timer = setTimeout(fn, delay);
-      },
 
-      removeTimeout () {
-        clearTimeout(timer);
+        if (vmIsDestroyed(vm) === false) {
+          timer = setTimeout(fn, delay);
+        }
       }
     }
   }
@@ -5260,7 +5316,7 @@
 
       const isDark = useDark(props, $q);
       const { registerTick, removeTick } = useTick();
-      const { registerTimeout, removeTimeout } = useTimeout();
+      const { registerTimeout } = useTimeout();
       const { transition, transitionStyle } = useTransition(props, showing);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
@@ -5348,9 +5404,6 @@
       }
 
       function handleShow (evt) {
-        removeTick();
-        removeTimeout();
-
         refocusTarget = props.noRefocus === false
           ? document.activeElement
           : null;
@@ -5382,11 +5435,13 @@
           document.activeElement.blur();
         }
 
+        // should removeTick() if this gets removed
         registerTick(() => {
           updatePosition();
           props.noFocus !== true && focus();
         });
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           // required in order to avoid the "double-tap needed" issue
           if ($q.platform.is.ios === true) {
@@ -5404,7 +5459,6 @@
 
       function handleHide (evt) {
         removeTick();
-        removeTimeout();
         hidePortal();
 
         anchorCleanup(true);
@@ -5422,6 +5476,7 @@
           refocusTarget = null;
         }
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           hidePortal(true); // done hiding, now destroy
           emit('hide', evt);
@@ -5591,7 +5646,7 @@
   // or improve speed by increasing this number (try 16384)
   const BUFFER_SIZE = 4096;
 
-  function uid$4 () {
+  function uid$3 () {
     // Buffer some random bytes for speed
     if (buf === void 0 || (bufIdx + 16 > BUFFER_SIZE)) {
       bufIdx = 0;
@@ -5655,7 +5710,7 @@
 
       const showing = vue.ref(props.modelValue);
       const menuRef = vue.ref(null);
-      const targetUid = uid$4();
+      const targetUid = uid$3();
 
       const attributes = vue.computed(() => {
         const acc = {
@@ -6373,7 +6428,7 @@
 
           client.has.touch === true && addEvt(ctx, 'main', [
             [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-            [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+            [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
           ]);
         },
 
@@ -7528,7 +7583,8 @@
       const child = [
         vue.h('div', {
           class: innerClass.value,
-          style: sizeStyle.value
+          style: sizeStyle.value,
+          'aria-hidden': 'true'
         }, inner)
       ];
 
@@ -7563,8 +7619,7 @@
   }, [
     vue.h('svg', {
       class: 'q-checkbox__svg fit absolute-full',
-      viewBox: '0 0 24 24',
-      'aria-hidden': 'true'
+      viewBox: '0 0 24 24'
     }, [
       vue.h('path', {
         class: 'q-checkbox__truthy',
@@ -8095,7 +8150,7 @@
     }
   }
 
-  let uid$3 = 0;
+  let uid$2 = 0;
 
   var TouchPan = createDirective({
         name: 'touch-pan',
@@ -8117,7 +8172,7 @@
           }
 
           const ctx = {
-            uid: 'qvtp_' + (uid$3++),
+            uid: 'qvtp_' + (uid$2++),
             handler: value,
             modifiers,
             direction: getModifierDirections(modifiers),
@@ -8364,7 +8419,7 @@
 
           client.has.touch === true && addEvt(ctx, 'main', [
             [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-            [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+            [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
           ]);
         },
 
@@ -9353,15 +9408,18 @@
   // mobile Chrome takes the crown for this
   {
     const scroller = document.createElement('div');
-    const spacer = document.createElement('div');
-
     scroller.setAttribute('dir', 'rtl');
-    scroller.style.width = '1px';
-    scroller.style.height = '1px';
-    scroller.style.overflow = 'auto';
+    Object.assign(scroller.style, {
+      width: '1px',
+      height: '1px',
+      overflow: 'auto'
+    });
 
-    spacer.style.width = '1000px';
-    spacer.style.height = '1px';
+    const spacer = document.createElement('div');
+    Object.assign(spacer.style, {
+      width: '1000px',
+      height: '1px'
+    });
 
     document.body.appendChild(scroller);
     scroller.appendChild(spacer);
@@ -9381,7 +9439,6 @@
   }
 
   const alignValues$1 = [ 'left', 'center', 'right', 'justify' ];
-  const emptyFn = () => {};
 
   var QTabs = createComponent({
     name: 'QTabs',
@@ -9427,12 +9484,15 @@
     },
 
     setup (props, { slots, emit }) {
-      const vm = vue.getCurrentInstance();
-      const { proxy: { $q } } = vm;
+      const { proxy } = vue.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 = vue.ref(null);
       const contentRef = vue.ref(null);
@@ -9447,10 +9507,11 @@
         $q.platform.is.desktop === true || props.mobileArrows === true
       );
 
-      const tabList = [];
+      const tabDataList = [];
+      const tabDataListLen = vue.ref(0);
       const hasFocus = vue.ref(false);
 
-      let localFromRoute = false, animateTimer, scrollTimer, unwatchRoute;
+      let animateTimer, scrollTimer, unwatchRoute;
       let localUpdateArrows = arrowsEnabled.value === true
         ? updateArrowsFn
         : noop;
@@ -9469,6 +9530,19 @@
         noCaps: props.noCaps
       }));
 
+      const hasActiveTab = vue.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 = vue.computed(() => {
         const align = scrollable.value === true
           ? 'left'
@@ -9510,7 +9584,7 @@
       });
 
       vue.watch(() => props.outsideArrows, () => {
-        vue.nextTick(recalculateScroll());
+        recalculateScroll();
       });
 
       vue.watch(arrowsEnabled, v => {
@@ -9518,12 +9592,15 @@
           ? updateArrowsFn
           : noop;
 
-        vue.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
@@ -9532,20 +9609,14 @@
             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
+          });
         });
       }
 
@@ -9567,27 +9638,21 @@
           ),
           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 && vue.nextTick(localUpdateArrows);
-
-        const localJustify = size < parseInt(props.breakpoint, 10);
+        scroll === true && registerUpdateArrowsTick(localUpdateArrows);
 
-        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) {
@@ -9611,7 +9676,7 @@
             : `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)
-          vue.nextTick(() => {
+          registerAnimateTick(() => {
             animateTimer = setTimeout(() => {
               newEl.style.transition = 'transform .25s cubic-bezier(.4, 0, .2, 1)';
               newEl.style.transform = 'none';
@@ -9666,8 +9731,6 @@
 
       function animScrollTo (value) {
         stopAnimScroll();
-        scrollTowards(value);
-
         scrollTimer = setInterval(() => {
           if (scrollTowards(value) === true) {
             stopAnimScroll();
@@ -9698,10 +9761,12 @@
 
         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
         }
 
@@ -9767,77 +9832,113 @@
         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;
+            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.value;
-            Object.assign(best, { matchedLen, hrefLen, exact });
+            bestScore = newScore;
+          }
+          else if (newScore.queryDiff !== bestScore.queryDiff) {
+            // it matches less routes than the current champion so we discard it
             continue
           }
 
-          wasItActive(tab);
+          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) {
@@ -9855,6 +9956,7 @@
           // (it might be other elements focused, like additional QBtn)
           if (tab && rootRef.value.contains(tab) === true) {
             hasFocus.value = true;
+            scrollable.value === true && scrollToTabEl(tab);
           }
         }
       }
@@ -9864,22 +9966,52 @@
       }
 
       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 = vue.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 = vue.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();
+          }
         }
       }
 
@@ -9891,16 +10023,18 @@
        * 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();
         }
       }
@@ -9909,33 +10043,38 @@
         currentModel,
         tabProps,
         hasFocus,
+        hasActiveTab,
 
         registerTab,
         unregisterTab,
 
         verifyRouteModel,
         updateModel,
-        recalculateScroll,
         onKbdNavigate,
 
-        avoidRouteWatcher: false
+        avoidRouteWatcher: false // false | string (uid)
       };
 
       vue.provide(tabsKey, $tabs);
 
-      vue.onBeforeUnmount(() => {
+      function cleanup () {
         clearTimeout(animateTimer);
+        stopAnimScroll();
         unwatchRoute !== void 0 && unwatchRoute();
-      });
+      }
 
-      let shouldActivate = false;
+      let hadRouteWatcher;
+
+      vue.onBeforeUnmount(cleanup);
 
       vue.onDeactivated(() => {
-        shouldActivate = true;
+        hadRouteWatcher = unwatchRoute !== void 0;
+        cleanup();
       });
 
       vue.onActivated(() => {
-        shouldActivate === true && recalculateScroll();
+        hadRouteWatcher === true && watchRoute();
+        recalculateScroll();
       });
 
       return () => {
@@ -9954,22 +10093,22 @@
             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
           }),
 
           vue.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
           })
         );
 
@@ -9984,7 +10123,7 @@
     }
   });
 
-  let uid$2 = 0;
+  let id$1 = 0;
 
   const useTabEmits = [ 'click', 'keydown' ];
 
@@ -9997,7 +10136,7 @@
 
     name: {
       type: [ Number, String ],
-      default: () => `t_${ uid$2++ }`
+      default: () => `t_${ id$1++ }`
     },
 
     noCaps: Boolean,
@@ -10013,7 +10152,7 @@
     }
   };
 
-  function useTab (props, slots, emit, routerProps) {
+  function useTab (props, slots, emit, routeData) {
     const $tabs = vue.inject(tabsKey, () => {
       console.error('QTab/QRouteTab component needs to be child of QTabs');
     });
@@ -10050,7 +10189,7 @@
       + (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 = vue.computed(() =>
@@ -10060,53 +10199,77 @@
     );
 
     const tabIndex = vue.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 (keyboard !== true && blurTargetRef.value !== null) {
+        blurTargetRef.value.focus();
+      }
 
-      if (props.disable !== true) {
-        let go;
+      if (props.disable === true) {
+        // we should hinder native navigation though
+        if (routeData !== void 0 && routeData.hasRouterLink.value === true) {
+          stopAndPrevent(e);
+        }
+        return
+      }
 
-        if (routerProps !== void 0) {
-          if (routerProps.hasRouterLink.value === true) {
-            go = () => {
-              e.__qNavigate = true;
-              $tabs.avoidRouteWatcher = true;
+      // do we have a QTab?
+      if (routeData === void 0) {
+        $tabs.updateModel({ name: props.name });
+        emit('click', e);
+        return
+      }
 
-              const res = routerProps.navigateToRouterLink(e);
+      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$3())
+            : null;
 
-              if (res === false) {
+          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) {
@@ -10180,17 +10343,15 @@
       name: vue.computed(() => props.name),
       rootRef,
       tabIndicatorRef,
-      routerProps
+      routeData
     };
 
     vue.onBeforeUnmount(() => {
       $tabs.unregisterTab(tabData);
-      $tabs.recalculateScroll();
     });
 
     vue.onMounted(() => {
       $tabs.registerTab(tabData);
-      $tabs.recalculateScroll();
     });
 
     function renderTab (tag, customData) {
@@ -14568,7 +14729,7 @@
       );
 
       const { preventBodyScroll } = usePreventScroll();
-      const { registerTimeout, removeTimeout } = useTimeout();
+      const { registerTimeout } = useTimeout();
       const { registerTick, removeTick } = useTick();
 
       const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
@@ -14653,8 +14814,6 @@
       });
 
       function handleShow (evt) {
-        removeTimeout();
-        removeTick();
         addToHistory();
 
         refocusTarget = props.noRefocus === false && document.activeElement !== null
@@ -14669,7 +14828,11 @@
           document.activeElement !== null && document.activeElement.blur();
           registerTick(focus);
         }
+        else {
+          removeTick();
+        }
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           if (vm.proxy.$q.platform.is.ios === true) {
             if (props.seamless !== true && document.activeElement) {
@@ -14705,7 +14868,6 @@
       }
 
       function handleHide (evt) {
-        removeTimeout();
         removeTick();
         removeFromHistory();
         cleanup(true);
@@ -14717,6 +14879,7 @@
           refocusTarget = null;
         }
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           hidePortal(true); // done hiding, now destroy
           animating.value = false;
@@ -14950,7 +15113,7 @@
 
       const isDark = useDark(props, $q);
       const { preventBodyScroll } = usePreventScroll();
-      const { registerTimeout } = useTimeout();
+      const { registerTimeout, removeTimeout } = useTimeout();
 
       const $layout = vue.inject(layoutKey, () => {
         console.error('QDrawer needs to be child of QLayout');
@@ -15020,9 +15183,12 @@
 
         cleanup();
 
-        noEvent !== true && registerTimeout(() => {
-          emit('hide', evt);
-        }, duration);
+        if (noEvent !== true) {
+          registerTimeout(() => { emit('hide', evt); }, duration);
+        }
+        else {
+          removeTimeout();
+        }
       }
 
       const { show, hide } = useModelToggle({
@@ -16011,7 +16177,7 @@
       const hideOnRouteChange = vue.computed(() => props.persistent !== true);
 
       const { registerTick, removeTick } = useTick();
-      const { registerTimeout, removeTimeout } = useTimeout();
+      const { registerTimeout } = useTimeout();
       const { transition, transitionStyle } = useTransition(props, showing);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
@@ -16065,11 +16231,9 @@
       }
 
       function handleShow (evt) {
-        removeTick();
-        removeTimeout();
-
         showPortal();
 
+        // should removeTick() if this gets removed
         registerTick(() => {
           observer = new MutationObserver(() => updatePosition());
           observer.observe(innerRef.value, { attributes: false, childList: true, characterData: true, subtree: true });
@@ -16084,6 +16248,7 @@
           );
         }
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           showPortal(true); // done showing portal
           emit('show', evt);
@@ -16092,11 +16257,11 @@
 
       function handleHide (evt) {
         removeTick();
-        removeTimeout();
         hidePortal();
 
         anchorCleanup();
 
+        // should removeTimeout() if this gets removed
         registerTimeout(() => {
           hidePortal(true); // done hiding, now destroy
           emit('hide', evt);
@@ -16148,14 +16313,10 @@
           addEvt(anchorEvents, 'tooltipTemp', evts);
         }
 
-        registerTimeout(() => {
-          show(evt);
-        }, props.delay);
+        registerTimeout(() => { show(evt); }, props.delay);
       }
 
       function delayHide (evt) {
-        removeTimeout();
-
         if ($q.platform.is.mobile === true) {
           cleanEvt(anchorEvents, 'tooltipTemp');
           clearSelection();
@@ -16165,9 +16326,8 @@
           }, 10);
         }
 
-        registerTimeout(() => {
-          hide(evt);
-        }, props.hideDelay);
+        // should removeTimeout() if this gets removed
+        registerTimeout(() => { hide(evt); }, props.hideDelay);
       }
 
       function configureAnchorEl () {
@@ -16263,7 +16423,7 @@
       const { proxy: { $q } } = vue.getCurrentInstance();
 
       const isDark = useDark(props, $q);
-      const { hasRouterLink, hasLink, linkProps, linkClass, linkTag, navigateToRouterLink } = useRouterLink();
+      const { hasLink, linkAttrs, linkClass, linkTag, navigateOnClick } = useRouterLink();
 
       const rootRef = vue.ref(null);
       const blurTargetRef = vue.ref(null);
@@ -16287,7 +16447,7 @@
             ? linkClass.value
             : (
                 props.active === true
-                  ? `${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' } q-item--active`
+                  ? ` q-item--active${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' }`
                   : ''
               )
         )
@@ -16323,8 +16483,7 @@
             }
           }
 
-          hasRouterLink.value === true && navigateToRouterLink(e);
-          emit('click', e);
+          navigateOnClick(e);
         }
       }
 
@@ -16365,7 +16524,7 @@
 
         if (isClickable.value === true) {
           data.tabindex = props.tabindex || '0';
-          Object.assign(data, linkProps.value);
+          Object.assign(data, linkAttrs.value);
         }
         else if (isActionable.value === true) {
           data[ 'aria-disabled' ] = 'true';
@@ -16718,24 +16877,21 @@
   const
     toString = Object.prototype.toString,
     hasOwn = Object.prototype.hasOwnProperty,
-    class2type = {};
-
-  'Boolean Number String Function Array Date RegExp Object'.split(' ').forEach(name => {
-    class2type[ '[object ' + name + ']' ] = name.toLowerCase();
-  });
-
-  function type (obj) {
-    return obj === null ? String(obj) : class2type[ toString.call(obj) ] || 'object'
-  }
+    notPlainObject = new Set(
+      [ 'Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object' ]
+        .map(name => '[object ' + name + ']')
+    );
 
   function isPlainObject (obj) {
-    if (!obj || type(obj) !== 'object') {
+    if (obj !== Object(obj) || notPlainObject.has(toString.call(obj)) === true) {
       return false
     }
 
-    if (obj.constructor
-      && !hasOwn.call(obj, 'constructor')
-      && !hasOwn.call(obj.constructor.prototype, 'isPrototypeOf')) {
+    if (
+      obj.constructor
+      && hasOwn.call(obj, 'constructor') === false
+      && !hasOwn.call(obj.constructor.prototype, 'isPrototypeOf') === false
+    ) {
       return false
     }
 
@@ -16759,7 +16915,7 @@
       i = 2;
     }
 
-    if (Object(target) !== target && type(target) !== 'function') {
+    if (Object(target) !== target && typeof target !== 'function') {
       target = {};
     }
 
@@ -16778,13 +16934,16 @@
             continue
           }
 
-          if (deep && copy && (isPlainObject(copy) || (copyIsArray = type(copy) === 'array'))) {
-            if (copyIsArray) {
-              copyIsArray = false;
-              clone = src && type(src) === 'array' ? src : [];
+          if (
+            deep === true
+            && copy
+            && ((copyIsArray = Array.isArray(copy)) || isPlainObject(copy) === true)
+          ) {
+            if (copyIsArray === true) {
+              clone = Array.isArray(src) === true ? src : [];
             }
             else {
-              clone = src && isPlainObject(src) ? src : {};
+              clone = isPlainObject(src) === true ? src : {};
             }
 
             target[ name ] = extend(deep, clone, copy);
@@ -17606,7 +17765,7 @@
       );
 
       const blurTargetRef = vue.ref(null);
-      const targetUid = uid$4();
+      const targetUid = uid$3();
 
       const { show, hide, toggle } = useModelToggle({ showing });
 
@@ -17710,7 +17869,7 @@
 
       function enterGroup () {
         if (uniqueId === void 0) {
-          uniqueId = uid$4();
+          uniqueId = uid$3();
         }
 
         if (showing.value === true) {
@@ -18027,7 +18186,7 @@
     setup (props, { slots }) {
       const triggerRef = vue.ref(null);
       const showing = vue.ref(props.modelValue === true);
-      const targetUid = uid$4();
+      const targetUid = uid$3();
 
       const { proxy: { $q } } = vue.getCurrentInstance();
       const { formClass, labelProps } = useFab(props, showing);
@@ -18476,7 +18635,7 @@
   }
 
   function getTargetUid (val) {
-    return val === void 0 ? `f_${ uid$4() }` : val
+    return val === void 0 ? `f_${ uid$3() }` : val
   }
 
   function fieldValueIsFilled (val) {
@@ -22753,8 +22912,7 @@
   const svg$m = vue.h('svg', {
     key: 'svg',
     class: 'q-radio__bg absolute non-selectable',
-    viewBox: '0 0 24 24',
-    'aria-hidden': 'true'
+    viewBox: '0 0 24 24'
   }, [
     vue.h('path', {
       d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
@@ -22899,7 +23057,8 @@
         const child = [
           vue.h('div', {
             class: innerClass.value,
-            style: sizeStyle.value
+            style: sizeStyle.value,
+            'aria-hidden': 'true'
           }, content)
         ];
 
@@ -24076,16 +24235,13 @@
       let validated = false;
 
       const scope = vue.computed(() => {
-        const acc = {
+        return injectProp({
           initialValue: initialValue.value,
           validate: props.validate,
           set,
           cancel,
           updatePosition
-        };
-
-        injectProp(acc, 'value', () => currentModel.value, val => { currentModel.value = val; });
-        return acc
+        }, 'value', () => currentModel.value, val => { currentModel.value = val; })
       });
 
       function set () {
@@ -25022,6 +25178,8 @@
       iconHalf: [ String, Array ],
       iconSelected: [ String, Array ],
 
+      iconAriaLabel: [ String, Array ],
+
       color: [ String, Array ],
       colorHalf: [ String, Array ],
       colorSelected: [ String, Array ],
@@ -25087,11 +25245,29 @@
         }
       });
 
+      const iconLabel = vue.computed(() => {
+        if (typeof props.iconAriaLabel === 'string') {
+          const label = props.iconAriaLabel.length > 0 ? `${ props.iconAriaLabel } ` : '';
+          return i => `${ label }${ i }`
+        }
+
+        if (Array.isArray(props.iconAriaLabel) === true) {
+          const iMax = props.iconAriaLabel.length;
+
+          if (iMax > 0) {
+            return i => props.iconAriaLabel[ Math.min(i, iMax) - 1 ]
+          }
+        }
+
+        return (i, label) => `${ label } ${ i }`
+      });
+
       const stars = vue.computed(() => {
         const
           acc = [],
           icons = iconData.value,
-          ceil = Math.ceil(props.modelValue);
+          ceil = Math.ceil(props.modelValue),
+          tabindex = editable.value === true ? 0 : null;
 
         const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
           ? -1
@@ -25108,7 +25284,16 @@
                   icons.selColor !== void 0 && active === true
                     ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
                     : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
-                );
+                ),
+            name = (
+              half === true
+                ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
+                : (
+                    icons.selIcon !== void 0 && (active === true || exSelected === true)
+                      ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
+                      : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
+                  )
+            ) || $q.iconSet.rating.icon;
 
           acc.push({
             name: (
@@ -25121,7 +25306,14 @@
                   )
             ) || $q.iconSet.rating.icon,
 
-            classes: 'q-rating__icon'
+            attrs: {
+              tabindex,
+              role: 'radio',
+              'aria-checked': props.modelValue === i ? 'true' : 'false',
+              'aria-label': iconLabel.value(i, name)
+            },
+
+            iconClass: 'q-rating__icon'
               + (active === true || half === true ? ' q-rating__icon--active' : '')
               + (exSelected === true ? ' q-rating__icon--exselected' : '')
               + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
@@ -25133,15 +25325,17 @@
       });
 
       const attributes = vue.computed(() => {
+        const attrs = { role: 'radiogroup' };
+
         if (props.disable === true) {
-          return { 'aria-disabled': 'true' }
+          attrs[ 'aria-disabled' ] = 'true';
         }
         if (props.readonly === true) {
-          return { 'aria-readonly': 'true' }
+          attrs[ 'aria-readonly' ] = 'true';
         }
-      });
 
-      const tabindex = vue.computed(() => (editable.value === true ? 0 : null));
+        return attrs
+      });
 
       function set (value) {
         if (editable.value === true) {
@@ -25192,7 +25386,7 @@
       return () => {
         const child = [];
 
-        stars.value.forEach(({ classes, name }, index) => {
+        stars.value.forEach(({ iconClass, name, attrs }, index) => {
           const i = index + 1;
 
           child.push(
@@ -25200,7 +25394,7 @@
               key: i,
               ref: vm => { iconRefs[ `rt${ i }` ] = vm; },
               class: 'q-rating__icon-container flex flex-center',
-              tabindex: tabindex.value,
+              ...attrs,
               onClick () { set(i); },
               onMouseover () { setHoverValue(i); },
               onMouseout: resetMouseModel,
@@ -25209,7 +25403,7 @@
               onKeyup (e) { onKeyup(e, i); }
             }, hMergeSlot(
               slots[ `tip-${ i }` ],
-              [ vue.h(QIcon, { class: classes, name }) ]
+              [ vue.h(QIcon, { class: iconClass, name }) ]
             ))
           );
         });
@@ -30659,10 +30853,12 @@
         default: true
       },
       done: Boolean,
-      error: Boolean
+      error: Boolean,
+
+      onScroll: [ Function, Array ]
     },
 
-    setup (props, { attrs, slots }) {
+    setup (props, { slots, emit }) {
       const { proxy: { $q } } = vue.getCurrentInstance();
 
       const $stepper = vue.inject(stepperKey, () => {
@@ -30686,7 +30882,7 @@
                 if (target.scrollTop > 0) {
                   target.scrollTop = 0;
                 }
-                attrs.onScroll !== void 0 && attrs.onScroll(e);
+                props.onScroll !== void 0 && emit('scroll', e);
               }
             }
       ));
@@ -32155,11 +32351,9 @@
       function getBodyScope (data) {
         injectBodyCommonScope(data);
 
-        data.cols = data.cols.map(col => {
-          const c = { ...col };
-          injectProp(c, 'value', () => getCellValue(col, data.row));
-          return c
-        });
+        data.cols = data.cols.map(
+          col => injectProp({ ...col }, 'value', () => getCellValue(col, data.row))
+        );
 
         return data
       }
@@ -32798,7 +32992,9 @@
     emits: useTabEmits,
 
     setup (props, { slots, emit }) {
-      const rData = useRouterLink();
+      const routeData = useRouterLink({
+        useDisableForRouterLinkProps: false
+      });
 
       const { renderTab, $tabs } = useTab(
         props,
@@ -32806,15 +33002,15 @@
         emit,
         {
           exact: vue.computed(() => props.exact),
-          ...rData
+          ...routeData
         }
       );
 
-      vue.watch(() => props.name + props.exact + (rData.linkRoute.value || {}).href, () => {
+      vue.watch(() => `${ props.name } | ${ props.exact } | ${ (routeData.resolvedLink.value || {}).href }`, () => {
         $tabs.verifyRouteModel();
       });
 
-      return () => renderTab(rData.linkTag.value, rData.linkProps.value)
+      return () => renderTab(routeData.linkTag.value, routeData.linkAttrs.value)
     }
   });
 
@@ -34507,7 +34703,7 @@
             emit('update:selected', meta.key !== props.selected ? meta.key : null);
           }
           else if (meta.key !== props.selected) {
-            emit('update:selected', meta.key || null);
+            emit('update:selected', meta.key === void 0 ? null : meta.key);
           }
         }
         else {
@@ -37320,7 +37516,7 @@
 
           client.has.touch === true && addEvt(ctx, 'main', [
             [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-            [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+            [ el, 'touchend', 'noop', 'passiveCapture' ]
           ]);
 
           keyboard.length > 0 && addEvt(ctx, 'main', [
@@ -39867,7 +40063,7 @@
    *                   Default: { threadsNumber: 1, abortOnFail: true }
    *                   When configuring threadsNumber AND using http requests, be
    *                       aware of the maximum threads that the hosting browser
-   *                       supports (usually 3); any number of threads above that
+   *                       supports (usually 5); any number of threads above that
    *                       won't add any real benefits
    * @returns Promise<Array<Object> | Object>
    *    With opts.abortOnFail set to true (which is default):
@@ -39973,7 +40169,7 @@
     scroll: scroll,
     setCssVar: setCssVar,
     throttle: throttle,
-    uid: uid$4
+    uid: uid$3
   });
 
   // To be used for the custom component
@@ -40074,7 +40270,7 @@
    */
 
   var index_umd = {
-    version: '2.8.4',
+    version: '2.9.0',
     install (app, opts) {
       installQuasar(app, {
         components,