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

BREAKING CHANGE(dees-appui-secondarymenu): Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 14:35:06 +00:00
parent a91098527c
commit 778f457ed5
14 changed files with 773 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
View File

@@ -4,6 +4,7 @@ import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
import type { ITab } from '../../interfaces/tab.js';
import type { ISelectionOption } from '../../interfaces/selectionoption.js';
import type { IMenuGroup } from '../../interfaces/menugroup.js';
import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js';
import * as plugins from '../../00plugins.js';
import '@design.estate/dees-wcctools/demotools';
@@ -95,14 +96,48 @@ export const demoFunc = () => {
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
];
// Selector options (second sidebar)
const selectorOptions: (ISelectionOption | { divider: true })[] = [
{ key: 'Overview', iconName: 'home', action: () => console.log('Overview selected') },
{ key: 'Components', iconName: 'package', action: () => console.log('Components selected') },
{ key: 'Services', iconName: 'server', action: () => console.log('Services selected') },
{ divider: true },
{ key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
{ key: 'Settings', iconName: 'settings', action: () => console.log('Settings selected') },
// Secondary menu groups (second sidebar with collapsible groups)
// These showcase the new shadcn-style design with badges and collapsible sections
const secondaryMenuGroups: ISecondaryMenuGroup[] = [
{
name: 'Quick Access',
iconName: 'lucide:zap',
items: [
{ key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') },
{ key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 },
{ key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') },
]
},
{
name: 'Resources',
iconName: 'lucide:layers',
items: [
{ key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 },
{ key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' },
{ key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' },
{ key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') },
]
},
{
name: 'Data Management',
iconName: 'lucide:database',
items: [
{ key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
{ key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' },
{ key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' },
]
},
{
name: 'System',
iconName: 'lucide:settings',
collapsed: true,
items: [
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') },
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' },
{ key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') },
{ key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') },
]
}
];
// Main content tabs
@@ -155,7 +190,8 @@ export const demoFunc = () => {
.mainmenuLogoText=${'Acme App'}
.mainmenuGroups=${mainMenuGroups}
.mainmenuBottomTabs=${mainMenuBottomTabs}
.mainselectorOptions=${selectorOptions}
.secondarymenuHeading=${'Dashboard'}
.secondarymenuGroups=${secondaryMenuGroups}
.maincontentTabs=${mainContentTabs}
@appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
@appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
@@ -163,19 +199,37 @@ export const demoFunc = () => {
@appbar-user-menu-open=${() => console.log('User menu opened')}
@appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)}
@mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
@mainselector-option-select=${(e: CustomEvent) => console.log('Option selected:', e.detail)}
@secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
>
<div slot="maincontent" style="padding: 40px; color: #ccc;">
<h1>Application Content</h1>
<p>This is the main content area where your application's primary interface would be displayed.</p>
<p>The layout includes:</p>
<ul>
<li>App bar with menus, breadcrumbs, and user account</li>
<li>Main menu (left sidebar) for primary navigation</li>
<li>Selector menu (second sidebar) for sub-navigation</li>
<li>Main content area (this section)</li>
<li>Activity log (right sidebar)</li>
</ul>
<div slot="maincontent" style="padding: 40px; color: #a3a3a3; font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;">
<h1 style="color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px;">Welcome to Acme App</h1>
<p style="color: #737373; margin-bottom: 32px;">This demo showcases the AppUI component system with the new SecondaryMenu.</p>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
<h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">SecondaryMenu Features</h3>
<ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8;">
<li>Collapsible groups with smooth animations</li>
<li>Badge support (counts, status, variants)</li>
<li>Dynamic heading from MainMenu selection</li>
<li>shadcn-inspired modern design</li>
</ul>
</div>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
<h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">Badge Variants</h3>
<div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">
<span style="background: #27272a; color: #a1a1aa; padding: 2px 8px; border-radius: 9px;">default</span>
<span style="background: #14532d; color: #4ade80; padding: 2px 8px; border-radius: 9px;">success</span>
<span style="background: #451a03; color: #fbbf24; padding: 2px 8px; border-radius: 9px;">warning</span>
<span style="background: #450a0a; color: #f87171; padding: 2px 8px; border-radius: 9px;">error</span>
</div>
</div>
</div>
<p style="font-size: 13px; color: #525252;">
Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically.
Click group headers in the SecondaryMenu to collapse/expand sections.
</p>
</div>
</dees-appui-base>
</div>

43
ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
View File

@@ -12,7 +12,7 @@ import * as interfaces from '../../interfaces/index.js';
import * as plugins from '../../00plugins.js';
import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import type { DeesAppuiMainselector } from '../dees-appui-mainselector/dees-appui-mainselector.js';
import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
import { demoFunc } from './dees-appui-base.demo.js';
@@ -20,7 +20,7 @@ import { demoFunc } from './dees-appui-base.demo.js';
// Import child components
import '../dees-appui-appbar/index.js';
import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import '../dees-appui-mainselector/dees-appui-mainselector.js';
import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import '../dees-appui-maincontent/dees-appui-maincontent.js';
import '../dees-appui-activitylog/dees-appui-activitylog.js';
@@ -75,12 +75,19 @@ export class DeesAppuiBase extends DeesElement {
@property({ type: Object })
accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
// Properties for mainselector
// Properties for secondarymenu
@property({ type: String })
accessor secondarymenuHeading: string = 'Menu';
@property({ type: Array })
accessor mainselectorOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
@property({ type: Object })
accessor mainselectorSelectedOption: interfaces.ISelectionOption | undefined = undefined;
accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
/** Legacy support for flat options (backward compatibility) */
@property({ type: Array })
accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
// Properties for maincontent
@property({ type: Array })
@@ -94,7 +101,7 @@ export class DeesAppuiBase extends DeesElement {
accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
@state()
accessor mainselector: DeesAppuiMainselector | undefined = undefined;
accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
@state()
accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
@@ -151,11 +158,13 @@ export class DeesAppuiBase extends DeesElement {
.selectedTab=${this.mainmenuSelectedTab}
@tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
></dees-appui-mainmenu>
<dees-appui-mainselector
.selectionOptions=${this.mainselectorOptions}
.selectedOption=${this.mainselectorSelectedOption}
@option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
></dees-appui-mainselector>
<dees-appui-secondarymenu
.heading=${this.secondarymenuHeading}
.groups=${this.secondarymenuGroups}
.selectionOptions=${this.secondarymenuOptions}
.selectedItem=${this.secondarymenuSelectedItem}
@item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
></dees-appui-secondarymenu>
<dees-appui-maincontent
.tabs=${this.maincontentTabs}
>
@@ -170,7 +179,7 @@ export class DeesAppuiBase extends DeesElement {
// Get references to child components
this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
this.mainselector = this.shadowRoot.querySelector('dees-appui-mainselector');
this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
}
@@ -217,6 +226,8 @@ export class DeesAppuiBase extends DeesElement {
// Event handlers for mainmenu
private handleMainmenuTabSelect(e: CustomEvent) {
this.mainmenuSelectedTab = e.detail.tab;
// Update secondary menu heading based on main menu selection
this.secondarymenuHeading = e.detail.tab.key;
this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
detail: e.detail,
bubbles: true,
@@ -224,10 +235,10 @@ export class DeesAppuiBase extends DeesElement {
}));
}
// Event handlers for mainselector
private handleMainselectorOptionSelect(e: CustomEvent) {
this.mainselectorSelectedOption = e.detail.option;
this.dispatchEvent(new CustomEvent('mainselector-option-select', {
// Event handlers for secondarymenu
private handleSecondarymenuItemSelect(e: CustomEvent) {
this.secondarymenuSelectedItem = e.detail.item;
this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
detail: e.detail,
bubbles: true,
composed: true