quasar 2.4.4 → 2.4.8

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.4
+ * Quasar Framework v2.4.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/index.d.ts

@@ -1155,14 +1155,20 @@ export interface QAjaxBarProps {
    * Color name for component from the Quasar Color Palette
    */
   color?: string | undefined;
+  /**
+   * Reverse direction of progress
+   */
+  reverse?: boolean | undefined;
   /**
    * Skip Ajax hijacking (not a reactive prop)
    */
   skipHijack?: boolean | undefined;
   /**
-   * Reverse direction of progress
+   * Filter which URL should trigger start() + stop()
+   * @param url The URL being triggered
+   * @returns Should the URL received as param trigger start() + stop()?
    */
-  reverse?: boolean | undefined;
+  hijackFilter?: ((url: string) => boolean) | undefined;
   /**
    * Emitted when bar is triggered to appear
    */
@@ -7215,7 +7221,7 @@ export interface QRadioProps {
   /**
    * The actual value of the option with which model value is changed
    */
-  val: number | string;
+  val: number | string | null | undefined;
   /**
    * Label to display along the radio control (or use the default slot instead of this prop)
    */

package/dist/vetur/quasar-attributes.json

@@ -11,13 +11,17 @@
     "type": "string",
     "description": "Color name for component from the Quasar Color Palette"
   },
+  "q-ajax-bar/reverse": {
+    "type": "boolean",
+    "description": "Reverse direction of progress"
+  },
   "q-ajax-bar/skip-hijack": {
     "type": "boolean",
     "description": "Skip Ajax hijacking (not a reactive prop)"
   },
-  "q-ajax-bar/reverse": {
-    "type": "boolean",
-    "description": "Reverse direction of progress"
+  "q-ajax-bar/hijack-filter": {
+    "type": "function",
+    "description": "Filter which URL should trigger start() + stop()"
   },
   "q-avatar/size": {
     "type": "string",
@@ -3372,7 +3376,7 @@
     "description": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive"
   },
   "q-radio/val": {
-    "type": "number|string",
+    "type": "number|string|null|undefined",
     "description": "The actual value of the option with which model value is changed"
   },
   "q-radio/label": {

package/dist/vetur/quasar-tags.json

@@ -4,8 +4,9 @@
       "position",
       "size",
       "color",
+      "reverse",
       "skip-hijack",
-      "reverse"
+      "hijack-filter"
     ],
     "description": ""
   },

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.4.4",
+  "version": "2.4.8",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -44,24 +44,33 @@
               "doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
             },
             {
-              "name": "skip-hijack",
+              "name": "reverse",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Skip Ajax hijacking (not a reactive prop)",
+              "description": "Reverse direction of progress",
               "doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
               "type": "boolean"
             },
             {
-              "name": "reverse",
+              "name": "skip-hijack",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Reverse direction of progress",
+              "description": "Skip Ajax hijacking (not a reactive prop)",
               "doc-url": "https://v2.quasar.dev/vue-components/ajax-bar",
               "type": "boolean"
+            },
+            {
+              "name": "hijack-filter",
+              "value": {
+                "kind": "expression",
+                "type": "Function"
+              },
+              "description": "Filter which URL should trigger start() + stop()",
+              "doc-url": "https://v2.quasar.dev/vue-components/ajax-bar"
             }
           ],
           "events": [
@@ -10853,7 +10862,7 @@
               "name": "val",
               "value": {
                 "kind": "expression",
-                "type": "number|string"
+                "type": "number|string|null|undefined"
               },
               "description": "The actual value of the option with which model value is changed\n\nExamples:\nopt1\n50",
               "doc-url": "https://v2.quasar.dev/vue-components/radio",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.4",
+  "version": "2.4.8",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

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/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,31 @@ 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', { 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', {
+            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', {
+            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
@@ -20,7 +19,8 @@
     align-items: center
     justify-content: center
 
-  > svg
+  > svg,
+  > img
     width: 100%
     height: 100%
 

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,55 @@ export default createComponent({
 
     provide(layoutKey, $layout)
 
+    // prevent scrollbar flicker while resizing window height
+    // if no page scrollbar is already present
+    if (__QUASAR_SSR_SERVER__ !== true && getScrollbarWidth() > 0) {
+      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 > $q.screen.height) {
+            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 ? 'add' : 'remove'),
+        updateScrollEvent
+      )
+
+      props.container !== true && updateScrollEvent('add')
+
+      onUnmounted(() => {
+        updateScrollEvent('remove')
+      })
+    }
+
     return () => {
       const content = hMergeSlot(slots.default, [
         h(QScrollObserver, { onScroll: onPageScroll }),

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/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 ],