quasar 1.16.2 → 1.17.2

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
   }
 })

package/src/components/dialog/QDialog.json

@@ -101,12 +101,19 @@
       "type": "Boolean",
       "desc": "(Accessibility) When Dialog gets shown, do not switch focus on it",
       "category": "behavior"
+    },
+
+    "no-shake": {
+      "type": "Boolean",
+      "desc": "Do not shake up the Dialog to catch user's attention",
+      "category": "behavior",
+      "addedIn": "v1.17"
     }
   },
 
   "events": {
     "shake": {
-      "desc": "Shakes up the Dialog in order to catch user's attention"
+      "desc": "Emitted when the Dialog shakes in order to catch user's attention, unless the 'no-shake' property is set"
     },
 
     "escape-key": {

package/src/components/drawer/QDrawer.js

@@ -114,11 +114,10 @@ export default Vue.extend({
       }
     },
 
-    'layout.totalWidth' (val) {
-      this.__updateLocal('belowBreakpoint', (
-        this.behavior === 'mobile' ||
-        (this.behavior !== 'desktop' && val <= this.breakpoint)
-      ))
+    'layout.totalWidth' () {
+      if (this.layout.container === true || document.qScrollPrevented !== true) {
+        this.__updateBelowBreakpoint()
+      }
     },
 
     side (newSide, oldSide) {
@@ -134,22 +133,17 @@ export default Vue.extend({
       this.layout[newSide].offset = this.offset
     },
 
-    behavior (val) {
-      this.__updateLocal('belowBreakpoint', (
-        val === 'mobile' ||
-        (val !== 'desktop' && this.layout.totalWidth <= this.breakpoint)
-      ))
+    behavior () {
+      this.__updateBelowBreakpoint()
     },
 
-    breakpoint (val) {
-      this.__updateLocal('belowBreakpoint', (
-        this.behavior === 'mobile' ||
-        (this.behavior !== 'desktop' && this.layout.totalWidth <= val)
-      ))
+    breakpoint () {
+      this.__updateBelowBreakpoint()
     },
 
     'layout.container' (val) {
       this.showing === true && this.__preventScroll(val !== true)
+      val === true && this.__updateBelowBreakpoint()
     },
 
     'layout.scrollbarWidth' () {
@@ -583,6 +577,13 @@ export default Vue.extend({
 
     __updateSizeOnLayout (miniToOverlay, size) {
       this.__update('size', miniToOverlay === true ? this.miniWidth : size)
+    },
+
+    __updateBelowBreakpoint () {
+      this.__updateLocal('belowBreakpoint', (
+        this.behavior === 'mobile' ||
+        (this.behavior !== 'desktop' && this.layout.totalWidth <= this.breakpoint)
+      ))
     }
   },
 

package/src/components/editor/QEditor.js

@@ -516,7 +516,7 @@ export default Vue.extend({
 
     return h('div', {
       style: {
-        height: this.inFullscreen === true ? '100vh' : null
+        height: this.inFullscreen === true ? '100%' : null
       },
       class: this.classes,
       attrs: this.attrs,
@@ -537,7 +537,7 @@ export default Vue.extend({
           },
           domProps: isSSR
             ? { innerHTML: this.value }
-            : undefined,
+            : void 0,
           on
         }
       )

package/src/components/editor/QEditor.sass

@@ -6,10 +6,18 @@
   &.disabled
     border-style: dashed
 
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  &.fullscreen
+    max-height: 100%
+
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
 
+  &__toolbars-container
+    max-width: 100%
+
   &__content
     outline: 0
     padding: $editor-content-padding
@@ -17,14 +25,18 @@
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
+
     pre
       white-space: pre-wrap
+
     hr
       border: 0
       outline: 0
       margin: 1px
       height: 1px
       background: $editor-hr-color
+
     &:empty:not(:focus):before
       content: attr(placeholder)
       opacity: .7

package/src/components/editor/QEditor.styl

@@ -6,10 +6,18 @@
   &.disabled
     border-style: dashed
 
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  &.fullscreen
+    max-height: 100%
+
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
 
+  &__toolbars-container
+    max-width: 100%
+
   &__content
     outline: 0
     padding: $editor-content-padding
@@ -17,14 +25,18 @@
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
+
     pre
       white-space: pre-wrap
+
     hr
       border: 0
       outline: 0
       margin: 1px
       height: 1px
       background: $editor-hr-color
+
     &:empty:not(:focus):before
       content: attr(placeholder)
       opacity: .7

package/src/components/expansion-item/QExpansionItem.js

@@ -7,7 +7,7 @@ import QIcon from '../icon/QIcon.js'
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
-import { RouterLinkMixin } from '../../mixins/router-link.js'
+import RouterLinkMixin from '../../mixins/router-link.js'
 import ModelToggleMixin from '../../mixins/model-toggle.js'
 import DarkMixin from '../../mixins/dark.js'
 
@@ -92,7 +92,7 @@ export default Vue.extend({
     },
 
     isClickable () {
-      return this.hasRouterLink === true || this.expandIconToggle !== true
+      return this.hasLink === true || this.expandIconToggle !== true
     },
 
     expansionIcon () {
@@ -102,13 +102,13 @@ export default Vue.extend({
     },
 
     activeToggleIcon () {
-      return this.disable !== true && (this.hasRouterLink === true || this.expandIconToggle === true)
+      return this.disable !== true && (this.hasLink === true || this.expandIconToggle === true)
     }
   },
 
   methods: {
     __onHeaderClick (e) {
-      this.hasRouterLink !== true && this.toggle(e)
+      this.hasLink !== true && this.toggle(e)
       this.$emit('click', e)
     },
 
@@ -219,18 +219,20 @@ export default Vue.extend({
       }
 
       if (this.isClickable === true) {
-        const evtProp = this.hasRouterLink === true ? 'nativeOn' : 'on'
-
         data.props.clickable = true
-        data[evtProp] = {
+        data[this.hasRouterLink === true ? 'nativeOn' : 'on'] = {
           ...this.qListeners,
           click: this.__onHeaderClick
         }
 
-        this.hasRouterLink === true && Object.assign(
-          data.props,
-          this.routerLinkProps
-        )
+        if (this.hasLink === true) {
+          Object.assign(
+            data.props,
+            this.linkProps.props
+          )
+
+          data.attrs = this.linkProps.attrs
+        }
       }
 
       return h(QItem, data, child)

package/src/components/fab/QFab.js

@@ -80,6 +80,10 @@ export default Vue.extend({
         'aria-haspopup': 'true',
         ...this.qAttrs
       }
+    },
+
+    slotScope () {
+      return { opened: this.showing }
     }
   },
 
@@ -90,6 +94,15 @@ export default Vue.extend({
       if (this.$refs.trigger && this.$refs.trigger.$el) {
         this.$refs.trigger.$el.focus()
       }
+    },
+
+    __getIcon (h, kebab, camel) {
+      const slotFn = this.$scopedSlots[kebab]
+      const staticClass = `q-fab__${kebab} absolute-full`
+
+      return slotFn === void 0
+        ? h(QIcon, { staticClass, props: { name: this[kebab] || this.$q.iconSet.fab[camel] } })
+        : h('div', { staticClass }, slotFn(this.slotScope))
     }
   },
 
@@ -98,20 +111,16 @@ export default Vue.extend({
 
     this.hideIcon !== true && child.push(
       h('div', { staticClass: 'q-fab__icon-holder', class: this.iconHolderClasses }, [
-        h(QIcon, {
-          staticClass: 'q-fab__icon absolute-full',
-          props: { name: this.icon || this.$q.iconSet.fab.icon }
-        }),
-        h(QIcon, {
-          staticClass: 'q-fab__active-icon absolute-full',
-          props: { name: this.activeIcon || this.$q.iconSet.fab.activeIcon }
-        })
+        this.__getIcon(h, 'icon', 'icon'),
+        this.__getIcon(h, 'active-icon', 'activeIcon')
       ])
     )
 
-    this.label !== '' && child[this.labelProps.action](
-      h('div', this.labelProps.data, [ this.label ])
-    )
+    if (this.label !== '' || this.$scopedSlots.label !== void 0) {
+      child[this.labelProps.action](
+        h('div', this.labelProps.data, this.$scopedSlots.label !== void 0 ? this.$scopedSlots.label(this.slotScope) : [ this.label ])
+      )
+    }
 
     return h('div', {
       staticClass: 'q-fab z-fab row inline justify-center',

package/src/components/fab/QFab.json

@@ -57,6 +57,41 @@
     }
   },
 
+  "scopedSlots": {
+    "icon": {
+      "desc": "Slot for icon shown when FAB is closed; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
+    "active-icon": {
+      "desc": "Slot for icon shown when FAB is opened; Suggestion: QIcon",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "scope": {
+        "opened": {
+          "type": "Boolean",
+          "desc": "FAB is opened"
+        }
+      },
+      "addedIn": "v1.17"
+    }
+  },
+
   "events": {
     "input": {
       "desc": "Emitted when fab actions are shown/hidden; Captured by v-model directive"

package/src/components/fab/QFabAction.js

@@ -75,15 +75,22 @@ export default Vue.extend({
   render (h) {
     const child = []
 
-    this.icon !== '' && child.push(
-      h(QIcon, {
-        props: { name: this.icon }
-      })
-    )
-
-    this.label !== '' && child[this.labelProps.action](
-      h('div', this.labelProps.data, [ this.label ])
-    )
+    if (this.$scopedSlots.icon !== void 0) {
+      child.push(this.$scopedSlots.icon())
+    }
+    else if (this.icon !== '') {
+      child.push(
+        h(QIcon, {
+          props: { name: this.icon }
+        })
+      )
+    }
+
+    if (this.label !== '' || this.$scopedSlots.label !== void 0) {
+      child[this.labelProps.action](
+        h('div', this.labelProps.data, this.$scopedSlots.label !== void 0 ? this.$scopedSlots.label() : [ this.label ])
+      )
+    }
 
     return h(QBtn, {
       class: this.classes,

package/src/components/fab/QFabAction.json

@@ -36,6 +36,16 @@
   "slots": {
     "default": {
       "desc": "Suggestion for this slot: QTooltip"
+    },
+
+    "icon": {
+      "desc": "Slot for icon; Suggestion: QIcon",
+      "addedIn": "v1.17"
+    },
+
+    "label": {
+      "desc": "Slot for label",
+      "addedIn": "v1.17"
     }
   },