quasar 1.16.2 → 1.17.2

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

@@ -6,22 +6,22 @@ import { ariaHidden } from '../../mixins/attrs'
 
 const
   xhr = isSSR ? null : XMLHttpRequest,
-  send = isSSR ? null : xhr.prototype.send,
-  stackStart = [],
-  stackStop = []
+  open = isSSR ? 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)` }
 }
@@ -47,32 +47,46 @@ 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 => {
+        const hijackFilter = entry.getHijackFilter()
+        if (
+          hijackFilter === null ||
+          hijackFilter(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) {
-    xhr.prototype.send = send
+    xhr.prototype.open = open
   }
 }
 
@@ -83,15 +97,19 @@ export default Vue.extend({
     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,
+    reverse: Boolean,
+
     skipHijack: Boolean,
-    reverse: Boolean
+    hijackFilter: Function
   },
 
   data () {
@@ -119,7 +137,7 @@ export default Vue.extend({
         active,
         horiz: this.horizontal,
         reverse: this.$q.lang.rtl === true && ['top', 'bottom'].includes(this.position)
-          ? !this.reverse
+          ? this.reverse === false
           : this.reverse,
         dir: this.$q.lang.rtl === true ? -1 : 1
       })
@@ -224,13 +242,17 @@ export default Vue.extend({
   mounted () {
     if (this.skipHijack !== true) {
       this.hijacked = true
-      highjackAjax(this.start, this.stop)
+      highjackAjax({
+        start: this.start,
+        stop: this.stop,
+        getHijackFilter: () => this.hijackFilter || null
+      })
     }
   },
 
   beforeDestroy () {
     clearTimeout(this.timer)
-    this.hijacked === true && restoreAjax(this.start, this.stop)
+    this.hijacked === true && restoreAjax(this.start)
   },
 
   render (h) {

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": "v1.17.2"
     }
   },
 

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -4,6 +4,8 @@ import AlignMixin from '../../mixins/align.js'
 import { slot } from '../../utils/slot.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
+const disabledValues = [ true, '' ]
+
 export default Vue.extend({
   name: 'QBreadcrumbs',
 
@@ -34,13 +36,13 @@ export default Vue.extend({
     },
 
     sepClass () {
-      if (this.separatorColor) {
-        return `text-${this.separatorColor}`
-      }
+      return this.separatorColor
+        ? ` text-${this.separatorColor}`
+        : ''
     },
 
     activeClass () {
-      return `text-${this.activeColor}`
+      return ` text-${this.activeColor}`
     }
   },
 
@@ -60,18 +62,20 @@ export default Vue.extend({
     nodes.forEach(comp => {
       if (comp.tag !== void 0 && comp.tag.endsWith('-QBreadcrumbsEl')) {
         const middle = els < len
+        const disabled = disabledValues.includes(comp.componentOptions.propsData.disable)
+        const cls = middle === true
+          ? (disabled !== true ? this.activeClass : '')
+          : ' q-breadcrumbs--last'
+
         els++
 
         child.push(h('div', {
-          staticClass: 'flex items-center',
-          class: middle ? this.activeClass : 'q-breadcrumbs--last'
+          staticClass: 'flex items-center' + cls
         }, [ comp ]))
 
-        if (middle) {
-          child.push(h('div', {
-            staticClass: 'q-breadcrumbs__separator', class: this.sepClass
-          }, separator()))
-        }
+        middle === true && child.push(h('div', {
+          staticClass: 'q-breadcrumbs__separator' + this.sepClass
+        }, separator()))
       }
       else {
         child.push(comp)

package/src/components/breadcrumbs/QBreadcrumbs.sass

@@ -9,8 +9,5 @@
     &--with-label
       margin-right: 8px
 
-  &--last a
-    pointer-events: none
-
 [dir=rtl] .q-breadcrumbs__separator .q-icon
   transform: scaleX(-1) #{"/* rtl:ignore */"}

package/src/components/breadcrumbs/QBreadcrumbs.styl

@@ -9,8 +9,5 @@
     &--with-label
       margin-right: 8px
 
-  &--last a
-    pointer-events: none
-
 [dir=rtl] .q-breadcrumbs__separator .q-icon
   transform: scaleX(-1) /* rtl:ignore */

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -2,9 +2,9 @@ import Vue from 'vue'
 
 import { mergeSlot } from '../../utils/slot.js'
 import ListenersMixin from '../../mixins/listeners.js'
+import RouterLinkMixin from '../../mixins/router-link.js'
 
 import QIcon from '../icon/QIcon.js'
-import { RouterLinkMixin } from '../../mixins/router-link.js'
 
 export default Vue.extend({
   name: 'QBreadcrumbsEl',
@@ -16,23 +16,39 @@ export default Vue.extend({
     icon: String
   },
 
+  computed: {
+    iconClass () {
+      return 'q-breadcrumbs__el-icon' +
+        (this.label !== void 0 ? ' q-breadcrumbs__el-icon--with-label' : '')
+    },
+
+    renderData () {
+      return {
+        staticClass: 'q-breadcrumbs__el q-link ' +
+          'flex inline items-center relative-position ' +
+          (this.disable !== true ? 'q-link--focusable' : 'q-breadcrumbs__el--disabled'),
+        ...this.linkProps,
+        [this.hasRouterLink === true ? 'nativeOn' : 'on']: { ...this.qListeners }
+      }
+    }
+  },
+
+  beforeCreate () {
+    this.fallbackTag = 'span'
+  },
+
   render (h) {
     const child = []
 
     this.icon !== void 0 && child.push(
       h(QIcon, {
-        staticClass: 'q-breadcrumbs__el-icon',
-        class: this.label !== void 0 ? 'q-breadcrumbs__el-icon--with-label' : null,
+        class: this.iconClass,
         props: { name: this.icon }
       })
     )
 
-    this.label && child.push(this.label)
+    this.label !== void 0 && child.push(this.label)
 
-    return h(this.hasRouterLink === true ? 'router-link' : 'span', {
-      staticClass: 'q-breadcrumbs__el q-link flex inline items-center relative-position',
-      props: this.hasRouterLink === true ? this.routerLinkProps : null,
-      [this.hasRouterLink === true ? 'nativeOn' : 'on']: { ...this.qListeners }
-    }, mergeSlot(child, this, 'default'))
+    return h(this.linkTag, this.renderData, mergeSlot(child, this, 'default'))
   }
 })

package/src/components/btn/QBtn.js

@@ -37,7 +37,7 @@ export default Vue.extend({
       return this.ripple === false
         ? false
         : {
-          keyCodes: this.isLink === true ? [ 13, 32 ] : [ 13 ],
+          keyCodes: this.hasLink === true ? [ 13, 32 ] : [ 13 ],
           ...(this.ripple === true ? {} : this.ripple)
         }
     },
@@ -147,7 +147,7 @@ export default Vue.extend({
         // vue-router now throwing error if navigating
         // to the same route that the user is currently at
         // https://github.com/vuejs/vue-router/issues/2872
-        this.$router[this.replace === true ? 'replace' : 'push'](this.currentLocation.route, void 0, noop)
+        this.$router[this.replace === true ? 'replace' : 'push'](this.linkRoute.route, void 0, noop)
       }
 
       this.$emit('click', e, go)
@@ -346,7 +346,7 @@ export default Vue.extend({
       ] : void 0)
     )
 
-    return h(this.isLink === true ? 'a' : 'button', {
+    return h(this.hasLink === true || this.type === 'a' ? 'a' : 'button', {
       staticClass: 'q-btn q-btn-item non-selectable no-outline',
       class: this.classes,
       style: this.style,

package/src/components/btn-dropdown/QBtnDropdown.sass

@@ -1,5 +1,7 @@
 .q-btn-dropdown
   &--split .q-btn-dropdown__arrow-container
+    &.q-btn--outline
+      border-left: 1px solid currentColor
     &:not(.q-btn--outline)
       border-left: 1px solid rgba(255,255,255,.3)
 

package/src/components/btn-dropdown/QBtnDropdown.styl

@@ -1,5 +1,7 @@
 .q-btn-dropdown
   &--split .q-btn-dropdown__arrow-container
+    &.q-btn--outline
+      border-left: 1px solid currentColor
     &:not(.q-btn--outline)
       border-left: 1px solid rgba(255,255,255,.3)
 

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

@@ -87,7 +87,10 @@ export default Vue.extend({
             ...this.qListeners,
             click: e => this.__set(opt.value, opt, e)
           },
-          attrs: opt.attrs,
+          attrs: {
+            'aria-pressed': opt.value === this.value ? 'true' : 'false',
+            ...opt.attrs
+          },
           props: {
             ...opt,
             slot: void 0,

package/src/components/carousel/QCarousel.js

@@ -127,9 +127,13 @@ export default Vue.extend({
 
   methods: {
     __startTimer () {
+      const duration = isNumber(this.autoplay) === true
+        ? this.autoplay
+        : 5000
+
       this.timer = setTimeout(
-        this.next,
-        isNumber(this.autoplay) ? this.autoplay : 5000
+        duration >= 0 ? this.next : this.previous,
+        Math.abs(duration)
       )
     },
 

package/src/components/carousel/QCarousel.json

@@ -47,7 +47,7 @@
 
     "autoplay": {
       "type": [ "Number", "Boolean" ],
-      "desc": "Jump to next slide at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
+      "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
       "default": false,
       "examples": [
         ":autoplay=\"2500\"",
@@ -101,6 +101,14 @@
       "type": "Boolean",
       "desc": "Show thumbnails",
       "category": "content"
+    },
+
+    "transition-prev": {
+      "default": "fade"
+    },
+
+    "transition-next": {
+      "default": "fade"
     }
   },
 

package/src/components/carousel/QCarouselSlide.json

@@ -20,10 +20,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

@@ -45,7 +45,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/color/QColor.js

@@ -33,6 +33,9 @@ const palette = [
   'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
 ]
 
+const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
+const alphaTrackImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg=='
+
 export default Vue.extend({
   name: 'QColor',
 
@@ -61,6 +64,7 @@ export default Vue.extend({
     palette: Array,
 
     noHeader: Boolean,
+    noHeaderTabs: Boolean,
     noFooter: Boolean,
 
     square: Boolean,
@@ -228,71 +232,78 @@ export default Vue.extend({
 
   methods: {
     __getHeader (h) {
-      return h('div', {
-        staticClass: 'q-color-picker__header relative-position overflow-hidden'
-      }, [
-        h('div', { staticClass: 'q-color-picker__header-bg absolute-full' }),
+      const child = []
 
-        h('div', {
-          staticClass: 'q-color-picker__header-content absolute-full',
-          class: this.headerClass,
-          style: this.currentBgColor
+      this.noHeaderTabs !== true && child.push(
+        h(QTabs, {
+          class: 'q-color-picker__header-tabs',
+          props: {
+            value: this.topView,
+            dense: true,
+            align: 'justify'
+          },
+          on: cache(this, 'topVTab', {
+            input: val => { this.topView = val }
+          })
         }, [
-          h(QTabs, {
+          h(QTab, {
             props: {
-              value: this.topView,
-              dense: true,
-              align: 'justify'
-            },
-            on: cache(this, 'topVTab', {
-              input: val => { this.topView = val }
-            })
-          }, [
-            h(QTab, {
-              props: {
-                label: 'HEX' + (this.hasAlpha === true ? 'A' : ''),
-                name: 'hex',
-                ripple: false
-              }
-            }),
+              label: 'HEX' + (this.hasAlpha === true ? 'A' : ''),
+              name: 'hex',
+              ripple: false
+            }
+          }),
 
-            h(QTab, {
-              props: {
-                label: 'RGB' + (this.hasAlpha === true ? 'A' : ''),
-                name: 'rgb',
-                ripple: false
+          h(QTab, {
+            props: {
+              label: 'RGB' + (this.hasAlpha === true ? 'A' : ''),
+              name: 'rgb',
+              ripple: false
+            }
+          })
+        ])
+      )
+
+      child.push(
+        h('div', {
+          staticClass: 'q-color-picker__header-banner row flex-center no-wrap'
+        }, [
+          h('input', {
+            staticClass: 'fit',
+            domProps: { value: this.model[this.topView] },
+            attrs: this.editable !== true ? {
+              readonly: true
+            } : null,
+            on: cache(this, 'topIn', {
+              input: evt => {
+                this.__updateErrorIcon(this.__onEditorChange(evt) === true)
+              },
+              change: stop,
+              blur: evt => {
+                this.__onEditorChange(evt, true) === true && this.$forceUpdate()
+                this.__updateErrorIcon(false)
               }
             })
-          ]),
-
-          h('div', {
-            staticClass: 'q-color-picker__header-banner row flex-center no-wrap'
-          }, [
-            h('input', {
-              staticClass: 'fit',
-              domProps: { value: this.model[this.topView] },
-              attrs: this.editable !== true ? {
-                readonly: true
-              } : null,
-              on: cache(this, 'topIn', {
-                input: evt => {
-                  this.__updateErrorIcon(this.__onEditorChange(evt) === true)
-                },
-                change: stop,
-                blur: evt => {
-                  this.__onEditorChange(evt, true) === true && this.$forceUpdate()
-                  this.__updateErrorIcon(false)
-                }
-              })
-            }),
+          }),
 
-            h(QIcon, {
-              ref: 'errorIcon',
-              staticClass: 'q-color-picker__error-icon absolute no-pointer-events',
-              props: { name: this.$q.iconSet.type.negative }
-            })
-          ])
+          h(QIcon, {
+            ref: 'errorIcon',
+            staticClass: 'q-color-picker__error-icon absolute no-pointer-events',
+            props: { name: this.$q.iconSet.type.negative }
+          })
         ])
+      )
+
+      return h('div', {
+        staticClass: 'q-color-picker__header relative-position overflow-hidden'
+      }, [
+        h('div', { staticClass: 'q-color-picker__header-bg absolute-full' }),
+
+        h('div', {
+          staticClass: 'q-color-picker__header-content',
+          class: this.headerClass,
+          style: this.currentBgColor
+        }, child)
       ])
     },
 
@@ -363,8 +374,6 @@ export default Vue.extend({
     },
 
     __getSpectrumTab (h) {
-      const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
-
       return [
         h('div', {
           ref: 'spectrum',
@@ -403,39 +412,45 @@ export default Vue.extend({
         h('div', {
           staticClass: 'q-color-picker__sliders'
         }, [
-          h('div', { staticClass: 'q-color-picker__hue non-selectable' }, [
-            h(QSlider, {
+          h(QSlider, {
+            staticClass: 'q-color-picker__hue non-selectable',
+            props: {
+              value: this.model.h,
+              min: 0,
+              max: 360,
+              trackSize: '8px',
+              innerTrackColor: 'transparent',
+              selectionColor: 'transparent',
+              readonly: this.editable !== true,
+              thumbPath
+            },
+            on: cache(this, 'hueSlide', {
+              input: this.__onHueChange,
+              change: val => this.__onHueChange(val, true)
+            })
+          }),
+
+          this.hasAlpha === true
+            ? h(QSlider, {
+              staticClass: 'q-color-picker__alpha non-selectable',
               props: {
-                value: this.model.h,
+                value: this.model.a,
                 min: 0,
-                max: 360,
-                fillHandleAlways: true,
+                max: 100,
+                trackSize: '8px',
+                trackColor: 'white',
+                innerTrackColor: 'transparent',
+                selectionColor: 'transparent',
+                trackImg: alphaTrackImg,
                 readonly: this.editable !== true,
+                hideSelection: true,
                 thumbPath
               },
-              on: cache(this, 'hueSlide', {
-                input: this.__onHueChange,
-                change: val => this.__onHueChange(val, true)
+              on: cache(this, 'alphaSlide', {
+                input: value => this.__onNumericChange(value, 'a', 100),
+                change: value => this.__onNumericChange(value, 'a', 100, void 0, true)
               })
             })
-          ]),
-          this.hasAlpha === true
-            ? h('div', { staticClass: 'q-color-picker__alpha non-selectable' }, [
-              h(QSlider, {
-                props: {
-                  value: this.model.a,
-                  min: 0,
-                  max: 100,
-                  fillHandleAlways: true,
-                  readonly: this.editable !== true,
-                  thumbPath
-                },
-                on: cache(this, 'alphaSlide', {
-                  input: value => this.__onNumericChange(value, 'a', 100),
-                  change: value => this.__onNumericChange(value, 'a', 100, void 0, true)
-                })
-              })
-            ])
             : null
         ])
       ]