quasar 2.18.7 → 2.19.0

package/src/components/select/QSelect.json

@@ -1,5 +1,9 @@
 {
-  "mixins": [ "composables/private.use-field/use-field", "components/virtual-scroll/use-virtual-scroll", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-field/use-field",
+    "components/virtual-scroll/use-virtual-scroll",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/select"
@@ -10,7 +14,7 @@
       "extends": "model-value",
       "type": "Any",
       "desc": "Model of the component; Must be 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\""]
     },
 
     "multiple": {
@@ -20,9 +24,9 @@
     },
 
     "display-value": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Override default selection string, if not using 'selected' slot/scoped slot and if not using 'use-chips' prop",
-      "examples": [ "'Options: x, y, z'" ],
+      "examples": ["'Options: x, y, z'"],
       "category": "selection"
     },
 
@@ -37,20 +41,20 @@
       "desc": "Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with 'label' (String), 'value' (Any) and optional 'disable' (Boolean) props (can be customized with options-value/option-label/option-disable props).",
       "default": "[]",
       "examples": [
-        "[ 'Tesla', 'iPhone' ]",
-        "[ { label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' } ]"
+        "['Tesla', 'iPhone']",
+        "[{ label: 'Tesla', value: 'car' }, { label: 'iPhone', value: 'phone' }]"
       ],
       "category": "options"
     },
 
     "option-value": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'value'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -62,7 +66,7 @@
       "returns": {
         "type": "Any",
         "desc": "Value of the current option",
-        "examples": [ "'car'", "34" ]
+        "examples": ["'car'", "34"]
       },
       "examples": [
         "'modelNumber'",
@@ -72,13 +76,13 @@
     },
 
     "option-label": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'label'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -90,7 +94,7 @@
       "returns": {
         "type": "String",
         "desc": "Label of the current option",
-        "examples": [ "'Tesla'", "'iPhone'" ]
+        "examples": ["'Tesla'", "'iPhone'"]
       },
       "examples": [
         "'itemName'",
@@ -100,13 +104,13 @@
     },
 
     "option-disable": {
-      "type": [ "Function", "String" ],
+      "type": ["Function", "String"],
       "desc": "Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline",
       "default": "'disable'",
       "__runtimeDefault": true,
       "params": {
         "option": {
-          "type": [ "String", "Object" ],
+          "type": ["String", "Object"],
           "desc": "The current option being processed",
           "examples": [
             "'Tesla'",
@@ -143,7 +147,7 @@
     },
 
     "max-values": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Allow a maximum number of selections that the user can do",
       "category": "selection"
     },
@@ -155,7 +159,7 @@
     },
 
     "options-dark": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Options menu will be colored with a dark color",
       "category": "options"
@@ -164,7 +168,7 @@
     "options-selected-class": {
       "type": "String",
       "desc": "CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the 'color' prop value)",
-      "examples": [ "'text-orange'" ],
+      "examples": ["'text-orange'"],
       "category": "options"
     },
 
@@ -190,9 +194,21 @@
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)",
       "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'"
       ],
       "category": "position"
     },
@@ -201,9 +217,21 @@
       "type": "String",
       "desc": "Two values setting the options list's own position relative to its target (only in menu mode)",
       "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'"
       ],
       "category": "position"
     },
@@ -211,19 +239,19 @@
     "menu-offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)",
-      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
+      "examples": ["[8, 8]", "[5, 10]"],
       "category": "position"
     },
 
     "popup-content-class": {
       "type": "String",
       "desc": "Class definitions to be attributed to the popup content",
-      "examples": [ "'my-special-class'" ],
+      "examples": ["'my-special-class'"],
       "category": "style"
     },
 
     "popup-content-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the popup content",
       "examples": [
@@ -253,7 +281,7 @@
     },
 
     "maxlength": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Specify a max length for the inner input tag (if 'use-input' is enabled)",
       "category": "content"
     },
@@ -267,7 +295,7 @@
     "new-value-mode": {
       "type": "String",
       "desc": "Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by 'new-value-mode')",
-      "values": [ "'add'", "'add-unique'", "'toggle'" ],
+      "values": ["'add'", "'add-unique'", "'toggle'"],
       "category": "behavior"
     },
 
@@ -291,25 +319,22 @@
     },
 
     "input-debounce": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Debounce the input model update with an amount of milliseconds (also affects the 'filter' event, if used)",
       "default": "500",
       "category": "content"
     },
 
     "input-class": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the underlying input tag",
-      "examples": [
-        "'my-special-class'",
-        "{ 'my-special-class': true }"
-      ],
+      "examples": ["'my-special-class'", "{ 'my-special-class': true }"],
       "category": "style"
     },
 
     "input-style": {
-      "type": [ "String", "Array", "Object" ],
+      "type": ["String", "Array", "Object"],
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the underlying input tag",
       "examples": [
@@ -327,7 +352,7 @@
     "autocomplete": {
       "type": "String",
       "desc": "Autocomplete attribute for field",
-      "examples": [ "'country'" ],
+      "examples": ["'country'"],
       "category": "behavior"
     },
 
@@ -348,7 +373,7 @@
     },
 
     "transition-duration": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Transition duration when hiding the menu/dialog (in milliseconds, without unit)",
       "default": "300",
       "passthrough": "child",
@@ -358,7 +383,7 @@
     "behavior": {
       "type": "String",
       "desc": "Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles",
-      "values": [ "'default'", "'menu'", "'dialog'" ],
+      "values": ["'default'", "'menu'", "'dialog'"],
       "default": "'default'",
       "category": "behavior"
     },
@@ -395,7 +420,7 @@
         "inputValue": {
           "type": "String",
           "desc": "Input textfield value, if any (not QSelect model)",
-          "examples": [ "'typed something'" ]
+          "examples": ["'typed something'"]
         }
       }
     },
@@ -446,7 +471,7 @@
         "tabindex": {
           "type": "Number",
           "desc": "Tabindex HTML attribute value associated with respective option",
-          "values": [ "0", "-1" ]
+          "values": ["0", "-1"]
         }
       }
     },
@@ -571,7 +596,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "'phone'" ]
+          "examples": ["'phone'"]
         },
         "doneFn": {
           "type": "Function",
@@ -586,7 +611,7 @@
               "type": "String",
               "required": false,
               "desc": "Override 'new-value-mode' (prop) behavior should you wish to",
-              "values": [ "'add'", "'add-unique'", "'toggle'" ],
+              "values": ["'add'", "'add-unique'", "'toggle'"],
               "default": "'add'"
             }
           },
@@ -601,7 +626,7 @@
         "inputValue": {
           "type": "String",
           "desc": "What the user typed",
-          "examples": [ "'phone'" ]
+          "examples": ["'phone'"]
         },
         "doneFn": {
           "type": "Function",
@@ -783,7 +808,7 @@
           "type": "String",
           "required": true,
           "desc": "String to filter with",
-          "examples": [ "'car'" ]
+          "examples": ["'car'"]
         }
       },
       "returns": null
@@ -802,7 +827,7 @@
           "type": "String",
           "required": true,
           "desc": "String to set the input value to",
-          "examples": [ "'hotel'" ]
+          "examples": ["'hotel'"]
         },
         "noFilter": {
           "type": "Boolean",

package/src/components/select/index.js

@@ -1,5 +1,3 @@
 import QSelect from './QSelect.js'
 
-export {
-  QSelect
-}
+export { QSelect }

package/src/components/separator/QSeparator.js

@@ -1,6 +1,8 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -24,63 +26,65 @@ export default createComponent({
   props: {
     ...useDarkProps,
 
-    spaced: [ Boolean, String ],
-    inset: [ Boolean, String ],
+    spaced: [Boolean, String],
+    inset: [Boolean, String],
     vertical: Boolean,
     color: String,
     size: String
   },
 
-  setup (props) {
+  setup(props) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
-    const orientation = computed(() => (
-      props.vertical === true
-        ? 'vertical'
-        : 'horizontal'
-    ))
+    const orientation = computed(() =>
+      props.vertical === true ? 'vertical' : 'horizontal'
+    )
 
-    const orientClass = computed(() => ` q-separator--${ orientation.value }`)
+    const orientClass = computed(() => ` q-separator--${orientation.value}`)
 
-    const insetClass = computed(() => (
+    const insetClass = computed(() =>
       props.inset !== false
-        ? `${ orientClass.value }-${ insetMap[ props.inset ] }`
+        ? `${orientClass.value}-${insetMap[props.inset]}`
         : ''
-    ))
+    )
 
-    const classes = computed(() =>
-      `q-separator${ orientClass.value }${ insetClass.value }`
-      + (props.color !== void 0 ? ` bg-${ props.color }` : '')
-      + (isDark.value === true ? ' q-separator--dark' : '')
+    const classes = computed(
+      () =>
+        `q-separator${orientClass.value}${insetClass.value}` +
+        (props.color !== void 0 ? ` bg-${props.color}` : '') +
+        (isDark.value === true ? ' q-separator--dark' : '')
     )
 
     const style = computed(() => {
       const acc = {}
 
       if (props.size !== void 0) {
-        acc[ props.vertical === true ? 'width' : 'height' ] = props.size
+        acc[props.vertical === true ? 'width' : 'height'] = props.size
       }
 
       if (props.spaced !== false) {
-        const size = props.spaced === true
-          ? `${ margins.md }px`
-          : props.spaced in margins ? `${ margins[ props.spaced ] }px` : props.spaced
+        const size =
+          props.spaced === true
+            ? `${margins.md}px`
+            : props.spaced in margins
+              ? `${margins[props.spaced]}px`
+              : props.spaced
 
-        const dir = props.vertical === true
-          ? [ 'Left', 'Right' ]
-          : [ 'Top', 'Bottom' ]
+        const dir =
+          props.vertical === true ? ['Left', 'Right'] : ['Top', 'Bottom']
 
-        acc[ `margin${ dir[ 0 ] }` ] = acc[ `margin${ dir[ 1 ] }` ] = size
+        acc[`margin${dir[0]}`] = acc[`margin${dir[1]}`] = size
       }
 
       return acc
     })
 
-    return () => h('hr', {
-      class: classes.value,
-      style: style.value,
-      'aria-orientation': orientation.value
-    })
+    return () =>
+      h('hr', {
+        class: classes.value,
+        style: style.value,
+        'aria-orientation': orientation.value
+      })
   }
 })

package/src/components/separator/QSeparator.json

@@ -9,16 +9,16 @@
     },
 
     "spaced": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes",
-      "examples": [ "'12px'", "'sm'", "'md'" ],
+      "examples": ["'12px'", "'sm'", "'md'"],
       "category": "content"
     },
 
     "inset": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side",
-      "values": [ "true", "false", "'item'", "'item-thumbnail'" ],
+      "values": ["true", "false", "'item'", "'item-thumbnail'"],
       "category": "content"
     },
 

package/src/components/separator/index.js

@@ -1,5 +1,3 @@
 import QSeparator from './QSeparator.js'
 
-export {
-  QSeparator
-}
+export { QSeparator }

package/src/components/skeleton/QSkeleton.js

@@ -1,20 +1,37 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
 export const skeletonTypes = [
-  'text', 'rect', 'circle',
-  'QBtn', 'QBadge', 'QChip', 'QToolbar',
-  'QCheckbox', 'QRadio', 'QToggle',
-  'QSlider', 'QRange', 'QInput',
+  'text',
+  'rect',
+  'circle',
+  'QBtn',
+  'QBadge',
+  'QChip',
+  'QToolbar',
+  'QCheckbox',
+  'QRadio',
+  'QToggle',
+  'QSlider',
+  'QRange',
+  'QInput',
   'QAvatar'
 ]
 
 export const skeletonAnimations = [
-  'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'
+  'wave',
+  'pulse',
+  'pulse-x',
+  'pulse-y',
+  'fade',
+  'blink',
+  'none'
 ]
 
 export default createComponent({
@@ -40,7 +57,7 @@ export default createComponent({
       default: 'wave'
     },
     animationSpeed: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 1500
     },
 
@@ -52,32 +69,41 @@ export default createComponent({
     height: String
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
     const style = computed(() => {
-      const size = props.size !== void 0
-        ? [ props.size, props.size ]
-        : [ props.width, props.height ]
+      const size =
+        props.size !== void 0
+          ? [props.size, props.size]
+          : [props.width, props.height]
 
       return {
-        '--q-skeleton-speed': `${ props.animationSpeed }ms`,
-        width: size[ 0 ],
-        height: size[ 1 ]
+        '--q-skeleton-speed': `${props.animationSpeed}ms`,
+        width: size[0],
+        height: size[1]
       }
     })
 
-    const classes = computed(() =>
-      `q-skeleton q-skeleton--${ isDark.value === true ? 'dark' : 'light' } q-skeleton--type-${ props.type }`
-      + (props.animation !== 'none' ? ` q-skeleton--anim q-skeleton--anim-${ props.animation }` : '')
-      + (props.square === true ? ' q-skeleton--square' : '')
-      + (props.bordered === true ? ' q-skeleton--bordered' : '')
+    const classes = computed(
+      () =>
+        `q-skeleton q-skeleton--${isDark.value === true ? 'dark' : 'light'} q-skeleton--type-${props.type}` +
+        (props.animation !== 'none'
+          ? ` q-skeleton--anim q-skeleton--anim-${props.animation}`
+          : '') +
+        (props.square === true ? ' q-skeleton--square' : '') +
+        (props.bordered === true ? ' q-skeleton--bordered' : '')
     )
 
-    return () => h(props.tag, {
-      class: classes.value,
-      style: style.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        props.tag,
+        {
+          class: classes.value,
+          style: style.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/skeleton/QSkeleton.json

@@ -12,10 +12,19 @@
       "type": "String",
       "desc": "Type of skeleton placeholder",
       "values": [
-        "'text'", "'rect'", "'circle'",
-        "'QBtn'", "'QBadge'", "'QChip'", "'QToolbar'",
-        "'QCheckbox'", "'QRadio'", "'QToggle'",
-        "'QSlider'", "'QRange'", "'QInput'",
+        "'text'",
+        "'rect'",
+        "'circle'",
+        "'QBtn'",
+        "'QBadge'",
+        "'QChip'",
+        "'QToolbar'",
+        "'QCheckbox'",
+        "'QRadio'",
+        "'QToggle'",
+        "'QSlider'",
+        "'QRange'",
+        "'QInput'",
         "'QAvatar'"
       ],
       "default": "'rect'",
@@ -25,7 +34,15 @@
     "animation": {
       "type": "String",
       "desc": "The animation effect of the skeleton placeholder",
-      "values": [ "'wave'", "'pulse'", "'pulse-x'", "'pulse-y'", "'fade'", "'blink'", "'none'" ],
+      "values": [
+        "'wave'",
+        "'pulse'",
+        "'pulse-x'",
+        "'pulse-y'",
+        "'fade'",
+        "'blink'",
+        "'none'"
+      ],
       "default": "'wave'",
       "category": "style"
     },
@@ -47,28 +64,28 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name; Overrides 'height' and 'width' props and applies the value to both height and width",
-      "examples": [ "'16px'", "'2rem'" ],
+      "examples": ["'16px'", "'2rem'"],
       "category": "style"
     },
 
     "width": {
       "type": "String",
       "desc": "Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by 'size' prop if used",
-      "examples": [ "'16px'", "'2rem'" ],
+      "examples": ["'16px'", "'2rem'"],
       "category": "style"
     },
 
     "height": {
       "type": "String",
       "desc": "Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by 'size' prop if used",
-      "examples": [ "'16px'", "'2rem'" ],
+      "examples": ["'16px'", "'2rem'"],
       "category": "style"
     },
 
     "tag": {
       "extends": "tag",
       "default": "'div'",
-      "examples": [ "'div'", "'span'" ]
+      "examples": ["'div'", "'span'"]
     }
   },