quasar 2.15.0 → 2.15.2

package/src/components/drawer/QDrawer.json

@@ -9,8 +9,8 @@
     "side": {
       "type": "String",
       "desc": "Side to attach to",
-      "values": [ "left", "right" ],
-      "default": "left",
+      "values": [ "'left'", "'right'" ],
+      "default": "'left'",
       "category": "behavior"
     },
 
@@ -23,8 +23,7 @@
     "width": {
       "type": "Number",
       "desc": "Width of drawer (in pixels)",
-      "default": 300,
-      "examples": [ ":width=\"350\"" ],
+      "default": "300",
       "category": "style"
     },
 
@@ -37,8 +36,7 @@
     "mini-width": {
       "type": "Number",
       "desc": "Width of drawer (in pixels) when in mini mode",
-      "default": 60,
-      "examples": [ ":mini-width=\"100\"" ],
+      "default": "60",
       "category": "style"
     },
 
@@ -62,18 +60,16 @@
     "breakpoint": {
       "type": "Number",
       "desc": "Breakpoint (in pixels) of layout width up to which mobile mode is used",
-      "default": 1023,
-      "examples": [ 1200, ":breakpoint=\"1400\"" ],
+      "default": "1023",
+      "examples": [ "1200" ],
       "category": "behavior"
     },
 
     "behavior": {
       "type": "String",
       "desc": "Overrides the default dynamic mode into which the drawer is put on",
-      "values": [
-        "default", "desktop", "mobile"
-      ],
-      "default": "default",
+      "values": [ "'default'", "'desktop'", "'mobile'" ],
+      "default": "'default'",
       "category": "behavior"
     },
 

package/src/components/editor/QEditor.json

@@ -10,9 +10,7 @@
       "extends": "model-value",
       "type": "String",
       "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=\"content\""
-      ]
+      "examples": [ "# v-model=\"content\"" ]
     },
 
     "readonly": {
@@ -44,28 +42,22 @@
     "min-height": {
       "type": "String",
       "desc": "CSS unit for the minimum height of the editable area",
-      "default": "10rem",
-      "examples": [
-        "15rem", "50vh"
-      ],
+      "default": "'10rem'",
+      "examples": [ "'15rem'", "'50vh'" ],
       "category": "style"
     },
 
     "max-height": {
       "type": "String",
       "desc": "CSS unit for maximum height of the input area",
-      "examples": [
-        "1000px", "90vh"
-      ],
+      "examples": [ "'1000px'", "'90vh'" ],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "CSS value to set the height of the editable area",
-      "examples": [
-        "100px", "50vh"
-      ],
+      "examples": [ "'100px'", "'50vh'" ],
       "category": "style"
     },
 
@@ -73,7 +65,7 @@
       "type": "Object",
       "desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
       "examples": [
-        ":definitions=\"{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }\""
+        "{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }"
       ],
       "definition": {
         "...commandName": {
@@ -85,22 +77,22 @@
             "label": {
               "type": "String",
               "desc": "Label of the button",
-              "examples": [ "Addresses" ]
+              "examples": [ "'Addresses'" ]
             },
             "tip": {
               "type": "String",
               "desc": "Text to be displayed as a tooltip on hover",
-              "examples": [ "Add a contact from the Address Book" ]
+              "examples": [ "'Add a contact from the Address Book'" ]
             },
             "htmlTip": {
               "type": "String",
               "desc": "HTML formatted text to be displayed within a tooltip on hover",
-              "examples": [ "Add a <span class=\"red\">user</span> from the address book" ]
+              "examples": [ "'Add a <span class=\"red\">user</span> from the address book'" ]
             },
             "icon": {
               "type": "String",
               "desc": "Icon of the button",
-              "examples": [ "fas fa-address-book" ]
+              "examples": [ "'fas fa-address-book'" ]
             },
             "key": {
               "type": "Number",
@@ -117,12 +109,12 @@
             "cmd": {
               "type": "String",
               "desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
-              "examples": [ "insertHTML", "justifyFull" ]
+              "examples": [ "'insertHTML'", "'justifyFull'" ]
             },
             "param": {
               "type": "String",
               "desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
-              "examples": [ "<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />" ]
+              "examples": [ "'<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />'" ]
             },
             "disable": {
               "type": [ "Boolean", "Function" ],
@@ -131,13 +123,13 @@
                 "type": "Boolean",
                 "desc": "If true, the button will be disabled"
               },
-              "examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
+              "examples": [ "true", "() => !checkIfUserIsActive()" ]
             },
             "type": {
-              "type": "String",
+              "type": [ "String", "null" ],
               "desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
-              "values": [ null, "no-state" ],
-              "examples": [ "no-state" ]
+              "values": [ "null", "'no-state'" ],
+              "examples": [ "'no-state'" ]
             },
             "fixedLabel": {
               "type": "Boolean",
@@ -161,7 +153,7 @@
       "type": "Object",
       "desc": "Object with definitions of fonts",
       "examples": [
-        ":fonts=\"{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }\""
+        "{ arial: 'Arial', arial_black: 'Arial Black', comic_sans: 'Comic Sans MS' }"
       ],
       "category": "toolbar"
     },
@@ -169,14 +161,8 @@
     "toolbar": {
       "type": "Array",
       "desc": "An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar",
-      "default": [
-        [ "left", "center", "right", "justify" ],
-        [ "bold", "italic", "underline", "strike" ],
-        [ "undo", "redo" ]
-      ],
-      "examples": [
-        [ "left", "center", "right", "justify" ]
-      ],
+      "default": "[ [ 'left', 'center', 'right', 'justify' ], [ 'bold', 'italic', 'underline', 'strike' ], [ 'undo', 'redo' ]",
+      "examples": [ "[ 'left', 'center', 'right', 'justify' ]" ],
       "category": "toolbar"
     },
 
@@ -195,16 +181,16 @@
     "toolbar-toggle-color": {
       "type": "String",
       "desc": "Choose the active color (from the Quasar Palette) of toolbar commands button",
-      "default": "primary",
-      "examples": [ "secondary", "blue-3" ],
+      "default": "'primary'",
+      "examples": [ "'secondary'", "'blue-3'" ],
       "category": "toolbar"
     },
 
     "toolbar-bg": {
       "type": "String",
       "desc": "Toolbar background color (from Quasar Palette)",
-      "default": "grey-3",
-      "examples": [ "secondary", "blue-3" ],
+      "default": "'grey-3'",
+      "examples": [ "'secondary'", "'blue-3'" ],
       "category": "toolbar"
     },
 
@@ -229,7 +215,7 @@
     "paragraph-tag": {
       "type": "String",
       "desc": "Paragraph tag to be used",
-      "values": [ "div", "p" ],
+      "values": [ "'div'", "'p'" ],
       "category": "behavior"
     },
 
@@ -237,7 +223,7 @@
       "type": "Object",
       "tsType": "VueStyleObjectProp",
       "desc": "Object with CSS properties and values for styling the container of QEditor",
-      "examples": [ ":content-style=\"{ backgroundColor: '#C0C0C0' }\"" ],
+      "examples": [ "{ backgroundColor: '#C0C0C0' }" ],
       "category": "style"
     },
 
@@ -246,8 +232,8 @@
       "tsType": "VueClassProp",
       "desc": "CSS classes for the input area",
       "examples": [
-        "my-special-class",
-        ":content-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': <condition> }"
       ],
       "category": "style"
     },
@@ -255,7 +241,7 @@
     "placeholder": {
       "type": "String",
       "desc": "Text to display as placeholder",
-      "examples": [ "Type your story here ..." ],
+      "examples": [ "'Type your story here ...'" ],
       "category": "content"
     }
   },
@@ -329,18 +315,18 @@
         "cmd": {
           "type": "String",
           "desc": "Must be a valid execCommand method according to the designMode API",
-          "examples": [ "copy", "cut", "paste" ],
+          "examples": [ "'copy'", "'cut'", "'paste'" ],
           "required": true
         },
         "param": {
           "type": "String",
           "desc": "The argument to pass to the command",
-          "examples": [ "<small>Small Text</small>" ]
+          "examples": [ "'<small>Small Text</small>'" ]
         },
         "update": {
           "type": "Boolean",
           "desc": "Refresh the toolbar",
-          "default": true
+          "default": "true"
         }
       }
     },

package/src/components/expansion-item/QExpansionItem.js

@@ -130,7 +130,7 @@ export default createComponent({
 
     const headerSlotScope = computed(() => ({
       expanded: showing.value === true,
-      detailsId: props.targetUid,
+      detailsId: targetUid.value,
       toggle,
       show,
       hide

package/src/components/expansion-item/QExpansionItem.json

@@ -29,14 +29,14 @@
       "type": [ "String", "Array", "Object" ],
       "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the expand icon item section",
-      "examples": [ "text-purple" ],
+      "examples": [ "'text-purple'" ],
       "category": "style"
     },
 
     "toggle-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the expansion toggle element",
-      "examples": [ "Open details" ],
+      "examples": [ "'Open details'" ],
       "category": "accessibility",
       "addedIn": "v2.8.4"
     },
@@ -44,28 +44,28 @@
     "label": {
       "type": "String",
       "desc": "Header label (unless using 'header' slot)",
-      "examples": [ "My expansion item" ],
+      "examples": [ "'My expansion item'" ],
       "category": "content"
     },
 
     "label-lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!",
-      "examples": [ "1", "3", ":label-lines=\"2\"" ],
+      "examples": [ "1", "'3'" ],
       "category": "content"
     },
 
     "caption": {
       "type": "String",
       "desc": "Header sub-label (unless using 'header' slot)",
-      "examples": [ "Unread message: 5" ],
+      "examples": [ "'Unread message: 5'" ],
       "category": "content"
     },
 
     "caption-lines": {
       "type": [ "Number", "String" ],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!",
-      "examples": [ "1", "3", ":caption-lines=\"2\"" ],
+      "examples": [ "1", "'3'" ],
       "category": "content"
     },
 
@@ -80,21 +80,21 @@
     "duration": {
       "type": "Number",
       "desc": "Animation duration (in milliseconds)",
-      "default": 300,
+      "default": "300",
       "category": "behavior"
     },
 
     "header-inset-level": {
       "type": "Number",
       "desc": "Apply an inset to header (unless using 'header' slot); Useful when header 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": [ ":header-inset-level=\"1\"" ],
+      "examples": [ "1" ],
       "category": "content"
     },
 
     "content-inset-level": {
       "type": "Number",
       "desc": "Apply an inset to content (changes content padding)",
-      "examples": [ ":content-inset-level=\"1\"" ],
+      "examples": [ "1" ],
       "category": "content"
     },
 
@@ -138,7 +138,7 @@
     "group": {
       "type": "String",
       "desc": "Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode'",
-      "examples": [ "my-emails" ],
+      "examples": [ "'my-emails'" ],
       "category": "content|behavior"
     },
 
@@ -153,8 +153,8 @@
       "tsType": "VueStyleProp",
       "desc": "Apply custom style to the header",
       "examples": [
-        "background: '#ff0000'",
-        ":header-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },
@@ -164,8 +164,8 @@
       "tsType": "VueClassProp",
       "desc": "Apply custom class(es) to the header",
       "examples": [
-        "my-custom-class",
-        ":header-class=\"{ 'my-custom-class': someCondition }\""
+        "'my-custom-class'",
+        "{ 'my-custom-class': someCondition }"
       ],
       "category": "style"
     }

package/src/components/fab/QFab.json

@@ -26,16 +26,16 @@
     "direction": {
       "type": "String",
       "desc": "Direction to expand Fab Actions to",
-      "default": "right",
-      "values": [ "up", "right", "down", "left" ],
+      "default": "'right'",
+      "values": [ "'up'", "'right'", "'down'", "'left'" ],
       "category": "behavior"
     },
 
     "vertical-actions-align": {
       "type": "String",
       "desc": "The side of the Fab where Fab Actions will expand (only when direction is 'up' or 'down')",
-      "default": "center",
-      "values": [ "left", "center", "right" ],
+      "default": "'center'",
+      "values": [ "'left'", "'center'", "'right'" ],
       "category": "style|content"
     },
 

package/src/components/fab/QFabAction.json

@@ -9,9 +9,7 @@
     "anchor": {
       "type": "String",
       "desc": "How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab",
-      "values": [
-        "start", "center", "end"
-      ],
+      "values": [ "'start'", "'center'", "'end'" ],
       "category": "style|content"
     },
 
@@ -19,8 +17,8 @@
       "type": [ "String", "Object" ],
       "desc": "Equivalent to Vue Router <router-link> 'to' property",
       "examples": [
-        "/home/dashboard",
-        ":to=\"{ name: 'my-route-name' }\""
+        "'/home/dashboard'",
+        "{ name: 'my-route-name' }"
       ],
       "category": "router"
     },

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

@@ -7,10 +7,8 @@
     "type":{
       "type": "String",
       "desc": "Define the button HTML DOM type",
-      "default": "a",
-      "values": [
-        "a", "submit", "button", "reset"
-      ],
+      "default": "'a'",
+      "values": [ "'a'", "'submit'", "'button'", "'reset'" ],
       "category": "general"
     },
 
@@ -41,7 +39,7 @@
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg" ],
+      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'" ],
       "category": "style"
     },
 
@@ -68,20 +66,20 @@
     "label": {
       "type": [ "String", "Number" ],
       "desc": "The label that will be shown when Fab is extended",
-      "examples": [ "Button Label" ],
+      "examples": [ "'Button Label'" ],
       "category": "content"
     },
 
     "label-position": {
       "type": "String",
       "desc": "Position of the label around the icon",
-      "values": [ "top", "right", "bottom", "left" ],
+      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "style|content"
     },
 
     "hide-label": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Hide the label; Useful for animation purposes where you toggle the visibility of the label",
       "category": "style|content"
     },
@@ -91,8 +89,8 @@
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the label container",
       "examples": [
-        "my-special-class",
-        ":input-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': <condition> }"
       ],
       "category": "style"
     },
@@ -102,8 +100,8 @@
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the label container",
       "examples": [
-        "background-color: #ff0000",
-        ":input-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background-color: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },

package/src/components/field/QField.json

@@ -20,8 +20,8 @@
 
     "tag": {
       "extends": "tag",
-      "default": "label",
-      "examples": [ "div", "label" ],
+      "default": "'label'",
+      "examples": [ "'div'", "'label'" ],
       "addedIn": "v2.13.1"
     }
   },
@@ -33,7 +33,7 @@
         "id": {
           "type": "String",
           "desc": "Element id used in the 'for' attribute of the field label. Can be used to link the control to the label",
-          "examples": [ "qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa" ]
+          "examples": [ "'qf_363270c0-7a83-62b1-8dcf-6dfd64ee38fa'" ]
         },
         "field": {
           "type": "Element",
@@ -54,7 +54,7 @@
         "modelValue": {
           "type": "Any",
           "desc": "Field's value",
-          "examples": [ 0.241, "Text" ]
+          "examples": [ "0.241", "'Text'" ]
         },
         "emitValue": {
           "type": "Function",
@@ -64,7 +64,7 @@
               "type": "Any",
               "required": true,
               "desc": "Value to be emitted",
-              "examples": [ 0, "Changed text" ]
+              "examples": [ "0", "'Changed text'" ]
             }
           },
           "returns": null

package/src/components/file/QFile.json

@@ -10,7 +10,7 @@
       "extends": "model-value",
       "type": [ "File", "FileList", "Array", "null", "undefined" ],
       "desc": "Model of the component; Must be FileList or 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\"" ]
     },
 
     "append": {
@@ -22,7 +22,7 @@
     "display-value": {
       "type": [ "Number", "String" ],
       "desc": "Override default selection string, if not using 'file' or 'selected' scoped slots and if not using 'use-chips' prop",
-      "examples": [ "Options: x, y, z" ],
+      "examples": [ "'Options: x, y, z'" ],
       "category": "selection"
     },
 
@@ -44,7 +44,7 @@
               "type": "String",
               "required": true,
               "desc": "The total size of files in human readable format",
-              "examples": [ "1.42MB" ]
+              "examples": [ "'1.42MB'" ]
             },
             "filesNumber": {
               "type": "Number",
@@ -63,9 +63,7 @@
         "type": "String",
         "desc": "String to display for the counter label"
       },
-      "examples": [
-        ":counter-label=\"counterLabelFn\""
-      ],
+      "examples": [ "(totalSize, filesNumber, maxFiles) => `${ filesNumber }${ maxFiles !== void 0 ? ' / ' + maxFiles : '' } (${ totalSize })`" ],
       "category": "behavior"
     },
 
@@ -78,8 +76,8 @@
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying selection container",
       "examples": [
-        "my-special-class",
-        ":input-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': <condition> }"
       ],
       "category": "style"
     },
@@ -89,8 +87,8 @@
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying selection container",
       "examples": [
-        "background-color: #ff0000",
-        ":input-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background-color: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     }
@@ -122,7 +120,7 @@
       "desc": "Override default selection slot; Suggestion: QChip",
       "scope": {
         "files": {
-          "type": [ "FileList", "Array" ],
+          "type": [ "Array", "FileList" ],
           "desc": "Array of File objects"
         },
 

package/src/components/footer/QFooter.js

@@ -1,6 +1,6 @@
 import { h, ref, computed, watch, onBeforeUnmount, inject, getCurrentInstance } from 'vue'
 
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
+import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
 
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 

package/src/components/footer/QFooter.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=\"footerState\""
-      ]
+      "examples": [ "# v-model=\"footerState\"" ]
     },
 
     "reveal": {
@@ -34,7 +32,7 @@
     "height-hint": {
       "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
-      "default": 50,
+      "default": "50",
       "category": "behavior"
     }
   },

package/src/components/form/QForm.json

@@ -81,9 +81,7 @@
       "returns": {
         "type": "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 => { ... })" ]
       }
     },