quasar 2.18.6 → 2.19.0

package/src/components/banner/QBanner.test.js

@@ -13,20 +13,14 @@ describe('[QBanner API]', () => {
           }
         })
 
-        const target = wrapper
-          .get('.q-banner')
-          .get('.q-banner__actions')
+        const target = wrapper.get('.q-banner').get('.q-banner__actions')
 
-        expect(
-          target.classes()
-        ).not.toContain('col-auto')
+        expect(target.classes()).not.toContain('col-auto')
 
         await wrapper.setProps({ inlineActions: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('col-auto')
+        expect(target.classes()).toContain('col-auto')
       })
     })
 
@@ -35,16 +29,12 @@ describe('[QBanner API]', () => {
         const wrapper = mount(QBanner)
         const target = wrapper.get('.q-banner')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-banner--dense')
+        expect(target.classes()).not.toContain('q-banner--dense')
 
         await wrapper.setProps({ dense: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-banner--dense')
+        expect(target.classes()).toContain('q-banner--dense')
       })
     })
 
@@ -53,20 +43,14 @@ describe('[QBanner API]', () => {
         const wrapper = mount(QBanner)
         const target = wrapper.get('.q-banner')
 
-        expect(
-          target.classes()
-        ).not.toContain('rounded-borders')
+        expect(target.classes()).not.toContain('rounded-borders')
 
         await wrapper.setProps({ rounded: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('rounded-borders')
+        expect(target.classes()).toContain('rounded-borders')
 
-        expect(
-          target.$computedStyle('border-radius')
-        ).toBe('4px')
+        expect(target.$computedStyle('border-radius')).toBe('4px')
       })
     })
 
@@ -75,29 +59,24 @@ describe('[QBanner API]', () => {
         const wrapper = mount(QBanner)
         const target = wrapper.get('.q-banner')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-banner--dark')
+        expect(target.classes()).not.toContain('q-banner--dark')
 
         await wrapper.setProps({ dark: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-banner--dark')
+        expect(target.classes()).toContain('q-banner--dark')
       })
 
-      test('type null has effect', async () => {
+      test('type null has effect', () => {
         const wrapper = mount(QBanner, {
           props: {
             dark: null
           }
         })
 
-        expect(
-          wrapper.get('.q-banner')
-            .classes()
-        ).not.toContain('q-banner--dark')
+        expect(wrapper.get('.q-banner').classes()).not.toContain(
+          'q-banner--dark'
+        )
       })
     })
   })

package/src/components/banner/index.js

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

package/src/components/bar/QBar.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'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -13,19 +15,27 @@ export default createComponent({
     dense: Boolean
   },
 
-  setup (props, { slots }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const isDark = useDark(props, $q)
 
-    const classes = computed(() =>
-      'q-bar row no-wrap items-center'
-      + ` q-bar--${ props.dense === true ? 'dense' : 'standard' } `
-      + ` q-bar--${ isDark.value === true ? 'dark' : 'light' }`
+    const classes = computed(
+      () =>
+        'q-bar row no-wrap items-center' +
+        ` q-bar--${props.dense === true ? 'dense' : 'standard'} ` +
+        ` q-bar--${isDark.value === true ? 'dark' : 'light'}`
     )
 
-    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/bar/QBar.test.js

@@ -10,16 +10,12 @@ describe('[QBar API]', () => {
         const wrapper = mount(QBar)
         const target = wrapper.get('.q-bar')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-bar--dense')
+        expect(target.classes()).not.toContain('q-bar--dense')
 
         await wrapper.setProps({ dense: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-bar--dense')
+        expect(target.classes()).toContain('q-bar--dense')
       })
     })
 
@@ -28,29 +24,22 @@ describe('[QBar API]', () => {
         const wrapper = mount(QBar)
         const target = wrapper.get('.q-bar')
 
-        expect(
-          target.classes()
-        ).not.toContain('q-bar--dark')
+        expect(target.classes()).not.toContain('q-bar--dark')
 
         await wrapper.setProps({ dark: true })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('q-bar--dark')
+        expect(target.classes()).toContain('q-bar--dark')
       })
 
-      test('type null has effect', async () => {
+      test('type null has effect', () => {
         const wrapper = mount(QBar, {
           props: {
             dark: null
           }
         })
 
-        expect(
-          wrapper.get('.q-bar')
-            .classes()
-        ).not.toContain('q-bar--dark')
+        expect(wrapper.get('.q-bar').classes()).not.toContain('q-bar--dark')
       })
     })
   })

package/src/components/bar/index.js

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

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -1,12 +1,14 @@
 import { h, computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
+import useAlign, {
+  useAlignProps
+} from '../../composables/private.use-align/use-align.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
 import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
 
-const disabledValues = [ '', true ]
+const disabledValues = ['', true]
 
 export default createComponent({
   name: 'QBreadcrumbs',
@@ -27,72 +29,82 @@ export default createComponent({
 
     gutter: {
       type: String,
-      validator: v => [ 'none', 'xs', 'sm', 'md', 'lg', 'xl' ].includes(v),
+      validator: v => ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(v),
       default: 'sm'
     }
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const alignClass = useAlign(props)
 
-    const classes = computed(() =>
-      `flex items-center ${ alignClass.value }${ props.gutter === 'none' ? '' : ` q-gutter-${ props.gutter }` }`
+    const classes = computed(
+      () =>
+        `flex items-center ${alignClass.value}${props.gutter === 'none' ? '' : ` q-gutter-${props.gutter}`}`
     )
 
-    const sepClass = computed(() => (props.separatorColor ? ` text-${ props.separatorColor }` : ''))
-    const activeClass = computed(() => ` text-${ props.activeColor }`)
+    const sepClass = computed(() =>
+      props.separatorColor ? ` text-${props.separatorColor}` : ''
+    )
+    const activeClass = computed(() => ` text-${props.activeColor}`)
 
     return () => {
       if (slots.default === void 0) return
 
-      const vnodes = getNormalizedVNodes(
-        hSlot(slots.default)
-      )
+      const vnodes = getNormalizedVNodes(hSlot(slots.default))
 
       if (vnodes.length === 0) return
 
       let els = 1
 
-      const
-        child = [],
+      const child = [],
         len = vnodes.filter(c => c.type?.name === 'QBreadcrumbsEl').length,
-        separator = slots.separator !== void 0
-          ? slots.separator
-          : () => props.separator
+        separator =
+          slots.separator !== void 0 ? slots.separator : () => props.separator
 
       vnodes.forEach(comp => {
         if (comp.type?.name === 'QBreadcrumbsEl') {
           const middle = els < len
-          const disabled = comp.props !== null && disabledValues.includes(comp.props.disable)
-          const cls = (middle === true ? '' : ' q-breadcrumbs--last')
-            + (disabled !== true && middle === true ? activeClass.value : '')
+          const disabled =
+            comp.props !== null && disabledValues.includes(comp.props.disable)
+          const cls =
+            (middle === true ? '' : ' q-breadcrumbs--last') +
+            (disabled !== true && middle === true ? activeClass.value : '')
 
           els++
 
           child.push(
-            h('div', {
-              class: `flex items-center${ cls }`
-            }, [ comp ])
+            h(
+              'div',
+              {
+                class: `flex items-center${cls}`
+              },
+              [comp]
+            )
           )
 
           if (middle === true) {
             child.push(
-              h('div', {
-                class: 'q-breadcrumbs__separator' + sepClass.value
-              }, separator())
+              h(
+                'div',
+                {
+                  class: 'q-breadcrumbs__separator' + sepClass.value
+                },
+                separator()
+              )
             )
           }
-        }
-        else {
+        } else {
           child.push(comp)
         }
       })
 
-      return h('div', {
-        class: 'q-breadcrumbs'
-      }, [
-        h('div', { class: classes.value }, child)
-      ])
+      return h(
+        'div',
+        {
+          class: 'q-breadcrumbs'
+        },
+        [h('div', { class: classes.value }, child)]
+      )
     }
   }
 })

package/src/components/breadcrumbs/QBreadcrumbs.json

@@ -8,7 +8,7 @@
       "type": "String",
       "desc": "The string used to separate the breadcrumbs",
       "default": "'/'",
-      "examples": [ "'-'", "'|'", "'>'" ],
+      "examples": ["'-'", "'|'", "'>'"],
       "category": "content"
     },
 
@@ -23,7 +23,7 @@
       "type": "String",
       "desc": "The gutter value allows you control over the space between the breadcrumb elements.",
       "default": "'sm'",
-      "values": [ "'none'", "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ],
+      "values": ["'none'", "'xs'", "'sm'", "'md'", "'lg'", "'xl'"],
       "category": "content"
     },
 
@@ -36,7 +36,14 @@
     "align": {
       "type": "String",
       "desc": "Specify how to align the breadcrumbs horizontally",
-      "values": [ "'left'", "'center'", "'right'", "'between'", "'around'", "'evenly'" ],
+      "values": [
+        "'left'",
+        "'center'",
+        "'right'",
+        "'between'",
+        "'around'",
+        "'evenly'"
+      ],
       "default": "'left'",
       "__runtimeDefault": true,
       "category": "content"

package/src/components/breadcrumbs/QBreadcrumbs.test.js

@@ -15,18 +15,16 @@ describe('[QBreadcrumbs API]', () => {
         const propVal = '>'
         const wrapper = mount(BasicBreadcrumbs)
 
-        expect(
-          wrapper.get('.q-breadcrumbs__separator')
-            .text()
-        ).not.toContain(propVal)
+        expect(wrapper.get('.q-breadcrumbs__separator').text()).not.toContain(
+          propVal
+        )
 
         await wrapper.setProps({ separator: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-breadcrumbs__separator')
-            .text()
-        ).toContain(propVal)
+        expect(wrapper.get('.q-breadcrumbs__separator').text()).toContain(
+          propVal
+        )
       })
     })
 
@@ -36,15 +34,18 @@ describe('[QBreadcrumbs API]', () => {
         const wrapper = mount(BasicBreadcrumbs)
 
         expect(
-          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+          wrapper
+            .get('div > .flex.items-center:not(.q-breadcrumbs--last)')
             .classes()
         ).not.toContain('text-red')
 
         await wrapper.setProps({ activeColor: propVal })
         await flushPromises()
 
+        console.log('gigi')
         expect(
-          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+          wrapper
+            .get('div > .flex.items-center:not(.q-breadcrumbs--last)')
             .classes()
         ).toContain('text-red')
       })
@@ -55,52 +56,42 @@ describe('[QBreadcrumbs API]', () => {
         const propVal = 'none'
         const wrapper = mount(BasicBreadcrumbs)
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .classes()
-        ).toContain('q-gutter-sm')
+        expect(wrapper.get('.q-breadcrumbs > div').classes()).toContain(
+          'q-gutter-sm'
+        )
 
         await wrapper.setProps({ gutter: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .classes()
-        ).toSatisfy(
-          list => list.every(cls => cls.startsWith('q-gutter') === false)
+        expect(wrapper.get('.q-breadcrumbs > div').classes()).toSatisfy(list =>
+          list.every(cls => cls.startsWith('q-gutter') === false)
         )
       })
 
-      test.each([
-        [ 'xs' ],
-        [ 'sm' ],
-        [ 'md' ],
-        [ 'lg' ],
-        [ 'xl' ]
-      ])('value %s has effect', async propVal => {
-        const wrapper = mount(BasicBreadcrumbs)
+      test.each([['xs'], ['sm'], ['md'], ['lg'], ['xl']])(
+        'value %s has effect',
+        async propVal => {
+          const wrapper = mount(BasicBreadcrumbs)
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .classes()
-        ).toContain('q-gutter-sm')
+          expect(wrapper.get('.q-breadcrumbs > div').classes()).toContain(
+            'q-gutter-sm'
+          )
 
-        await wrapper.setProps({ gutter: propVal })
-        await flushPromises()
+          await wrapper.setProps({ gutter: propVal })
+          await flushPromises()
 
-        if (propVal !== 'sm') {
-          // the default value
-          expect(
-            wrapper.get('.q-breadcrumbs > div')
-              .classes()
-          ).not.toContain('q-gutter-sm')
-        }
+          if (propVal !== 'sm') {
+            // the default value
+            expect(wrapper.get('.q-breadcrumbs > div').classes()).not.toContain(
+              'q-gutter-sm'
+            )
+          }
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .classes()
-        ).toContain(`q-gutter-${ propVal }`)
-      })
+          expect(wrapper.get('.q-breadcrumbs > div').classes()).toContain(
+            `q-gutter-${propVal}`
+          )
+        }
+      )
     })
 
     describe('[(prop)separator-color]', () => {
@@ -108,7 +99,8 @@ describe('[QBreadcrumbs API]', () => {
         const propVal = 'red'
         const wrapper = mount(BasicBreadcrumbs)
 
-        wrapper.findAll('.q-breadcrumbs__separator')
+        wrapper
+          .findAll('.q-breadcrumbs__separator')
           .forEach(el => expect(el.classes()).not.toContain('text-red'))
 
         // TODO: write expectations without the prop
@@ -117,37 +109,36 @@ describe('[QBreadcrumbs API]', () => {
         await wrapper.setProps({ separatorColor: propVal })
         await flushPromises()
 
-        wrapper.findAll('.q-breadcrumbs__separator')
+        wrapper
+          .findAll('.q-breadcrumbs__separator')
           .forEach(el => expect(el.classes()).toContain('text-red'))
       })
     })
 
     describe('[(prop)align]', () => {
       test.each([
-        [ 'left' ],
-        [ 'center' ],
-        [ 'right' ],
-        [ 'between' ],
-        [ 'around' ],
-        [ 'evenly' ]
+        ['left'],
+        ['center'],
+        ['right'],
+        ['between'],
+        ['around'],
+        ['evenly']
       ])('value "%s" has effect', async propVal => {
         const wrapper = mount(BasicBreadcrumbs)
 
         if (propVal !== 'left') {
           // the default value
-          expect(
-            wrapper.get('.q-breadcrumbs > div')
-              .classes()
-          ).not.toContain(`justify-${ alignMap[ propVal ] }`)
+          expect(wrapper.get('.q-breadcrumbs > div').classes()).not.toContain(
+            `justify-${alignMap[propVal]}`
+          )
         }
 
         await wrapper.setProps({ align: propVal })
         await flushPromises()
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .classes()
-        ).toContain(`justify-${ alignMap[ propVal ] }`)
+        expect(wrapper.get('.q-breadcrumbs > div').classes()).toContain(
+          `justify-${alignMap[propVal]}`
+        )
       })
     })
   })
@@ -157,10 +148,7 @@ describe('[QBreadcrumbs API]', () => {
       test('renders the content', () => {
         const wrapper = mount(BasicBreadcrumbs)
 
-        expect(
-          wrapper.get('.q-breadcrumbs > div')
-            .text()
-        ).toContain('Home')
+        expect(wrapper.get('.q-breadcrumbs > div').text()).toContain('Home')
       })
     })
 
@@ -168,10 +156,9 @@ describe('[QBreadcrumbs API]', () => {
       test('renders the content', () => {
         const wrapper = mount(BreadcrumbWithSeparatorSlot)
 
-        expect(
-          wrapper.get('.q-breadcrumbs__separator')
-            .text()
-        ).toContain('arrow_forward')
+        expect(wrapper.get('.q-breadcrumbs__separator').text()).toContain(
+          'arrow_forward'
+        )
       })
     })
   })

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -4,7 +4,9 @@ import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
+import useRouterLink, {
+  useRouterLinkProps
+} from '../../composables/private.use-router-link/use-router-link.js'
 
 export default createComponent({
   name: 'QBreadcrumbsEl',
@@ -21,37 +23,41 @@ export default createComponent({
     }
   },
 
-  emits: [ 'click' ],
+  emits: ['click'],
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const { linkTag, linkAttrs, linkClass, navigateOnClick } = useRouterLink()
 
-    const data = computed(() => {
-      return {
-        class: 'q-breadcrumbs__el q-link '
-          + 'flex inline items-center relative-position '
-          + (props.disable !== true ? 'q-link--focusable' + linkClass.value : 'q-breadcrumbs__el--disable'),
-        ...linkAttrs.value,
-        onClick: navigateOnClick
-      }
-    })
+    const data = computed(() => ({
+      class:
+        'q-breadcrumbs__el q-link ' +
+        'flex inline items-center relative-position ' +
+        (props.disable !== true
+          ? 'q-link--focusable' + linkClass.value
+          : 'q-breadcrumbs__el--disable'),
+      ...linkAttrs.value,
+      onClick: navigateOnClick
+    }))
 
-    const iconClass = computed(() =>
-      'q-breadcrumbs__el-icon'
-      + (props.label !== void 0 ? ' q-breadcrumbs__el-icon--with-label' : '')
+    const iconClass = computed(
+      () =>
+        'q-breadcrumbs__el-icon' +
+        (props.label !== void 0 ? ' q-breadcrumbs__el-icon--with-label' : '')
     )
 
     return () => {
       const child = []
 
-      props.icon !== void 0 && child.push(
-        h(QIcon, {
-          class: iconClass.value,
-          name: props.icon
-        })
-      )
+      if (props.icon !== void 0) {
+        child.push(
+          h(QIcon, {
+            class: iconClass.value,
+            name: props.icon
+          })
+        )
+      }
 
-      props.label !== void 0 && child.push(props.label)
+      if (props.label !== void 0) child.push(props.label)
 
       return h(
         linkTag.value,