quasar 2.8.3 → 2.9.0

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

@@ -94,7 +94,7 @@ export default createComponent({
     )
 
     const { preventBodyScroll } = usePreventScroll()
-    const { registerTimeout, removeTimeout } = useTimeout()
+    const { registerTimeout } = useTimeout()
     const { registerTick, removeTick } = useTick()
 
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
@@ -179,8 +179,6 @@ export default createComponent({
     })
 
     function handleShow (evt) {
-      removeTimeout()
-      removeTick()
       addToHistory()
 
       refocusTarget = props.noRefocus === false && document.activeElement !== null
@@ -195,7 +193,11 @@ export default createComponent({
         document.activeElement !== null && document.activeElement.blur()
         registerTick(focus)
       }
+      else {
+        removeTick()
+      }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         if (vm.proxy.$q.platform.is.ios === true) {
           if (props.seamless !== true && document.activeElement) {
@@ -231,7 +233,6 @@ export default createComponent({
     }
 
     function handleHide (evt) {
-      removeTimeout()
       removeTick()
       removeFromHistory()
       cleanup(true)
@@ -243,6 +244,7 @@ export default createComponent({
         refocusTarget = null
       }
 
+      // should removeTimeout() if this gets removed
       registerTimeout(() => {
         hidePortal(true) // done hiding, now destroy
         animating.value = false
@@ -374,6 +376,7 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
+        'aria-modal': 'true',
         ...attrs,
         class: rootClasses.value
       }, [

package/src/components/drawer/QDrawer.js

@@ -75,7 +75,7 @@ export default createComponent({
 
     const isDark = useDark(props, $q)
     const { preventBodyScroll } = usePreventScroll()
-    const { registerTimeout } = useTimeout()
+    const { registerTimeout, removeTimeout } = useTimeout()
 
     const $layout = inject(layoutKey, () => {
       console.error('QDrawer needs to be child of QLayout')
@@ -145,9 +145,12 @@ export default createComponent({
 
       cleanup()
 
-      noEvent !== true && registerTimeout(() => {
-        emit('hide', evt)
-      }, duration)
+      if (noEvent !== true) {
+        registerTimeout(() => { emit('hide', evt) }, duration)
+      }
+      else {
+        removeTimeout()
+      }
     }
 
     const { show, hide } = useModelToggle({

package/src/components/editor/QEditor.json

@@ -312,5 +312,14 @@
         "__exemption": [ "examples" ]
       }
     }
+  },
+
+  "computedProps": {
+    "caret": {
+      "type": "Object",
+      "tsType": "QEditorCaret",
+      "desc": "The current caret state",
+      "__exemption": [ "examples" ]
+    }
   }
 }