quasar 1.16.3 → 1.17.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"
     }
   },
 

package/src/components/field/QField.js

@@ -163,7 +163,7 @@ export default Vue.extend({
         'q-field--error': this.hasError,
 
         'q-field--readonly': this.readonly === true && this.disable !== true,
-        [this.disable === true ? 'q-field--disabled' : 'q-validation-component']: true
+        'q-field--disabled': this.disable === true
       }
     },
 
@@ -220,6 +220,17 @@ export default Vue.extend({
       }
     },
 
+    bottomSlotScope () {
+      return {
+        id: this.targetUid,
+        field: this.$el,
+        editable: this.editable,
+        focused: this.focused,
+        value: this.value,
+        errorMessage: this.computedErrorMessage
+      }
+    },
+
     attrs () {
       const attrs = {
         for: this.targetUid
@@ -238,19 +249,11 @@ export default Vue.extend({
 
   methods: {
     focus () {
-      this.focusFn !== void 0 && removeFocusFn(this.focusFn)
-      this.focusFn = addFocusFn(() => {
-        if (this.showPopup !== void 0) {
-          this.showPopup()
-          return
-        }
-
-        this.__focus()
-      })
+      addFocusFn(this.__focus)
     },
 
     blur () {
-      this.focusFn !== void 0 && removeFocusFn(this.focusFn)
+      removeFocusFn(this.__focus)
       const el = document.activeElement
       // IE can have null document.activeElement
       if (el !== null && this.$el.contains(el)) {
@@ -393,24 +396,26 @@ export default Vue.extend({
       let msg, key
 
       if (this.hasError === true) {
-        if (this.computedErrorMessage !== void 0) {
+        key = 'q--slot-error'
+
+        if (this.$scopedSlots.error !== void 0) {
+          msg = this.$scopedSlots.error(this.bottomSlotScope)
+        }
+        else if (this.computedErrorMessage !== void 0) {
           msg = [ h('div', { attrs: { role: 'alert' } }, [ this.computedErrorMessage ]) ]
           key = this.computedErrorMessage
         }
-        else {
-          msg = slot(this, 'error')
-          key = 'q--slot-error'
-        }
       }
       else if (this.hideHint !== true || this.focused === true) {
-        if (this.hint !== void 0) {
+        key = 'q--slot-hint'
+
+        if (this.$scopedSlots.hint !== void 0) {
+          msg = this.$scopedSlots.hint(this.bottomSlotScope)
+        }
+        else if (this.hint !== void 0) {
           msg = [ h('div', [ this.hint ]) ]
           key = this.hint
         }
-        else {
-          msg = slot(this, 'hint')
-          key = 'q--slot-hint'
-        }
       }
 
       const hasCounter = this.counter === true || this.$scopedSlots.counter !== void 0
@@ -518,7 +523,7 @@ export default Vue.extend({
       this.$nextTick(() => {
         this.resetValidation()
 
-        if (this.lazyRules !== 'ondemand' && this.$q.platform.is.mobile !== true) {
+        if (this.$q.platform.is.mobile !== true) {
           this.isDirty = false
         }
       })
@@ -534,7 +539,7 @@ export default Vue.extend({
     this.__onPostRender !== void 0 && this.$nextTick(this.__onPostRender)
 
     return h('label', {
-      staticClass: 'q-field row no-wrap items-start',
+      staticClass: 'q-field q-validation-component row no-wrap items-start',
       class: this.classes,
       attrs: this.attrs
     }, [

package/src/components/field/__QField.json

@@ -209,14 +209,6 @@
       "addedIn": "v1.12.9"
     },
 
-    "error": {
-      "desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
-    },
-
-    "hint": {
-      "desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
-    },
-
     "counter": {
       "desc": "Slot for counter text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>"
     },
@@ -226,6 +218,78 @@
     }
   },
 
+  "scopedSlots": {
+    "error": {
+      "desc": "Slot for errors; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>",
+      "scope": {
+        "id": {
+          "type": "String",
+          "desc": "Element id used in the `for` attribute of the field label. Can be used to link the control to the label",
+          "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
+        },
+        "field": {
+          "type": "Object",
+          "desc": "DOM element of the field",
+          "__exemption": [ "examples" ]
+        },
+        "editable": {
+          "type": "Boolean",
+          "desc": "Field is editable"
+        },
+        "focused": {
+          "type": "Boolean",
+          "desc": "Field has focus"
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Field's value",
+          "examples": [ 0.241, "Text" ]
+        },
+        "errorMessage": {
+          "type": "String",
+          "desc": "Error message (from errorMessage prop or generated by rules)",
+          "examples": [ "The field is required" ]
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
+    "hint": {
+      "desc": "Slot for hint text; Enabled only if 'bottom-slots' prop is used; Suggestion: <div>",
+      "scope": {
+        "id": {
+          "type": "String",
+          "desc": "Element id used in the `for` attribute of the field label. Can be used to link the control to the label",
+          "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
+        },
+        "field": {
+          "type": "Object",
+          "desc": "DOM element of the field",
+          "__exemption": [ "examples" ]
+        },
+        "editable": {
+          "type": "Boolean",
+          "desc": "Field is editable"
+        },
+        "focused": {
+          "type": "Boolean",
+          "desc": "Field has focus"
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Field's value",
+          "examples": [ 0.241, "Text" ]
+        },
+        "errorMessage": {
+          "type": "String",
+          "desc": "Error message (from errorMessage prop or generated by rules)",
+          "examples": [ "The field is required" ]
+        }
+      },
+      "addedIn": "v1.17"
+    }
+  },
+
   "events": {
     "clear": {
       "desc": "When using the 'clearable' property, this event is emitted when the clear icon is clicked",

package/src/components/file/QFile.js

@@ -9,6 +9,7 @@ import FileMixin, { FileValueMixin } from '../../mixins/file.js'
 import { isSSR } from '../../plugins/Platform'
 import { humanStorageSize } from '../../utils/format.js'
 import cache from '../../utils/cache.js'
+import { prevent } from '../../utils/event.js'
 
 export default Vue.extend({
   name: 'QFile',
@@ -115,9 +116,16 @@ export default Vue.extend({
       this.$emit('input', this.multiple === true ? files : files[0])
     },
 
+    __onKeydown (e) {
+      // prevent form submit if ENTER is pressed
+      e.keyCode === 13 && prevent(e)
+    },
+
     __onKeyup (e) {
-      // only on ENTER
-      e.keyCode === 13 && this.pickFiles(e)
+      // only on ENTER and SPACE to match native input field
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.pickFiles(e)
+      }
     },
 
     __getFileInput () {
@@ -159,6 +167,7 @@ export default Vue.extend({
       if (this.editable === true) {
         data.on = cache(this, 'native', {
           dragover: this.__onDragOver,
+          keydown: this.__onKeydown,
           keyup: this.__onKeyup
         })
       }
@@ -174,8 +183,7 @@ export default Vue.extend({
       return [
         h('input', {
           class: [ this.inputClass, 'q-file__filler' ],
-          style: this.inputStyle,
-          tabindex: -1
+          style: this.inputStyle
         })
       ]
     },

package/src/components/file/QFile.sass

@@ -2,7 +2,6 @@
 
   .q-field__native
     word-break: break-all
-    overflow: hidden
 
   .q-field__input
     opacity: 0 !important
@@ -11,8 +10,10 @@
       cursor: pointer
 
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
 
   &__dnd
     outline: 1px dashed currentColor

package/src/components/file/QFile.styl

@@ -2,7 +2,6 @@
 
   .q-field__native
     word-break: break-all
-    overflow: hidden
 
   .q-field__input
     opacity: 0 !important
@@ -11,8 +10,10 @@
       cursor: pointer
 
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
 
   &__dnd
     outline: 1px dashed currentColor

package/src/components/footer/QFooter.js

@@ -87,7 +87,7 @@ export default Vue.extend({
     fixed () {
       return this.reveal === true ||
         this.layout.view.indexOf('F') > -1 ||
-        this.layout.container === true
+        (this.$q.platform.is.ios && this.layout.container === true)
     },
 
     containerHeight () {