quasar 2.6.6 → 2.7.2

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.6.6
+ * Quasar Framework v2.7.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1603,7 +1603,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.6.6' };
+      const $q = { version: '2.7.2' };
 
       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:/;
@@ -2165,6 +2172,22 @@
         else if (ionRE.test(icon) === true) {
           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
           // to avoid tampering with Material Icons ligature font
@@ -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 ] : []))
     }
   });
 
@@ -3171,11 +3194,7 @@
               if (
                 ctx.enabled === true
                 && evt.qSkipRipple !== true
-                && (
-                  ctx.modifiers.early === true
-                    ? [ 'mousedown', 'touchstart' ].includes(evt.type) === true
-                    : evt.type === 'click'
-                )
+                && evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
               ) {
                 showRipple(evt, el, ctx, evt.qKeyEvent === true);
               }
@@ -3198,8 +3217,7 @@
           el.__qripple = ctx;
 
           addEvt(ctx, 'main', [
-            [ el, 'mousedown', 'start', 'passive' ],
-            [ el, 'touchstart', 'start', 'passive' ],
+            [ el, 'pointerdown', 'start', 'passive' ],
             [ el, 'click', 'start', 'passive' ],
             [ el, 'keydown', 'keystart', 'passive' ],
             [ el, 'keyup', 'keystart', 'passive' ]
@@ -3740,10 +3758,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
               })
             ])
@@ -3965,7 +3983,7 @@
     }
 
     function pickAnchorEl () {
-      if (props.target === false || props.target === '') {
+      if (props.target === false || props.target === '' || proxy.$el.parentNode === null) {
         anchorEl.value = null;
       }
       else if (props.target === true) {
@@ -7249,22 +7267,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(() =>
@@ -8381,7 +8400,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));
 
@@ -11958,7 +11977,7 @@
     const date = new Date(
       d.year,
       d.month === null ? null : d.month - 1,
-      d.day,
+      d.day === null ? 1 : d.day,
       d.hour,
       d.minute,
       d.second,
@@ -14370,6 +14389,7 @@
 
       persistent: Boolean,
       autoClose: Boolean,
+      allowFocusOutside: Boolean,
 
       noEscDismiss: Boolean,
       noBackdropDismiss: Boolean,
@@ -14674,7 +14694,8 @@
       function onFocusChange (evt) {
         // the focus is not in a vue child component
         if (
-          portalIsAccessible.value === true
+          props.allowFocusOutside !== true
+          && portalIsAccessible.value === true
           && childHasFocus(innerRef.value, evt.target) !== true
         ) {
           focus('[tabindex]:not([tabindex="-1"])');
@@ -16088,7 +16109,10 @@
         default: 'div'
       },
 
-      active: Boolean,
+      active: {
+        type: Boolean,
+        default: null
+      },
 
       clickable: Boolean,
       dense: Boolean,
@@ -16126,7 +16150,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
@@ -17029,27 +17053,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) {
@@ -17106,6 +17115,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 () => {
@@ -17159,13 +17174,8 @@
             onFocus,
 
             // clean saved scroll position
-            onMousedown,
-            onTouchstartPassive,
-
-            // save caret
-            onMouseup,
-            onKeyup,
-            onTouchend
+            onMousedown: onPointerStart,
+            onTouchstartPassive: onPointerStart
           })
         ])
       }
@@ -18819,6 +18829,7 @@
       + (props.square === true ? ' q-uploader--square no-border-radius' : '')
       + (props.flat === true ? ' q-uploader--flat no-shadow' : '')
       + (props.disable === true ? ' disabled q-uploader--disable' : '')
+      + (dnd.value === true ? ' q-uploader--dnd' : '')
     );
 
     const colorClass = vue.computed(() =>
@@ -19009,28 +19020,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)
+          ])
         ])
       ]
     }
@@ -21005,6 +21020,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))
@@ -21115,7 +21131,7 @@
       const labelAttrs = state.getControl === void 0 && slots.control === void 0
         ? {
             ...state.splitAttrs.attributes.value,
-            'data-autofocus': props.autofocus,
+            'data-autofocus': props.autofocus === true || void 0,
             ...attributes.value
           }
         : attributes.value;
@@ -21308,6 +21324,11 @@
         disabled: state.editable.value !== true
       }));
 
+      const fieldClass = vue.computed(() =>
+        'q-file q-field--auto-height'
+        + (dnd.value === true ? ' q-file--dnd' : '')
+      );
+
       const isAppending = vue.computed(() =>
         props.multiple === true && props.append === true
       );
@@ -21440,7 +21461,7 @@
       }
 
       Object.assign(state, {
-        fieldClass: { value: 'q-file q-field--auto-height' },
+        fieldClass,
         emitValue,
         hasValue,
         inputRef,
@@ -22502,6 +22523,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();
         }
       }
 
@@ -22572,16 +22603,6 @@
         setDebounce(props.debounce);
 
         updateScrollTarget();
-
-        if (props.reverse === true) {
-          const
-            scrollHeight = getScrollHeight(localScrollTarget),
-            containerHeight = height(localScrollTarget);
-
-          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight);
-        }
-
-        immediatePoll();
       });
 
       return () => {
@@ -23219,27 +23240,28 @@
   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.composing = false;
+      else if (
+        e.type === 'compositionupdate'
+        && e.target.qComposing !== true
+        && typeof e.data === 'string'
+      ) {
+        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;
-      }
     }
   }
 
@@ -23441,7 +23463,7 @@
       }
 
       function onInput (e) {
-        if (!e || !e.target || e.target.composing === true) {
+        if (!e || !e.target || e.target.qComposing === true) {
           return
         }
 
@@ -23486,6 +23508,8 @@
           }
 
           if (props.modelValue !== val && emitCachedValue !== val) {
+            emitCachedValue = val;
+
             stopWatcher === true && (stopValueWatcher = true);
             emit('update:modelValue', val);
 
@@ -23517,13 +23541,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 = '';
         }
       }
@@ -24485,7 +24512,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) {
@@ -24648,7 +24676,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'
@@ -27490,8 +27518,13 @@
   const setOverflowAnchor = window.getComputedStyle(document.body).overflowAnchor === void 0
     ? noop
     : function (contentEl, index) {
-      requestAnimationFrame(() => {
-        if (contentEl === void 0) {
+      if (contentEl === null) {
+        return
+      }
+
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+      contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
+        if (contentEl === null) {
           return
         }
 
@@ -27885,7 +27918,7 @@
         contentEl.addEventListener('focusout', onBlurRefocusFn);
 
         setTimeout(() => {
-          contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn);
+          contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn);
         });
       }
 
@@ -27998,7 +28031,7 @@
     }
 
     function onBlurRefocusFn () {
-      contentRef.value !== void 0 && contentRef.value.focus();
+      contentRef.value !== null && contentRef.value !== void 0 && contentRef.value.focus();
     }
 
     function localResetVirtualScroll (toIndex, fullReset) {
@@ -28314,7 +28347,7 @@
 
     emits: [
       ...useFieldEmits,
-      'add', 'remove', 'input-value',
+      'add', 'remove', 'input-value', 'new-value',
       'keyup', 'keypress', 'keydown',
       'filter-abort'
     ],
@@ -28352,7 +28385,7 @@
 
       const virtualScrollItemSizeComputed = vue.computed(() => (
         props.virtualScrollItemSize === void 0
-          ? (props.dense === true ? 24 : 48)
+          ? (props.optionsDense === true ? 24 : 48)
           : props.virtualScrollItemSize
       ));
 
@@ -28362,7 +28395,6 @@
         localResetVirtualScroll,
         padVirtualScroll,
         onVirtualScrollEvt,
-        reset,
         scrollTo,
         setVirtualScrollSize
       } = useVirtualScroll({
@@ -28456,15 +28488,23 @@
 
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-      const comboboxAttrs = vue.computed(() => ({
-        tabindex: props.tabindex,
-        role: 'combobox',
-        'aria-label': props.label,
-        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-        'aria-expanded': menu.value === true ? 'true' : 'false',
-        'aria-owns': `${ state.targetUid.value }_lb`,
-        'aria-controls': `${ state.targetUid.value }_lb`
-      }));
+      const comboboxAttrs = vue.computed(() => {
+        const attrs = {
+          tabindex: props.tabindex,
+          role: 'combobox',
+          'aria-label': props.label,
+          'aria-autocomplete': props.useInput === true ? 'list' : 'none',
+          'aria-expanded': menu.value === true ? 'true' : 'false',
+          'aria-owns': `${ state.targetUid.value }_lb`,
+          'aria-controls': `${ state.targetUid.value }_lb`
+        };
+
+        if (optionIndex.value >= 0) {
+          attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`;
+        }
+
+        return attrs
+      });
 
       const listboxAttrs = vue.computed(() => {
         const attrs = {
@@ -29200,7 +29240,7 @@
       function onInput (e) {
         clearTimeout(inputTimer);
 
-        if (e && e.target && e.target.composing === true) {
+        if (e && e.target && e.target.qComposing === true) {
           return
         }
 
@@ -29529,13 +29569,18 @@
         setOptionIndex(optionIndex);
       }
 
-      function rerenderMenu () {
+      function rerenderMenu (newLength, oldLength) {
         if (menu.value === true && state.innerLoading.value === false) {
-          reset();
+          localResetVirtualScroll(-1, true);
 
           vue.nextTick(() => {
             if (menu.value === true && state.innerLoading.value === false) {
-              updateMenu(true);
+              if (newLength > oldLength) {
+                localResetVirtualScroll();
+              }
+              else {
+                updateMenu(true);
+              }
             }
           });
         }
@@ -33579,7 +33624,6 @@
 
       const __containerClass = vue.computed(() =>
         `q-table__container q-table--${ props.separator }-separator column no-wrap`
-        + (props.loading === true ? ' q-table--loading' : '')
         + (props.grid === true ? ' q-table--grid' : cardDefaultClass.value)
         + (isDark.value === true ? ' q-table--dark' : '')
         + (props.dense === true ? ' q-table--dense' : '')
@@ -38060,19 +38104,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
@@ -39675,7 +39731,7 @@
   });
 
   var index_umd = {
-    version: '2.6.6',
+    version: '2.7.2',
     install (app, opts) {
       installQuasar(app, {
         components,