quasar 2.19.2 → 2.20.0

package/src/components/uploader/uploader-core.js

@@ -1,12 +1,12 @@
 import {
+  computed,
+  getCurrentInstance,
   h,
-  ref,
   isRef,
-  computed,
-  watch,
-  provide,
   onBeforeUnmount,
-  getCurrentInstance
+  provide,
+  ref,
+  watch
 } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
@@ -18,16 +18,16 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import useFile, {
-  useFileProps,
-  useFileEmits
+  useFileEmits,
+  useFileProps
 } from '../../composables/private.use-file/use-file.js'
 
 import { stop } from '../../utils/event/event.js'
 import { humanStorageSize } from '../../utils/format/format.js'
 import { uploaderKey } from '../../utils/private.symbols/symbols.js'
 import {
-  injectProp,
-  injectMultipleProps
+  injectMultipleProps,
+  injectProp
 } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
@@ -99,9 +99,7 @@ export function getRenderer(getPlugin, expose) {
     proxy.$forceUpdate()
   }
 
-  const editable = computed(
-    () => props.disable !== true && props.readonly !== true
-  )
+  const editable = computed(() => !props.disable && !props.readonly)
   const dnd = ref(false)
 
   const rootRef = ref(null)
@@ -114,7 +112,7 @@ export function getRenderer(getPlugin, expose) {
     uploadedSize: ref(0),
 
     updateFileStatus,
-    isAlive: () => vmIsDestroyed(vm) === false
+    isAlive: () => !vmIsDestroyed(vm)
   }
 
   const {
@@ -156,10 +154,10 @@ export function getRenderer(getPlugin, expose) {
 
   const canAddFiles = computed(
     () =>
-      editable.value === true &&
-      state.isUploading.value !== true &&
+      editable.value &&
+      !state.isUploading.value &&
       // if single selection and no files are queued:
-      (props.multiple === true || state.queuedFiles.value.length === 0) &&
+      (props.multiple || state.queuedFiles.value.length === 0) &&
       // if max-files is set and current number of files does not exceeds it:
       (props.maxFiles === void 0 ||
         state.files.value.length < maxFilesNumber.value) &&
@@ -170,9 +168,9 @@ export function getRenderer(getPlugin, expose) {
 
   const canUpload = computed(
     () =>
-      editable.value === true &&
-      state.isBusy.value !== true &&
-      state.isUploading.value !== true &&
+      editable.value &&
+      !state.isBusy.value &&
+      !state.isUploading.value &&
       state.queuedFiles.value.length !== 0
   )
 
@@ -181,12 +179,12 @@ export function getRenderer(getPlugin, expose) {
   const classes = computed(
     () =>
       'q-uploader column no-wrap' +
-      (isDark.value === true ? ' q-uploader--dark q-dark' : '') +
-      (props.bordered === true ? ' q-uploader--bordered' : '') +
-      (props.square === true ? ' q-uploader--square no-border-radius' : '') +
-      (props.flat === true ? ' q-uploader--flat no-shadow' : '') +
-      (props.disable === true ? ' disabled q-uploader--disable' : '') +
-      (dnd.value === true ? ' q-uploader--dnd' : '')
+      (isDark.value ? ' q-uploader--dark q-dark' : '') +
+      (props.bordered ? ' q-uploader--bordered' : '') +
+      (props.square ? ' q-uploader--square no-border-radius' : '') +
+      (props.flat ? ' q-uploader--flat no-shadow' : '') +
+      (props.disable ? ' disabled q-uploader--disable' : '') +
+      (dnd.value ? ' q-uploader--dnd' : '')
   )
 
   const colorClass = computed(
@@ -197,15 +195,15 @@ export function getRenderer(getPlugin, expose) {
   )
 
   watch(state.isUploading, (newVal, oldVal) => {
-    if (oldVal === false && newVal === true) {
+    if (!oldVal && newVal) {
       emit('start')
-    } else if (oldVal === true && newVal === false) {
+    } else if (oldVal && !newVal) {
       emit('finish')
     }
   })
 
   function reset() {
-    if (props.disable === false) {
+    if (!props.disable) {
       state.abort()
       state.uploadedSize.value = 0
       uploadSize.value = 0
@@ -217,7 +215,7 @@ export function getRenderer(getPlugin, expose) {
   }
 
   function removeUploadedFiles() {
-    if (props.disable === false) {
+    if (!props.disable) {
       batchRemoveFiles(['uploaded'], () => {
         state.uploadedFiles.value = []
       })
@@ -232,7 +230,7 @@ export function getRenderer(getPlugin, expose) {
   }
 
   function batchRemoveFiles(statusList, cb) {
-    if (props.disable === true) return
+    if (props.disable) return
 
     const removed = {
       files: [],
@@ -240,9 +238,7 @@ export function getRenderer(getPlugin, expose) {
     }
 
     const localFiles = state.files.value.filter(f => {
-      if (statusList.indexOf(f.__status) === -1) {
-        return true
-      }
+      if (!statusList.includes(f.__status)) return true
 
       removed.size += f.size
       removed.files.push(f)
@@ -315,28 +311,25 @@ export function getRenderer(getPlugin, expose) {
       state.updateFileStatus(file, 'idle')
       uploadSize.value += file.size
 
-      if (
-        props.noThumbnails !== true &&
-        file.type.toUpperCase().startsWith('IMAGE')
-      ) {
+      if (!props.noThumbnails && file.type.toUpperCase().startsWith('IMAGE')) {
         const img = new Image()
         img.src = window.URL.createObjectURL(file)
         file.__img = img
       }
     })
 
-    state.files.value = state.files.value.concat(localFiles)
-    state.queuedFiles.value = state.queuedFiles.value.concat(localFiles)
+    state.files.value.push(...localFiles)
+    state.queuedFiles.value.push(...localFiles)
     emit('added', localFiles)
-    if (props.autoUpload === true) state.upload()
+    if (props.autoUpload) state.upload()
   }
 
   function upload() {
-    if (canUpload.value === true) state.upload()
+    if (canUpload.value) state.upload()
   }
 
   function getBtn(show, icon, fn) {
-    if (show === true) {
+    if (show) {
       const data = {
         type: 'a',
         key: icon,
@@ -366,7 +359,7 @@ export function getRenderer(getPlugin, expose) {
       type: 'file',
       title: '', // try to remove default tooltip
       accept: props.accept,
-      multiple: props.multiple === true ? 'multiple' : void 0,
+      multiple: props.multiple ? 'multiple' : void 0,
       capture: props.capture,
       onMousedown: stop, // need to stop refocus from QBtn
       onClick: pickFiles,
@@ -403,7 +396,7 @@ export function getRenderer(getPlugin, expose) {
                 removeUploadedFiles
               ),
 
-              state.isUploading.value === true
+              state.isUploading.value
                 ? h(QSpinner, { class: 'q-uploader__spinner' })
                 : null,
 
@@ -419,7 +412,7 @@ export function getRenderer(getPlugin, expose) {
 
               getBtn(canAddFiles.value, 'add'),
               getBtn(
-                props.hideUploadBtn === false && canUpload.value === true,
+                !props.hideUploadBtn && canUpload.value,
                 'upload',
                 state.upload
               ),
@@ -443,7 +436,7 @@ export function getRenderer(getPlugin, expose) {
           key: file.__key,
           class:
             'q-uploader__file relative-position' +
-            (props.noThumbnails !== true && file.__img !== void 0
+            (!props.noThumbnails && file.__img !== void 0
               ? ' q-uploader__file--img'
               : '') +
             (file.__status === 'failed'
@@ -452,7 +445,7 @@ export function getRenderer(getPlugin, expose) {
                 ? ' q-uploader__file--uploaded'
                 : ''),
           style:
-            props.noThumbnails !== true && file.__img !== void 0
+            !props.noThumbnails && file.__img !== void 0
               ? {
                   backgroundImage: 'url("' + file.__img.src + '")',
                   backgroundSize: props.thumbnailFit
@@ -511,14 +504,14 @@ export function getRenderer(getPlugin, expose) {
   }
 
   onBeforeUnmount(() => {
-    if (state.isUploading.value === true) state.abort()
+    if (state.isUploading.value) state.abort()
     if (state.files.value.length !== 0) revokeImgURLs()
   })
 
   const publicApi = {}
 
   for (const key in state) {
-    if (isRef(state[key]) === true) {
+    if (isRef(state[key])) {
       injectProp(publicApi, key, () => state[key].value)
     } else {
       // method or non-computed prop
@@ -570,7 +563,7 @@ export function getRenderer(getPlugin, expose) {
       getDndNode('uploader')
     ]
 
-    if (state.isBusy.value === true) {
+    if (state.isBusy.value) {
       children.push(
         h(
           'div',
@@ -584,7 +577,7 @@ export function getRenderer(getPlugin, expose) {
 
     const data = { ref: rootRef, class: classes.value }
 
-    if (canAddFiles.value === true) {
+    if (canAddFiles.value) {
       Object.assign(data, { onDragover, onDragleave })
     }
 

package/src/components/uploader/xhr-uploader-plugin.js

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
 function getFn(prop) {
   return typeof prop === 'function' ? prop : () => prop
@@ -53,13 +53,11 @@ function injectPlugin({ props, emit, helpers }) {
       x.abort()
     })
 
-    if (promises.value.length !== 0) {
-      abortPromises = true
-    }
+    if (promises.value.length !== 0) abortPromises = true
   }
 
   function upload() {
-    const queue = helpers.queuedFiles.value.slice(0)
+    const queue = [...helpers.queuedFiles.value]
     helpers.queuedFiles.value = []
 
     if (xhrProps.value.batch(queue)) {
@@ -95,14 +93,12 @@ function injectPlugin({ props, emit, helpers }) {
       promises.value.push(res)
 
       const failed = err => {
-        if (helpers.isAlive() === true) {
+        if (helpers.isAlive()) {
           promises.value = promises.value.filter(p => p !== res)
 
-          if (promises.value.length === 0) {
-            abortPromises = false
-          }
+          if (promises.value.length === 0) abortPromises = false
 
-          helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
+          helpers.queuedFiles.value.push(...files)
           files.forEach(f => {
             helpers.updateFileStatus(f, 'failed')
           })
@@ -114,9 +110,9 @@ function injectPlugin({ props, emit, helpers }) {
 
       res
         .then(factory => {
-          if (abortPromises === true) {
+          if (abortPromises) {
             failed(new Error('Aborted'))
-          } else if (helpers.isAlive() === true) {
+          } else if (helpers.isAlive()) {
             promises.value = promises.value.filter(p => p !== res)
             performUpload(files, factory)
           }
@@ -160,7 +156,7 @@ function injectPlugin({ props, emit, helpers }) {
     xhr.upload.addEventListener(
       'progress',
       e => {
-        if (aborted === true) return
+        if (aborted) return
 
         const loaded = Math.min(maxUploadSize, e.loaded)
 
@@ -186,11 +182,11 @@ function injectPlugin({ props, emit, helpers }) {
       false
     )
 
-    xhr.onreadystatechange = () => {
+    xhr.addEventListener('readystatechange', () => {
       if (xhr.readyState < 4) return
 
       if (xhr.status && xhr.status < 400) {
-        helpers.uploadedFiles.value = helpers.uploadedFiles.value.concat(files)
+        helpers.uploadedFiles.value.push(...files)
         files.forEach(f => {
           helpers.updateFileStatus(f, 'uploaded')
         })
@@ -198,7 +194,7 @@ function injectPlugin({ props, emit, helpers }) {
       } else {
         aborted = true
         helpers.uploadedSize.value -= localUploadedSize
-        helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
+        helpers.queuedFiles.value.push(...files)
         files.forEach(f => {
           helpers.updateFileStatus(f, 'failed')
         })
@@ -207,7 +203,7 @@ function injectPlugin({ props, emit, helpers }) {
 
       workingThreads.value--
       xhrs.value = xhrs.value.filter(x => x !== xhr)
-    }
+    })
 
     xhr.open(getProp('method', files), url)
 

package/src/components/video/QVideo.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import useRatio, {
   useRatioProps

package/src/components/video/QVideo.test.js

@@ -1,5 +1,5 @@
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, test, expect } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import QVideo from './QVideo.js'
 

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -1,13 +1,13 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
+  h,
+  onActivated,
   onBeforeMount,
-  onMounted,
   onBeforeUnmount,
-  onActivated,
-  onDeactivated
+  onDeactivated,
+  onMounted,
+  ref,
+  watch
 } from 'vue'
 
 import QList from '../item/QList.js'
@@ -60,7 +60,7 @@ export default createComponent({
 
     const virtualScrollLength = computed(() =>
       props.itemsSize >= 0 && props.itemsFn !== void 0
-        ? parseInt(props.itemsSize, 10)
+        ? Number.parseInt(props.itemsSize, 10)
         : Array.isArray(props.items)
           ? props.items.length
           : 0
@@ -106,9 +106,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-virtual-scroll q-virtual-scroll' +
-        (props.virtualScrollHorizontal === true
-          ? '--horizontal'
-          : '--vertical') +
+        (props.virtualScrollHorizontal ? '--horizontal' : '--vertical') +
         (props.scrollTarget !== void 0 ? '' : ' scroll')
     )
 
@@ -166,6 +164,7 @@ export default createComponent({
       )
 
       if (slots.before !== void 0) {
+        // oxlint-disable-next-line unicorn/prefer-spread
         child = slots.before().concat(child)
       }
 

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -1,14 +1,14 @@
 import {
-  h,
-  ref,
   computed,
-  watch,
+  getCurrentInstance,
+  h,
+  nextTick,
   onActivated,
-  onDeactivated,
   onBeforeMount,
   onBeforeUnmount,
-  nextTick,
-  getCurrentInstance
+  onDeactivated,
+  ref,
+  watch
 } from 'vue'
 
 import debounce from '../../utils/debounce/debounce.js'
@@ -77,7 +77,7 @@ function getScrollDetails(
       parent === window
         ? document.scrollingElement || document.documentElement
         : parent,
-    propElSize = horizontal === true ? 'offsetWidth' : 'offsetHeight',
+    propElSize = horizontal ? 'offsetWidth' : 'offsetHeight',
     details = {
       scrollStart: 0,
       scrollViewSize: -stickyStart - stickyEnd,
@@ -86,7 +86,7 @@ function getScrollDetails(
       offsetEnd: -stickyEnd
     }
 
-  if (horizontal === true) {
+  if (horizontal) {
     if (parent === window) {
       details.scrollStart =
         window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
@@ -97,11 +97,10 @@ function getScrollDetails(
     }
     details.scrollMaxSize = parentCalc.scrollWidth
 
-    if (rtl === true) {
+    if (rtl) {
       details.scrollStart =
-        (rtlHasScrollBug === true
-          ? details.scrollMaxSize - details.scrollViewSize
-          : 0) - details.scrollStart
+        (rtlHasScrollBug ? details.scrollMaxSize - details.scrollViewSize : 0) -
+        details.scrollStart
     }
   } else {
     if (parent === window) {
@@ -121,7 +120,7 @@ function getScrollDetails(
       el !== null;
       el = el.previousElementSibling
     ) {
-      if (el.classList.contains('q-virtual-scroll--skip') === false) {
+      if (!el.classList.contains('q-virtual-scroll--skip')) {
         details.offsetStart += el[propElSize]
       }
     }
@@ -133,7 +132,7 @@ function getScrollDetails(
       el !== null;
       el = el.nextElementSibling
     ) {
-      if (el.classList.contains('q-virtual-scroll--skip') === false) {
+      if (!el.classList.contains('q-virtual-scroll--skip')) {
         details.offsetEnd += el[propElSize]
       }
     }
@@ -143,7 +142,7 @@ function getScrollDetails(
     const parentRect = parentCalc.getBoundingClientRect(),
       childRect = child.getBoundingClientRect()
 
-    if (horizontal === true) {
+    if (horizontal) {
       details.offsetStart += childRect.left - parentRect.left
       details.offsetEnd -= childRect.width
     } else {
@@ -163,15 +162,15 @@ function getScrollDetails(
 function setScroll(parent, scroll, horizontal, rtl) {
   if (scroll === 'end') {
     scroll = (parent === window ? document.body : parent)[
-      horizontal === true ? 'scrollWidth' : 'scrollHeight'
+      horizontal ? 'scrollWidth' : 'scrollHeight'
     ]
   }
 
   if (parent === window) {
-    if (horizontal === true) {
-      if (rtl === true) {
+    if (horizontal) {
+      if (rtl) {
         scroll =
-          (rtlHasScrollBug === true
+          (rtlHasScrollBug
             ? document.body.scrollWidth - document.documentElement.clientWidth
             : 0) - scroll
       }
@@ -185,12 +184,10 @@ function setScroll(parent, scroll, horizontal, rtl) {
         scroll
       )
     }
-  } else if (horizontal === true) {
-    if (rtl === true) {
+  } else if (horizontal) {
+    if (rtl) {
       scroll =
-        (rtlHasScrollBug === true
-          ? parent.scrollWidth - parent.offsetWidth
-          : 0) - scroll
+        (rtlHasScrollBug ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
     }
     parent.scrollLeft = scroll
   } else {
@@ -350,10 +347,10 @@ export function useVirtualScroll({
       scrollDetails,
       Math.min(
         virtualScrollLength.value - 1,
-        Math.max(0, parseInt(toIndex, 10) || 0)
+        Math.max(0, Number.parseInt(toIndex, 10) || 0)
       ),
       0,
-      scrollToEdges.indexOf(edge) !== -1
+      scrollToEdges.includes(edge)
         ? edge
         : prevToIndex !== -1 && toIndex > prevToIndex
           ? 'end'
@@ -466,9 +463,8 @@ export function useVirtualScroll({
     offset,
     align
   ) {
-    const alignForce =
-      typeof align === 'string' && align.indexOf('-force') !== -1
-    const alignEnd = alignForce === true ? align.replace('-force', '') : align
+    const alignForce = typeof align === 'string' && align.includes('-force')
+    const alignEnd = alignForce ? align.replace('-force', '') : align
     const alignRange = alignEnd !== void 0 ? alignEnd : 'start'
 
     let from = Math.max(
@@ -488,7 +484,7 @@ export function useVirtualScroll({
       from !== virtualScrollSliceRange.value.from ||
       to !== virtualScrollSliceRange.value.to
 
-    if (rangeChanged === false && alignEnd === void 0) {
+    if (!rangeChanged && alignEnd === void 0) {
       emitScroll(toIndex)
       return
     }
@@ -496,10 +492,10 @@ export function useVirtualScroll({
     const { activeElement } = document
     const contentEl = contentRef.value
     if (
-      rangeChanged === true &&
+      rangeChanged &&
       contentEl !== null &&
       contentEl !== activeElement &&
-      contentEl.contains(activeElement) === true
+      contentEl.contains(activeElement)
     ) {
       contentEl.addEventListener('focusout', onBlurRefocusFn)
 
@@ -515,7 +511,7 @@ export function useVirtualScroll({
         ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0)
         : 0
 
-    if (rangeChanged === true) {
+    if (rangeChanged) {
       // vue key matching algorithm works only if
       // the array of VNodes changes on only one of the ends
       // so we first change one end and then the other
@@ -564,7 +560,7 @@ export function useVirtualScroll({
       // (another call to setVirtualScrollSliceRange before animation frame)
       if (prevScrollStart !== scrollDetails.scrollStart) return
 
-      if (rangeChanged === true) {
+      if (rangeChanged) {
         updateVirtualScrollSizes(from)
       }
 
@@ -584,7 +580,7 @@ export function useVirtualScroll({
         const scrollStart = scrollDetails.scrollStart + sizeDiff
 
         scrollPosition =
-          alignForce !== true &&
+          !alignForce &&
           scrollStart < posStart &&
           posEnd < scrollStart + scrollDetails.scrollViewSize
             ? scrollStart
@@ -619,15 +615,12 @@ export function useVirtualScroll({
     if (contentEl) {
       const children = filterProto.call(
           contentEl.children,
-          el =>
-            el.classList &&
-            el.classList.contains('q-virtual-scroll--skip') === false
+          el => el.classList && !el.classList.contains('q-virtual-scroll--skip')
         ),
         childrenLength = children.length,
-        sizeFn =
-          props.virtualScrollHorizontal === true
-            ? el => el.getBoundingClientRect().width
-            : el => el.offsetHeight
+        sizeFn = props.virtualScrollHorizontal
+          ? el => el.getBoundingClientRect().width
+          : el => el.offsetHeight
 
       let index = from,
         size,
@@ -639,7 +632,7 @@ export function useVirtualScroll({
 
         while (
           i < childrenLength &&
-          children[i].classList.contains('q-virtual-scroll--with-prev') === true
+          children[i].classList.contains('q-virtual-scroll--with-prev')
         ) {
           size += sizeFn(children[i])
           i++
@@ -664,7 +657,7 @@ export function useVirtualScroll({
   function localResetVirtualScroll(toIndex, fullReset) {
     const defaultSize = Number(virtualScrollItemSizeComputed.value)
 
-    if (fullReset === true || Array.isArray(virtualScrollSizes) === false) {
+    if (fullReset || !Array.isArray(virtualScrollSizes)) {
       virtualScrollSizes = []
     }
 
@@ -738,9 +731,9 @@ export function useVirtualScroll({
     localScrollViewSize = scrollViewSize
 
     const virtualScrollSliceRatioBefore =
-      parseFloat(props.virtualScrollSliceRatioBefore) || 0
+      Number.parseFloat(props.virtualScrollSliceRatioBefore) || 0
     const virtualScrollSliceRatioAfter =
-      parseFloat(props.virtualScrollSliceRatioAfter) || 0
+      Number.parseFloat(props.virtualScrollSliceRatioAfter) || 0
     const multiplier =
       1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
     const view =
@@ -767,8 +760,7 @@ export function useVirtualScroll({
   }
 
   function padVirtualScroll(tag, content) {
-    const paddingSize =
-      props.virtualScrollHorizontal === true ? 'width' : 'height'
+    const paddingSize = props.virtualScrollHorizontal ? 'width' : 'height'
     const style = {
       ['--q-virtual-scroll-item-' + paddingSize]:
         virtualScrollItemSizeComputed.value + 'px'
@@ -867,7 +859,7 @@ export function useVirtualScroll({
   setVirtualScrollSize()
   const onVirtualScrollEvt = debounce(
     localOnVirtualScrollEvt,
-    $q.platform.is.ios === true ? 120 : 35
+    $q.platform.is.ios ? 120 : 35
   )
 
   onBeforeMount(() => {
@@ -881,7 +873,7 @@ export function useVirtualScroll({
   })
 
   onActivated(() => {
-    if (shouldActivate !== true) return
+    if (!shouldActivate) return
 
     const scrollEl = getVirtualScrollTarget()