quasar 2.9.2 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.9.2",
+  "version": "2.10.1",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -67,7 +67,7 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^1.1.1",
+    "@quasar/app-vite": "^1.1.3",
     "@quasar/extras": "^1.12.0",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -96,7 +96,7 @@
     "rollup": "^2.34.0",
     "table": "^6.0.4",
     "uglify-es": "^3.3.9",
-    "vue": "^3.2.37",
+    "vue": "^3.2.41",
     "vue-router": "^4.0.16",
     "yargs": "^17.3.0"
   },

package/src/api.extends.json

@@ -161,8 +161,7 @@
         "value": {
           "type": "Any",
           "desc": "New model value",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         }
       }
     },

package/src/components/ajax-bar/QAjaxBar.json

@@ -9,7 +9,6 @@
       "desc": "Position within window of where QAjaxBar should be displayed",
       "default": "top",
       "values": [ "top", "right", "bottom", "left" ],
-      "examples": [ "bottom" ],
       "category": "style"
     },
 
@@ -70,14 +69,12 @@
         "speed": {
           "type": "Number",
           "default": 300,
-          "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing",
-          "examples": [ 400, 0 ]
+          "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing"
         }
       },
       "returns": {
         "type": "Number",
-        "desc": "Number of active simultaneous sessions",
-        "__exemption": [ "examples" ]
+        "desc": "Number of active simultaneous sessions"
       }
     },
 
@@ -86,14 +83,12 @@
       "params": {
         "amount": {
           "type": "Number",
-          "desc": "Amount (0 < x <= 100) to increment with",
-          "examples": [ 1 ]
+          "desc": "Amount (0 < x <= 100) to increment with"
         }
       },
       "returns": {
         "type": "Number",
-        "desc": "Number of active simultaneous sessions",
-        "__exemption": [ "examples" ]
+        "desc": "Number of active simultaneous sessions"
       }
     },
 
@@ -101,8 +96,7 @@
       "desc": "Notify bar that one process you were waiting has finished",
       "returns": {
         "type": "Number",
-        "desc": "Number of active simultaneous sessions",
-        "__exemption": [ "examples" ]
+        "desc": "Number of active simultaneous sessions"
       }
     }
   }

package/src/components/badge/QBadge.js

@@ -53,7 +53,7 @@ export default createComponent({
     return () => h('div', {
       class: classes.value,
       style: style.value,
-      role: 'alert',
+      role: 'status',
       'aria-label': props.label
     }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
   }

package/src/components/breadcrumbs/QBreadcrumbs.json

@@ -24,7 +24,6 @@
       "desc": "The gutter value allows you control over the space between the breadcrumb elements.",
       "default": "sm",
       "values": [ "none", "xs", "sm", "md", "lg", "xl" ],
-      "examples": [ "md", "lg" ],
       "category": "content"
     },
 
@@ -39,7 +38,6 @@
       "default": "left",
       "desc": "Specify how to align the breadcrumbs horizontally",
       "values": [ "left", "center", "right", "between", "around", "evenly" ],
-      "examples": [ "left", "center" ],
       "category": "content"
     }
   },

package/src/components/breadcrumbs/QBreadcrumbsEl.json

@@ -21,10 +21,6 @@
       "extends": "tag",
       "default": "span",
       "examples": [ "div", "span" ]
-    },
-
-    "ripple": {
-      "extends": "ripple"
     }
   },
 
@@ -79,8 +75,7 @@
           },
           "returns": {
             "type": "Promise<any>",
-            "desc": "Returns the router's navigation promise",
-            "__exemption": [ "examples" ]
+            "desc": "Returns the router's navigation promise"
           }
         }
       }

package/src/components/breadcrumbs/__tests__/BasicBreadcrumbs.vue

@@ -0,0 +1,7 @@
+<template>
+  <q-breadcrumbs v-bind="$attrs">
+    <q-breadcrumbs-el label="Home" icon="home" />
+    <q-breadcrumbs-el label="Components" icon="widgets" />
+    <q-breadcrumbs-el label="Toolbar" />
+  </q-breadcrumbs>
+</template>

package/src/components/breadcrumbs/__tests__/BreadcrumbWithSeparatorSlot.vue

@@ -0,0 +1,11 @@
+<template>
+  <q-breadcrumbs v-bind="$attrs">
+    <q-breadcrumbs-el label="Home" icon="home" />
+    <q-breadcrumbs-el label="Components" icon="widgets" />
+    <q-breadcrumbs-el label="Toolbar" />
+
+    <template v-slot:separator>
+      <q-icon size="1.2em" name="arrow_forward" color="purple" />
+    </template>
+  </q-breadcrumbs>
+</template>

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

@@ -0,0 +1,112 @@
+import { mount } from '@cypress/vue'
+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 = '>'
+
+          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(', ') }`, () => {
+          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"', () => {
+          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(', ') }`, () => {
+          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'
+
+          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'
+
+          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', () => {
+        mount(BasicBreadcrumbs)
+
+        cy.get('.q-breadcrumbs > div')
+          .should('contain', 'Home')
+      })
+    })
+
+    describe('(slot): separator', () => {
+      it('should display the separator slot content', () => {
+        mount(BreadcrumbWithSeparatorSlot)
+
+        cy.get('.q-breadcrumbs__separator')
+          .should('contain', 'arrow_forward')
+      })
+    })
+  })
+})

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

@@ -0,0 +1,87 @@
+import { mount } from '@cypress/vue'
+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'
+
+          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'
+
+          mount(QBreadcrumbsEl, {
+            props: { icon }
+          })
+
+          cy.get('.q-breadcrumbs__el')
+            .should('contain', icon)
+        })
+      })
+
+      describe('(prop): tag', () => {
+        it('should render a custom tag', () => {
+          const tag = 'a'
+
+          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'
+
+        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()
+
+        mount(QBreadcrumbsEl, {
+          props: {
+            label: 'clicked breadcrumb',
+            onClick: fn
+          }
+        })
+
+        cy.get('.q-breadcrumbs__el')
+          .click()
+          .then(() => expect(fn).to.be.calledOnce)
+      })
+    })
+  })
+})

package/src/components/btn/QBtn.json

@@ -15,7 +15,6 @@
     "percentage": {
       "type": "Number",
       "desc": "Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background",
-      "examples": [ 23 ],
       "category": "behavior"
     },
 
@@ -92,8 +91,7 @@
           },
           "returns": {
             "type": "Promise<any>",
-            "desc": "Returns the router's navigation promise",
-            "__exemption": [ "examples" ]
+            "desc": "Returns the router's navigation promise"
           }
         }
       }

package/src/components/btn/__tests__/QBtn.spec.js

@@ -1,23 +1,65 @@
+import { mount } from '@cypress/vue'
+import QBtn from '../QBtn.js'
+
+const defaultOptions = {
+  label: 'simple Btn'
+}
+
+function mountQBtn (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QBtn, options)
+}
+
 describe('Btn API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
       describe('(prop): percentage', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with a percentage when "loading" prop is set to true', () => {
+          const percentage = 50
+
+          mountQBtn({
+            props: {
+              percentage,
+              loading: true
+            }
+          })
+
+          cy.get('.q-btn').should('have.attr', 'aria-valuenow', percentage)
         })
       })
 
       describe('(prop): dark-percentage', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a button with a dark percentage when "loading" prop is set to true', () => {
+          const percentage = 50
+
+          mountQBtn({
+            props: {
+              percentage,
+              loading: true,
+              darkPercentage: true
+            }
+          })
+
+          cy.get('.q-btn').should('have.attr', 'aria-valuenow', percentage)
+            .get('.q-btn__progress').should('have.class', 'q-btn__progress--dark')
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): round', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a circle shaped button when "round" prop is set to true', () => {
+          mountQBtn({
+            props: {
+              round: true
+            }
+          })
+
+          cy.get('.q-btn').should('have.class', 'q-btn--round')
         })
       })
     })
@@ -25,30 +67,61 @@ describe('Btn API', () => {
 
   describe('Slots', () => {
     describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
+      it('should render a button with a label', () => {
+        mountQBtn()
+
+        cy.get('.q-btn').should('contain', defaultOptions.label)
       })
     })
 
     describe('(slot): loading', () => {
-      it.skip(' ', () => {
-        //
+      it('should render a button with a loading slot', () => {
+        const loadingSlot = 'loading slot'
+
+        mountQBtn({
+          props: {
+            loading: true
+          },
+          slots: {
+            loading: loadingSlot
+          }
+        })
+
+        cy.get('.q-btn').should('contain', loadingSlot).contains(defaultOptions.label).should('not.be.visible')
       })
     })
   })
 
   describe('Events', () => {
     describe('(event): click', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit a click event when the button is clicked', () => {
+        const fn = cy.stub()
+
+        mountQBtn({
+          props: {
+            onClick: fn
+          }
+        })
+
+        cy.get('.q-btn').click()
+          .then(() => expect(fn).to.be.calledOnce)
       })
     })
   })
 
   describe('Methods', () => {
     describe('(method): click', () => {
-      it.skip(' ', () => {
-        //
+      it('should click the button', () => {
+        const fn = cy.stub()
+
+        mountQBtn({
+          props: {
+            onClick: fn
+          }
+        })
+
+        cy.get('.q-btn').invoke('click')
+          .then(() => expect(fn).to.be.calledOnce)
       })
     })
   })