quasar 2.6.5 → 2.7.1

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.6.5
+ * Quasar Framework v2.7.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -837,9 +837,9 @@
   }
 
   function normalizeExitPath (path) {
-    path.startsWith('#') === true && (path = path.substr(1));
+    path.startsWith('#') === true && (path = path.substring(1));
     path.startsWith('/') === false && (path = '/' + path);
-    path.endsWith('/') === true && (path = path.substr(0, path.length - 1));
+    path.endsWith('/') === true && (path = path.substring(0, path.length - 1));
     return '#' + path
   }
 
@@ -1603,7 +1603,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.6.5' };
+      const $q = { version: '2.7.1' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2059,8 +2059,15 @@
     s_: '-sharp'
   };
 
+  const symMap = {
+    sym_o_: '-outlined',
+    sym_r_: '-rounded',
+    sym_s_: '-sharp'
+  };
+
   const libRE = new RegExp('^(' + Object.keys(libMap).join('|') + ')');
   const matRE = new RegExp('^(' + Object.keys(matMap).join('|') + ')');
+  const symRE = new RegExp('^(' + Object.keys(symMap).join('|') + ')');
   const mRE = /^[Mm]\s?[-+]?\.?\d/;
   const imgRE = /^img:/;
   const svgUseRE = /^svguse:/;
@@ -2163,7 +2170,23 @@
           cls = icon;
         }
         else if (ionRE.test(icon) === true) {
-          cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substr(3) }`;
+          cls = `ionicons ion-${ $q.platform.is.ios === true ? 'ios' : 'md' }${ icon.substring(3) }`;
+        }
+        else if (symRE.test(icon) === true) {
+          // "notranslate" class is for Google Translate
+          // to avoid tampering with Material Symbols ligature font
+          //
+          // Caution: To be able to add suffix to the class name,
+          // keep the 'material-symbols' at the end of the string.
+          cls = 'notranslate material-symbols';
+
+          const matches = icon.match(symRE);
+          if (matches !== null) {
+            icon = icon.substring(6);
+            cls += symMap[ matches[ 1 ] ];
+          }
+
+          content = icon;
         }
         else {
           // "notranslate" class is for Google Translate
@@ -2209,7 +2232,7 @@
         if (type.value.svg === true) {
           return vue.h('span', data, hMergeSlot(slots.default, [
             vue.h('svg', {
-              viewBox: type.value.viewBox
+              viewBox: type.value.viewBox || '0 0 24 24'
             }, type.value.nodes)
           ]))
         }
@@ -2341,7 +2364,7 @@
         style: style.value,
         role: 'alert',
         'aria-label': props.label
-      }, props.label !== void 0 ? props.label : hSlot(slots.default))
+      }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
     }
   });
 
@@ -3740,10 +3763,10 @@
         if (props.loading === true && props.percentage !== void 0) {
           child.push(
             vue.h('span', {
-              class: 'q-btn__progress absolute-full overflow-hidden'
+              class: 'q-btn__progress absolute-full overflow-hidden' + (props.darkPercentage === true ? ' q-btn__progress--dark' : '')
             }, [
               vue.h('span', {
-                class: 'q-btn__progress-indicator fit block' + (props.darkPercentage === true ? ' q-btn__progress--dark' : ''),
+                class: 'q-btn__progress-indicator fit block',
                 style: percentageStyle.value
               })
             ])
@@ -4386,8 +4409,12 @@
   // You MUST specify "inheritAttrs: false" in your component
 
   function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
+    // showing, including while in show/hide transition
     const portalIsActive = vue.ref(false);
 
+    // showing & not in any show/hide transition
+    const portalIsAccessible = vue.ref(false);
+
     let portalEl = null;
     const focusObj = {};
     const onGlobalDialog = checkGlobalDialog === true && isOnGlobalDialog(vm);
@@ -4395,9 +4422,12 @@
     function showPortal (isReady) {
       if (isReady === true) {
         removeFocusWaitFlag(focusObj);
+        portalIsAccessible.value = true;
         return
       }
 
+      portalIsAccessible.value = false;
+
       if (portalIsActive.value === false) {
         if (onGlobalDialog === false && portalEl === null) {
           portalEl = createGlobalNode();
@@ -4412,7 +4442,11 @@
       }
     }
 
-    function hidePortal () {
+    function hidePortal (isReady) {
+      portalIsAccessible.value = false;
+
+      if (isReady !== true) { return }
+
       removeFocusWaitFlag(focusObj);
       portalIsActive.value = false;
 
@@ -4428,7 +4462,7 @@
       }
     }
 
-    vue.onUnmounted(hidePortal);
+    vue.onUnmounted(() => { hidePortal(true); });
 
     // expose publicly needed stuff for portal utils
     Object.assign(vm.proxy, { __qPortalInnerRef: innerRef });
@@ -4438,6 +4472,7 @@
       hidePortal,
 
       portalIsActive,
+      portalIsAccessible,
 
       renderPortal: () => (
         onGlobalDialog === true
@@ -5352,6 +5387,7 @@
       function handleHide (evt) {
         removeTick();
         removeTimeout();
+        hidePortal();
 
         anchorCleanup(true);
 
@@ -5369,7 +5405,7 @@
         }
 
         registerTimeout(() => {
-          hidePortal();
+          hidePortal(true); // done hiding, now destroy
           emit('hide', evt);
         }, props.transitionDuration);
       }
@@ -7236,22 +7272,23 @@
       props.val !== void 0 && Array.isArray(props.modelValue)
     );
 
-    const index = vue.computed(() => (
-      modelIsArray.value === true
-        ? props.modelValue.indexOf(props.val)
+    const index = vue.computed(() => {
+      const val = vue.toRaw(props.val);
+      return modelIsArray.value === true
+        ? props.modelValue.findIndex(opt => vue.toRaw(opt) === val)
         : -1
-    ));
+    });
 
     const isTrue = vue.computed(() => (
       modelIsArray.value === true
         ? index.value > -1
-        : props.modelValue === props.trueValue
+        : vue.toRaw(props.modelValue) === vue.toRaw(props.trueValue)
     ));
 
     const isFalse = vue.computed(() => (
       modelIsArray.value === true
         ? index.value === -1
-        : props.modelValue === props.falseValue
+        : vue.toRaw(props.modelValue) === vue.toRaw(props.falseValue)
     ));
 
     const isIndeterminate = vue.computed(() =>
@@ -8368,7 +8405,7 @@
       && innerMin.value < innerMax.value
     ));
 
-    const decimals = vue.computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length);
+    const decimals = vue.computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
     const step = vue.computed(() => (props.step === 0 ? 1 : props.step));
     const tabindex = vue.computed(() => (editable.value === true ? props.tabindex || 0 : -1));
 
@@ -10126,6 +10163,14 @@
     fulltime: v => /^([0-1]?\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(v),
     timeOrFulltime: v => /^([0-1]?\d|2[0-3]):[0-5]\d(:[0-5]\d)?$/.test(v),
 
+    // -- RFC 5322 --
+    // -- Added in v2.6.6 --
+    // 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.
+    // eslint-disable-next-line
+    email: v => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v),
+
     hexColor: v => hex.test(v),
     hexaColor: v => hexa.test(v),
     hexOrHexaColor: v => hexOrHexa.test(v),
@@ -14398,7 +14443,7 @@
       const { registerTimeout, removeTimeout } = useTimeout();
       const { registerTick, removeTick } = useTick();
 
-      const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
+      const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
         vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
       );
 
@@ -14537,6 +14582,7 @@
         removeFromHistory();
         cleanup(true);
         animating.value = true;
+        hidePortal();
 
         if (refocusTarget !== null) {
           refocusTarget.focus();
@@ -14544,7 +14590,7 @@
         }
 
         registerTimeout(() => {
-          hidePortal();
+          hidePortal(true); // done hiding, now destroy
           animating.value = false;
           emit('hide', evt);
         }, props.transitionDuration);
@@ -14652,8 +14698,7 @@
       function onFocusChange (evt) {
         // the focus is not in a vue child component
         if (
-          showing.value === true
-          && portalIsActive.value === true
+          portalIsAccessible.value === true
           && childHasFocus(innerRef.value, evt.target) !== true
         ) {
           focus('[tabindex]:not([tabindex="-1"])');
@@ -15918,11 +15963,12 @@
       function handleHide (evt) {
         removeTick();
         removeTimeout();
+        hidePortal();
 
         anchorCleanup();
 
         registerTimeout(() => {
-          hidePortal();
+          hidePortal(true); // done hiding, now destroy
           emit('hide', evt);
         }, props.transitionDuration);
       }
@@ -16066,7 +16112,10 @@
         default: 'div'
       },
 
-      active: Boolean,
+      active: {
+        type: Boolean,
+        default: null
+      },
 
       clickable: Boolean,
       dense: Boolean,
@@ -16104,7 +16153,7 @@
         + (props.dense === true ? ' q-item--dense' : '')
         + (isDark.value === true ? ' q-item--dark' : '')
         + (
-          hasLink.value === true
+          hasLink.value === true && props.active === null
             ? linkClass.value
             : (
                 props.active === true
@@ -16975,11 +17024,14 @@
       }
 
       function onFocusin (e) {
+        const root = rootRef.value;
+
         if (
-          rootRef.value.contains(e.target) === true
+          root !== null
+          && root.contains(e.target) === true
           && (
             e.relatedTarget === null
-            || rootRef.value.contains(e.relatedTarget) !== true
+            || root.contains(e.relatedTarget) !== true
           )
         ) {
           const prop = `inner${ isViewingSource.value === true ? 'Text' : 'HTML' }`;
@@ -16989,11 +17041,14 @@
       }
 
       function onFocusout (e) {
+        const root = rootRef.value;
+
         if (
-          rootRef.value.contains(e.target) === true
+          root !== null
+          && root.contains(e.target) === true
           && (
             e.relatedTarget === null
-            || rootRef.value.contains(e.relatedTarget) !== true
+            || root.contains(e.relatedTarget) !== true
           )
         ) {
           eVm.caret.savePosition();
@@ -17001,27 +17056,12 @@
         }
       }
 
-      function onMousedown () {
-        offsetBottom = void 0;
-      }
-
-      function onMouseup (e) {
-        eVm.caret.save();
-        emit('mouseup', e);
-      }
-
-      function onTouchstartPassive () {
+      function onPointerStart () {
         offsetBottom = void 0;
       }
 
-      function onKeyup (e) {
-        eVm.caret.save();
-        emit('keyup', e);
-      }
-
-      function onTouchend (e) {
+      function onSelectionchange (e) {
         eVm.caret.save();
-        emit('touchend', e);
       }
 
       function setContent (v, restorePosition) {
@@ -17078,6 +17118,12 @@
         eVm.caret = proxy.caret = new Caret(contentRef.value, eVm);
         setContent(props.modelValue);
         refreshToolbar();
+
+        document.addEventListener('selectionchange', onSelectionchange);
+      });
+
+      vue.onBeforeUnmount(() => {
+        document.removeEventListener('selectionchange', onSelectionchange);
       });
 
       return () => {
@@ -17131,13 +17177,8 @@
             onFocus,
 
             // clean saved scroll position
-            onMousedown,
-            onTouchstartPassive,
-
-            // save caret
-            onMouseup,
-            onKeyup,
-            onTouchend
+            onMousedown: onPointerStart,
+            onTouchstartPassive: onPointerStart
           })
         ])
       }
@@ -17387,7 +17428,7 @@
 
   // Pre-calculate toString(16) for speed
   for (let i = 0; i < 256; i++) {
-    hexBytes[ i ] = (i + 0x100).toString(16).substr(1);
+    hexBytes[ i ] = (i + 0x100).toString(16).substring(1);
   }
 
   // Use best available PRNG
@@ -18178,7 +18219,7 @@
   function fallback (text) {
     const area = document.createElement('textarea');
     area.value = text;
-    area.contentEditable = true;
+    area.contentEditable = 'true';
     area.style.position = 'fixed'; // avoid scrolling to bottom
 
     document.body.appendChild(area);
@@ -18981,28 +19022,32 @@
 
       return [
         vue.h('div', {
-          class: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+          class: 'q-uploader__header-content column'
         }, [
-          getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
-          getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
-
-          state.isUploading.value === true
-            ? vue.h(QSpinner, { class: 'q-uploader__spinner' })
-            : null,
+          vue.h('div', {
+            class: 'flex flex-center no-wrap q-gutter-xs'
+          }, [
+            getBtn(state.queuedFiles.value.length > 0, 'removeQueue', removeQueuedFiles),
+            getBtn(state.uploadedFiles.value.length > 0, 'removeUploaded', removeUploadedFiles),
 
-          vue.h('div', { class: 'col column justify-center' }, [
-            props.label !== void 0
-              ? vue.h('div', { class: 'q-uploader__title' }, [ props.label ])
+            state.isUploading.value === true
+              ? vue.h(QSpinner, { class: 'q-uploader__spinner' })
               : null,
 
-            vue.h('div', { class: 'q-uploader__subtitle' }, [
-              uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
-            ])
-          ]),
+            vue.h('div', { class: 'col column justify-center' }, [
+              props.label !== void 0
+                ? vue.h('div', { class: 'q-uploader__title' }, [ props.label ])
+                : null,
+
+              vue.h('div', { class: 'q-uploader__subtitle' }, [
+                uploadSizeLabel.value + ' / ' + uploadProgressLabel.value
+              ])
+            ]),
 
-          getBtn(canAddFiles.value, 'add'),
-          getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
-          getBtn(state.isUploading.value, 'clear', state.abort)
+            getBtn(canAddFiles.value, 'add'),
+            getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
+            getBtn(state.isUploading.value, 'clear', state.abort)
+          ])
         ])
       ]
     }
@@ -19258,7 +19303,7 @@
     return getComputedStyle(element).getPropertyValue(`--q-${ propName }`).trim() || null
   }
 
-  let id$1 = 0;
+  let id = 0;
   let offsetBase = void 0;
 
   function getAbsolutePosition (el, resize) {
@@ -19986,7 +20031,7 @@
           };
         }
         else {
-          const qAnimId = `q-morph-anim-${ ++id$1 }`;
+          const qAnimId = `q-morph-anim-${ ++id }`;
           const style = document.createElement('style');
           const resizeFrom = options.resize === true
             ? `
@@ -20977,6 +21022,7 @@
           vue.h('div', {
             ref: state.targetRef,
             class: 'q-field__native row',
+            tabindex: -1,
             ...state.splitAttrs.attributes.value,
             'data-autofocus': props.autofocus === true || void 0
           }, slots.control(controlSlotScope.value))
@@ -22092,6 +22138,10 @@
         type: String,
         default: 'lazy'
       },
+      fetchpriority: {
+        type: String,
+        default: 'auto'
+      },
       width: String,
       height: String,
       initialRatio: {
@@ -22254,6 +22304,7 @@
           height: props.height,
           width: props.width,
           loading: props.loading,
+          fetchpriority: props.fetchpriority,
           'aria-hidden': 'true',
           draggable: props.draggable,
           ...img
@@ -22469,6 +22520,16 @@
 
         if (isWorking.value === true) {
           localScrollTarget.addEventListener('scroll', poll, passive$3);
+
+          if (props.reverse === true) {
+            const
+              scrollHeight = getScrollHeight(localScrollTarget),
+              containerHeight = height(localScrollTarget);
+
+            setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight);
+          }
+
+          immediatePoll();
         }
       }
 
@@ -22539,16 +22600,6 @@
         setDebounce(props.debounce);
 
         updateScrollTarget();
-
-        if (props.reverse === true) {
-          const
-            scrollHeight = getScrollHeight(localScrollTarget),
-            containerHeight = height(localScrollTarget);
-
-          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight);
-        }
-
-        immediatePoll();
       });
 
       return () => {
@@ -23186,26 +23237,31 @@
   const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/;
   const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u;
   const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/;
+  const isPlainText = /[a-z0-9_ -]$/i;
 
   function useKeyComposition (onInput) {
     return function onComposition (e) {
       if (e.type === 'compositionend' || e.type === 'change') {
-        if (e.target.composing !== true) { return }
-        e.target.composing = false;
+        if (e.target.qComposing !== true) { return }
+        e.target.qComposing = false;
         onInput(e);
       }
       else if (e.type === 'compositionupdate') {
         if (
-          typeof e.data === 'string'
-          && isJapanese.test(e.data) === false
-          && isChinese.test(e.data) === false
-          && isKorean.test(e.data) === false
+          e.target.qComposing !== true
+          && typeof e.data === 'string'
         ) {
-          e.target.composing = false;
+          const isComposing = client.is.firefox === true
+            ? isPlainText.test(e.data) === false
+            : isJapanese.test(e.data) === true && isChinese.test(e.data) === true && isKorean.test(e.data) === true;
+
+          if (isComposing === true) {
+            e.target.qComposing = true;
+          }
         }
       }
       else {
-        e.target.composing = true;
+        e.target.qComposing = true;
       }
     }
   }
@@ -23408,7 +23464,7 @@
       }
 
       function onInput (e) {
-        if (!e || !e.target || e.target.composing === true) {
+        if (!e || !e.target || e.target.qComposing === true) {
           return
         }
 
@@ -23453,6 +23509,8 @@
           }
 
           if (props.modelValue !== val && emitCachedValue !== val) {
+            emitCachedValue = val;
+
             stopWatcher === true && (stopValueWatcher = true);
             emit('update:modelValue', val);
 
@@ -23484,13 +23542,16 @@
         const inp = inputRef.value;
         if (inp !== null) {
           const parentStyle = inp.parentNode.style;
+          const { overflow } = inp.style;
 
           // reset height of textarea to a small size to detect the real height
           // but keep the total control size the same
           parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px';
           inp.style.height = '1px';
+          inp.style.overflow = 'hidden';
 
           inp.style.height = inp.scrollHeight + 'px';
+          inp.style.overflow = overflow;
           parentStyle.marginBottom = '';
         }
       }
@@ -24452,7 +24513,8 @@
         const layout = vue.h('div', {
           class: classes.value,
           style: style.value,
-          ref: props.container === true ? void 0 : rootRef
+          ref: props.container === true ? void 0 : rootRef,
+          tabindex: -1
         }, content);
 
         if (props.container === true) {
@@ -24615,7 +24677,7 @@
       const rootRef = vue.ref(null);
       const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef);
 
-      const isTrue = vue.computed(() => props.modelValue === props.val);
+      const isTrue = vue.computed(() => vue.toRaw(props.modelValue) === vue.toRaw(props.val));
 
       const classes = vue.computed(() =>
         'q-radio cursor-pointer no-outline row inline no-wrap items-center'
@@ -27452,27 +27514,30 @@
     'end-force'
   ];
 
-  let id = 1;
   const filterProto = Array.prototype.filter;
 
   const setOverflowAnchor = window.getComputedStyle(document.body).overflowAnchor === void 0
     ? noop
-    : function (id, index) {
-      const ssId = id + '_ss';
+    : function (contentEl, index) {
+      requestAnimationFrame(() => {
+        if (contentEl === null) {
+          return
+        }
 
-      let styleSheet = document.getElementById(ssId);
+        const children = contentEl.children || [];
 
-      if (styleSheet === null) {
-        styleSheet = document.createElement('style');
-        styleSheet.type = 'text/css';
-        styleSheet.id = ssId;
-        document.head.appendChild(styleSheet);
-      }
+        filterProto
+          .call(children, el => el.dataset && el.dataset.qVsAnchor !== void 0)
+          .forEach(el => {
+            delete el.dataset.qVsAnchor;
+          });
 
-      if (styleSheet.qChildIndex !== index) {
-        styleSheet.qChildIndex = index;
-        styleSheet.innerHTML = `#${ id } > *:nth-child(${ index }) { overflow-anchor: auto }`;
-      }
+        const el = children[ index ];
+
+        if (el && el.dataset) {
+          el.dataset.qVsAnchor = '';
+        }
+      });
     };
 
   function sumFn (acc, h) {
@@ -27668,8 +27733,6 @@
 
     let prevScrollStart, prevToIndex, localScrollViewSize, virtualScrollSizesAgg = [], virtualScrollSizes;
 
-    const vsId = 'qvs_' + id++;
-
     const virtualScrollPaddingBefore = vue.ref(0);
     const virtualScrollPaddingAfter = vue.ref(0);
     const virtualScrollSliceSizeComputed = vue.ref({});
@@ -27851,11 +27914,11 @@
         contentEl.addEventListener('focusout', onBlurRefocusFn);
 
         setTimeout(() => {
-          contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn);
+          contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn);
         });
       }
 
-      setOverflowAnchor(vsId, toIndex - from + 1);
+      setOverflowAnchor(contentEl, toIndex - from);
 
       const sizeBefore = alignEnd !== void 0 ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0) : 0;
 
@@ -27964,7 +28027,7 @@
     }
 
     function onBlurRefocusFn () {
-      contentRef.value !== void 0 && contentRef.value.focus();
+      contentRef.value !== null && contentRef.value !== void 0 && contentRef.value.focus();
     }
 
     function localResetVirtualScroll (toIndex, fullReset) {
@@ -28081,7 +28144,6 @@
           class: 'q-virtual-scroll__content',
           key: 'content',
           ref: contentRef,
-          id: vsId,
           tabindex: -1
         }, content.flat()),
 
@@ -28155,9 +28217,7 @@
       }
     });
 
-    setOverflowAnchor !== noop && vue.onBeforeUnmount(() => {
-      const styleSheet = document.getElementById(vsId + '_ss');
-      styleSheet !== null && styleSheet.remove();
+    vue.onBeforeUnmount(() => {
       onVirtualScrollEvt.cancel();
     });
 
@@ -28321,7 +28381,7 @@
 
       const virtualScrollItemSizeComputed = vue.computed(() => (
         props.virtualScrollItemSize === void 0
-          ? (props.dense === true ? 24 : 48)
+          ? (props.optionsDense === true ? 24 : 48)
           : props.virtualScrollItemSize
       ));
 
@@ -29169,7 +29229,7 @@
       function onInput (e) {
         clearTimeout(inputTimer);
 
-        if (e && e.target && e.target.composing === true) {
+        if (e && e.target && e.target.qComposing === true) {
           return
         }
 
@@ -34374,7 +34434,7 @@
 
             return vue.h('div', {
               class: 'q-table__grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3'
-                + (scope.selected === true ? 'q-table__grid-item--selected' : '')
+                + (scope.selected === true ? ' q-table__grid-item--selected' : '')
             }, [
               vue.h('div', data, child)
             ])
@@ -36594,7 +36654,20 @@
         required: true
       },
 
-      title: String
+      title: String,
+
+      fetchpriority: {
+        type: String,
+        default: 'auto'
+      },
+      loading: {
+        type: String,
+        default: 'eager'
+      },
+      referrerpolicy: {
+        type: String,
+        default: 'strict-origin-when-cross-origin'
+      }
     },
 
     setup (props) {
@@ -36612,6 +36685,9 @@
         vue.h('iframe', {
           src: props.src,
           title: props.title,
+          fetchpriority: props.fetchpriority,
+          loading: props.loading,
+          referrerpolicy: props.referrerpolicy,
           frameborder: '0',
           allowfullscreen: true
         })
@@ -38013,19 +38089,31 @@
       const applyState = cmd => {
         if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
           dialogRef.value[ cmd ]();
+          return
         }
-        else if (
+
+        const target = vm.$.subTree;
+
+        if (target && target.component) {
           // account for "script setup" way of declaring component
-          vm.$.subTree
-          && vm.$.subTree.component
-          && vm.$.subTree.component.proxy
-          && vm.$.subTree.component.proxy[ cmd ]
-        ) {
-          vm.$.subTree.component.proxy[ cmd ]();
-        }
-        else {
-          console.error('[Quasar] Incorrectly defined Dialog component');
+          if (target.component.proxy && target.component.proxy[ cmd ]) {
+            target.component.proxy[ cmd ]();
+            return
+          }
+
+          // account for "script setup" + async component way of declaring component
+          if (
+            target.component.subTree &&
+            target.component.subTree.component &&
+            target.component.subTree.component.proxy &&
+            target.component.subTree.component.proxy[ cmd ]
+          ) {
+            target.component.subTree.component.proxy[ cmd ]();
+            return
+          }
         }
+
+        console.error('[Quasar] Incorrectly defined Dialog component');
       };
 
       const
@@ -39392,7 +39480,7 @@
       return value
     }
 
-    const type = value.substr(0, 8);
+    const type = value.substring(0, 8);
     const source = value.substring(9);
 
     switch (type) {
@@ -39628,7 +39716,7 @@
   });
 
   var index_umd = {
-    version: '2.6.5',
+    version: '2.7.1',
     install (app, opts) {
       installQuasar(app, {
         components,