quasar 2.4.6 → 2.4.10

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.6
+ * Quasar Framework v2.4.10
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -661,9 +661,10 @@ input[type='search']::-webkit-search-decoration
     display: flex !important
     align-items: center
     justify-content: center
-  > svg
-    width: 100%
-    height: 100%
+  > svg,
+  > img
+    width: 1em
+    height: 1em
 .q-icon,
 .material-icons,
 .material-icons-outlined,
@@ -3261,7 +3262,10 @@ body.desktop
     min-width: 50px !important
     &--padding
       padding-left: 4px
+  &__focus-target,
   &__autocomplete-input
+    position: absolute
+    outline: 0 !important
     width: 0
     height: 0
     padding: 0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.6
+ * Quasar Framework v2.4.10
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1447,7 +1447,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.6' };
+      const $q = { version: '2.4.10' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2032,27 +2032,22 @@
         }
 
         if (type.value.img === true) {
-          return vue.h('div', data, hMergeSlot(slots.default, [
-            vue.h('img', {
-              class: type.value.cls,
-              src: type.value.src
-            })
+          return vue.h('span', data, hMergeSlot(slots.default, [
+            vue.h('img', { src: type.value.src })
           ]))
         }
 
         if (type.value.svg === true) {
-          return vue.h('div', data, hMergeSlot(slots.default, [
+          return vue.h('span', data, hMergeSlot(slots.default, [
             vue.h('svg', {
-              class: type.value.cls,
               viewBox: type.value.viewBox
             }, type.value.nodes)
           ]))
         }
 
         if (type.value.svguse === true) {
-          return vue.h('div', data, hMergeSlot(slots.default, [
+          return vue.h('span', data, hMergeSlot(slots.default, [
             vue.h('svg', {
-              class: type.value.cls,
               viewBox: type.value.viewBox
             }, [
               vue.h('use', { 'xlink:href': type.value.src })
@@ -12608,7 +12603,12 @@
         normalizedModel.value
           .filter(date => typeof date === 'string')
           .map(date => decodeString(date, innerMask.value, innerLocale.value))
-          .filter(date => date.dateHash !== null)
+          .filter(date =>
+            date.dateHash !== null
+            && date.day !== null
+            && date.month !== null
+            && date.year !== null
+          )
       );
 
       const rangeModel = vue.computed(() => {
@@ -18906,6 +18906,8 @@
       abort: state.abort
     };
 
+    // TODO: the result of this computed, especially the dynamic part, isn't currently typed
+    // This result in an error with Volar when accessing the state (eg. files array)
     const slotScope = vue.computed(() => {
       const acc = {
         canAddFiles: canAddFiles.value,
@@ -20759,6 +20761,8 @@
               name: props.clearIcon || $q.iconSet.field.clear,
               tabindex: 0,
               type: 'button',
+              'aria-hidden': null,
+              role: null,
               onClick: clearValue
             })
           ])
@@ -23911,7 +23915,7 @@
         }
       };
 
-      let timer = null, localScrollTarget, parentEl;
+      let clearTimer = null, localScrollTarget, parentEl;
 
       vue.watch(() => props.scrollTarget, () => {
         unconfigureScrollTarget();
@@ -23919,9 +23923,7 @@
       });
 
       function emitEvent () {
-        clearTimeout(timer);
-        cancelAnimationFrame(timer);
-        timer = null;
+        clearTimer !== null && clearTimer();
 
         const top = Math.max(0, getVerticalScrollPosition(localScrollTarget));
         const left = getHorizontalScrollPosition(localScrollTarget);
@@ -23971,10 +23973,15 @@
         if (immediately === true || props.debounce === 0 || props.debounce === '0') {
           emitEvent();
         }
-        else if (timer === null) {
-          timer = props.debounce
-            ? setTimeout(emitEvent, props.debounce)
-            : requestAnimationFrame(emitEvent);
+        else if (clearTimer === null) {
+          const [ timer, fn ] = props.debounce
+            ? [ setTimeout(emitEvent, props.debounce), clearTimeout ]
+            : [ requestAnimationFrame(emitEvent), cancelAnimationFrame ];
+
+          clearTimer = () => {
+            fn(timer);
+            clearTimer = null;
+          };
         }
       }
 
@@ -23986,8 +23993,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
-        cancelAnimationFrame(timer);
+        clearTimer !== null && clearTimer();
         unconfigureScrollTarget();
       });
 
@@ -24166,7 +24172,7 @@
 
       // prevent scrollbar flicker while resizing window height
       // if no page scrollbar is already present
-      {
+      if (getScrollbarWidth() > 0) {
         let timer = null;
         const el = document.body;
 
@@ -24179,7 +24185,7 @@
           if (timer === null) {
             // if it has no scrollbar then there's nothing to do
 
-            if (el.scrollHeight > window.innerHeight) {
+            if (el.scrollHeight > $q.screen.height) {
               return
             }
 
@@ -24202,11 +24208,12 @@
         }
 
         vue.watch(
-          () => (props.container !== true && scrollbarWidth.value > 0 ? 'add' : 'remove'),
-          updateScrollEvent,
-          { immediate: true }
+          () => (props.container !== true ? 'add' : 'remove'),
+          updateScrollEvent
         );
 
+        props.container !== true && updateScrollEvent('add');
+
         vue.onUnmounted(() => {
           updateScrollEvent('remove');
         });
@@ -26831,6 +26838,9 @@
           && panning.value === false
         ) || scroll.vertical.size.value <= container.vertical.value + 1
       );
+      scroll.vertical.thumbStart = vue.computed(() =>
+        scroll.vertical.percentage.value * (container.vertical.value - scroll.vertical.thumbSize.value)
+      );
       scroll.vertical.thumbSize = vue.computed(() =>
         Math.round(
           between(
@@ -26841,13 +26851,11 @@
         )
       );
       scroll.vertical.style = vue.computed(() => {
-        const thumbSize = scroll.vertical.thumbSize.value;
-        const pos = scroll.vertical.percentage.value * (container.vertical.value - thumbSize);
         return {
           ...props.thumbStyle,
           ...props.verticalThumbStyle,
-          top: `${ pos }px`,
-          height: `${ thumbSize }px`
+          top: `${ scroll.vertical.thumbStart.value }px`,
+          height: `${ scroll.vertical.thumbSize.value }px`
         }
       });
       scroll.vertical.thumbClass = vue.computed(() =>
@@ -26872,6 +26880,9 @@
           && panning.value === false
         ) || scroll.horizontal.size.value <= container.horizontal.value + 1
       );
+      scroll.horizontal.thumbStart = vue.computed(() =>
+        scroll.horizontal.percentage.value * (container.horizontal.value - scroll.horizontal.thumbSize.value)
+      );
       scroll.horizontal.thumbSize = vue.computed(() =>
         Math.round(
           between(
@@ -26882,13 +26893,11 @@
         )
       );
       scroll.horizontal.style = vue.computed(() => {
-        const thumbSize = scroll.horizontal.thumbSize.value;
-        const pos = scroll.horizontal.percentage.value * (container.horizontal.value - thumbSize);
         return {
           ...props.thumbStyle,
           ...props.horizontalThumbStyle,
-          left: `${ pos }px`,
-          width: `${ thumbSize }px`
+          left: `${ scroll.horizontal.thumbStart.value }px`,
+          width: `${ scroll.horizontal.thumbSize.value }px`
         }
       });
       scroll.horizontal.thumbClass = vue.computed(() =>
@@ -27034,8 +27043,11 @@
         const data = scroll[ axis ];
 
         if (data.thumbHidden.value !== true) {
-          const pos = evt[ dirProps[ axis ].offset ] - data.thumbSize.value / 2;
-          setScroll(pos / container[ axis ].value * data.size.value, axis);
+          const offset = evt[ dirProps[ axis ].offset ];
+          if (offset < data.thumbStart.value || offset > data.thumbStart.value + data.thumbSize.value) {
+            const pos = offset - data.thumbSize.value / 2;
+            setScroll(pos / container[ axis ].value * data.size.value, axis);
+          }
 
           // activate thumb pan
           if (data.ref.value !== null) {
@@ -28518,34 +28530,34 @@
 
         if (typeof value === 'string' && value.length > 0) {
           const needle = value.toLocaleLowerCase();
+          const findFn = extractFn => {
+            const option = props.options.find(opt => extractFn.value(opt).toLocaleLowerCase() === needle);
 
-          let fn = opt => getOptionValue.value(opt).toLocaleLowerCase() === needle;
-          let option = props.options.find(fn);
+            if (option === void 0) {
+              return false
+            }
 
-          if (option !== void 0) {
             if (innerValue.value.indexOf(option) === -1) {
               toggleOption(option);
             }
             else {
               hidePopup();
             }
-          }
-          else {
-            fn = opt => getOptionLabel.value(opt).toLocaleLowerCase() === needle;
-            option = props.options.find(fn);
 
-            if (option !== void 0) {
-              if (innerValue.value.indexOf(option) === -1) {
-                toggleOption(option);
-              }
-              else {
-                hidePopup();
-              }
+            return true
+          };
+          const fillFn = afterFilter => {
+            if (findFn(getOptionValue) === true) {
+              return
             }
-            else {
-              filter(value, true);
+            if (findFn(getOptionLabel) === true || afterFilter === true) {
+              return
             }
-          }
+
+            filter(value, true, () => fillFn(true));
+          };
+
+          fillFn();
         }
         else {
           state.clearValue(e);
@@ -28924,7 +28936,7 @@
         }
       }
 
-      function filter (val, keepClosed) {
+      function filter (val, keepClosed, afterUpdateFn) {
         if (props.onFilter === void 0 || (keepClosed !== true && state.focused.value !== true)) {
           return
         }
@@ -28982,6 +28994,7 @@
                 }
 
                 typeof afterFn === 'function' && vue.nextTick(() => { afterFn(proxy); });
+                typeof afterUpdateFn === 'function' && vue.nextTick(() => { afterUpdateFn(proxy); });
               });
             }
           },
@@ -29336,7 +29349,7 @@
               vue.h('div', {
                 ref: targetRef,
                 key: 'd_t',
-                class: 'no-outline',
+                class: 'q-select__focus-target',
                 id: state.targetUid.value,
                 ...comboboxAttrs.value,
                 onKeydown: onTargetKeydown,
@@ -29348,7 +29361,7 @@
             if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
               child.push(
                 vue.h('input', {
-                  class: 'q-select__autocomplete-input no-outline',
+                  class: 'q-select__autocomplete-input',
                   autocomplete: props.autocomplete,
                   onKeyup: onTargetAutocomplete
                 })
@@ -35323,6 +35336,8 @@
       expanded: Array, // v-model:expanded
       selected: {}, // v-model:selected
 
+      noSelectionUnset: Boolean,
+
       defaultExpandAll: Boolean,
       accordion: Boolean,
 
@@ -35880,7 +35895,10 @@
 
         if (hasSelection.value) {
           if (meta.selectable) {
-            emit('update:selected', meta.key !== props.selected ? meta.key : null);
+            const val = meta.key !== props.selected ? meta.key : null;
+            if (props.noSelectionUnset !== true || val !== null) {
+              emit('update:selected', val);
+            }
           }
         }
         else {
@@ -38093,8 +38111,8 @@
         color: vmColor.value,
         label: okLabel.value,
         ripple: false,
-        ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
         disable: okDisabled.value,
+        ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
         'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
         onClick: onOk
       }));
@@ -39263,7 +39281,7 @@
   });
 
   var index_umd = {
-    version: '2.4.6',
+    version: '2.4.10',
     install (app, opts) {
       installQuasar(app, {
         components,