quasar 2.8.4 → 2.9.0

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -125,7 +125,7 @@
       "type": "String",
       "desc": "aria-label to be used on the dropdown toggle element",
       "examples": [ "Open menu" ],
-      "category": "content",
+      "category": "accessibility",
       "addedIn": "v2.8.4"
     }
   },

package/src/components/checkbox/QCheckbox.js

@@ -11,8 +11,7 @@ const bgNode = h('div', {
 }, [
   h('svg', {
     class: 'q-checkbox__svg fit absolute-full',
-    viewBox: '0 0 24 24',
-    'aria-hidden': 'true'
+    viewBox: '0 0 24 24'
   }, [
     h('path', {
       class: 'q-checkbox__truthy',

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

@@ -211,7 +211,8 @@ export default function (type, getInner) {
     const child = [
       h('div', {
         class: innerClass.value,
-        style: sizeStyle.value
+        style: sizeStyle.value,
+        'aria-hidden': 'true'
       }, inner)
     ]
 

package/src/components/chip/QChip.json

@@ -99,7 +99,7 @@
       "type": "String",
       "desc": "aria-label to be used on the remove icon",
       "examples": [ "Remove item" ],
-      "category": "content",
+      "category": "accessibility",
       "addedIn": "v2.8.4"
     },
 

package/src/components/dialog/QDialog.js

@@ -94,7 +94,7 @@ export default createComponent({
     )
 
     const { preventBodyScroll } = usePreventScroll()
-    const { registerTimeout, removeTimeout } = useTimeout()
+    const { registerTimeout } = useTimeout()
     const { registerTick, removeTick } = useTick()
 
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
@@ -179,8 +179,6 @@ export default createComponent({
     })
 
     function handleShow (evt) {
-      removeTimeout()
-      removeTick()
       addToHistory()
 
       refocusTarget = props.noRefocus === false && document.activeElement !== null
@@ -195,7 +193,11 @@ export default createComponent({
         document.activeElement !== null && document.activeElement.blur()
         registerTick(focus)
       }
+      else {
+        removeTick()
+      }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         if (vm.proxy.$q.platform.is.ios === true) {
           if (props.seamless !== true && document.activeElement) {
@@ -231,7 +233,6 @@ export default createComponent({
     }
 
     function handleHide (evt) {
-      removeTimeout()
       removeTick()
       removeFromHistory()
       cleanup(true)
@@ -243,6 +244,7 @@ export default createComponent({
         refocusTarget = null
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true) // done hiding, now destroy
         animating.value = false

package/src/components/drawer/QDrawer.js

@@ -75,7 +75,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
     const { preventBodyScroll } = usePreventScroll()
-    const { registerTimeout } = useTimeout()
+    const { registerTimeout, removeTimeout } = useTimeout()
 
     const $layout = inject(layoutKey, () => {
       console.error('QDrawer needs to be child of QLayout')
@@ -145,9 +145,12 @@ export default createComponent({
 
       cleanup()
 
-      noEvent !== true && registerTimeout(() => {
-        emit('hide', evt)
-      }, duration)
+      if (noEvent !== true) {
+        registerTimeout(() => { emit('hide', evt) }, duration)
+      }
+      else {
+        removeTimeout()
+      }
     }
 
     const { show, hide } = useModelToggle({

package/src/components/editor/QEditor.json

@@ -312,5 +312,14 @@
         "__exemption": [ "examples" ]
       }
     }
+  },
+
+  "computedProps": {
+    "caret": {
+      "type": "Object",
+      "tsType": "QEditorCaret",
+      "desc": "The current caret state",
+      "__exemption": [ "examples" ]
+    }
   }
 }

package/src/components/expansion-item/QExpansionItem.json

@@ -37,7 +37,7 @@
       "type": "String",
       "desc": "aria-label to be used on the expansion toggle element",
       "examples": [ "Open details" ],
-      "category": "content",
+      "category": "accessibility",
       "addedIn": "v2.8.4"
     },
 

package/src/components/item/QItem.js

@@ -41,7 +41,7 @@ export default createComponent({
     const { proxy: { $q } } = getCurrentInstance()
 
     const isDark = useDark(props, $q)
-    const { hasRouterLink, hasLink, linkProps, linkClass, linkTag, navigateToRouterLink } = useRouterLink()
+    const { hasLink, linkAttrs, linkClass, linkTag, navigateOnClick } = useRouterLink()
 
     const rootRef = ref(null)
     const blurTargetRef = ref(null)
@@ -65,7 +65,7 @@ export default createComponent({
           ? linkClass.value
           : (
               props.active === true
-                ? `${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' } q-item--active`
+                ? ` q-item--active${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' }`
                 : ''
             )
       )
@@ -101,8 +101,7 @@ export default createComponent({
           }
         }
 
-        hasRouterLink.value === true && navigateToRouterLink(e)
-        emit('click', e)
+        navigateOnClick(e)
       }
     }
 
@@ -143,7 +142,7 @@ export default createComponent({
 
       if (isClickable.value === true) {
         data.tabindex = props.tabindex || '0'
-        Object.assign(data, linkProps.value)
+        Object.assign(data, linkAttrs.value)
       }
       else if (isActionable.value === true) {
         data[ 'aria-disabled' ] = 'true'

package/src/components/item/QItem.json

@@ -62,5 +62,58 @@
     "default": {
       "desc": "This is where QItem's content goes"
     }
+  },
+
+  "events": {
+    "click": {
+      "desc": "Emitted when the component is clicked",
+      "params": {
+        "evt": {
+          "extends": "evt",
+          "desc": "JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler"
+        },
+        "go": {
+          "type": "Function",
+          "desc": "Available ONLY if you are using route navigation ('to'/'replace' props); 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,
+          "addedIn": "v2.9",
+          "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
+                }
+              }
+            }
+          },
+          "returns": {
+            "type": "Promise<any>",
+            "desc": "Returns the router's navigation promise",
+            "__exemption": [ "examples" ]
+          }
+        }
+      }
+    }
   }
 }

package/src/components/menu/QMenu.js

@@ -99,7 +99,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
     const { registerTick, removeTick } = useTick()
-    const { registerTimeout, removeTimeout } = useTimeout()
+    const { registerTimeout } = useTimeout()
     const { transition, transitionStyle } = useTransition(props, showing)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
 
@@ -187,9 +187,6 @@ export default createComponent({
     }
 
     function handleShow (evt) {
-      removeTick()
-      removeTimeout()
-
       refocusTarget = props.noRefocus === false
         ? document.activeElement
         : null
@@ -221,11 +218,13 @@ export default createComponent({
         document.activeElement.blur()
       }
 
+      // should removeTick() if this gets removed
       registerTick(() => {
         updatePosition()
         props.noFocus !== true && focus()
       })
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         // required in order to avoid the "double-tap needed" issue
         if ($q.platform.is.ios === true) {
@@ -243,7 +242,6 @@ export default createComponent({
 
     function handleHide (evt) {
       removeTick()
-      removeTimeout()
       hidePortal()
 
       anchorCleanup(true)
@@ -261,6 +259,7 @@ export default createComponent({
         refocusTarget = null
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true) // done hiding, now destroy
         emit('hide', evt)

package/src/components/menu/__tests__/QMenu.spec.js

@@ -80,6 +80,7 @@ describe('Menu API', () => {
             .click()
           cy.dataCy('menu')
             .should('exist')
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.get('body')
             .click(499, 0)
             .wait(300) // Await menu animation otherwise it always passes
@@ -98,6 +99,7 @@ describe('Menu API', () => {
             .click()
           cy.dataCy('menu')
             .should('exist')
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.get('body')
             .type('{esc}')
             .wait(300) // Await menu animation otherwise it always passes
@@ -118,6 +120,7 @@ describe('Menu API', () => {
 
           cy.dataCy('wrapper')
             .click()
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('menu')
             .should('exist')
             .dataCy('keep-open')
@@ -136,6 +139,7 @@ describe('Menu API', () => {
 
           cy.dataCy('wrapper')
             .click()
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('menu')
             .should('exist')
             .dataCy('keep-open')
@@ -161,6 +165,7 @@ describe('Menu API', () => {
             .focus()
             .should('have.focus')
             .click()
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('menu')
             .should('exist')
             .should('have.focus')
@@ -183,6 +188,7 @@ describe('Menu API', () => {
             .focus()
             .should('have.focus')
             .click()
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('menu')
             .should('exist')
             .should('have.focus')
@@ -529,6 +535,7 @@ describe('Menu API', () => {
         let bottom = null
         let left = null
 
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
         cy.dataCy('wrapper')
           .click()
           .wait(300)

package/src/components/popup-edit/QPopupEdit.js

@@ -58,16 +58,13 @@ export default createComponent({
     let validated = false
 
     const scope = computed(() => {
-      const acc = {
+      return injectProp({
         initialValue: initialValue.value,
         validate: props.validate,
         set,
         cancel,
         updatePosition
-      }
-
-      injectProp(acc, 'value', () => currentModel.value, val => { currentModel.value = val })
-      return acc
+      }, 'value', () => currentModel.value, val => { currentModel.value = val })
     })
 
     function set () {

package/src/components/radio/QRadio.js

@@ -15,8 +15,7 @@ import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 const svg = h('svg', {
   key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
-  viewBox: '0 0 24 24',
-  'aria-hidden': 'true'
+  viewBox: '0 0 24 24'
 }, [
   h('path', {
     d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
@@ -161,7 +160,8 @@ export default createComponent({
       const child = [
         h('div', {
           class: innerClass.value,
-          style: sizeStyle.value
+          style: sizeStyle.value,
+          'aria-hidden': 'true'
         }, content)
       ]
 

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/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

@@ -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/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"
+          }
         }
       }
     }