quasar 2.11.3 → 2.11.5

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/morph.js

@@ -950,12 +950,11 @@ export default function morph (_options) {
         : (
             options.waitFor === 'transitionend'
               ? new Promise(resolve => {
-                const timer = setTimeout(() => {
-                  endFn()
-                }, 400)
-
-                const endFn = ev => {
-                  clearTimeout(timer)
+                const endFn = () => {
+                  if (timer !== null) {
+                    clearTimeout(timer)
+                    timer = null
+                  }
 
                   if (elTo) {
                     elTo.removeEventListener('transitionend', endFn)
@@ -965,6 +964,8 @@ export default function morph (_options) {
                   resolve()
                 }
 
+                let timer = setTimeout(endFn, 400)
+
                 elTo.addEventListener('transitionend', endFn)
                 elTo.addEventListener('transitioncancel', endFn)
               })

package/src/utils/prevent-scroll.js

@@ -10,7 +10,8 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
-  closeTimer
+  href,
+  closeTimer = null
 
 function onWheel (e) {
   if (shouldPreventScroll(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
   }
 }
@@ -157,9 +165,9 @@ export default function (state) {
   if (state === true) {
     registered++
 
-    if (closeTimer !== void 0) {
+    if (closeTimer !== null) {
       clearTimeout(closeTimer)
-      closeTimer = void 0
+      closeTimer = null
       return
     }
 
@@ -181,11 +189,10 @@ export default function (state) {
     action = 'remove'
 
     if (client.is.ios === true && client.is.nativeMobile === true) {
-      clearTimeout(closeTimer)
-
+      closeTimer !== null && clearTimeout(closeTimer)
       closeTimer = setTimeout(() => {
         apply(action)
-        closeTimer = void 0
+        closeTimer = null
       }, 100)
       return
     }

package/src/utils/private/click-outside.js

@@ -1,14 +1,17 @@
 import { listenOpts } from '../event.js'
 import { portalProxyList } from '../private/portal.js'
 
-let timer
+let timer = null
 
 const
   { notPassiveCapture } = listenOpts,
   registeredList = []
 
 function globalHandler (evt) {
-  clearTimeout(timer)
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
 
   const target = evt.target
 
@@ -81,7 +84,11 @@ export function removeClickOutside (clickOutsideProps) {
     registeredList.splice(index, 1)
 
     if (registeredList.length === 0) {
-      clearTimeout(timer)
+      if (timer !== null) {
+        clearTimeout(timer)
+        timer = null
+      }
+
       document.removeEventListener('mousedown', globalHandler, notPassiveCapture)
       document.removeEventListener('touchstart', globalHandler, notPassiveCapture)
     }

package/src/utils/private/global-dialog.js

@@ -54,7 +54,7 @@ export default function (DefaultComponent, supportsCustomComponent, parentApp) {
 
     let vm, emittedOK = false
     const dialogRef = ref(null)
-    const el = createGlobalNode()
+    const el = createGlobalNode(false, 'dialog')
 
     const applyState = cmd => {
       if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {

package/src/utils/private/global-nodes.js

@@ -1,16 +1,19 @@
 import { globalConfig } from './global-config.js'
 
-const globalNodes = []
+const nodesList = []
+const portalTypeList = []
+
+let portalIndex = 1
 let target = __QUASAR_SSR_SERVER__
   ? void 0
   : document.body
 
-export function createGlobalNode (id) {
+export function createGlobalNode (id, portalType) {
   const el = document.createElement('div')
 
-  if (id !== void 0) {
-    el.id = id
-  }
+  el.id = portalType !== void 0
+    ? `q-portal--${ portalType }--${ portalIndex++ }`
+    : id
 
   if (globalConfig.globalNodes !== void 0) {
     const cls = globalConfig.globalNodes.class
@@ -20,24 +23,52 @@ export function createGlobalNode (id) {
   }
 
   target.appendChild(el)
-  globalNodes.push(el)
+  nodesList.push(el)
+  portalTypeList.push(portalType)
 
   return el
 }
 
 export function removeGlobalNode (el) {
-  globalNodes.splice(globalNodes.indexOf(el), 1)
+  const nodeIndex = nodesList.indexOf(el)
+
+  nodesList.splice(nodeIndex, 1)
+  portalTypeList.splice(nodeIndex, 1)
+
   el.remove()
 }
 
-export function changeGlobalNodesTarget (el) {
-  if (el !== target) {
-    target = el
+export function changeGlobalNodesTarget (newTarget) {
+  if (newTarget === target) {
+    return
+  }
+
+  target = newTarget
 
-    globalNodes.forEach(el => {
-      if (el.contains(target) === false) {
-        target.appendChild(el)
+  if (
+    target === document.body
+    // or we have less than 2 dialogs:
+    || portalTypeList.reduce((acc, type) => (type === 'dialog' ? acc + 1 : acc), 0) < 2
+  ) {
+    nodesList.forEach(node => {
+      if (node.contains(target) === false) {
+        target.appendChild(node)
       }
     })
+
+    return
+  }
+
+  const lastDialogIndex = portalTypeList.lastIndexOf('dialog')
+
+  for (let i = 0; i < nodesList.length; i++) {
+    const el = nodesList[ i ]
+
+    if (
+      (i === lastDialogIndex || portalTypeList[ i ] !== 'dialog')
+      && el.contains(target) === false
+    ) {
+      target.appendChild(el)
+    }
   }
 }

package/src/utils/private/position-engine.js

@@ -62,17 +62,32 @@ export function getAnchorProps (el, offset) {
   }
 
   return {
-    top,
-    left,
-    right,
-    bottom,
-    width,
-    height,
+    top, bottom, height,
+    left, right, width,
     middle: left + (right - left) / 2,
     center: top + (bottom - top) / 2
   }
 }
 
+function getAbsoluteAnchorProps (el, absoluteOffset, offset) {
+  let { top, left } = el.getBoundingClientRect()
+
+  top += absoluteOffset.top
+  left += absoluteOffset.left
+
+  if (offset !== void 0) {
+    top += offset[ 1 ]
+    left += offset[ 0 ]
+  }
+
+  return {
+    top, bottom: top + 1, height: 1,
+    left, right: left + 1, width: 1,
+    middle: left,
+    center: top
+  }
+}
+
 export function getTargetProps (el) {
   return {
     top: 0,
@@ -84,6 +99,13 @@ export function getTargetProps (el) {
   }
 }
 
+function getTopLeftProps (anchorProps, targetProps, cfg) {
+  return {
+    top: anchorProps[ cfg.anchorOrigin.vertical ] - targetProps[ cfg.selfOrigin.vertical ],
+    left: anchorProps[ cfg.anchorOrigin.horizontal ] - targetProps[ cfg.selfOrigin.horizontal ]
+  }
+}
+
 // cfg: { el, anchorEl, anchorOrigin, selfOrigin, offset, absoluteOffset, cover, fit, maxHeight, maxWidth }
 export function setPosition (cfg) {
   if (client.is.ios === true && window.visualViewport !== void 0) {
@@ -102,25 +124,15 @@ export function setPosition (cfg) {
     }
   }
 
-  let anchorProps
-
   // scroll position might change
   // if max-height/-width changes, so we
   // need to restore it after we calculate
   // the new positioning
   const { scrollLeft, scrollTop } = cfg.el
 
-  if (cfg.absoluteOffset === void 0) {
-    anchorProps = getAnchorProps(cfg.anchorEl, cfg.cover === true ? [ 0, 0 ] : cfg.offset)
-  }
-  else {
-    const
-      { top: anchorTop, left: anchorLeft } = cfg.anchorEl.getBoundingClientRect(),
-      top = anchorTop + cfg.absoluteOffset.top,
-      left = anchorLeft + cfg.absoluteOffset.left
-
-    anchorProps = { top, left, width: 1, height: 1, right: left + 1, center: top, middle: left, bottom: top + 1 }
-  }
+  const anchorProps = cfg.absoluteOffset === void 0
+    ? getAnchorProps(cfg.anchorEl, cfg.cover === true ? [ 0, 0 ] : cfg.offset)
+    : getAbsoluteAnchorProps(cfg.anchorEl, cfg.absoluteOffset, cfg.offset)
 
   let elStyle = {
     maxHeight: cfg.maxHeight,
@@ -137,14 +149,44 @@ export function setPosition (cfg) {
 
   Object.assign(cfg.el.style, elStyle)
 
-  const
-    targetProps = getTargetProps(cfg.el),
-    props = {
-      top: anchorProps[ cfg.anchorOrigin.vertical ] - targetProps[ cfg.selfOrigin.vertical ],
-      left: anchorProps[ cfg.anchorOrigin.horizontal ] - targetProps[ cfg.selfOrigin.horizontal ]
+  const targetProps = getTargetProps(cfg.el)
+  let props = getTopLeftProps(anchorProps, targetProps, cfg)
+
+  if (cfg.absoluteOffset === void 0 || cfg.offset === void 0) {
+    applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+  }
+  else { // we have touch position or context menu with offset
+    const { top, left } = props // cache initial values
+
+    // apply initial boundaries
+    applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+
+    let hasChanged = false
+
+    // did it flip vertically?
+    if (props.top !== top) {
+      hasChanged = true
+      const offsetY = 2 * cfg.offset[ 1 ]
+      anchorProps.center = anchorProps.top -= offsetY
+      anchorProps.bottom -= offsetY + 2
+    }
+
+    // did it flip horizontally?
+    if (props.left !== left) {
+      hasChanged = true
+      const offsetX = 2 * cfg.offset[ 0 ]
+      anchorProps.middle = anchorProps.left -= offsetX
+      anchorProps.right -= offsetX + 2
     }
 
-  applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+    if (hasChanged === true) {
+      // re-calculate props with the new anchor
+      props = getTopLeftProps(anchorProps, targetProps, cfg)
+
+      // and re-apply boundaries
+      applyBoundaries(props, anchorProps, targetProps, cfg.anchorOrigin, cfg.selfOrigin)
+    }
+  }
 
   elStyle = {
     top: props.top + 'px',