quasar 2.18.7 → 2.19.0

package/src/components/avatar/QAvatar.test.js

@@ -11,23 +11,17 @@ describe('[QAvatar API]', () => {
         const wrapper = mount(QAvatar)
         const target = wrapper.get('.q-avatar')
 
-        expect(
-          target.$style('font-size')
-        ).toBe('')
+        expect(target.$style('font-size')).toBe('')
 
         await wrapper.setProps({ size: '100px' })
         await flushPromises()
 
-        expect(
-          target.$style('font-size')
-        ).toContain('100px')
+        expect(target.$style('font-size')).toContain('100px')
 
         await wrapper.setProps({ size: 'sm' })
         await flushPromises()
 
-        expect(
-          target.$style('font-size')
-        ).toBe(`${ useSizeDefaults.sm }px`)
+        expect(target.$style('font-size')).toBe(`${useSizeDefaults.sm}px`)
       })
     })
 
@@ -38,15 +32,11 @@ describe('[QAvatar API]', () => {
 
         const wrapper = mount(QAvatar)
 
-        expect(
-          wrapper.get('.q-avatar')
-            .$style('font-size')
-        ).not.toBe(size)
+        expect(wrapper.get('.q-avatar').$style('font-size')).not.toBe(size)
 
-        expect(
-          wrapper.get('.q-avatar__content')
-            .$style('font-size')
-        ).not.toBe(fontSize)
+        expect(wrapper.get('.q-avatar__content').$style('font-size')).not.toBe(
+          fontSize
+        )
 
         await wrapper.setProps({
           size,
@@ -54,15 +44,11 @@ describe('[QAvatar API]', () => {
         })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-avatar')
-            .$style('font-size')
-        ).toBe(size)
+        expect(wrapper.get('.q-avatar').$style('font-size')).toBe(size)
 
-        expect(
-          wrapper.get('.q-avatar__content')
-            .$style('font-size')
-        ).toBe(fontSize)
+        expect(wrapper.get('.q-avatar__content').$style('font-size')).toBe(
+          fontSize
+        )
       })
     })
 
@@ -72,24 +58,16 @@ describe('[QAvatar API]', () => {
         const wrapper = mount(QAvatar)
         const target = wrapper.get('.q-avatar')
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
 
         await wrapper.setProps({ color: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain(`bg-${ propVal }`)
+        expect(target.classes()).toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
       })
     })
 
@@ -99,24 +77,16 @@ describe('[QAvatar API]', () => {
         const wrapper = mount(QAvatar)
         const target = wrapper.get('.q-avatar')
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
 
         await wrapper.setProps({ textColor: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain(`text-${ propVal }`)
+        expect(target.classes()).toContain(`text-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
       })
     })
 
@@ -125,20 +95,14 @@ describe('[QAvatar API]', () => {
         const propVal = 'map'
         const wrapper = mount(QAvatar)
 
-        expect(
-          wrapper.get('.q-avatar')
-            .find('.q-icon')
-            .exists()
-        ).toBe(false)
+        expect(wrapper.get('.q-avatar').find('.q-icon').exists()).toBe(false)
 
         await wrapper.setProps({ icon: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-avatar')
-            .get('.q-icon')
-            .text()
-        ).toContain(`${ propVal }`)
+        expect(wrapper.get('.q-avatar').get('.q-icon').text()).toContain(
+          `${propVal}`
+        )
       })
     })
 
@@ -147,20 +111,13 @@ describe('[QAvatar API]', () => {
         const wrapper = mount(QAvatar)
         const target = wrapper.get('.q-avatar')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-avatar--square')
+        expect(target.classes()).not.toContain('q-avatar--square')
 
         await wrapper.setProps({ square: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-avatar--square')
-
-        expect(
-          target.$computedStyle('border-radius')
-        ).not.toBe('0px')
+        expect(target.classes()).toContain('q-avatar--square')
+        expect(target.$computedStyle('border-radius')).toBe('0px')
       })
     })
 
@@ -169,20 +126,14 @@ describe('[QAvatar API]', () => {
         const wrapper = mount(QAvatar)
         const target = wrapper.get('.q-avatar')
 
-        expect(
-          target.classes()
-        ).not.toContain('rounded-borders')
+        expect(target.classes()).not.toContain('rounded-borders')
 
         await wrapper.setProps({ rounded: true })
         await flushPromises()
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('4px')
+        expect(target.$computedStyle('border-radius')).toBe('4px')
 
-        expect(
-          target.classes()
-        ).toContain('rounded-borders')
+        expect(target.classes()).toContain('rounded-borders')
       })
     })
   })

package/src/components/avatar/index.js

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

package/src/components/badge/QBadge.js

@@ -3,7 +3,7 @@ import { h, computed } from 'vue'
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 
-const alignValues = [ 'top', 'middle', 'bottom' ]
+const alignValues = ['top', 'middle', 'bottom']
 
 export default createComponent({
   name: 'QBadge',
@@ -18,7 +18,7 @@ export default createComponent({
     outline: Boolean,
     rounded: Boolean,
 
-    label: [ Number, String ],
+    label: [Number, String],
 
     align: {
       type: String,
@@ -26,35 +26,42 @@ export default createComponent({
     }
   },
 
-  setup (props, { slots }) {
-    const style = computed(() => {
-      return props.align !== void 0
-        ? { verticalAlign: props.align }
-        : null
-    })
+  setup(props, { slots }) {
+    const style = computed(() =>
+      props.align !== void 0 ? { verticalAlign: props.align } : null
+    )
 
     const classes = computed(() => {
-      const text = props.outline === true
-        ? props.color || props.textColor
-        : props.textColor
+      const text =
+        props.outline === true
+          ? props.color || props.textColor
+          : props.textColor
 
-      return 'q-badge flex inline items-center no-wrap'
-        + ` q-badge--${ props.multiLine === true ? 'multi' : 'single' }-line`
-        + (props.outline === true
+      return (
+        'q-badge flex inline items-center no-wrap' +
+        ` q-badge--${props.multiLine === true ? 'multi' : 'single'}-line` +
+        (props.outline === true
           ? ' q-badge--outline'
-          : (props.color !== void 0 ? ` bg-${ props.color }` : '')
-        )
-        + (text !== void 0 ? ` text-${ text }` : '')
-        + (props.floating === true ? ' q-badge--floating' : '')
-        + (props.rounded === true ? ' q-badge--rounded' : '')
-        + (props.transparent === true ? ' q-badge--transparent' : '')
+          : props.color !== void 0
+            ? ` bg-${props.color}`
+            : '') +
+        (text !== void 0 ? ` text-${text}` : '') +
+        (props.floating === true ? ' q-badge--floating' : '') +
+        (props.rounded === true ? ' q-badge--rounded' : '') +
+        (props.transparent === true ? ' q-badge--transparent' : '')
+      )
     })
 
-    return () => h('div', {
-      class: classes.value,
-      style: style.value,
-      role: 'status',
-      'aria-label': props.label
-    }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
+    return () =>
+      h(
+        'div',
+        {
+          class: classes.value,
+          style: style.value,
+          role: 'status',
+          'aria-label': props.label
+        },
+        hMergeSlot(slots.default, props.label !== void 0 ? [props.label] : [])
+      )
   }
 })

package/src/components/badge/QBadge.json

@@ -31,16 +31,16 @@
     },
 
     "label": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "desc": "Badge's content as string; overrides default slot if specified",
-      "examples": [ "'John Doe'", "22" ],
+      "examples": ["'John Doe'", "22"],
       "category": "content"
     },
 
     "align": {
       "type": "String",
       "desc": "Sets vertical-align CSS prop",
-      "values": [ "'top'", "'middle'", "'bottom'" ],
+      "values": ["'top'", "'middle'", "'bottom'"],
       "category": "content"
     },
 

package/src/components/badge/QBadge.test.js

@@ -11,24 +11,16 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
 
         await wrapper.setProps({ color: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain(`bg-${ propVal }`)
+        expect(target.classes()).toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
       })
     })
 
@@ -38,24 +30,16 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`text-${ propVal }`)
+        expect(target.classes()).not.toContain(`text-${propVal}`)
 
         await wrapper.setProps({ textColor: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain(`text-${ propVal }`)
+        expect(target.classes()).toContain(`text-${propVal}`)
 
-        expect(
-          target.classes()
-        ).not.toContain(`bg-${ propVal }`)
+        expect(target.classes()).not.toContain(`bg-${propVal}`)
       })
     })
 
@@ -64,21 +48,16 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-badge--floating')
+        expect(target.classes()).not.toContain('q-badge--floating')
 
         await wrapper.setProps({ floating: true })
         await flushPromises()
 
-        expect(
-          wrapper.classes()
-        ).toContain('q-badge--floating')
+        expect(wrapper.classes()).toContain('q-badge--floating')
 
-        expect(
-          wrapper.get('.q-badge')
-            .$computedStyle('position')
-        ).toBe('absolute')
+        expect(wrapper.get('.q-badge').$computedStyle('position')).toBe(
+          'absolute'
+        )
       })
     })
 
@@ -87,20 +66,14 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-badge--transparent')
+        expect(target.classes()).not.toContain('q-badge--transparent')
 
         await wrapper.setProps({ transparent: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-badge--transparent')
+        expect(target.classes()).toContain('q-badge--transparent')
 
-        expect(
-          target.$computedStyle('opacity')
-        ).not.toBe('1')
+        expect(target.$computedStyle('opacity')).not.toBe('1')
       })
     })
 
@@ -109,64 +82,49 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-badge--multi-line')
+        expect(target.classes()).not.toContain('q-badge--multi-line')
 
         await wrapper.setProps({ multiLine: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-badge--multi-line')
+        expect(target.classes()).toContain('q-badge--multi-line')
 
-        expect(
-          target.$computedStyle('word-break')
-        ).toBe('break-all')
+        expect(target.$computedStyle('word-break')).toBe('break-all')
       })
     })
 
     describe('[(prop)label]', () => {
       test.each([
-        [ 'String', 'John Doe' ],
-        [ 'Number', 22 ]
+        ['String', 'John Doe'],
+        ['Number', 22]
       ])('type %s has effect', async (_, propVal) => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.text()
-        ).not.toContain(propVal)
+        expect(target.text()).not.toContain(propVal)
 
         await wrapper.setProps({ label: propVal })
         await flushPromises()
 
-        expect(
-          target.text()
-        ).toContain(propVal)
+        expect(target.text()).toContain(propVal)
       })
     })
 
     describe('[(prop)align]', () => {
-      test.each([
-        [ 'top' ],
-        [ 'middle' ],
-        [ 'bottom' ]
-      ])('value "%s" has effect', async propVal => {
-        const wrapper = mount(QBadge)
-        const target = wrapper.get('.q-badge')
+      test.each([['top'], ['middle'], ['bottom']])(
+        'value "%s" has effect',
+        async propVal => {
+          const wrapper = mount(QBadge)
+          const target = wrapper.get('.q-badge')
 
-        expect(
-          target.$style('vertical-align')
-        ).not.toBe(propVal)
+          expect(target.$style('vertical-align')).not.toBe(propVal)
 
-        await wrapper.setProps({ align: propVal })
-        await flushPromises()
+          await wrapper.setProps({ align: propVal })
+          await flushPromises()
 
-        expect(
-          target.$style('vertical-align')
-        ).toBe(propVal)
-      })
+          expect(target.$style('vertical-align')).toBe(propVal)
+        }
+      )
     })
 
     describe('[(prop)outline]', () => {
@@ -174,20 +132,13 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-badge--outline')
+        expect(target.classes()).not.toContain('q-badge--outline')
 
         await wrapper.setProps({ outline: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-badge--outline')
-
-        expect(
-          target.$computedStyle('border')
-        ).toContain('1px solid')
+        expect(target.classes()).toContain('q-badge--outline')
+        // expect(target.$computedStyle('border')).toContain('1px solid')
       })
     })
 
@@ -196,20 +147,14 @@ describe('[QBadge API]', () => {
         const wrapper = mount(QBadge)
         const target = wrapper.get('.q-badge')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-badge--rounded')
+        expect(target.classes()).not.toContain('q-badge--rounded')
 
         await wrapper.setProps({ rounded: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-badge--rounded')
+        expect(target.classes()).toContain('q-badge--rounded')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('1em')
+        expect(target.$computedStyle('border-radius')).toBe('1em')
       })
     })
   })

package/src/components/badge/index.js

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

package/src/components/banner/QBanner.js

@@ -1,7 +1,9 @@
 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'
 
@@ -16,43 +18,62 @@ export default createComponent({
     rounded: Boolean
   },
 
-  setup (props, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const isDark = useDark(props, $q)
 
-    const classes = computed(() =>
-      'q-banner row items-center'
-      + (props.dense === true ? ' q-banner--dense' : '')
-      + (isDark.value === true ? ' q-banner--dark q-dark' : '')
-      + (props.rounded === true ? ' rounded-borders' : '')
+    const classes = computed(
+      () =>
+        'q-banner row items-center' +
+        (props.dense === true ? ' q-banner--dense' : '') +
+        (isDark.value === true ? ' q-banner--dark q-dark' : '') +
+        (props.rounded === true ? ' rounded-borders' : '')
     )
 
-    const actionClass = computed(() =>
-      'q-banner__actions row items-center justify-end'
-      + ` col-${ props.inlineActions === true ? 'auto' : 'all' }`
+    const actionClass = computed(
+      () =>
+        'q-banner__actions row items-center justify-end' +
+        ` col-${props.inlineActions === true ? 'auto' : 'all'}`
     )
 
     return () => {
       const child = [
-        h('div', {
-          class: 'q-banner__avatar col-auto row items-center self-start'
-        }, hSlot(slots.avatar)),
+        h(
+          'div',
+          {
+            class: 'q-banner__avatar col-auto row items-center self-start'
+          },
+          hSlot(slots.avatar)
+        ),
 
-        h('div', {
-          class: 'q-banner__content col text-body2'
-        }, hSlot(slots.default))
+        h(
+          'div',
+          {
+            class: 'q-banner__content col text-body2'
+          },
+          hSlot(slots.default)
+        )
       ]
 
       const actions = hSlot(slots.action)
-      actions !== void 0 && child.push(
-        h('div', { class: actionClass.value }, actions)
-      )
+      if (actions !== void 0) {
+        child.push(h('div', { class: actionClass.value }, actions))
+      }
 
-      return h('div', {
-        class: classes.value
-          + (props.inlineActions === false && actions !== void 0 ? ' q-banner--top-padding' : ''),
-        role: 'alert'
-      }, child)
+      return h(
+        'div',
+        {
+          class:
+            classes.value +
+            (props.inlineActions === false && actions !== void 0
+              ? ' q-banner--top-padding'
+              : ''),
+          role: 'alert'
+        },
+        child
+      )
     }
   }
 })