quasar 2.5.4 → 2.6.1

package/src/components/menu/QMenu.js

@@ -349,19 +349,19 @@ export default createComponent({
         () => (
           showing.value === true
             ? h('div', {
-                ...attrs,
-                ref: innerRef,
-                tabindex: -1,
-                class: [
-                  'q-menu q-position-engine scroll' + menuClass.value,
-                  attrs.class
-                ],
-                style: [
-                  attrs.style,
-                  transitionStyle.value
-                ],
-                ...onEvents.value
-              }, hSlot(slots.default))
+              ...attrs,
+              ref: innerRef,
+              tabindex: -1,
+              class: [
+                'q-menu q-position-engine scroll' + menuClass.value,
+                attrs.class
+              ],
+              style: [
+                attrs.style,
+                transitionStyle.value
+              ],
+              ...onEvents.value
+            }, hSlot(slots.default))
             : null
         )
       )

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

@@ -98,10 +98,10 @@ export default createComponent({
     function getContent () {
       return showing.value === true
         ? h('div', {
-            ref: rootRef,
-            class: 'q-page-scroller',
-            onClick
-          }, getStickyContent(slots))
+          ref: rootRef,
+          class: 'q-page-scroller',
+          onClick
+        }, getStickyContent(slots))
         : null
     }
 

package/src/components/pull-to-refresh/QPullToRefresh.js

@@ -76,7 +76,7 @@ export default createComponent({
       }
 
       if (event.isFirst === true) {
-        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== "down") {
+        if (getVerticalScrollPosition(localScrollTarget) !== 0 || event.direction !== 'down') {
           if (pulling.value === true) {
             pulling.value = false
             state.value = 'pull'
@@ -189,10 +189,10 @@ export default createComponent({
           }, [
             state.value !== 'refreshing'
               ? h(QIcon, {
-                  name: props.icon || $q.iconSet.pullToRefresh.icon,
-                  color: props.color,
-                  size: '32px'
-                })
+                name: props.icon || $q.iconSet.pullToRefresh.icon,
+                color: props.color,
+                size: '32px'
+              })
               : h(QSpinner, {
                 size: '24px',
                 color: props.color

package/src/components/select/QSelect.js

@@ -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,
@@ -1464,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
@@ -1500,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

@@ -716,13 +716,10 @@
 
     "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 ]
-        }
+      "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"
     },

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/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/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/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/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',