quasar 2.5.0 → 2.5.4

package/src/api.extends.json

@@ -139,6 +139,11 @@
       "default": true,
       "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
       "category": "style"
+    },
+
+    "evt": {
+      "type": "Event",
+      "desc": "JS event object"
     }
   },
 
@@ -165,10 +170,8 @@
       "desc": "Emitted after component has triggered show()",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -177,10 +180,8 @@
       "desc": "Emitted when component triggers show() but before it finishes doing it",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -193,10 +194,8 @@
       "desc": "Emitted after component has triggered hide()",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -205,10 +204,8 @@
       "desc": "Emitted when component triggers hide() but before it finishes doing it",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     },
@@ -221,10 +218,8 @@
       "desc": "Emitted when user clicks/taps on the component",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     }
@@ -235,10 +230,8 @@
       "desc": "Triggers component to show",
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       }
     },
@@ -247,10 +240,8 @@
       "desc": "Triggers component to hide",
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       }
     },
@@ -258,10 +249,8 @@
     "toggle": {
       "params": {
         "evt": {
-          "type": "Object",
-          "required": false,
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": false
         }
       },
       "desc": "Triggers component to toggle between show/hide"

package/src/components/btn/QBtn.json

@@ -41,9 +41,7 @@
       "desc": "Emulate click on QBtn",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }
@@ -54,9 +52,8 @@
       "desc": "Emitted when component is clicked (activated)",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false",
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "desc": "JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false"
         },
         "navigateFn": {
           "type": "Function",

package/src/components/carousel/QCarousel.json

@@ -144,10 +144,8 @@
           "desc": "Default trigger when clicked/tapped on",
           "params": {
             "evt": {
-              "type": "Object",
-              "desc": "JS event object",
-              "required": true,
-              "__exemption": [ "examples" ]
+              "extends": "evt",
+              "required": true
             }
           },
           "returns": null

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

@@ -122,10 +122,8 @@
           "__exemption": [ "examples" ]
         },
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     }

package/src/components/chip/QChip.json

@@ -115,9 +115,7 @@
       "desc": "Emitted on QChip click if 'clickable' property is set",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/components/fab/QFabAction.json

@@ -59,9 +59,7 @@
       "desc": "Emulate click on QFabAction",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

package/src/components/field/QField.json

@@ -81,9 +81,7 @@
       "desc": "Emitted when component gets focused",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -92,9 +90,7 @@
       "desc": "Emitted when component loses focus",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

package/src/components/field/QField.sass

@@ -45,6 +45,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     line-height: 1
     color: rgba(0,0,0,.54)
     padding: 8px 12px 0
+    backface-visibility: hidden
 
     &--animated
       transform: translateY(100%)
@@ -190,6 +191,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     text-transform: inherit
     transform-origin: left top
     transition: transform $field-transition, max-width $field-transition-label-right-up
+    backface-visibility: hidden
 
   &--float .q-field__label
     max-width: 133%

package/src/components/form/QForm.js

@@ -33,7 +33,7 @@ export default createComponent({
         ? shouldFocus
         : props.noErrorFocus !== true
 
-      validateIndex++
+      const index = ++validateIndex
 
       const emitEvent = (res, ref) => {
         emit('validation-' + (res === true ? 'success' : 'error'), ref)
@@ -47,7 +47,7 @@ export default createComponent({
           promises.push(
             valid.then(
               valid => ({ valid, comp }),
-              error => ({ valid: false, comp, error })
+              err => ({ valid: false, comp, err })
             )
           )
         }
@@ -71,34 +71,33 @@ export default createComponent({
         return Promise.resolve(true)
       }
 
-      const index = validateIndex
-
-      return Promise.all(promises).then(
-        res => {
-          if (index === validateIndex) {
-            const errors = res.filter(r => r.valid !== true)
+      return Promise.all(promises).then(res => {
+        const errors = res.filter(r => r.valid !== true)
 
-            if (errors.length === 0) {
-              emitEvent(true)
-              return true
-            }
+        if (errors.length === 0) {
+          index === validateIndex && emitEvent(true)
+          return true
+        }
 
-            const { valid, comp } = errors[ 0 ]
+        const { valid, comp, err } = errors[ 0 ]
 
-            emitEvent(false, comp)
+        // if not outdated already
+        if (index === validateIndex) {
+          err !== void 0 && console.error(err)
 
-            if (
-              focus === true
-              && valid !== true
-              && typeof comp.focus === 'function'
-            ) {
-              comp.focus()
-            }
+          emitEvent(false, comp)
 
-            return false
+          if (
+            focus === true
+            && valid !== true
+            && typeof comp.focus === 'function'
+          ) {
+            comp.focus()
           }
         }
-      )
+
+        return false
+      })
     }
 
     function resetValidation () {
@@ -112,8 +111,11 @@ export default createComponent({
     function submit (evt) {
       evt !== void 0 && stopAndPrevent(evt)
 
+      const index = validateIndex + 1
+
       validate().then(val => {
-        if (val === true) {
+        // if not outdated && validation succeeded
+        if (index === validateIndex && val === true) {
           if (props.onSubmit !== void 0) {
             emit('submit', evt)
           }

package/src/components/form/QForm.json

@@ -37,7 +37,13 @@
 
   "events": {
     "submit": {
-      "desc": "Emitted when all validations have passed when tethered to a submit button"
+      "desc": "Emitted when all validations have passed when tethered to a submit button",
+      "params": {
+        "evt": {
+          "type": "SubmitEvent",
+          "desc": "Form submission event object"
+        }
+      }
     },
 
     "reset": {
@@ -89,9 +95,7 @@
       "desc": "Manually trigger form validation and submit",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -100,9 +104,7 @@
       "desc": "Manually trigger form reset",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/components/input/QInput.json

@@ -89,9 +89,7 @@
       "desc": "Emitted when component gets focused",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -100,9 +98,7 @@
       "desc": "Emitted when component loses focus",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 
 import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
 
@@ -297,7 +297,7 @@ export default function (props, emit, emitValue, inputRef) {
       ? unmaskValue(masked)
       : masked
 
-    props.modelValue !== val && emitValue(val, true)
+    String(props.modelValue) !== val && emitValue(val, true)
   }
 
   function moveCursorForPaste (inp, start, end) {

package/src/components/knob/QKnob.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onMounted, withDirectives, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 import TouchPan from '../../directives/TouchPan.js'
@@ -6,6 +6,7 @@ import TouchPan from '../../directives/TouchPan.js'
 import { createComponent } from '../../utils/private/create.js'
 import { position, stopAndPrevent } from '../../utils/event.js'
 import { between, normalizeToInterval } from '../../utils/format.js'
+import { hDir } from '../../utils/private/render.js'
 
 import { useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
 import { useCircularCommonProps } from '../circular-progress/use-circular-progress.js'
@@ -26,6 +27,9 @@ export default createComponent({
       required: true
     },
 
+    innerMin: Number,
+    innerMax: Number,
+
     step: {
       type: Number,
       default: 1,
@@ -50,27 +54,33 @@ export default createComponent({
     const model = ref(props.modelValue)
     const dragging = ref(false)
 
-    let centerPosition, $el
+    const innerMin = computed(() => (
+      isNaN(props.innerMin) === true || props.innerMin < props.min
+        ? props.min
+        : props.innerMin
+    ))
+    const innerMax = computed(() => (
+      isNaN(props.innerMax) === true || props.innerMax > props.max
+        ? props.max
+        : props.innerMax
+    ))
 
-    watch(() => props.modelValue, val => {
-      if (val < props.min) {
-        model.value = props.min
-      }
-      else if (val > props.max) {
-        model.value = props.max
-      }
-      else {
-        if (val !== model.value) {
-          model.value = val
-        }
-        return
-      }
+    let centerPosition
 
-      if (model.value !== props.modelValue) {
-        emit('update:modelValue', model.value)
-        emit('change', model.value)
-      }
-    })
+    function normalizeModel () {
+      model.value = props.modelValue === null
+        ? innerMin.value
+        : between(props.modelValue, innerMin.value, innerMax.value)
+
+      updateValue(true)
+    }
+
+    watch(
+      () => `${ props.modelValue }|${ innerMin.value }|${ innerMax.value }`,
+      normalizeModel
+    )
+
+    normalizeModel()
 
     const editable = computed(() => props.disable === false && props.readonly === false)
 
@@ -138,7 +148,7 @@ export default createComponent({
     })
 
     function updateCenterPosition () {
-      const { top, left, width, height } = $el.getBoundingClientRect()
+      const { top, left, width, height } = proxy.$el.getBoundingClientRect()
       centerPosition = {
         top: top + height / 2,
         left: left + width / 2
@@ -168,8 +178,8 @@ export default createComponent({
 
       model.value = between(
         parseFloat((model.value + offset).toFixed(decimals.value)),
-        props.min,
-        props.max
+        innerMin.value,
+        innerMax.value
       )
 
       updateValue()
@@ -212,7 +222,7 @@ export default createComponent({
         newModel = parseFloat(newModel.toFixed(decimals.value))
       }
 
-      newModel = between(newModel, props.min, props.max)
+      newModel = between(newModel, innerMin.value, innerMax.value)
 
       emit('drag-value', newModel)
 
@@ -240,16 +250,12 @@ export default createComponent({
       return h('input', formAttrs.value)
     }
 
-    onMounted(() => {
-      $el = proxy.$el
-    })
-
     return () => {
       const data = {
         class: classes.value,
         role: 'slider',
-        'aria-valuemin': props.min,
-        'aria-valuemax': props.max,
+        'aria-valuemin': innerMin.value,
+        'aria-valuemax': innerMax.value,
         'aria-valuenow': props.modelValue,
         ...attrs.value,
         ...circularProps.value,
@@ -262,18 +268,18 @@ export default createComponent({
         default: slots.default
       }
 
-      if (editable.value === true) {
-        if (props.name !== void 0) {
-          child.internal = getNameInput
-        }
-
-        return withDirectives(
-          h(QCircularProgress, data, child),
-          directives.value
-        )
+      if (editable.value === true && props.name !== void 0) {
+        child.internal = getNameInput
       }
 
-      return h(QCircularProgress, data, child)
+      return hDir(
+        QCircularProgress,
+        data,
+        child,
+        'knob',
+        editable.value,
+        () => directives.value
+      )
     }
   }
 })

package/src/components/knob/QKnob.json

@@ -27,6 +27,22 @@
       "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"
+    },
+
+    "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",

package/src/components/radio/QRadio.json

@@ -93,10 +93,8 @@
           "__exemption": [ "examples" ]
         },
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "extends": "evt",
+          "required": true
         }
       }
     }

package/src/components/select/QSelect.js

@@ -337,7 +337,7 @@ export default createComponent({
           itemProps[ 'aria-selected' ] = itemProps.active === true ? 'true' : 'false'
 
           if ($q.platform.is.desktop === true) {
-            itemProps.onMousemove = () => { setOptionIndex(index) }
+            itemProps.onMousemove = () => { menu.value === true && setOptionIndex(index) }
           }
         }
 
@@ -1385,6 +1385,7 @@ export default createComponent({
     Object.assign(proxy, {
       showPopup, hidePopup,
       removeAtIndex, add, toggleOption,
+      getOptionIndex: () => optionIndex.value,
       setOptionIndex, moveOptionSelection,
       filter, updateMenuPosition, updateInputValue,
       isOptionSelected,

package/src/components/select/QSelect.json

@@ -628,9 +628,7 @@
       "desc": "Emitted when the select options menu or dialog is shown.",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -639,9 +637,7 @@
       "desc": "Emitted when the select options menu or dialog is hidden.",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },
@@ -718,13 +714,26 @@
       }
     },
 
+    "getOptionIndex": {
+      "desc": "Gets current focused option index from menu; It's -1 if no option is focused",
+      "params": {
+        "index": {
+          "type": "Number",
+          "required": true,
+          "desc": "Index of option from menu; -1 if no option is focused",
+          "examples": [ 10 ]
+        }
+      },
+      "addedIn": "v2.5.4"
+    },
+
     "setOptionIndex": {
-      "desc": "Sets option from menu as 'focused'",
+      "desc": "Sets option from menu as 'focused'; -1 to focus none",
       "params": {
         "index": {
           "type": "Number",
           "required": true,
-          "desc": "Index of option from menu",
+          "desc": "Index of option from menu; -1 to focus none",
           "examples": [ 10 ]
         }
       }

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

@@ -29,7 +29,7 @@
     "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": [ ":max-value=\"100\"" ],
+      "examples": [ ":inner-max=\"100\"" ],
       "category": "model",
       "addedIn": "v2.4"
     },