quasar 2.7.7 → 2.8.1

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.7.7
+ * Quasar Framework v2.8.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1401,11 +1401,6 @@
     globalConfigIsFrozen = true;
   }
 
-  const
-    hasMap = typeof Map === 'function',
-    hasSet = typeof Set === 'function',
-    hasArrayBuffer = typeof ArrayBuffer === 'function';
-
   function isDeepEqual (a, b) {
     if (a === b) {
       return true
@@ -1434,7 +1429,7 @@
         return true
       }
 
-      if (hasMap === true && a.constructor === Map) {
+      if (a.constructor === Map) {
         if (a.size !== b.size) {
           return false
         }
@@ -1458,7 +1453,7 @@
         return true
       }
 
-      if (hasSet === true && a.constructor === Set) {
+      if (a.constructor === Set) {
         if (a.size !== b.size) {
           return false
         }
@@ -1474,7 +1469,7 @@
         return true
       }
 
-      if (hasArrayBuffer === true && a.buffer != null && a.buffer.constructor === ArrayBuffer) {
+      if (a.buffer != null && a.buffer.constructor === ArrayBuffer) {
         length = a.length;
 
         if (length !== b.length) {
@@ -1541,6 +1536,14 @@
     return typeof v === 'number' && isFinite(v)
   }
 
+  var is = {
+    deepEqual: isDeepEqual,
+    object: isObject,
+    date: isDate,
+    regexp: isRegexp,
+    number: isNumber
+  };
+
   const autoInstalledPlugins = [
     Platform,
     Body,
@@ -1603,7 +1606,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.7.7' };
+      const $q = { version: '2.8.1' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2396,8 +2399,8 @@
     },
 
     setup (props, { slots }) {
-      const vm = vue.getCurrentInstance();
-      const isDark = useDark(props, vm.proxy.$q);
+      const { proxy: { $q } } = vue.getCurrentInstance();
+      const isDark = useDark(props, $q);
 
       const classes = vue.computed(() =>
         'q-banner row items-center'
@@ -2445,8 +2448,8 @@
     },
 
     setup (props, { slots }) {
-      const vm = vue.getCurrentInstance();
-      const isDark = useDark(props, vm.proxy.$q);
+      const { proxy: { $q } } = vue.getCurrentInstance();
+      const isDark = useDark(props, $q);
 
       const classes = vue.computed(() =>
         'q-bar row no-wrap items-center'
@@ -2491,20 +2494,20 @@
     })
   }
 
-  // used directly by docs too
-  function getParentVm (vm) {
-    if (Object(vm.$parent) === vm.$parent) {
-      return vm.$parent
+  // copied to docs too
+  function getParentProxy (proxy) {
+    if (Object(proxy.$parent) === proxy.$parent) {
+      return proxy.$parent
     }
 
-    vm = vm.$.parent;
+    let { parent } = proxy.$;
 
-    while (Object(vm) === vm) {
-      if (Object(vm.proxy) === vm.proxy) {
-        return vm.proxy
+    while (Object(parent) === parent) {
+      if (Object(parent.proxy) === parent.proxy) {
+        return parent.proxy
       }
 
-      vm = vm.parent;
+      parent = parent.parent;
     }
   }
 
@@ -3066,10 +3069,7 @@
       }
     }
 
-    const target = vue.isRef(el) === true
-      ? el.value
-      : el;
-
+    const target = vue.unref(el);
     if (target) {
       return target.$el || target
     }
@@ -4345,58 +4345,58 @@
     }
   }
 
-  const portalList = [];
+  const portalProxyList = [];
 
-  function getPortalVm (el) {
-    return portalList.find(vm =>
-      vm.__qPortalInnerRef.value !== null
-      && vm.__qPortalInnerRef.value.contains(el)
+  function getPortalProxy (el) {
+    return portalProxyList.find(proxy =>
+      proxy.__qPortalInnerRef.value !== null
+      && proxy.__qPortalInnerRef.value.contains(el)
     )
   }
 
-  function closePortalMenus (vm, evt) {
+  function closePortalMenus (proxy, evt) {
     do {
-      if (vm.$options.name === 'QMenu') {
-        vm.hide(evt);
+      if (proxy.$options.name === 'QMenu') {
+        proxy.hide(evt);
 
         // is this a point of separation?
-        if (vm.$props.separateClosePopup === true) {
-          return getParentVm(vm)
+        if (proxy.$props.separateClosePopup === true) {
+          return getParentProxy(proxy)
         }
       }
-      else if (vm.__qPortalInnerRef !== void 0) {
+      else if (proxy.__qPortalInnerRef !== void 0) {
         // treat it as point of separation if parent is QPopupProxy
         // (so mobile matches desktop behavior)
         // and hide it too
-        const parent = getParentVm(vm);
+        const parent = getParentProxy(proxy);
 
         if (parent !== void 0 && parent.$options.name === 'QPopupProxy') {
-          vm.hide(evt);
+          proxy.hide(evt);
           return parent
         }
         else {
-          return vm
+          return proxy
         }
       }
 
-      vm = getParentVm(vm);
-    } while (vm !== void 0 && vm !== null)
+      proxy = getParentProxy(proxy);
+    } while (proxy !== void 0 && proxy !== null)
   }
 
-  function closePortals (vm, evt, depth) {
-    while (depth !== 0 && vm !== void 0 && vm !== null) {
-      if (vm.__qPortalInnerRef !== void 0) {
+  function closePortals (proxy, evt, depth) {
+    while (depth !== 0 && proxy !== void 0 && proxy !== null) {
+      if (proxy.__qPortalInnerRef !== void 0) {
         depth--;
 
-        if (vm.$options.name === 'QMenu') {
-          vm = closePortalMenus(vm, evt);
+        if (proxy.$options.name === 'QMenu') {
+          proxy = closePortalMenus(proxy, evt);
           continue
         }
 
-        vm.hide(evt);
+        proxy.hide(evt);
       }
 
-      vm = getParentVm(vm);
+      proxy = getParentProxy(proxy);
     }
   }
 
@@ -4448,7 +4448,7 @@
         portalIsActive.value = true;
 
         // register portal
-        portalList.push(vm.proxy);
+        portalProxyList.push(vm.proxy);
 
         addFocusWaitFlag(focusObj);
       }
@@ -4463,9 +4463,9 @@
       portalIsActive.value = false;
 
       // unregister portal
-      const index = portalList.indexOf(vm.proxy);
-      if (index > -1) {
-        portalList.splice(index, 1);
+      const index = portalProxyList.indexOf(vm.proxy);
+      if (index !== -1) {
+        portalProxyList.splice(index, 1);
       }
 
       if (portalEl !== null) {
@@ -4476,8 +4476,8 @@
 
     vue.onUnmounted(() => { hidePortal(true); });
 
-    // expose publicly needed stuff for portal utils
-    Object.assign(vm.proxy, { __qPortalInnerRef: innerRef });
+    // needed for portal vm detection
+    vm.proxy.__qPortalInnerRef = innerRef;
 
     return {
       showPortal,
@@ -4876,10 +4876,10 @@
 
     // check last portal vm if it's
     // a QDialog and not in seamless mode
-    let portalIndex = portalList.length - 1;
+    let portalIndex = portalProxyList.length - 1;
 
     while (portalIndex >= 0) {
-      const proxy = portalList[ portalIndex ].$;
+      const proxy = portalProxyList[ portalIndex ].$;
 
       if (proxy.type.name !== 'QDialog') {
         break
@@ -5694,7 +5694,10 @@
             round: false,
             ...attributes.value,
             onClick
-          }, () => hSlot(slots.label, []).concat(Arrow))
+          }, {
+            default: () => hSlot(slots.label, []).concat(Arrow),
+            loading: slots.loading
+          })
         }
 
         return vue.h(QBtnGroup, {
@@ -5716,7 +5719,10 @@
             iconRight: props.iconRight,
             round: false,
             onClick: onClickHide
-          }, slots.label),
+          }, {
+            default: slots.label,
+            loading: slots.loading
+          }),
 
           vue.h(QBtn, {
             class: 'q-btn-dropdown__arrow-container q-anchor--skip',
@@ -5941,8 +5947,8 @@
     },
 
     setup (props, { slots }) {
-      const vm = vue.getCurrentInstance();
-      const isDark = useDark(props, vm.proxy.$q);
+      const { proxy: { $q } } = vue.getCurrentInstance();
+      const isDark = useDark(props, $q);
 
       const classes = vue.computed(() =>
         'q-card'
@@ -6450,13 +6456,6 @@
     function nextPanel () { goToPanelByOffset(1); }
     function previousPanel () { goToPanelByOffset(-1); }
 
-    // expose public methods
-    Object.assign(proxy, {
-      next: nextPanel,
-      previous: previousPanel,
-      goTo: goToPanel
-    });
-
     function goToPanel (name) {
       emit('update:modelValue', name);
     }
@@ -6581,6 +6580,13 @@
       return panels
     }
 
+    // expose public methods
+    Object.assign(proxy, {
+      next: nextPanel,
+      previous: previousPanel,
+      goTo: goToPanel
+    });
+
     return {
       panelIndex,
       panelDirectives,
@@ -9066,7 +9072,11 @@
 
         const
           stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal;
+          offset = (
+            ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
+            * (state.isReversed.value === true ? -1 : 1)
+            * (props.vertical === true ? -1 : 1) * stepVal
+          );
 
         model.value = between(
           parseFloat((model.value + offset).toFixed(state.decimals.value)),
@@ -9154,17 +9164,14 @@
         }
       }
 
-      const vm = vue.getCurrentInstance();
-
-      // expose public methods
-      Object.assign(vm.proxy, { trigger });
+      const { proxy } = vue.getCurrentInstance();
 
       if (hasObserver === true) {
         let observer;
 
         vue.onMounted(() => {
           vue.nextTick(() => {
-            targetEl = vm.proxy.$el.parentNode;
+            targetEl = proxy.$el.parentNode;
 
             if (targetEl) {
               observer = new ResizeObserver(trigger);
@@ -9218,13 +9225,16 @@
 
         vue.onMounted(() => {
           vue.nextTick(() => {
-            targetEl = vm.proxy.$el;
+            targetEl = proxy.$el;
             targetEl && onObjLoad();
           });
         });
 
         vue.onBeforeUnmount(cleanup);
 
+        // expose public method
+        proxy.trigger = trigger;
+
         return () => {
           if (canRender.value === true) {
             return vue.h('object', {
@@ -11474,9 +11484,9 @@
     }
 
     return {
-      leap: leap,
-      gy: gy,
-      march: march
+      leap,
+      gy,
+      march
     }
   }
 
@@ -11521,9 +11531,9 @@
         jm = 1 + div(k, 31);
         jd = mod(k, 31) + 1;
         return {
-          jy: jy,
-          jm: jm,
-          jd: jd
+          jy,
+          jm,
+          jd
         }
       }
       else {
@@ -11540,9 +11550,9 @@
     jm = 7 + div(k, 30);
     jd = mod(k, 30) + 1;
     return {
-      jy: jy,
-      jm: jm,
-      jd: jd
+      jy,
+      jm,
+      jd
     }
   }
 
@@ -11586,9 +11596,9 @@
       gm = mod(div(i, 153), 12) + 1,
       gy = div(j, 1461) - 100100 + div(8 - gm, 6);
     return {
-      gy: gy,
-      gm: gm,
-      gd: gd
+      gy,
+      gm,
+      gd
     }
   }
 
@@ -13748,11 +13758,6 @@
         emit('update:modelValue', (props.multiple === true ? model : model[ 0 ]) || null, reason);
       }
 
-      // expose public methods
-      Object.assign(proxy, {
-        setToday, setView, offsetCalendar, setCalendarTo, setEditingRange
-      });
-
       function getHeader () {
         if (props.minimal === true) { return }
 
@@ -14110,6 +14115,11 @@
         }
       }
 
+      // expose public methods
+      Object.assign(proxy, {
+        setToday, setView, offsetCalendar, setCalendarTo, setEditingRange
+      });
+
       return () => {
         const content = [
           vue.h('div', {
@@ -17131,11 +17141,6 @@
         return contentRef.value
       }
 
-      // expose public methods
-      Object.assign(proxy, {
-        runCmd, refreshToolbar, focus, getContentEl
-      });
-
       vue.onMounted(() => {
         eVm.caret = proxy.caret = new Caret(contentRef.value, eVm);
         setContent(props.modelValue);
@@ -17148,6 +17153,11 @@
         document.removeEventListener('selectionchange', onSelectionchange);
       });
 
+      // expose public methods
+      Object.assign(proxy, {
+        runCmd, refreshToolbar, focus, getContentEl
+      });
+
       return () => {
         let toolbars;
 
@@ -18712,6 +18722,7 @@
       onDragover,
       processFiles,
       getDndNode,
+
       maxFilesNumber,
       maxTotalSizeNumber
     }
@@ -18781,6 +18792,12 @@
       proxy.$forceUpdate();
     }
 
+    const editable = vue.computed(() => props.disable !== true && props.readonly !== true);
+    const dnd = vue.ref(false);
+
+    const rootRef = vue.ref(null);
+    const inputRef = vue.ref(null);
+
     const state = {
       files: vue.ref([]),
       queuedFiles: vue.ref([]),
@@ -18793,22 +18810,6 @@
       }
     };
 
-    Object.assign(state, getPlugin({ props, slots, emit, helpers: state }));
-
-    const uploadSize = vue.ref(0);
-    const editable = vue.computed(() => props.disable !== true && props.readonly !== true);
-
-    if (state.isBusy === void 0) {
-      state.isBusy = vue.ref(false);
-    }
-
-    const dnd = vue.ref(false);
-
-    const rootRef = vue.ref(null);
-    const inputRef = vue.ref(null);
-
-    vue.provide(uploaderKey, renderInput);
-
     const {
       pickFiles,
       addFiles,
@@ -18820,6 +18821,21 @@
       maxTotalSizeNumber
     } = useFile({ editable, dnd, getFileInput, addFilesToQueue });
 
+    Object.assign(state, getPlugin({ props, slots, emit, helpers: state }));
+
+    if (state.isBusy === void 0) {
+      state.isBusy = vue.ref(false);
+    }
+
+    const uploadSize = vue.ref(0);
+    const uploadProgress = vue.computed(() => (
+      uploadSize.value === 0
+        ? 0
+        : state.uploadedSize.value / uploadSize.value
+    ));
+    const uploadProgressLabel = vue.computed(() => getProgressLabel(uploadProgress.value));
+    const uploadSizeLabel = vue.computed(() => humanStorageSize(uploadSize.value));
+
     const canAddFiles = vue.computed(() =>
       editable.value === true
       && state.isUploading.value !== true
@@ -18838,14 +18854,7 @@
       && state.queuedFiles.value.length > 0
     );
 
-    const uploadProgress = vue.computed(() => (
-      uploadSize.value === 0
-        ? 0
-        : state.uploadedSize.value / uploadSize.value
-    ));
-
-    const uploadProgressLabel = vue.computed(() => getProgressLabel(uploadProgress.value));
-    const uploadSizeLabel = vue.computed(() => humanStorageSize(uploadSize.value));
+    vue.provide(uploaderKey, renderInput);
 
     const classes = vue.computed(() =>
       'q-uploader column no-wrap'
@@ -19040,7 +19049,7 @@
 
     function getHeader () {
       if (slots.header !== void 0) {
-        return slots.header(slotScope.value)
+        return slots.header(publicApi)
       }
 
       return [
@@ -19077,7 +19086,7 @@
 
     function getList () {
       if (slots.list !== void 0) {
-        return slots.list(slotScope.value)
+        return slots.list(publicApi)
       }
 
       return state.files.value.map(file => vue.h('div', {
@@ -19136,41 +19145,37 @@
       state.files.value.length > 0 && revokeImgURLs();
     });
 
-    const publicMethods = {
-      pickFiles,
-      addFiles,
+    const publicApi = {};
+
+    for (const key in state) {
+      if (vue.isRef(state[ key ]) === true) {
+        injectProp(publicApi, key, () => state[ key ].value);
+      }
+      else { // method or non-computed prop
+        publicApi[ key ] = state[ key ];
+      }
+    }
+
+    Object.assign(publicApi, {
+      upload,
       reset,
       removeUploadedFiles,
       removeQueuedFiles,
       removeFile,
-      upload,
-      abort: state.abort
-    };
 
-    // TODO: the result of this computed, especially the dynamic part, isn't currently typed
-    // This result in an error with Volar when accessing the state (eg. files array)
-    const slotScope = vue.computed(() => {
-      const acc = {
-        canAddFiles: canAddFiles.value,
-        canUpload: canUpload.value,
-        uploadSizeLabel: uploadSizeLabel.value,
-        uploadProgressLabel: uploadProgressLabel.value
-      };
-
-      for (const key in state) {
-        acc[ key ] = vue.isRef(state[ key ]) === true
-          ? state[ key ].value
-          : state[ key ];
-      }
+      pickFiles,
+      addFiles
+    });
 
-      // TODO: (Qv3) Put the QUploader instance under `ref`
-      // property for consistency and flexibility
-      // return { ref: { ...acc, ...publicMethods } }
-      return { ...acc, ...publicMethods }
+    injectMultipleProps(publicApi, {
+      canAddFiles: () => canAddFiles.value,
+      canUpload: () => canUpload.value,
+      uploadSizeLabel: () => uploadSizeLabel.value,
+      uploadProgressLabel: () => uploadProgressLabel.value
     });
 
-    // expose public methods
-    Object.assign(proxy, publicMethods);
+    // expose public api (methods & computed props)
+    Object.assign(proxy, publicApi);
 
     return () => {
       const children = [
@@ -20318,9 +20323,13 @@
     const cfg = Object.assign({ noopener: true }, winFeatures);
     const feat = [];
     for (const key in cfg) {
-      if (cfg[ key ] === true) {
+      const value = cfg[ key ];
+      if (value === true) {
         feat.push(key);
       }
+      else if (isNumber(value) || (typeof value === 'string' && value !== '')) {
+        feat.push(key + '=' + value);
+      }
     }
     return feat.join(',')
   }
@@ -20390,6 +20399,7 @@
     frameDebounce: frameDebounce,
     getCssVar: getCssVar,
     noop: noop,
+    is: is,
     morph: morph,
     openURL: openUrl,
     patterns: patterns,
@@ -21104,7 +21114,8 @@
 
       return vue.h('div', {
         class: 'q-field__bottom row items-start q-field__bottom--'
-          + (props.hideBottomSpace !== true ? 'animated' : 'stale')
+          + (props.hideBottomSpace !== true ? 'animated' : 'stale'),
+        onClick: prevent
       }, [
         props.hideBottomSpace === true
           ? main
@@ -21127,9 +21138,6 @@
         }, content)
     }
 
-    // expose public methods
-    Object.assign(proxy, { focus, blur });
-
     let shouldActivate = false;
 
     vue.onDeactivated(() => {
@@ -21152,6 +21160,9 @@
       clearTimeout(focusoutTimer);
     });
 
+    // expose public methods
+    Object.assign(proxy, { focus, blur });
+
     return function renderField () {
       const labelAttrs = state.getControl === void 0 && slots.control === void 0
         ? {
@@ -22570,13 +22581,6 @@
         index = newIndex;
       }
 
-      // expose public methods
-      const vm = vue.getCurrentInstance();
-      Object.assign(vm.proxy, {
-        poll: () => { poll !== void 0 && poll(); },
-        trigger, stop, reset, resume, setIndex
-      });
-
       function setDebounce (val) {
         val = parseInt(val, 10);
 
@@ -22635,6 +22639,13 @@
         updateScrollTarget();
       });
 
+      // expose public methods
+      const vm = vue.getCurrentInstance();
+      Object.assign(vm.proxy, {
+        poll: () => { poll !== void 0 && poll(); },
+        trigger, stop, reset, resume, setIndex
+      });
+
       return () => {
         const child = hUniqueSlot(slots.default, []);
 
@@ -24305,10 +24316,10 @@
         }
       }
 
-      const vm = vue.getCurrentInstance();
+      const { proxy } = vue.getCurrentInstance();
 
       vue.onMounted(() => {
-        parentEl = vm.proxy.$el.parentNode;
+        parentEl = proxy.$el.parentNode;
         configureScrollTarget();
       });
 
@@ -24318,7 +24329,7 @@
       });
 
       // expose public methods
-      Object.assign(vm.proxy, {
+      Object.assign(proxy, {
         trigger,
         getPosition: () => scroll
       });
@@ -25114,8 +25125,7 @@
   };
 
   function usePageSticky () {
-    const { props, proxy } = vue.getCurrentInstance();
-    const { $q } = proxy;
+    const { props, proxy: { $q } } = vue.getCurrentInstance();
 
     const $layout = vue.inject(layoutKey, () => {
       console.error('QPageSticky needs to be child of QLayout');
@@ -25985,15 +25995,6 @@
         emit('hide');
       }
 
-      // expose public methods
-      Object.assign(proxy, {
-        set,
-        cancel,
-        show (e) { menuRef.value !== null && menuRef.value.show(e); },
-        hide (e) { menuRef.value !== null && menuRef.value.hide(e); },
-        updatePosition
-      });
-
       function getContent () {
         const child = slots.default !== void 0
           ? [].concat(slots.default(scope.value))
@@ -26023,6 +26024,15 @@
         return child
       }
 
+      // expose public methods
+      Object.assign(proxy, {
+        set,
+        cancel,
+        show (e) { menuRef.value !== null && menuRef.value.show(e); },
+        hide (e) { menuRef.value !== null && menuRef.value.hide(e); },
+        updatePosition
+      });
+
       return () => {
         if (props.disable === true) { return }
 
@@ -26082,13 +26092,6 @@
         }
       });
 
-      // expose public methods
-      Object.assign(proxy, {
-        show (evt) { canShow(evt) === true && popupRef.value.show(evt); },
-        hide (evt) { popupRef.value.hide(evt); },
-        toggle (evt) { popupRef.value.toggle(evt); }
-      });
-
       function onShow (evt) {
         showing.value = true;
         emit('show', evt);
@@ -26100,6 +26103,13 @@
         emit('hide', evt);
       }
 
+      // expose public methods
+      Object.assign(proxy, {
+        show (evt) { canShow(evt) === true && popupRef.value.show(evt); },
+        hide (evt) { popupRef.value.hide(evt); },
+        toggle (evt) { popupRef.value.toggle(evt); }
+      });
+
       return () => {
         const data = {
           ref: popupRef,
@@ -26393,9 +26403,6 @@
         }, 300);
       }
 
-      // expose public methods
-      Object.assign(proxy, { trigger, updateScrollTarget });
-
       let $el, localScrollTarget, timer;
 
       function updateScrollTarget () {
@@ -26413,6 +26420,9 @@
         clearTimeout(timer);
       });
 
+      // expose public methods
+      Object.assign(proxy, { trigger, updateScrollTarget });
+
       return () => {
         const child = [
           vue.h('div', { class: contentClass.value }, hSlot(slots.default)),
@@ -26768,7 +26778,11 @@
 
         const
           stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal;
+          offset = (
+            ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1)
+            * (state.isReversed.value === true ? -1 : 1)
+            * (props.vertical === true ? -1 : 1) * stepVal
+          );
 
         if (state.focus.value === 'both') {
           const interval = model.value.max - model.value.min;
@@ -27150,9 +27164,9 @@
         }
       };
 
-      const vm = vue.getCurrentInstance();
+      const { proxy } = vue.getCurrentInstance();
 
-      const isDark = useDark(props, vm.proxy.$q);
+      const isDark = useDark(props, proxy.$q);
 
       let timer, panRefPos;
 
@@ -27287,7 +27301,7 @@
       // multiple times
       const emitScroll = debounce(() => {
         const info = getScroll();
-        info.ref = vm.proxy;
+        info.ref = proxy;
         emit('scroll', info);
       }, 0);
 
@@ -27426,28 +27440,6 @@
         hover.value = false;
       }
 
-      // expose public methods
-      Object.assign(vm.proxy, {
-        getScrollTarget: () => targetRef.value,
-        getScroll,
-        getScrollPosition: () => ({
-          top: scroll.vertical.position.value,
-          left: scroll.horizontal.position.value
-        }),
-        getScrollPercentage: () => ({
-          top: scroll.vertical.percentage.value,
-          left: scroll.horizontal.percentage.value
-        }),
-        setScrollPosition: localSetScrollPosition,
-        setScrollPercentage (axis, percentage, duration) {
-          localSetScrollPosition(
-            axis,
-            percentage * (scroll[ axis ].size.value - container[ axis ].value),
-            duration
-          );
-        }
-      });
-
       let scrollPosition = null;
 
       vue.onDeactivated(() => {
@@ -27470,6 +27462,28 @@
 
       vue.onBeforeUnmount(emitScroll.cancel);
 
+      // expose public methods
+      Object.assign(proxy, {
+        getScrollTarget: () => targetRef.value,
+        getScroll,
+        getScrollPosition: () => ({
+          top: scroll.vertical.position.value,
+          left: scroll.horizontal.position.value
+        }),
+        getScrollPercentage: () => ({
+          top: scroll.vertical.percentage.value,
+          left: scroll.horizontal.percentage.value
+        }),
+        setScrollPosition: localSetScrollPosition,
+        setScrollPercentage (axis, percentage, duration) {
+          localSetScrollPosition(
+            axis,
+            percentage * (scroll[ axis ].size.value - container[ axis ].value),
+            duration
+          );
+        }
+      });
+
       return () => {
         return vue.h('div', {
           class: classes.value,
@@ -29771,6 +29785,7 @@
                 vue.h('input', {
                   class: 'q-select__autocomplete-input',
                   autocomplete: props.autocomplete,
+                  tabindex: -1,
                   onKeyup: onTargetAutocomplete
                 })
               );
@@ -33158,10 +33173,6 @@
       vue.nextTick(() => {
         emit('request', {
           pagination: prop.pagination || computedPagination.value,
-          // FIXME: 'props.filter' is string/object, but 'prop.filter' can be controlled by the user, and the docs are suggesting 'prop.filter' is a function
-          // So, value of 'filter' becomes function/string/object, which makes a lot of things unpredictable and can break things
-          // Either update the docs to say 'prop.filter' should be a string/object, or use 'prop.filter || props.filterMethod' or maybe get 'computedFilterFunction' here and use that instead of 'props.filterMethod'
-          // The examples on our docs are using 'filter' as a string in onRequest handler, but the JSON API is saying 'filter' is a function
           filter: prop.filter || props.filter,
           getCellValue
         });
@@ -34710,7 +34721,8 @@
     emits: useDatetimeEmits,
 
     setup (props, { slots, emit }) {
-      const { proxy: { $q } } = vue.getCurrentInstance();
+      const vm = vue.getCurrentInstance();
+      const { $q } = vm.proxy;
 
       const isDark = useDark(props, $q);
       const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q);
@@ -35398,10 +35410,6 @@
         emit('update:modelValue', val, date);
       }
 
-      // expose public methods
-      const vm = vue.getCurrentInstance();
-      Object.assign(vm.proxy, { setNow });
-
       function getHeader () {
         const label = [
           vue.h('div', {
@@ -35539,6 +35547,9 @@
         ])
       }
 
+      // expose public method
+      vm.proxy.setNow = setNow;
+
       return () => {
         const child = [ getClock() ];
 
@@ -36393,6 +36404,8 @@
         }
       }
 
+      props.defaultExpandAll === true && expandAll();
+
       // expose public methods
       Object.assign(proxy, {
         getNodeByKey,
@@ -36406,8 +36419,6 @@
         setTicked
       });
 
-      props.defaultExpandAll === true && expandAll();
-
       return () => {
         const children = getChildren(props.nodes);
 
@@ -36904,9 +36915,9 @@
             handler (evt) {
               // allow @click to be emitted
               ctx.depth !== 0 && setTimeout(() => {
-                const vm = getPortalVm(el);
-                if (vm !== void 0) {
-                  closePortals(vm, evt, ctx.depth);
+                const proxy = getPortalProxy(el);
+                if (proxy !== void 0) {
+                  closePortals(proxy, evt, ctx.depth);
                 }
               });
             },
@@ -38838,9 +38849,11 @@
     vm,
     uid$1 = 0,
     timeout,
-    props = {};
+    props = {},
+    activeGroups = {};
 
   const originalDefaults = {
+    group: '__default_quasar_group__',
     delay: 0,
     message: false,
     html: false,
@@ -38855,101 +38868,148 @@
 
   const defaults$1 = { ...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$1, ...opts };
+
+    activeGroups[ newProps.group ] = newProps;
+    return newProps
+  }
+
   const Plugin$2 = defineReactivePlugin({
     isActive: false
   }, {
     show (opts) {
 
-      props = isObject(opts) === true && opts.ignoreDefaults === true
-        ? { ...originalDefaults, ...opts }
-        : { ...defaults$1, ...opts };
+      props = registerProps(opts);
+      const { group } = props;
 
       Plugin$2.isActive = true;
 
       if (app !== void 0) {
         props.uid = uid$1;
         vm.$forceUpdate();
-        return
       }
+      else {
+        props.uid = ++uid$1;
+        clearTimeout(timeout);
 
-      props.uid = ++uid$1;
-      clearTimeout(timeout);
-
-      timeout = setTimeout(() => {
-        timeout = void 0;
+        timeout = setTimeout(() => {
+          timeout = void 0;
 
-        const el = createGlobalNode('q-loading');
+          const el = createGlobalNode('q-loading');
 
-        app = vue.createApp({
-          name: 'QLoading',
+          app = vue.createApp({
+            name: 'QLoading',
 
-          setup () {
-            vue.onMounted(() => {
-              preventScroll(true);
-            });
+            setup () {
+              vue.onMounted(() => {
+                preventScroll(true);
+              });
 
-            function onAfterLeave () {
-              // might be called to finalize
-              // previous leave, even if it was cancelled
-              if (Plugin$2.isActive !== true && app !== void 0) {
-                preventScroll(false);
-                app.unmount(el);
-                removeGlobalNode(el);
-                app = void 0;
-                vm = void 0;
+              function onAfterLeave () {
+                // might be called to finalize
+                // previous leave, even if it was cancelled
+                if (Plugin$2.isActive !== true && app !== void 0) {
+                  preventScroll(false);
+                  app.unmount(el);
+                  removeGlobalNode(el);
+                  app = void 0;
+                  vm = void 0;
+                }
               }
-            }
 
-            function getContent () {
-              if (Plugin$2.isActive !== true) {
-                return null
-              }
+              function getContent () {
+                if (Plugin$2.isActive !== true) {
+                  return null
+                }
 
-              const content = [
-                vue.h(props.spinner, {
-                  class: 'q-loading__spinner',
-                  color: props.spinnerColor,
-                  size: props.spinnerSize
-                })
-              ];
+                const content = [
+                  vue.h(props.spinner, {
+                    class: 'q-loading__spinner',
+                    color: props.spinnerColor,
+                    size: props.spinnerSize
+                  })
+                ];
 
-              props.message && content.push(
-                vue.h('div', {
-                  class: 'q-loading__message'
-                    + (props.messageColor ? ` text-${ props.messageColor }` : ''),
-                  [ props.html === true ? 'innerHTML' : 'textContent' ]: props.message
-                })
-              );
+                props.message && content.push(
+                  vue.h('div', {
+                    class: 'q-loading__message'
+                      + (props.messageColor ? ` text-${ props.messageColor }` : ''),
+                    [ props.html === true ? 'innerHTML' : 'textContent' ]: props.message
+                  })
+                );
 
-              return vue.h('div', {
-                class: 'q-loading fullscreen flex flex-center z-max ' + props.customClass.trim(),
-                key: props.uid
-              }, [
-                vue.h('div', {
-                  class: 'q-loading__backdrop'
-                    + (props.backgroundColor ? ` bg-${ props.backgroundColor }` : '')
-                }),
+                return vue.h('div', {
+                  class: 'q-loading fullscreen flex flex-center z-max ' + props.customClass.trim(),
+                  key: props.uid
+                }, [
+                  vue.h('div', {
+                    class: 'q-loading__backdrop'
+                      + (props.backgroundColor ? ` bg-${ props.backgroundColor }` : '')
+                  }),
+
+                  vue.h('div', {
+                    class: 'q-loading__box column items-center ' + props.boxClass
+                  }, content)
+                ])
+              }
 
-                vue.h('div', {
-                  class: 'q-loading__box column items-center ' + props.boxClass
-                }, content)
-              ])
+              return () => vue.h(vue.Transition, {
+                name: 'q-transition--fade',
+                appear: true,
+                onAfterLeave
+              }, getContent)
             }
+          });
 
-            return () => vue.h(vue.Transition, {
-              name: 'q-transition--fade',
-              appear: true,
-              onAfterLeave
-            }, getContent)
-          }
-        });
+          vm = app.mount(el);
+        }, props.delay);
+      }
 
-        vm = app.mount(el);
-      }, props.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) {
+          Plugin$2.hide(group);
+          return
+        }
+
+        // else we have params so we need to update this group
+        Plugin$2.show({ ...paramProps, group });
+      }
     },
 
-    hide () {
+    hide (group) {
       if (Plugin$2.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 ];
+            Plugin$2.show({ group: lastGroup });
+            return
+          }
+        }
+
         if (timeout !== void 0) {
           clearTimeout(timeout);
           timeout = void 0;
@@ -39763,7 +39823,7 @@
   });
 
   var index_umd = {
-    version: '2.7.7',
+    version: '2.8.1',
     install (app, opts) {
       installQuasar(app, {
         components,