feat(DropdownMenu): handle item type separator

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'

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

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"

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',