design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add interfaces for secondary menu items with various types and functionalities

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-03 01:24:36 +00:00
parent c41268cd4e
commit 57b323b53c
23 changed files with 1069 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
View File

@@ -12,41 +12,102 @@ export const demoFunc = () => html`
.demo-secondarymenu-container .spacer {
flex: 1;
background: #0f0f0f;
padding: 20px;
color: #a3a3a3;
font-family: 'Geist Sans', sans-serif;
}
.demo-secondarymenu-container .spacer h3 {
color: #fafafa;
margin-top: 0;
}
.demo-secondarymenu-container .spacer code {
background: #27272a;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
}
.demo-secondarymenu-container .spacer ul {
line-height: 1.8;
}
</style>
<div class="demo-secondarymenu-container">
<dees-appui-secondarymenu
.heading=${'Projects'}
.groups=${[
// Group 1: Tab items (default behavior)
{
name: 'Active',
iconName: 'lucide:folder',
name: 'Navigation',
iconName: 'lucide:compass',
items: [
{ key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
{ key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
{ key: 'Database', iconName: 'database', action: () => console.log('Database') },
]
{ key: 'Dashboard', iconName: 'lucide:layoutDashboard', action: () => console.log('Dashboard clicked'), badge: 3, badgeVariant: 'warning' },
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects clicked'), badge: 'new', badgeVariant: 'success' },
{ key: 'Analytics', iconName: 'lucide:barChart2', action: () => console.log('Analytics clicked') },
] as interfaces.ISecondaryMenuItemTab[]
},
// Group 2: Actions
{
name: 'Archived',
iconName: 'lucide:archive',
name: 'Actions',
iconName: 'lucide:zap',
items: [
{ type: 'action', key: 'Create New', iconName: 'lucide:plus', action: () => alert('Create New clicked!') },
{ type: 'action', key: 'Import Data', iconName: 'lucide:upload', action: () => alert('Import Data clicked!') },
{ type: 'divider' },
{ type: 'action', key: 'Delete All', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Are you sure you want to delete all items?', action: () => alert('Deleted!') },
] as interfaces.ISecondaryMenuItem[]
},
// Group 3: Filters
{
name: 'Filters',
iconName: 'lucide:filter',
items: [
{ type: 'header', label: 'Status' },
{ type: 'filter', key: 'Show Active', iconName: 'lucide:checkCircle', active: true, onToggle: (active) => console.log('Show Active:', active) },
{ type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show Archived:', active) },
{ type: 'divider' },
{ type: 'multiFilter', key: 'Categories', iconName: 'lucide:tag', collapsed: false, options: [
{ key: 'frontend', label: 'Frontend', checked: true, iconName: 'lucide:monitor' },
{ key: 'backend', label: 'Backend', checked: true, iconName: 'lucide:server' },
{ key: 'devops', label: 'DevOps', checked: false, iconName: 'lucide:cloud' },
{ key: 'design', label: 'Design', checked: false, iconName: 'lucide:palette' },
], onChange: (keys) => console.log('Selected categories:', keys) },
] as interfaces.ISecondaryMenuItem[]
},
// Group 4: Links and misc
{
name: 'Resources',
iconName: 'lucide:bookOpen',
collapsed: true,
items: [
{ key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
{ key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
]
},
{
name: 'Settings',
iconName: 'lucide:settings',
items: [
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
]
{ type: 'header', label: 'Documentation' },
{ type: 'link', key: 'API Reference', iconName: 'lucide:fileText', href: 'https://api.example.com/docs' },
{ type: 'link', key: 'User Guide', iconName: 'lucide:book', href: 'https://docs.example.com/guide' },
{ type: 'divider' },
{ type: 'header', label: 'Support' },
{ type: 'link', key: 'Help Center', iconName: 'lucide:helpCircle', href: '/help', external: false },
{ type: 'link', key: 'GitHub Issues', iconName: 'lucide:github', href: 'https://github.com/example/issues' },
] as interfaces.ISecondaryMenuItem[]
}
] as interfaces.IMenuGroup[]}
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
] as interfaces.ISecondaryMenuGroup[]}
@item-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
@action-click=${(e: CustomEvent) => console.log('Action clicked:', e.detail)}
@filter-toggle=${(e: CustomEvent) => console.log('Filter toggled:', e.detail)}
@multifilter-change=${(e: CustomEvent) => console.log('Multi-filter changed:', e.detail)}
@link-click=${(e: CustomEvent) => console.log('Link clicked:', e.detail)}
></dees-appui-secondarymenu>
<div class="spacer"></div>
<div class="spacer">
<h3>Secondary Menu Demo</h3>
<p>This demo showcases all 8 item types:</p>
<ul>
<li><code>tab</code> - Selectable items (Navigation group)</li>
<li><code>action</code> - Blue actions (Actions group)</li>
<li><code>action</code> with <code>variant: 'danger'</code> - Red danger action</li>
<li><code>filter</code> - Checkbox toggles (Filters group)</li>
<li><code>multiFilter</code> - Collapsible multi-select (Categories)</li>
<li><code>divider</code> - Visual separators</li>
<li><code>header</code> - Section labels</li>
<li><code>link</code> - External/internal links (Resources group)</li>
</ul>
<p>Try the collapse toggle on the left edge!</p>
</div>
</div>
`;