From a5bb25dd95be81d34564c5b5c4e3174ec126dbdb Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 25 Apr 2024 11:48:27 +0200
Subject: [PATCH] feat(DropdownMenu): handle item type `separator`

---
 playground/pages/dropdown-menu.vue             | 2 ++
 src/runtime/components/DropdownMenu.vue        | 2 +-
 src/runtime/components/DropdownMenuContent.vue | 1 +
 src/theme/dropdown-menu.ts                     | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/playground/pages/dropdown-menu.vue b/playground/pages/dropdown-menu.vue
index 08a176d9..a03e3658 100644
--- a/playground/pages/dropdown-menu.vue
+++ b/playground/pages/dropdown-menu.vue
@@ -95,6 +95,8 @@ const items = [
     label: 'Support',
     icon: 'i-heroicons-lifebuoy',
     to: '/dropdown-menu'
+  }, {
+    type: 'separator' as const
   }, {
     label: 'Keyboard Shortcuts',
     icon: 'i-heroicons-key'
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index a539ba63..5d259d42 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -22,7 +22,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type'> {
    * The item type.
    * @defaultValue "link"
    */
-  type?: 'label' | 'link'
+  type?: 'label' | 'separator' | 'link'
   slot?: string
   open?: boolean
   defaultOpen?: boolean
diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue
index ff0aa9cc..9120fa82 100644
--- a/src/runtime/components/DropdownMenuContent.vue
+++ b/src/runtime/components/DropdownMenuContent.vue
@@ -73,6 +73,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
           <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label()">
             <ReuseItemTemplate :item="item" :index="index" />
           </DropdownMenu.Label>
+          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator()" />
           <DropdownMenu.Sub v-else-if="item?.children?.length">
             <DropdownMenu.SubTrigger
               as="button"
diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts
index fc842cbb..71147ac3 100644
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -4,6 +4,7 @@ export default {
     arrow: 'fill-gray-200 dark:fill-gray-800',
     group: 'p-1 isolate',
     label: 'w-full flex items-center gap-1.5 p-1.5 text-sm font-medium select-none',
+    separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
     link: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',