quasar 2.16.9 → 2.16.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.16.9",
+  "version": "2.16.10",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "type": "module",
   "module": "dist/quasar.client.js",

package/src/components/item/QList.js

@@ -4,6 +4,8 @@ import { createComponent } from '../../utils/private.create/create.js'
 import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
+const roleAttrExceptions = [ 'ul', 'ol' ]
+
 export default createComponent({
   name: 'QList',
 
@@ -25,6 +27,10 @@ export default createComponent({
     const vm = getCurrentInstance()
     const isDark = useDark(props, vm.proxy.$q)
 
+    const role = computed(() => (
+      roleAttrExceptions.includes(props.tag) ? null : 'list')
+    )
+
     const classes = computed(() =>
       'q-list'
       + (props.bordered === true ? ' q-list--bordered' : '')
@@ -34,6 +40,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h(props.tag, { class: classes.value }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value, role: role.value }, hSlot(slots.default))
   }
 })

package/src/components/item/QList.test.js

@@ -0,0 +1,170 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QList from './QList.js'
+
+describe('[QList API]', () => {
+  describe('[Props]', () => {
+    describe('[default attributes]', () => {
+      test('has a role="list" attribute with a div', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.element.getAttribute('role')).toBe('list')
+      })
+
+      test('does not have a role="list" attribute with a ol', async () => {
+        const wrapper = mount(QList, { props: { tag: 'ol' } })
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.element.getAttribute('role')).toBe(null)
+      })
+
+      test('does not have a role="list" attribute with a ul', async () => {
+        const wrapper = mount(QList, { props: { tag: 'ul' } })
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.element.getAttribute('role')).toBe(null)
+      })
+    })
+
+    describe('[(prop)bordered]', () => {
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.classes()).not.toContain('q-list--bordered')
+
+        await wrapper.setProps({ bordered: true })
+        await flushPromises()
+
+        expect(target.classes()).toContain('q-list--bordered')
+      })
+    })
+
+    describe('[(prop)dense]', () => {
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.classes()).not.toContain('q-list--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(target.classes()).toContain('q-list--dense')
+      })
+    })
+
+    describe('[(prop)separator]', () => {
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.classes()).not.toContain('q-list--separator')
+
+        await wrapper.setProps({ separator: true })
+        await flushPromises()
+
+        expect(target.classes()).toContain('q-list--separator')
+      })
+    })
+
+    describe('[(prop)dark]', () => {
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QList)
+        await wrapper.setProps({ dark: false })
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.classes()).not.toContain('q-list--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(target.classes()).toContain('q-list--dark')
+
+        await wrapper.setProps({ dark: false })
+        await wrapper.vm.$q.dark.set(true)
+        await flushPromises()
+
+        expect(target.classes()).not.toContain('q-list--dark')
+      })
+
+      test('type null has effect', async () => {
+        const wrapper = mount(QList)
+        await wrapper.vm.$q.dark.set(false)
+
+        const target = wrapper.get('.q-list')
+        expect(target.classes()).not.toContain('q-list--dark')
+
+        await wrapper.setProps({ dark: null })
+        await flushPromises()
+
+        expect(target.classes()).not.toContain('q-list--dark')
+
+        await wrapper.vm.$q.dark.set(true)
+
+        expect(target.classes()).toContain('q-list--dark')
+      })
+    })
+
+    describe('[(prop)padding]', () => {
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(target.classes()).not.toContain('q-list--padding')
+
+        await wrapper.setProps({ padding: true })
+        await flushPromises()
+
+        expect(target.classes()).toContain('q-list--padding')
+      })
+    })
+
+    describe('[(prop)tag]', () => {
+      test('type String has effect', async () => {
+        const wrapper = mount(QList, { props: { tag: 'ol' } })
+
+        const target = wrapper.get('.q-list')
+
+        expect(
+          target.element.tagName.toLowerCase()
+        ).toBe('ol')
+      })
+
+      test('default tag is div', async () => {
+        const wrapper = mount(QList)
+
+        const target = wrapper.get('.q-list')
+
+        expect(
+          target.element.tagName.toLowerCase()
+        ).toBe('div')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QList, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/table/QTable.json

@@ -48,7 +48,7 @@
     "virtual-scroll-slice-size": {
       "type": [ "Number", "String", "null" ],
       "desc": "Minimum number of rows to render in the virtual list",
-      "default": "30",
+      "default": "10",
       "passthrough": "child",
       "category": "virtual-scroll"
     },

package/src/composables/private.use-key-composition/use-key-composition.js

@@ -1,10 +1,3 @@
-import { client } from '../../plugins/platform/Platform.js'
-
-const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/
-const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u
-const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/
-const isPlainText = /[a-z0-9_ -]$/i
-
 export default function (onInput) {
   return function onComposition (e) {
     if (e.type === 'compositionend' || e.type === 'change') {
@@ -12,18 +5,8 @@ export default function (onInput) {
       e.target.qComposing = false
       onInput(e)
     }
-    else if (
-      e.type === 'compositionupdate'
-      && e.target.qComposing !== true
-      && typeof e.data === 'string'
-    ) {
-      const isComposing = client.is.firefox === true
-        ? isPlainText.test(e.data) === false
-        : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true
-
-      if (isComposing === true) {
-        e.target.qComposing = true
-      }
+    else if (e.type === 'compositionstart') {
+      e.target.qComposing = true
     }
   }
 }

package/src/plugins/dialog/Dialog.json

@@ -277,7 +277,7 @@
 
             "componentProps": {
               "type": "Object",
-              "desc": "User defined props which will be forwarded to underlying custom component if 'component' prop is used"
+              "desc": "User defined props which will be forwarded to underlying custom component if 'component' prop is used; May also include any built-in QDialog option such as 'persistent' or 'seamless'"
             }
           }
         }

package/src/utils/private.dialog/create-dialog.json

@@ -118,7 +118,7 @@
               "opts": {
                 "type": "Object",
                 "required": true,
-                "desc": "Props (except 'component') which will overwrite the initial create() params; If create() was invoked with a custom dialog component then this param should contain the new componentProps"
+                "desc": "If using with 'component' prop then the props to update the current 'componentProps' (will be shallowly merged on top of the previous 'componentProps'); Otherwise the props to be shallowly merged with the previous create() param Object"
               }
             },
             "returns": {