quasar 2.6.4 → 2.7.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.6.4
+ * Quasar Framework v2.7.0
  * (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.4' };
+      const $q = { version: '2.7.0' };
 
       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)
           ]))
         }
@@ -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);
       }
@@ -8368,7 +8404,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 +10162,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 +14442,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 +14581,7 @@
         removeFromHistory();
         cleanup(true);
         animating.value = true;
+        hidePortal();
 
         if (refocusTarget !== null) {
           refocusTarget.focus();
@@ -14544,13 +14589,13 @@
         }
 
         registerTimeout(() => {
-          hidePortal();
+          hidePortal(true); // done hiding, now destroy
           animating.value = false;
           emit('hide', evt);
         }, props.transitionDuration);
       }
 
-      function focus () {
+      function focus (selector) {
         addFocusFn(() => {
           let node = innerRef.value;
 
@@ -14558,7 +14603,7 @@
             return
           }
 
-          node = node.querySelector('[autofocus], [data-autofocus]') || node;
+          node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node;
           node.focus({ preventScroll: true });
         });
       }
@@ -14652,11 +14697,10 @@
       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();
+          focus('[tabindex]:not([tabindex="-1"])');
         }
       }
 
@@ -15918,11 +15962,12 @@
       function handleHide (evt) {
         removeTick();
         removeTimeout();
+        hidePortal();
 
         anchorCleanup();
 
         registerTimeout(() => {
-          hidePortal();
+          hidePortal(true); // done hiding, now destroy
           emit('hide', evt);
         }, props.transitionDuration);
       }
@@ -16066,7 +16111,10 @@
         default: 'div'
       },
 
-      active: Boolean,
+      active: {
+        type: Boolean,
+        default: null
+      },
 
       clickable: Boolean,
       dense: Boolean,
@@ -16104,7 +16152,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 +17023,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 +17040,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 +17055,12 @@
         }
       }
 
-      function onMousedown () {
+      function onPointerStart () {
         offsetBottom = void 0;
       }
 
-      function onMouseup (e) {
+      function onSelectionchange (e) {
         eVm.caret.save();
-        emit('mouseup', e);
-      }
-
-      function onTouchstartPassive () {
-        offsetBottom = void 0;
-      }
-
-      function onKeyup (e) {
-        eVm.caret.save();
-        emit('keyup', e);
-      }
-
-      function onTouchend (e) {
-        eVm.caret.save();
-        emit('touchend', e);
       }
 
       function setContent (v, restorePosition) {
@@ -17078,6 +17117,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 +17176,8 @@
             onFocus,
 
             // clean saved scroll position
-            onMousedown,
-            onTouchstartPassive,
-
-            // save caret
-            onMouseup,
-            onKeyup,
-            onTouchend
+            onMousedown: onPointerStart,
+            onTouchstartPassive: onPointerStart
           })
         ])
       }
@@ -17387,7 +17427,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 +18218,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 +19021,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,
 
-          getBtn(canAddFiles.value, 'add'),
-          getBtn(props.hideUploadBtn === false && canUpload.value === true, 'upload', state.upload),
-          getBtn(state.isUploading.value, 'clear', state.abort)
+              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)
+          ])
         ])
       ]
     }
@@ -19258,7 +19302,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 +20030,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 +21021,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 +22137,10 @@
         type: String,
         default: 'lazy'
       },
+      fetchpriority: {
+        type: String,
+        default: 'auto'
+      },
       width: String,
       height: String,
       initialRatio: {
@@ -22254,6 +22303,7 @@
           height: props.height,
           width: props.width,
           loading: props.loading,
+          fetchpriority: props.fetchpriority,
           'aria-hidden': 'true',
           draggable: props.draggable,
           ...img
@@ -22469,6 +22519,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 +22599,6 @@
         setDebounce(props.debounce);
 
         updateScrollTarget();
-
-        if (props.reverse === true) {
-          const
-            scrollHeight = getScrollHeight(localScrollTarget),
-            containerHeight = height(localScrollTarget);
-
-          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight);
-        }
-
-        immediatePoll();
       });
 
       return () => {
@@ -23453,6 +23503,8 @@
           }
 
           if (props.modelValue !== val && emitCachedValue !== val) {
+            emitCachedValue = val;
+
             stopWatcher === true && (stopValueWatcher = true);
             emit('update:modelValue', val);
 
@@ -23484,13 +23536,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 +24507,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) {
@@ -27452,27 +27508,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 +27727,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 +27908,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 +28021,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 +28138,6 @@
           class: 'q-virtual-scroll__content',
           key: 'content',
           ref: contentRef,
-          id: vsId,
           tabindex: -1
         }, content.flat()),
 
@@ -28155,9 +28211,7 @@
       }
     });
 
-    setOverflowAnchor !== noop && vue.onBeforeUnmount(() => {
-      const styleSheet = document.getElementById(vsId + '_ss');
-      styleSheet !== null && styleSheet.remove();
+    vue.onBeforeUnmount(() => {
       onVirtualScrollEvt.cancel();
     });
 
@@ -28321,7 +28375,7 @@
 
       const virtualScrollItemSizeComputed = vue.computed(() => (
         props.virtualScrollItemSize === void 0
-          ? (props.dense === true ? 24 : 48)
+          ? (props.optionsDense === true ? 24 : 48)
           : props.virtualScrollItemSize
       ));
 
@@ -34374,7 +34428,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 +36648,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 +36679,9 @@
         vue.h('iframe', {
           src: props.src,
           title: props.title,
+          fetchpriority: props.fetchpriority,
+          loading: props.loading,
+          referrerpolicy: props.referrerpolicy,
           frameborder: '0',
           allowfullscreen: true
         })
@@ -38540,14 +38610,14 @@
       function getButtons () {
         const child = [];
 
-        props.ok && child.push(
-          vue.h(QBtn, okProps.value)
-        );
-
         props.cancel && child.push(
           vue.h(QBtn, cancelProps.value)
         );
 
+        props.ok && child.push(
+          vue.h(QBtn, okProps.value)
+        );
+
         return vue.h(QCardActions, {
           class: props.stackButtons === true ? 'items-end' : '',
           vertical: props.stackButtons,
@@ -39392,7 +39462,7 @@
       return value
     }
 
-    const type = value.substr(0, 8);
+    const type = value.substring(0, 8);
     const source = value.substring(9);
 
     switch (type) {
@@ -39628,7 +39698,7 @@
   });
 
   var index_umd = {
-    version: '2.6.4',
+    version: '2.7.0',
     install (app, opts) {
       installQuasar(app, {
         components,