quasar 2.21.4 → 2.22.0

package/src/components/scroll-area/QScrollArea.js

@@ -26,6 +26,7 @@ import {
   setVerticalScrollPosition
 } from '../../utils/scroll/scroll.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
+import { rtlHasScrollBug } from '../../utils/private.rtl/rtl.js'
 import debounce from '../../utils/debounce/debounce.js'
 
 const axisList = ['vertical', 'horizontal']
@@ -62,11 +63,11 @@ export default createComponent({
 
     verticalOffset: {
       type: Array,
-      default: [0, 0]
+      default: () => [0, 0]
     },
     horizontalOffset: {
       type: Array,
-      default: [0, 0]
+      default: () => [0, 0]
     },
 
     contentStyle: [Array, String, Object],
@@ -200,7 +201,11 @@ export default createComponent({
       if (diff <= 0) {
         return 0
       }
-      const p = between(Math.abs(scroll.horizontal.position.value) / diff, 0, 1)
+      const p = between(
+        getHorizontalLogicalPosition(scroll.horizontal.position.value) / diff,
+        0,
+        1
+      )
       return Math.round(p * 10_000) / 10_000
     })
     scroll.horizontal.thumbHidden = computed(
@@ -212,7 +217,7 @@ export default createComponent({
     )
     scroll.horizontal.thumbStart = computed(
       () =>
-        props.horizontalOffset[0] +
+        props.horizontalOffset[proxy.$q.lang.rtl ? 1 : 0] +
         scroll.horizontal.percentage.value *
           (container.horizontalInner.value - scroll.horizontal.thumbSize.value)
     )
@@ -347,7 +352,10 @@ export default createComponent({
       if (e.isFirst) {
         if (data.thumbHidden.value) return
 
-        panRefPos = data.position.value
+        panRefPos =
+          axis === 'horizontal'
+            ? getHorizontalLogicalPosition(data.position.value)
+            : data.position.value
         panning.value = true
       } else if (!panning.value) {
         return
@@ -361,22 +369,31 @@ export default createComponent({
         (data.size.value - container[axis].value) /
         (container[axis + 'Inner'].value - data.thumbSize.value)
       const distance = e.distance[dProp.dist]
-      const pos =
-        panRefPos + (e.direction === dProp.dir ? 1 : -1) * distance * multiplier
-
-      setScroll(pos, axis)
+      const direction =
+        (e.direction === dProp.dir ? 1 : -1) *
+        (axis === 'horizontal' && proxy.$q.lang.rtl ? -1 : 1)
+      const pos = panRefPos + direction * distance * multiplier
+
+      setScroll(
+        axis === 'horizontal' ? getHorizontalNativePosition(pos) : pos,
+        axis
+      )
     }
 
     function onMousedown(evt, axis) {
       const data = scroll[axis]
 
       if (!data.thumbHidden.value) {
+        const isHorizontalRtl = axis === 'horizontal' && proxy.$q.lang.rtl
         const startOffset =
           axis === 'vertical'
             ? props.verticalOffset[0]
-            : props.horizontalOffset[0]
+            : props.horizontalOffset[isHorizontalRtl ? 1 : 0]
 
-        const offset = evt[dirProps[axis].offset] - startOffset
+        const pointerOffset = isHorizontalRtl
+          ? container.horizontal.value - evt.offsetX
+          : evt[dirProps[axis].offset]
+        const offset = pointerOffset - startOffset
         const thumbStart = data.thumbStart.value - startOffset
 
         if (offset < thumbStart || offset > thumbStart + data.thumbSize.value) {
@@ -388,7 +405,13 @@ export default createComponent({
             1
           )
           setScroll(
-            percentage * Math.max(0, data.size.value - container[axis].value),
+            isHorizontalRtl
+              ? getHorizontalNativePosition(
+                  percentage *
+                    Math.max(0, data.size.value - container[axis].value)
+                )
+              : percentage *
+                  Math.max(0, data.size.value - container[axis].value),
             axis
           )
         }
@@ -416,6 +439,28 @@ export default createComponent({
       targetRef.value[dirProps[axis].scroll] = offset
     }
 
+    function getHorizontalLogicalPosition(position, rtl = proxy.$q.lang.rtl) {
+      if (!rtl) return position
+
+      return rtlHasScrollBug
+        ? Math.max(
+            0,
+            scroll.horizontal.size.value - container.horizontal.value
+          ) - position
+        : -position
+    }
+
+    function getHorizontalNativePosition(position, rtl = proxy.$q.lang.rtl) {
+      if (!rtl) return position
+
+      return rtlHasScrollBug
+        ? Math.max(
+            0,
+            scroll.horizontal.size.value - container.horizontal.value
+          ) - position
+        : -position
+    }
+
     let mouseEventTimer = null
 
     function onMouseenter() {
@@ -446,11 +491,17 @@ export default createComponent({
 
     watch(
       () => proxy.$q.lang.rtl,
-      rtl => {
+      (rtl, oldRtl) => {
         if (targetRef.value !== null) {
           setHorizontalScrollPosition(
             targetRef.value,
-            Math.abs(scroll.horizontal.position.value) * (rtl ? -1 : 1)
+            getHorizontalNativePosition(
+              getHorizontalLogicalPosition(
+                scroll.horizontal.position.value,
+                oldRtl
+              ),
+              rtl
+            )
           )
         }
       }
@@ -490,11 +541,12 @@ export default createComponent({
       }),
       setScrollPosition: localSetScrollPosition,
       setScrollPercentage(axis, percentage, duration) {
+        const offset =
+          percentage * (scroll[axis].size.value - container[axis].value)
+
         localSetScrollPosition(
           axis,
-          percentage *
-            (scroll[axis].size.value - container[axis].value) *
-            (axis === 'horizontal' && proxy.$q.lang.rtl ? -1 : 1),
+          axis === 'horizontal' ? getHorizontalNativePosition(offset) : offset,
           duration
         )
       }

package/src/components/slide-item/QSlideItem.js

@@ -105,10 +105,11 @@ export default createComponent({
           node.style.transform = `translate${pan.axis}(${pan.dir * 100}%)`
 
           if (timer !== null) clearTimeout(timer)
+          const showing = pan.showing
           timer = setTimeout(() => {
             timer = null
-            emit(pan.showing, { reset })
-            emit('action', { side: pan.showing, reset })
+            emit(showing, { reset })
+            emit('action', { side: showing, reset })
           }, 230)
         } else {
           node.style.transform = 'translate(0,0)'

package/src/components/slider/use-slider.js

@@ -596,10 +596,14 @@ export default function useSlider({
             ]
           )
         )
+      }
 
-        if (props.name !== void 0 && !props.disable) {
-          injectFormInput(thumbContent, 'push')
-        }
+      if (
+        thumb.injectFormInput !== false &&
+        props.name !== void 0 &&
+        !props.disable
+      ) {
+        injectFormInput(thumbContent, 'push')
       }
 
       return h(

package/src/components/stepper/StepHeader.js

@@ -4,6 +4,11 @@ import QIcon from '../icon/QIcon.js'
 import Ripple from '../../directives/ripple/Ripple.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+
+function preventSpace(e) {
+  if (e.keyCode === 32) stopAndPrevent(e)
+}
 
 export default createComponent({
   name: 'StepHeader',
@@ -134,8 +139,9 @@ export default createComponent({
     }
 
     function onKeyup(e) {
-      if (e.keyCode === 13 && !isActive.value) {
-        props.goToPanel(props.step.name)
+      if ([13, 32].includes(e.keyCode)) {
+        if (!isActive.value) props.goToPanel(props.step.name)
+        stopAndPrevent(e)
       }
     }
 
@@ -144,7 +150,10 @@ export default createComponent({
 
       if (headerNav.value) {
         data.onClick = onActivate
+        data.onKeydown = preventSpace
         data.onKeyup = onKeyup
+        data.role = 'button'
+        data['aria-current'] = isActive.value ? 'step' : void 0
 
         Object.assign(
           data,

package/src/components/table/QTable.js

@@ -201,15 +201,17 @@ export default createComponent({
     )
 
     watch(
-      () =>
-        props.tableStyle +
-        props.tableClass +
-        props.tableHeaderStyle +
-        props.tableHeaderClass +
-        containerClass.value,
+      [
+        () => props.tableStyle,
+        () => props.tableClass,
+        () => props.tableHeaderStyle,
+        () => props.tableHeaderClass,
+        containerClass
+      ],
       () => {
         if (hasVirtScroll.value) virtScrollRef.value?.reset()
-      }
+      },
+      { deep: true }
     )
 
     const {
@@ -1095,13 +1097,13 @@ export default createComponent({
 
                 if (props.onRowClick !== void 0) {
                   data.onClick = evt => {
-                    emit('RowClick', evt, scope.row, scope.pageIndex)
+                    emit('rowClick', evt, scope.row, scope.pageIndex)
                   }
                 }
 
                 if (props.onRowDblclick !== void 0) {
                   data.onDblclick = evt => {
-                    emit('RowDblclick', evt, scope.row, scope.pageIndex)
+                    emit('rowDblclick', evt, scope.row, scope.pageIndex)
                   }
                 }
 

package/src/components/table/QTh.js

@@ -25,6 +25,14 @@ export default createComponent({
       emit('click', evt)
     }
 
+    const onKeyup = (evt, col) => {
+      if (evt.key === 'Enter' || evt.key === ' ') {
+        props.props.sort(col)
+        onClick(evt)
+        evt.preventDefault()
+      }
+    }
+
     return () => {
       if (props.props === void 0) {
         return h(
@@ -40,7 +48,7 @@ export default createComponent({
       let col, child
       const name = vm.vnode.key
 
-      if (name) {
+      if (name !== null) {
         col = props.props.colsMap[name]
         if (col === void 0) return
       } else {
@@ -71,6 +79,17 @@ export default createComponent({
         }
       }
 
+      if (col.sortable) {
+        data.tabindex = 0
+        data['aria-sort'] = col.__ariaSort
+        data.onKeydown = evt => {
+          if (evt.key === ' ') evt.preventDefault()
+        }
+        data.onKeyup = evt => {
+          onKeyup(evt, col)
+        }
+      }
+
       return h('th', data, child)
     }
   }

package/src/components/table/table-column-selection.js

@@ -48,6 +48,14 @@ export function useTableColumnSelection(
         ...col,
         align,
         __iconClass: `q-table__sort-icon q-table__sort-icon--${align}`,
+        __ariaSort:
+          col.sortable === true
+            ? col.name === sortBy
+              ? descending
+                ? 'descending'
+                : 'ascending'
+              : 'none'
+            : void 0,
         __thClass:
           alignClass +
           (col.headerClasses !== void 0 ? ' ' + col.headerClasses : '') +
@@ -74,7 +82,7 @@ export function useTableColumnSelection(
   })
 
   const computedColsMap = computed(() => {
-    const names = {}
+    const names = Object.create(null)
     computedCols.value.forEach(col => {
       names[col.name] = col
     })

package/src/components/table/table-pagination.js

@@ -64,8 +64,11 @@ export function useTablePaginationState(vm, getCellValue) {
   function requestServerInteraction(prop = {}) {
     nextTick(() => {
       emit('request', {
-        pagination: prop.pagination || computedPagination.value,
-        filter: prop.filter || props.filter,
+        pagination:
+          prop.pagination === void 0
+            ? computedPagination.value
+            : prop.pagination,
+        filter: prop.filter === void 0 ? props.filter : prop.filter,
         getCellValue
       })
     })

package/src/components/table/table-row-selection.js

@@ -15,13 +15,9 @@ export const useTableRowSelectionProps = {
 export const useTableRowSelectionEmits = ['update:selected', 'selection']
 
 export function useTableRowSelection(props, emit, computedRows, getRowKey) {
-  const selectedKeys = computed(() => {
-    const keys = {}
-    props.selected.map(getRowKey.value).forEach(key => {
-      keys[key] = true
-    })
-    return keys
-  })
+  const selectedKeys = computed(
+    () => new Set(props.selected.map(getRowKey.value))
+  )
 
   const hasSelectionMode = computed(() => props.selection !== 'none')
   const singleSelection = computed(() => props.selection === 'single')
@@ -29,19 +25,23 @@ export function useTableRowSelection(props, emit, computedRows, getRowKey) {
   const allRowsSelected = computed(
     () =>
       computedRows.value.length !== 0 &&
-      computedRows.value.every(row => selectedKeys.value[getRowKey.value(row)])
+      computedRows.value.every(row =>
+        selectedKeys.value.has(getRowKey.value(row))
+      )
   )
 
   const someRowsSelected = computed(
     () =>
       !allRowsSelected.value &&
-      computedRows.value.some(row => selectedKeys.value[getRowKey.value(row)])
+      computedRows.value.some(row =>
+        selectedKeys.value.has(getRowKey.value(row))
+      )
   )
 
   const rowsSelectedNumber = computed(() => props.selected.length)
 
   function isRowSelected(key) {
-    return selectedKeys.value[key] === true
+    return selectedKeys.value.has(key)
   }
 
   function clearSelection() {

package/src/components/tabs/QTabs.js

@@ -386,13 +386,11 @@ export default createComponent({
       const dir = dirPrev ? -1 : dirNext ? 1 : void 0
 
       if (dir !== void 0) {
-        const rtlDir = isRTL.value ? -1 : 1
-        const index = tabs.indexOf(fromEl) + dir * rtlDir
+        const rtlDir = props.vertical !== true && isRTL.value ? -1 : 1
+        const index = (tabs.indexOf(fromEl) + dir * rtlDir + len) % len
 
-        if (index >= 0 && index < len) {
-          scrollToTabEl(tabs[index])
-          tabs[index].focus({ preventScroll: true })
-        }
+        scrollToTabEl(tabs[index])
+        tabs[index].focus({ preventScroll: true })
 
         return true
       }
@@ -700,6 +698,7 @@ export default createComponent({
           ref: rootRef,
           class: classes.value,
           role: 'tablist',
+          'aria-orientation': props.vertical ? 'vertical' : 'horizontal',
           onFocusin,
           onFocusout
         },

package/src/components/time/QTime.js

@@ -29,7 +29,7 @@ import useDatetime, {
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { __splitDate, formatDate } from '../../utils/date/date.js'
-import { position } from '../../utils/event/event.js'
+import { position, stopAndPrevent } from '../../utils/event/event.js'
 import { pad } from '../../utils/format/format.js'
 import { vmIsDestroyed } from '../../utils/private.vm/vm.js'
 
@@ -58,6 +58,10 @@ function getCurrentTime() {
   }
 }
 
+function preventSpace(e) {
+  if (e.keyCode === 32) stopAndPrevent(e)
+}
+
 function getWheelDist(a, b, threshold) {
   const diff = Math.abs(a - b)
   return Math.min(diff, threshold - diff)
@@ -536,11 +540,17 @@ export default createComponent({
     }
 
     function setAmOnKey(e) {
-      if (e.keyCode === 13) setAm()
+      if ([13, 32].includes(e.keyCode)) {
+        setAm()
+        stopAndPrevent(e)
+      }
     }
 
     function setPmOnKey(e) {
-      if (e.keyCode === 13) setPm()
+      if ([13, 32].includes(e.keyCode)) {
+        setPm()
+        stopAndPrevent(e)
+      }
     }
 
     function onClick(evt) {
@@ -562,9 +572,9 @@ export default createComponent({
     }
 
     function onKeyupHour(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'hour'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -598,9 +608,9 @@ export default createComponent({
     }
 
     function onKeyupMinute(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'minute'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -631,9 +641,9 @@ export default createComponent({
     }
 
     function onKeyupSecond(e) {
-      if (e.keyCode === 13) {
-        // ENTER
+      if ([13, 32].includes(e.keyCode)) {
         view.value = 'second'
+        stopAndPrevent(e)
       } else if ([37, 39].includes(e.keyCode)) {
         const payload = e.keyCode === 37 ? -1 : 1
 
@@ -642,7 +652,7 @@ export default createComponent({
 
           if (values.length === 0) return
 
-          if (innerModel.value.seconds === null) {
+          if (innerModel.value.second === null) {
             setSecond(values[0])
           } else {
             const index =
@@ -806,7 +816,10 @@ export default createComponent({
                 ? 'q-time__link--active'
                 : 'cursor-pointer'),
             tabindex: tabindex.value,
+            role: 'button',
+            'aria-pressed': view.value === 'hour' ? 'true' : 'false',
             onClick: setView.hour,
+            onKeydown: preventSpace,
             onKeyup: onKeyupHour
           },
           stringModel.value.hour
@@ -824,6 +837,9 @@ export default createComponent({
                     ? 'q-time__link--active'
                     : 'cursor-pointer'),
                 tabindex: tabindex.value,
+                role: 'button',
+                'aria-pressed': view.value === 'minute' ? 'true' : 'false',
+                onKeydown: preventSpace,
                 onKeyup: onKeyupMinute,
                 onClick: setView.minute
               }
@@ -846,6 +862,9 @@ export default createComponent({
                       ? 'q-time__link--active'
                       : 'cursor-pointer'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': view.value === 'second' ? 'true' : 'false',
+                  onKeydown: preventSpace,
                   onKeyup: onKeyupSecond,
                   onClick: setView.second
                 }
@@ -881,7 +900,10 @@ export default createComponent({
                     'q-time__link ' +
                     (isAM.value ? 'q-time__link--active' : 'cursor-pointer'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': isAM.value ? 'true' : 'false',
                   onClick: setAm,
+                  onKeydown: preventSpace,
                   onKeyup: setAmOnKey
                 },
                 'AM'
@@ -894,7 +916,10 @@ export default createComponent({
                     'q-time__link ' +
                     (isAM.value ? 'cursor-pointer' : 'q-time__link--active'),
                   tabindex: tabindex.value,
+                  role: 'button',
+                  'aria-pressed': isAM.value ? 'false' : 'true',
                   onClick: setPm,
+                  onKeydown: preventSpace,
                   onKeyup: setPmOnKey
                 },
                 'PM'