quasar 2.4.9 → 2.4.13

package/src/components/ajax-bar/QAjaxBar.js

@@ -119,7 +119,7 @@ export default createComponent({
     const onScreen = ref(false)
     const animate = ref(true)
 
-    let calls = 0, timer, speed
+    let sessions = 0, timer, speed
 
     const classes = computed(() =>
       `q-loading-bar q-loading-bar--${ props.position }`
@@ -165,16 +165,17 @@ export default createComponent({
       const oldSpeed = speed
       speed = Math.max(0, newSpeed) || 0
 
-      calls++
+      sessions++
 
-      if (calls > 1) {
+      if (sessions > 1) {
         if (oldSpeed === 0 && newSpeed > 0) {
           planNextStep()
         }
         else if (oldSpeed > 0 && newSpeed <= 0) {
           clearTimeout(timer)
         }
-        return
+
+        return sessions
       }
 
       clearTimeout(timer)
@@ -182,25 +183,32 @@ export default createComponent({
 
       progress.value = 0
 
-      if (onScreen.value === true) { return }
-
-      onScreen.value = true
-      animate.value = false
       timer = setTimeout(() => {
         animate.value = true
         newSpeed > 0 && planNextStep()
-      }, 100)
+      }, onScreen.value === true ? 500 : 1)
+
+      if (onScreen.value !== true) {
+        onScreen.value = true
+        animate.value = false
+      }
+
+      return sessions
     }
 
     function increment (amount) {
-      if (calls > 0) {
+      if (sessions > 0) {
         progress.value = inc(progress.value, amount)
       }
+
+      return sessions
     }
 
     function stop () {
-      calls = Math.max(0, calls - 1)
-      if (calls > 0) { return }
+      sessions = Math.max(0, sessions - 1)
+      if (sessions > 0) {
+        return sessions
+      }
 
       clearTimeout(timer)
       emit('stop')
@@ -219,6 +227,8 @@ export default createComponent({
       else {
         end()
       }
+
+      return sessions
     }
 
     function planNextStep () {

package/src/components/ajax-bar/QAjaxBar.json

@@ -73,6 +73,11 @@
           "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
           "examples": [ 400, 0 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
@@ -84,11 +89,21 @@
           "desc": "Amount (0 < x <= 100) to increment with",
           "examples": [ 1 ]
         }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
       }
     },
 
     "stop": {
-      "desc": "Notify bar that one process you were waiting has finished"
+      "desc": "Notify bar that one process you were waiting has finished",
+      "returns": {
+        "type": "Number",
+        "desc": "Number of active simultaneous sessions",
+        "__exemption": [ "examples" ]
+      }
     }
   }
 }

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -43,7 +43,8 @@
     },
 
     "content-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the menu",
       "examples": [
         "background-color: #ff0000",
@@ -53,7 +54,8 @@
     },
 
     "content-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the menu",
       "examples": [
         "my-special-class",

package/src/components/date/QDate.js

@@ -153,7 +153,12 @@ export default createComponent({
       normalizedModel.value
         .filter(date => typeof date === 'string')
         .map(date => decodeString(date, innerMask.value, innerLocale.value))
-        .filter(date => date.dateHash !== null)
+        .filter(date =>
+          date.dateHash !== null
+          && date.day !== null
+          && date.month !== null
+          && date.year !== null
+        )
     )
 
     const rangeModel = computed(() => {

package/src/components/dialog/QDialog.js

@@ -257,7 +257,7 @@ export default createComponent({
         }
 
         node = node.querySelector('[autofocus], [data-autofocus]') || node
-        node.focus()
+        node.focus({ preventScroll: true })
       })
     }
 

package/src/components/dialog-plugin/DialogPlugin.js

@@ -144,8 +144,8 @@ export default createComponent({
       color: vmColor.value,
       label: okLabel.value,
       ripple: false,
-      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
       disable: okDisabled.value,
+      ...(Object(props.ok) === props.ok ? props.ok : { flat: true }),
       'data-autofocus': (props.focus === 'ok' && hasForm.value !== true) || void 0,
       onClick: onOk
     }))

package/src/components/editor/QEditor.js

@@ -454,7 +454,7 @@ export default createComponent({
 
     function focus () {
       addFocusFn(() => {
-        contentRef.value !== null && contentRef.value.focus()
+        contentRef.value !== null && contentRef.value.focus({ preventScroll: true })
       })
     }
 

package/src/components/editor/QEditor.json

@@ -227,13 +227,15 @@
 
     "content-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for styling the container of QEditor",
       "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
       "category": "style"
     },
 
     "content-class": {
-      "type": [ "Object", "Array", "String" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes for the input area",
       "examples": [
         "my-special-class",

package/src/components/expansion-item/QExpansionItem.json

@@ -26,7 +26,8 @@
     },
 
     "expand-icon-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the expand icon item section",
       "examples": [ "text-purple" ],
       "category": "style"
@@ -134,7 +135,8 @@
     },
 
     "header-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Apply custom style to the header",
       "examples": [
         "background: '#ff0000'",
@@ -144,7 +146,8 @@
     },
 
     "header-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the header",
       "examples": [
         "my-custom-class",

package/src/components/fab/use-fab.json

@@ -87,7 +87,8 @@
     },
 
     "label-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the label container",
       "examples": [
         "my-special-class",
@@ -97,7 +98,8 @@
     },
 
     "label-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the label container",
       "examples": [
         "background-color: #ff0000",

package/src/components/file/QFile.json

@@ -77,7 +77,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying selection container",
       "examples": [
         "my-special-class",
@@ -87,7 +88,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying selection container",
       "examples": [
         "background-color: #ff0000",

package/src/components/form/QForm.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
+import { h, ref, onActivated, onDeactivated, onMounted, getCurrentInstance, nextTick, provide } from 'vue'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -144,7 +144,7 @@ export default createComponent({
         const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
-        target !== null && target !== void 0 && target.focus()
+        target !== null && target !== void 0 && target.focus({ preventScroll: true })
       })
     }
 
@@ -161,6 +161,16 @@ export default createComponent({
       }
     })
 
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && props.autofocus === true && focus()
+    })
+
     onMounted(() => {
       props.autofocus === true && focus()
     })

package/src/components/img/QImg.json

@@ -53,13 +53,11 @@
     },
 
     "ratio": {
-      "type": [ "String", "Number" ],
       "desc": "Force the component to maintain an aspect ratio",
       "examples": [
         "(Number format) :ratio=\"16/9\"",
         "(String format) ratio=\"1\""
-      ],
-      "category": "style"
+      ]
     },
 
     "initial-ratio": {
@@ -162,6 +160,7 @@
 
     "img-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Apply CSS to the native img element",
       "examples": [ ":img-style=\"{ transform: 'rotate(45deg)' }\" "],
       "category": "style"

package/src/components/infinite-scroll/QInfiniteScroll.js

@@ -41,7 +41,6 @@ export default createComponent({
     const rootRef = ref(null)
 
     let index = props.initialIndex || 0
-    let scrollPos = false
     let localScrollTarget, poll
 
     const classes = computed(() =>
@@ -180,8 +179,10 @@ export default createComponent({
     watch(() => props.scrollTarget, updateScrollTarget)
     watch(() => props.debounce, setDebounce)
 
+    let scrollPos = false
+
     onActivated(() => {
-      if (localScrollTarget && scrollPos !== false) {
+      if (scrollPos !== false && localScrollTarget) {
         setVerticalScrollPosition(localScrollTarget, scrollPos)
       }
     })

package/src/components/inner-loading/QInnerLoading.json

@@ -41,7 +41,8 @@
     },
 
     "label-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Apply custom style to the label; Works along the 'label' prop only",
       "examples": [
         "font-size: 28px",

package/src/components/input/QInput.js

@@ -177,7 +177,7 @@ export default createComponent({
           && inputRef.value !== el
           && (el === null || el.id !== state.targetUid.value)
         ) {
-          inputRef.value.focus()
+          inputRef.value.focus({ preventScroll: true })
         }
       })
     }

package/src/components/input/QInput.json

@@ -53,7 +53,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
         "my-special-class",
@@ -63,7 +64,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
         "background-color: #ff0000",

package/src/components/menu/QMenu.js

@@ -181,7 +181,7 @@ export default createComponent({
 
         if (node && node.contains(document.activeElement) !== true) {
           node = node.querySelector('[autofocus], [data-autofocus]') || node
-          node.focus()
+          node.focus({ preventScroll: true })
         }
       })
     }
@@ -309,6 +309,7 @@ export default createComponent({
       // the focus is not in a vue child component
       if (
         handlesFocus.value === true
+        && props.noFocus !== true
         && childHasFocus(innerRef.value, evt.target) !== true
       ) {
         focus()

package/src/components/pagination/QPagination.json

@@ -51,7 +51,8 @@
     },
 
     "input-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the input (if using one)",
       "examples": [
         "background-color: #ff0000",
@@ -61,7 +62,8 @@
     },
 
     "input-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the input (if using one)",
       "examples": [
         "my-special-class",

package/src/components/scroll-area/QScrollArea.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { h, ref, computed, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
@@ -380,6 +380,26 @@ export default createComponent({
       }
     })
 
+    let scrollPosition = null
+
+    onDeactivated(() => {
+      scrollPosition = {
+        top: scroll.vertical.position.value,
+        left: scroll.horizontal.position.value
+      }
+    })
+
+    onActivated(() => {
+      if (scrollPosition === null) { return }
+
+      const scrollTarget = targetRef.value
+
+      if (scrollTarget !== null) {
+        setHorizontalScrollPosition(scrollTarget, scrollPosition.left)
+        setVerticalScrollPosition(scrollTarget, scrollPosition.top)
+      }
+    })
+
     onBeforeUnmount(emitScroll.cancel)
 
     return () => {

package/src/components/scroll-area/QScrollArea.json

@@ -9,21 +9,24 @@
     },
 
     "bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)",
       "examples": [ ":bar-style=\"{ borderRadius: '5px', background: 'red', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "vertical-bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of 'bar-style' prop",
       "examples": [ ":bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "horizontal-bar-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of 'bar-style' prop",
       "examples": [ ":bar-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -31,6 +34,7 @@
 
     "thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)",
       "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -38,6 +42,7 @@
 
     "vertical-thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of 'thumb-style' prop",
       "examples": [ ":thumb-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"" ],
       "category": "style"
@@ -45,20 +50,23 @@
 
     "horizontal-thumb-style": {
       "type": "Object",
+      "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of 'thumb-style' prop",
       "examples": [ ":thumb-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"" ],
       "category": "style"
     },
 
     "content-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for styling the container of QScrollArea",
       "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
       "category": "style"
     },
 
     "content-active-style": {
-      "type": [ "Array", "String", "Object"],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)",
       "examples": [ ":content-active-style=\"{ backgroundColor: 'white' }\"" ],
       "category": "style"

package/src/components/select/QSelect.js

@@ -610,8 +610,12 @@ export default createComponent({
       return innerOptionsValue.value.find(v => isDeepEqual(v, val)) !== void 0
     }
 
-    function selectInputText () {
-      if (props.useInput === true && targetRef.value !== null) {
+    function selectInputText (e) {
+      if (
+        props.useInput === true
+        && targetRef.value !== null
+        && (e === void 0 || (targetRef.value === e.target && e.target.value === selectedString.value))
+      ) {
         targetRef.value.select()
       }
     }
@@ -644,34 +648,34 @@ export default createComponent({
 
       if (typeof value === 'string' && value.length > 0) {
         const needle = value.toLocaleLowerCase()
+        const findFn = extractFn => {
+          const option = props.options.find(opt => extractFn.value(opt).toLocaleLowerCase() === needle)
 
-        let fn = opt => getOptionValue.value(opt).toLocaleLowerCase() === needle
-        let option = props.options.find(fn)
+          if (option === void 0) {
+            return false
+          }
 
-        if (option !== void 0) {
           if (innerValue.value.indexOf(option) === -1) {
             toggleOption(option)
           }
           else {
             hidePopup()
           }
-        }
-        else {
-          fn = opt => getOptionLabel.value(opt).toLocaleLowerCase() === needle
-          option = props.options.find(fn)
 
-          if (option !== void 0) {
-            if (innerValue.value.indexOf(option) === -1) {
-              toggleOption(option)
-            }
-            else {
-              hidePopup()
-            }
+          return true
+        }
+        const fillFn = afterFilter => {
+          if (findFn(getOptionValue) === true) {
+            return
           }
-          else {
-            filter(value, true)
+          if (findFn(getOptionLabel) === true || afterFilter === true) {
+            return
           }
+
+          filter(value, true, () => fillFn(true))
         }
+
+        fillFn()
       }
       else {
         state.clearValue(e)
@@ -981,7 +985,7 @@ export default createComponent({
         type: 'search',
         ...comboboxAttrs.value,
         ...state.splitAttrs.attributes.value,
-        id: state.targetUid.value,
+        id: isTarget === true ? state.targetUid.value : void 0,
         maxlength: props.maxlength,
         autocomplete: props.autocomplete,
         'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
@@ -992,7 +996,7 @@ export default createComponent({
 
       if (fromDialog !== true && hasDialog === true) {
         if (Array.isArray(data.class) === true) {
-          data.class[ 0 ] += ' no-pointer-events'
+          data.class = [ ...data.class, 'no-pointer-events' ]
         }
         else {
           data.class += ' no-pointer-events'
@@ -1050,7 +1054,7 @@ export default createComponent({
       }
     }
 
-    function filter (val, keepClosed) {
+    function filter (val, keepClosed, afterUpdateFn) {
       if (props.onFilter === void 0 || (keepClosed !== true && state.focused.value !== true)) {
         return
       }
@@ -1108,6 +1112,7 @@ export default createComponent({
               }
 
               typeof afterFn === 'function' && nextTick(() => { afterFn(proxy) })
+              typeof afterUpdateFn === 'function' && nextTick(() => { afterUpdateFn(proxy) })
             })
           }
         },
@@ -1457,13 +1462,13 @@ export default createComponent({
           child.push(getInput(fromDialog, isTarget))
         }
         // there can be only one (when dialog is opened the control in dialog should be target)
-        else if (state.editable.value === true && isTarget === true) {
+        else if (state.editable.value === true) {
           child.push(
             h('div', {
-              ref: targetRef,
+              ref: isTarget === true ? targetRef : void 0,
               key: 'd_t',
-              class: 'no-outline',
-              id: state.targetUid.value,
+              class: 'q-select__focus-target',
+              id: isTarget === true ? state.targetUid.value : void 0,
               ...comboboxAttrs.value,
               onKeydown: onTargetKeydown,
               onKeyup: onTargetKeyup,
@@ -1471,10 +1476,10 @@ export default createComponent({
             })
           )
 
-          if (typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
+          if (isTarget === true && typeof props.autocomplete === 'string' && props.autocomplete.length > 0) {
             child.push(
               h('input', {
-                class: 'q-select__autocomplete-input no-outline',
+                class: 'q-select__autocomplete-input',
                 autocomplete: props.autocomplete,
                 onKeyup: onTargetAutocomplete
               })