quasar 2.16.9 → 2.16.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.16.9",
+  "version": "2.16.11",
   "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/checkbox/QCheckbox.js

@@ -5,7 +5,7 @@ import QIcon from '../icon/QIcon.js'
 import { createComponent } from '../../utils/private.create/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
-const bgNode = h('div', {
+const createBgNode = () => h('div', {
   key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
@@ -33,6 +33,8 @@ export default createComponent({
   emits: useCheckboxEmits,
 
   setup (props) {
+    const bgNode = createBgNode()
+
     function getInner (isTrue, isIndeterminate) {
       const icon = computed(() =>
         (isTrue.value === true

package/src/components/icon/QIcon.js

@@ -42,7 +42,7 @@ const mRE = /^[Mm]\s?[-+]?\.?\d/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faRE = /^(fa-(sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
+const faRE = /^(fa-(classic|sharp|solid|regular|light|brands|duotone|thin)|[lf]a[srlbdk]?) /
 
 export default createComponent({
   name: 'QIcon',

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/radio/QRadio.js

@@ -12,7 +12,7 @@ import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 
-const svg = h('svg', {
+const createSvg = () => h('svg', {
   key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
   viewBox: '0 0 24 24'
@@ -138,6 +138,8 @@ export default createComponent({
     // expose public methods
     Object.assign(proxy, { set: onClick })
 
+    const svg = createSvg()
+
     return () => {
       const content = icon.value !== null
         ? [

package/src/components/space/QSpace.js

@@ -2,12 +2,11 @@ import { h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const space = h('div', { class: 'q-space' })
-
 export default createComponent({
   name: 'QSpace',
 
   setup () {
+    const space = h('div', { class: 'q-space' })
     return () => space
   }
 })

package/src/components/spinner/QSpinnerAudio.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'matrix(1 0 0 -1 0 80)'
   }, [
@@ -77,6 +77,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerBall.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(1 1)',
     'stroke-width': '2',
@@ -93,6 +93,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerBars.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     y: '10',
     width: '15',
@@ -132,6 +132,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerBox.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '25',
     y: '25',
@@ -50,6 +50,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerClock.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '50',
     cy: '50',
@@ -61,6 +61,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerComment.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '0',
     y: '0',
@@ -73,6 +73,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerCube.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('rect', {
     x: '0',
     y: '0',
@@ -121,6 +121,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerDots.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '15',
     cy: '15',
@@ -93,6 +93,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerFacebook.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(20 50)'
   }, [
@@ -92,6 +92,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerGears.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(-20,-20)'
   }, [
@@ -48,6 +48,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerGrid.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '12.5',
     cy: '12.5',
@@ -141,6 +141,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerHearts.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z',
     'fill-opacity': '.5'
@@ -43,6 +43,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerHourglass.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', [
     h('path', {
       fill: 'none',
@@ -101,6 +101,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerInfinity.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z',
     fill: 'none',
@@ -32,6 +32,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerIos.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     'stroke-width': '4',
     'stroke-linecap': 'round'
@@ -163,6 +163,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerOrbit.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('circle', {
     cx: '50',
     cy: '50',
@@ -40,6 +40,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerOval.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'translate(1 1)',
     'stroke-width': '2',
@@ -39,6 +39,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerPie.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('path', {
     d: 'M0 50A50 50 0 0 1 50 0L50 50L0 50',
     fill: 'currentColor',
@@ -70,6 +70,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerPuff.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     fill: 'none',
     'fill-rule': 'evenodd',
@@ -72,6 +72,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerRadio.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     transform: 'scale(0.55)'
   }, [
@@ -65,6 +65,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerRings.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('g', {
     fill: 'none',
     'fill-rule': 'evenodd',
@@ -95,6 +95,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

package/src/components/spinner/QSpinnerTail.js

@@ -4,7 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
-const svg = [
+const createSvg = () => [
   h('defs', [
     h('linearGradient', {
       x1: '8.042%',
@@ -73,6 +73,7 @@ export default createComponent({
 
   setup (props) {
     const { cSize, classes } = useSpinner(props)
+    const svg = createSvg()
 
     return () => h('svg', {
       class: classes.value,

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