quasar 2.15.1 → 2.15.3

package/src/components/img/QImg.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/img"
   },
 
-  "mixins": [ "composables/private/use-ratio" ],
+  "mixins": [ "composables/private.use-ratio/use-ratio" ],
 
   "props": {
     "src": {
@@ -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.js

@@ -1,11 +1,11 @@
 import { h, ref, computed, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import debounce from '../../utils/debounce.js'
-import { height } from '../../utils/dom.js'
-import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition } from '../../utils/scroll.js'
-import { listenOpts } from '../../utils/event.js'
-import { hSlot, hUniqueSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import debounce from '../../utils/debounce/debounce.js'
+import { height } from '../../utils/dom/dom.js'
+import { getScrollTarget, getScrollHeight, getVerticalScrollPosition, setVerticalScrollPosition } from '../../utils/scroll/scroll.js'
+import { listenOpts } from '../../utils/event/event.js'
+import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
 
 const { passive } = listenOpts
 

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"
     },
 
@@ -75,23 +75,33 @@
 
   "methods": {
     "poll": {
-      "desc": "Checks scroll position and loads more content if necessary"
+      "desc": "Checks scroll position and loads more content if necessary",
+      "params": null,
+      "returns": null
     },
 
     "trigger": {
-      "desc": "Tells Infinite Scroll to load more content, regardless of the scroll position"
+      "desc": "Tells Infinite Scroll to load more content, regardless of the scroll position",
+      "params": null,
+      "returns": null
     },
 
     "reset": {
-      "desc": "Resets calling index to 0"
+      "desc": "Resets calling index to 0",
+      "params": null,
+      "returns": null
     },
 
     "stop": {
-      "desc": "Stops working, regardless of scroll position"
+      "desc": "Stops working, regardless of scroll position",
+      "params": null,
+      "returns": null
     },
 
     "resume": {
-      "desc": "Starts working. Checks scroll position upon call and if trigger is hit, it loads more content"
+      "desc": "Starts working. Checks scroll position upon call and if trigger is hit, it loads more content",
+      "params": null,
+      "returns": null
     },
 
     "setIndex": {
@@ -102,11 +112,14 @@
           "desc": "New pagination index",
           "required": true
         }
-      }
+      },
+      "returns": null
     },
 
     "updateScrollTarget": {
-      "desc": "Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes"
+      "desc": "Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes",
+      "params": null,
+      "returns": null
     }
   }
 }

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

@@ -2,9 +2,9 @@ import { h, computed, Transition, getCurrentInstance } from 'vue'
 
 import QSpinner from '../spinner/QSpinner.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useTransition, { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
 
 export default createComponent({
   name: 'QInnerLoading',

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

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-size", "composables/private/use-transition" ],
+  "mixins": [ "composables/private.use-size/use-size", "composables/private.use-transition/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/inner-loading"
@@ -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.js

@@ -1,15 +1,15 @@
 import { h, ref, computed, watch, onBeforeUnmount, onMounted, nextTick, getCurrentInstance } from 'vue'
 
-import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private/use-field.js'
+import useField, { useFieldState, useFieldProps, useFieldEmits, fieldValueIsFilled } from '../../composables/private.use-field/use-field.js'
 import useMask, { useMaskProps } from './use-mask.js'
-import { useFormProps, useFormInputNameAttr } from '../../composables/private/use-form.js'
-import useFileFormDomProps from '../../composables/private/use-file-dom-props.js'
-import useKeyComposition from '../../composables/private/use-key-composition.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import { stop } from '../../utils/event.js'
-import { addFocusFn } from '../../utils/private/focus-manager.js'
-import { injectProp } from '../../utils/private/inject-obj-prop.js'
+import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
+import useFileFormDomProps from '../../composables/private.use-file/use-file-dom-props.js'
+import useKeyComposition from '../../composables/private.use-key-composition/use-key-composition.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import { stop } from '../../utils/event/event.js'
+import { addFocusFn } from '../../utils/private.focus/focus-manager.js'
+import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QInput',

package/src/components/input/QInput.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-field", "components/input/use-mask", "composables/private/use-form" ],
+  "mixins": [ "composables/private.use-field/use-field", "components/input/use-mask", "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/input"
@@ -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': true }"
       ],
       "category": "style"
     },
@@ -66,10 +66,14 @@
       "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"
+    },
+
+    "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"
     }
   },
 
@@ -104,19 +108,26 @@
 
   "methods": {
     "focus": {
-      "desc": "Focus underlying input tag"
+      "desc": "Focus underlying input tag",
+      "params": null,
+      "returns": null
     },
 
     "blur": {
-      "desc": "Lose focus on underlying input tag"
+      "desc": "Lose focus on underlying input tag",
+      "params": null,
+      "returns": null
     },
 
     "select": {
-      "desc": "Select input text"
+      "desc": "Select input text",
+      "params": null,
+      "returns": null
     },
 
     "getNativeElement": {
       "desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
+      "params": null,
       "returns": {
         "type": "Element",
         "tsType": "QInputNativeElement",

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

@@ -1,6 +1,6 @@
 import { ref, watch, nextTick } from 'vue'
 
-import { shouldIgnoreKey } from '../../utils/private/key-composition.js'
+import { shouldIgnoreKey } from '../../utils/private.keyboard/key-composition.js'
 
 // leave NAMED_MASKS at top of file (code referenced from docs)
 const NAMED_MASKS = {

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,11 +1,11 @@
 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'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot, hDir } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QIntersection',

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

@@ -1,12 +1,12 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hUniqueSlot } from '../../utils/private/render.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { isKeyCode } from '../../utils/private/key-composition.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hUniqueSlot } from '../../utils/private.render/render.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { isKeyCode } from '../../utils/private.keyboard/key-composition.js'
 
 export default createComponent({
   name: 'QItem',