quasar 1.19.4 → 1.20.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.19.4
+ * Quasar Framework v1.20.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/quasar.styl

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.19.4
+ * Quasar Framework v1.20.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.19.4
+ * Quasar Framework v1.20.0
  * (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.19.4";
+  var version = "1.20.0";
 
   /* eslint-disable no-useless-escape */
 
@@ -5852,7 +5852,10 @@
             click: function (e) {
               this$1.$emit('click', e);
             }
-          })
+          }),
+          scopedSlots: {
+            loading: this.$scopedSlots.loading
+          }
         }, label.concat(Arrow))
       }
 
@@ -5870,7 +5873,10 @@
             this$1.hide();
             this$1.$emit('click', e);
           }
-        })
+        }),
+        scopedSlots: {
+          loading: this.$scopedSlots.loading
+        }
       }, label);
 
       return h(QBtnGroup, {
@@ -8243,7 +8249,7 @@
     timeOrFulltime: function (v) { return /^([0-1]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/.test(v); },
 
     // -- RFC 5322 --
-    // -- Added in v2.6.6 --
+    // -- Added in v1.18.10 --
     // This is a basic helper validation.
     // For something more complex (like RFC 822) you should write and use your own rule.
     // We won't be accepting PRs to enhance the one below because of the reason above.
@@ -9479,8 +9485,12 @@
         stopAndPrevent(evt);
 
         var
-          step = ([34, 33].includes(evt.keyCode) ? 10 : 1) * this.computedStep,
-          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (this.isReversed === true ? -1 : 1) * step;
+          stepVal = ([34, 33].includes(evt.keyCode) ? 10 : 1) * this.computedStep,
+          offset = (
+            ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) *
+            (this.isReversed === true ? -1 : 1) *
+            (this.vertical === true ? -1 : 1) * stepVal
+          );
 
         this.model = between(
           parseFloat((this.model + offset).toFixed(this.computedDecimals)),
@@ -17835,7 +17845,7 @@
         var child;
 
         if (this.$scopedSlots.header !== void 0) {
-          child = [].concat(this.$scopedSlots.header());
+          child = [].concat(this.$scopedSlots.header({ expanded: this.showing === true }));
         }
         else {
           child = [
@@ -18702,6 +18712,7 @@
       floatingLabel: function floatingLabel () {
         return this.stackLabel === true ||
           this.focused === true ||
+          typeof this.inputValue === 'number' ||
           (typeof this.inputValue === 'string' && this.inputValue.length > 0) ||
           (this.hideSelected !== true && this.hasValue === true) ||
           (
@@ -18988,7 +18999,8 @@
 
         return h('div', {
           staticClass: 'q-field__bottom row items-start q-field__bottom--' +
-            (this.hideBottomSpace !== true ? 'animated' : 'stale')
+            (this.hideBottomSpace !== true ? 'animated' : 'stale'),
+          on: { click: prevent }
         }, [
           this.hideBottomSpace === true
             ? main
@@ -19554,6 +19566,11 @@
         var this$1 = this;
 
         var files = this.__processFiles(e, fileList, this.innerValue, this.isAppending);
+        var fileInput = this.__getFileInput();
+
+        if (fileInput !== void 0) {
+          fileInput.value = '';
+        }
 
         // if nothing to do...
         if (files === void 0) { return }
@@ -25298,7 +25315,11 @@
 
         var
           stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * this.computedStep,
-          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (this.isReversed === true ? -1 : 1) * stepVal;
+          offset = (
+            ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) *
+            (this.isReversed === true ? -1 : 1) *
+            (this.vertical === true ? -1 : 1) * stepVal
+          );
 
         if (this.focus === 'both') {
           var interval = this.model.max - this.model.min;
@@ -27337,20 +27358,35 @@
       },
 
       comboboxAttrs: function comboboxAttrs () {
-        return {
+        var attrs = {
+          tabindex: this.tabindex,
           role: 'combobox',
-          'aria-multiselectable': this.multiple === true ? 'true' : 'false',
+          'aria-label': this.label,
+          'aria-autocomplete': this.useInput === true ? 'list' : 'none',
           'aria-expanded': this.menu === true ? 'true' : 'false',
           'aria-owns': ((this.targetUid) + "_lb"),
-          'aria-activedescendant': ((this.targetUid) + "_" + (this.optionIndex))
+          'aria-controls': ((this.targetUid) + "_lb")
+        };
+
+        if (this.optionIndex >= 0) {
+          attrs['aria-activedescendant'] = (this.targetUid) + "_" + (this.optionIndex);
         }
+
+        return attrs
       },
 
       listboxAttrs: function listboxAttrs () {
-        return {
+        var attrs = {
+          id: ((this.targetUid) + "_lb"),
           role: 'listbox',
-          id: ((this.targetUid) + "_lb")
+          'aria-multiselectable': this.multiple === true ? 'true' : 'false'
+        };
+
+        if (this.optionIndex >= 0) {
+          attrs['aria-activedescendant'] = (this.targetUid) + "_" + (this.optionIndex);
         }
+
+        return attrs
       }
     },
 
@@ -27429,6 +27465,9 @@
               true
             );
 
+            this.dialogFieldFocused = false;
+            document.activeElement.blur();
+
             this.hidePopup();
           }
 
@@ -27488,6 +27527,7 @@
       },
 
       moveOptionSelection: function moveOptionSelection (offset, skipInputValue) {
+        var this$1 = this;
         if ( offset === void 0 ) offset = 1;
 
         if (this.menu === true) {
@@ -27502,15 +27542,18 @@
           while (index !== -1 && index !== this.optionIndex && this.isOptionDisabled(this.options[index]) === true)
 
           if (this.optionIndex !== index) {
-            this.setOptionIndex(index);
-            this.scrollTo(index);
+            cancelAnimationFrame(this.moveAnimationFrame);
+            this.moveAnimationFrame = requestAnimationFrame(function () {
+              this$1.setOptionIndex(index);
+              this$1.scrollTo(index);
 
-            if (skipInputValue !== true && this.useInput === true && this.fillInput === true) {
-              this.__setInputValue(index >= 0
-                ? this.getOptionLabel(this.options[index])
-                : this.defaultInputValue
-              );
-            }
+              if (skipInputValue !== true && this$1.useInput === true && this$1.fillInput === true) {
+                this$1.__setInputValue(index >= 0
+                  ? this$1.getOptionLabel(this$1.options[index])
+                  : this$1.defaultInputValue
+                );
+              }
+            });
           }
         }
       },
@@ -27857,7 +27900,7 @@
             var obj;
 
             return h(QChip, {
-            key: 'option-' + i,
+            key: 'rem#' + i,
             props: {
               removable: this$1.editable === true && this$1.isOptionDisabled(scope.opt) !== true,
               dense: true,
@@ -27897,13 +27940,13 @@
           var attrs$1 = isTarget === true ? this.comboboxAttrs : void 0;
 
           child.push(
-            h('div', {
+            h('input', {
               ref: isTarget === true ? 'target' : void 0,
               key: 'd_t',
               staticClass: 'q-select__focus-target',
               attrs: Object.assign({}, {id: isTarget === true ? this.targetUid : void 0,
-                tabindex: this.tabindex,
-                'data-autofocus': (fromDialog !== true && this.autofocus) || void 0},
+                readonly: true,
+                'data-autofocus': (fromDialog === true ? isTarget === true : this.autofocus) || void 0},
                 attrs$1),
               on: cache(this, 'f-tget', {
                 keydown: this.__onTargetKeydown,
@@ -27916,8 +27959,9 @@
           if (isTarget === true && typeof this.autocomplete === 'string' && this.autocomplete.length > 0) {
             child.push(
               h('input', {
+                key: 'autoinp',
                 staticClass: 'q-select__autocomplete-input',
-                attrs: { autocomplete: this.autocomplete },
+                attrs: { autocomplete: this.autocomplete, tabindex: -1 },
                 on: cache(this, 'autoinp', {
                   keyup: this.__onTargetAutocomplete
                 })
@@ -27954,6 +27998,12 @@
           return void 0
         }
 
+        if (this.noOptions === true) {
+          return this.$scopedSlots['no-option'] !== void 0
+            ? this.$scopedSlots['no-option']({ inputValue: this.inputValue })
+            : void 0
+        }
+
         if (
           this.$scopedSlots.option !== void 0 &&
           this.__optionScopeCache.optionSlot !== this.$scopedSlots.option
@@ -28024,9 +28074,8 @@
             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 && this.autofocus) || void 0,
+            'data-autofocus': (fromDialog === true ? isTarget === true : this.autofocus) || void 0,
             disabled: this.disable === true,
             readonly: this.readonly === true}),
           on: this.inputControlEvents
@@ -28148,6 +28197,7 @@
                   }
                   else {
                     this$1.menu = true;
+                    this$1.hasDialog === true && (this$1.dialog = true);
                   }
                 }
 
@@ -28188,15 +28238,13 @@
             focusout(e);
           },
           click: function (e) {
-            if (this$1.hasDialog !== true) {
-              // label from QField will propagate click on the input (except IE)
-              prevent(e);
+            // label from QField will propagate click on the input (except IE)
+            prevent(e);
 
-              if (this$1.menu === true) {
-                this$1.__closeMenu();
-                this$1.$refs.target !== void 0 && this$1.$refs.target.focus();
-                return
-              }
+            if (this$1.hasDialog !== true && this$1.menu === true) {
+              this$1.__closeMenu();
+              this$1.$refs.target !== void 0 && this$1.$refs.target.focus();
+              return
             }
 
             this$1.showPopup(e);
@@ -28217,15 +28265,8 @@
       },
 
       __getMenu: function __getMenu (h) {
-        var child = this.noOptions === true
-          ? (
-            this.$scopedSlots['no-option'] !== void 0
-              ? this.$scopedSlots['no-option']({ inputValue: this.inputValue })
-              : null
-          )
-          : this.__getOptions(h);
-
         return h(QMenu, {
+          key: 'menu',
           ref: 'menu',
           props: {
             value: this.menu,
@@ -28251,7 +28292,7 @@
             'before-hide': this.__closeMenu,
             show: this.__onMenuShow
           })
-        }, child)
+        }, this.__getOptions(h))
       },
 
       __onMenuShow: function __onMenuShow () {
@@ -28300,8 +28341,9 @@
 
         this.menu === true && content.push(
           h('div', {
+            key: 'virtMenu',
             ref: 'menuContent',
-            staticClass: 'scroll',
+            staticClass: 'col scroll',
             class: this.menuContentClass,
             style: this.popupContentStyle,
             attrs: this.listboxAttrs,
@@ -28309,18 +28351,11 @@
               click: prevent,
               '&scroll': this.__onVirtualScrollEvt
             })
-          }, (
-            this.noOptions === true
-              ? (
-                this.$scopedSlots['no-option'] !== void 0
-                  ? this.$scopedSlots['no-option']({ inputValue: this.inputValue })
-                  : null
-              )
-              : this.__getOptions(h)
-          ))
+          }, this.__getOptions(h))
         );
 
         return h(QDialog, {
+          key: 'dialog',
           ref: 'dialog',
           props: {
             value: this.dialog,
@@ -28344,13 +28379,17 @@
       },
 
       __onDialogBeforeHide: function __onDialogBeforeHide () {
-        if (client.is.mobile !== true) {
+        if (this.useInput !== true || this.$q.platform.is.desktop === true) {
           this.$refs.dialog.__refocusTarget = this.$el.querySelector('.q-field__native > [tabindex]:last-child');
         }
         this.focused = false;
+        this.dialogFieldFocused = false;
       },
 
       __onDialogHide: function __onDialogHide (e) {
+        if (this.$q.platform.is.desktop !== true) {
+          document.activeElement.blur();
+        }
         this.hidePopup();
         this.focused === false && this.$emit('blur', e);
         this.__resetInputValue();
@@ -35914,14 +35953,14 @@
         var this$1 = this;
 
         var localFiles = this.__processFiles(e, fileList, this.files, true);
-
-        if (localFiles === void 0) { return }
-
         var fileInput = this.__getFileInput();
+
         if (fileInput !== void 0) {
           fileInput.value = '';
         }
 
+        if (localFiles === void 0) { return }
+
         localFiles.forEach(function (file) {
           this$1.__updateFile(file, 'idle');
           this$1.uploadSize += file.size;
@@ -39660,19 +39699,35 @@
     vm,
     uid$3 = 0,
     timeout,
-    props$1 = {};
-  var
-    originalDefaults = {
-      delay: 0,
-      message: false,
-      spinnerSize: 80,
-      spinnerColor: 'white',
-      messageColor: 'white',
-      backgroundColor: 'black',
-      spinner: QSpinner,
-      customClass: ''
-    },
-    defaults = Object.assign({}, originalDefaults);
+    props$1 = {},
+    activeGroups = {};
+
+  var originalDefaults = {
+    group: '__default_quasar_group__',
+    delay: 0,
+    message: false,
+    spinnerSize: 80,
+    spinnerColor: 'white',
+    messageColor: 'white',
+    backgroundColor: 'black',
+    spinner: QSpinner,
+    customClass: ''
+  };
+
+  var defaults = Object.assign({}, originalDefaults);
+
+  function registerProps (opts) {
+    if (opts && opts.group !== void 0 && activeGroups[ opts.group ] !== void 0) {
+      return Object.assign(activeGroups[ opts.group ], opts)
+    }
+
+    var newProps = isObject(opts) === true && opts.ignoreDefaults === true
+      ? Object.assign({}, originalDefaults, opts)
+      : Object.assign({}, defaults, opts);
+
+    activeGroups[ newProps.group ] = newProps;
+    return newProps
+  }
 
   var Loading = {
     isActive: false,
@@ -39682,9 +39737,8 @@
 
       if (isSSR === true) { return }
 
-      props$1 = isObject(opts) === true && opts.ignoreDefaults === true
-        ? Object.assign({}, originalDefaults, opts)
-        : Object.assign({}, defaults, opts);
+      props$1 = registerProps(opts);
+      var group = props$1.group;
 
       props$1.customClass += " text-" + (props$1.backgroundColor);
 
@@ -39693,81 +39747,116 @@
       if (vm !== void 0) {
         props$1.uid = uid$3;
         vm.$forceUpdate();
-        return
       }
+      else {
+        props$1.uid = ++uid$3;
+        clearTimeout(timeout);
 
-      props$1.uid = ++uid$3;
-      clearTimeout(timeout);
+        timeout = setTimeout(function () {
+          timeout = void 0;
 
-      timeout = setTimeout(function () {
-        timeout = void 0;
+          var node = document.createElement('div');
+          document.body.appendChild(node);
 
-        var node = document.createElement('div');
-        document.body.appendChild(node);
-
-        vm = new Vue({
-          name: 'QLoading',
+          vm = new Vue({
+            name: 'QLoading',
 
-          // hide App from Vue devtools
-          devtools: { hide: true },
+            // hide App from Vue devtools
+            devtools: { hide: true },
 
-          beforeCreate: function beforeCreate () {
-            // prevent error in Vue devtools
-            this._routerRoot === void 0 && (this._routerRoot = {});
-          },
+            beforeCreate: function beforeCreate () {
+              // prevent error in Vue devtools
+              this._routerRoot === void 0 && (this._routerRoot = {});
+            },
 
-          el: node,
+            el: node,
 
-          mounted: function mounted () {
-            preventScroll(true);
-          },
+            mounted: function mounted () {
+              preventScroll(true);
+            },
 
-          render: function (h) {
-            var obj;
+            render: function (h) {
+              var obj;
 
-            return h('transition', {
-              props: {
-                name: 'q-transition--fade',
-                appear: true
-              },
-              on: cache(this$1, 'tr', {
-                'after-leave': function () {
-                  // might be called to finalize
-                  // previous leave, even if it was cancelled
-                  if (this$1.isActive !== true && vm !== void 0) {
-                    preventScroll(false);
-                    vm.$destroy();
-                    vm.$el.remove();
-                    vm = void 0;
+              return h('transition', {
+                props: {
+                  name: 'q-transition--fade',
+                  appear: true
+                },
+                on: cache(this$1, 'tr', {
+                  'after-leave': function () {
+                    // might be called to finalize
+                    // previous leave, even if it was cancelled
+                    if (this$1.isActive !== true && vm !== void 0) {
+                      preventScroll(false);
+                      vm.$destroy();
+                      vm.$el.remove();
+                      vm = void 0;
+                    }
                   }
-                }
-              })
-            }, [
-              this$1.isActive === true ? h('div', {
-                staticClass: 'q-loading fullscreen column flex-center z-max',
-                key: props$1.uid,
-                class: props$1.customClass.trim()
+                })
               }, [
-                h(props$1.spinner, {
-                  props: {
-                    color: props$1.spinnerColor,
-                    size: props$1.spinnerSize
-                  }
-                }),
+                this$1.isActive === true ? h('div', {
+                  staticClass: 'q-loading fullscreen column flex-center z-max',
+                  key: props$1.uid,
+                  class: props$1.customClass.trim()
+                }, [
+                  h(props$1.spinner, {
+                    props: {
+                      color: props$1.spinnerColor,
+                      size: props$1.spinnerSize
+                    }
+                  }),
 
-                (props$1.message && h('div', {
-                  class: ("text-" + (props$1.messageColor)),
-                  domProps: ( obj = {}, obj[props$1.sanitize === true ? 'textContent' : 'innerHTML'] = props$1.message, obj )
-                })) || void 0
-              ]) : null
-            ])
-          }
-        });
-      }, props$1.delay);
+                  (props$1.message && h('div', {
+                    class: ("text-" + (props$1.messageColor)),
+                    domProps: ( obj = {}, obj[props$1.sanitize === true ? 'textContent' : 'innerHTML'] = props$1.message, obj )
+                  })) || void 0
+                ]) : null
+              ])
+            }
+          });
+        }, props$1.delay);
+      }
+
+      return function (paramProps) {
+        // if we don't have params (or not an Object param) then we need to hide this group
+        if (paramProps === void 0 || Object(paramProps) !== paramProps) {
+          this$1.hide(group);
+          return
+        }
+
+        // else we have params so we need to update this group
+        this$1.show(Object.assign({}, paramProps, {group: group}));
+      }
     },
 
-    hide: function hide () {
+    hide: function hide (group) {
       if (this.isActive === true) {
+        if (group === void 0) {
+          // clear out any active groups
+          activeGroups = {};
+        }
+        else if (activeGroups[ group ] === void 0) {
+          // we've already hidden it so nothing to do
+          return
+        }
+        else {
+          // remove active group
+          delete activeGroups[ group ];
+
+          var keys = Object.keys(activeGroups);
+
+          // if there are other groups registered then
+          // show last registered one since that one is still active
+          if (keys.length !== 0) {
+            // get last registered group
+            var lastGroup = keys[ keys.length - 1 ];
+            this.show({ group: lastGroup });
+            return
+          }
+        }
+
         if (timeout !== void 0) {
           clearTimeout(timeout);
           timeout = void 0;