feat(ContextMenu): new component

Resolves #18

playground/app.vue

@@ -20,6 +20,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'context-menu',
   'drawer',
   'dropdown-menu',
   'form',

playground/pages/context-menu.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const items = [
+  [{
+    label: 'Appearance',
+    children: [{
+      label: 'System',
+      icon: 'i-heroicons-computer-desktop'
+    }, {
+      label: 'Light',
+      icon: 'i-heroicons-sun'
+    }, {
+      label: 'Dark',
+      icon: 'i-heroicons-moon'
+    }]
+  }],
+  [{
+    label: 'Show Sidebar',
+    kbds: ['meta', 'S'],
+    select() {
+      console.log('Show Sidebar clicked')
+    }
+  }, {
+    label: 'Show Toolbar',
+    kbds: ['shift', 'meta', 'D'],
+    select() {
+      console.log('Show Toolbar clicked')
+    }
+  }, {
+    label: 'Collapse Pinned Tabs',
+    disabled: true
+  }], [{
+    label: 'Refresh the Page'
+  }, {
+    label: 'Clear Cookies and Refresh'
+  }, {
+    label: 'Clear Cache and Refresh'
+  }, {
+    type: 'separator' as const
+  }, {
+    label: 'Developer',
+    children: [[{
+      label: 'View Source',
+      kbds: ['option', 'meta', 'U'],
+      select() {
+        console.log('View Source clicked')
+      }
+    }, {
+      label: 'Developer Tools',
+      kbds: ['option', 'meta', 'I'],
+      select() {
+        console.log('Developer Tools clicked')
+      }
+    }], [{
+      label: 'Inspect Elements',
+      kbds: ['option', 'meta', 'C'],
+      select() {
+        console.log('Inspect Elements clicked')
+      }
+    }], [{
+      label: 'JavaScript Console',
+      kbds: ['option', 'meta', 'J'],
+      select() {
+        console.log('JavaScript Console clicked')
+      }
+    }]]
+  }]
+]
+
+defineShortcuts(extractShortcuts(items))
+</script>
+
+<template>
+  <UContextMenu :items="items" class="min-w-48">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72">
+      Right click here
+    </div>
+  </UContextMenu>
+</template>