quasar 2.8.3 → 2.8.4

package/src/components/chip/__tests__/QChip.spec.js

@@ -1,125 +1,349 @@
+import { mount } from '@cypress/vue'
+import QChip, { defaultSizes } from '../QChip.js'
+
+const defaultOptions = {
+  label: 'simple chip'
+}
+
+const chipSizeValues = Object.keys(defaultSizes)
+
+function mountQChip (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QChip, options)
+}
+
 describe('Chip API', () => {
   describe('Props', () => {
     describe('Category: content', () => {
       describe('(prop): icon', () => {
-        it.skip(' ', () => {
-          //
+        it('should render an icon on the left', () => {
+          const icon = 'add'
+
+          mountQChip({
+            props: {
+              icon
+            }
+          })
+
+          cy.get('.q-chip')
+            .get('.q-icon.q-chip__icon--left')
+            .should('have.text', `${ icon }`)
         })
       })
 
       describe('(prop): icon-right', () => {
-        it.skip(' ', () => {
-          //
+        it('should render an icon on the right', () => {
+          const icon = 'add'
+
+          mountQChip({
+            props: {
+              iconRight: icon
+            }
+          })
+
+          cy.get('.q-chip')
+            .get('.q-icon.q-chip__icon--right')
+            .should('have.text', `${ icon }`)
         })
       })
 
       describe('(prop): icon-remove', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a custom remove icon', () => {
+          const icon = 'delete'
+
+          mountQChip({
+            props: {
+              removable: true,
+              iconRemove: icon
+            }
+          })
+
+          cy.get('.q-chip')
+            .get('.q-icon.q-chip__icon--remove')
+            .should('have.text', `${ icon }`)
         })
       })
 
       describe('(prop): icon-selected', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a custom selected icon when one provided', () => {
+          const icon = 'done'
+
+          mountQChip({
+            props: {
+              selected: true,
+              iconSelected: icon
+            }
+          })
+
+          cy.get('.q-chip.q-chip--selected')
+            .get('.q-icon')
+            .should('have.text', `${ icon }`)
         })
       })
 
       describe('(prop): label', () => {
-        it.skip(' ', () => {
-          //
+        it('should render a label inside the chip', () => {
+          const label = 'Chip label'
+
+          mountQChip({
+            props: {
+              label
+            }
+          })
+
+          cy.get('.q-chip').get('.q-chip__content').should('have.text', label)
         })
       })
     })
 
     describe('Category: general', () => {
       describe('(prop): tabindex', () => {
-        it.skip(' ', () => {
-          //
+        it('should set the tabindex', () => {
+          const tabindex = 1
+
+          mountQChip({
+            props: {
+              clickable: true,
+              tabindex
+            }
+          })
+
+          cy.get('.q-chip').should('have.attr', 'tabindex', `${ tabindex }`)
         })
       })
     })
 
     describe('Category: model', () => {
       describe('(prop): model-value', () => {
-        it.skip(' ', () => {
-          //
+        it('should render when "modelValue" prop is true', () => {
+          mountQChip({
+            props: {
+              modelValue: true
+            }
+          })
+
+          cy.get('.q-chip').should('exist')
+        })
+
+        it('should not render when "modelValue" prop is false', () => {
+          mountQChip({
+            props: {
+              modelValue: false
+            }
+          })
+
+          cy.get('.q-chip').should('not.exist')
         })
       })
 
       describe('(prop): selected', () => {
-        it.skip(' ', () => {
-          //
+        it('should be selected when "selected" prop is true', () => {
+          mountQChip({
+            props: {
+              selected: true
+            }
+          })
+
+          cy.get('.q-chip.q-chip--selected').should('exist')
+        })
+
+        it('should not be selected when "selected" prop is false', () => {
+          mountQChip({
+            props: {
+              selected: false
+            }
+          })
+
+          cy.get('.q-chip').should('not.have.class', 'q-chip--selected')
         })
       })
     })
 
     describe('Category: state', () => {
       describe('(prop): clickable', () => {
-        it.skip(' ', () => {
-          //
+        it('should have hover effects and emit "click" event when "clickable" prop is true', () => {
+          const fn = cy.stub()
+
+          mountQChip({
+            props: {
+              clickable: true,
+              onClick: fn
+            }
+          })
+
+          cy.get('.q-chip')
+            .should('have.css', 'cursor', 'pointer')
+            .click()
+            .then(() => expect(fn).to.be.calledOnce)
         })
       })
 
       describe('(prop): removable', () => {
-        it.skip(' ', () => {
-          //
+        it('should display a remove icon emitting a "remove" event when clicked', () => {
+          const fn = cy.stub()
+
+          mountQChip({
+            props: {
+              removable: true,
+              onRemove: fn
+            }
+          })
+
+          cy.get('.q-chip')
+            .get('.q-icon.q-chip__icon--remove')
+            .click()
+            .then(() => expect(fn).to.be.calledOnce)
         })
       })
 
       describe('(prop): disable', () => {
-        it.skip(' ', () => {
-          //
+        it('should not have hover effect and not emit "click" event when "disable" prop is true', () => {
+          const fn = cy.stub()
+
+          mountQChip({
+            props: {
+              disable: true,
+              onClick: fn
+            }
+          })
+
+          cy.get('.q-chip')
+            .should('not.have.css', 'cursor', 'pointer')
+            .click()
+            .then(() => expect(fn).to.not.be.called)
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): dense', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a dense style when "dense" prop is true', () => {
+          mountQChip({
+            props: {
+              dense: true
+            }
+          })
+
+          cy.get('.q-chip.q-chip--dense').should('exist')
         })
       })
 
       describe('(prop): size', () => {
-        it.skip(' ', () => {
-          //
+        it('should change QChip size based on a CSS unit value', () => {
+          const size = '50px'
+
+          mountQChip({
+            props: {
+              size
+            }
+          })
+
+          cy.get('.q-chip').should('have.css', 'font-size', size)
+        })
+
+        it(`should change QChip size based defined values: ${ chipSizeValues.join(', ') }`, () => {
+          mountQChip()
+
+          // loop over chipSizeValues
+          for (const key of chipSizeValues) {
+            cy.get('.q-chip')
+              .then(() => Cypress.vueWrapper.setProps({ size: key }))
+              .should('have.css', 'font-size', `${ defaultSizes[ key ] }px`)
+          }
         })
       })
 
       describe('(prop): dark', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a dark style when "dark" prop is true', () => {
+          mountQChip({
+            props: {
+              dark: true
+            }
+          })
+
+          cy.get('.q-chip')
+            .should('have.class', 'q-dark')
+            .and('have.class', 'q-chip--dark')
         })
       })
 
       describe('(prop): color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change color based on Quasar Color Palette', () => {
+          const color = 'red'
+
+          mountQChip({
+            props: {
+              color
+            }
+          })
+
+          cy.get('.q-chip').should('have.class', `bg-${ color }`)
         })
       })
 
       describe('(prop): text-color', () => {
-        it.skip(' ', () => {
-          //
+        it('should change text color based on Quasar Color Palette', () => {
+          const textColor = 'red'
+
+          mountQChip({
+            props: {
+              textColor
+            }
+          })
+
+          cy.get('.q-chip')
+            .should('have.class', 'q-chip--colored')
+            .and('have.class', `text-${ textColor }`)
         })
       })
 
       describe('(prop): square', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a square style when "square" prop is true', () => {
+          mountQChip({
+            props: {
+              square: true
+            }
+          })
+
+          cy.get('.q-chip').should('have.class', 'q-chip--square')
         })
       })
 
       describe('(prop): outline', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a outline style when "outline" prop is true', () => {
+          mountQChip({
+            props: {
+              outline: true
+            }
+          })
+
+          cy.get('.q-chip').should('have.class', 'q-chip--outline')
         })
       })
 
       describe('(prop): ripple', () => {
-        it.skip(' ', () => {
-          //
+        it('should have a ripple effect when "ripple" prop is true', () => {
+          mountQChip({
+            props: {
+              ripple: true
+            }
+          })
+
+          cy.get('.q-chip').click().get('.q-ripple').should('exist')
+        })
+
+        it('should not have a ripple effect when "ripple" prop is false', () => {
+          mountQChip({
+            props: {
+              ripple: false
+            }
+          })
+
+          cy.get('.q-chip').click().get('.q-ripple').should('not.exist')
         })
       })
     })
@@ -127,28 +351,117 @@ describe('Chip API', () => {
 
   describe('Slots', () => {
     describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
+      it('should display the default slot content', () => {
+        mountQChip({
+          props: {
+            label: undefined
+          },
+
+          slots: {
+            default: 'Default Slot Content'
+          }
+        })
+
+        cy.get('.q-chip').should('have.text', 'Default Slot Content')
       })
     })
   })
 
   describe('Events', () => {
     describe('(event): click', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit "click" event when clicked and "clickable" prop is true', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            clickable: true,
+            onClick: fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .click()
+          .then(() => expect(fn).to.be.calledOnce)
+      })
+
+      it('should not emit "click" event when "clickable" prop is false', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            clickable: false,
+            onClick: fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .click()
+          .then(() => expect(fn).to.not.be.called)
       })
     })
 
     describe('(event): update:selected', () => {
-      it.skip(' ', () => {
-        //
+      it('should update selected value when called', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            selected: false,
+            'onUpdate:selected': fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .click()
+          .then(() => expect(fn).to.be.calledOnce)
+      })
+
+      it('should not emit update:selected event when "selected" prop is not set', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            selected: undefined,
+            'onUpdate:selected': fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .click()
+          .then(() => expect(fn).to.not.be.called)
       })
     })
 
     describe('(event): remove', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit remove event when clicked and "removable" prop is true', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            removable: true,
+            onRemove: fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .get('.q-icon.q-chip__icon--remove')
+          .click()
+          .then(() => expect(fn).to.be.calledOnce)
+      })
+
+      it('should not emit remove event when "removable" prop is false', () => {
+        const fn = cy.stub()
+
+        mountQChip({
+          props: {
+            removable: false,
+            onRemove: fn
+          }
+        })
+
+        cy.get('.q-chip')
+          .click()
+          .then(() => expect(fn).to.not.be.called)
       })
     })
   })

package/src/components/circular-progress/QCircularProgress.js

@@ -66,7 +66,7 @@ export default createComponent({
 
     const strokeWidth = computed(() => props.thickness / 2 * viewBox.value)
 
-    function getCircle ({ thickness, offset, color, cls }) {
+    function getCircle ({ thickness, offset, color, cls, rounded }) {
       return h('circle', {
         class: 'q-circular-progress__' + cls + (color !== void 0 ? ` text-${ color }` : ''),
         style: circleStyle.value,
@@ -75,6 +75,7 @@ export default createComponent({
         'stroke-width': thickness,
         'stroke-dasharray': strokeDashArray,
         'stroke-dashoffset': offset,
+        'stroke-linecap': rounded,
         cx: viewBox.value,
         cy: viewBox.value,
         r: radius
@@ -108,7 +109,8 @@ export default createComponent({
           cls: 'circle',
           thickness: strokeWidth.value,
           offset: strokeDashOffset.value,
-          color: props.color
+          color: props.color,
+          rounded: props.rounded === true ? 'round' : void 0
         })
       )
 

package/src/components/circular-progress/QCircularProgress.json

@@ -53,6 +53,13 @@
       "category": "style"
     },
 
+    "rounded": {
+      "type": "Boolean",
+      "desc": "Rounding the arc of progress",
+      "category": "style",
+      "addedIn": "v2.8.4"
+    },
+
     "thickness": {
       "type": "Number",
       "default": 0.2,

package/src/components/circular-progress/use-circular-progress.js

@@ -18,6 +18,7 @@ export const useCircularCommonProps = {
   trackColor: String,
 
   fontSize: String,
+  rounded: Boolean,
 
   // ratio
   thickness: {

package/src/components/dialog/QDialog.js

@@ -374,6 +374,7 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
+        'aria-modal': 'true',
         ...attrs,
         class: rootClasses.value
       }, [

package/src/components/expansion-item/QExpansionItem.js

@@ -37,6 +37,7 @@ export default createComponent({
 
     dense: Boolean,
 
+    toggleAriaLabel: String,
     expandIcon: String,
     expandedIcon: String,
     expandIconClass: [ Array, String, Object ],
@@ -47,6 +48,7 @@ export default createComponent({
 
     expandSeparator: Boolean,
     defaultOpened: Boolean,
+    hideExpandIcon: Boolean,
     expandIconToggle: Boolean,
     switchToggleSide: Boolean,
     denseToggle: Boolean,
@@ -73,8 +75,9 @@ export default createComponent({
     )
 
     const blurTargetRef = ref(null)
+    const targetUid = uid()
 
-    const { hide, toggle } = useModelToggle({ showing })
+    const { show, hide, toggle } = useModelToggle({ showing })
 
     let uniqueId, exitGroup
 
@@ -124,6 +127,28 @@ export default createComponent({
       props.disable !== true && (hasLink.value === true || props.expandIconToggle === true)
     )
 
+    const headerSlotScope = computed(() => ({
+      expanded: showing.value === true,
+      detailsId: props.targetUid,
+      toggle,
+      show,
+      hide
+    }))
+
+    const toggleAriaAttrs = computed(() => {
+      const toggleAriaLabel = props.toggleAriaLabel !== void 0
+        ? props.toggleAriaLabel
+        : $q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
+
+      return {
+        role: 'button',
+        'aria-expanded': showing.value === true ? 'true' : 'false',
+        'aria-owns': targetUid,
+        'aria-controls': targetUid,
+        'aria-label': toggleAriaLabel
+      }
+    })
+
     watch(() => props.group, name => {
       exitGroup !== void 0 && exitGroup()
       name !== void 0 && enterGroup()
@@ -215,6 +240,7 @@ export default createComponent({
       if (activeToggleIcon.value === true) {
         Object.assign(data, {
           tabindex: 0,
+          ...toggleAriaAttrs.value,
           onClick: toggleIcon,
           onKeyup: toggleIconKeyboard
         })
@@ -235,7 +261,7 @@ export default createComponent({
       let child
 
       if (slots.header !== void 0) {
-        child = [].concat(slots.header({ expanded: showing.value === true }))
+        child = [].concat(slots.header(headerSlotScope.value))
       }
       else {
         child = [
@@ -256,9 +282,11 @@ export default createComponent({
         )
       }
 
-      props.disable !== true && child[ props.switchToggleSide === true ? 'unshift' : 'push' ](
-        getToggleIcon()
-      )
+      if (props.disable !== true && props.hideExpandIcon !== true) {
+        child[ props.switchToggleSide === true ? 'unshift' : 'push' ](
+          getToggleIcon()
+        )
+      }
 
       return child
     }
@@ -278,9 +306,9 @@ export default createComponent({
         data.clickable = true
         data.onClick = onHeaderClick
 
-        hasLink.value === true && Object.assign(
+        Object.assign(
           data,
-          linkProps.value
+          hasLink.value === true ? linkProps.value : toggleAriaAttrs.value
         )
       }
 
@@ -292,7 +320,8 @@ export default createComponent({
         h('div', {
           key: 'e-content',
           class: 'q-expansion-item__content relative-position',
-          style: contentStyle.value
+          style: contentStyle.value,
+          id: targetUid
         }, hSlot(slots.default)),
         [ [
           vShow,