quasar 2.5.5 → 2.6.2

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

@@ -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, isPlainObject } from '../../utils/private/is.js'
+import { isDeepEqual } 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'
@@ -175,6 +175,7 @@ export default createComponent({
       localResetVirtualScroll,
       padVirtualScroll,
       onVirtualScrollEvt,
+      reset,
       scrollTo,
       setVirtualScrollSize
     } = useVirtualScroll({
@@ -432,6 +433,8 @@ export default createComponent({
 
     watch(menu, updateMenu)
 
+    watch(virtualScrollLength, rerenderMenu)
+
     function getEmittingOptionValue (opt) {
       return props.emitValue === true
         ? getOptionValue.value(opt)
@@ -602,7 +605,7 @@ export default createComponent({
 
       return typeof val === 'function'
         ? val
-        : opt => (isPlainObject(opt) === true && val in opt ? opt[ val ] : opt)
+        : opt => (opt !== null && typeof opt === 'object' && val in opt ? opt[ val ] : opt)
     }
 
     function isOptionSelected (opt) {
@@ -975,6 +978,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 +988,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,
@@ -1338,6 +1342,18 @@ export default createComponent({
       setOptionIndex(optionIndex)
     }
 
+    function rerenderMenu () {
+      if (menu.value === true && state.innerLoading.value === false) {
+        reset()
+
+        nextTick(() => {
+          if (menu.value === true && state.innerLoading.value === false) {
+            updateMenu(true)
+          }
+        })
+      }
+    }
+
     function updateMenuPosition () {
       if (dialog.value === false && menuRef.value !== null) {
         menuRef.value.updatePosition()
@@ -1464,13 +1480,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 +1519,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/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, isPlainObject } 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 isPlainObject(item) === true ? { ...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 => (isPlainObject(item) === true ? 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 isPlainObject(item) === true ? { ...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/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, isPlainObject } 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 (isPlainObject(col) === true) {
+    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/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',

package/src/composables/private/__tests__/use-transition.spec.js

@@ -13,7 +13,7 @@ describe('use-transition API', () => {
             .should('have.class', 'q-transition--fade-enter-active')
         })
 
-        it('should use a different show transtion if defined', () => {
+        it('should use a different show transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
             attrs: {
@@ -40,7 +40,7 @@ describe('use-transition API', () => {
             .should('have.class', 'q-transition--fade-leave-active')
         })
 
-        it('should use a different hide transtion if defined', () => {
+        it('should use a different hide transition if defined', () => {
           const transition = 'scale'
           mount(WrapperOne, {
             attrs: {

package/src/composables/private/use-field.js

@@ -366,14 +366,6 @@ export default function (state) {
       }, getControlContainer())
     )
 
-    slots.append !== void 0 && node.push(
-      h('div', {
-        class: 'q-field__append q-field__marginal row no-wrap items-center',
-        key: 'append',
-        onClick: prevent
-      }, slots.append())
-    )
-
     hasError.value === true && props.noErrorIcon === false && node.push(
       getInnerAppendNode('error', [
         h(QIcon, { name: $q.iconSet.field.error, color: 'negative' })
@@ -407,6 +399,14 @@ export default function (state) {
       )
     }
 
+    slots.append !== void 0 && node.push(
+      h('div', {
+        class: 'q-field__append q-field__marginal row no-wrap items-center',
+        key: 'append',
+        onClick: prevent
+      }, slots.append())
+    )
+
     state.getInnerAppend !== void 0 && node.push(
       getInnerAppendNode('inner-append', state.getInnerAppend())
     )
@@ -511,8 +511,8 @@ export default function (state) {
 
       hasCounter === true
         ? h('div', {
-            class: 'q-field__counter'
-          }, slots.counter !== void 0 ? slots.counter() : state.computedCounter.value)
+          class: 'q-field__counter'
+        }, slots.counter !== void 0 ? slots.counter() : state.computedCounter.value)
         : null
     ])
   }
@@ -552,6 +552,14 @@ export default function (state) {
   })
 
   return function renderField () {
+    const labelAttrs = state.getControl === void 0 && slots.control === void 0
+      ? {
+          ...state.splitAttrs.attributes.value,
+          'data-autofocus': props.autofocus,
+          ...attributes.value
+        }
+      : attributes.value
+
     return h('label', {
       ref: state.rootRef,
       class: [
@@ -559,13 +567,13 @@ export default function (state) {
         attrs.class
       ],
       style: attrs.style,
-      ...attributes.value
+      ...labelAttrs
     }, [
       slots.before !== void 0
         ? h('div', {
-            class: 'q-field__before q-field__marginal row no-wrap items-center',
-            onClick: prevent
-          }, slots.before())
+          class: 'q-field__before q-field__marginal row no-wrap items-center',
+          onClick: prevent
+        }, slots.before())
         : null,
 
       h('div', {
@@ -585,9 +593,9 @@ export default function (state) {
 
       slots.after !== void 0
         ? h('div', {
-            class: 'q-field__after q-field__marginal row no-wrap items-center',
-            onClick: prevent
-          }, slots.after())
+          class: 'q-field__after q-field__marginal row no-wrap items-center',
+          onClick: prevent
+        }, slots.after())
         : null
     ])
   }

package/src/composables/private/use-file-dom-props.js

@@ -34,11 +34,11 @@ export default function (props, typeGuard) {
 
   return typeGuard === true
     ? computed(() => {
-        if (props.type !== 'file') {
-          return
-        }
+      if (props.type !== 'file') {
+        return
+      }
 
-        return getFormDomProps()
-      })
+      return getFormDomProps()
+    })
     : computed(getFormDomProps)
 }

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

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { h, ref, computed, getCurrentInstance } from 'vue'
 
 import { stop, stopAndPrevent } from '../../utils/event.js'
 
@@ -42,18 +42,20 @@ export default function ({
 }) {
   const { props, emit, proxy } = getCurrentInstance()
 
+  const dndRef = ref(null)
+
   const extensions = computed(() => (
     props.accept !== void 0
       ? props.accept.split(',').map(ext => {
-          ext = ext.trim()
-          if (ext === '*') { // support "*"
-            return '*/'
-          }
-          else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
-            ext = ext.slice(0, ext.length - 1)
-          }
-          return ext.toUpperCase()
-        })
+        ext = ext.trim()
+        if (ext === '*') { // support "*"
+          return '*/'
+        }
+        else if (ext.endsWith('/*')) { // support "image/*" or "*/*"
+          ext = ext.slice(0, ext.length - 1)
+        }
+        return ext.toUpperCase()
+      })
       : null
   ))
 
@@ -118,7 +120,7 @@ export default function ({
     // Cordova/iOS allows selecting multiple files even when the
     // multiple attribute is not specified. We also normalize drag'n'dropped
     // files here:
-    if (props.multiple !== true) {
+    if (props.multiple !== true && files.length > 0) {
       files = [ files[ 0 ] ]
     }
 
@@ -183,7 +185,7 @@ export default function ({
 
   function onDragleave (e) {
     stopAndPrevent(e)
-    dnd.value = false
+    e.relatedTarget !== dndRef.value && (dnd.value = false)
   }
 
   function onDrop (e) {
@@ -200,6 +202,7 @@ export default function ({
   function getDndNode (type) {
     if (dnd.value === true) {
       return h('div', {
+        ref: dndRef,
         class: `q-${ type }__dnd absolute-full`,
         onDragenter: stopAndPreventDrag,
         onDragover: stopAndPreventDrag,

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

@@ -191,8 +191,8 @@ export default function (fallbackTag) {
       // avoid comparing the child with its parent
       && currentMatched[ currentMatched.length - 1 ].path !== parentRecordPath
         ? currentMatched.findIndex(
-            isSameRouteRecord.bind(null, matched[ length - 2 ])
-          )
+          isSameRouteRecord.bind(null, matched[ length - 2 ])
+        )
         : index
     )
   })

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

@@ -2,7 +2,7 @@
   "props": {
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
@@ -12,26 +12,26 @@
 
     "exact": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'exact' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'exact' property; Superseded by 'href' prop if used",
       "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used",
       "category": "navigation"
     },
 
     "active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
       "examples": [ "my-active-class" ],
       "category": "navigation"
     },
 
     "exact-active-class": {
       "type": "String",
-      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseeded by 'href' prop if used",
+      "desc": "Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used",
       "examples": [ "my-exact-active-class" ],
       "category": "navigation"
     },