quasar 2.11.3 → 2.11.4

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.3
+ * Quasar Framework v2.11.4
  * (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
@@ -1645,7 +1648,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.11.3' };
+      const $q = { version: '2.11.4' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1844,7 +1847,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 +1899,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 +1940,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 +1969,7 @@
       function planNextStep () {
         if (progress.value < 100) {
           timer = setTimeout(() => {
+            timer = null;
             increment();
             planNextStep();
           }, speed);
@@ -1979,7 +1990,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
         hijacked === true && restoreAjax(start);
       });
 
@@ -3583,7 +3594,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 +3740,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 +3988,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 +4047,7 @@
           ]);
 
           touchTimer = setTimeout(() => {
+            touchTimer = null;
             proxy.show(evt);
             evt.qAnchorHandled = true;
           }, 300);
@@ -4042,7 +4055,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 +4173,7 @@
     });
 
     vue.onBeforeUnmount(() => {
-      clearTimeout(touchTimer);
+      touchTimer !== null && clearTimeout(touchTimer);
       unconfigureAnchorEl();
     });
 
@@ -4397,15 +4414,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 +4435,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
+    }
 
-      globalNodes.forEach(el => {
-        if (el.contains(target) === false) {
-          target.appendChild(el);
+    target = newTarget;
+
+    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 +4560,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 +4569,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 +4582,7 @@
 
       if (portalIsActive.value === false) {
         if (onGlobalDialog === false && portalEl === null) {
-          portalEl = createGlobalNode();
+          portalEl = createGlobalNode(false, type);
         }
 
         portalIsActive.value = true;
@@ -4675,11 +4723,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 +4740,7 @@
       removeTimeout,
 
       registerTimeout (fn, delay) {
-        clearTimeout(timer);
+        removeTimeout();
 
         if (vmIsDestroyed(vm) === false) {
           timer = setTimeout(fn, delay);
@@ -4971,14 +5022,11 @@
     }
   }
 
-  let timer;
-
   const
     { notPassiveCapture } = listenOpts,
     registeredList = [];
 
   function globalHandler (evt) {
-    clearTimeout(timer);
 
     const target = evt.target;
 
@@ -5051,7 +5099,7 @@
       registeredList.splice(index, 1);
 
       if (registeredList.length === 0) {
-        clearTimeout(timer);
+
         document.removeEventListener('mousedown', globalHandler, notPassiveCapture);
         document.removeEventListener('touchstart', globalHandler, notPassiveCapture);
       }
@@ -5119,17 +5167,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 +5204,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 +5229,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 +5254,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 +5472,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 +7089,7 @@
 
       const isDark = useDark(props, $q);
 
-      let timer, panelsLen;
+      let timer = null, panelsLen;
 
       const {
         updatePanelsList, getPanelContent,
@@ -7053,7 +7143,6 @@
 
       vue.watch(() => props.modelValue, () => {
         if (props.autoplay) {
-          clearInterval(timer);
           startTimer();
         }
       });
@@ -7062,20 +7151,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 +7180,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearInterval(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       function getNavigationContainer (type, mapping) {
@@ -9401,8 +9498,10 @@
       }
 
       function emitEvent () {
-        clearTimeout(timer);
-        timer = null;
+        if (timer !== null) {
+          clearTimeout(timer);
+          timer = null;
+        }
 
         if (targetEl) {
           const { offsetWidth: width, offsetHeight: height } = targetEl;
@@ -9436,7 +9535,7 @@
         vue.onMounted(() => { init(); });
 
         vue.onBeforeUnmount(() => {
-          clearTimeout(timer);
+          timer !== null && clearTimeout(timer);
 
           if (observer !== void 0) {
             if (observer.disconnect !== void 0) {
@@ -9456,7 +9555,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 +9711,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 +9847,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 +9868,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 +9921,7 @@
       }
 
       function animScrollTo (value) {
-        stopAnimScroll();
+        scrollTimer !== null && clearInterval(scrollTimer);
         scrollTimer = setInterval(() => {
           if (scrollTowards(value) === true) {
             stopAnimScroll();
@@ -9832,7 +9938,10 @@
       }
 
       function stopAnimScroll () {
-        clearInterval(scrollTimer);
+        if (scrollTimer !== null) {
+          clearInterval(scrollTimer);
+          scrollTimer = null;
+        }
       }
 
       function onKbdNavigate (keyCode, fromEl) {
@@ -10136,7 +10245,7 @@
       vue.provide(tabsKey, $tabs);
 
       function cleanup () {
-        clearTimeout(animateTimer);
+        animateTimer !== null && clearTimeout(animateTimer);
         stopAnimScroll();
         unwatchRoute !== void 0 && unwatchRoute();
       }
@@ -14528,7 +14637,7 @@
     vpPendingUpdate = false,
     bodyLeft,
     bodyTop,
-    closeTimer;
+    closeTimer = null;
 
   function onWheel (e) {
     if (shouldPreventScroll(e)) {
@@ -14675,9 +14784,9 @@
     if (state === true) {
       registered++;
 
-      if (closeTimer !== void 0) {
+      if (closeTimer !== null) {
         clearTimeout(closeTimer);
-        closeTimer = void 0;
+        closeTimer = null;
         return
       }
 
@@ -14699,11 +14808,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
       }
@@ -14797,7 +14905,7 @@
       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 +14924,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 +15087,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 +15113,10 @@
       }
 
       function cleanup (hiding) {
-        clearTimeout(shakeTimeout);
+        if (shakeTimeout !== null) {
+          clearTimeout(shakeTimeout);
+          shakeTimeout = null;
+        }
 
         if (hiding === true || showing.value === true) {
           updateMaximized(false);
@@ -15195,7 +15307,7 @@
         return emptyRenderFn
       }
 
-      let lastDesktopState, timerMini, layoutTotalWidthWatcher;
+      let lastDesktopState, timerMini = null, layoutTotalWidthWatcher;
 
       const belowBreakpoint = vue.ref(
         props.behavior === 'mobile'
@@ -15570,7 +15682,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 +15692,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 +15845,11 @@
 
       vue.onBeforeUnmount(() => {
         layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher();
-        clearTimeout(timerMini);
+
+        if (timerMini !== null) {
+          clearTimeout(timerMini);
+          timerMini = null;
+        }
 
         showing.value === true && cleanup();
 
@@ -16267,7 +16384,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 +17719,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 +17774,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 +17803,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 +18943,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 +19109,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 +19121,10 @@
     }
 
     function onControlFocusout (e, then) {
-      clearTimeout(focusoutTimer);
+      focusoutTimer !== null && clearTimeout(focusoutTimer);
       focusoutTimer = setTimeout(() => {
+        focusoutTimer = null;
+
         if (
           document.hasFocus() === true && (
             state.hasPopupOpen === true
@@ -19237,7 +19374,7 @@
     });
 
     vue.onBeforeUnmount(() => {
-      clearTimeout(focusoutTimer);
+      focusoutTimer !== null && clearTimeout(focusoutTimer);
     });
 
     // expose public methods
@@ -20540,7 +20677,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 +20728,11 @@
       }
 
       function addImage (imgProps) {
-        clearTimeout(loadTimer);
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer);
+          loadTimer = null;
+        }
+
         hasError.value = false;
 
         if (imgProps === null) {
@@ -20606,10 +20747,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 +20763,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 +20787,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 +20866,12 @@
         }
 
         vue.onBeforeUnmount(() => {
-          clearTimeout(loadTimer);
-          loadTimer = null;
+          isDestroyed = true;
+
+          if (loadTimer !== null) {
+            clearTimeout(loadTimer);
+            loadTimer = null;
+          }
         });
       }
 
@@ -21664,7 +21815,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 +22027,8 @@
 
       function emitValue (val, stopWatcher) {
         emitValueFn = () => {
+          emitTimer = null;
+
           if (
             props.type !== 'number'
             && temp.hasOwnProperty('value') === true
@@ -21903,7 +22056,7 @@
         }
 
         if (props.debounce !== void 0) {
-          clearTimeout(emitTimer);
+          emitTimer !== null && clearTimeout(emitTimer);
           temp.value = val;
           emitTimer = setTimeout(emitValueFn, props.debounce);
         }
@@ -21937,7 +22090,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 +22103,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 +22951,7 @@
         }
       }
 
-      let timer;
+      let animateTimer = null;
 
       const $layout = {
         instances: {},
@@ -22821,16 +22982,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 +25059,8 @@
         });
       }
 
+      let $el, localScrollTarget, timer = null;
+
       function animateTo ({ pos, ratio }, done) {
         animating.value = true;
         pullPosition.value = pos;
@@ -24906,15 +25069,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 +25089,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       // expose public methods
@@ -25716,7 +25878,7 @@
 
       const isDark = useDark(props, proxy.$q);
 
-      let timer, panRefPos;
+      let timer = null, panRefPos;
 
       const targetRef = vue.ref(null);
 
@@ -25965,14 +26127,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();
       }
 
@@ -26974,8 +27136,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 +27643,12 @@
         }
 
         e.target.value = '';
-        clearTimeout(inputTimer);
+
+        if (inputTimer !== null) {
+          clearTimeout(inputTimer);
+          inputTimer = null;
+        }
+
         resetInputValue();
 
         if (typeof value === 'string' && value.length > 0) {
@@ -27846,7 +28013,10 @@
       }
 
       function onInput (e) {
-        clearTimeout(inputTimer);
+        if (inputTimer !== null) {
+          clearTimeout(inputTimer);
+          inputTimer = null;
+        }
 
         if (e && e.target && e.target.qComposing === true) {
           return
@@ -27867,6 +28037,7 @@
 
         if (props.onFilter !== void 0) {
           inputTimer = setTimeout(() => {
+            inputTimer = null;
             filter(inputValue.value);
           }, props.inputDebounce);
         }
@@ -27920,7 +28091,7 @@
           menu.value === true && (menu.value = false);
         }, 10);
 
-        clearTimeout(filterId);
+        filterId !== null && clearTimeout(filterId);
         filterId = localFilterId;
 
         emit(
@@ -28112,8 +28283,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 +28407,7 @@
       updatePreState();
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(inputTimer);
+        inputTimer !== null && clearTimeout(inputTimer);
       });
 
       // expose public methods
@@ -28494,7 +28667,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 +28718,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 +28791,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
       });
 
       // expose public methods
@@ -36978,12 +37153,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 +37167,8 @@
                     resolve();
                   };
 
+                  let timer = setTimeout(endFn, 400);
+
                   elTo.addEventListener('transitionend', endFn);
                   elTo.addEventListener('transitioncancel', endFn);
                 })
@@ -37461,6 +37637,7 @@
                 : ctx.touchSensitivity;
 
               ctx.timer = setTimeout(() => {
+                ctx.timer = void 0;
                 clearSelection();
                 ctx.triggered = true;
 
@@ -37477,10 +37654,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 +37673,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 +37727,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 +37866,8 @@
               };
 
               const fn = () => {
+                ctx.timer = void 0;
+
                 if (ctx.event === void 0) {
                   return
                 }
@@ -37728,8 +37911,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 +37926,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 +37979,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 +38443,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 +39143,7 @@
     app,
     vm,
     uid$1 = 0,
-    timeout,
+    timeout = null,
     props = {},
     activeGroups = {};
 
@@ -39004,10 +39192,10 @@
       }
       else {
         props.uid = ++uid$1;
-        clearTimeout(timeout);
+        timeout !== null && clearTimeout(timeout);
 
         timeout = setTimeout(() => {
-          timeout = void 0;
+          timeout = null;
 
           const el = createGlobalNode('q-loading');
 
@@ -39117,9 +39305,9 @@
           }
         }
 
-        if (timeout !== void 0) {
+        if (timeout !== null) {
           clearTimeout(timeout);
-          timeout = void 0;
+          timeout = null;
         }
 
         Plugin$2.isActive = false;
@@ -39141,7 +39329,7 @@
     }
   });
 
-  let updateId, currentClientMeta;
+  let updateId = null, currentClientMeta;
   const clientList = [];
 
   function normalize (meta) {
@@ -39275,6 +39463,8 @@
   }
 
   function updateClientMeta () {
+    updateId = null;
+
     const data = {
       title: '',
       titleTemplate: null,
@@ -39300,7 +39490,7 @@
   }
 
   function planClientUpdate () {
-    clearTimeout(updateId);
+    updateId !== null && clearTimeout(updateId);
     updateId = setTimeout(updateClientMeta, 50);
   }
 
@@ -39527,7 +39717,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 +39756,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 +39789,7 @@
 
     if (notif.timeout > 0) {
       notif.meta.timer = setTimeout(() => {
+        notif.meta.timer = void 0;
         dismiss();
       }, notif.timeout + /* show duration */ 1000);
     }
@@ -39641,7 +39838,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) {
@@ -40527,7 +40727,7 @@
    */
 
   var index_umd = {
-    version: '2.11.3',
+    version: '2.11.4',
     install (app, opts) {
       installQuasar(app, {
         components,