quasar 2.8.3 → 2.9.0

package/src/components/breadcrumbs/QBreadcrumbsEl.json

@@ -32,5 +32,58 @@
     "default": {
       "desc": "This is where custom content goes, unless 'icon' and 'label' props are not enough"
     }
+  },
+
+  "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/btn/QBtn.js

@@ -26,10 +26,12 @@ export default createComponent({
     ...useBtnProps,
 
     percentage: Number,
-    darkPercentage: Boolean
+    darkPercentage: Boolean,
+
+    onTouchstart: [ Function, Array ]
   },
 
-  emits: [ 'click', 'keydown', 'touchstart', 'mousedown', 'keyup' ],
+  emits: [ 'click', 'keydown', 'mousedown', 'keyup' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
@@ -37,7 +39,7 @@ export default createComponent({
     const {
       classes, style, innerClasses,
       attributes,
-      hasRouterLink, hasLink, linkTag, navigateToRouterLink,
+      hasLink, linkTag, navigateOnClick,
       isActionable
     } = useBtn(props)
 
@@ -72,7 +74,7 @@ export default createComponent({
       if (props.loading === true) {
         return {
           onMousedown: onLoadingEvt,
-          onTouchstartPassive: onLoadingEvt,
+          onTouchstart: onLoadingEvt,
           onClick: onLoadingEvt,
           onKeydown: onLoadingEvt,
           onKeyup: onLoadingEvt
@@ -80,12 +82,21 @@ export default createComponent({
       }
 
       if (isActionable.value === true) {
-        return {
+        const acc = {
           onClick,
           onKeydown,
-          onMousedown,
-          onTouchstart
+          onMousedown
+        }
+
+        if (proxy.$q.platform.has.touch === true) {
+          const suffix = props.onTouchstart !== void 0
+            ? ''
+            : 'Passive'
+
+          acc[ `onTouchstart${ suffix }` ] = onTouchstart
         }
+
+        return acc
       }
 
       return {
@@ -135,18 +146,7 @@ export default createComponent({
         }
       }
 
-      if (hasRouterLink.value === true) {
-        const go = () => {
-          e.__qNavigate = true
-          navigateToRouterLink(e)
-        }
-
-        emit('click', e, go)
-        e.defaultPrevented !== true && go()
-      }
-      else {
-        emit('click', e)
-      }
+      navigateOnClick(e)
     }
 
     function onKeydown (e) {

package/src/components/btn/QBtn.json

@@ -49,17 +49,52 @@
 
   "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 are using route navigation ('to'/'replace' props) and 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 button 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": "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/btn/use-btn.js

@@ -80,7 +80,9 @@ export const useBtnProps = {
 export default function (props) {
   const sizeStyle = useSize(props, defaultSizes)
   const alignClass = useAlign(props)
-  const { hasRouterLink, hasLink, linkTag, linkProps, navigateToRouterLink } = useRouterLink('button')
+  const { hasRouterLink, hasLink, linkTag, linkAttrs, navigateOnClick } = useRouterLink({
+    fallbackTag: 'button'
+  })
 
   const style = computed(() => {
     const obj = props.fab === false && props.fabMini === false
@@ -123,7 +125,7 @@ export default function (props) {
     const acc = { tabindex: tabIndex.value }
 
     if (hasLink.value === true) {
-      Object.assign(acc, linkProps.value)
+      Object.assign(acc, linkAttrs.value)
     }
     else if (formTypes.includes(props.type) === true) {
       acc.type = props.type
@@ -136,6 +138,7 @@ export default function (props) {
       else if (acc.href === void 0) {
         acc.role = 'button'
       }
+
       if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
         acc.type = props.type
       }
@@ -198,10 +201,9 @@ export default function (props) {
     style,
     innerClasses,
     attributes,
-    hasRouterLink,
     hasLink,
     linkTag,
-    navigateToRouterLink,
+    navigateOnClick,
     isActionable
   }
 }

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

@@ -9,6 +9,7 @@ import { useBtnProps } from '../btn/use-btn.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
+import uid from '../../utils/uid.js'
 import { hSlot } from '../../utils/private/render.js'
 
 export default createComponent({
@@ -42,7 +43,9 @@ export default createComponent({
     disableMainBtn: Boolean,
     disableDropdown: Boolean,
 
-    noIconAnimation: Boolean
+    noIconAnimation: Boolean,
+
+    toggleAriaLabel: String
   },
 
   emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
@@ -52,11 +55,15 @@ export default createComponent({
 
     const showing = ref(props.modelValue)
     const menuRef = ref(null)
+    const targetUid = uid()
 
     const attributes = computed(() => {
       const acc = {
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-haspopup': 'true'
+        'aria-haspopup': 'true',
+        'aria-controls': targetUid,
+        'aria-owns': targetUid,
+        'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
       }
 
       if (
@@ -146,6 +153,7 @@ export default createComponent({
       props.disableDropdown !== true && Arrow.push(
         h(QMenu, {
           ref: menuRef,
+          id: targetUid,
           class: props.contentClass,
           style: props.contentStyle,
           cover: props.cover,

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

@@ -119,6 +119,14 @@
       "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
       "examples": [ "[8, 8]", "[5, 10]" ],
       "category": "position"
+    },
+
+    "toggle-aria-label": {
+      "type": "String",
+      "desc": "aria-label to be used on the dropdown toggle element",
+      "examples": [ "Open menu" ],
+      "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.js

@@ -11,7 +11,7 @@ import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { hMergeSlotSafely, hDir } from '../../utils/private/render.js'
 
-const defaultSizes = {
+export const defaultSizes = {
   xs: 8,
   sm: 10,
   md: 14,
@@ -51,6 +51,8 @@ export default createComponent({
     clickable: Boolean,
     removable: Boolean,
 
+    removeAriaLabel: String,
+
     tabindex: [ String, Number ],
     disable: Boolean,
 
@@ -103,7 +105,12 @@ export default createComponent({
     const attributes = computed(() => (
       props.disable === true
         ? { tabindex: -1, 'aria-disabled': 'true' }
-        : { tabindex: props.tabindex || 0 }
+        : {
+            tabindex: props.tabindex || 0,
+            role: 'button',
+            'aria-hidden': 'false',
+            'aria-label': props.removeAriaLabel || $q.lang.label.remove
+          }
     ))
 
     function onKeyup (e) {

package/src/components/chip/QChip.json

@@ -95,6 +95,14 @@
       "extends": "ripple"
     },
 
+    "remove-aria-label": {
+      "type": "String",
+      "desc": "aria-label to be used on the remove icon",
+      "examples": [ "Remove item" ],
+      "category": "accessibility",
+      "addedIn": "v2.8.4"
+    },
+
     "tabindex": {
       "extends": "tabindex"
     },