quasar 2.15.1 → 2.15.3

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

@@ -0,0 +1,267 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QBadge from './QBadge.js'
+
+describe('[QBadge API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)color]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.color).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+      })
+    })
+
+    describe('[(prop)text-color]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.textColor).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`text-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+      })
+    })
+
+    describe('[(prop)floating]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.floating).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-badge--floating')
+
+        await wrapper.setProps({ floating: true })
+        await flushPromises()
+
+        expect(
+          wrapper.classes()
+        ).toContain('q-badge--floating')
+
+        expect(
+          wrapper.get('.q-badge')
+            .$computedStyle('position')
+        ).toBe('absolute')
+      })
+    })
+
+    describe('[(prop)transparent]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.transparent).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-badge--transparent')
+
+        await wrapper.setProps({ transparent: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-badge--transparent')
+
+        expect(
+          target.$computedStyle('opacity')
+        ).not.toBe('1')
+      })
+    })
+
+    describe('[(prop)multi-line]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.multiLine).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        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.$computedStyle('word-break')
+        ).toBe('break-all')
+      })
+    })
+
+    describe('[(prop)label]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.label).toBeDefined()
+      })
+
+      test.each([
+        [ '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)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(
+          target.text()
+        ).toContain(propVal)
+      })
+    })
+
+    describe('[(prop)align]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.align).toBeDefined()
+      })
+
+      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)
+
+        await wrapper.setProps({ align: propVal })
+        await flushPromises()
+
+        expect(
+          target.$style('vertical-align')
+        ).toBe(propVal)
+      })
+    })
+
+    describe('[(prop)outline]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.outline).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        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')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.rounded).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-badge--rounded')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-badge--rounded')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('1em')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBadge, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/banner/QBanner.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { hSlot } from '../../utils/private/render.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QBanner',

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

@@ -0,0 +1,161 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QBanner from './QBanner.js'
+
+describe('[QBanner API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)inline-actions]', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.inlineActions).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner, {
+          slots: {
+            action: () => 'Banner action'
+          }
+        })
+
+        const target = wrapper
+          .get('.q-banner')
+          .get('.q-banner__actions')
+
+        expect(
+          target.classes()
+        ).not.toContain('col-auto')
+
+        await wrapper.setProps({ inlineActions: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('col-auto')
+      })
+    })
+
+    describe('[(prop)dense]', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.dense).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-banner--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-banner--dense')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.rounded).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
+
+        expect(
+          target.classes()
+        ).not.toContain('rounded-borders')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('rounded-borders')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('4px')
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.dark).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-banner--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-banner--dark')
+      })
+
+      test('type null has effect', async () => {
+        const wrapper = mount(QBanner, {
+          props: {
+            dark: null
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .classes()
+        ).not.toContain('q-banner--dark')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBanner, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+
+    describe('[(slot)avatar]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBanner, {
+          slots: {
+            avatar: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+
+    describe('[(slot)action]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBanner, {
+          slots: {
+            action: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/bar/QBar.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QBar',

package/src/components/bar/QBar.test.js

@@ -0,0 +1,80 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QBar from './QBar.js'
+
+describe('[QBar API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)dense]', () => {
+      test('is defined correctly', () => {
+        expect(QBar.props.dense).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBar)
+        const target = wrapper.get('.q-bar')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-bar--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-bar--dense')
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('is defined correctly', () => {
+        expect(QBar.props.dark).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBar)
+        const target = wrapper.get('.q-bar')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-bar--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-bar--dark')
+      })
+
+      test('type null has effect', async () => {
+        const wrapper = mount(QBar, {
+          props: {
+            dark: null
+          }
+        })
+
+        expect(
+          wrapper.get('.q-bar')
+            .classes()
+        ).not.toContain('q-bar--dark')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBar, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -1,10 +1,10 @@
 import { h, computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
+import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
-import { getNormalizedVNodes } from '../../utils/private/vm.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 ]
 
@@ -43,6 +43,8 @@ export default createComponent({
     const activeClass = computed(() => ` text-${ props.activeColor }`)
 
     return () => {
+      if (slots.default === void 0) return
+
       const vnodes = getNormalizedVNodes(
         hSlot(slots.default)
       )

package/src/components/breadcrumbs/QBreadcrumbs.json

@@ -7,23 +7,23 @@
     "separator": {
       "type": "String",
       "desc": "The string used to separate the breadcrumbs",
-      "default": "/",
-      "examples": [ "-", "|", ">" ],
+      "default": "'/'",
+      "examples": [ "'-'", "'|'", "'>'" ],
       "category": "content"
     },
 
     "active-color": {
       "extends": "color",
       "desc": "The color of the active breadcrumb, which can be any color from the Quasar Color Palette",
-      "default": "primary",
+      "default": "'primary'",
       "category": "style"
     },
 
     "gutter": {
       "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" ],
+      "default": "'sm'",
+      "values": [ "'none'", "'xs'", "'sm'", "'md'", "'lg'", "'xl'" ],
       "category": "content"
     },
 
@@ -35,9 +35,9 @@
 
     "align": {
       "type": "String",
-      "default": "left",
+      "default": "'left'",
       "desc": "Specify how to align the breadcrumbs horizontally",
-      "values": [ "left", "center", "right", "between", "around", "evenly" ],
+      "values": [ "'left'", "'center'", "'right'", "'between'", "'around'", "'evenly'" ],
       "category": "content"
     }
   },