arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 12:17:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Link): handle isActive through vue-router

Browse Source
This commit is contained in:
Benjamin Canac
2022-02-23 15:49:07 +01:00
parent 09aed4b752
commit aef11562c9
1 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/runtime/components/elements/Link.vue
View File

@@ -1,20 +1,20 @@
<template> <template>
<button v-if="isButton" v-bind="$attrs" :class="isActive ? activeClass : inactiveClass"> <button v-if="isButton" v-bind="$attrs" :class="inactiveClass">
<slot v-bind="{ isActive }" /> <slot />
</button> </button>
<a v-else-if="isExternalLink" v-bind="$attrs" :class="isActive ? activeClass : inactiveClass" :href="to" :target="target"> <a v-else-if="isExternalLink" v-bind="$attrs" :class="inactiveClass" :href="to" :target="target">
<slot v-bind="{ isActive }" /> <slot />
</a> </a>
<router-link <router-link
v-else v-else
v-slot="{ href, navigate }" v-slot="{ href, navigate, isActive, isExactActive }"
v-bind="$props" v-bind="$props"
custom custom
> >
<a <a
v-bind="$attrs" v-bind="$attrs"
:href="href" :href="href"
:class="isActive ? activeClass : inactiveClass" :class="resolveLinkClass({ isActive, isExactActive })"
@click="navigate" @click="navigate"
> >
<slot v-bind="{ isActive }" /> <slot v-bind="{ isActive }" />
@@ -25,7 +25,6 @@
<script> <script>
import { computed } from 'vue' import { computed } from 'vue'
import { RouterLink } from 'vue-router' import { RouterLink } from 'vue-router'
import { useRoute } from '#imports'
export default { export default {
name: 'Link', name: 'Link',
@@ -50,18 +49,6 @@ export default {
} }
}, },
setup (props) { setup (props) {
const route = useRoute()
const isActive = computed(() => {
if (!props.to) {
return false
}
if (props.exact) {
return [props.to, `${props.to}/`].includes(route.path)
} else {
return !!route.path.startsWith(props.to)
}
})
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http') return typeof props.to === 'string' && props.to.startsWith('http')
}) })
@@ -69,10 +56,18 @@ export default {
return !props.to return !props.to
}) })
function resolveLinkClass ({ isActive, isExactActive }) {
if ((props.exact && isExactActive) || isActive) {
return props.activeClass
} else {
return props.inactiveClass
}
}
return { return {
isActive,
isButton, isButton,
isExternalLink isExternalLink,
resolveLinkClass
} }
} }
} }