fix(Link): only bind necessary slot props

This commit is contained in:
Benjamin Canac
2024-09-06 12:57:04 +02:00
parent aa34e3c141
commit 7fe7ff6fe2
2 changed files with 38 additions and 14 deletions

View File

@@ -74,31 +74,31 @@ const ui = computed(() => tv({
} }
})) }))
function isLinkActive(slotProps: any) { function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {
if (props.active !== undefined) { if (props.active !== undefined) {
return props.active return props.active
} }
if (props.exactQuery && !isEqual(slotProps.route.query, route.query)) { if (props.exactQuery && !isEqual(linkRoute.query, route.query)) {
return false return false
} }
if (props.exactHash && slotProps.route.hash !== route.hash) { if (props.exactHash && linkRoute.hash !== route.hash) {
return false return false
} }
if (props.exact && slotProps.isExactActive) { if (props.exact && isExactActive) {
return true return true
} }
if (!props.exact && slotProps.isActive) { if (!props.exact && isActive) {
return true return true
} }
return false return false
} }
function resolveLinkClass(slotProps: any) { function resolveLinkClass({ route, isActive, isExactActive }: any) {
const active = isLinkActive(slotProps) const active = isLinkActive({ route, isActive, isExactActive })
if (props.raw) { if (props.raw) {
return [props.class, active ? props.activeClass : props.inactiveClass] return [props.class, active ? props.activeClass : props.inactiveClass]
@@ -109,12 +109,39 @@ function resolveLinkClass(slotProps: any) {
</script> </script>
<template> <template>
<NuxtLink v-slot="slotProps" v-bind="nuxtLinkProps" custom> <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
<template v-if="custom"> <template v-if="custom">
<slot v-bind="{ ...$attrs, ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" /> <slot
v-bind="{
...$attrs,
as,
type,
disabled,
href,
navigate,
rel,
target,
isExternal,
active: isLinkActive({ route: linkRoute, isActive, isExactActive })
}"
/>
</template> </template>
<ULinkBase v-else v-bind="{ ...$attrs, ...slotProps, as, type, disabled }" :class="resolveLinkClass(slotProps)"> <ULinkBase
<slot v-bind="{ ...slotProps, as, type, disabled, active: isLinkActive(slotProps) }" /> v-else
v-bind="{
...$attrs,
as,
type,
disabled,
href,
navigate,
rel,
target,
isExternal
}"
:class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
>
<slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })" />
</ULinkBase> </ULinkBase>
</NuxtLink> </NuxtLink>
</template> </template>

View File

@@ -6,12 +6,9 @@ export interface LinkBaseProps {
click?: (e: MouseEvent) => void click?: (e: MouseEvent) => void
href?: string href?: string
navigate?: (e: MouseEvent) => void navigate?: (e: MouseEvent) => void
route?: object
rel?: string rel?: string
target?: string target?: string
isExternal?: boolean isExternal?: boolean
isActive?: boolean
isExactActive?: boolean
} }
</script> </script>