quasar 2.3.1 → 2.4.0

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',
@@ -173,7 +178,7 @@ export default createComponent({
     )
 
     const mainStyle = computed(() => (
-      scroll.vertical.thumbHidden.value === true || scroll.horizontal.thumbHidden.value === true
+      scroll.vertical.thumbHidden.value === true && scroll.horizontal.thumbHidden.value === true
         ? props.contentStyle
         : props.contentActiveStyle
     ))
@@ -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 ]
                 }

package/src/components/select/QSelect.js

@@ -1173,7 +1173,7 @@ export default createComponent({
     function getDialog () {
       const content = [
         h(QField, {
-          class: `col-auto ${ state.fieldClass }`,
+          class: `col-auto ${ state.fieldClass.value }`,
           ...innerFieldProps.value,
           for: state.targetUid.value,
           dark: isOptionsDark.value,

package/src/components/select/QSelect.json

@@ -8,7 +8,7 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "Array", "null", "undefined" ],
+      "type": "Any",
       "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "examples": [ "v-model=\"myModel\"" ]
     },
@@ -393,6 +393,7 @@
           "params": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Index at which to remove selection",
               "examples": [ 0 ]
             }
@@ -405,6 +406,7 @@
           "params": {
             "opt": {
               "type": "Any",
+              "required": true,
               "desc": "Option to add to model",
               "__exemption": [ "examples" ]
             }
@@ -446,6 +448,7 @@
           "params": {
             "opt": {
               "type": "Any",
+              "required": true,
               "desc": "Option to add to model",
               "__exemption": [ "examples" ]
             }
@@ -458,6 +461,7 @@
           "params": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Index of option from menu",
               "examples": [ 10 ]
             }
@@ -484,7 +488,6 @@
         "value": {
           "type": "String",
           "desc": "New text value",
-          "required": true,
           "__exemption": [ "examples" ]
         }
       }
@@ -499,11 +502,13 @@
           "definition": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Model index at which removal took place",
               "examples": [ 2 ]
             },
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "The actual value that was removed",
               "__exemption": [ "examples" ]
             }
@@ -521,11 +526,13 @@
           "definition": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Model index at which addition took place",
               "examples": [ 2 ]
             },
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "The actual value that was added",
               "__exemption": [ "examples" ]
             }
@@ -548,11 +555,13 @@
           "params": {
             "item": {
               "type": "Any",
+              "required": false,
               "desc": "Item to add",
               "__exemption": [ "examples" ]
             },
             "mode": {
               "type": "String",
+              "required": false,
               "desc": "Override 'new-value-mode' (prop) behavior should you wish to",
               "values": [ "add", "add-unique", "toggle" ],
               "default": "add"
@@ -577,18 +586,21 @@
           "params": {
             "callbackFn": {
               "type": "Function",
+              "required": true,
               "desc": "Callback to call to make the actual updates",
               "params": null,
               "returns": null
             },
             "afterFn": {
               "type": "Function",
+              "required": false,
               "desc": "Callback to call at the end after the update has been fully processed by QSelect",
               "params": {
                 "ref": {
-                  "type": "Object",
-                  "desc": "Vue reference to the QSelect which triggered the filtering",
-                  "__exemption": [ "examples" ]
+                  "type": "Component",
+                  "tsType": "QSelect",
+                  "required": true,
+                  "desc": "Vue reference to the QSelect which triggered the filtering"
                 }
               },
               "returns": null
@@ -629,6 +641,19 @@
           "__exemption": [ "examples" ]
         }
       }
+    },
+
+    "virtual-scroll": {
+      "params": {
+        "details": {
+          "definition": {
+            "ref": {
+              "tsType": "QSelect",
+              "desc": "Vue reference to the QSelect"
+            }
+          }
+        }
+      }
     }
   },
 
@@ -650,8 +675,8 @@
       "params": {
         "index": {
           "type": "Number",
-          "desc": "Index at which to remove selection",
           "required": true,
+          "desc": "Index at which to remove selection",
           "examples": [ 0 ]
         }
       }
@@ -662,8 +687,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option to add to model",
           "required": true,
+          "desc": "Option to add to model",
           "__exemption": [ "examples" ]
         },
         "unique": {
@@ -679,8 +704,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option to add to model",
           "required": true,
+          "desc": "Option to add to model",
           "__exemption": [ "examples" ]
         },
         "keepOpen": {
@@ -695,8 +720,8 @@
       "params": {
         "index": {
           "type": "Number",
-          "desc": "Index of option from menu",
           "required": true,
+          "desc": "Index of option from menu",
           "examples": [ 10 ]
         }
       }
@@ -723,8 +748,8 @@
       "params": {
         "value": {
           "type": "String",
-          "desc": "String to filter with",
           "required": true,
+          "desc": "String to filter with",
           "examples": [ "car" ]
         }
       }
@@ -739,6 +764,7 @@
       "params": {
         "value": {
           "type": "String",
+          "required": true,
           "desc": "String to set the input value to",
           "examples": [ "hotel" ]
         },
@@ -754,8 +780,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -770,8 +796,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -787,8 +813,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -804,8 +830,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -821,8 +847,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },

package/src/components/slide-item/QSlideItem.json

@@ -65,6 +65,7 @@
           "definition": {
             "reset": {
               "type": "Function",
+              "required": true,
               "desc": "When called, it resets the component to its initial non-slided state",
               "params": null,
               "returns": null
@@ -83,6 +84,7 @@
           "definition": {
             "reset": {
               "type": "Function",
+              "required": true,
               "desc": "When called, it resets the component to its initial non-slided state",
               "params": null,
               "returns": null
@@ -101,6 +103,7 @@
           "definition": {
             "reset": {
               "type": "Function",
+              "required": true,
               "desc": "When called, it resets the component to its initial non-slided state",
               "params": null,
               "returns": null
@@ -119,6 +122,7 @@
           "definition": {
             "reset": {
               "type": "Function",
+              "required": true,
               "desc": "When called, it resets the component to its initial non-slided state",
               "params": null,
               "returns": null
@@ -137,16 +141,19 @@
           "definition": {
             "side": {
               "type": "String",
+              "required": true,
               "desc": "Side to which sliding is taking effect",
               "values": [ "left", "right", "top", "bottom" ]
             },
             "ratio": {
               "type": "Number",
+              "required": true,
               "desc": "Ratio of how much of the required slide was performed (0..1)",
               "examples": [ 0, 0.5, 1 ]
             },
             "isReset": {
               "type": "Boolean",
+              "required": true,
               "desc": "Ratio has been reset"
             }
           }
@@ -163,11 +170,13 @@
           "definition": {
             "side": {
               "type": "String",
+              "required": true,
               "desc": "Side to which sliding has taken effect",
               "values": [ "left", "right", "top", "bottom" ]
             },
             "reset": {
               "type": "Function",
+              "required": true,
               "desc": "When called, it resets the component to its initial non-slided state",
               "params": null,
               "returns": null