quasar 1.17.3 → 1.17.7

package/src/components/select/QSelect.js

@@ -598,8 +598,12 @@ export default Vue.extend({
       return this.innerOptionsValue.find(v => isDeepEqual(v, val)) !== void 0
     },
 
-    __selectInputText () {
-      if (this.useInput === true && this.$refs.target !== void 0) {
+    __selectInputText (e) {
+      if (
+        this.useInput === true &&
+        this.$refs.target !== void 0 &&
+        (e === void 0 || (this.$refs.target === e.target && e.target.value === this.selectedString))
+      ) {
         this.$refs.target.select()
       }
     },
@@ -632,34 +636,34 @@ export default Vue.extend({
 
       if (typeof value === 'string' && value.length > 0) {
         const needle = value.toLocaleLowerCase()
+        const findFn = extractFn => {
+          const option = this.options.find(opt => extractFn(opt).toLocaleLowerCase() === needle)
 
-        let fn = opt => this.getOptionValue(opt).toLocaleLowerCase() === needle
-        let option = this.options.find(fn)
+          if (option === void 0) {
+            return false
+          }
 
-        if (option !== void 0) {
           if (this.innerValue.indexOf(option) === -1) {
             this.toggleOption(option)
           }
           else {
             this.hidePopup()
           }
-        }
-        else {
-          fn = opt => this.getOptionLabel(opt).toLocaleLowerCase() === needle
-          option = this.options.find(fn)
 
-          if (option !== void 0) {
-            if (this.innerValue.indexOf(option) === -1) {
-              this.toggleOption(option)
-            }
-            else {
-              this.hidePopup()
-            }
+          return true
+        }
+        const fillFn = afterFilter => {
+          if (findFn(this.getOptionValue) === true) {
+            return
           }
-          else {
-            this.filter(value, true)
+          if (findFn(this.getOptionLabel) === true || afterFilter === true) {
+            return
           }
+
+          this.filter(value, true, () => fillFn(true))
         }
+
+        fillFn()
       }
       else {
         this.__clearValue(e)
@@ -942,14 +946,14 @@ export default Vue.extend({
         child.push(this.__getInput(h, fromDialog, isTarget))
       }
       // there can be only one (when dialog is opened the control in dialog should be target)
-      else if (this.editable === true && isTarget === true) {
+      else if (this.editable === true) {
         child.push(
           h('div', {
-            ref: 'target',
+            ref: isTarget === true ? 'target' : void 0,
             key: 'd_t',
-            staticClass: 'no-outline',
+            staticClass: 'q-select__focus-target',
             attrs: {
-              id: this.targetUid,
+              id: isTarget === true ? this.targetUid : void 0,
               tabindex: this.tabindex,
               ...this.comboboxAttrs
             },
@@ -961,10 +965,10 @@ export default Vue.extend({
           })
         )
 
-        if (typeof this.autocomplete === 'string' && this.autocomplete.length > 0) {
+        if (isTarget === true && typeof this.autocomplete === 'string' && this.autocomplete.length > 0) {
           child.push(
             h('input', {
-              staticClass: 'q-select__autocomplete-input no-outline',
+              staticClass: 'q-select__autocomplete-input',
               attrs: { autocomplete: this.autocomplete },
               on: cache(this, 'autoinp', {
                 keyup: this.__onTargetAutocomplete
@@ -1063,7 +1067,7 @@ export default Vue.extend({
           // required for Android in order to show ENTER key when in form
           type: 'search',
           ...this.qAttrs,
-          id: this.targetUid,
+          id: isTarget === true ? this.targetUid : void 0,
           maxlength: this.maxlength, // this is converted to prop by QField
           tabindex: this.tabindex,
           autocomplete: this.autocomplete,
@@ -1134,7 +1138,7 @@ export default Vue.extend({
       }
     },
 
-    filter (val, keepClosed) {
+    filter (val, keepClosed, afterUpdateFn) {
       if (this.qListeners.filter === void 0 || (keepClosed !== true && this.focused !== true)) {
         return
       }
@@ -1191,6 +1195,7 @@ export default Vue.extend({
               }
 
               typeof afterFn === 'function' && this.$nextTick(() => { afterFn(this) })
+              typeof afterUpdateFn === 'function' && this.$nextTick(() => { afterUpdateFn(this) })
             })
           }
         },

package/src/components/select/QSelect.sass

@@ -8,11 +8,15 @@
 
   .q-field__input
     min-width: 50px !important
+    cursor: text
 
     &--padding
       padding-left: 4px
 
+  &__focus-target,
   &__autocomplete-input
+    position: absolute
+    outline: 0 !important
     width: 0
     height: 0
     padding: 0

package/src/components/select/QSelect.styl

@@ -8,11 +8,15 @@
 
   .q-field__input
     min-width: 50px !important
+    cursor: text
 
     &--padding
       padding-left: 4px
 
+  &__focus-target,
   &__autocomplete-input
+    position: absolute
+    outline: 0 !important
     width: 0
     height: 0
     padding: 0

package/src/components/stepper/QStep.js

@@ -62,21 +62,24 @@ export default Vue.extend({
   computed: {
     isActive () {
       return this.stepper.value === this.name
+    },
+
+    onEvents () {
+      return this.isActive !== true ||
+        this.stepper.vertical !== true ||
+        (this.$q.platform.is.ios !== true && this.$q.platform.is.safari !== true && this.$q.platform.is.ie !== true)
+        ? { ...this.qListeners }
+        : { ...this.qListeners, scroll: this.__keepScroll }
     }
   },
 
-  watch: {
-    isActive (active) {
-      if (
-        active === true &&
-        this.stepper.vertical === true
-      ) {
-        this.$nextTick(() => {
-          if (this.$el !== void 0) {
-            this.$el.scrollTop = 0
-          }
-        })
+  methods: {
+    __keepScroll (ev) {
+      const { target } = ev
+      if (target.scrollTop > 0) {
+        target.scrollTop = 0
       }
+      this.qListeners.scroll !== void 0 && this.qListeners.scroll(ev)
     }
   },
 
@@ -99,7 +102,7 @@ export default Vue.extend({
       'div',
       {
         staticClass: 'q-stepper__step',
-        on: { ...this.qListeners }
+        on: this.onEvents
       },
       vertical === true
         ? [

package/src/components/stepper/QStepper.sass

@@ -13,6 +13,7 @@
     line-height: 14px
 
   &__dot
+    contain: layout
     margin-right: 8px
     font-size: 14px
     width: 24px
@@ -136,6 +137,7 @@
     .q-stepper__tab
       overflow: hidden
     .q-stepper__line
+      contain: layout
       &:before, &:after
         position: absolute
         top: 50%

package/src/components/stepper/QStepper.styl

@@ -13,6 +13,7 @@
     line-height: 14px
 
   &__dot
+    contain: layout
     margin-right: 8px
     font-size: 14px
     width: 24px
@@ -136,6 +137,7 @@
     .q-stepper__tab
       overflow: hidden
     .q-stepper__line
+      contain: layout
       &:before, &:after
         position: absolute
         top: 50%

package/src/components/tabs/QTabs.js

@@ -590,10 +590,6 @@ export default Vue.extend({
     }
   },
 
-  activated () {
-    this.__recalculateScroll()
-  },
-
   created () {
     this.buffer = []
 
@@ -606,6 +602,15 @@ export default Vue.extend({
     this.rtlHasScrollBug = rtlHasScrollBug()
   },
 
+  activated () {
+    if (this.shouldActivate !== true) { return }
+    this.__recalculateScroll()
+  },
+
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   beforeDestroy () {
     clearTimeout(this.bufferTimer)
     clearTimeout(this.animateTimer)

package/src/components/tree/QTree.js

@@ -53,6 +53,8 @@ export default Vue.extend({
     expanded: Array, // sync
     selected: {}, // sync
 
+    noSelectionUnset: Boolean,
+
     defaultExpandAll: Boolean,
     accordion: Boolean,
 
@@ -604,7 +606,12 @@ export default Vue.extend({
 
       if (this.hasSelection) {
         if (meta.selectable) {
-          this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
+          if (this.noSelectionUnset === false) {
+            this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
+          }
+          else if (meta.key !== this.selected) {
+            this.$emit('update:selected', meta.key || null)
+          }
         }
       }
       else {

package/src/components/tree/QTree.json

@@ -108,6 +108,13 @@
       "category": "state"
     },
 
+    "no-selection-unset": {
+      "type": "Boolean",
+      "desc": "Do not allow un-selection when clicking currently selected node",
+      "category": "behavior",
+      "addedIn": "v1.17.5"
+    },
+
     "default-expand-all": {
       "type": "Boolean",
       "desc": "Allow the tree to have all its branches expanded, when first rendered",

package/src/mixins/attrs.js

@@ -2,4 +2,6 @@ import { getPropCacheMixin } from '../utils/cache.js'
 
 export const ariaHidden = { 'aria-hidden': 'true' }
 
+export const iconAsButton = { tabindex: 0, type: 'button', 'aria-hidden': false, role: null }
+
 export default getPropCacheMixin('$attrs', 'qAttrs')

package/src/mixins/virtual-scroll.js

@@ -556,6 +556,9 @@ export default {
       this.prevToIndex = -1
       this.prevScrollStart = void 0
 
+      this.virtualScrollPaddingBefore = sumSize(this.virtualScrollSizesAgg, this.virtualScrollSizes, 0, this.virtualScrollSliceRange.from)
+      this.virtualScrollPaddingAfter = sumSize(this.virtualScrollSizesAgg, this.virtualScrollSizes, this.virtualScrollSliceRange.to, this.virtualScrollLength)
+
       if (toIndex >= 0) {
         this.__updateVirtualScrollSizes(this.virtualScrollSliceRange.from)
 
@@ -564,9 +567,6 @@ export default {
         })
       }
       else {
-        this.virtualScrollPaddingBefore = sumSize(this.virtualScrollSizesAgg, this.virtualScrollSizes, 0, this.virtualScrollSliceRange.from)
-        this.virtualScrollPaddingAfter = sumSize(this.virtualScrollSizesAgg, this.virtualScrollSizes, this.virtualScrollSliceRange.to, this.virtualScrollLength)
-
         this.__onVirtualScrollEvt()
       }
     },
@@ -596,9 +596,9 @@ export default {
         ? 1
         : Math.ceil(scrollViewSize / this.virtualScrollItemSizeComputed)
       const baseSize = Math.max(
-        10,
+        1,
         view,
-        Math.ceil(this.virtualScrollSliceSize / multiplier)
+        Math.ceil((this.virtualScrollSliceSize > 0 ? this.virtualScrollSliceSize : 10) / multiplier)
       )
 
       this.virtualScrollSliceSizeComputed = {
@@ -690,6 +690,8 @@ export default {
   },
 
   activated () {
+    if (this.shouldActivate !== true) { return }
+
     const scrollEl = this.__getVirtualScrollTarget()
 
     if (this.prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
@@ -705,6 +707,10 @@ export default {
     }
   },
 
+  deactivated () {
+    this.shouldActivate = true
+  },
+
   beforeMount () {
     this.__onVirtualScrollEvt = debounce(this.__onVirtualScrollEvt, this.$q.platform.is.ios === true ? 120 : 35)
     this.__setVirtualScrollSize()

package/src/plugins/LoadingBar.js

@@ -12,8 +12,9 @@ export default {
   setDefaults: noop,
 
   install ({ $q, cfg }) {
+    $q.loadingBar = this
+
     if (isSSR === true) {
-      $q.loadingBar = this
       return
     }
 
@@ -21,7 +22,7 @@ export default {
       ? { ...cfg.loadingBar }
       : {}
 
-    const bar = $q.loadingBar = new Vue({
+    const bar = new Vue({
       name: 'LoadingBar',
 
       // hide App from Vue devtools
@@ -41,11 +42,11 @@ export default {
     Object.assign(this, {
       start: speed => {
         bar.start(speed)
-        this.isActive = bar.isActive = bar.calls > 0
+        this.isActive = bar.isActive = true
       },
       stop: () => {
-        bar.stop()
-        this.isActive = bar.isActive = bar.calls > 0
+        const sessions = bar.stop()
+        this.isActive = bar.isActive = sessions > 0
       },
       increment: bar.increment,
       setDefaults: opts => {

package/src/plugins/LoadingBar.json

@@ -16,6 +16,14 @@
     }
   },
 
+  "props": {
+    "isActive": {
+      "type": "Boolean",
+      "desc": "Is LoadingBar active?",
+      "reactive": true
+    }
+  },
+
   "methods": {
     "start": {
       "desc": "Notify bar you've started a background activity",

package/src/plugins/Notify.js

@@ -150,7 +150,7 @@ function addNotification (config, vm, originalApi) {
   closeBtn && actions.push({
     label: typeof closeBtn === 'string'
       ? closeBtn
-      : this.$q.lang.label.close
+      : vm.$q.lang.label.close
   })
 
   notif.actions = actions.map(({ handler, noDismiss, style, class: klass, attrs, ...props }) => ({