quasar 2.5.3 → 2.6.0

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) }
           }
         }
 
@@ -602,7 +602,7 @@ export default createComponent({
 
       return typeof val === 'function'
         ? val
-        : opt => (Object(opt) === opt && val in opt ? opt[ val ] : opt)
+        : opt => (opt !== null && typeof opt === 'object' && val in opt ? opt[ val ] : opt)
     }
 
     function isOptionSelected (opt) {
@@ -975,6 +975,8 @@ export default createComponent({
     }
 
     function getInput (fromDialog, isTarget) {
+      const attrs = isTarget === true ? { ...comboboxAttrs.value, ...state.splitAttrs.attributes.value } : void 0
+
       const data = {
         ref: isTarget === true ? targetRef : void 0,
         key: 'i_t',
@@ -983,8 +985,7 @@ export default createComponent({
         value: inputValue.value !== void 0 ? inputValue.value : '',
         // required for Android in order to show ENTER key when in form
         type: 'search',
-        ...comboboxAttrs.value,
-        ...state.splitAttrs.attributes.value,
+        ...attrs,
         id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
@@ -1385,6 +1386,7 @@ export default createComponent({
     Object.assign(proxy, {
       showPopup, hidePopup,
       removeAtIndex, add, toggleOption,
+      getOptionIndex: () => optionIndex.value,
       setOptionIndex, moveOptionSelection,
       filter, updateMenuPosition, updateInputValue,
       isOptionSelected,
@@ -1463,13 +1465,16 @@ export default createComponent({
         }
         // there can be only one (when dialog is opened the control in dialog should be target)
         else if (state.editable.value === true) {
+          const attrs = isTarget === true ? comboboxAttrs.value : void 0
+
           child.push(
-            h('div', {
+            h('input', {
               ref: isTarget === true ? targetRef : void 0,
               key: 'd_t',
               class: 'q-select__focus-target',
               id: isTarget === true ? state.targetUid.value : void 0,
-              ...comboboxAttrs.value,
+              readonly: true,
+              ...attrs,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,
               onKeypress: onTargetKeypress
@@ -1499,9 +1504,11 @@ export default createComponent({
           )
         }
 
+        const attrs = props.useInput === true || isTarget !== true ? void 0 : state.splitAttrs.attributes.value
+
         return h('div', {
           class: 'q-field__native row items-center',
-          ...state.splitAttrs.attributes.value
+          ...attrs
         }, child)
       },
 

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,23 @@
       }
     },
 
+    "getOptionIndex": {
+      "desc": "Gets current focused option index from menu; It's -1 if no option is focused",
+      "returns": {
+        "type": "Number",
+        "desc": "Index of option from menu; It's -1 if no option is focused",
+        "examples": [ -1, 0, 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, isObject } 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 isObject(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 => (isObject(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 isObject(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.js

@@ -75,14 +75,14 @@ export default createComponent({
         || $stepper.value.vertical !== true
         ? {}
         : {
-          onScroll (e) {
-            const { target } = e
-            if (target.scrollTop > 0) {
-              target.scrollTop = 0
+            onScroll (e) {
+              const { target } = e
+              if (target.scrollTop > 0) {
+                target.scrollTop = 0
+              }
+              attrs.onScroll !== void 0 && attrs.onScroll(e)
             }
-            attrs.onScroll !== void 0 && attrs.onScroll(e)
           }
-        }
     ))
 
     const contentKey = computed(() => (

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

@@ -17,12 +17,12 @@ export function useTableColumnSelection (props, computedPagination, hasSelection
 
     return row !== void 0
       ? Object.keys(row).map(name => ({
-          name,
-          label: name.toUpperCase(),
-          field: name,
-          align: isNumber(row[ name ]) ? 'right' : 'left',
-          sortable: true
-        }))
+        name,
+        label: name.toUpperCase(),
+        field: name,
+        align: isNumber(row[ name ]) ? 'right' : 'left',
+        sortable: 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, isObject } 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 (isObject(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/QTabs.js

@@ -423,11 +423,11 @@ export default createComponent({
       let wasItActive = wasActive === true
         ? emptyFn
         : tab => {
-            if (model === tab.name.value) {
-              wasActive = true
-              wasItActive = emptyFn
-            }
+          if (model === tab.name.value) {
+            wasActive = true
+            wasItActive = emptyFn
           }
+        }
 
       const tabList = getRouteList()
 

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/tooltip/QTooltip.js

@@ -280,18 +280,18 @@ export default createComponent({
     function getTooltipContent () {
       return showing.value === true
         ? h('div', {
-            ...attrs,
-            ref: innerRef,
-            class: [
-              'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
-              attrs.class
-            ],
-            style: [
-              attrs.style,
-              transitionStyle.value
-            ],
-            role: 'complementary'
-          }, hSlot(slots.default))
+          ...attrs,
+          ref: innerRef,
+          class: [
+            'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
+            attrs.class
+          ],
+          style: [
+            attrs.style,
+            transitionStyle.value
+          ],
+          role: 'complementary'
+        }, hSlot(slots.default))
         : null
     }
 

package/src/components/uploader/uploader-core.js

@@ -108,6 +108,7 @@ export function getRenderer (getPlugin) {
     pickFiles,
     addFiles,
     onDragover,
+    onDragleave,
     processFiles,
     getDndNode,
     maxFilesNumber,
@@ -387,10 +388,10 @@ export function getRenderer (getPlugin) {
       }, [
         file.__status === 'failed'
           ? h(QIcon, {
-              class: 'q-uploader__file-status',
-              name: $q.iconSet.type.negative,
-              color: 'negative'
-            })
+            class: 'q-uploader__file-status',
+            name: $q.iconSet.type.negative,
+            color: 'negative'
+          })
           : null,
 
         h('div', { class: 'q-uploader__file-header-content col' }, [
@@ -404,11 +405,11 @@ export function getRenderer (getPlugin) {
 
         file.__status === 'uploading'
           ? h(QCircularProgress, {
-              value: file.__progress,
-              min: 0,
-              max: 1,
-              indeterminate: file.__progress === 0
-            })
+            value: file.__progress,
+            min: 0,
+            max: 1,
+            indeterminate: file.__progress === 0
+          })
           : h(QBtn, {
             round: true,
             dense: true,
@@ -477,7 +478,7 @@ export function getRenderer (getPlugin) {
     const data = { ref: rootRef, class: classes.value }
 
     if (canAddFiles.value === true) {
-      data.onDragover = onDragover
+      Object.assign(data, { onDragover, onDragleave })
     }
 
     return h('div', data, children)

package/src/components/virtual-scroll/QVirtualScroll.js

@@ -148,9 +148,9 @@ export default createComponent({
 
       return props.type === '__qtable'
         ? getTableMiddle(
-            { ref: rootRef, class: 'q-table__middle ' + classes.value },
-            __getVirtualChildren()
-          )
+          { ref: rootRef, class: 'q-table__middle ' + classes.value },
+          __getVirtualChildren()
+        )
         : h(comps[ props.type ], {
           ...attrs,
           ref: rootRef,

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -622,17 +622,17 @@ export function useVirtualScroll ({
     return [
       tag === 'tbody'
         ? h(tag, {
-            class: 'q-virtual-scroll__padding',
-            key: 'before',
-            ref: beforeRef
-          }, [
-            h('tr', [
-              h('td', {
-                style: { [ paddingSize ]: `${ virtualScrollPaddingBefore.value }px`, ...style },
-                colspan: colspanAttr.value
-              })
-            ])
+          class: 'q-virtual-scroll__padding',
+          key: 'before',
+          ref: beforeRef
+        }, [
+          h('tr', [
+            h('td', {
+              style: { [ paddingSize ]: `${ virtualScrollPaddingBefore.value }px`, ...style },
+              colspan: colspanAttr.value
+            })
           ])
+        ])
         : h(tag, {
           class: 'q-virtual-scroll__padding',
           key: 'before',
@@ -650,17 +650,17 @@ export function useVirtualScroll ({
 
       tag === 'tbody'
         ? h(tag, {
-            class: 'q-virtual-scroll__padding',
-            key: 'after',
-            ref: afterRef
-          }, [
-            h('tr', [
-              h('td', {
-                style: { [ paddingSize ]: `${ virtualScrollPaddingAfter.value }px`, ...style },
-                colspan: colspanAttr.value
-              })
-            ])
+          class: 'q-virtual-scroll__padding',
+          key: 'after',
+          ref: afterRef
+        }, [
+          h('tr', [
+            h('td', {
+              style: { [ paddingSize ]: `${ virtualScrollPaddingAfter.value }px`, ...style },
+              colspan: colspanAttr.value
+            })
           ])
+        ])
         : h(tag, {
           class: 'q-virtual-scroll__padding',
           key: 'after',