quasar 2.4.13 → 2.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.13",
+  "version": "2.5.3",
   "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",
@@ -27,7 +27,10 @@
     "build": "node build/script.build.js",
     "test": "yarn lint && yarn build",
     "lint": "eslint --ext .js,.vue src dev",
-    "lint-fix": "eslint --ext .js,.vue src dev --fix"
+    "lint-fix": "eslint --ext .js,.vue src dev --fix",
+    "test:unit": "cd ./dev && cypress open-ct && cd ..",
+    "test:unit:ci": "cd ./dev && cypress run-ct && cd ..",
+    "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {
     "type": "git",
@@ -64,6 +67,7 @@
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
     "@quasar/extras": "^1.12.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
@@ -72,7 +76,9 @@
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-vue": "^7.0.0",
@@ -81,13 +87,17 @@
     "json-beautify": "^1.1.1",
     "module-alias": "^2.2.2",
     "prettier": "^2.4.1",
+    "quasar": "^2.1.9",
     "recast": "^0.18.5",
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "table": "^6.0.4",
     "tslib": "^2.0.3",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
+    "yargs": "^17.3.0"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",

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"
     },