quasar 1.15.21 → 1.16.1

package/src/components/fab/QFab.styl

@@ -13,18 +13,6 @@
   &--form-square
     border-radius: $generic-border-radius
 
-  &--opened
-    .q-fab__actions
-      opacity: 1
-      transform: scale(1) translate(0, 0)
-      pointer-events: all
-    .q-fab__icon
-      transform: rotate(180deg)
-      opacity: 0
-    .q-fab__active-icon
-      transform: rotate(0deg)
-      opacity: 1
-
   &__icon, &__active-icon
     transition: opacity .4s, transform .4s
   &__icon
@@ -91,6 +79,14 @@
     min-height: 24px
     position: relative
 
+    &--opened
+      .q-fab__icon
+        transform: rotate(180deg)
+        opacity: 0
+      .q-fab__active-icon
+        transform: rotate(0deg)
+        opacity: 1
+
   &__actions
     position: absolute
     opacity: 0
@@ -139,6 +135,11 @@
       left: 50%
       margin-left: -28px
 
+    &--opened
+      opacity: 1
+      transform: scale(1) translate(0, 0)
+      pointer-events: all
+
   &--align-left
     > .q-fab__actions
       &--up, &--down

package/src/components/field/QField.js

@@ -394,7 +394,7 @@ export default Vue.extend({
 
       if (this.hasError === true) {
         if (this.computedErrorMessage !== void 0) {
-          msg = [ h('div', [ this.computedErrorMessage ]) ]
+          msg = [ h('div', { attrs: { role: 'alert' } }, [ this.computedErrorMessage ]) ]
           key = this.computedErrorMessage
         }
         else {

package/src/components/input/QInput.js

@@ -97,6 +97,10 @@ export default Vue.extend({
       return this.type === 'textarea' || this.autogrow === true
     },
 
+    isTypeText () {
+      return this.isTextarea === true || ['text', 'search', 'url', 'tel', 'password'].includes(this.type)
+    },
+
     fieldClass () {
       return `q-${this.isTextarea === true ? 'textarea' : 'input'}` +
         (this.autogrow === true ? ' q-textarea--autogrow' : '')
@@ -208,7 +212,7 @@ export default Vue.extend({
       else {
         this.__emitValue(val)
 
-        if (['text', 'search', 'url', 'tel', 'password'].includes(this.type) && e.target === document.activeElement) {
+        if (this.isTypeText === true && e.target === document.activeElement) {
           const { selectionStart, selectionEnd } = e.target
 
           if (selectionStart !== void 0 && selectionEnd !== void 0) {

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

@@ -132,7 +132,7 @@ export default Vue.extend({
         title = slot(this, 'title', this.title),
         child = this.$scopedSlots.default === void 0
           ? []
-          : this.$scopedSlots.default(this.defaultSlotScope).slice()
+          : [].concat(this.$scopedSlots.default(this.defaultSlotScope))
 
       title && child.unshift(
         h('div', { staticClass: 'q-dialog__title q-mt-sm q-mb-sm' }, [ title ])

package/src/components/radio/QRadio.sass

@@ -8,6 +8,7 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
     left: 25%
     width: 50%
     height: 50%
+    -webkit-print-color-adjust: exact
 
     path
       fill: currentColor

package/src/components/radio/QRadio.styl

@@ -8,6 +8,7 @@ $radio-transition = .22s cubic-bezier(0,0,.2,1) 0ms
     left: 25%
     width: 50%
     height: 50%
+    -webkit-print-color-adjust: exact
 
     path
       fill: currentColor

package/src/components/select/QSelect.js

@@ -284,8 +284,15 @@ export default Vue.extend({
           dark: this.isOptionsDark
         }
 
+        const itemAttrs = {
+          role: 'option',
+          id: `${this.targetUid}_${index}`
+        }
+
         if (disable !== true) {
           this.isOptionSelected(opt) === true && (itemProps.active = true)
+          itemAttrs['aria-selected'] = itemProps.active === true ? 'true' : 'false'
+
           this.optionIndex === index && (itemProps.focused = true)
         }
 
@@ -305,7 +312,8 @@ export default Vue.extend({
           focused: itemProps.focused,
           toggleOption: this.toggleOption,
           setOptionIndex: this.setOptionIndex,
-          itemProps
+          itemProps,
+          itemAttrs
         }
 
         if (options[i] === void 0 || isDeepEqual(option, options[i]) !== true) {
@@ -388,6 +396,23 @@ export default Vue.extend({
       return this.virtualScrollItemSize === void 0
         ? (this.dense === true ? 24 : 48)
         : this.virtualScrollItemSize
+    },
+
+    comboboxAttrs () {
+      return {
+        role: 'combobox',
+        'aria-multiselectable': this.multiple === true ? 'true' : 'false',
+        'aria-expanded': this.menu === true ? 'true' : 'false',
+        'aria-owns': `${this.targetUid}_lb`,
+        'aria-activedescendant': `${this.targetUid}_${this.optionIndex}`
+      }
+    },
+
+    listboxAttrs () {
+      return {
+        role: 'listbox',
+        id: `${this.targetUid}_lb`
+      }
     }
   },
 
@@ -869,7 +894,7 @@ export default Vue.extend({
       }
 
       if (this.$scopedSlots.selected !== void 0) {
-        return this.$scopedSlots.selected().slice()
+        return [].concat(this.$scopedSlots.selected())
       }
 
       if (this.useChips === true) {
@@ -921,7 +946,8 @@ export default Vue.extend({
             staticClass: 'no-outline',
             attrs: {
               id: this.targetUid,
-              tabindex: this.tabindex
+              tabindex: this.tabindex,
+              ...this.comboboxAttrs
             },
             on: cache(this, 'f-tget', {
               keydown: this.__onTargetKeydown,
@@ -981,6 +1007,7 @@ export default Vue.extend({
         : scope => h(QItem, {
           key: scope.index,
           props: scope.itemProps,
+          attrs: scope.itemAttrs,
           on: scope.itemEvents
         }, [
           h(QItemSection, [
@@ -1038,7 +1065,8 @@ export default Vue.extend({
           autocomplete: this.autocomplete,
           'data-autofocus': fromDialog === true ? false : this.autofocus,
           disabled: this.disable === true,
-          readonly: this.readonly === true
+          readonly: this.readonly === true,
+          ...this.comboboxAttrs
         },
         on: this.inputControlEvents
       }
@@ -1249,6 +1277,7 @@ export default Vue.extend({
           transitionHide: this.transitionHide,
           separateClosePopup: true
         },
+        attrs: this.listboxAttrs,
         on: cache(this, 'menu', {
           '&scroll': this.__onVirtualScrollEvt,
           'before-hide': this.__closeMenu,
@@ -1309,6 +1338,7 @@ export default Vue.extend({
           staticClass: 'scroll',
           class: this.menuContentClass,
           style: this.popupContentStyle,
+          attrs: this.listboxAttrs,
           on: cache(this, 'virtMenu', {
             click: prevent,
             '&scroll': this.__onVirtualScrollEvt

package/src/components/toggle/QToggle.sass

@@ -46,6 +46,7 @@ $toggle-transition: .22s cubic-bezier(.4,0,.2,1)
     min-width: 1.4em
     height: 1em
     padding: .325em .3em
+    -webkit-print-color-adjust: exact
 
     &--indet
       .q-toggle__thumb

package/src/components/toggle/QToggle.styl

@@ -46,6 +46,7 @@ $toggle-transition = .22s cubic-bezier(.4,0,.2,1)
     min-width: 1.4em
     height: 1em
     padding: .325em .3em
+    -webkit-print-color-adjust: exact
 
     &--indet
       .q-toggle__thumb

package/src/css/normalize.styl

@@ -160,13 +160,6 @@ progress
 textarea
   overflow: auto
 
-/*
- * Correct the odd appearance of search inputs in Chrome and Safari.
- */
-
-input[type='search']
-  -webkit-appearance: textfield
-
 /*
  * Remove the inner padding and cancel buttons in Chrome on OS X and
  * Safari on OS X.

package/src/mixins/mask.js

@@ -47,6 +47,10 @@ export default {
       this.__updateMaskInternals()
     },
 
+    autogrow () {
+      this.__updateMaskInternals()
+    },
+
     mask (v) {
       if (v !== void 0) {
         this.__updateMaskValue(this.innerValue, true)
@@ -111,7 +115,7 @@ export default {
     __updateMaskInternals () {
       this.hasMask = this.mask !== void 0 &&
         this.mask.length > 0 &&
-        ['text', 'search', 'url', 'tel', 'password'].includes(this.type)
+        (this.autogrow === true || ['textarea', 'text', 'search', 'url', 'tel', 'password'].includes(this.type))
 
       if (this.hasMask === false) {
         this.computedUnmask = void 0

package/src/mixins/validate.js

@@ -67,6 +67,11 @@ export default {
           this.validate()
         }
       }
+    },
+
+    hasError (invalid) {
+      const targetEl = document.getElementById(this.targetUid)
+      targetEl !== null && targetEl.setAttribute('aria-invalid', invalid === true)
     }
   },
 

package/src/utils/slot.js

@@ -6,7 +6,7 @@ export function slot (vm, slotName, otherwise) {
 
 export function uniqueSlot (vm, slotName, otherwise) {
   return vm.$scopedSlots[slotName] !== void 0
-    ? vm.$scopedSlots[slotName]().slice()
+    ? [].concat(vm.$scopedSlots[slotName]())
     : otherwise
 }