215 lines
9.1 KiB
TypeScript
215 lines
9.1 KiB
TypeScript
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>
|
|
`; |