quasar 1.22.0 → 1.22.2

package/src/components/fab/QFab.js

@@ -73,13 +73,11 @@ export default Vue.extend({
 
     actionsAttrs () {
       const attrs = {
-        id: this.targetUid
+        id: this.targetUid,
+        role: 'menu'
       }
 
-      if (this.showing === true) {
-        attrs.role = 'menu'
-      }
-      else {
+      if (this.showing !== true) {
         attrs['aria-hidden'] = 'true'
       }
 
@@ -95,7 +93,6 @@ export default Vue.extend({
         'aria-expanded': this.showing === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': this.targetUid,
-        'aria-owns': this.targetUid,
         ...this.qAttrs
       }
     },

package/src/components/fab/QFab.sass

@@ -137,7 +137,8 @@
 
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      // needed when rtlcss is enabled
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
 
   &--align-left

package/src/components/fab/QFab.styl

@@ -137,7 +137,8 @@
 
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      // needed when rtlcss is enabled
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
 
   &--align-left

package/src/components/form/QForm.js

@@ -156,7 +156,9 @@ export default Vue.extend({
       addFocusFn(() => {
         if (!this.$el) { return }
 
-        const target = this.$el.querySelector('[autofocus], [data-autofocus]') ||
+        const target = this.$el.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+          this.$el.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+          this.$el.querySelector('[autofocus], [data-autofocus]') ||
           Array.prototype.find.call(this.$el.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })

package/src/components/inner-loading/QInnerLoading.js

@@ -78,11 +78,6 @@ export default Vue.extend({
   },
 
   render (h) {
-    return h('transition', {
-      props: {
-        name: this.transition,
-        appear: true
-      }
-    }, this.__getContent(h))
+    return h('transition', { props: { ...this.transitionProps } }, this.__getContent(h))
   }
 })

package/src/components/input/QInput.js

@@ -145,7 +145,7 @@ export default Vue.extend({
       }
 
       if (this.autogrow === true) {
-        on.animationend = this.__adjustHeight
+        on.animationend = this.__onAnimationend
       }
 
       return on
@@ -242,6 +242,11 @@ export default Vue.extend({
       this.autogrow === true && this.__adjustHeight()
     },
 
+    __onAnimationend (e) {
+      this.qListeners.animationend !== void 0 && this.$emit('animationend', e)
+      this.__adjustHeight()
+    },
+
     __emitValue (val, stopWatcher) {
       this.emitValueFn = () => {
         if (

package/src/components/item/QList.js

@@ -5,8 +5,6 @@ import ListenersMixin from '../../mixins/listeners.js'
 
 import { slot } from '../../utils/private/slot.js'
 
-const attrs = { role: 'list' }
-
 export default Vue.extend({
   name: 'QList',
 
@@ -16,7 +14,12 @@ export default Vue.extend({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   computed: {
@@ -31,9 +34,8 @@ export default Vue.extend({
   },
 
   render (h) {
-    return h('div', {
+    return h(this.tag, {
       class: this.classes,
-      attrs,
       on: { ...this.qListeners }
     }, slot(this, 'default'))
   }

package/src/components/item/QList.json

@@ -1,4 +1,6 @@
 {
+  "mixins": [ "mixins/tag" ],
+
   "meta": {
     "docsUrl": "https://v1.quasar.dev/vue-components/list-and-list-items"
   },
@@ -30,6 +32,12 @@
       "type": "Boolean",
       "desc": "Applies a material design-like padding on top and bottom",
       "category": "content"
+    },
+
+    "tag": {
+      "default": "div",
+      "examples": [ "div", "ul", "ol" ],
+      "addedIn": "v1.22.1"
     }
   },
 

package/src/components/menu/QMenu.js

@@ -140,7 +140,10 @@ export default Vue.extend({
           : void 0
 
         if (node !== void 0 && node.contains(document.activeElement) !== true) {
-          node = node.querySelector('[autofocus], [data-autofocus]') || node
+          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+            node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+            node.querySelector('[autofocus], [data-autofocus]') ||
+            node
           node.focus({ preventScroll: true })
         }
       })
@@ -152,10 +155,10 @@ export default Vue.extend({
         ? document.activeElement
         : void 0
 
-      EscapeKey.register(this, () => {
+      EscapeKey.register(this, escEvt => {
         if (this.persistent !== true) {
           this.$emit('escape-key')
-          this.hide()
+          this.hide(escEvt)
         }
       })
 
@@ -223,7 +226,10 @@ export default Vue.extend({
           evt.qClickOutside !== true
         )
       ) {
-        this.__refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? this.__refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || this.__refocusTarget).focus()
         this.__refocusTarget = void 0
       }
 
@@ -321,7 +327,7 @@ export default Vue.extend({
 
     __renderPortal (h) {
       return h('transition', {
-        props: { name: this.transition }
+        props: { ...this.transitionProps }
       }, [
         this.showing === true ? h('div', {
           ref: 'inner',

package/src/components/scroll-area/QScrollArea.js

@@ -101,7 +101,7 @@ export default Vue.extend({
     horizontalScrollPercentage () {
       const diff = this.scroll.horizontal.size - this.container.horizontal
       if (diff <= 0) { return 0 }
-      const p = between(this.scroll.horizontal.position / diff, 0, 1)
+      const p = between(Math.abs(this.scroll.horizontal.position) / diff, 0, 1)
       return Math.round(p * 10000) / 10000
     },
 
@@ -162,7 +162,7 @@ export default Vue.extend({
       return {
         ...this.thumbStyle,
         ...this.horizontalThumbStyle,
-        left: `${this.horizontalThumbStart}px`,
+        [ this.$q.lang.rtl === true ? 'right' : 'left' ]: `${this.horizontalThumbStart}px`,
         width: `${this.horizontalThumbSize}px`
       }
     },
@@ -251,6 +251,12 @@ export default Vue.extend({
     }
   },
 
+  watch: {
+    '$q.lang.rtl' (rtl) {
+      this.setScrollPosition('horizontal', Math.abs(this.scroll.horizontal.position) * (rtl === true ? -1 : 1))
+    }
+  },
+
   methods: {
     getScrollTarget () {
       return this.$refs.target
@@ -330,7 +336,7 @@ export default Vue.extend({
 
       this.setScrollPosition(
         axis,
-        percentage * (this.scroll[axis].size - this.container[axis]),
+        percentage * (this.scroll[axis].size - this.container[axis]) * (axis === 'horizontal' && this.$q.lang.rtl === true ? -1 : 1),
         duration
       )
     },

package/src/components/scroll-observer/QScrollObserver.js

@@ -32,6 +32,10 @@ export default Vue.extend({
     scrollTarget () {
       this.__unconfigureScrollTarget()
       this.__configureScrollTarget()
+    },
+
+    '$q.lang.rtl' () {
+      this.__emit()
     }
   },
 

package/src/components/select/QSelect.js

@@ -246,6 +246,12 @@ export default Vue.extend({
         .join(', ')
     },
 
+    ariaCurrentValue () {
+      return this.displayValue !== void 0
+        ? this.displayValue
+        : this.selectedString
+    },
+
     sanitizeFn () {
       return this.optionsSanitize === true
         ? () => true
@@ -424,7 +430,6 @@ export default Vue.extend({
         'aria-readonly': this.readonly === true ? 'true' : 'false',
         'aria-autocomplete': this.useInput === true ? 'list' : 'none',
         'aria-expanded': this.menu === true ? 'true' : 'false',
-        'aria-owns': `${this.targetUid}_lb`,
         'aria-controls': `${this.targetUid}_lb`
       }
 
@@ -436,13 +441,11 @@ export default Vue.extend({
     },
 
     listboxAttrs () {
-      const attrs = {
+      return {
         id: `${this.targetUid}_lb`,
         role: 'listbox',
         'aria-multiselectable': this.multiple === true ? 'true' : 'false'
       }
-
-      return attrs
     }
   },
 
@@ -805,7 +808,9 @@ export default Vue.extend({
         this.useInput !== true &&
         e.key !== void 0 &&
         e.key.length === 1 && // printable char
-        e.altKey === e.ctrlKey && // not kbd shortcut
+        e.altKey === false && // not kbd shortcut
+        e.ctrlKey === false && // not kbd shortcut
+        e.metaKey === false && // not kbd shortcut, especially on macOS with Command key
         (e.keyCode !== 32 || this.searchBuffer.length > 0) // space in middle of search
       ) {
         this.menu !== true && this.showPopup(e)
@@ -963,9 +968,7 @@ export default Vue.extend({
       return [
         h('span', {
           domProps: {
-            [this.displayAsText ? 'textContent' : 'innerHTML']: this.displayValue !== void 0
-              ? this.displayValue
-              : this.selectedString
+            [this.displayAsText ? 'textContent' : 'innerHTML']: this.ariaCurrentValue
           }
         })
       ]
@@ -1006,6 +1009,7 @@ export default Vue.extend({
             h('input', {
               key: 'autoinp',
               staticClass: 'q-select__autocomplete-input',
+              domProps: { value: this.ariaCurrentValue },
               attrs: { autocomplete: this.autocomplete, tabindex: -1 },
               on: cache(this, 'autoinp', {
                 keyup: this.__onTargetAutocomplete

package/src/components/select/QSelect.sass

@@ -17,8 +17,8 @@
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px // Safari scrolls on top if 0
+    height: 1px // Safari scrolls on top if 0
     padding: 0
     border: 0
     opacity: 0

package/src/components/select/QSelect.styl

@@ -17,8 +17,8 @@
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px // Safari scrolls on top if 0
+    height: 1px // Safari scrolls on top if 0
     padding: 0
     border: 0
     opacity: 0

package/src/components/tooltip/QTooltip.js

@@ -222,7 +222,7 @@ export default Vue.extend({
 
     __renderPortal (h) {
       return h('transition', {
-        props: { name: this.transition }
+        props: { ...this.transitionProps }
       }, [
         this.showing === true ? h('div', {
           staticClass: 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',

package/src/mixins/mask.js

@@ -190,7 +190,7 @@ export default {
 
       this.computedMask = mask
       this.computedUnmask = val => {
-        const unmaskMatch = unmaskMatcher.exec(val)
+        const unmaskMatch = unmaskMatcher.exec(this.reverseFillMask === true ? val : val.slice(0, mask.length))
         if (unmaskMatch !== null) {
           val = unmaskMatch.slice(1).join('')
         }
@@ -422,6 +422,8 @@ export default {
     },
 
     __onMaskedKeydown (e) {
+      this.qListeners.keydown !== void 0 && this.$emit('keydown', e)
+
       if (shouldIgnoreKey(e) === true) {
         return
       }

package/src/mixins/transition.js

@@ -11,23 +11,22 @@ export default {
     }
   },
 
-  data () {
-    return {
-      transitionState: this.showing
-    }
-  },
+  computed: {
+    transitionProps () {
+      const show = `q-transition--${this.transitionShow || this.defaultTransitionShow}`
+      const hide = `q-transition--${this.transitionHide || this.defaultTransitionHide}`
 
-  watch: {
-    showing (val) {
-      this.transitionShow !== this.transitionHide && this.$nextTick(() => {
-        this.transitionState = val
-      })
-    }
-  },
+      return {
+        appear: true,
 
-  computed: {
-    transition () {
-      return 'q-transition--' + (this.transitionState === true ? this.transitionHide : this.transitionShow)
+        enterClass: `${show}-enter`,
+        enterActiveClass: `${show}-enter-active`,
+        enterToClass: `${show}-enter-to`,
+
+        leaveClass: `${hide}-leave`,
+        leaveActiveClass: `${hide}-leave-active`,
+        leaveToClass: `${hide}-leave-to`
+      }
     }
   }
 }