quasar 2.21.4 → 2.22.0

package/src/components/tooltip/QTooltip.js

@@ -22,10 +22,15 @@ import useTransition, {
 } from '../../composables/private.use-transition/use-transition.js'
 import useTick from '../../composables/use-tick/use-tick.js'
 import useTimeout from '../../composables/use-timeout/use-timeout.js'
+import useId from '../../composables/use-id/use-id.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { addEvt, cleanEvt, stopAndPrevent } from '../../utils/event/event.js'
+import {
+  addEscapeKey,
+  removeEscapeKey
+} from '../../utils/private.keyboard/escape-key.js'
 import { clearSelection } from '../../utils/private.selection/selection.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import {
@@ -39,6 +44,8 @@ import {
   validatePosition
 } from '../../utils/private.position-engine/position-engine.js'
 
+let nonSelectableCount = 0
+
 export default createComponent({
   name: 'QTooltip',
 
@@ -101,7 +108,11 @@ export default createComponent({
   emits: [...useModelToggleEmits],
 
   setup(props, { slots, emit, attrs }) {
-    let unwatchPosition, observer
+    let unwatchPosition,
+      observer,
+      removeNonSelectableTimer,
+      hasNonSelectable = false,
+      describedBy
 
     const vm = getCurrentInstance()
     const {
@@ -110,6 +121,8 @@ export default createComponent({
 
     const innerRef = ref(null)
     const showing = ref(false)
+    const targetUid = useId()
+    const tooltipId = computed(() => attrs.id || targetUid.value)
 
     const anchorOrigin = computed(() =>
       parsePosition(props.anchor, $q.lang.rtl)
@@ -137,7 +150,7 @@ export default createComponent({
       processOnMount: true
     })
 
-    Object.assign(anchorEvents, { delayShow, delayHide })
+    Object.assign(anchorEvents, { delayShow, delayHide, onFocusin })
 
     const { showPortal, hidePortal, renderPortal } = usePortal(
       vm,
@@ -182,10 +195,26 @@ export default createComponent({
       onBeforeUnmount(() => {
         removeClickOutside(clickOutsideProps)
       })
+    } else {
+      // dismiss with the ESC key (WCAG 1.4.13) without moving focus;
+      // uses the shared escape stack so only the top-most popup reacts
+      watch(
+        () =>
+          // trigger only if it doesn't have external model
+          // or else only if the model can be updated (otherwise respect the external model)
+          (props.modelValue === null || props['onUpdate:modelValue']) &&
+          showing.value === true &&
+          props.persistent !== true,
+        val => {
+          const fn = val === true ? addEscapeKey : removeEscapeKey
+          fn(onEscapeKey)
+        }
+      )
     }
 
     function handleShow(evt) {
       showPortal()
+      addAriaDescription()
 
       // should removeTick() if this gets removed
       registerTick(() => {
@@ -254,7 +283,10 @@ export default createComponent({
       }
 
       unconfigureScrollTarget()
+      removeEscapeKey(onEscapeKey)
       cleanEvt(anchorEvents, 'tooltipTemp')
+      removeAriaDescription()
+      setNonSelectable(false)
     }
 
     function updatePosition() {
@@ -271,8 +303,13 @@ export default createComponent({
 
     function delayShow(evt) {
       if ($q.platform.is.mobile) {
+        if (removeNonSelectableTimer !== void 0) {
+          clearTimeout(removeNonSelectableTimer)
+          removeNonSelectableTimer = void 0
+        }
+
         clearSelection()
-        document.body.classList.add('non-selectable')
+        setNonSelectable(true)
 
         const target = anchorEl.value
         const evts = ['touchmove', 'touchcancel', 'touchend', 'click'].map(
@@ -292,8 +329,9 @@ export default createComponent({
         cleanEvt(anchorEvents, 'tooltipTemp')
         clearSelection()
         // delay needed otherwise selection still occurs
-        setTimeout(() => {
-          document.body.classList.remove('non-selectable')
+        removeNonSelectableTimer = setTimeout(() => {
+          removeNonSelectableTimer = void 0
+          setNonSelectable(false)
         }, 10)
       }
 
@@ -303,6 +341,26 @@ export default createComponent({
       }, props.hideDelay)
     }
 
+    function onFocusin(evt) {
+      const el = evt.target
+      if (!el) return
+
+      // only react to keyboard focus, not to focus coming from a pointer,
+      // so the tooltip doesn't pop up when the target is clicked;
+      // guard the call for engines that don't support :focus-visible
+      try {
+        if (el.matches(':focus-visible') === false) return
+      } catch {}
+
+      delayShow(evt)
+    }
+
+    // trigger only if it doesn't have external model
+    // or else only if the model can be updated (otherwise respect the external model)
+    function onEscapeKey(evt) {
+      hide(evt)
+    }
+
     function configureAnchorEl() {
       if (props.noParentEvent || anchorEl.value === null) return
 
@@ -310,12 +368,59 @@ export default createComponent({
         ? [[anchorEl.value, 'touchstart', 'delayShow', 'passive']]
         : [
             [anchorEl.value, 'mouseenter', 'delayShow', 'passive'],
-            [anchorEl.value, 'mouseleave', 'delayHide', 'passive']
+            [anchorEl.value, 'mouseleave', 'delayHide', 'passive'],
+            [anchorEl.value, 'focusin', 'onFocusin', 'passive'],
+            [anchorEl.value, 'focusout', 'delayHide', 'passive']
           ]
 
       addEvt(anchorEvents, 'anchor', evts)
     }
 
+    function setNonSelectable(state) {
+      if (hasNonSelectable === state) return
+
+      hasNonSelectable = state
+      nonSelectableCount += state ? 1 : -1
+      document.body.classList.toggle('non-selectable', nonSelectableCount > 0)
+
+      if (!state && removeNonSelectableTimer !== void 0) {
+        clearTimeout(removeNonSelectableTimer)
+        removeNonSelectableTimer = void 0
+      }
+    }
+
+    function addAriaDescription() {
+      const el = anchorEl.value,
+        id = tooltipId.value
+
+      if (el === null || id === void 0) return
+
+      const ids = (el.getAttribute('aria-describedby') || '')
+        .split(/\s+/)
+        .filter(Boolean)
+
+      describedBy = { el, id, added: !ids.includes(id) }
+
+      if (describedBy.added) {
+        ids.push(id)
+        el.setAttribute('aria-describedby', ids.join(' '))
+      }
+    }
+
+    function removeAriaDescription() {
+      if (describedBy?.added === true) {
+        const { el, id } = describedBy,
+          value = (el.getAttribute('aria-describedby') || '')
+            .split(/\s+/)
+            .filter(entry => entry !== '' && entry !== id)
+
+        if (value.length === 0) el.removeAttribute('aria-describedby')
+        else el.setAttribute('aria-describedby', value.join(' '))
+      }
+
+      describedBy = void 0
+    }
+
     function configureScrollTarget() {
       if (anchorEl.value !== null || props.scrollTarget !== void 0) {
         localScrollTarget.value = getScrollTarget(
@@ -334,6 +439,7 @@ export default createComponent({
             'div',
             {
               ...attrs,
+              id: tooltipId.value,
               ref: innerRef,
               class: [
                 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',

package/src/components/tree/QTree.js

@@ -118,11 +118,14 @@ export default createComponent({
     const lazy = ref({})
     const innerTicked = ref(props.ticked || [])
     const innerExpanded = ref(props.expanded || [])
+    const focusedKey = ref(null)
 
-    let blurTargets = {}
+    let blurTargets = {},
+      headerTargets = {}
 
     onBeforeUpdate(() => {
       blurTargets = {}
+      headerTargets = {}
     })
 
     const classes = computed(
@@ -306,6 +309,38 @@ export default createComponent({
       return acc
     })
 
+    const focusableKeys = computed(() => {
+      const acc = []
+
+      function travel(nodes) {
+        nodes.forEach(node => {
+          const localMeta = meta.value[node[props.nodeKey]]
+
+          if (props.filter && localMeta.matchesFilter !== true) return
+          if (localMeta.link === true) acc.push(localMeta.key)
+
+          if (
+            localMeta.expanded === true &&
+            Array.isArray(node[props.childrenKey])
+          ) {
+            travel(node[props.childrenKey])
+          }
+        })
+      }
+
+      travel(props.nodes)
+      return acc
+    })
+
+    const tabKey = computed(() => {
+      const keys = focusableKeys.value
+
+      if (keys.includes(focusedKey.value)) return focusedKey.value
+
+      const selected = keys.find(key => meta.value[key].selected === true)
+      return selected !== void 0 ? selected : keys[0]
+    })
+
     watch(
       () => props.ticked,
       val => {
@@ -576,18 +611,36 @@ export default createComponent({
                   : '') +
                 (m.selected === true ? ' q-tree__node--selected' : '') +
                 (m.disabled === true ? ' q-tree__node--disabled' : ''),
-              tabindex: m.link === true ? 0 : -1,
-              ariaExpanded: children.length !== 0 ? m.expanded : null,
+              ref: el => {
+                headerTargets[m.key] = el
+              },
+              tabindex: m.link === true && m.key === tabKey.value ? 0 : -1,
+              'aria-expanded': isParent
+                ? m.expanded
+                  ? 'true'
+                  : 'false'
+                : null,
+              'aria-selected': m.selectable
+                ? m.selected
+                  ? 'true'
+                  : 'false'
+                : null,
+              'aria-disabled': m.disabled === true ? 'true' : null,
               role: 'treeitem',
+              onFocus() {
+                if (m.link === true) focusedKey.value = m.key
+              },
               onClick: e => {
                 onClick(node, m, e)
               },
-              onKeypress(e) {
+              onKeydown(e) {
                 if (shouldIgnoreKey(e) !== true) {
                   if (e.keyCode === 13) {
                     onClick(node, m, e, true)
                   } else if (e.keyCode === 32) {
                     onExpandClick(node, m, e, true)
+                  } else if (onNavigationKey(m, e.keyCode)) {
+                    stopAndPrevent(e)
                   }
                 }
               }
@@ -722,7 +775,72 @@ export default createComponent({
       blurTargets[key]?.focus()
     }
 
+    function focusNode(key) {
+      if (key !== void 0) {
+        focusedKey.value = key
+        headerTargets[key]?.focus()
+      }
+    }
+
+    function getFirstFocusableChild(children) {
+      for (const child of children) {
+        if (props.filter && child.matchesFilter !== true) continue
+        if (child.link === true) return child.key
+
+        if (child.expanded === true) {
+          const key = getFirstFocusableChild(child.children)
+          if (key !== void 0) return key
+        }
+      }
+    }
+
+    function onNavigationKey(localMeta, keyCode) {
+      const keys = focusableKeys.value,
+        index = keys.indexOf(localMeta.key)
+
+      if (keyCode === 36) {
+        focusNode(keys[0])
+        return true
+      }
+      if (keyCode === 35) {
+        focusNode(keys.at(-1))
+        return true
+      }
+      if (keyCode === 38) {
+        focusNode(keys[index - 1])
+        return true
+      }
+      if (keyCode === 40) {
+        focusNode(keys[index + 1])
+        return true
+      }
+      if (keyCode === 39) {
+        if (localMeta.isParent !== true && !localMeta.lazy) return true
+
+        if (localMeta.expanded !== true) {
+          setExpanded(localMeta.key, true)
+        } else {
+          focusNode(getFirstFocusableChild(localMeta.children))
+        }
+        return true
+      }
+      if (keyCode === 37) {
+        if (localMeta.expanded === true) {
+          setExpanded(localMeta.key, false)
+        } else {
+          let parent = localMeta.parent
+          while (parent !== null && parent.link !== true) parent = parent.parent
+          focusNode(parent?.key)
+        }
+        return true
+      }
+
+      return false
+    }
+
     function onClick(node, localMeta, e, keyboard) {
+      if (localMeta.link === true) focusedKey.value = localMeta.key
+
       if (keyboard !== true && localMeta.selectable !== false) {
         blur(localMeta.key)
       }
@@ -749,6 +867,8 @@ export default createComponent({
     }
 
     function onExpandClick(node, localMeta, e, keyboard) {
+      if (localMeta.link === true) focusedKey.value = localMeta.key
+
       if (e !== void 0) {
         stopAndPrevent(e)
       }

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

@@ -93,7 +93,11 @@ export function getRenderer(getPlugin, expose) {
     file.__uploaded = status === 'uploaded' ? file.size : uploadedSize
 
     file.__progress =
-      status === 'uploaded' ? 1 : Math.min(0.9999, file.__uploaded / file.size)
+      status === 'uploaded'
+        ? 1
+        : file.size === 0
+          ? 0
+          : Math.min(0.9999, file.__uploaded / file.size)
 
     file.__progressLabel = getProgressLabel(file.__progress)
     proxy.$forceUpdate()
@@ -216,7 +220,9 @@ export function getRenderer(getPlugin, expose) {
 
   function removeUploadedFiles() {
     if (!props.disable) {
-      batchRemoveFiles(['uploaded'], () => {
+      batchRemoveFiles(['uploaded'], ({ size }) => {
+        state.uploadedSize.value -= size
+        uploadSize.value -= size
         state.uploadedFiles.value = []
       })
     }
@@ -258,12 +264,16 @@ export function getRenderer(getPlugin, expose) {
   function removeFile(file) {
     if (props.disable) return
 
+    const isUploading = file.__status === 'uploading'
+
     if (file.__status === 'uploaded') {
+      state.uploadedSize.value -= file.size
+      uploadSize.value -= file.size
       state.uploadedFiles.value = state.uploadedFiles.value.filter(
         f => f.__key !== file.__key
       )
-    } else if (file.__status === 'uploading') {
-      file.__abort()
+    } else if (isUploading) {
+      uploadSize.value -= file.size
     } else {
       uploadSize.value -= file.size
     }
@@ -281,6 +291,11 @@ export function getRenderer(getPlugin, expose) {
     state.queuedFiles.value = state.queuedFiles.value.filter(
       f => f.__key !== file.__key
     )
+
+    if (isUploading) {
+      file.__abort()
+    }
+
     emit('removed', [file])
   }
 

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)