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

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

@@ -19,7 +19,16 @@ import { themeDefaultStyles } from '../../00theme.js';
/**
* Secondary navigation menu for sub-navigation within MainMenu views
* Supports collapsible groups, badges, and dynamic headings
*
* Supports 8 item types:
* 1. Tab - selectable, stays highlighted (default)
* 2. Action - executes without selection (blue)
* 3. Danger Action - red styling with optional confirmation
* 4. Filter - checkbox toggle
* 5. Multi-Filter - collapsible box with multiple checkboxes
* 6. Divider - visual separator
* 7. Header - non-interactive label
* 8. Link - opens URL
*/
@customElement('dees-appui-secondarymenu')
export class DeesAppuiSecondarymenu extends DeesElement {
@@ -31,22 +40,30 @@ export class DeesAppuiSecondarymenu extends DeesElement {
@property({ type: String })
accessor heading: string = 'Menu';
/** Grouped items with collapse support */
/** Grouped items with collapse support - supports new ISecondaryMenuGroup */
@property({ type: Array })
accessor groups: interfaces.IMenuGroup[] = [];
accessor groups: interfaces.ISecondaryMenuGroup[] = [];
/** Legacy flat list support for backward compatibility */
@property({ type: Array })
accessor selectionOptions: (interfaces.IMenuItem | { divider: true })[] = [];
/** Currently selected item */
/** Currently selected tab item */
@property({ type: Object })
accessor selectedItem: interfaces.IMenuItem | null = null;
accessor selectedItem: interfaces.ISecondaryMenuItemTab | null = null;
/** Internal state for collapsed groups */
@state()
accessor collapsedGroups: Set<string> = new Set();
/** Internal state for collapsed multi-filters */
@state()
accessor collapsedMultiFilters: Set<string> = new Set();
/** Render counter to force re-renders when items are mutated */
@state()
private accessor renderCounter: number = 0;
/** Horizontal collapse state */
@property({ type: Boolean, reflect: true })
accessor collapsed: boolean = false;
@@ -80,6 +97,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
--badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
--badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
/* Action colors */
--action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
--action-primary-hover: ${cssManager.bdTheme('#1d4ed8', '#60a5fa')};
--action-danger: ${cssManager.bdTheme('#dc2626', '#ef4444')};
--action-danger-hover: ${cssManager.bdTheme('#b91c1c', '#f87171')};
position: relative;
display: block;
height: 100%;
@@ -220,7 +243,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}
.groupHeader:hover {
background: var(--sidebar-hover);
background: ${cssManager.bdTheme('rgba(140, 120, 100, 0.06)', 'rgba(180, 160, 140, 0.08)')};
}
.groupHeader .groupTitle {
@@ -229,7 +252,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
gap: 8px;
font-size: 11px;
font-weight: 600;
color: var(--sidebar-fg-muted);
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
@@ -238,13 +261,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {
.groupHeader .groupTitle dees-icon {
font-size: 14px;
opacity: 0.7;
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
}
.groupHeader .chevron {
font-size: 12px;
transition: transform 0.2s ease;
color: var(--sidebar-fg-muted);
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
}
.groupHeader.collapsed .chevron {
@@ -264,7 +287,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
.groupItems {
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.2s ease;
max-height: 500px;
max-height: 1000px;
opacity: 1;
}
@@ -279,7 +302,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
opacity: 1;
}
/* Menu Item */
/* Menu Item Base */
.menuItem {
position: relative;
display: flex;
@@ -304,6 +327,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
background: var(--sidebar-active);
}
.menuItem.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.menuItem.selected {
background: var(--sidebar-active);
color: var(--sidebar-fg-active);
@@ -340,6 +369,208 @@ export class DeesAppuiSecondarymenu extends DeesElement {
transition: opacity 0.2s ease, width 0.25s ease;
}
/* Action Item Styles */
.menuItem.action-primary {
color: var(--action-primary);
}
.menuItem.action-primary:hover {
color: var(--action-primary-hover);
background: ${cssManager.bdTheme('rgba(37, 99, 235, 0.08)', 'rgba(59, 130, 246, 0.12)')};
}
.menuItem.action-primary dees-icon {
opacity: 1;
}
.menuItem.action-danger {
color: var(--action-danger);
}
.menuItem.action-danger:hover {
color: var(--action-danger-hover);
background: ${cssManager.bdTheme('rgba(220, 38, 38, 0.08)', 'rgba(239, 68, 68, 0.12)')};
}
.menuItem.action-danger dees-icon {
opacity: 1;
}
/* Filter Item Styles */
.menuItem.filter {
justify-content: space-between;
}
.menuItem.filter .filter-checkbox {
width: 16px;
height: 16px;
border: 2px solid ${cssManager.bdTheme('#d4d4d4', '#525252')};
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.menuItem.filter .filter-checkbox.checked {
background: var(--sidebar-accent);
border-color: var(--sidebar-accent);
}
.menuItem.filter .filter-checkbox dees-icon {
font-size: 12px;
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
opacity: 1;
}
.menuItem.filter.active {
color: var(--sidebar-fg-active);
}
/* Multi-Filter Container */
.multiFilter {
margin: 4px 0;
border: 1px solid var(--sidebar-border);
border-radius: 8px;
overflow: hidden;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
}
.multiFilter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
cursor: pointer;
transition: background 0.15s ease;
}
.multiFilter-header:hover {
background: var(--sidebar-hover);
}
.multiFilter-header .multiFilter-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--sidebar-fg-active);
}
.multiFilter-header .multiFilter-title dees-icon {
font-size: 16px;
opacity: 0.7;
}
.multiFilter-header .multiFilter-count {
font-size: 11px;
color: var(--sidebar-fg-muted);
background: var(--badge-default-bg);
padding: 2px 6px;
border-radius: 4px;
}
.multiFilter-header .chevron {
font-size: 12px;
transition: transform 0.2s ease;
color: var(--sidebar-fg-muted);
}
.multiFilter-header.collapsed .chevron {
transform: rotate(-90deg);
}
.multiFilter-options {
border-top: 1px solid var(--sidebar-border);
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.2s ease;
max-height: 500px;
opacity: 1;
}
.multiFilter-options.collapsed {
max-height: 0;
opacity: 0;
border-top: none;
}
.multiFilter-option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
transition: background 0.15s ease;
font-size: 13px;
color: var(--sidebar-fg);
}
.multiFilter-option:hover {
background: var(--sidebar-hover);
color: var(--sidebar-fg-active);
}
.multiFilter-option .option-checkbox {
width: 16px;
height: 16px;
border: 2px solid ${cssManager.bdTheme('#d4d4d4', '#525252')};
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.multiFilter-option .option-checkbox.checked {
background: var(--sidebar-accent);
border-color: var(--sidebar-accent);
}
.multiFilter-option .option-checkbox dees-icon {
font-size: 12px;
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
}
.multiFilter-option dees-icon.option-icon {
font-size: 14px;
opacity: 0.7;
}
/* Divider */
.menuDivider {
height: 1px;
background: var(--sidebar-border);
margin: 8px 12px;
}
:host([collapsed]) .menuDivider {
margin: 8px 4px;
}
/* Header/Label */
.menuHeader {
padding: 12px 12px 4px 12px;
font-size: 10px;
font-weight: 600;
color: var(--sidebar-fg-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
:host([collapsed]) .menuHeader {
display: none;
}
/* Link Item */
.menuItem.link .external-icon {
font-size: 12px;
opacity: 0.5;
margin-left: auto;
}
/* Collapsed menu item styles */
:host([collapsed]) .menuItem {
justify-content: center;
@@ -357,6 +588,15 @@ export class DeesAppuiSecondarymenu extends DeesElement {
left: -4px;
}
:host([collapsed]) .menuItem .filter-checkbox,
:host([collapsed]) .menuItem .external-icon {
display: none;
}
:host([collapsed]) .multiFilter {
display: none;
}
/* Tooltip for collapsed state */
.item-tooltip {
position: absolute;
@@ -431,17 +671,17 @@ export class DeesAppuiSecondarymenu extends DeesElement {
display: none;
}
/* Divider */
/* Legacy options container */
.legacyOptions {
padding: 0 8px;
}
/* Divider (legacy) */
.divider {
height: 1px;
background: var(--sidebar-border);
margin: 8px 12px;
}
/* Legacy options container */
.legacyOptions {
padding: 0 8px;
}
`,
];
@@ -472,28 +712,58 @@ export class DeesAppuiSecondarymenu extends DeesElement {
@click="${() => this.toggleGroup(group.name)}"
>
<span class="groupTitle">
${group.iconName ? html`<dees-icon .icon="${group.iconName.startsWith('lucide:') ? group.iconName : `lucide:${group.iconName}`}"></dees-icon>` : ''}
${group.iconName ? html`<dees-icon .icon="${this.normalizeIcon(group.iconName)}"></dees-icon>` : ''}
${group.name}
</span>
<dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
</div>
<div class="groupItems ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}">
${group.items.map((item) => this.renderMenuItem(item, group))}
${group.items.map((item) => this.renderItem(item, group))}
</div>
</div>
`)}
`;
}
private renderMenuItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): TemplateResult {
private renderItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
// Check for hidden items
if ('hidden' in item && item.hidden) {
return html``;
}
// Determine item type
const itemType = 'type' in item ? item.type : 'tab';
switch (itemType) {
case 'action':
return this.renderActionItem(item as interfaces.ISecondaryMenuItemAction);
case 'filter':
return this.renderFilterItem(item as interfaces.ISecondaryMenuItemFilter);
case 'multiFilter':
return this.renderMultiFilterItem(item as interfaces.ISecondaryMenuItemMultiFilter);
case 'divider':
return this.renderDivider();
case 'header':
return this.renderHeader(item as interfaces.ISecondaryMenuItemHeader);
case 'link':
return this.renderLinkItem(item as interfaces.ISecondaryMenuItemLink);
case 'tab':
default:
return this.renderTabItem(item as interfaces.ISecondaryMenuItemTab, group);
}
}
private renderTabItem(item: interfaces.ISecondaryMenuItemTab, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
const isSelected = this.selectedItem?.key === item.key;
const isDisabled = item.disabled === true;
return html`
<div
class="menuItem ${isSelected ? 'selected' : ''}"
@click="${() => this.selectItem(item, group)}"
class="menuItem ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}"
@click="${() => !isDisabled && this.selectTabItem(item, group)}"
@contextmenu="${(e: MouseEvent) => this.handleContextMenu(e, item)}"
>
${item.iconName ? html`<dees-icon .icon="${item.iconName.startsWith('lucide:') ? item.iconName : `lucide:${item.iconName}`}"></dees-icon>` : ''}
${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
<span class="itemLabel">${item.key}</span>
${item.badge !== undefined ? html`
<span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
@@ -503,6 +773,100 @@ export class DeesAppuiSecondarymenu extends DeesElement {
`;
}
private renderActionItem(item: interfaces.ISecondaryMenuItemAction): TemplateResult {
const variant = item.variant || 'primary';
const isDisabled = item.disabled === true;
return html`
<div
class="menuItem action-${variant} ${isDisabled ? 'disabled' : ''}"
@click="${() => !isDisabled && this.handleActionClick(item)}"
>
${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
<span class="itemLabel">${item.key}</span>
<span class="item-tooltip">${item.key}</span>
</div>
`;
}
private renderFilterItem(item: interfaces.ISecondaryMenuItemFilter): TemplateResult {
const isDisabled = item.disabled === true;
return html`
<div
class="menuItem filter ${item.active ? 'active' : ''} ${isDisabled ? 'disabled' : ''}"
@click="${() => !isDisabled && this.handleFilterToggle(item)}"
>
${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
<span class="itemLabel">${item.key}</span>
<div class="filter-checkbox ${item.active ? 'checked' : ''}">
${item.active ? html`<dees-icon .icon="${'lucide:check'}"></dees-icon>` : ''}
</div>
<span class="item-tooltip">${item.key}</span>
</div>
`;
}
private renderMultiFilterItem(item: interfaces.ISecondaryMenuItemMultiFilter): TemplateResult {
const isCollapsed = this.collapsedMultiFilters.has(item.key);
const checkedCount = item.options.filter(opt => opt.checked).length;
return html`
<div class="multiFilter">
<div
class="multiFilter-header ${isCollapsed ? 'collapsed' : ''}"
@click="${() => this.toggleMultiFilter(item.key)}"
>
<span class="multiFilter-title">
${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
${item.key}
</span>
${checkedCount > 0 ? html`<span class="multiFilter-count">${checkedCount}</span>` : ''}
<dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
</div>
<div class="multiFilter-options ${isCollapsed ? 'collapsed' : ''}">
${item.options.map(option => html`
<div
class="multiFilter-option"
@click="${() => this.handleMultiFilterOptionToggle(item, option.key)}"
>
<div class="option-checkbox ${option.checked ? 'checked' : ''}">
${option.checked ? html`<dees-icon .icon="${'lucide:check'}"></dees-icon>` : ''}
</div>
${option.iconName ? html`<dees-icon class="option-icon" .icon="${this.normalizeIcon(option.iconName)}"></dees-icon>` : ''}
<span>${option.label}</span>
</div>
`)}
</div>
</div>
`;
}
private renderDivider(): TemplateResult {
return html`<div class="menuDivider"></div>`;
}
private renderHeader(item: interfaces.ISecondaryMenuItemHeader): TemplateResult {
return html`<div class="menuHeader">${item.label}</div>`;
}
private renderLinkItem(item: interfaces.ISecondaryMenuItemLink): TemplateResult {
const isExternal = item.external ?? item.href.startsWith('http');
const isDisabled = item.disabled === true;
return html`
<div
class="menuItem link ${isDisabled ? 'disabled' : ''}"
@click="${() => !isDisabled && this.handleLinkClick(item)}"
>
${item.iconName ? html`<dees-icon .icon="${this.normalizeIcon(item.iconName)}"></dees-icon>` : ''}
<span class="itemLabel">${item.key}</span>
${isExternal ? html`<dees-icon class="external-icon" .icon="${'lucide:externalLink'}"></dees-icon>` : ''}
<span class="item-tooltip">${item.key}</span>
</div>
`;
}
private renderLegacyOptions(): TemplateResult {
return html`
<div class="legacyOptions">
@@ -511,16 +875,25 @@ export class DeesAppuiSecondarymenu extends DeesElement {
return html`<div class="divider"></div>`;
}
const item = option as interfaces.IMenuItem;
return this.renderMenuItem({
// Convert legacy IMenuItem to ISecondaryMenuItemTab
const tabItem: interfaces.ISecondaryMenuItemTab = {
key: item.key,
iconName: item.iconName,
action: item.action,
});
badge: item.badge,
badgeVariant: item.badgeVariant,
};
return this.renderTabItem(tabItem);
})}
</div>
`;
}
// Helper to normalize icon names
private normalizeIcon(iconName: string): string {
return iconName.startsWith('lucide:') ? iconName : `lucide:${iconName}`;
}
private toggleGroup(groupName: string): void {
const newCollapsed = new Set(this.collapsedGroups);
if (newCollapsed.has(groupName)) {
@@ -531,6 +904,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
this.collapsedGroups = newCollapsed;
}
private toggleMultiFilter(filterKey: string): void {
const newCollapsed = new Set(this.collapsedMultiFilters);
if (newCollapsed.has(filterKey)) {
newCollapsed.delete(filterKey);
} else {
newCollapsed.add(filterKey);
}
this.collapsedMultiFilters = newCollapsed;
}
public toggleCollapse(): void {
this.collapsed = !this.collapsed;
this.dispatchEvent(new CustomEvent('collapse-change', {
@@ -540,7 +923,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private selectItem(item: interfaces.IMenuItem, group?: interfaces.IMenuGroup): void {
private selectTabItem(item: interfaces.ISecondaryMenuItemTab, group?: interfaces.ISecondaryMenuGroup): void {
this.selectedItem = item;
item.action();
@@ -551,7 +934,81 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}));
}
private handleContextMenu(event: MouseEvent, item: interfaces.IMenuItem): void {
private async handleActionClick(item: interfaces.ISecondaryMenuItemAction): Promise<void> {
// Handle confirmation if required
if (item.confirmMessage) {
const confirmed = window.confirm(item.confirmMessage);
if (!confirmed) {
return;
}
}
await item.action();
this.dispatchEvent(new CustomEvent('action-click', {
detail: { item },
bubbles: true,
composed: true
}));
}
private handleFilterToggle(item: interfaces.ISecondaryMenuItemFilter): void {
const newActive = !item.active;
// Update the item's active state
item.active = newActive;
item.onToggle(newActive);
// Force re-render by incrementing the render counter
this.renderCounter++;
this.dispatchEvent(new CustomEvent('filter-toggle', {
detail: { item, active: newActive },
bubbles: true,
composed: true
}));
}
private handleMultiFilterOptionToggle(item: interfaces.ISecondaryMenuItemMultiFilter, optionKey: string): void {
// Update the option's checked state
const option = item.options.find(opt => opt.key === optionKey);
if (option) {
option.checked = !option.checked;
}
// Calculate the new selected keys
const selectedKeys = item.options
.filter(opt => opt.checked)
.map(opt => opt.key);
item.onChange(selectedKeys);
// Force re-render by incrementing the render counter
this.renderCounter++;
this.dispatchEvent(new CustomEvent('multifilter-change', {
detail: { item, selectedKeys },
bubbles: true,
composed: true
}));
}
private handleLinkClick(item: interfaces.ISecondaryMenuItemLink): void {
const isExternal = item.external ?? item.href.startsWith('http');
if (isExternal) {
window.open(item.href, '_blank', 'noopener,noreferrer');
} else {
window.location.href = item.href;
}
this.dispatchEvent(new CustomEvent('link-click', {
detail: { item },
bubbles: true,
composed: true
}));
}
private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItemTab): void {
DeesContextmenu.openContextMenuWithOptions(event, [
{
name: 'View details',
@@ -572,26 +1029,52 @@ export class DeesAppuiSecondarymenu extends DeesElement {
// Initialize collapsed state from group defaults
if (this.groups.length > 0) {
const initialCollapsed = new Set<string>();
const initialMultiFilterCollapsed = new Set<string>();
this.groups.forEach(group => {
if (group.collapsed) {
initialCollapsed.add(group.name);
}
});
this.collapsedGroups = initialCollapsed;
// Auto-select first item if none selected
if (!this.selectedItem && this.groups[0]?.items.length > 0) {
this.selectItem(this.groups[0].items[0], this.groups[0]);
// Check for collapsed multi-filters
group.items.forEach(item => {
if ('type' in item && item.type === 'multiFilter') {
const multiFilter = item as interfaces.ISecondaryMenuItemMultiFilter;
if (multiFilter.collapsed) {
initialMultiFilterCollapsed.add(multiFilter.key);
}
}
});
});
this.collapsedGroups = initialCollapsed;
this.collapsedMultiFilters = initialMultiFilterCollapsed;
// Auto-select first tab item if none selected
if (!this.selectedItem) {
for (const group of this.groups) {
for (const item of group.items) {
const itemType = 'type' in item ? item.type : 'tab';
if (itemType === 'tab' || itemType === undefined) {
const tabItem = item as interfaces.ISecondaryMenuItemTab;
if (!tabItem.disabled) {
this.selectTabItem(tabItem, group);
return;
}
}
}
}
}
} else if (this.selectionOptions.length > 0) {
// Legacy mode: select first non-divider option
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.IMenuItem;
if (firstOption && !this.selectedItem) {
this.selectItem({
const tabItem: interfaces.ISecondaryMenuItemTab = {
key: firstOption.key,
iconName: firstOption.iconName,
action: firstOption.action,
});
};
this.selectTabItem(tabItem);
}
}
}