quasar 1.17.7 → 1.18.2

package/src/components/form/QForm.js

@@ -49,7 +49,7 @@ export default Vue.extend({
         ? shouldFocus
         : this.noErrorFocus !== true
 
-      this.validateIndex++
+      const index = ++this.validateIndex
 
       const components = this.getValidationComponents().filter(c => c.disable !== true)
 
@@ -65,7 +65,7 @@ export default Vue.extend({
           promises.push(
             valid.then(
               valid => ({ valid, comp }),
-              error => ({ valid: false, comp, error })
+              err => ({ valid: false, comp, err })
             )
           )
         }
@@ -89,19 +89,19 @@ export default Vue.extend({
         return Promise.resolve(true)
       }
 
-      const index = this.validateIndex
-
       return Promise.all(promises).then(
         res => {
-          if (index === this.validateIndex) {
-            const errors = res.filter(r => r.valid !== true)
+          const errors = res.filter(r => r.valid !== true)
 
-            if (errors.length === 0) {
-              emit(true)
-              return true
-            }
+          if (errors.length === 0) {
+            index === this.validateIndex && emit(true)
+            return true
+          }
 
-            const { valid, comp } = errors[0]
+          const { valid, comp, err } = errors[0]
+
+          if (index === this.validateIndex) {
+            err !== void 0 && console.error(err)
 
             emit(false, comp)
 
@@ -112,9 +112,9 @@ export default Vue.extend({
             ) {
               comp.focus()
             }
-
-            return false
           }
+
+          return false
         }
       )
     },
@@ -130,8 +130,11 @@ export default Vue.extend({
     submit (evt) {
       evt !== void 0 && stopAndPrevent(evt)
 
+      const index = this.validateIndex + 1
+
       this.validate().then(val => {
-        if (val === true) {
+        // if not outdated && validation succeeded
+        if (index === this.validateIndex && val === true) {
           if (this.qListeners.submit !== void 0) {
             this.$emit('submit', evt)
           }

package/src/components/input/QInput.js

@@ -71,6 +71,15 @@ export default Vue.extend({
       this.autogrow === true && this.$nextTick(this.__adjustHeight)
     },
 
+    // some browsers lose the native input value
+    // so we need to reattach it dynamically
+    // (like type="password" <-> type="text"; see #12078)
+    type () {
+      if (this.$refs.input) {
+        this.$refs.input.value = this.value
+      }
+    },
+
     autogrow (autogrow) {
       // textarea only
       if (autogrow === true) {

package/src/components/radio/QRadio.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
+import QIcon from '../icon/QIcon.js'
+
 import DarkMixin from '../../mixins/dark.js'
 import OptionSizeMixin from '../../mixins/option-size.js'
 import FormMixin from '../../mixins/form.js'
@@ -25,6 +27,9 @@ export default Vue.extend({
     label: String,
     leftLabel: Boolean,
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+
     color: String,
     keepColor: Boolean,
     dense: Boolean,
@@ -57,6 +62,12 @@ export default Vue.extend({
       return `q-radio__inner--${this.isTrue === true ? 'truthy' : 'falsy'}${color}`
     },
 
+    computedIcon () {
+      return this.isTrue === true
+        ? this.checkedIcon
+        : this.uncheckedIcon
+    },
+
     computedTabindex () {
       return this.disable === true ? -1 : this.tabindex || 0
     },
@@ -108,25 +119,38 @@ export default Vue.extend({
   },
 
   render (h) {
-    const content = [
-      h('svg', {
-        staticClass: 'q-radio__bg absolute non-selectable',
-        attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24', 'aria-hidden': 'true' }
-      }, [
-        h('path', {
-          attrs: {
-            d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
-          }
-        }),
-
-        h('path', {
-          staticClass: 'q-radio__check',
-          attrs: {
-            d: 'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
-          }
-        })
-      ])
-    ]
+    const content = this.computedIcon !== void 0
+      ? [
+        h('div', {
+          key: 'icon',
+          staticClass: 'q-radio__icon-container absolute flex flex-center no-wrap'
+        }, [
+          h(QIcon, {
+            staticClass: 'q-radio__icon',
+            props: { name: this.computedIcon }
+          })
+        ])
+      ]
+      : [
+        h('svg', {
+          key: 'svg',
+          staticClass: 'q-radio__bg absolute non-selectable',
+          attrs: { focusable: 'false' /* needed for IE11 */, viewBox: '0 0 24 24', 'aria-hidden': 'true' }
+        }, [
+          h('path', {
+            attrs: {
+              d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
+            }
+          }),
+
+          h('path', {
+            staticClass: 'q-radio__check',
+            attrs: {
+              d: 'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
+            }
+          })
+        ])
+      ]
 
     this.disable !== true && this.__injectFormInput(
       content,

package/src/components/radio/QRadio.json

@@ -35,6 +35,22 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when selected (instead of the default design)",
+      "examples": [ "visibility" ],
+      "category": "icons",
+      "addedIn": "v1.18"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when un-selected (instead of the default design)",
+      "examples": [ "visibility_off" ],
+      "category": "icons",
+      "addedIn": "v1.18"
+    },
+
     "color": {
       "extends": "color"
     },

package/src/components/radio/QRadio.sass

@@ -3,19 +3,27 @@ $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%
@@ -51,12 +59,16 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--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/src/components/radio/QRadio.styl

@@ -3,19 +3,27 @@ $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%
@@ -51,12 +59,16 @@ $radio-transition = .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--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/src/components/select/QSelect.js

@@ -270,7 +270,7 @@ export default Vue.extend({
       const { options, optionEls } = this.__optionScopeCache
 
       return this.options.slice(from, to).map((opt, i) => {
-        const disable = this.isOptionDisabled(opt) === true
+        const disable = this.isOptionDisabled(opt)
         const index = from + i
 
         const itemProps = {
@@ -368,7 +368,8 @@ export default Vue.extend({
     // returns method to tell if an option is disabled;
     // takes into account 'option-disable' prop
     isOptionDisabled () {
-      return this.__getPropValueFn('optionDisable', 'disable')
+      const fn = this.__getPropValueFn('optionDisable', 'disable')
+      return (...args) => fn.apply(null, args) === true
     },
 
     inputControlEvents () {

package/src/components/stepper/QStep.js

@@ -67,7 +67,7 @@ export default Vue.extend({
     onEvents () {
       return this.isActive !== true ||
         this.stepper.vertical !== true ||
-        (this.$q.platform.is.ios !== true && this.$q.platform.is.safari !== true && this.$q.platform.is.ie !== true)
+        (this.$q.platform.is.ios !== true && this.$q.platform.is.chrome === true)
         ? { ...this.qListeners }
         : { ...this.qListeners, scroll: this.__keepScroll }
     }

package/src/components/toggle/QToggle.js

@@ -10,9 +10,6 @@ export default Vue.extend({
 
   props: {
     icon: String,
-    checkedIcon: String,
-    uncheckedIcon: String,
-    indeterminateIcon: String,
 
     iconColor: String
   },

package/src/components/toggle/QToggle.json

@@ -11,25 +11,15 @@
     },
 
     "checked-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the toggle is on",
-      "examples": [ "visibility" ],
-      "category": "content"
+      "desc": "The icon to be used when the toggle is on"
     },
 
     "unchecked-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the toggle is off",
-      "examples": [ "visibility_off" ],
-      "category": "content"
+      "desc": "The icon to be used when the toggle is off"
     },
 
     "indeterminate-icon": {
-      "type": "String",
-      "desc": "The icon to be used when the model is indeterminate",
-      "examples": [ "help" ],
-      "category": "content",
-      "addedIn": "v1.8.0"
+      "desc": "The icon to be used when the model is indeterminate"
     },
 
     "icon-color": {

package/src/components/tree/QTree.js

@@ -604,14 +604,12 @@ export default Vue.extend({
     __onClick (node, meta, e, keyboard) {
       keyboard !== true && this.__blur(meta.key)
 
-      if (this.hasSelection) {
-        if (meta.selectable) {
-          if (this.noSelectionUnset === false) {
-            this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
-          }
-          else if (meta.key !== this.selected) {
-            this.$emit('update:selected', meta.key || null)
-          }
+      if (this.hasSelection && meta.selectable) {
+        if (this.noSelectionUnset === false) {
+          this.$emit('update:selected', meta.key !== this.selected ? meta.key : null)
+        }
+        else if (meta.key !== this.selected) {
+          this.$emit('update:selected', meta.key || null)
         }
       }
       else {

package/src/mixins/checkbox.js

@@ -22,6 +22,10 @@ export default {
     falseValue: { default: false },
     indeterminateValue: { default: null },
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+    indeterminateIcon: String,
+
     toggleOrder: {
       type: String,
       validator: v => v === 'tf' || v === 'ft'

package/src/mixins/checkbox.json

@@ -73,6 +73,24 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "examples": [ "visibility" ],
+      "category": "icons"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "examples": [ "visibility_off" ],
+      "category": "icons"
+    },
+
+    "indeterminate-icon": {
+      "type": "String",
+      "examples": [ "help" ],
+      "category": "icons"
+    },
+
     "color": {
       "extends": "color"
     },

package/src/mixins/validate.js

@@ -70,7 +70,14 @@ export default {
       else if (this.isDirty === false) {
         this.isDirty = true
 
-        if (this.hasRules === true && this.lazyRules !== 'ondemand') {
+        if (
+          this.hasActiveRules === true &&
+          this.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)
+          this.innerLoading === false
+        ) {
           this.debouncedValidate()
         }
       }
@@ -84,12 +91,15 @@ export default {
 
   computed: {
     hasRules () {
-      return this.disable !== true &&
-        this.rules !== void 0 &&
+      return this.rules !== void 0 &&
         this.rules !== null &&
         this.rules.length > 0
     },
 
+    hasActiveRules () {
+      return this.disable !== true && this.hasRules === true
+    },
+
     hasError () {
       return this.error === true || this.innerError === true
     },
@@ -127,11 +137,11 @@ export default {
      *   - Promise (pending async validation)
      */
     validate (val = this.value) {
-      if (this.hasRules !== true) {
+      if (this.hasActiveRules !== true) {
         return true
       }
 
-      this.validateIndex++
+      const index = ++this.validateIndex
 
       if (this.innerLoading !== true && this.lazyRules !== true) {
         this.isDirty = true
@@ -184,31 +194,24 @@ export default {
         this.innerLoading = true
       }
 
-      const index = this.validateIndex
-
       return Promise.all(promises).then(
         res => {
-          if (index !== this.validateIndex) {
-            return true
-          }
-
           if (res === void 0 || Array.isArray(res) === false || res.length === 0) {
-            update(false)
+            index === this.validateIndex && update(false)
             return true
           }
 
           const msg = res.find(r => r === false || typeof r === 'string')
-          update(msg !== void 0, msg)
+          index === this.validateIndex && update(msg !== void 0, msg)
           return msg === void 0
         },
         e => {
           if (index === this.validateIndex) {
             console.error(e)
             update(true)
-            return false
           }
 
-          return true
+          return false
         }
       )
     },
@@ -223,7 +226,7 @@ export default {
 
     __validateIfNeeded (changedRules) {
       if (
-        this.hasRules === true &&
+        this.hasActiveRules === true &&
         this.lazyRules !== 'ondemand' &&
         (this.isDirty === true || (this.lazyRules !== true && changedRules !== true))
       ) {

package/src/mixins/virtual-scroll.js

@@ -591,7 +591,9 @@ export default {
 
       this.__scrollViewSize = scrollViewSize
 
-      const multiplier = 1 + this.virtualScrollSliceRatioBefore + this.virtualScrollSliceRatioAfter
+      const virtualScrollSliceRatioBefore = parseFloat(this.virtualScrollSliceRatioBefore) || 0
+      const virtualScrollSliceRatioAfter = parseFloat(this.virtualScrollSliceRatioAfter) || 0
+      const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
       const view = scrollViewSize === void 0 || scrollViewSize <= 0
         ? 1
         : Math.ceil(scrollViewSize / this.virtualScrollItemSizeComputed)
@@ -603,9 +605,9 @@ export default {
 
       this.virtualScrollSliceSizeComputed = {
         total: Math.ceil(baseSize * multiplier),
-        start: Math.ceil(baseSize * this.virtualScrollSliceRatioBefore),
-        center: Math.ceil(baseSize * (0.5 + this.virtualScrollSliceRatioBefore)),
-        end: Math.ceil(baseSize * (1 + this.virtualScrollSliceRatioBefore)),
+        start: Math.ceil(baseSize * virtualScrollSliceRatioBefore),
+        center: Math.ceil(baseSize * (0.5 + virtualScrollSliceRatioBefore)),
+        end: Math.ceil(baseSize * (1 + virtualScrollSliceRatioBefore)),
         view
       }
     },

package/src/plugins/Meta.js

@@ -180,7 +180,7 @@ function updateClient () {
 function getAttr (seed) {
   return att => {
     const val = seed[att]
-    return att + (val !== void 0 ? `="${val}"` : '')
+    return att + (val !== true && val !== void 0 ? `="${val}"` : '')
   }
 }
 

package/src/plugins/Screen.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { isSSR, fromSSR } from './Platform.js'
+import { isSSR, fromSSR, client } from './Platform.js'
 import { listenOpts, noop } from '../utils/event.js'
 import debounce from '../utils/debounce.js'
 
@@ -47,12 +47,22 @@ export default {
       return
     }
 
+    const { visualViewport } = window
+    const getSize = visualViewport === void 0 || client.is.mobile === true
+      ? () => [
+        Math.max(window.innerWidth, document.scrollingElement.clientWidth),
+        Math.max(window.innerHeight, document.scrollingElement.clientHeight)
+      ]
+      : () => [
+        visualViewport.width * visualViewport.scale + window.innerWidth - document.scrollingElement.clientWidth,
+        visualViewport.height * visualViewport.scale + window.innerHeight - document.scrollingElement.clientHeight
+      ]
+
+    const target = visualViewport || window
     const classes = cfg.screen !== void 0 && cfg.screen.bodyClasses === true
 
     const update = force => {
-      const
-        w = window.innerWidth,
-        h = window.innerHeight
+      const [ w, h ] = getSize()
 
       if (h !== this.height) {
         this.height = h
@@ -110,11 +120,7 @@ export default {
     }
 
     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')) {