From 27fdc8e260bb8d2ca815c84cfdc30b6ca3baa038 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 16 Jan 2025 15:56:14 +0100 Subject: [PATCH] feat(NavigationMenu): handle `label` type in items Resolves #2993 --- docs/content/3.components/navigation-menu.md | 7 +- src/runtime/components/NavigationMenu.vue | 15 +- src/theme/navigation-menu.ts | 1 + test/components/NavigationMenu.spec.ts | 3 + .../NavigationMenu-vue.spec.ts.snap | 129 +++++++++++------- .../__snapshots__/NavigationMenu.spec.ts.snap | 129 +++++++++++------- 6 files changed, 180 insertions(+), 104 deletions(-) diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md index d8172eec..7f06b6f1 100644 --- a/docs/content/3.components/navigation-menu.md +++ b/docs/content/3.components/navigation-menu.md @@ -21,6 +21,7 @@ Use the `items` prop as an array of objects with the following properties: - `avatar?: AvatarProps`{lang="ts-type"} - `badge?: string | number | BadgeProps`{lang="ts-type"} - `trailingIcon?: string`{lang="ts-type"} +- `type?: 'label' | 'link'`{lang="ts-type"} - `value?: string`{lang="ts-type"} - `disabled?: boolean`{lang="ts-type"} - `class?: any`{lang="ts-type"} @@ -138,7 +139,9 @@ Each item can take a `children` array of objects with the following properties t Use the `orientation` prop to change the orientation of the NavigationMenu. +::note When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. +:: ::component-code --- @@ -151,7 +154,9 @@ external: props: orientation: 'vertical' items: - - - label: Guide + - - label: Links + type: 'label' + - label: Guide icon: i-lucide-book-open children: - label: Introduction diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index 599cc2b3..2b4bed1e 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -13,12 +13,12 @@ const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial { +export interface NavigationMenuChildItem extends Omit { /** Description is only used when `orientation` is `horizontal`. */ description?: string } -export interface NavigationMenuItem extends Omit, Pick { +export interface NavigationMenuItem extends Omit, Pick { label?: string icon?: string avatar?: AvatarProps @@ -28,6 +28,12 @@ export interface NavigationMenuItem extends Omit, P */ badge?: string | number | BadgeProps trailingIcon?: string + /** + * The type of the item. + * The `label` type only works on `vertical` orientation. + * @defaultValue 'link' + */ + type?: 'label' | 'link' slot?: string value?: string children?: NavigationMenuChildItem[] @@ -224,7 +230,10 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0] :open="item.open" :class="ui.item({ class: props.ui?.item })" > - +
+ +
+ ) => ({ slots: { root: 'relative flex gap-1.5 [&>div]:min-w-0', list: 'isolate min-w-0', + label: 'w-full flex items-center gap-1.5 font-semibold text-xs/5 text-[var(--ui-text-highlighted)] px-2.5 py-1.5', item: 'min-w-0', link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2', linkLeadingIcon: 'shrink-0 size-5', diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts index b29aa97e..4c9c998c 100644 --- a/test/components/NavigationMenu.spec.ts +++ b/test/components/NavigationMenu.spec.ts @@ -9,6 +9,9 @@ describe('NavigationMenu', () => { const items = [ [{ + label: 'Links', + type: 'label' + }, { label: 'Documentation', icon: 'i-lucide-book-open', badge: 10, diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap index 05f32cf9..e455b669 100644 --- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap @@ -4,7 +4,8 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = ` "