quasar 2.4.12 → 2.5.2

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.4.12",
+  "version": "2.5.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -944,7 +944,7 @@
               "name": "content-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the menu\n\nExamples:\nbackground-color: #ff0000\n:content-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
@@ -953,7 +953,7 @@
               "name": "content-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the menu\n\nExamples:\nmy-special-class\n:content-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
@@ -2728,6 +2728,33 @@
               "doc-url": "https://v2.quasar.dev/vue-components/checkbox",
               "type": "boolean"
             },
+            {
+              "name": "checked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the model is truthy (instead of the default design)\n\nExamples:\nvisibility",
+              "doc-url": "https://v2.quasar.dev/vue-components/checkbox"
+            },
+            {
+              "name": "unchecked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the toggle is falsy (instead of the default design)\n\nExamples:\nvisibility_off",
+              "doc-url": "https://v2.quasar.dev/vue-components/checkbox"
+            },
+            {
+              "name": "indeterminate-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the model is indeterminate (instead of the default design)\n\nExamples:\nhelp",
+              "doc-url": "https://v2.quasar.dev/vue-components/checkbox"
+            },
             {
               "name": "color",
               "value": {
@@ -4637,7 +4664,7 @@
               "name": "content-class",
               "value": {
                 "kind": "expression",
-                "type": "object|any[]|string"
+                "type": "string|any[]|object"
               },
               "description": "CSS classes for the input area\n\nExamples:\nmy-special-class\n:content-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/editor"
@@ -4794,7 +4821,7 @@
               "name": "expand-icon-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Apply custom class(es) to the expand icon item section\n\nExamples:\ntext-purple",
               "doc-url": "https://v2.quasar.dev/vue-components/expansion-item"
@@ -4956,7 +4983,7 @@
               "name": "header-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Apply custom style to the header\n\nExamples:\nbackground: '#ff0000'\n:header-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/expansion-item"
@@ -4965,7 +4992,7 @@
               "name": "header-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Apply custom class(es) to the header\n\nExamples:\nmy-custom-class\n:header-class=\"{ 'my-custom-class': someCondition }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/expansion-item"
@@ -5199,7 +5226,7 @@
               "name": "label-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the label container\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/floating-action-button"
@@ -5208,7 +5235,7 @@
               "name": "label-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the label container\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/floating-action-button"
@@ -5544,7 +5571,7 @@
               "name": "label-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the label container\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/floating-action-button"
@@ -5553,7 +5580,7 @@
               "name": "label-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the label container\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/floating-action-button"
@@ -6628,7 +6655,7 @@
               "name": "input-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the underlying selection container\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/file"
@@ -6637,7 +6664,7 @@
               "name": "input-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the underlying selection container\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/file"
@@ -7112,7 +7139,7 @@
               "name": "ratio",
               "value": {
                 "kind": "expression",
-                "type": "string|number|string|number"
+                "type": "string|number"
               },
               "description": "Force the component to maintain an aspect ratio\n\nExamples:\n:ratio=\"4/3\"\n:ratio=\"16/9\"\nratio=\"1\"\n(Number format) :ratio=\"16/9\"\n(String format) ratio=\"1\"",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
@@ -7562,7 +7589,7 @@
               "name": "label-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Apply custom style to the label; Works along the 'label' prop only\n\nExamples:\nfont-size: 28px\n:label-style=\"{ color: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/inner-loading"
@@ -8040,7 +8067,7 @@
               "name": "input-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the underlying input tag\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/input"
@@ -8049,7 +8076,7 @@
               "name": "input-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the underlying input tag\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/input"
@@ -9980,7 +10007,7 @@
               "name": "input-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the input (if using one)\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination"
@@ -9989,7 +10016,7 @@
               "name": "input-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the input (if using one)\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/pagination"
@@ -10887,6 +10914,24 @@
               "doc-url": "https://v2.quasar.dev/vue-components/radio",
               "type": "boolean"
             },
+            {
+              "name": "checked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when selected (instead of the default design)\n\nExamples:\nvisibility",
+              "doc-url": "https://v2.quasar.dev/vue-components/radio"
+            },
+            {
+              "name": "unchecked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when un-selected (instead of the default design)\n\nExamples:\nvisibility_off",
+              "doc-url": "https://v2.quasar.dev/vue-components/radio"
+            },
             {
               "name": "color",
               "value": {
@@ -11715,7 +11760,7 @@
               "name": "bar-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)\n\nExamples:\n:bar-style=\"{ borderRadius: '5px', background: 'red', opacity: 1 }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
@@ -11724,7 +11769,7 @@
               "name": "vertical-bar-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of 'bar-style' prop\n\nExamples:\n:bar-style=\"{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
@@ -11733,7 +11778,7 @@
               "name": "horizontal-bar-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of 'bar-style' prop\n\nExamples:\n:bar-style=\"{ bottom: '4px', borderRadius: '5px', background: 'red', height: '10px', opacity: 1 }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
@@ -11769,7 +11814,7 @@
               "name": "content-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Object with CSS properties and values for styling the container of QScrollArea\n\nExamples:\n:content-style=\"{ backgroundColor: '#C0C0C0' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
@@ -11778,7 +11823,7 @@
               "name": "content-active-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)\n\nExamples:\n:content-active-style=\"{ backgroundColor: 'white' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/scroll-area"
@@ -12541,7 +12586,7 @@
               "name": "popup-content-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the popup content\n\nExamples:\nbackground-color: #ff0000\n:popup-content-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/select"
@@ -12619,7 +12664,7 @@
               "name": "input-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the underlying input tag\n\nExamples:\nmy-special-class\n:input-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/select"
@@ -12628,7 +12673,7 @@
               "name": "input-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the underlying input tag\n\nExamples:\nbackground-color: #ff0000\n:input-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/select"
@@ -14527,7 +14572,7 @@
               "name": "before-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the 'before' panel\n\nExamples:\nbg-deep-orange\n:before-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/splitter"
@@ -14536,7 +14581,7 @@
               "name": "after-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the 'after' panel\n\nExamples:\nbg-deep-orange\n:after-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/splitter"
@@ -14545,7 +14590,7 @@
               "name": "separator-class",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Class definitions to be attributed to the splitter separator\n\nExamples:\nbg-deep-orange\n:separator-class=\"{ 'my-special-class': <condition> }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/splitter"
@@ -14554,7 +14599,7 @@
               "name": "separator-style",
               "value": {
                 "kind": "expression",
-                "type": "any[]|string|object"
+                "type": "string|any[]|object"
               },
               "description": "Style definitions to be attributed to the splitter separator\n\nExamples:\nbackground-color: #ff0000\n:separator-style=\"{ backgroundColor: '#ff0000' }\"",
               "doc-url": "https://v2.quasar.dev/vue-components/splitter"
@@ -17394,6 +17439,33 @@
               "doc-url": "https://v2.quasar.dev/vue-components/toggle",
               "type": "boolean"
             },
+            {
+              "name": "checked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the toggle is on\n\nExamples:\nvisibility",
+              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
+            },
+            {
+              "name": "unchecked-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the toggle is off\n\nExamples:\nvisibility_off",
+              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
+            },
+            {
+              "name": "indeterminate-icon",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "description": "The icon to be used when the model is indeterminate\n\nExamples:\nhelp",
+              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
+            },
             {
               "name": "color",
               "value": {
@@ -17461,33 +17533,6 @@
               "description": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix\n\nExamples:\nmap\nion-add\nimg:https://cdn.quasar.dev/logo-v2/svg/logo.svg\nimg:path/to/some_image.png",
               "doc-url": "https://v2.quasar.dev/vue-components/toggle"
             },
-            {
-              "name": "checked-icon",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "The icon to be used when the toggle is on\n\nExamples:\nvisibility",
-              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
-            },
-            {
-              "name": "unchecked-icon",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "The icon to be used when the toggle is off\n\nExamples:\nvisibility_off",
-              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
-            },
-            {
-              "name": "indeterminate-icon",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "description": "The icon to be used when the model is indeterminate\n\nExamples:\nhelp",
-              "doc-url": "https://v2.quasar.dev/vue-components/toggle"
-            },
             {
               "name": "icon-color",
               "value": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.4.12",
+  "version": "2.5.2",
   "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