quasar 2.4.2 → 2.4.6

package/src/components/ajax-bar/QAjaxBar.js

@@ -5,22 +5,22 @@ import { between } from '../../utils/format.js'
 
 const
   xhr = __QUASAR_SSR_SERVER__ ? null : XMLHttpRequest,
-  send = __QUASAR_SSR_SERVER__ ? null : xhr.prototype.send,
-  stackStart = [],
-  stackStop = []
+  open = __QUASAR_SSR_SERVER__ ? null : xhr.prototype.open,
+  positionValues = [ 'top', 'right', 'bottom', 'left' ]
 
+let stack = []
 let highjackCount = 0
 
 function translate ({ p, pos, active, horiz, reverse, dir }) {
   let x = 1, y = 1
 
-  if (horiz) {
-    if (reverse) { x = -1 }
+  if (horiz === true) {
+    if (reverse === true) { x = -1 }
     if (pos === 'bottom') { y = -1 }
     return { transform: `translate3d(${ x * (p - 100) }%,${ active ? 0 : y * -200 }%,0)` }
   }
 
-  if (reverse) { y = -1 }
+  if (reverse === true) { y = -1 }
   if (pos === 'right') { x = -1 }
   return { transform: `translate3d(${ active ? 0 : dir * x * -200 }%,${ y * (p - 100) }%,0)` }
 }
@@ -46,32 +46,45 @@ function inc (p, amount) {
   return between(p + amount, 0, 100)
 }
 
-function highjackAjax (start, stop) {
-  stackStart.push(start)
-  stackStop.push(stop)
-
+function highjackAjax (stackEntry) {
   highjackCount++
 
+  stack.push(stackEntry)
+
   if (highjackCount > 1) { return }
 
-  function endHandler () {
-    stackStop.forEach(fn => { fn() })
-  }
+  xhr.prototype.open = function (_, url) {
+    const stopStack = []
+
+    const loadStart = () => {
+      stack.forEach(entry => {
+        if (
+          entry.hijackFilter.value === null
+          || (entry.hijackFilter.value(url) === true)
+        ) {
+          entry.start()
+          stopStack.push(entry.stop)
+        }
+      })
+    }
 
-  xhr.prototype.send = function (/* ...args */) {
-    stackStart.forEach(fn => { fn() })
-    this.addEventListener('loadend', endHandler, false)
-    send.apply(this, arguments)
+    const loadEnd = () => {
+      stopStack.forEach(stop => { stop() })
+    }
+
+    this.addEventListener('loadstart', loadStart, { once: true })
+    this.addEventListener('loadend', loadEnd, { once: true })
+
+    open.apply(this, arguments)
   }
 }
 
-function restoreAjax (start, stop) {
-  stackStart.splice(stackStart.indexOf(start), 1)
-  stackStop.splice(stackStop.indexOf(stop), 1)
+function restoreAjax (start) {
+  stack = stack.filter(entry => entry.start !== start)
 
   highjackCount = Math.max(0, highjackCount - 1)
   if (highjackCount === 0) {
-    xhr.prototype.send = send
+    xhr.prototype.open = open
   }
 }
 
@@ -82,15 +95,19 @@ export default createComponent({
     position: {
       type: String,
       default: 'top',
-      validator: val => [ 'top', 'right', 'bottom', 'left' ].includes(val)
+      validator: val => positionValues.includes(val)
     },
+
     size: {
       type: String,
       default: '2px'
     },
+
     color: String,
     skipHijack: Boolean,
-    reverse: Boolean
+    reverse: Boolean,
+
+    hijackFilter: Function
   },
 
   emits: [ 'start', 'stop' ],
@@ -122,7 +139,7 @@ export default createComponent({
         active,
         horiz: horizontal.value,
         reverse: proxy.$q.lang.rtl === true && [ 'top', 'bottom' ].includes(props.position)
-          ? !props.reverse
+          ? props.reverse === false
           : props.reverse,
         dir: proxy.$q.lang.rtl === true ? -1 : 1
       })
@@ -218,13 +235,17 @@ export default createComponent({
     onMounted(() => {
       if (props.skipHijack !== true) {
         hijacked = true
-        highjackAjax(start, stop)
+        highjackAjax({
+          start,
+          stop,
+          hijackFilter: computed(() => props.hijackFilter || null)
+        })
       }
     })
 
     onBeforeUnmount(() => {
       clearTimeout(timer)
-      hijacked === true && restoreAjax(start, stop)
+      hijacked === true && restoreAjax(start)
     })
 
     // expose public methods

package/src/components/ajax-bar/QAjaxBar.json

@@ -22,16 +22,34 @@
       "extends": "color"
     },
 
-    "skip-hijack": {
+    "reverse": {
       "type": "Boolean",
-      "desc": "Skip Ajax hijacking (not a reactive prop)",
+      "desc": "Reverse direction of progress",
       "category": "behavior"
     },
 
-    "reverse": {
+    "skip-hijack": {
       "type": "Boolean",
-      "desc": "Reverse direction of progress",
+      "desc": "Skip Ajax hijacking (not a reactive prop)",
       "category": "behavior"
+    },
+
+    "hijack-filter": {
+      "type": "Function",
+      "desc": "Filter which URL should trigger start() + stop()",
+      "params": {
+        "url": {
+          "type": "String",
+          "desc": "The URL being triggered",
+          "examples": [ "https://some.url/path" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "Should the URL received as param trigger start() + stop()?"
+      },
+      "category": "behavior",
+      "addedIn": "v2.4.5"
     }
   },
 

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -40,7 +40,7 @@ export default createComponent({
     )
 
     const sepClass = computed(() => (props.separatorColor ? ` text-${ props.separatorColor }` : ''))
-    const activeClass = computed(() => `text-${ props.activeColor }`)
+    const activeClass = computed(() => ` text-${ props.activeColor }`)
 
     return () => {
       const vnodes = getNormalizedVNodes(
@@ -62,8 +62,8 @@ export default createComponent({
         if (comp.type !== void 0 && comp.type.name === 'QBreadcrumbsEl') {
           const middle = els < len
           const disabled = comp.props !== null && disabledValues.includes(comp.props.disable)
-          const cls = (middle === true ? ' q-breadcrumbs--last' : '')
-            + (disabled !== true && middle === true ? ' ' + activeClass.value : '')
+          const cls = (middle === true ? '' : ' q-breadcrumbs--last')
+            + (disabled !== true && middle === true ? activeClass.value : '')
 
           els++
 

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -22,13 +22,13 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const { linkTag, linkProps, hasRouterLink, navigateToRouterLink } = useRouterLink()
+    const { linkTag, linkProps, linkClass, hasRouterLink, navigateToRouterLink } = useRouterLink()
 
     const data = computed(() => {
       const acc = {
         class: 'q-breadcrumbs__el q-link '
           + 'flex inline items-center relative-position '
-          + (props.disable !== true ? 'q-link--focusable' : 'q-breadcrumbs__el--disable'),
+          + (props.disable !== true ? 'q-link--focusable' + linkClass.value : 'q-breadcrumbs__el--disable'),
         ...linkProps.value
       }
       if (hasRouterLink.value === true) {

package/src/components/btn/use-btn.js

@@ -129,7 +129,10 @@ export default function (props) {
     }
 
     if (linkTag.value === 'a') {
-      if (acc.href === void 0) {
+      if (props.disable === true) {
+        acc[ 'aria-disabled' ] = 'true'
+      }
+      else if (acc.href === void 0) {
         acc.role = 'button'
       }
       if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {

package/src/components/btn-toggle/QBtnToggle.js

@@ -89,6 +89,8 @@ export default createComponent({
           key: i,
           onClick (e) { set(value, item, e) },
 
+          'aria-pressed': value === props.modelValue ? 'true' : 'false',
+
           ...attrs,
           ...opt,
 

package/src/components/carousel/QCarouselSlide.json

@@ -16,10 +16,10 @@
 
     "img-src": {
       "type": "String",
-      "desc": "URL pointing to a slide background image (use statics folder)",
+      "desc": "URL pointing to a slide background image (use public folder)",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/my-bg.png\"",
+        "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

package/src/components/chat/QChatMessage.json

@@ -41,7 +41,7 @@
       "desc": "URL to the avatar image of the author",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/boy-avatar.png\"",
+        "(public folder) src=\"boy-avatar.png\"",
         "(assets folder) src=\"~assets/boy-avatar.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

package/src/components/dialog/QDialog.js

@@ -94,7 +94,7 @@ export default createComponent({
 
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
 
     const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
@@ -193,7 +193,6 @@ export default createComponent({
       if (props.noFocus !== true) {
         document.activeElement !== null && document.activeElement.blur()
         registerTick(focus)
-        prepareTick()
       }
 
       registerTimeout(() => {
@@ -239,6 +238,7 @@ export default createComponent({
 
       if (refocusTarget !== null) {
         refocusTarget.focus()
+        refocusTarget = null
       }
 
       registerTimeout(() => {
@@ -306,6 +306,10 @@ export default createComponent({
           removeEscapeKey(onEscapeKey)
         }
       }
+
+      if (hiding !== true) {
+        refocusTarget = null
+      }
     }
 
     function updateMaximized (active) {
@@ -364,9 +368,7 @@ export default createComponent({
       }
     })
 
-    onBeforeUnmount(() => {
-      cleanup()
-    })
+    onBeforeUnmount(cleanup)
 
     function renderPortalContent () {
       return h('div', {

package/src/components/icon/QIcon.js

@@ -5,6 +5,8 @@ import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 
+const defaultViewBox = '0 0 24 24'
+
 const sameFn = i => i
 const ionFn = i => `ionicons ${ i }`
 
@@ -58,7 +60,7 @@ export default createComponent({
 
     const classes = computed(() =>
       'q-icon'
-      + (props.left === true ? ' on-left' : '')
+      + (props.left === true ? ' on-left' : '') // TODO Qv3: drop this
       + (props.right === true ? ' on-right' : '')
       + (props.color !== void 0 ? ` text-${ props.color }` : '')
     )
@@ -68,10 +70,7 @@ export default createComponent({
       let icon = props.name
 
       if (!icon) {
-        return {
-          none: true,
-          cls: classes.value
-        }
+        return { none: true }
       }
 
       if ($q.iconMapFn !== null) {
@@ -82,7 +81,7 @@ export default createComponent({
           }
           else {
             return {
-              cls: res.cls + ' ' + classes.value,
+              cls: res.cls,
               content: res.content !== void 0
                 ? res.content
                 : ' '
@@ -92,39 +91,32 @@ export default createComponent({
       }
 
       if (mRE.test(icon) === true) {
-        const [ def, viewBox ] = icon.split('|')
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svg: true,
-          cls: classes.value,
+          viewBox,
           nodes: def.split('&&').map(path => {
             const [ d, style, transform ] = path.split('@@')
-            return h('path', {
-              style,
-              d,
-              transform
-            })
-          }),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+            return h('path', { style, d, transform })
+          })
         }
       }
 
       if (imgRE.test(icon) === true) {
         return {
           img: true,
-          cls: classes.value,
           src: icon.substring(4)
         }
       }
 
       if (svgUseRE.test(icon) === true) {
-        const [ def, viewBox ] = icon.split('|')
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svguse: true,
-          cls: classes.value,
           src: def.substring(7),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+          viewBox
         }
       }
 
@@ -158,14 +150,14 @@ export default createComponent({
       }
 
       return {
-        cls: cls + ' ' + classes.value,
+        cls,
         content
       }
     })
 
     return () => {
       const data = {
-        class: type.value.cls,
+        class: classes.value,
         style: sizeStyle.value,
         'aria-hidden': 'true',
         role: 'presentation'
@@ -176,24 +168,36 @@ export default createComponent({
       }
 
       if (type.value.img === true) {
-        data.src = type.value.src
-        return h('img', data)
+        return h('div', data, hMergeSlot(slots.default, [
+          h('img', {
+            class: type.value.cls,
+            src: type.value.src
+          })
+        ]))
       }
 
       if (type.value.svg === true) {
-        data.viewBox = type.value.viewBox
-
-        return h('svg', data, hMergeSlot(slots.default, type.value.nodes))
+        return h('div', data, hMergeSlot(slots.default, [
+          h('svg', {
+            class: type.value.cls,
+            viewBox: type.value.viewBox
+          }, type.value.nodes)
+        ]))
       }
 
       if (type.value.svguse === true) {
-        data.viewBox = type.value.viewBox
+        return h('div', data, hMergeSlot(slots.default, [
+          h('svg', {
+            class: type.value.cls,
+            viewBox: type.value.viewBox
+          }, [
+            h('use', { 'xlink:href': type.value.src })
+          ])
+        ]))
+      }
 
-        return h(
-          'svg',
-          data,
-          hMergeSlot(slots.default, [ h('use', { 'xlink:href': type.value.src }) ])
-        )
+      if (type.value.cls !== void 0) {
+        data.class += ' ' + type.value.cls
       }
 
       return h(props.tag, data, hMergeSlot(slots.default, [

package/src/components/icon/QIcon.sass

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after

package/src/components/img/QImg.json

@@ -11,7 +11,7 @@
       "desc": "Path to image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.gif\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""
@@ -44,7 +44,7 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/some-placeholder.png\"",
+        "(public folder) src=\"img/some-placeholder.png\"",
         "(assets folder) src=\"~assets/my-placeholder.gif\"",
         "(relative path format) :src=\"require('./placeholder.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""

package/src/components/layout/QLayout.js

@@ -1,4 +1,4 @@
-import { h, ref, reactive, computed, provide, getCurrentInstance } from 'vue'
+import { h, ref, reactive, computed, watch, provide, onUnmounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -173,6 +173,54 @@ export default createComponent({
 
     provide(layoutKey, $layout)
 
+    // prevent scrollbar flicker while resizing window height
+    // if no page scrollbar is already present
+    if (__QUASAR_SSR__ !== true) {
+      let timer = null
+      const el = document.body
+
+      function restoreScrollbar () {
+        timer = null
+        el.classList.remove('hide-scrollbar')
+      }
+
+      function hideScrollbar () {
+        if (timer === null) {
+          // if it has no scrollbar then there's nothing to do
+
+          if (el.scrollHeight > window.innerHeight) {
+            return
+          }
+
+          el.classList.add('hide-scrollbar')
+        }
+        else {
+          clearTimeout(timer)
+        }
+
+        timer = setTimeout(restoreScrollbar, 300)
+      }
+
+      function updateScrollEvent (action) {
+        if (timer !== null && action === 'remove') {
+          clearTimeout(timer)
+          restoreScrollbar()
+        }
+
+        window[ `${ action }EventListener` ]('resize', hideScrollbar)
+      }
+
+      watch(
+        () => (props.container !== true && scrollbarWidth.value > 0 ? 'add' : 'remove'),
+        updateScrollEvent,
+        { immediate: true }
+      )
+
+      onUnmounted(() => {
+        updateScrollEvent('remove')
+      })
+    }
+
     return () => {
       const content = hMergeSlot(slots.default, [
         h(QScrollObserver, { onScroll: onPageScroll }),

package/src/components/linear-progress/QLinearProgress.json

@@ -70,7 +70,7 @@
 
     "animation-speed": {
       "extends": "animation-speed",
-      "default": 300,
+      "default": 2100,
       "addedIn": "v2.3"
     }
   },

package/src/components/menu/QMenu.js

@@ -98,7 +98,7 @@ export default createComponent({
     )
 
     const isDark = useDark(props, $q)
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
     const { registerTimeout, removeTimeout } = useTimeout()
     const { transition, transitionStyle } = useTransition(props, showing)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
@@ -225,7 +225,6 @@ export default createComponent({
         updatePosition()
         props.noFocus !== true && focus()
       })
-      prepareTick()
 
       registerTimeout(() => {
         // required in order to avoid the "double-tap needed" issue
@@ -258,6 +257,7 @@ export default createComponent({
         )
       ) {
         refocusTarget.focus()
+        refocusTarget = null
       }
 
       registerTimeout(() => {
@@ -280,6 +280,10 @@ export default createComponent({
         removeClickOutside(clickOutsideProps)
         removeEscapeKey(onEscapeKey)
       }
+
+      if (hiding !== true) {
+        refocusTarget = null
+      }
     }
 
     function configureScrollTarget () {

package/src/components/pagination/QPagination.js

@@ -309,8 +309,8 @@ export default createComponent({
             style,
             disable: props.disable,
             flat: !active,
-            textColor: active ? props.textColor : void 0,
-            label: props.min
+            label: props.min,
+            ...(active ? activeBtnProps.value : {})
           }, props.min))
         }
         if (boundaryEnd) {
@@ -320,8 +320,8 @@ export default createComponent({
             style,
             disable: props.disable,
             flat: !active,
-            textColor: active ? props.textColor : void 0,
-            label: props.max
+            label: props.max,
+            ...(active ? activeBtnProps.value : {})
           }, props.max))
         }
         if (ellipsesStart) {

package/src/components/parallax/QParallax.json

@@ -9,7 +9,7 @@
       "desc": "Path to image (unless a 'media' slot is used)",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://some-site.net/some-img.jpg\""

package/src/components/radio/QRadio.js

@@ -33,12 +33,8 @@ export default createComponent({
     ...useSizeProps,
     ...useFormProps,
 
-    modelValue: {
-      required: true
-    },
-    val: {
-      required: true
-    },
+    modelValue: { required: true },
+    val: { required: true },
 
     label: String,
     leftLabel: Boolean,

package/src/components/radio/QRadio.json

@@ -13,7 +13,7 @@
     },
 
     "val": {
-      "type": [ "Number", "String" ],
+      "type": [ "Number", "String", "null", "undefined" ],
       "required": true,
       "desc": "The actual value of the option with which model value is changed",
       "examples": [ "opt1", 50 ],