quasar 1.17.1 → 1.17.2

package/dist/quasar.umd.modern.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.17.1
+ * Quasar Framework v1.17.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.17.1";
+  var version = "1.17.2";
 
   /* eslint-disable no-useless-escape */
 
@@ -1944,22 +1944,22 @@
 
   const
     xhr = isSSR ? null : XMLHttpRequest,
-    send = isSSR ? null : xhr.prototype.send,
-    stackStart = [],
-    stackStop = [];
+    open = isSSR ? null : xhr.prototype.open,
+    positionValues = [ 'top', 'right', 'bottom', 'left' ];
 
+  let stack = [];
   let highjackCount = 0;
 
   function translate ({ p, pos, active, horiz, reverse, dir }) {
     let x = 1, y = 1;
 
-    if (horiz) {
-      if (reverse) { x = -1; }
+    if (horiz === true) {
+      if (reverse === true) { x = -1; }
       if (pos === 'bottom') { y = -1; }
       return { transform: `translate3d(${x * (p - 100)}%,${active ? 0 : y * -200}%,0)` }
     }
 
-    if (reverse) { y = -1; }
+    if (reverse === true) { y = -1; }
     if (pos === 'right') { x = -1; }
     return { transform: `translate3d(${active ? 0 : dir * x * -200}%,${y * (p - 100)}%,0)` }
   }
@@ -1985,32 +1985,46 @@
     return between(p + amount, 0, 100)
   }
 
-  function highjackAjax (start, stop) {
-    stackStart.push(start);
-    stackStop.push(stop);
-
+  function highjackAjax (stackEntry) {
     highjackCount++;
 
+    stack.push(stackEntry);
+
     if (highjackCount > 1) { return }
 
-    function endHandler () {
-      stackStop.forEach(fn => { fn(); });
-    }
+    xhr.prototype.open = function (_, url) {
+      const stopStack = [];
+
+      const loadStart = () => {
+        stack.forEach(entry => {
+          const hijackFilter = entry.getHijackFilter();
+          if (
+            hijackFilter === null ||
+            hijackFilter(url) === true
+          ) {
+            entry.start();
+            stopStack.push(entry.stop);
+          }
+        });
+      };
 
-    xhr.prototype.send = function (/* ...args */) {
-      stackStart.forEach(fn => { fn(); });
-      this.addEventListener('loadend', endHandler, false);
-      send.apply(this, arguments);
+      const loadEnd = () => {
+        stopStack.forEach(stop => { stop(); });
+      };
+
+      this.addEventListener('loadstart', loadStart, { once: true });
+      this.addEventListener('loadend', loadEnd, { once: true });
+
+      open.apply(this, arguments);
     };
   }
 
-  function restoreAjax (start, stop) {
-    stackStart.splice(stackStart.indexOf(start), 1);
-    stackStop.splice(stackStop.indexOf(stop), 1);
+  function restoreAjax (start) {
+    stack = stack.filter(entry => entry.start !== start);
 
     highjackCount = Math.max(0, highjackCount - 1);
     if (!highjackCount) {
-      xhr.prototype.send = send;
+      xhr.prototype.open = open;
     }
   }
 
@@ -2021,15 +2035,19 @@
       position: {
         type: String,
         default: 'top',
-        validator: val => ['top', 'right', 'bottom', 'left'].includes(val)
+        validator: val => positionValues.includes(val)
       },
+
       size: {
         type: String,
         default: '2px'
       },
+
       color: String,
+      reverse: Boolean,
+
       skipHijack: Boolean,
-      reverse: Boolean
+      hijackFilter: Function
     },
 
     data () {
@@ -2057,7 +2075,7 @@
           active,
           horiz: this.horizontal,
           reverse: this.$q.lang.rtl === true && ['top', 'bottom'].includes(this.position)
-            ? !this.reverse
+            ? this.reverse === false
             : this.reverse,
           dir: this.$q.lang.rtl === true ? -1 : 1
         });
@@ -2162,13 +2180,17 @@
     mounted () {
       if (this.skipHijack !== true) {
         this.hijacked = true;
-        highjackAjax(this.start, this.stop);
+        highjackAjax({
+          start: this.start,
+          stop: this.stop,
+          getHijackFilter: () => this.hijackFilter || null
+        });
       }
     },
 
     beforeDestroy () {
       clearTimeout(this.timer);
-      this.hijacked === true && restoreAjax(this.start, this.stop);
+      this.hijacked === true && restoreAjax(this.start);
     },
 
     render (h) {
@@ -2254,6 +2276,8 @@
       : slot
   }
 
+  const defaultViewBox = '0 0 24 24';
+
   const sameFn = i => i;
   const ionFn = i => `ionicons ${i}`;
 
@@ -2314,10 +2338,7 @@
         let icon = this.name;
 
         if (!icon) {
-          return {
-            none: true,
-            cls: this.classes
-          }
+          return { none: true }
         }
 
         if (this.$q.iconMapFn !== void 0) {
@@ -2328,7 +2349,7 @@
             }
             else {
               return {
-                cls: res.cls + ' ' + this.classes,
+                cls: res.cls,
                 content: res.content !== void 0
                   ? res.content
                   : ' '
@@ -2338,41 +2359,35 @@
         }
 
         if (mRE.test(icon) === true) {
-          const [ def, viewBox ] = icon.split('|');
+          const [ def, viewBox = defaultViewBox ] = icon.split('|');
 
           return {
             svg: true,
-            cls: this.classes,
+            viewBox,
             nodes: def.split('&&').map(path => {
               const [ d, style, transform ] = path.split('@@');
               return this.$createElement('path', {
-                attrs: {
-                  d,
-                  transform
-                },
+                attrs: { d, transform },
                 style
               })
-            }),
-            viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+            })
           }
         }
 
         if (imgRE.test(icon) === true) {
           return {
             img: true,
-            cls: this.classes,
             src: icon.substring(4)
           }
         }
 
         if (svgUseRE.test(icon) === true) {
-          const [ def, viewBox ] = icon.split('|');
+          const [ def, viewBox = defaultViewBox ] = icon.split('|');
 
           return {
             svguse: true,
-            cls: this.classes,
             src: def.substring(7),
-            viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+            viewBox
           }
         }
 
@@ -2406,7 +2421,7 @@
         }
 
         return {
-          cls: cls + ' ' + this.classes,
+          cls,
           content
         }
       }
@@ -2414,7 +2429,7 @@
 
     render (h) {
       const data = {
-        class: this.type.cls,
+        class: this.classes,
         style: this.sizeStyle,
         on: { ...this.qListeners },
         attrs: {
@@ -2428,25 +2443,44 @@
       }
 
       if (this.type.img === true) {
-        data.attrs.src = this.type.src;
-        return h('img', data)
+        return h('div', data, mergeSlot([
+          h('img', {
+            class: this.type.cls,
+            attrs: { src: this.type.src }
+          })
+        ], this, 'default'))
       }
 
       if (this.type.svg === true) {
-        data.attrs.focusable = 'false'; /* needed for IE11 */
-        data.attrs.viewBox = this.type.viewBox;
-
-        return h('svg', data, mergeSlot(this.type.nodes, this, 'default'))
+        return h('div', data, mergeSlot([
+          h('svg', {
+            class: this.type.cls,
+            attrs: {
+              viewBox: this.type.viewBox,
+              focusable: 'false' /* needed for IE11 */
+            }
+          }, this.type.nodes)
+        ], this, 'default'))
       }
-      if (this.type.svguse === true) {
-        data.attrs.focusable = 'false'; /* needed for IE11 */
-        data.attrs.viewBox = this.type.viewBox;
 
-        return h('svg', data, mergeSlot([
-          h('use', { attrs: { 'xlink:href': this.type.src } })
+      if (this.type.svguse === true) {
+        return h('div', data, mergeSlot([
+          h('svg', {
+            class: this.type.cls,
+            attrs: {
+              viewBox: this.type.viewBox,
+              focusable: 'false' /* needed for IE11 */
+            }
+          }, [
+            h('use', { attrs: { 'xlink:href': this.type.src } })
+          ])
         ], this, 'default'))
       }
 
+      if (this.type.cls !== void 0) {
+        data.class += ' ' + this.type.cls;
+      }
+
       return h(this.tag, data, mergeSlot([
         this.type.content
       ], this, 'default'))
@@ -21964,13 +21998,30 @@
       classes () {
         return 'q-layout q-layout--' +
           (this.container === true ? 'containerized' : 'standard')
+      },
+
+      scrollbarEvtAction () {
+        return this.container !== true && this.scrollbarWidth > 0
+          ? 'add' : 'remove'
       }
     },
 
+    watch: {
+      scrollbarEvtAction: '__updateScrollEvent'
+    },
+
     created () {
       this.instances = {};
     },
 
+    mounted () {
+      this.scrollbarEvtAction === 'add' && this.__updateScrollEvent('add');
+    },
+
+    beforeDestroy () {
+      this.scrollbarEvtAction === 'add' && this.__updateScrollEvent('remove');
+    },
+
     render (h) {
       const layout = h('div', {
         class: this.classes,
@@ -22065,6 +22116,38 @@
             this.scrollbarWidth = width;
           }
         }
+      },
+
+      __updateScrollEvent (action) {
+        if (this.timerScrollbar !== void 0 && action === 'remove') {
+          clearTimeout(this.timerScrollbar);
+          this.__restoreScrollbar();
+        }
+
+        window[`${action}EventListener`]('resize', this.__hideScrollbar);
+      },
+
+      __hideScrollbar () {
+        if (this.timerScrollbar === void 0) {
+          const el = document.body;
+
+          // if it has no scrollbar then there's nothing to do
+          if (el.scrollHeight > this.$q.screen.height) {
+            return
+          }
+
+          el.classList.add('hide-scrollbar');
+        }
+        else {
+          clearTimeout(this.timerScrollbar);
+        }
+
+        this.timerScrollbar = setTimeout(this.__restoreScrollbar, 200);
+      },
+
+      __restoreScrollbar () {
+        this.timerScrollbar = void 0;
+        document.body.classList.remove('hide-scrollbar');
       }
     }
   });