quasar 2.15.2 → 2.15.4

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.2",
+  "version": "2.15.4",
   "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,25 +46,25 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/extras": "^1.16.4",
-    "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": "^8.57.0",
-    "eslint-config-quasar": "^0.0.1",
+    "esbuild": "^0.20.2",
+    "eslint": "^9.0.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
-    "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"
+    "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",
+    "@quasar/extras": "1.16.11",
+    "eslint-config-quasar": "0.0.1"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",
@@ -98,8 +98,9 @@
     "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: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:create": "node ./testing/specs/script.js --interactive"
+    "test:specs:ci": "node ./testing/specs/script.js --ci"
   }
 }

package/src/api.extends.json

@@ -121,7 +121,6 @@
     "tag": {
       "type": "String",
       "desc": "HTML tag to use",
-      "examples": [ "'div'", "'span'" ],
       "category": "content"
     },
 
@@ -132,7 +131,7 @@
         ".scroll-target-class",
         "#scroll-target-id",
         "$refs.scrollTarget",
-        "body"
+        "document.body"
       ],
       "category": "behavior"
     },
@@ -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

@@ -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"

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

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