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

fix(NavigationMenu): highlight border on children only with vertical orientation

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-17 15:03:26 +01:00
parent 82d63446a1
commit e931880671
6 changed files with 171 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/components/NavigationMenu.vue
View File

@@ -231,8 +231,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
:disabled="item.disabled"
@select="item.onSelect"
>
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
<ReuseItemTemplate :item="(item as T)" :active="active" :index="index" />
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: !(orientation === 'vertical' && item.children?.length) })">
<ReuseItemTemplate :item="(item as T)" :active="active || item.active" :index="index" />
</ULinkBase>
</component>
@@ -269,7 +269,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
<ULinkBase v-bind="childSlotProps" :class="ui.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled })">
<ULinkBase v-bind="childSlotProps" :class="ui.link({ class: [props.ui?.link, childItem.class], active: childActive, disabled: !!childItem.disabled, level: true })">
<ReuseItemTemplate :item="(childItem as T)" :active="childActive" :index="childIndex" />
</ULinkBase>
</NavigationMenuLink>

23
src/theme/navigation-menu.ts
View File

@@ -83,21 +83,24 @@ export default (options: Required<ModuleOptions>) => ({
},
highlight: {
true: ''
},
level: {
true: ''
}
},
compoundVariants: [{
highlight: true,
orientation: 'horizontal',
highlight: true,
class: {
item: '-mb-px',
link: 'after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full'
link: ['after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full', options.theme.transitions && 'after:transition-colors']
}
}, {
highlight: true,
orientation: 'vertical',
highlight: true,
level: true,
class: {
item: 'px-1.5 -ms-px',
link: 'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
link: ['after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full', options.theme.transitions && 'after:transition-colors']
}
}, {
disabled: false,
@@ -130,7 +133,7 @@ export default (options: Required<ModuleOptions>) => ({
active: true,
class: {
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
@@ -138,7 +141,7 @@ export default (options: Required<ModuleOptions>) => ({
active: true,
class: {
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
linkLeadingIcon: 'text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]'
}
}, {
variant: 'pill',
@@ -168,7 +171,7 @@ export default (options: Required<ModuleOptions>) => ({
active: true,
class: {
link: `text-[var(--ui-${color})]`,
linkLeadingIcon: `text-[var(--ui-${color})]`
linkLeadingIcon: `text-[var(--ui-${color})] group-data-[state=open]:text-[var(--ui-${color})]`
}
})), {
color: 'neutral',
@@ -176,11 +179,12 @@ export default (options: Required<ModuleOptions>) => ({
active: true,
class: {
link: 'text-[var(--ui-text-highlighted)]',
linkLeadingIcon: 'text-[var(--ui-text-highlighted)]'
linkLeadingIcon: 'text-[var(--ui-text-highlighted)] group-data-[state=open]:text-[var(--ui-text-highlighted)]'
}
}, ...(options.theme.colors || []).map((highlightColor: string) => ({
highlightColor,
highlight: true,
level: true,
active: true,
class: {
link: `after:bg-[var(--ui-${highlightColor})]`
@@ -188,6 +192,7 @@ export default (options: Required<ModuleOptions>) => ({
})), {
highlightColor: 'neutral',
highlight: true,
level: true,
active: true,
class: {
link: 'after:bg-[var(--ui-bg-inverted)]'