quasar 2.5.1 → 2.5.5

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

@@ -17,7 +17,7 @@ import { useFormProps, useFormInputNameAttr } from '../../composables/private/us
 import useKeyComposition from '../../composables/private/use-key-composition.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { isDeepEqual } from '../../utils/private/is.js'
+import { isDeepEqual, isPlainObject } from '../../utils/private/is.js'
 import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
 import { normalizeToInterval } from '../../utils/format.js'
 import { shouldIgnoreKey, isKeyCode } from '../../utils/private/key-composition.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) }
           }
         }
 
@@ -602,7 +602,7 @@ export default createComponent({
 
       return typeof val === 'function'
         ? val
-        : opt => (Object(opt) === opt && val in opt ? opt[ val ] : opt)
+        : opt => (isPlainObject(opt) === true && val in opt ? opt[ val ] : opt)
     }
 
     function isOptionSelected (opt) {
@@ -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/slide-transition/QSlideTransition.js

@@ -65,8 +65,8 @@ export default createComponent({
 
       timer = setTimeout(() => {
         el.style.height = `${ el.scrollHeight }px`
-        animListener = ev => {
-          if (Object(ev) !== ev || ev.target === el) {
+        animListener = evt => {
+          if (Object(evt) !== evt || evt.target === el) {
             end(el, 'show')
           }
         }
@@ -91,8 +91,8 @@ export default createComponent({
 
       timer = setTimeout(() => {
         el.style.height = 0
-        animListener = ev => {
-          if (Object(ev) !== ev || ev.target === el) {
+        animListener = evt => {
+          if (Object(evt) !== evt || evt.target === el) {
             end(el, 'hide')
           }
         }

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

@@ -7,7 +7,7 @@ import { useFormProps, useFormInject } from '../../composables/private/use-form.
 
 import { between } from '../../utils/format.js'
 import { position } from '../../utils/event.js'
-import { isNumber } from '../../utils/private/is.js'
+import { isNumber, isPlainObject } from '../../utils/private/is.js'
 import { hDir } from '../../utils/private/render.js'
 
 const markerPrefixClass = 'q-slider__marker-labels'
@@ -340,7 +340,7 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
     if (typeof def === 'function') {
       return markerTicks.value.map(value => {
         const item = def(value)
-        return Object(item) === item ? { ...item, value } : { value, label: item }
+        return isPlainObject(item) === true ? { ...item, value } : { value, label: item }
       })
     }
 
@@ -348,14 +348,14 @@ export default function ({ updateValue, updatePosition, getDragging, formAttrs }
 
     if (Array.isArray(def) === true) {
       return def
-        .map(item => (Object(item) === item ? item : { value: item }))
+        .map(item => (isPlainObject(item) === true ? item : { value: item }))
         .filter(filterFn)
     }
 
     return Object.keys(def).map(key => {
       const item = def[ key ]
       const value = Number(key)
-      return Object(item) === item ? { ...item, value } : { value, label: item }
+      return isPlainObject(item) === true ? { ...item, value } : { value, label: item }
     }).filter(filterFn)
   }
 

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

package/src/components/stepper/QStep.json

@@ -45,6 +45,7 @@
 
     "done-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -55,6 +56,7 @@
 
     "active-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -65,6 +67,7 @@
 
     "error-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 

package/src/components/stepper/QStepper.json

@@ -54,6 +54,7 @@
 
     "done-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -64,6 +65,7 @@
 
     "active-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 
@@ -74,6 +76,7 @@
 
     "error-icon": {
       "extends": "icon",
+      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
       "category": "header"
     },
 

package/src/components/stepper/QStepper.sass

@@ -52,6 +52,7 @@
     &--error
       color: var(--q-negative)
 
+    &--error-with-icon
       .q-stepper__dot
         background: transparent !important
         span

package/src/components/stepper/StepHeader.js

@@ -47,23 +47,36 @@ export default createComponent({
 
     const hasPrefix = computed(() => {
       return props.step.prefix
-        && isActive.value === false
-        && isError.value === false
-        && isDone.value === false
+        && (isActive.value === false || props.stepper.activeIcon === 'none')
+        && (isError.value === false || props.stepper.errorIcon === 'none')
+        && (isDone.value === false || props.stepper.doneIcon === 'none')
     })
 
     const icon = computed(() => {
+      const defaultIcon = props.step.icon || props.stepper.inactiveIcon
+
       if (isActive.value === true) {
-        return props.step.activeIcon || props.stepper.activeIcon || $q.iconSet.stepper.active
+        const icon = props.step.activeIcon || props.stepper.activeIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.active
       }
+
       if (isError.value === true) {
-        return props.step.errorIcon || props.stepper.errorIcon || $q.iconSet.stepper.error
+        const icon = props.step.errorIcon || props.stepper.errorIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.error
       }
+
       if (isDisable.value === false && isDone.value === true) {
-        return props.step.doneIcon || props.stepper.doneIcon || $q.iconSet.stepper.done
+        const icon = props.step.doneIcon || props.stepper.doneIcon
+        return icon === 'none'
+          ? defaultIcon
+          : icon || $q.iconSet.stepper.done
       }
 
-      return props.step.icon || props.stepper.inactiveIcon
+      return defaultIcon
     })
 
     const color = computed(() => {
@@ -90,7 +103,9 @@ export default createComponent({
     const classes = computed(() => {
       return 'q-stepper__tab col-grow flex items-center no-wrap relative-position'
         + (color.value !== void 0 ? ` text-${ color.value }` : '')
-        + (isError.value === true ? ' q-stepper__tab--error' : '')
+        + (isError.value === true
+          ? ' q-stepper__tab--error q-stepper__tab--error-with-' + (hasPrefix.value === true ? 'prefix' : 'icon')
+          : '')
         + (isActive.value === true ? ' q-stepper__tab--active' : '')
         + (isDone.value === true ? ' q-stepper__tab--done' : '')
         + (headerNav.value === true ? ' q-stepper__tab--navigation q-focusable q-hoverable' : '')

package/src/components/table/QTable.json

@@ -1867,9 +1867,7 @@
       "desc": "Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         },
 
         "row": {
@@ -1890,9 +1888,7 @@
       "desc": "Emitted when user quickly double clicks/taps on a row; Is not emitted when using body/row/item scoped slots; Please check JS dblclick event support before using",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         },
 
         "row": {
@@ -1913,9 +1909,7 @@
       "desc": "Emitted when user right clicks/long taps on a row; Is not emitted when using body/row/item scoped slots",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         },
 
         "row": {
@@ -2075,10 +2069,8 @@
               "desc": "Were the rows added to selection (true) or removed from selection (false)"
             },
             "evt": {
-              "type": "Object",
-              "required": true,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "extends": "evt",
+              "required": true
             }
           }
         }

package/src/components/table/table-sort.js

@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 
 import { sortDate } from '../../utils/private/sort.js'
-import { isNumber, isDate } from '../../utils/private/is.js'
+import { isNumber, isDate, isPlainObject } from '../../utils/private/is.js'
 
 export const useTableSortProps = {
   sortMethod: Function,
@@ -73,7 +73,7 @@ export function useTableSort (props, computedPagination, colList, setPagination)
   function sort (col /* String(col name) or Object(col definition) */) {
     let sortOrder = props.columnSortOrder
 
-    if (col === Object(col)) {
+    if (isPlainObject(col) === true) {
       if (col.sortOrder) {
         sortOrder = col.sortOrder
       }

package/src/components/tabs/QRouteTab.json

@@ -10,9 +10,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/tabs/use-tab.js

@@ -108,9 +108,12 @@ export default function (props, slots, emit, routerProps) {
               $tabs.avoidRouteWatcher = false
             }
             else {
-              res.then(() => {
+              res.then(err => {
                 $tabs.avoidRouteWatcher = false
-                $tabs.updateModel({ name: props.name, fromRoute: true })
+
+                if (err === void 0) {
+                  $tabs.updateModel({ name: props.name, fromRoute: true })
+                }
               })
             }
           }
@@ -167,12 +170,12 @@ export default function (props, slots, emit, routerProps) {
     props.alert !== false && content.push(
       props.alertIcon !== void 0
         ? h(QIcon, {
-            class: 'q-tab__alert-icon',
-            color: props.alert !== true
-              ? props.alert
-              : void 0,
-            name: props.alertIcon
-          })
+          class: 'q-tab__alert-icon',
+          color: props.alert !== true
+            ? props.alert
+            : void 0,
+          name: props.alertIcon
+        })
         : h('div', {
           class: 'q-tab__alert'
             + (props.alert !== true ? ` text-${ props.alert }` : '')

package/src/components/time/QTime.js

@@ -86,12 +86,14 @@ export default createComponent({
     const mask = computed(() => getMask())
     const locale = computed(() => getLocale())
 
+    const defaultDateModel = computed(() => getDefaultDateModel())
+
     const model = __splitDate(
       props.modelValue,
-      getMask(),
-      getLocale(),
+      mask.value, // initial mask
+      locale.value, // initial locale
       props.calendar,
-      getDefaultDateModel()
+      defaultDateModel.value
     )
 
     const view = ref(getViewByModel(model))
@@ -131,8 +133,6 @@ export default createComponent({
       }
     })
 
-    const defaultDateModel = computed(() => getDefaultDateModel())
-
     const computedFormat24h = computed(() => (
       props.format24h !== null
         ? props.format24h

package/src/components/tree/QTree.js

@@ -542,34 +542,34 @@ export default createComponent({
 
           m.lazy === 'loading'
             ? h(QSpinner, {
-                class: 'q-tree__spinner',
-                color: computedControlColor.value
-              })
+              class: 'q-tree__spinner',
+              color: computedControlColor.value
+            })
             : (
                 isParent === true
                   ? h(QIcon, {
-                      class: 'q-tree__arrow'
+                    class: 'q-tree__arrow'
                     + (m.expanded === true ? ' q-tree__arrow--rotate' : ''),
-                      name: computedIcon.value,
-                      onClick (e) { onExpandClick(node, m, e) }
-                    })
+                    name: computedIcon.value,
+                    onClick (e) { onExpandClick(node, m, e) }
+                  })
                   : null
               ),
 
           m.hasTicking === true && m.noTick !== true
             ? h(QCheckbox, {
-                class: 'q-tree__tickbox',
-                modelValue: m.indeterminate === true ? null : m.ticked,
-                color: computedControlColor.value,
-                dark: isDark.value,
-                dense: true,
-                keepColor: true,
-                disable: m.tickable !== true,
-                onKeydown: stopAndPrevent,
-                'onUpdate:modelValue': v => {
-                  onTickedClick(m, v)
-                }
-              })
+              class: 'q-tree__tickbox',
+              modelValue: m.indeterminate === true ? null : m.ticked,
+              color: computedControlColor.value,
+              dark: isDark.value,
+              dense: true,
+              keepColor: true,
+              disable: m.tickable !== true,
+              onKeydown: stopAndPrevent,
+              'onUpdate:modelValue': v => {
+                onTickedClick(m, v)
+              }
+            })
             : null,
 
           h('div', {
@@ -587,22 +587,22 @@ export default createComponent({
 
         isParent === true
           ? h(QSlideTransition, {
-              duration: props.duration,
-              onShow,
-              onHide
-            }, () => withDirectives(
+            duration: props.duration,
+            onShow,
+            onHide
+          }, () => withDirectives(
+            h('div', {
+              class: 'q-tree__node-collapsible' + textColorClass.value,
+              key: `${ key }__q`
+            }, [
+              body,
               h('div', {
-                class: 'q-tree__node-collapsible' + textColorClass.value,
-                key: `${ key }__q`
-              }, [
-                body,
-                h('div', {
-                  class: 'q-tree__children'
+                class: 'q-tree__children'
                   + (m.disabled === true ? ' q-tree__node--disabled' : '')
-                }, children)
-              ]),
-              [ [ vShow, m.expanded ] ]
-            ))
+              }, children)
+            ]),
+            [ [ vShow, m.expanded ] ]
+          ))
           : body
       ])
     }
@@ -615,14 +615,12 @@ export default createComponent({
     function onClick (node, meta, e, keyboard) {
       keyboard !== true && blur(meta.key)
 
-      if (hasSelection.value) {
-        if (meta.selectable) {
-          if (props.noSelectionUnset === false) {
-            emit('update:selected', meta.key !== props.selected ? meta.key : null)
-          }
-          else if (meta.key !== props.selected) {
-            emit('update:selected', meta.key || null)
-          }
+      if (hasSelection.value && meta.selectable) {
+        if (props.noSelectionUnset === false) {
+          emit('update:selected', meta.key !== props.selected ? meta.key : null)
+        }
+        else if (meta.key !== props.selected) {
+          emit('update:selected', meta.key || null)
         }
       }
       else {

package/src/composables/private/use-file.json

@@ -85,9 +85,7 @@
       "desc": "Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy",
       "params": {
         "evt": {
-          "type": "Object",
-          "desc": "JS event object",
-          "__exemption": [ "examples" ]
+          "extends": "evt"
         }
       }
     },

package/src/composables/private/use-router-link.js

@@ -248,7 +248,7 @@ export default function (fallbackTag) {
     prevent(e)
 
     return proxy.$router[ props.replace === true ? 'replace' : 'push' ](props.to)
-      .catch(() => {})
+      .catch(err => err)
   }
 
   return {

package/src/directives/TouchHold.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchPan.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchRepeat.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",

package/src/directives/TouchSwipe.json

@@ -12,9 +12,8 @@
         "desc": "Event details",
         "definition": {
           "evt": {
-            "type": "Object",
-            "desc": "Original JS event Object",
-            "__exemption": [ "examples" ]
+            "extends": "evt",
+            "desc": "Original JS event Object"
           },
           "touch": {
             "type": "Boolean",