quasar 2.4.13 → 2.5.3

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.13
+ * Quasar Framework v2.5.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -633,12 +633,23 @@
         return
       }
 
+      const { visualViewport } = window;
+      const target = visualViewport || window;
+      const scrollingElement = document.scrollingElement || document.documentElement;
+      const getSize = visualViewport === void 0 || client.is.mobile === true
+        ? () => [
+            Math.max(window.innerWidth, scrollingElement.clientWidth),
+            Math.max(window.innerHeight, scrollingElement.clientHeight)
+          ]
+        : () => [
+            visualViewport.width * visualViewport.scale + window.innerWidth - scrollingElement.clientWidth,
+            visualViewport.height * visualViewport.scale + window.innerHeight - 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 +707,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 +1463,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.13' };
+      const $q = { version: '2.5.3' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2335,19 +2342,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 +2411,7 @@
           hSlot(slots.default)
         );
 
-        if (vnodes === void 0) { return }
+        if (vnodes.length === 0) { return }
 
         let els = 1;
 
@@ -4059,7 +4072,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();
         }
@@ -6414,7 +6427,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();
     });
 
@@ -7171,6 +7184,10 @@
     falseValue: { default: false },
     indeterminateValue: { default: null },
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+    indeterminateIcon: String,
+
     toggleOrder: {
       type: String,
       validator: v => v === 'tf' || v === 'ft'
@@ -7383,6 +7400,7 @@
   }
 
   const bgNode = vue.h('div', {
+    key: 'svg',
     class: 'q-checkbox__bg absolute'
   }, [
     vue.h('svg', {
@@ -7409,8 +7427,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)
     }
   });
 
@@ -11737,19 +11783,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);
@@ -11757,26 +11802,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) {
@@ -11793,22 +11826,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
@@ -12042,16 +12139,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
@@ -12064,16 +12168,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
@@ -12109,21 +12220,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)
     }
   }
@@ -12169,26 +12287,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
         }
@@ -20218,12 +20343,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
     );
@@ -20261,7 +20390,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();
         }
       }
@@ -20283,11 +20419,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;
@@ -20304,9 +20440,7 @@
           innerErrorMessage.value = m;
         }
 
-        if (innerLoading.value !== false) {
-          innerLoading.value = false;
-        }
+        innerLoading.value = false;
       };
 
       const promises = [];
@@ -20336,42 +20470,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))
       ) {
@@ -21524,7 +21649,7 @@
           ? shouldFocus
           : props.noErrorFocus !== true;
 
-        validateIndex++;
+        const index = ++validateIndex;
 
         const emitEvent = (res, ref) => {
           emit('validation-' + (res === true ? 'success' : 'error'), ref);
@@ -21538,7 +21663,7 @@
             promises.push(
               valid.then(
                 valid => ({ valid, comp }),
-                error => ({ valid: false, comp, error })
+                err => ({ valid: false, comp, err })
               )
             );
           }
@@ -21562,34 +21687,33 @@
           return Promise.resolve(true)
         }
 
-        const index = validateIndex;
+        return Promise.all(promises).then(res => {
+          const errors = res.filter(r => r.valid !== true);
 
-        return Promise.all(promises).then(
-          res => {
-            if (index === validateIndex) {
-              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 () {
@@ -21603,8 +21727,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);
             }
@@ -23167,6 +23294,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) {
@@ -24386,6 +24522,7 @@
   });
 
   const svg$m = vue.h('svg', {
+    key: 'svg',
     class: 'q-radio__bg absolute non-selectable',
     viewBox: '0 0 24 24',
     'aria-hidden': 'true'
@@ -24414,6 +24551,9 @@
       label: String,
       leftLabel: Boolean,
 
+      checkedIcon: String,
+      uncheckedIcon: String,
+
       color: String,
       keepColor: Boolean,
       dense: Boolean,
@@ -24455,6 +24595,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
       ));
@@ -24500,7 +24647,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,
@@ -24552,10 +24711,6 @@
       ...useCheckboxProps,
 
       icon: String,
-      checkedIcon: String,
-      uncheckedIcon: String,
-      indeterminateIcon: String,
-
       iconColor: String
     },
 
@@ -24563,29 +24718,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
@@ -29352,7 +29503,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)
       });
@@ -35906,34 +36057,34 @@
 
             m.lazy === 'loading'
               ? vue.h(QSpinner, {
-                  class: 'q-tree__spinner',
-                  color: computedControlColor.value
-                })
+                class: 'q-tree__spinner',
+                color: computedControlColor.value
+              })
               : (
                   isParent === true
                     ? vue.h(QIcon, {
-                        class: 'q-tree__arrow'
+                      class: 'q-tree__arrow'
                       + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
-                        name: computedIcon.value,
-                        onClick (e) { onExpandClick(node, m, e); }
-                      })
+                      name: computedIcon.value,
+                      onClick (e) { onExpandClick(node, m, e); }
+                    })
                     : null
                 ),
 
             m.hasTicking === true && m.noTick !== true
               ? vue.h(QCheckbox, {
-                  class: 'q-tree__tickbox',
-                  modelValue: m.indeterminate === true ? null : m.ticked,
-                  color: computedControlColor.value,
-                  dark: isDark.value,
-                  dense: true,
-                  keepColor: true,
-                  disable: m.tickable !== true,
-                  onKeydown: stopAndPrevent,
-                  'onUpdate:modelValue': v => {
-                    onTickedClick(m, v);
-                  }
-                })
+                class: 'q-tree__tickbox',
+                modelValue: m.indeterminate === true ? null : m.ticked,
+                color: computedControlColor.value,
+                dark: isDark.value,
+                dense: true,
+                keepColor: true,
+                disable: m.tickable !== true,
+                onKeydown: stopAndPrevent,
+                'onUpdate:modelValue': v => {
+                  onTickedClick(m, v);
+                }
+              })
               : null,
 
             vue.h('div', {
@@ -35951,22 +36102,22 @@
 
           isParent === true
             ? vue.h(QSlideTransition, {
-                duration: props.duration,
-                onShow,
-                onHide
-              }, () => vue.withDirectives(
+              duration: props.duration,
+              onShow,
+              onHide
+            }, () => vue.withDirectives(
+              vue.h('div', {
+                class: 'q-tree__node-collapsible' + textColorClass.value,
+                key: `${ key }__q`
+              }, [
+                body,
                 vue.h('div', {
-                  class: 'q-tree__node-collapsible' + textColorClass.value,
-                  key: `${ key }__q`
-                }, [
-                  body,
-                  vue.h('div', {
-                    class: 'q-tree__children'
+                  class: 'q-tree__children'
                     + (m.disabled === true ? ' q-tree__node--disabled' : '')
-                  }, children)
-                ]),
-                [ [ vue.vShow, m.expanded ] ]
-              ))
+                }, children)
+              ]),
+              [ [ vue.vShow, m.expanded ] ]
+            ))
             : body
         ])
       }
@@ -35979,14 +36130,12 @@
       function onClick (node, meta, e, keyboard) {
         keyboard !== true && blur(meta.key);
 
-        if (hasSelection.value) {
-          if (meta.selectable) {
-            if (props.noSelectionUnset === false) {
-              emit('update:selected', meta.key !== props.selected ? meta.key : null);
-            }
-            else if (meta.key !== props.selected) {
-              emit('update:selected', meta.key || null);
-            }
+        if (hasSelection.value && meta.selectable) {
+          if (props.noSelectionUnset === false) {
+            emit('update:selected', meta.key !== props.selected ? meta.key : null);
+          }
+          else if (meta.key !== props.selected) {
+            emit('update:selected', meta.key || null);
           }
         }
         else {
@@ -39369,7 +39518,7 @@
   });
 
   var index_umd = {
-    version: '2.4.13',
+    version: '2.5.3',
     install (app, opts) {
       installQuasar(app, {
         components,