quasar 2.8.3 → 2.9.0

package/src/components/tooltip/QTooltip.js

@@ -93,7 +93,7 @@ export default createComponent({
     const hideOnRouteChange = computed(() => props.persistent !== true)
 
     const { registerTick, removeTick } = useTick()
-    const { registerTimeout, removeTimeout } = useTimeout()
+    const { registerTimeout } = useTimeout()
     const { transition, transitionStyle } = useTransition(props, showing)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
 
@@ -147,11 +147,9 @@ export default createComponent({
     }
 
     function handleShow (evt) {
-      removeTick()
-      removeTimeout()
-
       showPortal()
 
+      // should removeTick() if this gets removed
       registerTick(() => {
         observer = new MutationObserver(() => updatePosition())
         observer.observe(innerRef.value, { attributes: false, childList: true, characterData: true, subtree: true })
@@ -166,6 +164,7 @@ export default createComponent({
         )
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         showPortal(true) // done showing portal
         emit('show', evt)
@@ -174,11 +173,11 @@ export default createComponent({
 
     function handleHide (evt) {
       removeTick()
-      removeTimeout()
       hidePortal()
 
       anchorCleanup()
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true) // done hiding, now destroy
         emit('hide', evt)
@@ -230,14 +229,10 @@ export default createComponent({
         addEvt(anchorEvents, 'tooltipTemp', evts)
       }
 
-      registerTimeout(() => {
-        show(evt)
-      }, props.delay)
+      registerTimeout(() => { show(evt) }, props.delay)
     }
 
     function delayHide (evt) {
-      removeTimeout()
-
       if ($q.platform.is.mobile === true) {
         cleanEvt(anchorEvents, 'tooltipTemp')
         clearSelection()
@@ -247,9 +242,8 @@ export default createComponent({
         }, 10)
       }
 
-      registerTimeout(() => {
-        hide(evt)
-      }, props.hideDelay)
+      // should removeTimeout() if this gets removed
+      registerTimeout(() => { hide(evt) }, props.hideDelay)
     }
 
     function configureAnchorEl () {

package/src/components/tree/QTree.js

@@ -620,7 +620,7 @@ export default createComponent({
           emit('update:selected', meta.key !== props.selected ? meta.key : null)
         }
         else if (meta.key !== props.selected) {
-          emit('update:selected', meta.key || null)
+          emit('update:selected', meta.key === void 0 ? null : meta.key)
         }
       }
       else {

package/src/components/uploader/uploader-core.js

@@ -12,6 +12,7 @@ import { stop } from '../../utils/event.js'
 import { humanStorageSize } from '../../utils/format.js'
 import { uploaderKey } from '../../utils/private/symbols.js'
 import { injectProp, injectMultipleProps } from '../../utils/private/inject-obj-prop.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 function getProgressLabel (p) {
   return (p * 100).toFixed(2) + '%'
@@ -90,9 +91,7 @@ export function getRenderer (getPlugin) {
     uploadedSize: ref(0),
 
     updateFileStatus,
-    isAlive () {
-      return vm.isDeactivated !== true && vm.isUnmounted !== true
-    }
+    isAlive: () => vmIsDestroyed(vm) === false
   }
 
   const {

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

@@ -79,6 +79,7 @@ describe('use-model-toggle API', () => {
         expect(fn).not.to.be.called
         cy.dataCy('wrapper')
           .click()
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
         cy.dataCy('menu')
           .should('exist')
           .wait(300) // Await menu animation
@@ -99,6 +100,7 @@ describe('use-model-toggle API', () => {
         cy.dataCy('wrapper')
         cy.dataCy('method-show')
           .click({ force: true }) // Element is hidden to prevent clogging the window
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
         cy.dataCy('menu')
           .should('exist')
           .wait(300) // Await menu animation

package/src/composables/private/__tests__/use-transition.spec.js

@@ -61,6 +61,7 @@ describe('use-transition API', () => {
       describe('(prop): transition-duration', () => {
         it('should be done with transitioning after 300ms passed', () => {
           mount(WrapperOne)
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
             .wait(300)
@@ -70,6 +71,7 @@ describe('use-transition API', () => {
 
         it('should not be done with transitioning before 300ms passed', () => {
           mount(WrapperOne)
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
             .wait(200) // Commands take some time so a high value can fail, just take a decent margin
@@ -83,6 +85,7 @@ describe('use-transition API', () => {
               transitionDuration: 1000
             }
           })
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
             .wait(1000)
@@ -96,6 +99,7 @@ describe('use-transition API', () => {
               transitionDuration: 1000
             }
           })
+          // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
             .wait(900)

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

@@ -129,7 +129,7 @@ export default function ({
       file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
     })
 
-    if (append !== true) {
+    if (append === true) {
       // Avoid duplicate files
       const filenameMap = currentFileList.map(entry => entry.__key)
       files = filterFiles(files, rejectedFiles, 'duplicate', file => {

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

@@ -5,7 +5,6 @@
 
 import { computed, getCurrentInstance } from 'vue'
 
-import { prevent } from '../../utils/event.js'
 import { vmHasRouter } from '../../utils/private/vm.js'
 
 // Get the original path value of a record by following its aliasOf
@@ -102,30 +101,34 @@ export const useRouterLinkProps = {
 
 // external props: type, tag
 
-export default function (fallbackTag) {
+export default function ({ fallbackTag, useDisableForRouterLinkProps = true } = {}) {
   const vm = getCurrentInstance()
-  const { props, proxy } = vm
+  const { props, proxy, emit } = vm
 
   const hasRouter = vmHasRouter(vm)
   const hasHrefLink = computed(() => props.disable !== true && props.href !== void 0)
 
-  const hasRouterLinkProps = computed(() =>
-    hasRouter === true
-    && props.disable !== true
-    && hasHrefLink.value !== true
-    && props.to !== void 0 && props.to !== null && props.to !== ''
-  )
-
-  const linkRoute = computed(() => {
-    if (hasRouterLinkProps.value === true) {
-      try { return proxy.$router.resolve(props.to) }
-      catch (err) {}
-    }
+  // for perf reasons, we use minimum amount of runtime work
+  const hasRouterLinkProps = useDisableForRouterLinkProps === true
+    ? computed(() =>
+      hasRouter === true
+      && props.disable !== true
+      && hasHrefLink.value !== true
+      && props.to !== void 0 && props.to !== null && props.to !== ''
+    )
+    : computed(() =>
+      hasRouter === true
+      && hasHrefLink.value !== true
+      && props.to !== void 0 && props.to !== null && props.to !== ''
+    )
 
-    return null
-  })
+  const resolvedLink = computed(() => (
+    hasRouterLinkProps.value === true
+      ? getLink(props.to)
+      : null
+  ))
 
-  const hasRouterLink = computed(() => linkRoute.value !== null)
+  const hasRouterLink = computed(() => resolvedLink.value !== null)
   const hasLink = computed(() => hasHrefLink.value === true || hasRouterLink.value === true)
 
   const linkTag = computed(() => (
@@ -134,7 +137,7 @@ export default function (fallbackTag) {
       : (props.tag || fallbackTag || 'div')
   ))
 
-  const linkProps = computed(() => (
+  const linkAttrs = computed(() => (
     hasHrefLink.value === true
       ? {
           href: props.href,
@@ -143,7 +146,7 @@ export default function (fallbackTag) {
       : (
           hasRouterLink.value === true
             ? {
-                href: linkRoute.value.href,
+                href: resolvedLink.value.href,
                 target: props.target
               }
             : {}
@@ -152,11 +155,11 @@ export default function (fallbackTag) {
 
   const linkActiveIndex = computed(() => {
     if (hasRouterLink.value === false) {
-      return null
+      return -1
     }
 
     const
-      { matched } = linkRoute.value,
+      { matched } = resolvedLink.value,
       { length } = matched,
       routeMatched = matched[ length - 1 ]
 
@@ -199,14 +202,14 @@ export default function (fallbackTag) {
 
   const linkIsActive = computed(() =>
     hasRouterLink.value === true
-    && linkActiveIndex.value > -1
-    && includesParams(proxy.$route.params, linkRoute.value.params)
+    && linkActiveIndex.value !== -1
+    && includesParams(proxy.$route.params, resolvedLink.value.params)
   )
 
   const linkIsExactActive = computed(() =>
     linkIsActive.value === true
       && linkActiveIndex.value === proxy.$route.matched.length - 1
-      && isSameRouteLocationParams(proxy.$route.params, linkRoute.value.params)
+      && isSameRouteLocationParams(proxy.$route.params, resolvedLink.value.params)
   )
 
   const linkClass = computed(() => (
@@ -223,32 +226,64 @@ export default function (fallbackTag) {
       : ''
   ))
 
-  // should match RouterLink from Vue Router
-  function navigateToRouterLink (e) {
-    if (
-      // component is not disabled
-      props.disable === true
+  function getLink (to) {
+    try { return proxy.$router.resolve(to) }
+    catch (_) {}
+
+    return null
+  }
 
-      // don't redirect with control keys
-      || e.metaKey || e.altKey || e.ctrlKey || e.shiftKey
+  /**
+   * @returns Promise<RouterError | false | undefined>
+   */
+  function navigateToRouterLink (
+    e,
+    { returnRouterError, to = props.to, replace = props.replace } = {}
+  ) {
+    if (props.disable === true) {
+      // ensure native navigation is prevented in all cases,
+      // like when useDisableForRouterLinkProps === false (QRouteTab)
+      e.preventDefault()
+      return Promise.resolve(false)
+    }
 
-      // don't redirect when preventDefault called
-      // ...unless calling go() from @click(e, go)
-      || (e.__qNavigate !== true && e.defaultPrevented === true)
+    if (
+      // don't redirect with control keys;
+      // should match RouterLink from Vue Router
+      e.metaKey || e.altKey || e.ctrlKey || e.shiftKey
 
       // don't redirect on right click
-      || (e.button !== undefined && e.button !== 0)
+      || (e.button !== void 0 && e.button !== 0)
 
       // don't redirect if it should open in a new window
       || props.target === '_blank'
     ) {
-      return false
+      return Promise.resolve(false)
     }
 
-    prevent(e)
+    // hinder the native navigation
+    e.preventDefault()
+
+    // then() can also return a "soft" router error (Vue Router behavior)
+    const promise = proxy.$router[ replace === true ? 'replace' : 'push' ](to)
 
-    return proxy.$router[ props.replace === true ? 'replace' : 'push' ](props.to)
-      .catch(err => err)
+    return returnRouterError === true
+      ? promise
+      // else catching hard errors and also "soft" ones - then(err => ...)
+      : promise.then(() => {}).catch(() => {})
+  }
+
+  // warning! ensure that the component using it has 'click' included in its 'emits' definition prop
+  function navigateOnClick (e) {
+    if (hasRouterLink.value === true) {
+      const go = opts => navigateToRouterLink(e, opts)
+
+      emit('click', e, go)
+      e.defaultPrevented !== true && go()
+    }
+    else {
+      emit('click', e)
+    }
   }
 
   return {
@@ -257,12 +292,14 @@ export default function (fallbackTag) {
     hasLink,
 
     linkTag,
-    linkRoute,
+    resolvedLink,
     linkIsActive,
     linkIsExactActive,
     linkClass,
-    linkProps,
+    linkAttrs,
 
-    navigateToRouterLink
+    getLink,
+    navigateToRouterLink,
+    navigateOnClick
   }
 }

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

@@ -1,32 +1,38 @@
-import { nextTick, onBeforeUnmount } from 'vue'
+import { nextTick, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import { vmIsDestroyed } from '../../utils/private/vm'
 
 /*
  * Usage:
  *    registerTick(fn)
- *    registerTick(fn)
+ *    removeTick()
  */
 
 export default function () {
   let tickFn
+  const vm = getCurrentInstance()
 
-  onBeforeUnmount(() => {
+  function removeTick () {
     tickFn = void 0
-  })
+  }
+
+  onDeactivated(removeTick)
+  onBeforeUnmount(removeTick)
 
   return {
+    removeTick,
+
     registerTick (fn) {
       tickFn = fn
 
       nextTick(() => {
         if (tickFn === fn) {
-          tickFn()
+          // we also check if VM is destroyed, since if it
+          // got to trigger one nextTick() we cannot stop it
+          vmIsDestroyed(vm) === false && tickFn()
           tickFn = void 0
         }
       })
-    },
-
-    removeTick () {
-      tickFn = void 0
     }
   }
 }

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

@@ -1,20 +1,33 @@
-import { onBeforeUnmount } from 'vue'
+import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
+
+import { vmIsDestroyed } from '../../utils/private/vm'
+
+/*
+ * Usage:
+ *    registerTimeout(fn[, delay])
+ *    removeTimeout()
+ */
 
 export default function () {
   let timer
+  const vm = getCurrentInstance()
 
-  onBeforeUnmount(() => {
+  function removeTimeout () {
     clearTimeout(timer)
-  })
+  }
+
+  onDeactivated(removeTimeout)
+  onBeforeUnmount(removeTimeout)
 
   return {
+    removeTimeout,
+
     registerTimeout (fn, delay) {
       clearTimeout(timer)
-      timer = setTimeout(fn, delay)
-    },
 
-    removeTimeout () {
-      clearTimeout(timer)
+      if (vmIsDestroyed(vm) === false) {
+        timer = setTimeout(fn, delay)
+      }
     }
   }
 }

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

@@ -2,7 +2,7 @@ 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 debounce from '../../utils/debounce.js'
 import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
@@ -119,21 +119,15 @@ export default function (focused, innerLoading) {
 
     const index = ++validateIndex
 
-    if (innerLoading.value !== true && props.lazyRules !== true) {
-      isDirtyModel.value = true
-    }
+    const setDirty = innerLoading.value !== true
+      ? () => { isDirtyModel.value = true }
+      : () => {}
 
     const update = (err, msg) => {
-      if (innerError.value !== err) {
-        innerError.value = err
-      }
-
-      const m = msg || void 0
-
-      if (innerErrorMessage.value !== m) {
-        innerErrorMessage.value = m
-      }
+      err === true && setDirty()
 
+      innerError.value = err
+      innerErrorMessage.value = msg || null
       innerLoading.value = false
     }
 

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

@@ -1,4 +1,4 @@
-import { inject, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { inject, watch, getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'
 
 import { formKey } from '../utils/private/symbols.js'
 
@@ -21,11 +21,13 @@ export default function ({ validate, resetValidation, requiresQForm }) {
       }
     })
 
-    // register component to parent QForm
-    props.disable !== true && $form.bindComponent(proxy)
+    onMounted(() => {
+      // register to parent QForm
+      props.disable !== true && $form.bindComponent(proxy)
+    })
 
     onBeforeUnmount(() => {
-      // unregister component
+      // un-register from parent QForm
       props.disable !== true && $form.unbindComponent(proxy)
     })
   }

package/src/directives/TouchPan.js

@@ -388,7 +388,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
         ])
       },
 

package/src/directives/TouchRepeat.js

@@ -209,7 +209,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchend', 'noop', 'passiveCapture' ]
         ])
 
         keyboard.length > 0 && addEvt(ctx, 'main', [

package/src/directives/TouchSwipe.js

@@ -234,7 +234,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchmove', 'noop', 'notPassiveCapture' ] // cannot be passive (ex: iOS scroll)
         ])
       },
 

package/src/utils/EventBus.js

@@ -0,0 +1,64 @@
+/**
+ * Forked from tiny-emitter
+ * Copyright (c) 2017 Scott Corgan
+ */
+
+export default class EventBus {
+  constructor () {
+    this.__stack = {}
+  }
+
+  on (name, callback, ctx) {
+    (this.__stack[ name ] || (this.__stack[ name ] = [])).push({
+      fn: callback,
+      ctx
+    })
+
+    return this // chainable
+  }
+
+  once (name, callback, ctx) {
+    const listener = () => {
+      this.off(name, listener)
+      callback.apply(ctx, arguments)
+    }
+
+    listener.__callback = callback
+    return this.on(name, listener, ctx) // chainable
+  }
+
+  emit (name) {
+    const list = this.__stack[ name ]
+
+    if (list !== void 0) {
+      const params = [].slice.call(arguments, 1)
+      list.forEach(entry => {
+        entry.fn.apply(entry.ctx, params)
+      })
+    }
+
+    return this // chainable
+  }
+
+  off (name, callback) {
+    const list = this.__stack[ name ]
+    const liveEvents = []
+
+    if (list !== void 0 && callback) {
+      list.forEach(entry => {
+        if (entry.fn !== callback && entry.fn.__callback !== callback) {
+          liveEvents.push(entry)
+        }
+      })
+
+      if (liveEvents.length !== 0) {
+        this.__stack[ name ] = liveEvents
+      }
+      else {
+        delete this.__stack[ name ]
+      }
+    }
+
+    return this // chainable
+  }
+}

package/src/utils/extend.js

@@ -1,24 +1,21 @@
 const
   toString = Object.prototype.toString,
   hasOwn = Object.prototype.hasOwnProperty,
-  class2type = {}
-
-'Boolean Number String Function Array Date RegExp Object'.split(' ').forEach(name => {
-  class2type[ '[object ' + name + ']' ] = name.toLowerCase()
-})
-
-function type (obj) {
-  return obj === null ? String(obj) : class2type[ toString.call(obj) ] || 'object'
-}
+  notPlainObject = new Set(
+    [ 'Boolean', 'Number', 'String', 'Function', 'Array', 'Date', 'RegExp', 'Object' ]
+      .map(name => '[object ' + name + ']')
+  )
 
 function isPlainObject (obj) {
-  if (!obj || type(obj) !== 'object') {
+  if (obj !== Object(obj) || notPlainObject.has(toString.call(obj)) === true) {
     return false
   }
 
-  if (obj.constructor
-    && !hasOwn.call(obj, 'constructor')
-    && !hasOwn.call(obj.constructor.prototype, 'isPrototypeOf')) {
+  if (
+    obj.constructor
+    && hasOwn.call(obj, 'constructor') === false
+    && !hasOwn.call(obj.constructor.prototype, 'isPrototypeOf') === false
+  ) {
     return false
   }
 
@@ -42,7 +39,7 @@ export default function extend () {
     i = 2
   }
 
-  if (Object(target) !== target && type(target) !== 'function') {
+  if (Object(target) !== target && typeof target !== 'function') {
     target = {}
   }
 
@@ -61,13 +58,16 @@ export default function extend () {
           continue
         }
 
-        if (deep && copy && (isPlainObject(copy) || (copyIsArray = type(copy) === 'array'))) {
-          if (copyIsArray) {
-            copyIsArray = false
-            clone = src && type(src) === 'array' ? src : []
+        if (
+          deep === true
+          && copy
+          && ((copyIsArray = Array.isArray(copy)) || isPlainObject(copy) === true)
+        ) {
+          if (copyIsArray === true) {
+            clone = Array.isArray(src) === true ? src : []
           }
           else {
-            clone = src && isPlainObject(src) ? src : {}
+            clone = isPlainObject(src) === true ? src : {}
           }
 
           target[ name ] = extend(deep, clone, copy)