quasar 2.15.4 → 2.16.0

package/src/components/header/QHeader.json

@@ -59,6 +59,8 @@
           "desc": "New 'reveal' state"
         }
       }
-    }
+    },
+
+    "focusin": { "internal": true }
   }
 }

package/src/components/img/QImg.json

@@ -73,7 +73,7 @@
     "initial-ratio": {
       "type": [ "String", "Number" ],
       "desc": "Use it when not specifying 'ratio' but still wanting an initial aspect ratio",
-      "default": "1.77778",
+      "default": "1.7778",
       "examples": [
         "# (Number format) :initial-ratio=\"16/9\"",
         "# (String format) initial-ratio=\"1\""

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

@@ -3,7 +3,7 @@ import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBefor
 import { createComponent } from '../../utils/private.create/create.js'
 import debounce from '../../utils/debounce/debounce.js'
 import { height } from '../../utils/dom/dom.js'
-import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { listenOpts } from '../../utils/event/event.js'
 import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
 
@@ -23,11 +23,12 @@ export default createComponent({
       default: 100
     },
 
-    scrollTarget: {
-      default: void 0
-    },
+    scrollTarget: scrollTargetProp,
 
-    initialIndex: Number,
+    initialIndex: {
+      type: Number,
+      default: 0
+    },
 
     disable: Boolean,
     reverse: Boolean
@@ -41,7 +42,7 @@ export default createComponent({
     const rootRef = ref(null)
     const loadingRef = ref(null)
 
-    let index = props.initialIndex || 0
+    let index = props.initialIndex
     let localScrollTarget, poll
 
     const classes = computed(() =>

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

@@ -18,7 +18,7 @@ export default createComponent({
 
     size: {
       type: [ String, Number ],
-      default: 42
+      default: '42px'
     },
 
     label: String,

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

@@ -18,6 +18,7 @@
     },
 
     "size": {
+      "type": [ "String", "Number" ],
       "desc": "Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)",
       "default": "'42px'"
     },

package/src/components/input/QInput.js

@@ -21,7 +21,8 @@ export default createComponent({
     ...useMaskProps,
     ...useFormProps,
 
-    modelValue: { required: false },
+    // override of useFieldProps > modelValue
+    modelValue: [ String, Number ],
 
     shadowText: String,
 

package/src/components/input/QInput.json

@@ -79,7 +79,6 @@
 
   "events": {
     "update:model-value": {
-      "extends": "update:model-value",
       "params": {
         "value": {
           "type": [ "String", "Number", "null" ]
@@ -87,36 +86,20 @@
       }
     },
 
-    "focus": {
-      "desc": "Emitted when component gets focused",
-      "params": {
-        "evt": {
-          "extends": "evt"
-        }
-      }
-    },
-
-    "blur": {
-      "desc": "Emitted when component loses focus",
-      "params": {
-        "evt": {
-          "extends": "evt"
-        }
-      }
-    }
+    "click": { "internal": true },
+    "paste": { "internal": true },
+    "animationend": { "internal": true },
+    "change": { "internal": true },
+    "keydown": { "internal": true }
   },
 
   "methods": {
     "focus": {
-      "desc": "Focus underlying input tag",
-      "params": null,
-      "returns": null
+      "desc": "Focus underlying input tag"
     },
 
     "blur": {
-      "desc": "Lose focus on underlying input tag",
-      "params": null,
-      "returns": null
+      "desc": "Lose focus on underlying input tag"
     },
 
     "select": {

package/src/components/intersection/QIntersection.json

@@ -74,7 +74,7 @@
 
     "hidden": {
       "desc": "Slot for content to render when component is not on screen; Example: a text that the user can search for with the browser's search function",
-      "addedIn": "v2.12.0"
+      "addedIn": "v2.12"
     }
   },
 

package/src/components/item/QItem.json

@@ -113,6 +113,8 @@
           }
         }
       }
-    }
+    },
+
+    "keyup": { "internal": true }
   }
 }

package/src/components/knob/QKnob.json

@@ -16,12 +16,14 @@
     "min": {
       "type": "Number",
       "desc": "The minimum value that the model (the knob value) should start at",
+      "default": "0",
       "category": "model"
     },
 
     "max": {
       "type": "Number",
       "desc": "The maximum value that the model (the knob value) should go to",
+      "default": "100",
       "category": "model"
     },
 
@@ -75,11 +77,17 @@
     "font-size": {
       "type": "String",
       "desc": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size",
-      "default": "'0.25em'",
       "examples": [ "'1em'", "'16px'", "'2rem'" ],
       "category": "style"
     },
 
+    "rounded": {
+      "type": "Boolean",
+      "desc": "Rounding the arc of progress",
+      "category": "style",
+      "addedIn": "v2.8.4"
+    },
+
     "thickness": {
       "type": "Number",
       "default": "0.2",
@@ -101,7 +109,8 @@
     },
 
     "tabindex": {
-      "extends": "tabindex"
+      "extends": "tabindex",
+      "default": "0"
     },
 
     "disable": {

package/src/components/menu/QMenu.js

@@ -11,7 +11,7 @@ import useTimeout from '../../composables/use-timeout/use-timeout.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { closePortalMenus } from '../../utils/private.portal/portal.js'
-import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { position, stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { addEscapeKey, removeEscapeKey } from '../../utils/private.keyboard/escape-key.js'
@@ -61,9 +61,7 @@ export default createComponent({
       validator: validateOffset
     },
 
-    scrollTarget: {
-      default: void 0
-    },
+    scrollTarget: scrollTargetProp,
 
     touchPosition: Boolean,
 

package/src/components/menu/QMenu.json

@@ -129,7 +129,9 @@
   "events": {
     "escape-key": {
       "desc": "Emitted when ESC key is pressed; Does not get emitted if Menu is 'persistent'"
-    }
+    },
+
+    "click": { "internal": true }
   },
 
   "methods": {

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

@@ -33,6 +33,7 @@ export default createComponent({
     name: String,
 
     type: {
+      type: String,
       default: 'radio',
       validator: v => typeValues.includes(v)
     },

package/src/components/page/QPage.json

@@ -27,8 +27,7 @@
         "type": "Object",
         "desc": "Object with CSS properties to apply to Page DOM element"
       },
-      "default": "# see source code",
-      "examples": [ "# see source code" ],
+      "examples": [ "(offset, height) => ({ minHeight: offset + 'px' })" ],
       "category": "style"
     }
   },

package/src/components/page-scroller/QPageScroller.js

@@ -24,6 +24,7 @@ export default createComponent({
     },
 
     offset: {
+      ...usePageStickyProps.offset,
       default: () => [ 18, 18 ]
     }
   },

package/src/components/page-scroller/QPageScroller.json

@@ -30,5 +30,9 @@
       "default": "[ 18, 18 ]",
       "category": "content"
     }
+  },
+
+  "events": {
+    "click": { "internal": true }
   }
 }

package/src/components/page-sticky/QPageSticky.js

@@ -1,5 +1,5 @@
 import { createComponent } from '../../utils/private.create/create.js'
-import usePageSticky, { usePageStickyProps } from './use-page-sticky'
+import usePageSticky, { usePageStickyProps } from './use-page-sticky.js'
 
 export default createComponent({
   name: 'QPageSticky',

package/src/components/pagination/QPagination.json

@@ -152,7 +152,8 @@
     "active-design": {
       "type": "String",
       "desc": "The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)",
-      "values": [ "'flat'", "'outline'", "'push'", "'unelevated'" ],
+      "values": [ "'flat'", "'outline'", "'push'", "'unelevated'", "''" ],
+      "default": "''",
       "category": "style",
       "addedIn": "v2.10"
     },
@@ -160,7 +161,8 @@
     "active-color": {
       "extends": "color",
       "desc": "Color name from the Quasar Color Palette for the ACTIVE button",
-      "default": "'primary'"
+      "default": "'primary'",
+      "__runtimeDefault": true
     },
 
     "active-text-color": {
@@ -190,6 +192,7 @@
       "type": "String",
       "desc": "Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)",
       "default": "'2px'",
+      "__runtimeDefault": true,
       "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
       "category": "style",
       "addedIn": "v2.10"
@@ -199,6 +202,7 @@
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
       "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
+      "default": "'3px 2px'",
       "category": "style"
     },
 
@@ -228,6 +232,7 @@
       "type": [ "Boolean", "Object", "null" ],
       "desc": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons",
       "default": "true",
+      "__runtimeDefault": true,
       "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
       "category": "style"
     }

package/src/components/parallax/QParallax.js

@@ -3,7 +3,7 @@ import { h, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { createComponent } from '../../utils/private.create/create.js'
 import { height, offset } from '../../utils/dom/dom.js'
 import frameDebounce from '../../utils/frame-debounce/frame-debounce.js'
-import { getScrollTarget } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { listenOpts } from '../../utils/event/event.js'
 
@@ -24,9 +24,7 @@ export default createComponent({
       validator: v => v >= 0 && v <= 1
     },
 
-    scrollTarget: {
-      default: void 0
-    },
+    scrollTarget: scrollTargetProp,
 
     onScroll: Function
   },

package/src/components/parallax/QParallax.json

@@ -27,6 +27,7 @@
     "speed": {
       "type": "Number",
       "desc": "Speed of parallax effect (0.0 < x < 1.0)",
+      "default": "1",
       "category": "behavior"
     },
 

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

@@ -62,7 +62,8 @@
         "type": "Boolean",
         "desc": "Is the model valid or not?"
       },
-      "examples": [ "# :validate=\"myValidation\"" ],
+      "default": "() => true",
+      "examples": [ "value => value !== 0" ],
       "category": "model"
     },
 

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -5,7 +5,7 @@ import QSpinner from '../spinner/QSpinner.js'
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget, getVerticalScrollPosition } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, getVerticalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { between } from '../../utils/format/format.js'
 import { prevent } from '../../utils/event/event.js'
 import { hSlot, hDir } from '../../utils/private.render/render.js'
@@ -24,9 +24,7 @@ export default createComponent({
     noMouse: Boolean,
     disable: Boolean,
 
-    scrollTarget: {
-      default: void 0
-    }
+    scrollTarget: scrollTargetProp
   },
 
   emits: [ 'refresh' ],

package/src/components/radio/QRadio.json

@@ -8,12 +8,12 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Number", "String", "null", "undefined" ],
+      "type": [ "Any" ],
       "examples": [ "# v-model=\"option\"" ]
     },
 
     "val": {
-      "type": [ "Number", "String", "null", "undefined" ],
+      "type": [ "Any" ],
       "required": true,
       "desc": "The actual value of the option with which model value is changed",
       "examples": [ "'opt1'", "50" ],

package/src/components/range/QRange.json

@@ -20,6 +20,7 @@
           "desc": "Model value for right thumb"
         }
       },
+      "default": "{ min: null, max: null }",
       "examples": [ "# v-model=\"positionModel\"" ]
     },
 

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

@@ -1,7 +1,7 @@
 import { watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll/scroll.js'
+import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition, scrollTargetProp } from '../../utils/scroll/scroll.js'
 import { listenOpts, noop } from '../../utils/event/event.js'
 
 const { passive } = listenOpts
@@ -19,9 +19,7 @@ export default createComponent({
 
     debounce: [ String, Number ],
 
-    scrollTarget: {
-      default: void 0
-    }
+    scrollTarget: scrollTargetProp
   },
 
   emits: [ 'scroll' ],

package/src/components/select/QSelect.js

@@ -37,6 +37,7 @@ export default createComponent({
     ...useFormProps,
     ...useFieldProps,
 
+    // override of useFieldProps > modelValue
     modelValue: {
       required: true
     },
@@ -107,9 +108,9 @@ export default createComponent({
 
     autocomplete: String,
 
-    transitionShow: String,
-    transitionHide: String,
-    transitionDuration: [ String, Number ],
+    transitionShow: {},
+    transitionHide: {},
+    transitionDuration: {},
 
     behavior: {
       type: String,
@@ -117,10 +118,8 @@ export default createComponent({
       default: 'default'
     },
 
-    virtualScrollItemSize: {
-      type: [ Number, String ],
-      default: void 0
-    },
+    // override of useVirtualScrollProps > virtualScrollItemSize (no default)
+    virtualScrollItemSize: useVirtualScrollProps.virtualScrollItemSize.type,
 
     onNewValue: Function,
     onFilter: Function
@@ -130,6 +129,7 @@ export default createComponent({
     ...useFieldEmits,
     'add', 'remove', 'inputValue',
     'keyup', 'keypress', 'keydown',
+    'popupShow', 'popupHide',
     'filterAbort'
   ],
 

package/src/components/select/QSelect.json

@@ -47,6 +47,7 @@
       "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'",
+      "__runtimeDefault": true,
       "params": {
         "option": {
           "type": [ "String", "Object" ],
@@ -74,6 +75,7 @@
       "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'",
+      "__runtimeDefault": true,
       "params": {
         "option": {
           "type": [ "String", "Object" ],
@@ -101,6 +103,7 @@
       "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'",
+      "__runtimeDefault": true,
       "params": {
         "option": {
           "type": [ "String", "Object" ],
@@ -237,16 +240,22 @@
       "addedIn": "v2.15"
     },
 
+    "use-chips": {
+      "type": "Boolean",
+      "desc": "Use QChip to show what is currently selected",
+      "category": "selection"
+    },
+
     "use-input": {
       "type": "Boolean",
       "desc": "Use an input tag where users can type",
       "category": "content"
     },
 
-    "use-chips": {
-      "type": "Boolean",
-      "desc": "Use QChip to show what is currently selected",
-      "category": "selection"
+    "maxlength": {
+      "type": [ "String", "Number" ],
+      "desc": "Specify a max length for the inner input tag (if 'use-input' is enabled)",
+      "category": "content"
     },
 
     "fill-input": {
@@ -304,7 +313,8 @@
     },
 
     "tabindex": {
-      "extends": "tabindex"
+      "extends": "tabindex",
+      "default": "0"
     },
 
     "autocomplete": {
@@ -318,6 +328,7 @@
       "extends": "transition",
       "desc": "Transition when showing the menu/dialog; One of Quasar's embedded transitions",
       "default": "'fade'",
+      "passthrough": "child",
       "category": "behavior"
     },
 
@@ -325,6 +336,7 @@
       "extends": "transition",
       "desc": "Transition when hiding the menu/dialog; One of Quasar's embedded transitions",
       "default": "'fade'",
+      "passthrough": "child",
       "category": "behavior"
     },
 
@@ -332,6 +344,7 @@
       "type": [ "String", "Number" ],
       "desc": "Transition duration when hiding the menu/dialog (in milliseconds, without unit)",
       "default": "300",
+      "passthrough": "child",
       "category": "behavior"
     },
 
@@ -345,6 +358,10 @@
 
     "name": {
       "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists"
+    },
+
+    "virtual-scroll-item-size": {
+      "__runtimeDefault": true
     }
   },
 
@@ -475,10 +492,6 @@
   },
 
   "events": {
-    "update:model-value": {
-      "extends": "update:model-value"
-    },
-
     "input-value": {
       "desc": "Emitted when the value in the text input changes",
       "params": {
@@ -642,16 +655,14 @@
           }
         }
       }
-    }
+    },
+
+    "keyup": { "internal": true },
+    "keydown": { "internal": true },
+    "keypress": { "internal": true }
   },
 
   "methods": {
-    "focus": {
-      "desc": "Focus component",
-      "params": null,
-      "returns": null
-    },
-
     "showPopup": {
       "desc": "Focus and open popup",
       "params": null,

package/src/components/separator/QSeparator.json

@@ -11,7 +11,6 @@
     "spaced": {
       "type": [ "Boolean", "String" ],
       "desc": "If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes",
-      "default": "'md'",
       "examples": [ "'12px'", "'sm'", "'md'" ],
       "category": "content"
     },

package/src/components/skeleton/QSkeleton.json

@@ -32,7 +32,7 @@
 
     "animation-speed": {
       "extends": "animation-speed",
-      "default": "300",
+      "default": "1500",
       "addedIn": "v2.2"
     },
 

package/src/components/slider/QSlider.json

@@ -10,6 +10,7 @@
       "extends": "model-value",
       "type": [ "Number", "null", "undefined" ],
       "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "default": "null",
       "examples": [ "# v-model=\"positionModel\"" ]
     },
 

package/src/components/slider/use-slider.js

@@ -47,8 +47,6 @@ export const useSliderProps = {
   vertical: Boolean,
   reverse: Boolean,
 
-  hideSelection: Boolean,
-
   color: String,
   markerLabelsClass: String,