arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 08:50:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(VerticalNavigation): use getULinkProps to bind links

Browse Source
This commit is contained in:
Benjamin Canac
2024-01-11 12:17:29 +01:00
parent 28b736a703
commit 4c9c8d343a
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -1,10 +1,10 @@
<template>
<nav :class="ui.wrapper" v-bind="attrs">
<ul v-for="(section, sectionIndex) of linkSections" :key="`linkSection${sectionIndex}`">
<li v-for="(link, index) of section" :key="`linkSection${sectionIndex}-${index}`">
<ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`">
<li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
<ULink
v-slot="{ isActive }"
v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
v-bind="getULinkProps(link)"
:class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
:active-class="ui.active"
:inactive-class="ui.inactive"
@@ -40,7 +40,7 @@
</slot>
</ULink>
</li>
<UDivider v-if="sectionIndex < linkSections.length - 1" :ui="ui.divider" />
<UDivider v-if="sectionIndex < sections.length - 1" :ui="ui.divider" />
</ul>
</nav>
</template>
@@ -54,7 +54,7 @@ import UAvatar from '../elements/Avatar.vue'
import ULink from '../elements/Link.vue'
import UDivider from '../layout/Divider.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig, omit } from '../../utils'
import { mergeConfig, getULinkProps } from '../../utils'
import type { VerticalNavigationLink, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
@@ -87,16 +87,14 @@ export default defineComponent({
setup (props) {
const { ui, attrs } = useUI('verticalNavigation', toRef(props, 'ui'), config, toRef(props, 'class'))
const linkSections = computed(() => {
return (Array.isArray(props.links[0]) ? props.links : [props.links]) as VerticalNavigationLink[][]
})
const sections = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as VerticalNavigationLink[][])
return {
// eslint-disable-next-line vue/no-dupe-keys
ui,
attrs,
omit,
linkSections,
sections,
getULinkProps,
twMerge,
twJoin
}