quasar 2.3.4 → 2.4.3

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

@@ -15,8 +15,8 @@ const scrollToEdges = [
   'end-force'
 ]
 
-const slice = Array.prototype.slice
 let id = 1
+const filterProto = Array.prototype.filter
 
 const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
   ? noop
@@ -66,7 +66,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
@@ -81,7 +81,7 @@ function getScrollDetails (
   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
@@ -130,10 +130,16 @@ 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 = (rtlHasScrollBug === 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)
     }
@@ -398,20 +404,17 @@ export function useVirtualScroll ({
     }
 
     const { activeElement } = document
+    const contentEl = contentRef.value
     if (
       rangeChanged === true
-      && contentRef.value !== null
-      && contentRef.value !== activeElement
-      && contentRef.value.contains(activeElement) === true
+      && contentEl !== null
+      && contentEl !== activeElement
+      && contentEl.contains(activeElement) === true
     ) {
-      const onBlurFn = () => {
-        contentRef.value.focus()
-      }
+      contentEl.addEventListener('focusout', onBlurRefocusFn)
 
-      activeElement.addEventListener('blur', onBlurFn, true)
-
-      requestAnimationFrame(() => {
-        activeElement.removeEventListener('blur', onBlurFn, true)
+      setTimeout(() => {
+        contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn)
       })
     }
 
@@ -489,8 +492,10 @@ export function useVirtualScroll ({
 
     if (contentEl) {
       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
+        ),
         childrenLength = children.length,
         sizeFn = props.virtualScrollHorizontal === true
           ? el => el.getBoundingClientRect().width
@@ -521,6 +526,10 @@ export function useVirtualScroll ({
     }
   }
 
+  function onBlurRefocusFn () {
+    contentRef.value !== void 0 && contentRef.value.focus()
+  }
+
   function localResetVirtualScroll (toIndex, fullReset) {
     const defaultSize = 1 * virtualScrollItemSizeComputed.value
 
@@ -673,7 +682,10 @@ export function useVirtualScroll ({
   }
 
   setVirtualScrollSize()
-  const onVirtualScrollEvt = debounce(localOnVirtualScrollEvt, $q.platform.is.ios === true ? 120 : 35)
+  const onVirtualScrollEvt = debounce(
+    localOnVirtualScrollEvt,
+    $q.platform.is.ios === true ? 120 : 35
+  )
 
   onBeforeMount(() => {
     setVirtualScrollSize()
@@ -698,6 +710,7 @@ export function useVirtualScroll ({
   setOverflowAnchor !== noop && onBeforeUnmount(() => {
     const styleSheet = document.getElementById(vsId + '_ss')
     styleSheet !== null && styleSheet.remove()
+    onVirtualScrollEvt.cancel()
   })
 
   // expose public methods

package/src/composables/private/use-field.js

@@ -168,7 +168,7 @@ export default function (state) {
     isDirtyModel,
     hasRules,
     hasError,
-    computedErrorMessage,
+    errorMessage,
     resetValidation
   } = useValidate(state.focused, state.innerLoading)
 
@@ -263,26 +263,24 @@ export default function (state) {
     state.targetUid.value = getTargetUid(val)
   })
 
-  let focusFn
+  function focusHandler () {
+    const el = document.activeElement
+    let target = state.targetRef !== void 0 && state.targetRef.value
 
-  function focus () {
-    focusFn !== void 0 && removeFocusFn(focusFn)
-    focusFn = addFocusFn(() => {
-      focusFn = void 0
-      const el = document.activeElement
-      let target = state.targetRef !== void 0 && state.targetRef.value
-
-      if (target && (el === null || el.id !== state.targetUid.value)) {
-        target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
-        if (target && target !== el) {
-          target.focus()
-        }
+    if (target && (el === null || el.id !== state.targetUid.value)) {
+      target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
+      if (target && target !== el) {
+        target.focus()
       }
-    })
+    }
+  }
+
+  function focus () {
+    addFocusFn(focusHandler)
   }
 
   function blur () {
-    focusFn !== void 0 && removeFocusFn(focusFn)
+    removeFocusFn(focusHandler)
     const el = document.activeElement
     if (el !== null && state.rootRef.value.contains(el)) {
       el.blur()
@@ -348,7 +346,7 @@ export default function (state) {
     nextTick(() => {
       resetValidation()
 
-      if (props.lazyRules !== 'ondemand' && $q.platform.is.mobile !== true) {
+      if ($q.platform.is.mobile !== true) {
         isDirtyModel.value = false
       }
     })
@@ -473,9 +471,9 @@ export default function (state) {
     let msg, key
 
     if (hasError.value === true) {
-      if (computedErrorMessage.value !== null) {
-        msg = [ h('div', { role: 'alert' }, computedErrorMessage.value) ]
-        key = `q--slot-error-${ computedErrorMessage.value }`
+      if (errorMessage.value !== null) {
+        msg = [ h('div', { role: 'alert' }, errorMessage.value) ]
+        key = `q--slot-error-${ errorMessage.value }`
       }
       else {
         msg = hSlot(slots.error)

package/src/composables/private/use-file.js

@@ -1,6 +1,6 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import { stopAndPrevent } from '../../utils/event.js'
+import { stop, stopAndPrevent } from '../../utils/event.js'
 
 function filterFiles (files, rejectedFiles, failedPropValidation, filterFn) {
   const acceptedFiles = []
@@ -62,8 +62,18 @@ export default function ({
 
   function pickFiles (e) {
     if (editable.value) {
-      const input = getFileInput()
-      input && input.click(e)
+      if (e !== Object(e)) {
+        e = { target: null }
+      }
+
+      if (e.target !== null && e.target.matches('input[type="file"]') === true) {
+        // stop propagation if it's not a real pointer event
+        e.clientX === 0 && e.clientY === 0 && stop(e)
+      }
+      else {
+        const input = getFileInput()
+        input && input !== e.target && input.click(e)
+      }
     }
   }
 
@@ -112,10 +122,15 @@ export default function ({
       files = [ files[ 0 ] ]
     }
 
+    // Compute key to use for each file
+    files.forEach(file => {
+      file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
+    })
+
     // Avoid duplicate files
-    const filenameMap = currentFileList.map(entry => entry.name)
+    const filenameMap = currentFileList.map(entry => entry.__key)
     files = filterFiles(files, rejectedFiles, 'duplicate', file => {
-      return filenameMap.includes(file.name) === false
+      return filenameMap.includes(file.__key) === false
     })
 
     if (files.length === 0) { return done() }

package/src/composables/private/use-form.js

@@ -12,13 +12,12 @@ export function useFormAttrs (props) {
   }))
 }
 
-export function useFormInject (formAttrs = {}, formDomProps = {}) {
+export function useFormInject (formAttrs = {}) {
   return (child, action, className) => {
     child[ action ](
       h('input', {
         class: 'hidden' + (className || ''),
-        ...formAttrs.value,
-        ...formDomProps.value
+        ...formAttrs.value
       })
     )
   }

package/src/composables/private/use-fullscreen.js

@@ -3,6 +3,8 @@ import { ref, watch, onBeforeMount, onMounted, onBeforeUnmount, getCurrentInstan
 import History from '../../history.js'
 import { vmHasRouter } from '../../utils/private/vm.js'
 
+let counter = 0
+
 export const useFullscreenProps = {
   fullscreen: Boolean,
   noRouteFullscreenExit: Boolean
@@ -50,7 +52,11 @@ export default function () {
     container = proxy.$el.parentNode
     container.replaceChild(fullscreenFillerNode, proxy.$el)
     document.body.appendChild(proxy.$el)
-    document.body.classList.add('q-body--fullscreen-mixin')
+
+    counter++
+    if (counter === 1) {
+      document.body.classList.add('q-body--fullscreen-mixin')
+    }
 
     historyEntry = {
       handler: exitFullscreen
@@ -69,11 +75,16 @@ export default function () {
     }
 
     container.replaceChild(proxy.$el, fullscreenFillerNode)
-    document.body.classList.remove('q-body--fullscreen-mixin')
     inFullscreen.value = false
 
-    if (proxy.$el.scrollIntoView !== void 0) {
-      setTimeout(() => { proxy.$el.scrollIntoView() })
+    counter = Math.max(0, counter - 1)
+
+    if (counter === 0) {
+      document.body.classList.remove('q-body--fullscreen-mixin')
+
+      if (proxy.$el.scrollIntoView !== void 0) {
+        setTimeout(() => { proxy.$el.scrollIntoView() })
+      }
     }
   }
 

package/src/composables/private/use-model-toggle.js

@@ -15,7 +15,7 @@ export const useModelToggleEmits = [
   'before-show', 'show', 'before-hide', 'hide'
 ]
 
-// handleShow/handleHide -> removeTick(), self (& emit show), prepareTick()
+// handleShow/handleHide -> removeTick(), self (& emit show)
 
 export default function ({
   showing,

package/src/composables/private/use-portal.js

@@ -48,16 +48,18 @@ export default function (vm, innerRef, renderPortalContent, checkGlobalDialog) {
       return
     }
 
-    if (onGlobalDialog === false && portalEl === null) {
-      portalEl = createGlobalNode()
-    }
+    if (portalIsActive.value === false) {
+      if (onGlobalDialog === false && portalEl === null) {
+        portalEl = createGlobalNode()
+      }
 
-    portalIsActive.value = true
+      portalIsActive.value = true
 
-    // register portal
-    portalList.push(vm.proxy)
+      // register portal
+      portalList.push(vm.proxy)
 
-    addFocusWaitFlag(focusObj)
+      addFocusWaitFlag(focusObj)
+    }
   }
 
   function hidePortal () {

package/src/composables/private/use-router-link.js

@@ -79,6 +79,7 @@ function isSameRouteLocationParams (a, b) {
 }
 
 export const useRouterLinkProps = {
+  // router-link
   to: [ String, Object ],
   replace: Boolean,
   exact: Boolean,
@@ -90,23 +91,33 @@ export const useRouterLinkProps = {
     type: String,
     default: 'q-router-link--exact-active'
   },
+
+  // regular <a> link
+  href: String,
+  target: String,
+
+  // state
   disable: Boolean
 }
 
-export default function () {
+// external props: type, tag
+
+export default function (fallbackTag) {
   const vm = getCurrentInstance()
-  const { props, attrs, proxy } = vm
+  const { props, proxy } = vm
 
   const hasRouter = vmHasRouter(vm)
+  const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0)
 
-  const hasLinkConfigured = computed(() =>
+  const hasRouterLinkProps = computed(() =>
     hasRouter === true
     && props.disable !== true
+    && hasHrefLink.value !== true
     && props.to !== void 0 && props.to !== null && props.to !== ''
   )
 
   const linkRoute = computed(() => {
-    if (hasLinkConfigured.value === true) {
+    if (hasRouterLinkProps.value === true) {
       try { return proxy.$router.resolve(props.to) }
       catch (err) {}
     }
@@ -114,16 +125,33 @@ export default function () {
     return null
   })
 
-  const hasLink = computed(() => linkRoute.value !== null)
+  const hasRouterLink = computed(() => linkRoute.value !== null)
+  const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true)
 
   const linkTag = computed(() => (
-    hasLink.value === true
+    props.type === 'a' || hasLink.value === true
       ? 'a'
-      : (props.tag || 'div')
+      : (props.tag || fallbackTag || 'div')
+  ))
+
+  const linkProps = computed(() => (
+    hasHrefLink.value === true
+      ? {
+          href: props.href,
+          target: props.target
+        }
+      : (
+          hasRouterLink.value === true
+            ? {
+                href: linkRoute.value.href,
+                target: props.target
+              }
+            : {}
+        )
   ))
 
   const linkActiveIndex = computed(() => {
-    if (hasLink.value === false) {
+    if (hasRouterLink.value === false) {
       return null
     }
 
@@ -170,7 +198,7 @@ export default function () {
   })
 
   const linkIsActive = computed(() =>
-    hasLink.value === true
+    hasRouterLink.value === true
     && linkActiveIndex.value > -1
     && includesParams(proxy.$route.params, linkRoute.value.params)
   )
@@ -182,7 +210,7 @@ export default function () {
   )
 
   const linkClass = computed(() => (
-    hasLink.value === true
+    hasRouterLink.value === true
       ? (
           linkIsExactActive.value === true
             ? ` ${ props.exactActiveClass } ${ props.activeClass }`
@@ -195,18 +223,8 @@ export default function () {
       : ''
   ))
 
-  const linkProps = computed(() => (
-    hasLink.value === true
-      ? {
-          href: linkRoute.value.href,
-          target: attrs.target,
-          role: 'link'
-        }
-      : {}
-  ))
-
   // should match RouterLink from Vue Router
-  function navigateToLink (e) {
+  function navigateToRouterLink (e) {
     if (
       // component is not disabled
       props.disable === true
@@ -222,7 +240,7 @@ export default function () {
       || (e.button !== undefined && e.button !== 0)
 
       // don't redirect if it should open in a new window
-      || attrs.target === '_blank'
+      || props.target === '_blank'
     ) {
       return false
     }
@@ -234,7 +252,10 @@ export default function () {
   }
 
   return {
+    hasRouterLink,
+    hasHrefLink,
     hasLink,
+
     linkTag,
     linkRoute,
     linkIsActive,
@@ -242,6 +263,6 @@ export default function () {
     linkClass,
     linkProps,
 
-    navigateToLink
+    navigateToRouterLink
   }
 }

package/src/composables/private/use-router-link.json

@@ -2,38 +2,54 @@
   "props": {
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
       ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'exact' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-      "category": "behavior"
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
     "active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
       "examples": [ "my-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
     },
 
     "exact-active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
       "examples": [ "my-exact-active-class" ],
-      "category": "behavior"
+      "category": "navigation"
+    },
+
+    "href": {
+      "type": "String",
+      "desc": "Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
+      "examples": [ "http://quasar.dev" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
+    },
+
+    "target": {
+      "type": "String",
+      "desc": "Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props",
+      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
     },
 
     "disable": {

package/src/composables/private/use-split-attrs.js

@@ -12,17 +12,17 @@ export default function (attrs, vnode) {
     const attributes = {}
     const listeners = {}
 
-    Object.keys(attrs).forEach(key => {
+    for (const key in attrs) {
       if (key !== 'class' && key !== 'style' && listenerRE.test(key) === false) {
         attributes[ key ] = attrs[ key ]
       }
-    })
+    }
 
-    Object.keys(vnode.props).forEach(key => {
+    for (const key in vnode.props) {
       if (listenerRE.test(key) === true) {
         listeners[ key ] = vnode.props[ key ]
       }
-    })
+    }
 
     acc.attributes.value = attributes
     acc.listeners.value = listeners

package/src/composables/private/use-tick.js

@@ -4,8 +4,6 @@ import { nextTick, onBeforeUnmount } from 'vue'
  * Usage:
  *    registerTick(fn)
  *    registerTick(fn)
- *    ....
- *    prepareTick()
  */
 
 export default function () {
@@ -18,22 +16,17 @@ export default function () {
   return {
     registerTick (fn) {
       tickFn = fn
+
+      nextTick(() => {
+        if (tickFn === fn) {
+          tickFn()
+          tickFn = void 0
+        }
+      })
     },
 
     removeTick () {
       tickFn = void 0
-    },
-
-    prepareTick () {
-      if (tickFn !== void 0) {
-        const fn = tickFn
-        nextTick(() => {
-          if (tickFn === fn) {
-            tickFn()
-            tickFn = void 0
-          }
-        })
-      }
     }
   }
 }