quasar 1.22.0 → 1.22.2

package/dist/quasar.umd.modern.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.22.0
+ * Quasar Framework v1.22.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -12,7 +12,7 @@
 
   Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
 
-  var version = "1.22.0";
+  var version = "1.22.2";
 
   /* eslint-disable no-useless-escape */
 
@@ -4028,23 +4028,22 @@
       }
     },
 
-    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`
+        }
       }
     }
   };
@@ -5506,7 +5505,10 @@
             : 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 });
           }
         });
@@ -5518,10 +5520,10 @@
           ? document.activeElement
           : void 0;
 
-        EscapeKey.register(this, () => {
+        EscapeKey.register(this, escEvt => {
           if (this.persistent !== true) {
             this.$emit('escape-key');
-            this.hide();
+            this.hide(escEvt);
           }
         });
 
@@ -5589,7 +5591,10 @@
             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;
         }
 
@@ -5687,7 +5692,7 @@
 
       __renderPortal (h) {
         return h('transition', {
-          props: { name: this.transition }
+          props: { ...this.transitionProps }
         }, [
           this.showing === true ? h('div', {
             ref: 'inner',
@@ -5868,7 +5873,6 @@
         'aria-expanded': this.showing === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': this.targetUid,
-        'aria-owns': this.targetUid,
         'aria-label': this.toggleAriaLabel || this.$q.lang.label[ this.showing === true ? 'collapse' : 'expand' ](this.label)
       };
 
@@ -13169,7 +13173,9 @@
       },
 
       view () {
-        this.$refs.blurTarget !== void 0 && this.$refs.blurTarget.focus();
+        if (this.$refs.blurTarget !== void 0 && this.$el.contains(document.activeElement) === true) {
+          this.$refs.blurTarget.focus();
+        }
       },
 
       'viewModel.year' (year) {
@@ -14771,7 +14777,7 @@
     left: 'fixed-left items-center'
   };
 
-  const transitions = {
+  const defaultTransitions = {
     standard: ['scale', 'scale'],
     top: ['slide-down', 'slide-up'],
     bottom: ['slide-up', 'slide-down'],
@@ -14779,11 +14785,17 @@
     left: ['slide-right', 'slide-left']
   };
 
+  const backdropAttrs = {
+    ...ariaHidden,
+    tabindex: -1
+  };
+
   var QDialog = Vue.extend({
     name: 'QDialog',
 
     mixins: [
       AttrsMixin,
+      TransitionMixin,
       HistoryMixin,
       TimeoutMixin,
       ModelToggleMixin,
@@ -14824,20 +14836,11 @@
 
     data () {
       return {
-        transitionState: this.showing,
         animating: false
       }
     },
 
     watch: {
-      showing (val) {
-        if (this.transitionShowComputed !== this.transitionHideComputed) {
-          this.$nextTick(() => {
-            this.transitionState = val;
-          });
-        }
-      },
-
       maximized (state) {
         this.showing === true && this.__updateMaximized(state);
       },
@@ -14858,18 +14861,12 @@
           (this.square === true ? ' q-dialog__inner--square' : '')
       },
 
-      transitionShowComputed () {
-        return 'q-transition--' + (this.transitionShow === void 0 ? transitions[this.position][0] : this.transitionShow)
-      },
-
-      transitionHideComputed () {
-        return 'q-transition--' + (this.transitionHide === void 0 ? transitions[this.position][1] : this.transitionHide)
+      defaultTransitionShow () {
+        return defaultTransitions[this.position][0]
       },
 
-      transition () {
-        return this.transitionState === true
-          ? this.transitionHideComputed
-          : this.transitionShowComputed
+      defaultTransitionHide () {
+        return defaultTransitions[this.position][1]
       },
 
       useBackdrop () {
@@ -14916,13 +14913,23 @@
             return
           }
 
-          node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node;
+          node = (selector !== '' ? node.querySelector(selector) : null) ||
+            node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+            node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+            node.querySelector('[autofocus], [data-autofocus]') ||
+            node;
           node.focus({ preventScroll: true });
         });
       },
 
-      shake () {
-        this.focus();
+      shake (focusTarget) {
+        if (focusTarget && typeof focusTarget.focus === 'function') {
+          focusTarget.focus({ preventScroll: true });
+        }
+        else {
+          this.focus();
+        }
+
         this.$emit('shake');
 
         const node = this.__getInnerNode();
@@ -14954,14 +14961,14 @@
         this.$el.dispatchEvent(create('popup-show', { bubbles: true }));
         this.__updateMaximized(this.maximized);
 
-        EscapeKey.register(this, () => {
+        EscapeKey.register(this, escEvt => {
           if (this.seamless !== true) {
             if (this.persistent === true || this.noEscDismiss === true) {
               this.maximized !== true && this.noShake !== true && this.shake();
             }
             else {
               this.$emit('escape-key');
-              this.hide();
+              this.hide(escEvt);
             }
           }
         });
@@ -15020,7 +15027,10 @@
 
         // check null for IE
         if (this.__refocusTarget !== void 0 && this.__refocusTarget !== null) {
-          this.__refocusTarget.focus(evt);
+          ((evt && evt.type.indexOf('key') === 0
+            ? this.__refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+            : void 0
+          ) || this.__refocusTarget).focus();
           this.__refocusTarget = void 0;
         }
 
@@ -15084,7 +15094,7 @@
           this.hide(e);
         }
         else if (this.noShake !== true) {
-          this.shake();
+          this.shake(e.relatedTarget);
         }
       },
 
@@ -15111,15 +15121,15 @@
           }, this.useBackdrop === true ? [
             h('div', {
               staticClass: 'q-dialog__backdrop fixed-full',
-              attrs: ariaHidden,
+              attrs: backdropAttrs,
               on: cache(this, 'bkdrop', {
-                click: this.__onBackdropClick
+                focusin: this.__onBackdropClick
               })
             })
           ] : null),
 
           h('transition', {
-            props: { name: this.transition }
+            props: { ...this.transitionProps }
           }, [
             this.showing === true ? h('div', {
               ref: 'inner',
@@ -16062,7 +16072,7 @@
 
       __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',
@@ -16084,8 +16094,6 @@
     }
   });
 
-  const attrs$4 = { role: 'list' };
-
   var QList = Vue.extend({
     name: 'QList',
 
@@ -16095,7 +16103,12 @@
       bordered: Boolean,
       dense: Boolean,
       separator: Boolean,
-      padding: Boolean
+      padding: Boolean,
+
+      tag: {
+        type: String,
+        default: 'div'
+      }
     },
 
     computed: {
@@ -16110,9 +16123,8 @@
     },
 
     render (h) {
-      return h('div', {
+      return h(this.tag, {
         class: this.classes,
-        attrs: attrs$4,
         on: { ...this.qListeners }
       }, slot(this, 'default'))
     }
@@ -17937,7 +17949,6 @@
         return {
           role: 'button',
           'aria-expanded': this.showing === true ? 'true' : 'false',
-          'aria-owns': this.targetUid,
           'aria-controls': this.targetUid,
           'aria-label': toggleAriaLabel
         }
@@ -18286,13 +18297,11 @@
 
       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';
         }
 
@@ -18308,7 +18317,6 @@
           'aria-expanded': this.showing === true ? 'true' : 'false',
           'aria-haspopup': 'true',
           'aria-controls': this.targetUid,
-          'aria-owns': this.targetUid,
           ...this.qAttrs
         }
       },
@@ -20219,7 +20227,9 @@
         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 });
@@ -21054,12 +21064,7 @@
     },
 
     render (h) {
-      return h('transition', {
-        props: {
-          name: this.transition,
-          appear: true
-        }
-      }, this.__getContent(h))
+      return h('transition', { props: { ...this.transitionProps } }, this.__getContent(h))
     }
   });
 
@@ -21253,7 +21258,7 @@
 
         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('');
           }
@@ -21485,6 +21490,8 @@
       },
 
       __onMaskedKeydown (e) {
+        this.qListeners.keydown !== void 0 && this.$emit('keydown', e);
+
         if (shouldIgnoreKey(e) === true) {
           return
         }
@@ -21766,7 +21773,7 @@
         }
 
         if (this.autogrow === true) {
-          on.animationend = this.__adjustHeight;
+          on.animationend = this.__onAnimationend;
         }
 
         return on
@@ -21863,6 +21870,11 @@
         this.autogrow === true && this.__adjustHeight();
       },
 
+      __onAnimationend (e) {
+        this.qListeners.animationend !== void 0 && this.$emit('animationend', e);
+        this.__adjustHeight();
+      },
+
       __emitValue (val, stopWatcher) {
         this.emitValueFn = () => {
           if (
@@ -22504,6 +22516,10 @@
       scrollTarget () {
         this.__unconfigureScrollTarget();
         this.__configureScrollTarget();
+      },
+
+      '$q.lang.rtl' () {
+        this.__emit();
       }
     },
 
@@ -25866,7 +25882,7 @@
       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
       },
 
@@ -25927,7 +25943,7 @@
         return {
           ...this.thumbStyle,
           ...this.horizontalThumbStyle,
-          left: `${this.horizontalThumbStart}px`,
+          [ this.$q.lang.rtl === true ? 'right' : 'left' ]: `${this.horizontalThumbStart}px`,
           width: `${this.horizontalThumbSize}px`
         }
       },
@@ -26016,6 +26032,12 @@
       }
     },
 
+    watch: {
+      '$q.lang.rtl' (rtl) {
+        this.setScrollPosition('horizontal', Math.abs(this.scroll.horizontal.position) * (rtl === true ? -1 : 1));
+      }
+    },
+
     methods: {
       getScrollTarget () {
         return this.$refs.target
@@ -26095,7 +26117,7 @@
 
         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
         );
       },
@@ -27282,6 +27304,12 @@
           .join(', ')
       },
 
+      ariaCurrentValue () {
+        return this.displayValue !== void 0
+          ? this.displayValue
+          : this.selectedString
+      },
+
       sanitizeFn () {
         return this.optionsSanitize === true
           ? () => true
@@ -27460,7 +27488,6 @@
           '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`
         };
 
@@ -27472,13 +27499,11 @@
       },
 
       listboxAttrs () {
-        const attrs = {
+        return {
           id: `${this.targetUid}_lb`,
           role: 'listbox',
           'aria-multiselectable': this.multiple === true ? 'true' : 'false'
-        };
-
-        return attrs
+        }
       }
     },
 
@@ -27841,7 +27866,9 @@
           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);
@@ -27999,9 +28026,7 @@
         return [
           h('span', {
             domProps: {
-              [this.displayAsText ? 'textContent' : 'innerHTML']: this.displayValue !== void 0
-                ? this.displayValue
-                : this.selectedString
+              [this.displayAsText ? 'textContent' : 'innerHTML']: this.ariaCurrentValue
             }
           })
         ]
@@ -28042,6 +28067,7 @@
               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
@@ -31635,7 +31661,7 @@
     }
   });
 
-  const attrs$5 = { role: 'tabpanel' };
+  const attrs$4 = { role: 'tabpanel' };
 
   const StepWrapper = Vue.extend({
     name: 'QStepWrapper',
@@ -31732,7 +31758,7 @@
         'div',
         {
           staticClass: 'q-stepper__step',
-          attrs: attrs$5,
+          attrs: attrs$4,
           on: this.onEvents
         },
         vertical === true
@@ -34796,7 +34822,7 @@
     }
   });
 
-  const attrs$6 = { role: 'toolbar' };
+  const attrs$5 = { role: 'toolbar' };
 
   var QToolbar = Vue.extend({
     name: 'QToolbar',
@@ -34811,7 +34837,7 @@
       return h('div', {
         staticClass: 'q-toolbar row no-wrap items-center',
         class: this.inset ? 'q-toolbar--inset' : null,
-        attrs: attrs$6,
+        attrs: attrs$5,
         on: { ...this.qListeners }
       }, slot(this, 'default'))
     }
@@ -38695,7 +38721,9 @@
               class: action.classes,
               attrs: attrsGridItem,
               on: {
-                click: () => this.onOk(action),
+                click: () => {
+                  this.onOk(action);
+                },
                 keyup: e => {
                   e.keyCode === 13 && this.onOk(action);
                 }
@@ -38734,9 +38762,8 @@
                 dark: this.isDark
               },
               on: {
-                click: () => this.onOk(action),
-                keyup: e => {
-                  e.keyCode === 13 && this.onOk(action);
+                click: () => {
+                  this.onOk(action);
                 }
               }
             }, [