quasar 2.15.1 → 2.15.3

package/src/components/select/QSelect.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-field", "components/virtual-scroll/use-virtual-scroll", "composables/private/use-form" ],
+  "mixins": [ "composables/private.use-field/use-field", "components/virtual-scroll/use-virtual-scroll", "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/select"
@@ -10,7 +10,7 @@
       "extends": "model-value",
       "type": "Any",
       "desc": "Model of the component; Must be Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "v-model=\"myModel\"" ]
+      "examples": [ "# v-model=\"myModel\"" ]
     },
 
     "multiple": {
@@ -22,7 +22,7 @@
     "display-value": {
       "type": [ "Number", "String" ],
       "desc": "Override default selection string, if not using 'selected' slot/scoped slot and if not using 'use-chips' prop",
-      "examples": [ "Options: x, y, z" ],
+      "examples": [ "'Options: x, y, z'" ],
       "category": "selection"
     },
 
@@ -37,8 +37,8 @@
       "desc": "Available options that the user can select from. For best performance freeze the list of options.",
       "default": "[]",
       "examples": [
-        ":options=\"[ 'BMW', 'Samsung Phone' ]\"",
-        ":options=\"[ { label: 'BMW', value: 'car' }, { label: 'Samsung Phone', value: 'phone' } ]\""
+        "[ 'Tesla', 'iPhone' ]",
+        "[ { label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' } ]"
       ],
       "category": "options"
     },
@@ -46,15 +46,15 @@
     "option-value": {
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "default": "value",
+      "default": "'value'",
       "params": {
         "option": {
           "type": [ "String", "Object" ],
           "desc": "The current option being processed",
           "examples": [
-            "'BMW'",
-            "'Samsung Phone'",
-            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
           ]
         }
       },
@@ -64,8 +64,8 @@
         "examples": [ "'car'", "34" ]
       },
       "examples": [
-        "option-value=\"modelNumber\"",
-        ":option-value=\"(item) => item === null ? null : item.modelNumber\""
+        "'modelNumber'",
+        "item => (item === null ? null : item.modelNumber)"
       ],
       "category": "options"
     },
@@ -73,26 +73,26 @@
     "option-label": {
       "type": [ "Function", "String" ],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "default": "label",
+      "default": "'label'",
       "params": {
         "option": {
           "type": [ "String", "Object" ],
           "desc": "The current option being processed",
           "examples": [
-            "'BMW'",
-            "'Samsung Phone'",
-            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
           ]
         }
       },
       "returns": {
         "type": "String",
         "desc": "Label of the current option",
-        "examples": [ "'BMW'", "'Samsung Phone'" ]
+        "examples": [ "'Tesla'", "'iPhone'" ]
       },
       "examples": [
-        "option-label=\"itemName\"",
-        ":option-label=\"(item) => item === null ? 'Null value' : item.itemName\""
+        "'itemName'",
+        "item => (item === null ? 'Null value' : item.itemName)"
       ],
       "category": "options"
     },
@@ -100,15 +100,15 @@
     "option-disable": {
       "type": [ "Function", "String" ],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
-      "default": "disable",
+      "default": "'disable'",
       "params": {
         "option": {
           "type": [ "String", "Object" ],
           "desc": "The current option being processed",
           "examples": [
-            "'BMW'",
-            "'Samsung Phone'",
-            "{ label: 'BMW', value: 'car', cannotSelect: true }"
+            "'Tesla'",
+            "'iPhone'",
+            "{ label: 'Tesla', value: 'car', cannotSelect: true }"
           ]
         }
       },
@@ -117,8 +117,8 @@
         "desc": "If true, the current option will be disabled"
       },
       "examples": [
-        "option-disable=\"cannotSelect\"",
-        ":option-disable=\"(item) => item === null ? true : item.cannotSelect\""
+        "item => (item === null ? true : item.cannotSelect)",
+        "# option-disable=\"cannotSelect\""
       ],
       "category": "options"
     },
@@ -153,7 +153,7 @@
 
     "options-dark": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Options menu will be colored with a dark color",
       "category": "options"
     },
@@ -161,7 +161,7 @@
     "options-selected-class": {
       "type": "String",
       "desc": "CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the 'color' prop value)",
-      "examples": [ "text-orange" ],
+      "examples": [ "'text-orange'" ],
       "category": "options"
     },
 
@@ -187,9 +187,9 @@
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
       "category": "position"
     },
@@ -198,9 +198,9 @@
       "type": "String",
       "desc": "Two values setting the options list's own position relative to its target (only in menu mode)",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
       "category": "position"
     },
@@ -208,16 +208,14 @@
     "menu-offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)",
-      "examples": [ "[8, 8]", "[5, 10]" ],
+      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
       "category": "position"
     },
 
     "popup-content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the popup content",
-      "examples": [
-        "my-special-class"
-      ],
+      "examples": [ "'my-special-class'" ],
       "category": "style"
     },
 
@@ -226,8 +224,8 @@
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
-        "background-color: #ff0000",
-        ":popup-content-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background-color: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },
@@ -260,7 +258,7 @@
     "new-value-mode": {
       "type": "String",
       "desc": "Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by 'new-value-mode')",
-      "values": [ "add", "add-unique", "toggle" ],
+      "values": [ "'add'", "'add-unique'", "'toggle'" ],
       "category": "behavior"
     },
 
@@ -279,7 +277,7 @@
     "input-debounce": {
       "type": [ "Number", "String" ],
       "desc": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)",
-      "default": 500,
+      "default": "500",
       "category": "content"
     },
 
@@ -288,8 +286,8 @@
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
       "examples": [
-        "my-special-class",
-        ":input-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -299,8 +297,8 @@
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
-        "background-color: #ff0000",
-        ":input-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background-color: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },
@@ -312,39 +310,41 @@
     "autocomplete": {
       "type": "String",
       "desc": "Autocomplete attribute for field",
-      "examples": [ "autocomplete=\"country\"" ],
+      "examples": [ "'country'" ],
       "category": "behavior"
     },
 
     "transition-show": {
       "extends": "transition",
       "desc": "Transition when showing the menu/dialog; One of Quasar's embedded transitions",
-      "default": "fade",
+      "default": "'fade'",
       "category": "behavior"
     },
 
     "transition-hide": {
       "extends": "transition",
       "desc": "Transition when hiding the menu/dialog; One of Quasar's embedded transitions",
-      "default": "fade",
+      "default": "'fade'",
       "category": "behavior"
     },
 
     "transition-duration": {
       "type": [ "String", "Number" ],
       "desc": "Transition duration when hiding the menu/dialog (in milliseconds, without unit)",
-      "default": 300,
+      "default": "300",
       "category": "behavior"
     },
 
     "behavior": {
       "type": "String",
       "desc": "Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles",
-      "values": [
-        "default", "menu", "dialog"
-      ],
-      "default": "default",
+      "values": [ "'default'", "'menu'", "'dialog'" ],
+      "default": "'default'",
       "category": "behavior"
+    },
+
+    "name": {
+      "desc": "Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists"
     }
   },
 
@@ -371,7 +371,7 @@
         "inputValue": {
           "type": "String",
           "desc": "Input textfield value, if any (not QSelect model)",
-          "examples": [ "typed something" ]
+          "examples": [ "'typed something'" ]
         }
       }
     },
@@ -418,7 +418,7 @@
         "tabindex": {
           "type": "Number",
           "desc": "Tabindex HTML attribute value associated with respective option",
-          "values": [ 0, -1 ]
+          "values": [ "0", "-1" ]
         }
       }
     },
@@ -539,7 +539,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "phone" ]
+          "examples": [ "'phone'" ]
         },
         "doneFn": {
           "type": "Function",
@@ -554,8 +554,8 @@
               "type": "String",
               "required": false,
               "desc": "Override 'new-value-mode' (prop) behavior should you wish to",
-              "values": [ "add", "add-unique", "toggle" ],
-              "default": "add"
+              "values": [ "'add'", "'add-unique'", "'toggle'" ],
+              "default": "'add'"
             }
           },
           "returns": null
@@ -569,7 +569,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "phone" ]
+          "examples": [ "'phone'" ]
         },
         "doneFn": {
           "type": "Function",
@@ -635,6 +635,7 @@
         "details": {
           "definition": {
             "ref": {
+              "type": "Component",
               "tsType": "QSelect",
               "desc": "Vue reference to the QSelect"
             }
@@ -646,15 +647,21 @@
 
   "methods": {
     "focus": {
-      "desc": "Focus component"
+      "desc": "Focus component",
+      "params": null,
+      "returns": null
     },
 
     "showPopup": {
-      "desc": "Focus and open popup"
+      "desc": "Focus and open popup",
+      "params": null,
+      "returns": null
     },
 
     "hidePopup": {
-      "desc": "Hide popup"
+      "desc": "Hide popup",
+      "params": null,
+      "returns": null
     },
 
     "removeAtIndex": {
@@ -665,7 +672,8 @@
           "required": true,
           "desc": "Index at which to remove selection"
         }
-      }
+      },
+      "returns": null
     },
 
     "add": {
@@ -680,7 +688,8 @@
           "type": "Boolean",
           "desc": "Option must be unique"
         }
-      }
+      },
+      "returns": null
     },
 
     "toggleOption": {
@@ -695,11 +704,13 @@
           "type": "Boolean",
           "desc": "Don't close the menu and do not clear the filter"
         }
-      }
+      },
+      "returns": null
     },
 
     "getOptionIndex": {
       "desc": "Gets current focused option index from menu; It's -1 if no option is focused",
+      "params": null,
       "returns": {
         "type": "Number",
         "desc": "Index of option from menu; It's -1 if no option is focused"
@@ -715,7 +726,8 @@
           "required": true,
           "desc": "Index of option from menu; -1 to focus none"
         }
-      }
+      },
+      "returns": null
     },
 
     "moveOptionSelection": {
@@ -724,13 +736,14 @@
         "offset": {
           "type": "Number",
           "desc": "Number of options to move up or down",
-          "default": 1
+          "default": "1"
         },
         "skipInputValue": {
           "type": "Boolean",
           "desc": "Don't set input-value on navigation"
         }
-      }
+      },
+      "returns": null
     },
 
     "filter": {
@@ -740,13 +753,16 @@
           "type": "String",
           "required": true,
           "desc": "String to filter with",
-          "examples": [ "car" ]
+          "examples": [ "'car'" ]
         }
-      }
+      },
+      "returns": null
     },
 
     "updateMenuPosition": {
-      "desc": "Recomputes menu position"
+      "desc": "Recomputes menu position",
+      "params": null,
+      "returns": null
     },
 
     "updateInputValue": {
@@ -756,13 +772,14 @@
           "type": "String",
           "required": true,
           "desc": "String to set the input value to",
-          "examples": [ "hotel" ]
+          "examples": [ "'hotel'" ]
         },
         "noFilter": {
           "type": "Boolean",
           "desc": "Set to true if you don't want the filter (if any) to be also triggered"
         }
-      }
+      },
+      "returns": null
     },
 
     "isOptionSelected": {

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.js

@@ -1,8 +1,8 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
+import { createComponent } from '../../utils/private.create/create.js'
 
 const insetMap = {
   true: 'inset',

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.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export const skeletonTypes = [
   'text', 'rect', 'circle',