quasar 2.15.1 → 2.15.2

package/src/components/select/__tests__/QSelect.cy.js

@@ -4,7 +4,10 @@ import { h, ref } from 'vue'
 import QSelect from '../QSelect.js'
 
 function getHostElement (extendedSelector = '') {
-  return cy.get(`.q-select ${ extendedSelector }`)
+  // A majority of tests click on the select, so we ensure the select is visible before the click happens.
+  // See https://github.com/cypress-io/cypress/discussions/14889
+  // See https://www.cypress.io/blog/2020/08/17/when-can-the-test-navigate#visible-elements
+  return extendedSelector ? cy.get(`.q-select ${ extendedSelector }`) : cy.get('.q-select').should('be.visible')
 }
 
 function mountQSelect (options = {}) {
@@ -222,6 +225,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -242,6 +246,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -266,6 +271,7 @@ describe('QSelect API', () => {
           getHostElement().click()
           cy.withinSelectMenu(() => {
             cy.contains('Option 1')
+              .should('be.visible')
               .click()
             cy.contains('Option 1')
               .then(() => {
@@ -276,6 +282,7 @@ describe('QSelect API', () => {
           getHostElement().click()
           cy.withinSelectMenu(() => {
             cy.contains('Option 2')
+              .should('be.visible')
               .click()
             cy.contains('Option 2')
               .then(() => {
@@ -300,6 +307,7 @@ describe('QSelect API', () => {
             persistent: true,
             fn: () => {
               cy.contains('Option 1')
+                .should('be.visible')
                 .click()
               cy.contains('Option 1')
                 .then(() => {
@@ -307,6 +315,7 @@ describe('QSelect API', () => {
                 })
 
               cy.contains('Option 2')
+                .should('be.visible')
                 .click()
               cy.contains('Option 2')
                 .then(() => {
@@ -353,6 +362,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -375,6 +385,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -397,6 +408,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -636,6 +648,8 @@ describe('QSelect API', () => {
           })
           getHostElement()
             .click()
+          cy.get('.q-menu').should('be.visible')
+          getHostElement()
             .isNotActionable(done)
         })
 
@@ -868,6 +882,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .get('[role="option"]')
+            .should('be.visible')
             .as('clicked')
             .click({ multiple: true })
           cy.get('@clicked')
@@ -1242,6 +1257,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1292,6 +1308,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1301,6 +1318,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1330,6 +1348,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1544,6 +1563,7 @@ describe('QSelect API', () => {
           }
         })
 
+        getHostElement()
         cy.get('.q-menu')
           .should('not.exist')
           .then(() => {

package/src/components/separator/QSeparator.json

@@ -11,17 +11,15 @@
     "spaced": {
       "type": [ "Boolean", "String" ],
       "desc": "If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes",
-      "default": "md",
-      "examples": [
-        "12px", "sm", "md"
-      ],
+      "default": "'md'",
+      "examples": [ "'12px'", "'sm'", "'md'" ],
       "category": "content"
     },
 
     "inset": {
       "type": [ "Boolean", "String" ],
       "desc": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side",
-      "values": [ "(Boolean) true", "(Boolean) false", "item", "item-thumbnail" ],
+      "values": [ "true", "false", "'item'", "'item-thumbnail'" ],
       "category": "content"
     },
 

package/src/components/skeleton/QSkeleton.json

@@ -12,29 +12,27 @@
       "type": "String",
       "desc": "Type of skeleton placeholder",
       "values": [
-        "text", "rect", "circle",
-        "QBtn", "QBadge", "QChip", "QToolbar",
-        "QCheckbox", "QRadio", "QToggle",
-        "QSlider", "QRange", "QInput",
-        "QAvatar"
+        "'text'", "'rect'", "'circle'",
+        "'QBtn'", "'QBadge'", "'QChip'", "'QToolbar'",
+        "'QCheckbox'", "'QRadio'", "'QToggle'",
+        "'QSlider'", "'QRange'", "'QInput'",
+        "'QAvatar'"
       ],
-      "default": "rect",
+      "default": "'rect'",
       "category": "content"
     },
 
     "animation": {
       "type": "String",
       "desc": "The animation effect of the skeleton placeholder",
-      "values": [
-        "wave", "pulse", "pulse-x", "pulse-y", "fade", "blink", "none"
-      ],
-      "default": "wave",
+      "values": [ "'wave'", "'pulse'", "'pulse-x'", "'pulse-y'", "'fade'", "'blink'", "'none'" ],
+      "default": "'wave'",
       "category": "style"
     },
 
     "animation-speed": {
       "extends": "animation-speed",
-      "default": 300,
+      "default": "300",
       "addedIn": "v2.2"
     },
 
@@ -49,28 +47,28 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name; Overrides 'height' and 'width' props and applies the value to both height and width",
-      "examples": [ "16px", "2rem" ],
+      "examples": [ "'16px'", "'2rem'" ],
       "category": "style"
     },
 
     "width": {
       "type": "String",
       "desc": "Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by 'size' prop if used",
-      "examples": [ "16px", "2rem" ],
+      "examples": [ "'16px'", "'2rem'" ],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by 'size' prop if used",
-      "examples": [ "16px", "2rem" ],
+      "examples": [ "'16px'", "'2rem'" ],
       "category": "style"
     },
 
     "tag": {
       "extends": "tag",
-      "default": "div",
-      "examples": [ "div", "span" ]
+      "default": "'div'",
+      "examples": [ "'div'", "'span'" ]
     }
   },
 

package/src/components/slide-item/QSlideItem.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, withDirectives, onBeforeUnmount, onBeforeUpdate, getCurrentInstance } from 'vue'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useRenderCache from '../../composables/use-render-cache.js'

package/src/components/slide-item/QSlideItem.json

@@ -143,7 +143,7 @@
               "type": "String",
               "required": true,
               "desc": "Side to which sliding is taking effect",
-              "values": [ "left", "right", "top", "bottom" ]
+              "values": [ "'left'", "'right'", "'top'", "'bottom'" ]
             },
             "ratio": {
               "type": "Number",
@@ -171,7 +171,7 @@
               "type": "String",
               "required": true,
               "desc": "Side to which sliding has taken effect",
-              "values": [ "left", "right", "top", "bottom" ]
+              "values": [ "'left'", "'right'", "'top'", "'bottom'" ]
             },
             "reset": {
               "type": "Function",

package/src/components/slide-transition/QSlideTransition.json

@@ -13,7 +13,7 @@
     "duration": {
       "type": "Number",
       "desc": "Duration (in milliseconds) enabling animated scroll.",
-      "default": 300,
+      "default": "300",
       "category": "behavior"
     }
   },

package/src/components/slider/QSlider.json

@@ -10,15 +10,13 @@
       "extends": "model-value",
       "type": [ "Number", "null", "undefined" ],
       "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "v-model=\"positionModel\"" ]
+      "examples": [ "# v-model=\"positionModel\"" ]
     },
 
     "label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label value",
-      "examples": [
-        ":label-value=\"model + 'px'\""
-      ],
+      "examples": [ "# :label-value=\"model + 'px'\"" ],
       "category": "content"
     }
   },

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

@@ -1,6 +1,6 @@
 import { h, ref, computed, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { useFormProps, useFormInject } from '../../composables/private/use-form.js'

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

@@ -5,15 +5,14 @@
     "min": {
       "type": "Number",
       "desc": "Minimum value of the model; Set track's minimum value",
-      "default": 0,
-      "examples": [ ":min=\"0\"" ],
+      "default": "0",
       "category": "model"
     },
 
     "max": {
       "type": "Number",
       "desc": "Maximum value of the model; Set track's maximum value",
-      "default": 100,
+      "default": "100",
       "category": "model"
     },
 
@@ -34,7 +33,7 @@
     "step": {
       "type": "Number",
       "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
-      "default": 1,
+      "default": "1",
       "category": "model"
     },
 
@@ -70,7 +69,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the track",
       "transformAssetUrls": true,
-      "examples": [ "~assets/my-pattern.png" ],
+      "examples": [ "'~assets/my-pattern.png'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -85,7 +84,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the inner track",
       "transformAssetUrls": true,
-      "examples": [ "~assets/my-pattern.png" ],
+      "examples": [ "'~assets/my-pattern.png'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -100,7 +99,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the selection bar",
       "transformAssetUrls": true,
-      "examples": [ "~assets/my-pattern.png" ],
+      "examples": [ "'~assets/my-pattern.png'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -136,10 +135,7 @@
       "type": [ "Boolean", "Number" ],
       "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
       "category": "content",
-      "examples": [
-        "markers",
-        ":markers=\"5\""
-      ]
+      "examples": [ "5", "true" ]
     },
 
     "marker-labels": {
@@ -160,7 +156,7 @@
           "type": [ "String", "Array", "Object" ],
           "tsType": "VueClassProp",
           "desc": "CSS classes to be attributed to the marker label",
-          "examples": [ "my-class-name" ]
+          "examples": [ "'my-class-name'" ]
         },
         "style": {
           "type": "Object",
@@ -192,7 +188,7 @@
             "type": [ "String", "Array", "Object" ],
             "tsType": "VueClassProp",
             "desc": "CSS classes to be attributed to the marker label",
-            "examples": [ "my-class-name" ]
+            "examples": [ "'my-class-name'" ]
           },
           "style": {
             "type": "Object",
@@ -204,7 +200,7 @@
       },
       "category": "content",
       "examples": [
-        true,
+        "true",
         "[ { value: 0, label: '0%' }, { value: 5, classes: 'my-class', style: { width: '24px' } } ]",
         "{ 0: '0%', 5: { label: '5%', classes: 'my-class', style: { width: '24px' } } }",
         "val => (10 * val) + '%'",
@@ -216,7 +212,7 @@
     "marker-labels-class": {
       "type": "String",
       "desc": "CSS class(es) to apply to the marker labels container",
-      "examples": [ "text-orange" ],
+      "examples": [ "'text-orange'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -231,8 +227,8 @@
     "track-size": {
       "type": "String",
       "desc": "Track size (including CSS unit)",
-      "default": "4px",
-      "examples": [ "35px" ],
+      "default": "'4px'",
+      "examples": [ "'35px'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -240,8 +236,8 @@
     "thumb-size": {
       "type": "String",
       "desc": "Thumb size (including CSS unit)",
-      "default": "20px",
-      "examples": [ "20px" ],
+      "default": "'20px'",
+      "examples": [ "'20px'" ],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -254,8 +250,8 @@
     "thumb-path": {
       "type": "String",
       "desc": "Set custom thumb svg path",
-      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
-      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
+      "default": "'M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0'",
+      "examples": [ "'M5 5 h10 v10 h-10 v-10'" ],
       "category": "style"
     },
 
@@ -510,7 +506,7 @@
         "phase": {
           "type": "String",
           "desc": "Phase of panning",
-          "values": [ "start", "end" ]
+          "values": [ "'start'", "'end'" ]
         }
       }
     }

package/src/components/spinner/QSpinner.json

@@ -13,7 +13,7 @@
     "thickness": {
       "type": "Number",
       "desc": "Override value to use for stroke-width",
-      "default": 5,
+      "default": "5",
       "category": "style"
     }
   }

package/src/components/spinner/QSpinnerAudio.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerBall.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerBars.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerBox.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerClock.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerComment.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerCube.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerDots.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerFacebook.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerGears.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerGrid.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerHearts.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerHourglass.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerInfinity.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerIos.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerOrbit.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerOval.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerPie.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerPuff.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerRadio.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerRings.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/spinner/QSpinnerTail.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/__spinner-mixin" ]
+  "mixins": [ "components/spinner/spinner" ]
 }

package/src/components/splitter/QSplitter.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'