quasar 2.19.2 → 2.20.0

package/src/components/header/QHeader.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onBeforeUnmount,
+  getCurrentInstance,
+  h,
   inject,
-  getCurrentInstance
+  onBeforeUnmount,
+  ref,
+  watch
 } from 'vue'
 
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -13,10 +13,16 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import { hUniqueSlot } from '../../utils/private.render/render.js'
 import {
-  layoutKey,
-  emptyRenderFn
+  emptyRenderFn,
+  layoutKey
 } from '../../utils/private.symbols/symbols.js'
 
+function updateLocal(prop, val) {
+  if (prop.value !== val) {
+    prop.value = val
+  }
+}
+
 export default createComponent({
   name: 'QHeader',
 
@@ -52,60 +58,51 @@ export default createComponent({
       return emptyRenderFn
     }
 
-    const size = ref(parseInt(props.heightHint, 10))
+    const size = ref(Number.parseInt(props.heightHint, 10))
     const revealed = ref(true)
 
     const fixed = computed(
       () =>
-        props.reveal === true ||
-        $layout.view.value.indexOf('H') !== -1 ||
-        ($q.platform.is.ios && $layout.isContainer.value === true)
+        props.reveal ||
+        $layout.view.value.includes('H') ||
+        ($q.platform.is.ios && $layout.isContainer.value)
     )
 
     const offset = computed(() => {
-      if (props.modelValue !== true) {
-        return 0
-      }
-      if (fixed.value === true) {
-        return revealed.value === true ? size.value : 0
-      }
+      if (!props.modelValue) return 0
+      if (fixed.value) return revealed.value ? size.value : 0
 
       const localOffset = size.value - $layout.scroll.value.position
-      return localOffset > 0 ? localOffset : 0
+      return Math.max(localOffset, 0)
     })
 
     const hidden = computed(
-      () =>
-        props.modelValue !== true ||
-        (fixed.value === true && revealed.value !== true)
+      () => !props.modelValue || (fixed.value && !revealed.value)
     )
 
     const revealOnFocus = computed(
-      () =>
-        props.modelValue === true &&
-        hidden.value === true &&
-        props.reveal === true
+      () => props.modelValue && hidden.value && props.reveal
     )
 
     const classes = computed(
       () =>
         'q-header q-layout__section--marginal ' +
-        (fixed.value === true ? 'fixed' : 'absolute') +
+        (fixed.value ? 'fixed' : 'absolute') +
         '-top' +
-        (props.bordered === true ? ' q-header--bordered' : '') +
-        (hidden.value === true ? ' q-header--hidden' : '') +
-        (props.modelValue !== true ? ' q-layout--prevent-focus' : '')
+        (props.bordered ? ' q-header--bordered' : '') +
+        (hidden.value ? ' q-header--hidden' : '') +
+        (props.modelValue ? '' : ' q-layout--prevent-focus')
     )
 
     const style = computed(() => {
       const view = $layout.rows.value.top,
         css = {}
 
-      if (view[0] === 'l' && $layout.left.space === true) {
-        css[$q.lang.rtl === true ? 'right' : 'left'] = `${$layout.left.size}px`
+      if (view[0] === 'l' && $layout.left.space) {
+        css[$q.lang.rtl ? 'right' : 'left'] = `${$layout.left.size}px`
       }
-      if (view[2] === 'r' && $layout.right.space === true) {
-        css[$q.lang.rtl === true ? 'left' : 'right'] = `${$layout.right.size}px`
+      if (view[2] === 'r' && $layout.right.space) {
+        css[$q.lang.rtl ? 'left' : 'right'] = `${$layout.right.size}px`
       }
 
       return css
@@ -115,22 +112,13 @@ export default createComponent({
       $layout.update('header', prop, val)
     }
 
-    function updateLocal(prop, val) {
-      if (prop.value !== val) {
-        prop.value = val
-      }
-    }
-
     function onResize({ height }) {
       updateLocal(size, height)
       updateLayout('size', height)
     }
 
     function onFocusin(evt) {
-      if (revealOnFocus.value === true) {
-        updateLocal(revealed, true)
-      }
-
+      if (revealOnFocus.value) updateLocal(revealed, true)
       emit('focusin', evt)
     }
 
@@ -150,7 +138,7 @@ export default createComponent({
     watch(
       () => props.reveal,
       val => {
-        if (val === false) updateLocal(revealed, props.modelValue)
+        if (!val) updateLocal(revealed, props.modelValue)
       }
     )
 
@@ -160,7 +148,7 @@ export default createComponent({
     })
 
     watch($layout.scroll, scroll => {
-      if (props.reveal === true) {
+      if (props.reveal) {
         updateLocal(
           revealed,
           scroll.direction === 'up' ||
@@ -173,7 +161,7 @@ export default createComponent({
     const instance = {}
 
     $layout.instances.header = instance
-    if (props.modelValue === true) updateLayout('size', size.value)
+    if (props.modelValue) updateLayout('size', size.value)
     updateLayout('space', props.modelValue)
     updateLayout('offset', offset.value)
 
@@ -189,7 +177,7 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (props.elevated === true) {
+      if (props.elevated) {
         child.push(
           h('div', {
             class:

package/src/components/icon/QIcon.js

@@ -1,11 +1,11 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useSize, {
   useSizeProps
 } from '../../composables/private.use-size/use-size.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
+import { hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 const defaultViewBox = '0 0 24 24'
 
@@ -74,8 +74,8 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-icon' +
-        (props.left === true ? ' on-left' : '') + // TODO Qv3: drop this
-        (props.right === true ? ' on-right' : '') +
+        (props.left ? ' on-left' : '') + // TODO Qv3: drop this
+        (props.right ? ' on-right' : '') +
         (props.color !== void 0 ? ` text-${props.color}` : '')
     )
 
@@ -104,7 +104,7 @@ export default createComponent({
         }
       }
 
-      if (mRE.test(icon) === true) {
+      if (mRE.test(icon)) {
         const [def, viewBox = defaultViewBox] = icon.split('|')
 
         return {
@@ -117,19 +117,19 @@ export default createComponent({
         }
       }
 
-      if (imgRE.test(icon) === true) {
+      if (imgRE.test(icon)) {
         return {
           img: true,
-          src: icon.substring(4)
+          src: icon.slice(4)
         }
       }
 
-      if (svgUseRE.test(icon) === true) {
+      if (svgUseRE.test(icon)) {
         const [def, viewBox = defaultViewBox] = icon.split('|')
 
         return {
           svguse: true,
-          src: def.substring(7),
+          src: def.slice(7),
           viewBox
         }
       }
@@ -139,11 +139,11 @@ export default createComponent({
 
       if (matches !== null) {
         cls = libMap[matches[1]](icon)
-      } else if (faRE.test(icon) === true) {
+      } else if (faRE.test(icon)) {
         cls = icon
-      } else if (ionRE.test(icon) === true) {
-        cls = `ionicons ion-${$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substring(3)}`
-      } else if (symRE.test(icon) === true) {
+      } else if (ionRE.test(icon)) {
+        cls = `ionicons ion-${$q.platform.is.ios ? 'ios' : 'md'}${icon.slice(3)}`
+      } else if (symRE.test(icon)) {
         // "notranslate" class is for Google Translate
         // to avoid tampering with Material Symbols ligature font
         //
@@ -153,7 +153,7 @@ export default createComponent({
 
         const symMatches = icon.match(symRE)
         if (symMatches !== null) {
-          icon = icon.substring(6)
+          icon = icon.slice(6)
           cls += symMap[symMatches[1]]
         }
 
@@ -168,7 +168,7 @@ export default createComponent({
 
         const matMatches = icon.match(matRE)
         if (matMatches !== null) {
-          icon = icon.substring(2)
+          icon = icon.slice(2)
           cls += matMap[matMatches[1]]
         }
 
@@ -188,11 +188,11 @@ export default createComponent({
         'aria-hidden': 'true'
       }
 
-      if (type.value.none === true) {
+      if (type.value.none) {
         return h(props.tag, data, hSlot(slots.default))
       }
 
-      if (type.value.img === true) {
+      if (type.value.img) {
         return h(
           props.tag,
           data,
@@ -200,7 +200,7 @@ export default createComponent({
         )
       }
 
-      if (type.value.svg === true) {
+      if (type.value.svg) {
         return h(
           props.tag,
           data,
@@ -216,7 +216,7 @@ export default createComponent({
         )
       }
 
-      if (type.value.svguse === true) {
+      if (type.value.svguse) {
         return h(
           props.tag,
           data,

package/src/components/img/QImg.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
+  Transition,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
   onMounted,
-  Transition,
-  getCurrentInstance
+  ref,
+  watch
 } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
@@ -114,7 +114,7 @@ export default createComponent({
     const hasError = ref(false)
 
     const classes = computed(
-      () => `q-img q-img--${props.noNativeMenu === true ? 'no-' : ''}menu`
+      () => `q-img q-img--${props.noNativeMenu ? 'no-' : ''}menu`
     )
 
     const style = computed(() => ({
@@ -125,7 +125,7 @@ export default createComponent({
     const imgClass = computed(
       () =>
         `q-img__image ${props.imgClass !== void 0 ? props.imgClass + ' ' : ''}` +
-        `q-img__image--with${props.noTransition === true ? 'out' : ''}-transition` +
+        `q-img__image--with${props.noTransition ? 'out' : ''}-transition` +
         ' q-img__image--'
     )
 
@@ -154,23 +154,23 @@ export default createComponent({
     }
 
     function onLoad({ target }) {
-      if (vmIsDestroyed(vm) === false) {
-        removeLoadTimeout()
+      if (vmIsDestroyed(vm)) return
+
+      removeLoadTimeout()
 
-        naturalRatio.value =
-          target.naturalHeight === 0
-            ? 0.5
-            : target.naturalWidth / target.naturalHeight
+      naturalRatio.value =
+        target.naturalHeight === 0
+          ? 0.5
+          : target.naturalWidth / target.naturalHeight
 
-        waitForCompleteness(target, 1)
-      }
+      waitForCompleteness(target, 1)
     }
 
     function waitForCompleteness(target, count) {
       // protect against running forever
-      if (count === 1000 || vmIsDestroyed(vm) === true) return
+      if (count === 1000 || vmIsDestroyed(vm)) return
 
-      if (target.complete === true) {
+      if (target.complete) {
         onReady(target)
       } else {
         registerLoadTimeout(() => {
@@ -180,7 +180,7 @@ export default createComponent({
     }
 
     function onReady(target) {
-      if (vmIsDestroyed(vm) === true) return
+      if (vmIsDestroyed(vm)) return
 
       position.value = position.value ^ 1
       images[position.value].value = null
@@ -243,14 +243,14 @@ export default createComponent({
     }
 
     function getContent() {
-      if (isLoading.value === false) {
+      if (!isLoading.value) {
         return h(
           'div',
           {
             key: 'content',
             class: 'q-img__content absolute-full q-anchor--skip'
           },
-          hSlot(slots[hasError.value === true ? 'error' : 'default'])
+          hSlot(slots[hasError.value ? 'error' : 'default'])
         )
       }
 
@@ -262,7 +262,7 @@ export default createComponent({
         },
         slots.loading !== void 0
           ? slots.loading()
-          : props.noSpinner === true
+          : props.noSpinner
             ? void 0
             : [
                 h(QSpinner, {
@@ -273,8 +273,8 @@ export default createComponent({
       )
     }
 
-    if (__QUASAR_SSR_SERVER__ !== true) {
-      function watchSrc() {
+    if (!__QUASAR_SSR_SERVER__) {
+      const watchSrc = () => {
         watch(
           () =>
             props.src || props.srcset || props.sizes
@@ -301,7 +301,7 @@ export default createComponent({
         )
       }
 
-      if (isRuntimeSsrPreHydration.value === true) {
+      if (isRuntimeSsrPreHydration.value) {
         onMounted(watchSrc)
       } else {
         watchSrc()

package/src/components/img/QImg.json

@@ -12,7 +12,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) src=\"img/something.png\"",
-        "# (assets folder) src=\"~assets/my-img.gif\"",
+        "# (assets folder) src=\"~@/assets/my-img.gif\"",
         "# (relative path format) :src=\"require('./my_img.jpg')\"",
         "# (URL) src=\"https://picsum.photos/500/300\""
       ],
@@ -43,7 +43,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) placeholder-src=\"img/some-placeholder.png\"",
-        "# (assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
+        "# (assets folder) placeholder-src=\"~@/assets/my-placeholder.gif\"",
         "# (relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
         "# (URL) placeholder-src=\"https://picsum.photos/500/300\""
       ],
@@ -56,7 +56,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) error-src=\"img/some-placeholder.png\"",
-        "# (assets folder) error-src=\"~assets/my-placeholder.gif\"",
+        "# (assets folder) error-src=\"~@/assets/my-placeholder.gif\"",
         "# (relative path format) :error-src=\"require('./placeholder.jpg')\"",
         "# (URL) error-src=\"https://picsum.photos/500/300\""
       ],

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

@@ -1,25 +1,25 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onMounted,
+  getCurrentInstance,
+  h,
+  nextTick,
   onActivated,
-  onDeactivated,
   onBeforeUnmount,
-  nextTick,
-  getCurrentInstance
+  onDeactivated,
+  onMounted,
+  ref,
+  watch
 } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import debounce from '../../utils/debounce/debounce.js'
 import { height } from '../../utils/dom/dom.js'
 import {
-  getScrollTarget,
   getScrollHeight,
+  getScrollTarget,
   getVerticalScrollPosition,
-  setVerticalScrollPosition,
-  scrollTargetProp
+  scrollTargetProp,
+  setVerticalScrollPosition
 } from '../../utils/scroll/scroll.js'
 import { listenOpts } from '../../utils/event/event.js'
 import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
@@ -64,16 +64,11 @@ export default createComponent({
 
     const classes = computed(
       () =>
-        'q-infinite-scroll__loading' +
-        (isFetching.value === true ? '' : ' invisible')
+        'q-infinite-scroll__loading' + (isFetching.value ? '' : ' invisible')
     )
 
     function immediatePoll() {
-      if (
-        props.disable === true ||
-        isFetching.value === true ||
-        isWorking.value === false
-      ) {
+      if (props.disable || isFetching.value || !isWorking.value) {
         return
       }
 
@@ -81,7 +76,7 @@ export default createComponent({
         scrollPosition = getVerticalScrollPosition(localScrollTarget),
         containerHeight = height(localScrollTarget)
 
-      if (props.reverse === false) {
+      if (!props.reverse) {
         if (
           Math.round(scrollPosition + containerHeight + props.offset) >=
           Math.round(scrollHeight)
@@ -94,11 +89,7 @@ export default createComponent({
     }
 
     function trigger() {
-      if (
-        props.disable === true ||
-        isFetching.value === true ||
-        isWorking.value === false
-      ) {
+      if (props.disable || isFetching.value || !isWorking.value) {
         return
       }
 
@@ -108,10 +99,10 @@ export default createComponent({
       const heightBefore = getScrollHeight(localScrollTarget)
 
       emit('load', index, isDone => {
-        if (isWorking.value === true) {
+        if (isWorking.value) {
           isFetching.value = false
           nextTick(() => {
-            if (props.reverse === true) {
+            if (props.reverse) {
               const heightAfter = getScrollHeight(localScrollTarget),
                 scrollPosition = getVerticalScrollPosition(localScrollTarget),
                 heightDifference = heightAfter - heightBefore
@@ -124,8 +115,8 @@ export default createComponent({
 
             if (isDone === true) {
               stop()
-            } else if (rootRef.value) {
-              if (rootRef.value.closest('body')) poll()
+            } else if (rootRef.value?.closest('body')) {
+              poll()
             }
           })
         }
@@ -137,7 +128,7 @@ export default createComponent({
     }
 
     function resume() {
-      if (isWorking.value === false) {
+      if (!isWorking.value) {
         isWorking.value = true
         localScrollTarget.addEventListener('scroll', poll, passive)
       }
@@ -146,7 +137,7 @@ export default createComponent({
     }
 
     function stop() {
-      if (isWorking.value === true) {
+      if (isWorking.value) {
         isWorking.value = false
         isFetching.value = false
         localScrollTarget.removeEventListener('scroll', poll, passive)
@@ -155,16 +146,16 @@ export default createComponent({
     }
 
     function updateScrollTarget() {
-      if (localScrollTarget && isWorking.value === true) {
+      if (localScrollTarget && isWorking.value) {
         localScrollTarget.removeEventListener('scroll', poll, passive)
       }
 
       localScrollTarget = getScrollTarget(rootRef.value, props.scrollTarget)
 
-      if (isWorking.value === true) {
+      if (isWorking.value) {
         localScrollTarget.addEventListener('scroll', poll, passive)
 
-        if (props.reverse === true) {
+        if (props.reverse) {
           const scrollHeight = getScrollHeight(localScrollTarget),
             containerHeight = height(localScrollTarget)
 
@@ -183,16 +174,16 @@ export default createComponent({
     }
 
     function setDebounce(val) {
-      val = parseInt(val, 10)
+      val = Number.parseInt(val, 10)
 
       const oldPoll = poll
 
       poll =
         val <= 0
           ? immediatePoll
-          : debounce(immediatePoll, isNaN(val) === true ? 100 : val)
+          : debounce(immediatePoll, Number.isNaN(val) ? 100 : val)
 
-      if (localScrollTarget && isWorking.value === true) {
+      if (localScrollTarget && isWorking.value) {
         if (oldPoll !== void 0) {
           localScrollTarget.removeEventListener('scroll', oldPoll, passive)
         }
@@ -202,9 +193,9 @@ export default createComponent({
     }
 
     function updateSvgAnimations(isRetry) {
-      if (renderLoadingSlot.value === true) {
+      if (renderLoadingSlot.value) {
         if (loadingRef.value === null) {
-          if (isRetry !== true) {
+          if (!isRetry) {
             nextTick(() => {
               updateSvgAnimations(true)
             })
@@ -214,16 +205,14 @@ export default createComponent({
 
         // 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 => {
+        const action = `${isFetching.value ? 'un' : ''}pauseAnimations`
+        ;[...loadingRef.value.getElementsByTagName('svg')].forEach(el => {
           el[action]()
         })
       }
     }
 
-    const renderLoadingSlot = computed(
-      () => props.disable !== true && isWorking.value === true
-    )
+    const renderLoadingSlot = computed(() => !props.disable && isWorking.value)
 
     watch([isFetching, renderLoadingSlot], () => {
       updateSvgAnimations()
@@ -232,18 +221,15 @@ export default createComponent({
     watch(
       () => props.disable,
       val => {
-        if (val === true) {
-          stop()
-        } else {
-          resume()
-        }
+        if (val) stop()
+        else resume()
       }
     )
 
     watch(
       () => props.reverse,
       () => {
-        if (isFetching.value === false && isWorking.value === true) {
+        if (!isFetching.value && isWorking.value) {
           immediatePoll()
         }
       }
@@ -267,7 +253,7 @@ export default createComponent({
     })
 
     onBeforeUnmount(() => {
-      if (isWorking.value === true) {
+      if (isWorking.value) {
         localScrollTarget.removeEventListener('scroll', poll, passive)
       }
     })
@@ -276,7 +262,7 @@ export default createComponent({
       setDebounce(props.debounce)
       updateScrollTarget()
 
-      if (isFetching.value === false) updateSvgAnimations()
+      if (!isFetching.value) updateSvgAnimations()
     })
 
     // expose public methods
@@ -296,8 +282,8 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (renderLoadingSlot.value === true) {
-        child[props.reverse === false ? 'push' : 'unshift'](
+      if (renderLoadingSlot.value) {
+        child[props.reverse ? 'unshift' : 'push'](
           h(
             'div',
             { ref: loadingRef, class: classes.value },