quasar 1.22.0 → 1.22.1

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.22.0
+ * Quasar Framework v1.22.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -3321,8 +3321,8 @@ body.desktop
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px 
+    height: 1px 
     padding: 0
     border: 0
     opacity: 0

package/dist/quasar.styl

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.22.0
+ * Quasar Framework v1.22.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -3368,8 +3368,8 @@ body.desktop
   &__autocomplete-input
     position: absolute
     outline: 0 !important
-    width: 0
-    height: 0
+    width: 1px 
+    height: 1px 
     padding: 0
     border: 0
     opacity: 0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.22.0
+ * Quasar Framework v1.22.1
  * (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.1";
 
   /* eslint-disable no-useless-escape */
 
@@ -4135,25 +4135,22 @@
       }
     },
 
-    data: function data () {
-      return {
-        transitionState: this.showing
-      }
-    },
+    computed: {
+      transitionProps: function transitionProps () {
+        var show = "q-transition--" + (this.transitionShow || this.defaultTransitionShow);
+        var hide = "q-transition--" + (this.transitionHide || this.defaultTransitionHide);
 
-    watch: {
-      showing: function showing (val) {
-        var this$1 = this;
+        return {
+          appear: true,
 
-        this.transitionShow !== this.transitionHide && this.$nextTick(function () {
-          this$1.transitionState = val;
-        });
-      }
-    },
+          enterClass: (show + "-enter"),
+          enterActiveClass: (show + "-enter-active"),
+          enterToClass: (show + "-enter-to"),
 
-    computed: {
-      transition: function transition () {
-        return 'q-transition--' + (this.transitionState === true ? this.transitionHide : this.transitionShow)
+          leaveClass: (hide + "-leave"),
+          leaveActiveClass: (hide + "-leave-active"),
+          leaveToClass: (hide + "-leave-to")
+        }
       }
     }
   };
@@ -5659,7 +5656,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 });
           }
         });
@@ -5846,7 +5846,7 @@
 
       __renderPortal: function __renderPortal (h) {
         return h('transition', {
-          props: { name: this.transition }
+          props: Object.assign({}, this.transitionProps)
         }, [
           this.showing === true ? h('div', {
             ref: 'inner',
@@ -15079,7 +15079,7 @@
     left: 'fixed-left items-center'
   };
 
-  var transitions = {
+  var defaultTransitions = {
     standard: ['scale', 'scale'],
     top: ['slide-down', 'slide-up'],
     bottom: ['slide-up', 'slide-down'],
@@ -15087,11 +15087,15 @@
     left: ['slide-right', 'slide-left']
   };
 
+  var backdropAttrs = Object.assign({}, ariaHidden,
+    {tabindex: -1});
+
   var QDialog = Vue.extend({
     name: 'QDialog',
 
     mixins: [
       AttrsMixin,
+      TransitionMixin,
       HistoryMixin,
       TimeoutMixin,
       ModelToggleMixin,
@@ -15132,22 +15136,11 @@
 
     data: function data () {
       return {
-        transitionState: this.showing,
         animating: false
       }
     },
 
     watch: {
-      showing: function showing (val) {
-        var this$1 = this;
-
-        if (this.transitionShowComputed !== this.transitionHideComputed) {
-          this.$nextTick(function () {
-            this$1.transitionState = val;
-          });
-        }
-      },
-
       maximized: function maximized (state) {
         this.showing === true && this.__updateMaximized(state);
       },
@@ -15168,18 +15161,12 @@
           (this.square === true ? ' q-dialog__inner--square' : '')
       },
 
-      transitionShowComputed: function transitionShowComputed () {
-        return 'q-transition--' + (this.transitionShow === void 0 ? transitions[this.position][0] : this.transitionShow)
-      },
-
-      transitionHideComputed: function transitionHideComputed () {
-        return 'q-transition--' + (this.transitionHide === void 0 ? transitions[this.position][1] : this.transitionHide)
+      defaultTransitionShow: function defaultTransitionShow () {
+        return defaultTransitions[this.position][0]
       },
 
-      transition: function transition () {
-        return this.transitionState === true
-          ? this.transitionHideComputed
-          : this.transitionShowComputed
+      defaultTransitionHide: function defaultTransitionHide () {
+        return defaultTransitions[this.position][1]
       },
 
       useBackdrop: function useBackdrop () {
@@ -15224,13 +15211,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: function shake () {
-        this.focus();
+      shake: function shake (refocusTarget) {
+        if (refocusTarget && typeof refocusTarget.focus === 'function') {
+          refocusTarget.focus({ preventScroll: true });
+        }
+        else {
+          this.focus();
+        }
+
         this.$emit('shake');
 
         var node = this.__getInnerNode();
@@ -15397,7 +15394,7 @@
           this.hide(e);
         }
         else if (this.noShake !== true) {
-          this.shake();
+          this.shake(e.relatedTarget);
         }
       },
 
@@ -15424,15 +15421,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: Object.assign({}, this.transitionProps)
           }, [
             this.showing === true ? h('div', {
               ref: 'inner',
@@ -16393,7 +16390,7 @@
 
       __renderPortal: function __renderPortal (h) {
         return h('transition', {
-          props: { name: this.transition }
+          props: Object.assign({}, this.transitionProps)
         }, [
           this.showing === true ? h('div', {
             staticClass: 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
@@ -16426,7 +16423,12 @@
       bordered: Boolean,
       dense: Boolean,
       separator: Boolean,
-      padding: Boolean
+      padding: Boolean,
+
+      tag: {
+        type: String,
+        default: 'div'
+      }
     },
 
     computed: {
@@ -16441,7 +16443,7 @@
     },
 
     render: function render (h) {
-      return h('div', {
+      return h(this.tag, {
         class: this.classes,
         attrs: attrs$4,
         on: Object.assign({}, this.qListeners)
@@ -20556,7 +20558,9 @@
         addFocusFn(function () {
           if (!this$1.$el) { return }
 
-          var target = this$1.$el.querySelector('[autofocus], [data-autofocus]') ||
+          var target = this$1.$el.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]') ||
+            this$1.$el.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]') ||
+            this$1.$el.querySelector('[autofocus], [data-autofocus]') ||
             Array.prototype.find.call(this$1.$el.querySelectorAll('[tabindex]'), function (el) { return el.tabIndex > -1; });
 
           target !== null && target !== void 0 && target.focus({ preventScroll: true });
@@ -21398,12 +21402,7 @@
     },
 
     render: function render (h) {
-      return h('transition', {
-        props: {
-          name: this.transition,
-          appear: true
-        }
-      }, this.__getContent(h))
+      return h('transition', { props: Object.assign({}, this.transitionProps) }, this.__getContent(h))
     }
   });
 
@@ -21599,7 +21598,7 @@
 
         this.computedMask = mask;
         this.computedUnmask = function (val) {
-          var unmaskMatch = unmaskMatcher.exec(val);
+          var unmaskMatch = unmaskMatcher.exec(this$1.reverseFillMask === true ? val : val.slice(0, mask.length));
           if (unmaskMatch !== null) {
             val = unmaskMatch.slice(1).join('');
           }
@@ -22866,6 +22865,10 @@
       scrollTarget: function scrollTarget () {
         this.__unconfigureScrollTarget();
         this.__configureScrollTarget();
+      },
+
+      '$q.lang.rtl': function $q_lang_rtl () {
+        this.__emit();
       }
     },
 
@@ -26264,7 +26267,7 @@
       horizontalScrollPercentage: function horizontalScrollPercentage () {
         var diff = this.scroll.horizontal.size - this.container.horizontal;
         if (diff <= 0) { return 0 }
-        var p = between(this.scroll.horizontal.position / diff, 0, 1);
+        var p = between(Math.abs(this.scroll.horizontal.position) / diff, 0, 1);
         return Math.round(p * 10000) / 10000
       },
 
@@ -26320,10 +26323,12 @@
       },
 
       horizontalStyle: function horizontalStyle () {
+        var obj;
+
         return Object.assign({}, this.thumbStyle,
           this.horizontalThumbStyle,
-          {left: ((this.horizontalThumbStart) + "px"),
-          width: ((this.horizontalThumbSize) + "px")})
+          ( obj = {}, obj[ this.$q.lang.rtl === true ? 'right' : 'left' ] = ((this.horizontalThumbStart) + "px"), obj ),
+          {width: ((this.horizontalThumbSize) + "px")})
       },
 
       verticalThumbClass: function verticalThumbClass () {
@@ -26410,6 +26415,12 @@
       }
     },
 
+    watch: {
+      '$q.lang.rtl': function $q_lang_rtl (rtl) {
+        this.setScrollPosition('horizontal', Math.abs(this.scroll.horizontal.position) * (rtl === true ? -1 : 1));
+      }
+    },
+
     methods: {
       getScrollTarget: function getScrollTarget () {
         return this.$refs.target
@@ -26495,7 +26506,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
         );
       },
@@ -39198,7 +39209,9 @@
               class: action.classes,
               attrs: attrsGridItem,
               on: {
-                click: function () { return this$1.onOk(action); },
+                click: function () {
+                  this$1.onOk(action);
+                },
                 keyup: function (e) {
                   e.keyCode === 13 && this$1.onOk(action);
                 }
@@ -39239,9 +39252,8 @@
                 dark: this$1.isDark
               },
               on: {
-                click: function () { return this$1.onOk(action); },
-                keyup: function (e) {
-                  e.keyCode === 13 && this$1.onOk(action);
+                click: function () {
+                  this$1.onOk(action);
                 }
               }
             }, [