quasar 2.11.3 → 2.11.5

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.3
+ * Quasar Framework v2.11.5
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -557,27 +557,30 @@
   };
 
   function debounce (fn, wait = 250, immediate) {
-    let timeout;
+    let timer = null;
 
     function debounced (/* ...args */) {
       const args = arguments;
 
       const later = () => {
-        timeout = void 0;
+        timer = null;
         if (immediate !== true) {
           fn.apply(this, args);
         }
       };
 
-      clearTimeout(timeout);
-      if (immediate === true && timeout === void 0) {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      else if (immediate === true) {
         fn.apply(this, args);
       }
-      timeout = setTimeout(later, wait);
+
+      timer = setTimeout(later, wait);
     }
 
     debounced.cancel = () => {
-      clearTimeout(timeout);
+      timer !== null && clearTimeout(timer);
     };
 
     return debounced
@@ -1473,20 +1476,23 @@
           return false
         }
 
-        i = a.entries().next();
+        let iter = a.entries();
+
+        i = iter.next();
         while (i.done !== true) {
           if (b.has(i.value[ 0 ]) !== true) {
             return false
           }
-          i = i.next();
+          i = iter.next();
         }
 
-        i = a.entries().next();
+        iter = a.entries();
+        i = iter.next();
         while (i.done !== true) {
           if (isDeepEqual(i.value[ 1 ], b.get(i.value[ 0 ])) !== true) {
             return false
           }
-          i = i.next();
+          i = iter.next();
         }
 
         return true
@@ -1497,12 +1503,14 @@
           return false
         }
 
-        i = a.entries().next();
+        const iter = a.entries();
+
+        i = iter.next();
         while (i.done !== true) {
           if (b.has(i.value[ 0 ]) !== true) {
             return false
           }
-          i = i.next();
+          i = iter.next();
         }
 
         return true
@@ -1645,7 +1653,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.11.3' };
+      const $q = { version: '2.11.5' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1844,7 +1852,7 @@
       const onScreen = vue.ref(false);
       const animate = vue.ref(true);
 
-      let sessions = 0, timer, speed;
+      let sessions = 0, timer = null, speed;
 
       const classes = vue.computed(() =>
         `q-loading-bar q-loading-bar--${ props.position }`
@@ -1896,19 +1904,21 @@
           if (oldSpeed === 0 && newSpeed > 0) {
             planNextStep();
           }
-          else if (oldSpeed > 0 && newSpeed <= 0) {
+          else if (timer !== null && oldSpeed > 0 && newSpeed <= 0) {
             clearTimeout(timer);
+            timer = null;
           }
 
           return sessions
         }
 
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
         emit('start');
 
         progress.value = 0;
 
         timer = setTimeout(() => {
+          timer = null;
           animate.value = true;
           newSpeed > 0 && planNextStep();
         }, onScreen.value === true ? 500 : 1);
@@ -1935,13 +1945,18 @@
           return sessions
         }
 
-        clearTimeout(timer);
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
+
         emit('stop');
 
         const end = () => {
           animate.value = true;
           progress.value = 100;
           timer = setTimeout(() => {
+            timer = null;
             onScreen.value = false;
           }, 1000);
         };
@@ -1959,6 +1974,7 @@
       function planNextStep () {
         if (progress.value < 100) {
           timer = setTimeout(() => {
+            timer = null;
             increment();
             planNextStep();
           }, speed);
@@ -1979,7 +1995,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
         hijacked === true && restoreAjax(start);
       });
 
@@ -3583,7 +3599,7 @@
       const rootRef = vue.ref(null);
       const blurTargetRef = vue.ref(null);
 
-      let localTouchTargetEl = null, avoidMouseRipple, mouseTimer;
+      let localTouchTargetEl = null, avoidMouseRipple, mouseTimer = null;
 
       const hasLabel = vue.computed(() =>
         props.label !== void 0 && props.label !== null && props.label !== ''
@@ -3729,8 +3745,9 @@
         // avoid duplicated mousedown event
         // triggering another early ripple
         avoidMouseRipple = true;
-        clearTimeout(mouseTimer);
+        mouseTimer !== null && clearTimeout(mouseTimer);
         mouseTimer = setTimeout(() => {
+          mouseTimer = null;
           avoidMouseRipple = false;
         }, 200);
       }
@@ -3976,7 +3993,7 @@
 
     const anchorEl = vue.ref(null);
 
-    let touchTimer;
+    let touchTimer = null;
 
     function canShow (evt) {
       // abort with no parent configured or on multi-touch
@@ -4035,6 +4052,7 @@
           ]);
 
           touchTimer = setTimeout(() => {
+            touchTimer = null;
             proxy.show(evt);
             evt.qAnchorHandled = true;
           }, 300);
@@ -4042,7 +4060,11 @@
 
         mobileCleanup (evt) {
           anchorEl.value.classList.remove('non-selectable');
-          clearTimeout(touchTimer);
+
+          if (touchTimer !== null) {
+            clearTimeout(touchTimer);
+            touchTimer = null;
+          }
 
           if (showing.value === true && evt !== void 0) {
             clearSelection();
@@ -4156,7 +4178,7 @@
     });
 
     vue.onBeforeUnmount(() => {
-      clearTimeout(touchTimer);
+      touchTimer !== null && clearTimeout(touchTimer);
       unconfigureAnchorEl();
     });
 
@@ -4397,15 +4419,18 @@
     queue = queue.filter(entry => entry !== fn);
   }
 
-  const globalNodes = [];
+  const nodesList = [];
+  const portalTypeList = [];
+
+  let portalIndex = 1;
   let target = document.body;
 
-  function createGlobalNode (id) {
+  function createGlobalNode (id, portalType) {
     const el = document.createElement('div');
 
-    if (id !== void 0) {
-      el.id = id;
-    }
+    el.id = portalType !== void 0
+      ? `q-portal--${ portalType }--${ portalIndex++ }`
+      : id;
 
     if (globalConfig.globalNodes !== void 0) {
       const cls = globalConfig.globalNodes.class;
@@ -4415,25 +4440,53 @@
     }
 
     target.appendChild(el);
-    globalNodes.push(el);
+    nodesList.push(el);
+    portalTypeList.push(portalType);
 
     return el
   }
 
   function removeGlobalNode (el) {
-    globalNodes.splice(globalNodes.indexOf(el), 1);
+    const nodeIndex = nodesList.indexOf(el);
+
+    nodesList.splice(nodeIndex, 1);
+    portalTypeList.splice(nodeIndex, 1);
+
     el.remove();
   }
 
-  function changeGlobalNodesTarget (el) {
-    if (el !== target) {
-      target = el;
+  function changeGlobalNodesTarget (newTarget) {
+    if (newTarget === target) {
+      return
+    }
+
+    target = newTarget;
 
-      globalNodes.forEach(el => {
-        if (el.contains(target) === false) {
-          target.appendChild(el);
+    if (
+      target === document.body
+      // or we have less than 2 dialogs:
+      || portalTypeList.reduce((acc, type) => (type === 'dialog' ? acc + 1 : acc), 0) < 2
+    ) {
+      nodesList.forEach(node => {
+        if (node.contains(target) === false) {
+          target.appendChild(node);
         }
       });
+
+      return
+    }
+
+    const lastDialogIndex = portalTypeList.lastIndexOf('dialog');
+
+    for (let i = 0; i < nodesList.length; i++) {
+      const el = nodesList[ i ];
+
+      if (
+        (i === lastDialogIndex || portalTypeList[ i ] !== 'dialog')
+        && el.contains(target) === false
+      ) {
+        target.appendChild(el);
+      }
     }
   }
 
@@ -4512,7 +4565,7 @@
   // Warning!
   // You MUST specify "inheritAttrs: false" in your component
 
-  function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
+  function usePortal (vm, innerRef, renderPortalContent, type) {
     // showing, including while in show/hide transition
     const portalIsActive = vue.ref(false);
 
@@ -4521,7 +4574,7 @@
 
     let portalEl = null;
     const focusObj = {};
-    const onGlobalDialog = checkGlobalDialog === true && isOnGlobalDialog(vm);
+    const onGlobalDialog = type === 'dialog' && isOnGlobalDialog(vm);
 
     function showPortal (isReady) {
       if (isReady === true) {
@@ -4534,7 +4587,7 @@
 
       if (portalIsActive.value === false) {
         if (onGlobalDialog === false && portalEl === null) {
-          portalEl = createGlobalNode();
+          portalEl = createGlobalNode(false, type);
         }
 
         portalIsActive.value = true;
@@ -4675,11 +4728,14 @@
    */
 
   function useTimeout () {
-    let timer;
+    let timer = null;
     const vm = vue.getCurrentInstance();
 
     function removeTimeout () {
-      clearTimeout(timer);
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
     }
 
     vue.onDeactivated(removeTimeout);
@@ -4689,7 +4745,7 @@
       removeTimeout,
 
       registerTimeout (fn, delay) {
-        clearTimeout(timer);
+        removeTimeout();
 
         if (vmIsDestroyed(vm) === false) {
           timer = setTimeout(fn, delay);
@@ -4971,14 +5027,11 @@
     }
   }
 
-  let timer;
-
   const
     { notPassiveCapture } = listenOpts,
     registeredList = [];
 
   function globalHandler (evt) {
-    clearTimeout(timer);
 
     const target = evt.target;
 
@@ -5051,7 +5104,7 @@
       registeredList.splice(index, 1);
 
       if (registeredList.length === 0) {
-        clearTimeout(timer);
+
         document.removeEventListener('mousedown', globalHandler, notPassiveCapture);
         document.removeEventListener('touchstart', globalHandler, notPassiveCapture);
       }
@@ -5119,17 +5172,32 @@
     }
 
     return {
-      top,
-      left,
-      right,
-      bottom,
-      width,
-      height,
+      top, bottom, height,
+      left, right, width,
       middle: left + (right - left) / 2,
       center: top + (bottom - top) / 2
     }
   }
 
+  function getAbsoluteAnchorProps (el, absoluteOffset, offset) {
+    let { top, left } = el.getBoundingClientRect();
+
+    top += absoluteOffset.top;
+    left += absoluteOffset.left;
+
+    if (offset !== void 0) {
+      top += offset[ 1 ];
+      left += offset[ 0 ];
+    }
+
+    return {
+      top, bottom: top + 1, height: 1,
+      left, right: left + 1, width: 1,
+      middle: left,
+      center: top
+    }
+  }
+
   function getTargetProps (el) {
     return {
       top: 0,
@@ -5141,6 +5209,13 @@
     }
   }
 
+  function getTopLeftProps (anchorProps, targetProps, cfg) {
+    return {
+      top: anchorProps[ cfg.anchorOrigin.vertical ] - targetProps[ cfg.selfOrigin.vertical ],
+      left: anchorProps[ cfg.anchorOrigin.horizontal ] - targetProps[ cfg.selfOrigin.horizontal ]
+    }
+  }
+
   // cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, maxHeight, maxWidth }
   function setPosition (cfg) {
     if (client.is.ios === true && window.visualViewport !== void 0) {
@@ -5159,25 +5234,15 @@
       }
     }
 
-    let anchorProps;
-
     // scroll position might change
     // if max-height/-width changes, so we
     // need to restore it after we calculate
     // the new positioning
     const { scrollLeft, scrollTop } = cfg.el;
 
-    if (cfg.absoluteOffset === void 0) {
-      anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [ 0, 0 ] : cfg.offset);
-    }
-    else {
-      const
-        { top: anchorTop, left: anchorLeft } = cfg.anchorEl.getBoundingClientRect(),
-        top = anchorTop + cfg.absoluteOffset.top,
-        left = anchorLeft + cfg.absoluteOffset.left;
-
-      anchorProps = { top, left, width: 1, height: 1, right: left + 1, center: top, middle: left, bottom: top + 1 };
-    }
+    const anchorProps = cfg.absoluteOffset === void 0
+      ? getAnchorProps(cfg.anchorEl, cfg.cover === true ? [ 0, 0 ] : cfg.offset)
+      : getAbsoluteAnchorProps(cfg.anchorEl, cfg.absoluteOffset, cfg.offset);
 
     let elStyle = {
       maxHeight: cfg.maxHeight,
@@ -5194,14 +5259,44 @@
 
     Object.assign(cfg.el.style, elStyle);
 
-    const
-      targetProps = getTargetProps(cfg.el),
-      props = {
-        top: anchorProps[ cfg.anchorOrigin.vertical ] - targetProps[ cfg.selfOrigin.vertical ],
-        left: anchorProps[ cfg.anchorOrigin.horizontal ] - targetProps[ cfg.selfOrigin.horizontal ]
-      };
+    const targetProps = getTargetProps(cfg.el);
+    let props = getTopLeftProps(anchorProps, targetProps, cfg);
 
-    applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin);
+    if (cfg.absoluteOffset === void 0 || cfg.offset === void 0) {
+      applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin);
+    }
+    else { // we have touch position or context menu with offset
+      const { top, left } = props; // cache initial values
+
+      // apply initial boundaries
+      applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin);
+
+      let hasChanged = false;
+
+      // did it flip vertically?
+      if (props.top !== top) {
+        hasChanged = true;
+        const offsetY = 2 * cfg.offset[ 1 ];
+        anchorProps.center = anchorProps.top -= offsetY;
+        anchorProps.bottom -= offsetY + 2;
+      }
+
+      // did it flip horizontally?
+      if (props.left !== left) {
+        hasChanged = true;
+        const offsetX = 2 * cfg.offset[ 0 ];
+        anchorProps.middle = anchorProps.left -= offsetX;
+        anchorProps.right -= offsetX + 2;
+      }
+
+      if (hasChanged === true) {
+        // re-calculate props with the new anchor
+        props = getTopLeftProps(anchorProps, targetProps, cfg);
+
+        // and re-apply boundaries
+        applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin);
+      }
+    }
 
     elStyle = {
       top: props.top + 'px',
@@ -5382,7 +5477,7 @@
         processOnMount: true
       });
 
-      const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent);
+      const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'menu');
 
       const clickOutsideProps = {
         anchorEl,
@@ -6999,7 +7094,7 @@
 
       const isDark = useDark(props, $q);
 
-      let timer, panelsLen;
+      let timer = null, panelsLen;
 
       const {
         updatePanelsList, getPanelContent,
@@ -7053,7 +7148,6 @@
 
       vue.watch(() => props.modelValue, () => {
         if (props.autoplay) {
-          clearInterval(timer);
           startTimer();
         }
       });
@@ -7062,20 +7156,28 @@
         if (val) {
           startTimer();
         }
-        else {
-          clearInterval(timer);
+        else if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
         }
       });
 
       function startTimer () {
         const duration = isNumber(props.autoplay) === true
-          ? props.autoplay
+          ? Math.abs(props.autoplay)
           : 5000;
 
-        timer = setTimeout(
-          duration >= 0 ? nextPanel : previousPanel,
-          Math.abs(duration)
-        );
+        timer !== null && clearTimeout(timer);
+        timer = setTimeout(() => {
+          timer = null;
+
+          if (duration >= 0) {
+            nextPanel();
+          }
+          else {
+            previousPanel();
+          }
+        }, duration);
       }
 
       vue.onMounted(() => {
@@ -7083,7 +7185,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearInterval(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       function getNavigationContainer (type, mapping) {
@@ -9401,8 +9503,10 @@
       }
 
       function emitEvent () {
-        clearTimeout(timer);
-        timer = null;
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
 
         if (targetEl) {
           const { offsetWidth: width, offsetHeight: height } = targetEl;
@@ -9436,7 +9540,7 @@
         vue.onMounted(() => { init(); });
 
         vue.onBeforeUnmount(() => {
-          clearTimeout(timer);
+          timer !== null && clearTimeout(timer);
 
           if (observer !== void 0) {
             if (observer.disconnect !== void 0) {
@@ -9456,7 +9560,10 @@
         let curDocView;
 
         function cleanup () {
-          clearTimeout(timer);
+          if (timer !== null) {
+            clearTimeout(timer);
+            timer = null;
+          }
 
           if (curDocView !== void 0) {
             // iOS is fuzzy, need to check it first
@@ -9609,7 +9716,7 @@
       const tabDataListLen = vue.ref(0);
       const hasFocus = vue.ref(false);
 
-      let animateTimer, scrollTimer, unwatchRoute;
+      let animateTimer = null, scrollTimer = null, unwatchRoute;
 
       const tabProps = vue.computed(() => ({
         activeClass: props.activeClass,
@@ -9745,7 +9852,10 @@
             oldEl = oldTab.tabIndicatorRef.value,
             newEl = newTab.tabIndicatorRef.value;
 
-          clearTimeout(animateTimer);
+          if (animateTimer !== null) {
+            clearTimeout(animateTimer);
+            animateTimer = null;
+          }
 
           oldEl.style.transition = 'none';
           oldEl.style.transform = 'none';
@@ -9763,6 +9873,7 @@
           // allow scope updates to kick in (QRouteTab needs more time)
           registerAnimateTick(() => {
             animateTimer = setTimeout(() => {
+              animateTimer = null;
               newEl.style.transition = 'transform .25s cubic-bezier(.4, 0, .2, 1)';
               newEl.style.transform = 'none';
             }, 70);
@@ -9815,7 +9926,7 @@
       }
 
       function animScrollTo (value) {
-        stopAnimScroll();
+        scrollTimer !== null && clearInterval(scrollTimer);
         scrollTimer = setInterval(() => {
           if (scrollTowards(value) === true) {
             stopAnimScroll();
@@ -9832,7 +9943,10 @@
       }
 
       function stopAnimScroll () {
-        clearInterval(scrollTimer);
+        if (scrollTimer !== null) {
+          clearInterval(scrollTimer);
+          scrollTimer = null;
+        }
       }
 
       function onKbdNavigate (keyCode, fromEl) {
@@ -10136,7 +10250,7 @@
       vue.provide(tabsKey, $tabs);
 
       function cleanup () {
-        clearTimeout(animateTimer);
+        animateTimer !== null && clearTimeout(animateTimer);
         stopAnimScroll();
         unwatchRoute !== void 0 && unwatchRoute();
       }
@@ -14528,7 +14642,8 @@
     vpPendingUpdate = false,
     bodyLeft,
     bodyTop,
-    closeTimer;
+    href,
+    closeTimer = null;
 
   function onWheel (e) {
     if (shouldPreventScroll(e)) {
@@ -14614,6 +14729,8 @@
       bodyLeft = body.style.left;
       bodyTop = body.style.top;
 
+      href = window.location.href;
+
       body.style.left = `-${ scrollPositionX }px`;
       body.style.top = `-${ scrollPositionY }px`;
 
@@ -14626,6 +14743,7 @@
 
       body.classList.add('q-body--prevent-scroll');
       document.qScrollPrevented = true;
+
       if (client.is.ios === true) {
         if (hasViewport === true) {
           window.scrollTo(0, 0);
@@ -14664,7 +14782,11 @@
       body.style.left = bodyLeft;
       body.style.top = bodyTop;
 
-      window.scrollTo(scrollPositionX, scrollPositionY);
+      // scroll back only if route has not changed
+      if (window.location.href === href) {
+        window.scrollTo(scrollPositionX, scrollPositionY);
+      }
+
       maxScrollTop = void 0;
     }
   }
@@ -14675,9 +14797,9 @@
     if (state === true) {
       registered++;
 
-      if (closeTimer !== void 0) {
+      if (closeTimer !== null) {
         clearTimeout(closeTimer);
-        closeTimer = void 0;
+        closeTimer = null;
         return
       }
 
@@ -14699,11 +14821,10 @@
       action = 'remove';
 
       if (client.is.ios === true && client.is.nativeMobile === true) {
-        clearTimeout(closeTimer);
-
+        closeTimer !== null && clearTimeout(closeTimer);
         closeTimer = setTimeout(() => {
           apply$1(action);
-          closeTimer = void 0;
+          closeTimer = null;
         }, 100);
         return
       }
@@ -14792,12 +14913,13 @@
 
     setup (props, { slots, emit, attrs }) {
       const vm = vue.getCurrentInstance();
+      const { proxy: { $q } } = vm;
 
       const innerRef = vue.ref(null);
       const showing = vue.ref(false);
       const animating = vue.ref(false);
 
-      let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
+      let shakeTimeout = null, refocusTarget = null, isMaximized, avoidAutoClose;
 
       const hideOnRouteChange = vue.computed(() =>
         props.persistent !== true
@@ -14816,7 +14938,7 @@
       );
 
       const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
-        vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
+        vm, innerRef, renderPortalContent, 'dialog'
       );
 
       const { hide } = useModelToggle({
@@ -14979,8 +15101,9 @@
         if (node !== null) {
           node.classList.remove('q-animate--scale');
           node.classList.add('q-animate--scale');
-          clearTimeout(shakeTimeout);
+          shakeTimeout !== null && clearTimeout(shakeTimeout);
           shakeTimeout = setTimeout(() => {
+            shakeTimeout = null;
             if (innerRef.value !== null) {
               node.classList.remove('q-animate--scale');
               // some platforms (like desktop Chrome)
@@ -15004,7 +15127,10 @@
       }
 
       function cleanup (hiding) {
-        clearTimeout(shakeTimeout);
+        if (shakeTimeout !== null) {
+          clearTimeout(shakeTimeout);
+          shakeTimeout = null;
+        }
 
         if (hiding === true || showing.value === true) {
           updateMaximized(false);
@@ -15079,7 +15205,7 @@
 
       vue.onBeforeUnmount(cleanup);
 
-      const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin';
+      const backdropEvt = $q.platform.is.ios === true || $q.platform.is.safari ? 'onClick' : 'onFocusin';
 
       function renderPortalContent () {
         return vue.h('div', {
@@ -15195,7 +15321,7 @@
         return emptyRenderFn
       }
 
-      let lastDesktopState, timerMini, layoutTotalWidthWatcher;
+      let lastDesktopState, timerMini = null, layoutTotalWidthWatcher;
 
       const belowBreakpoint = vue.ref(
         props.behavior === 'mobile'
@@ -15570,7 +15696,7 @@
       }
 
       function animateMini () {
-        clearTimeout(timerMini);
+        timerMini !== null && clearTimeout(timerMini);
 
         if (vm.proxy && vm.proxy.$el) {
           // need to speed it up and apply it immediately,
@@ -15580,6 +15706,7 @@
 
         flagMiniAnimate.value = true;
         timerMini = setTimeout(() => {
+          timerMini = null;
           flagMiniAnimate.value = false;
           if (vm && vm.proxy && vm.proxy.$el) {
             vm.proxy.$el.classList.remove('q-drawer--mini-animate');
@@ -15732,7 +15859,11 @@
 
       vue.onBeforeUnmount(() => {
         layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher();
-        clearTimeout(timerMini);
+
+        if (timerMini !== null) {
+          clearTimeout(timerMini);
+          timerMini = null;
+        }
 
         showing.value === true && cleanup();
 
@@ -16267,7 +16398,7 @@
 
       Object.assign(anchorEvents, { delayShow, delayHide });
 
-      const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent);
+      const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'tooltip');
 
       // if we're on mobile, let's improve the experience
       // by closing it when user taps outside of it
@@ -17602,15 +17733,23 @@
 
     setup (props, { slots, emit }) {
       let animating = false, doneFn, element;
-      let timer, timerFallback, animListener, lastEvent;
+      let timer = null, timerFallback = null, animListener, lastEvent;
 
       function cleanup () {
         doneFn && doneFn();
         doneFn = null;
         animating = false;
 
-        clearTimeout(timer);
-        clearTimeout(timerFallback);
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
+
+        if (timerFallback !== null) {
+          clearTimeout(timerFallback);
+          timerFallback = null;
+        }
+
         element !== void 0 && element.removeEventListener('transitionend', animListener);
         animListener = null;
       }
@@ -17649,8 +17788,11 @@
         begin(el, pos, done);
 
         timer = setTimeout(() => {
+          timer = null;
           el.style.height = `${ el.scrollHeight }px`;
           animListener = evt => {
+            timerFallback = null;
+
             if (Object(evt) !== evt || evt.target === el) {
               end(el, 'show');
             }
@@ -17675,8 +17817,11 @@
         begin(el, pos, done);
 
         timer = setTimeout(() => {
+          timer = null;
           el.style.height = 0;
           animListener = evt => {
+            timerFallback = null;
+
             if (Object(evt) !== evt || evt.target === el) {
               end(el, 'hide');
             }
@@ -18812,7 +18957,7 @@
     const { props, emit, slots, attrs, proxy } = vue.getCurrentInstance();
     const { $q } = proxy;
 
-    let focusoutTimer;
+    let focusoutTimer = null;
 
     if (state.hasValue === void 0) {
       state.hasValue = vue.computed(() => fieldValueIsFilled(props.modelValue));
@@ -18978,7 +19123,11 @@
     }
 
     function onControlFocusin (e) {
-      clearTimeout(focusoutTimer);
+      if (focusoutTimer !== null) {
+        clearTimeout(focusoutTimer);
+        focusoutTimer = null;
+      }
+
       if (state.editable.value === true && state.focused.value === false) {
         state.focused.value = true;
         emit('focus', e);
@@ -18986,8 +19135,10 @@
     }
 
     function onControlFocusout (e, then) {
-      clearTimeout(focusoutTimer);
+      focusoutTimer !== null && clearTimeout(focusoutTimer);
       focusoutTimer = setTimeout(() => {
+        focusoutTimer = null;
+
         if (
           document.hasFocus() === true && (
             state.hasPopupOpen === true
@@ -19237,7 +19388,7 @@
     });
 
     vue.onBeforeUnmount(() => {
-      clearTimeout(focusoutTimer);
+      focusoutTimer !== null && clearTimeout(focusoutTimer);
     });
 
     // expose public methods
@@ -20540,7 +20691,7 @@
       const naturalRatio = vue.ref(props.initialRatio);
       const ratioStyle = useRatio(props, naturalRatio);
 
-      let loadTimer;
+      let loadTimer = null, isDestroyed = false;
 
       const images = [
         vue.ref(null),
@@ -20591,7 +20742,11 @@
       }
 
       function addImage (imgProps) {
-        clearTimeout(loadTimer);
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer);
+          loadTimer = null;
+        }
+
         hasError.value = false;
 
         if (imgProps === null) {
@@ -20606,10 +20761,12 @@
       }
 
       function onLoad ({ target }) {
-        // if component has been already destroyed
-        if (loadTimer === null) { return }
+        if (isDestroyed === true) { return }
 
-        clearTimeout(loadTimer);
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer);
+          loadTimer = null;
+        }
 
         naturalRatio.value = target.naturalHeight === 0
           ? 0.5
@@ -20620,21 +20777,21 @@
 
       function waitForCompleteness (target, count) {
         // protect against running forever
-        if (loadTimer === null || count === 1000) { return }
+        if (isDestroyed === true || count === 1000) { return }
 
         if (target.complete === true) {
           onReady(target);
         }
         else {
           loadTimer = setTimeout(() => {
+            loadTimer = null;
             waitForCompleteness(target, count + 1);
           }, 50);
         }
       }
 
       function onReady (img) {
-        // if component has been already destroyed
-        if (loadTimer === null) { return }
+        if (isDestroyed === true) { return }
 
         position.value = position.value ^ 1;
         images[ position.value ].value = null;
@@ -20644,7 +20801,11 @@
       }
 
       function onError (err) {
-        clearTimeout(loadTimer);
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer);
+          loadTimer = null;
+        }
+
         isLoading.value = false;
         hasError.value = true;
         images[ position.value ].value = null;
@@ -20719,8 +20880,12 @@
         }
 
         vue.onBeforeUnmount(() => {
-          clearTimeout(loadTimer);
-          loadTimer = null;
+          isDestroyed = true;
+
+          if (loadTimer !== null) {
+            clearTimeout(loadTimer);
+            loadTimer = null;
+          }
         });
       }
 
@@ -20789,6 +20954,7 @@
       const isFetching = vue.ref(false);
       const isWorking = vue.ref(true);
       const rootRef = vue.ref(null);
+      const loadingRef = vue.ref(null);
 
       let index = props.initialIndex || 0;
       let localScrollTarget, poll;
@@ -20920,12 +21086,32 @@
         }
       }
 
+      function updateSvgAnimations (isRetry) {
+        if (renderLoadingSlot.value === true) {
+          if (loadingRef.value === null) {
+            isRetry !== true && vue.nextTick(() => { updateSvgAnimations(true); });
+            return
+          }
+
+          // we need to pause svg animations (if any) when hiding
+          // otherwise the browser will keep on recalculating the style
+          const action = `${ isFetching.value === true ? 'un' : '' }pauseAnimations`;
+          Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
+            el[ action ]();
+          });
+        }
+      }
+
+      const renderLoadingSlot = vue.computed(() => props.disable !== true && isWorking.value === true);
+
+      vue.watch([ isFetching, renderLoadingSlot ], () => { updateSvgAnimations(); });
+
       vue.watch(() => props.disable, val => {
         if (val === true) { stop(); }
         else { resume(); }
       });
 
-      vue.watch(() => props.reverse, val => {
+      vue.watch(() => props.reverse, () => {
         if (isFetching.value === false && isWorking.value === true) {
           immediatePoll();
         }
@@ -20956,8 +21142,9 @@
 
       vue.onMounted(() => {
         setDebounce(props.debounce);
-
         updateScrollTarget();
+
+        isFetching.value === false && updateSvgAnimations();
       });
 
       // expose public methods
@@ -20970,9 +21157,9 @@
       return () => {
         const child = hUniqueSlot(slots.default, []);
 
-        if (props.disable !== true && isWorking.value === true) {
+        if (renderLoadingSlot.value === true) {
           child[ props.reverse === false ? 'push' : 'unshift' ](
-            vue.h('div', { class: classes.value }, hSlot(slots.loading))
+            vue.h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.loading))
           );
         }
 
@@ -21664,7 +21851,7 @@
       const { $q } = proxy;
 
       const temp = {};
-      let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer, emitValueFn;
+      let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer = null, emitValueFn;
 
       const inputRef = vue.ref(null);
       const nameProp = useFormInputNameAttr(props);
@@ -21876,6 +22063,8 @@
 
       function emitValue (val, stopWatcher) {
         emitValueFn = () => {
+          emitTimer = null;
+
           if (
             props.type !== 'number'
             && temp.hasOwnProperty('value') === true
@@ -21903,7 +22092,7 @@
         }
 
         if (props.debounce !== void 0) {
-          clearTimeout(emitTimer);
+          emitTimer !== null && clearTimeout(emitTimer);
           temp.value = val;
           emitTimer = setTimeout(emitValueFn, props.debounce);
         }
@@ -21937,7 +22126,11 @@
       function onChange (e) {
         onComposition(e);
 
-        clearTimeout(emitTimer);
+        if (emitTimer !== null) {
+          clearTimeout(emitTimer);
+          emitTimer = null;
+        }
+
         emitValueFn !== void 0 && emitValueFn();
 
         emit('change', e.target.value);
@@ -21946,7 +22139,11 @@
       function onFinishEditing (e) {
         e !== void 0 && stop(e);
 
-        clearTimeout(emitTimer);
+        if (emitTimer !== null) {
+          clearTimeout(emitTimer);
+          emitTimer = null;
+        }
+
         emitValueFn !== void 0 && emitValueFn();
 
         typedNumber = false;
@@ -22790,7 +22987,7 @@
         }
       }
 
-      let timer;
+      let animateTimer = null;
 
       const $layout = {
         instances: {},
@@ -22821,16 +23018,16 @@
         scroll,
 
         animate () {
-          if (timer !== void 0) {
-            clearTimeout(timer);
+          if (animateTimer !== null) {
+            clearTimeout(animateTimer);
           }
           else {
             document.body.classList.add('q-body--layout-animate');
           }
 
-          timer = setTimeout(() => {
+          animateTimer = setTimeout(() => {
+            animateTimer = null;
             document.body.classList.remove('q-body--layout-animate');
-            timer = void 0;
           }, 155);
         },
 
@@ -24898,6 +25095,8 @@
         });
       }
 
+      let $el, localScrollTarget, timer = null;
+
       function animateTo ({ pos, ratio }, done) {
         animating.value = true;
         pullPosition.value = pos;
@@ -24906,15 +25105,14 @@
           pullRatio.value = ratio;
         }
 
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
         timer = setTimeout(() => {
+          timer = null;
           animating.value = false;
           done && done();
         }, 300);
       }
 
-      let $el, localScrollTarget, timer;
-
       function updateScrollTarget () {
         localScrollTarget = getScrollTarget($el, props.scrollTarget);
       }
@@ -24927,7 +25125,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       // expose public methods
@@ -25559,13 +25757,13 @@
           case 37: // LEFT ARROW
           case 40: // DOWN ARROW
             if (iconRefs[ `rt${ i - 1 }` ]) {
-              iconRefs[ `rt${ i - 1 }` ].$el.focus();
+              iconRefs[ `rt${ i - 1 }` ].focus();
             }
             return stopAndPrevent(e)
           case 39: // RIGHT ARROW
           case 38: // UP ARROW
             if (iconRefs[ `rt${ i + 1 }` ]) {
-              iconRefs[ `rt${ i + 1 }` ].$el.focus();
+              iconRefs[ `rt${ i + 1 }` ].focus();
             }
             return stopAndPrevent(e)
         }
@@ -25588,7 +25786,7 @@
           child.push(
             vue.h('div', {
               key: i,
-              ref: vm => { iconRefs[ `rt${ i }` ] = vm; },
+              ref: el => { iconRefs[ `rt${ i }` ] = el; },
               class: 'q-rating__icon-container flex flex-center',
               ...attrs,
               onClick () { set(i); },
@@ -25716,7 +25914,7 @@
 
       const isDark = useDark(props, proxy.$q);
 
-      let timer, panRefPos;
+      let timer = null, panRefPos;
 
       const targetRef = vue.ref(null);
 
@@ -25965,14 +26163,14 @@
       }
 
       function startTimer () {
-        if (tempShowing.value === true) {
-          clearTimeout(timer);
-        }
-        else {
-          tempShowing.value = true;
-        }
+        tempShowing.value = true;
+
+        timer !== null && clearTimeout(timer);
+        timer = setTimeout(() => {
+          timer = null;
+          tempShowing.value = false;
+        }, props.delay);
 
-        timer = setTimeout(() => { tempShowing.value = false; }, props.delay);
         props.onScroll !== void 0 && emitScroll();
       }
 
@@ -26133,12 +26331,16 @@
         return
       }
 
-      cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+      if (contentEl._qOverflowAnimationFrame !== void 0) {
+        cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+      }
+
       contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
         if (contentEl === null) {
           return
         }
 
+        contentEl._qOverflowAnimationFrame = void 0;
         const children = contentEl.children || [];
 
         filterProto
@@ -26974,8 +27176,8 @@
       const dialogFieldFocused = vue.ref(false);
       const innerLoadingIndicator = vue.ref(false);
 
-      let inputTimer, innerValueCache,
-        hasDialog, userInputValue, filterId, defaultInputValue,
+      let inputTimer = null, innerValueCache,
+        hasDialog, userInputValue, filterId = null, defaultInputValue,
         transitionShowComputed, searchBuffer, searchBufferExp;
 
       const inputRef = vue.ref(null);
@@ -27481,7 +27683,12 @@
         }
 
         e.target.value = '';
-        clearTimeout(inputTimer);
+
+        if (inputTimer !== null) {
+          clearTimeout(inputTimer);
+          inputTimer = null;
+        }
+
         resetInputValue();
 
         if (typeof value === 'string' && value.length > 0) {
@@ -27846,7 +28053,10 @@
       }
 
       function onInput (e) {
-        clearTimeout(inputTimer);
+        if (inputTimer !== null) {
+          clearTimeout(inputTimer);
+          inputTimer = null;
+        }
 
         if (e && e.target && e.target.qComposing === true) {
           return
@@ -27867,6 +28077,7 @@
 
         if (props.onFilter !== void 0) {
           inputTimer = setTimeout(() => {
+            inputTimer = null;
             filter(inputValue.value);
           }, props.inputDebounce);
         }
@@ -27920,7 +28131,7 @@
           menu.value === true && (menu.value = false);
         }, 10);
 
-        clearTimeout(filterId);
+        filterId !== null && clearTimeout(filterId);
         filterId = localFilterId;
 
         emit(
@@ -28112,8 +28323,10 @@
         }
 
         if (state.focused.value === false) {
-          clearTimeout(filterId);
-          filterId = void 0;
+          if (filterId !== null) {
+            clearTimeout(filterId);
+            filterId = null;
+          }
 
           if (state.innerLoading.value === true) {
             emit('filterAbort');
@@ -28234,7 +28447,7 @@
       updatePreState();
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(inputTimer);
+        inputTimer !== null && clearTimeout(inputTimer);
       });
 
       // expose public methods
@@ -28494,7 +28707,7 @@
 
       const contentRef = vue.ref(null);
 
-      let timer, pan = {}, dirRefs = {}, dirContentRefs = {};
+      let timer = null, pan = {}, dirRefs = {}, dirContentRefs = {};
 
       const langDir = vue.computed(() => (
         $q.lang.rtl === true
@@ -28545,7 +28758,9 @@
           if (pan.scale === 1) {
             node.style.transform = `translate${ pan.axis }(${ pan.dir * 100 }%)`;
 
+            timer !== null && clearTimeout(timer);
             timer = setTimeout(() => {
+              timer = null;
               emit(pan.showing, { reset });
               emit('action', { side: pan.showing, reset });
             }, 230);
@@ -28616,7 +28831,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       // expose public methods
@@ -36978,12 +37193,11 @@
           : (
               options.waitFor === 'transitionend'
                 ? new Promise(resolve => {
-                  const timer = setTimeout(() => {
-                    endFn();
-                  }, 400);
-
-                  const endFn = ev => {
-                    clearTimeout(timer);
+                  const endFn = () => {
+                    if (timer !== null) {
+                      clearTimeout(timer);
+                      timer = null;
+                    }
 
                     if (elTo) {
                       elTo.removeEventListener('transitionend', endFn);
@@ -36993,6 +37207,8 @@
                     resolve();
                   };
 
+                  let timer = setTimeout(endFn, 400);
+
                   elTo.addEventListener('transitionend', endFn);
                   elTo.addEventListener('transitioncancel', endFn);
                 })
@@ -37461,6 +37677,7 @@
                 : ctx.touchSensitivity;
 
               ctx.timer = setTimeout(() => {
+                ctx.timer = void 0;
                 clearSelection();
                 ctx.triggered = true;
 
@@ -37477,10 +37694,13 @@
             move (evt) {
               const { top, left } = position(evt);
               if (
-                Math.abs(left - ctx.origin.left) >= ctx.sensitivity
-                || Math.abs(top - ctx.origin.top) >= ctx.sensitivity
+                ctx.timer !== void 0 && (
+                  Math.abs(left - ctx.origin.left) >= ctx.sensitivity
+                  || Math.abs(top - ctx.origin.top) >= ctx.sensitivity
+                )
               ) {
                 clearTimeout(ctx.timer);
+                ctx.timer = void 0;
               }
             },
 
@@ -37493,8 +37713,9 @@
               if (ctx.triggered === true) {
                 evt !== void 0 && stopAndPrevent(evt);
               }
-              else {
+              else if (ctx.timer !== void 0) {
                 clearTimeout(ctx.timer);
+                ctx.timer = void 0;
               }
             }
           };
@@ -37546,7 +37767,7 @@
             cleanEvt(ctx, 'main');
             cleanEvt(ctx, 'temp');
 
-            clearTimeout(ctx.timer);
+            ctx.timer !== void 0 && clearTimeout(ctx.timer);
             ctx.styleCleanup !== void 0 && ctx.styleCleanup();
 
             delete el.__qtouchhold;
@@ -37685,6 +37906,8 @@
               };
 
               const fn = () => {
+                ctx.timer = void 0;
+
                 if (ctx.event === void 0) {
                   return
                 }
@@ -37728,8 +37951,9 @@
             },
 
             move (evt) {
-              if (ctx.event !== void 0 && shouldEnd(evt, ctx.origin) === true) {
+              if (ctx.event !== void 0 && ctx.timer !== void 0 && shouldEnd(evt, ctx.origin) === true) {
                 clearTimeout(ctx.timer);
+                ctx.timer = void 0;
               }
             },
 
@@ -37742,7 +37966,11 @@
               evt !== void 0 && ctx.event.repeatCount > 0 && stopAndPrevent(evt);
 
               cleanEvt(ctx, 'temp');
-              clearTimeout(ctx.timer);
+
+              if (ctx.timer !== void 0) {
+                clearTimeout(ctx.timer);
+                ctx.timer = void 0;
+              }
 
               ctx.event = void 0;
             }
@@ -37791,7 +38019,7 @@
           const ctx = el.__qtouchrepeat;
 
           if (ctx !== void 0) {
-            clearTimeout(ctx.timer);
+            ctx.timer !== void 0 && clearTimeout(ctx.timer);
 
             cleanEvt(ctx, 'main');
             cleanEvt(ctx, 'temp');
@@ -38255,7 +38483,7 @@
 
       let vm, emittedOK = false;
       const dialogRef = vue.ref(null);
-      const el = createGlobalNode();
+      const el = createGlobalNode(false, 'dialog');
 
       const applyState = cmd => {
         if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
@@ -38955,7 +39183,7 @@
     app,
     vm,
     uid$1 = 0,
-    timeout,
+    timeout = null,
     props = {},
     activeGroups = {};
 
@@ -39004,14 +39232,14 @@
       }
       else {
         props.uid = ++uid$1;
-        clearTimeout(timeout);
+        timeout !== null && clearTimeout(timeout);
 
         timeout = setTimeout(() => {
-          timeout = void 0;
+          timeout = null;
 
           const el = createGlobalNode('q-loading');
 
-          app = vue.createApp({
+          app = createChildApp({
             name: 'QLoading',
 
             setup () {
@@ -39073,7 +39301,7 @@
                 onAfterLeave
               }, getContent)
             }
-          });
+          }, Plugin$2.__parentApp);
 
           vm = app.mount(el);
         }, props.delay);
@@ -39117,9 +39345,9 @@
           }
         }
 
-        if (timeout !== void 0) {
+        if (timeout !== null) {
           clearTimeout(timeout);
-          timeout = void 0;
+          timeout = null;
         }
 
         Plugin$2.isActive = false;
@@ -39132,16 +39360,20 @@
       }
     },
 
-    install ({ $q }) {
+    install ({ $q, parentApp }) {
       $q.loading = this;
 
-      if ($q.config.loading !== void 0) {
-        this.setDefaults($q.config.loading);
+      {
+        Plugin$2.__parentApp = parentApp;
+
+        if ($q.config.loading !== void 0) {
+          this.setDefaults($q.config.loading);
+        }
       }
     }
   });
 
-  let updateId, currentClientMeta;
+  let updateId = null, currentClientMeta;
   const clientList = [];
 
   function normalize (meta) {
@@ -39275,6 +39507,8 @@
   }
 
   function updateClientMeta () {
+    updateId = null;
+
     const data = {
       title: '',
       titleTemplate: null,
@@ -39300,7 +39534,7 @@
   }
 
   function planClientUpdate () {
-    clearTimeout(updateId);
+    updateId !== null && clearTimeout(updateId);
     updateId = setTimeout(updateClientMeta, 50);
   }
 
@@ -39527,7 +39761,10 @@
 
     if (originalApi !== void 0) {
       // reset timeout if any
-      clearTimeout(originalApi.notif.meta.timer);
+      if (originalApi.notif.meta.timer) {
+        clearTimeout(originalApi.notif.meta.timer);
+        originalApi.notif.meta.timer = void 0;
+      }
 
       // retain uid
       notif.meta.uid = originalApi.notif.meta.uid;
@@ -39563,7 +39800,10 @@
       // ok, so it's NOT a new one
       else {
         // reset timeout if any
-        clearTimeout(original.meta.timer);
+        if (original.meta.timer) {
+          clearTimeout(original.meta.timer);
+          original.meta.timer = void 0;
+        }
 
         if (notif.badgePosition !== void 0) {
           if (badgePositions.includes(notif.badgePosition) === false) {
@@ -39593,6 +39833,7 @@
 
     if (notif.timeout > 0) {
       notif.meta.timer = setTimeout(() => {
+        notif.meta.timer = void 0;
         dismiss();
       }, notif.timeout + /* show duration */ 1000);
     }
@@ -39641,7 +39882,10 @@
   }
 
   function removeNotification (notif) {
-    clearTimeout(notif.meta.timer);
+    if (notif.meta.timer) {
+      clearTimeout(notif.meta.timer);
+      notif.meta.timer = void 0;
+    }
 
     const index = notificationsList[ notif.position ].value.indexOf(notif);
     if (index !== -1) {
@@ -40014,6 +40258,9 @@
     area.contentEditable = 'true';
     area.style.position = 'fixed'; // avoid scrolling to bottom
 
+    const fn = () => {};
+    addFocusout(fn);
+
     document.body.appendChild(area);
     area.focus();
     area.select();
@@ -40021,6 +40268,8 @@
     const res = document.execCommand('copy');
 
     area.remove();
+    removeFocusout(fn);
+
     return res
   }
 
@@ -40527,7 +40776,7 @@
    */
 
   var index_umd = {
-    version: '2.11.3',
+    version: '2.11.5',
     install (app, opts) {
       installQuasar(app, {
         components,