quasar 2.4.10 → 2.5.0

package/src/components/select/__tests__/WrapperOne.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="margin: 150px auto" class="row justify-center" data-cy="wrapper">
+    <q-select
+      data-cy="select"
+      class="select-root"
+      ref="compRef"
+      v-bind="$attrs"
+      style="min-width: 300px"
+    >
+      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+        <slot :name="slot" v-bind="{ ...scope }" />
+      </template>
+    </q-select>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+  setup () {
+    const compRef = ref(null)
+
+    return { compRef }
+  }
+})
+</script>

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",