quasar 1.16.3 → 1.17.3

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 () {

package/src/components/form/QForm.js

@@ -42,7 +42,7 @@ export default Vue.extend({
 
       this.validateIndex++
 
-      const components = this.getValidationComponents()
+      const components = this.getValidationComponents().filter(c => c.disable !== true)
 
       const emit = (res, ref) => {
         this.$emit('validation-' + (res === true ? 'success' : 'error'), ref)

package/src/components/header/QHeader.js

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

package/src/components/icon/QIcon.js

@@ -6,6 +6,38 @@ import ListenersMixin from '../../mixins/listeners.js'
 
 import { slot, mergeSlot } from '../../utils/slot.js'
 
+const defaultViewBox = '0 0 24 24'
+
+const sameFn = i => i
+const ionFn = i => `ionicons ${i}`
+
+const libMap = {
+  'icon-': sameFn, // fontawesome equiv
+  'bt-': i => `bt ${i}`,
+  'eva-': i => `eva ${i}`,
+  'ion-md': ionFn,
+  'ion-ios': ionFn,
+  'ion-logo': ionFn,
+  'mdi-': i => `mdi ${i}`,
+  'iconfont ': sameFn,
+  'ti-': i => `themify-icon ${i}`,
+  'bi-': i => `bootstrap-icons ${i}`
+}
+
+const matMap = {
+  o_: '-outlined',
+  r_: '-round',
+  s_: '-sharp'
+}
+
+const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')')
+const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')')
+const mRE = /^[Mm]\s?[-+]?\.?\d/
+const imgRE = /^img:/
+const svgUseRE = /^svguse:/
+const ionRE = /^ion-/
+const faLaRE = /^[lf]a[srlbdk]? /
+
 export default Vue.extend({
   name: 'QIcon',
 
@@ -13,6 +45,7 @@ export default Vue.extend({
 
   props: {
     tag: {
+      type: String,
       default: 'i'
     },
 
@@ -24,9 +57,7 @@ export default Vue.extend({
 
   computed: {
     classes () {
-      // "notranslate" class is for Google Translate
-      // to avoid tampering with Material Icons ligature font
-      return 'q-icon notranslate' +
+      return 'q-icon' +
         (this.left === true ? ' on-left' : '') +
         (this.right === true ? ' on-right' : '') +
         (this.color !== void 0 ? ` text-${this.color}` : '')
@@ -37,10 +68,7 @@ export default Vue.extend({
       let icon = this.name
 
       if (!icon) {
-        return {
-          none: true,
-          cls: this.classes
-        }
+        return { none: true }
       }
 
       if (this.$q.iconMapFn !== void 0) {
@@ -51,7 +79,7 @@ export default Vue.extend({
           }
           else {
             return {
-              cls: res.cls + ' ' + this.classes,
+              cls: res.cls,
               content: res.content !== void 0
                 ? res.content
                 : ' '
@@ -60,95 +88,70 @@ export default Vue.extend({
         }
       }
 
-      if (icon.startsWith('M') === true) {
-        const [ def, viewBox ] = icon.split('|')
+      if (mRE.test(icon) === true) {
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svg: true,
-          cls: this.classes,
+          viewBox,
           nodes: def.split('&&').map(path => {
             const [ d, style, transform ] = path.split('@@')
             return this.$createElement('path', {
-              attrs: {
-                d,
-                transform
-              },
+              attrs: { d, transform },
               style
             })
-          }),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+          })
         }
       }
 
-      if (icon.startsWith('img:') === true) {
+      if (imgRE.test(icon) === true) {
         return {
           img: true,
-          cls: this.classes,
           src: icon.substring(4)
         }
       }
 
-      if (icon.startsWith('svguse:') === true) {
-        const [ def, viewBox ] = icon.split('|')
+      if (svgUseRE.test(icon) === true) {
+        const [ def, viewBox = defaultViewBox ] = icon.split('|')
 
         return {
           svguse: true,
-          cls: this.classes,
           src: def.substring(7),
-          viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+          viewBox
         }
       }
 
       let content = ' '
+      const matches = icon.match(libRE)
 
-      if (/^[l|f]a[s|r|l|b|d]{0,1} /.test(icon) || icon.startsWith('icon-') === true) {
-        cls = icon
-      }
-      else if (icon.startsWith('bt-') === true) {
-        cls = `bt ${icon}`
-      }
-      else if (icon.startsWith('eva-') === true) {
-        cls = `eva ${icon}`
+      if (matches !== null) {
+        cls = libMap[ matches[ 1 ] ](icon)
       }
-      else if (/^ion-(md|ios|logo)/.test(icon) === true) {
-        cls = `ionicons ${icon}`
+      else if (faLaRE.test(icon) === true) {
+        cls = icon
       }
-      else if (icon.startsWith('ion-') === true) {
+      else if (ionRE.test(icon) === true) {
         cls = `ionicons ion-${this.$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substr(3)}`
       }
-      else if (icon.startsWith('mdi-') === true) {
-        cls = `mdi ${icon}`
-      }
-      else if (icon.startsWith('iconfont ') === true) {
-        cls = `${icon}`
-      }
-      else if (icon.startsWith('ti-') === true) {
-        cls = `themify-icon ${icon}`
-      }
-      else if (icon.startsWith('bi-') === true) {
-        cls = `bootstrap-icons ${icon}`
-      }
       else {
-        cls = 'material-icons'
-
-        if (icon.startsWith('o_') === true) {
+        // "notranslate" class is for Google Translate
+        // to avoid tampering with Material Icons ligature font
+        //
+        // Caution: To be able to add suffix to the class name,
+        // keep the 'material-icons' at the end of the string.
+        cls = 'notranslate material-icons'
+
+        const matches = icon.match(matRE)
+        if (matches !== null) {
           icon = icon.substring(2)
-          cls += '-outlined'
-        }
-        else if (icon.startsWith('r_') === true) {
-          icon = icon.substring(2)
-          cls += '-round'
-        }
-        else if (icon.startsWith('s_') === true) {
-          icon = icon.substring(2)
-          cls += '-sharp'
+          cls += matMap[ matches[ 1 ] ]
         }
 
         content = icon
       }
 
       return {
-        cls: cls + ' ' + this.classes,
+        cls,
         content
       }
     }
@@ -156,7 +159,7 @@ export default Vue.extend({
 
   render (h) {
     const data = {
-      class: this.type.cls,
+      class: this.classes,
       style: this.sizeStyle,
       on: { ...this.qListeners },
       attrs: {
@@ -170,28 +173,39 @@ export default Vue.extend({
     }
 
     if (this.type.img === true) {
-      data.attrs.src = this.type.src
-      return h('img', data)
+      return h('div', data, mergeSlot([
+        h('img', {
+          attrs: { src: this.type.src }
+        })
+      ], this, 'default'))
     }
 
     if (this.type.svg === true) {
-      data.attrs.focusable = 'false' /* needed for IE11 */
-      data.attrs.viewBox = this.type.viewBox
-
-      return h('svg', data, mergeSlot(this.type.nodes, this, 'default'))
+      return h('div', data, mergeSlot([
+        h('svg', {
+          attrs: {
+            viewBox: this.type.viewBox,
+            focusable: 'false' /* needed for IE11 */
+          }
+        }, this.type.nodes)
+      ], this, 'default'))
     }
-    if (this.type.svguse === true) {
-      data.attrs.focusable = 'false' /* needed for IE11 */
-      data.attrs.viewBox = this.type.viewBox
 
-      return h('svg', data, [
-        h('use', {
+    if (this.type.svguse === true) {
+      return h('div', data, mergeSlot([
+        h('svg', {
           attrs: {
-            'xlink:href': this.type.src
+            viewBox: this.type.viewBox,
+            focusable: 'false' /* needed for IE11 */
           }
-        }),
-        mergeSlot(this.type.nodes, this, 'default')
-      ])
+        }, [
+          h('use', { attrs: { 'xlink:href': this.type.src } })
+        ])
+      ], this, 'default'))
+    }
+
+    if (this.type.cls !== void 0) {
+      data.class += ' ' + this.type.cls
     }
 
     return h(this.tag, data, mergeSlot([

package/src/components/icon/QIcon.sass

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after
@@ -20,7 +19,8 @@
     align-items: center
     justify-content: center
 
-  > svg
+  > svg,
+  > img
     width: 100%
     height: 100%
 

package/src/components/icon/QIcon.styl

@@ -10,7 +10,6 @@
   text-align: center
   position: relative
   box-sizing: content-box
-
   fill: currentColor // for svg paths
 
   &:before, &:after
@@ -20,7 +19,8 @@
     align-items: center
     justify-content: center
 
-  > svg
+  > svg,
+  > img
     width: 100%
     height: 100%
 

package/src/components/img/QImg.json

@@ -15,7 +15,7 @@
       "desc": "Path to image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.gif\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""
@@ -77,7 +77,7 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/some-placeholder.png\"",
+        "(public folder) src=\"img/some-placeholder.png\"",
         "(assets folder) src=\"~assets/my-placeholder.gif\"",
         "(relative path format) :src=\"require('./placeholder.jpg')\"",
         "(URL) src=\"https://placeimg.com/500/300/nature\""