quasar 1.19.4 → 1.20.0

package/dist/quasar.umd.modern.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 */
 
@@ -5699,7 +5699,10 @@
             click: e => {
               this.$emit('click', e);
             }
-          })
+          }),
+          scopedSlots: {
+            loading: this.$scopedSlots.loading
+          }
         }, label.concat(Arrow))
       }
 
@@ -5719,7 +5722,10 @@
             this.hide();
             this.$emit('click', e);
           }
-        })
+        }),
+        scopedSlots: {
+          loading: this.$scopedSlots.loading
+        }
       }, label);
 
       return h(QBtnGroup, {
@@ -8067,7 +8073,7 @@
     timeOrFulltime: v => /^([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.
@@ -9292,8 +9298,12 @@
         stopAndPrevent(evt);
 
         const
-          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)),
@@ -17519,7 +17529,7 @@
         let child;
 
         if (this.$scopedSlots.header !== void 0) {
-          child = [].concat(this.$scopedSlots.header());
+          child = [].concat(this.$scopedSlots.header({ expanded: this.showing === true }));
         }
         else {
           child = [
@@ -18389,6 +18399,7 @@
       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) ||
           (
@@ -18698,7 +18709,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
@@ -19260,6 +19272,11 @@
 
       __addFiles (e, fileList) {
         const files = this.__processFiles(e, fileList, this.innerValue, this.isAppending);
+        const fileInput = this.__getFileInput();
+
+        if (fileInput !== void 0) {
+          fileInput.value = '';
+        }
 
         // if nothing to do...
         if (files === void 0) { return }
@@ -24917,7 +24934,11 @@
 
         const
           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') {
           const interval = this.model.max - this.model.min;
@@ -26909,20 +26930,35 @@
       },
 
       comboboxAttrs () {
-        return {
+        const 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 () {
-        return {
+        const 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
       }
     },
 
@@ -27001,6 +27037,9 @@
               true
             );
 
+            this.dialogFieldFocused = false;
+            document.activeElement.blur();
+
             this.hidePopup();
           }
 
@@ -27072,15 +27111,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(() => {
+              this.setOptionIndex(index);
+              this.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.useInput === true && this.fillInput === true) {
+                this.__setInputValue(index >= 0
+                  ? this.getOptionLabel(this.options[index])
+                  : this.defaultInputValue
+                );
+              }
+            });
           }
         }
       },
@@ -27414,7 +27456,7 @@
 
         if (this.useChips === true) {
           return this.selectedScope.map((scope, i) => h(QChip, {
-            key: 'option-' + i,
+            key: 'rem#' + i,
             props: {
               removable: this.editable === true && this.isOptionDisabled(scope.opt) !== true,
               dense: true,
@@ -27457,14 +27499,14 @@
           const attrs = 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: {
                 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
               },
               on: cache(this, 'f-tget', {
@@ -27478,8 +27520,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
                 })
@@ -27514,6 +27557,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
@@ -27583,9 +27632,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
           },
@@ -27704,6 +27752,7 @@
                   }
                   else {
                     this.menu = true;
+                    this.hasDialog === true && (this.dialog = true);
                   }
                 }
 
@@ -27742,15 +27791,13 @@
             focusout(e);
           },
           click: e => {
-            if (this.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.menu === true) {
-                this.__closeMenu();
-                this.$refs.target !== void 0 && this.$refs.target.focus();
-                return
-              }
+            if (this.hasDialog !== true && this.menu === true) {
+              this.__closeMenu();
+              this.$refs.target !== void 0 && this.$refs.target.focus();
+              return
             }
 
             this.showPopup(e);
@@ -27771,15 +27818,8 @@
       },
 
       __getMenu (h) {
-        const 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,
@@ -27805,7 +27845,7 @@
             'before-hide': this.__closeMenu,
             show: this.__onMenuShow
           })
-        }, child)
+        }, this.__getOptions(h))
       },
 
       __onMenuShow () {
@@ -27856,8 +27896,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,
@@ -27865,18 +27906,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,
@@ -27900,13 +27934,17 @@
       },
 
       __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 (e) {
+        if (this.$q.platform.is.desktop !== true) {
+          document.activeElement.blur();
+        }
         this.hidePopup();
         this.focused === false && this.$emit('blur', e);
         this.__resetInputValue();
@@ -35359,14 +35397,14 @@
 
       __addFiles (e, fileList) {
         const localFiles = this.__processFiles(e, fileList, this.files, true);
-
-        if (localFiles === void 0) { return }
-
         const fileInput = this.__getFileInput();
+
         if (fileInput !== void 0) {
           fileInput.value = '';
         }
 
+        if (localFiles === void 0) { return }
+
         localFiles.forEach(file => {
           this.__updateFile(file, 'idle');
           this.uploadSize += file.size;
@@ -39127,19 +39165,35 @@
     vm,
     uid$3 = 0,
     timeout,
-    props$1 = {};
-  const
-    originalDefaults = {
-      delay: 0,
-      message: false,
-      spinnerSize: 80,
-      spinnerColor: 'white',
-      messageColor: 'white',
-      backgroundColor: 'black',
-      spinner: QSpinner,
-      customClass: ''
-    },
-    defaults = { ...originalDefaults };
+    props$1 = {},
+    activeGroups = {};
+
+  const originalDefaults = {
+    group: '__default_quasar_group__',
+    delay: 0,
+    message: false,
+    spinnerSize: 80,
+    spinnerColor: 'white',
+    messageColor: 'white',
+    backgroundColor: 'black',
+    spinner: QSpinner,
+    customClass: ''
+  };
+
+  const defaults = { ...originalDefaults };
+
+  function registerProps (opts) {
+    if (opts && opts.group !== void 0 && activeGroups[ opts.group ] !== void 0) {
+      return Object.assign(activeGroups[ opts.group ], opts)
+    }
+
+    const newProps = isObject(opts) === true && opts.ignoreDefaults === true
+      ? { ...originalDefaults, ...opts }
+      : { ...defaults, ...opts };
+
+    activeGroups[ newProps.group ] = newProps;
+    return newProps
+  }
 
   const Loading = {
     isActive: false,
@@ -39147,9 +39201,8 @@
     show (opts) {
       if (isSSR === true) { return }
 
-      props$1 = isObject(opts) === true && opts.ignoreDefaults === true
-        ? { ...originalDefaults, ...opts }
-        : { ...defaults, ...opts };
+      props$1 = registerProps(opts);
+      const { group } = props$1;
 
       props$1.customClass += ` text-${props$1.backgroundColor}`;
 
@@ -39158,81 +39211,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(() => {
+          timeout = void 0;
 
-      timeout = setTimeout(() => {
-        timeout = void 0;
+          const node = document.createElement('div');
+          document.body.appendChild(node);
 
-        const 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 () {
-            // prevent error in Vue devtools
-            this._routerRoot === void 0 && (this._routerRoot = {});
-          },
+            beforeCreate () {
+              // prevent error in Vue devtools
+              this._routerRoot === void 0 && (this._routerRoot = {});
+            },
 
-          el: node,
+            el: node,
 
-          mounted () {
-            preventScroll(true);
-          },
+            mounted () {
+              preventScroll(true);
+            },
 
-          render: (h) => {
-            return h('transition', {
-              props: {
-                name: 'q-transition--fade',
-                appear: true
-              },
-              on: cache(this, 'tr', {
-                'after-leave': () => {
-                  // might be called to finalize
-                  // previous leave, even if it was cancelled
-                  if (this.isActive !== true && vm !== void 0) {
-                    preventScroll(false);
-                    vm.$destroy();
-                    vm.$el.remove();
-                    vm = void 0;
+            render: (h) => {
+              return h('transition', {
+                props: {
+                  name: 'q-transition--fade',
+                  appear: true
+                },
+                on: cache(this, 'tr', {
+                  'after-leave': () => {
+                    // might be called to finalize
+                    // previous leave, even if it was cancelled
+                    if (this.isActive !== true && vm !== void 0) {
+                      preventScroll(false);
+                      vm.$destroy();
+                      vm.$el.remove();
+                      vm = void 0;
+                    }
                   }
-                }
-              })
-            }, [
-              this.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.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: {
-                    [props$1.sanitize === true ? 'textContent' : 'innerHTML']: props$1.message
-                  }
-                })) || void 0
-              ]) : null
-            ])
-          }
-        });
-      }, props$1.delay);
+                  (props$1.message && h('div', {
+                    class: `text-${props$1.messageColor}`,
+                    domProps: {
+                      [props$1.sanitize === true ? 'textContent' : 'innerHTML']: props$1.message
+                    }
+                  })) || void 0
+                ]) : null
+              ])
+            }
+          });
+        }, props$1.delay);
+      }
+
+      return 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.hide(group);
+          return
+        }
+
+        // else we have params so we need to update this group
+        this.show({ ...paramProps, group });
+      }
     },
 
-    hide () {
+    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 ];
+
+          const 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
+            const lastGroup = keys[ keys.length - 1 ];
+            this.show({ group: lastGroup });
+            return
+          }
+        }
+
         if (timeout !== void 0) {
           clearTimeout(timeout);
           timeout = void 0;