quasar 2.11.3 → 2.11.4

package/src/components/tabs/QTabs.js

@@ -88,7 +88,7 @@ export default 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,
@@ -224,7 +224,10 @@ export default 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'
@@ -242,6 +245,7 @@ export default 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)
@@ -294,7 +298,7 @@ export default createComponent({
     }
 
     function animScrollTo (value) {
-      stopAnimScroll()
+      scrollTimer !== null && clearInterval(scrollTimer)
       scrollTimer = setInterval(() => {
         if (scrollTowards(value) === true) {
           stopAnimScroll()
@@ -311,7 +315,10 @@ export default createComponent({
     }
 
     function stopAnimScroll () {
-      clearInterval(scrollTimer)
+      if (scrollTimer !== null) {
+        clearInterval(scrollTimer)
+        scrollTimer = null
+      }
     }
 
     function onKbdNavigate (keyCode, fromEl) {
@@ -615,7 +622,7 @@ export default createComponent({
     provide(tabsKey, $tabs)
 
     function cleanup () {
-      clearTimeout(animateTimer)
+      animateTimer !== null && clearTimeout(animateTimer)
       stopAnimScroll()
       unwatchRoute !== void 0 && unwatchRoute()
     }

package/src/components/tooltip/QTooltip.js

@@ -107,7 +107,7 @@ export default 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

package/src/composables/private/use-anchor.js

@@ -21,7 +21,7 @@ export default function ({
 
   const anchorEl = ref(null)
 
-  let touchTimer
+  let touchTimer = null
 
   function canShow (evt) {
     // abort with no parent configured or on multi-touch
@@ -80,6 +80,7 @@ export default function ({
         ])
 
         touchTimer = setTimeout(() => {
+          touchTimer = null
           proxy.show(evt)
           evt.qAnchorHandled = true
         }, 300)
@@ -87,7 +88,11 @@ export default function ({
 
       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()
@@ -201,7 +206,7 @@ export default function ({
   })
 
   onBeforeUnmount(() => {
-    clearTimeout(touchTimer)
+    touchTimer !== null && clearTimeout(touchTimer)
     unconfigureAnchorEl()
   })
 

package/src/composables/private/use-field.js

@@ -122,7 +122,7 @@ export default function (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))
@@ -288,7 +288,11 @@ export default function (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)
@@ -296,8 +300,10 @@ export default function (state) {
   }
 
   function onControlFocusout (e, then) {
-    clearTimeout(focusoutTimer)
+    focusoutTimer !== null && clearTimeout(focusoutTimer)
     focusoutTimer = setTimeout(() => {
+      focusoutTimer = null
+
       if (
         document.hasFocus() === true && (
           state.hasPopupOpen === true
@@ -547,7 +553,7 @@ export default function (state) {
   })
 
   onBeforeUnmount(() => {
-    clearTimeout(focusoutTimer)
+    focusoutTimer !== null && clearTimeout(focusoutTimer)
   })
 
   // expose public methods

package/src/composables/private/use-portal.js

@@ -26,7 +26,7 @@ function isOnGlobalDialog (vm) {
 // Warning!
 // You MUST specify "inheritAttrs: false" in your component
 
-export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
+export default function (vm, innerRef, renderPortalContent, type) {
   // showing, including while in show/hide transition
   const portalIsActive = ref(false)
 
@@ -46,7 +46,7 @@ export default function (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) {
@@ -59,7 +59,7 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
 
     if (portalIsActive.value === false) {
       if (onGlobalDialog === false && portalEl === null) {
-        portalEl = createGlobalNode()
+        portalEl = createGlobalNode(false, type)
       }
 
       portalIsActive.value = true

package/src/composables/private/use-timeout.js

@@ -9,11 +9,14 @@ import { vmIsDestroyed } from '../../utils/private/vm'
  */
 
 export default function () {
-  let timer
+  let timer = null
   const vm = getCurrentInstance()
 
   function removeTimeout () {
-    clearTimeout(timer)
+    if (timer !== null) {
+      clearTimeout(timer)
+      timer = null
+    }
   }
 
   onDeactivated(removeTimeout)
@@ -23,7 +26,7 @@ export default function () {
     removeTimeout,
 
     registerTimeout (fn, delay) {
-      clearTimeout(timer)
+      removeTimeout(timer)
 
       if (vmIsDestroyed(vm) === false) {
         timer = setTimeout(fn, delay)

package/src/css/core/visibility.sass

@@ -40,6 +40,8 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
+.invisible svg *
+  display: none
 .transparent
   background: transparent !important
 

package/src/directives/TouchHold.js

@@ -74,6 +74,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
               : ctx.touchSensitivity
 
             ctx.timer = setTimeout(() => {
+              ctx.timer = void 0
               clearSelection()
               ctx.triggered = true
 
@@ -90,10 +91,13 @@ export default createDirective(__QUASAR_SSR_SERVER__
           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
             }
           },
 
@@ -106,8 +110,9 @@ export default createDirective(__QUASAR_SSR_SERVER__
             if (ctx.triggered === true) {
               evt !== void 0 && stopAndPrevent(evt)
             }
-            else {
+            else if (ctx.timer !== void 0) {
               clearTimeout(ctx.timer)
+              ctx.timer = void 0
             }
           }
         }
@@ -159,7 +164,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
           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

package/src/directives/TouchRepeat.js

@@ -138,6 +138,8 @@ export default createDirective(__QUASAR_SSR_SERVER__
             }
 
             const fn = () => {
+              ctx.timer = void 0
+
               if (ctx.event === void 0) {
                 return
               }
@@ -181,8 +183,9 @@ export default createDirective(__QUASAR_SSR_SERVER__
           },
 
           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
             }
           },
 
@@ -195,7 +198,11 @@ export default createDirective(__QUASAR_SSR_SERVER__
             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
           }
@@ -244,7 +251,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
         const ctx = el.__qtouchrepeat
 
         if (ctx !== void 0) {
-          clearTimeout(ctx.timer)
+          ctx.timer !== void 0 && clearTimeout(ctx.timer)
 
           cleanEvt(ctx, 'main')
           cleanEvt(ctx, 'temp')

package/src/plugins/Loading.js

@@ -11,7 +11,7 @@ let
   app,
   vm,
   uid = 0,
-  timeout,
+  timeout = null,
   props = {},
   activeGroups = {}
 
@@ -61,10 +61,10 @@ const Plugin = defineReactivePlugin({
     }
     else {
       props.uid = ++uid
-      clearTimeout(timeout)
+      timeout !== null && clearTimeout(timeout)
 
       timeout = setTimeout(() => {
-        timeout = void 0
+        timeout = null
 
         const el = createGlobalNode('q-loading')
 
@@ -174,9 +174,9 @@ const Plugin = defineReactivePlugin({
         }
       }
 
-      if (timeout !== void 0) {
+      if (timeout !== null) {
         clearTimeout(timeout)
-        timeout = void 0
+        timeout = null
       }
 
       Plugin.isActive = false

package/src/plugins/Meta.js

@@ -1,7 +1,7 @@
 import { isRuntimeSsrPreHydration } from './Platform.js'
 import extend from '../utils/extend.js'
 
-let updateId, currentClientMeta
+let updateId = null, currentClientMeta
 export const clientList = []
 
 function normalize (meta) {
@@ -218,6 +218,8 @@ function injectServerMeta (ssrContext) {
 }
 
 function updateClientMeta () {
+  updateId = null
+
   const data = {
     title: '',
     titleTemplate: null,
@@ -243,7 +245,7 @@ function updateClientMeta () {
 }
 
 export function planClientUpdate () {
-  clearTimeout(updateId)
+  updateId !== null && clearTimeout(updateId)
   updateId = setTimeout(updateClientMeta, 50)
 }
 

package/src/plugins/Notify.js

@@ -225,7 +225,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
@@ -261,7 +264,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) {
@@ -291,6 +297,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)
   }
@@ -339,7 +346,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) {

package/src/utils/debounce.js

@@ -1,25 +1,28 @@
 export default function (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

package/src/utils/morph.js

@@ -950,12 +950,11 @@ export default 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)
@@ -965,6 +964,8 @@ export default function morph (_options) {
                   resolve()
                 }
 
+                let timer = setTimeout(endFn, 400)
+
                 elTo.addEventListener('transitionend', endFn)
                 elTo.addEventListener('transitioncancel', endFn)
               })

package/src/utils/prevent-scroll.js

@@ -10,7 +10,7 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
-  closeTimer
+  closeTimer = null
 
 function onWheel (e) {
   if (shouldPreventScroll(e)) {
@@ -157,9 +157,9 @@ export default function (state) {
   if (state === true) {
     registered++
 
-    if (closeTimer !== void 0) {
+    if (closeTimer !== null) {
       clearTimeout(closeTimer)
-      closeTimer = void 0
+      closeTimer = null
       return
     }
 
@@ -181,11 +181,10 @@ export default function (state) {
     action = 'remove'
 
     if (client.is.ios === true && client.is.nativeMobile === true) {
-      clearTimeout(closeTimer)
-
+      closeTimer !== null && clearTimeout(closeTimer)
       closeTimer = setTimeout(() => {
         apply(action)
-        closeTimer = void 0
+        closeTimer = null
       }, 100)
       return
     }

package/src/utils/private/click-outside.js

@@ -1,14 +1,17 @@
 import { listenOpts } from '../event.js'
 import { portalProxyList } from '../private/portal.js'
 
-let timer
+let timer = null
 
 const
   { notPassiveCapture } = listenOpts,
   registeredList = []
 
 function globalHandler (evt) {
-  clearTimeout(timer)
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
 
   const target = evt.target
 
@@ -81,7 +84,11 @@ export function removeClickOutside (clickOutsideProps) {
     registeredList.splice(index, 1)
 
     if (registeredList.length === 0) {
-      clearTimeout(timer)
+      if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
+      }
+
       document.removeEventListener('mousedown', globalHandler, notPassiveCapture)
       document.removeEventListener('touchstart', globalHandler, notPassiveCapture)
     }

package/src/utils/private/global-dialog.js

@@ -54,7 +54,7 @@ export default function (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) {

package/src/utils/private/global-nodes.js

@@ -1,16 +1,19 @@
 import { globalConfig } from './global-config.js'
 
-const globalNodes = []
+const nodesList = []
+const portalTypeList = []
+
+let portalIndex = 1
 let target = __QUASAR_SSR_SERVER__
   ? void 0
   : document.body
 
-export function createGlobalNode (id) {
+export 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
@@ -20,24 +23,52 @@ export function createGlobalNode (id) {
   }
 
   target.appendChild(el)
-  globalNodes.push(el)
+  nodesList.push(el)
+  portalTypeList.push(portalType)
 
   return el
 }
 
 export function removeGlobalNode (el) {
-  globalNodes.splice(globalNodes.indexOf(el), 1)
+  const nodeIndex = nodesList.indexOf(el)
+
+  nodesList.splice(nodeIndex, 1)
+  portalTypeList.splice(nodeIndex, 1)
+
   el.remove()
 }
 
-export function changeGlobalNodesTarget (el) {
-  if (el !== target) {
-    target = el
+export 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)
+    }
   }
 }