quasar 2.15.4 → 2.16.0

package/src/components/breadcrumbs/QBreadcrumbs.test.js

@@ -1,7 +1,7 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect } from 'vitest'
 
-import QBreadcrumbs from './QBreadcrumbs.js'
+// import QBreadcrumbs from './QBreadcrumbs.js'
 
 import { alignMap } from 'quasar/src/composables/private.use-align/use-align.js'
 
@@ -11,10 +11,6 @@ import BreadcrumbWithSeparatorSlot from './test/BreadcrumbWithSeparatorSlot.vue'
 describe('[QBreadcrumbs API]', () => {
   describe('[Props]', () => {
     describe('[(prop)separator]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbs.props.separator).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = '>'
         const wrapper = mount(BasicBreadcrumbs)
@@ -35,10 +31,6 @@ describe('[QBreadcrumbs API]', () => {
     })
 
     describe('[(prop)active-color]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbs.props.activeColor).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'red'
         const wrapper = mount(BasicBreadcrumbs)
@@ -59,10 +51,6 @@ describe('[QBreadcrumbs API]', () => {
     })
 
     describe('[(prop)gutter]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbs.props.gutter).toBeDefined()
-      })
-
       test('value "none" has effect', async () => {
         const propVal = 'none'
         const wrapper = mount(BasicBreadcrumbs)
@@ -116,10 +104,6 @@ describe('[QBreadcrumbs API]', () => {
     })
 
     describe('[(prop)separator-color]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbs.props.separatorColor).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'red'
         const wrapper = mount(BasicBreadcrumbs)
@@ -139,10 +123,6 @@ describe('[QBreadcrumbs API]', () => {
     })
 
     describe('[(prop)align]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbs.props.align).toBeDefined()
-      })
-
       test.each([
         [ 'left' ],
         [ 'center' ],

package/src/components/breadcrumbs/QBreadcrumbsEl.test.js

@@ -7,10 +7,6 @@ import { getRouter } from 'testing/runtime/router.js'
 describe('[QBreadcrumbsEl API]', () => {
   describe('[Props]', () => {
     describe('[(prop)to]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.to).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const testRoute = '/home/dashboard'
         const router = await getRouter(testRoute)
@@ -82,10 +78,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)exact]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.exact).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const activeClass = 'it-is-active'
         const exactActiveClass = 'it-is-exact-active'
@@ -141,10 +133,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)replace]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.replace).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const testRoute = '/test-route'
         const router = await getRouter(testRoute)
@@ -184,10 +172,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)active-class]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.activeClass).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const activeClass = 'it-is-active'
         const router = await getRouter({ '/route': 'subRoute' })
@@ -235,10 +219,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)exact-active-class]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.exactActiveClass).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const exactActiveClass = 'it-is-exact-active'
         const router = await getRouter({
@@ -295,10 +275,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)href]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.href).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'https://quasar.dev'
         const wrapper = mount(QBreadcrumbsEl)
@@ -317,10 +293,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)target]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.target).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = '_blank'
         const href = 'https://quasar.dev'
@@ -350,10 +322,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)disable]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.disable).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const testRoute = '/home'
         const router = await getRouter(testRoute)
@@ -388,10 +356,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)label]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.label).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'Home'
         const wrapper = mount(QBreadcrumbsEl)
@@ -406,10 +370,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)icon]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.icon).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QBreadcrumbsEl)
@@ -428,10 +388,6 @@ describe('[QBreadcrumbsEl API]', () => {
     })
 
     describe('[(prop)tag]', () => {
-      test('is defined correctly', () => {
-        expect(QBreadcrumbsEl.props.tag).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'div'
         const wrapper = mount(QBreadcrumbsEl)
@@ -468,13 +424,6 @@ describe('[QBreadcrumbsEl API]', () => {
 
   describe('[Events]', () => {
     describe('[(event)click]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QBreadcrumbsEl.emits?.includes('click')
-          ^ (QBreadcrumbsEl.props?.onClick !== void 0)
-        ).toBe(1)
-      })
-
       test('is emitting without router', async () => {
         const wrapper = mount(QBreadcrumbsEl)
 

package/src/components/btn/QBtn.json

@@ -96,6 +96,11 @@
           }
         }
       }
-    }
+    },
+
+    "touchstart": { "internal": true },
+    "keydown": { "internal": true },
+    "keyup": { "internal": true },
+    "mousedown": { "internal": true }
   }
 }

package/src/components/btn/QBtn.test.js

@@ -10,10 +10,6 @@ import { getRouter } from 'testing/runtime/router.js'
 describe('[QBtn API]', () => {
   describe('[Props]', () => {
     describe('[(prop)size]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.size).toBeDefined()
-      })
-
       test('type String has effect (in pixels)', async () => {
         const propVal = '50px'
         const wrapper = mount(QBtn)
@@ -50,10 +46,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)type]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.type).toBeDefined()
-      })
-
       test.each([
         [ 'button' ],
         [ 'a' ]
@@ -109,10 +101,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)to]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.to).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const testRoute = '/home/dashboard'
         const router = await getRouter(testRoute)
@@ -184,10 +172,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)replace]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.replace).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const testRoute = '/test-route'
         const router = await getRouter(testRoute)
@@ -221,10 +205,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)href]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.href).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'https://quasar.dev'
         const wrapper = mount(QBtn)
@@ -243,10 +223,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)target]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.target).toBeDefined()
-      })
-
       test('type String has effect', () => {
         const propVal = '_blank'
         const href = 'https://quasar.dev'
@@ -270,10 +246,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)label]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.label).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'Button Label'
         const wrapper = mount(QBtn)
@@ -300,10 +272,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)icon]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.icon).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QBtn)
@@ -322,10 +290,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)icon-right]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.iconRight).toBeDefined()
-      })
-
       test('type String has effect', async () => {
         const propVal = 'map'
         const wrapper = mount(QBtn)
@@ -344,10 +308,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)outline]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.outline).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -370,10 +330,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)flat]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.flat).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -392,10 +348,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)unelevated]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.unelevated).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -414,10 +366,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)rounded]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.rounded).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -440,10 +388,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)push]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.push).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -470,10 +414,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)square]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.square).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -496,10 +436,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)glossy]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.glossy).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -518,10 +454,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)fab]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.fab).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -540,10 +472,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)fab-mini]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.fabMini).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -562,10 +490,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)padding]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.padding).toBeDefined()
-      })
-
       test.each([
         [ 'pixels; single value', '50px' ],
         [ 'pixels; multiple values', '50px 100px' ]
@@ -643,10 +567,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)color]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.color).toBeDefined()
-      })
-
       test('(default design) is applied correctly', async () => {
         const propVal = 'red'
         const wrapper = mount(QBtn)
@@ -710,10 +630,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)text-color]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.textColor).toBeDefined()
-      })
-
       test('is applied correctly with no "color" prop', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -818,10 +734,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)no-caps]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.noCaps).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -844,10 +756,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)no-wrap]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.noWrap).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
 
@@ -865,10 +773,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)dense]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.dense).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -887,10 +791,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)ripple]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.ripple).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
 
@@ -932,10 +832,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)tabindex]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.tabindex).toBeDefined()
-      })
-
       test.each([
         [ 'Number', 100 ],
         [ 'String', '100' ]
@@ -975,10 +871,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)align]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.align).toBeDefined()
-      })
-
       test.each([
         [ 'left' ],
         [ 'center' ],
@@ -1007,10 +899,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)stack]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.stack).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn__content')
@@ -1029,10 +917,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)stretch]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.stretch).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -1051,10 +935,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)loading]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.loading).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -1136,10 +1016,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)disable]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.disable).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -1214,10 +1090,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)round]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.round).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const wrapper = mount(QBtn)
         const target = wrapper.get('.q-btn')
@@ -1240,10 +1112,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)percentage]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.percentage).toBeDefined()
-      })
-
       test('type Number has effect', async () => {
         const propVal = 58
         const wrapper = mount(QBtn)
@@ -1297,10 +1165,6 @@ describe('[QBtn API]', () => {
     })
 
     describe('[(prop)dark-percentage]', () => {
-      test('is defined correctly', () => {
-        expect(QBtn.props.darkPercentage).toBeDefined()
-      })
-
       test('type Boolean has effect', async () => {
         const propVal = 58
         const wrapper = mount(QBtn)
@@ -1370,13 +1234,6 @@ describe('[QBtn API]', () => {
 
   describe('[Events]', () => {
     describe('[(event)click]', () => {
-      test('is defined correctly', () => {
-        expect(
-          QBtn.emits?.includes('click')
-          ^ (QBtn.props?.onClick !== void 0)
-        ).toBe(1)
-      })
-
       test('(with route) is emitting', async () => {
         const testRoute = '/home/dashboard'
         const router = await getRouter(testRoute)

package/src/components/btn/use-btn.js

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 
 import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
 import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
+import useRouterLink, { useRouterLinkNonMatchingProps } from '../../composables/private.use-router-link/use-router-link.js'
 
 export const btnPadding = {
   none: 0,
@@ -41,9 +41,9 @@ export function getBtnDesignAttr (props) {
     : {}
 }
 
-export const useBtnProps = {
+export const nonRoundBtnProps = {
   ...useSizeProps,
-  ...useRouterLinkProps,
+  ...useRouterLinkNonMatchingProps,
 
   type: {
     type: String,
@@ -60,7 +60,6 @@ export const useBtnProps = {
   ),
 
   square: Boolean,
-  round: Boolean,
   rounded: Boolean,
   glossy: Boolean,
 
@@ -95,6 +94,11 @@ export const useBtnProps = {
   disable: Boolean
 }
 
+export const useBtnProps = {
+  ...nonRoundBtnProps,
+  round: Boolean
+}
+
 export default function (props) {
   const sizeStyle = useSize(props, defaultSizes)
   const alignClass = useAlign(props)

package/src/components/btn/use-btn.test.js

@@ -3,7 +3,8 @@ import { describe, test, expect } from 'vitest'
 import { defineComponent } from 'vue'
 
 import useBtn, {
-  btnPadding, defaultSizes, btnDesignOptions, useBtnProps,
+  btnPadding, defaultSizes, btnDesignOptions,
+  useBtnProps, nonRoundBtnProps,
   getBtnDesign, getBtnDesignAttr
 } from './use-btn.js'
 
@@ -36,6 +37,13 @@ describe('[useBtn API]', () => {
         expect(Object.keys(useBtnProps)).not.toHaveLength(0)
       })
     })
+
+    describe('[(variable)nonRoundBtnProps]', () => {
+      test('is defined correctly', () => {
+        expect(nonRoundBtnProps).toBeTypeOf('object')
+        expect(Object.keys(nonRoundBtnProps)).not.toHaveLength(0)
+      })
+    })
   })
 
   describe('[Functions]', () => {

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -5,7 +5,7 @@ import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
-import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
+import { getBtnDesignAttr, nonRoundBtnProps } from '../btn/use-btn.js'
 import useId from '../../composables/use-id/use-id.js'
 import { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
 
@@ -13,7 +13,7 @@ import { createComponent } from '../../utils/private.create/create.js'
 import { stop } from '../../utils/event/event.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
-const btnPropsList = Object.keys(useBtnProps)
+const btnPropsList = Object.keys(nonRoundBtnProps)
 
 export function passBtnProps (props) {
   return btnPropsList.reduce((acc, key) => {
@@ -29,7 +29,7 @@ export default createComponent({
   name: 'QBtnDropdown',
 
   props: {
-    ...useBtnProps,
+    ...nonRoundBtnProps,
     ...useTransitionProps,
 
     modelValue: Boolean,

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -7,11 +7,8 @@
 
   "props": {
     "model-value": {
-      "extends": "model-value",
       "type": "Boolean",
-      "desc": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "required": false,
-      "examples": [ "# v-model=\"menuState\"" ]
+      "__delete": [ "default" ]
     },
 
     "split": {

package/src/components/btn-toggle/QBtnToggle.json

@@ -181,7 +181,9 @@
 
     "clear": {
       "desc": "When using the 'clearable' property, this event is emitted when the already selected button is clicked"
-    }
+    },
+
+    "click": { "internal": true }
   },
 
   "slots": {