quasar 2.3.4 → 2.4.0

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)
 
@@ -348,7 +348,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 +473,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-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-validate.js

@@ -2,6 +2,8 @@ import { ref, computed, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useFormChild from '../use-form-child.js'
 import { testPattern } from '../../utils/patterns.js'
+import { debounce } from '../../utils.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
 
@@ -35,7 +37,8 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.rules !== void 0
+    props.disable !== true
+    && props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
@@ -44,7 +47,7 @@ export default function (focused, innerLoading) {
     props.error === true || innerError.value === true
   )
 
-  const computedErrorMessage = computed(() => (
+  const errorMessage = computed(() => (
     typeof props.errorMessage === 'string' && props.errorMessage.length > 0
       ? props.errorMessage
       : innerErrorMessage.value
@@ -69,15 +72,16 @@ export default function (focused, innerLoading) {
   }, { immediate: true })
 
   watch(focused, val => {
-    if (props.lazyRules !== 'ondemand') {
-      if (val === true) {
-        if (isDirtyModel.value === null) {
-          isDirtyModel.value = false
-        }
+    if (val === true) {
+      if (isDirtyModel.value === null) {
+        isDirtyModel.value = false
       }
-      else if (isDirtyModel.value === false && hasRules.value === true) {
-        isDirtyModel.value = true
-        validate()
+    }
+    else if (isDirtyModel.value === false) {
+      isDirtyModel.value = true
+
+      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        debouncedValidate()
       }
     }
   })
@@ -88,6 +92,7 @@ export default function (focused, innerLoading) {
     isDirtyModel.value = null
     innerError.value = false
     innerErrorMessage.value = null
+    debouncedValidate.cancel()
   }
 
   /*
@@ -189,25 +194,26 @@ export default function (focused, innerLoading) {
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {
-      validate()
+      debouncedValidate()
     }
   }
 
+  const debouncedValidate = debounce(validate, 0)
+
   onBeforeUnmount(() => {
     unwatchRules !== void 0 && unwatchRules()
+    debouncedValidate.cancel()
   })
 
   // expose public methods & props
   Object.assign(proxy, { resetValidation, validate })
-  Object.defineProperty(proxy, 'hasError', {
-    get: () => hasError.value
-  })
+  injectProp(proxy, 'hasError', () => hasError.value)
 
   return {
     isDirtyModel,
     hasRules,
     hasError,
-    computedErrorMessage,
+    errorMessage,
 
     validate,
     resetValidation

package/src/composables/private/use-validate.json

@@ -28,6 +28,7 @@
 
     "rules": {
       "type": "Array",
+      "tsType": "ValidationRule",
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
         ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",

package/src/css/core/helpers.sass

@@ -49,6 +49,9 @@
   outline: 0
   text-decoration: none
 
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
+
 body.electron
   .q-electron-drag
     -webkit-user-select: none

package/src/css/core/positioning.sass

@@ -69,6 +69,11 @@
   max-width: 100vw
   max-height: 100vh
 
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
+
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0

package/src/directives/ScrollFire.js

@@ -61,6 +61,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
       beforeUnmount (el) {
         const ctx = el.__qscrollfire
         ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, passive)
+        ctx.scroll.cancel()
         delete el.__qscrollfire
       }
     }

package/src/icon-set.js

@@ -1,5 +1,6 @@
 import defineReactivePlugin from './utils/private/define-reactive-plugin.js'
 import materialIcons from '../icon-set/material-icons.js'
+import { injectProp } from './utils/private/inject-obj-prop.js'
 
 const Plugin = defineReactivePlugin({
   iconMapFn: null,
@@ -42,10 +43,7 @@ const Plugin = defineReactivePlugin({
 
       $q.iconSet = this.__icons
 
-      Object.defineProperty($q, 'iconMapFn', {
-        get: () => this.iconMapFn,
-        set: val => { this.iconMapFn = val }
-      })
+      injectProp($q, 'iconMapFn', () => this.iconMapFn, val => { this.iconMapFn = val })
 
       if (this.__installed === true) {
         iconSet !== void 0 && this.set(iconSet)