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: 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>
<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: 'Copy',
        iconName: 'copy',
        shortcut: 'Cmd+C',
        action: async () => {
          console.log('Copy action');
        },
      },
      {
        name: 'Paste',
        iconName: 'clipboard',
        shortcut: 'Cmd+V',
        action: async () => {
          console.log('Paste action');
        },
      },
      { 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>
`;