quasar 2.8.3 → 2.9.0

package/src/components/rating/QRating.js

@@ -31,6 +31,8 @@ export default createComponent({
     iconHalf: [ String, Array ],
     iconSelected: [ String, Array ],
 
+    iconAriaLabel: [ String, Array ],
+
     color: [ String, Array ],
     colorHalf: [ String, Array ],
     colorSelected: [ String, Array ],
@@ -96,11 +98,29 @@ export default createComponent({
       }
     })
 
+    const iconLabel = computed(() => {
+      if (typeof props.iconAriaLabel === 'string') {
+        const label = props.iconAriaLabel.length > 0 ? `${ props.iconAriaLabel } ` : ''
+        return i => `${ label }${ i }`
+      }
+
+      if (Array.isArray(props.iconAriaLabel) === true) {
+        const iMax = props.iconAriaLabel.length
+
+        if (iMax > 0) {
+          return i => props.iconAriaLabel[ Math.min(i, iMax) - 1 ]
+        }
+      }
+
+      return (i, label) => `${ label } ${ i }`
+    })
+
     const stars = computed(() => {
       const
         acc = [],
         icons = iconData.value,
-        ceil = Math.ceil(props.modelValue)
+        ceil = Math.ceil(props.modelValue),
+        tabindex = editable.value === true ? 0 : null
 
       const halfIndex = props.iconHalf === void 0 || ceil === props.modelValue
         ? -1
@@ -117,7 +137,16 @@ export default createComponent({
                 icons.selColor !== void 0 && active === true
                   ? (i <= icons.selColorLen ? props.colorSelected[ i - 1 ] : icons.selColor)
                   : (i <= icons.colorLen ? props.color[ i - 1 ] : icons.color)
-              )
+              ),
+          name = (
+            half === true
+              ? (i <= icons.halfIconLen ? props.iconHalf[ i - 1 ] : icons.halfIcon)
+              : (
+                  icons.selIcon !== void 0 && (active === true || exSelected === true)
+                    ? (i <= icons.selIconLen ? props.iconSelected[ i - 1 ] : icons.selIcon)
+                    : (i <= icons.iconLen ? props.icon[ i - 1 ] : icons.icon)
+                )
+          ) || $q.iconSet.rating.icon
 
         acc.push({
           name: (
@@ -130,7 +159,14 @@ export default createComponent({
                 )
           ) || $q.iconSet.rating.icon,
 
-          classes: 'q-rating__icon'
+          attrs: {
+            tabindex,
+            role: 'radio',
+            'aria-checked': props.modelValue === i ? 'true' : 'false',
+            'aria-label': iconLabel.value(i, name)
+          },
+
+          iconClass: 'q-rating__icon'
             + (active === true || half === true ? ' q-rating__icon--active' : '')
             + (exSelected === true ? ' q-rating__icon--exselected' : '')
             + (mouseModel.value === i ? ' q-rating__icon--hovered' : '')
@@ -142,15 +178,17 @@ export default createComponent({
     })
 
     const attributes = computed(() => {
+      const attrs = { role: 'radiogroup' }
+
       if (props.disable === true) {
-        return { 'aria-disabled': 'true' }
+        attrs[ 'aria-disabled' ] = 'true'
       }
       if (props.readonly === true) {
-        return { 'aria-readonly': 'true' }
+        attrs[ 'aria-readonly' ] = 'true'
       }
-    })
 
-    const tabindex = computed(() => (editable.value === true ? 0 : null))
+      return attrs
+    })
 
     function set (value) {
       if (editable.value === true) {
@@ -201,7 +239,7 @@ export default createComponent({
     return () => {
       const child = []
 
-      stars.value.forEach(({ classes, name }, index) => {
+      stars.value.forEach(({ iconClass, name, attrs }, index) => {
         const i = index + 1
 
         child.push(
@@ -209,7 +247,7 @@ export default createComponent({
             key: i,
             ref: vm => { iconRefs[ `rt${ i }` ] = vm },
             class: 'q-rating__icon-container flex flex-center',
-            tabindex: tabindex.value,
+            ...attrs,
             onClick () { set(i) },
             onMouseover () { setHoverValue(i) },
             onMouseout: resetMouseModel,
@@ -218,7 +256,7 @@ export default createComponent({
             onKeyup (e) { onKeyup(e, i) }
           }, hMergeSlot(
             slots[ `tip-${ i }` ],
-            [ h(QIcon, { class: classes, name }) ]
+            [ h(QIcon, { class: iconClass, name }) ]
           ))
         )
       })

package/src/components/rating/QRating.json

@@ -56,6 +56,17 @@
       "category": "content"
     },
 
+    "icon-aria-label": {
+      "type": [ "String", "Array" ],
+      "desc": "Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used",
+      "examples": [
+        "Rating",
+        "[\"Bad\", \"Normal\", \"Good\"]"
+      ],
+      "category": "accessibility",
+      "addedIn": "v1.20.3"
+    },
+
     "color": {
       "extends": "color",
       "type": [ "String", "Array" ],

package/src/components/select/QSelect.js

@@ -273,16 +273,13 @@ export default createComponent({
         tabindex: props.tabindex,
         role: 'combobox',
         'aria-label': props.label,
+        'aria-readonly': props.readonly === true ? 'true' : 'false',
         'aria-autocomplete': props.useInput === true ? 'list' : 'none',
         'aria-expanded': menu.value === true ? 'true' : 'false',
         'aria-owns': `${ state.targetUid.value }_lb`,
         'aria-controls': `${ state.targetUid.value }_lb`
       }
 
-      if (optionIndex.value >= 0) {
-        attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`
-      }
-
       return attrs
     })
 

package/src/components/stepper/QStep.js

@@ -53,10 +53,12 @@ export default createComponent({
       default: true
     },
     done: Boolean,
-    error: Boolean
+    error: Boolean,
+
+    onScroll: [ Function, Array ]
   },
 
-  setup (props, { attrs, slots }) {
+  setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
     const $stepper = inject(stepperKey, () => {
@@ -80,7 +82,7 @@ export default createComponent({
               if (target.scrollTop > 0) {
                 target.scrollTop = 0
               }
-              attrs.onScroll !== void 0 && attrs.onScroll(e)
+              props.onScroll !== void 0 && emit('scroll', e)
             }
           }
     ))

package/src/components/table/QTable.js

@@ -348,7 +348,7 @@ export default createComponent({
 
       if (rowEl !== null) {
         const scrollTarget = rootRef.value.querySelector('.q-table__middle.scroll')
-        const { offsetTop } = rowEl
+        const offsetTop = rowEl.offsetTop - props.virtualScrollStickySizeStart
         const direction = offsetTop < scrollTarget.scrollTop ? 'decrease' : 'increase'
 
         scrollTarget.scrollTop = offsetTop
@@ -479,11 +479,9 @@ export default createComponent({
     function getBodyScope (data) {
       injectBodyCommonScope(data)
 
-      data.cols = data.cols.map(col => {
-        const c = { ...col }
-        injectProp(c, 'value', () => getCellValue(col, data.row))
-        return c
-      })
+      data.cols = data.cols.map(
+        col => injectProp({ ...col }, 'value', () => getCellValue(col, data.row))
+      )
 
       return data
     }

package/src/components/table/QTable.json

@@ -77,10 +77,10 @@
 
     "virtual-scroll-sticky-size-start": {
       "type": [ "Number", "String" ],
-      "desc": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision",
+      "desc": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method",
       "default": "0",
       "examples": [ "virtual-scroll-sticky-size-start=\"48\"" ],
-      "category": "virtual-scroll"
+      "category": "virtual-scroll|behavior"
     },
 
     "virtual-scroll-sticky-size-end": {

package/src/components/tabs/QRouteTab.js

@@ -16,7 +16,9 @@ export default createComponent({
   emits: useTabEmits,
 
   setup (props, { slots, emit }) {
-    const rData = useRouterLink()
+    const routeData = useRouterLink({
+      useDisableForRouterLinkProps: false
+    })
 
     const { renderTab, $tabs } = useTab(
       props,
@@ -24,14 +26,14 @@ export default createComponent({
       emit,
       {
         exact: computed(() => props.exact),
-        ...rData
+        ...routeData
       }
     )
 
-    watch(() => props.name + props.exact + (rData.linkRoute.value || {}).href, () => {
+    watch(() => `${ props.name } | ${ props.exact } | ${ (routeData.resolvedLink.value || {}).href }`, () => {
       $tabs.verifyRouteModel()
     })
 
-    return () => renderTab(rData.linkTag.value, rData.linkProps.value)
+    return () => renderTab(routeData.linkTag.value, routeData.linkAttrs.value)
   }
 })

package/src/components/tabs/QRouteTab.json

@@ -7,17 +7,53 @@
 
   "events": {
     "click": {
-      "desc": "Emitted when component is clicked (activated)",
+      "desc": "Emitted when the component is clicked",
       "params": {
         "evt": {
           "extends": "evt",
-          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false"
+          "desc": "JS event object; If you want to cancel navigation then call evt.preventDefault() synchronously in your event handler"
         },
-        "navigateFn": {
+        "go": {
           "type": "Function",
-          "desc": "When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation",
-          "params": null,
-          "returns": null
+          "desc": "When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else",
+          "required": false,
+          "params": {
+            "opts": {
+              "type": "Object",
+              "desc": "Optional options",
+              "required": false,
+              "definition": {
+                "to": {
+                  "type": [ "String", "Object" ],
+                  "desc": "Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop",
+                  "required": false,
+                  "examples": [
+                    "/home/dashboard",
+                    "{ name: 'my-route-name' }"
+                  ]
+                },
+
+                "replace": {
+                  "type": "Boolean",
+                  "desc": "Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop",
+                  "required": false
+                },
+
+                "returnRouterError": {
+                  "type": "Boolean",
+                  "desc": "Return the router error, if any; Otherwise the returned Promise will always fulfill",
+                  "required": false
+                }
+              },
+              "addedIn": "v2.9"
+            }
+          },
+          "returns": {
+            "type": "Promise<any>",
+            "desc": "Returns the router's navigation promise",
+            "__exemption": [ "examples" ],
+            "addedIn": "v2.9"
+          }
         }
       }
     }