quasar 2.11.3 → 2.11.5

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/ajax-bar/QAjaxBar.js

@@ -119,7 +119,7 @@ export default 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 }`
@@ -171,19 +171,21 @@ export default 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)
@@ -210,13 +212,18 @@ export default 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)
       }
@@ -234,6 +241,7 @@ export default createComponent({
     function planNextStep () {
       if (progress.value < 100) {
         timer = setTimeout(() => {
+          timer = null
           increment()
           planNextStep()
         }, speed)
@@ -254,7 +262,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimeout(timer)
+      timer !== null && clearTimeout(timer)
       hijacked === true && restoreAjax(start)
     })
 

package/src/components/btn/QBtn.js

@@ -46,7 +46,7 @@ export default 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 !== ''
@@ -192,8 +192,9 @@ export default createComponent({
       // avoid duplicated mousedown event
       // triggering another early ripple
       avoidMouseRipple = true
-      clearTimeout(mouseTimer)
+      mouseTimer !== null && clearTimeout(mouseTimer)
       mouseTimer = setTimeout(() => {
+        mouseTimer = null
         avoidMouseRipple = false
       }, 200)
     }

package/src/components/carousel/QCarousel.js

@@ -68,7 +68,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
 
-    let timer, panelsLen
+    let timer = null, panelsLen
 
     const {
       updatePanelsList, getPanelContent,
@@ -122,7 +122,6 @@ export default createComponent({
 
     watch(() => props.modelValue, () => {
       if (props.autoplay) {
-        clearInterval(timer)
         startTimer()
       }
     })
@@ -131,20 +130,28 @@ export default 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(() => {
@@ -152,7 +159,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearInterval(timer)
+      timer !== null && clearTimeout(timer)
     })
 
     function getNavigationContainer (type, mapping) {

package/src/components/dialog/QDialog.js

@@ -79,12 +79,13 @@ export default createComponent({
 
   setup (props, { slots, emit, attrs }) {
     const vm = getCurrentInstance()
+    const { proxy: { $q } } = vm
 
     const innerRef = ref(null)
     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
@@ -103,7 +104,7 @@ export default 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({
@@ -266,8 +267,9 @@ export default 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)
@@ -291,7 +293,10 @@ export default createComponent({
     }
 
     function cleanup (hiding) {
-      clearTimeout(shakeTimeout)
+      if (shakeTimeout !== null) {
+        clearTimeout(shakeTimeout)
+        shakeTimeout = null
+      }
 
       if (hiding === true || showing.value === true) {
         updateMaximized(false)
@@ -366,7 +371,7 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
-    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin'
+    const backdropEvt = $q.platform.is.ios === true || $q.platform.is.safari ? 'onClick' : 'onFocusin'
 
     function renderPortalContent () {
       return h('div', {

package/src/components/drawer/QDrawer.js

@@ -83,7 +83,7 @@ export default createComponent({
       return emptyRenderFn
     }
 
-    let lastDesktopState, timerMini, layoutTotalWidthWatcher
+    let lastDesktopState, timerMini = null, layoutTotalWidthWatcher
 
     const belowBreakpoint = ref(
       props.behavior === 'mobile'
@@ -458,7 +458,7 @@ export default createComponent({
     }
 
     function animateMini () {
-      clearTimeout(timerMini)
+      timerMini !== null && clearTimeout(timerMini)
 
       if (vm.proxy && vm.proxy.$el) {
         // need to speed it up and apply it immediately,
@@ -468,6 +468,7 @@ export default 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')
@@ -620,7 +621,11 @@ export default createComponent({
 
     onBeforeUnmount(() => {
       layoutTotalWidthWatcher !== void 0 && layoutTotalWidthWatcher()
-      clearTimeout(timerMini)
+
+      if (timerMini !== null) {
+        clearTimeout(timerMini)
+        timerMini = null
+      }
 
       showing.value === true && cleanup()
 

package/src/components/img/QImg.js

@@ -69,7 +69,7 @@ export default createComponent({
     const naturalRatio = ref(props.initialRatio)
     const ratioStyle = useRatio(props, naturalRatio)
 
-    let loadTimer
+    let loadTimer = null, isDestroyed = false
 
     const images = [
       ref(null),
@@ -120,7 +120,11 @@ export default createComponent({
     }
 
     function addImage (imgProps) {
-      clearTimeout(loadTimer)
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
       hasError.value = false
 
       if (imgProps === null) {
@@ -135,10 +139,12 @@ export default 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
@@ -149,21 +155,21 @@ export default 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
@@ -173,7 +179,11 @@ export default createComponent({
     }
 
     function onError (err) {
-      clearTimeout(loadTimer)
+      if (loadTimer !== null) {
+        clearTimeout(loadTimer)
+        loadTimer = null
+      }
+
       isLoading.value = false
       hasError.value = true
       images[ position.value ].value = null
@@ -253,8 +263,12 @@ export default createComponent({
       }
 
       onBeforeUnmount(() => {
-        clearTimeout(loadTimer)
-        loadTimer = null
+        isDestroyed = true
+
+        if (loadTimer !== null) {
+          clearTimeout(loadTimer)
+          loadTimer = null
+        }
       })
     }
 

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -39,6 +39,7 @@ export default createComponent({
     const isFetching = ref(false)
     const isWorking = ref(true)
     const rootRef = ref(null)
+    const loadingRef = ref(null)
 
     let index = props.initialIndex || 0
     let localScrollTarget, poll
@@ -170,12 +171,32 @@ export default createComponent({
       }
     }
 
+    function updateSvgAnimations (isRetry) {
+      if (renderLoadingSlot.value === true) {
+        if (loadingRef.value === null) {
+          isRetry !== true && nextTick(() => { updateSvgAnimations(true) })
+          return
+        }
+
+        // we need to pause svg animations (if any) when hiding
+        // otherwise the browser will keep on recalculating the style
+        const action = `${ isFetching.value === true ? 'un' : '' }pauseAnimations`
+        Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]()
+        })
+      }
+    }
+
+    const renderLoadingSlot = computed(() => props.disable !== true && isWorking.value === true)
+
+    watch([ isFetching, renderLoadingSlot ], () => { updateSvgAnimations() })
+
     watch(() => props.disable, val => {
       if (val === true) { stop() }
       else { resume() }
     })
 
-    watch(() => props.reverse, val => {
+    watch(() => props.reverse, () => {
       if (isFetching.value === false && isWorking.value === true) {
         immediatePoll()
       }
@@ -206,8 +227,9 @@ export default createComponent({
 
     onMounted(() => {
       setDebounce(props.debounce)
-
       updateScrollTarget()
+
+      isFetching.value === false && updateSvgAnimations()
     })
 
     // expose public methods
@@ -220,9 +242,9 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (props.disable !== true && isWorking.value === true) {
+      if (renderLoadingSlot.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
-          h('div', { class: classes.value }, hSlot(slots.loading))
+          h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.loading))
         )
       }
 

package/src/components/input/QInput.js

@@ -49,7 +49,7 @@ export default 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)
@@ -261,6 +261,8 @@ export default createComponent({
 
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
+        emitTimer = null
+
         if (
           props.type !== 'number'
           && temp.hasOwnProperty('value') === true
@@ -288,7 +290,7 @@ export default createComponent({
       }
 
       if (props.debounce !== void 0) {
-        clearTimeout(emitTimer)
+        emitTimer !== null && clearTimeout(emitTimer)
         temp.value = val
         emitTimer = setTimeout(emitValueFn, props.debounce)
       }
@@ -322,7 +324,11 @@ export default createComponent({
     function onChange (e) {
       onComposition(e)
 
-      clearTimeout(emitTimer)
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer)
+        emitTimer = null
+      }
+
       emitValueFn !== void 0 && emitValueFn()
 
       emit('change', e.target.value)
@@ -331,7 +337,11 @@ export default createComponent({
     function onFinishEditing (e) {
       e !== void 0 && stop(e)
 
-      clearTimeout(emitTimer)
+      if (emitTimer !== null) {
+        clearTimeout(emitTimer)
+        emitTimer = null
+      }
+
       emitValueFn !== void 0 && emitValueFn()
 
       typedNumber = false

package/src/components/layout/QLayout.js

@@ -122,7 +122,7 @@ export default createComponent({
       }
     }
 
-    let timer
+    let animateTimer = null
 
     const $layout = {
       instances: {},
@@ -153,16 +153,16 @@ export default 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)
       },
 

package/src/components/menu/QMenu.js

@@ -111,7 +111,7 @@ export default createComponent({
       processOnMount: true
     })
 
-    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent)
+    const { showPortal, hidePortal, renderPortal } = usePortal(vm, innerRef, renderPortalContent, 'menu')
 
     const clickOutsideProps = {
       anchorEl,

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -137,6 +137,8 @@ export default createComponent({
       })
     }
 
+    let $el, localScrollTarget, timer = null
+
     function animateTo ({ pos, ratio }, done) {
       animating.value = true
       pullPosition.value = pos
@@ -145,15 +147,14 @@ export default 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)
     }
@@ -166,7 +167,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      clearTimeout(timer)
+      timer !== null && clearTimeout(timer)
     })
 
     // expose public methods

package/src/components/rating/QRating.js

@@ -216,13 +216,13 @@ export default createComponent({
         case 37: // LEFT ARROW
         case 40: // DOWN ARROW
           if (iconRefs[ `rt${ i - 1 }` ]) {
-            iconRefs[ `rt${ i - 1 }` ].$el.focus()
+            iconRefs[ `rt${ i - 1 }` ].focus()
           }
           return stopAndPrevent(e)
         case 39: // RIGHT ARROW
         case 38: // UP ARROW
           if (iconRefs[ `rt${ i + 1 }` ]) {
-            iconRefs[ `rt${ i + 1 }` ].$el.focus()
+            iconRefs[ `rt${ i + 1 }` ].focus()
           }
           return stopAndPrevent(e)
       }
@@ -245,7 +245,7 @@ export default createComponent({
         child.push(
           h('div', {
             key: i,
-            ref: vm => { iconRefs[ `rt${ i }` ] = vm },
+            ref: el => { iconRefs[ `rt${ i }` ] = el },
             class: 'q-rating__icon-container flex flex-center',
             ...attrs,
             onClick () { set(i) },

package/src/components/resize-observer/QResizeObserver.js

@@ -40,8 +40,10 @@ export default createComponent({
     }
 
     function emitEvent () {
-      clearTimeout(timer)
-      timer = null
+      if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
+      }
 
       if (targetEl) {
         const { offsetWidth: width, offsetHeight: height } = targetEl
@@ -75,7 +77,7 @@ export default createComponent({
       onMounted(() => { init() })
 
       onBeforeUnmount(() => {
-        clearTimeout(timer)
+        timer !== null && clearTimeout(timer)
 
         if (observer !== void 0) {
           if (observer.disconnect !== void 0) {
@@ -95,7 +97,10 @@ export default 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

package/src/components/scroll-area/QScrollArea.js

@@ -88,7 +88,7 @@ export default createComponent({
 
     const isDark = useDark(props, proxy.$q)
 
-    let timer, panRefPos
+    let timer = null, panRefPos
 
     const targetRef = ref(null)
 
@@ -337,14 +337,14 @@ export default 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()
     }