From 1716ba0f5eed52729c5c26e80ac84d7d012eada1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 6 Sep 2024 14:59:05 +0200
Subject: [PATCH] docs(navigation-menu): update

---
 .../NavigationMenuCustomSlotExample.vue       |  27 ++
 .../NavigationMenuModelValueExample.vue       | 110 ++++++++
 docs/content/3.components/accordion.md        |   2 +
 docs/content/3.components/navigation-menu.md  | 243 +++++++++++++++++-
 .../app/pages/components/navigation-menu.vue  |   7 +-
 5 files changed, 373 insertions(+), 16 deletions(-)
 create mode 100644 docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
 create mode 100644 docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue

diff --git a/docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue b/docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
new file mode 100644
index 00000000..dedd95ea
--- /dev/null
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open'
+
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack'
+
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    slot: 'components'
+  }
+]
+</script>
+
+<template>
+  <UNavigationMenu :items="items" class="justify-center">
+    <template #components-trailing>
+      <UBadge label="44" variant="subtle" size="sm" />
+    </template>
+  </UNavigationMenu>
+</template>
diff --git a/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue b/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
new file mode 100644
index 00000000..2643af1b
--- /dev/null
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open',
+    children: [
+      {
+        label: 'Introduction',
+        description: 'Fully styled and customizable components for Nuxt.',
+        icon: 'i-heroicons-home'
+      },
+      {
+        label: 'Installation',
+        description: 'Learn how to install and configure Nuxt UI in your application.',
+        icon: 'i-heroicons-cloud-arrow-down'
+      },
+      {
+        label: 'Icons',
+        icon: 'i-heroicons-face-smile',
+        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      },
+      {
+        label: 'Colors',
+        icon: 'i-heroicons-swatch',
+        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+      },
+      {
+        label: 'Theme',
+        icon: 'i-heroicons-cog',
+        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      }
+    ]
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack',
+    children: [
+      {
+        label: 'defineShortcuts',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Define shortcuts for your application.'
+      },
+      {
+        label: 'useModal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'useSlideover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a slideover within your application.'
+      },
+      {
+        label: 'useToast',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a toast within your application.'
+      }
+    ]
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    children: [
+      {
+        label: 'Link',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Use NuxtLink with superpowers.'
+      },
+      {
+        label: 'Modal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'NavigationMenu',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of links.'
+      },
+      {
+        label: 'Pagination',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of pages.'
+      },
+      {
+        label: 'Popover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a non-modal dialog that floats around a trigger element.'
+      },
+      {
+        label: 'Progress',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Show a horizontal bar to indicate task progression.'
+      }
+    ]
+  }
+]
+
+const active = ref('0')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
+})
+</script>
+
+<template>
+  <UNavigationMenu v-model="active" :items="items" class="justify-center" />
+</template>
diff --git a/docs/content/3.components/accordion.md b/docs/content/3.components/accordion.md
index 3c077b44..ba4d7c4f 100644
--- a/docs/content/3.components/accordion.md
+++ b/docs/content/3.components/accordion.md
@@ -139,7 +139,9 @@ props:
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
 
+::note
 You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
 
 ::component-code
 ---
diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md
index f3b9add2..464a0b7b 100644
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -8,9 +8,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/NavigationMenu.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -24,6 +21,8 @@ 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"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `select?(e: Event): void`{lang="ts-type"}
@@ -42,6 +41,7 @@ props:
   items:
     - label: Guide
       icon: i-heroicons-book-open
+      to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
@@ -139,10 +139,8 @@ Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -150,6 +148,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -166,7 +165,7 @@ props:
 ::
 
 ::note
-Groups will be spaced between each other when orientation is `horizontal` and separated by a line when orientation is `vertical`.
+Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
 ::
 
 ### Highlight
@@ -178,7 +177,6 @@ Use the `highlight-color` prop to change the color of the border. It defaults to
 ::component-code
 ---
 prettier: true
-collapse: true
 ignore:
   - items
   - highlight
@@ -192,6 +190,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -218,10 +217,8 @@ Use the `color` prop to change the color of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -229,6 +226,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -250,10 +248,8 @@ Use the `variant` prop to change the variant of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -263,6 +259,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -282,8 +279,232 @@ props:
 The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
 ::
 
+### Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
+
+::note
+You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  trailingIcon: 'i-heroicons-plus'
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
+### Arrow
+
+Use the `arrow` prop to display an arrow on the NavigationMenu content when items have children.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - arrow
+  - class
+external:
+  - items
+props:
+  arrow: true
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::note
+The arrow is animated to follow the active item.
+::
+
 ## Examples
 
+### Control active item
+
+You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+::component-example
+---
+collapse: true
+name: 'navigation-menu-model-value-example'
+---
+::
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
+
+::component-example
+---
+name: 'navigation-menu-custom-slot-example'
+class: 'justify-center'
+---
+::
+
+::tip{to="#slots"}
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
+::
+
 ## API
 
 ### Props
diff --git a/playground/app/pages/components/navigation-menu.vue b/playground/app/pages/components/navigation-menu.vue
index 64b0997a..209e24a9 100644
--- a/playground/app/pages/components/navigation-menu.vue
+++ b/playground/app/pages/components/navigation-menu.vue
@@ -92,17 +92,14 @@ const items = [
     </div>
 
     <UNavigationMenu
+      arrow
       :items="items"
       :color="color"
       :variant="variant"
       :orientation="orientation"
       :highlight="highlight"
       :highlight-color="highlightColor"
-      arrow
-      :class="highlight ? [
-        'border-gray-200 dark:border-gray-800',
-        orientation === 'vertical' as any ? 'border-l' : 'border-b'
-      ] : undefined"
+      :class="highlight && 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'"
     />
   </div>
 </template>