quasar 2.2.4 → 2.3.3

package/src/components/popup-edit/QPopupEdit.json

@@ -173,6 +173,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be checked",
               "examples": [ 0, "Changed text" ]
             }

package/src/components/popup-proxy/QPopupProxy.js

@@ -6,7 +6,6 @@ import QMenu from '../menu/QMenu.js'
 import useAnchor, { useAnchorProps } from '../../composables/private/use-anchor.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
 
 export default createComponent({
   name: 'QPopupProxy',
@@ -40,6 +39,10 @@ export default createComponent({
 
     const type = ref(getType())
 
+    const popupProps = computed(() => (
+      type.value === 'menu' ? { maxHeight: '99vh' } : {})
+    )
+
     watch(() => getType(), val => {
       if (showing.value !== true) {
         type.value = val
@@ -65,21 +68,9 @@ export default createComponent({
     }
 
     return () => {
-      const def = hSlot(slots.default)
-
-      const popupProps = (
-        type.value === 'menu'
-        && def !== void 0
-        && def[ 0 ] !== void 0
-        && def[ 0 ].type !== void 0
-        && [ 'QDate', 'QTime', 'QCarousel', 'QColor' ].includes(
-          def[ 0 ].type.name
-        )
-      ) ? { cover: true, maxHeight: '99vh' } : {}
-
       const data = {
         ref: popupRef,
-        ...popupProps,
+        ...popupProps.value,
         ...attrs,
         onShow,
         onHide
@@ -100,7 +91,7 @@ export default createComponent({
         })
       }
 
-      return h(component, data, () => def)
+      return h(component, data, slots.default)
     }
   }
 })

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

@@ -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 () {

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

@@ -95,51 +95,61 @@
       "params": {
         "info": {
           "type": "Object",
-          "__exemption": [ "examples" ],
+          "desc": "An object containing scroll information",
           "definition": {
             "ref": {
               "type": "Object",
+              "required": true,
               "desc": "Vue reference to the QScrollArea which triggered the event",
               "__exemption": [ "examples" ]
             },
+
             "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" ]
             }
@@ -168,42 +178,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" ]
           }
@@ -215,14 +233,17 @@
       "desc": "Get current scroll position",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information",
         "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 ]
           }
@@ -235,14 +256,17 @@
       "desc": "Get current scroll position in percentage (0.0 <= x <= 1.0)",
       "returns": {
         "type": "Object",
+        "desc": "An object containing scroll position information in percentage",
         "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 ]
           }
@@ -256,14 +280,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,
@@ -1339,14 +1339,14 @@ export default createComponent({
     function onControlPopupShow (e) {
       e !== void 0 && stop(e)
       emit('popup-show', e)
-      state.hasPopupOpen.value = true
+      state.hasPopupOpen = true
       state.onControlFocusin(e)
     }
 
     function onControlPopupHide (e) {
       e !== void 0 && stop(e)
       emit('popup-hide', e)
-      state.hasPopupOpen.value = false
+      state.hasPopupOpen = false
       state.onControlFocusout(e)
     }
 
@@ -1418,6 +1418,10 @@ export default createComponent({
         ) {
           return hasDialog === true ? getDialog() : getMenu()
         }
+        else if (state.hasPopupOpen === true) {
+          // explicitly set it otherwise TAB will not blur component
+          state.hasPopupOpen = false
+        }
       },
 
       controlEvents: {

package/src/components/select/QSelect.json

@@ -47,6 +47,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "value",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Any",
+        "desc": "Value of the current option",
+        "examples": [ "'car'", "34" ]
+      },
       "examples": [
         "option-value=\"modelNumber\"",
         ":option-value=\"(item) => item === null ? null : item.modelNumber\""
@@ -58,6 +74,22 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "label",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "String",
+        "desc": "Label of the current option",
+        "examples": [ "'BMW'", "'Samsung Phone'" ]
+      },
       "examples": [
         "option-label=\"itemName\"",
         ":option-label=\"(item) => item === null ? 'Null value' : item.itemName\""
@@ -69,6 +101,21 @@
       "type": [ "Function", "String" ],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "disable",
+      "params": {
+        "option": {
+          "type": [ "String", "Object" ],
+          "desc": "The current option being processed",
+          "examples": [
+            "'BMW'",
+            "'Samsung Phone'",
+            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+          ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "If true, the current option will be disabled"
+      },
       "examples": [
         "option-disable=\"cannotSelect\"",
         ":option-disable=\"(item) => item === null ? true : item.cannotSelect\""
@@ -346,6 +393,7 @@
           "params": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Index at which to remove selection",
               "examples": [ 0 ]
             }
@@ -358,6 +406,7 @@
           "params": {
             "opt": {
               "type": "Any",
+              "required": true,
               "desc": "Option to add to model",
               "__exemption": [ "examples" ]
             }
@@ -399,6 +448,7 @@
           "params": {
             "opt": {
               "type": "Any",
+              "required": true,
               "desc": "Option to add to model",
               "__exemption": [ "examples" ]
             }
@@ -411,6 +461,7 @@
           "params": {
             "index": {
               "type": "Number",
+              "required": true,
               "desc": "Index of option from menu",
               "examples": [ 10 ]
             }
@@ -437,7 +488,6 @@
         "value": {
           "type": "String",
           "desc": "New text value",
-          "required": true,
           "__exemption": [ "examples" ]
         }
       }
@@ -452,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" ]
             }
@@ -474,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" ]
             }
@@ -501,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"
@@ -530,16 +586,19 @@
           "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",
+                  "required": true,
                   "desc": "Vue reference to the QSelect which triggered the filtering",
                   "__exemption": [ "examples" ]
                 }
@@ -603,8 +662,8 @@
       "params": {
         "index": {
           "type": "Number",
-          "desc": "Index at which to remove selection",
           "required": true,
+          "desc": "Index at which to remove selection",
           "examples": [ 0 ]
         }
       }
@@ -615,8 +674,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option to add to model",
           "required": true,
+          "desc": "Option to add to model",
           "__exemption": [ "examples" ]
         },
         "unique": {
@@ -632,8 +691,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option to add to model",
           "required": true,
+          "desc": "Option to add to model",
           "__exemption": [ "examples" ]
         },
         "keepOpen": {
@@ -648,8 +707,8 @@
       "params": {
         "index": {
           "type": "Number",
-          "desc": "Index of option from menu",
           "required": true,
+          "desc": "Index of option from menu",
           "examples": [ 10 ]
         }
       }
@@ -676,8 +735,8 @@
       "params": {
         "value": {
           "type": "String",
-          "desc": "String to filter with",
           "required": true,
+          "desc": "String to filter with",
           "examples": [ "car" ]
         }
       }
@@ -692,6 +751,7 @@
       "params": {
         "value": {
           "type": "String",
+          "required": true,
           "desc": "String to set the input value to",
           "examples": [ "hotel" ]
         },
@@ -707,8 +767,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -723,8 +783,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -740,8 +800,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -757,8 +817,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },
@@ -774,8 +834,8 @@
       "params": {
         "opt": {
           "type": "Any",
-          "desc": "Option entry",
           "required": true,
+          "desc": "Option entry",
           "__exemption": [ "examples" ]
         }
       },

package/src/components/skeleton/QSkeleton.json

@@ -33,11 +33,8 @@
     },
 
     "animation-speed": {
-      "type": [ "String", "Number" ],
-      "desc": "Animation speed (in milliseconds, without unit)",
+      "extends": "animation-speed",
       "default": 300,
-      "examples": [ 500, "1200" ],
-      "category": "style",
       "addedIn": "v2.2"
     },