quasar 2.18.6 → 2.19.0

package/src/components/input/use-mask.json

@@ -4,15 +4,21 @@
       "type": "String",
       "desc": "Custom mask or one of the predefined mask names",
       "examples": [
-        "'###-##'", "'date'", "'datetime'", "'time'", "'fulltime'", "'phone'", "'card'"
+        "'###-##'",
+        "'date'",
+        "'datetime'",
+        "'time'",
+        "'fulltime'",
+        "'phone'",
+        "'card'"
       ],
       "category": "mask"
     },
 
     "fill-mask": {
-      "type": [ "Boolean", "String" ],
+      "type": ["Boolean", "String"],
       "desc": "Fills string with specified characters (or underscore if value is not string) to fill mask's length",
-      "examples": [ "true", "'0'", "'_'" ],
+      "examples": ["true", "'0'", "'_'"],
       "category": "mask"
     },
 
@@ -41,25 +47,25 @@
               "type": "String",
               "required": true,
               "desc": "A string representing a regular expression to match against a single character",
-              "examples": [ "'[0-9]'", "'[a-zA-Z]'" ]
+              "examples": ["'[0-9]'", "'[a-zA-Z]'"]
             },
             "negate": {
               "type": "String",
               "required": true,
               "desc": "A string representing a regular expression to NOT match against a single character",
-              "examples": [ "'[^0-9]'", "'[^a-zA-Z]'" ]
+              "examples": ["'[^0-9]'", "'[^a-zA-Z]'"]
             },
             "transform": {
               "type": "Function",
               "required": false,
               "desc": "A function that takes the character as argument and returns the transformed character",
-              "examples": [ "v => v.toLocaleUpperCase()" ],
+              "examples": ["v => v.toLocaleUpperCase()"],
               "params": {
                 "char": {
                   "type": "String",
                   "required": true,
                   "desc": "The character being transformed",
-                  "examples": [ "'a'", "'1'" ]
+                  "examples": ["'a'", "'1'"]
                 }
               },
               "returns": {
@@ -74,7 +80,9 @@
           ]
         }
       },
-      "examples": [ "{ C: { pattern: '[0-4a-eA-E]', negate: '[^0-4a-eA-E]', transform: v => v.toLocaleUpperCase() } }" ],
+      "examples": [
+        "{ C: { pattern: '[0-4a-eA-E]', negate: '[^0-4a-eA-E]', transform: v => v.toLocaleUpperCase() } }"
+      ],
       "category": "mask",
       "addedIn": "v2.18.4"
     }

package/src/components/intersection/QIntersection.js

@@ -19,14 +19,14 @@ export default createComponent({
     once: Boolean,
     transition: String,
     transitionDuration: {
-      type: [ String, Number ],
+      type: [String, Number],
       default: 300
     },
 
     ssrPrerender: Boolean,
 
     margin: String,
-    threshold: [ Number, Array ],
+    threshold: [Number, Array],
     root: {
       default: null
     },
@@ -36,11 +36,15 @@ export default createComponent({
     onVisibility: Function
   },
 
-  setup (props, { slots, emit }) {
-    const showing = ref(isRuntimeSsrPreHydration.value === true ? props.ssrPrerender : false)
+  setup(props, { slots, emit }) {
+    const showing = ref(
+      isRuntimeSsrPreHydration.value === true ? props.ssrPrerender : false
+    )
 
-    const intersectionProps = computed(() => (
-      props.root !== void 0 || props.margin !== void 0 || props.threshold !== void 0
+    const intersectionProps = computed(() =>
+      props.root !== void 0 ||
+      props.margin !== void 0 ||
+      props.threshold !== void 0
         ? {
             handler: trigger,
             cfg: {
@@ -50,50 +54,63 @@ export default createComponent({
             }
           }
         : trigger
-    ))
+    )
 
-    const hasDirective = computed(() =>
-      props.disable !== true
-      && (isRuntimeSsrPreHydration.value !== true || props.once !== true || props.ssrPrerender !== true)
+    const hasDirective = computed(
+      () =>
+        props.disable !== true &&
+        (isRuntimeSsrPreHydration.value !== true ||
+          props.once !== true ||
+          props.ssrPrerender !== true)
     )
 
-    const directives = computed(() => {
-      // if hasDirective.value === true
-      return [ [
-        Intersection,
-        intersectionProps.value,
-        void 0,
-        { once: props.once }
-      ] ]
-    })
+    const directives = computed(() => [
+      [Intersection, intersectionProps.value, void 0, { once: props.once }]
+    ])
 
     const transitionStyle = computed(
-      () => `--q-transition-duration: ${ props.transitionDuration }ms`
+      () => `--q-transition-duration: ${props.transitionDuration}ms`
     )
 
-    function trigger (entry) {
+    function trigger(entry) {
       if (showing.value !== entry.isIntersecting) {
         showing.value = entry.isIntersecting
-        props.onVisibility !== void 0 && emit('visibility', showing.value)
+        if (props.onVisibility !== void 0) emit('visibility', showing.value)
       }
     }
 
-    function getContent () {
+    function getContent() {
       if (showing.value === true) {
-        return [ h('div', { key: 'content', style: transitionStyle.value }, hSlot(slots.default)) ]
+        return [
+          h(
+            'div',
+            { key: 'content', style: transitionStyle.value },
+            hSlot(slots.default)
+          )
+        ]
       }
 
       if (slots.hidden !== void 0) {
-        return [ h('div', { key: 'hidden', style: transitionStyle.value }, slots.hidden()) ]
+        return [
+          h(
+            'div',
+            { key: 'hidden', style: transitionStyle.value },
+            slots.hidden()
+          )
+        ]
       }
     }
 
     return () => {
       const child = props.transition
         ? [
-            h(Transition, {
-              name: 'q-transition--' + props.transition
-            }, getContent)
+            h(
+              Transition,
+              {
+                name: 'q-transition--' + props.transition
+              },
+              getContent
+            )
           ]
         : getContent()
 

package/src/components/intersection/QIntersection.json

@@ -7,7 +7,7 @@
     "tag": {
       "extends": "tag",
       "default": "'div'",
-      "examples": [ "'div'", "'span'", "'blockquote'" ]
+      "examples": ["'div'", "'span'", "'blockquote'"]
     },
 
     "once": {
@@ -23,27 +23,24 @@
     },
 
     "root": {
-      "type": [ "Element", "null" ],
+      "type": ["Element", "null"],
       "default": "null",
       "desc": "[Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element",
-      "examples": [ "document.getElementById('myTable')", "$refs.myTable.$el" ],
+      "examples": ["document.getElementById('myTable')", "$refs.myTable.$el"],
       "category": "behavior"
     },
 
     "margin": {
       "type": "String",
       "desc": "[Intersection API rootMargin prop] Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections",
-      "examples": [ "'-20px 0px'", "'10px 20px 30px 40px'" ],
+      "examples": ["'-20px 0px'", "'10px 20px 30px 40px'"],
       "category": "behavior"
     },
 
     "threshold": {
-      "type": [ "Array", "Number" ],
+      "type": ["Array", "Number"],
       "desc": "[Intersection API threshold prop] Threshold(s) at which to trigger, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element",
-      "examples": [
-        "[ 0, 0.25, 0.5, 0.75, 1 ]",
-        "1"
-      ],
+      "examples": ["[0, 0.25, 0.5, 0.75, 1]", "1"],
       "category": "behavior"
     },
 
@@ -53,7 +50,7 @@
     },
 
     "transition-duration": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Transition duration (in milliseconds, without unit)",
       "default": "300",
       "category": "behavior",

package/src/components/intersection/index.js

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

package/src/components/item/QItem.js

@@ -1,7 +1,11 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import useRouterLink, {
+  useRouterLinkProps
+} from '../../composables/private.use-router-link/use-router-link.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hUniqueSlot } from '../../utils/private.render/render.js'
@@ -29,54 +33,55 @@ export default createComponent({
     dense: Boolean,
     insetLevel: Number,
 
-    tabindex: [ String, Number ],
+    tabindex: [String, Number],
 
     focused: Boolean,
     manualFocus: Boolean
   },
 
-  emits: [ 'click', 'keyup' ],
+  emits: ['click', 'keyup'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const isDark = useDark(props, $q)
-    const { hasLink, linkAttrs, linkClass, linkTag, navigateOnClick } = useRouterLink()
+    const { hasLink, linkAttrs, linkClass, linkTag, navigateOnClick } =
+      useRouterLink()
 
     const rootRef = ref(null)
     const blurTargetRef = ref(null)
 
-    const isActionable = computed(() =>
-      props.clickable === true
-        || hasLink.value === true
-        || props.tag === 'label'
+    const isActionable = computed(
+      () =>
+        props.clickable === true ||
+        hasLink.value === true ||
+        props.tag === 'label'
     )
 
-    const isClickable = computed(() =>
-      props.disable !== true && isActionable.value === true
+    const isClickable = computed(
+      () => props.disable !== true && isActionable.value === true
     )
 
-    const classes = computed(() =>
-      'q-item q-item-type row no-wrap'
-      + (props.dense === true ? ' q-item--dense' : '')
-      + (isDark.value === true ? ' q-item--dark' : '')
-      + (
-        hasLink.value === true && props.active === null
+    const classes = computed(
+      () =>
+        'q-item q-item-type row no-wrap' +
+        (props.dense === true ? ' q-item--dense' : '') +
+        (isDark.value === true ? ' q-item--dark' : '') +
+        (hasLink.value === true && props.active === null
           ? linkClass.value
-          : (
-              props.active === true
-                ? ` q-item--active${ props.activeClass !== void 0 ? ` ${ props.activeClass }` : '' }`
-                : ''
-            )
-      )
-      + (props.disable === true ? ' disabled' : '')
-      + (
-        isClickable.value === true
-          ? ' q-item--clickable q-link cursor-pointer '
-            + (props.manualFocus === true ? 'q-manual-focusable' : 'q-focusable q-hoverable')
-            + (props.focused === true ? ' q-manual-focusable--focused' : '')
-          : ''
-      )
+          : props.active === true
+            ? ` q-item--active${props.activeClass !== void 0 ? ` ${props.activeClass}` : ''}`
+            : '') +
+        (props.disable === true ? ' disabled' : '') +
+        (isClickable.value === true
+          ? ' q-item--clickable q-link cursor-pointer ' +
+            (props.manualFocus === true
+              ? 'q-manual-focusable'
+              : 'q-focusable q-hoverable') +
+            (props.focused === true ? ' q-manual-focusable--focused' : '')
+          : '')
     )
 
     const style = computed(() => {
@@ -86,17 +91,19 @@ export default createComponent({
 
       const dir = $q.lang.rtl === true ? 'Right' : 'Left'
       return {
-        [ 'padding' + dir ]: (16 + props.insetLevel * 56) + 'px'
+        ['padding' + dir]: 16 + props.insetLevel * 56 + 'px'
       }
     })
 
-    function onClick (e) {
+    function onClick(e) {
       if (isClickable.value === true) {
         if (blurTargetRef.value !== null && e.qAvoidFocus !== true) {
-          if (e.qKeyEvent !== true && document.activeElement === rootRef.value) {
+          if (
+            e.qKeyEvent !== true &&
+            document.activeElement === rootRef.value
+          ) {
             blurTargetRef.value.focus()
-          }
-          else if (document.activeElement === blurTargetRef.value) {
+          } else if (document.activeElement === blurTargetRef.value) {
             rootRef.value.focus()
           }
         }
@@ -105,8 +112,8 @@ export default createComponent({
       }
     }
 
-    function onKeyup (e) {
-      if (isClickable.value === true && isKeyCode(e, [ 13, 32 ]) === true) {
+    function onKeyup(e) {
+      if (isClickable.value === true && isKeyCode(e, [13, 32]) === true) {
         stopAndPrevent(e)
 
         // for ripple
@@ -121,12 +128,18 @@ export default createComponent({
       emit('keyup', e)
     }
 
-    function getContent () {
+    function getContent() {
       const child = hUniqueSlot(slots.default, [])
 
-      isClickable.value === true && child.unshift(
-        h('div', { class: 'q-focus-helper', tabindex: -1, ref: blurTargetRef })
-      )
+      if (isClickable.value === true) {
+        child.unshift(
+          h('div', {
+            class: 'q-focus-helper',
+            tabindex: -1,
+            ref: blurTargetRef
+          })
+        )
+      }
 
       return child
     }
@@ -144,16 +157,11 @@ export default createComponent({
       if (isClickable.value === true) {
         data.tabindex = props.tabindex || '0'
         Object.assign(data, linkAttrs.value)
-      }
-      else if (isActionable.value === true) {
-        data[ 'aria-disabled' ] = 'true'
+      } else if (isActionable.value === true) {
+        data['aria-disabled'] = 'true'
       }
 
-      return h(
-        linkTag.value,
-        data,
-        getContent()
-      )
+      return h(linkTag.value, data, getContent())
     }
   }
 })

package/src/components/item/QItem.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-router-link/use-router-link" ],
+  "mixins": ["composables/private.use-router-link/use-router-link"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/list-and-list-items"
@@ -7,7 +7,7 @@
 
   "props": {
     "active": {
-      "type": [ "Boolean", "null" ],
+      "type": ["Boolean", "null"],
       "default": "null",
       "desc": "Put item into 'active' state",
       "category": "state"
@@ -30,7 +30,7 @@
     "inset-level": {
       "type": "Number",
       "desc": "Apply an inset; Useful when 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": [ "1" ],
+      "examples": ["1"],
       "category": "content"
     },
 
@@ -42,7 +42,7 @@
       "extends": "tag",
       "desc": "HTML tag to render; Suggestion: use 'label' when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components",
       "default": "'div'",
-      "examples": [ "'a'", "'label'", "'div'" ]
+      "examples": ["'a'", "'label'", "'div'"]
     },
 
     "manual-focus": {
@@ -84,13 +84,10 @@
               "required": false,
               "definition": {
                 "to": {
-                  "type": [ "String", "Object" ],
+                  "type": ["String", "Object"],
                   "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'",
-                    "{ name: 'my-route-name' }"
-                  ]
+                  "examples": ["'/home/dashboard'", "{ name: 'my-route-name' }"]
                 },
 
                 "replace": {

package/src/components/item/QItemLabel.js

@@ -10,22 +10,25 @@ export default createComponent({
     overline: Boolean,
     caption: Boolean,
     header: Boolean,
-    lines: [ Number, String ]
+    lines: [Number, String]
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const parsedLines = computed(() => parseInt(props.lines, 10))
 
-    const classes = computed(() =>
-      'q-item__label'
-      + (props.overline === true ? ' q-item__label--overline text-overline' : '')
-      + (props.caption === true ? ' q-item__label--caption text-caption' : '')
-      + (props.header === true ? ' q-item__label--header' : '')
-      + (parsedLines.value === 1 ? ' ellipsis' : '')
+    const classes = computed(
+      () =>
+        'q-item__label' +
+        (props.overline === true
+          ? ' q-item__label--overline text-overline'
+          : '') +
+        (props.caption === true ? ' q-item__label--caption text-caption' : '') +
+        (props.header === true ? ' q-item__label--header' : '') +
+        (parsedLines.value === 1 ? ' ellipsis' : '')
     )
 
-    const style = computed(() => {
-      return props.lines !== void 0 && parsedLines.value > 1
+    const style = computed(() =>
+      props.lines !== void 0 && parsedLines.value > 1
         ? {
             overflow: 'hidden',
             display: '-webkit-box',
@@ -33,11 +36,16 @@ export default createComponent({
             '-webkit-line-clamp': parsedLines.value
           }
         : null
-    })
+    )
 
-    return () => h('div', {
-      style: style.value,
-      class: classes.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'div',
+        {
+          style: style.value,
+          class: classes.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/item/QItemLabel.json

@@ -23,7 +23,7 @@
     },
 
     "lines": {
-      "type": [ "Number", "String" ],
+      "type": ["Number", "String"],
       "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines;",
       "category": "content|behavior"
     }

package/src/components/item/QItemSection.js

@@ -14,14 +14,17 @@ export default createComponent({
     noWrap: Boolean
   },
 
-  setup (props, { slots }) {
-    const classes = computed(() =>
-      'q-item__section column'
-      + ` q-item__section--${ props.avatar === true || props.side === true || props.thumbnail === true ? 'side' : 'main' }`
-      + (props.top === true ? ' q-item__section--top justify-start' : ' justify-center')
-      + (props.avatar === true ? ' q-item__section--avatar' : '')
-      + (props.thumbnail === true ? ' q-item__section--thumbnail' : '')
-      + (props.noWrap === true ? ' q-item__section--nowrap' : '')
+  setup(props, { slots }) {
+    const classes = computed(
+      () =>
+        'q-item__section column' +
+        ` q-item__section--${props.avatar === true || props.side === true || props.thumbnail === true ? 'side' : 'main'}` +
+        (props.top === true
+          ? ' q-item__section--top justify-start'
+          : ' justify-center') +
+        (props.avatar === true ? ' q-item__section--avatar' : '') +
+        (props.thumbnail === true ? ' q-item__section--thumbnail' : '') +
+        (props.noWrap === true ? ' q-item__section--nowrap' : '')
     )
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/item/QList.js

@@ -1,10 +1,12 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
-const roleAttrExceptions = [ 'ul', 'ol' ]
+const roleAttrExceptions = ['ul', 'ol']
 
 export default createComponent({
   name: 'QList',
@@ -23,23 +25,29 @@ export default createComponent({
     }
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
-    const role = computed(() => (
-      roleAttrExceptions.includes(props.tag) ? null : 'list')
+    const role = computed(() =>
+      roleAttrExceptions.includes(props.tag) ? null : 'list'
     )
 
-    const classes = computed(() =>
-      'q-list'
-      + (props.bordered === true ? ' q-list--bordered' : '')
-      + (props.dense === true ? ' q-list--dense' : '')
-      + (props.separator === true ? ' q-list--separator' : '')
-      + (isDark.value === true ? ' q-list--dark' : '')
-      + (props.padding === true ? ' q-list--padding' : '')
+    const classes = computed(
+      () =>
+        'q-list' +
+        (props.bordered === true ? ' q-list--bordered' : '') +
+        (props.dense === true ? ' q-list--dense' : '') +
+        (props.separator === true ? ' q-list--separator' : '') +
+        (isDark.value === true ? ' q-list--dark' : '') +
+        (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h(props.tag, { class: classes.value, role: role.value }, hSlot(slots.default))
+    return () =>
+      h(
+        props.tag,
+        { class: classes.value, role: role.value },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/item/QList.json

@@ -31,7 +31,7 @@
     "tag": {
       "extends": "tag",
       "default": "'div'",
-      "examples": [ "'div'", "'ul'", "'ol'" ],
+      "examples": ["'div'", "'ul'", "'ol'"],
       "addedIn": "v2.10.1"
     }
   },