fix(QBtnDropdown/QBtn): declared properties (btn related & router-lin…

…k related)
quasarframework · May 3, 2024 · 1f3ed25 · 1f3ed25
1 parent 9a953c2
commit 1f3ed25
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js
@@ -5,15 +5,15 @@ 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'
 
 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,

diff --git a/ui/src/components/btn/use-btn.js b/ui/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)

diff --git a/ui/src/components/btn/use-btn.test.js b/ui/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]', () => {

diff --git a/ui/src/composables/private.use-router-link/use-router-link.js b/ui/src/composables/private.use-router-link/use-router-link.js
@@ -77,10 +77,23 @@ function isSameRouteLocationParams (a, b) {
   return true
 }
 
-export const useRouterLinkProps = {
+export const useRouterLinkNonMatchingProps = {
   // router-link
   to: [ String, Object ],
   replace: Boolean,
+
+  // regular <a> link
+  href: String,
+  target: String,
+
+  // state
+  disable: Boolean
+}
+
+export const useRouterLinkProps = {
+  ...useRouterLinkNonMatchingProps,
+
+  // router-link
   exact: Boolean,
   activeClass: {
     type: String,
@@ -89,14 +102,7 @@ export const useRouterLinkProps = {
   exactActiveClass: {
     type: String,
     default: 'q-router-link--exact-active'
-  },
-
-  // regular <a> link
-  href: String,
-  target: String,
-
-  // state
-  disable: Boolean
+  }
 }
 
 // external props: type, tag