quasar 1.18.3 → 1.18.6

package/src/api.extends.json

@@ -47,7 +47,7 @@
 
     "icon": {
       "type": "String",
-      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix",
+      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
       "examples": [
         "map",
         "ion-add",

package/src/components/btn/QBtn.js

@@ -155,32 +155,39 @@ export default Vue.extend({
     },
 
     __onKeydown (e) {
-      if (isKeyCode(e, [ 13, 32 ]) === true) {
-        stopAndPrevent(e)
+      this.$emit('keydown', e)
 
+      if (isKeyCode(e, [ 13, 32 ]) === true) {
         if (keyboardTarget !== this.$el) {
           keyboardTarget !== void 0 && this.__cleanup()
 
-          // focus external button if the focus helper was focused before
-          this.$el.focus()
+          if (e.defaultPrevented !== true) {
+            // focus external button if the focus helper was focused before
+            this.$el.focus()
 
-          keyboardTarget = this.$el
-          this.$el.classList.add('q-btn--active')
-          document.addEventListener('keyup', this.__onPressEnd, true)
-          this.$el.addEventListener('blur', this.__onPressEnd, passiveCapture)
+            keyboardTarget = this.$el
+            this.$el.classList.add('q-btn--active')
+            document.addEventListener('keyup', this.__onPressEnd, true)
+            this.$el.addEventListener('blur', this.__onPressEnd, passiveCapture)
+          }
         }
-      }
 
-      this.$emit('keydown', e)
+        stopAndPrevent(e)
+      }
     },
 
     __onTouchstart (e) {
+      this.$emit('touchstart', e)
+
       if (touchTarget !== this.$el) {
         touchTarget !== void 0 && this.__cleanup()
-        touchTarget = this.$el
-        const target = this.touchTargetEl = e.target
-        target.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
-        target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
+
+        if (e.defaultPrevented !== true) {
+          touchTarget = this.$el
+          const target = this.touchTargetEl = e.target
+          target.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
+          target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
+        }
       }
 
       // avoid duplicated mousedown event
@@ -190,20 +197,21 @@ export default Vue.extend({
       this.mouseTimer = setTimeout(() => {
         this.avoidMouseRipple = false
       }, 200)
-
-      this.$emit('touchstart', e)
     },
 
     __onMousedown (e) {
+      e.qSkipRipple = this.avoidMouseRipple === true
+      this.$emit('mousedown', e)
+
       if (mouseTarget !== this.$el) {
         mouseTarget !== void 0 && this.__cleanup()
-        mouseTarget = this.$el
-        this.$el.classList.add('q-btn--active')
-        document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
-      }
 
-      e.qSkipRipple = this.avoidMouseRipple === true
-      this.$emit('mousedown', e)
+        if (e.defaultPrevented !== true) {
+          mouseTarget = this.$el
+          this.$el.classList.add('q-btn--active')
+          document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
+        }
+      }
     },
 
     __onPressEnd (e) {

package/src/components/date/QDate.js

@@ -8,6 +8,7 @@ import { formatDate, __splitDate, getDateDiff } from '../../utils/date.js'
 import { pad } from '../../utils/format.js'
 import { jalaaliMonthLength, toGregorian } from '../../utils/date-persian.js'
 import cache from '../../utils/cache.js'
+import { isObject } from '../../utils/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]
@@ -161,7 +162,7 @@ export default Vue.extend({
     rangeModel () {
       const fn = date => this.__decodeString(date, this.innerMask, this.innerLocale)
       return this.normalizedModel
-        .filter(date => Object(date) === date && date.from !== void 0 && date.to !== void 0)
+        .filter(date => isObject(date) === true && date.from !== void 0 && date.to !== void 0)
         .map(range => ({ from: fn(range.from), to: fn(range.to) }))
         .filter(range => range.from.dateHash !== null && range.to.dateHash !== null && range.from.dateHash < range.to.dateHash)
     },

package/src/components/dialog-plugin/DialogPlugin.js

@@ -20,6 +20,7 @@ import DarkMixin from '../../mixins/dark.js'
 import AttrsMixin from '../../mixins/attrs.js'
 
 import cache from '../../utils/cache.js'
+import { isObject } from '../../utils/is.js'
 
 export default Vue.extend({
   name: 'DialogPlugin',
@@ -64,7 +65,7 @@ export default Vue.extend({
 
     spinner () {
       if (this.progress !== false) {
-        return Object(this.progress) === this.progress
+        return isObject(this.progress) === true
           ? {
             component: this.progress.spinner || QSpinner,
             props: { color: this.progress.color || this.vmColor }
@@ -81,7 +82,7 @@ export default Vue.extend({
     },
 
     okLabel () {
-      return Object(this.ok) === this.ok
+      return isObject(this.ok) === true
         ? this.$q.lang.label.ok
         : (
           this.ok === true
@@ -91,7 +92,7 @@ export default Vue.extend({
     },
 
     cancelLabel () {
-      return Object(this.cancel) === this.cancel
+      return isObject(this.cancel) === true
         ? this.$q.lang.label.cancel
         : (
           this.cancel === true
@@ -121,7 +122,7 @@ export default Vue.extend({
         label: this.okLabel,
         ripple: false,
         disable: this.okDisabled,
-        ...(Object(this.ok) === this.ok ? this.ok : { flat: true })
+        ...(isObject(this.ok) === true ? this.ok : { flat: true })
       }
     },
 
@@ -130,7 +131,7 @@ export default Vue.extend({
         color: this.vmColor,
         label: this.cancelLabel,
         ripple: false,
-        ...(Object(this.cancel) === this.cancel ? this.cancel : { flat: true })
+        ...(isObject(this.cancel) === true ? this.cancel : { flat: true })
       }
     }
   },

package/src/components/field/QField.js

@@ -288,14 +288,6 @@ export default Vue.extend({
         }, this.__getControlContainer(h))
       )
 
-      this.$scopedSlots.append !== void 0 && node.push(
-        h('div', {
-          staticClass: 'q-field__append q-field__marginal row no-wrap items-center',
-          key: 'append',
-          on: this.slotsEvents
-        }, this.$scopedSlots.append())
-      )
-
       this.hasError === true && this.noErrorIcon === false && node.push(
         this.__getInnerAppendNode(h, 'error', [
           h(QIcon, { props: { name: this.$q.iconSet.field.error, color: 'negative' } })
@@ -326,6 +318,14 @@ export default Vue.extend({
         )
       }
 
+      this.$scopedSlots.append !== void 0 && node.push(
+        h('div', {
+          staticClass: 'q-field__append q-field__marginal row no-wrap items-center',
+          key: 'append',
+          on: this.slotsEvents
+        }, this.$scopedSlots.append())
+      )
+
       this.__getInnerAppend !== void 0 && node.push(
         this.__getInnerAppendNode(h, 'inner-append', this.__getInnerAppend(h))
       )
@@ -539,10 +539,18 @@ export default Vue.extend({
     this.__onPreRender !== void 0 && this.__onPreRender()
     this.__onPostRender !== void 0 && this.$nextTick(this.__onPostRender)
 
+    const attrs = this.__getControl === void 0 && this.$scopedSlots.control === void 0
+      ? {
+        ...this.qAttrs,
+        'data-autofocus': this.autofocus,
+        ...this.attrs
+      }
+      : this.attrs
+
     return h('label', {
       staticClass: 'q-field q-validation-component row no-wrap items-start',
       class: this.classes,
-      attrs: this.attrs
+      attrs
     }, [
       this.$scopedSlots.before !== void 0 ? h('div', {
         staticClass: 'q-field__before q-field__marginal row no-wrap items-center',

package/src/components/file/QFile.js

@@ -167,6 +167,7 @@ export default Vue.extend({
       if (this.editable === true) {
         data.on = cache(this, 'native', {
           dragover: this.__onDragOver,
+          dragleave: this.__onDragLeave,
           keydown: this.__onKeydown,
           keyup: this.__onKeyup
         })

package/src/components/icon/QIcon.js

@@ -37,6 +37,7 @@ const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
 const faLaRE = /^[lf]a[srlbdk]? /
+const fa6RE = /^fa-(brand|regular|solid)/
 
 export default Vue.extend({
   name: 'QIcon',
@@ -67,7 +68,7 @@ export default Vue.extend({
       let cls
       let icon = this.name
 
-      if (!icon) {
+      if (icon === 'none' || !icon) {
         return { none: true }
       }
 
@@ -76,6 +77,9 @@ export default Vue.extend({
         if (res !== void 0) {
           if (res.icon !== void 0) {
             icon = res.icon
+            if (icon === 'none' || !icon) {
+              return { none: true }
+            }
           }
           else {
             return {
@@ -127,7 +131,7 @@ export default Vue.extend({
       if (matches !== null) {
         cls = libMap[ matches[ 1 ] ](icon)
       }
-      else if (faLaRE.test(icon) === true) {
+      else if (faLaRE.test(icon) === true || fa6RE.test(icon) === true) {
         cls = icon
       }
       else if (ionRE.test(icon) === true) {

package/src/components/icon/QIcon.json

@@ -18,9 +18,7 @@
     },
 
     "name": {
-      "type": "String",
-      "desc": "Name of the icon, following Quasar convention",
-      "examples": [ "map", "ion-add" ],
+      "extends": "icon",
       "category": "model"
     },
 

package/src/components/input/QInput.js

@@ -46,7 +46,10 @@ export default Vue.extend({
       if (this.hasMask === true) {
         if (this.stopValueWatcher === true) {
           this.stopValueWatcher = false
-          return
+
+          if (String(v) === this.emitCachedValue) {
+            return
+          }
         }
 
         this.__updateMaskValue(v)

package/src/components/knob/QKnob.js

@@ -25,6 +25,9 @@ export default Vue.extend({
   },
 
   props: {
+    innerMin: Number,
+    innerMax: Number,
+
     step: {
       type: Number,
       default: 1,
@@ -41,31 +44,22 @@ export default Vue.extend({
   },
 
   data () {
+    const innerMin = this.__getInnerMin(this.innerMin)
+    const innerMax = this.__getInnerMax(this.innerMax)
+
     return {
-      model: this.value,
+      model: this.value === null ? innerMin : between(this.value, innerMin, innerMax),
       dragging: false
     }
   },
 
   watch: {
-    value (value) {
-      if (value < this.min) {
-        this.model = this.min
-      }
-      else if (value > this.max) {
-        this.model = this.max
-      }
-      else {
-        if (value !== this.model) {
-          this.model = value
-        }
-        return
-      }
+    modelUpdate () {
+      this.model = this.value === null
+        ? this.computedInnerMin
+        : between(this.value, this.computedInnerMin, this.computedInnerMax)
 
-      if (this.model !== this.value) {
-        this.$emit('input', this.model)
-        this.$emit('change', this.model)
-      }
+      this.__updateValue(true)
     }
   },
 
@@ -78,6 +72,18 @@ export default Vue.extend({
       )
     },
 
+    computedInnerMin () {
+      return this.__getInnerMin(this.innerMin)
+    },
+
+    computedInnerMax () {
+      return this.__getInnerMax(this.innerMax)
+    },
+
+    modelUpdate () {
+      return `${this.value}|${this.computedInnerMin}|${this.computedInnerMax}`
+    },
+
     editable () {
       return this.disable === false && this.readonly === false
     },
@@ -109,8 +115,8 @@ export default Vue.extend({
     attrs () {
       const attrs = {
         role: 'slider',
-        'aria-valuemin': this.min,
-        'aria-valuemax': this.max,
+        'aria-valuemin': this.computedInnerMin,
+        'aria-valuemax': this.computedInnerMax,
         'aria-valuenow': this.value
       }
 
@@ -126,6 +132,18 @@ export default Vue.extend({
   },
 
   methods: {
+    __getInnerMin (val) {
+      return isNaN(val) === true || this.innerMin < this.min
+        ? this.min
+        : this.innerMin
+    },
+
+    __getInnerMax (val) {
+      return isNaN(val) === true || val > this.max
+        ? this.max
+        : this.innerMax
+    },
+
     __updateCenterPosition () {
       const { top, left, width, height } = this.$el.getBoundingClientRect()
       this.centerPosition = {
@@ -167,8 +185,8 @@ export default Vue.extend({
 
       this.model = between(
         parseFloat((this.model + offset).toFixed(this.decimals)),
-        this.min,
-        this.max
+        this.computedInnerMin,
+        this.computedInnerMax
       )
 
       this.__updateValue()
@@ -204,11 +222,14 @@ export default Vue.extend({
         angle = center.left < pos.left ? angle + 90 : 270 - angle
       }
 
-      if (this.angle) {
+      if (this.$q.lang.rtl === true) {
+        angle = normalizeToInterval(-angle - this.angle, 0, 360)
+      }
+      else if (this.angle) {
         angle = normalizeToInterval(angle - this.angle, 0, 360)
       }
 
-      if (this.$q.lang.rtl === true) {
+      if (this.reverse === true) {
         angle = 360 - angle
       }
 
@@ -225,7 +246,7 @@ export default Vue.extend({
         model = parseFloat(model.toFixed(this.decimals))
       }
 
-      model = between(model, this.min, this.max)
+      model = between(model, this.computedInnerMin, this.computedInnerMax)
 
       this.$emit('drag-value', model)
 

package/src/components/knob/QKnob.json

@@ -27,6 +27,22 @@
       "category": "model"
     },
 
+    "inner-min": {
+      "type": "Number",
+      "desc": "Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop",
+      "examples": [ ":inner-min=\"0\"" ],
+      "category": "model",
+      "addedIn": "v1.18.4"
+    },
+
+    "inner-max": {
+      "type": "Number",
+      "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop",
+      "examples": [ ":inner-max=\"100\"" ],
+      "category": "model",
+      "addedIn": "v1.18.4"
+    },
+
     "step": {
       "type": "Number",
       "default": "1",
@@ -35,6 +51,12 @@
       "category": "model"
     },
 
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverses the direction of progress",
+      "category": "behavior"
+    },
+
     "instant-feedback": {
       "type": "Boolean",
       "desc": "No animation when model changes",

package/src/components/linear-progress/QLinearProgress.sass

@@ -6,6 +6,7 @@
   height: 1em
   color: $primary
   color: var(--q-color-primary)
+  transform: scale3d(1, 1, 1)
 
   &__model, &__track
     transform-origin: 0 0

package/src/components/linear-progress/QLinearProgress.styl

@@ -6,6 +6,7 @@
   height: 1em
   color: $primary
   color: var(--q-color-primary)
+  transform: scale3d(1, 1, 1)
 
   &__model, &__track
     transform-origin: 0 0

package/src/components/select/QSelect.js

@@ -302,7 +302,7 @@ export default Vue.extend({
         }
 
         if (this.$q.platform.is.desktop === true) {
-          itemEvents.mousemove = () => { this.setOptionIndex(index) }
+          itemEvents.mousemove = () => { this.menu === true && this.setOptionIndex(index) }
         }
 
         const option = {
@@ -589,9 +589,7 @@ export default Vue.extend({
 
       return typeof val === 'function'
         ? val
-        : opt => Object(opt) === opt && val in opt
-          ? opt[val]
-          : opt
+        : opt => (opt !== null && typeof opt === 'object' && val in opt ? opt[ val ] : opt)
     },
 
     isOptionSelected (opt) {
@@ -948,6 +946,8 @@ export default Vue.extend({
       }
       // there can be only one (when dialog is opened the control in dialog should be target)
       else if (this.editable === true) {
+        const attrs = isTarget === true ? this.comboboxAttrs : void 0
+
         child.push(
           h('div', {
             ref: isTarget === true ? 'target' : void 0,
@@ -956,7 +956,7 @@ export default Vue.extend({
             attrs: {
               id: isTarget === true ? this.targetUid : void 0,
               tabindex: this.tabindex,
-              ...this.comboboxAttrs
+              ...attrs
             },
             on: cache(this, 'f-tget', {
               keydown: this.__onTargetKeydown,
@@ -995,7 +995,9 @@ export default Vue.extend({
         )
       }
 
-      return h('div', { staticClass: 'q-field__native row items-center', attrs: this.qAttrs }, child)
+      const attrs = this.useInput === true || isTarget !== true ? void 0 : this.qAttrs
+
+      return h('div', { staticClass: 'q-field__native row items-center', attrs }, child)
     },
 
     __getOptions (h) {
@@ -1057,6 +1059,8 @@ export default Vue.extend({
     },
 
     __getInput (h, fromDialog, isTarget) {
+      const attrs = isTarget === true ? { ...this.comboboxAttrs, ...this.qAttrs } : void 0
+
       const options = {
         ref: isTarget === true ? 'target' : void 0,
         key: 'i_t',
@@ -1067,15 +1071,14 @@ export default Vue.extend({
         attrs: {
           // required for Android in order to show ENTER key when in form
           type: 'search',
-          ...this.qAttrs,
+          ...attrs,
           id: isTarget === true ? this.targetUid : void 0,
           maxlength: this.maxlength, // this is converted to prop by QField
           tabindex: this.tabindex,
           autocomplete: this.autocomplete,
           'data-autofocus': fromDialog === true ? false : this.autofocus,
           disabled: this.disable === true,
-          readonly: this.readonly === true,
-          ...this.comboboxAttrs
+          readonly: this.readonly === true
         },
         on: this.inputControlEvents
       }

package/src/components/slide-transition/QSlideTransition.js

@@ -73,8 +73,8 @@ export default Vue.extend({
 
           this.timer = setTimeout(() => {
             el.style.height = `${el.scrollHeight}px`
-            this.animListener = ev => {
-              if (Object(ev) !== ev || ev.target === el) {
+            this.animListener = evt => {
+              if (Object(evt) !== evt || evt.target === el) {
                 this.__end(el, 'show')
               }
             }
@@ -99,8 +99,8 @@ export default Vue.extend({
 
           this.timer = setTimeout(() => {
             el.style.height = 0
-            this.animListener = ev => {
-              if (Object(ev) !== ev || ev.target === el) {
+            this.animListener = evt => {
+              if (Object(evt) !== evt || evt.target === el) {
                 this.__end(el, 'hide')
               }
             }

package/src/components/slider/slider-utils.js

@@ -5,7 +5,7 @@ import FormMixin from '../../mixins/form.js'
 
 import { between } from '../../utils/format.js'
 import { position } from '../../utils/event.js'
-import { isNumber } from '../../utils/is.js'
+import { isNumber, isObject } from '../../utils/is.js'
 
 const markerPrefixClass = 'q-slider__marker-labels'
 const defaultMarkerConvertFn = v => ({ value: v })
@@ -414,7 +414,7 @@ export const SliderMixin = {
       if (typeof def === 'function') {
         return this.markerTicks.map(value => {
           const item = def(value)
-          return Object(item) === item ? { ...item, value } : { value, label: item }
+          return isObject(item) === true ? { ...item, value } : { value, label: item }
         })
       }
 
@@ -422,14 +422,14 @@ export const SliderMixin = {
 
       if (Array.isArray(def) === true) {
         return def
-          .map(item => (Object(item) === item ? item : { value: item }))
+          .map(item => (isObject(item) === true ? item : { value: item }))
           .filter(filterFn)
       }
 
       return Object.keys(def).map(key => {
         const item = def[ key ]
         const value = Number(key)
-        return Object(item) === item ? { ...item, value } : { value, label: item }
+        return isObject(item) === true ? { ...item, value } : { value, label: item }
       }).filter(filterFn)
     },
 

package/src/components/slider/slider-utils.json

@@ -29,7 +29,7 @@
     "inner-max": {
       "type": "Number",
       "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop",
-      "examples": [ ":max-value=\"100\"" ],
+      "examples": [ ":inner-max=\"100\"" ],
       "category": "model",
       "addedIn": "v1.17"
     },

package/src/components/stepper/QStep.json

@@ -49,6 +49,7 @@
 
     "done-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -59,6 +60,7 @@
 
     "active-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -69,6 +71,7 @@
 
     "error-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 

package/src/components/stepper/QStepper.json

@@ -58,6 +58,7 @@
 
     "done-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -68,6 +69,7 @@
 
     "active-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -78,6 +80,7 @@
 
     "error-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },