quasar 2.15.1 → 2.15.3

package/src/components/carousel/QCarouselControl.json

@@ -7,11 +7,11 @@
     "position": {
       "type": "String",
       "desc": "Side/corner to stick to",
-      "default": "bottom-right",
+      "default": "'bottom-right'",
       "values": [
-        "top-right", "top-left",
-        "bottom-right", "bottom-left",
-        "top", "right", "bottom", "left"
+        "'top-right'", "'top-left'",
+        "'bottom-right'", "'bottom-left'",
+        "'top'", "'right'", "'bottom'", "'left'"
       ],
       "category": "position"
     },
@@ -19,8 +19,8 @@
     "offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the component horizontally and vertically (in pixels)",
-      "default": "[18, 18]",
-      "examples": [ "[8, 8]", "[5, 10]" ],
+      "default": "[ 18, 18 ]",
+      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
       "category": "position"
     }
   },

package/src/components/carousel/QCarouselSlide.js

@@ -1,9 +1,9 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { usePanelChildProps } from '../../composables/private/use-panel.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { usePanelChildProps } from '../../composables/private.use-panel/use-panel.js'
 
-import { hSlot } from '../../utils/private/render.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QCarouselSlide',

package/src/components/carousel/QCarouselSlide.json

@@ -3,14 +3,11 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/carousel"
   },
 
-  "mixins": [ "composables/private/use-panel.child" ],
+  "mixins": [ "composables/private.use-panel/use-panel.child" ],
 
   "props": {
     "name": {
       "desc": "Slide name",
-      "examples": [
-        "accounts", "firstSlide", ":name=\"1\""
-      ],
       "category": "model"
     },
 
@@ -19,10 +16,10 @@
       "desc": "URL pointing to a slide background image (use public folder)",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) src=\"img/my-bg.png\"",
-        "(assets folder) src=\"~assets/my-img.png\"",
-        "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://picsum.photos/500/300\""
+        "# (public folder) src=\"img/my-bg.png\"",
+        "# (assets folder) src=\"~assets/my-img.png\"",
+        "# (relative path format) :src=\"require('./my_img.jpg')\"",
+        "# (URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     }

package/src/components/chat/QChatMessage.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { getNormalizedVNodes } from '../../utils/private/vm.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
 
 export default createComponent({
   name: 'QChatMessage',

package/src/components/chat/QChatMessage.json

@@ -13,7 +13,7 @@
     "label": {
       "type": "String",
       "desc": "Renders a label header/section only",
-      "examples": [ "Friday, 18th" ],
+      "examples": [ "'Friday, 18th'" ],
       "category": "content"
     },
 
@@ -32,7 +32,7 @@
     "name": {
       "type": "String",
       "desc": "Author's name",
-      "examples": [ "John Doe" ],
+      "examples": [ "'John Doe'" ],
       "category": "content"
     },
 
@@ -41,10 +41,10 @@
       "desc": "URL to the avatar image of the author",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) src=\"boy-avatar.png\"",
-        "(assets folder) src=\"~assets/boy-avatar.png\"",
-        "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://picsum.photos/500/300\""
+        "# (public folder) src=\"boy-avatar.png\"",
+        "# (assets folder) src=\"~assets/boy-avatar.png\"",
+        "# (relative path format) :src=\"require('./my_img.jpg')\"",
+        "# (URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "content"
     },
@@ -52,21 +52,21 @@
     "text": {
       "type": "Array",
       "desc": "Array of strings that are the message body. Strings are not sanitized (see details in docs)",
-      "examples": [ ":text=\"['How are you?']\"", ":text=\"['I\\'m good, thank you!', 'And you?']\"" ],
+      "examples": [ "[ 'How are you?' ]", "[ 'I\\'m good, thank you!', 'And you?' ]" ],
       "category": "content"
     },
 
     "stamp": {
       "type": "String",
       "desc": "Creation timestamp",
-      "examples": [ "13:55", "Yesterday at 13:51" ],
+      "examples": [ "'13:55'", "'Yesterday at 13:51'" ],
       "category": "content"
     },
 
     "size": {
       "type": "String",
       "desc": "1-12 out of 12 (same as col-*)",
-      "examples": [ "4", "6", "12" ],
+      "examples": [ "'4'", "'6'", "'12'" ],
       "category": "style"
     },
 

package/src/components/checkbox/QCheckbox.js

@@ -2,7 +2,7 @@ import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import { createComponent } from '../../utils/private/create.js'
+import { createComponent } from '../../utils/private.create/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
 const bgNode = h('div', {

package/src/components/checkbox/use-checkbox.js

@@ -1,13 +1,13 @@
 import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
-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 { useFormInject, useFormProps } from '../../composables/private/use-form.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 { useFormInject, useFormProps } from '../../composables/use-form/private.use-form.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'
 
 export const useCheckboxProps = {
   ...useDarkProps,

package/src/components/checkbox/use-checkbox.json

@@ -1,49 +1,49 @@
 {
-  "mixins": [ "composables/private/use-size", "composables/private/use-form" ],
+  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
 
   "props": {
     "model-value": {
       "extends": "model-value",
       "type": [ "Any", "Array" ],
-      "examples": [ "false", "['car', 'building']" ]
+      "examples": [ "false", "[ 'car', 'building' ]" ]
     },
 
     "val": {
       "type": "Any",
       "desc": "Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked",
-      "examples": [ "car" ],
+      "examples": [ "'car'" ],
       "category": "model"
     },
 
     "true-value": {
       "type": "Any",
       "desc": "What model value should be considered as checked/ticked/on?",
-      "default": true,
-      "examples": [ "Agreed" ],
+      "default": "true",
+      "examples": [ "'Agreed'" ],
       "category": "model"
     },
 
     "false-value": {
       "type": "Any",
       "desc": "What model value should be considered as unchecked/unticked/off?",
-      "default": false,
-      "examples": [ "Disagree" ],
+      "default": "false",
+      "examples": [ "'Disagree'" ],
       "category": "model"
     },
 
     "indeterminate-value": {
       "type": "Any",
       "desc": "What model value should be considered as 'indeterminate'?",
-      "default": null,
-      "examples": [ 0, "not_answered" ],
+      "default": "null",
+      "examples": [ "0", "'not_answered'" ],
       "category": "model"
     },
 
     "toggle-order": {
       "type": "String",
       "desc": "Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ...",
-      "default": "tf",
-      "values": [ "tf", "ft" ],
+      "default": "'tf'",
+      "values": [ "'tf'", "'ft'" ],
       "category": "behavior"
     },
 
@@ -56,7 +56,7 @@
     "label": {
       "type": "String",
       "desc": "Label to display along the component (or use the default slot instead of this prop)",
-      "examples": [ "I agree with the Terms and Conditions" ],
+      "examples": [ "'I agree with the Terms and Conditions'" ],
       "category": "label"
     },
 
@@ -68,19 +68,19 @@
 
     "checked-icon": {
       "type": "String",
-      "examples": [ "visibility" ],
+      "examples": [ "'visibility'" ],
       "category": "icons"
     },
 
     "unchecked-icon": {
       "type": "String",
-      "examples": [ "visibility_off" ],
+      "examples": [ "'visibility_off'" ],
       "category": "icons"
     },
 
     "indeterminate-icon": {
       "type": "String",
-      "examples": [ "help" ],
+      "examples": [ "'help'" ],
       "category": "icons"
     },
 
@@ -130,7 +130,9 @@
 
   "methods": {
     "toggle": {
-      "desc": "Toggle the state (of the model)"
+      "desc": "Toggle the state (of the model)",
+      "params": null,
+      "returns": null
     }
   },
 

package/src/components/chip/QChip.js

@@ -2,14 +2,14 @@ import { h, computed, getCurrentInstance } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import Ripple from '../../directives/Ripple.js'
+import Ripple from '../../directives/ripple/Ripple.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stopAndPrevent } from '../../utils/event.js'
-import { hMergeSlotSafely, hDir } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stopAndPrevent } from '../../utils/event/event.js'
+import { hMergeSlotSafely, hDir } from '../../utils/private.render/render.js'
 
 export const defaultSizes = {
   xs: 8,
@@ -106,6 +106,7 @@ export default createComponent({
       const chip = props.disable === true
         ? { tabindex: -1, 'aria-disabled': 'true' }
         : { tabindex: props.tabindex || 0 }
+
       const remove = {
         ...chip,
         role: 'button',

package/src/components/chip/QChip.json

@@ -11,7 +11,7 @@
     "size": {
       "type": "String",
       "desc": "QChip size name or a CSS unit including unit name",
-      "examples": [ "xs", "sm", "md", "lg", "xl", "25px", "2rem" ],
+      "examples": [ "'xs'", "'sm'", "'md'", "'lg'", "'xl'", "'25px'", "'2rem'" ],
       "category": "style"
     },
 
@@ -38,7 +38,7 @@
     "label": {
       "type": [ "String", "Number" ],
       "desc": "Chip's content as string; overrides default slot if specified",
-      "examples": [ "John Doe", "Book" ],
+      "examples": [ "'John Doe'", "'Book'" ],
       "category": "content"
     },
 
@@ -55,17 +55,15 @@
       "type": "Boolean",
       "desc": "Model of the component determining if QChip should be rendered or not",
       "required": false,
-      "default": true
+      "default": "true"
     },
 
     "selected": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "sync": true,
       "desc": "Model for QChip if it's selected or not",
-      "examples": [
-        "v-model:selected=\"myState\""
-      ],
+      "examples": [ "# v-model:selected=\"myState\"" ],
       "category": "model"
     },
 
@@ -99,7 +97,7 @@
     "remove-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the remove icon",
-      "examples": [ "Remove item" ],
+      "examples": [ "'Remove item'" ],
       "category": "accessibility",
       "addedIn": "v2.8.4"
     },
@@ -129,6 +127,10 @@
       }
     },
 
+    "update:model-value": {
+      "extends": "update:model-value"
+    },
+
     "update:selected": {
       "desc": "Used by Vue on 'v-model:selected' for updating its value",
       "params": {