quasar 2.15.1 → 2.15.3

package/src/components/radio/QRadio.js

@@ -2,15 +2,15 @@ import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
-import useRefocusTarget from '../../composables/private/use-refocus-target.js'
-import { useFormProps, useFormInject } from '../../composables/private/use-form.js'
-
-import { createComponent } from '../../utils/private/create.js'
-import optionSizes from '../../utils/private/option-sizes.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { hSlot, hMergeSlot } from '../../utils/private/render.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useRefocusTarget from '../../composables/private.use-refocus-target/use-refocus-target.js'
+import { useFormProps, useFormInject } from '../../composables/use-form/private.use-form.js'
+
+import { createComponent } from '../../utils/private.create/create.js'
+import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 
 const svg = h('svg', {
   key: 'svg',

package/src/components/radio/QRadio.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-size", "composables/private/use-form" ],
+  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/radio"
@@ -9,21 +9,21 @@
     "model-value": {
       "extends": "model-value",
       "type": [ "Number", "String", "null", "undefined" ],
-      "examples": [ "v-model=\"option\"" ]
+      "examples": [ "# v-model=\"option\"" ]
     },
 
     "val": {
       "type": [ "Number", "String", "null", "undefined" ],
       "required": true,
       "desc": "The actual value of the option with which model value is changed",
-      "examples": [ "opt1", 50 ],
+      "examples": [ "'opt1'", "50" ],
       "category": "model"
     },
 
     "label": {
       "type": "String",
       "desc": "Label to display along the radio control (or use the default slot instead of this prop)",
-      "examples": [ "label=\"Option 1\"" ],
+      "examples": [ "'Option 1'" ],
       "category": "label"
     },
 
@@ -36,7 +36,7 @@
     "checked-icon": {
       "type": "String",
       "desc": "The icon to be used when selected (instead of the default design)",
-      "examples": [ "visibility" ],
+      "examples": [ "'visibility'" ],
       "category": "icons",
       "addedIn": "v2.5"
     },
@@ -44,7 +44,7 @@
     "unchecked-icon": {
       "type": "String",
       "desc": "The icon to be used when un-selected (instead of the default design)",
-      "examples": [ "visibility_off" ],
+      "examples": [ "'visibility_off'" ],
       "category": "icons",
       "addedIn": "v2.5"
     },
@@ -101,7 +101,9 @@
 
   "methods": {
     "set": {
-      "desc": "Sets the Radio's v-model to equal the val"
+      "desc": "Sets the Radio's v-model to equal the val",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/components/range/QRange.js

@@ -6,9 +6,9 @@ import useSlider, {
   keyCodes
 } from '../slider/use-slider.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { between } from '../../utils/format.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { between } from '../../utils/format/format.js'
 
 const dragType = {
   MIN: 0,

package/src/components/range/QRange.json

@@ -20,7 +20,7 @@
           "desc": "Model value for right thumb"
         }
       },
-      "examples": [ "v-model=\"positionModel\"" ]
+      "examples": [ "# v-model=\"positionModel\"" ]
     },
 
     "drag-range": {
@@ -62,18 +62,14 @@
     "left-label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label for min value",
-      "examples": [
-        ":left-label-value=\"model.min + 'px'\""
-      ],
+      "examples": [ "# :left-label-value=\"model.min + 'px'\"" ],
       "category": "labels"
     },
 
     "right-label-value": {
       "type": [ "String", "Number" ],
       "desc": "Override default label for max value",
-      "examples": [
-        ":right-label-value=\"model.max + 'px'\""
-      ],
+      "examples": [ "# :right-label-value=\"model.max + 'px'\"" ],
       "category": "labels"
     },
 

package/src/components/rating/QRating.js

@@ -2,13 +2,13 @@ import { h, ref, computed, onBeforeUpdate, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
-import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
+import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import { useFormProps, useFormAttrs, useFormInject } from '../../composables/use-form/private.use-form.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { between } from '../../utils/format.js'
-import { hMergeSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { between } from '../../utils/format/format.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QRating',

package/src/components/rating/QRating.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-size", "composables/private/use-form" ],
+  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/rating"
@@ -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": [ "[ 'accent', 'grey-7' ]" ]
     },
 
     "color-selected": {

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

@@ -1,9 +1,9 @@
 import { h, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
 
-import useHydration from '../../composables/use-hydration.js'
+import useHydration from '../../composables/use-hydration/use-hydration.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { listenOpts, noop } from '../../utils/event.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { listenOpts, noop } from '../../utils/event/event.js'
 
 const hasObserver = typeof ResizeObserver !== 'undefined'
 const resizeProps = hasObserver === true

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"
     }
   },
@@ -45,7 +45,8 @@
           "type": "Boolean",
           "desc": "Skip over the debounce amount"
         }
-      }
+      },
+      "returns": null
     }
   }
 }

package/src/components/responsive/QResponsive.js

@@ -1,9 +1,9 @@
 import { h } from 'vue'
 
-import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
+import useRatio, { useRatioProps } from '../../composables/private.use-ratio/use-ratio.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 default createComponent({
   name: 'QResponsive',

package/src/components/responsive/QResponsive.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/responsive"
   },
 
-  "mixins": [ "composables/private/use-ratio" ],
+  "mixins": [ "composables/private.use-ratio/use-ratio" ],
 
   "slots": {
     "default": {

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

@@ -1,17 +1,17 @@
 import { h, ref, computed, watch, withDirectives, onActivated, onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/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'
-import { setVerticalScrollPosition, setHorizontalScrollPosition } from '../../utils/scroll.js'
-import { hMergeSlot } from '../../utils/private/render.js'
-import debounce from '../../utils/debounce.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { between } from '../../utils/format/format.js'
+import { setVerticalScrollPosition, setHorizontalScrollPosition } from '../../utils/scroll/scroll.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
+import debounce from '../../utils/debounce/debounce.js'
 
 const axisList = [ 'vertical', 'horizontal' ]
 const dirProps = {

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"
     },
 
@@ -162,6 +162,7 @@
   "methods": {
     "getScrollTarget": {
       "desc": "Get the scrolling DOM element target",
+      "params": null,
       "returns": {
         "type": "Element",
         "desc": "DOM element upon which scrolling takes place"
@@ -170,6 +171,7 @@
 
     "getScroll": {
       "desc": "Get the current scroll information",
+      "params": null,
       "returns": {
         "type": "Object",
         "desc": "Scroll information",
@@ -221,6 +223,7 @@
 
     "getScrollPosition": {
       "desc": "Get current scroll position",
+      "params": null,
       "returns": {
         "type": "Object",
         "desc": "An object containing scroll position information",
@@ -242,6 +245,7 @@
 
     "getScrollPercentage": {
       "desc": "Get current scroll position in percentage (0.0 <= x <= 1.0)",
+      "params": null,
       "returns": {
         "type": "Object",
         "desc": "An object containing scroll position information in percentage",
@@ -268,7 +272,7 @@
           "type": "String",
           "required": true,
           "desc": "Scroll axis",
-          "values": [ "vertical", "horizontal" ]
+          "values": [ "'vertical'", "'horizontal'" ]
         },
         "offset": {
           "type": "Number",
@@ -279,7 +283,8 @@
           "type": "Number",
           "desc": "Duration (in milliseconds) enabling animated scroll"
         }
-      }
+      },
+      "returns": null
     },
 
     "setScrollPercentage": {
@@ -288,7 +293,7 @@
         "axis": {
           "type": "String",
           "desc": "Scroll axis",
-          "values": [ "vertical", "horizontal" ],
+          "values": [ "'vertical'", "'horizontal'" ],
           "required": true
         },
         "offset": {
@@ -300,7 +305,8 @@
           "type": "Number",
           "desc": "Duration (in milliseconds) enabling animated scroll"
         }
-      }
+      },
+      "returns": null
     }
   }
 }

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

@@ -1,8 +1,8 @@
 import { watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll.js'
-import { listenOpts, noop } from '../../utils/event.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { getScrollTarget, getVerticalScrollPosition, getHorizontalScrollPosition } from '../../utils/scroll/scroll.js'
+import { listenOpts, noop } from '../../utils/event/event.js'
 
 const { passive } = listenOpts
 const axisValues = [ 'both', 'horizontal', 'vertical' ]

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",
@@ -110,11 +110,14 @@
           "type": "Boolean",
           "desc": "Skip over the debounce amount"
         }
-      }
+      },
+      "returns": null
     },
 
     "getPosition": {
-      "desc": "Get current scroll details under the form of an Object: { position, direction, directionChanged, inflectionPoint }"
+      "desc": "Get current scroll details under the form of an Object: { position, direction, directionChanged, inflectionPoint }",
+      "params": null,
+      "returns": null
     }
   }
 }

package/src/components/select/QSelect.js

@@ -11,17 +11,17 @@ import QItemLabel from '../item/QItemLabel.js'
 import QMenu from '../menu/QMenu.js'
 import QDialog from '../dialog/QDialog.js'
 
-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 { useVirtualScroll, useVirtualScrollProps } from '../virtual-scroll/use-virtual-scroll.js'
-import { useFormProps, useFormInputNameAttr } from '../../composables/private/use-form.js'
-import useKeyComposition from '../../composables/private/use-key-composition.js'
+import { useFormProps, useFormInputNameAttr } from '../../composables/use-form/private.use-form.js'
+import useKeyComposition from '../../composables/private.use-key-composition/use-key-composition.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { isDeepEqual } from '../../utils/is.js'
-import { stop, prevent, stopAndPrevent } from '../../utils/event.js'
-import { normalizeToInterval } from '../../utils/format.js'
-import { shouldIgnoreKey, isKeyCode } from '../../utils/private/key-composition.js'
-import { hMergeSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { isDeepEqual } from '../../utils/is/is.js'
+import { stop, prevent, stopAndPrevent } from '../../utils/event/event.js'
+import { normalizeToInterval } from '../../utils/format/format.js'
+import { shouldIgnoreKey, isKeyCode } from '../../utils/private.keyboard/key-composition.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
 
 const validateNewValueMode = v => [ 'add', 'add-unique', 'toggle' ].includes(v)
 const reEscapeList = '.*+?^${}()|[]\\'
@@ -128,7 +128,7 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'inputValue', 'newValue',
+    'add', 'remove', 'inputValue',
     'keyup', 'keypress', 'keydown',
     'filterAbort'
   ],