quasar 1.17.2 → 1.17.6

package/dist/quasar.umd.modern.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.17.2
+ * Quasar Framework v1.17.6
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -12,7 +12,7 @@
 
   Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
 
-  var version = "1.17.2";
+  var version = "1.17.6";
 
   /* eslint-disable no-useless-escape */
 
@@ -1940,6 +1940,8 @@
 
   const ariaHidden = { 'aria-hidden': 'true' };
 
+  const iconAsButton = { tabindex: 0, type: 'button', 'aria-hidden': false, role: null };
+
   var AttrsMixin = getPropCacheMixin('$attrs', 'qAttrs');
 
   const
@@ -2109,18 +2111,19 @@
     methods: {
       start (speed = 300) {
         const oldSpeed = this.speed;
-        this.speed = Math.max(0, speed) || 0;
+        const newSpeed = this.speed = Math.max(0, speed) || 0;
 
         this.calls++;
 
         if (this.calls > 1) {
-          if (oldSpeed === 0 && speed > 0) {
+          if (oldSpeed === 0 && newSpeed > 0) {
             this.__work();
           }
-          else if (oldSpeed > 0 && speed <= 0) {
+          else if (oldSpeed > 0 && newSpeed <= 0) {
             clearTimeout(this.timer);
           }
-          return
+
+          return this.calls
         }
 
         clearTimeout(this.timer);
@@ -2128,25 +2131,33 @@
 
         this.progress = 0;
 
-        if (this.onScreen === true) { return }
-
-        this.onScreen = true;
-        this.animate = false;
         this.timer = setTimeout(() => {
           this.animate = true;
-          speed > 0 && this.__work();
-        }, 100);
+          newSpeed > 0 && this.__work();
+        }, this.onScreen === true ? 500 : 1);
+
+        if (this.onScreen !== true) {
+          this.onScreen = true;
+          this.animate = false;
+        }
+
+        return this.calls
       },
 
       increment (amount) {
         if (this.calls > 0) {
           this.progress = inc(this.progress, amount);
         }
+
+        return this.calls
       },
 
       stop () {
         this.calls = Math.max(0, this.calls - 1);
-        if (this.calls > 0) { return }
+
+        if (this.calls > 0) {
+          return this.calls
+        }
 
         clearTimeout(this.timer);
         this.$emit('stop');
@@ -2165,6 +2176,8 @@
         else {
           end();
         }
+
+        return this.calls
       },
 
       __work () {
@@ -2443,18 +2456,16 @@
       }
 
       if (this.type.img === true) {
-        return h('div', data, mergeSlot([
+        return h('span', data, mergeSlot([
           h('img', {
-            class: this.type.cls,
             attrs: { src: this.type.src }
           })
         ], this, 'default'))
       }
 
       if (this.type.svg === true) {
-        return h('div', data, mergeSlot([
+        return h('span', data, mergeSlot([
           h('svg', {
-            class: this.type.cls,
             attrs: {
               viewBox: this.type.viewBox,
               focusable: 'false' /* needed for IE11 */
@@ -2464,9 +2475,8 @@
       }
 
       if (this.type.svguse === true) {
-        return h('div', data, mergeSlot([
+        return h('span', data, mergeSlot([
           h('svg', {
-            class: this.type.cls,
             attrs: {
               viewBox: this.type.viewBox,
               focusable: 'false' /* needed for IE11 */
@@ -9961,10 +9971,6 @@
       }
     },
 
-    activated () {
-      this.__recalculateScroll();
-    },
-
     created () {
       this.buffer = [];
 
@@ -9977,6 +9983,15 @@
       this.rtlHasScrollBug = rtlHasScrollBug();
     },
 
+    activated () {
+      if (this.shouldActivate !== true) { return }
+      this.__recalculateScroll();
+    },
+
+    deactivated () {
+      this.shouldActivate = true;
+    },
+
     beforeDestroy () {
       clearTimeout(this.bufferTimer);
       clearTimeout(this.animateTimer);
@@ -12643,7 +12658,12 @@
         return this.normalizedModel
           .filter(date => typeof date === 'string')
           .map(date => this.__decodeString(date, this.innerMask, this.innerLocale))
-          .filter(date => date.dateHash !== null)
+          .filter(date =>
+            date.dateHash !== null &&
+            date.day !== null &&
+            date.month !== null &&
+            date.year !== null
+          )
       },
 
       rangeModel () {
@@ -18433,7 +18453,7 @@
               h(QIcon, {
                 staticClass: 'q-field__focusable-action',
                 props: { tag: 'button', name: this.clearIcon || this.$q.iconSet.field.clear },
-                attrs: { tabindex: 0, type: 'button' },
+                attrs: iconAsButton,
                 on: this.clearableEvents
               })
             ])
@@ -18710,6 +18730,15 @@
       this.autofocus === true && this.focus();
     },
 
+    activated () {
+      if (this.shouldActivate !== true) { return }
+      this.autofocus === true && this.focus();
+    },
+
+    deactivated () {
+      this.shouldActivate = true;
+    },
+
     beforeDestroy () {
       clearTimeout(this.focusoutTimer);
     }
@@ -19460,6 +19489,15 @@
       this.autofocus === true && this.focus();
     },
 
+    activated () {
+      if (this.shouldActivate !== true) { return }
+      this.autofocus === true && this.focus();
+    },
+
+    deactivated () {
+      this.shouldActivate = true;
+    },
+
     methods: {
       validate (shouldFocus) {
         const promises = [];
@@ -20306,7 +20344,7 @@
     },
 
     activated () {
-      if (this.__scrollTarget && this.__scrollPosition !== void 0) {
+      if (this.__scrollPosition !== void 0 && this.__scrollTarget) {
         setScrollPosition(this.__scrollTarget, this.__scrollPosition);
       }
     },
@@ -21837,19 +21875,20 @@
         if (immediately === true || this.debounce === 0 || this.debounce === '0') {
           this.__emit();
         }
-        else if (this.timer === null) {
-          this.timer = this.debounce
-            ? setTimeout(this.__emit, this.debounce)
-            : requestAnimationFrame(this.__emit);
+        else if (this.clearTimer === void 0) {
+          const [ timer, fn ] = this.debounce
+            ? [ setTimeout(this.__emit, this.debounce), clearTimeout ]
+            : [ requestAnimationFrame(this.__emit), cancelAnimationFrame ];
+
+          this.clearTimer = () => {
+            fn(timer);
+            this.clearTimer = void 0;
+          };
         }
       },
 
       __emit () {
-        if (this.timer !== null) {
-          clearTimeout(this.timer);
-          cancelAnimationFrame(this.timer);
-          this.timer = null;
-        }
+        this.clearTimer !== void 0 && this.clearTimer();
 
         const fn = this.horizontal === true
           ? getHorizontalScrollPosition
@@ -21888,14 +21927,11 @@
     },
 
     mounted () {
-      this.timer = null;
-
       this.__configureScrollTarget();
     },
 
     beforeDestroy () {
-      clearTimeout(this.timer);
-      cancelAnimationFrame(this.timer);
+      this.clearTimer !== void 0 && this.clearTimer();
       this.__unconfigureScrollTarget();
     }
   });
@@ -25096,6 +25132,14 @@
         ) || this.scroll.horizontal.size <= this.container.horizontal + 1
       },
 
+      verticalThumbStart () {
+        return this.verticalScrollPercentage * (this.container.vertical - this.verticalThumbSize)
+      },
+
+      horizontalThumbStart () {
+        return this.horizontalScrollPercentage * (this.container.horizontal - this.horizontalThumbSize)
+      },
+
       verticalThumbSize () {
         return Math.round(
           between(
@@ -25117,21 +25161,19 @@
       },
 
       verticalStyle () {
-        const pos = this.verticalScrollPercentage * (this.container.vertical - this.verticalThumbSize);
         return {
           ...this.thumbStyle,
           ...this.verticalThumbStyle,
-          top: `${pos}px`,
+          top: `${this.verticalThumbStart}px`,
           height: `${this.verticalThumbSize}px`
         }
       },
 
       horizontalStyle () {
-        const pos = this.horizontalScrollPercentage * (this.container.horizontal - this.horizontalThumbSize);
         return {
           ...this.thumbStyle,
           ...this.horizontalThumbStyle,
-          left: `${pos}px`,
+          left: `${this.horizontalThumbStart}px`,
           width: `${this.horizontalThumbSize}px`
         }
       },
@@ -25162,6 +25204,7 @@
             ...this.scroll.vertical,
             percentage: this.verticalScrollPercentage,
             thumbHidden: this.verticalThumbHidden,
+            thumbStart: this.verticalThumbStart,
             thumbSize: this.verticalThumbSize,
             style: this.verticalStyle,
             thumbClass: this.verticalThumbClass,
@@ -25171,6 +25214,7 @@
             ...this.scroll.horizontal,
             percentage: this.horizontalScrollPercentage,
             thumbHidden: this.horizontalThumbHidden,
+            thumbStart: this.horizontalThumbStart,
             thumbSize: this.horizontalThumbSize,
             style: this.horizontalStyle,
             thumbClass: this.horizontalThumbClass,
@@ -25384,8 +25428,11 @@
         const data = this.scrollComputed[ axis ];
 
         if (data.thumbHidden !== true) {
-          const pos = evt[ dirProps[ axis ].offset ] - data.thumbSize / 2;
-          this.__setScroll(pos / this.container[ axis ] * data.size, axis);
+          const offset = evt[ dirProps[ axis ].offset ];
+          if (offset < data.thumbStart || offset > data.thumbStart + data.thumbSize) {
+            const pos = offset - data.thumbSize / 2;
+            this.__setScroll(pos / this.container[ axis ] * data.size, axis);
+          }
 
           const ref = axis === 'vertical' ? this.$refs.verticalThumb : this.$refs.horizontalThumb;
           // activate thumb pan
@@ -25514,9 +25561,11 @@
     },
 
     activated () {
+      if (this.__scrollPosition === void 0) { return }
+
       const scrollTarget = this.getScrollTarget();
 
-      if (scrollTarget !== void 0 && this.__scrollPosition !== void 0) {
+      if (scrollTarget !== void 0) {
         setHorizontalScrollPosition(scrollTarget, this.__scrollPosition.left);
         setVerticalScrollPosition(scrollTarget, this.__scrollPosition.top);
       }
@@ -26127,9 +26176,9 @@
           ? 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 = {
@@ -26221,6 +26270,8 @@
     },
 
     activated () {
+      if (this.shouldActivate !== true) { return }
+
       const scrollEl = this.__getVirtualScrollTarget();
 
       if (this.prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
@@ -26236,6 +26287,10 @@
       }
     },
 
+    deactivated () {
+      this.shouldActivate = true;
+    },
+
     beforeMount () {
       this.__onVirtualScrollEvt = debounce(this.__onVirtualScrollEvt, this.$q.platform.is.ios === true ? 120 : 35);
       this.__setVirtualScrollSize();
@@ -26856,34 +26911,34 @@
 
         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);
@@ -27171,7 +27226,7 @@
             h('div', {
               ref: 'target',
               key: 'd_t',
-              staticClass: 'no-outline',
+              staticClass: 'q-select__focus-target',
               attrs: {
                 id: this.targetUid,
                 tabindex: this.tabindex,
@@ -27188,7 +27243,7 @@
           if (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
@@ -27358,7 +27413,7 @@
         }
       },
 
-      filter (val, keepClosed) {
+      filter (val, keepClosed, afterUpdateFn) {
         if (this.qListeners.filter === void 0 || (keepClosed !== true && this.focused !== true)) {
           return
         }
@@ -27415,6 +27470,7 @@
                 }
 
                 typeof afterFn === 'function' && this.$nextTick(() => { afterFn(this); });
+                typeof afterUpdateFn === 'function' && this.$nextTick(() => { afterUpdateFn(this); });
               });
             }
           },
@@ -34173,6 +34229,8 @@
       expanded: Array, // sync
       selected: {}, // sync
 
+      noSelectionUnset: Boolean,
+
       defaultExpandAll: Boolean,
       accordion: Boolean,
 
@@ -34724,7 +34782,12 @@
 
         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 {
@@ -38500,8 +38563,8 @@
           color: this.vmColor,
           label: this.okLabel,
           ripple: false,
-          ...(Object(this.ok) === this.ok ? this.ok : { flat: true }),
-          disable: this.okDisabled
+          disable: this.okDisabled,
+          ...(Object(this.ok) === this.ok ? this.ok : { flat: true })
         }
       },
 
@@ -38719,8 +38782,9 @@
     setDefaults: noop,
 
     install ({ $q, cfg }) {
+      $q.loadingBar = this;
+
       if (isSSR === true) {
-        $q.loadingBar = this;
         return
       }
 
@@ -38728,7 +38792,7 @@
         ? { ...cfg.loadingBar }
         : {};
 
-      const bar = $q.loadingBar = new Vue({
+      const bar = new Vue({
         name: 'LoadingBar',
 
         // hide App from Vue devtools
@@ -38748,11 +38812,11 @@
       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 => {
@@ -39353,7 +39417,7 @@
     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 }) => ({