quasar 2.19.2 → 2.20.0

package/src/composables/private.use-file/use-file.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref } from 'vue'
 
 import { client } from '../../plugins/platform/Platform.js'
 import { stop, stopAndPrevent } from '../../utils/event/event.js'
@@ -7,7 +7,7 @@ function filterFiles(files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []
 
   files.forEach(file => {
-    if (filterFn(file) === true) {
+    if (filterFn(file)) {
       acceptedFiles.push(file)
     } else {
       rejectedFiles.push({ failedPropValidation, file })
@@ -56,15 +56,17 @@ export default function useFile({
             return '*/'
           } else if (ext.endsWith('/*')) {
             // support "image/*" or "*/*"
-            ext = ext.slice(0, ext.length - 1)
+            ext = ext.slice(0, -1)
           }
           return ext.toUpperCase()
         })
       : null
   )
 
-  const maxFilesNumber = computed(() => parseInt(props.maxFiles, 10))
-  const maxTotalSizeNumber = computed(() => parseInt(props.maxTotalSize, 10))
+  const maxFilesNumber = computed(() => Number.parseInt(props.maxFiles, 10))
+  const maxTotalSizeNumber = computed(() =>
+    Number.parseInt(props.maxTotalSize, 10)
+  )
 
   function pickFiles(e) {
     if (editable.value) {
@@ -89,7 +91,7 @@ export default function useFile({
   }
 
   function processFiles(e, filesToProcess, currentFileList, append) {
-    let files = Array.from(filesToProcess || e.target.files)
+    let files = [...(filesToProcess || e.target.files)]
     const rejectedFiles = []
 
     const done = () => {
@@ -99,7 +101,7 @@ export default function useFile({
     }
 
     // filter file types
-    if (props.accept !== void 0 && extensions.value.indexOf('*/') === -1) {
+    if (props.accept !== void 0 && !extensions.value.includes('*/')) {
       files = filterFiles(files, rejectedFiles, 'accept', file =>
         extensions.value.some(
           ext =>
@@ -108,14 +110,12 @@ export default function useFile({
         )
       )
 
-      if (files.length === 0) {
-        return done()
-      }
+      if (files.length === 0) return done()
     }
 
     // filter max file size
     if (props.maxFileSize !== void 0) {
-      const maxFileSize = parseInt(props.maxFileSize, 10)
+      const maxFileSize = Number.parseInt(props.maxFileSize, 10)
       files = filterFiles(
         files,
         rejectedFiles,
@@ -131,7 +131,7 @@ export default function useFile({
     // Cordova/iOS allows selecting multiple files even when the
     // multiple attribute is not specified. We also normalize drag'n'dropped
     // files here:
-    if (props.multiple !== true && files.length !== 0) {
+    if (!props.multiple && files.length !== 0) {
       files = [files[0]]
     }
 
@@ -141,14 +141,14 @@ export default function useFile({
         file.webkitRelativePath + file.lastModified + file.name + file.size
     })
 
-    if (append === true) {
+    if (append) {
       // Avoid duplicate files
       const filenameMap = currentFileList.map(entry => entry.__key)
       files = filterFiles(
         files,
         rejectedFiles,
         'duplicate',
-        file => filenameMap.includes(file.__key) === false
+        file => !filenameMap.includes(file.__key)
       )
     }
 
@@ -157,10 +157,9 @@ export default function useFile({
     }
 
     if (props.maxTotalSize !== void 0) {
-      let size =
-        append === true
-          ? currentFileList.reduce((total, file) => total + file.size, 0)
-          : 0
+      let size = append
+        ? currentFileList.reduce((total, file) => total + file.size, 0)
+        : 0
 
       files = filterFiles(files, rejectedFiles, 'max-total-size', file => {
         size += file.size
@@ -181,7 +180,7 @@ export default function useFile({
     }
 
     if (props.maxFiles !== void 0) {
-      let filesNumber = append === true ? currentFileList.length : 0
+      let filesNumber = append ? currentFileList.length : 0
 
       files = filterFiles(files, rejectedFiles, 'max-files', () => {
         filesNumber++
@@ -202,7 +201,7 @@ export default function useFile({
 
   function onDragover(e) {
     stopAndPreventDrag(e)
-    if (dnd.value !== true) dnd.value = true
+    if (!dnd.value) dnd.value = true
   }
 
   function onDragleave(e) {
@@ -210,14 +209,15 @@ export default function useFile({
 
     // Safari bug: relatedTarget is null for over 10 years
     // https://bugs.webkit.org/show_bug.cgi?id=66547
-    const gone =
-      e.relatedTarget !== null || client.is.safari !== true
+    if (
+      e.relatedTarget !== null || !client.is.safari
         ? e.relatedTarget !== dndRef.value
-        : document
+        : !document
             .elementsFromPoint(e.clientX, e.clientY)
-            .includes(dndRef.value) === false
-
-    if (gone === true) dnd.value = false
+            .includes(dndRef.value)
+    ) {
+      dnd.value = false
+    }
   }
 
   function onDrop(e) {
@@ -232,7 +232,7 @@ export default function useFile({
   }
 
   function getDndNode(type) {
-    if (dnd.value === true) {
+    if (dnd.value) {
       return h('div', {
         ref: dndRef,
         class: `q-${type}__dnd absolute-full`,

package/src/composables/private.use-fullscreen/use-fullscreen.js

@@ -1,10 +1,10 @@
 import {
-  ref,
-  watch,
+  getCurrentInstance,
   onBeforeMount,
-  onMounted,
   onBeforeUnmount,
-  getCurrentInstance
+  onMounted,
+  ref,
+  watch
 } from 'vue'
 
 import History from '../../plugins/private.history/History.js'
@@ -23,16 +23,14 @@ export default function useFullscreen() {
   const vm = getCurrentInstance()
   const { props, emit, proxy } = vm
 
-  let historyEntry, fullscreenFillerNode, container
+  let historyEntry, fullscreenFillerNode
   const inFullscreen = ref(false)
 
-  if (vmHasRouter(vm) === true) {
+  if (vmHasRouter(vm)) {
     watch(
       () => proxy.$route.fullPath,
       () => {
-        if (props.noRouteFullscreenExit !== true) {
-          exitFullscreen()
-        }
+        if (!props.noRouteFullscreenExit) exitFullscreen()
       }
     )
   }
@@ -40,9 +38,7 @@ export default function useFullscreen() {
   watch(
     () => props.fullscreen,
     v => {
-      if (inFullscreen.value !== v) {
-        toggleFullscreen()
-      }
+      if (inFullscreen.value !== v) toggleFullscreen()
     }
   )
 
@@ -52,7 +48,7 @@ export default function useFullscreen() {
   })
 
   function toggleFullscreen() {
-    if (inFullscreen.value === true) {
+    if (inFullscreen.value) {
       exitFullscreen()
     } else {
       setFullscreen()
@@ -60,12 +56,11 @@ export default function useFullscreen() {
   }
 
   function setFullscreen() {
-    if (inFullscreen.value === true) return
+    if (inFullscreen.value) return
 
     inFullscreen.value = true
-    container = proxy.$el.parentNode
-    container.replaceChild(fullscreenFillerNode, proxy.$el)
-    document.body.appendChild(proxy.$el)
+    proxy.$el.replaceWith(fullscreenFillerNode)
+    document.body.append(proxy.$el)
 
     counter++
     if (counter === 1) {
@@ -79,14 +74,14 @@ export default function useFullscreen() {
   }
 
   function exitFullscreen() {
-    if (inFullscreen.value !== true) return
+    if (!inFullscreen.value) return
 
     if (historyEntry !== void 0) {
       History.remove(historyEntry)
       historyEntry = void 0
     }
 
-    container.replaceChild(proxy.$el, fullscreenFillerNode)
+    fullscreenFillerNode.replaceWith(proxy.$el)
     inFullscreen.value = false
 
     counter = Math.max(0, counter - 1)
@@ -107,7 +102,7 @@ export default function useFullscreen() {
   })
 
   onMounted(() => {
-    if (props.fullscreen === true) setFullscreen()
+    if (props.fullscreen) setFullscreen()
   })
 
   onBeforeUnmount(exitFullscreen)

package/src/composables/private.use-history/use-history.js

@@ -13,7 +13,7 @@ export default function useHistory(showing, hide, hideOnRouteChange) {
   }
 
   onBeforeUnmount(() => {
-    if (showing.value === true) removeFromHistory()
+    if (showing.value) removeFromHistory()
   })
 
   return {
@@ -21,7 +21,7 @@ export default function useHistory(showing, hide, hideOnRouteChange) {
 
     addToHistory() {
       historyEntry = {
-        condition: () => hideOnRouteChange.value === true,
+        condition: () => hideOnRouteChange.value,
         handler: hide
       }
 

package/src/composables/private.use-history/use-history.test.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { computed, defineComponent } from 'vue'
 
 import useHistory from './use-history.js'

package/src/composables/private.use-key-composition/use-key-composition.js

@@ -1,31 +1,30 @@
 import { client } from '../../plugins/platform/Platform.js'
 
 const isJapanese =
-  /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
+  /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFF9F\u4E00-\u9FAF\u3400-\u4DBF]/
 const isChinese =
-  /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
-const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
+  /[\u4E00-\u9FFF\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2B73F}\u{2B740}-\u{2B81F}\u{2B820}-\u{2CEAF}\uF900-\uFAFF\u3300-\u33FF\uFE30-\uFE4F\uF900-\uFAFF\u{2F800}-\u{2FA1F}]/u
+const isKorean = /[\u3131-\u314E\u314F-\u3163\uAC00-\uD7A3]/
 const isPlainText = /[a-z0-9_ -]$/i
 
 export default function useKeyComposition(onInput) {
   return function onComposition(e) {
     if (e.type === 'compositionend' || e.type === 'change') {
-      if (e.target.qComposing !== true) return
+      if (!e.target.qComposing) return
       e.target.qComposing = false
       onInput(e)
     } else if (
       e.type === 'compositionupdate' &&
-      e.target.qComposing !== true &&
+      !e.target.qComposing &&
       typeof e.data === 'string'
     ) {
-      const isComposing =
-        client.is.firefox === true
-          ? isPlainText.test(e.data) === false
-          : isJapanese.test(e.data) === true ||
-            isChinese.test(e.data) === true ||
-            isKorean.test(e.data) === true
+      const isComposing = client.is.firefox
+        ? !isPlainText.test(e.data)
+        : isJapanese.test(e.data) ||
+          isChinese.test(e.data) ||
+          isKorean.test(e.data)
 
-      if (isComposing === true) {
+      if (isComposing) {
         e.target.qComposing = true
       }
     }

package/src/composables/private.use-model-toggle/use-model-toggle.js

@@ -1,4 +1,4 @@
-import { watch, nextTick, onMounted, getCurrentInstance } from 'vue'
+import { getCurrentInstance, nextTick, onMounted, watch } from 'vue'
 
 import { vmHasRouter } from '../../utils/private.vm/vm.js'
 
@@ -29,7 +29,7 @@ export default function useModelToggle({
   let payload
 
   function toggle(evt) {
-    if (showing.value === true) {
+    if (showing.value) {
       hide(evt)
     } else {
       show(evt)
@@ -38,16 +38,16 @@ export default function useModelToggle({
 
   function show(evt) {
     if (
-      props.disable === true ||
+      props.disable ||
       evt?.qAnchorHandled === true ||
-      (canShow !== void 0 && canShow(evt) !== true)
+      (canShow !== void 0 && !canShow(evt))
     ) {
       return
     }
 
     const listener = props['onUpdate:modelValue'] !== void 0
 
-    if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
+    if (listener && !__QUASAR_SSR_SERVER__) {
       emit('update:modelValue', true)
       payload = evt
       nextTick(() => {
@@ -57,20 +57,15 @@ export default function useModelToggle({
       })
     }
 
-    if (
-      props.modelValue === null ||
-      listener === false ||
-      __QUASAR_SSR_SERVER__
-    ) {
+    if (__QUASAR_SSR_SERVER__ || props.modelValue === null || !listener) {
       processShow(evt)
     }
   }
 
   function processShow(evt) {
-    if (showing.value === true) return
+    if (showing.value) return
 
     showing.value = true
-
     emit('beforeShow', evt)
 
     if (handleShow !== void 0) {
@@ -81,11 +76,11 @@ export default function useModelToggle({
   }
 
   function hide(evt) {
-    if (__QUASAR_SSR_SERVER__ || props.disable === true) return
+    if (__QUASAR_SSR_SERVER__ || props.disable) return
 
     const listener = props['onUpdate:modelValue'] !== void 0
 
-    if (listener === true && __QUASAR_SSR_SERVER__ !== true) {
+    if (listener && !__QUASAR_SSR_SERVER__) {
       emit('update:modelValue', false)
       payload = evt
       nextTick(() => {
@@ -95,17 +90,13 @@ export default function useModelToggle({
       })
     }
 
-    if (
-      props.modelValue === null ||
-      listener === false ||
-      __QUASAR_SSR_SERVER__
-    ) {
+    if (__QUASAR_SSR_SERVER__ || props.modelValue === null || !listener) {
       processHide(evt)
     }
   }
 
   function processHide(evt) {
-    if (showing.value === false) return
+    if (!showing.value) return
 
     showing.value = false
 
@@ -119,30 +110,30 @@ export default function useModelToggle({
   }
 
   function processModelChange(val) {
-    if (props.disable === true && val === true) {
+    if (props.disable && val) {
       if (props['onUpdate:modelValue'] !== void 0) {
         emit('update:modelValue', false)
       }
     } else if ((val === true) !== showing.value) {
-      const fn = val === true ? processShow : processHide
+      const fn = val ? processShow : processHide
       fn(payload)
     }
   }
 
   watch(() => props.modelValue, processModelChange)
 
-  if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
+  if (hideOnRouteChange !== void 0 && vmHasRouter(vm)) {
     watch(
       () => proxy.$route.fullPath,
       () => {
-        if (hideOnRouteChange.value === true && showing.value === true) {
+        if (hideOnRouteChange.value && showing.value) {
           hide()
         }
       }
     )
   }
 
-  if (processOnMount === true) {
+  if (processOnMount) {
     onMounted(() => {
       processModelChange(props.modelValue)
     })

package/src/composables/private.use-panel/use-panel.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
+  KeepAlive,
+  Transition,
   computed,
-  watch,
   getCurrentInstance,
-  Transition,
-  KeepAlive
+  h,
+  ref,
+  watch
 } from 'vue'
 
 import TouchSwipe from '../../directives/touch-swipe/TouchSwipe.js'
@@ -64,6 +64,10 @@ export const usePanelEmits = [
   'transition'
 ]
 
+function isValidPanelName(name) {
+  return name !== void 0 && name !== null && name !== ''
+}
+
 export default function usePanel() {
   const { props, emit, proxy } = getCurrentInstance()
   const { getCache } = useRenderCache()
@@ -84,9 +88,9 @@ export default function usePanel() {
   const panelIndex = { value: null }
 
   function onSwipe(evt) {
-    const dir = props.vertical === true ? 'up' : 'left'
+    const dir = props.vertical ? 'up' : 'left'
     goToPanelByOffset(
-      (proxy.$q.lang.rtl === true ? -1 : 1) * (evt.direction === dir ? 1 : -1)
+      (proxy.$q.lang.rtl ? -1 : 1) * (evt.direction === dir ? 1 : -1)
     )
   }
 
@@ -96,7 +100,7 @@ export default function usePanel() {
       onSwipe,
       void 0,
       {
-        horizontal: props.vertical !== true,
+        horizontal: !props.vertical,
         vertical: props.vertical,
         mouse: true
       }
@@ -104,14 +108,11 @@ export default function usePanel() {
   ])
 
   const transitionPrev = computed(
-    () =>
-      props.transitionPrev ||
-      `slide-${props.vertical === true ? 'down' : 'right'}`
+    () => props.transitionPrev || `slide-${props.vertical ? 'down' : 'right'}`
   )
 
   const transitionNext = computed(
-    () =>
-      props.transitionNext || `slide-${props.vertical === true ? 'up' : 'left'}`
+    () => props.transitionNext || `slide-${props.vertical ? 'up' : 'left'}`
   )
 
   const transitionStyle = computed(
@@ -137,10 +138,9 @@ export default function usePanel() {
   watch(
     () => props.modelValue,
     (newVal, oldVal) => {
-      const index =
-        isValidPanelName(newVal) === true ? getPanelIndex(newVal) : -1
+      const index = isValidPanelName(newVal) ? getPanelIndex(newVal) : -1
 
-      if (forcedPanelTransition !== true) {
+      if (!forcedPanelTransition) {
         updatePanelTransition(
           index === -1 ? 0 : index < getPanelIndex(oldVal) ? -1 : 1
         )
@@ -167,10 +167,6 @@ export default function usePanel() {
     emit('update:modelValue', name)
   }
 
-  function isValidPanelName(name) {
-    return name !== void 0 && name !== null && name !== ''
-  }
-
   function getPanelIndex(name) {
     return panels.findIndex(
       panel =>
@@ -188,7 +184,7 @@ export default function usePanel() {
 
   function updatePanelTransition(direction) {
     const val =
-      direction !== 0 && props.animated === true && panelIndex.value !== -1
+      direction !== 0 && props.animated && panelIndex.value !== -1
         ? 'q-transition--' +
           (direction === -1 ? transitionPrev.value : transitionNext.value)
         : null
@@ -212,6 +208,8 @@ export default function usePanel() {
         updatePanelTransition(direction)
         forcedPanelTransition = true
         emit('update:modelValue', opt.props.name)
+
+        // oxlint-disable-next-line no-loop-func
         setTimeout(() => {
           forcedPanelTransition = false
         })
@@ -223,7 +221,7 @@ export default function usePanel() {
     }
 
     if (
-      props.infinite === true &&
+      props.infinite &&
       panels.length !== 0 &&
       startIndex !== -1 &&
       startIndex !== panels.length
@@ -244,15 +242,15 @@ export default function usePanel() {
 
   function getPanelContentChild() {
     const panel =
-      isValidPanelName(props.modelValue) === true &&
+      isValidPanelName(props.modelValue) &&
       updatePanelIndex() &&
       panels[panelIndex.value]
 
-    return props.keepAlive === true
+    return props.keepAlive
       ? [
           h(KeepAlive, keepAliveProps.value, [
             h(
-              needsUniqueKeepAliveWrapper.value === true
+              needsUniqueKeepAliveWrapper.value
                 ? getCache(contentKey.value, () => ({
                     ...PanelWrapper,
                     name: contentKey.value
@@ -280,7 +278,7 @@ export default function usePanel() {
   function getPanelContent() {
     if (panels.length === 0) return
 
-    return props.animated === true
+    return props.animated
       ? [h(Transition, { name: panelTransition.value }, getPanelContentChild)]
       : getPanelContentChild()
   }
@@ -290,7 +288,7 @@ export default function usePanel() {
       panel =>
         panel.props !== null &&
         panel.props.slot === void 0 &&
-        isValidPanelName(panel.props.name) === true
+        isValidPanelName(panel.props.name)
     )
 
     return panels.length

package/src/composables/private.use-portal/use-portal.js

@@ -1,17 +1,19 @@
-import { h, ref, onUnmounted, Teleport } from 'vue'
+import { Teleport, h, onUnmounted, ref } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
+import { portalProxyList } from '../../utils/private.portal/portal.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
+
 import {
   addFocusWaitFlag,
   removeFocusWaitFlag
 } from '../../utils/private.focus/focus-manager.js'
+
 import {
   createGlobalNode,
   removeGlobalNode
 } from '../../utils/private.config/nodes.js'
-import { portalProxyList } from '../../utils/private.portal/portal.js'
-import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 /**
  * Noop internal component to ease testing
@@ -70,7 +72,7 @@ export default function usePortal(vm, innerRef, renderPortalContent, type) {
   const onGlobalDialog = type === 'dialog' && isOnGlobalDialog(vm)
 
   function showPortal(isReady) {
-    if (isReady === true) {
+    if (isReady) {
       removeFocusWaitFlag(focusObj)
       portalIsAccessible.value = true
       return
@@ -78,8 +80,8 @@ export default function usePortal(vm, innerRef, renderPortalContent, type) {
 
     portalIsAccessible.value = false
 
-    if (portalIsActive.value === false) {
-      if (onGlobalDialog === false && portalEl === null) {
+    if (!portalIsActive.value) {
+      if (!onGlobalDialog && portalEl === null) {
         portalEl = createGlobalNode(false, type)
       }
 
@@ -95,7 +97,7 @@ export default function usePortal(vm, innerRef, renderPortalContent, type) {
   function hidePortal(isReady) {
     portalIsAccessible.value = false
 
-    if (isReady !== true) return
+    if (!isReady) return
 
     removeFocusWaitFlag(focusObj)
     portalIsActive.value = false
@@ -130,9 +132,9 @@ export default function usePortal(vm, innerRef, renderPortalContent, type) {
     portalIsAccessible,
 
     renderPortal: () =>
-      onGlobalDialog === true
+      onGlobalDialog
         ? renderPortalContent()
-        : portalIsActive.value === true
+        : portalIsActive.value
           ? [h(Teleport, { to: portalEl }, h(QPortal, renderPortalContent))]
           : void 0
   }

package/src/composables/private.use-prevent-scroll/use-prevent-scroll.js

@@ -5,10 +5,7 @@ export default function usePreventScroll() {
 
   return {
     preventBodyScroll(state) {
-      if (
-        state !== currentState &&
-        (currentState !== void 0 || state === true)
-      ) {
+      if (state !== currentState && (currentState !== void 0 || state)) {
         currentState = state
         preventScroll(state)
       }