quasar 2.3.2 → 2.4.1

package/src/components/range/QRange.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "components/slider/use-slider" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/range"
@@ -25,42 +25,6 @@
       "examples": [ "v-model=\"positionModel\"" ]
     },
 
-    "min": {
-      "type": "Number",
-      "desc": "Minimum value of the model",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
-      "category": "model"
-    },
-
-    "max": {
-      "type": "Number",
-      "desc": "Maximum value of the model",
-      "default": 100,
-      "examples": [ ":max=\"100\"" ],
-      "category": "model"
-    },
-
-    "step": {
-      "type": "Number",
-      "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
-      "default": 1,
-      "examples": [ ":step=\"1\"" ],
-      "category": "model"
-    },
-
-    "reverse": {
-      "type": "Boolean",
-      "desc": "Work in reverse (changes direction)",
-      "category": "behavior"
-    },
-
-    "vertical": {
-      "type": "Boolean",
-      "desc": "Display in vertical direction",
-      "category": "behavior"
-    },
-
     "drag-range": {
       "type": "Boolean",
       "desc": "User can drag range instead of just the two thumbs",
@@ -73,28 +37,6 @@
       "category": "content"
     },
 
-    "color": {
-      "extends": "color"
-    },
-
-    "label": {
-      "type": "Boolean",
-      "desc": "Popup labels (for left and right thumbs) when user clicks/taps on the slider thumb and moves it",
-      "category": "labels"
-    },
-
-    "label-color": {
-      "extends": "color",
-      "desc": "Color name for labels background from the Quasar Color Palette; Applies to both labels, unless specific label color props are used",
-      "category": "labels"
-    },
-
-    "label-text-color": {
-      "extends": "color",
-      "desc": "Color name for labels text from the Quasar Color Palette; Applies to both labels, unless specific label text color props are used",
-      "category": "labels"
-    },
-
     "left-label-color": {
       "extends": "color",
       "desc": "Color name for left label background from the Quasar Color Palette",
@@ -137,76 +79,24 @@
       "category": "labels"
     },
 
-    "label-always": {
-      "type": "Boolean",
-      "desc": "Always display the labels",
-      "category": "labels"
-    },
-
-    "markers": {
-      "type": [ "Boolean", "Number" ],
-      "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
-      "category": "content",
-      "examples": [
-        "markers",
-        ":markers=\"5\""
-      ]
-    },
-
-    "snap": {
-      "type": "Boolean",
-      "desc": "Snap thumbs on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
-      "category": "content"
-    },
-
-    "thumb-path": {
-      "type": "String",
-      "desc": "Set custom thumbs svg path",
-      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
-      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
-      "category": "style"
-    },
-
-    "dark": {
-      "extends": "dark"
-    },
-
-    "dense": {
-      "extends": "dense"
-    },
-
-    "disable": {
-      "extends": "disable"
-    },
-
-    "readonly": {
-      "extends": "readonly"
+    "left-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for left thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     },
 
-    "tabindex": {
-      "extends": "tabindex"
+    "right-thumb-color": {
+      "extends": "color",
+      "desc": "Color name (from the Quasar Color Palette) for right thumb",
+      "category": "labels",
+      "addedIn": "v2.4"
     }
   },
 
   "events": {
     "update:model-value": {
       "extends": "update:model-value"
-    },
-
-    "change": {
-      "extends": "update:model-value",
-      "desc": "Emitted on lazy model value change (after user slides then releases thumb)"
-    },
-
-    "pan": {
-      "desc": "Triggered when user starts panning on the component",
-      "params": {
-        "phase": {
-          "type": "String",
-          "desc": "Phase of panning",
-          "values": [ "start", "end" ]
-        }
-      }
     }
   }
 }

package/src/components/rating/QRating.json

@@ -9,7 +9,7 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "examples": [ ":value=\"2\"" ]
+      "examples": [ "v-model=\"rating\"", ":model-value=\"rating\"", ":model-value=\"2\"" ]
     },
 
     "max": {

package/src/components/resize-observer/QResizeObserver.json

@@ -23,11 +23,13 @@
           "definition": {
             "height": {
               "type": "Number",
+              "required": true,
               "desc": "Layout height",
               "examples": [ 822 ]
             },
             "width": {
               "type": "Number",
+              "required": true,
               "desc": "Layout width",
               "examples": [ 822 ]
             }

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -18,6 +18,11 @@ const dirProps = {
   vertical: { offset: 'offsetY', scroll: 'scrollTop', dir: 'down', dist: 'y' },
   horizontal: { offset: 'offsetX', scroll: 'scrollLeft', dir: 'right', dist: 'x' }
 }
+const panOpts = {
+  prevent: true,
+  mouse: true,
+  mouseAllDir: true
+}
 
 export default createComponent({
   name: 'QScrollArea',
@@ -182,24 +187,14 @@ export default createComponent({
       TouchPan,
       e => { onPanThumb(e, 'vertical') },
       void 0,
-      {
-        vertical: true,
-        prevent: true,
-        mouse: true,
-        mouseAllDir: true
-      }
+      { vertical: true, ...panOpts }
     ] ]
 
     const thumbHorizDir = [ [
       TouchPan,
       e => { onPanThumb(e, 'horizontal') },
       void 0,
-      {
-        horizontal: true,
-        prevent: true,
-        mouse: true,
-        mouseAllDir: true
-      }
+      { horizontal: true, ...panOpts }
     ] ]
 
     function getScroll () {
@@ -380,6 +375,8 @@ export default createComponent({
       }
     })
 
+    onBeforeUnmount(emitScroll.cancel)
+
     return () => {
       return h('div', {
         class: classes.value,

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

@@ -98,49 +98,58 @@
           "desc": "An object containing scroll information",
           "definition": {
             "ref": {
-              "type": "Object",
-              "desc": "Vue reference to the QScrollArea which triggered the event",
-              "__exemption": [ "examples" ]
+              "type": "Component",
+              "tsType": "QScrollArea",
+              "required": true,
+              "desc": "Vue reference to the QScrollArea which triggered the event"
             },
 
             "verticalPosition": {
               "type": "Number",
+              "required": true,
               "desc": "Vertical scroll position (in px)",
               "__exemption": [ "examples" ]
             },
             "verticalPercentage": {
               "type": "Number",
+              "required": true,
               "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
               "__exemption": [ "examples" ]
             },
             "verticalSize": {
               "type": "Number",
+              "required": true,
               "desc": "Vertical scroll size (in px)",
               "__exemption": [ "examples" ]
             },
             "verticalContainerSize": {
               "type": "Number",
+              "required": true,
               "desc": "Height of the container (in px)",
               "__exemption": [ "examples" ]
             },
 
             "horizontalPosition": {
               "type": "Number",
+              "required": true,
               "desc": "Horizontal scroll position (in px)",
               "__exemption": [ "examples" ]
             },
             "horizontalPercentage": {
               "type": "Number",
+              "required": true,
               "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
               "__exemption": [ "examples" ]
             },
             "horizontalSize": {
               "type": "Number",
+              "required": true,
               "desc": "Horizontal scroll size (in px)",
               "__exemption": [ "examples" ]
             },
             "horizontalContainerSize": {
               "type": "Number",
+              "required": true,
               "desc": "Width of the container (in px)",
               "__exemption": [ "examples" ]
             }
@@ -154,9 +163,8 @@
     "getScrollTarget": {
       "desc": "Get the scrolling DOM element target",
       "returns": {
-        "type": "Object",
-        "desc": "DOM element upon which scrolling takes place",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "DOM element upon which scrolling takes place"
       }
     },
 
@@ -169,42 +177,50 @@
         "definition": {
           "verticalPosition": {
             "type": "Number",
+            "required": true,
             "desc": "Vertical scroll position (in px)",
             "__exemption": [ "examples" ]
           },
           "verticalPercentage": {
             "type": "Number",
+            "required": true,
             "desc": "Vertical scroll percentage (0.0 <= x <= 1.0)",
             "__exemption": [ "examples" ]
           },
           "verticalSize": {
             "type": "Number",
+            "required": true,
             "desc": "Vertical scroll size (in px)",
             "__exemption": [ "examples" ]
           },
           "verticalContainerSize": {
             "type": "Number",
+            "required": true,
             "desc": "Height of the container (in px)",
             "__exemption": [ "examples" ]
           },
 
           "horizontalPosition": {
             "type": "Number",
+            "required": true,
             "desc": "Horizontal scroll position (in px)",
             "__exemption": [ "examples" ]
           },
           "horizontalPercentage": {
             "type": "Number",
+            "required": true,
             "desc": "Horizontal scroll percentage (0.0 <= x <= 1.0)",
             "__exemption": [ "examples" ]
           },
           "horizontalSize": {
             "type": "Number",
+            "required": true,
             "desc": "Horizontal scroll size (in px)",
             "__exemption": [ "examples" ]
           },
           "horizontalContainerSize": {
             "type": "Number",
+            "required": true,
             "desc": "Width of the container (in px)",
             "__exemption": [ "examples" ]
           }
@@ -220,11 +236,13 @@
         "definition": {
           "top": {
             "type": "Number",
+            "required": true,
             "desc": "Scroll offset from top (vertical)",
             "examples": [ 120 ]
           },
           "left": {
             "type": "Number",
+            "required": true,
             "desc": "Scroll offset from left (horizontal)",
             "examples": [ 10 ]
           }
@@ -241,11 +259,13 @@
         "definition": {
           "top": {
             "type": "Number",
+            "required": true,
             "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from top (vertical)",
             "examples": [ 0.12 ]
           },
           "left": {
             "type": "Number",
+            "required": true,
             "desc": "Scroll percentage (0.0 <= x <= 1.0) offset from left (horizontal)",
             "examples": [ 0.92 ]
           }
@@ -259,14 +279,14 @@
       "params": {
         "axis": {
           "type": "String",
+          "required": true,
           "desc": "Scroll axis",
-          "values": [ "vertical", "horizontal" ],
-          "required": true
+          "values": [ "vertical", "horizontal" ]
         },
         "offset": {
           "type": "Number",
-          "desc": "Scroll position offset from top (in pixels)",
           "required": true,
+          "desc": "Scroll position offset from top (in pixels)",
           "examples": [ 220 ]
         },
         "duration": {

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

@@ -34,15 +34,18 @@
           "definition": {
             "position": {
               "type": "Object",
+              "required": true,
               "desc": "Scroll offset (from top and left)",
               "definition": {
                 "top": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Scroll offset from top (vertical)",
                   "examples": [ 120 ]
                 },
                 "left": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Scroll offset from left (horizontal)",
                   "examples": [ 10 ]
                 }
@@ -51,24 +54,29 @@
 
             "direction": {
               "type": "String",
+              "required": true,
               "desc": "Direction of scroll",
               "values": [ "up", "down", "left", "right" ]
             },
             "directionChanged": {
               "type": "Boolean",
+              "required": true,
               "desc": "Has scroll direction changed since event was last emitted?"
             },
             "delta": {
               "type": "Object",
+              "required": true,
               "desc": "Delta of distance (in pixels) since event was last emitted",
               "definition": {
                 "top": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Vertical delta distance since event was last emitted",
                   "examples": [ 120 ]
                 },
                 "left": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Horizontal delta distance since event was last emitted",
                   "examples": [ 10 ]
                 }
@@ -77,15 +85,18 @@
 
             "inflectionPoint": {
               "type": "Object",
+              "required": true,
               "desc": "Last scroll offset where scroll direction has changed",
               "definition": {
                 "top": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Scroll offset from top (vertical)",
                   "examples": [ 120 ]
                 },
                 "left": {
                   "type": "Number",
+                  "required": true,
                   "desc": "Scroll offset from left (horizontal)",
                   "examples": [ 10 ]
                 }