quasar 2.15.0 → 2.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.15.0",
+  "version": "2.15.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",
@@ -14,31 +14,6 @@
     "src",
     "wrappers"
   ],
-  "scripts": {
-    "clean": "node build/script.clean.js",
-    "dev": "cd ./dev && node ./script.dev.js dev && cd ..",
-    "dev:build": "cd ./dev && node ./script.build.js dev && cd ..",
-    "dev:ssr": "cd ./dev && node ./script.dev.js dev -m ssr && cd ..",
-    "dev:build:ssr": "cd ./dev && node ./script.build.js dev -m ssr && cd ..",
-    "dev:cordova:ios": "cd ./dev && node ./script.dev.js dev -m cordova -T ios && cd ..",
-    "dev:cordova:android": "cd ./dev && node ./script.dev.js dev -m cordova -T android && cd ..",
-    "dev:capacitor:ios": "cd ./dev && node ./script.dev.js dev -m capacitor -T ios && cd ..",
-    "dev:capacitor:android": "cd ./dev && node ./script.dev.js dev -m capacitor -T android && cd ..",
-    "dev:umd": "node build/script.test-umd.js",
-    "dev:quploader": "cd dev/upload-server && yarn && cd ../.. && node dev/upload-server/server.js",
-    "build": "node build/script.build.js",
-    "lint": "eslint --ext .js,.cjs,.mjs,.vue src dev --report-unused-disable-directives",
-    "lint-fix": "eslint --ext .js,.cjs,.mjs,.vue src dev --fix --report-unused-disable-directives",
-    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
-    "test:create": "node ./test/cypress/helpers/create-spec.js -c",
-    "test:build": "yarn build",
-    "test:e2e": "yarn test:build && cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress open --project ./dev --e2e\"",
-    "test:e2e:run": "cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress run --project ./dev --e2e\"",
-    "test:e2e:ci": "yarn test:build && yarn test:e2e:run",
-    "test:component": "yarn test:build && cross-env NODE_ENV=test cypress open --project ./dev --component",
-    "test:component:run": "cross-env NODE_ENV=test cypress run --project ./dev --component",
-    "test:component:ci": "yarn test:build && yarn test:component:run"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/quasarframework/quasar.git"
@@ -71,9 +46,7 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^2.0.0-beta.1",
     "@quasar/extras": "^1.16.4",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.0.0",
     "autoprefixer": "^10.4.17",
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
@@ -82,28 +55,16 @@
     "diff": "^5.2.0",
     "esbuild": "^0.20.1",
     "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-friendly-formatter": "^4.0.1",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.22.0",
-    "fast-glob": "^3.3.0",
+    "eslint-config-quasar": "^0.0.1",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
-    "module-alias": "^2.2.2",
     "open": "^10.0.4",
     "postcss-rtlcss": "^5.1.0",
     "prettier": "^3.0.0",
     "recast": "^0.23.4",
     "table": "^6.8.1",
     "typescript": "^5.3.3",
-    "vite-plugin-checker": "^0.6.4",
-    "vue": "^3.4.20",
-    "vue-router": "^4.2.1",
-    "yargs": "^17.7.2"
+    "vue": "^3.4.20"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",
@@ -124,5 +85,21 @@
     "node": ">= 10.18.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
+  },
+  "scripts": {
+    "clean": "node build/script.clean.js",
+    "build": "node build/script.build.js",
+    "dev": "cd ./playground && quasar dev && cd ..",
+    "dev:ssr": "cd ./playground && quasar dev -m ssr && cd ..",
+    "dev:build": "cd ./playground && quasar build && cd ..",
+    "dev:build:ssr": "cd ./playground && quasar build -m ssr && cd ..",
+    "dev:umd": "node build/script.test-umd.js",
+    "dev:quploader": "cd ./playground/upload-server && pnpm i && cd ../.. && node playground/upload-server/server.js",
+    "lint": "eslint --ext .js,.cjs,.mjs,.vue ./ --fix --report-unused-disable-directives",
+    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
+    "test": "pnpm --filter quasar-ui-test test",
+    "test:build": "pnpm build",
+    "test:specs": "node ./testing/specs/script.js",
+    "test:specs:create": "node ./testing/specs/script.js --interactive"
   }
-}
+}

package/src/api-file-example.json

@@ -9,24 +9,24 @@
     "width": {
       "type": [ "Number", "String" ],
       "desc": "Component width (in pixels)",
-      "examples": [ ":width=\"300\"", "400" ],
+      "examples": [ "300", "'400'" ],
       "category": "style"
     },
 
     "position": {
       "type": "String",
       "desc": "Positions component at one of the edges of the screen",
-      "examples": [ "bottom" ],
+      "examples": [ "'bottom'" ],
       "required": true,
-      "default": "top",
-      "values": [ "top", "right", "bottom", "left" ],
+      "default": "'top'",
+      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "content"
     },
 
     "font-size": {
       "type": "String",
       "desc": "The size in CSS units, including unit name, of the content (icon, text)",
-      "examples": [ "18px", "2rem" ],
+      "examples": [ "'18px'", "'2rem'" ],
       "category": "style"
     },
 

package/src/api.extends.json

@@ -16,7 +16,7 @@
       "type": "String",
       "tsType": "NamedColor",
       "desc": "Color name for component from the Quasar Color Palette",
-      "examples": [ "primary", "teal", "teal-10" ],
+      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
       "category": "style"
     },
 
@@ -24,7 +24,7 @@
       "type": "String",
       "tsType": "NamedColor",
       "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
-      "examples": [ "primary", "teal", "teal-10" ],
+      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
       "category": "style"
     },
 
@@ -37,13 +37,13 @@
     "size": {
       "type": "String",
       "desc": "Size in CSS units, including unit name",
-      "examples": [ "16px", "2rem" ],
+      "examples": [ "'16px'", "'2rem'" ],
       "category": "style"
     },
 
     "dark": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Notify the component that the background is a dark color",
       "category": "style"
     },
@@ -52,10 +52,10 @@
       "type": "String",
       "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
       "examples": [
-        "map",
-        "ion-add",
-        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:path/to/some_image.png"
+        "'map'",
+        "'ion-add'",
+        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
+        "'img:path/to/some_image.png'"
       ],
       "category": "content"
     },
@@ -87,21 +87,21 @@
     "tabindex": {
       "type": [ "Number", "String" ],
       "desc": "Tabindex HTML attribute value",
-      "examples": [ "0", "100" ],
+      "examples": [ "100", "'0'" ],
       "category": "general"
     },
 
     "transition": {
       "type": "String",
       "desc": "One of Quasar's embedded transitions",
-      "examples": [ "fade", "slide-down" ],
+      "examples": [ "'fade'", "'slide-down'" ],
       "category": "transition"
     },
 
     "animation-speed": {
       "type": [ "String", "Number" ],
       "desc": "Animation speed (in milliseconds, without unit)",
-      "examples": [ 500, "1200" ],
+      "examples": [ "500", "'1200'" ],
       "category": "style"
     },
 
@@ -121,7 +121,7 @@
     "tag": {
       "type": "String",
       "desc": "HTML tag to use",
-      "examples": [ "div", "span" ],
+      "examples": [ "'div'", "'span'" ],
       "category": "content"
     },
 
@@ -129,10 +129,10 @@
       "type": [ "Element", "String" ],
       "desc": "CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one",
       "examples": [
-        ":scroll-target=\"$refs.scrollTarget\"",
-        "scroll-target=\".scroll-target-class\"",
-        "scroll-target=\"#scroll-target-id\"",
-        "scroll-target=\"body\""
+        ".scroll-target-class",
+        "#scroll-target-id",
+        "$refs.scrollTarget",
+        "body"
       ],
       "category": "behavior"
     },
@@ -140,8 +140,8 @@
     "ripple": {
       "type": [ "Boolean", "Object" ],
       "desc": "Configure material ripple (disable it by setting it to 'false' or supply a config object)",
-      "default": true,
-      "examples": [ false, "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
+      "default": "true",
+      "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
       "category": "style"
     },
 

package/src/body.js

@@ -1,7 +1,7 @@
 import setCssVar from './utils/set-css-var.js'
 import { noop } from './utils/event.js'
 import { onKeyDownComposition } from './utils/private/key-composition.js'
-import { isRuntimeSsrPreHydration, client } from './plugins/Platform.js'
+import { isRuntimeSsrPreHydration, client } from './plugins/platform/Platform.js'
 
 function getMobilePlatform (is) {
   if (is.ios === true) return 'ios'

package/src/components/ajax-bar/QAjaxBar.json

@@ -7,14 +7,14 @@
     "position": {
       "type": "String",
       "desc": "Position within window of where QAjaxBar should be displayed",
-      "default": "top",
-      "values": [ "top", "right", "bottom", "left" ],
+      "default": "'top'",
+      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "style"
     },
 
     "size": {
       "extends": "size",
-      "default": "2px"
+      "default": "'2px'"
     },
 
     "color": {
@@ -40,7 +40,7 @@
         "url": {
           "type": "String",
           "desc": "The URL being triggered",
-          "examples": [ "https://some.url/path" ]
+          "examples": [ "'https://some.url/path'" ]
         }
       },
       "returns": {
@@ -68,7 +68,7 @@
       "params": {
         "speed": {
           "type": "Number",
-          "default": 300,
+          "default": "300",
           "desc": "Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing"
         }
       },

package/src/components/avatar/QAvatar.json

@@ -9,7 +9,7 @@
     "font-size": {
       "type": "String",
       "desc": "The size in CSS units, including unit name, of the content (icon, text)",
-      "examples": [ "18px", "2rem" ],
+      "examples": [ "'18px'", "'2rem'" ],
       "category": "style"
     },
 

package/src/components/avatar/QAvatar.test.js

@@ -0,0 +1,146 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QAvatar from './QAvatar.js'
+
+describe('[QAvatar API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)icon]', () => {
+      test('should render an icon', () => {
+        const icon = 'bug_report'
+        const wrapper = mount(QAvatar, {
+          props: {
+            icon,
+            color: 'grey'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .get('.q-icon')
+            .text()
+        ).toContain(`${ icon }`)
+      })
+    })
+
+    describe('[(prop)font-size]', () => {
+      test('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'
+        const wrapper = mount(QAvatar, {
+          props: {
+            size,
+            fontSize,
+            color: 'grey'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .$style()
+        ).toContain(`font-size: ${ size };`)
+
+        expect(
+          wrapper.get('.q-avatar__content')
+            .$style()
+        ).toContain(`font-size: ${ fontSize };`)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('should set a background color', () => {
+        const color = 'red'
+        const wrapper = mount(QAvatar, {
+          props: {
+            color
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .classes()
+        ).toContain(`bg-${ color }`)
+      })
+    })
+
+    describe('[(prop)text-color]', () => {
+      test('should set a text color', () => {
+        const textColor = 'red'
+        const wrapper = mount(QAvatar, {
+          props: {
+            textColor
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .classes()
+        ).toContain(`text-${ textColor }`)
+      })
+    })
+
+    describe('[(prop)square]', () => {
+      test('should create a square avatar', () => {
+        const wrapper = mount(QAvatar, {
+          props: {
+            square: true,
+            color: 'grey'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .classes()
+        ).toContain('q-avatar--square')
+
+        expect(
+          wrapper.get('.q-avatar')
+            .$computedStyle('border-radius')
+        ).toBe('0')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('should create a rounded avatar', () => {
+        const wrapper = mount(QAvatar, {
+          props: {
+            rounded: true,
+            color: 'grey'
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .classes()
+        ).toContain('rounded-borders')
+      })
+    })
+
+    describe.todo('(prop): size', () => {
+      test(' ', () => {
+        //
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('render the text in the default slot', () => {
+        const text = 'QQ'
+        const wrapper = mount(QAvatar, {
+          slots: {
+            // Using only a string here results in an error, this is a workaround
+            default: () => text
+          }
+        })
+
+        expect(
+          wrapper.get('.q-avatar')
+            .text()
+        ).toContain(text)
+      })
+    })
+  })
+})

package/src/components/badge/QBadge.json

@@ -33,14 +33,14 @@
     "label": {
       "type": [ "String", "Number" ],
       "desc": "Badge's content as string; overrides default slot if specified",
-      "examples": [ "John Doe", 22 ],
+      "examples": [ "'John Doe'", "22" ],
       "category": "content"
     },
 
     "align": {
       "type": "String",
       "desc": "Sets vertical-align CSS prop",
-      "values": [ "top", "middle", "bottom" ],
+      "values": [ "'top'", "'middle'", "'bottom'" ],
       "category": "content"
     },
 

package/src/components/badge/QBadge.test.js

@@ -0,0 +1,167 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QBadge from './QBadge.js'
+
+const defaultOptions = {
+  label: 'simple badge'
+}
+
+const alignValues = [ 'top', 'middle', 'bottom' ]
+
+function mountQBadge (options = {}) {
+  options.props = {
+    ...defaultOptions,
+    ...options.props
+  }
+
+  return mount(QBadge, options)
+}
+
+describe('[QBadge API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)floating]', () => {
+      test('should render a floating badge', () => {
+        const wrapper = mountQBadge({
+          props: { floating: true }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('q-badge--floating')
+      })
+    })
+
+    describe('[(prop)multi-line]', () => {
+      test('should render a content with multiple lines', () => {
+        const wrapper = mountQBadge({
+          props: { multiLine: true }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('q-badge--multi-line')
+      })
+    })
+
+    describe('[(prop)label]', () => {
+      test('should render a label inside the badge', () => {
+        const label = 'Badge label'
+        const wrapper = mountQBadge({
+          props: { label }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .text()
+        ).toContain(label)
+      })
+    })
+
+    describe('[(prop)align]', () => {
+      test(`should render a badge aligned based on defined values: ${ alignValues.join(', ') }`, () => {
+        // loop over alignValues
+        for (const align of alignValues) {
+          const wrapper = mountQBadge({
+            props: { align }
+          })
+
+          expect(
+            wrapper.get('.q-badge')
+              .$style('vertical-align')
+          ).toBe(align)
+        }
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('should change color based on Quasar Color Palette', () => {
+        const wrapper = mountQBadge({
+          props: { color: 'red' }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('bg-red')
+      })
+    })
+
+    describe('[(prop)text-color]', () => {
+      test('should change text color based on Quasar Color Palette', () => {
+        const wrapper = mountQBadge({
+          props: { textColor: 'red' }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('text-red')
+      })
+    })
+
+    describe('[(prop)transparent]', () => {
+      test('should have opacity style when "transparent" prop is true', () => {
+        const wrapper = mountQBadge({
+          props: { transparent: true }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('q-badge--transparent')
+      })
+    })
+
+    describe('[(prop)outline]', () => {
+      test('should have a outline style when "outline" prop is true', () => {
+        const wrapper = mountQBadge({
+          props: { outline: true }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('q-badge--outline')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('should have a rounded style when "rounded" prop is true', () => {
+        const wrapper = mountQBadge({
+          props: { rounded: true }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .classes()
+        ).toContain('q-badge--rounded')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('should display the default slot content', () => {
+        const label = 'Badge label'
+
+        const wrapper = mountQBadge({
+          props: {
+            label: undefined
+          },
+
+          slots: {
+            default: label
+          }
+        })
+
+        expect(
+          wrapper.get('.q-badge')
+            .text()
+        ).toBe(label)
+      })
+    })
+  })
+})