quasar 1.18.4 → 1.18.7

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/fab/QFab.js

@@ -101,7 +101,7 @@ export default Vue.extend({
       const staticClass = `q-fab__${kebab} absolute-full`
 
       return slotFn === void 0
-        ? h(QIcon, { staticClass, props: { name: this[kebab] || this.$q.iconSet.fab[camel] } })
+        ? h(QIcon, { staticClass, props: { name: this[camel] || this.$q.iconSet.fab[camel] } })
         : h('div', { staticClass }, slotFn(this.slotScope))
     }
   },

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-(solid|regular|light|brands|duotone|thin)/
 
 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

@@ -222,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
       }
 

package/src/components/knob/QKnob.json

@@ -51,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

@@ -162,6 +162,18 @@ export default Vue.extend({
 
     menu (show) {
       this.__updateMenu(show)
+    },
+
+    virtualScrollLength () {
+      if (this.menu === true && this.innerLoading === false) {
+        this.reset()
+
+        this.$nextTick(() => {
+          if (this.menu === true && this.innerLoading === false) {
+            this.__updateMenu(true)
+          }
+        })
+      }
     }
   },
 
@@ -589,9 +601,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 +958,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 +968,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 +1007,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 +1071,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 +1083,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/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"
     },
 

package/src/components/stepper/QStepper.sass

@@ -53,10 +53,12 @@
       color: $negative
       color: var(--q-color-negative)
 
+    &--error-with-icon
       .q-stepper__dot
         background: transparent !important
         span
           color: currentColor
+        .q-icon
           font-size: 24px
 
   &__header

package/src/components/stepper/QStepper.styl

@@ -53,10 +53,12 @@
       color: $negative
       color: var(--q-color-negative)
 
+    &--error-with-icon
       .q-stepper__dot
         background: transparent !important
         span
           color: currentColor
+        .q-icon
           font-size: 24px
 
   &__header

package/src/components/stepper/StepHeader.js

@@ -53,23 +53,36 @@ export default Vue.extend({
 
     hasPrefix () {
       return this.step.prefix &&
-        this.isActive === false &&
-        this.isError === false &&
-        this.isDone === false
+        (this.isActive === false || this.stepper.activeIcon === 'none') &&
+        (this.isError === false || this.stepper.errorIcon === 'none') &&
+        (this.isDone === false || this.stepper.doneIcon === 'none')
     },
 
     icon () {
+      const defaultIcon = this.step.icon || this.stepper.inactiveIcon
+
       if (this.isActive === true) {
-        return this.step.activeIcon || this.stepper.activeIcon || this.$q.iconSet.stepper.active
+        const icon = this.step.activeIcon || this.stepper.activeIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || this.$q.iconSet.stepper.active
       }
+
       if (this.isError === true) {
-        return this.step.errorIcon || this.stepper.errorIcon || this.$q.iconSet.stepper.error
+        const icon = this.step.errorIcon || this.stepper.errorIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || this.$q.iconSet.stepper.error
       }
+
       if (this.isDisable === false && this.isDone === true) {
-        return this.step.doneIcon || this.stepper.doneIcon || this.$q.iconSet.stepper.done
+        const icon = this.step.doneIcon || this.stepper.doneIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || this.$q.iconSet.stepper.done
       }
 
-      return this.step.icon || this.stepper.inactiveIcon
+      return defaultIcon
     },
 
     color () {
@@ -96,7 +109,9 @@ export default Vue.extend({
     classes () {
       return `q-stepper__tab col-grow flex items-center no-wrap relative-position` +
         (this.color !== void 0 ? ` text-${this.color}` : '') +
-        (this.isError === true ? ' q-stepper__tab--error' : '') +
+        (this.isError === true
+          ? ' q-stepper__tab--error q-stepper__tab--error-with-' + (this.hasPrefix === true ? 'prefix' : 'icon')
+          : '') +
         (this.isActive === true ? ' q-stepper__tab--active' : '') +
         (this.isDone === true ? ' q-stepper__tab--done' : '') +
         (this.headerNav === true ? ' q-stepper__tab--navigation q-focusable q-hoverable' : '') +

package/src/components/table/table-sort.js

@@ -1,5 +1,5 @@
 import { sortDate } from '../../utils/sort.js'
-import { isNumber, isDate } from '../../utils/is.js'
+import { isNumber, isDate, isObject } from '../../utils/is.js'
 
 export default {
   props: {
@@ -71,7 +71,7 @@ export default {
     sort (col /* String(col name) or Object(col definition) */) {
       let sortOrder = this.columnSortOrder
 
-      if (col === Object(col)) {
+      if (isObject(col) === true) {
         if (col.sortOrder) {
           sortOrder = col.sortOrder
         }

package/src/components/uploader/QUploaderBase.js

@@ -441,7 +441,10 @@ export default Vue.extend({
         'disabled q-uploader--disable': this.disable
       },
       on: this.canAddFiles === true
-        ? cache(this, 'drag', { dragover: this.__onDragOver })
+        ? cache(this, 'drag', {
+          dragover: this.__onDragOver,
+          dragleave: this.__onDragLeave
+        })
         : null
     }, children)
   }

package/src/mixins/datetime.js

@@ -75,7 +75,9 @@ export default {
 
   methods: {
     __getLocale () {
-      return this.locale || this.$q.lang.date
+      return this.locale !== void 0
+        ? { ...this.$q.lang.date, ...this.locale }
+        : this.$q.lang.date
     },
 
     __getCurrentDate (dateOnly) {

package/src/mixins/file.js

@@ -116,7 +116,7 @@ export default {
       // Cordova/iOS allows selecting multiple files even when the
       // multiple attribute is not specified. We also normalize drag'n'dropped
       // files here:
-      if (this.multiple !== true) {
+      if (this.multiple !== true && files.length > 0) {
         files = [ files[0] ]
       }
 
@@ -180,7 +180,7 @@ export default {
 
     __onDragLeave (e) {
       stopAndPrevent(e)
-      this.dnd = false
+      e.relatedTarget !== this.$refs.dnd && (this.dnd = false)
     },
 
     __onDrop (e) {
@@ -198,6 +198,7 @@ export default {
       if (this.dnd === true) {
         return h('div', {
           staticClass: `q-${type}__dnd absolute-full`,
+          ref: 'dnd',
           on: cache(this, 'dnd', {
             dragenter: stopAndPreventDrag,
             dragover: stopAndPreventDrag,

package/src/plugins/Loading.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import QSpinner from '../components/spinner/QSpinner.js'
 import { isSSR } from './Platform.js'
 import cache from '../utils/cache.js'
+import { isObject } from '../utils/is.js'
 import { preventScroll } from '../mixins/prevent-scroll.js'
 
 let
@@ -29,7 +30,7 @@ const Loading = {
   show (opts) {
     if (isSSR === true) { return }
 
-    props = opts === Object(opts) && opts.ignoreDefaults === true
+    props = isObject(opts) === true && opts.ignoreDefaults === true
       ? { ...originalDefaults, ...opts }
       : { ...defaults, ...opts }
 
@@ -125,7 +126,7 @@ const Loading = {
   },
 
   setDefaults (opts) {
-    opts === Object(opts) && Object.assign(defaults, opts)
+    isObject(opts) === true && Object.assign(defaults, opts)
   },
 
   install ({ $q, cfg: { loading } }) {

package/src/plugins/LoadingBar.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import { isSSR } from './Platform.js'
 import { noop } from '../utils/event.js'
+import { isObject } from '../utils/is.js'
 import QAjaxBar from '../components/ajax-bar/QAjaxBar.js'
 
 export default {
@@ -21,6 +22,15 @@ export default {
     const props = cfg.loadingBar !== void 0
       ? { ...cfg.loadingBar }
       : {}
+    const on = {
+      start: () => {
+        this.isActive = true
+      },
+
+      stop: () => {
+        this.isActive = false
+      }
+    }
 
     const bar = new Vue({
       name: 'LoadingBar',
@@ -35,22 +45,17 @@ export default {
 
       render: h => h(QAjaxBar, {
         ref: 'bar',
-        props
+        props,
+        on
       })
     }).$mount().$refs.bar
 
     Object.assign(this, {
-      start: speed => {
-        bar.start(speed)
-        this.isActive = bar.isActive = true
-      },
-      stop: () => {
-        const sessions = bar.stop()
-        this.isActive = bar.isActive = sessions > 0
-      },
+      start: bar.start,
+      stop: bar.stop,
       increment: bar.increment,
       setDefaults: opts => {
-        opts === Object(opts) && Object.assign(props, opts)
+        isObject(opts) === true && Object.assign(props, opts)
         bar.$parent.$forceUpdate()
       }
     })