fix(Button): duplicate click handlers (#2213)

Co-authored-by: Benjamin Canac <[email protected]>

src/runtime/components/Button.vue

@@ -25,7 +25,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   block?: boolean
   /** Set loading state automatically based on the `@click` promise state */
   loadingAuto?: boolean
-  onClick?: (event: Event) => void | Promise<void>
+  onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
   class?: any
   ui?: PartialString<typeof button.slots>
 }
@@ -56,10 +56,11 @@ const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
 const loadingAutoState = ref(false)
 const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
 
-async function onClickWrapper(event: Event) {
+async function onClickWrapper(event: MouseEvent) {
   loadingAutoState.value = true
+  const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
   try {
-    await props.onClick?.(event)
+    await Promise.all(callbacks.map(fn => fn?.(event)))
   } finally {
     loadingAutoState.value = false
   }

src/runtime/components/LinkBase.vue

@@ -3,7 +3,7 @@ export interface LinkBaseProps {
   as?: string
   type?: string
   disabled?: boolean
-  click?: (e: MouseEvent) => void
+  onClick?: (e: MouseEvent) => void | Promise<void>
   href?: string
   navigate?: (e: MouseEvent) => void
   rel?: string
@@ -20,15 +20,15 @@ const props = withDefaults(defineProps<LinkBaseProps>(), {
   type: 'button'
 })
 
-function onClick(e: MouseEvent) {
+function onClickWrapper(e: MouseEvent) {
   if (props.disabled) {
     e.stopPropagation()
     e.preventDefault()
     return
   }
 
-  if (props.click) {
-    props.click(e)
+  if (props.onClick) {
+    props.onClick(e)
   }
 
   if (props.href && props.navigate && !props.isExternal) {
@@ -54,7 +54,7 @@ function onClick(e: MouseEvent) {
     }"
     :rel="rel"
     :target="target"
-    @click="onClick"
+    @click="onClickWrapper"
   >
     <slot />
   </Primitive>