quasar 1.16.3 → 1.17.3

package/src/components/scroll-area/QScrollArea.json

@@ -11,19 +11,51 @@
 
     "bar-style": {
       "type": [ "Array", "String", "Object"],
-      "desc": "Object with CSS properties and values for styling the custom scrollbar",
-      "examples": [ ":bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
+      "desc": "Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)",
+      "examples": [ ":bar-style=\"{ borderRadius: '5px', background: 'red', opacity: 1 }\"" ],
       "category": "style",
       "addedIn": "v1.5.0"
     },
 
+    "vertical-bar-style": {
+      "type": [ "Array", "String", "Object"],
+      "desc": "Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of 'bar-style' prop",
+      "examples": [ ":bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+
+    "horizontal-bar-style": {
+      "type": [ "Array", "String", "Object"],
+      "desc": "Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of 'bar-style' prop",
+      "examples": [ ":bar-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+
     "thumb-style": {
       "type": "Object",
-      "desc": "Object with CSS properties and values for styling the thumb of custom scrollbar",
-      "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
+      "desc": "Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)",
+      "examples": [ ":thumb-style=\"{ borderRadius: '5px', background: 'red', opacity: 1 }\"" ],
       "category": "style"
     },
 
+    "vertical-thumb-style": {
+      "type": "Object",
+      "desc": "Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of 'thumb-style' prop",
+      "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+
+    "horizontal-thumb-style": {
+      "type": "Object",
+      "desc": "Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of 'thumb-style' prop",
+      "examples": [ ":thumb-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
+      "category": "style",
+      "addedIn": "v1.17"
+    },
+
     "content-style": {
       "type": [ "Array", "String", "Object"],
       "desc": "Object with CSS properties and values for styling the container of QScrollArea",
@@ -55,7 +87,7 @@
 
     "horizontal": {
       "type": "Boolean",
-      "desc": "Register for horizontal scroll instead of vertical (which is default)",
+      "desc": "Changes the default axis to horizontal instead of vertical (which is default) for getScrollPosition, getScrollPercentage, setScrollPosition, and setScrollPercentage",
       "category": "behavior"
     },
 
@@ -86,43 +118,43 @@
             },
             "verticalPosition": {
               "type": "Number",
-              "desc": "Vertical scroll position (in px); available only if QScrollArea is NOT in horizontal mode",
+              "desc": "Vertical scroll position (in px)",
               "__exemption": [ "examples" ]
             },
             "verticalPercentage": {
               "type": "Number",
-              "desc": "Vertical scroll percentage (0.0 < x < 1.0); available only if QScrollArea is NOT in horizontal mode",
+              "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
               "__exemption": [ "examples" ]
             },
             "verticalSize": {
               "type": "Number",
-              "desc": "Vertical scroll size (in px); available only if QScrollArea is NOT in horizontal mode",
+              "desc": "Vertical scroll size (in px)",
               "__exemption": [ "examples" ]
             },
             "verticalContainerSize": {
               "type": "Number",
-              "desc": "Height of the container (in px); available only if QScrollArea is NOT in horizontal mode",
+              "desc": "Height of the container (in px)",
               "__exemption": [ "examples" ]
             },
 
             "horizontalPosition": {
               "type": "Number",
-              "desc": "Horizontal scroll position (in px); available only if QScrollArea is in horizontal mode",
+              "desc": "Horizontal scroll position (in px)",
               "__exemption": [ "examples" ]
             },
             "horizontalPercentage": {
               "type": "Number",
-              "desc": "Horizontal scroll percentage (0.0 < x < 1.0); available only if QScrollArea is in horizontal mode",
+              "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
               "__exemption": [ "examples" ]
             },
             "horizontalSize": {
               "type": "Number",
-              "desc": "Horizontal scroll size (in px); available only if QScrollArea is in horizontal mode",
+              "desc": "Horizontal scroll size (in px)",
               "__exemption": [ "examples" ]
             },
             "horizontalContainerSize": {
               "type": "Number",
-              "desc": "Width of the container (in px); available only if QScrollArea is in horizontal mode",
+              "desc": "Width of the container (in px)",
               "__exemption": [ "examples" ]
             }
           }
@@ -142,18 +174,124 @@
       }
     },
 
+    "getScroll": {
+      "desc": "Get the current scroll information",
+      "returns": {
+        "type": "Object",
+        "desc": "Scroll information",
+        "__exemption": [ "examples" ],
+        "definition": {
+          "verticalPosition": {
+            "type": "Number",
+            "desc": "Vertical scroll position (in px)",
+            "__exemption": [ "examples" ]
+          },
+          "verticalPercentage": {
+            "type": "Number",
+            "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
+            "__exemption": [ "examples" ]
+          },
+          "verticalSize": {
+            "type": "Number",
+            "desc": "Vertical scroll size (in px)",
+            "__exemption": [ "examples" ]
+          },
+          "verticalContainerSize": {
+            "type": "Number",
+            "desc": "Height of the container (in px)",
+            "__exemption": [ "examples" ]
+          },
+
+          "horizontalPosition": {
+            "type": "Number",
+            "desc": "Horizontal scroll position (in px)",
+            "__exemption": [ "examples" ]
+          },
+          "horizontalPercentage": {
+            "type": "Number",
+            "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
+            "__exemption": [ "examples" ]
+          },
+          "horizontalSize": {
+            "type": "Number",
+            "desc": "Horizontal scroll size (in px)",
+            "__exemption": [ "examples" ]
+          },
+          "horizontalContainerSize": {
+            "type": "Number",
+            "desc": "Width of the container (in px)",
+            "__exemption": [ "examples" ]
+          }
+        }
+      },
+      "addedIn": "v1.17"
+    },
+
     "getScrollPosition": {
       "desc": "Get current scroll position",
+      "params": {
+        "axis": {
+          "type": "String",
+          "desc": "Scroll axis - defaults to 'vertical' (or to 'horizontal' if horizontal prop is set)",
+          "values": [ "vertical", "horizontal", "both" ]
+        }
+      },
       "returns": {
-        "type": "Number",
-        "desc": "Scroll position offset from top (in pixels)",
-        "examples": [ 110 ]
-      }
+        "type": "Object",
+        "definition": {
+          "top": {
+            "type": "Number",
+            "desc": "Scroll offset from top (vertical)",
+            "examples": [ 120 ]
+          },
+          "left": {
+            "type": "Number",
+            "desc": "Scroll offset from left (horizontal)",
+            "examples": [ 10 ]
+          }
+        },
+        "examples": [ "{ top: 10, left: 0 }" ]
+      },
+      "addedIn": "v1.17"
+    },
+
+    "getScrollPercentage": {
+      "desc": "Get current scroll position in percentage (0.0 <= x <= 1.0)",
+      "params": {
+        "axis": {
+          "type": "String",
+          "desc": "Scroll axis - defaults to 'vertical' (or to 'horizontal' if horizontal prop is set)",
+          "values": [ "vertical", "horizontal", "both" ]
+        }
+      },
+      "returns": {
+        "type": "Object",
+        "definition": {
+          "top": {
+            "type": "Number",
+            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from top (vertical)",
+            "examples": [ 0.12 ]
+          },
+          "left": {
+            "type": "Number",
+            "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from left (horizontal)",
+            "examples": [ 0.92 ]
+          }
+        },
+        "examples": [ "{ top: 0.212, left: 0 }" ]
+      },
+      "addedIn": "v1.17"
     },
 
     "setScrollPosition": {
       "desc": "Set scroll position to an offset; If a duration (in milliseconds) is specified then the scroll is animated",
       "params": {
+        "axis": {
+          "type": "String",
+          "desc": "Scroll axis",
+          "values": [ "vertical", "horizontal" ],
+          "required": true
+        },
         "offset": {
           "type": "Number",
           "desc": "Scroll position offset from top (in pixels)",
@@ -169,11 +307,17 @@
     },
 
     "setScrollPercentage": {
-      "desc": "Set scroll position to a percentage (0.0 < x < 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated",
+      "desc": "Set scroll position to a percentage (0.0 <= x <= 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated",
       "params": {
+        "axis": {
+          "type": "String",
+          "desc": "Scroll axis",
+          "values": [ "vertical", "horizontal" ],
+          "required": true
+        },
         "offset": {
           "type": "Number",
-          "desc": "Scroll percentage (0.0 < x < 1.0) of the total scrolling size",
+          "desc": "Scroll percentage (0.0 <= x <= 1.0) of the total scrolling size",
           "required": true,
           "examples": [ 220 ]
         },
@@ -183,7 +327,7 @@
           "examples": [ 300 ]
         }
       },
-      "addedIn": "v1.13.2"
+      "addedIn": "v1.17"
     }
   }
 }

package/src/components/scroll-area/QScrollArea.sass

@@ -1,5 +1,6 @@
 .q-scrollarea
   position: relative
+  contain: strict
 
   &__bar,
   &__thumb
@@ -28,5 +29,9 @@
     &:active
       opacity: .5
 
+  &__content
+    min-height: 100%
+    min-width: 100%
+
   &--dark .q-scrollarea__thumb
     background: #fff

package/src/components/scroll-area/QScrollArea.styl

@@ -1,5 +1,6 @@
 .q-scrollarea
   position: relative
+  contain: strict
 
   &__bar,
   &__thumb
@@ -28,5 +29,9 @@
     &:active
       opacity: .5
 
+  &__content
+    min-height: 100%
+    min-width: 100%
+
   &--dark .q-scrollarea__thumb
     background: #fff

package/src/components/scroll-observer/QScrollObserver.js

@@ -49,14 +49,21 @@ export default Vue.extend({
       if (immediately === true || this.debounce === 0 || this.debounce === '0') {
         this.__emit()
       }
-      else if (!this.timer) {
-        this.timer = this.debounce
-          ? setTimeout(this.__emit, this.debounce)
-          : requestAnimationFrame(this.__emit)
+      else if (this.clearTimer === void 0) {
+        const [ timer, fn ] = this.debounce
+          ? [ setTimeout(this.__emit, this.debounce), clearTimeout ]
+          : [ requestAnimationFrame(this.__emit), cancelAnimationFrame ]
+
+        this.clearTimer = () => {
+          fn(timer)
+          this.clearTimer = void 0
+        }
       }
     },
 
     __emit () {
+      this.clearTimer !== void 0 && this.clearTimer()
+
       const fn = this.horizontal === true
         ? getHorizontalScrollPosition
         : getScrollPosition
@@ -75,7 +82,6 @@ export default Vue.extend({
         this.dirChangePos = this.pos
       }
 
-      this.timer = null
       this.pos = pos
       this.$emit('scroll', this.getPosition())
     },
@@ -99,8 +105,7 @@ export default Vue.extend({
   },
 
   beforeDestroy () {
-    clearTimeout(this.timer)
-    cancelAnimationFrame(this.timer)
+    this.clearTimer !== void 0 && this.clearTimer()
     this.__unconfigureScrollTarget()
   }
 })

package/src/components/select/QSelect.js

@@ -22,6 +22,7 @@ import { FormFieldMixin } from '../../mixins/form.js'
 import VirtualScroll from '../../mixins/virtual-scroll.js'
 import CompositionMixin from '../../mixins/composition.js'
 import ListenersMixin from '../../mixins/listeners.js'
+import { client } from '../../plugins/Platform.js'
 
 const validateNewValueMode = v => ['add', 'add-unique', 'toggle'].includes(v)
 const reEscapeList = '.*+?^${}()|[]\\'
@@ -496,7 +497,10 @@ export default Vue.extend({
 
         this.$refs.target !== void 0 && this.$refs.target.focus()
 
-        if (isDeepEqual(this.getOptionValue(this.innerValue[0]), optValue) !== true) {
+        if (
+          this.innerValue.length === 0 ||
+          isDeepEqual(this.getOptionValue(this.innerValue[0]), optValue) !== true
+        ) {
           this.$emit('input', this.emitValue === true ? optValue : opt)
         }
         return
@@ -1378,7 +1382,9 @@ export default Vue.extend({
     },
 
     __onDialogBeforeHide () {
-      this.$refs.dialog.__refocusTarget = this.$el.querySelector('.q-field__native > [tabindex]:last-child')
+      if (client.is.mobile !== true) {
+        this.$refs.dialog.__refocusTarget = this.$el.querySelector('.q-field__native > [tabindex]:last-child')
+      }
       this.focused = false
     },
 

package/src/components/select/QSelect.json

@@ -186,7 +186,7 @@
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
-        ":content-style=\"{ backgroundColor: '#ff0000' }\""
+        ":popup-content-style=\"{ backgroundColor: '#ff0000' }\""
       ],
       "category": "style"
     },

package/src/components/separator/QSeparator.js

@@ -77,7 +77,6 @@ export default Vue.extend({
 
     attrs () {
       return {
-        role: 'separator',
         'aria-orientation': this.orientation
       }
     }

package/src/components/separator/QSeparator.json

@@ -24,7 +24,7 @@
 
     "inset": {
       "type": [ "Boolean", "String" ],
-      "desc": "if set to true, the left and right margins will be set to 16px. If set to item, the left and right margins will be set to 72px. If set to item-thumbnail, the left margin is set to 116px and right margin is set to 0px",
+      "desc": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side",
       "examples": [ "item", "item-thumbnail" ],
       "category": "content"
     },