feat(DropdownMenu): new component (#37)

playground/app.vue

@@ -16,6 +16,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'dropdown-menu',
   'form',
   'form-field',
   'input',

playground/pages/dropdown-menu.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+const { metaSymbol } = useShortcuts()
+
+const items = computed(() => [
+  [{
+    label: 'My account',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    },
+    type: 'label' as const
+  }],
+  [{
+    label: 'Profile',
+    icon: 'i-heroicons-user',
+    select (e: Event) {
+      e.preventDefault()
+      console.log('Profile clicked')
+    }
+  }, {
+    label: 'Billing',
+    icon: 'i-heroicons-credit-card',
+    shortcuts: [metaSymbol.value, 'B']
+  }, {
+    label: 'Settings',
+    icon: 'i-heroicons-cog',
+    shortcuts: [metaSymbol.value, ',']
+  }], [{
+    label: 'Team',
+    icon: 'i-heroicons-users'
+  }, {
+    label: 'Invite users',
+    icon: 'i-heroicons-user-plus',
+    children: [[{
+      label: 'Invite by email',
+      icon: 'i-heroicons-paper-airplane'
+    }, {
+      label: 'Invite by link',
+      icon: 'i-heroicons-link',
+      shortcuts: [metaSymbol.value, 'I'],
+      select (e: Event) {
+        e.preventDefault()
+        console.log('Invite by link clicked')
+      }
+    }], [{
+      label: 'More',
+      icon: 'i-heroicons-plus-circle',
+      children: [{
+        label: 'Import from Slack',
+        icon: 'i-simple-icons-slack',
+        to: 'https://slack.com',
+        target: '_blank',
+        select (e: Event) {
+          e.preventDefault()
+          console.log('Import from Slack clicked')
+        }
+      }, {
+        label: 'Import from Trello',
+        icon: 'i-simple-icons-trello',
+        select (e: Event) {
+          e.preventDefault()
+          console.log('Import from Trello clicked')
+        }
+      }, {
+        label: 'Import from Asana',
+        icon: 'i-simple-icons-asana',
+        select (e: Event) {
+          e.preventDefault()
+          console.log('Import from Asana clicked')
+        }
+      }]
+    }]]
+  }, {
+    label: 'New team',
+    icon: 'i-heroicons-plus',
+    shortcuts: [metaSymbol.value, 'N']
+  }], [{
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    to: 'https://github.com/nuxt/ui',
+    target: '_blank',
+    select (e: Event) {
+      e.preventDefault()
+    }
+  }, {
+    label: 'Support',
+    icon: 'i-heroicons-lifebuoy',
+    to: '/dropdown-menu'
+  }, {
+    label: 'Shortcuts',
+    icon: 'i-heroicons-key'
+  }, {
+    label: 'API',
+    icon: 'i-heroicons-cube',
+    disabled: true
+  }], [{
+    label: 'Logout',
+    icon: 'i-heroicons-arrow-right-start-on-rectangle',
+    shortcuts: ['⇧', '⌘', 'Q']
+  }]
+])
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col pt-12">
+    <UDropdownMenu :items="items" arrow :content="{ side: 'bottom' }">
+      <UButton label="Open" color="white" />
+    </UDropdownMenu>
+  </div>
+</template>

playground/pages/navigation-menu.vue

@@ -7,7 +7,7 @@ const links = [
       src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     },
     badge: 100,
-    click () {
+    select () {
       console.log('Profile clicked')
     }
   }, {
@@ -29,7 +29,8 @@ const links = [
     target: '_blank'
   }, {
     label: 'Help',
-    icon: 'i-heroicons-question-mark-circle'
+    icon: 'i-heroicons-question-mark-circle',
+    disabled: true
   }]
 ]
 </script>