mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-02 13:17:57 +01:00
fix(Button): duplicate click handlers (#2213)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -25,7 +25,7 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
|
|||||||
block?: boolean
|
block?: boolean
|
||||||
/** Set loading state automatically based on the `@click` promise state */
|
/** Set loading state automatically based on the `@click` promise state */
|
||||||
loadingAuto?: boolean
|
loadingAuto?: boolean
|
||||||
onClick?: (event: Event) => void | Promise<void>
|
onClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>
|
||||||
class?: any
|
class?: any
|
||||||
ui?: PartialString<typeof button.slots>
|
ui?: PartialString<typeof button.slots>
|
||||||
}
|
}
|
||||||
@@ -56,10 +56,11 @@ const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
|
|||||||
const loadingAutoState = ref(false)
|
const loadingAutoState = ref(false)
|
||||||
const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
|
const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
|
||||||
|
|
||||||
async function onClickWrapper(event: Event) {
|
async function onClickWrapper(event: MouseEvent) {
|
||||||
loadingAutoState.value = true
|
loadingAutoState.value = true
|
||||||
|
const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
|
||||||
try {
|
try {
|
||||||
await props.onClick?.(event)
|
await Promise.all(callbacks.map(fn => fn?.(event)))
|
||||||
} finally {
|
} finally {
|
||||||
loadingAutoState.value = false
|
loadingAutoState.value = false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ export interface LinkBaseProps {
|
|||||||
as?: string
|
as?: string
|
||||||
type?: string
|
type?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
click?: (e: MouseEvent) => void
|
onClick?: (e: MouseEvent) => void | Promise<void>
|
||||||
href?: string
|
href?: string
|
||||||
navigate?: (e: MouseEvent) => void
|
navigate?: (e: MouseEvent) => void
|
||||||
rel?: string
|
rel?: string
|
||||||
@@ -20,15 +20,15 @@ const props = withDefaults(defineProps<LinkBaseProps>(), {
|
|||||||
type: 'button'
|
type: 'button'
|
||||||
})
|
})
|
||||||
|
|
||||||
function onClick(e: MouseEvent) {
|
function onClickWrapper(e: MouseEvent) {
|
||||||
if (props.disabled) {
|
if (props.disabled) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.click) {
|
if (props.onClick) {
|
||||||
props.click(e)
|
props.onClick(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.href && props.navigate && !props.isExternal) {
|
if (props.href && props.navigate && !props.isExternal) {
|
||||||
@@ -54,7 +54,7 @@ function onClick(e: MouseEvent) {
|
|||||||
}"
|
}"
|
||||||
:rel="rel"
|
:rel="rel"
|
||||||
:target="target"
|
:target="target"
|
||||||
@click="onClick"
|
@click="onClickWrapper"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</Primitive>
|
</Primitive>
|
||||||
|
|||||||
Reference in New Issue
Block a user