quasar 2.15.1 → 2.15.3

package/lang/uk.js

@@ -68,7 +68,7 @@ module.exports = {
     right: 'Вирівнювання по правому краю',
     justify: 'Вирівнювання по ширині',
     print: 'Друк',
-    outdent: 'Зменшити відтуп',
+    outdent: 'Зменшити відступ',
     indent: 'Збільшити відступ',
     removeFormat: 'Видалити форматування',
     formatting: 'Форматування',

package/lang/uk.mjs

@@ -63,7 +63,7 @@ export default {
     right: 'Вирівнювання по правому краю',
     justify: 'Вирівнювання по ширині',
     print: 'Друк',
-    outdent: 'Зменшити відтуп',
+    outdent: 'Зменшити відступ',
     indent: 'Збільшити відступ',
     removeFormat: 'Видалити форматування',
     formatting: 'Форматування',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.15.1",
+  "version": "2.15.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",
@@ -46,31 +46,25 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^2.0.0-beta.5",
-    "@quasar/extras": "^1.16.4",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.0.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.5",
-    "cypress": "^13.6.6",
+    "cssnano": "^6.1.2",
+    "cypress": "^13.7.3",
     "diff": "^5.2.0",
-    "esbuild": "^0.20.1",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-no-only-tests": "^3.1.0",
-    "fast-glob": "^3.3.0",
+    "esbuild": "^0.20.2",
+    "eslint": "^9.0.0",
+    "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",
-    "vue": "^3.4.20",
-    "vue-router": "^4.2.1",
-    "yargs": "^17.7.2",
-    "eslint-config-quasar": "0.0.1"
+    "open": "^10.1.0",
+    "postcss-rtlcss": "^5.1.2",
+    "prettier": "^3.2.5",
+    "recast": "^0.23.6",
+    "table": "^6.8.2",
+    "typescript": "^5.4.5",
+    "vue": "^3",
+    "eslint-config-quasar": "0.0.1",
+    "@quasar/extras": "1.16.11"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",
@@ -94,27 +88,19 @@
   },
   "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 && pnpm i && 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": "pnpm lint --fix",
+    "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:create": "node ./test/cypress/helpers/create-spec.js -c",
-    "test:build": "pnpm build",
-    "test:e2e": "pnpm 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": "pnpm test:build && pnpm test:e2e:run",
-    "test:component": "pnpm 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": "pnpm test:build && pnpm test:component:run"
+    "test": "pnpm --filter quasar-ui-test test",
+    "test:watch": "pnpm --filter quasar-ui-test test:watch",
+    "test:watch:ui": "pnpm --filter quasar-ui-test test:watch:ui",
+    "test:specs": "node ./testing/specs/script.js",
+    "test:specs:ci": "node ./testing/specs/script.js --ci"
   }
 }

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,6 @@
     "tag": {
       "type": "String",
       "desc": "HTML tag to use",
-      "examples": [ "div", "span" ],
       "category": "content"
     },
 
@@ -129,10 +128,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",
+        "document.body"
       ],
       "category": "behavior"
     },
@@ -140,8 +139,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"
     },
 
@@ -236,7 +235,8 @@
           "extends": "evt",
           "required": false
         }
-      }
+      },
+      "returns": null
     },
 
     "hide": {
@@ -246,17 +246,19 @@
           "extends": "evt",
           "required": false
         }
-      }
+      },
+      "returns": null
     },
 
     "toggle": {
+      "desc": "Triggers component to toggle between show/hide",
       "params": {
         "evt": {
           "extends": "evt",
           "required": false
         }
       },
-      "desc": "Triggers component to toggle between show/hide"
+      "returns": null
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { h, ref, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { between } from '../../utils/format.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { between } from '../../utils/format/format.js'
 
 const
   xhr = __QUASAR_SSR_SERVER__ ? null : XMLHttpRequest,

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"
         }
       },
@@ -94,6 +94,7 @@
 
     "stop": {
       "desc": "Notify bar that one process you were waiting has finished",
+      "params": null,
       "returns": {
         "type": "Number",
         "desc": "Number of active simultaneous sessions"

package/src/components/avatar/QAvatar.js

@@ -2,10 +2,10 @@ import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
+import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hMergeSlotSafely } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hMergeSlotSafely } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QAvatar',

package/src/components/avatar/QAvatar.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-size" ],
+  "mixins": [ "composables/private.use-size/use-size" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/avatar"
@@ -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,232 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QAvatar from './QAvatar.js'
+import { useSizeDefaults } from 'quasar/src/composables/private.use-size/use-size.js'
+
+describe('[QAvatar API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.size).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const wrapper = mount(QAvatar)
+        const target = wrapper.get('.q-avatar')
+
+        expect(
+          target.$style('font-size')
+        ).toBe('')
+
+        await wrapper.setProps({ size: '100px' })
+        await flushPromises()
+
+        expect(
+          target.$style('font-size')
+        ).toContain('100px')
+
+        await wrapper.setProps({ size: 'sm' })
+        await flushPromises()
+
+        expect(
+          target.$style('font-size')
+        ).toBe(`${ useSizeDefaults.sm }px`)
+      })
+    })
+
+    describe('[(prop)font-size]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.fontSize).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const size = '200px'
+        const fontSize = '100px'
+
+        const wrapper = mount(QAvatar)
+
+        expect(
+          wrapper.get('.q-avatar')
+            .$style('font-size')
+        ).not.toBe(size)
+
+        expect(
+          wrapper.get('.q-avatar__content')
+            .$style('font-size')
+        ).not.toBe(fontSize)
+
+        await wrapper.setProps({
+          size,
+          fontSize
+        })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-avatar')
+            .$style('font-size')
+        ).toBe(size)
+
+        expect(
+          wrapper.get('.q-avatar__content')
+            .$style('font-size')
+        ).toBe(fontSize)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.color).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QAvatar)
+        const target = wrapper.get('.q-avatar')
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+      })
+    })
+
+    describe('[(prop)text-color]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.textColor).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QAvatar)
+        const target = wrapper.get('.q-avatar')
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`text-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+      })
+    })
+
+    describe('[(prop)icon]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.icon).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'map'
+        const wrapper = mount(QAvatar)
+
+        expect(
+          wrapper.get('.q-avatar')
+            .find('.q-icon')
+            .exists()
+        ).toBe(false)
+
+        await wrapper.setProps({ icon: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-avatar')
+            .get('.q-icon')
+            .text()
+        ).toContain(`${ propVal }`)
+      })
+    })
+
+    describe('[(prop)square]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.square).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QAvatar)
+        const target = wrapper.get('.q-avatar')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-avatar--square')
+
+        await wrapper.setProps({ square: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-avatar--square')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).not.toBe('0px')
+      })
+    })
+
+    describe('[(prop)rounded]', () => {
+      test('is defined correctly', () => {
+        expect(QAvatar.props.rounded).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QAvatar)
+        const target = wrapper.get('.q-avatar')
+
+        expect(
+          target.classes()
+        ).not.toContain('rounded-borders')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('4px')
+
+        expect(
+          target.classes()
+        ).toContain('rounded-borders')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QAvatar, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/badge/QBadge.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hMergeSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
 
 const alignValues = [ 'top', 'middle', 'bottom' ]
 

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