quasar 2.21.4 → 2.23.0

package/src/components/rating/QRating.js

@@ -102,7 +102,7 @@ export default createComponent({
             : props.iconSelected,
         halfIconLen,
         halfIcon:
-          halfIconLen > 0 ? props.iconHalf[selIconLen - 1] : props.iconHalf,
+          halfIconLen > 0 ? props.iconHalf[halfIconLen - 1] : props.iconHalf,
         colorLen,
         color: colorLen > 0 ? props.color[colorLen - 1] : props.color,
         selColorLen,
@@ -138,7 +138,12 @@ export default createComponent({
       const acc = [],
         icons = iconData.value,
         ceil = Math.ceil(props.modelValue),
-        tabindex = editable.value ? 0 : null
+        tabIndex =
+          Number.isInteger(props.modelValue) &&
+          props.modelValue >= 1 &&
+          props.modelValue <= props.max
+            ? props.modelValue
+            : 1
 
       const halfIndex =
         props.iconHalf === void 0 || ceil === props.modelValue ? -1 : ceil
@@ -191,7 +196,7 @@ export default createComponent({
                   : icons.icon) || $q.iconSet.rating.icon,
 
           attrs: {
-            tabindex,
+            tabindex: editable.value ? (i === tabIndex ? 0 : -1) : null,
             role: 'radio',
             'aria-checked': props.modelValue === i ? 'true' : 'false',
             'aria-label': iconLabel.value(i, name)
@@ -242,14 +247,29 @@ export default createComponent({
       }
     }
 
-    function onKeyup(e, i) {
+    function onKeydown(e, i) {
       switch (e.keyCode) {
         case 13:
         case 32: {
           set(i)
           return stopAndPrevent(e)
         }
-        case 37: // LEFT ARROW
+        case 37: {
+          // LEFT ARROW
+          const index = i + ($q.lang.rtl ? 1 : -1)
+          if (iconRefs[`rt${index}`]) {
+            iconRefs[`rt${index}`].focus()
+          }
+          return stopAndPrevent(e)
+        }
+        case 39: {
+          // RIGHT ARROW
+          const index = i + ($q.lang.rtl ? -1 : 1)
+          if (iconRefs[`rt${index}`]) {
+            iconRefs[`rt${index}`].focus()
+          }
+          return stopAndPrevent(e)
+        }
         case 40: {
           // DOWN ARROW
           if (iconRefs[`rt${i - 1}`]) {
@@ -257,7 +277,6 @@ export default createComponent({
           }
           return stopAndPrevent(e)
         }
-        case 39: // RIGHT ARROW
         case 38: {
           // UP ARROW
           if (iconRefs[`rt${i + 1}`]) {
@@ -303,8 +322,8 @@ export default createComponent({
                 setHoverValue(i)
               },
               onBlur: resetMouseModel,
-              onKeyup(e) {
-                onKeyup(e, i)
+              onKeydown(e) {
+                onKeydown(e, i)
               }
             },
             hMergeSlot(slots[`tip-${i}`], [

package/src/components/rating/QRating.sass

@@ -9,6 +9,10 @@
     & + &
       margin-left: 2px
 
+    [dir=rtl] & + &
+      margin-left: 0 #{"/* rtl:ignore */"}
+      margin-right: 2px #{"/* rtl:ignore */"}
+
   &__icon
     color: currentColor
     text-shadow: $rating-shadow

package/src/components/resize-observer/QResizeObserver.js

@@ -73,10 +73,13 @@ export default createComponent({
     proxy.trigger = trigger
 
     if (hasObserver) {
-      let observer
+      let observer,
+        isDestroyed = false
 
       // initialize as soon as possible
       const init = stop => {
+        if (isDestroyed) return
+
         targetEl = proxy.$el.parentNode
 
         if (targetEl) {
@@ -95,6 +98,8 @@ export default createComponent({
       })
 
       onBeforeUnmount(() => {
+        isDestroyed = true
+
         if (timer !== null) clearTimeout(timer)
 
         if (observer !== void 0) {
@@ -113,7 +118,8 @@ export default createComponent({
     // no observer, so fallback to old iframe method
     const { isHydrated } = useHydration()
 
-    let curDocView
+    let curDocView,
+      isDestroyed = false
 
     const cleanup = () => {
       if (timer !== null) {
@@ -142,12 +148,17 @@ export default createComponent({
 
     onMounted(() => {
       nextTick(() => {
+        if (isDestroyed) return
+
         targetEl = proxy.$el
         if (targetEl) onObjLoad()
       })
     })
 
-    onBeforeUnmount(cleanup)
+    onBeforeUnmount(() => {
+      isDestroyed = true
+      cleanup()
+    })
 
     return () => {
       if (isHydrated.value) {

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
         },