quasar 2.4.13 → 2.5.0

package/src/components/avatar/__tests__/QAvatar.spec.js

@@ -0,0 +1,121 @@
+import { mount } from '@cypress/vue'
+import QAvatar from '../QAvatar'
+
+describe('Avatar API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): icon', () => {
+        it('should render an icon', () => {
+          const icon = 'bug_report'
+          mount(QAvatar, {
+            props: {
+              icon,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .get('.q-icon')
+            .should('have.text', `${ icon }`)
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): font-size', () => {
+        it('should set the font-size', () => {
+          const size = '40px'
+          // Doing em/rem units here does not work
+          // Cypress looks at actual computed values in the browser
+          const fontSize = '32px'
+          mount(QAvatar, {
+            props: {
+              size,
+              fontSize,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', size)
+            .get('.q-avatar__content')
+            .should('have.css', 'font-size', fontSize)
+        })
+      })
+
+      describe('(prop): color', () => {
+        it('should set a background color', () => {
+          const color = 'red'
+          mount(QAvatar, {
+            props: {
+              color
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', `bg-${ color }`)
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it('should set a text color', () => {
+          const textColor = 'red'
+          mount(QAvatar, {
+            props: {
+              textColor
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', `text-${ textColor }`)
+        })
+      })
+
+      describe('(prop): square', () => {
+        it('should create a square avatar', () => {
+          mount(QAvatar, {
+            props: {
+              square: true,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', 'q-avatar--square')
+            .should('have.css', 'border-radius', '0px')
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it('should create a rounded avatar', () => {
+          mount(QAvatar, {
+            props: {
+              rounded: true,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.class', 'rounded-borders')
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it('render the text in the default slot', () => {
+        const text = 'QQ'
+        mount(QAvatar, {
+          slots: {
+            // Using only a string here results in an error, this is a workaround
+            default: () => text
+          }
+        })
+
+        cy.get('.q-avatar')
+          .should('have.text', text)
+      })
+    })
+  })
+})

package/src/components/badge/__tests__/QBadge.spec.js

@@ -0,0 +1,74 @@
+// import { mount } from '@cypress/vue'
+// import QBadge from '../QBadge'
+
+// const snapshotOptions = { customSnapshotsDir: '../src/components/badge/__tests__' }
+
+describe('Badge API', () => {
+  describe('Props', () => {
+    describe('Category: content', () => {
+      describe('(prop): floating', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): multi-line', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): align', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): transparent', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -47,7 +47,7 @@ export default createComponent({
         hSlot(slots.default)
       )
 
-      if (vnodes === void 0) { return }
+      if (vnodes.length === 0) { return }
 
       let els = 1
 

package/src/components/btn/__tests__/QBtn.spec.js

@@ -0,0 +1,55 @@
+describe('Btn API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dark-percentage', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): round', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Slots', () => {
+    describe('(slot): default', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(slot): loading', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): click', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/components/btn/__tests__/use-btn.spec.js

@@ -0,0 +1,189 @@
+describe('use-btn API', () => {
+  describe('Props', () => {
+    describe('Category: behavior|state', () => {
+      describe('(prop): loading', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): label', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): icon-right', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-caps', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): no-wrap', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): align', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): stack', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): stretch', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: general', () => {
+      describe('(prop): type', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): tabindex', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: navigation', () => {
+      describe('(prop): to', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): replace', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): href', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): target', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: style', () => {
+      describe('(prop): outline', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): flat', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): unelevated', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rounded', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): push', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): glossy', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fab', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): fab-mini', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): padding', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): text-color', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): dense', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): ripple', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+})

package/src/components/checkbox/QCheckbox.js

@@ -1,9 +1,12 @@
-import { h } from 'vue'
+import { h, computed } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
 const bgNode = h('div', {
+  key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
   h('svg', {
@@ -30,7 +33,35 @@ export default createComponent({
   props: useCheckboxProps,
   emits: useCheckboxEmits,
 
-  setup () {
-    return useCheckbox('checkbox', () => () => [ bgNode ])
+  setup (props) {
+    function getInner (isTrue, isIndeterminate) {
+      const icon = computed(() =>
+        (isTrue.value === true
+          ? props.checkedIcon
+          : (isIndeterminate.value === true
+              ? props.indeterminateIcon
+              : props.uncheckedIcon
+            )
+        ) || null
+      )
+
+      return () => (
+        icon.value !== null
+          ? [
+              h('div', {
+                key: 'icon',
+                class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
+              }, [
+                h(QIcon, {
+                  class: 'q-checkbox__icon',
+                  name: icon.value
+                })
+              ])
+            ]
+          : [ bgNode ]
+      )
+    }
+
+    return useCheckbox('checkbox', getInner)
   }
 })

package/src/components/checkbox/QCheckbox.json

@@ -3,5 +3,22 @@
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/checkbox"
+  },
+
+  "props": {
+    "checked-icon": {
+      "desc": "The icon to be used when the model is truthy (instead of the default design)",
+      "addedIn": "v2.5"
+    },
+
+    "unchecked-icon": {
+      "desc": "The icon to be used when the toggle is falsy (instead of the default design)",
+      "addedIn": "v2.5"
+    },
+
+    "indeterminate-icon": {
+      "desc": "The icon to be used when the model is indeterminate (instead of the default design)",
+      "addedIn": "v2.5"
+    }
   }
 }

package/src/components/checkbox/QCheckbox.sass

@@ -3,19 +3,27 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-checkbox
   vertical-align: middle
 
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
+    user-select: none
+
+  &__bg
     border: 2px solid currentColor
     border-radius: 2px
     transition: background $checkbox-transition
     -webkit-print-color-adjust: exact
 
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
 
   &__svg
     color: #fff
@@ -68,12 +76,16 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
+    .q-checkbox__icon
+      font-size: .6em
+
     .q-checkbox__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-checkbox__bg
+    .q-checkbox__bg,
+    .q-checkbox__icon-container
       left: 5%
       top: 5%
       width: 90%

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

@@ -24,6 +24,10 @@ export const useCheckboxProps = {
   falseValue: { default: false },
   indeterminateValue: { default: null },
 
+  checkedIcon: String,
+  uncheckedIcon: String,
+  indeterminateIcon: String,
+
   toggleOrder: {
     type: String,
     validator: v => v === 'tf' || v === 'ft'

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

@@ -66,6 +66,24 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "examples": [ "visibility" ],
+      "category": "icons"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "examples": [ "visibility_off" ],
+      "category": "icons"
+    },
+
+    "indeterminate-icon": {
+      "type": "String",
+      "examples": [ "help" ],
+      "category": "icons"
+    },
+
     "color": {
       "extends": "color"
     },