quasar 2.14.4 → 2.14.6

package/src/components/img/QImg.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, onBeforeUnmount, Transition } from 'vue'
+import { h, ref, computed, watch, onMounted, Transition, getCurrentInstance } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
 
@@ -6,6 +6,8 @@ import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
+import useTimeout from '../../composables/private/use-timeout.js'
 
 const defaultRatio = 16 / 9
 
@@ -30,6 +32,11 @@ export default createComponent({
       type: String,
       default: 'lazy'
     },
+    loadingShowDelay: {
+      type: [ Number, String ],
+      default: 0
+    },
+
     fetchpriority: {
       type: String,
       default: 'auto'
@@ -68,8 +75,10 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const naturalRatio = ref(props.initialRatio)
     const ratioStyle = useRatio(props, naturalRatio)
+    const vm = getCurrentInstance()
 
-    let loadTimer = null, isDestroyed = false
+    const { registerTimeout: registerLoadTimeout, removeTimeout: removeLoadTimeout } = useTimeout()
+    const { registerTimeout: registerLoadShowTimeout, removeTimeout: removeLoadShowTimeout } = useTimeout()
 
     const images = [
       ref(null),
@@ -103,6 +112,24 @@ export default createComponent({
 
     watch(() => getCurrentSrc(), addImage)
 
+    function setLoading () {
+      removeLoadShowTimeout()
+
+      if (props.loadingShowDelay === 0) {
+        isLoading.value = true
+        return
+      }
+
+      registerLoadShowTimeout(() => {
+        isLoading.value = true
+      }, props.loadingShowDelay)
+    }
+
+    function clearLoading () {
+      removeLoadShowTimeout()
+      isLoading.value = false
+    }
+
     function getCurrentSrc () {
       return props.src || props.srcset || props.sizes
         ? {
@@ -120,74 +147,64 @@ export default createComponent({
     }
 
     function addImage (imgProps) {
-      if (loadTimer !== null) {
-        clearTimeout(loadTimer)
-        loadTimer = null
-      }
-
+      removeLoadTimeout()
       hasError.value = false
 
       if (imgProps === null) {
-        isLoading.value = false
+        clearLoading()
         images[ position.value ^ 1 ].value = getPlaceholderSrc()
       }
       else {
-        isLoading.value = true
+        setLoading()
       }
 
       images[ position.value ].value = imgProps
     }
 
     function onLoad ({ target }) {
-      if (isDestroyed === true) { return }
+      if (vmIsDestroyed(vm) === false) {
+        removeLoadTimeout()
 
-      if (loadTimer !== null) {
-        clearTimeout(loadTimer)
-        loadTimer = null
-      }
+        naturalRatio.value = target.naturalHeight === 0
+          ? 0.5
+          : target.naturalWidth / target.naturalHeight
 
-      naturalRatio.value = target.naturalHeight === 0
-        ? 0.5
-        : target.naturalWidth / target.naturalHeight
-
-      waitForCompleteness(target, 1)
+        waitForCompleteness(target, 1)
+      }
     }
 
     function waitForCompleteness (target, count) {
       // protect against running forever
-      if (isDestroyed === true || count === 1000) { return }
+      if (count === 1000 || vmIsDestroyed(vm) === true) return
 
       if (target.complete === true) {
         onReady(target)
       }
       else {
-        loadTimer = setTimeout(() => {
-          loadTimer = null
+        registerLoadTimeout(() => {
           waitForCompleteness(target, count + 1)
         }, 50)
       }
     }
 
     function onReady (img) {
-      if (isDestroyed === true) { return }
+      if (vmIsDestroyed(vm) === true) return
 
       position.value = position.value ^ 1
       images[ position.value ].value = null
-      isLoading.value = false
+      clearLoading()
       hasError.value = false
       emit('load', img.currentSrc || img.src)
     }
 
     function onError (err) {
-      if (loadTimer !== null) {
-        clearTimeout(loadTimer)
-        loadTimer = null
-      }
+      removeLoadTimeout()
+      clearLoading()
 
-      isLoading.value = false
       hasError.value = true
       images[ position.value ].value = null
       images[ position.value ^ 1 ].value = getPlaceholderSrc()
+
       emit('error', err)
     }
 
@@ -227,7 +244,7 @@ export default createComponent({
     }
 
     function getContent () {
-      if (isLoading.value !== true) {
+      if (isLoading.value === false) {
         return h('div', {
           key: 'content',
           class: 'q-img__content absolute-full q-anchor--skip'
@@ -262,15 +279,6 @@ export default createComponent({
       else {
         addImage(getCurrentSrc())
       }
-
-      onBeforeUnmount(() => {
-        isDestroyed = true
-
-        if (loadTimer !== null) {
-          clearTimeout(loadTimer)
-          loadTimer = null
-        }
-      })
     }
 
     return () => {

package/src/components/img/QImg.json

@@ -99,6 +99,15 @@
       "category": "behavior"
     },
 
+    "loading-show-delay": {
+      "type": [ "Number", "String" ],
+      "desc": "Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds",
+      "default": 0,
+      "examples": [ "500", "caption-lines=\"1000\"" ],
+      "category": "behavior",
+      "addedIn": "v2.14.6"
+    },
+
     "crossorigin": {
       "type": "String",
       "desc": "Same syntax as <img> crossorigin attribute",

package/src/components/inner-loading/QInnerLoading.js

@@ -33,7 +33,7 @@ export default createComponent({
     const { transitionProps, transitionStyle } = useTransition(props)
 
     const classes = computed(() =>
-      'q-inner-loading absolute-full column flex-center'
+      'q-inner-loading q--avoid-card-border absolute-full column flex-center'
       + (isDark.value === true ? ' q-inner-loading--dark' : '')
     )
 

package/src/components/inner-loading/QInnerLoading.sass

@@ -1,5 +1,6 @@
 .q-inner-loading
   background: $light-dimmed-background
+  border-radius: inherit
 
   &--dark
     background: $dimmed-background

package/src/components/input/use-mask.js

@@ -97,7 +97,7 @@ export default function (props, emit, emitValue, inputRef) {
     let pad = '', localMaskMarked = maskMarked
     const padPos = localMaskMarked.indexOf(MARKER)
 
-    if (padPos > -1) {
+    if (padPos !== -1) {
       for (let i = size - localMaskMarked.length; i > 0; i--) {
         pad += MARKER
       }
@@ -259,7 +259,7 @@ export default function (props, emit, emitValue, inputRef) {
         return
       }
 
-      if ([ 'deleteContentBackward', 'deleteContentForward' ].indexOf(inputType) > -1) {
+      if ([ 'deleteContentBackward', 'deleteContentForward' ].indexOf(inputType) !== -1) {
         const cursor = props.reverseFillMask === true
           ? (
               end === 0
@@ -525,7 +525,7 @@ export default function (props, emit, emitValue, inputRef) {
 
     let valIndex = val.length - 1, output = ''
 
-    for (let maskIndex = mask.length - 1; maskIndex >= 0 && valIndex > -1; maskIndex--) {
+    for (let maskIndex = mask.length - 1; maskIndex >= 0 && valIndex !== -1; maskIndex--) {
       const maskDef = mask[ maskIndex ]
 
       let valChar = val[ valIndex ]

package/src/components/menu/QMenu.json

@@ -63,7 +63,7 @@
 
     "persistent": {
       "type": "Boolean",
-      "desc": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key",
+      "desc": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won't dismiss it",
       "category": "behavior"
     },
 

package/src/components/no-ssr/QNoSsr.js

@@ -21,16 +21,16 @@ export default createComponent({
     const canRender = useCanRender()
 
     return () => {
-      const data = {}
-
       if (canRender.value === true) {
         const node = hSlot(slots.default)
         return node === void 0
           ? node
-          : (node.length > 1 ? h(props.tag, data, node) : node[ 0 ])
+          : (node.length > 1 ? h(props.tag, {}, node) : node[ 0 ])
       }
 
-      data.class = 'q-no-ssr-placeholder'
+      const data = {
+        class: 'q-no-ssr-placeholder'
+      }
 
       const node = hSlot(slots.placeholder)
       if (node !== void 0) {

package/src/components/page-sticky/use-page-sticky.js

@@ -33,10 +33,10 @@ export default function () {
     const pos = props.position
 
     return {
-      top: pos.indexOf('top') > -1,
-      right: pos.indexOf('right') > -1,
-      bottom: pos.indexOf('bottom') > -1,
-      left: pos.indexOf('left') > -1,
+      top: pos.indexOf('top') !== -1,
+      right: pos.indexOf('right') !== -1,
+      bottom: pos.indexOf('bottom') !== -1,
+      left: pos.indexOf('left') !== -1,
       vertical: pos === 'top' || pos === 'bottom',
       horizontal: pos === 'left' || pos === 'right'
     }

package/src/components/popup-edit/QPopupEdit.js

@@ -171,7 +171,7 @@ export default createComponent({
     })
 
     return () => {
-      if (props.disable === true) { return }
+      if (props.disable === true) return
 
       return h(QMenu, {
         ref: menuRef,

package/src/components/resize-observer/QResizeObserver.js

@@ -136,6 +136,7 @@ export default createComponent({
       return () => {
         if (canRender.value === true) {
           return h('object', {
+            class: 'q--avoid-card-border',
             style: resizeProps.style,
             tabindex: -1, // fix for Firefox
             type: 'text/html',

package/src/components/scroll-area/QScrollArea.js

@@ -394,7 +394,7 @@ export default createComponent({
     })
 
     onActivated(() => {
-      if (scrollPosition === null) { return }
+      if (scrollPosition === null) return
 
       const scrollTarget = targetRef.value
 

package/src/components/select/QSelect.js

@@ -446,7 +446,7 @@ export default createComponent({
     }
 
     function removeAtIndex (index) {
-      if (index > -1 && index < innerValue.value.length) {
+      if (index !== -1 && index < innerValue.value.length) {
         if (props.multiple === true) {
           const model = props.modelValue.slice()
           emit('remove', { index, value: model.splice(index, 1)[ 0 ] })
@@ -542,7 +542,7 @@ export default createComponent({
         model = props.modelValue.slice(),
         index = innerOptionsValue.value.findIndex(v => isDeepEqual(v, optValue))
 
-      if (index > -1) {
+      if (index !== -1) {
         emit('remove', { index, value: model.splice(index, 1)[ 0 ] })
       }
       else {
@@ -560,9 +560,9 @@ export default createComponent({
     }
 
     function setOptionIndex (index) {
-      if ($q.platform.is.desktop !== true) { return }
+      if ($q.platform.is.desktop !== true) return
 
-      const val = index > -1 && index < virtualScrollLength.value
+      const val = index !== -1 && index < virtualScrollLength.value
         ? index
         : -1
 
@@ -716,7 +716,7 @@ export default createComponent({
 
       const tabShouldSelect = e.shiftKey !== true
         && props.multiple !== true
-        && (optionIndex.value > -1 || newValueModeValid === true)
+        && (optionIndex.value !== -1 || newValueModeValid === true)
 
       // escape
       if (e.keyCode === 27) {
@@ -734,7 +734,7 @@ export default createComponent({
         e.target === void 0
         || e.target.id !== state.targetUid.value
         || state.editable.value !== true
-      ) { return }
+      ) return
 
       // down
       if (
@@ -828,7 +828,7 @@ export default createComponent({
           searchBuffer += char
         }
 
-        const searchRe = new RegExp('^' + searchBuffer.split('').map(l => (reEscapeList.indexOf(l) > -1 ? '\\' + l : l)).join('.*'), 'i')
+        const searchRe = new RegExp('^' + searchBuffer.split('').map(l => (reEscapeList.indexOf(l) !== -1 ? '\\' + l : l)).join('.*'), 'i')
 
         let index = optionIndex.value
 
@@ -862,11 +862,11 @@ export default createComponent({
         e.keyCode !== 13
         && (e.keyCode !== 32 || props.useInput === true || searchBuffer !== '')
         && (e.keyCode !== 9 || tabShouldSelect === false)
-      ) { return }
+      ) return
 
       e.keyCode !== 9 && stopAndPrevent(e)
 
-      if (optionIndex.value > -1 && optionIndex.value < optionsLength) {
+      if (optionIndex.value !== -1 && optionIndex.value < optionsLength) {
         toggleOption(props.options[ optionIndex.value ])
         return
       }

package/src/components/table/QTd.js

@@ -31,7 +31,7 @@ export default createComponent({
         || props.props.col
       )
 
-      if (col === void 0) { return }
+      if (col === void 0) return
 
       const { row } = props.props
 

package/src/components/table/QTh.js

@@ -34,7 +34,7 @@ export default createComponent({
 
       if (name) {
         col = props.props.colsMap[ name ]
-        if (col === void 0) { return }
+        if (col === void 0) return
       }
       else {
         col = props.props.col

package/src/components/tabs/QTabs.js

@@ -188,7 +188,7 @@ export default createComponent({
       // it can be called faster than component being initialized
       // so we need to protect against that case
       // (one example of such case is the docs release notes page)
-      if (domProps.value === void 0 || contentRef.value === null) { return }
+      if (domProps.value === void 0 || contentRef.value === null) return
 
       const
         size = domSize[ domProps.value.container ],
@@ -279,7 +279,7 @@ export default createComponent({
 
     function updateArrows () {
       const content = contentRef.value
-      if (content === null) { return }
+      if (content === null) return
 
       const
         rect = content.getBoundingClientRect(),
@@ -328,7 +328,7 @@ export default createComponent({
       )
 
       const len = tabs.length
-      if (len === 0) { return }
+      if (len === 0) return
 
       if (keyCode === 36) { // Home
         scrollToTabEl(tabs[ 0 ])

package/src/components/time/QTime.js

@@ -567,7 +567,7 @@ export default createComponent({
             ? validHours.value.values
             : validHours.value[ isAM.value === true ? 'am' : 'pm' ].values
 
-          if (values.length === 0) { return }
+          if (values.length === 0) return
 
           if (innerModel.value.hour === null) {
             setHour(values[ 0 ])
@@ -603,7 +603,7 @@ export default createComponent({
         if (validMinutes.value !== null) {
           const values = validMinutes.value.values
 
-          if (values.length === 0) { return }
+          if (values.length === 0) return
 
           if (innerModel.value.minute === null) {
             setMinute(values[ 0 ])
@@ -635,7 +635,7 @@ export default createComponent({
         if (validSeconds.value !== null) {
           const values = validSeconds.value.values
 
-          if (values.length === 0) { return }
+          if (values.length === 0) return
 
           if (innerModel.value.seconds === null) {
             setSecond(values[ 0 ])

package/src/components/tooltip/QTooltip.js

@@ -72,7 +72,9 @@ export default createComponent({
     hideDelay: {
       type: Number,
       default: 0
-    }
+    },
+
+    persistent: Boolean
   },
 
   emits: [
@@ -241,7 +243,7 @@ export default createComponent({
     }
 
     function configureAnchorEl () {
-      if (props.noParentEvent === true || anchorEl.value === null) { return }
+      if (props.noParentEvent === true || anchorEl.value === null) return
 
       const evts = $q.platform.is.mobile === true
         ? [

package/src/components/tooltip/QTooltip.json

@@ -96,6 +96,12 @@
       "desc": "Configure Tooltip to disappear with delay",
       "default": 0,
       "category": "behavior"
+    },
+
+    "persistent": {
+      "type": "Boolean",
+      "desc": "Prevents Tooltip from auto-closing when app's route changes",
+      "category": "behavior"
     }
   },
 

package/src/components/tree/QTree.js

@@ -129,7 +129,7 @@ export default createComponent({
         : (node, filter) => {
             const filt = filter.toLowerCase()
             return node[ props.labelKey ]
-            && node[ props.labelKey ].toLowerCase().indexOf(filt) > -1
+            && node[ props.labelKey ].toLowerCase().indexOf(filt) !== -1
           }
     ))
 

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

@@ -229,7 +229,7 @@ export function getRenderer (getPlugin, expose) {
   }
 
   function removeFile (file) {
-    if (props.disable) { return }
+    if (props.disable) return
 
     if (file.__status === 'uploaded') {
       state.uploadedFiles.value = state.uploadedFiles.value.filter(f => f.__key !== file.__key)
@@ -274,7 +274,7 @@ export function getRenderer (getPlugin, expose) {
       fileInput.value = ''
     }
 
-    if (localFiles === void 0) { return }
+    if (localFiles === void 0) return
 
     localFiles.forEach(file => {
       state.updateFileStatus(file, 'idle')

package/src/components/uploader/xhr-uploader-plugin.js

@@ -156,7 +156,7 @@ function injectPlugin ({ props, emit, helpers }) {
       aborted
 
     xhr.upload.addEventListener('progress', e => {
-      if (aborted === true) { return }
+      if (aborted === true) return
 
       const loaded = Math.min(maxUploadSize, e.loaded)
 

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

@@ -301,7 +301,7 @@ export function useVirtualScroll ({
       scrollDetails,
       Math.min(virtualScrollLength.value - 1, Math.max(0, parseInt(toIndex, 10) || 0)),
       0,
-      scrollToEdges.indexOf(edge) > -1 ? edge : (prevToIndex > -1 && toIndex > prevToIndex ? 'end' : 'start')
+      scrollToEdges.indexOf(edge) !== -1 ? edge : (prevToIndex !== -1 && toIndex > prevToIndex ? 'end' : 'start')
     )
   }
 
@@ -391,7 +391,7 @@ export function useVirtualScroll ({
   }
 
   function setVirtualScrollSliceRange (scrollEl, scrollDetails, toIndex, offset, align) {
-    const alignForce = typeof align === 'string' && align.indexOf('-force') > -1
+    const alignForce = typeof align === 'string' && align.indexOf('-force') !== -1
     const alignEnd = alignForce === true ? align.replace('-force', '') : align
     const alignRange = alignEnd !== void 0 ? alignEnd : 'start'
 
@@ -710,7 +710,7 @@ export function useVirtualScroll ({
   })
 
   onActivated(() => {
-    if (shouldActivate !== true) { return }
+    if (shouldActivate !== true) return
 
     const scrollEl = getVirtualScrollTarget()
 

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

@@ -153,7 +153,11 @@ describe('use-model-toggle API', () => {
         const fn = cy.stub()
         cy.mount(WrapperOne, {
           props: {
-            onHide: fn
+            onHide: fn,
+            // After the dialog has been closed, the hide event is fired only after transitionDuration.
+            // The default value for transitionDuration is 300ms. Hence, we cannot depend on the dialog closing
+            // to conclude that the event has been fired. So let's set it to 0 so that it fires immediately.
+            transitionDuration: 0
           }
         })
 
@@ -165,6 +169,9 @@ describe('use-model-toggle API', () => {
           .then(() => {
             expect(fn).not.to.be.called
           })
+
+        // We are clicking x distance from the left to ensure it always clicks on the body
+        // For some reason it some times does not work without it
         cy.get('body')
           .click(499, 0)
         cy.dataCy('menu')
@@ -174,11 +181,15 @@ describe('use-model-toggle API', () => {
           })
       })
 
-      it('should emit @hide event when component is triggered with the show() method', () => {
+      it('should emit @hide event when component is triggered with the hide() method', () => {
         const fn = cy.stub()
         cy.mount(WrapperOne, {
           props: {
-            onHide: fn
+            onHide: fn,
+            // After the dialog has been closed, the hide event is fired only after transitionDuration.
+            // The default value for transitionDuration is 300ms. Hence, we cannot depend on the dialog closing
+            // to conclude that the event has been fired. So let's set it to 0 so that it fires immediately.
+            transitionDuration: 0
           }
         })
 
@@ -199,6 +210,35 @@ describe('use-model-toggle API', () => {
             expect(fn).to.be.called
           })
       })
+
+      it('should emit @hide event after transition duration', () => {
+        const fn = cy.stub()
+        cy.mount(WrapperOne, {
+          props: {
+            onHide: fn,
+            transitionDuration: 500
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('method-show')
+          .click({ force: true })
+
+        cy.dataCy('wrapper')
+        cy.dataCy('method-hide')
+          .click({ force: true })
+
+        // eslint-disable-next-line cypress/no-unnecessary-waiting
+        cy.dataCy('menu')
+          .wait(300)
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+          .wait(500)
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
     })
 
     describe('(event): before-hide', () => {

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

@@ -101,7 +101,7 @@ export default function ({
     })
 
     configureAnchorEl = function (context = props.contextMenu) {
-      if (props.noParentEvent === true || anchorEl.value === null) { return }
+      if (props.noParentEvent === true || anchorEl.value === null) return
 
       let evts
 

package/src/composables/private/use-key-composition.js

@@ -8,7 +8,7 @@ const isPlainText = /[a-z0-9_ -]$/i
 export default function (onInput) {
   return function onComposition (e) {
     if (e.type === 'compositionend' || e.type === 'change') {
-      if (e.target.qComposing !== true) { return }
+      if (e.target.qComposing !== true) return
       e.target.qComposing = false
       onInput(e)
     }

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

@@ -162,7 +162,7 @@ export default function () {
   function goToPanelByOffset (direction, startIndex = panelIndex.value) {
     let index = startIndex + direction
 
-    while (index > -1 && index < panels.length) {
+    while (index !== -1 && index < panels.length) {
       const opt = panels[ index ]
 
       if (