quasar 2.9.1 → 2.10.0

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -563,16 +563,6 @@
               "description": "HTML tag to use\n\nExamples:\ndiv\nspan\ndiv\nspan",
               "doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
               "default": "\"span\""
-            },
-            {
-              "name": "ripple",
-              "value": {
-                "kind": "expression",
-                "type": "boolean|object"
-              },
-              "description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)\n\nExamples:\nfalse\n{ early: true, center: true, color: 'teal', keyCodes: [] }",
-              "doc-url": "https://v2.quasar.dev/vue-components/breadcrumbs",
-              "default": "true"
             }
           ],
           "events": [
@@ -613,6 +603,36 @@
             "symbol": "QBtnDropdown"
           },
           "attributes": [
+            {
+              "name": "transition-show",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
+              "default": "\"fade\""
+            },
+            {
+              "name": "transition-hide",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "One of Quasar's embedded transitions\n\nExamples:\nfade\nslide-down",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
+              "default": "\"fade\""
+            },
+            {
+              "name": "transition-duration",
+              "value": {
+                "kind": "expression",
+                "type": "string|number"
+              },
+              "description": "Transition duration (in milliseconds, without unit)\n\nExamples:\n500\n1200",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown",
+              "default": "300"
+            },
             {
               "name": "model-value",
               "value": {
@@ -10119,7 +10139,7 @@
               "name": "min",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "number|string"
               },
               "description": "Minimum page (must be lower than 'max')\n\nExamples:\n3",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
@@ -10129,50 +10149,12 @@
               "name": "max",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "number|string"
               },
               "description": "Number of last page (must be higher than 'min')\n\nExamples:\n10",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "required": true
             },
-            {
-              "name": "color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination",
-              "default": "\"primary\""
-            },
-            {
-              "name": "text-color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
-            },
-            {
-              "name": "active-color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "Color name for component from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination",
-              "default": "\"primary\""
-            },
-            {
-              "name": "active-text-color",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "Overrides text color (if needed); Color name from the Quasar Color Palette\n\nExamples:\nprimary\nteal-10",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
-            },
             {
               "name": "dark",
               "value": {
@@ -10183,24 +10165,6 @@
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
-            {
-              "name": "input-style",
-              "value": {
-                "kind": "expression",
-                "type": "string|any[]|object"
-              },
-              "description": "Style definitions to be attributed to the input (if using one)\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
-            },
-            {
-              "name": "input-class",
-              "value": {
-                "kind": "expression",
-                "type": "string|any[]|object"
-              },
-              "description": "Class definitions to be attributed to the input (if using one)\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
-              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
-            },
             {
               "name": "size",
               "value": {
@@ -10319,78 +10283,115 @@
               "name": "max-pages",
               "value": {
                 "kind": "expression",
-                "type": "number"
+                "type": "number|string"
               },
               "description": "Maximum number of page links to display at a time; 0 means Infinite\n\nExamples:\n5",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination"
             },
             {
-              "name": "ripple",
+              "name": "flat",
               "value": {
                 "kind": "expression",
-                "type": "boolean|object"
+                "type": "boolean"
               },
-              "description": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons\n\nExamples:\nfalse\n{ early: true, center: true, color: 'teal', keyCodes: [] }",
+              "description": "Use 'flat' design for non-active buttons (it's the default option)",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
-              "default": "true"
+              "type": "boolean"
             },
             {
-              "name": "round",
+              "name": "outline",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Makes a circle shaped button for all buttons",
+              "description": "Use 'outline' design for non-active buttons",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
             {
-              "name": "rounded",
+              "name": "unelevated",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Applies a more prominent border-radius for a squared shape button for all buttons",
+              "description": "Remove shadow for non-active buttons",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
             {
-              "name": "flat",
+              "name": "push",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Use 'flat' design for current page button",
+              "description": "Use 'push' design for non-active buttons",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
             {
-              "name": "outline",
+              "name": "color",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "description": "Use 'outline' design for current page button",
+              "description": "Color name from the Quasar Color Palette for the non-active buttons\n\nExamples:\nprimary\nteal-10",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
-              "type": "boolean"
+              "default": "\"primary\""
             },
             {
-              "name": "unelevated",
+              "name": "text-color",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "Text color name from the Quasar Color Palette for the ACTIVE buttons\n\nExamples:\nprimary\nteal-10",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "active-design",
+              "value": {
+                "kind": "expression",
+                "type": "'flat'|'outline'|'push'|'unelevated'"
+              },
+              "description": "The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "active-color",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "Color name from the Quasar Color Palette for the ACTIVE button\n\nExamples:\nprimary\nteal-10",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination",
+              "default": "\"primary\""
+            },
+            {
+              "name": "active-text-color",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "Text color name from the Quasar Color Palette for the ACTIVE button\n\nExamples:\nprimary\nteal-10",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "round",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Remove shadow for current page button",
+              "description": "Makes a circle shaped button for all buttons",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
             {
-              "name": "push",
+              "name": "rounded",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "description": "Use 'push' design for current page button",
+              "description": "Applies a more prominent border-radius for a squared shape button for all buttons",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
               "type": "boolean"
             },
@@ -10405,14 +10406,14 @@
               "type": "boolean"
             },
             {
-              "name": "dense",
+              "name": "gutter",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "description": "Dense mode; occupies less space",
+              "description": "Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)\n\nExamples:\n16px\n10px 5px\n2rem\nxs\nmd lg\n2px 2px 5px 7px",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination",
-              "type": "boolean"
+              "default": "\"2px\""
             },
             {
               "name": "padding",
@@ -10422,6 +10423,34 @@
               },
               "description": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set\n\nExamples:\n16px\n10px 5px\n2rem\nxs\nmd lg\n2px 2px 5px 7px",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "input-style",
+              "value": {
+                "kind": "expression",
+                "type": "string|any[]|object"
+              },
+              "description": "Style definitions to be attributed to the input (if using one)\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "input-class",
+              "value": {
+                "kind": "expression",
+                "type": "string|any[]|object"
+              },
+              "description": "Class definitions to be attributed to the input (if using one)\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination"
+            },
+            {
+              "name": "ripple",
+              "value": {
+                "kind": "expression",
+                "type": "boolean|object"
+              },
+              "description": "Configure buttons material ripple (disable it by setting it to 'false' or supply a config object); Does not applies to boundary and ellipsis buttons\n\nExamples:\nfalse\n{ early: true, center: true, color: 'teal', keyCodes: [] }",
+              "doc-url": "https://v2.quasar.dev/vue-components/pagination",
+              "default": "true"
             }
           ],
           "events": [
@@ -18237,6 +18266,16 @@
               "doc-url": "https://v2.quasar.dev/vue-components/tree",
               "type": "boolean"
             },
+            {
+              "name": "no-transition",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "description": "Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees",
+              "doc-url": "https://v2.quasar.dev/vue-components/tree",
+              "type": "boolean"
+            },
             {
               "name": "filter",
               "value": {
@@ -19260,11 +19299,6 @@
               "description": "Calls event.preventDefault() for touch events",
               "doc-url": "https://v2.quasar.dev/vue-directives/touch-pan"
             },
-            {
-              "name": "mightPrevent",
-              "description": "Required when you might call event.preventDefault() in your handler for touch events",
-              "doc-url": "https://v2.quasar.dev/vue-directives/touch-pan"
-            },
             {
               "name": "capture",
               "description": "Use capture for touchstart event",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "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",

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/badge/__tests__/QBadge.spec.js

@@ -1,64 +1,126 @@
-// import { mount } from '@cypress/vue'
-// import QBadge from '../QBadge.js'
+import { mount } from '@cypress/vue'
+import QBadge from '../QBadge.js'
 
-// const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
+const defaultOptions = {
+  label: 'simple badge'
+}
+
+const alignValues = [ 'top', 'middle', 'bottom' ]
+
+function mountQBadge (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QBadge, options)
+}
 
 describe('Badge API', () => {
   describe('Props', () => {
     describe('Category: content', () => {
       describe('(prop): floating', () => {
-        it.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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.skip(' ', () => {
-          //
+        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')
         })
       })
     })
@@ -66,8 +128,21 @@ describe('Badge API', () => {
 
   describe('Slots', () => {
     describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
+      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/breadcrumbs/QBreadcrumbsEl.json

@@ -21,10 +21,6 @@
       "extends": "tag",
       "default": "span",
       "examples": [ "div", "span" ]
-    },
-
-    "ripple": {
-      "extends": "ripple"
     }
   },
 

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>