quasar 2.8.3 → 2.9.0

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

@@ -37,6 +37,7 @@ export default createComponent({
 
     dense: Boolean,
 
+    toggleAriaLabel: String,
     expandIcon: String,
     expandedIcon: String,
     expandIconClass: [ Array, String, Object ],
@@ -47,6 +48,7 @@ export default createComponent({
 
     expandSeparator: Boolean,
     defaultOpened: Boolean,
+    hideExpandIcon: Boolean,
     expandIconToggle: Boolean,
     switchToggleSide: Boolean,
     denseToggle: Boolean,
@@ -73,8 +75,9 @@ export default createComponent({
     )
 
     const blurTargetRef = ref(null)
+    const targetUid = uid()
 
-    const { hide, toggle } = useModelToggle({ showing })
+    const { show, hide, toggle } = useModelToggle({ showing })
 
     let uniqueId, exitGroup
 
@@ -124,6 +127,28 @@ export default createComponent({
       props.disable !== true && (hasLink.value === true || props.expandIconToggle === true)
     )
 
+    const headerSlotScope = computed(() => ({
+      expanded: showing.value === true,
+      detailsId: props.targetUid,
+      toggle,
+      show,
+      hide
+    }))
+
+    const toggleAriaAttrs = computed(() => {
+      const toggleAriaLabel = props.toggleAriaLabel !== void 0
+        ? props.toggleAriaLabel
+        : $q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
+
+      return {
+        role: 'button',
+        'aria-expanded': showing.value === true ? 'true' : 'false',
+        'aria-owns': targetUid,
+        'aria-controls': targetUid,
+        'aria-label': toggleAriaLabel
+      }
+    })
+
     watch(() => props.group, name => {
       exitGroup !== void 0 && exitGroup()
       name !== void 0 && enterGroup()
@@ -215,6 +240,7 @@ export default createComponent({
       if (activeToggleIcon.value === true) {
         Object.assign(data, {
           tabindex: 0,
+          ...toggleAriaAttrs.value,
           onClick: toggleIcon,
           onKeyup: toggleIconKeyboard
         })
@@ -235,7 +261,7 @@ export default createComponent({
       let child
 
       if (slots.header !== void 0) {
-        child = [].concat(slots.header({ expanded: showing.value === true }))
+        child = [].concat(slots.header(headerSlotScope.value))
       }
       else {
         child = [
@@ -256,9 +282,11 @@ export default createComponent({
         )
       }
 
-      props.disable !== true && child[ props.switchToggleSide === true ? 'unshift' : 'push' ](
-        getToggleIcon()
-      )
+      if (props.disable !== true && props.hideExpandIcon !== true) {
+        child[ props.switchToggleSide === true ? 'unshift' : 'push' ](
+          getToggleIcon()
+        )
+      }
 
       return child
     }
@@ -278,9 +306,9 @@ export default createComponent({
         data.clickable = true
         data.onClick = onHeaderClick
 
-        hasLink.value === true && Object.assign(
+        Object.assign(
           data,
-          linkProps.value
+          hasLink.value === true ? linkProps.value : toggleAriaAttrs.value
         )
       }
 
@@ -292,7 +320,8 @@ export default createComponent({
         h('div', {
           key: 'e-content',
           class: 'q-expansion-item__content relative-position',
-          style: contentStyle.value
+          style: contentStyle.value,
+          id: targetUid
         }, hSlot(slots.default)),
         [ [
           vShow,

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

@@ -33,6 +33,14 @@
       "category": "style"
     },
 
+    "toggle-aria-label": {
+      "type": "String",
+      "desc": "aria-label to be used on the expansion toggle element",
+      "examples": [ "Open details" ],
+      "category": "accessibility",
+      "addedIn": "v2.8.4"
+    },
+
     "label": {
       "type": "String",
       "desc": "Header label (unless using 'header' slot)",
@@ -103,6 +111,13 @@
       "category": "behavior"
     },
 
+    "hide-expand-icon": {
+      "type": "Boolean",
+      "desc": "Do not show the expand icon",
+      "category": "content",
+      "addedIn": "v2.8.4"
+    },
+
     "expand-icon-toggle": {
       "type": "Boolean",
       "desc": "Applies the expansion events to the expand icon only and not to the whole header",
@@ -169,6 +184,58 @@
           "type": "Boolean",
           "desc": "QExpansionItem expanded status",
           "addedIn": "v2.7.6"
+        },
+
+        "detailsId": {
+          "type": "String",
+          "desc": "QExpansionItem details panel id (for use in aria-controls)",
+          "__exemption": [ "examples" ],
+          "addedIn": "v2.8.4"
+        },
+
+        "show": {
+          "type": "Function",
+          "desc": "Triggers component to show",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
+        },
+
+        "hide": {
+          "type": "Function",
+          "desc": "Triggers component to hide",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
+        },
+
+        "toggle": {
+          "type": "Function",
+          "desc": "Triggers component to toggle between show/hide",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
         }
       }
     }

package/src/components/fab/QFab.js

@@ -9,6 +9,7 @@ import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 import { fabKey } from '../../utils/private/symbols.js'
+import uid from '../../utils/uid.js'
 
 const directions = [ 'up', 'right', 'down', 'left' ]
 const alignValues = [ 'left', 'center', 'right' ]
@@ -48,6 +49,7 @@ export default createComponent({
   setup (props, { slots }) {
     const triggerRef = ref(null)
     const showing = ref(props.modelValue === true)
+    const targetUid = uid()
 
     const { proxy: { $q } } = getCurrentInstance()
     const { formClass, labelProps } = useFab(props, showing)
@@ -73,6 +75,21 @@ export default createComponent({
       + ` q-fab__actions--${ showing.value === true ? 'opened' : 'closed' }`
     )
 
+    const actionAttrs = computed(() => {
+      const attrs = {
+        id: targetUid
+      }
+
+      if (showing.value === true) {
+        attrs.role = 'menu'
+      }
+      else {
+        attrs[ 'aria-hidden' ] = 'true'
+      }
+
+      return attrs
+    })
+
     const iconHolderClass = computed(() =>
       'q-fab__icon-holder '
       + ` q-fab__icon-holder--${ showing.value === true ? 'opened' : 'closed' }`
@@ -134,10 +151,12 @@ export default createComponent({
         fab: true,
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
+        'aria-controls': targetUid,
+        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 
-      h('div', { class: actionClass.value }, hSlot(slots.default))
+      h('div', { class: actionClass.value, ...actionAttrs.value }, hSlot(slots.default))
     ])
   }
 })

package/src/components/form/QForm.js

@@ -5,6 +5,7 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formKey } from '../../utils/private/symbols.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 export default createComponent({
   name: 'QForm',
@@ -28,7 +29,6 @@ export default createComponent({
     const registeredComponents = []
 
     function validate (shouldFocus) {
-      const promises = []
       const focus = typeof shouldFocus === 'boolean'
         ? shouldFocus
         : props.noErrorFocus !== true
@@ -39,60 +39,55 @@ export default createComponent({
         emit('validation-' + (res === true ? 'success' : 'error'), ref)
       }
 
-      for (let i = 0; i < registeredComponents.length; i++) {
-        const comp = registeredComponents[ i ]
+      const validateComponent = comp => {
         const valid = comp.validate()
 
-        if (typeof valid.then === 'function') {
-          promises.push(
-            valid.then(
-              valid => ({ valid, comp }),
-              err => ({ valid: false, comp, err })
-            )
+        return typeof valid.then === 'function'
+          ? valid.then(
+            valid => ({ valid, comp }),
+            err => ({ valid: false, comp, err })
           )
-        }
-        else if (valid !== true) {
-          if (props.greedy === false) {
-            emitEvent(false, comp)
-
-            if (focus === true && typeof comp.focus === 'function') {
-              comp.focus()
-            }
-
-            return Promise.resolve(false)
-          }
-
-          promises.push({ valid: false, comp })
-        }
+          : Promise.resolve({ valid, comp })
       }
 
-      if (promises.length === 0) {
-        emitEvent(true)
-        return Promise.resolve(true)
-      }
-
-      return Promise.all(promises).then(res => {
-        const errors = res.filter(r => r.valid !== true)
+      const errorsPromise = props.greedy === true
+        ? Promise
+          .all(registeredComponents.map(validateComponent))
+          .then(res => res.filter(r => r.valid !== true))
+        : registeredComponents
+          .reduce(
+            (acc, comp) => acc.then(() => {
+              return validateComponent(comp).then(r => {
+                if (r.valid === false) { return Promise.reject(r) }
+              })
+            }),
+            Promise.resolve()
+          )
+          .catch(error => [ error ])
 
-        if (errors.length === 0) {
+      return errorsPromise.then(errors => {
+        if (errors === void 0 || errors.length === 0) {
           index === validateIndex && emitEvent(true)
           return true
         }
 
-        const { valid, comp, err } = errors[ 0 ]
-
         // if not outdated already
         if (index === validateIndex) {
-          err !== void 0 && console.error(err)
+          const { comp, err } = errors[ 0 ]
 
+          err !== void 0 && console.error(err)
           emitEvent(false, comp)
 
-          if (
-            focus === true
-            && valid !== true
-            && typeof comp.focus === 'function'
-          ) {
-            comp.focus()
+          if (focus === true) {
+            // Try to focus first mounted and active component
+            const activeError = errors.find(({ comp }) => (
+              typeof comp.focus === 'function'
+              && vmIsDestroyed(comp.$) === false
+            ))
+
+            if (activeError !== void 0) {
+              activeError.comp.focus()
+            }
           }
         }
 

package/src/components/form/QFormChildMixin.js

@@ -28,12 +28,14 @@ export default {
     resetValidation () {}
   },
 
-  created () {
+  mounted () {
+    // register to parent QForm
     const $form = this.$.provides[ formKey ]
     $form !== void 0 && this.disable !== true && $form.bindComponent(this)
   },
 
   beforeUnmount () {
+    // un-register from parent QForm
     const $form = this.$.provides[ formKey ]
     $form !== void 0 && this.disable !== true && $form.unbindComponent(this)
   }

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)
@@ -350,6 +349,7 @@ export default createComponent({
         () => (
           showing.value === true
             ? h('div', {
+              role: 'menu',
               ...attrs,
               ref: innerRef,
               tabindex: -1,

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/page/QPage.js

@@ -45,7 +45,7 @@ export default createComponent({
     })
 
     const classes = computed(() =>
-      `q-page ${ props.padding === true ? ' q-layout-padding' : '' }`
+      `q-page${ props.padding === true ? ' q-layout-padding' : '' }`
     )
 
     return () => h('main', {

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