quasar 2.4.9 → 2.4.13

package/src/components/select/QSelect.json

@@ -224,7 +224,8 @@
     },
 
     "popup-content-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
         "background-color: #ff0000",
@@ -279,7 +280,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",
@@ -289,7 +291,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/select/QSelect.sass

@@ -8,11 +8,15 @@
 
   .q-field__input
     min-width: 50px !important
+    cursor: text
 
     &--padding
       padding-left: 4px
 
+  &__focus-target,
   &__autocomplete-input
+    position: absolute
+    outline: 0 !important
     width: 0
     height: 0
     padding: 0

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

@@ -164,11 +164,13 @@
         },
         "classes": {
           "type": [ "String", "Array", "Object" ],
+          "tsType": "VueClassProp",
           "desc": "CSS classes to be attributed to the marker label",
           "examples": [ "my-class-name" ]
         },
         "style": {
           "type": "Object",
+          "tsType": "VueStyleObjectProp",
           "desc": "Style definitions to be attributed to the marker label",
           "examples": [ "{ height: '24px' }" ]
         }
@@ -197,11 +199,13 @@
           },
           "classes": {
             "type": [ "String", "Array", "Object" ],
+            "tsType": "VueClassProp",
             "desc": "CSS classes to be attributed to the marker label",
             "examples": [ "my-class-name" ]
           },
           "style": {
             "type": "Object",
+            "tsType": "VueStyleObjectProp",
             "desc": "Style definitions to be attributed to the marker label",
             "examples": [ "{ height: '24px' }" ]
           }
@@ -317,6 +321,7 @@
             },
             "style": {
               "type": "Object",
+              "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
               "examples": [ "{ height: '24px' }" ]
             }
@@ -350,6 +355,7 @@
             },
             "style": {
               "type": "Object",
+              "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
               "examples": [ "{ height: '24px' }" ]
             }
@@ -387,6 +393,7 @@
                 },
                 "style": {
                   "type": "Object",
+                  "tsType": "VueStyleObjectProp",
                   "desc": "Style definitions to be attributed to the marker label",
                   "examples": [ "{ height: '24px' }" ]
                 }
@@ -453,6 +460,7 @@
             },
             "style": {
               "type": "Object",
+              "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
               "examples": [ "{ height: '24px' }" ]
             }
@@ -490,6 +498,7 @@
                 },
                 "style": {
                   "type": "Object",
+                  "tsType": "VueStyleObjectProp",
                   "desc": "Style definitions to be attributed to the marker label",
                   "examples": [ "{ height: '24px' }" ]
                 }

package/src/components/splitter/QSplitter.json

@@ -50,7 +50,8 @@
     },
 
     "before-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the 'before' panel",
       "examples": [
         "bg-deep-orange",
@@ -60,7 +61,8 @@
     },
 
     "after-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the 'after' panel",
       "examples": [
         "bg-deep-orange",
@@ -70,7 +72,8 @@
     },
 
     "separator-class": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the splitter separator",
       "examples": [
         "bg-deep-orange",
@@ -80,7 +83,8 @@
     },
 
     "separator-style": {
-      "type": [ "Array", "String", "Object" ],
+      "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the splitter separator",
       "examples": [
         "background-color: #ff0000",

package/src/components/stepper/QStep.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, inject, KeepAlive } from 'vue'
+import { h, ref, computed, inject, getCurrentInstance, KeepAlive } from 'vue'
 
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
@@ -56,7 +56,9 @@ export default createComponent({
     error: Boolean
   },
 
-  setup (props, { slots }) {
+  setup (props, { attrs, slots }) {
+    const { proxy: { $q } } = getCurrentInstance()
+
     const $stepper = inject(stepperKey, () => {
       console.error('QStep needs to be child of QStepper')
     })
@@ -67,18 +69,21 @@ export default createComponent({
 
     const isActive = computed(() => $stepper.value.modelValue === props.name)
 
-    watch(isActive, active => {
-      if (
-        active === true
-        && $stepper.value.vertical === true
-      ) {
-        nextTick(() => {
-          if (rootRef.value !== null) {
-            rootRef.value.scrollTop = 0
+    const scrollEvent = computed(() => (
+      ($q.platform.is.ios !== true && $q.platform.is.chrome === true)
+        || isActive.value !== true
+        || $stepper.value.vertical !== true
+        ? {}
+        : {
+          onScroll (e) {
+            const { target } = e
+            if (target.scrollTop > 0) {
+              target.scrollTop = 0
+            }
+            attrs.onScroll !== void 0 && attrs.onScroll(e)
           }
-        })
-      }
-    })
+        }
+    ))
 
     const contentKey = computed(() => (
       typeof props.name === 'string' || typeof props.name === 'number'
@@ -114,7 +119,7 @@ export default createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step' },
+      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {

package/src/components/stepper/QStepper.sass

@@ -13,6 +13,7 @@
     line-height: 14px
 
   &__dot
+    contain: layout
     margin-right: 8px
     font-size: 14px
     width: 24px
@@ -20,6 +21,7 @@
     height: 24px
     border-radius: 50%
     background: currentColor
+
     span
       color: #fff
 
@@ -133,6 +135,7 @@
     .q-stepper__tab
       overflow: hidden
     .q-stepper__line
+      contain: layout
       &:before, &:after
         position: absolute
         top: 50%

package/src/components/table/QTable.json

@@ -482,6 +482,7 @@
 
     "table-style": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "CSS style to apply to native HTML <table> element's wrapper (which is a DIV)",
       "examples": [
         "background-color: #ff0000",
@@ -492,6 +493,7 @@
 
     "table-class": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes to apply to native HTML <table> element's wrapper (which is a DIV)",
       "examples": [
         "my-special-class",
@@ -502,6 +504,7 @@
 
     "table-header-style": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "CSS style to apply to header of native HTML <table> (which is a TR)",
       "examples": [
         "background-color: #ff0000",
@@ -512,6 +515,7 @@
 
     "table-header-class": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes to apply to header of native HTML <table> (which is a TR)",
       "examples": [
         "my-special-class",
@@ -522,6 +526,7 @@
 
     "card-container-style": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "CSS style to apply to the cards container (when in grid mode)",
       "examples": [
         "background-color: #ff0000",
@@ -532,6 +537,7 @@
 
     "card-container-class": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes to apply to the cards container (when in grid mode)",
       "examples": [
         "my-special-class",
@@ -543,6 +549,7 @@
 
     "card-style": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueStyleProp",
       "desc": "CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)",
       "examples": [
         "background-color: #ff0000",
@@ -553,6 +560,7 @@
 
     "card-class": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)",
       "examples": [
         "my-special-class",
@@ -563,6 +571,7 @@
 
     "title-class": {
       "type": [ "String", "Array", "Object" ],
+      "tsType": "VueClassProp",
       "desc": "CSS classes to apply to the title (if using 'title' prop)",
       "examples": [
         "my-special-class",

package/src/components/tabs/QTabs.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, getCurrentInstance, provide } from 'vue'
+import { h, ref, computed, watch, nextTick, onBeforeUnmount, onActivated, onDeactivated, getCurrentInstance, provide } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
@@ -568,7 +568,15 @@ export default createComponent({
       unwatchRoute !== void 0 && unwatchRoute()
     })
 
-    onActivated(recalculateScroll)
+    let shouldActivate = false
+
+    onDeactivated(() => {
+      shouldActivate = true
+    })
+
+    onActivated(() => {
+      shouldActivate === true && recalculateScroll()
+    })
 
     return () => {
       const child = [

package/src/components/tree/QTree.js

@@ -58,6 +58,8 @@ export default createComponent({
     expanded: Array, // v-model:expanded
     selected: {}, // v-model:selected
 
+    noSelectionUnset: Boolean,
+
     defaultExpandAll: Boolean,
     accordion: Boolean,
 
@@ -615,7 +617,12 @@ export default createComponent({
 
       if (hasSelection.value) {
         if (meta.selectable) {
-          emit('update:selected', meta.key !== props.selected ? meta.key : null)
+          if (props.noSelectionUnset === false) {
+            emit('update:selected', meta.key !== props.selected ? meta.key : null)
+          }
+          else if (meta.key !== props.selected) {
+            emit('update:selected', meta.key || null)
+          }
         }
       }
       else {

package/src/components/tree/QTree.json

@@ -6,6 +6,7 @@
   "props": {
     "nodes": {
       "type": "Array",
+      "tsType": "QTreeNode",
       "desc": "The array of nodes that designates the tree structure",
       "required": true,
       "examples": [ "[ {...}, {...} ]" ],
@@ -106,6 +107,13 @@
       "category": "state"
     },
 
+    "no-selection-unset": {
+      "type": "Boolean",
+      "desc": "Do not allow un-selection when clicking currently selected node",
+      "category": "behavior",
+      "addedIn": "v2.4.10"
+    },
+
     "default-expand-all": {
       "type": "Boolean",
       "desc": "Allow the tree to have all its branches expanded, when first rendered",

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

@@ -436,6 +436,8 @@ export function getRenderer (getPlugin) {
     abort: state.abort
   }
 
+  // TODO: the result of this computed, especially the dynamic part, isn't currently typed
+  // This result in an error with Volar when accessing the state (eg. files array)
   const slotScope = computed(() => {
     const acc = {
       canAddFiles: canAddFiles.value,

package/src/components/uploader/xhr-uploader-plugin.json

@@ -2,6 +2,7 @@
   "props": {
     "factory": {
       "type": "Function",
+      "tsType": "QUploaderFactoryFn",
       "desc": "Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
@@ -112,7 +113,7 @@
       },
       "returns": {
         "type": "String",
-        "desc": "An array consists of objects with header definitions",
+        "desc": "An array consisting of objects with header definitions",
         "__exemption": [ "examples" ]
       },
       "category": "upload"

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, onActivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
 import debounce from '../../utils/debounce.js'
 import { noop } from '../../utils/event.js'
@@ -559,13 +559,14 @@ export function useVirtualScroll ({
     prevToIndex = -1
     prevScrollStart = void 0
 
+    virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
+    virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
+
     if (toIndex >= 0) {
       updateVirtualScrollSizes(virtualScrollSliceRange.value.from)
       nextTick(() => { scrollTo(toIndex) })
     }
     else {
-      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
-      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
       onVirtualScrollEvt()
     }
   }
@@ -590,22 +591,24 @@ export function useVirtualScroll ({
 
     localScrollViewSize = scrollViewSize
 
-    const multiplier = 1 + props.virtualScrollSliceRatioBefore + props.virtualScrollSliceRatioAfter
+    const virtualScrollSliceRatioBefore = parseFloat(props.virtualScrollSliceRatioBefore) || 0
+    const virtualScrollSliceRatioAfter = parseFloat(props.virtualScrollSliceRatioAfter) || 0
+    const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
     const view = scrollViewSize === void 0 || scrollViewSize <= 0
       ? 1
       : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value)
 
     const baseSize = Math.max(
-      10,
+      1,
       view,
-      Math.ceil(props.virtualScrollSliceSize / multiplier)
+      Math.ceil((props.virtualScrollSliceSize > 0 ? props.virtualScrollSliceSize : 10) / multiplier)
     )
 
     virtualScrollSliceSizeComputed.value = {
       total: Math.ceil(baseSize * multiplier),
-      start: Math.ceil(baseSize * props.virtualScrollSliceRatioBefore),
-      center: Math.ceil(baseSize * (0.5 + props.virtualScrollSliceRatioBefore)),
-      end: Math.ceil(baseSize * (1 + props.virtualScrollSliceRatioBefore)),
+      start: Math.ceil(baseSize * virtualScrollSliceRatioBefore),
+      center: Math.ceil(baseSize * (0.5 + virtualScrollSliceRatioBefore)),
+      end: Math.ceil(baseSize * (1 + virtualScrollSliceRatioBefore)),
       view
     }
   }
@@ -691,7 +694,15 @@ export function useVirtualScroll ({
     setVirtualScrollSize()
   })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
   onActivated(() => {
+    if (shouldActivate !== true) { return }
+
     const scrollEl = getVirtualScrollTarget()
 
     if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, Transition, nextTick, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, Transition, nextTick, onActivated, onDeactivated, onBeforeUnmount, onMounted, getCurrentInstance } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
@@ -270,7 +270,7 @@ export default function (state) {
     if (target && (el === null || el.id !== state.targetUid.value)) {
       target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'))
       if (target && target !== el) {
-        target.focus()
+        target.focus({ preventScroll: true })
       }
     }
   }
@@ -288,6 +288,7 @@ export default function (state) {
   }
 
   function onControlFocusin (e) {
+    clearTimeout(focusoutTimer)
     if (state.editable.value === true && state.focused.value === false) {
       state.focused.value = true
       emit('focus', e)
@@ -300,13 +301,9 @@ export default function (state) {
       if (
         document.hasFocus() === true && (
           state.hasPopupOpen === true
-          || (
-            state.controlRef !== void 0
-            && (
-              state.controlRef.value === null
-              || state.controlRef.value.contains(document.activeElement) !== false
-            )
-          )
+          || state.controlRef === void 0
+          || state.controlRef.value === null
+          || state.controlRef.value.contains(document.activeElement) !== false
         )
       ) {
         return
@@ -532,6 +529,16 @@ export default function (state) {
   // expose public methods
   Object.assign(proxy, { focus, blur })
 
+  let shouldActivate = false
+
+  onDeactivated(() => {
+    shouldActivate = true
+  })
+
+  onActivated(() => {
+    shouldActivate === true && props.autofocus === true && proxy.focus()
+  })
+
   onMounted(() => {
     if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
       state.targetUid.value = getTargetUid()

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

@@ -72,6 +72,7 @@
       "params": {
         "rejectedEntries": {
           "type": "Array",
+          "tsType": "QRejectedEntry",
           "desc": "Array of { failedPropValidation: string, file: File } Objects for files that do not pass the validation",
           "__exemption": ["examples"]
         }

package/src/plugins/BottomSheet.json

@@ -33,6 +33,7 @@
               "definition": {
                 "classes": {
                   "type": [ "String", "Array", "Object" ],
+                  "tsType": "VueClassProp",
                   "desc": "CSS classes for this action",
                   "examples": [ "my-class" ]
                 },

package/src/plugins/Dialog.json

@@ -14,6 +14,7 @@
         "opts": {
           "desc": "Dialog options",
           "tsType": "QDialogOptions",
+          "autoDefineTsType": true,
           "definition": {
             "title": {
               "type": "String",

package/src/plugins/LoadingBar.js

@@ -49,11 +49,11 @@ const Plugin = defineReactivePlugin({
     Object.assign(this, {
       start (speed) {
         barRef.value.start(speed)
-        Plugin.isActive = barRef.value.calls > 0
+        Plugin.isActive = true
       },
       stop () {
-        barRef.value.stop()
-        Plugin.isActive = barRef.value.calls > 0
+        const sessions = barRef.value.stop()
+        Plugin.isActive = sessions > 0
       },
       increment () {
         barRef.value.increment.apply(null, arguments)

package/src/plugins/LoadingBar.json

@@ -16,6 +16,14 @@
     }
   },
 
+  "props": {
+    "isActive": {
+      "type": "Boolean",
+      "desc": "Is LoadingBar active?",
+      "reactive": true
+    }
+  },
+
   "methods": {
     "start": {
       "desc": "Notify bar you've started a background activity",