dees-catalog/ts_web/elements/dees-contextmenu.demo.ts

import { html } from '@design.estate/dees-element';
import * as plugins from './00plugins.js';

import { DeesContextmenu } from './dees-contextmenu.js';

export const demoFunc = () => html`
<style>
  .withMargin {
    display: block;
    margin: 20px;
  }
  .demo-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    min-height: 400px;
  }
  .demo-area {
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    cursor: context-menu;
    transition: background 0.2s;
  }
  .demo-area:hover {
    background: rgba(0, 0, 0, 0.02);
  }
</style>
<div class="demo-container">
  <dees-panel heading="Basic Context Menu with Nested Submenus">
    <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
      DeesContextmenu.openContextMenuWithOptions(eventArg, [
        {
          name: 'File',
          iconName: 'fileText',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'New', iconName: 'filePlus', shortcut: 'Cmd+N', action: async () => console.log('New file') },
            { name: 'Open', 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 as PDF', iconName: 'download', action: async () => console.log('Export PDF') },
            { name: 'Export as HTML', iconName: 'code', action: async () => console.log('Export HTML') },
          ]
        },
        {
          name: 'Edit',
          iconName: 'edit3',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Cut', iconName: 'scissors', shortcut: 'Cmd+X', action: async () => console.log('Cut') },
            { name: 'Copy', iconName: 'copy', shortcut: 'Cmd+C', action: async () => console.log('Copy') },
            { name: 'Paste', iconName: 'clipboard', shortcut: 'Cmd+V', action: async () => console.log('Paste') },
            { divider: true },
            { name: 'Find', iconName: 'search', shortcut: 'Cmd+F', action: async () => console.log('Find') },
            { name: 'Replace', iconName: 'repeat', shortcut: 'Cmd+H', action: async () => console.log('Replace') },
          ]
        },
        {
          name: 'View',
          iconName: 'eye',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Zoom In', iconName: 'zoomIn', shortcut: 'Cmd++', action: async () => console.log('Zoom in') },
            { name: 'Zoom Out', iconName: 'zoomOut', shortcut: 'Cmd+-', action: async () => console.log('Zoom out') },
            { name: 'Reset Zoom', iconName: 'maximize2', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
            { divider: true },
            { name: 'Full Screen', iconName: 'maximize', shortcut: 'F11', action: async () => console.log('Full screen') },
          ]
        },
        { divider: true },
        {
          name: 'Settings',
          iconName: 'settings',
          action: async () => console.log('Settings')
        },
        {
          name: 'Help',
          iconName: 'helpCircle',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
            { name: 'Keyboard Shortcuts', iconName: 'keyboard', action: async () => console.log('Shortcuts') },
            { divider: true },
            { name: 'About', iconName: 'info', action: async () => console.log('About') },
          ]
        }
      ]);
    }}>
      <h3>Right-click anywhere in this area</h3>
      <p>A context menu with nested submenus will appear</p>
    </div>
  </dees-panel>
  <dees-panel heading="Component-Specific Context Menu">
    <dees-button style="margin: 20px;" @contextmenu=${(eventArg: MouseEvent) => {
      DeesContextmenu.openContextMenuWithOptions(eventArg, [
        {
          name: 'Button Actions',
          iconName: 'mousePointer',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Click', iconName: 'mouse', action: async () => console.log('Click action') },
            { name: 'Double Click', iconName: 'zap', action: async () => console.log('Double click') },
            { name: 'Long Press', iconName: 'clock', action: async () => console.log('Long press') },
          ]
        },
        {
          name: 'Button State',
          iconName: 'toggleLeft',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Enable', iconName: 'checkCircle', action: async () => console.log('Enable') },
            { name: 'Disable', iconName: 'xCircle', action: async () => console.log('Disable') },
            { divider: true },
            { name: 'Show', iconName: 'eye', action: async () => console.log('Show') },
            { name: 'Hide', iconName: 'eyeOff', action: async () => console.log('Hide') },
          ]
        },
        { divider: true },
        {
          name: 'Disabled Action',
          iconName: 'ban',
          disabled: true,
          action: async () => console.log('This should not run'),
        },
        {
          name: 'Properties',
          iconName: 'settings',
          action: async () => console.log('Button properties'),
        },
      ]);
    }}>Right-click on this button</dees-button>
  </dees-panel>

  <dees-panel heading="Advanced Context Menu Example">
    <div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
      DeesContextmenu.openContextMenuWithOptions(eventArg, [
        {
          name: 'Format',
          iconName: 'type',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Bold', iconName: 'bold', shortcut: 'Cmd+B', action: async () => console.log('Bold') },
            { name: 'Italic', iconName: 'italic', shortcut: 'Cmd+I', action: async () => console.log('Italic') },
            { name: 'Underline', iconName: 'underline', shortcut: 'Cmd+U', action: async () => console.log('Underline') },
            { divider: true },
            { name: 'Font Size', iconName: 'type', action: async () => console.log('Font size menu') },
            { name: 'Font Color', iconName: 'palette', action: async () => console.log('Font color menu') },
          ]
        },
        {
          name: 'Transform',
          iconName: 'shuffle',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'To Uppercase', iconName: 'arrowUp', action: async () => console.log('Uppercase') },
            { name: 'To Lowercase', iconName: 'arrowDown', action: async () => console.log('Lowercase') },
            { name: 'Capitalize', iconName: 'type', action: async () => console.log('Capitalize') },
          ]
        },
        { divider: true },
        {
          name: 'Delete',
          iconName: 'trash2',
          action: async () => console.log('Delete')
        }
      ]);
    }}>
      <h3>Advanced Nested Menu Example</h3>
      <p>This shows deeply nested submenus and various formatting options</p>
    </div>
  </dees-panel>
  
  <dees-panel heading="Static Context Menu (Always Visible)">
    <dees-contextmenu
      class="withMargin"
      .menuItems=${[
        {
          name: 'Project',
          iconName: 'folder',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'New Project', iconName: 'folderPlus', shortcut: 'Cmd+Shift+N', action: async () => console.log('New project') },
            { name: 'Open Project', iconName: 'folderOpen', shortcut: 'Cmd+Shift+O', action: async () => console.log('Open project') },
            { divider: true },
            { name: 'Recent Projects', iconName: 'clock', action: async () => {}, submenu: [
              { name: 'Project Alpha', action: async () => console.log('Open Alpha') },
              { name: 'Project Beta', action: async () => console.log('Open Beta') },
              { name: 'Project Gamma', action: async () => console.log('Open Gamma') },
            ]},
          ]
        },
        {
          name: 'Tools',
          iconName: 'tool',
          action: async () => {}, // Parent items with submenus still need an action
          submenu: [
            { name: 'Terminal', iconName: 'terminal', shortcut: 'Cmd+T', action: async () => console.log('Terminal') },
            { name: 'Console', iconName: 'monitor', shortcut: 'Cmd+K', action: async () => console.log('Console') },
            { divider: true },
            { name: 'Extensions', iconName: 'package', action: async () => console.log('Extensions') },
          ]
        },
        { divider: true },
        {
          name: 'Preferences',
          iconName: 'sliders',
          action: async () => console.log('Preferences'),
        },
      ]}
    ></dees-contextmenu>
  </dees-panel>
</div>
`;