quasar 2.11.2 → 2.11.4

package/dist/quasar.esm.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.2
+ * Quasar Framework v2.11.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -555,27 +555,30 @@ var event = {
 };
 
 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
@@ -1069,12 +1072,14 @@ const Plugin$8 = defineReactivePlugin({
     };
 
     {
-      const el = document.documentElement;
-      el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr');
-      el.setAttribute('lang', lang.isoName);
-
       lang.set = Plugin$8.set;
 
+      if (Plugin$8.__langConfig === void 0 || Plugin$8.__langConfig.noHtmlAttrs !== true) {
+        const el = document.documentElement;
+        el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr');
+        el.setAttribute('lang', lang.isoName);
+      }
+
       Object.assign(Plugin$8.__langPack, lang);
 
       Plugin$8.props = lang;
@@ -1086,6 +1091,7 @@ const Plugin$8 = defineReactivePlugin({
   install ({ $q, lang, ssrContext }) {
     {
       $q.lang = Plugin$8.__langPack;
+      Plugin$8.__langConfig = $q.config.lang;
 
       if (this.__installed === true) {
         lang !== void 0 && this.set(lang);
@@ -1640,7 +1646,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 var installQuasar = function (parentApp, opts = {}) {
-    const $q = { version: '2.11.2' };
+    const $q = { version: '2.11.4' };
 
     if (globalConfigIsFrozen === false) {
       if (opts.config !== void 0) {
@@ -1839,7 +1845,7 @@ var QAjaxBar = createComponent({
     const onScreen = ref(false);
     const animate = ref(true);
 
-    let sessions = 0, timer, speed;
+    let sessions = 0, timer = null, speed;
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -1891,19 +1897,21 @@ var QAjaxBar = createComponent({
         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);
@@ -1930,13 +1938,18 @@ var QAjaxBar = createComponent({
         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);
       };
@@ -1954,6 +1967,7 @@ var QAjaxBar = createComponent({
     function planNextStep () {
       if (progress.value < 100) {
         timer = setTimeout(() => {
+          timer = null;
           increment();
           planNextStep();
         }, speed);
@@ -1974,7 +1988,7 @@ var QAjaxBar = createComponent({
     });
 
     onBeforeUnmount(() => {
-      clearTimeout(timer);
+      timer !== null && clearTimeout(timer);
       hijacked === true && restoreAjax(start);
     });
 
@@ -3578,7 +3592,7 @@ var QBtn = createComponent({
     const rootRef = ref(null);
     const blurTargetRef = ref(null);
 
-    let localTouchTargetEl = null, avoidMouseRipple, mouseTimer;
+    let localTouchTargetEl = null, avoidMouseRipple, mouseTimer = null;
 
     const hasLabel = computed(() =>
       props.label !== void 0 && props.label !== null && props.label !== ''
@@ -3724,8 +3738,9 @@ var QBtn = createComponent({
       // avoid duplicated mousedown event
       // triggering another early ripple
       avoidMouseRipple = true;
-      clearTimeout(mouseTimer);
+      mouseTimer !== null && clearTimeout(mouseTimer);
       mouseTimer = setTimeout(() => {
+        mouseTimer = null;
         avoidMouseRipple = false;
       }, 200);
     }
@@ -3971,7 +3986,7 @@ function useAnchor ({
 
   const anchorEl = ref(null);
 
-  let touchTimer;
+  let touchTimer = null;
 
   function canShow (evt) {
     // abort with no parent configured or on multi-touch
@@ -4030,6 +4045,7 @@ function useAnchor ({
         ]);
 
         touchTimer = setTimeout(() => {
+          touchTimer = null;
           proxy.show(evt);
           evt.qAnchorHandled = true;
         }, 300);
@@ -4037,7 +4053,11 @@ function useAnchor ({
 
       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();
@@ -4151,7 +4171,7 @@ function useAnchor ({
   });
 
   onBeforeUnmount(() => {
-    clearTimeout(touchTimer);
+    touchTimer !== null && clearTimeout(touchTimer);
     unconfigureAnchorEl();
   });
 
@@ -4392,15 +4412,18 @@ function removeFocusFn (fn) {
   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;
@@ -4410,25 +4433,53 @@ function createGlobalNode (id) {
   }
 
   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);
+    }
   }
 }
 
@@ -4507,7 +4558,7 @@ function isOnGlobalDialog (vm) {
 // 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 = ref(false);
 
@@ -4516,7 +4567,7 @@ function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
 
   let portalEl = null;
   const focusObj = {};
-  const onGlobalDialog = checkGlobalDialog === true && isOnGlobalDialog(vm);
+  const onGlobalDialog = type === 'dialog' && isOnGlobalDialog(vm);
 
   function showPortal (isReady) {
     if (isReady === true) {
@@ -4529,7 +4580,7 @@ function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
 
     if (portalIsActive.value === false) {
       if (onGlobalDialog === false && portalEl === null) {
-        portalEl = createGlobalNode();
+        portalEl = createGlobalNode(false, type);
       }
 
       portalIsActive.value = true;
@@ -4670,11 +4721,14 @@ function useTick () {
  */
 
 function useTimeout () {
-  let timer;
+  let timer = null;
   const vm = getCurrentInstance();
 
   function removeTimeout () {
-    clearTimeout(timer);
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
   }
 
   onDeactivated(removeTimeout);
@@ -4684,7 +4738,7 @@ function useTimeout () {
     removeTimeout,
 
     registerTimeout (fn, delay) {
-      clearTimeout(timer);
+      removeTimeout();
 
       if (vmIsDestroyed(vm) === false) {
         timer = setTimeout(fn, delay);
@@ -4966,14 +5020,11 @@ function removeFocusout (fn) {
   }
 }
 
-let timer;
-
 const
   { notPassiveCapture } = listenOpts,
   registeredList = [];
 
 function globalHandler (evt) {
-  clearTimeout(timer);
 
   const target = evt.target;
 
@@ -5046,7 +5097,7 @@ function removeClickOutside (clickOutsideProps) {
     registeredList.splice(index, 1);
 
     if (registeredList.length === 0) {
-      clearTimeout(timer);
+
       document.removeEventListener('mousedown', globalHandler, notPassiveCapture);
       document.removeEventListener('touchstart', globalHandler, notPassiveCapture);
     }
@@ -5114,17 +5165,32 @@ function getAnchorProps (el, offset) {
   }
 
   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,
@@ -5136,6 +5202,13 @@ function getTargetProps (el) {
   }
 }
 
+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) {
@@ -5154,25 +5227,15 @@ function setPosition (cfg) {
     }
   }
 
-  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,
@@ -5189,14 +5252,44 @@ function setPosition (cfg) {
 
   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);
+
+  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
 
-  applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin);
+    // 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',
@@ -5377,7 +5470,7 @@ var QMenu = createComponent({
       processOnMount: true
     });
 
-    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent);
+    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'menu');
 
     const clickOutsideProps = {
       anchorEl,
@@ -6994,7 +7087,7 @@ var QCarousel = createComponent({
 
     const isDark = useDark(props, $q);
 
-    let timer, panelsLen;
+    let timer = null, panelsLen;
 
     const {
       updatePanelsList, getPanelContent,
@@ -7048,7 +7141,6 @@ var QCarousel = createComponent({
 
     watch(() => props.modelValue, () => {
       if (props.autoplay) {
-        clearInterval(timer);
         startTimer();
       }
     });
@@ -7057,20 +7149,28 @@ var QCarousel = createComponent({
       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);
     }
 
     onMounted(() => {
@@ -7078,7 +7178,7 @@ var QCarousel = createComponent({
     });
 
     onBeforeUnmount(() => {
-      clearInterval(timer);
+      timer !== null && clearTimeout(timer);
     });
 
     function getNavigationContainer (type, mapping) {
@@ -7559,6 +7659,8 @@ function useCheckbox (type, getInner) {
     const prop = { type: 'checkbox' };
 
     props.name !== void 0 && Object.assign(prop, {
+      // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
+      '.checked': isTrue.value,
       '^checked': isTrue.value === true ? 'checked' : void 0,
       name: props.name,
       value: modelIsArray.value === true
@@ -9394,8 +9496,10 @@ var QResizeObserver = createComponent({
     }
 
     function emitEvent () {
-      clearTimeout(timer);
-      timer = null;
+      if (timer !== null) {
+        clearTimeout(timer);
+        timer = null;
+      }
 
       if (targetEl) {
         const { offsetWidth: width, offsetHeight: height } = targetEl;
@@ -9429,7 +9533,7 @@ var QResizeObserver = createComponent({
       onMounted(() => { init(); });
 
       onBeforeUnmount(() => {
-        clearTimeout(timer);
+        timer !== null && clearTimeout(timer);
 
         if (observer !== void 0) {
           if (observer.disconnect !== void 0) {
@@ -9449,7 +9553,10 @@ var QResizeObserver = createComponent({
       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
@@ -9602,7 +9709,7 @@ var QTabs = createComponent({
     const tabDataListLen = ref(0);
     const hasFocus = ref(false);
 
-    let animateTimer, scrollTimer, unwatchRoute;
+    let animateTimer = null, scrollTimer = null, unwatchRoute;
 
     const tabProps = computed(() => ({
       activeClass: props.activeClass,
@@ -9738,7 +9845,10 @@ var QTabs = createComponent({
           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';
@@ -9756,6 +9866,7 @@ var QTabs = createComponent({
         // 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);
@@ -9808,7 +9919,7 @@ var QTabs = createComponent({
     }
 
     function animScrollTo (value) {
-      stopAnimScroll();
+      scrollTimer !== null && clearInterval(scrollTimer);
       scrollTimer = setInterval(() => {
         if (scrollTowards(value) === true) {
           stopAnimScroll();
@@ -9825,7 +9936,10 @@ var QTabs = createComponent({
     }
 
     function stopAnimScroll () {
-      clearInterval(scrollTimer);
+      if (scrollTimer !== null) {
+        clearInterval(scrollTimer);
+        scrollTimer = null;
+      }
     }
 
     function onKbdNavigate (keyCode, fromEl) {
@@ -10129,7 +10243,7 @@ var QTabs = createComponent({
     provide(tabsKey, $tabs);
 
     function cleanup () {
-      clearTimeout(animateTimer);
+      animateTimer !== null && clearTimeout(animateTimer);
       stopAnimScroll();
       unwatchRoute !== void 0 && unwatchRoute();
     }
@@ -14521,7 +14635,7 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
-  closeTimer;
+  closeTimer = null;
 
 function onWheel (e) {
   if (shouldPreventScroll(e)) {
@@ -14668,9 +14782,9 @@ function preventScroll (state) {
   if (state === true) {
     registered++;
 
-    if (closeTimer !== void 0) {
+    if (closeTimer !== null) {
       clearTimeout(closeTimer);
-      closeTimer = void 0;
+      closeTimer = null;
       return
     }
 
@@ -14692,11 +14806,10 @@ function preventScroll (state) {
     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
     }
@@ -14790,7 +14903,7 @@ var QDialog = createComponent({
     const showing = ref(false);
     const animating = ref(false);
 
-    let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
+    let shakeTimeout = null, refocusTarget = null, isMaximized, avoidAutoClose;
 
     const hideOnRouteChange = computed(() =>
       props.persistent !== true
@@ -14809,7 +14922,7 @@ var QDialog = createComponent({
     );
 
     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({
@@ -14972,8 +15085,9 @@ var QDialog = createComponent({
       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)
@@ -14997,7 +15111,10 @@ var QDialog = createComponent({
     }
 
     function cleanup (hiding) {
-      clearTimeout(shakeTimeout);
+      if (shakeTimeout !== null) {
+        clearTimeout(shakeTimeout);
+        shakeTimeout = null;
+      }
 
       if (hiding === true || showing.value === true) {
         updateMaximized(false);
@@ -15188,7 +15305,7 @@ var QDrawer = createComponent({
       return emptyRenderFn
     }
 
-    let lastDesktopState, timerMini, layoutTotalWidthWatcher;
+    let lastDesktopState, timerMini = null, layoutTotalWidthWatcher;
 
     const belowBreakpoint = ref(
       props.behavior === 'mobile'
@@ -15563,7 +15680,7 @@ var QDrawer = createComponent({
     }
 
     function animateMini () {
-      clearTimeout(timerMini);
+      timerMini !== null && clearTimeout(timerMini);
 
       if (vm.proxy && vm.proxy.$el) {
         // need to speed it up and apply it immediately,
@@ -15573,6 +15690,7 @@ var QDrawer = createComponent({
 
       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');
@@ -15725,7 +15843,11 @@ var QDrawer = createComponent({
 
     onBeforeUnmount(() => {
       layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher();
-      clearTimeout(timerMini);
+
+      if (timerMini !== null) {
+        clearTimeout(timerMini);
+        timerMini = null;
+      }
 
       showing.value === true && cleanup();
 
@@ -16260,7 +16382,7 @@ var QTooltip = createComponent({
 
     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
@@ -17595,15 +17717,23 @@ var QSlideTransition = createComponent({
 
   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;
     }
@@ -17642,8 +17772,11 @@ var QSlideTransition = createComponent({
       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');
           }
@@ -17668,8 +17801,11 @@ var QSlideTransition = createComponent({
       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');
           }
@@ -18805,7 +18941,7 @@ function useField (state) {
   const { props, emit, slots, attrs, proxy } = getCurrentInstance();
   const { $q } = proxy;
 
-  let focusoutTimer;
+  let focusoutTimer = null;
 
   if (state.hasValue === void 0) {
     state.hasValue = computed(() => fieldValueIsFilled(props.modelValue));
@@ -18971,7 +19107,11 @@ function useField (state) {
   }
 
   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);
@@ -18979,8 +19119,10 @@ function useField (state) {
   }
 
   function onControlFocusout (e, then) {
-    clearTimeout(focusoutTimer);
+    focusoutTimer !== null && clearTimeout(focusoutTimer);
     focusoutTimer = setTimeout(() => {
+      focusoutTimer = null;
+
       if (
         document.hasFocus() === true && (
           state.hasPopupOpen === true
@@ -19230,7 +19372,7 @@ function useField (state) {
   });
 
   onBeforeUnmount(() => {
-    clearTimeout(focusoutTimer);
+    focusoutTimer !== null && clearTimeout(focusoutTimer);
   });
 
   // expose public methods
@@ -20533,7 +20675,7 @@ var QImg = createComponent({
     const naturalRatio = ref(props.initialRatio);
     const ratioStyle = useRatio(props, naturalRatio);
 
-    let loadTimer;
+    let loadTimer = null, isDestroyed = false;
 
     const images = [
       ref(null),
@@ -20584,7 +20726,11 @@ var QImg = createComponent({
     }
 
     function addImage (imgProps) {
-      clearTimeout(loadTimer);
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer);
+        loadTimer = null;
+      }
+
       hasError.value = false;
 
       if (imgProps === null) {
@@ -20599,10 +20745,12 @@ var QImg = createComponent({
     }
 
     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
@@ -20613,21 +20761,21 @@ var QImg = createComponent({
 
     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;
@@ -20637,7 +20785,11 @@ var QImg = createComponent({
     }
 
     function onError (err) {
-      clearTimeout(loadTimer);
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer);
+        loadTimer = null;
+      }
+
       isLoading.value = false;
       hasError.value = true;
       images[ position.value ].value = null;
@@ -20717,8 +20869,12 @@ var QImg = createComponent({
       }
 
       onBeforeUnmount(() => {
-        clearTimeout(loadTimer);
-        loadTimer = null;
+        isDestroyed = true;
+
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer);
+          loadTimer = null;
+        }
       });
     }
 
@@ -21662,7 +21818,7 @@ var QInput = createComponent({
     const { $q } = proxy;
 
     const temp = {};
-    let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer, emitValueFn;
+    let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer = null, emitValueFn;
 
     const inputRef = ref(null);
     const nameProp = useFormInputNameAttr(props);
@@ -21874,6 +22030,8 @@ var QInput = createComponent({
 
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
+        emitTimer = null;
+
         if (
           props.type !== 'number'
           && temp.hasOwnProperty('value') === true
@@ -21901,7 +22059,7 @@ var QInput = createComponent({
       }
 
       if (props.debounce !== void 0) {
-        clearTimeout(emitTimer);
+        emitTimer !== null && clearTimeout(emitTimer);
         temp.value = val;
         emitTimer = setTimeout(emitValueFn, props.debounce);
       }
@@ -21935,7 +22093,11 @@ var QInput = createComponent({
     function onChange (e) {
       onComposition(e);
 
-      clearTimeout(emitTimer);
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer);
+        emitTimer = null;
+      }
+
       emitValueFn !== void 0 && emitValueFn();
 
       emit('change', e.target.value);
@@ -21944,7 +22106,11 @@ var QInput = createComponent({
     function onFinishEditing (e) {
       e !== void 0 && stop(e);
 
-      clearTimeout(emitTimer);
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer);
+        emitTimer = null;
+      }
+
       emitValueFn !== void 0 && emitValueFn();
 
       typedNumber = false;
@@ -22788,7 +22954,7 @@ var QLayout = createComponent({
       }
     }
 
-    let timer;
+    let animateTimer = null;
 
     const $layout = {
       instances: {},
@@ -22819,16 +22985,16 @@ var QLayout = createComponent({
       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);
       },
 
@@ -23097,6 +23263,8 @@ var QRadio = createComponent({
       const prop = { type: 'radio' };
 
       props.name !== void 0 && Object.assign(prop, {
+        // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
+        '.checked': isTrue.value === true,
         '^checked': isTrue.value === true ? 'checked' : void 0,
         name: props.name,
         value: props.val
@@ -24894,6 +25062,8 @@ var QPullToRefresh = createComponent({
       });
     }
 
+    let $el, localScrollTarget, timer = null;
+
     function animateTo ({ pos, ratio }, done) {
       animating.value = true;
       pullPosition.value = pos;
@@ -24902,15 +25072,14 @@ var QPullToRefresh = createComponent({
         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);
     }
@@ -24923,7 +25092,7 @@ var QPullToRefresh = createComponent({
     });
 
     onBeforeUnmount(() => {
-      clearTimeout(timer);
+      timer !== null && clearTimeout(timer);
     });
 
     // expose public methods
@@ -25712,7 +25881,7 @@ var QScrollArea = createComponent({
 
     const isDark = useDark(props, proxy.$q);
 
-    let timer, panRefPos;
+    let timer = null, panRefPos;
 
     const targetRef = ref(null);
 
@@ -25961,14 +26130,14 @@ var QScrollArea = createComponent({
     }
 
     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();
     }
 
@@ -26970,8 +27139,8 @@ var QSelect = createComponent({
     const dialogFieldFocused = ref(false);
     const innerLoadingIndicator = ref(false);
 
-    let inputTimer, innerValueCache,
-      hasDialog, userInputValue, filterId, defaultInputValue,
+    let inputTimer = null, innerValueCache,
+      hasDialog, userInputValue, filterId = null, defaultInputValue,
       transitionShowComputed, searchBuffer, searchBufferExp;
 
     const inputRef = ref(null);
@@ -27477,7 +27646,12 @@ var QSelect = createComponent({
       }
 
       e.target.value = '';
-      clearTimeout(inputTimer);
+
+      if (inputTimer !== null) {
+        clearTimeout(inputTimer);
+        inputTimer = null;
+      }
+
       resetInputValue();
 
       if (typeof value === 'string' && value.length > 0) {
@@ -27842,7 +28016,10 @@ var QSelect = createComponent({
     }
 
     function onInput (e) {
-      clearTimeout(inputTimer);
+      if (inputTimer !== null) {
+        clearTimeout(inputTimer);
+        inputTimer = null;
+      }
 
       if (e && e.target && e.target.qComposing === true) {
         return
@@ -27863,6 +28040,7 @@ var QSelect = createComponent({
 
       if (props.onFilter !== void 0) {
         inputTimer = setTimeout(() => {
+          inputTimer = null;
           filter(inputValue.value);
         }, props.inputDebounce);
       }
@@ -27916,7 +28094,7 @@ var QSelect = createComponent({
         menu.value === true && (menu.value = false);
       }, 10);
 
-      clearTimeout(filterId);
+      filterId !== null && clearTimeout(filterId);
       filterId = localFilterId;
 
       emit(
@@ -28108,8 +28286,10 @@ var QSelect = createComponent({
       }
 
       if (state.focused.value === false) {
-        clearTimeout(filterId);
-        filterId = void 0;
+        if (filterId !== null) {
+          clearTimeout(filterId);
+          filterId = null;
+        }
 
         if (state.innerLoading.value === true) {
           emit('filterAbort');
@@ -28230,7 +28410,7 @@ var QSelect = createComponent({
     updatePreState();
 
     onBeforeUnmount(() => {
-      clearTimeout(inputTimer);
+      inputTimer !== null && clearTimeout(inputTimer);
     });
 
     // expose public methods
@@ -28490,7 +28670,7 @@ var QSlideItem = createComponent({
 
     const contentRef = ref(null);
 
-    let timer, pan = {}, dirRefs = {}, dirContentRefs = {};
+    let timer = null, pan = {}, dirRefs = {}, dirContentRefs = {};
 
     const langDir = computed(() => (
       $q.lang.rtl === true
@@ -28541,7 +28721,9 @@ var QSlideItem = createComponent({
         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);
@@ -28612,7 +28794,7 @@ var QSlideItem = createComponent({
     });
 
     onBeforeUnmount(() => {
-      clearTimeout(timer);
+      timer !== null && clearTimeout(timer);
     });
 
     // expose public methods
@@ -36847,12 +37029,11 @@ function morph (_options) {
         : (
             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);
@@ -36862,6 +37043,8 @@ function morph (_options) {
                   resolve();
                 };
 
+                let timer = setTimeout(endFn, 400);
+
                 elTo.addEventListener('transitionend', endFn);
                 elTo.addEventListener('transitioncancel', endFn);
               })
@@ -37330,6 +37513,7 @@ var TouchHold = createDirective({
               : ctx.touchSensitivity;
 
             ctx.timer = setTimeout(() => {
+              ctx.timer = void 0;
               clearSelection();
               ctx.triggered = true;
 
@@ -37346,10 +37530,13 @@ var TouchHold = createDirective({
           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;
             }
           },
 
@@ -37362,8 +37549,9 @@ var TouchHold = createDirective({
             if (ctx.triggered === true) {
               evt !== void 0 && stopAndPrevent(evt);
             }
-            else {
+            else if (ctx.timer !== void 0) {
               clearTimeout(ctx.timer);
+              ctx.timer = void 0;
             }
           }
         };
@@ -37415,7 +37603,7 @@ var TouchHold = createDirective({
           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;
@@ -37554,6 +37742,8 @@ var TouchRepeat = createDirective({
             };
 
             const fn = () => {
+              ctx.timer = void 0;
+
               if (ctx.event === void 0) {
                 return
               }
@@ -37597,8 +37787,9 @@ var TouchRepeat = createDirective({
           },
 
           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;
             }
           },
 
@@ -37611,7 +37802,11 @@ var TouchRepeat = createDirective({
             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;
           }
@@ -37660,7 +37855,7 @@ var TouchRepeat = createDirective({
         const ctx = el.__qtouchrepeat;
 
         if (ctx !== void 0) {
-          clearTimeout(ctx.timer);
+          ctx.timer !== void 0 && clearTimeout(ctx.timer);
 
           cleanEvt(ctx, 'main');
           cleanEvt(ctx, 'temp');
@@ -38109,7 +38304,7 @@ function globalDialog (DefaultComponent, supportsCustomComponent, parentApp) {
 
     let vm, emittedOK = false;
     const dialogRef = ref(null);
-    const el = createGlobalNode();
+    const el = createGlobalNode(false, 'dialog');
 
     const applyState = cmd => {
       if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
@@ -38817,7 +39012,7 @@ let
   app,
   vm,
   uid$1 = 0,
-  timeout,
+  timeout = null,
   props = {},
   activeGroups = {};
 
@@ -38866,10 +39061,10 @@ const Plugin$2 = defineReactivePlugin({
     }
     else {
       props.uid = ++uid$1;
-      clearTimeout(timeout);
+      timeout !== null && clearTimeout(timeout);
 
       timeout = setTimeout(() => {
-        timeout = void 0;
+        timeout = null;
 
         const el = createGlobalNode('q-loading');
 
@@ -38979,9 +39174,9 @@ const Plugin$2 = defineReactivePlugin({
         }
       }
 
-      if (timeout !== void 0) {
+      if (timeout !== null) {
         clearTimeout(timeout);
-        timeout = void 0;
+        timeout = null;
       }
 
       Plugin$2.isActive = false;
@@ -39003,7 +39198,7 @@ const Plugin$2 = defineReactivePlugin({
   }
 });
 
-let updateId, currentClientMeta;
+let updateId = null, currentClientMeta;
 const clientList = [];
 
 function normalize (meta) {
@@ -39137,6 +39332,8 @@ function apply ({ add, remove }) {
 }
 
 function updateClientMeta () {
+  updateId = null;
+
   const data = {
     title: '',
     titleTemplate: null,
@@ -39162,7 +39359,7 @@ function updateClientMeta () {
 }
 
 function planClientUpdate () {
-  clearTimeout(updateId);
+  updateId !== null && clearTimeout(updateId);
   updateId = setTimeout(updateClientMeta, 50);
 }
 
@@ -39389,7 +39586,10 @@ function addNotification (config, $q, originalApi) {
 
   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;
@@ -39425,7 +39625,10 @@ function addNotification (config, $q, originalApi) {
     // 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) {
@@ -39455,6 +39658,7 @@ function addNotification (config, $q, originalApi) {
 
   if (notif.timeout > 0) {
     notif.meta.timer = setTimeout(() => {
+      notif.meta.timer = void 0;
       dismiss();
     }, notif.timeout + /* show duration */ 1000);
   }
@@ -39503,7 +39707,10 @@ function addNotification (config, $q, originalApi) {
 }
 
 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) {
@@ -40333,7 +40540,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.11.2',
+  version: '2.11.4',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7