quasar 2.8.4 → 2.9.1

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.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)
       ]