quasar 1.16.2 → 1.17.2

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -8,6 +8,8 @@ import { getScrollTarget, getScrollHeight, getScrollPosition, setScrollPosition
 import { listenOpts } from '../../utils/event.js'
 import { slot, uniqueSlot } from '../../utils/slot.js'
 
+const { passive } = listenOpts
+
 export default Vue.extend({
   name: 'QInfiniteScroll',
 
@@ -37,18 +39,20 @@ export default Vue.extend({
   data () {
     return {
       index: this.initialIndex || 0,
-      fetching: false,
-      working: true
+      isFetching: false,
+      isWorking: true
     }
   },
 
   watch: {
     disable (val) {
-      if (val === true) {
-        this.stop()
-      }
-      else {
-        this.resume()
+      if (val === true) { this.stop() }
+      else { this.resume() }
+    },
+
+    reverse () {
+      if (this.isFetching === false && this.isWorking === true) {
+        this.immediatePoll()
       }
     },
 
@@ -63,7 +67,7 @@ export default Vue.extend({
 
   methods: {
     poll () {
-      if (this.disable === true || this.fetching === true || this.working === false) {
+      if (this.disable === true || this.isFetching === true || this.isWorking === false) {
         return
       }
 
@@ -73,30 +77,28 @@ export default Vue.extend({
         containerHeight = height(this.__scrollTarget)
 
       if (this.reverse === false) {
-        if (scrollPosition + containerHeight + this.offset >= scrollHeight) {
+        if (Math.round(scrollPosition + containerHeight + this.offset) >= Math.round(scrollHeight)) {
           this.trigger()
         }
       }
-      else {
-        if (scrollPosition < this.offset) {
-          this.trigger()
-        }
+      else if (Math.round(scrollPosition) < this.offset) {
+        this.trigger()
       }
     },
 
     trigger () {
-      if (this.disable === true || this.fetching === true || this.working === false) {
+      if (this.disable === true || this.isFetching === true || this.isWorking === false) {
         return
       }
 
       this.index++
-      this.fetching = true
+      this.isFetching = true
 
       const heightBefore = getScrollHeight(this.__scrollTarget)
 
       this.$emit('load', this.index, stop => {
-        if (this.working === true) {
-          this.fetching = false
+        if (this.isWorking === true) {
+          this.isFetching = false
           this.$nextTick(() => {
             if (this.reverse === true) {
               const
@@ -123,30 +125,31 @@ export default Vue.extend({
     },
 
     resume () {
-      if (this.working === false) {
-        this.working = true
-        this.__scrollTarget.addEventListener('scroll', this.poll, listenOpts.passive)
+      if (this.isWorking === false) {
+        this.isWorking = true
+        this.__scrollTarget.addEventListener('scroll', this.poll, passive)
       }
       this.immediatePoll()
     },
 
     stop () {
-      if (this.working === true) {
-        this.working = false
-        this.fetching = false
-        this.__scrollTarget.removeEventListener('scroll', this.poll, listenOpts.passive)
+      if (this.isWorking === true) {
+        this.isWorking = false
+        this.isFetching = false
+        this.__scrollTarget.removeEventListener('scroll', this.poll, passive)
+        typeof this.poll.cancel === 'function' && this.poll.cancel()
       }
     },
 
     updateScrollTarget () {
-      if (this.__scrollTarget && this.working === true) {
-        this.__scrollTarget.removeEventListener('scroll', this.poll, listenOpts.passive)
+      if (this.__scrollTarget && this.isWorking === true) {
+        this.__scrollTarget.removeEventListener('scroll', this.poll, passive)
       }
 
       this.__scrollTarget = getScrollTarget(this.$el, this.scrollTarget)
 
-      if (this.working === true) {
-        this.__scrollTarget.addEventListener('scroll', this.poll, listenOpts.passive)
+      if (this.isWorking === true) {
+        this.__scrollTarget.addEventListener('scroll', this.poll, passive)
       }
     },
 
@@ -163,12 +166,12 @@ export default Vue.extend({
         ? this.immediatePoll
         : debounce(this.immediatePoll, isNaN(val) === true ? 100 : val)
 
-      if (this.__scrollTarget && this.working === true) {
+      if (this.__scrollTarget && this.isWorking === true) {
         if (oldPoll !== void 0) {
-          this.__scrollTarget.removeEventListener('scroll', oldPoll, listenOpts.passive)
+          this.__scrollTarget.removeEventListener('scroll', oldPoll, passive)
         }
 
-        this.__scrollTarget.addEventListener('scroll', this.poll, listenOpts.passive)
+        this.__scrollTarget.addEventListener('scroll', this.poll, passive)
       }
     }
   },
@@ -190,20 +193,30 @@ export default Vue.extend({
     this.immediatePoll()
   },
 
-  beforeDestroy () {
-    if (this.working === true) {
-      this.__scrollTarget.removeEventListener('scroll', this.poll, listenOpts.passive)
+  activated () {
+    if (this.__scrollTarget && this.__scrollPosition !== void 0) {
+      setScrollPosition(this.__scrollTarget, this.__scrollPosition)
     }
   },
 
+  deactivated () {
+    this.__scrollPosition = this.__scrollTarget
+      ? getScrollPosition(this.__scrollTarget)
+      : void 0
+  },
+
+  beforeDestroy () {
+    this.stop()
+  },
+
   render (h) {
     const child = uniqueSlot(this, 'default', [])
 
-    if (this.disable !== true && this.working === true) {
+    if (this.disable !== true && this.isWorking === true) {
       child[this.reverse === false ? 'push' : 'unshift'](
         h('div', {
           staticClass: 'q-infinite-scroll__loading',
-          class: this.fetching === true ? '' : 'invisible'
+          class: this.isFetching === true ? '' : 'invisible'
         }, slot(this, 'loading'))
       )
     }

package/src/components/inner-loading/QInnerLoading.js

@@ -18,37 +18,69 @@ export default Vue.extend({
     size: {
       type: [String, Number],
       default: 42
+    },
+
+    label: String,
+    labelClass: String,
+    labelStyle: [ String, Array, Object ]
+  },
+
+  computed: {
+    classes () {
+      return 'q-inner-loading absolute-full column flex-center' +
+        (this.isDark === true ? ' q-inner-loading--dark' : '')
+    },
+
+    labelClasses () {
+      return 'q-inner-loading__label' +
+        (this.labelClass !== void 0 ? ` ${this.labelClass}` : '')
     }
   },
 
-  render (h) {
-    const child = this.showing === true
-      ? [
-        h('div',
-          {
-            staticClass: 'q-inner-loading absolute-full column flex-center',
-            class: this.isDark === true ? 'q-inner-loading--dark' : null,
-            on: { ...this.qListeners }
-          },
-          this.$scopedSlots.default !== void 0
-            ? this.$scopedSlots.default()
-            : [
-              h(QSpinner, {
-                props: {
-                  size: this.size,
-                  color: this.color
-                }
-              })
-            ]
-        )
+  methods: {
+    __getInner (h) {
+      const child = [
+        h(QSpinner, {
+          size: this.size,
+          color: this.color
+        })
       ]
-      : void 0
 
+      if (this.label !== void 0) {
+        child.push(
+          h('div', {
+            class: this.labelClasses,
+            style: this.labelStyle
+          }, [ this.label ])
+        )
+      }
+
+      return child
+    },
+
+    __getContent (h) {
+      return this.showing === true
+        ? [
+          h('div',
+            {
+              staticClass: this.classes,
+              on: { ...this.qListeners }
+            },
+            this.$scopedSlots.default !== void 0
+              ? this.$scopedSlots.default()
+              : this.__getInner(h)
+          )
+        ]
+        : void 0
+    }
+  },
+
+  render (h) {
     return h('transition', {
       props: {
         name: this.transition,
         appear: true
       }
-    }, child)
+    }, this.__getContent(h))
   }
 })

package/src/components/inner-loading/QInnerLoading.json

@@ -26,6 +26,35 @@
       "default": "42px"
     },
 
+    "label": {
+      "type": "String",
+      "desc": "Add a label; Gets overriden when using the default slot",
+      "examples": [ "Please wait..." ],
+      "category": "label",
+      "addedIn": "v1.17"
+    },
+
+    "label-class": {
+      "type": "String",
+      "desc": "Add CSS class(es) to the label; Works along the 'label' prop only",
+      "examples": [
+        "text-red q-mt-xl"
+      ],
+      "category": "label",
+      "addedIn": "v1.17"
+    },
+
+    "label-style": {
+      "type": [ "Array", "String", "Object" ],
+      "desc": "Apply custom style to the label; Works along the 'label' prop only",
+      "examples": [
+        "font-size: 28px",
+        ":label-style=\"{ color: '#ff0000' }\""
+      ],
+      "category": "label",
+      "addedIn": "v1.17"
+    },
+
     "transition-show": {
       "extends": "transition",
       "default": "fade"

package/src/components/inner-loading/QInnerLoading.sass

@@ -2,3 +2,6 @@
   background: $light-dimmed-background
   &--dark
     background: $dimmed-background
+
+  &__label
+    margin-top: 8px

package/src/components/inner-loading/QInnerLoading.styl

@@ -2,3 +2,6 @@
   background: $light-dimmed-background
   &--dark
     background: $dimmed-background
+
+  &__label
+    margin-top: 8px

package/src/components/item/QItem.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 
 import DarkMixin from '../../mixins/dark.js'
 import TagMixin from '../../mixins/tag.js'
-import { RouterLinkMixin } from '../../mixins/router-link.js'
+import RouterLinkMixin from '../../mixins/router-link.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import { uniqueSlot } from '../../utils/slot.js'
@@ -30,8 +30,7 @@ export default Vue.extend({
   computed: {
     isActionable () {
       return this.clickable === true ||
-        this.hasRouterLink === true ||
-        this.tag === 'a' ||
+        this.hasLink === true ||
         this.tag === 'label'
     },
 
@@ -120,29 +119,24 @@ export default Vue.extend({
       staticClass: 'q-item q-item-type row no-wrap',
       class: this.classes,
       style: this.style,
+      attrs: {},
       [ this.hasRouterLink === true ? 'nativeOn' : 'on' ]: this.onEvents
     }
 
     if (this.isClickable === true) {
-      data.attrs = {
-        tabindex: this.tabindex || '0'
-      }
+      data.attrs.tabindex = this.tabindex || '0'
     }
     else if (this.isActionable === true) {
-      data.attrs = {
-        'aria-disabled': 'true'
-      }
+      data.attrs['aria-disabled'] = 'true'
     }
 
-    if (this.hasRouterLink === true) {
-      data.tag = 'a'
-      data.props = this.routerLinkProps
-
-      return h('router-link', data, this.__getContent(h))
+    if (this.hasLink === true) {
+      data.props = this.linkProps.props
+      Object.assign(data.attrs, this.linkProps.attrs)
     }
 
     return h(
-      this.tag,
+      this.linkTag,
       data,
       this.__getContent(h)
     )

package/src/components/layout/QLayout.js

@@ -109,13 +109,30 @@ export default Vue.extend({
     classes () {
       return 'q-layout q-layout--' +
         (this.container === true ? 'containerized' : 'standard')
+    },
+
+    scrollbarEvtAction () {
+      return this.container !== true && this.scrollbarWidth > 0
+        ? 'add' : 'remove'
     }
   },
 
+  watch: {
+    scrollbarEvtAction: '__updateScrollEvent'
+  },
+
   created () {
     this.instances = {}
   },
 
+  mounted () {
+    this.scrollbarEvtAction === 'add' && this.__updateScrollEvent('add')
+  },
+
+  beforeDestroy () {
+    this.scrollbarEvtAction === 'add' && this.__updateScrollEvent('remove')
+  },
+
   render (h) {
     const layout = h('div', {
       class: this.classes,
@@ -210,6 +227,38 @@ export default Vue.extend({
           this.scrollbarWidth = width
         }
       }
+    },
+
+    __updateScrollEvent (action) {
+      if (this.timerScrollbar !== void 0 && action === 'remove') {
+        clearTimeout(this.timerScrollbar)
+        this.__restoreScrollbar()
+      }
+
+      window[`${action}EventListener`]('resize', this.__hideScrollbar)
+    },
+
+    __hideScrollbar () {
+      if (this.timerScrollbar === void 0) {
+        const el = document.body
+
+        // if it has no scrollbar then there's nothing to do
+        if (el.scrollHeight > this.$q.screen.height) {
+          return
+        }
+
+        el.classList.add('hide-scrollbar')
+      }
+      else {
+        clearTimeout(this.timerScrollbar)
+      }
+
+      this.timerScrollbar = setTimeout(this.__restoreScrollbar, 200)
+    },
+
+    __restoreScrollbar () {
+      this.timerScrollbar = void 0
+      document.body.classList.remove('hide-scrollbar')
     }
   }
 })

package/src/components/linear-progress/QLinearProgress.js

@@ -53,6 +53,10 @@ export default Vue.extend({
       return this.indeterminate === true || this.query === true
     },
 
+    widthReverse () {
+      return this.reverse !== this.query
+    },
+
     classes () {
       return 'q-linear-progress' +
         (this.color !== void 0 ? ` text-${this.color}` : '') +
@@ -61,7 +65,7 @@ export default Vue.extend({
     },
 
     trackStyle () {
-      return width(this.buffer !== void 0 ? this.buffer : 1, this.reverse, this.$q)
+      return width(this.buffer !== void 0 ? this.buffer : 1, this.widthReverse, this.$q)
     },
 
     trackClass () {
@@ -71,7 +75,7 @@ export default Vue.extend({
     },
 
     modelStyle () {
-      return width(this.motion === true ? 1 : this.value, this.reverse, this.$q)
+      return width(this.motion === true ? 1 : this.value, this.widthReverse, this.$q)
     },
 
     modelClasses () {

package/src/components/menu/QMenu.js

@@ -6,6 +6,7 @@ import DarkMixin from '../../mixins/dark.js'
 import PortalMixin, { closePortalMenus } from '../../mixins/portal.js'
 import TransitionMixin from '../../mixins/transition.js'
 import AttrsMixin from '../../mixins/attrs.js'
+import { client } from '../../plugins/Platform.js'
 
 import ClickOutside from './ClickOutside.js'
 import { getScrollTarget } from '../../utils/scroll.js'
@@ -144,7 +145,7 @@ export default Vue.extend({
 
     __show (evt) {
       // IE can have null document.activeElement
-      this.__refocusTarget = this.noRefocus === false && document.activeElement !== null
+      this.__refocusTarget = client.is.mobile !== true && this.noRefocus === false && document.activeElement !== null
         ? document.activeElement
         : void 0
 
@@ -218,6 +219,7 @@ export default Vue.extend({
         )
       ) {
         this.__refocusTarget.focus()
+        this.__refocusTarget = void 0
       }
 
       this.$el.dispatchEvent(create('popup-hide', { bubbles: true }))
@@ -337,6 +339,8 @@ export default Vue.extend({
   },
 
   beforeDestroy () {
+    this.__refocusTarget = void 0
+
     // When the menu is destroyed while open we can only emit the event on anchorEl
     if (this.showing === true && this.anchorEl !== void 0) {
       this.anchorEl.dispatchEvent(

package/src/components/option-group/QOptionGroup.js

@@ -106,27 +106,37 @@ export default Vue.extend({
       class: this.classes,
       attrs: this.attrs,
       on: { ...this.qListeners }
-    }, this.options.map(opt => h('div', [
-      h(this.component, {
-        props: {
-          value: this.value,
-          val: opt.value,
-          name: opt.name === void 0 ? this.name : opt.name,
-          disable: this.disable || opt.disable,
-          label: opt.label,
-          leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,
-          color: opt.color === void 0 ? this.color : opt.color,
-          checkedIcon: opt.checkedIcon,
-          uncheckedIcon: opt.uncheckedIcon,
-          dark: opt.dark || this.isDark,
-          size: opt.size === void 0 ? this.size : opt.size,
-          dense: this.dense,
-          keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
-        },
-        on: cache(this, 'inp', {
-          input: this.__update
-        })
-      })
-    ])))
+    }, this.options.map((opt, i) => {
+      const child = this.$scopedSlots[ 'label-' + i ] !== void 0
+        ? this.$scopedSlots[ 'label-' + i ](opt)
+        : (
+          this.$scopedSlots.label !== void 0
+            ? this.$scopedSlots.label(opt)
+            : void 0
+        )
+
+      return h('div', [
+        h(this.component, {
+          props: {
+            value: this.value,
+            val: opt.value,
+            name: opt.name === void 0 ? this.name : opt.name,
+            disable: this.disable || opt.disable,
+            label: child === void 0 ? opt.label : void 0,
+            leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,
+            color: opt.color === void 0 ? this.color : opt.color,
+            checkedIcon: opt.checkedIcon,
+            uncheckedIcon: opt.uncheckedIcon,
+            dark: opt.dark || this.isDark,
+            size: opt.size === void 0 ? this.size : opt.size,
+            dense: this.dense,
+            keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor
+          },
+          on: cache(this, 'inp', {
+            input: this.__update
+          })
+        }, child)
+      ])
+    }))
   }
 })

package/src/components/option-group/QOptionGroup.json

@@ -19,7 +19,30 @@
 
     "options": {
       "type": "Array",
-      "desc": "Array of objects with value and label props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
+      "definition": {
+        "label": {
+          "type": "String",
+          "desc": "Label to display along the component",
+          "required": true,
+          "examples": [ "Option 1", "Option 2", "Option 3" ]
+        },
+        "value": {
+          "type": "Any",
+          "desc": "Value of the option that will be used by the component model",
+          "required": true,
+          "examples": [ "op1", "op2", "op3" ]
+        },
+        "disable": {
+          "type": "Boolean",
+          "desc": "If true, the option will be disabled"
+        },
+        "...props": {
+          "type": "Any",
+          "desc": "Any other props from QToggle, QCheckbox, or QRadio",
+          "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
+        }
+      },
       "examples": [
         ":options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\""
       ],
@@ -82,6 +105,32 @@
     }
   },
 
+  "scopedSlots": {
+    "label": {
+      "desc": "Generic slot for all labels",
+      "scope": {
+        "opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
+    "label-[name]": {
+      "desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used",
+      "scope": {
+        "opt": {
+          "type": "Object",
+          "desc": "The corresponding option entry from the 'options' prop",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "addedIn": "v1.17"
+    }
+  },
+
   "events": {
     "input": {
       "extends": "input"

package/src/components/parallax/QParallax.js

@@ -103,6 +103,9 @@ export default Vue.extend({
     __stop () {
       if (this.working === true) {
         this.working = false
+        this.__setPos.cancel()
+        this.__update.cancel()
+        this.__resizeHandler.cancel()
         this.__scrollTarget.removeEventListener('scroll', this.__updatePos, passive)
         window.removeEventListener('resize', this.__resizeHandler, passive)
         this.__scrollTarget = void 0

package/src/components/parallax/QParallax.json

@@ -13,7 +13,7 @@
       "desc": "Path to image (unless a 'media' slot is used)",
       "transformAssetUrls": true,
       "examples": [
-        "(statics folder) src=\"statics/img/something.png\"",
+        "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
         "(URL) src=\"https://some-site.net/some-img.jpg\""