quasar 2.18.7 → 2.19.0

package/src/components/time/QTime.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/date/use-datetime" ],
+  "mixins": ["components/date/use-datetime"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/time"
@@ -8,13 +8,13 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "String", "null", "undefined" ],
+      "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" ],
+      "type": ["Boolean", "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,15 +25,19 @@
       "desc": "The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)",
       "default": "# current day",
       "__runtimeDefault": true,
-      "examples": [ "'1995/02/23'" ],
+      "examples": ["'1995/02/23'"],
       "category": "model"
     },
 
     "mask": {
-      "type": [ "String", "null" ],
+      "type": ["String", "null"],
       "default": "'HH:mm'",
       "__runtimeDefault": true,
-      "examples": [ "'HH:mm:ss'", "'YYYY-MM-DD HH:mm:ss'", "'HH:mm MMMM Do, YYYY'" ]
+      "examples": [
+        "'HH:mm:ss'",
+        "'YYYY-MM-DD HH:mm:ss'",
+        "'HH:mm MMMM Do, YYYY'"
+      ]
     },
 
     "options": {
@@ -45,40 +49,40 @@
           "desc": "Hour"
         },
         "min": {
-          "type": [ "Number", "null" ],
+          "type": ["Number", "null"],
           "desc": "Minutes"
         },
         "sec": {
-          "type": [ "Number", "null" ],
+          "type": ["Number", "null"],
           "desc": "Seconds"
         }
       },
       "returns": {
-        "type": [ "Boolean", "null", "undefined" ],
+        "type": ["Boolean", "null", "undefined"],
         "desc": "Is the user allowed to set the specified time?"
       },
-      "examples": [ "(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": [ "[ 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": [ "[ 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": [ "[ 0, 7, 10, 23 ]" ],
+      "examples": ["[0, 7, 10, 23]"],
       "category": "behavior"
     },
 
@@ -106,7 +110,7 @@
       "extends": "update:model-value",
       "params": {
         "value": {
-          "type": [ "String", "null" ]
+          "type": ["String", "null"]
         },
         "details": {
           "type": "Object",

package/src/components/time/index.js

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

package/src/components/timeline/QTimeline.js

@@ -1,6 +1,8 @@
 import { h, computed, provide, 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'
@@ -19,24 +21,25 @@ export default createComponent({
     side: {
       type: String,
       default: 'right',
-      validator: v => [ 'left', 'right' ].includes(v)
+      validator: v => ['left', 'right'].includes(v)
     },
     layout: {
       type: String,
       default: 'dense',
-      validator: v => [ 'dense', 'comfortable', 'loose' ].includes(v)
+      validator: v => ['dense', 'comfortable', 'loose'].includes(v)
     }
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
     provide(timelineKey, props)
 
-    const classes = computed(() =>
-      `q-timeline q-timeline--${ props.layout } q-timeline--${ props.layout }--${ props.side }`
-      + (isDark.value === true ? ' q-timeline--dark' : '')
+    const classes = computed(
+      () =>
+        `q-timeline q-timeline--${props.layout} q-timeline--${props.layout}--${props.side}` +
+        (isDark.value === true ? ' q-timeline--dark' : '')
     )
 
     return () => h('ul', { class: classes.value }, hSlot(slots.default))

package/src/components/timeline/QTimeline.json

@@ -13,7 +13,7 @@
       "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'" ],
+      "values": ["'left'", "'right'"],
       "category": "behavior"
     },
 
@@ -21,7 +21,7 @@
       "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'" ],
+      "values": ["'dense'", "'comfortable'", "'loose'"],
       "category": "behavior"
     },
 

package/src/components/timeline/QTimelineEntry.js

@@ -4,7 +4,10 @@ import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot, hUniqueSlot } from '../../utils/private.render/render.js'
-import { timelineKey, emptyRenderFn } from '../../utils/private.symbols/symbols.js'
+import {
+  timelineKey,
+  emptyRenderFn
+} from '../../utils/private.symbols/symbols.js'
 
 export default createComponent({
   name: 'QTimelineEntry',
@@ -18,7 +21,7 @@ export default createComponent({
     side: {
       type: String,
       default: 'right',
-      validator: v => [ 'left', 'right' ].includes(v)
+      validator: v => ['left', 'right'].includes(v)
     },
 
     icon: String,
@@ -31,24 +34,27 @@ export default createComponent({
     body: String
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const $timeline = inject(timelineKey, emptyRenderFn)
     if ($timeline === emptyRenderFn) {
       console.error('QTimelineEntry needs to be child of QTimeline')
       return emptyRenderFn
     }
 
-    const classes = computed(() =>
-      `q-timeline__entry q-timeline__entry--${ props.side }`
-      + (props.icon !== void 0 || props.avatar !== void 0 ? ' q-timeline__entry--icon' : '')
+    const classes = computed(
+      () =>
+        `q-timeline__entry q-timeline__entry--${props.side}` +
+        (props.icon !== void 0 || props.avatar !== void 0
+          ? ' q-timeline__entry--icon'
+          : '')
     )
 
-    const dotClass = computed(() =>
-      `q-timeline__dot text-${ props.color || $timeline.color }`
+    const dotClass = computed(
+      () => `q-timeline__dot text-${props.color || $timeline.color}`
     )
 
-    const reverse = computed(() =>
-      $timeline.layout === 'comfortable' && $timeline.side === 'left'
+    const reverse = computed(
+      () => $timeline.layout === 'comfortable' && $timeline.side === 'left'
     )
 
     return () => {
@@ -62,16 +68,16 @@ export default createComponent({
         const content = [
           h('div'),
           h('div'),
-          h(
-            props.tag,
-            { class: 'q-timeline__heading-title' },
-            child
-          )
+          h(props.tag, { class: 'q-timeline__heading-title' }, child)
         ]
 
-        return h('div', {
-          class: 'q-timeline__heading'
-        }, reverse.value === true ? content.reverse() : content)
+        return h(
+          'div',
+          {
+            class: 'q-timeline__heading'
+          },
+          reverse.value === true ? content.reverse() : content
+        )
       }
 
       let dot
@@ -83,8 +89,7 @@ export default createComponent({
             name: props.icon
           })
         ]
-      }
-      else if (props.avatar !== void 0) {
+      } else if (props.avatar !== void 0) {
         dot = [
           h('img', {
             class: 'q-timeline__dot-img',
@@ -95,19 +100,31 @@ export default createComponent({
 
       const content = [
         h('div', { class: 'q-timeline__subtitle' }, [
-          h('span', {}, hSlot(slots.subtitle, [ props.subtitle ]))
+          h('span', {}, hSlot(slots.subtitle, [props.subtitle]))
         ]),
 
         h('div', { class: dotClass.value }, dot),
 
-        h('div', { class: 'q-timeline__content' }, [
-          h('h6', { class: 'q-timeline__title' }, hSlot(slots.title, [ props.title ]))
-        ].concat(child))
+        h(
+          'div',
+          { class: 'q-timeline__content' },
+          [
+            h(
+              'h6',
+              { class: 'q-timeline__title' },
+              hSlot(slots.title, [props.title])
+            )
+          ].concat(child)
+        )
       ]
 
-      return h('li', {
-        class: classes.value
-      }, reverse.value === true ? content.reverse() : content)
+      return h(
+        'li',
+        {
+          class: classes.value
+        },
+        reverse.value === true ? content.reverse() : content
+      )
     }
   }
 })

package/src/components/timeline/QTimelineEntry.json

@@ -14,14 +14,14 @@
       "extends": "tag",
       "desc": "Tag to use, if of type 'heading' only",
       "default": "'h3'",
-      "examples": [ "'h1'" ]
+      "examples": ["'h1'"]
     },
 
     "side": {
       "type": "String",
       "desc": "Side to place the timeline entry; Works only if QTimeline layout is loose.",
       "default": "'right'",
-      "values": [ "'left'", "'right'" ],
+      "values": ["'left'", "'right'"],
       "category": "behavior"
     },
 
@@ -49,21 +49,23 @@
     "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/timeline/index.js

@@ -1,7 +1,4 @@
 import QTimeline from './QTimeline.js'
 import QTimelineEntry from './QTimelineEntry.js'
 
-export {
-  QTimeline,
-  QTimelineEntry
-}
+export { QTimeline, QTimelineEntry }

package/src/components/toggle/QToggle.js

@@ -2,7 +2,10 @@ import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useCheckbox, { useCheckboxProps, useCheckboxEmits } from '../checkbox/use-checkbox.js'
+import useCheckbox, {
+  useCheckboxProps,
+  useCheckboxEmits
+} from '../checkbox/use-checkbox.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -18,30 +21,37 @@ export default createComponent({
 
   emits: useCheckboxEmits,
 
-  setup (props) {
-    function getInner (isTrue, isIndeterminate) {
-      const icon = computed(() =>
-        (isTrue.value === true
-          ? props.checkedIcon
-          : (isIndeterminate.value === true ? props.indeterminateIcon : props.uncheckedIcon)
-        ) || props.icon
+  setup(props) {
+    function getInner(isTrue, isIndeterminate) {
+      const icon = computed(
+        () =>
+          (isTrue.value === true
+            ? props.checkedIcon
+            : isIndeterminate.value === true
+              ? props.indeterminateIcon
+              : props.uncheckedIcon) || props.icon
       )
 
-      const color = computed(() => (isTrue.value === true ? props.iconColor : null))
+      const color = computed(() =>
+        isTrue.value === true ? props.iconColor : null
+      )
 
       return () => [
         h('div', { class: 'q-toggle__track' }),
 
-        h('div', {
-          class: 'q-toggle__thumb absolute flex flex-center no-wrap'
-        }, icon.value !== void 0
-          ? [
-              h(QIcon, {
-                name: icon.value,
-                color: color.value
-              })
-            ]
-          : void 0
+        h(
+          'div',
+          {
+            class: 'q-toggle__thumb absolute flex flex-center no-wrap'
+          },
+          icon.value !== void 0
+            ? [
+                h(QIcon, {
+                  name: icon.value,
+                  color: color.value
+                })
+              ]
+            : void 0
         )
       ]
     }

package/src/components/toggle/QToggle.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/checkbox/use-checkbox" ],
+  "mixins": ["components/checkbox/use-checkbox"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/toggle"

package/src/components/toggle/index.js

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

package/src/components/toolbar/QToolbar.js

@@ -10,12 +10,14 @@ export default createComponent({
     inset: Boolean
   },
 
-  setup (props, { slots }) {
-    const classes = computed(() =>
-      'q-toolbar row no-wrap items-center'
-      + (props.inset === true ? ' q-toolbar--inset' : '')
+  setup(props, { slots }) {
+    const classes = computed(
+      () =>
+        'q-toolbar row no-wrap items-center' +
+        (props.inset === true ? ' q-toolbar--inset' : '')
     )
 
-    return () => h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
+    return () =>
+      h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
   }
 })

package/src/components/toolbar/QToolbar.test.js

@@ -10,16 +10,12 @@ describe('[QToolbar API]', () => {
         const wrapper = mount(QToolbar)
         const target = wrapper.get('.q-toolbar')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-toolbar--inset')
+        expect(target.classes()).not.toContain('q-toolbar--inset')
 
         await wrapper.setProps({ inset: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-toolbar--inset')
+        expect(target.classes()).toContain('q-toolbar--inset')
       })
     })
   })

package/src/components/toolbar/QToolbarTitle.js

@@ -10,10 +10,11 @@ export default createComponent({
     shrink: Boolean
   },
 
-  setup (props, { slots }) {
-    const classes = computed(() =>
-      'q-toolbar__title ellipsis'
-      + (props.shrink === true ? ' col-shrink' : '')
+  setup(props, { slots }) {
+    const classes = computed(
+      () =>
+        'q-toolbar__title ellipsis' +
+        (props.shrink === true ? ' col-shrink' : '')
     )
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/toolbar/QToolbarTitle.test.js

@@ -10,16 +10,12 @@ describe('[QToolbarTitle API]', () => {
         const wrapper = mount(QToolbarTitle)
         const target = wrapper.get('.q-toolbar__title')
 
-        expect(
-          target.classes()
-        ).not.toContain('col-shrink')
+        expect(target.classes()).not.toContain('col-shrink')
 
         await wrapper.setProps({ shrink: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('col-shrink')
+        expect(target.classes()).toContain('col-shrink')
       })
     })
   })

package/src/components/toolbar/index.js

@@ -1,7 +1,4 @@
 import QToolbar from './QToolbar.js'
 import QToolbarTitle from './QToolbarTitle.js'
 
-export {
-  QToolbar,
-  QToolbarTitle
-}
+export { QToolbar, QToolbarTitle }