quasar 2.9.1 → 2.10.0

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 }

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -5,18 +5,40 @@ import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
-import { useBtnProps } from '../btn/use-btn.js'
+import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
+import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stop } from '../../utils/event.js'
 import uid from '../../utils/uid.js'
 import { hSlot } from '../../utils/private/render.js'
 
+const btnPropsList = Object.keys(useBtnProps)
+
+// let's not duplicate type checking and prop validations
+// so just specify the props here with no type description
+const btnProps = btnPropsList.reduce(
+  (acc, key) => (acc[ key ] = {}) && acc,
+  {}
+)
+
+export const passBtnProps = props => btnPropsList.reduce(
+  (acc, key) => {
+    const val = props[ key ]
+    if (val !== void 0) {
+      acc[ key ] = val
+    }
+    return acc
+  },
+  {}
+)
+
 export default createComponent({
   name: 'QBtnDropdown',
 
   props: {
-    ...useBtnProps,
+    ...btnProps,
+    ...useTransitionProps,
 
     modelValue: Boolean,
     split: Boolean,
@@ -57,7 +79,7 @@ export default createComponent({
     const menuRef = ref(null)
     const targetUid = uid()
 
-    const attributes = computed(() => {
+    const ariaAttrs = computed(() => {
       const acc = {
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
@@ -85,6 +107,9 @@ export default createComponent({
       + (props.split === false ? ' q-btn-dropdown__arrow-container' : '')
     )
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props))
+    const btnProps = computed(() => passBtnProps(props))
+
     watch(() => props.modelValue, val => {
       menuRef.value !== null && menuRef.value[ val ? 'show' : 'hide' ]()
     })
@@ -165,6 +190,9 @@ export default createComponent({
           self: props.menuSelf,
           offset: props.menuOffset,
           separateClosePopup: true,
+          transitionShow: props.transitionShow,
+          transitionHide: props.transitionHide,
+          transitionDuration: props.transitionDuration,
           onBeforeShow,
           onShow,
           onBeforeHide,
@@ -175,11 +203,11 @@ export default createComponent({
       if (props.split === false) {
         return h(QBtn, {
           class: 'q-btn-dropdown q-btn-dropdown--simple',
-          ...props,
+          ...btnProps.value,
+          ...ariaAttrs.value,
           disable: props.disable === true || props.disableMainBtn === true,
           noWrap: true,
           round: false,
-          ...attributes.value,
           onClick
         }, {
           default: () => hSlot(slots.label, []).concat(Arrow),
@@ -189,21 +217,17 @@ export default createComponent({
 
       return h(QBtnGroup, {
         class: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
-        outline: props.outline,
-        flat: props.flat,
         rounded: props.rounded,
         square: props.square,
-        push: props.push,
-        unelevated: props.unelevated,
+        ...btnDesignAttr.value,
         glossy: props.glossy,
         stretch: props.stretch
       }, () => [
         h(QBtn, {
           class: 'q-btn-dropdown--current',
-          ...props,
+          ...btnProps.value,
           disable: props.disable === true || props.disableMainBtn === true,
           noWrap: true,
-          iconRight: props.iconRight,
           round: false,
           onClick: onClickHide
         }, {
@@ -213,16 +237,15 @@ export default createComponent({
 
         h(QBtn, {
           class: 'q-btn-dropdown__arrow-container q-anchor--skip',
-          ...attributes.value,
+          ...ariaAttrs.value,
+          ...btnDesignAttr.value,
           disable: props.disable === true || props.disableDropdown === true,
-          outline: props.outline,
-          flat: props.flat,
           rounded: props.rounded,
-          push: props.push,
-          size: props.size,
           color: props.color,
           textColor: props.textColor,
           dense: props.dense,
+          size: props.size,
+          padding: props.padding,
           ripple: props.ripple
         }, () => Arrow)
       ])

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle" ],
+  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle", "composables/private/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown"

package/src/components/btn-toggle/QBtnToggle.js

@@ -7,6 +7,7 @@ import { createComponent } from '../../utils/private/create.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { hMergeSlot } from '../../utils/private/render.js'
+import { getBtnDesignAttr } from '../btn/use-btn.js'
 
 export default createComponent({
   name: 'QBtnToggle',
@@ -80,6 +81,14 @@ export default createComponent({
 
     const injectFormInput = useFormInject(formAttrs)
 
+    const btnDesignAttr = computed(() => getBtnDesignAttr(props))
+
+    const btnOptionDesign = computed(() => ({
+      rounded: props.rounded,
+      dense: props.dense,
+      ...btnDesignAttr.value
+    }))
+
     const btnOptions = computed(() => props.options.map((item, i) => {
       const { attrs, value, slot, ...opt } = item
 
@@ -87,19 +96,11 @@ export default createComponent({
         slot,
         props: {
           key: i,
-          onClick (e) { set(value, item, e) },
 
           'aria-pressed': value === props.modelValue ? 'true' : 'false',
-
           ...attrs,
           ...opt,
-
-          outline: props.outline,
-          flat: props.flat,
-          rounded: props.rounded,
-          push: props.push,
-          unelevated: props.unelevated,
-          dense: props.dense,
+          ...btnOptionDesign.value,
 
           disable: props.disable === true || opt.disable === true,
 
@@ -117,7 +118,9 @@ export default createComponent({
           padding: mergeOpt(opt, 'padding'),
           ripple: mergeOpt(opt, 'ripple'),
           stack: mergeOpt(opt, 'stack') === true,
-          stretch: mergeOpt(opt, 'stretch') === true
+          stretch: mergeOpt(opt, 'stretch') === true,
+
+          onClick (e) { set(value, item, e) }
         }
       }
     }))
@@ -156,12 +159,9 @@ export default createComponent({
 
     return () => h(QBtnGroup, {
       class: 'q-btn-toggle',
-      outline: props.outline,
-      flat: props.flat,
+      ...btnDesignAttr.value,
       rounded: props.rounded,
-      push: props.push,
       stretch: props.stretch,
-      unelevated: props.unelevated,
       glossy: props.glossy,
       spread: props.spread
     }, getContent)

package/src/components/checkbox/use-checkbox.js

@@ -127,7 +127,7 @@ export default function (type, getInner) {
   const attributes = computed(() => {
     const attrs = {
       tabindex: tabindex.value,
-      role: 'checkbox',
+      role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
       'aria-checked': isIndeterminate.value === true
         ? 'mixed'

package/src/components/chip/QChip.js

@@ -102,16 +102,19 @@ export default createComponent({
         + (isDark.value === true ? ' q-chip--dark q-dark' : '')
     })
 
-    const attributes = computed(() => (
-      props.disable === true
+    const attributes = computed(() => {
+      const chip = props.disable === true
         ? { tabindex: -1, 'aria-disabled': 'true' }
-        : {
-            tabindex: props.tabindex || 0,
-            role: 'button',
-            'aria-hidden': 'false',
-            'aria-label': props.removeAriaLabel || $q.lang.label.remove
-          }
-    ))
+        : { tabindex: props.tabindex || 0 }
+      const remove = {
+        ...chip,
+        role: 'button',
+        'aria-hidden': 'false',
+        'aria-label': props.removeAriaLabel || $q.lang.label.remove
+      }
+
+      return { chip, remove }
+    })
 
     function onKeyup (e) {
       e.keyCode === 13 /* ENTER */ && onClick(e)
@@ -169,7 +172,7 @@ export default createComponent({
         h(QIcon, {
           class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
           name: removeIcon.value,
-          ...attributes.value,
+          ...attributes.value.remove,
           onClick: onRemove,
           onKeyup: onRemove
         })
@@ -188,7 +191,7 @@ export default createComponent({
 
       isClickable.value === true && Object.assign(
         data,
-        attributes.value,
+        attributes.value.chip,
         { onClick, onKeyup }
       )
 

package/src/components/dialog/QDialog.js

@@ -376,7 +376,8 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -70,6 +70,7 @@ export default createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action) },
             onKeyup (e) { e.keyCode === 13 && onOk(action) }
           }, [
@@ -145,9 +146,12 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       )
 
       return child

package/src/components/drawer/QDrawer.js

@@ -11,7 +11,7 @@ import TouchPan from '../../directives/TouchPan.js'
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { hSlot, hDir } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 const duration = 150
 
@@ -77,9 +77,11 @@ export default createComponent({
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QDrawer needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     let lastDesktopState, timerMini, layoutTotalWidthWatcher
 

package/src/components/footer/QFooter.js

@@ -6,7 +6,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QFooter',
@@ -31,9 +31,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QFooter needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

package/src/components/header/QHeader.js

@@ -4,7 +4,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hUniqueSlot } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QHeader',
@@ -33,9 +33,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QHeader needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

package/src/components/input/use-mask.js

@@ -166,7 +166,7 @@ export default function (props, emit, emitValue, inputRef) {
         '^'
         + unmask.join('')
         + '(' + (unmaskChar === '' ? '.' : '[^' + unmaskChar + ']') + '+)?'
-        + '$'
+        + (unmaskChar === '' ? '' : '[' + unmaskChar + ']*') + '$'
       ),
       extractLast = extract.length - 1,
       extractMatcher = extract.map((re, index) => {

package/src/components/item/QItem.js

@@ -136,6 +136,7 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       }

package/src/components/item/QList.js

@@ -29,6 +29,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 })

package/src/components/option-group/QOptionGroup.js

@@ -74,7 +74,7 @@ export default createComponent({
     )
 
     const attrs = computed(() => {
-      const attrs = {}
+      const attrs = { role: 'group' }
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup'