quasar 2.11.3 → 2.11.5

package/src/components/select/QSelect.js

@@ -143,8 +143,8 @@ export default 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)
@@ -650,7 +650,12 @@ export default createComponent({
       }
 
       e.target.value = ''
-      clearTimeout(inputTimer)
+
+      if (inputTimer !== null) {
+        clearTimeout(inputTimer)
+        inputTimer = null
+      }
+
       resetInputValue()
 
       if (typeof value === 'string' && value.length > 0) {
@@ -1015,7 +1020,10 @@ export default createComponent({
     }
 
     function onInput (e) {
-      clearTimeout(inputTimer)
+      if (inputTimer !== null) {
+        clearTimeout(inputTimer)
+        inputTimer = null
+      }
 
       if (e && e.target && e.target.qComposing === true) {
         return
@@ -1036,6 +1044,7 @@ export default createComponent({
 
       if (props.onFilter !== void 0) {
         inputTimer = setTimeout(() => {
+          inputTimer = null
           filter(inputValue.value)
         }, props.inputDebounce)
       }
@@ -1089,7 +1098,7 @@ export default createComponent({
         menu.value === true && (menu.value = false)
       }, 10)
 
-      clearTimeout(filterId)
+      filterId !== null && clearTimeout(filterId)
       filterId = localFilterId
 
       emit(
@@ -1281,8 +1290,10 @@ export default 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')
@@ -1403,7 +1414,7 @@ export default createComponent({
     updatePreState()
 
     onBeforeUnmount(() => {
-      clearTimeout(inputTimer)
+      inputTimer !== null && clearTimeout(inputTimer)
     })
 
     // expose public methods

package/src/components/slide-item/QSlideItem.js

@@ -40,7 +40,7 @@ export default createComponent({
 
     const contentRef = ref(null)
 
-    let timer, pan = {}, dirRefs = {}, dirContentRefs = {}
+    let timer = null, pan = {}, dirRefs = {}, dirContentRefs = {}
 
     const langDir = computed(() => (
       $q.lang.rtl === true
@@ -91,7 +91,9 @@ export default 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)
@@ -162,7 +164,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimeout(timer)
+      timer !== null && clearTimeout(timer)
     })
 
     // expose public methods

package/src/components/slide-transition/QSlideTransition.js

@@ -17,15 +17,23 @@ export default 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
     }
@@ -64,8 +72,11 @@ export default 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')
           }
@@ -90,8 +101,11 @@ export default 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')
           }

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/components/virtual-scroll/use-virtual-scroll.js

@@ -24,12 +24,16 @@ const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.bod
       return
     }
 
-    cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    if (contentEl._qOverflowAnimationFrame !== void 0) {
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    }
+
     contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
       if (contentEl === null) {
         return
       }
 
+      contentEl._qOverflowAnimationFrame = void 0
       const children = contentEl.children || []
 
       filterProto

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/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

@@ -1,7 +1,8 @@
-import { h, createApp, Transition, onMounted } from 'vue'
+import { h, Transition, onMounted } from 'vue'
 
 import QSpinner from '../components/spinner/QSpinner.js'
 
+import { createChildApp } from '../install-quasar.js'
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
 import { createGlobalNode, removeGlobalNode } from '../utils/private/global-nodes.js'
 import preventScroll from '../utils/prevent-scroll.js'
@@ -11,7 +12,7 @@ let
   app,
   vm,
   uid = 0,
-  timeout,
+  timeout = null,
   props = {},
   activeGroups = {}
 
@@ -61,14 +62,14 @@ 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')
 
-        app = createApp({
+        app = createChildApp({
           name: 'QLoading',
 
           setup () {
@@ -130,7 +131,7 @@ const Plugin = defineReactivePlugin({
               onAfterLeave
             }, getContent)
           }
-        })
+        }, Plugin.__parentApp)
 
         vm = app.mount(el)
       }, props.delay)
@@ -174,9 +175,9 @@ const Plugin = defineReactivePlugin({
         }
       }
 
-      if (timeout !== void 0) {
+      if (timeout !== null) {
         clearTimeout(timeout)
-        timeout = void 0
+        timeout = null
       }
 
       Plugin.isActive = false
@@ -189,11 +190,15 @@ const Plugin = defineReactivePlugin({
     }
   },
 
-  install ({ $q }) {
+  install ({ $q, parentApp }) {
     $q.loading = this
 
-    if (__QUASAR_SSR_SERVER__ !== true && $q.config.loading !== void 0) {
-      this.setDefaults($q.config.loading)
+    if (__QUASAR_SSR_SERVER__ !== true) {
+      Plugin.__parentApp = parentApp
+
+      if ($q.config.loading !== void 0) {
+        this.setDefaults($q.config.loading)
+      }
     }
   }
 })

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/copy-to-clipboard.js

@@ -1,9 +1,15 @@
+
+import { addFocusout, removeFocusout } from './private/focusout.js'
+
 function fallback (text) {
   const area = document.createElement('textarea')
   area.value = text
   area.contentEditable = 'true'
   area.style.position = 'fixed' // avoid scrolling to bottom
 
+  const fn = () => {}
+  addFocusout(fn)
+
   document.body.appendChild(area)
   area.focus()
   area.select()
@@ -11,6 +17,8 @@ function fallback (text) {
   const res = document.execCommand('copy')
 
   area.remove()
+  removeFocusout(fn)
+
   return res
 }
 

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