quasar 2.4.13 → 2.5.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.13
+ * Quasar Framework v2.5.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1283,18 +1283,24 @@ input[type='search']::-webkit-search-decoration
 $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-checkbox
   vertical-align: middle
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
+    user-select: none
+  &__bg
     border: 2px solid currentColor
     border-radius: 2px
     transition: background $checkbox-transition
     -webkit-print-color-adjust: exact
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
   &__svg
     color: #fff
   &__truthy
@@ -1336,11 +1342,14 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
       &--truthy, &--indet
         color: var(--q-primary)
   &--dense
+    .q-checkbox__icon
+      font-size: .6em
     .q-checkbox__inner
       width: .5em
       min-width: .5em
       height: .5em
-    .q-checkbox__bg
+    .q-checkbox__bg,
+    .q-checkbox__icon-container
       left: 5%
       top: 5%
       width: 90%
@@ -3107,17 +3116,23 @@ body.platform-ios
 $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-radio
   vertical-align: middle
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
+    user-select: none
+  &__bg
     -webkit-print-color-adjust: exact
     path
       fill: currentColor
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
   &__check
     transform-origin: 50% 50%
     transform: scale3d(0, 0, 1)
@@ -3144,11 +3159,14 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
       &--truthy
         color: var(--q-primary)
   &--dense
+    .q-checkbox__icon
+      font-size: .6em
     .q-radio__inner
       width: .5em
       min-width: .5em
       height: .5em
-    .q-radio__bg
+    .q-radio__bg,
+    .q-radio__icon-container
       left: 0
       top: 0
       width: 100%

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.13
+ * Quasar Framework v2.5.0
  * (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.13' };
+      const $q = { version: '2.5.0' };
 
       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();
         }
@@ -6414,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();
     });
 
@@ -7171,6 +7180,10 @@
     falseValue: { default: false },
     indeterminateValue: { default: null },
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+    indeterminateIcon: String,
+
     toggleOrder: {
       type: String,
       validator: v => v === 'tf' || v === 'ft'
@@ -7383,6 +7396,7 @@
   }
 
   const bgNode = vue.h('div', {
+    key: 'svg',
     class: 'q-checkbox__bg absolute'
   }, [
     vue.h('svg', {
@@ -7409,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)
     }
   });
 
@@ -11748,16 +11790,16 @@
       month += sign * mod.months;
     }
 
-    if (mod.days !== void 0) {
-      day += sign * mod.days;
-    }
-
     date.setDate(1);
     date.setMonth(2);
 
     date.setFullYear(year);
     date.setMonth(month);
-    date.setDate(day);
+    date.setDate(Math.min(day, daysInMonth(date)));
+
+    if (mod.days !== void 0) {
+      date.setDate(date.getDate() + sign * mod.days);
+    }
 
     return date
   }
@@ -20218,12 +20260,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 +20307,7 @@
       else if (isDirtyModel.value === false) {
         isDirtyModel.value = true;
 
-        if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+        if (hasActiveRules.value === true && props.lazyRules !== 'ondemand') {
           debouncedValidate();
         }
       }
@@ -20283,7 +20329,7 @@
      *   - Promise (pending async validation)
      */
     function validate (val = props.modelValue) {
-      if (hasRules.value !== true) {
+      if (hasActiveRules.value !== true) {
         return true
       }
 
@@ -20371,7 +20417,7 @@
 
     function validateIfNeeded (changedRules) {
       if (
-        hasRules.value === true
+        hasActiveRules.value === true
         && props.lazyRules !== 'ondemand'
         && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
       ) {
@@ -23167,6 +23213,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 +24441,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 +24470,9 @@
       label: String,
       leftLabel: Boolean,
 
+      checkedIcon: String,
+      uncheckedIcon: String,
+
       color: String,
       keepColor: Boolean,
       dense: Boolean,
@@ -24455,6 +24514,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 +24566,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 +24630,6 @@
       ...useCheckboxProps,
 
       icon: String,
-      checkedIcon: String,
-      uncheckedIcon: String,
-      indeterminateIcon: String,
-
       iconColor: String
     },
 
@@ -24563,29 +24637,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 +29422,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)
       });
@@ -39369,7 +39439,7 @@
   });
 
   var index_umd = {
-    version: '2.4.13',
+    version: '2.5.0',
     install (app, opts) {
       installQuasar(app, {
         components,