quasar 2.19.2 → 2.20.0

package/src/components/pagination/QPagination.js

@@ -1,4 +1,4 @@
-import { h, ref, watch, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
 import QInput from '../input/QInput.js'
@@ -13,7 +13,7 @@ import { between } from '../../utils/format/format.js'
 import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
 function getBool(val, otherwise) {
-  return [true, false].includes(val) ? val : otherwise
+  return val === true || val === false ? val : otherwise
 }
 
 export default createComponent({
@@ -37,7 +37,7 @@ export default createComponent({
     maxPages: {
       type: [Number, String],
       default: 0,
-      validator: v => (typeof v === 'string' ? parseInt(v, 10) : v) >= 0
+      validator: v => (typeof v === 'string' ? Number.parseInt(v, 10) : v) >= 0
     },
 
     inputStyle: [Array, String, Object],
@@ -116,9 +116,9 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
 
-    const minProp = computed(() => parseInt(props.min, 10))
-    const maxProp = computed(() => parseInt(props.max, 10))
-    const maxPagesProp = computed(() => parseInt(props.maxPages, 10))
+    const minProp = computed(() => Number.parseInt(props.min, 10))
+    const maxProp = computed(() => Number.parseInt(props.max, 10))
+    const maxPagesProp = computed(() => Number.parseInt(props.maxPages, 10))
 
     const inputPlaceholder = computed(() => model.value + ' / ' + maxProp.value)
     const boundaryLinksProp = computed(() =>
@@ -136,8 +136,8 @@ export default createComponent({
     const model = computed({
       get: () => props.modelValue,
       set: val => {
-        val = parseInt(val, 10)
-        if (props.disable || isNaN(val)) return
+        val = Number.parseInt(val, 10)
+        if (props.disable || !Number.isFinite(val)) return
 
         const value = between(val, minProp.value, maxProp.value)
         if (props.modelValue !== value) {
@@ -156,7 +156,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-pagination row no-wrap items-center' +
-        (props.disable === true ? ' disabled' : '')
+        (props.disable ? ' disabled' : '')
     )
 
     const gutterProp = computed(() =>
@@ -177,11 +177,11 @@ export default createComponent({
         props.iconNext || $q.iconSet.pagination.next,
         props.iconLast || $q.iconSet.pagination.last
       ]
-      return $q.lang.rtl === true ? ico.reverse() : ico
+      return $q.lang.rtl ? ico.reverse() : ico
     })
 
     const attrs = computed(() => ({
-      'aria-disabled': props.disable === true ? 'true' : 'false',
+      'aria-disabled': props.disable ? 'true' : 'false',
       role: 'navigation'
     }))
 
@@ -285,7 +285,7 @@ export default createComponent({
     function updateModel() {
       model.value = newPage.value
       newPage.value = null
-      if ($q.platform.is.mobile === true) document.activeElement.blur()
+      if ($q.platform.is.mobile) document.activeElement.blur()
     }
 
     function onInputValue(val) {
@@ -293,7 +293,7 @@ export default createComponent({
     }
 
     function onKeyup(e) {
-      if (isKeyCode(e, 13) === true) updateModel()
+      if (isKeyCode(e, 13)) updateModel()
     }
 
     function getBtn(cfg, page, active) {
@@ -304,7 +304,7 @@ export default createComponent({
         ...cfg
       }
 
-      if (active === true) {
+      if (active) {
         Object.assign(data, {
           'aria-current': 'true',
           ...activeBtnProps.value
@@ -332,7 +332,7 @@ export default createComponent({
       const contentEnd = []
       let contentMiddle
 
-      if (boundaryLinksProp.value === true) {
+      if (boundaryLinksProp.value) {
         contentStart.push(
           getBtn(
             {
@@ -358,7 +358,7 @@ export default createComponent({
         )
       }
 
-      if (directionLinksProp.value === true) {
+      if (directionLinksProp.value) {
         contentStart.push(
           getBtn(
             {
@@ -384,13 +384,12 @@ export default createComponent({
         )
       }
 
-      if (props.input !== true) {
+      if (!props.input) {
         // has buttons instead of inputbox
         contentMiddle = []
         const { pgFrom, pgTo, marginalStyle: style } = btnConfig.value
 
-        if (btnConfig.value.boundaryStart === true) {
-          const active = minProp.value === props.modelValue
+        if (btnConfig.value.boundaryStart) {
           contentStart.push(
             getBtn(
               {
@@ -400,13 +399,12 @@ export default createComponent({
                 label: minProp.value
               },
               minProp.value,
-              active
+              minProp.value === props.modelValue
             )
           )
         }
 
-        if (btnConfig.value.boundaryEnd === true) {
-          const active = maxProp.value === props.modelValue
+        if (btnConfig.value.boundaryEnd) {
           contentEnd.unshift(
             getBtn(
               {
@@ -416,12 +414,12 @@ export default createComponent({
                 label: maxProp.value
               },
               maxProp.value,
-              active
+              maxProp.value === props.modelValue
             )
           )
         }
 
-        if (btnConfig.value.ellipsesStart === true) {
+        if (btnConfig.value.ellipsesStart) {
           contentStart.push(
             getBtn(
               {
@@ -436,7 +434,7 @@ export default createComponent({
           )
         }
 
-        if (btnConfig.value.ellipsesEnd === true) {
+        if (btnConfig.value.ellipsesEnd) {
           contentEnd.unshift(
             getBtn(
               {
@@ -483,7 +481,7 @@ export default createComponent({
             [
               ...contentStart,
 
-              props.input === true
+              props.input
                 ? h(QInput, {
                     class: 'inline',
                     style: {

package/src/components/parallax/QParallax.js

@@ -1,4 +1,4 @@
-import { h, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { height, offset } from '../../utils/dom/dom.js'
@@ -8,6 +8,7 @@ import { hSlot } from '../../utils/private.render/render.js'
 import { listenOpts } from '../../utils/event/event.js'
 
 const { passive } = listenOpts
+const mediaEvents = ['load', 'loadstart', 'loadedmetadata']
 
 export default createComponent({
   name: 'QParallax',
@@ -35,7 +36,7 @@ export default createComponent({
     const mediaParentRef = ref(null)
     const mediaRef = ref(null)
 
-    let isWorking,
+    let isWorking = false,
       mediaEl,
       mediaHeight,
       resizeHandler,
@@ -45,14 +46,14 @@ export default createComponent({
     watch(
       () => props.height,
       () => {
-        if (isWorking === true) updatePos()
+        if (isWorking) updatePos()
       }
     )
 
     watch(
       () => props.scrollTarget,
       () => {
-        if (isWorking === true) {
+        if (isWorking) {
           stop()
           start()
         }
@@ -99,7 +100,7 @@ export default createComponent({
       mediaHeight =
         mediaEl.naturalHeight || mediaEl.videoHeight || height(mediaEl)
 
-      if (isWorking === true) updatePos()
+      if (isWorking) updatePos()
     }
 
     function start() {
@@ -111,7 +112,7 @@ export default createComponent({
     }
 
     function stop() {
-      if (isWorking === true) {
+      if (isWorking) {
         isWorking = false
         localScrollTarget.removeEventListener('scroll', updatePos, passive)
         window.removeEventListener('resize', resizeHandler, passive)
@@ -132,13 +133,16 @@ export default createComponent({
           ? mediaParentRef.value.children[0]
           : mediaRef.value
 
-      mediaEl.onload = mediaEl.onloadstart = mediaEl.loadedmetadata = onResize
+      mediaEvents.forEach(evtName => {
+        mediaEl.addEventListener(evtName, onResize)
+      })
+
       onResize()
       mediaEl.style.display = 'initial'
 
       if (window.IntersectionObserver !== void 0) {
         observer = new IntersectionObserver(entries => {
-          const fn = entries[0].isIntersecting === true ? start : stop
+          const fn = entries[0].isIntersecting ? start : stop
           fn()
         })
 
@@ -151,7 +155,9 @@ export default createComponent({
     onBeforeUnmount(() => {
       stop()
       observer?.disconnect()
-      mediaEl.onload = mediaEl.onloadstart = mediaEl.loadedmetadata = null
+      mediaEvents.forEach(evtName => {
+        mediaEl.removeEventListener(evtName, onResize)
+      })
     })
 
     return () =>

package/src/components/parallax/QParallax.json

@@ -10,7 +10,7 @@
       "transformAssetUrls": true,
       "examples": [
         "# (public folder) src=\"img/something.png\"",
-        "# (assets folder) src=\"~assets/my-img.png\"",
+        "# (assets folder) src=\"~@/assets/my-img.png\"",
         "# (relative path format) :src=\"require('./my_img.jpg')\"",
         "# (URL) src=\"https://some-site.net/some-img.jpg\""
       ],

package/src/components/popup-edit/QPopupEdit.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, nextTick, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, nextTick, ref } from 'vue'
 
 import QMenu from '../menu/QMenu.js'
 import QBtn from '../btn/QBtn.js'
@@ -80,9 +80,9 @@ export default createComponent({
     )
 
     function set() {
-      if (props.validate(currentModel.value) === false) return
+      if (!props.validate(currentModel.value)) return
 
-      if (hasModelChanged() === true) {
+      if (hasModelChanged()) {
         emit('save', currentModel.value, initialValue.value)
         emit('update:modelValue', currentModel.value)
       }
@@ -91,7 +91,7 @@ export default createComponent({
     }
 
     function cancel() {
-      if (hasModelChanged() === true) {
+      if (hasModelChanged()) {
         emit('cancel', currentModel.value, initialValue.value)
       }
 
@@ -105,7 +105,7 @@ export default createComponent({
     }
 
     function hasModelChanged() {
-      return isDeepEqual(currentModel.value, initialValue.value) === false
+      return !isDeepEqual(currentModel.value, initialValue.value)
     }
 
     function closeMenu() {
@@ -125,11 +125,8 @@ export default createComponent({
     }
 
     function onBeforeHide() {
-      if (validated === false && hasModelChanged() === true) {
-        if (
-          props.autoSave === true &&
-          props.validate(currentModel.value) === true
-        ) {
+      if (!validated && hasModelChanged()) {
+        if (props.autoSave && props.validate(currentModel.value)) {
           emit('save', currentModel.value, initialValue.value)
           emit('update:modelValue', currentModel.value)
         } else {
@@ -146,7 +143,7 @@ export default createComponent({
 
     function getContent() {
       const child =
-        slots.default !== void 0 ? [].concat(slots.default(scope.value)) : []
+        slots.default !== void 0 ? [slots.default(scope.value)].flat() : []
 
       if (props.title) {
         child.unshift(
@@ -154,7 +151,7 @@ export default createComponent({
         )
       }
 
-      if (props.buttons === true) {
+      if (props.buttons) {
         child.push(
           h(
             'div',
@@ -194,7 +191,7 @@ export default createComponent({
     })
 
     return () => {
-      if (props.disable === true) return
+      if (props.disable) return
 
       return h(
         QMenu,

package/src/components/popup-proxy/QPopupProxy.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import QDialog from '../dialog/QDialog.js'
 import QMenu from '../menu/QMenu.js'
@@ -30,9 +30,9 @@ export default createComponent({
 
     const showing = ref(false)
     const popupRef = ref(null)
-    const breakpoint = computed(() => parseInt(props.breakpoint, 10))
+    const breakpoint = computed(() => Number.parseInt(props.breakpoint, 10))
 
-    const { canShow } = useAnchor({ showing })
+    const { canShow } = useAnchor({ showing, avoidEmit: true })
 
     function getType() {
       return $q.screen.width < breakpoint.value ||
@@ -50,9 +50,7 @@ export default createComponent({
     watch(
       () => getType(),
       val => {
-        if (showing.value !== true) {
-          type.value = val
-        }
+        if (!showing.value) type.value = val
       }
     )
 
@@ -70,7 +68,7 @@ export default createComponent({
     // expose public methods
     Object.assign(proxy, {
       show(evt) {
-        if (canShow(evt) === true) popupRef.value.show(evt)
+        if (canShow(evt)) popupRef.value.show(evt)
       },
       hide(evt) {
         popupRef.value.hide(evt)

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

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
-  onMounted,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
-  getCurrentInstance
+  onMounted,
+  ref,
+  watch
 } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
@@ -20,7 +20,7 @@ import {
 } from '../../utils/scroll/scroll.js'
 import { between } from '../../utils/format/format.js'
 import { prevent } from '../../utils/event/event.js'
-import { hSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hSlot } from '../../utils/private.render/render.js'
 
 const PULLER_HEIGHT = 40,
   OFFSET_TOP = 20
@@ -59,15 +59,13 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-pull-to-refresh__puller row flex-center' +
-        (animating.value === true
-          ? ' q-pull-to-refresh__puller--animating'
-          : '') +
+        (animating.value ? ' q-pull-to-refresh__puller--animating' : '') +
         (props.bgColor !== void 0 ? ` bg-${props.bgColor}` : '')
     )
 
     function pull(event) {
-      if (event.isFinal === true) {
-        if (pulling.value === true) {
+      if (event.isFinal) {
+        if (pulling.value) {
           pulling.value = false
 
           if (state.value === 'pulled') {
@@ -82,16 +80,16 @@ export default createComponent({
         return
       }
 
-      if (animating.value === true || state.value === 'refreshing') {
+      if (animating.value || state.value === 'refreshing') {
         return false
       }
 
-      if (event.isFirst === true) {
+      if (event.isFirst) {
         if (
           getVerticalScrollPosition(localScrollTarget) !== 0 ||
           event.direction !== 'down'
         ) {
-          if (pulling.value === true) {
+          if (pulling.value) {
             pulling.value = false
             state.value = 'pull'
             animateTo({ pos: -PULLER_HEIGHT, ratio: 0 })
@@ -127,7 +125,7 @@ export default createComponent({
       // if props.disable === false
       const modifiers = { down: true }
 
-      if (props.noMouse !== true) {
+      if (!props.noMouse) {
         modifiers.mouse = true
       }
 
@@ -136,7 +134,7 @@ export default createComponent({
 
     const contentClass = computed(
       () =>
-        `q-pull-to-refresh__content${pulling.value === true ? ' no-pointer-events' : ''}`
+        `q-pull-to-refresh__content${pulling.value ? ' no-pointer-events' : ''}`
     )
 
     function trigger() {
@@ -221,7 +219,7 @@ export default createComponent({
         { class: 'q-pull-to-refresh' },
         child,
         'main',
-        props.disable === false,
+        !props.disable,
         () => directives.value
       )
     }

package/src/components/radio/QRadio.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
+import { computed, getCurrentInstance, h, ref, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -10,14 +10,14 @@ import useSize, {
 } from '../../composables/private.use-size/use-size.js'
 import useRefocusTarget from '../../composables/private.use-refocus-target/use-refocus-target.js'
 import {
-  useFormProps,
-  useFormInject
+  useFormInject,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
-import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
+import { hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 const createSvg = () =>
   h(
@@ -39,6 +39,12 @@ const createSvg = () =>
     ]
   )
 
+function onKeydown(e) {
+  if (e.keyCode === 13 || e.keyCode === 32) {
+    stopAndPrevent(e)
+  }
+}
+
 export default createComponent({
   name: 'QRadio',
 
@@ -80,34 +86,29 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-radio cursor-pointer no-outline row inline no-wrap items-center' +
-        (props.disable === true ? ' disabled' : '') +
-        (isDark.value === true ? ' q-radio--dark' : '') +
-        (props.dense === true ? ' q-radio--dense' : '') +
-        (props.leftLabel === true ? ' reverse' : '')
+        (props.disable ? ' disabled' : '') +
+        (isDark.value ? ' q-radio--dark' : '') +
+        (props.dense ? ' q-radio--dense' : '') +
+        (props.leftLabel ? ' reverse' : '')
     )
 
     const innerClass = computed(() => {
       const color =
-        props.color !== void 0 &&
-        (props.keepColor === true || isTrue.value === true)
+        props.color !== void 0 && (props.keepColor || isTrue.value)
           ? ` text-${props.color}`
           : ''
 
       return (
         'q-radio__inner relative-position ' +
-        `q-radio__inner--${isTrue.value === true ? 'truthy' : 'falsy'}${color}`
+        `q-radio__inner--${isTrue.value ? 'truthy' : 'falsy'}${color}`
       )
     })
 
     const icon = computed(
-      () =>
-        (isTrue.value === true ? props.checkedIcon : props.uncheckedIcon) ||
-        null
+      () => (isTrue.value ? props.checkedIcon : props.uncheckedIcon) || null
     )
 
-    const tabindex = computed(() =>
-      props.disable === true ? -1 : props.tabindex || 0
-    )
+    const tabindex = computed(() => (props.disable ? -1 : props.tabindex || 0))
 
     const formAttrs = computed(() => {
       const prop = { type: 'radio' }
@@ -115,8 +116,8 @@ export default createComponent({
       if (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,
+          '.checked': isTrue.value,
+          '^checked': isTrue.value ? 'checked' : void 0,
           name: props.name,
           value: props.val
         })
@@ -133,17 +134,11 @@ export default createComponent({
         refocusTarget(e)
       }
 
-      if (props.disable !== true && isTrue.value !== true) {
+      if (!props.disable && !isTrue.value) {
         emit('update:modelValue', props.val, e)
       }
     }
 
-    function onKeydown(e) {
-      if (e.keyCode === 13 || e.keyCode === 32) {
-        stopAndPrevent(e)
-      }
-    }
-
     function onKeyup(e) {
       if (e.keyCode === 13 || e.keyCode === 32) {
         onClick(e)
@@ -176,7 +171,7 @@ export default createComponent({
             ]
           : [svg]
 
-      if (props.disable !== true) {
+      if (!props.disable) {
         injectFormInput(
           content,
           'unshift',
@@ -225,8 +220,8 @@ export default createComponent({
           tabindex: tabindex.value,
           role: 'radio',
           'aria-label': props.label,
-          'aria-checked': isTrue.value === true ? 'true' : 'false',
-          'aria-disabled': props.disable === true ? 'true' : void 0,
+          'aria-checked': isTrue.value ? 'true' : 'false',
+          'aria-disabled': props.disable ? 'true' : void 0,
           onClick,
           onKeydown,
           onKeyup