From 36313dbe0e5546cf87725c5d36abae795ae73a3a Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Tue, 19 Sep 2023 23:33:43 +0530 Subject: [PATCH] feat(theme): allow link on nav item with children --- .../theme-default/components/VPMenuLink.vue | 2 +- .../components/VPNavBarMenuGroup.vue | 23 +++++++----------- .../components/VPNavBarMenuLink.vue | 2 +- .../components/VPNavScreenMenu.vue | 10 ++++---- .../components/VPNavScreenMenuGroupLink.vue | 2 +- .../VPNavScreenMenuGroupSection.vue | 2 +- .../components/VPNavScreenMenuLink.vue | 2 +- types/default-theme.d.ts | 24 +++---------------- 8 files changed, 21 insertions(+), 46 deletions(-) diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue index 52b4fac3..6a465eb0 100644 --- a/src/client/theme-default/components/VPMenuLink.vue +++ b/src/client/theme-default/components/VPMenuLink.vue @@ -5,7 +5,7 @@ import { isActive } from '../../shared' import VPLink from './VPLink.vue' defineProps<{ - item: DefaultTheme.NavItemWithLink + item: DefaultTheme.NavItem }>() const { page } = useData() diff --git a/src/client/theme-default/components/VPNavBarMenuGroup.vue b/src/client/theme-default/components/VPNavBarMenuGroup.vue index a38eded4..2b4e7c48 100644 --- a/src/client/theme-default/components/VPNavBarMenuGroup.vue +++ b/src/client/theme-default/components/VPNavBarMenuGroup.vue @@ -6,21 +6,16 @@ import { isActive } from '../../shared' import VPFlyout from './VPFlyout.vue' const props = defineProps<{ - item: DefaultTheme.NavItemWithChildren + item: DefaultTheme.NavItem }>() const { page } = useData() const isChildActive = (navItem: DefaultTheme.NavItem) => { - if ('link' in navItem) { - return isActive( - page.value.relativePath, - navItem.link, - !!props.item.activeMatch - ) - } else { - return navItem.items.some(isChildActive) - } + return ( + isActive(page.value.relativePath, navItem.link, !!props.item.activeMatch) || + navItem.items?.some(isChildActive) + ) } const childrenActive = computed(() => isChildActive(props.item)) @@ -30,11 +25,9 @@ const childrenActive = computed(() => isChildActive(props.item)) () const { page } = useData() diff --git a/src/client/theme-default/components/VPNavScreenMenu.vue b/src/client/theme-default/components/VPNavScreenMenu.vue index b035d608..fb5c194c 100644 --- a/src/client/theme-default/components/VPNavScreenMenu.vue +++ b/src/client/theme-default/components/VPNavScreenMenu.vue @@ -9,15 +9,15 @@ const { theme } = useData() diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue index e84a9770..21194552 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue @@ -4,7 +4,7 @@ import { inject } from 'vue' import VPLink from './VPLink.vue' defineProps<{ - item: DefaultTheme.NavItemWithLink + item: DefaultTheme.NavItem }>() const closeScreen = inject('close-screen') as () => void diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue index 15efcef1..859c3541 100644 --- a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue +++ b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue @@ -4,7 +4,7 @@ import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue' defineProps<{ text?: string - items: DefaultTheme.NavItemWithLink[] + items: DefaultTheme.NavItem[] }>() diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue index e612361e..df712004 100644 --- a/src/client/theme-default/components/VPNavScreenMenuLink.vue +++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue @@ -4,7 +4,7 @@ import { inject } from 'vue' import VPLink from './VPLink.vue' defineProps<{ - item: DefaultTheme.NavItemWithLink + item: DefaultTheme.NavItem }>() const closeScreen = inject('close-screen') as () => void diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts index 94dfb95c..ccd59e51 100644 --- a/types/default-theme.d.ts +++ b/types/default-theme.d.ts @@ -149,12 +149,10 @@ export namespace DefaultTheme { // nav ----------------------------------------------------------------------- - export type NavItem = NavItemWithLink | NavItemWithChildren - - export interface NavItemWithLink { + export interface NavItem { text: string - link: string - items?: never + link?: string + items?: NavItem[] /** * `activeMatch` is expected to be a regex string. We can't use actual @@ -165,22 +163,6 @@ export namespace DefaultTheme { rel?: string } - export interface NavItemChildren { - text?: string - items: NavItemWithLink[] - } - - export interface NavItemWithChildren { - text?: string - items: (NavItemChildren | NavItemWithLink)[] - - /** - * `activeMatch` is expected to be a regex string. We can't use actual - * RegExp object here because it isn't serializable - */ - activeMatch?: string - } - // image --------------------------------------------------------------------- export type ThemeableImage =