quasar 2.15.1 → 2.15.2

package/src/components/rating/QRating.json

@@ -9,13 +9,13 @@
     "model-value": {
       "extends": "model-value",
       "type": "Number",
-      "examples": [ "v-model=\"rating\"", ":model-value=\"rating\"", ":model-value=\"2\"" ]
+      "examples": [ "# v-model=\"rating\"", "# :model-value=\"rating\"", "# :model-value=\"2\"" ]
     },
 
     "max": {
       "type": [ "Number", "String" ],
       "desc": "Number of icons to display",
-      "default": 5,
+      "default": "5",
       "category": "general"
     },
 
@@ -23,10 +23,10 @@
       "type": [ "String", "Array" ],
       "desc": "Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
-        "map",
-        "ion-add",
-        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:path/to/some_image.png"
+        "'map'",
+        "'ion-add'",
+        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
+        "'img:path/to/some_image.png'"
       ],
       "category": "content"
     },
@@ -35,10 +35,10 @@
       "type": [ "String", "Array" ],
       "desc": "Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
-        "map",
-        "ion-add",
-        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:path/to/some_image.png"
+        "'map'",
+        "'ion-add'",
+        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
+        "'img:path/to/some_image.png'"
       ],
       "category": "content"
     },
@@ -47,10 +47,10 @@
       "type": [ "String", "Array" ],
       "desc": "Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)",
       "examples": [
-        "map",
-        "ion-add",
-        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:path/to/some_image.png"
+        "'map'",
+        "'ion-add'",
+        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
+        "'img:path/to/some_image.png'"
       ],
       "category": "content"
     },
@@ -58,10 +58,7 @@
     "icon-aria-label": {
       "type": [ "String", "Array" ],
       "desc": "Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used",
-      "examples": [
-        "Rating",
-        "[\"Bad\", \"Normal\", \"Good\"]"
-      ],
+      "examples": [ "'Rating'", "[ 'Bad', 'Normal', 'Good' ]" ],
       "category": "accessibility",
       "addedIn": "v1.20.3"
     },
@@ -70,7 +67,7 @@
       "extends": "color",
       "type": [ "String", "Array" ],
       "desc": "Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)",
-      "examples": [ "primary", "teal-10", "[\"accent\", \"grey-7\"] "]
+      "examples": [ "'primary'", "'teal-10'", "[ 'accent', 'grey-7' ]" ]
     },
 
     "color-selected": {

package/src/components/resize-observer/QResizeObserver.json

@@ -7,8 +7,8 @@
     "debounce": {
       "type": [ "String", "Number" ],
       "desc": "Debounce amount (in milliseconds)",
-      "default": 100,
-      "examples": [ "0", "530" ],
+      "default": "100",
+      "examples": [ "0", "'530'" ],
       "category": "behavior"
     }
   },

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

@@ -5,7 +5,7 @@ import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'

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

@@ -12,7 +12,7 @@
       "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 }\"" ],
+      "examples": [ "{ borderRadius: '5px', background: 'red', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -20,7 +20,7 @@
       "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 }\"" ],
+      "examples": [ "{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -28,7 +28,7 @@
       "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 }\"" ],
+      "examples": [ "{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -36,7 +36,7 @@
       "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 }\"" ],
+      "examples": [ "{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -44,7 +44,7 @@
       "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 }\"" ],
+      "examples": [ "{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -52,7 +52,7 @@
       "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 }\"" ],
+      "examples": [ "{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }" ],
       "category": "style"
     },
 
@@ -60,7 +60,7 @@
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueStyleProp",
       "desc": "Object with CSS properties and values for styling the container of QScrollArea",
-      "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
+      "examples": [ "{ backgroundColor: '#C0C0C0' }" ],
       "category": "style"
     },
 
@@ -68,13 +68,13 @@
       "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' }\"" ],
+      "examples": [ "{ backgroundColor: 'white' }" ],
       "category": "style"
     },
 
     "visible": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior",
       "category": "behavior"
     },
@@ -82,7 +82,7 @@
     "delay": {
       "type": [ "Number", "String" ],
       "desc": "When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)",
-      "default": 1000,
+      "default": "1000",
       "category": "behavior"
     },
 
@@ -268,7 +268,7 @@
           "type": "String",
           "required": true,
           "desc": "Scroll axis",
-          "values": [ "vertical", "horizontal" ]
+          "values": [ "'vertical'", "'horizontal'" ]
         },
         "offset": {
           "type": "Number",
@@ -288,7 +288,7 @@
         "axis": {
           "type": "String",
           "desc": "Scroll axis",
-          "values": [ "vertical", "horizontal" ],
+          "values": [ "'vertical'", "'horizontal'" ],
           "required": true
         },
         "offset": {

package/src/components/scroll-observer/QScrollObserver.json

@@ -7,15 +7,15 @@
     "debounce": {
       "type": [ "String", "Number" ],
       "desc": "Debounce amount (in milliseconds)",
-      "examples": [ "0", "530" ],
+      "examples": [ "0", "'530'" ],
       "category": "behavior"
     },
 
     "axis": {
       "type": "String",
       "desc": "Axis on which to detect changes",
-      "values": [ "both", "vertical", "horizontal" ],
-      "default": "vertical",
+      "values": [ "'both'", "'vertical'", "'horizontal'" ],
+      "default": "'vertical'",
       "category": "behavior"
     },
 
@@ -54,7 +54,7 @@
               "type": "String",
               "required": true,
               "desc": "Direction of scroll",
-              "values": [ "up", "down", "left", "right" ]
+              "values": [ "'up'", "'down'", "'left'", "'right'" ]
             },
             "directionChanged": {
               "type": "Boolean",

package/src/components/select/QSelect.json

@@ -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"
     },
@@ -215,9 +215,7 @@
     "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': <condition> }"
       ],
       "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,38 +310,36 @@
     "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"
     }
   },
@@ -371,7 +367,7 @@
         "inputValue": {
           "type": "String",
           "desc": "Input textfield value, if any (not QSelect model)",
-          "examples": [ "typed something" ]
+          "examples": [ "'typed something'" ]
         }
       }
     },
@@ -418,7 +414,7 @@
         "tabindex": {
           "type": "Number",
           "desc": "Tabindex HTML attribute value associated with respective option",
-          "values": [ 0, -1 ]
+          "values": [ "0", "-1" ]
         }
       }
     },
@@ -539,7 +535,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "phone" ]
+          "examples": [ "'phone'" ]
         },
         "doneFn": {
           "type": "Function",
@@ -554,8 +550,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 +565,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "phone" ]
+          "examples": [ "'phone'" ]
         },
         "doneFn": {
           "type": "Function",
@@ -724,7 +720,7 @@
         "offset": {
           "type": "Number",
           "desc": "Number of options to move up or down",
-          "default": 1
+          "default": "1"
         },
         "skipInputValue": {
           "type": "Boolean",
@@ -740,7 +736,7 @@
           "type": "String",
           "required": true,
           "desc": "String to filter with",
-          "examples": [ "car" ]
+          "examples": [ "'car'" ]
         }
       }
     },
@@ -756,7 +752,7 @@
           "type": "String",
           "required": true,
           "desc": "String to set the input value to",
-          "examples": [ "hotel" ]
+          "examples": [ "'hotel'" ]
         },
         "noFilter": {
           "type": "Boolean",