quasar 1.16.2 → 1.17.2

package/src/mixins/virtual-scroll.js

@@ -1,4 +1,5 @@
 import debounce from '../utils/debounce.js'
+import { rtlHasScrollBug } from '../utils/scroll.js'
 
 const aggBucketSize = 1000
 
@@ -11,31 +12,7 @@ const scrollToEdges = [
   'end-force'
 ]
 
-const slice = Array.prototype.slice
-
-let buggyRTL = void 0
-
-// mobile Chrome takes the crown for this
-function detectBuggyRTL () {
-  const scroller = document.createElement('div')
-  const spacer = document.createElement('div')
-
-  scroller.setAttribute('dir', 'rtl')
-  scroller.style.width = '1px'
-  scroller.style.height = '1px'
-  scroller.style.overflow = 'auto'
-
-  spacer.style.width = '1000px'
-  spacer.style.height = '1px'
-
-  document.body.appendChild(scroller)
-  scroller.appendChild(spacer)
-  scroller.scrollLeft = -1000
-
-  buggyRTL = scroller.scrollLeft >= 0
-
-  scroller.remove()
-}
+const filterProto = Array.prototype.filter
 
 function sumFn (acc, h) {
   return acc + h
@@ -65,7 +42,7 @@ function getScrollDetails (
   if (horizontal === true) {
     if (parent === window) {
       details.scrollStart = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
-      details.scrollViewSize += window.innerWidth
+      details.scrollViewSize += document.documentElement.clientWidth
     }
     else {
       details.scrollStart = parentCalc.scrollLeft
@@ -74,13 +51,13 @@ function getScrollDetails (
     details.scrollMaxSize = parentCalc.scrollWidth
 
     if (rtl === true) {
-      details.scrollStart = (buggyRTL === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
+      details.scrollStart = (rtlHasScrollBug() === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
     }
   }
   else {
     if (parent === window) {
       details.scrollStart = window.pageYOffset || window.scrollY || document.body.scrollTop || 0
-      details.scrollViewSize += window.innerHeight
+      details.scrollViewSize += document.documentElement.clientHeight
     }
     else {
       details.scrollStart = parentCalc.scrollTop
@@ -128,10 +105,14 @@ function getScrollDetails (
 }
 
 function setScroll (parent, scroll, horizontal, rtl) {
+  if (scroll === 'end') {
+    scroll = (parent === window ? document.body : parent)[horizontal === true ? 'scrollWidth' : 'scrollHeight']
+  }
+
   if (parent === window) {
     if (horizontal === true) {
       if (rtl === true) {
-        scroll = (buggyRTL === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll
+        scroll = (rtlHasScrollBug() === true ? document.body.scrollWidth - document.documentElement.clientWidth : 0) - scroll
       }
       window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
     }
@@ -141,7 +122,7 @@ function setScroll (parent, scroll, horizontal, rtl) {
   }
   else if (horizontal === true) {
     if (rtl === true) {
-      scroll = (buggyRTL === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
+      scroll = (rtlHasScrollBug() === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
     }
     parent.scrollLeft = scroll
   }
@@ -428,20 +409,17 @@ export default {
       }
 
       const { activeElement } = document
+      const contentEl = this.$refs.content
       if (
         rangeChanged === true &&
-        this.$refs.content !== void 0 &&
-        this.$refs.content !== activeElement &&
-        this.$refs.content.contains(activeElement) === true
+        contentEl !== void 0 &&
+        contentEl !== activeElement &&
+        contentEl.contains(activeElement) === true
       ) {
-        const onBlurFn = () => {
-          this.$refs.content.focus()
-        }
-
-        activeElement.addEventListener('blur', onBlurFn, true)
+        contentEl.addEventListener('focusout', this.__onBlurRefocusFn)
 
-        requestAnimationFrame(() => {
-          activeElement.removeEventListener('blur', onBlurFn, true)
+        setTimeout(() => {
+          contentEl !== void 0 && contentEl.removeEventListener('focusout', this.__onBlurRefocusFn)
         })
       }
 
@@ -518,7 +496,7 @@ export default {
 
       if (contentEl !== void 0) {
         const
-          children = slice.call(contentEl.children).filter(el => el.classList.contains('q-virtual-scroll--skip') === false),
+          children = filterProto.call(contentEl.children || [], el => el.classList && el.classList.contains('q-virtual-scroll--skip') === false), // fallback [] for IE
           childrenLength = children.length,
           sizeFn = this.virtualScrollHorizontal === true
             ? el => el.getBoundingClientRect().width
@@ -700,6 +678,10 @@ export default {
 
         this.prevToIndex = index
       }
+    },
+
+    __onBlurRefocusFn () {
+      this.$refs.content !== void 0 && this.$refs.content.focus()
     }
   },
 
@@ -707,13 +689,29 @@ export default {
     this.__setVirtualScrollSize()
   },
 
+  activated () {
+    const scrollEl = this.__getVirtualScrollTarget()
+
+    if (this.prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
+      setScroll(
+        scrollEl,
+        this.prevScrollStart,
+        this.virtualScrollHorizontal,
+        this.$q.lang.rtl
+      )
+    }
+    else {
+      this.scrollTo(this.prevToIndex)
+    }
+  },
+
   beforeMount () {
-    buggyRTL === void 0 && detectBuggyRTL()
     this.__onVirtualScrollEvt = debounce(this.__onVirtualScrollEvt, this.$q.platform.is.ios === true ? 120 : 35)
     this.__setVirtualScrollSize()
   },
 
   beforeDestroy () {
+    this.__onVirtualScrollEvt.cancel()
     const styleSheet = document.getElementById(this.id + '_ss')
     styleSheet !== null && styleSheet.remove()
   }

package/src/plugins/AppFullscreen.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { isSSR } from './Platform.js'
+import { isSSR, client } from './Platform.js'
 
 const prefixes = {}
 
@@ -18,17 +18,42 @@ function promisify (target, fn) {
   }
 }
 
+function checkActive (plugin) {
+  plugin.activeEl = document.fullscreenElement ||
+    document.mozFullScreenElement ||
+    document.webkitFullscreenElement ||
+    document.msFullscreenElement ||
+    null
+
+  plugin.isActive = plugin.activeEl !== null
+}
+
 export default {
   isCapable: false,
   isActive: false,
   activeEl: null,
 
   request (target) {
-    if (this.isCapable === true && this.isActive === false) {
+    if (this.isCapable === true) {
       const el = target || document.documentElement
-      return promisify(el, prefixes.request).then(() => {
-        this.activeEl = el
-      })
+
+      if (el !== this.activeEl) {
+        const q = client.is.ie === true && this.activeEl !== null && el.contains(this.activeEl)
+          ? this.exit()
+          : Promise.resolve()
+
+        return q
+          .then(() => promisify(el, prefixes.request))
+          .catch(error => (
+            this.activeEl !== null
+              ? this.exit().then(() => promisify(el, prefixes.request))
+              : Promise.reject(error)
+          ))
+          .then(res => {
+            checkActive(this)
+            return res
+          })
+      }
     }
 
     return this.__getErr()
@@ -36,21 +61,26 @@ export default {
 
   exit () {
     return this.isCapable === true && this.isActive === true
-      ? promisify(document, prefixes.exit).then(() => {
-        this.activeEl = null
+      ? promisify(document, prefixes.exit).then(res => {
+        checkActive(this)
+        return this.isActive ? this.exit() : res
       })
       : this.__getErr()
   },
 
   toggle (target) {
-    return this.isActive === true
+    const el = target || document.documentElement
+
+    return this.activeEl === el
       ? this.exit()
-      : this.request(target)
+      : this.request(el)
   },
 
   install ({ $q }) {
     $q.fullscreen = this
 
+    this.__getErr = () => Promise.resolve()
+
     if (isSSR === true) { return }
 
     prefixes.request = [
@@ -66,24 +96,19 @@ export default {
       return
     }
 
-    this.__getErr = () => Promise.resolve()
-
     prefixes.exit = [
       'exitFullscreen',
       'msExitFullscreen', 'mozCancelFullScreen', 'webkitExitFullscreen'
     ].find(exit => document[exit])
 
-    this.isActive = !!(document.fullscreenElement ||
-      document.mozFullScreenElement ||
-      document.webkitFullscreenElement ||
-      document.msFullscreenElement)
+    checkActive(this)
 
     ;[
       'onfullscreenchange',
       'onmsfullscreenchange', 'onwebkitfullscreenchange'
     ].forEach(evt => {
       document[evt] = () => {
-        this.isActive = this.isActive === false
+        checkActive(this)
       }
     })
 

package/src/plugins/BottomSheet.json

@@ -45,7 +45,7 @@
                   "type": "String",
                   "desc": "Path to an image for this action",
                   "examples": [
-                    "(statics folder) statics/img/something.png",
+                    "(public folder) img/something.png",
                     "(relative path format) :src=\"require('./my_img.jpg')\"",
                     "(URL) https://some-site.net/some-img.gif"
                   ]

package/src/plugins/Cookies.js

@@ -111,7 +111,7 @@ function set (key, val, opts = {}, ssr) {
 
     if (expire !== void 0 && expireValue < 0) {
       const val = get(key, ssr)
-      if (val !== undefined) {
+      if (val !== void 0) {
         all = all
           .replace(`${key}=${val}; `, '')
           .replace(`; ${key}=${val}`, '')

package/src/plugins/Loading.js

@@ -55,6 +55,14 @@ const Loading = {
       vm = new Vue({
         name: 'QLoading',
 
+        // hide App from Vue devtools
+        devtools: { hide: true },
+
+        beforeCreate () {
+          // prevent error in Vue devtools
+          this._routerRoot === void 0 && (this._routerRoot = {})
+        },
+
         el: node,
 
         mounted () {

package/src/plugins/LoadingBar.js

@@ -23,6 +23,15 @@ export default {
 
     const bar = $q.loadingBar = new Vue({
       name: 'LoadingBar',
+
+      // hide App from Vue devtools
+      devtools: { hide: true },
+
+      beforeCreate () {
+        // prevent error in Vue devtools
+        this._routerRoot === void 0 && (this._routerRoot = {})
+      },
+
       render: h => h(QAjaxBar, {
         ref: 'bar',
         props

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" ]
       }
     }