quasar 2.15.0 → 2.15.2

package/src/utils/private/web-storage.json

@@ -11,7 +11,7 @@
           "type": "String",
           "desc": "Entry key",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         }
       },
       "returns": {
@@ -36,13 +36,13 @@
           "type": "String",
           "desc": "Entry key",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         }
       },
       "returns": {
         "type": [ "Date", "RegExp", "Number", "Boolean", "Function", "Object", "Array", "String", "null" ],
         "desc": "Storage item value",
-        "examples": [ "john12", 702 ]
+        "examples": [ "'john12'", "702" ]
       }
     },
 
@@ -75,7 +75,7 @@
       "returns": {
         "type": [ "String", "null" ],
         "desc": "Storage key",
-        "examples": [ "userId" ]
+        "examples": [ "'userId'" ]
       }
     },
 
@@ -84,9 +84,7 @@
       "returns": {
         "type": "Object",
         "desc": "Object syntax: item name as Object key and its value",
-        "examples": [
-          "{ userId: 'jon12', timesLoggedIn: 14 }"
-        ]
+        "examples": [ "{ userId: 'jon12', timesLoggedIn: 14 }" ]
       }
     },
 
@@ -107,7 +105,7 @@
           "type": "String",
           "desc": "Entry key",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         },
 
         "value": {
@@ -124,7 +122,7 @@
             "type": "Any",
             "__exemption": [ "desc" ]
           },
-          "examples": [ "john12" ]
+          "examples": [ "'john12'" ]
         }
       }
     },
@@ -136,7 +134,7 @@
           "type": "String",
           "desc": "Storage key",
           "required": true,
-          "examples": [ "userId" ]
+          "examples": [ "'userId'" ]
         }
       }
     },

package/src/components/avatar/__tests__/QAvatar.cy.js

@@ -1,120 +0,0 @@
-import QAvatar from '../QAvatar.js'
-
-describe('Avatar API', () => {
-  describe('Props', () => {
-    describe('Category: content', () => {
-      describe('(prop): icon', () => {
-        it('should render an icon', () => {
-          const icon = 'bug_report'
-          cy.mount(QAvatar, {
-            props: {
-              icon,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .get('.q-icon')
-            .should('have.text', `${ icon }`)
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      describe('(prop): font-size', () => {
-        it('should set the font-size', () => {
-          const size = '40px'
-          // Doing em/rem units here does not work
-          // Cypress looks at actual computed values in the browser
-          const fontSize = '32px'
-          cy.mount(QAvatar, {
-            props: {
-              size,
-              fontSize,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.css', 'font-size', size)
-            .get('.q-avatar__content')
-            .should('have.css', 'font-size', fontSize)
-        })
-      })
-
-      describe('(prop): color', () => {
-        it('should set a background color', () => {
-          const color = 'red'
-          cy.mount(QAvatar, {
-            props: {
-              color
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.class', `bg-${ color }`)
-        })
-      })
-
-      describe('(prop): text-color', () => {
-        it('should set a text color', () => {
-          const textColor = 'red'
-          cy.mount(QAvatar, {
-            props: {
-              textColor
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.class', `text-${ textColor }`)
-        })
-      })
-
-      describe('(prop): square', () => {
-        it('should create a square avatar', () => {
-          cy.mount(QAvatar, {
-            props: {
-              square: true,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.class', 'q-avatar--square')
-            .should('have.css', 'border-radius', '0px')
-        })
-      })
-
-      describe('(prop): rounded', () => {
-        it('should create a rounded avatar', () => {
-          cy.mount(QAvatar, {
-            props: {
-              rounded: true,
-              color: 'grey'
-            }
-          })
-
-          cy.get('.q-avatar')
-            .should('have.class', 'rounded-borders')
-        })
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('render the text in the default slot', () => {
-        const text = 'QQ'
-        cy.mount(QAvatar, {
-          slots: {
-            // Using only a string here results in an error, this is a workaround
-            default: () => text
-          }
-        })
-
-        cy.get('.q-avatar')
-          .should('have.text', text)
-      })
-    })
-  })
-})

package/src/components/badge/__tests__/QBadge.cy.js

@@ -1,148 +0,0 @@
-import QBadge from '../QBadge.js'
-
-const defaultOptions = {
-  label: 'simple badge'
-}
-
-const alignValues = [ 'top', 'middle', 'bottom' ]
-
-function mountQBadge (options = {}) {
-  options.props = {
-    ...defaultOptions,
-    ...options.props
-  }
-
-  return cy.mount(QBadge, options)
-}
-
-describe('Badge API', () => {
-  describe('Props', () => {
-    describe('Category: content', () => {
-      describe('(prop): floating', () => {
-        it('should render a floating badge', () => {
-          mountQBadge({
-            props: { floating: true }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'q-badge--floating')
-        })
-      })
-
-      describe('(prop): multi-line', () => {
-        it('should render a content with multiple lines', () => {
-          mountQBadge({
-            props: { multiLine: true }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'q-badge--multi-line')
-        })
-      })
-
-      describe('(prop): label', () => {
-        it('should render a label inside the badge', () => {
-          const label = 'Badge label'
-
-          mountQBadge({
-            props: { label }
-          })
-
-          cy.get('.q-badge')
-            .should('contain', label)
-        })
-      })
-
-      describe('(prop): align', () => {
-        it(`should render a badge aligned based on defined values: ${ alignValues.join(', ') }`, () => {
-          mountQBadge()
-
-          // loop over alignValues
-          for (const align of alignValues) {
-            cy.get('.q-badge')
-              .then(() => Cypress.vueWrapper.setProps({ align }))
-              .should('have.css', 'vertical-align', align)
-          }
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      describe('(prop): color', () => {
-        it('should change color based on Quasar Color Palette', () => {
-          mountQBadge({
-            props: { color: 'red' }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'bg-red')
-        })
-      })
-
-      describe('(prop): text-color', () => {
-        it('should change text color based on Quasar Color Palette', () => {
-          mountQBadge({
-            props: { textColor: 'red' }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'text-red')
-        })
-      })
-
-      describe('(prop): transparent', () => {
-        it('should have opacity style when "transparent" prop is true', () => {
-          mountQBadge({
-            props: { transparent: true }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'q-badge--transparent')
-        })
-      })
-
-      describe('(prop): outline', () => {
-        it('should have a outline style when "outline" prop is true', () => {
-          mountQBadge({
-            props: { outline: true }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'q-badge--outline')
-        })
-      })
-
-      describe('(prop): rounded', () => {
-        it('should have a rounded style when "rounded" prop is true', () => {
-          mountQBadge({
-            props: { rounded: true }
-          })
-
-          cy.get('.q-badge')
-            .should('have.class', 'q-badge--rounded')
-        })
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('should display the default slot content', () => {
-        const label = 'Badge label'
-
-        mountQBadge({
-          props: {
-            label: undefined
-          },
-
-          slots: {
-            default: label
-          }
-        })
-
-        cy.get('.q-badge')
-          .should('have.text', label)
-      })
-    })
-  })
-})

package/src/components/banner/__tests__/QBanner.cy.js

@@ -1,106 +0,0 @@
-import QBanner from '../QBanner.js'
-
-describe('Banner API', () => {
-  describe('Props', () => {
-    describe('Category: content', () => {
-      describe('(prop): inline-actions', () => {
-        it('should render the actions in the same row as the content', () => {
-          cy.mount(QBanner, {
-            slots: {
-              default: 'Banner content',
-              action: 'Banner action'
-            },
-            props: {
-              inlineActions: true
-            }
-          })
-
-          cy.get('.q-banner').get('.q-banner__actions')
-            .should('have.class', 'col-auto')
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      describe('(prop): dense', () => {
-        it('should have a dense style when "dense" prop is true', () => {
-          cy.mount(QBanner, {
-            props: {
-              dense: true
-            }
-
-          })
-          cy.get('.q-banner')
-            .should('have.class', 'q-banner--dense')
-        })
-      })
-
-      describe('(prop): rounded', () => {
-        it('should have a rounded style when "rounded" prop is true', () => {
-          cy.mount(QBanner, {
-            props: {
-              rounded: true
-            }
-          })
-
-          cy.get('.q-banner')
-            .should('have.class', 'rounded-borders')
-        })
-      })
-
-      describe('(prop): dark', () => {
-        it('should have a dark style when "dark" prop is true', () => {
-          cy.mount(QBanner, {
-            props: {
-              dark: true
-            }
-          })
-
-          cy.get('.q-banner')
-            .should('have.class', 'q-banner--dark')
-        })
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('should render the default content', () => {
-        cy.mount(QBanner, {
-          slots: {
-            default: 'Banner content'
-          }
-        })
-
-        cy.get('.q-banner').get('.q-banner__content')
-          .should('contain', 'Banner content')
-      })
-    })
-
-    describe('(slot): avatar', () => {
-      it('should render the avatar content', () => {
-        cy.mount(QBanner, {
-          slots: {
-            avatar: 'Banner avatar'
-          }
-        })
-
-        cy.get('.q-banner').get('.q-banner__avatar')
-          .should('contain', 'Banner avatar')
-      })
-    })
-
-    describe('(slot): action', () => {
-      it('should render the action content', () => {
-        cy.mount(QBanner, {
-          slots: {
-            action: 'Banner action'
-          }
-        })
-
-        cy.get('.q-banner').get('.q-banner__actions')
-          .should('contain', 'Banner action')
-      })
-    })
-  })
-})

package/src/components/bar/__tests__/QBar.cy.js

@@ -1,45 +0,0 @@
-import QBar from '../QBar.js'
-
-describe('Bar API', () => {
-  describe('Props', () => {
-    describe('Category: style', () => {
-      describe('(prop): dense', () => {
-        it('should have a dense style when "dense" prop is true', () => {
-          cy.mount(QBar, {
-            propsData: {
-              dense: true
-            }
-          })
-          cy.get('.q-bar')
-            .should('have.class', 'q-bar--dense')
-        })
-      })
-
-      describe('(prop): dark', () => {
-        it('should have a dark style when "dark" prop is true', () => {
-          cy.mount(QBar, {
-            propsData: {
-              dark: true
-            }
-          })
-          cy.get('.q-bar')
-            .should('have.class', 'q-bar--dark')
-        })
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('should render the default slot', () => {
-        cy.mount(QBar, {
-          slots: {
-            default: 'default bar slot'
-          }
-        })
-        cy.get('.q-bar')
-          .should('contain', 'default bar slot')
-      })
-    })
-  })
-})

package/src/components/breadcrumbs/__tests__/QBreadcrumbs.cy.js

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

package/src/components/breadcrumbs/__tests__/QBreadcrumbsEl.cy.js

@@ -1,87 +0,0 @@
-import QBreadcrumbsEl from '../QBreadcrumbsEl.js'
-
-describe('BreadcrumbsEl API', () => {
-  describe('Props', () => {
-    describe('Category: content', () => {
-      describe('(prop): label', () => {
-        it('should render a label inside the breadcrumb element', () => {
-          const label = 'Breadcrumb label'
-
-          cy.mount(QBreadcrumbsEl, {
-            props: { label }
-          })
-
-          cy.get('.q-breadcrumbs__el')
-            .should('contain', label)
-        })
-      })
-
-      describe('(prop): icon', () => {
-        it('should render on the left of the breadcrumb element', () => {
-          const icon = 'home'
-
-          cy.mount(QBreadcrumbsEl, {
-            props: { icon }
-          })
-
-          cy.get('.q-breadcrumbs__el')
-            .should('contain', icon)
-        })
-      })
-
-      describe('(prop): tag', () => {
-        it('should render a custom tag', () => {
-          const tag = 'a'
-
-          cy.mount(QBreadcrumbsEl, {
-            props: { tag }
-          })
-
-          cy.get('.q-breadcrumbs__el')
-            .should('have.prop', 'tagName', tag.toUpperCase())
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-  })
-
-  describe('Slots', () => {
-    describe('(slot): default', () => {
-      it('should render the default slot', () => {
-        const label = 'Breadcrumb label'
-
-        cy.mount(QBreadcrumbsEl, {
-          slots: { default: label }
-        })
-
-        cy.get('.q-breadcrumbs__el')
-          .should('contain', label)
-      })
-    })
-  })
-
-  describe('Events', () => {
-    describe('(event): click', () => {
-      it('should emit "click" event when clicked', () => {
-        const fn = cy.stub()
-
-        cy.mount(QBreadcrumbsEl, {
-          props: {
-            label: 'clicked breadcrumb',
-            onClick: fn
-          }
-        })
-
-        cy.get('.q-breadcrumbs__el')
-          .click()
-        cy.get('.q-breadcrumbs__el')
-          .then(() => expect(fn).to.be.calledOnce)
-      })
-    })
-  })
-})