quasar 1.16.0 → 1.17.0

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

package/src/components/color/QColor.json

@@ -71,6 +71,13 @@
       "category": "content"
     },
 
+    "no-header-tabs": {
+      "type": "Boolean",
+      "desc": "Do not render header tabs (only the input)",
+      "category": "content",
+      "addedIn": "v1.17"
+    },
+
     "no-footer": {
       "type": "Boolean",
       "desc": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it",

package/src/components/color/QColor.sass

@@ -16,7 +16,11 @@
     border: 1px solid $separator-color
 
   &__header
-    height: 68px
+
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
 
     input
       line-height: 24px
@@ -93,47 +97,34 @@
     border-radius: 50%
     transform: translate(-5px, -5px)
 
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important // @stylint ignore
     opacity: 1
 
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
 
   &__sliders
-    padding: 4px 16px 16px
-
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-
-    .q-slider__track
-      display: none
+    padding: 0 16px
 
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
 
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
-
   /* Tune Tab */
 
   &__tune-tab
@@ -180,9 +171,8 @@
     background: inherit
 
   &--dark
-
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
 
     .q-slider
-      color: $grey-5
+      color: $grey-1

package/src/components/color/QColor.styl

@@ -16,7 +16,11 @@
     border: 1px solid $separator-color
 
   &__header
-    height: 68px
+
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
 
     input
       line-height: 24px
@@ -93,47 +97,34 @@
     border-radius: 50%
     transform: translate(-5px, -5px)
 
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important // @stylint ignore
     opacity: 1
 
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
 
   &__sliders
-    padding: 4px 16px 16px
-
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-
-    .q-slider__track
-      display: none
+    padding: 0 16px
 
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
 
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
-
   /* Tune Tab */
 
   &__tune-tab
@@ -180,9 +171,8 @@
     background: inherit
 
   &--dark
-
     .q-color-picker__tune-tab input
       border: 1px solid alpha(#fff, .3)
 
     .q-slider
-      color: $grey-5
+      color: $grey-1

package/src/components/date/QDate.js

@@ -696,7 +696,13 @@ export default Vue.extend({
 
   methods: {
     setToday () {
-      this.__toggleDate(this.today, this.__getMonthHash(this.today))
+      const date = this.today
+      const month = this.daysMap[this.__getMonthHash(date)]
+
+      if (month === void 0 || month.includes(date.day) === false) {
+        this.__addToModel(date)
+      }
+
       this.setCalendarTo(this.today.year, this.today.month)
     },
 

package/src/components/date/QDate.sass

@@ -96,6 +96,8 @@
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
 
     &--out
       opacity: .18

package/src/components/date/QDate.styl

@@ -96,6 +96,8 @@
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
 
     &--out
       opacity: .18

package/src/components/dialog/QDialog.js

@@ -12,6 +12,7 @@ import { slot } from '../../utils/slot.js'
 import { create, stop } from '../../utils/event.js'
 import cache from '../../utils/cache.js'
 import { addFocusFn } from '../../utils/focus-manager.js'
+import { client } from '../../plugins/Platform.js'
 
 let maximizedModals = 0
 
@@ -51,6 +52,7 @@ export default Vue.extend({
     noRouteDismiss: Boolean,
     noRefocus: Boolean,
     noFocus: Boolean,
+    noShake: Boolean,
 
     seamless: Boolean,
 
@@ -188,7 +190,7 @@ export default Vue.extend({
       this.__addHistory()
 
       // IE can have null document.activeElement
-      this.__refocusTarget = this.noRefocus === false && document.activeElement !== null
+      this.__refocusTarget = client.is.mobile !== true && this.noRefocus === false && document.activeElement !== null
         ? document.activeElement
         : void 0
 
@@ -198,7 +200,7 @@ export default Vue.extend({
       EscapeKey.register(this, () => {
         if (this.seamless !== true) {
           if (this.persistent === true || this.noEscDismiss === true) {
-            this.maximized !== true && this.shake()
+            this.maximized !== true && this.noShake !== true && this.shake()
           }
           else {
             this.$emit('escape-key')
@@ -255,7 +257,8 @@ export default Vue.extend({
 
       // check null for IE
       if (this.__refocusTarget !== void 0 && this.__refocusTarget !== null) {
-        this.__refocusTarget.focus()
+        this.__refocusTarget.focus(evt)
+        this.__refocusTarget = void 0
       }
 
       this.$el.dispatchEvent(create('popup-hide', { bubbles: true }))
@@ -316,7 +319,7 @@ export default Vue.extend({
       if (this.persistent !== true && this.noBackdropDismiss !== true) {
         this.hide(e)
       }
-      else {
+      else if (this.noShake !== true) {
         this.shake()
       }
     },
@@ -372,5 +375,6 @@ export default Vue.extend({
 
   beforeDestroy () {
     this.__cleanup()
+    this.__refocusTarget = void 0
   }
 })