quasar 2.15.1 → 2.15.2

package/src/components/form/QFormChildMixin.json

@@ -9,9 +9,7 @@
       "returns": {
         "type": [ "Boolean", "Promise<boolean>" ],
         "desc": "Promise is always fulfilled and receives the outcome (true -> validation was a success, false -> invalid models detected)",
-        "examples": [
-          "validate().then(outcome => { ... })"
-        ]
+        "examples": [ "validate().then(outcome => { ... })" ]
       }
     },
 

package/src/components/header/QHeader.json

@@ -8,11 +8,9 @@
       "extends": "model-value",
       "type": "Boolean",
       "desc": "Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "default": true,
+      "default": "true",
       "required": false,
-      "examples": [
-        "v-model=\"headerState\""
-      ]
+      "examples": [ "# v-model=\"headerState\"" ]
     },
 
     "reveal": {
@@ -24,7 +22,7 @@
     "reveal-offset": {
       "type": "Number",
       "desc": "Amount of scroll (in pixels) that should trigger a 'reveal' state change",
-      "default": 250,
+      "default": "250",
       "category": "behavior"
     },
 
@@ -41,7 +39,7 @@
     "height-hint": {
       "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QHeader",
-      "default": 50,
+      "default": "50",
       "category": "behavior"
     }
   },

package/src/components/icon/QIcon.json

@@ -9,8 +9,8 @@
     "tag": {
       "extends": "tag",
       "desc": "HTML tag to render, unless no icon is supplied or it's an svg icon",
-      "default": "i",
-      "examples": [ "div", "i" ]
+      "default": "'i'",
+      "examples": [ "'div'", "'i'" ]
     },
 
     "name": {

package/src/components/img/QImg.js

@@ -2,7 +2,7 @@ import { h, ref, computed, watch, onMounted, Transition, getCurrentInstance } fr
 
 import QSpinner from '../spinner/QSpinner.js'
 
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/img/QImg.json

@@ -11,10 +11,10 @@
       "desc": "Path to image",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) src=\"img/something.png\"",
-        "(assets folder) src=\"~assets/my-img.gif\"",
-        "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://picsum.photos/500/300\""
+        "# (public folder) src=\"img/something.png\"",
+        "# (assets folder) src=\"~assets/my-img.gif\"",
+        "# (relative path format) :src=\"require('./my_img.jpg')\"",
+        "# (URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
@@ -23,9 +23,7 @@
       "type": "String",
       "desc": "Same syntax as <img> srcset attribute",
       "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
-      "examples": [
-        "elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w"
-      ],
+      "examples": [ "'elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w'" ],
       "category": "model"
     },
 
@@ -33,9 +31,7 @@
       "type": "String",
       "desc": "Same syntax as <img> sizes attribute",
       "link": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes",
-      "examples": [
-        "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
-      ],
+      "examples": [ "'(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'" ],
       "category": "model"
     },
 
@@ -44,10 +40,10 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) placeholder-src=\"img/some-placeholder.png\"",
-        "(assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
-        "(relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
-        "(URL) placeholder-src=\"https://picsum.photos/500/300\""
+        "# (public folder) placeholder-src=\"img/some-placeholder.png\"",
+        "# (assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
+        "# (relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
+        "# (URL) placeholder-src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
@@ -57,10 +53,10 @@
       "desc": "In case your image fails to load, you can use an error image",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) error-src=\"img/some-placeholder.png\"",
-        "(assets folder) error-src=\"~assets/my-placeholder.gif\"",
-        "(relative path format) :error-src=\"require('./placeholder.jpg')\"",
-        "(URL) error-src=\"https://picsum.photos/500/300\""
+        "# (public folder) error-src=\"img/some-placeholder.png\"",
+        "# (assets folder) error-src=\"~assets/my-placeholder.gif\"",
+        "# (relative path format) :error-src=\"require('./placeholder.jpg')\"",
+        "# (URL) error-src=\"https://picsum.photos/500/300\""
       ],
       "category": "model",
       "addedIn": "v2.15"
@@ -69,18 +65,18 @@
     "ratio": {
       "desc": "Force the component to maintain an aspect ratio",
       "examples": [
-        "(Number format) :ratio=\"16/9\"",
-        "(String format) ratio=\"1\""
+        "# (Number format) :ratio=\"16/9\"",
+        "# (String format) ratio=\"1\""
       ]
     },
 
     "initial-ratio": {
       "type": [ "String", "Number" ],
       "desc": "Use it when not specifying 'ratio' but still wanting an initial aspect ratio",
-      "default": "16/9",
+      "default": "1.77778",
       "examples": [
-        "(Number format) :initial-ratio=\"16/9\"",
-        "(String format) initial-ratio=\"1\""
+        "# (Number format) :initial-ratio=\"16/9\"",
+        "# (String format) initial-ratio=\"1\""
       ],
       "category": "style"
     },
@@ -88,36 +84,30 @@
     "width": {
       "type": "String",
       "desc": "Forces image width; Must also include the unit (px or %)",
-      "examples": [
-        "280px",
-        "70%"
-      ],
+      "examples": [ "'280px'", "'70%'" ],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "Forces image height; Must also include the unit (px or %)",
-      "examples": [
-        "280px",
-        "70%"
-      ],
+      "examples": [ "'280px'", "'70%'" ],
       "category": "style"
     },
 
     "loading": {
       "type": "String",
       "desc": "Lazy or immediate load; Same syntax as <img> loading attribute",
-      "default": "lazy",
-      "values": [ "lazy", "eager" ],
+      "default": "'lazy'",
+      "values": [ "'lazy'", "'eager'" ],
       "category": "behavior"
     },
 
     "loading-show-delay": {
       "type": [ "Number", "String" ],
       "desc": "Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds",
-      "default": 0,
-      "examples": [ "500", "caption-lines=\"1000\"" ],
+      "default": "0",
+      "examples": [ "500", "'700'" ],
       "category": "behavior",
       "addedIn": "v2.14.6"
     },
@@ -125,14 +115,14 @@
     "crossorigin": {
       "type": "String",
       "desc": "Same syntax as <img> crossorigin attribute",
-      "values": [ "anonymous", "use-credentials" ],
+      "values": [ "'anonymous'", "'use-credentials'" ],
       "category": "behavior"
     },
 
     "decoding": {
       "type": "String",
       "desc": "Same syntax as <img> decoding attribute",
-      "values": [ "sync", "async", "auto" ],
+      "values": [ "'sync'", "'async'", "'auto'" ],
       "category": "behavior"
     },
 
@@ -140,14 +130,14 @@
       "type": "String",
       "desc": "Same syntax as <img> referrerpolicy attribute",
       "values": [
-        "no-referrer",
-        "no-referrer-when-downgrade",
-        "origin",
-        "origin-when-cross-origin",
-        "same-origin",
-        "strict-origin",
-        "strict-origin-when-cross-origin",
-        "unsafe-url"
+        "'no-referrer'",
+        "'no-referrer-when-downgrade'",
+        "'origin'",
+        "'origin-when-cross-origin'",
+        "'same-origin'",
+        "'strict-origin'",
+        "'strict-origin-when-cross-origin'",
+        "'unsafe-url'"
       ],
       "category": "behavior"
     },
@@ -155,8 +145,8 @@
     "fetchpriority": {
       "type": "String",
       "desc": "Provides a hint of the relative priority to use when fetching the image",
-      "default": "auto",
-      "values": [ "high", "low", "auto" ],
+      "default": "'auto'",
+      "values": [ "'high'", "'low'", "'auto'" ],
       "category": "behavior",
       "addedIn": "v2.6.6"
     },
@@ -164,23 +154,23 @@
     "fit": {
       "type": "String",
       "desc": "How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop",
-      "default": "cover",
-      "values": [ "cover", "fill", "contain", "none", "scale-down" ],
+      "default": "'cover'",
+      "values": [ "'cover'", "'fill'", "'contain'", "'none'", "'scale-down'" ],
       "category": "style"
     },
 
     "position": {
       "type": "String",
       "desc": "The alignment of the image into the container; Equivalent of the object-position CSS prop",
-      "default": "50% 50%",
-      "examples": [ "0 0", "20px 50px" ],
+      "default": "'50% 50%'",
+      "examples": [ "'0 0'", "'20px 50px'" ],
       "category": "style"
     },
 
     "alt": {
       "type": "String",
       "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
-      "examples": [ "Two cats" ],
+      "examples": [ "'Two cats'" ],
       "category": "miscellaneous"
     },
 
@@ -193,9 +183,7 @@
     "img-class": {
       "type": "String",
       "desc": "CSS classes to be attributed to the native img element",
-      "examples": [
-        "my-special-class"
-      ],
+      "examples": [ "'my-special-class'" ],
       "category": "style"
     },
 
@@ -203,7 +191,7 @@
       "type": "Object",
       "tsType": "VueStyleObjectProp",
       "desc": "Apply CSS to the native img element",
-      "examples": [ ":img-style=\"{ transform: 'rotate(45deg)' }\" "],
+      "examples": [ "{ transform: 'rotate(45deg)' }"],
       "category": "style"
     },
 
@@ -259,9 +247,7 @@
         "src": {
           "type": "String",
           "desc": "URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'",
-          "examples": [
-            "https://some-site.net/some-img.gif"
-          ]
+          "examples": [ "'https://some-site.net/some-img.gif'" ]
         }
       }
     },

package/src/components/infinite-scroll/QInfiniteScroll.json

@@ -7,21 +7,21 @@
     "offset": {
       "type": "Number",
       "desc": "Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance",
-      "default": 500,
+      "default": "500",
       "category": "behavior"
     },
 
     "debounce": {
       "type": [ "String", "Number" ],
       "desc": "Debounce amount (in milliseconds)",
-      "default": 100,
+      "default": "100",
       "category": "behavior"
     },
 
     "initial-index": {
       "type": "Number",
       "desc": "Initialize the pagination index (used for the @load event)",
-      "default": 0,
+      "default": "0",
       "category": "behavior"
     },
 

package/src/components/inner-loading/QInnerLoading.json

@@ -19,13 +19,13 @@
 
     "size": {
       "desc": "Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)",
-      "default": "42px"
+      "default": "'42px'"
     },
 
     "label": {
       "type": "String",
       "desc": "Add a label; Gets overriden when using the default slot",
-      "examples": [ "Please wait..." ],
+      "examples": [ "'Please wait...'" ],
       "category": "label",
       "addedIn": "v2.2"
     },
@@ -33,9 +33,7 @@
     "label-class": {
       "type": "String",
       "desc": "Add CSS class(es) to the label; Works along the 'label' prop only",
-      "examples": [
-        "text-red q-mt-xl"
-      ],
+      "examples": [ "'text-red q-mt-xl'" ],
       "category": "label",
       "addedIn": "v2.2"
     },
@@ -45,8 +43,8 @@
       "tsType": "VueStyleProp",
       "desc": "Apply custom style to the label; Works along the 'label' prop only",
       "examples": [
-        "font-size: 28px",
-        ":label-style=\"{ color: '#ff0000' }\""
+        "'font-size: 28px'",
+        "{ color: '#ff0000' }"
       ],
       "category": "label",
       "addedIn": "v2.2"

package/src/components/input/QInput.json

@@ -10,24 +10,24 @@
       "extends": "model-value",
       "type": [ "String", "Number", "null", "undefined" ],
       "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "v-model=\"myText\"" ]
+      "examples": [ "# v-model=\"myText\"" ]
     },
 
     "shadow-text": {
       "type": "String",
       "desc": "Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file",
-      "examples": [ "rest of the fill value" ],
+      "examples": [ "'rest of the fill value'" ],
       "category": "content"
     },
 
     "type": {
       "type": "String",
       "desc": "Input type",
-      "default": "text",
+      "default": "'text'",
       "values": [
-        "text", "password", "textarea", "email", "search",
-        "tel", "file", "number", "url", "time", "date",
-        "datetime-local"
+        "'text'", "'password'", "'textarea'", "'email'", "'search'",
+        "'tel'", "'file'", "'number'", "'url'", "'time'", "'date'",
+        "'datetime-local'"
       ],
       "category": "general"
     },
@@ -55,8 +55,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"
     },
@@ -66,8 +66,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"
     }

package/src/components/input/use-mask.json

@@ -4,7 +4,7 @@
       "type": "String",
       "desc": "Custom mask or one of the predefined mask names",
       "examples": [
-        "###-##", "date", "datetime", "time", "fulltime", "phone", "card"
+        "'###-##'", "'date'", "'datetime'", "'time'", "'fulltime'", "'phone'", "'card'"
       ],
       "category": "behavior"
     },

package/src/components/intersection/QIntersection.js

@@ -1,8 +1,8 @@
 import { h, ref, computed, Transition } from 'vue'
 
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
-import Intersection from '../../directives/Intersection.js'
+import Intersection from '../../directives/intersection/Intersection.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hDir } from '../../utils/private/render.js'

package/src/components/intersection/QIntersection.json

@@ -6,8 +6,8 @@
   "props": {
     "tag": {
       "extends": "tag",
-      "default": "div",
-      "examples": [ "div", "span", "blockquote" ]
+      "default": "'div'",
+      "examples": [ "'div'", "'span'", "'blockquote'" ]
     },
 
     "once": {
@@ -24,16 +24,16 @@
 
     "root": {
       "type": [ "Element", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "[Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
-      "examples": [ "$refs.myTable.$el", "getElementById(\"myTable\")" ],
+      "examples": [ "document.getElementById('myTable')", "$refs.myTable.$el" ],
       "category": "behavior"
     },
 
     "margin": {
       "type": "String",
       "desc": "[Intersection API rootMargin prop] Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections",
-      "examples": [ "-20px 0px", "10px 20px 30px 40px" ],
+      "examples": [ "'-20px 0px'", "'10px 20px 30px 40px'" ],
       "category": "behavior"
     },
 
@@ -42,7 +42,7 @@
       "desc": "[Intersection API threshold prop] Threshold(s) at which to trigger, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element",
       "examples": [
         "[ 0, 0.25, 0.5, 0.75, 1 ]",
-        ":threshold=\"1\""
+        "1"
       ],
       "category": "behavior"
     },
@@ -55,7 +55,7 @@
     "transition-duration": {
       "type": [ "String", "Number" ],
       "desc": "Transition duration (in milliseconds, without unit)",
-      "default": 300,
+      "default": "300",
       "category": "behavior",
       "addedIn": "v2.3.1"
     },

package/src/components/item/QItem.json

@@ -8,7 +8,7 @@
   "props": {
     "active": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Put item into 'active' state",
       "category": "state"
     },
@@ -30,7 +30,7 @@
     "inset-level": {
       "type": "Number",
       "desc": "Apply an inset; Useful when avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu",
-      "examples": [ ":inset-level=\"1\"" ],
+      "examples": [ "1" ],
       "category": "content"
     },
 
@@ -41,8 +41,8 @@
     "tag": {
       "extends": "tag",
       "desc": "HTML tag to render; Suggestion: use 'label' when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components",
-      "default": "div",
-      "examples": [ "a", "label", "div" ]
+      "default": "'div'",
+      "examples": [ "'a'", "'label'", "'div'" ]
     },
 
     "manual-focus": {
@@ -88,7 +88,7 @@
                   "desc": "Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop",
                   "required": false,
                   "examples": [
-                    "/home/dashboard",
+                    "'/home/dashboard'",
                     "{ name: 'my-route-name' }"
                   ]
                 },

package/src/components/item/QList.json

@@ -30,8 +30,8 @@
 
     "tag": {
       "extends": "tag",
-      "default": "div",
-      "examples": [ "div", "ul", "ol" ],
+      "default": "'div'",
+      "examples": [ "'div'", "'ul'", "'ol'" ],
       "addedIn": "v2.10.1"
     }
   },

package/src/components/knob/QKnob.js

@@ -1,7 +1,7 @@
 import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { position, stopAndPrevent } from '../../utils/event.js'

package/src/components/knob/QKnob.json

@@ -10,7 +10,7 @@
       "extends": "model-value",
       "type": "Number",
       "desc": "Any number to indicate the given value of the knob. Either use this property (along with a listener for 'update:modelValue' event) OR use the v-model directive",
-      "examples": [ "v-model=\"myValue\"" ]
+      "examples": [ "# v-model=\"myValue\"" ]
     },
 
     "min": {
@@ -41,7 +41,7 @@
 
     "step": {
       "type": "Number",
-      "default": 1,
+      "default": "1",
       "desc": "A number representing steps in the value of the model, while adjusting the knob",
       "category": "model"
     },
@@ -75,14 +75,14 @@
     "font-size": {
       "type": "String",
       "desc": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size",
-      "default": "0.25em",
-      "examples": [ "1em", "16px", "2rem" ],
+      "default": "'0.25em'",
+      "examples": [ "'1em'", "'16px'", "'2rem'" ],
       "category": "style"
     },
 
     "thickness": {
       "type": "Number",
-      "default": 0.2,
+      "default": "0.2",
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
       "category": "style"
     },
@@ -90,7 +90,7 @@
     "angle": {
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
-      "default": 0,
+      "default": "0",
       "category": "content"
     },
 

package/src/components/layout/QLayout.js

@@ -1,6 +1,6 @@
 import { h, ref, reactive, computed, watch, provide, onUnmounted, getCurrentInstance } from 'vue'
 
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'

package/src/components/layout/QLayout.json

@@ -7,10 +7,8 @@
     "view": {
       "type": "String",
       "desc": "Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples",
-      "default": "hhh lpr fff",
-      "examples": [
-        "hHh lpR fFf"
-      ],
+      "default": "'hhh lpr fff'",
+      "examples": [ "'hHh lpR fFf'" ],
       "category": "content"
     },
 
@@ -67,7 +65,7 @@
               "type": "String",
               "required": true,
               "desc": "Direction of scroll",
-              "values": [ "up", "down" ]
+              "values": [ "'up'", "'down'" ]
             },
             "directionChanged": {
               "type": "Boolean",