quasar 2.9.2 → 2.10.0

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

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.9.2",
+  "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": [

package/package.json

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

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/use-btn.js

@@ -4,7 +4,7 @@ import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 
-const padding = {
+export const btnPadding = {
   none: 0,
   xs: 4,
   sm: 8,
@@ -24,6 +24,21 @@ const defaultSizes = {
 const formTypes = [ 'button', 'submit', 'reset' ]
 const mediaTypeRE = /[^\s]\/[^\s]/
 
+export const btnDesignOptions = [ 'flat', 'outline', 'push', 'unelevated' ]
+export const getBtnDesign = (props, defaultValue) => {
+  if (props.flat === true) return 'flat'
+  if (props.outline === true) return 'outline'
+  if (props.push === true) return 'push'
+  if (props.unelevated === true) return 'unelevated'
+  return defaultValue
+}
+export const getBtnDesignAttr = props => {
+  const design = getBtnDesign(props)
+  return design !== void 0
+    ? { [ design ]: true }
+    : {}
+}
+
 export const useBtnProps = {
   ...useSizeProps,
   ...useRouterLinkProps,
@@ -37,13 +52,14 @@ export const useBtnProps = {
   icon: String,
   iconRight: String,
 
-  round: Boolean,
+  ...btnDesignOptions.reduce(
+    (acc, val) => (acc[ val ] = Boolean) && acc,
+    {}
+  ),
+
   square: Boolean,
-  outline: Boolean,
-  flat: Boolean,
-  unelevated: Boolean,
+  round: Boolean,
   rounded: Boolean,
-  push: Boolean,
   glossy: Boolean,
 
   size: String,
@@ -93,7 +109,7 @@ export default function (props) {
       ? Object.assign({}, obj, {
         padding: props.padding
           .split(/\s+/)
-          .map(v => (v in padding ? padding[ v ] + 'px' : v))
+          .map(v => (v in btnPadding ? btnPadding[ v ] + 'px' : v))
           .join(' '),
         minWidth: '0',
         minHeight: '0'
@@ -113,13 +129,7 @@ export default function (props) {
     isActionable.value === true ? props.tabindex || 0 : -1
   ))
 
-  const design = computed(() => {
-    if (props.flat === true) return 'flat'
-    if (props.outline === true) return 'outline'
-    if (props.push === true) return 'push'
-    if (props.unelevated === true) return 'unelevated'
-    return 'standard'
-  })
+  const design = computed(() => getBtnDesign(props, 'standard'))
 
   const attributes = computed(() => {
     const acc = { tabindex: tabIndex.value }