quasar 2.5.5 → 2.6.0

package/src/components/knob/QKnob.json

@@ -51,6 +51,12 @@
       "category": "model"
     },
 
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Reverses the direction of progress",
+      "category": "behavior"
+    },
+
     "instant-feedback": {
       "type": "Boolean",
       "desc": "No animation when model changes",

package/src/components/linear-progress/QLinearProgress.sass

@@ -6,6 +6,7 @@
   font-size: 4px
   height: 1em
   color: var(--q-primary)
+  transform: scale3d(1, 1, 1)
 
   &__model, &__track
     transform-origin: 0 0

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

@@ -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'
@@ -602,7 +602,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 +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/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/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/directives/Morph.js

@@ -1,8 +1,6 @@
 import { createDirective } from '../utils/private/create.js'
 import morph from '../utils/morph.js'
 
-import getSSRProps from './Morph.ssr.js'
-
 const morphGroups = {}
 const props = [
   'duration', 'delay', 'easing', 'fill',
@@ -164,7 +162,18 @@ function updateValue (ctx, value) {
 }
 
 export default createDirective(__QUASAR_SSR_SERVER__
-  ? { name: 'morph', getSSRProps }
+  ? {
+      name: 'morph',
+      getSSRProps: binding => {
+        const name = binding.arg
+          ? binding.arg.split(':')[ 0 ]
+          : false
+
+        return {
+          class: name === binding.value ? '' : 'q-morph--invisible'
+        }
+      }
+    }
   : {
       name: 'morph',