quasar 2.10.0 → 2.10.2

package/src/components/editor/QEditor.json

@@ -151,8 +151,7 @@
               "type": "Boolean",
               "desc": "Highlight the toolbar button, when a child option has been selected."
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "category": "toolbar"
@@ -308,8 +307,7 @@
       "desc": "Retrieve the content of the Editor",
       "returns": {
         "type": "Element",
-        "desc": "Provides the pure HTML within the editable area",
-        "__exemption": [ "examples" ]
+        "desc": "Provides the pure HTML within the editable area"
       }
     }
   },
@@ -318,8 +316,7 @@
     "caret": {
       "type": "Object",
       "tsType": "QEditorCaret",
-      "desc": "The current caret state",
-      "__exemption": [ "examples" ]
+      "desc": "The current caret state"
     }
   }
 }

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

@@ -61,7 +61,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'after-show', 'after-hide'
+    'click', 'afterShow', 'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -143,7 +143,6 @@ export default createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-owns': targetUid,
         'aria-controls': targetUid,
         'aria-label': toggleAriaLabel
       }
@@ -170,11 +169,11 @@ export default createComponent({
     }
 
     function onShow () {
-      emit('after-show')
+      emit('afterShow')
     }
 
     function onHide () {
-      emit('after-hide')
+      emit('afterHide')
     }
 
     function enterGroup () {

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.js

@@ -77,13 +77,11 @@ export default createComponent({
 
     const actionAttrs = computed(() => {
       const attrs = {
-        id: targetUid
+        id: targetUid,
+        role: 'menu'
       }
 
-      if (showing.value === true) {
-        attrs.role = 'menu'
-      }
-      else {
+      if (showing.value !== true) {
         attrs[ 'aria-hidden' ] = 'true'
       }
 
@@ -152,7 +150,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 

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/QFab.sass

@@ -137,7 +137,8 @@
 
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      // needed when rtlcss is enabled
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
 
   &--align-left

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/img/QImg.js

@@ -6,7 +6,6 @@ import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 const defaultRatio = 16 / 9
 
@@ -74,7 +73,7 @@ export default createComponent({
 
     const images = [
       ref(null),
-      ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+      ref(getPlaceholderSrc())
     ]
 
     const position = ref(0)
@@ -114,18 +113,24 @@ export default createComponent({
         : null
     }
 
+    function getPlaceholderSrc () {
+      return props.placeholderSrc !== void 0
+        ? { src: props.placeholderSrc }
+        : null
+    }
+
     function addImage (imgProps) {
       clearTimeout(loadTimer)
       hasError.value = false
 
       if (imgProps === null) {
         isLoading.value = false
-        images[ 0 ].value = null
-        images[ 1 ].value = null
-        return
+        images[ position.value ^ 1 ].value = getPlaceholderSrc()
+      }
+      else {
+        isLoading.value = true
       }
 
-      isLoading.value = true
       images[ position.value ].value = imgProps
     }
 
@@ -160,7 +165,7 @@ export default createComponent({
       // if component has been already destroyed
       if (loadTimer === null) { return }
 
-      position.value = position.value === 1 ? 0 : 1
+      position.value = position.value ^ 1
       images[ position.value ].value = null
       isLoading.value = false
       hasError.value = false
@@ -171,19 +176,11 @@ export default createComponent({
       clearTimeout(loadTimer)
       isLoading.value = false
       hasError.value = true
-      images[ 0 ].value = null
-      images[ 1 ].value = null
+      images[ position.value ].value = null
+      images[ position.value ^ 1 ].value = getPlaceholderSrc()
       emit('error', err)
     }
 
-    function getContainer (key, child) {
-      return h(
-        'div',
-        { class: 'q-img__container absolute-full', key },
-        child
-      )
-    }
-
     function getImage (index) {
       const img = images[ index ].value
 
@@ -211,7 +208,11 @@ export default createComponent({
         data.class += ' q-img__image--loaded'
       }
 
-      return getContainer('img' + index, h('img', data))
+      return h(
+        'div',
+        { class: 'q-img__container absolute-full', key: 'img' + index },
+        h('img', data)
+      )
     }
 
     function getContent () {
@@ -242,7 +243,7 @@ export default createComponent({
     }
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      if (__QUASAR_SSR_CLIENT__ && isRuntimeSsrPreHydration.value === true) {
+      if (__QUASAR_SSR_CLIENT__) {
         onMounted(() => {
           addImage(getCurrentSrc())
         })

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',
@@ -39,7 +40,8 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change'
+    'paste', 'change',
+    'keydown', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -97,7 +99,7 @@ export default createComponent({
       }
 
       if (props.autogrow === true) {
-        evt.onAnimationend = adjustHeight
+        evt.onAnimationend = onAnimationend
       }
 
       return evt
@@ -252,6 +254,11 @@ export default createComponent({
       props.autogrow === true && adjustHeight()
     }
 
+    function onAnimationend (e) {
+      emit('animationend', e)
+      adjustHeight()
+    }
+
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
         if (
@@ -415,9 +422,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('')
       }
@@ -420,6 +420,8 @@ export default function (props, emit, emitValue, inputRef) {
   }
 
   function onMaskedKeydown (e) {
+    emit('keydown', e)
+
     if (shouldIgnoreKey(e) === true) {
       return
     }

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