quasar 2.15.0 → 2.15.2

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

@@ -0,0 +1,123 @@
+import { mount } 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('should render the actions in the same row as the content', () => {
+        const wrapper = mount(QBanner, {
+          slots: {
+            default: 'Banner content',
+            action: 'Banner action'
+          },
+          props: {
+            inlineActions: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .get('.q-banner__actions')
+            .classes()
+        ).toContain('col-auto')
+      })
+    })
+
+    describe('[(prop)dense]', () => {
+      test('should have a dense style when "dense" prop is true', () => {
+        const wrapper = mount(QBanner, {
+          props: {
+            dense: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .classes()
+        ).toContain('q-banner--dense')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('should have a rounded style when "rounded" prop is true', () => {
+        const wrapper = mount(QBanner, {
+          props: {
+            rounded: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .classes()
+        ).toContain('rounded-borders')
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('should have a dark style when "dark" prop is true', () => {
+        const wrapper = mount(QBanner, {
+          props: {
+            dark: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .classes()
+        ).toContain('q-banner--dark')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should render the default content', () => {
+        const wrapper = mount(QBanner, {
+          slots: {
+            default: 'Banner content'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .get('.q-banner__content')
+            .text()
+        ).toBe('Banner content')
+      })
+    })
+
+    describe('[(slot)avatar]', () => {
+      test('should render the avatar content', () => {
+        const wrapper = mount(QBanner, {
+          slots: {
+            avatar: 'Banner avatar'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .get('.q-banner__avatar')
+            .text()
+        ).toBe('Banner avatar')
+      })
+    })
+
+    describe('[(slot)action]', () => {
+      test('should render the action content', () => {
+        const wrapper = mount(QBanner, {
+          slots: {
+            action: 'Banner action'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-banner')
+            .get('.q-banner__actions')
+            .text()
+        ).toBe('Banner action')
+      })
+    })
+  })
+})

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

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QBar from './QBar.js'
+
+describe('[QBar API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)dense]', () => {
+      test('should have a dense style when "dense" prop is true', () => {
+        const wrapper = mount(QBar, {
+          propsData: {
+            dense: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-bar')
+            .classes()
+        ).toContain('q-bar--dense')
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('should have a dark style when "dark" prop is true', () => {
+        const wrapper = mount(QBar, {
+          propsData: {
+            dark: true
+          }
+        })
+
+        expect(
+          wrapper.get('.q-bar')
+            .classes()
+        ).toContain('q-bar--dark')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should render the default slot', () => {
+        const wrapper = mount(QBar, {
+          slots: {
+            default: 'default bar slot'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-bar')
+            .text()
+        ).toContain('default bar slot')
+      })
+    })
+  })
+})

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"
     }
   },

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

@@ -0,0 +1,123 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import { alignMap, alignValues } from '../../composables/private/use-align.js'
+import BasicBreadcrumbs from './test/BasicBreadcrumbs.vue'
+import BreadcrumbWithSeparatorSlot from './test/BreadcrumbWithSeparatorSlot.vue'
+
+const gutterValues = [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+
+describe('[QBreadcrumbs API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)separator]', () => {
+      test('should render a custom separator based on the defined value', () => {
+        const customSeparator = '>'
+        const wrapper = mount(BasicBreadcrumbs, {
+          props: {
+            separator: customSeparator
+          }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs__separator')
+            .text()
+        ).toContain(customSeparator)
+      })
+    })
+
+    describe('[(prop)gutter]', () => {
+      test(`should render a breadcrumb with a gutter based on defined values: ${ gutterValues.join(', ') }`, () => {
+        // loop through each gutter value
+        for (const gutter of gutterValues) {
+          const wrapper = mount(BasicBreadcrumbs, {
+            props: { gutter }
+          })
+
+          expect(
+            wrapper.get('.q-breadcrumbs > div')
+              .classes()
+          ).toContain(`q-gutter-${ gutter }`)
+        }
+      })
+
+      test('should render a breadcrumb with no gutter when the value is set to "none"', () => {
+        const wrapper = mount(BasicBreadcrumbs, {
+          props: {
+            gutter: 'none'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div')
+            .classes()
+        ).not.toContain('q-gutter')
+      })
+    })
+
+    describe('[(prop)align]', () => {
+      test(`should render a breadcrumb aligned based on defined values: ${ alignValues.join(', ') }`, () => {
+        // loop over alignValues
+        for (const align of alignValues) {
+          const wrapper = mount(BasicBreadcrumbs, {
+            props: { align }
+          })
+
+          expect(
+            wrapper.get('.q-breadcrumbs > div')
+              .classes()
+          ).toContain(`justify-${ alignMap[ align ] }`)
+        }
+      })
+    })
+
+    describe('[(prop)active-color]', () => {
+      test('should change breadcrumb item color based on Quasar Color Palette', () => {
+        const activeColor = 'red'
+        const wrapper = mount(BasicBreadcrumbs, {
+          props: { activeColor }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+            .classes()
+        ).toContain(`text-${ activeColor }`)
+      })
+    })
+
+    describe('[(prop)separator-color]', () => {
+      test('should change breadcrumb separator color based on Quasar Color Palette', () => {
+        const separatorColor = 'red'
+        const wrapper = mount(BasicBreadcrumbs, {
+          props: { separatorColor }
+        })
+
+        wrapper.findAll('.q-breadcrumbs__separator')
+          .forEach(el => expect(el.classes()).toContain(`text-${ separatorColor }`))
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should display the default slot content', () => {
+        const wrapper = mount(BasicBreadcrumbs)
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div')
+            .text()
+        ).toContain('Home')
+      })
+    })
+
+    describe('[(slot)separator]', () => {
+      test('should display the separator slot content', () => {
+        const wrapper = mount(BreadcrumbWithSeparatorSlot)
+
+        expect(
+          wrapper.get('.q-breadcrumbs__separator')
+            .text()
+        ).toContain('arrow_forward')
+      })
+    })
+  })
+})

package/src/components/breadcrumbs/QBreadcrumbsEl.json

@@ -9,7 +9,7 @@
     "label": {
       "type": "String",
       "desc": "The label text for the breadcrumb",
-      "examples": [ "Home", "Index" ],
+      "examples": [ "'Home'", "'Index'" ],
       "category": "content"
     },
 
@@ -19,8 +19,8 @@
 
     "tag": {
       "extends": "tag",
-      "default": "span",
-      "examples": [ "div", "span" ]
+      "default": "'span'",
+      "examples": [ "'div'", "'span'" ]
     }
   },
 
@@ -54,7 +54,7 @@
                   "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",
+                    "'/home/dashboard'",
                     "{ name: 'my-route-name' }"
                   ]
                 },

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

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect, vi } from 'vitest'
+
+import QBreadcrumbsEl from './QBreadcrumbsEl.js'
+
+describe('[QBreadcrumbsEl API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)label]', () => {
+      test('should render a label inside the breadcrumb element', () => {
+        const label = 'Breadcrumb label'
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: { label }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs__el')
+            .text()
+        ).toContain(label)
+      })
+    })
+
+    describe('[(prop)icon]', () => {
+      test('should render on the left of the breadcrumb element', () => {
+        const icon = 'home'
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: { icon }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs__el')
+            .get('.q-icon')
+            .text()
+        ).toContain(icon)
+      })
+    })
+
+    describe('[(prop)tag]', () => {
+      test('should render a custom tag', () => {
+        const tag = 'a'
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: { tag }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs__el')
+            .element.tagName
+        ).toBe(tag.toUpperCase())
+      })
+    })
+
+    describe.todo('(prop): to', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): exact', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): replace', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): active-class', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): exact-active-class', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): href', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): target', () => {
+      test(' ', () => {
+        //
+      })
+    })
+
+    describe.todo('(prop): disable', () => {
+      test(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should render the default slot', () => {
+        const label = 'Breadcrumb label'
+        const wrapper = mount(QBreadcrumbsEl, {
+          slots: { default: label }
+        })
+
+        expect(
+          wrapper.get('.q-breadcrumbs__el')
+            .text()
+        ).toContain(label)
+      })
+    })
+  })
+
+  describe('[Events]', () => {
+    describe('[(event)click]', () => {
+      test('should emit "click" event when clicked', () => {
+        const fn = vi.fn()
+        const wrapper = mount(QBreadcrumbsEl, {
+          props: {
+            label: 'clicked breadcrumb',
+            onClick: fn
+          }
+        })
+
+        wrapper.get('.q-breadcrumbs__el')
+          .trigger('click')
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/components/btn/QBtn.js

@@ -3,7 +3,7 @@ import { h, ref, computed, Transition, onBeforeUnmount, withDirectives, getCurre
 import QIcon from '../icon/QIcon.js'
 import QSpinner from '../spinner/QSpinner.js'
 
-import Ripple from '../../directives/Ripple.js'
+import Ripple from '../../directives/ripple/Ripple.js'
 
 import useBtn, { useBtnProps } from './use-btn.js'
 

package/src/components/btn/QBtn.json

@@ -70,7 +70,7 @@
                   "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",
+                    "'/home/dashboard'",
                     "{ name: 'my-route-name' }"
                   ]
                 },