From e93188067172d357a7724f937aeec70a0dabe611 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 17 Dec 2024 15:03:26 +0100 Subject: [PATCH] fix(NavigationMenu): highlight border on children only with `vertical` orientation --- docs/content/3.components/navigation-menu.md | 77 ++++++++++++++++-- .../app/pages/components/navigation-menu.vue | 5 +- src/runtime/components/NavigationMenu.vue | 6 +- src/theme/navigation-menu.ts | 23 +++--- .../NavigationMenu-vue.spec.ts.snap | 80 +++++++++---------- .../__snapshots__/NavigationMenu.spec.ts.snap | 80 +++++++++---------- 6 files changed, 171 insertions(+), 100 deletions(-) diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md index 787ca6a5..601509da 100644 --- a/docs/content/3.components/navigation-menu.md +++ b/docs/content/3.components/navigation-menu.md @@ -152,7 +152,6 @@ props: items: - - label: Guide icon: i-lucide-book-open - defaultOpen: true children: - label: Introduction description: Fully styled and customizable components for Nuxt. @@ -190,7 +189,9 @@ props: to: /composables/use-toast - label: Components icon: i-lucide-box + to: /components active: true + defaultOpen: true children: - label: Link icon: i-lucide-file-text @@ -240,10 +241,10 @@ Use the `highlight-color` prop to change the color of the border. It defaults to ::component-code --- +collapse: true prettier: true ignore: - items - - highlight - class external: - items @@ -254,25 +255,89 @@ props: items: - - label: Guide icon: i-lucide-book-open - to: /getting-started + children: + - label: Introduction + description: Fully styled and customizable components for Nuxt. + icon: i-lucide-house + - label: Installation + description: Learn how to install and configure Nuxt UI in your application. + icon: i-lucide-cloud-download + - label: 'Icons' + icon: 'i-lucide-smile' + description: 'You have nothing to do, @nuxt/icon will handle it automatically.' + - label: 'Colors' + icon: 'i-lucide-swatch-book' + description: 'Choose a primary and a neutral color from your Tailwind CSS theme.' + - label: 'Theme' + icon: 'i-lucide-cog' + description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.' - label: Composables icon: i-lucide-database - to: /composables + children: + - label: defineShortcuts + icon: i-lucide-file-text + description: Define shortcuts for your application. + to: /composables/define-shortcuts + - label: useModal + icon: i-lucide-file-text + description: Display a modal within your application. + to: /composables/use-modal + - label: useSlideover + icon: i-lucide-file-text + description: Display a slideover within your application. + to: /composables/use-slideover + - label: useToast + icon: i-lucide-file-text + description: Display a toast within your application. + to: /composables/use-toast - label: Components icon: i-lucide-box to: /components active: true + defaultOpen: true + children: + - label: Link + icon: i-lucide-file-text + description: Use NuxtLink with superpowers. + to: /components/link + - label: Modal + icon: i-lucide-file-text + description: Display a modal within your application. + to: /components/modal + - label: NavigationMenu + icon: i-lucide-file-text + description: Display a list of links. + to: /components/navigation-menu + - label: Pagination + icon: i-lucide-file-text + description: Display a list of pages. + to: /components/pagination + - label: Popover + icon: i-lucide-file-text + description: Display a non-modal dialog that floats around a trigger element. + to: /components/popover + - label: Progress + icon: i-lucide-file-text + description: Show a horizontal bar to indicate task progression. + to: /components/progress - - label: GitHub icon: i-simple-icons-github badge: 3.8k to: https://github.com/nuxt/ui target: _blank - class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-[var(--ui-border)]' + - label: Help + icon: i-lucide-circle-help + disabled: true + class: 'data-[orientation=horizontal]:border-b border-[var(--ui-border)] data-[orientation=vertical]:w-48' --- :: ::note -In this example, the `border-l` and `border-b` classes are applied to display a border, this is not done by default to let you have a clean slate to work with. +In this example, the `border-b` class is applied to display a border in `horizontal` orientation, this is not done by default to let you have a clean slate to work with. +:: + +::caution +In `vertical` orientation, the `highlight` prop only highlights the border of active children. :: ### Color diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue index a05a52f2..b514639c 100644 --- a/playground/app/pages/components/navigation-menu.vue +++ b/playground/app/pages/components/navigation-menu.vue @@ -16,7 +16,6 @@ const items = [ label: 'Documentation', icon: 'i-lucide-book-open', badge: 10, - defaultOpen: true, children: [{ label: 'Introduction', description: 'Fully styled and customizable components for Nuxt.', @@ -38,6 +37,7 @@ const items = [ label: 'Components', icon: 'i-lucide-box', active: true, + defaultOpen: true, children: [{ label: 'Link', icon: 'i-lucide-file', @@ -101,7 +101,8 @@ const items = [ :orientation="orientation" :highlight="highlight" :highlight-color="highlightColor" - :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-s border-[var(--ui-border)]'" + :class="highlight && 'data-[orientation=horizontal]:border-b border-[var(--ui-border)]'" + class="data-[orientation=vertical]:w-48" /> diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue index 140e51a3..d60f6fd7 100644 --- a/src/runtime/components/NavigationMenu.vue +++ b/src/runtime/components/NavigationMenu.vue @@ -231,8 +231,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0] :disabled="item.disabled" @select="item.onSelect" > - - + + @@ -269,7 +269,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
  • - + diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts index 68956f1d..4a9c111a 100644 --- a/src/theme/navigation-menu.ts +++ b/src/theme/navigation-menu.ts @@ -83,21 +83,24 @@ export default (options: Required) => ({ }, 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) => ({ 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) => ({ 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) => ({ 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) => ({ 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) => ({ })), { highlightColor: 'neutral', highlight: true, + level: true, active: true, class: { link: 'after:bg-[var(--ui-bg-inverted)]' diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap index edfd2973..b8413de8 100644 --- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap +++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap @@ -12,7 +12,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
    • -
  • +
  • @@ -57,7 +57,7 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
    • -
  • +
  • @@ -100,7 +100,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
    • -
  • +
  • @@ -143,7 +143,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
    • -
  • +
  • @@ -223,7 +223,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
    • -
  • +
  • @@ -307,7 +307,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
    • -
  • +
  • @@ -346,7 +346,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
    • -
  • +
  • @@ -389,7 +389,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
    • -
  • +
  • @@ -432,7 +432,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
    • -
  • +
  • @@ -467,7 +467,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly "