quasar 2.4.3 → 2.4.7

package/dist/ssr-directives/Morph.js

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

package/dist/types/index.d.ts

@@ -101,6 +101,10 @@ export interface BottomSheet {
        * Action label
        */
       label?: string | number;
+      /**
+       * Any other custom props
+       */
+      [key: string]: any;
     }[];
     /**
      * Display actions as a grid instead of as a list
@@ -469,7 +473,7 @@ export interface Notify {
            */
           icon?: string;
           /**
-           * URL to an avatar/image; Suggestion: use statics folder
+           * URL to an avatar/image; Suggestion: public folder
            */
           avatar?: string;
           /**
@@ -593,7 +597,7 @@ export interface Notify {
      */
     icon?: string;
     /**
-     * URL to an avatar/image; Suggestion: use statics folder
+     * URL to an avatar/image; Suggestion: use public folder
      */
     avatar?: string;
     /**
@@ -676,7 +680,7 @@ export interface Notify {
      */
     icon?: string;
     /**
-     * URL to an avatar/image; Suggestion: use statics folder
+     * URL to an avatar/image; Suggestion: use public folder
      */
     avatar?: string;
     /**
@@ -793,7 +797,7 @@ export interface Notify {
        */
       icon?: string;
       /**
-       * URL to an avatar/image; Suggestion: use statics folder
+       * URL to an avatar/image; Suggestion: use public folder
        */
       avatar?: string;
       /**
@@ -1151,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
    */
@@ -2442,7 +2452,7 @@ export interface QCarouselSlideProps {
    */
   disable?: boolean | undefined;
   /**
-   * URL pointing to a slide background image (use statics folder)
+   * URL pointing to a slide background image (use public folder)
    */
   imgSrc?: string | undefined;
 }
@@ -7211,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)
    */
@@ -13685,6 +13695,10 @@ declare module "./globals" {
          * Action label
          */
         label?: string | number;
+        /**
+         * Any other custom props
+         */
+        [key: string]: any;
       }[];
       /**
        * Display actions as a grid instead of as a list
@@ -13751,7 +13765,7 @@ declare module "./globals" {
              */
             icon?: string;
             /**
-             * URL to an avatar/image; Suggestion: use statics folder
+             * URL to an avatar/image; Suggestion: public folder
              */
             avatar?: string;
             /**
@@ -13875,7 +13889,7 @@ declare module "./globals" {
        */
       icon?: string;
       /**
-       * URL to an avatar/image; Suggestion: use statics folder
+       * URL to an avatar/image; Suggestion: use public folder
        */
       avatar?: string;
       /**

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",
@@ -789,7 +793,7 @@
   },
   "q-carousel-slide/img-src": {
     "type": "string",
-    "description": "URL pointing to a slide background image (use statics folder)"
+    "description": "URL pointing to a slide background image (use public folder)"
   },
   "q-chat-message/sent": {
     "type": "boolean",
@@ -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.3",
+  "version": "2.4.7",
   "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": [
@@ -2434,7 +2443,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL pointing to a slide background image (use statics folder)\n\nExamples:\n(statics folder) src=\"statics/img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL pointing to a slide background image (use public folder)\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
               "doc-url": "https://v2.quasar.dev/vue-components/carousel"
             }
           ],
@@ -2507,7 +2516,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image of the author\n\nExamples:\n(statics folder) src=\"statics/boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image of the author\n\nExamples:\n(public folder) src=\"boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
               "doc-url": "https://v2.quasar.dev/vue-components/chat"
             },
             {
@@ -7114,7 +7123,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Path to image\n\nExamples:\n(statics folder) src=\"statics/img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "Path to image\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
             },
             {
@@ -7141,7 +7150,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(statics folder) src=\"statics/img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(public folder) src=\"img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
             },
             {
@@ -10240,7 +10249,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Path to image (unless a 'media' slot is used)\n\nExamples:\n(statics folder) src=\"statics/img/something.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://some-site.net/some-img.jpg\"",
+              "description": "Path to image (unless a 'media' slot is used)\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://some-site.net/some-img.jpg\"",
               "doc-url": "https://v2.quasar.dev/vue-components/parallax"
             },
             {
@@ -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",
@@ -12534,7 +12543,7 @@
                 "kind": "expression",
                 "type": "any[]|string|object"
               },
-              "description": "Style definitions to be attributed to the popup content\n\nExamples:\nbackground-color: #ff0000\n:content-style=\"{ backgroundColor: '#ff0000' }\"",
+              "description": "Style definitions to be attributed to the popup content\n\nExamples:\nbackground-color: #ff0000\n:popup-content-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/select"
             },
             {
@@ -17214,7 +17223,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(statics folder) src=\"statics/img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
               "doc-url": "https://v2.quasar.dev/vue-components/timeline"
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.3",
+  "version": "2.4.7",
   "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/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\""