feat: Enhance context menu functionality with keyboard navigation and improved item handling

ts_web/elements/dees-contextmenu.demo.ts

@@ -9,49 +9,143 @@ export const demoFunc = () => html`
     display: block;
     margin: 20px;
   }
+  .demo-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 40px;
+    background: #f5f5f5;
+    min-height: 400px;
+  }
+  .demo-area {
+    background: white;
+    padding: 40px;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    cursor: context-menu;
+  }
 </style>
-<dees-button @contextmenu=${(eventArg) => {
-  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-    {
-      name: 'copy',
-      iconName: 'copySolid',
-      action: async () => {
-        return null;
+<div class="demo-container">
+  <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
+    DeesContextmenu.openContextMenuWithOptions(eventArg, [
+      {
+        name: 'Cut',
+        iconName: 'scissors',
+        shortcut: 'Cmd+X',
+        action: async () => {
+          console.log('Cut action');
+        },
       },
-    },
-    {
-      name: 'edit',
-      iconName: 'penToSquare',
-      action: async () => {
-        return null;
+      {
+        name: 'Copy',
+        iconName: 'copy',
+        shortcut: 'Cmd+C',
+        action: async () => {
+          console.log('Copy action');
+        },
       },
-    },{
-      name: 'paste',
-      iconName: 'pasteSolid',
-      action: async () => {
-        return null;
+      {
+        name: 'Paste',
+        iconName: 'clipboard',
+        shortcut: 'Cmd+V',
+        action: async () => {
+          console.log('Paste action');
+        },
       },
-    },
-  ]);
-}}>Right-Click for contextmenu</dees-button>
-<dees-contextmenu class="withMargin"></dees-contextmenu>
-<dees-contextmenu
-  class="withMargin"
-  .menuItems=${[
-    {
-      name: 'copy',
-      iconName: 'copySolid',
-      action: async () => {},
-    },
-    {
-      name: 'edit',
-      iconName: 'penToSquare',
-      action: async () => {},
-    },{
-      name: 'paste',
-      iconName: 'pasteSolid',
-      action: async () => {},
-    },
-  ] as plugins.tsclass.website.IMenuItem[]}
-></dees-contextmenu>
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: async () => {
+          console.log('Delete action');
+        },
+      },
+      { divider: true },
+      {
+        name: 'Select All',
+        shortcut: 'Cmd+A',
+        action: async () => {
+          console.log('Select All action');
+        },
+      },
+    ]);
+  }}>
+    <h3>Right-click anywhere in this area</h3>
+    <p>A context menu will appear with various options</p>
+  </div>
+  
+  <dees-button @contextmenu=${(eventArg: MouseEvent) => {
+    DeesContextmenu.openContextMenuWithOptions(eventArg, [
+      {
+        name: 'Button Action 1',
+        iconName: 'play',
+        action: async () => {
+          console.log('Button action 1');
+        },
+      },
+      {
+        name: 'Button Action 2',
+        iconName: 'pause',
+        action: async () => {
+          console.log('Button action 2');
+        },
+      },
+      {
+        name: 'Disabled Action',
+        iconName: 'ban',
+        disabled: true,
+        action: async () => {
+          console.log('This should not run');
+        },
+      },
+      { divider: true },
+      {
+        name: 'Settings',
+        iconName: 'settings',
+        action: async () => {
+          console.log('Settings');
+        },
+      },
+    ]);
+  }}>Right-click on this button for a different menu</dees-button>
+  
+  <div style="margin-top: 20px;">
+    <h4>Static Context Menu (always visible):</h4>
+    <dees-contextmenu
+      class="withMargin"
+      .menuItems=${[
+        {
+          name: 'New File',
+          iconName: 'filePlus',
+          shortcut: 'Cmd+N',
+          action: async () => console.log('New file'),
+        },
+        {
+          name: 'Open File',
+          iconName: 'folderOpen',
+          shortcut: 'Cmd+O',
+          action: async () => console.log('Open file'),
+        },
+        {
+          name: 'Save',
+          iconName: 'save',
+          shortcut: 'Cmd+S',
+          action: async () => console.log('Save'),
+        },
+        { divider: true },
+        {
+          name: 'Export',
+          iconName: 'download',
+          action: async () => console.log('Export'),
+        },
+        {
+          name: 'Import',
+          iconName: 'upload',
+          action: async () => console.log('Import'),
+        },
+      ]}
+    ></dees-contextmenu>
+  </div>
+</div>
 `;