quasar 1.18.10 → 1.19.2

package/dist/quasar.umd.modern.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.18.10
+ * Quasar Framework v1.19.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -12,7 +12,7 @@
 
   Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
 
-  var version = "1.18.10";
+  var version = "1.19.2";
 
   /* eslint-disable no-useless-escape */
 
@@ -2320,8 +2320,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:/;
@@ -2426,6 +2433,22 @@
         else if (ionRE.test(icon) === true) {
           cls = `ionicons ion-${this.$q.platform.is.ios === true ? 'ios' : 'md'}${icon.substr(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
@@ -2477,7 +2500,7 @@
         return h('span', data, mergeSlot([
           h('svg', {
             attrs: {
-              viewBox: this.type.viewBox,
+              viewBox: this.type.viewBox || '0 0 24 24',
               focusable: 'false' /* needed for IE11 */
             }
           }, this.type.nodes)
@@ -3269,11 +3292,7 @@
             evt.qSkipRipple !== true &&
             // on ENTER in form IE emits a PointerEvent with negative client cordinates
             (client.is.ie !== true || evt.clientX >= 0) &&
-            (
-              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);
           }
@@ -3296,8 +3315,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' ]
@@ -3832,11 +3850,11 @@
       if (this.loading === true && this.percentage !== void 0) {
         child.push(
           h('span', {
-            staticClass: 'q-btn__progress absolute-full overflow-hidden'
+            staticClass: 'q-btn__progress absolute-full overflow-hidden',
+            class: this.darkPercentage === true ? 'q-btn__progress--dark' : ''
           }, [
             h('span', {
               staticClass: 'q-btn__progress-indicator fit block',
-              class: this.darkPercentage === true ? 'q-btn__progress--dark' : '',
               style: this.percentageStyle
             })
           ])
@@ -4063,7 +4081,7 @@
       },
 
       __pickAnchorEl () {
-        if (this.target === false || this.target === '') {
+        if (this.target === false || this.target === '' || this.parentEl === null) {
           this.anchorEl = void 0;
         }
         else if (this.target === true) {
@@ -11949,7 +11967,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,
@@ -16337,7 +16355,7 @@
         return false
       }
 
-      if (el !== null && list.includes(el.nodeName.toLowerCase()) === true) {
+      if (list.includes(el.nodeName.toLowerCase()) === true) {
         return true
       }
 
@@ -16953,33 +16971,14 @@
         }
       },
 
-      __onMousedown () {
-        this.__offsetBottom = void 0;
-      },
-
-      __onMouseup (e) {
-        this.caret.save();
-        if (this.qListeners.mouseup !== void 0) {
-          this.$emit('mouseup', e);
-        }
-      },
-
-      __onKeyup (e) {
-        this.caret.save();
-        if (this.qListeners.keyup !== void 0) {
-          this.$emit('keyup', e);
-        }
-      },
-
-      __onTouchstart () {
+      // mousedown, touchstart
+      __onPointerStart (e) {
         this.__offsetBottom = void 0;
+        this.qListeners[e.type] !== void 0 && this.$emit(e.type, e);
       },
 
-      __onTouchend (e) {
+      __onSelectionchange () {
         this.caret.save();
-        if (this.qListeners.touchend !== void 0) {
-          this.$emit('touchend', e);
-        }
       },
 
       runCmd (cmd, param, update = true) {
@@ -17042,6 +17041,12 @@
       this.caret = new Caret(this.$refs.content, this);
       this.__setContent(this.value);
       this.refreshToolbar();
+
+      document.addEventListener('selectionchange', this.__onSelectionchange);
+    },
+
+    beforeDestroy () {
+      document.removeEventListener('selectionchange', this.__onSelectionchange);
     },
 
     render (h) {
@@ -17079,13 +17084,8 @@
         focus: this.__onFocus,
 
         // clean saved scroll position
-        mousedown: this.__onMousedown,
-        touchstart: this.__onTouchstart,
-
-        // save caret
-        mouseup: this.__onMouseup,
-        keyup: this.__onKeyup,
-        touchend: this.__onTouchend
+        mousedown: this.__onPointerStart,
+        touchstart: this.__onPointerStart
       };
 
       return h('div', {
@@ -18634,8 +18634,9 @@
               ref: 'target',
               staticClass: 'q-field__native row',
               attrs: {
+                tabindex: -1,
                 ...this.qAttrs,
-                'data-autofocus': this.autofocus
+                'data-autofocus': this.autofocus || void 0
               }
             }, this.$scopedSlots.control(this.controlSlotScope))
           );
@@ -18811,7 +18812,7 @@
       const attrs = this.__getControl === void 0 && this.$scopedSlots.control === void 0
         ? {
           ...this.qAttrs,
-          'data-autofocus': this.autofocus,
+          'data-autofocus': this.autofocus || void 0,
           ...this.attrs
         }
         : this.attrs;
@@ -19219,6 +19220,10 @@
 
       isAppending () {
         return this.multiple === true && this.append === true
+      },
+
+      fieldClass () {
+        return 'q-file q-field--auto-height' + (this.dnd === true ? ' q-file--dnd' : '')
       }
     },
 
@@ -19385,8 +19390,6 @@
     },
 
     created () {
-      this.fieldClass = 'q-file q-field--auto-height';
-
       // necessary for QField's clearable
       // and FileValueMixin
       this.type = 'file';
@@ -20449,6 +20452,16 @@
 
         if (this.isWorking === true) {
           this.__scrollTarget.addEventListener('scroll', this.poll, passive$1);
+
+          if (this.reverse === true) {
+            const
+              scrollHeight = getScrollHeight(this.__scrollTarget),
+              containerHeight = height(this.__scrollTarget);
+
+            setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight);
+          }
+
+          this.immediatePoll();
         }
       },
 
@@ -20480,16 +20493,6 @@
       this.__setDebounce(this.debounce);
 
       this.updateScrollTarget();
-
-      if (this.reverse === true) {
-        const
-          scrollHeight = getScrollHeight(this.__scrollTarget),
-          containerHeight = height(this.__scrollTarget);
-
-        setScrollPosition(this.__scrollTarget, scrollHeight - containerHeight);
-      }
-
-      this.immediatePoll();
     },
 
     activated () {
@@ -21150,28 +21153,29 @@
   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;
 
   var CompositionMixin = {
     methods: {
       __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;
           this.__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;
-        }
       }
     }
   };
@@ -21319,7 +21323,7 @@
       inputAttrs () {
         const attrs = {
           tabindex: 0,
-          'data-autofocus': this.autofocus,
+          'data-autofocus': this.autofocus || void 0,
           rows: this.type === 'textarea' ? 6 : void 0,
           'aria-label': this.label,
           name: this.nameProp,
@@ -21372,7 +21376,7 @@
       },
 
       __onInput (e) {
-        if (!e || !e.target || e.target.composing === true) {
+        if (!e || !e.target || e.target.qComposing === true) {
           return
         }
 
@@ -21450,13 +21454,16 @@
         const inp = this.$refs.input;
         if (inp !== void 0) {
           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 = '';
         }
       },
@@ -22246,6 +22253,7 @@
       const layout = h('div', {
         class: this.classes,
         style: this.style,
+        attrs: { tabindex: -1 },
         on: { ...this.qListeners }
       }, mergeSlot([
         h(QScrollObserver, {
@@ -25973,11 +25981,12 @@
       setOverflowAnchor.isSupported = window.getComputedStyle(document.body).overflowAnchor !== void 0;
     }
 
-    if (setOverflowAnchor.isSupported === false) {
+    if (setOverflowAnchor.isSupported === false || contentEl === void 0) {
       return
     }
 
-    requestAnimationFrame(() => {
+    cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+    contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
       if (contentEl === void 0) {
         return
       }
@@ -26647,13 +26656,18 @@
         this.__updateMenu(show);
       },
 
-      virtualScrollLength () {
+      virtualScrollLength (newLength, oldLength) {
         if (this.menu === true && this.innerLoading === false) {
-          this.reset();
+          this.__resetVirtualScroll(-1, true);
 
           this.$nextTick(() => {
             if (this.menu === true && this.innerLoading === false) {
-              this.__updateMenu(true);
+              if (newLength > oldLength) {
+                this.__resetVirtualScroll();
+              }
+              else {
+                this.__updateMenu(true);
+              }
             }
           });
         }
@@ -26891,7 +26905,7 @@
 
       virtualScrollItemSizeComputed () {
         return this.virtualScrollItemSize === void 0
-          ? (this.dense === true ? 24 : 48)
+          ? (this.optionsDense === true ? 24 : 48)
           : this.virtualScrollItemSize
       },
 
@@ -27571,7 +27585,7 @@
             maxlength: this.maxlength, // this is converted to prop by QField
             tabindex: this.tabindex,
             autocomplete: this.autocomplete,
-            'data-autofocus': fromDialog === true ? false : this.autofocus,
+            'data-autofocus': (fromDialog !== true && this.autofocus) || void 0,
             disabled: this.disable === true,
             readonly: this.readonly === true
           },
@@ -27592,7 +27606,7 @@
       __onInput (e) {
         clearTimeout(this.inputTimer);
 
-        if (e && e.target && e.target.composing === true) {
+        if (e && e.target && e.target.qComposing === true) {
           return
         }
 
@@ -35413,28 +35427,32 @@
 
         return [
           h('div', {
-            staticClass: 'q-uploader__header-content flex flex-center no-wrap q-gutter-xs'
+            staticClass: 'q-uploader__header-content column'
           }, [
-            this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
-            this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
-
-            this.isUploading === true
-              ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
-              : null,
+            h('div', {
+              staticClass: 'flex flex-center no-wrap q-gutter-xs'
+            }, [
+              this.__getBtn(h, this.queuedFiles.length > 0, 'removeQueue', this.removeQueuedFiles),
+              this.__getBtn(h, this.uploadedFiles.length > 0, 'removeUploaded', this.removeUploadedFiles),
 
-            h('div', { staticClass: 'col column justify-center' }, [
-              this.label !== void 0
-                ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+              this.isUploading === true
+                ? h(QSpinner, { staticClass: 'q-uploader__spinner' })
                 : null,
 
-              h('div', { staticClass: 'q-uploader__subtitle' }, [
-                this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
-              ])
-            ]),
+              h('div', { staticClass: 'col column justify-center' }, [
+                this.label !== void 0
+                  ? h('div', { staticClass: 'q-uploader__title' }, [ this.label ])
+                  : null,
 
-            this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
-            this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
-            this.__getBtn(h, this.isUploading, 'clear', this.abort)
+                h('div', { staticClass: 'q-uploader__subtitle' }, [
+                  this.uploadSizeLabel + ' / ' + this.uploadProgressLabel
+                ])
+              ]),
+
+              this.__getBtn(h, this.canAddFiles, 'add', this.pickFiles),
+              this.__getBtn(h, this.hideUploadBtn === false && this.canUpload === true, 'upload', this.upload),
+              this.__getBtn(h, this.isUploading, 'clear', this.abort)
+            ])
           ])
         ]
       },
@@ -35535,7 +35553,8 @@
           'q-uploader--bordered': this.bordered,
           'q-uploader--square no-border-radius': this.square,
           'q-uploader--flat no-shadow': this.flat,
-          'disabled q-uploader--disable': this.disable
+          'disabled q-uploader--disable': this.disable,
+          'q-uploader--dnd': this.dnd
         },
         on: this.canAddFiles === true
           ? cache(this, 'drag', {