quasar 2.7.1 → 2.7.4

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.7.1
+ * Quasar Framework v2.7.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -646,6 +646,7 @@ input[type='search']::-webkit-search-decoration
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -663,8 +664,8 @@ input[type='search']::-webkit-search-decoration
     justify-content: center
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 .q-icon,
 .material-icons,
 .material-icons-outlined,
@@ -2656,6 +2657,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     font-size: $img-loading-font-size
   &__container
     border-radius: inherit
+    font-size: 0
   &__image
     border-radius: inherit
     width: 100%
@@ -4160,7 +4162,7 @@ body.platform-ios
     &--selected
       transform: scale(.95)
 .q-table--horizontal-separator, .q-table--cell-separator
-  thead th, tbody tr:not(:last-child) td
+  thead th, tbody tr:not(:last-child) > td
     border-bottom-width: 1px
 .q-table--vertical-separator, .q-table--cell-separator
   td, th
@@ -4579,6 +4581,10 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
       line-height: 38px
       width: 100%
       color: #fff
+      > svg,
+      > img
+        width: 1em
+        height: 1em
   &__dot-img
     position: absolute
     top: 4px

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.7.1
+ * Quasar Framework v2.7.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1603,7 +1603,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.7.1' };
+      const $q = { version: '2.7.4' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -3170,8 +3170,8 @@
     }, 50);
   }
 
-  function updateModifiers$1 (ctx, { modifiers, value, arg, instance }) {
-    const cfg = Object.assign({}, instance.$q.config.ripple, modifiers, value);
+  function updateModifiers$1 (ctx, { modifiers, value, arg }) {
+    const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value);
     ctx.modifiers = {
       early: cfg.early === true,
       stop: cfg.stop === true,
@@ -3186,6 +3186,7 @@
 
         beforeMount (el, binding) {
           const ctx = {
+            cfg: binding.instance.$.appContext.config.globalProperties.$q.config,
             enabled: binding.value !== false,
             modifiers: {},
             abort: [],
@@ -3194,11 +3195,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);
               }
@@ -3221,8 +3218,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' ]
@@ -3988,7 +3984,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) {
@@ -11982,7 +11978,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,
@@ -12411,7 +12407,7 @@
     YY (date, dateLocale, forcedYear) {
       // workaround for < 1900 with new Date()
       const y = this.YYYY(date, dateLocale, forcedYear) % 100;
-      return y > 0
+      return y >= 0
         ? pad(y)
         : '-' + pad(Math.abs(y))
     },
@@ -14394,6 +14390,7 @@
 
       persistent: Boolean,
       autoClose: Boolean,
+      allowFocusOutside: Boolean,
 
       noEscDismiss: Boolean,
       noBackdropDismiss: Boolean,
@@ -14698,7 +14695,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"])');
@@ -18832,6 +18830,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(() =>
@@ -21133,7 +21132,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;
@@ -21326,6 +21325,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
       );
@@ -21458,7 +21462,7 @@
       }
 
       Object.assign(state, {
-        fieldClass: { value: 'q-file q-field--auto-height' },
+        fieldClass,
         emitValue,
         hasValue,
         inputRef,
@@ -23246,23 +23250,19 @@
         e.target.qComposing = false;
         onInput(e);
       }
-      else if (e.type === 'compositionupdate') {
-        if (
-          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;
+      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;
-          }
+        if (isComposing === true) {
+          e.target.qComposing = true;
         }
       }
-      else {
-        e.target.qComposing = true;
-      }
     }
   }
 
@@ -23464,7 +23464,7 @@
       }
 
       function onInput (e) {
-        if (!e || !e.target || e.target.qComposing === true) {
+        if (!e || !e.target) {
           return
         }
 
@@ -23475,6 +23475,12 @@
 
         const val = e.target.value;
 
+        if (e.target.qComposing === true) {
+          temp.value = val;
+
+          return
+        }
+
         if (hasMask.value === true) {
           updateMaskValue(val, false, e.inputType);
         }
@@ -27055,6 +27061,8 @@
     mouseAllDir: true
   };
 
+  const getMinThumbSize = size => (size >= 250 ? 50 : Math.ceil(size / 5));
+
   var QScrollArea = createComponent({
     name: 'QScrollArea',
 
@@ -27146,7 +27154,7 @@
         Math.round(
           between(
             container.vertical.value * container.vertical.value / scroll.vertical.size.value,
-            50,
+            getMinThumbSize(container.vertical.value),
             container.vertical.value
           )
         )
@@ -27188,7 +27196,7 @@
         Math.round(
           between(
             container.horizontal.value * container.horizontal.value / scroll.horizontal.size.value,
-            50,
+            getMinThumbSize(container.horizontal.value),
             container.horizontal.value
           )
         )
@@ -27519,7 +27527,12 @@
   const setOverflowAnchor = window.getComputedStyle(document.body).overflowAnchor === void 0
     ? noop
     : function (contentEl, index) {
-      requestAnimationFrame(() => {
+      if (contentEl === null) {
+        return
+      }
+
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+      contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
         if (contentEl === null) {
           return
         }
@@ -28343,7 +28356,7 @@
 
     emits: [
       ...useFieldEmits,
-      'add', 'remove', 'input-value',
+      'add', 'remove', 'input-value', 'new-value',
       'keyup', 'keypress', 'keydown',
       'filter-abort'
     ],
@@ -28391,7 +28404,6 @@
         localResetVirtualScroll,
         padVirtualScroll,
         onVirtualScrollEvt,
-        reset,
         scrollTo,
         setVirtualScrollSize
       } = useVirtualScroll({
@@ -28485,15 +28497,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 = {
@@ -29558,13 +29578,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);
+              }
             }
           });
         }
@@ -29642,10 +29667,8 @@
         showPopup,
 
         floatingLabel: vue.computed(() =>
-          (props.hideSelected === true
-            ? inputValue.value.length > 0
-            : hasValue.value === true
-          )
+          (props.hideSelected !== true && hasValue.value === true)
+          || inputValue.value.length > 0
           || fieldValueIsFilled(props.displayValue)
         ),
 
@@ -33608,7 +33631,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' : '')
@@ -39716,7 +39738,7 @@
   });
 
   var index_umd = {
-    version: '2.7.1',
+    version: '2.7.4',
     install (app, opts) {
       installQuasar(app, {
         components,