quasar 2.15.1 → 2.15.2

package/src/components/table/QTd.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's column scoped slot property",
-      "examples": [ ":props=\"props\"" ],
+      "examples": [ "# :props=\"props\"" ],
       "category": "general"
     },
 

package/src/components/table/QTh.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's header column scoped slot property",
-      "examples": [ ":props=\"props\"" ],
+      "examples": [ "# :props=\"props\"" ],
       "category": "general"
     },
 

package/src/components/table/QTr.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's row scoped slot property",
-      "examples": [ ":props=\"props\"" ],
+      "examples": [ "# :props=\"props\"" ],
       "category": "general"
     },
 

package/src/components/tabs/QRouteTab.json

@@ -28,7 +28,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/tabs/QTab.json

@@ -11,36 +11,29 @@
     "label": {
       "type": [ "Number", "String" ],
       "desc": "A number or string to label the tab",
-      "examples": [ "Home" ],
+      "examples": [ "'Home'" ],
       "category": "content"
     },
 
     "alert": {
       "type": [ "Boolean", "String" ],
       "desc": "Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color",
-      "examples": [
-        "alert",
-        "alert=\"purple\""
-      ],
+      "examples": [ "'purple'" ],
       "category": "content"
     },
 
     "alert-icon": {
       "type": "String",
       "desc": "Adds a floating icon to the tab, notifying the user there are some updates; It's displayed only if 'alert' is set; Can use the color specified by 'alert' prop",
-      "examples": [
-        "alert-icon=\"alarm_on\""
-      ],
+      "examples": [ "'alarm_on'" ],
       "category": "content"
     },
 
     "name": {
       "type": [ "Number", "String" ],
       "desc": "Panel name",
-      "default": "A random UID",
-      "examples": [
-        "home", ":name=\"1\""
-      ],
+      "default": "# a random UUID",
+      "examples": [ "'home'", "1" ],
       "category": "general"
     },
 
@@ -53,7 +46,7 @@
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content wrapper",
-      "examples": [ "my-special-class" ],
+      "examples": [ "'my-special-class'" ],
       "category": "style"
     },
 

package/src/components/tabs/QTabs.json

@@ -9,7 +9,7 @@
       "type": [ "Number", "String", "null", "undefined" ],
       "desc": "Model of the component defining current panel name; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "required": false,
-      "examples": [ "v-model=\"selectedTab\"" ]
+      "examples": [ "# v-model=\"selectedTab\"" ]
     },
 
     "vertical": {
@@ -33,15 +33,15 @@
     "align": {
       "type": "String",
       "desc": "Horizontal alignment the tabs within the tabs container",
-      "default": "center",
-      "values": [ "left", "center", "right", "justify" ],
+      "default": "'center'",
+      "values": [ "'left'", "'center'", "'right'", "'justify'" ],
       "category": "content"
     },
 
     "breakpoint": {
       "type": [ "Number", "String" ],
       "desc": "Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment",
-      "default": 600,
+      "default": "600",
       "category": "content|behavior"
     },
 
@@ -66,14 +66,14 @@
     "content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the content wrapper",
-      "examples": [ "my-special-class" ],
+      "examples": [ "'my-special-class'" ],
       "category": "style"
     },
 
     "active-class": {
       "type": "String",
       "desc": "The class to be set on the active tab",
-      "examples": [ "my-active-class" ],
+      "examples": [ "'my-active-class'" ],
       "category": "style",
       "addedIn": "v2.1.4"
     },
@@ -81,14 +81,14 @@
     "left-icon": {
       "type": "String",
       "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container",
-      "examples": [ "arrow_left" ],
+      "examples": [ "'arrow_left'" ],
       "category": "content"
     },
 
     "right-icon": {
       "type": "String",
       "desc": "The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container",
-      "examples": [ "arrow_right" ],
+      "examples": [ "'arrow_right'" ],
       "category": "content"
     },
 

package/src/components/tabs/use-tab.js

@@ -2,7 +2,7 @@ import { h, ref, computed, inject, onBeforeUnmount, onMounted, withDirectives, g
 
 import QIcon from '../icon/QIcon.js'
 
-import Ripple from '../../directives/Ripple.js'
+import Ripple from '../../directives/ripple/Ripple.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
 import { isKeyCode, shouldIgnoreKey } from '../../utils/private/key-composition.js'

package/src/components/time/QTime.js

@@ -1,7 +1,7 @@
 import { h, ref, computed, watch, withDirectives, Transition, nextTick, getCurrentInstance } from 'vue'
 
 import QBtn from '../btn/QBtn.js'
-import TouchPan from '../../directives/TouchPan.js'
+import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'

package/src/components/time/QTime.json

@@ -10,14 +10,12 @@
       "extends": "model-value",
       "type": [ "String", "null", "undefined" ],
       "desc": "Time of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [
-        "v-model=\"currentTime\""
-      ]
+      "examples": [ "# v-model=\"currentTime\"" ]
     },
 
     "format24h": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used",
       "category": "behavior"
     },
@@ -25,17 +23,15 @@
     "default-date": {
       "type": "String",
       "desc": "The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)",
-      "default": "current day",
-      "examples": [
-        "1995/02/23"
-      ],
+      "default": "# current day",
+      "examples": [ "'1995/02/23'" ],
       "category": "model"
     },
 
     "mask": {
       "type": [ "String", "null" ],
-      "default": "HH:mm",
-      "examples": [ "HH:mm:ss", "YYYY-MM-DD HH:mm:ss", "HH:mm MMMM Do, YYYY" ]
+      "default": "'HH:mm'",
+      "examples": [ "'HH:mm:ss'", "'YYYY-MM-DD HH:mm:ss'", "'HH:mm MMMM Do, YYYY'" ]
     },
 
     "options": {
@@ -59,36 +55,28 @@
         "type": [ "Boolean", "null", "undefined" ],
         "desc": "Is the user allowed to set the specified time?"
       },
-      "examples": [
-        ":options=\"(hr, min, sec) => hr <= 6\""
-      ],
+      "examples": [ "(hr, min, sec) => hr <= 6" ],
       "category": "behavior"
     },
 
     "hour-options": {
       "type": "Array",
       "desc": "Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set",
-      "examples": [
-        ":hour-options=\"[ 3, 6, 9 ]\""
-      ],
+      "examples": [ "[ 3, 6, 9 ]" ],
       "category": "behavior"
     },
 
     "minute-options": {
       "type": "Array",
       "desc": "Optionally configure what minutes is the user allowed to set; Overrides 'options' prop if that is also set",
-      "examples": [
-        ":minute-options=\"[0, 15, 30, 45]\""
-      ],
+      "examples": [ "[0, 15, 30, 45]" ],
       "category": "behavior"
     },
 
     "second-options": {
       "type": "Array",
       "desc": "Optionally configure what seconds is the user allowed to set; Overrides 'options' prop if that is also set",
-      "examples": [
-        ":second-options=\"[0, 7, 10, 23]\""
-      ],
+      "examples": [ "[0, 7, 10, 23]" ],
       "category": "behavior"
     },
 

package/src/components/timeline/QTimeline.json

@@ -11,16 +11,16 @@
     "side": {
       "type": "String",
       "desc": "Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop",
-      "default": "right",
-      "values": [ "left", "right" ],
+      "default": "'right'",
+      "values": [ "'left'", "'right'" ],
       "category": "behavior"
     },
 
     "layout": {
       "type": "String",
       "desc": "Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.",
-      "default": "dense",
-      "values": [ "dense", "comfortable", "loose" ],
+      "default": "'dense'",
+      "values": [ "'dense'", "'comfortable'", "'loose'" ],
       "category": "behavior"
     },
 

package/src/components/timeline/QTimelineEntry.json

@@ -13,15 +13,15 @@
     "tag": {
       "extends": "tag",
       "desc": "Tag to use, if of type 'heading' only",
-      "default": "h3",
-      "examples": [ "h1" ]
+      "default": "'h3'",
+      "examples": [ "'h1'" ]
     },
 
     "side": {
       "type": "String",
       "desc": "Side to place the timeline entry; Works only if QTimeline layout is loose.",
-      "default": "right",
-      "values": [ "left", "right" ],
+      "default": "'right'",
+      "values": [ "'left'", "'right'" ],
       "category": "behavior"
     },
 
@@ -34,10 +34,10 @@
       "desc": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar",
       "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": "content"
     },
@@ -49,21 +49,21 @@
     "title": {
       "type": "String",
       "desc": "Title of timeline entry; Is overridden if using 'title' slot",
-      "examples": [ "December party" ],
+      "examples": [ "'December party'" ],
       "category": "content"
     },
 
     "subtitle": {
       "type": "String",
       "desc": "Subtitle of timeline entry; Is overridden if using 'subtitle' slot",
-      "examples": [ "All invited" ],
+      "examples": [ "'All invited'" ],
       "category": "content"
     },
 
     "body": {
       "type": "String",
       "desc": "Body content of timeline entry; Use this prop or the default slot",
-      "examples": [ "Lorem ipsum dolor sit amet, consectetur adipisicing elit." ],
+      "examples": [ "'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'" ],
       "category": "content"
     }
   },

package/src/components/tooltip/QTooltip.json

@@ -9,7 +9,7 @@
     "max-height": {
       "extends": "size",
       "type": [ "String", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "The maximum height of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },
@@ -17,28 +17,28 @@
     "max-width": {
       "extends": "size",
       "type": [ "String", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "The maximum width of the Tooltip; Size in CSS units, including unit name",
       "category": "content"
     },
 
     "transition-show": {
-      "default": "jump-down"
+      "default": "'jump-down'"
     },
 
     "transition-hide": {
-      "default": "jump-up"
+      "default": "'jump-up'"
     },
 
     "anchor": {
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the Tooltip relative to its target",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
-      "default": "bottom middle",
+      "default": "'bottom middle'",
       "category": "position"
     },
 
@@ -46,11 +46,11 @@
       "type": "String",
       "desc": "Two values setting the Tooltip's own position relative to its target",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
-      "default": "top middle",
+      "default": "'top middle'",
       "category": "position"
     },
 
@@ -69,12 +69,9 @@
     "target": {
       "type": [ "Boolean", "String" ],
       "desc": "Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)",
-      "default": true,
-      "values": [ "(Boolean) true", "(Boolean) false", "(CSS selector)" ],
-      "examples": [
-        ":target=\"false\"",
-        "target=\".my-parent\""
-      ],
+      "default": "true",
+      "values": [ "true", "false", "# CSS selector" ],
+      "examples": [ "# :target=\"false\"", "# target=\".my-parent\"" ],
       "category": "behavior"
     },
 
@@ -87,14 +84,14 @@
     "delay": {
       "type": "Number",
       "desc": "Configure Tooltip to appear with delay",
-      "default": 0,
+      "default": "0",
       "category": "behavior"
     },
 
     "hide-delay": {
       "type": "Number",
       "desc": "Configure Tooltip to disappear with delay",
-      "default": 0,
+      "default": "0",
       "category": "behavior"
     },
 

package/src/components/tree/QTree.json

@@ -9,7 +9,7 @@
       "tsType": "QTreeNode",
       "desc": "The array of nodes that designates the tree structure",
       "required": true,
-      "examples": [ "[ {...}, {...} ]" ],
+      "examples": [ "[ {}, {} ]" ],
       "category": "content"
     },
 
@@ -17,23 +17,23 @@
       "type": "String",
       "desc": "The property name of each node object that holds a unique node id",
       "required": true,
-      "examples": [ "key", "id" ],
+      "examples": [ "'key'", "'id'" ],
       "category": "content"
     },
 
     "label-key": {
       "type": "String",
       "desc": "The property name of each node object that holds the label of the node",
-      "default": "label",
-      "examples": [ "name", "description" ],
+      "default": "'label'",
+      "examples": [ "'name'", "'description'" ],
       "category": "content"
     },
 
     "children-key": {
       "type": "String",
       "desc": "The property name of each node object that holds the list of children of the node",
-      "default": "children",
-      "examples": [ "roles", "relatives" ],
+      "default": "'children'",
+      "examples": [ "'roles'", "'relatives'" ],
       "category": "content"
     },
 
@@ -78,8 +78,8 @@
     "tick-strategy": {
       "type": "String",
       "desc": "The type of strategy to use for the selection of the nodes",
-      "default": "none",
-      "values": [ "none", "strict", "leaf", "leaf-filtered" ],
+      "default": "'none'",
+      "values": [ "'none'", "'strict'", "'leaf'", "'leaf-filtered'" ],
       "category": "behavior"
     },
 
@@ -87,7 +87,7 @@
       "type": "Array",
       "desc": "Keys of nodes that are ticked",
       "sync": true,
-      "examples": [ "v-model:ticked=\"tickedKeys\"" ],
+      "examples": [ "# v-model:ticked=\"tickedKeys\"" ],
       "category": "state"
     },
 
@@ -95,7 +95,7 @@
       "type": "Array",
       "desc": "Keys of nodes that are expanded",
       "sync": true,
-      "examples": [ "v-model:expanded=\"expandedKeys\"" ],
+      "examples": [ "# v-model:expanded=\"expandedKeys\"" ],
       "category": "state"
     },
 
@@ -103,7 +103,7 @@
       "type": "Any",
       "desc": "Key of node currently selected",
       "sync": true,
-      "examples": [ "v-model:selected=\"selectedKey\"" ],
+      "examples": [ "# v-model:selected=\"selectedKey\"" ],
       "category": "state"
     },
 
@@ -136,14 +136,14 @@
     "filter": {
       "type": "String",
       "desc": "The text value to be used for filtering nodes",
-      "examples": [ ":filter=\"searchText\"" ],
+      "examples": [ "'car'" ],
       "category": "filter"
     },
 
     "filter-method": {
       "type": "Function",
       "desc": "The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline",
-      "default": "(see source code)",
+      "default": "# see source code",
       "params": {
         "node": {
           "type": "Object",
@@ -164,21 +164,21 @@
     "duration": {
       "type": "Number",
       "desc": "Toggle animation duration (in milliseconds)",
-      "default": 300,
+      "default": "300",
       "category": "style"
     },
 
     "no-nodes-label": {
       "type": "String",
       "desc": "Override default such label for when no nodes are available",
-      "examples": [ "No nodes to show!" ],
+      "examples": [ "'No nodes to show!'" ],
       "category": "content"
     },
 
     "no-results-label": {
       "type": "String",
       "desc": "Override default such label for when no nodes are available due to filtering",
-      "examples": [ "No results" ],
+      "examples": [ "'No results'" ],
       "category": "content"
     }
   },
@@ -213,7 +213,7 @@
         "color": {
           "type": "String",
           "desc": "QTree instance 'color' supplied prop value",
-          "examples": [ "primary" ]
+          "examples": [ "'primary'" ]
         },
         "dark": {
           "type": "Boolean",
@@ -251,7 +251,7 @@
         "color": {
           "type": "String",
           "desc": "QTree instance 'color' supplied prop value",
-          "examples": [ "primary" ]
+          "examples": [ "'primary'" ]
         },
         "dark": {
           "type": "Boolean",
@@ -289,7 +289,7 @@
         "color": {
           "type": "String",
           "desc": "QTree instance 'color' supplied prop value",
-          "examples": [ "primary" ]
+          "examples": [ "'primary'" ]
         },
         "dark": {
           "type": "Boolean",
@@ -327,7 +327,7 @@
         "color": {
           "type": "String",
           "desc": "QTree instance 'color' supplied prop value",
-          "examples": [ "primary" ]
+          "examples": [ "'primary'" ]
         },
         "dark": {
           "type": "Boolean",
@@ -365,7 +365,7 @@
               "type": "String",
               "required": true,
               "desc": "The key of the node getting the newly loaded child nodes",
-              "examples": [ "New Node" ]
+              "examples": [ "'New Node'" ]
             },
             "done": {
               "type": "Function",
@@ -409,7 +409,7 @@
         "target": {
           "type": "Any",
           "desc": "The selected node key",
-          "examples": [ "Node 1" ]
+          "examples": [ "'Node 1'" ]
         }
       }
     },
@@ -431,7 +431,7 @@
           "type": "Any",
           "required": true,
           "desc": "The key of a node",
-          "examples": [ "Node 1" ]
+          "examples": [ "'Node 1'" ]
         }
       },
       "returns": {
@@ -463,7 +463,7 @@
           "type": "Any",
           "required": true,
           "desc": "The key of a node",
-          "examples": [ "Node 1" ]
+          "examples": [ "'Node 1'" ]
         }
       },
       "returns": {
@@ -487,7 +487,7 @@
           "type": "Any",
           "required": true,
           "desc": "The key of a node",
-          "examples": [ "Node 1" ]
+          "examples": [ "'Node 1'" ]
         },
         "state": {
           "type": "Boolean",
@@ -504,7 +504,7 @@
           "type": "Any",
           "required": true,
           "desc": "The key of a node",
-          "examples": [ "Node 1" ]
+          "examples": [ "'Node 1'" ]
         }
       },
       "returns": {