quasar 2.9.2 → 2.10.1

package/src/components/header/QHeader.js

@@ -4,7 +4,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hUniqueSlot } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QHeader',
@@ -33,9 +33,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QHeader needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

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

@@ -166,7 +166,7 @@ export default function (props, emit, emitValue, inputRef) {
         '^'
         + unmask.join('')
         + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-        + '[' + unmaskChar + ']*$'
+        + (unmaskChar === '' ? '' : '[' + unmaskChar + ']*') + '$'
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {
@@ -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.js

@@ -136,6 +136,7 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       }

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 }, 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"
     },
 

package/src/components/menu/QMenu.js

@@ -79,7 +79,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'escape-key'
+    'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -100,7 +100,7 @@ export default createComponent({
     const isDark = useDark(props, $q)
     const { registerTick, removeTick } = useTick()
     const { registerTimeout } = useTimeout()
-    const { transition, transitionStyle } = useTransition(props, showing)
+    const { transitionProps, transitionStyle } = useTransition(props)
     const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget)
 
     const { anchorEl, canShow } = useAnchor({ showing })
@@ -180,7 +180,10 @@ export default createComponent({
         let node = innerRef.value
 
         if (node && node.contains(document.activeElement) !== true) {
-          node = node.querySelector('[autofocus], [data-autofocus]') || node
+          node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+            || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+            || node.querySelector('[autofocus], [data-autofocus]')
+            || node
           node.focus({ preventScroll: true })
         }
       })
@@ -317,7 +320,7 @@ export default createComponent({
     }
 
     function onEscapeKey (evt) {
-      emit('escape-key')
+      emit('escapeKey')
       hide(evt)
     }
 
@@ -345,7 +348,7 @@ export default createComponent({
     function renderPortalContent () {
       return h(
         Transition,
-        { name: transition.value, appear: true },
+        transitionProps.value,
         () => (
           showing.value === true
             ? h('div', {

package/src/components/menu/QMenu.json

@@ -30,7 +30,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 
@@ -42,7 +41,6 @@
         "center left", "center middle", "center right", "center start", "center end",
         "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
       ],
-      "examples": [ "top left", "bottom right" ],
       "category": "position"
     },
 

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

@@ -74,7 +74,7 @@ export default createComponent({
     )
 
     const attrs = computed(() => {
-      const attrs = {}
+      const attrs = { role: 'group' }
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup'

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

@@ -56,7 +56,6 @@
       "desc": "The type of input component to be used",
       "values": [ "radio", "checkbox", "toggle" ],
       "default": "radio",
-      "examples": [ "checkbox" ],
       "category": "content"
     },
 
@@ -124,8 +123,7 @@
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
               "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "addedIn": "v2.2"
@@ -159,8 +157,7 @@
               "desc": "Any other props from QToggle, QCheckbox, or QRadio",
               "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "addedIn": "v2.2"

package/src/components/page/QPage.js

@@ -2,7 +2,7 @@ import { h, computed, inject, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
-import { pageContainerKey, layoutKey } from '../../utils/private/symbols.js'
+import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QPage',
@@ -15,10 +15,17 @@ export default createComponent({
   setup (props, { slots }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey)
-    inject(pageContainerKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
+      console.error('QPage needs to be a deep child of QLayout')
+      return emptyRenderFn
+    }
+
+    const $pageContainer = inject(pageContainerKey, emptyRenderFn)
+    if ($pageContainer === emptyRenderFn) {
       console.error('QPage needs to be child of QPageContainer')
-    })
+      return emptyRenderFn
+    }
 
     const style = computed(() => {
       const offset

package/src/components/page/QPage.json

@@ -16,19 +16,16 @@
       "params": {
         "offset": {
           "type": "Number",
-          "desc": "Header + Footer height (in pixels)",
-          "examples": [ 152 ]
+          "desc": "Header + Footer height (in pixels)"
         },
         "height": {
           "type": "Number",
-          "desc": "Value in pixels of container height (if containerized) or window height otherwise",
-          "examples": [ 1200 ]
+          "desc": "Value in pixels of container height (if containerized) or window height otherwise"
         }
       },
       "returns": {
         "type": "Object",
-        "desc": "Object with CSS properties to apply to Page DOM element",
-        "__exemption": [ "examples" ]
+        "desc": "Object with CSS properties to apply to Page DOM element"
       },
       "default": "(see source code)",
       "examples": [ "(see source code)" ],

package/src/components/page/QPageContainer.js

@@ -2,7 +2,7 @@ import { h, computed, provide, inject, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
-import { pageContainerKey, layoutKey } from '../../utils/private/symbols.js'
+import { pageContainerKey, layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QPageContainer',
@@ -10,9 +10,11 @@ export default createComponent({
   setup (_, { slots }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QPageContainer needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     provide(pageContainerKey, true)
 

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

@@ -10,7 +10,6 @@
       "type": "Number",
       "desc": "Scroll offset (in pixels) from which point the component is shown on page; Measured from the top of the page (or from the bottom if in 'reverse' mode)",
       "default": 1000,
-      "examples": [ 550 ],
       "category": "behavior"
     },
 
@@ -24,7 +23,6 @@
       "type": "Number",
       "desc": "Duration (in milliseconds) of the scrolling until it reaches its target",
       "default": 300,
-      "examples": [ 500 ],
       "category": "behavior"
     },
 

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

@@ -13,7 +13,6 @@
         "bottom-right", "bottom-left",
         "top", "right", "bottom", "left"
       ],
-      "examples": [ "top-right" ],
       "category": "position"
     },