quasar 2.10.0 → 2.10.1

package/src/components/expansion-item/QExpansionItem.json

@@ -81,7 +81,6 @@
       "type": "Number",
       "desc": "Animation duration (in milliseconds)",
       "default": 300,
-      "examples": [ ":duration=\"1000\"" ],
       "category": "behavior"
     },
 
@@ -189,7 +188,6 @@
         "detailsId": {
           "type": "String",
           "desc": "QExpansionItem details panel id (for use in aria-controls)",
-          "__exemption": [ "examples" ],
           "addedIn": "v2.8.4"
         },
 
@@ -200,8 +198,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,
@@ -215,8 +212,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,
@@ -230,8 +226,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,

package/src/components/fab/QFab.json

@@ -28,7 +28,6 @@
       "desc": "Direction to expand Fab Actions to",
       "default": "right",
       "values": [ "up", "right", "down", "left" ],
-      "examples": [ "down" ],
       "category": "behavior"
     },
 

package/src/components/fab/use-fab.json

@@ -68,7 +68,6 @@
     "label": {
       "type": [ "String", "Number" ],
       "desc": "The label that will be shown when Fab is extended",
-      "default": "",
       "examples": [ "Button Label" ],
       "category": "content"
     },

package/src/components/field/QField.json

@@ -9,7 +9,6 @@
     "maxlength": {
       "type": [ "String", "Number" ],
       "desc": "Specify a max length of model",
-      "examples": [ "12" ],
       "category": "model"
     },
 

package/src/components/file/QFile.js

@@ -10,6 +10,7 @@ import useFileFormDomProps from '../../composables/private/use-file-dom-props.js
 import { createComponent } from '../../utils/private/create.js'
 import { humanStorageSize } from '../../utils/format.js'
 import { prevent } from '../../utils/event.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QFile',
@@ -285,9 +286,11 @@ export default createComponent({
     Object.assign(proxy, {
       removeAtIndex,
       removeFile,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     })
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value)
+
     return useField(state)
   }
 })

package/src/components/file/QFile.json

@@ -49,22 +49,19 @@
             "filesNumber": {
               "type": "Number",
               "required": true,
-              "desc": "Number of picked files",
-              "examples": [ 5 ]
+              "desc": "Number of picked files"
             },
             "maxFiles": {
               "type": [ "Number", "String" ],
               "required": true,
-              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
-              "examples": [ 5 ]
+              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value"
             }
           }
         }
       },
       "returns": {
         "type": "String",
-        "desc": "String to display for the counter label",
-        "__exemption": [ "examples" ]
+        "desc": "String to display for the counter label"
       },
       "examples": [
         ":counter-label=\"counterLabelFn\""
@@ -105,14 +102,12 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "Selection index",
-          "examples": [ 0 ]
+          "desc": "Selection index"
         },
 
         "file": {
           "type": "File",
-          "desc": "File object",
-          "__exemption": [ "examples" ]
+          "desc": "File object"
         },
 
         "ref": {
@@ -128,8 +123,7 @@
       "scope": {
         "files": {
           "type": [ "FileList", "Array" ],
-          "desc": "Array of File objects",
-          "__exemption": [ "examples" ]
+          "desc": "Array of File objects"
         },
 
         "ref": {
@@ -154,8 +148,7 @@
         "index": {
           "type": "Number",
           "desc": "Index at which to remove selection",
-          "required": true,
-          "examples": [ 0 ]
+          "required": true
         }
       }
     },
@@ -166,19 +159,25 @@
         "file": {
           "type": "File",
           "desc": "File to remove (instance of File)",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         }
       }
     },
 
     "getNativeElement": {
-      "desc": "Get the native input DOM Element",
+      "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
       "returns": {
-        "type": "Object",
-        "desc": "The underlying native input DOM Element",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "The underlying native input DOM Element"
       }
     }
+  },
+
+  "computedProps": {
+    "nativeEl": {
+      "type": "Element",
+      "desc": "The native input DOM Element",
+      "addedIn": "v2.10.1"
+    }
   }
 }

package/src/components/footer/QFooter.json

@@ -35,7 +35,6 @@
       "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": 50,
-      "examples": [ "150" ],
       "category": "behavior"
     }
   },

package/src/components/form/QForm.js

@@ -19,7 +19,7 @@ export default createComponent({
     onSubmit: Function
   },
 
-  emits: [ 'reset', 'validation-success', 'validation-error' ],
+  emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
   setup (props, { slots, emit }) {
     const vm = getCurrentInstance()
@@ -36,7 +36,7 @@ export default createComponent({
       const index = ++validateIndex
 
       const emitEvent = (res, ref) => {
-        emit('validation-' + (res === true ? 'success' : 'error'), ref)
+        emit('validation' + (res === true ? 'Success' : 'Error'), ref)
       }
 
       const validateComponent = comp => {
@@ -138,7 +138,9 @@ export default createComponent({
       addFocusFn(() => {
         if (rootRef.value === null) { return }
 
-        const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
+        const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+          || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+          || rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })

package/src/components/form/QForm.json

@@ -41,8 +41,7 @@
       "params": {
         "evt": {
           "type": [ "Event", "SubmitEvent" ],
-          "desc": "Form submission event object",
-          "__exemption": [ "examples" ]
+          "desc": "Form submission event object"
         }
       }
     },
@@ -114,8 +113,7 @@
       "desc": "Get array of children vue components that support validation",
       "returns": {
         "type": "Array",
-        "desc": "Vue components that support Quasar validation API",
-        "__exemption": [ "examples" ]
+        "desc": "Vue components that support Quasar validation API"
       }
     }
   }

package/src/components/header/QHeader.json

@@ -25,9 +25,6 @@
       "type": "Number",
       "desc": "Amount of scroll (in pixels) that should trigger a 'reveal' state change",
       "default": 250,
-      "examples": [
-        ":reveal-offset=\"500\""
-      ],
       "category": "behavior"
     },
 
@@ -45,7 +42,6 @@
       "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
       "default": 50,
-      "examples": [ "150" ],
       "category": "behavior"
     }
   },

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

@@ -8,7 +8,6 @@
       "type": "Number",
       "desc": "Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance",
       "default": 500,
-      "examples": [ ":offset=\"250\"" ],
       "category": "behavior"
     },
 
@@ -16,7 +15,6 @@
       "type": [ "String", "Number" ],
       "desc": "Debounce amount (in milliseconds)",
       "default": 100,
-      "examples": [ "0", "530" ],
       "category": "behavior"
     },
 
@@ -24,7 +22,6 @@
       "type": "Number",
       "desc": "Initialize the pagination index (used for the @load event)",
       "default": 0,
-      "examples": [ 2, 3 ],
       "category": "behavior"
     },
 
@@ -59,8 +56,7 @@
       "params": {
         "index": {
           "type": "Number",
-          "desc": "The index parameter can be used to make some sort of pagination on the content you load. It takes numeric values starting with 1 and incrementing with each call",
-          "examples": [ 12 ]
+          "desc": "The index parameter can be used to make some sort of pagination on the content you load. It takes numeric values starting with 1 and incrementing with each call"
         },
         "done": {
           "type": "Function",
@@ -99,7 +95,14 @@
     },
 
     "setIndex": {
-      "desc": "Overwrite the current pagination index"
+      "desc": "Overwrite the current pagination index",
+      "params": {
+        "newIndex": {
+          "type": "Number",
+          "desc": "New pagination index",
+          "required": true
+        }
+      }
     },
 
     "updateScrollTarget": {

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

@@ -30,7 +30,7 @@ export default createComponent({
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
-    const { transition, transitionStyle } = useTransition(props, computed(() => props.showing))
+    const { transitionProps, transitionStyle } = useTransition(props)
 
     const classes = computed(() =>
       'q-inner-loading absolute-full column flex-center'
@@ -74,9 +74,6 @@ export default createComponent({
         : null
     }
 
-    return () => h(Transition, {
-      name: transition.value,
-      appear: true
-    }, getContent)
+    return () => h(Transition, transitionProps.value, getContent)
   }
 })

package/src/components/input/QInput.js

@@ -9,6 +9,7 @@ import useKeyComposition from '../../composables/private/use-key-composition.js'
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QInput',
@@ -415,9 +416,11 @@ export default createComponent({
     Object.assign(proxy, {
       focus,
       select,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     })
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value)
+
     return renderFn
   }
 })

package/src/components/input/QInput.json

@@ -28,21 +28,18 @@
         "text", "password", "textarea", "email", "search",
         "tel", "file", "number", "url", "time", "date"
       ],
-      "examples": [ "password" ],
       "category": "general"
     },
 
     "debounce": {
       "type": [ "String", "Number" ],
       "desc": "Debounce amount (in milliseconds) when updating model",
-      "examples": [ "0", "530" ],
       "category": "model"
     },
 
     "maxlength": {
       "type": [ "String", "Number" ],
       "desc": "Specify a max length of model",
-      "examples": [ "12" ],
       "category": "model"
     },
 
@@ -118,12 +115,19 @@
     },
 
     "getNativeElement": {
-      "desc": "Get the native input/textarea DOM Element",
+      "desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
       "returns": {
-        "type": "Object",
-        "desc": "The underlying native input/textarea DOM Element",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "The underlying native input/textarea DOM Element"
       }
     }
+  },
+
+  "computedProps": {
+    "nativeEl": {
+      "type": "Element",
+      "desc": "The native input/textarea DOM Element",
+      "addedIn": "v2.10.1"
+    }
   }
 }

package/src/components/input/use-mask.js

@@ -186,7 +186,7 @@ export default function (props, emit, emitValue, inputRef) {
 
     computedMask = mask
     computedUnmask = val => {
-      const unmaskMatch = unmaskMatcher.exec(val)
+      const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length))
       if (unmaskMatch !== null) {
         val = unmaskMatch.slice(1).join('')
       }

package/src/components/intersection/QIntersection.json

@@ -55,7 +55,6 @@
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": 300,
-      "examples": [ 500, "1200" ],
       "category": "behavior",
       "addedIn": "v2.3.1"
     },

package/src/components/item/QItem.json

@@ -109,8 +109,7 @@
           },
           "returns": {
             "type": "Promise<any>",
-            "desc": "Returns the router's navigation promise",
-            "__exemption": [ "examples" ]
+            "desc": "Returns the router's navigation promise"
           }
         }
       }

package/src/components/item/QItemLabel.json

@@ -25,7 +25,6 @@
     "lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines;",
-      "examples": [ "1", "3", ":lines=\"2\"" ],
       "category": "content|behavior"
     }
   },

package/src/components/item/QList.js

@@ -13,7 +13,12 @@ export default createComponent({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   setup (props, { slots }) {
@@ -29,6 +34,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 })

package/src/components/item/QList.json

@@ -26,6 +26,13 @@
       "type": "Boolean",
       "desc": "Applies a material design-like padding on top and bottom",
       "category": "content"
+    },
+
+    "tag": {
+      "extends": "tag",
+      "default": "div",
+      "examples": [ "div", "ul", "ol" ],
+      "addedIn": "v2.10.1"
     }
   },
 

package/src/components/knob/QKnob.js

@@ -45,7 +45,7 @@ export default createComponent({
     readonly: Boolean
   },
 
-  emits: [ 'update:modelValue', 'change', 'drag-value' ],
+  emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
@@ -92,7 +92,7 @@ export default createComponent({
       )
     )
 
-    const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+    const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length)
     const step = computed(() => (props.step === 0 ? 1 : props.step))
     const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true)
 
@@ -227,7 +227,7 @@ export default createComponent({
 
       newModel = between(newModel, innerMin.value, innerMax.value)
 
-      emit('drag-value', newModel)
+      emit('dragValue', newModel)
 
       if (model.value !== newModel) {
         model.value = newModel

package/src/components/knob/QKnob.json

@@ -16,21 +16,18 @@
     "min": {
       "type": "Number",
       "desc": "The minimum value that the model (the knob value) should start at",
-      "examples": [ "20", "5" ],
       "category": "model"
     },
 
     "max": {
       "type": "Number",
       "desc": "The maximum value that the model (the knob value) should go to",
-      "examples": [ "100", "50" ],
       "category": "model"
     },
 
     "inner-min": {
       "type": "Number",
       "desc": "Inner minimum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be higher or equal to 'min' prop; Defaults to 'min' prop",
-      "examples": [ ":inner-min=\"0\"" ],
       "category": "model",
       "addedIn": "v2.5.4"
     },
@@ -38,16 +35,14 @@
     "inner-max": {
       "type": "Number",
       "desc": "Inner maximum value of the model; Use in case you need the model value to be inside of the track's min-max values; Needs to be lower or equal to 'max' prop; Defaults to 'max' prop",
-      "examples": [ ":inner-max=\"100\"" ],
       "category": "model",
       "addedIn": "v2.5.4"
     },
 
     "step": {
       "type": "Number",
-      "default": "1",
+      "default": 1,
       "desc": "A number representing steps in the value of the model, while adjusting the knob",
-      "examples": [ "1", "5" ],
       "category": "model"
     },
 
@@ -89,7 +84,6 @@
       "type": "Number",
       "default": 0.2,
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
-      "examples": [ 1, 0.3 ],
       "category": "style"
     },
 
@@ -97,7 +91,6 @@
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
       "default": 0,
-      "examples": [ 0, 40, 90 ],
       "category": "content"
     },
 
@@ -142,8 +135,7 @@
       "params": {
         "value": {
           "type": "Number",
-          "desc": "New model value",
-          "examples": [ 12 ]
+          "desc": "New model value"
         }
       }
     },
@@ -153,8 +145,7 @@
       "params": {
         "value": {
           "type": "Number",
-          "desc": "New model value",
-          "examples": [ 12 ]
+          "desc": "New model value"
         }
       }
     }

package/src/components/layout/QLayout.js

@@ -90,7 +90,7 @@ export default createComponent({
       if (height.value !== newHeight) {
         resized = true
         height.value = newHeight
-        props.onScrollHeight !== void 0 && emit('scroll-height', newHeight)
+        props.onScrollHeight !== void 0 && emit('scrollHeight', newHeight)
         updateScrollbarWidth()
       }
       if (width.value !== newWidth) {

package/src/components/layout/QLayout.json

@@ -38,14 +38,12 @@
             "height": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height",
-              "examples": [ 575 ]
+              "desc": "Layout height"
             },
             "width": {
               "type": "Number",
               "required": true,
-              "desc": "Layout height",
-              "examples": [ 575 ]
+              "desc": "Layout height"
             }
           }
         }
@@ -62,8 +60,7 @@
             "position": {
               "type": "Number",
               "required": true,
-              "desc": "Scroll offset from top (vertical)",
-              "examples": [ 120 ]
+              "desc": "Scroll offset from top (vertical)"
             },
 
             "direction": {
@@ -80,15 +77,13 @@
             "delta": {
               "type": "Number",
               "required": true,
-              "desc": "Vertical delta distance since event was last emitted",
-              "examples": [ 120 ]
+              "desc": "Vertical delta distance since event was last emitted"
             },
 
             "inflectionPoint": {
               "type": "Number",
               "required": true,
-              "desc": "Scroll offset from top (vertical)",
-              "examples": [ 120 ]
+              "desc": "Scroll offset from top (vertical)"
             }
           }
         }
@@ -100,8 +95,7 @@
       "params": {
         "height": {
           "type": "Number",
-          "desc": "New scroll height of layout",
-          "examples": [ 1442 ]
+          "desc": "New scroll height of layout"
         }
       }
     }

package/src/components/linear-progress/QLinearProgress.json

@@ -10,14 +10,12 @@
       "type": "Number",
       "desc": "Progress value (0.0 < x < 1.0)",
       "default": 0,
-      "examples": [ ":value=\"0.28\"" ],
       "category": "model"
     },
 
     "buffer": {
       "type": "Number",
       "desc": "Optional buffer value (0.0 < x < 1.0)",
-      "examples": [ ":buffer=\"0.78\"" ],
       "category": "behavior"
     },