quasar 2.4.11 → 2.5.1

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.11
+ * Quasar Framework v2.5.1
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -633,12 +633,19 @@
         return
       }
 
+      const { visualViewport } = window;
+      const target = visualViewport || window;
+      const getSize = visualViewport === void 0
+        ? () => [ window.innerWidth, window.innerHeight ]
+        : () => [
+            visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+            visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+          ];
+
       const classes = $q.config.screen !== void 0 && $q.config.screen.bodyClasses === true;
 
       this.__update = force => {
-        const
-          w = window.innerWidth,
-          h = window.innerHeight;
+        const [ w, h ] = getSize();
 
         if (h !== this.height) {
           this.height = h;
@@ -696,11 +703,7 @@
       };
 
       const start = () => {
-        const
-          style = getComputedStyle(document.body),
-          target = window.visualViewport !== void 0
-            ? window.visualViewport
-            : window;
+        const style = getComputedStyle(document.body);
 
         // if css props available
         if (style.getPropertyValue('--q-size-sm')) {
@@ -1456,7 +1459,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.11' };
+      const $q = { version: '2.5.1' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2335,19 +2338,25 @@
     }
   }
 
+  function fillNormalizedVNodes (children, vnode) {
+    if (typeof vnode.type === 'symbol') {
+      if (Array.isArray(vnode.children) === true) {
+        vnode.children.forEach(child => {
+          fillNormalizedVNodes(children, child);
+        });
+      }
+    }
+    else {
+      children.add(vnode);
+    }
+  }
+
   // vnodes from rendered in advanced slots
   function getNormalizedVNodes (vnodes) {
     const children = new Set();
 
     vnodes.forEach(vnode => {
-      if (typeof vnode.type === 'symbol' && Array.isArray(vnode.children) === true) {
-        vnode.children.forEach(child => {
-          children.add(child);
-        });
-      }
-      else {
-        children.add(vnode);
-      }
+      fillNormalizedVNodes(children, vnode);
     });
 
     return Array.from(children)
@@ -2398,7 +2407,7 @@
           hSlot(slots.default)
         );
 
-        if (vnodes === void 0) { return }
+        if (vnodes.length === 0) { return }
 
         let els = 1;
 
@@ -4059,7 +4068,7 @@
     vue.watch(() => props.modelValue, processModelChange);
 
     if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
-      vue.watch(() => proxy.$route, () => {
+      vue.watch(() => proxy.$route.fullPath, () => {
         if (hideOnRouteChange.value === true && showing.value === true) {
           hide();
         }
@@ -5131,7 +5140,7 @@
 
           if (node && node.contains(document.activeElement) !== true) {
             node = node.querySelector('[autofocus], [data-autofocus]') || node;
-            node.focus();
+            node.focus({ preventScroll: true });
           }
         });
       }
@@ -5259,6 +5268,7 @@
         // the focus is not in a vue child component
         if (
           handlesFocus.value === true
+          && props.noFocus !== true
           && childHasFocus(innerRef.value, evt.target) !== true
         ) {
           focus();
@@ -6413,7 +6423,7 @@
     let historyEntry, fullscreenFillerNode, container;
     const inFullscreen = vue.ref(false);
 
-    vmHasRouter(vm) === true && vue.watch(() => proxy.$route, () => {
+    vmHasRouter(vm) === true && vue.watch(() => proxy.$route.fullPath, () => {
       props.noRouteFullscreenExit !== true && exitFullscreen();
     });
 
@@ -7170,6 +7180,10 @@
     falseValue: { default: false },
     indeterminateValue: { default: null },
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+    indeterminateIcon: String,
+
     toggleOrder: {
       type: String,
       validator: v => v === 'tf' || v === 'ft'
@@ -7382,6 +7396,7 @@
   }
 
   const bgNode = vue.h('div', {
+    key: 'svg',
     class: 'q-checkbox__bg absolute'
   }, [
     vue.h('svg', {
@@ -7408,8 +7423,36 @@
     props: useCheckboxProps,
     emits: useCheckboxEmits,
 
-    setup () {
-      return useCheckbox('checkbox', () => () => [ bgNode ])
+    setup (props) {
+      function getInner (isTrue, isIndeterminate) {
+        const icon = vue.computed(() =>
+          (isTrue.value === true
+            ? props.checkedIcon
+            : (isIndeterminate.value === true
+                ? props.indeterminateIcon
+                : props.uncheckedIcon
+              )
+          ) || null
+        );
+
+        return () => (
+          icon.value !== null
+            ? [
+                vue.h('div', {
+                  key: 'icon',
+                  class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
+                }, [
+                  vue.h(QIcon, {
+                    class: 'q-checkbox__icon',
+                    name: icon.value
+                  })
+                ])
+              ]
+            : [ bgNode ]
+        )
+      }
+
+      return useCheckbox('checkbox', getInner)
     }
   });
 
@@ -11736,19 +11779,18 @@
   function applyYearMonthDayChange (date, mod, sign) {
     let
       year = date.getFullYear(),
-      month = date.getMonth(),
-      day = date.getDate();
+      month = date.getMonth();
 
-    if (mod.years !== void 0) {
-      year += sign * mod.years;
-    }
+    const day = date.getDate();
 
-    if (mod.months !== void 0) {
-      month += sign * mod.months;
+    if (mod.year !== void 0) {
+      year += sign * mod.year;
+      delete mod.year;
     }
 
-    if (mod.days !== void 0) {
-      day += sign * mod.days;
+    if (mod.month !== void 0) {
+      month += sign * mod.month;
+      delete mod.month;
     }
 
     date.setDate(1);
@@ -11756,26 +11798,14 @@
 
     date.setFullYear(year);
     date.setMonth(month);
-    date.setDate(day);
-
-    return date
-  }
-
-  function getChange (date, mod, sign) {
-    const
-      d = new Date(date),
-      t = mod.years !== void 0 || mod.months !== void 0 || mod.days !== void 0
-        ? applyYearMonthDayChange(d, mod, sign)
-        : d;
+    date.setDate(Math.min(day, daysInMonth(date)));
 
-    for (const key in mod) {
-      if (key !== 'years' && key !== 'months' && key !== 'days') {
-        const op = capitalize(key);
-        t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ]);
-      }
+    if (mod.date !== void 0) {
+      date.setDate(date.getDate() + sign * mod.date);
+      delete mod.date;
     }
 
-    return t
+    return date
   }
 
   function applyYearMonthDay (date, mod, middle) {
@@ -11792,22 +11822,86 @@
     date[ `set${ middle }Month` ](month);
     date[ `set${ middle }Date` ](day);
 
+    delete mod.year;
+    delete mod.month;
+    delete mod.date;
+
     return date
   }
 
-  function adjustDate (date, mod, utc) {
+  function getChange (date, rawMod, sign) {
+    const
+      mod = normalizeMod(rawMod),
+      d = new Date(date),
+      t = mod.year !== void 0 || mod.month !== void 0 || mod.date !== void 0
+        ? applyYearMonthDayChange(d, mod, sign) // removes year/month/day
+        : d;
+
+    for (const key in mod) {
+      const op = capitalize(key);
+      t[ `set${ op }` ](t[ `get${ op }` ]() + sign * mod[ key ]);
+    }
+
+    return t
+  }
+
+  function normalizeMod (mod) {
+    const acc = { ...mod };
+
+    if (mod.years !== void 0) {
+      acc.year = mod.years;
+      delete acc.years;
+    }
+
+    if (mod.months !== void 0) {
+      acc.month = mod.months;
+      delete acc.months;
+    }
+
+    if (mod.days !== void 0) {
+      acc.date = mod.days;
+      delete acc.days;
+    }
+    if (mod.day !== void 0) {
+      acc.date = mod.day;
+      delete acc.day;
+    }
+
+    if (mod.hour !== void 0) {
+      acc.hours = mod.hour;
+      delete acc.hour;
+    }
+
+    if (mod.minute !== void 0) {
+      acc.minutes = mod.minute;
+      delete acc.minute;
+    }
+
+    if (mod.second !== void 0) {
+      acc.seconds = mod.second;
+      delete acc.second;
+    }
+
+    if (mod.millisecond !== void 0) {
+      acc.milliseconds = mod.millisecond;
+      delete acc.millisecond;
+    }
+
+    return acc
+  }
+
+  function adjustDate (date, rawMod, utc) {
     const
+      mod = normalizeMod(rawMod),
       middle = utc === true ? 'UTC' : '',
       d = new Date(date),
       t = mod.year !== void 0 || mod.month !== void 0 || mod.date !== void 0
-        ? applyYearMonthDay(d, mod, middle)
+        ? applyYearMonthDay(d, mod, middle) // removes year/month/day
         : d;
 
     for (const key in mod) {
-      if (key !== 'year' && key !== 'month' && key !== 'date') {
-        const op = key.charAt(0).toUpperCase() + key.slice(1);
-        t[ `set${ middle }${ op }` ](mod[ key ]);
-      }
+      const op = key.charAt(0).toUpperCase() + key.slice(1);
+      t[ `set${ middle }${ op }` ](mod[ key ]);
     }
 
     return t
@@ -12041,16 +12135,23 @@
 
     switch (unit) {
       case 'year':
+      case 'years':
         t[ `${ prefix }Month` ](0);
       case 'month':
+      case 'months':
         t[ `${ prefix }Date` ](1);
       case 'day':
+      case 'days':
+      case 'date':
         t[ `${ prefix }Hours` ](0);
       case 'hour':
+      case 'hours':
         t[ `${ prefix }Minutes` ](0);
       case 'minute':
+      case 'minutes':
         t[ `${ prefix }Seconds` ](0);
       case 'second':
+      case 'seconds':
         t[ `${ prefix }Milliseconds` ](0);
     }
     return t
@@ -12063,16 +12164,23 @@
 
     switch (unit) {
       case 'year':
+      case 'years':
         t[ `${ prefix }Month` ](11);
       case 'month':
+      case 'months':
         t[ `${ prefix }Date` ](daysInMonth(t));
       case 'day':
+      case 'days':
+      case 'date':
         t[ `${ prefix }Hours` ](23);
       case 'hour':
+      case 'hours':
         t[ `${ prefix }Minutes` ](59);
       case 'minute':
+      case 'minutes':
         t[ `${ prefix }Seconds` ](59);
       case 'second':
+      case 'seconds':
         t[ `${ prefix }Milliseconds` ](999);
     }
     return t
@@ -12108,21 +12216,28 @@
 
     switch (unit) {
       case 'years':
+      case 'year':
         return (t.getFullYear() - sub.getFullYear())
 
       case 'months':
+      case 'month':
         return (t.getFullYear() - sub.getFullYear()) * 12 + t.getMonth() - sub.getMonth()
 
       case 'days':
+      case 'day':
+      case 'date':
         return getDiff(startOfDate(t, 'day'), startOfDate(sub, 'day'), MILLISECONDS_IN_DAY)
 
       case 'hours':
+      case 'hour':
         return getDiff(startOfDate(t, 'hour'), startOfDate(sub, 'hour'), MILLISECONDS_IN_HOUR)
 
       case 'minutes':
+      case 'minute':
         return getDiff(startOfDate(t, 'minute'), startOfDate(sub, 'minute'), MILLISECONDS_IN_MINUTE)
 
       case 'seconds':
+      case 'second':
         return getDiff(startOfDate(t, 'second'), startOfDate(sub, 'second'), 1000)
     }
   }
@@ -12168,26 +12283,33 @@
 
     switch (unit) {
       case 'second':
+      case 'seconds':
         if (t.getSeconds() !== d.getSeconds()) {
           return false
         }
       case 'minute': // intentional fall-through
+      case 'minutes':
         if (t.getMinutes() !== d.getMinutes()) {
           return false
         }
       case 'hour': // intentional fall-through
+      case 'hours':
         if (t.getHours() !== d.getHours()) {
           return false
         }
       case 'day': // intentional fall-through
+      case 'days':
+      case 'date':
         if (t.getDate() !== d.getDate()) {
           return false
         }
       case 'month': // intentional fall-through
+      case 'months':
         if (t.getMonth() !== d.getMonth()) {
           return false
         }
       case 'year': // intentional fall-through
+      case 'years':
         if (t.getFullYear() !== d.getFullYear()) {
           return false
         }
@@ -14417,7 +14539,7 @@
           }
 
           node = node.querySelector('[autofocus], [data-autofocus]') || node;
-          node.focus();
+          node.focus({ preventScroll: true });
         });
       }
 
@@ -16919,7 +17041,7 @@
 
       function focus () {
         addFocusFn(() => {
-          contentRef.value !== null && contentRef.value.focus();
+          contentRef.value !== null && contentRef.value.focus({ preventScroll: true });
         });
       }
 
@@ -20217,12 +20339,16 @@
     let validateIndex = 0, unwatchRules;
 
     const hasRules = vue.computed(() =>
-      props.disable !== true
-      && props.rules !== void 0
+      props.rules !== void 0
       && props.rules !== null
       && props.rules.length > 0
     );
 
+    const hasActiveRules = vue.computed(() =>
+      props.disable !== true
+      && hasRules.value === true
+    );
+
     const hasError = vue.computed(() =>
       props.error === true || innerError.value === true
     );
@@ -20260,7 +20386,14 @@
       else if (isDirtyModel.value === false) {
         isDirtyModel.value = true;
 
-        if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        if (
+          hasActiveRules.value === true
+          && props.lazyRules !== 'ondemand'
+          // Don't re-trigger if it's already in progress;
+          // It might mean that focus switched to submit btn and
+          // QForm's submit() has been called already (ENTER key)
+          && innerLoading.value === false
+        ) {
           debouncedValidate();
         }
       }
@@ -20282,11 +20415,11 @@
      *   - Promise (pending async validation)
      */
     function validate (val = props.modelValue) {
-      if (hasRules.value !== true) {
+      if (hasActiveRules.value !== true) {
         return true
       }
 
-      validateIndex++;
+      const index = ++validateIndex;
 
       if (innerLoading.value !== true && props.lazyRules !== true) {
         isDirtyModel.value = true;
@@ -20303,9 +20436,7 @@
           innerErrorMessage.value = m;
         }
 
-        if (innerLoading.value !== false) {
-          innerLoading.value = false;
-        }
+        innerLoading.value = false;
       };
 
       const promises = [];
@@ -20335,42 +20466,33 @@
         return true
       }
 
-      if (innerLoading.value !== true) {
-        innerLoading.value = true;
-      }
-
-      const index = validateIndex;
+      innerLoading.value = true;
 
       return Promise.all(promises).then(
         res => {
-          if (index !== validateIndex) {
-            return true
-          }
-
           if (res === void 0 || Array.isArray(res) === false || res.length === 0) {
-            update(false);
+            index === validateIndex && update(false);
             return true
           }
 
           const msg = res.find(r => r === false || typeof r === 'string');
-          update(msg !== void 0, msg);
+          index === validateIndex && update(msg !== void 0, msg);
           return msg === void 0
         },
         e => {
           if (index === validateIndex) {
             console.error(e);
             update(true);
-            return false
           }
 
-          return true
+          return false
         }
       )
     }
 
     function validateIfNeeded (changedRules) {
       if (
-        hasRules.value === true
+        hasActiveRules.value === true
         && props.lazyRules !== 'ondemand'
         && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
       ) {
@@ -20656,7 +20778,7 @@
       if (target && (el === null || el.id !== state.targetUid.value)) {
         target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'));
         if (target && target !== el) {
-          target.focus();
+          target.focus({ preventScroll: true });
         }
       }
     }
@@ -20674,6 +20796,7 @@
     }
 
     function onControlFocusin (e) {
+      clearTimeout(focusoutTimer);
       if (state.editable.value === true && state.focused.value === false) {
         state.focused.value = true;
         emit('focus', e);
@@ -20686,13 +20809,9 @@
         if (
           document.hasFocus() === true && (
             state.hasPopupOpen === true
-            || (
-              state.controlRef !== void 0
-              && (
-                state.controlRef.value === null
-                || state.controlRef.value.contains(document.activeElement) !== false
-              )
-            )
+            || state.controlRef === void 0
+            || state.controlRef.value === null
+            || state.controlRef.value.contains(document.activeElement) !== false
           )
         ) {
           return
@@ -21526,7 +21645,7 @@
           ? shouldFocus
           : props.noErrorFocus !== true;
 
-        validateIndex++;
+        const index = ++validateIndex;
 
         const emitEvent = (res, ref) => {
           emit('validation-' + (res === true ? 'success' : 'error'), ref);
@@ -21540,7 +21659,7 @@
             promises.push(
               valid.then(
                 valid => ({ valid, comp }),
-                error => ({ valid: false, comp, error })
+                err => ({ valid: false, comp, err })
               )
             );
           }
@@ -21564,34 +21683,33 @@
           return Promise.resolve(true)
         }
 
-        const index = validateIndex;
-
-        return Promise.all(promises).then(
-          res => {
-            if (index === validateIndex) {
-              const errors = res.filter(r => r.valid !== true);
+        return Promise.all(promises).then(res => {
+          const errors = res.filter(r => r.valid !== true);
 
-              if (errors.length === 0) {
-                emitEvent(true);
-                return true
-              }
+          if (errors.length === 0) {
+            index === validateIndex && emitEvent(true);
+            return true
+          }
 
-              const { valid, comp } = errors[ 0 ];
+          const { valid, comp, err } = errors[ 0 ];
 
-              emitEvent(false, comp);
+          // if not outdated already
+          if (index === validateIndex) {
+            err !== void 0 && console.error(err);
 
-              if (
-                focus === true
-                && valid !== true
-                && typeof comp.focus === 'function'
-              ) {
-                comp.focus();
-              }
+            emitEvent(false, comp);
 
-              return false
+            if (
+              focus === true
+              && valid !== true
+              && typeof comp.focus === 'function'
+            ) {
+              comp.focus();
             }
           }
-        )
+
+          return false
+        })
       }
 
       function resetValidation () {
@@ -21605,8 +21723,11 @@
       function submit (evt) {
         evt !== void 0 && stopAndPrevent(evt);
 
+        const index = validateIndex + 1;
+
         validate().then(val => {
-          if (val === true) {
+          // if not outdated && validation succeeded
+          if (index === validateIndex && val === true) {
             if (props.onSubmit !== void 0) {
               emit('submit', evt);
             }
@@ -21637,7 +21758,7 @@
           const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
             || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1);
 
-          target !== null && target !== void 0 && target.focus();
+          target !== null && target !== void 0 && target.focus({ preventScroll: true });
         });
       }
 
@@ -23169,6 +23290,15 @@
         return attrs
       });
 
+      // some browsers lose the native input value
+      // so we need to reattach it dynamically
+      // (like type="password" <-> type="text"; see #12078)
+      vue.watch(() => props.type, () => {
+        if (inputRef.value) {
+          inputRef.value.value = props.modelValue;
+        }
+      });
+
       vue.watch(() => props.modelValue, v => {
         if (hasMask.value === true) {
           if (stopValueWatcher === true) {
@@ -23221,7 +23351,7 @@
             && inputRef.value !== el
             && (el === null || el.id !== state.targetUid.value)
           ) {
-            inputRef.value.focus();
+            inputRef.value.focus({ preventScroll: true });
           }
         });
       }
@@ -24388,6 +24518,7 @@
   });
 
   const svg$m = vue.h('svg', {
+    key: 'svg',
     class: 'q-radio__bg absolute non-selectable',
     viewBox: '0 0 24 24',
     'aria-hidden': 'true'
@@ -24416,6 +24547,9 @@
       label: String,
       leftLabel: Boolean,
 
+      checkedIcon: String,
+      uncheckedIcon: String,
+
       color: String,
       keepColor: Boolean,
       dense: Boolean,
@@ -24457,6 +24591,13 @@
           + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
       });
 
+      const icon = vue.computed(() =>
+        (isTrue.value === true
+          ? props.checkedIcon
+          : props.uncheckedIcon
+        ) || null
+      );
+
       const tabindex = vue.computed(() => (
         props.disable === true ? -1 : props.tabindex || 0
       ));
@@ -24502,7 +24643,19 @@
       Object.assign(proxy, { set: onClick });
 
       return () => {
-        const content = [ svg$m ];
+        const content = icon.value !== null
+          ? [
+              vue.h('div', {
+                key: 'icon',
+                class: 'q-radio__icon-container absolute flex flex-center no-wrap'
+              }, [
+                vue.h(QIcon, {
+                  class: 'q-radio__icon',
+                  name: icon.value
+                })
+              ])
+            ]
+          : [ svg$m ];
 
         props.disable !== true && injectFormInput(
           content,
@@ -24554,10 +24707,6 @@
       ...useCheckboxProps,
 
       icon: String,
-      checkedIcon: String,
-      uncheckedIcon: String,
-      indeterminateIcon: String,
-
       iconColor: String
     },
 
@@ -24565,29 +24714,25 @@
 
     setup (props) {
       function getInner (isTrue, isIndeterminate) {
-        const computedIcon = vue.computed(() =>
+        const icon = vue.computed(() =>
           (isTrue.value === true
             ? props.checkedIcon
             : (isIndeterminate.value === true ? props.indeterminateIcon : props.uncheckedIcon)
           ) || props.icon
         );
 
-        const computedIconColor = vue.computed(() => {
-          if (isTrue.value === true) {
-            return props.iconColor
-          }
-        });
+        const color = vue.computed(() => (isTrue.value === true ? props.iconColor : null));
 
         return () => [
           vue.h('div', { class: 'q-toggle__track' }),
 
           vue.h('div', {
             class: 'q-toggle__thumb absolute flex flex-center no-wrap'
-          }, computedIcon.value !== void 0
+          }, icon.value !== void 0
             ? [
                 vue.h(QIcon, {
-                  name: computedIcon.value,
-                  color: computedIconColor.value
+                  name: icon.value,
+                  color: color.value
                 })
               ]
             : void 0
@@ -27805,13 +27950,14 @@
       prevToIndex = -1;
       prevScrollStart = void 0;
 
+      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from);
+      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value);
+
       if (toIndex >= 0) {
         updateVirtualScrollSizes(virtualScrollSliceRange.value.from);
         vue.nextTick(() => { scrollTo(toIndex); });
       }
       else {
-        virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from);
-        virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value);
         onVirtualScrollEvt();
       }
     }
@@ -27836,7 +27982,9 @@
 
       localScrollViewSize = scrollViewSize;
 
-      const multiplier = 1 + props.virtualScrollSliceRatioBefore + props.virtualScrollSliceRatioAfter;
+      const virtualScrollSliceRatioBefore = parseFloat(props.virtualScrollSliceRatioBefore) || 0;
+      const virtualScrollSliceRatioAfter = parseFloat(props.virtualScrollSliceRatioAfter) || 0;
+      const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter;
       const view = scrollViewSize === void 0 || scrollViewSize <= 0
         ? 1
         : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value);
@@ -27849,9 +27997,9 @@
 
       virtualScrollSliceSizeComputed.value = {
         total: Math.ceil(baseSize * multiplier),
-        start: Math.ceil(baseSize * props.virtualScrollSliceRatioBefore),
-        center: Math.ceil(baseSize * (0.5 + props.virtualScrollSliceRatioBefore)),
-        end: Math.ceil(baseSize * (1 + props.virtualScrollSliceRatioBefore)),
+        start: Math.ceil(baseSize * virtualScrollSliceRatioBefore),
+        center: Math.ceil(baseSize * (0.5 + virtualScrollSliceRatioBefore)),
+        end: Math.ceil(baseSize * (1 + virtualScrollSliceRatioBefore)),
         view
       };
     }
@@ -28572,8 +28720,12 @@
         return innerOptionsValue.value.find(v => isDeepEqual(v, val)) !== void 0
       }
 
-      function selectInputText () {
-        if (props.useInput === true && targetRef.value !== null) {
+      function selectInputText (e) {
+        if (
+          props.useInput === true
+          && targetRef.value !== null
+          && (e === void 0 || (targetRef.value === e.target && e.target.value === selectedString.value))
+        ) {
           targetRef.value.select();
         }
       }
@@ -28943,7 +29095,7 @@
           type: 'search',
           ...comboboxAttrs.value,
           ...state.splitAttrs.attributes.value,
-          id: state.targetUid.value,
+          id: isTarget === true ? state.targetUid.value : void 0,
           maxlength: props.maxlength,
           autocomplete: props.autocomplete,
           'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
@@ -28954,7 +29106,7 @@
 
         if (fromDialog !== true && hasDialog === true) {
           if (Array.isArray(data.class) === true) {
-            data.class[ 0 ] += ' no-pointer-events';
+            data.class = [ ...data.class, 'no-pointer-events' ];
           }
           else {
             data.class += ' no-pointer-events';
@@ -29347,7 +29499,7 @@
         filter, updateMenuPosition, updateInputValue,
         isOptionSelected,
         getEmittingOptionValue,
-        isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args),
+        isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args) === true,
         getOptionValue: (...args) => getOptionValue.value.apply(null, args),
         getOptionLabel: (...args) => getOptionLabel.value.apply(null, args)
       });
@@ -29420,13 +29572,13 @@
             child.push(getInput(fromDialog, isTarget));
           }
           // there can be only one (when dialog is opened the control in dialog should be target)
-          else if (state.editable.value === true && isTarget === true) {
+          else if (state.editable.value === true) {
             child.push(
               vue.h('div', {
-                ref: targetRef,
+                ref: isTarget === true ? targetRef : void 0,
                 key: 'd_t',
                 class: 'q-select__focus-target',
-                id: state.targetUid.value,
+                id: isTarget === true ? state.targetUid.value : void 0,
                 ...comboboxAttrs.value,
                 onKeydown: onTargetKeydown,
                 onKeyup: onTargetKeyup,
@@ -29434,7 +29586,7 @@
               })
             );
 
-            if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
+            if (isTarget === true && typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
               child.push(
                 vue.h('input', {
                   class: 'q-select__autocomplete-input',
@@ -32143,7 +32295,9 @@
       error: Boolean
     },
 
-    setup (props, { slots }) {
+    setup (props, { attrs, slots }) {
+      const { proxy: { $q } } = vue.getCurrentInstance();
+
       const $stepper = vue.inject(stepperKey, () => {
         console.error('QStep needs to be child of QStepper');
       });
@@ -32154,18 +32308,21 @@
 
       const isActive = vue.computed(() => $stepper.value.modelValue === props.name);
 
-      vue.watch(isActive, active => {
-        if (
-          active === true
-          && $stepper.value.vertical === true
-        ) {
-          vue.nextTick(() => {
-            if (rootRef.value !== null) {
-              rootRef.value.scrollTop = 0;
+      const scrollEvent = vue.computed(() => (
+        ($q.platform.is.ios !== true && $q.platform.is.chrome === true)
+          || isActive.value !== true
+          || $stepper.value.vertical !== true
+          ? {}
+          : {
+            onScroll (e) {
+              const { target } = e;
+              if (target.scrollTop > 0) {
+                target.scrollTop = 0;
+              }
+              attrs.onScroll !== void 0 && attrs.onScroll(e);
             }
-          });
-        }
-      });
+          }
+      ));
 
       const contentKey = vue.computed(() => (
         typeof props.name === 'string' || typeof props.name === 'number'
@@ -32201,7 +32358,7 @@
 
       return () => vue.h(
         'div',
-        { ref: rootRef, class: 'q-stepper__step' },
+        { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
         $stepper.value.vertical === true
           ? [
               vue.h(StepHeader, {
@@ -39359,7 +39516,7 @@
   });
 
   var index_umd = {
-    version: '2.4.11',
+    version: '2.5.1',
     install (app, opts) {
       installQuasar(app, {
         components,