quasar 2.6.6 → 2.7.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.6.6
+ * Quasar Framework v2.7.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -669,7 +669,10 @@ input[type='search']::-webkit-search-decoration
 .material-icons,
 .material-icons-outlined,
 .material-icons-round,
-.material-icons-sharp
+.material-icons-sharp,
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp
   user-select: none
   cursor: inherit
   font-size: inherit

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.6.6
+ * Quasar Framework v2.7.0
  * (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.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:/;
@@ -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)
           ]))
         }
@@ -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
               })
             ])
@@ -8381,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));
 
@@ -16088,7 +16111,10 @@
         default: 'div'
       },
 
-      active: Boolean,
+      active: {
+        type: Boolean,
+        default: null
+      },
 
       clickable: Boolean,
       dense: Boolean,
@@ -16126,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
@@ -17029,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) {
@@ -17106,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 () => {
@@ -17159,13 +17176,8 @@
             onFocus,
 
             // clean saved scroll position
-            onMousedown,
-            onTouchstartPassive,
-
-            // save caret
-            onMouseup,
-            onKeyup,
-            onTouchend
+            onMousedown: onPointerStart,
+            onTouchstartPassive: onPointerStart
           })
         ])
       }
@@ -19009,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,
+
+              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)
+          ])
         ])
       ]
     }
@@ -21005,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))
@@ -22502,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();
         }
       }
 
@@ -22572,16 +22599,6 @@
         setDebounce(props.debounce);
 
         updateScrollTarget();
-
-        if (props.reverse === true) {
-          const
-            scrollHeight = getScrollHeight(localScrollTarget),
-            containerHeight = height(localScrollTarget);
-
-          setVerticalScrollPosition(localScrollTarget, scrollHeight - containerHeight);
-        }
-
-        immediatePoll();
       });
 
       return () => {
@@ -23486,6 +23503,8 @@
           }
 
           if (props.modelValue !== val && emitCachedValue !== val) {
+            emitCachedValue = val;
+
             stopWatcher === true && (stopValueWatcher = true);
             emit('update:modelValue', val);
 
@@ -23517,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 = '';
         }
       }
@@ -24485,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) {
@@ -27491,7 +27514,7 @@
     ? noop
     : function (contentEl, index) {
       requestAnimationFrame(() => {
-        if (contentEl === void 0) {
+        if (contentEl === null) {
           return
         }
 
@@ -27885,7 +27908,7 @@
         contentEl.addEventListener('focusout', onBlurRefocusFn);
 
         setTimeout(() => {
-          contentEl !== void 0 && contentEl.removeEventListener('focusout', onBlurRefocusFn);
+          contentEl !== null && contentEl.removeEventListener('focusout', onBlurRefocusFn);
         });
       }
 
@@ -27998,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) {
@@ -28352,7 +28375,7 @@
 
       const virtualScrollItemSizeComputed = vue.computed(() => (
         props.virtualScrollItemSize === void 0
-          ? (props.dense === true ? 24 : 48)
+          ? (props.optionsDense === true ? 24 : 48)
           : props.virtualScrollItemSize
       ));
 
@@ -39675,7 +39698,7 @@
   });
 
   var index_umd = {
-    version: '2.6.6',
+    version: '2.7.0',
     install (app, opts) {
       installQuasar(app, {
         components,