quasar 2.21.4 → 2.23.0

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

@@ -31,6 +31,7 @@ function injectPlugin({ props, emit, helpers }) {
   const xhrs = ref([])
   const promises = ref([])
   const workingThreads = ref(0)
+  const abortedPromises = new WeakSet()
 
   const xhrProps = computed(() => ({
     url: getFn(props.url),
@@ -46,14 +47,17 @@ function injectPlugin({ props, emit, helpers }) {
   const isUploading = computed(() => workingThreads.value > 0)
   const isBusy = computed(() => promises.value.length !== 0)
 
-  let abortPromises
+  const getLiveFiles = files =>
+    files.filter(file => helpers.files.value.includes(file))
 
   function abort() {
     xhrs.value.forEach(x => {
       x.abort()
     })
 
-    if (promises.value.length !== 0) abortPromises = true
+    promises.value.forEach(promise => {
+      abortedPromises.add(promise)
+    })
   }
 
   function upload() {
@@ -72,54 +76,82 @@ function injectPlugin({ props, emit, helpers }) {
   function runFactory(files) {
     workingThreads.value++
 
+    const failed = (err, promise) => {
+      if (helpers.isAlive()) {
+        if (promise !== void 0) {
+          promises.value = promises.value.filter(p => p !== promise)
+        }
+
+        const liveFiles = getLiveFiles(files)
+
+        if (liveFiles.length !== 0) {
+          helpers.queuedFiles.value.push(...liveFiles)
+          liveFiles.forEach(f => {
+            helpers.updateFileStatus(f, 'failed')
+          })
+
+          emit('factoryFailed', err, liveFiles)
+        }
+
+        workingThreads.value--
+      }
+    }
+
     if (typeof props.factory !== 'function') {
-      performUpload(files, {})
+      startUpload({})
       return
     }
 
-    const res = props.factory(files)
+    let res
+    try {
+      res = props.factory(files)
+    } catch (err) {
+      failed(err)
+      return
+    }
 
-    if (!res) {
-      emit(
-        'factoryFailed',
-        new Error('QUploader: factory() does not return properly'),
-        files
-      )
-      workingThreads.value--
+    if (Object(res) !== res) {
+      failed(new Error('QUploader: factory() does not return properly'))
     } else if (
       typeof res.catch === 'function' &&
       typeof res.then === 'function'
     ) {
       promises.value.push(res)
 
-      const failed = err => {
-        if (helpers.isAlive()) {
-          promises.value = promises.value.filter(p => p !== res)
-
-          if (promises.value.length === 0) abortPromises = false
-
-          helpers.queuedFiles.value.push(...files)
-          files.forEach(f => {
-            helpers.updateFileStatus(f, 'failed')
-          })
-
-          emit('factoryFailed', err, files)
-          workingThreads.value--
-        }
-      }
-
       res
         .then(factory => {
-          if (abortPromises) {
-            failed(new Error('Aborted'))
+          if (abortedPromises.has(res)) {
+            failed(new Error('Aborted'), res)
+          } else if (Object(factory) !== factory) {
+            failed(
+              new Error('QUploader: factory() does not return properly'),
+              res
+            )
           } else if (helpers.isAlive()) {
             promises.value = promises.value.filter(p => p !== res)
-            performUpload(files, factory)
+            startUpload(factory)
           }
         })
-        .catch(failed)
+        .catch(err => {
+          failed(err, res)
+        })
     } else {
-      performUpload(files, res || {})
+      startUpload(res)
+    }
+
+    function startUpload(factory) {
+      const liveFiles = getLiveFiles(files)
+
+      if (liveFiles.length === 0) {
+        workingThreads.value--
+        return
+      }
+
+      try {
+        performUpload(liveFiles, factory)
+      } catch (err) {
+        failed(err)
+      }
     }
   }
 
@@ -136,6 +168,10 @@ function injectPlugin({ props, emit, helpers }) {
 
     if (!url) {
       console.error('q-uploader: invalid or no URL specified')
+      helpers.queuedFiles.value.push(...files)
+      files.forEach(f => {
+        helpers.updateFileStatus(f, 'failed')
+      })
       workingThreads.value--
       return
     }
@@ -166,7 +202,7 @@ function injectPlugin({ props, emit, helpers }) {
         let size = localUploadedSize - uploadIndexSize
         for (let i = uploadIndex; size > 0 && i < files.length; i++) {
           const file = files[i],
-            uploaded = size > file.size
+            uploaded = size >= file.size
 
           if (uploaded) {
             size -= file.size
@@ -186,19 +222,33 @@ function injectPlugin({ props, emit, helpers }) {
       if (xhr.readyState < 4) return
 
       if (xhr.status && xhr.status < 400) {
-        helpers.uploadedFiles.value.push(...files)
-        files.forEach(f => {
-          helpers.updateFileStatus(f, 'uploaded')
-        })
-        emit('uploaded', { files, xhr })
+        const liveFiles = getLiveFiles(files)
+        const liveUploadSize = liveFiles.reduce(
+          (total, file) => total + file.size,
+          0
+        )
+
+        helpers.uploadedSize.value += liveUploadSize - localUploadedSize
+
+        if (liveFiles.length !== 0) {
+          helpers.uploadedFiles.value.push(...liveFiles)
+          liveFiles.forEach(f => {
+            helpers.updateFileStatus(f, 'uploaded')
+          })
+          emit('uploaded', { files: liveFiles, xhr })
+        }
       } else {
         aborted = true
         helpers.uploadedSize.value -= localUploadedSize
-        helpers.queuedFiles.value.push(...files)
-        files.forEach(f => {
-          helpers.updateFileStatus(f, 'failed')
-        })
-        emit('failed', { files, xhr })
+
+        const liveFiles = getLiveFiles(files)
+        if (liveFiles.length !== 0) {
+          helpers.queuedFiles.value.push(...liveFiles)
+          liveFiles.forEach(f => {
+            helpers.updateFileStatus(f, 'failed')
+          })
+          emit('failed', { files: liveFiles, xhr })
+        }
       }
 
       workingThreads.value--

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

@@ -103,7 +103,7 @@
         }
       },
       "returns": {
-        "type": "String",
+        "type": "Array",
         "desc": "An array consisting of objects with header definitions"
       },
       "category": "upload"
@@ -138,8 +138,8 @@
         }
       },
       "returns": {
-        "type": "String",
-        "desc": "An array consists of objects with additional fields definitions (used by Form to be uploaded)"
+        "type": "Array",
+        "desc": "An array consisting of objects with additional field definitions (used by FormData to be uploaded)"
       },
       "category": "upload"
     },
@@ -264,7 +264,7 @@
     },
 
     "factory-failed": {
-      "desc": "Emitted when factory function is supplied with a Promise which is rejected",
+      "desc": "Emitted when the factory function throws, returns an invalid value, or supplies a Promise which is rejected or aborted",
       "params": {
         "err": {
           "type": "Error",

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

@@ -388,6 +388,8 @@ export default function useField(state) {
       state.inputRef.value.value = null
     }
 
+    state.onClear?.()
+
     emit('update:modelValue', null)
     if (state.changeEvent) emit('change', null)
     emit('clear', props.modelValue)

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

@@ -105,7 +105,9 @@ export default function useFile({
       files = filterFiles(files, rejectedFiles, 'accept', file =>
         extensions.value.some(
           ext =>
-            file.type.toUpperCase().startsWith(ext) ||
+            (ext.endsWith('/')
+              ? file.type.toUpperCase().startsWith(ext)
+              : file.type.toUpperCase() === ext) ||
             file.name.toUpperCase().endsWith(ext)
         )
       )
@@ -137,19 +139,23 @@ export default function useFile({
 
     // Compute key to use for each file
     files.forEach(file => {
-      file.__key =
-        file.webkitRelativePath + file.lastModified + file.name + file.size
+      file.__key = JSON.stringify([
+        file.webkitRelativePath,
+        file.lastModified,
+        file.name,
+        file.size
+      ])
     })
 
     if (append) {
       // Avoid duplicate files
-      const filenameMap = currentFileList.map(entry => entry.__key)
-      files = filterFiles(
-        files,
-        rejectedFiles,
-        'duplicate',
-        file => !filenameMap.includes(file.__key)
-      )
+      const filenameSet = new Set(currentFileList.map(entry => entry.__key))
+      files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+        if (filenameSet.has(file.__key)) return false
+
+        filenameSet.add(file.__key)
+        return true
+      })
     }
 
     if (files.length === 0) {
@@ -162,8 +168,11 @@ export default function useFile({
         : 0
 
       files = filterFiles(files, rejectedFiles, 'max-total-size', file => {
-        size += file.size
-        return size <= maxTotalSizeNumber.value
+        const newSize = size + file.size
+        if (newSize > maxTotalSizeNumber.value) return false
+
+        size = newSize
+        return true
       })
 
       if (files.length === 0) {

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

@@ -1,16 +1,25 @@
 import {
   getCurrentInstance,
+  onActivated,
   onBeforeMount,
   onBeforeUnmount,
+  onDeactivated,
   onMounted,
   ref,
   watch
 } from 'vue'
 
 import History from '../../plugins/private.history/History.js'
-import { vmHasRouter } from '../../utils/private.vm/vm.js'
+import { vmHasRouter, vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import useTick from '../use-tick/use-tick.js'
+import useAnimationFrame from '../use-animation-frame/use-animation-frame.js'
+import {
+  getHorizontalScrollPosition,
+  getVerticalScrollPosition
+} from '../../utils/scroll/scroll.js'
 
 let counter = 0
+let restoreState = null
 
 export const useFullscreenProps = {
   fullscreen: Boolean,
@@ -24,7 +33,10 @@ export default function useFullscreen() {
   const { props, emit, proxy } = vm
 
   let historyEntry, fullscreenFillerNode
+
   const inFullscreen = ref(false)
+  const { registerTick, removeTick } = useTick()
+  const { registerAnimationFrame, removeAnimationFrame } = useAnimationFrame()
 
   if (vmHasRouter(vm)) {
     watch(
@@ -56,7 +68,19 @@ export default function useFullscreen() {
   }
 
   function setFullscreen() {
-    if (inFullscreen.value) return
+    if (vmIsDestroyed(vm) || inFullscreen.value) return
+
+    removeAnimationFrame()
+    removeTick()
+
+    if (counter === 0) {
+      restoreState = {
+        left: getHorizontalScrollPosition(window),
+        top: getVerticalScrollPosition(window),
+        width: window.innerWidth,
+        height: window.innerHeight
+      }
+    }
 
     inFullscreen.value = true
     proxy.$el.replaceWith(fullscreenFillerNode)
@@ -73,7 +97,7 @@ export default function useFullscreen() {
     History.add(historyEntry)
   }
 
-  function exitFullscreen() {
+  function exitFullscreenImpl(shouldRestoreElement) {
     if (!inFullscreen.value) return
 
     if (historyEntry !== void 0) {
@@ -81,20 +105,48 @@ export default function useFullscreen() {
       historyEntry = void 0
     }
 
-    fullscreenFillerNode.replaceWith(proxy.$el)
+    if (shouldRestoreElement === true) {
+      fullscreenFillerNode.replaceWith(proxy.$el)
+    } else {
+      fullscreenFillerNode.remove()
+    }
+
     inFullscreen.value = false
 
     counter = Math.max(0, counter - 1)
+    if (counter !== 0) return
 
-    if (counter === 0) {
-      document.body.classList.remove('q-body--fullscreen-mixin')
+    document.body.classList.remove('q-body--fullscreen-mixin')
 
-      if (proxy.$el.scrollIntoView !== void 0) {
-        setTimeout(() => {
+    if (restoreState === null) return
+
+    const { left, top, width, height } = restoreState
+    restoreState = null
+
+    if (vmIsDestroyed(vm)) return
+
+    registerTick(() => {
+      if (counter !== 0) return
+      registerAnimationFrame(() => {
+        if (counter !== 0) return
+
+        if (window.innerWidth !== width || window.innerHeight !== height) {
+          /**
+           * If user has resized the window while in fullscreen mode,
+           * we cannot restore the scroll position because it will be wrong.
+           * So we just scroll the element into view instead,
+           * which is the best we can do.
+           */
           proxy.$el.scrollIntoView()
-        }, 0)
-      }
-    }
+        } else {
+          window.scrollTo(left, top)
+        }
+      })
+    })
+  }
+
+  function exitFullscreen() {
+    exitFullscreenImpl(true)
   }
 
   onBeforeMount(() => {
@@ -105,6 +157,14 @@ export default function useFullscreen() {
     if (props.fullscreen) setFullscreen()
   })
 
+  onDeactivated(() => {
+    // A direct child of KeepAlive has already been moved to its storage
+    // container at this point. Its filler must not move it back into the DOM.
+    exitFullscreenImpl(proxy.$el.isConnected)
+  })
+  onActivated(() => {
+    if (props.fullscreen) setFullscreen()
+  })
   onBeforeUnmount(exitFullscreen)
 
   // expose public methods

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

@@ -0,0 +1,158 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { KeepAlive, defineComponent, h, ref } from 'vue'
+
+import useFullscreen, {
+  useFullscreenEmits,
+  useFullscreenProps
+} from './use-fullscreen.js'
+
+let wrapper, mountTarget
+
+afterEach(() => {
+  wrapper?.unmount()
+  mountTarget?.remove()
+  wrapper = mountTarget = void 0
+})
+
+const FullscreenComponent = defineComponent({
+  name: 'FullscreenComponent',
+  props: useFullscreenProps,
+  emits: useFullscreenEmits,
+
+  setup() {
+    const { inFullscreen } = useFullscreen()
+
+    return () =>
+      h(
+        'section',
+        {
+          'data-test': 'fullscreen-component',
+          'data-fullscreen': inFullscreen.value
+        },
+        'Fullscreen component'
+      )
+  }
+})
+
+const OtherComponent = defineComponent({
+  name: 'OtherComponent',
+  setup: () => () => h('section', { 'data-test': 'other-component' })
+})
+
+describe('[useFullscreen API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)useFullscreenProps]', () => {
+      test('is defined correctly', () => {
+        expect(useFullscreenProps).toBeTypeOf('object')
+        expect(Object.keys(useFullscreenProps)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)useFullscreenEmits]', () => {
+      test('is defined correctly', () => {
+        expect(Array.isArray(useFullscreenEmits)).toBe(true)
+        expect(useFullscreenEmits).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('does not move a deactivated root back into the live DOM', async () => {
+        const showFullscreen = ref(true)
+
+        mountTarget = document.createElement('div')
+        document.body.append(mountTarget)
+
+        wrapper = mount(
+          defineComponent({
+            setup: () => () =>
+              h(KeepAlive, null, () =>
+                showFullscreen.value === true
+                  ? h(FullscreenComponent, { fullscreen: true })
+                  : h(OtherComponent)
+              )
+          }),
+          { attachTo: mountTarget }
+        )
+
+        await flushPromises()
+
+        const getFullscreenElement = () =>
+          document.body.querySelector('[data-test="fullscreen-component"]')
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(true)
+
+        showFullscreen.value = false
+        await flushPromises()
+
+        expect(getFullscreenElement()).toBeNull()
+        expect(wrapper.find('[data-test="other-component"]').exists()).toBe(
+          true
+        )
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(false)
+
+        showFullscreen.value = true
+        await flushPromises()
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+        expect(
+          document.body.classList.contains('q-body--fullscreen-mixin')
+        ).toBe(true)
+      })
+
+      test('restores a nested fullscreen component to cached content', async () => {
+        const showFullscreen = ref(true)
+        const CachedComponent = defineComponent({
+          name: 'CachedComponent',
+          setup: () => () =>
+            h('main', null, [h(FullscreenComponent, { fullscreen: true })])
+        })
+
+        mountTarget = document.createElement('div')
+        document.body.append(mountTarget)
+
+        wrapper = mount(
+          defineComponent({
+            setup: () => () =>
+              h(KeepAlive, null, () =>
+                showFullscreen.value === true
+                  ? h(CachedComponent)
+                  : h(OtherComponent)
+              )
+          }),
+          { attachTo: mountTarget }
+        )
+
+        await flushPromises()
+
+        const getFullscreenElement = () =>
+          document.body.querySelector('[data-test="fullscreen-component"]')
+
+        expect(getFullscreenElement()).not.toBeNull()
+
+        showFullscreen.value = false
+        await flushPromises()
+
+        expect(getFullscreenElement()).toBeNull()
+        expect(wrapper.find('[data-test="other-component"]').exists()).toBe(
+          true
+        )
+
+        showFullscreen.value = true
+        await flushPromises()
+
+        expect(getFullscreenElement()).not.toBeNull()
+        expect(getFullscreenElement().dataset.fullscreen).toBe('true')
+      })
+    })
+  })
+})

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

@@ -21,6 +21,7 @@ export default function useModelToggle({
   hideOnRouteChange, // optional
   handleShow, // optional
   handleHide, // optional
+  handleRouteChange, // optional
   processOnMount // optional
 }) {
   const vm = getCurrentInstance()
@@ -127,6 +128,7 @@ export default function useModelToggle({
       () => proxy.$route.fullPath,
       () => {
         if (hideOnRouteChange.value && showing.value) {
+          handleRouteChange?.()
           hide()
         }
       }

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

@@ -108,11 +108,15 @@ export default function usePanel() {
   ])
 
   const transitionPrev = computed(
-    () => props.transitionPrev || `slide-${props.vertical ? 'down' : 'right'}`
+    () =>
+      props.transitionPrev ||
+      `slide-${props.vertical ? 'down' : proxy.$q.lang.rtl ? 'left' : 'right'}`
   )
 
   const transitionNext = computed(
-    () => props.transitionNext || `slide-${props.vertical ? 'up' : 'left'}`
+    () =>
+      props.transitionNext ||
+      `slide-${props.vertical ? 'up' : proxy.$q.lang.rtl ? 'right' : 'left'}`
   )
 
   const transitionStyle = computed(

package/src/composables/use-animation-frame/use-animation-frame.js

@@ -0,0 +1,47 @@
+import { getCurrentInstance, onBeforeUnmount, onDeactivated } from 'vue'
+
+import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
+import { noop } from '../../utils/event/event.js'
+
+/*
+ * Usage:
+ *    registerAnimationFrame(fn)
+ *    removeAnimationFrame()
+ */
+
+export default function useAnimationFrame() {
+  if (__QUASAR_SSR_SERVER__) {
+    return {
+      removeAnimationFrame: noop,
+      registerAnimationFrame: noop
+    }
+  }
+
+  let frameId = null
+  const vm = getCurrentInstance()
+
+  function removeAnimationFrame() {
+    if (frameId !== null) {
+      cancelAnimationFrame(frameId)
+      frameId = null
+    }
+  }
+
+  onDeactivated(removeAnimationFrame)
+  onBeforeUnmount(removeAnimationFrame)
+
+  return {
+    removeAnimationFrame,
+
+    registerAnimationFrame(fn) {
+      removeAnimationFrame()
+
+      if (!vmIsDestroyed(vm)) {
+        frameId = requestAnimationFrame(() => {
+          frameId = null
+          fn()
+        })
+      }
+    }
+  }
+}