quasar 2.11.2 → 2.11.4

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.2",
+  "version": "2.11.4",
   "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",
@@ -68,14 +68,14 @@
   "homepage": "https://quasar.dev",
   "devDependencies": {
     "@quasar/app-vite": "^1.1.3",
-    "@quasar/extras": "^1.15.5",
+    "@quasar/extras": "^1.15.9",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.13",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
-    "cssnano": "^5.1.12",
+    "cssnano": "^5.1.14",
     "diff": "^5.1.0",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^17.0.0",
@@ -94,11 +94,11 @@
     "recast": "^0.18.5",
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
-    "table": "^6.0.4",
+    "table": "^6.8.1",
     "uglify-es": "^3.3.9",
-    "vue": "^3.2.41",
-    "vue-router": "^4.0.16",
-    "yargs": "^17.3.0"
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6",
+    "yargs": "^17.6.2"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",

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/checkbox/use-checkbox.js

@@ -112,6 +112,8 @@ export default function (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

package/src/components/dialog/QDialog.js

@@ -84,7 +84,7 @@ export default 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
@@ -103,7 +103,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 +266,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 +292,10 @@ export default createComponent({
     }
 
     function cleanup (hiding) {
-      clearTimeout(shakeTimeout)
+      if (shakeTimeout !== null) {
+        clearTimeout(shakeTimeout)
+        shakeTimeout = null
+      }
 
       if (hiding === true || showing.value === true) {
         updateMaximized(false)

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/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/radio/QRadio.js

@@ -100,6 +100,8 @@ export default 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

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()
     }
 

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