quasar 1.17.1 → 1.17.2

package/dist/types/index.d.ts

@@ -984,14 +984,18 @@ export interface QAjaxBar extends Vue {
      * Color name for component from the Quasar Color Palette
      */
     color? : string
+    /**
+     * Reverse direction of progress
+     */
+    reverse? : boolean
     /**
      * Skip Ajax hijacking (not a reactive prop)
      */
     skipHijack? : boolean
     /**
-     * Reverse direction of progress
+     * Filter which URL should trigger start() + stop()
      */
-    reverse? : boolean
+    hijackFilter? : Function
     /**
      * Notify bar you are waiting for a new process to finish
      * @param speed Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing

package/dist/vetur/quasar-attributes.json

@@ -11,13 +11,17 @@
     "type": "string",
     "description": "Color name for component from the Quasar Color Palette"
   },
+  "q-ajax-bar/reverse": {
+    "type": "boolean",
+    "description": "Reverse direction of progress"
+  },
   "q-ajax-bar/skip-hijack": {
     "type": "boolean",
     "description": "Skip Ajax hijacking (not a reactive prop)"
   },
-  "q-ajax-bar/reverse": {
-    "type": "boolean",
-    "description": "Reverse direction of progress"
+  "q-ajax-bar/hijack-filter": {
+    "type": "function",
+    "description": "Filter which URL should trigger start() + stop()"
   },
   "q-avatar/size": {
     "type": "string",

package/dist/vetur/quasar-tags.json

@@ -4,8 +4,9 @@
       "position",
       "size",
       "color",
+      "reverse",
       "skip-hijack",
-      "reverse"
+      "hijack-filter"
     ],
     "description": ""
   },

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -44,24 +44,33 @@
               "doc-url": "https://v1.quasar.dev/vue-components/ajax-bar"
             },
             {
-              "name": "skip-hijack",
+              "name": "reverse",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Skip Ajax hijacking (not a reactive prop)",
+              "description": "Reverse direction of progress",
               "doc-url": "https://v1.quasar.dev/vue-components/ajax-bar",
               "type": "boolean"
             },
             {
-              "name": "reverse",
+              "name": "skip-hijack",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Reverse direction of progress",
+              "description": "Skip Ajax hijacking (not a reactive prop)",
               "doc-url": "https://v1.quasar.dev/vue-components/ajax-bar",
               "type": "boolean"
+            },
+            {
+              "name": "hijack-filter",
+              "value": {
+                "kind": "expression",
+                "type": "Function"
+              },
+              "description": "Filter which URL should trigger start() + stop()",
+              "doc-url": "https://v1.quasar.dev/vue-components/ajax-bar"
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",

package/src/components/ajax-bar/QAjaxBar.js

@@ -6,22 +6,22 @@ import { ariaHidden } from '../../mixins/attrs'
 
 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)` }
 }
@@ -47,32 +47,46 @@ function inc (p, amount) {
   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
   }
 }
 
@@ -83,15 +97,19 @@ export default Vue.extend({
     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 () {
@@ -119,7 +137,7 @@ export default Vue.extend({
         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
       })
@@ -224,13 +242,17 @@ export default Vue.extend({
   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) {

package/src/components/ajax-bar/QAjaxBar.json

@@ -22,16 +22,34 @@
       "extends": "color"
     },
 
-    "skip-hijack": {
+    "reverse": {
       "type": "Boolean",
-      "desc": "Skip Ajax hijacking (not a reactive prop)",
+      "desc": "Reverse direction of progress",
       "category": "behavior"
     },
 
-    "reverse": {
+    "skip-hijack": {
       "type": "Boolean",
-      "desc": "Reverse direction of progress",
+      "desc": "Skip Ajax hijacking (not a reactive prop)",
       "category": "behavior"
+    },
+
+    "hijack-filter": {
+      "type": "Function",
+      "desc": "Filter which URL should trigger start() + stop()",
+      "params": {
+        "url": {
+          "type": "String",
+          "desc": "The URL being triggered",
+          "examples": [ "https://some.url/path" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "Should the URL received as param trigger start() + stop()?"
+      },
+      "category": "behavior",
+      "addedIn": "v1.17.2"
     }
   },
 

package/src/components/icon/QIcon.js

@@ -6,6 +6,8 @@ import ListenersMixin from '../../mixins/listeners.js'
 
 import { slot, mergeSlot } from '../../utils/slot.js'
 
+const defaultViewBox = '0 0 24 24'
+
 const sameFn = i => i
 const ionFn = i => `ionicons ${i}`
 
@@ -66,10 +68,7 @@ export default Vue.extend({
       let icon = this.name
 
       if (!icon) {
-        return {
-          none: true,
-          cls: this.classes
-        }
+        return { none: true }
       }
 
       if (this.$q.iconMapFn !== void 0) {
@@ -80,7 +79,7 @@ export default Vue.extend({
           }
           else {
             return {
-              cls: res.cls + ' ' + this.classes,
+              cls: res.cls,
               content: res.content !== void 0
                 ? res.content
                 : ' '
@@ -90,41 +89,35 @@ export default Vue.extend({
       }
 
       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
         }
       }
 
@@ -158,7 +151,7 @@ export default Vue.extend({
       }
 
       return {
-        cls: cls + ' ' + this.classes,
+        cls,
         content
       }
     }
@@ -166,7 +159,7 @@ export default Vue.extend({
 
   render (h) {
     const data = {
-      class: this.type.cls,
+      class: this.classes,
       style: this.sizeStyle,
       on: { ...this.qListeners },
       attrs: {
@@ -180,25 +173,44 @@ export default Vue.extend({
     }
 
     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'))

package/src/components/icon/QIcon.sass

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after

package/src/components/icon/QIcon.styl

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after

package/src/components/layout/QLayout.js

@@ -109,13 +109,30 @@ export default Vue.extend({
     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,
@@ -210,6 +227,38 @@ export default Vue.extend({
           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')
     }
   }
 })

package/src/plugins/LoadingBar.json

@@ -10,7 +10,7 @@
     "definition": {
       "...props": {
         "type": "Object",
-        "desc": "QAjaxBar component props",
+        "desc": "QAjaxBar component props, EXCEPT for 'hijack-filter'",
         "__exemption": [ "examples" ]
       }
     }