mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-03 05:37:56 +01:00
fix(Link): only bind necessary slot props
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user