83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import { html, type TemplateResult } from '@design.estate/dees-element';
|
|
import type { IContextMenuItem } from './dees-mobile-contextmenu.js';
|
|
|
|
export const demoFunc = (): TemplateResult => {
|
|
const showContextMenu = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
|
|
const items: IContextMenuItem[] = [
|
|
{
|
|
label: 'Edit',
|
|
icon: 'pencil',
|
|
action: () => console.log('Edit clicked'),
|
|
},
|
|
{
|
|
label: 'Duplicate',
|
|
icon: 'copy',
|
|
action: () => console.log('Duplicate clicked'),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
label: 'Share',
|
|
icon: 'share',
|
|
action: () => console.log('Share clicked'),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
label: 'Delete',
|
|
icon: 'trash-2',
|
|
danger: true,
|
|
action: () => console.log('Delete clicked'),
|
|
},
|
|
];
|
|
|
|
import('./dees-mobile-contextmenu.js').then(({ DeesMobileContextmenu }) => {
|
|
DeesMobileContextmenu.createAndShow(items, e.clientX, e.clientY);
|
|
});
|
|
};
|
|
|
|
return html`
|
|
<style>
|
|
.demo-container {
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.demo-area {
|
|
padding: 3rem;
|
|
border: 2px dashed #e4e4e7;
|
|
border-radius: 0.5rem;
|
|
text-align: center;
|
|
cursor: context-menu;
|
|
user-select: none;
|
|
}
|
|
|
|
.demo-area:hover {
|
|
border-color: #a1a1aa;
|
|
background: #f4f4f5;
|
|
}
|
|
|
|
.demo-description {
|
|
font-size: 0.875rem;
|
|
color: #71717a;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<div class="demo-description">
|
|
Right-click (or long-press on touch) to show context menu
|
|
</div>
|
|
|
|
<div
|
|
class="demo-area"
|
|
@contextmenu=${showContextMenu}
|
|
>
|
|
Right-click here
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|