quasar 2.8.4 → 2.9.1

package/dist/quasar.esm.js

@@ -1,10 +1,10 @@
 /*!
- * Quasar Framework v2.8.4
+ * Quasar Framework v2.9.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
 
-import { ref, reactive, createApp, markRaw, defineComponent, getCurrentInstance, computed, onMounted, onBeforeUnmount, h, withDirectives, unref, Transition, nextTick, watch, onUnmounted, Teleport, KeepAlive, onBeforeMount, toRaw, provide, onDeactivated, onActivated, inject, onBeforeUpdate, shallowReactive, vShow, onUpdated, isRef, TransitionGroup } from 'vue';
+import { ref, reactive, createApp, markRaw, defineComponent, getCurrentInstance, computed, onMounted, onBeforeUnmount, h, withDirectives, unref, Transition, nextTick, watch, onUnmounted, Teleport, onDeactivated, KeepAlive, onBeforeMount, toRaw, provide, onActivated, inject, onBeforeUpdate, shallowReactive, vShow, onUpdated, isRef, TransitionGroup } from 'vue';
 
 function injectProp (target, propName, get, set) {
   Object.defineProperty(target, propName, {
@@ -12,12 +12,14 @@ function injectProp (target, propName, get, set) {
     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 */
@@ -1606,7 +1608,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 var installQuasar = function (parentApp, opts = {}) {
-    const $q = { version: '2.8.4' };
+    const $q = { version: '2.9.1' };
 
     if (globalConfigIsFrozen === false) {
       if (opts.config !== void 0) {
@@ -2731,30 +2733,34 @@ const useRouterLinkProps = {
 
 // external props: type, tag
 
-function useRouterLink (fallbackTag) {
+function useRouterLink ({ fallbackTag, useDisableForRouterLinkProps = true } = {}) {
   const vm = getCurrentInstance();
-  const { props, proxy } = vm;
+  const { props, proxy, emit } = vm;
 
   const hasRouter = vmHasRouter(vm);
   const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0);
 
-  const hasRouterLinkProps = computed(() =>
-    hasRouter === true
-    && props.disable !== true
-    && hasHrefLink.value !== true
-    && props.to !== void 0 && props.to !== null && props.to !== ''
-  );
-
-  const linkRoute = 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
+    ? computed(() =>
+      hasRouter === true
+      && props.disable !== true
+      && hasHrefLink.value !== true
+      && props.to !== void 0 && props.to !== null && props.to !== ''
+    )
+    : computed(() =>
+      hasRouter === true
+      && hasHrefLink.value !== true
+      && props.to !== void 0 && props.to !== null && props.to !== ''
+    );
 
-    return null
-  });
+  const resolvedLink = computed(() => (
+    hasRouterLinkProps.value === true
+      ? getLink(props.to)
+      : null
+  ));
 
-  const hasRouterLink = computed(() => linkRoute.value !== null);
+  const hasRouterLink = computed(() => resolvedLink.value !== null);
   const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true);
 
   const linkTag = computed(() => (
@@ -2763,7 +2769,7 @@ function useRouterLink (fallbackTag) {
       : (props.tag || fallbackTag || 'div')
   ));
 
-  const linkProps = computed(() => (
+  const linkAttrs = computed(() => (
     hasHrefLink.value === true
       ? {
           href: props.href,
@@ -2772,7 +2778,7 @@ function useRouterLink (fallbackTag) {
       : (
           hasRouterLink.value === true
             ? {
-                href: linkRoute.value.href,
+                href: resolvedLink.value.href,
                 target: props.target
               }
             : {}
@@ -2781,11 +2787,11 @@ function useRouterLink (fallbackTag) {
 
   const linkActiveIndex = computed(() => {
     if (hasRouterLink.value === false) {
-      return null
+      return -1
     }
 
     const
-      { matched } = linkRoute.value,
+      { matched } = resolvedLink.value,
       { length } = matched,
       routeMatched = matched[ length - 1 ];
 
@@ -2828,14 +2834,14 @@ function useRouterLink (fallbackTag) {
 
   const linkIsActive = 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 = 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 = computed(() => (
@@ -2852,32 +2858,64 @@ function useRouterLink (fallbackTag) {
       : ''
   ));
 
-  // 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 {
@@ -2886,13 +2924,15 @@ function useRouterLink (fallbackTag) {
     hasLink,
 
     linkTag,
-    linkRoute,
+    resolvedLink,
     linkIsActive,
     linkIsExactActive,
     linkClass,
-    linkProps,
+    linkAttrs,
 
-    navigateToRouterLink
+    getLink,
+    navigateToRouterLink,
+    navigateOnClick
   }
 }
 
@@ -2911,20 +2951,19 @@ var QBreadcrumbsEl = createComponent({
     }
   },
 
+  emits: [ 'click' ],
+
   setup (props, { slots }) {
-    const { linkTag, linkProps, linkClass, hasRouterLink, navigateToRouterLink } = useRouterLink();
+    const { linkTag, linkAttrs, linkClass, navigateOnClick } = useRouterLink();
 
     const data = 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 = computed(() =>
@@ -3335,7 +3374,9 @@ const useBtnProps = {
 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 = computed(() => {
     const obj = props.fab === false && props.fabMini === false
@@ -3378,7 +3419,7 @@ function useBtn (props) {
     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;
@@ -3391,6 +3432,7 @@ function useBtn (props) {
       else if (acc.href === void 0) {
         acc.role = 'button';
       }
+
       if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
         acc.type = props.type;
       }
@@ -3453,10 +3495,9 @@ function useBtn (props) {
     style,
     innerClasses,
     attributes,
-    hasRouterLink,
     hasLink,
     linkTag,
-    navigateToRouterLink,
+    navigateOnClick,
     isActionable
   }
 }
@@ -3475,10 +3516,12 @@ var QBtn = createComponent({
     ...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 } = getCurrentInstance();
@@ -3486,7 +3529,7 @@ var QBtn = createComponent({
     const {
       classes, style, innerClasses,
       attributes,
-      hasRouterLink, hasLink, linkTag, navigateToRouterLink,
+      hasLink, linkTag, navigateOnClick,
       isActionable
     } = useBtn(props);
 
@@ -3521,7 +3564,7 @@ var QBtn = createComponent({
       if (props.loading === true) {
         return {
           onMousedown: onLoadingEvt,
-          onTouchstartPassive: onLoadingEvt,
+          onTouchstart: onLoadingEvt,
           onClick: onLoadingEvt,
           onKeydown: onLoadingEvt,
           onKeyup: onLoadingEvt
@@ -3529,12 +3572,21 @@ var QBtn = createComponent({
       }
 
       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 {
@@ -3584,18 +3636,7 @@ var QBtn = createComponent({
         }
       }
 
-      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) {
@@ -4539,49 +4580,64 @@ function useTransition (props, showing) {
 /*
  * Usage:
  *    registerTick(fn)
- *    registerTick(fn)
+ *    removeTick()
  */
 
 function useTick () {
   let tickFn;
+  const vm = getCurrentInstance();
 
-  onBeforeUnmount(() => {
+  function removeTick () {
     tickFn = void 0;
-  });
+  }
+
+  onDeactivated(removeTick);
+  onBeforeUnmount(removeTick);
 
   return {
+    removeTick,
+
     registerTick (fn) {
       tickFn = fn;
 
       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 = getCurrentInstance();
 
-  onBeforeUnmount(() => {
+  function removeTimeout () {
     clearTimeout(timer);
-  });
+  }
+
+  onDeactivated(removeTimeout);
+  onBeforeUnmount(removeTimeout);
 
   return {
+    removeTimeout,
+
     registerTimeout (fn, delay) {
       clearTimeout(timer);
-      timer = setTimeout(fn, delay);
-    },
 
-    removeTimeout () {
-      clearTimeout(timer);
+      if (vmIsDestroyed(vm) === false) {
+        timer = setTimeout(fn, delay);
+      }
     }
   }
 }
@@ -5258,7 +5314,7 @@ var QMenu = createComponent({
 
     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);
 
@@ -5346,9 +5402,6 @@ var QMenu = createComponent({
     }
 
     function handleShow (evt) {
-      removeTick();
-      removeTimeout();
-
       refocusTarget = props.noRefocus === false
         ? document.activeElement
         : null;
@@ -5380,11 +5433,13 @@ var QMenu = createComponent({
         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) {
@@ -5402,7 +5457,6 @@ var QMenu = createComponent({
 
     function handleHide (evt) {
       removeTick();
-      removeTimeout();
       hidePortal();
 
       anchorCleanup(true);
@@ -5420,6 +5474,7 @@ var QMenu = createComponent({
         refocusTarget = null;
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true); // done hiding, now destroy
         emit('hide', evt);
@@ -5589,7 +5644,7 @@ const randomBytes = (() => {
 // 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;
@@ -5653,7 +5708,7 @@ var QBtnDropdown = createComponent({
 
     const showing = ref(props.modelValue);
     const menuRef = ref(null);
-    const targetUid = uid$4();
+    const targetUid = uid$3();
 
     const attributes = computed(() => {
       const acc = {
@@ -6371,7 +6426,7 @@ var TouchSwipe = createDirective({
 
         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)
         ]);
       },
 
@@ -7526,7 +7581,8 @@ function useCheckbox (type, getInner) {
     const child = [
       h('div', {
         class: innerClass.value,
-        style: sizeStyle.value
+        style: sizeStyle.value,
+        'aria-hidden': 'true'
       }, inner)
     ];
 
@@ -7561,8 +7617,7 @@ const bgNode = h('div', {
 }, [
   h('svg', {
     class: 'q-checkbox__svg fit absolute-full',
-    viewBox: '0 0 24 24',
-    'aria-hidden': 'true'
+    viewBox: '0 0 24 24'
   }, [
     h('path', {
       class: 'q-checkbox__truthy',
@@ -8093,7 +8148,7 @@ function getChanges (evt, ctx, isFinal) {
   }
 }
 
-let uid$3 = 0;
+let uid$2 = 0;
 
 var TouchPan = createDirective({
       name: 'touch-pan',
@@ -8115,7 +8170,7 @@ var TouchPan = createDirective({
         }
 
         const ctx = {
-          uid: 'qvtp_' + (uid$3++),
+          uid: 'qvtp_' + (uid$2++),
           handler: value,
           modifiers,
           direction: getModifierDirections(modifiers),
@@ -8362,7 +8417,7 @@ var TouchPan = createDirective({
 
         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)
         ]);
       },
 
@@ -9351,15 +9406,18 @@ let rtlHasScrollBug = false;
 // mobile Chrome takes the crown for this
 if (!__QUASAR_SSR__) {
   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);
@@ -9379,7 +9437,6 @@ function getIndicatorClass (color, top, vertical) {
 }
 
 const alignValues$1 = [ 'left', 'center', 'right', 'justify' ];
-const emptyFn = () => {};
 
 var QTabs = createComponent({
   name: 'QTabs',
@@ -9425,12 +9482,15 @@ var QTabs = 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);
@@ -9445,10 +9505,11 @@ var QTabs = 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;
@@ -9467,6 +9528,19 @@ var QTabs = 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'
@@ -9508,7 +9582,7 @@ var QTabs = createComponent({
     });
 
     watch(() => props.outsideArrows, () => {
-      nextTick(recalculateScroll());
+      recalculateScroll();
     });
 
     watch(arrowsEnabled, v => {
@@ -9516,12 +9590,15 @@ var QTabs = 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
@@ -9530,20 +9607,14 @@ var QTabs = 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
+        });
       });
     }
 
@@ -9565,27 +9636,21 @@ var QTabs = 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);
-
-      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) {
@@ -9609,7 +9674,7 @@ var QTabs = 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';
@@ -9664,8 +9729,6 @@ var QTabs = createComponent({
 
     function animScrollTo (value) {
       stopAnimScroll();
-      scrollTowards(value);
-
       scrollTimer = setInterval(() => {
         if (scrollTowards(value) === true) {
           stopAnimScroll();
@@ -9696,10 +9759,12 @@ var QTabs = 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
       }
 
@@ -9765,77 +9830,113 @@ var QTabs = 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;
+          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) {
@@ -9853,6 +9954,7 @@ var QTabs = 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);
         }
       }
     }
@@ -9862,22 +9964,52 @@ var QTabs = 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();
+        }
       }
     }
 
@@ -9889,16 +10021,18 @@ var QTabs = 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();
       }
     }
@@ -9907,33 +10041,38 @@ var QTabs = 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 shouldActivate = false;
+    let hadRouteWatcher;
+
+    onBeforeUnmount(cleanup);
 
     onDeactivated(() => {
-      shouldActivate = true;
+      hadRouteWatcher = unwatchRoute !== void 0;
+      cleanup();
     });
 
     onActivated(() => {
-      shouldActivate === true && recalculateScroll();
+      hadRouteWatcher === true && watchRoute();
+      recalculateScroll();
     });
 
     return () => {
@@ -9952,22 +10091,22 @@ var QTabs = 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
         })
       );
 
@@ -9982,7 +10121,7 @@ var QTabs = createComponent({
   }
 });
 
-let uid$2 = 0;
+let id$1 = 0;
 
 const useTabEmits = [ 'click', 'keydown' ];
 
@@ -9995,7 +10134,7 @@ const useTabProps = {
 
   name: {
     type: [ Number, String ],
-    default: () => `t_${ uid$2++ }`
+    default: () => `t_${ id$1++ }`
   },
 
   noCaps: Boolean,
@@ -10011,7 +10150,7 @@ const useTabProps = {
   }
 };
 
-function useTab (props, slots, emit, routerProps) {
+function useTab (props, slots, emit, routeData) {
   const $tabs = inject(tabsKey, () => {
     console.error('QTab/QRouteTab component needs to be child of QTabs');
   });
@@ -10048,7 +10187,7 @@ function useTab (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(() =>
@@ -10058,53 +10197,77 @@ function useTab (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 (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) {
@@ -10178,17 +10341,15 @@ function useTab (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) {
@@ -14566,7 +14727,7 @@ var QDialog = createComponent({
     );
 
     const { preventBodyScroll } = usePreventScroll();
-    const { registerTimeout, removeTimeout } = useTimeout();
+    const { registerTimeout } = useTimeout();
     const { registerTick, removeTick } = useTick();
 
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
@@ -14651,8 +14812,6 @@ var QDialog = createComponent({
     });
 
     function handleShow (evt) {
-      removeTimeout();
-      removeTick();
       addToHistory();
 
       refocusTarget = props.noRefocus === false && document.activeElement !== null
@@ -14667,7 +14826,11 @@ var QDialog = createComponent({
         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) {
@@ -14703,7 +14866,6 @@ var QDialog = createComponent({
     }
 
     function handleHide (evt) {
-      removeTimeout();
       removeTick();
       removeFromHistory();
       cleanup(true);
@@ -14715,6 +14877,7 @@ var QDialog = createComponent({
         refocusTarget = null;
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true); // done hiding, now destroy
         animating.value = false;
@@ -14948,7 +15111,7 @@ var QDrawer = createComponent({
 
     const isDark = useDark(props, $q);
     const { preventBodyScroll } = usePreventScroll();
-    const { registerTimeout } = useTimeout();
+    const { registerTimeout, removeTimeout } = useTimeout();
 
     const $layout = inject(layoutKey, () => {
       console.error('QDrawer needs to be child of QLayout');
@@ -15018,9 +15181,12 @@ var QDrawer = createComponent({
 
       cleanup();
 
-      noEvent !== true && registerTimeout(() => {
-        emit('hide', evt);
-      }, duration);
+      if (noEvent !== true) {
+        registerTimeout(() => { emit('hide', evt); }, duration);
+      }
+      else {
+        removeTimeout();
+      }
     }
 
     const { show, hide } = useModelToggle({
@@ -16009,7 +16175,7 @@ var QTooltip = createComponent({
     const hideOnRouteChange = 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);
 
@@ -16063,11 +16229,9 @@ var QTooltip = createComponent({
     }
 
     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 });
@@ -16082,6 +16246,7 @@ var QTooltip = createComponent({
         );
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         showPortal(true); // done showing portal
         emit('show', evt);
@@ -16090,11 +16255,11 @@ var QTooltip = createComponent({
 
     function handleHide (evt) {
       removeTick();
-      removeTimeout();
       hidePortal();
 
       anchorCleanup();
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true); // done hiding, now destroy
         emit('hide', evt);
@@ -16146,14 +16311,10 @@ var QTooltip = createComponent({
         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();
@@ -16163,9 +16324,8 @@ var QTooltip = createComponent({
         }, 10);
       }
 
-      registerTimeout(() => {
-        hide(evt);
-      }, props.hideDelay);
+      // should removeTimeout() if this gets removed
+      registerTimeout(() => { hide(evt); }, props.hideDelay);
     }
 
     function configureAnchorEl () {
@@ -16261,7 +16421,7 @@ var QItem = createComponent({
     const { proxy: { $q } } = getCurrentInstance();
 
     const isDark = useDark(props, $q);
-    const { hasRouterLink, hasLink, linkProps, linkClass, linkTag, navigateToRouterLink } = useRouterLink();
+    const { hasLink, linkAttrs, linkClass, linkTag, navigateOnClick } = useRouterLink();
 
     const rootRef = ref(null);
     const blurTargetRef = ref(null);
@@ -16285,7 +16445,7 @@ var QItem = createComponent({
           ? linkClass.value
           : (
               props.active === true
-                ? `${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' } q-item--active`
+                ? ` q-item--active${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' }`
                 : ''
             )
       )
@@ -16321,8 +16481,7 @@ var QItem = createComponent({
           }
         }
 
-        hasRouterLink.value === true && navigateToRouterLink(e);
-        emit('click', e);
+        navigateOnClick(e);
       }
     }
 
@@ -16363,7 +16522,7 @@ var QItem = createComponent({
 
       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';
@@ -16716,24 +16875,21 @@ function useSplitAttrs (attrs, vnode) {
 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' ]
+      .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
   }
 
@@ -16757,7 +16913,7 @@ function extend () {
     i = 2;
   }
 
-  if (Object(target) !== target && type(target) !== 'function') {
+  if (Object(target) !== target && typeof target !== 'function') {
     target = {};
   }
 
@@ -16776,13 +16932,16 @@ function extend () {
           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);
@@ -17604,7 +17763,7 @@ var QExpansionItem = createComponent({
     );
 
     const blurTargetRef = ref(null);
-    const targetUid = uid$4();
+    const targetUid = uid$3();
 
     const { show, hide, toggle } = useModelToggle({ showing });
 
@@ -17708,7 +17867,7 @@ var QExpansionItem = createComponent({
 
     function enterGroup () {
       if (uniqueId === void 0) {
-        uniqueId = uid$4();
+        uniqueId = uid$3();
       }
 
       if (showing.value === true) {
@@ -18025,7 +18184,7 @@ var QFab = createComponent({
   setup (props, { slots }) {
     const triggerRef = ref(null);
     const showing = ref(props.modelValue === true);
-    const targetUid = uid$4();
+    const targetUid = uid$3();
 
     const { proxy: { $q } } = getCurrentInstance();
     const { formClass, labelProps } = useFab(props, showing);
@@ -18474,7 +18633,7 @@ function useValidate (focused, innerLoading) {
 }
 
 function getTargetUid (val) {
-  return val === void 0 ? `f_${ uid$4() }` : val
+  return val === void 0 ? `f_${ uid$3() }` : val
 }
 
 function fieldValueIsFilled (val) {
@@ -22756,8 +22915,7 @@ var QNoSsr = createComponent({
 const svg$m = h('svg', {
   key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
-  viewBox: '0 0 24 24',
-  'aria-hidden': 'true'
+  viewBox: '0 0 24 24'
 }, [
   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'
@@ -22902,7 +23060,8 @@ var QRadio = createComponent({
       const child = [
         h('div', {
           class: innerClass.value,
-          style: sizeStyle.value
+          style: sizeStyle.value,
+          'aria-hidden': 'true'
         }, content)
       ];
 
@@ -24079,16 +24238,13 @@ var QPopupEdit = createComponent({
     let validated = false;
 
     const scope = 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 () {
@@ -25025,6 +25181,8 @@ var QRating = createComponent({
     iconHalf: [ String, Array ],
     iconSelected: [ String, Array ],
 
+    iconAriaLabel: [ String, Array ],
+
     color: [ String, Array ],
     colorHalf: [ String, Array ],
     colorSelected: [ String, Array ],
@@ -25090,11 +25248,29 @@ var QRating = createComponent({
       }
     });
 
+    const iconLabel = 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 = 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
@@ -25111,7 +25287,16 @@ var QRating = createComponent({
                 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: (
@@ -25124,7 +25309,14 @@ var QRating = createComponent({
                 )
           ) || $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' : '')
@@ -25136,15 +25328,17 @@ var QRating = createComponent({
     });
 
     const attributes = 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 = computed(() => (editable.value === true ? 0 : null));
+      return attrs
+    });
 
     function set (value) {
       if (editable.value === true) {
@@ -25195,7 +25389,7 @@ var QRating = createComponent({
     return () => {
       const child = [];
 
-      stars.value.forEach(({ classes, name }, index) => {
+      stars.value.forEach(({ iconClass, name, attrs }, index) => {
         const i = index + 1;
 
         child.push(
@@ -25203,7 +25397,7 @@ var QRating = createComponent({
             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,
@@ -25212,7 +25406,7 @@ var QRating = createComponent({
             onKeyup (e) { onKeyup(e, i); }
           }, hMergeSlot(
             slots[ `tip-${ i }` ],
-            [ h(QIcon, { class: classes, name }) ]
+            [ h(QIcon, { class: iconClass, name }) ]
           ))
         );
       });
@@ -30662,10 +30856,12 @@ var QStep = createComponent({
       default: true
     },
     done: Boolean,
-    error: Boolean
+    error: Boolean,
+
+    onScroll: [ Function, Array ]
   },
 
-  setup (props, { attrs, slots }) {
+  setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance();
 
     const $stepper = inject(stepperKey, () => {
@@ -30689,7 +30885,7 @@ var QStep = createComponent({
               if (target.scrollTop > 0) {
                 target.scrollTop = 0;
               }
-              attrs.onScroll !== void 0 && attrs.onScroll(e);
+              props.onScroll !== void 0 && emit('scroll', e);
             }
           }
     ));
@@ -32158,11 +32354,9 @@ var QTable = createComponent({
     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
     }
@@ -32801,7 +32995,9 @@ var QRouteTab = createComponent({
   emits: useTabEmits,
 
   setup (props, { slots, emit }) {
-    const rData = useRouterLink();
+    const routeData = useRouterLink({
+      useDisableForRouterLinkProps: false
+    });
 
     const { renderTab, $tabs } = useTab(
       props,
@@ -32809,15 +33005,15 @@ var QRouteTab = createComponent({
       emit,
       {
         exact: computed(() => props.exact),
-        ...rData
+        ...routeData
       }
     );
 
-    watch(() => props.name + props.exact + (rData.linkRoute.value || {}).href, () => {
+    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)
   }
 });
 
@@ -34510,7 +34706,7 @@ var QTree = createComponent({
           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 {
@@ -37196,7 +37392,7 @@ var TouchRepeat = createDirective({
 
         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', [
@@ -39802,7 +39998,7 @@ function parsePromises (sequentialPromises) {
  *                   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):
@@ -39887,10 +40083,10 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.8.4',
+  version: '2.9.1',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7
 };
 
-export { AddressbarColor, Plugin$6 as AppFullscreen, Plugin$5 as AppVisibility, BottomSheet, ClosePopup, Plugin$4 as Cookies, Plugin$9 as Dark, Dialog, EventBus, Intersection, Plugin$2 as Loading, Plugin$3 as LoadingBar, Plugin$1 as LocalStorage, Meta, Morph, Mutation, Notify, Platform, QAjaxBar, QAvatar, QBadge, QBanner, QBar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QBtnDropdown, QBtnGroup, QBtnToggle, QCard, QCardActions, QCardSection, QCarousel, QCarouselControl, QCarouselSlide, QChatMessage, QCheckbox, QChip, QCircularProgress, QColor, QDate, QDialog, QDrawer, QEditor, QExpansionItem, QFab, QFabAction, QField, QFile, QFooter, QForm, QFormChildMixin, QHeader, QIcon, QImg, QInfiniteScroll, QInnerLoading, QInput, QIntersection, QItem, QItemLabel, QItemSection, QKnob, QLayout, QLinearProgress, QList, QMarkupTable, QMenu, QNoSsr, QOptionGroup, QPage, QPageContainer, QPageScroller, QPageSticky, QPagination, QParallax, QPopupEdit, QPopupProxy, QPullToRefresh, QRadio, QRange, QRating, QResizeObserver, QResponsive, QRouteTab, QScrollArea, QScrollObserver, QSelect, QSeparator, QSkeleton, QSlideItem, QSlideTransition, QSlider, QSpace, QSpinner, QSpinnerAudio, QSpinnerBall, QSpinnerBars, QSpinnerBox, QSpinnerClock, QSpinnerComment, QSpinnerCube, QSpinnerDots, QSpinnerFacebook, QSpinnerGears, QSpinnerGrid, QSpinnerHearts, QSpinnerHourglass, QSpinnerInfinity, QSpinnerIos, QSpinnerOrbit, QSpinnerOval, QSpinnerPie, QSpinnerPuff, QSpinnerRadio, QSpinnerRings, QSpinnerTail, QSplitter, QStep, QStepper, QStepperNavigation, QTab, QTabPanel, QTabPanels, QTable, QTabs, QTd, QTh, QTime, QTimeline, QTimelineEntry, QToggle, QToolbar, QToolbarTitle, QTooltip, QTr, QTree, QUploader, QUploaderAddTrigger, QVideo, QVirtualScroll, Quasar, Ripple, Screen, Scroll, ScrollFire, Plugin as SessionStorage, TouchHold, TouchPan, TouchRepeat, TouchSwipe, cloneDeep as clone, colors, copyToClipboard, createMetaMixin, createUploaderComponent, date, debounce, dom, event, exportFile, extend, format, frameDebounce, getCssVar, is, morph, noop, openUrl as openURL, patterns, runSequentialPromises, scroll, setCssVar, throttle, uid$4 as uid, useDialogPluginComponent, useFormChild, useMeta, useQuasar };
+export { AddressbarColor, Plugin$6 as AppFullscreen, Plugin$5 as AppVisibility, BottomSheet, ClosePopup, Plugin$4 as Cookies, Plugin$9 as Dark, Dialog, EventBus, Intersection, Plugin$2 as Loading, Plugin$3 as LoadingBar, Plugin$1 as LocalStorage, Meta, Morph, Mutation, Notify, Platform, QAjaxBar, QAvatar, QBadge, QBanner, QBar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QBtnDropdown, QBtnGroup, QBtnToggle, QCard, QCardActions, QCardSection, QCarousel, QCarouselControl, QCarouselSlide, QChatMessage, QCheckbox, QChip, QCircularProgress, QColor, QDate, QDialog, QDrawer, QEditor, QExpansionItem, QFab, QFabAction, QField, QFile, QFooter, QForm, QFormChildMixin, QHeader, QIcon, QImg, QInfiniteScroll, QInnerLoading, QInput, QIntersection, QItem, QItemLabel, QItemSection, QKnob, QLayout, QLinearProgress, QList, QMarkupTable, QMenu, QNoSsr, QOptionGroup, QPage, QPageContainer, QPageScroller, QPageSticky, QPagination, QParallax, QPopupEdit, QPopupProxy, QPullToRefresh, QRadio, QRange, QRating, QResizeObserver, QResponsive, QRouteTab, QScrollArea, QScrollObserver, QSelect, QSeparator, QSkeleton, QSlideItem, QSlideTransition, QSlider, QSpace, QSpinner, QSpinnerAudio, QSpinnerBall, QSpinnerBars, QSpinnerBox, QSpinnerClock, QSpinnerComment, QSpinnerCube, QSpinnerDots, QSpinnerFacebook, QSpinnerGears, QSpinnerGrid, QSpinnerHearts, QSpinnerHourglass, QSpinnerInfinity, QSpinnerIos, QSpinnerOrbit, QSpinnerOval, QSpinnerPie, QSpinnerPuff, QSpinnerRadio, QSpinnerRings, QSpinnerTail, QSplitter, QStep, QStepper, QStepperNavigation, QTab, QTabPanel, QTabPanels, QTable, QTabs, QTd, QTh, QTime, QTimeline, QTimelineEntry, QToggle, QToolbar, QToolbarTitle, QTooltip, QTr, QTree, QUploader, QUploaderAddTrigger, QVideo, QVirtualScroll, Quasar, Ripple, Screen, Scroll, ScrollFire, Plugin as SessionStorage, TouchHold, TouchPan, TouchRepeat, TouchSwipe, cloneDeep as clone, colors, copyToClipboard, createMetaMixin, createUploaderComponent, date, debounce, dom, event, exportFile, extend, format, frameDebounce, getCssVar, is, morph, noop, openUrl as openURL, patterns, runSequentialPromises, scroll, setCssVar, throttle, uid$3 as uid, useDialogPluginComponent, useFormChild, useMeta, useQuasar };