quasar 2.11.4 → 2.11.5

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.11.4",
+  "version": "2.11.5",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.4",
+  "version": "2.11.5",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/dialog/QDialog.js

@@ -79,6 +79,7 @@ export default createComponent({
 
   setup (props, { slots, emit, attrs }) {
     const vm = getCurrentInstance()
+    const { proxy: { $q } } = vm
 
     const innerRef = ref(null)
     const showing = ref(false)
@@ -370,7 +371,7 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
-    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin'
+    const backdropEvt = $q.platform.is.ios === true || $q.platform.is.safari ? 'onClick' : 'onFocusin'
 
     function renderPortalContent () {
       return h('div', {

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -39,6 +39,7 @@ export default createComponent({
     const isFetching = ref(false)
     const isWorking = ref(true)
     const rootRef = ref(null)
+    const loadingRef = ref(null)
 
     let index = props.initialIndex || 0
     let localScrollTarget, poll
@@ -170,12 +171,32 @@ export default createComponent({
       }
     }
 
+    function updateSvgAnimations (isRetry) {
+      if (renderLoadingSlot.value === true) {
+        if (loadingRef.value === null) {
+          isRetry !== true && nextTick(() => { updateSvgAnimations(true) })
+          return
+        }
+
+        // we need to pause svg animations (if any) when hiding
+        // otherwise the browser will keep on recalculating the style
+        const action = `${ isFetching.value === true ? 'un' : '' }pauseAnimations`
+        Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]()
+        })
+      }
+    }
+
+    const renderLoadingSlot = computed(() => props.disable !== true && isWorking.value === true)
+
+    watch([ isFetching, renderLoadingSlot ], () => { updateSvgAnimations() })
+
     watch(() => props.disable, val => {
       if (val === true) { stop() }
       else { resume() }
     })
 
-    watch(() => props.reverse, val => {
+    watch(() => props.reverse, () => {
       if (isFetching.value === false && isWorking.value === true) {
         immediatePoll()
       }
@@ -206,8 +227,9 @@ export default createComponent({
 
     onMounted(() => {
       setDebounce(props.debounce)
-
       updateScrollTarget()
+
+      isFetching.value === false && updateSvgAnimations()
     })
 
     // expose public methods
@@ -220,9 +242,9 @@ export default createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, [])
 
-      if (props.disable !== true && isWorking.value === true) {
+      if (renderLoadingSlot.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
-          h('div', { class: classes.value }, hSlot(slots.loading))
+          h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.loading))
         )
       }
 

package/src/components/rating/QRating.js

@@ -216,13 +216,13 @@ export default createComponent({
         case 37: // LEFT ARROW
         case 40: // DOWN ARROW
           if (iconRefs[ `rt${ i - 1 }` ]) {
-            iconRefs[ `rt${ i - 1 }` ].$el.focus()
+            iconRefs[ `rt${ i - 1 }` ].focus()
           }
           return stopAndPrevent(e)
         case 39: // RIGHT ARROW
         case 38: // UP ARROW
           if (iconRefs[ `rt${ i + 1 }` ]) {
-            iconRefs[ `rt${ i + 1 }` ].$el.focus()
+            iconRefs[ `rt${ i + 1 }` ].focus()
           }
           return stopAndPrevent(e)
       }
@@ -245,7 +245,7 @@ export default createComponent({
         child.push(
           h('div', {
             key: i,
-            ref: vm => { iconRefs[ `rt${ i }` ] = vm },
+            ref: el => { iconRefs[ `rt${ i }` ] = el },
             class: 'q-rating__icon-container flex flex-center',
             ...attrs,
             onClick () { set(i) },

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -24,12 +24,16 @@ const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.bod
       return
     }
 
-    cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    if (contentEl._qOverflowAnimationFrame !== void 0) {
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+    }
+
     contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
       if (contentEl === null) {
         return
       }
 
+      contentEl._qOverflowAnimationFrame = void 0
       const children = contentEl.children || []
 
       filterProto

package/src/css/core/visibility.sass

@@ -40,8 +40,6 @@
   visibility: hidden !important
   transition: none !important
   animation: none !important
-.invisible svg *
-  display: none
 .transparent
   background: transparent !important
 

package/src/plugins/Loading.js

@@ -1,7 +1,8 @@
-import { h, createApp, Transition, onMounted } from 'vue'
+import { h, Transition, onMounted } from 'vue'
 
 import QSpinner from '../components/spinner/QSpinner.js'
 
+import { createChildApp } from '../install-quasar.js'
 import defineReactivePlugin from '../utils/private/define-reactive-plugin.js'
 import { createGlobalNode, removeGlobalNode } from '../utils/private/global-nodes.js'
 import preventScroll from '../utils/prevent-scroll.js'
@@ -68,7 +69,7 @@ const Plugin = defineReactivePlugin({
 
         const el = createGlobalNode('q-loading')
 
-        app = createApp({
+        app = createChildApp({
           name: 'QLoading',
 
           setup () {
@@ -130,7 +131,7 @@ const Plugin = defineReactivePlugin({
               onAfterLeave
             }, getContent)
           }
-        })
+        }, Plugin.__parentApp)
 
         vm = app.mount(el)
       }, props.delay)
@@ -189,11 +190,15 @@ const Plugin = defineReactivePlugin({
     }
   },
 
-  install ({ $q }) {
+  install ({ $q, parentApp }) {
     $q.loading = this
 
-    if (__QUASAR_SSR_SERVER__ !== true && $q.config.loading !== void 0) {
-      this.setDefaults($q.config.loading)
+    if (__QUASAR_SSR_SERVER__ !== true) {
+      Plugin.__parentApp = parentApp
+
+      if ($q.config.loading !== void 0) {
+        this.setDefaults($q.config.loading)
+      }
     }
   }
 })

package/src/utils/copy-to-clipboard.js

@@ -1,9 +1,15 @@
+
+import { addFocusout, removeFocusout } from './private/focusout.js'
+
 function fallback (text) {
   const area = document.createElement('textarea')
   area.value = text
   area.contentEditable = 'true'
   area.style.position = 'fixed' // avoid scrolling to bottom
 
+  const fn = () => {}
+  addFocusout(fn)
+
   document.body.appendChild(area)
   area.focus()
   area.select()
@@ -11,6 +17,8 @@ function fallback (text) {
   const res = document.execCommand('copy')
 
   area.remove()
+  removeFocusout(fn)
+
   return res
 }
 

package/src/utils/is.js

@@ -32,20 +32,23 @@ export function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next()
+      let iter = a.entries()
+
+      i = iter.next()
       while (i.done !== true) {
         if (b.has(i.value[ 0 ]) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
-      i = a.entries().next()
+      iter = a.entries()
+      i = iter.next()
       while (i.done !== true) {
         if (isDeepEqual(i.value[ 1 ], b.get(i.value[ 0 ])) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
       return true
@@ -56,12 +59,14 @@ export function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next()
+      const iter = a.entries()
+
+      i = iter.next()
       while (i.done !== true) {
         if (b.has(i.value[ 0 ]) !== true) {
           return false
         }
-        i = i.next()
+        i = iter.next()
       }
 
       return true

package/src/utils/prevent-scroll.js

@@ -10,6 +10,7 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
+  href,
   closeTimer = null
 
 function onWheel (e) {
@@ -96,6 +97,8 @@ function apply (action) {
     bodyLeft = body.style.left
     bodyTop = body.style.top
 
+    href = window.location.href
+
     body.style.left = `-${ scrollPositionX }px`
     body.style.top = `-${ scrollPositionY }px`
 
@@ -108,6 +111,7 @@ function apply (action) {
 
     body.classList.add('q-body--prevent-scroll')
     document.qScrollPrevented = true
+
     if (client.is.ios === true) {
       if (hasViewport === true) {
         window.scrollTo(0, 0)
@@ -146,7 +150,11 @@ function apply (action) {
     body.style.left = bodyLeft
     body.style.top = bodyTop
 
-    window.scrollTo(scrollPositionX, scrollPositionY)
+    // scroll back only if route has not changed
+    if (window.location.href === href) {
+      window.scrollTo(scrollPositionX, scrollPositionY)
+    }
+
     maxScrollTop = void 0
   }
 }