BREAKING CHANGE(dees-appui-secondarymenu): Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,211 +0,0 @@
|
||||
import * as plugins from '../../00plugins.js';
|
||||
import * as interfaces from '../../interfaces/index.js';
|
||||
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* the property selector menu
|
||||
* mainly used to select assets within in an organization
|
||||
*/
|
||||
@customElement('dees-appui-mainselector')
|
||||
export class DeesAppuiMainselector extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<dees-appui-mainselector
|
||||
.selectionOptions=${[
|
||||
{ key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
|
||||
{ key: 'Components', iconName: 'package', action: () => console.log('Components') },
|
||||
{ key: 'Services', iconName: 'server', action: () => console.log('Services') },
|
||||
{ key: 'Database', iconName: 'database', action: () => console.log('Database') },
|
||||
{ key: 'Settings', iconName: 'settings', action: () => console.log('Settings') },
|
||||
]}
|
||||
></dees-appui-mainselector>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Array })
|
||||
accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [
|
||||
{ key: '⚠️ Please set selection options', action: () => console.warn('No selection options configured for mainselector') },
|
||||
];
|
||||
|
||||
@property()
|
||||
accessor selectedOption: interfaces.ISelectionOption = null;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#000000')};
|
||||
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
}
|
||||
|
||||
.topbar .heading {
|
||||
padding-left: 12px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.selectionOptions {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption {
|
||||
cursor: default;
|
||||
padding: 8px 12px;
|
||||
margin: 0;
|
||||
transition: background 0.1s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:active {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption.selectedOption {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
||||
color: ${cssManager.bdTheme('#000', '#fff')};
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption.selectedOption::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
|
||||
}
|
||||
|
||||
.selectionOption {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selection-divider {
|
||||
height: 1px;
|
||||
background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
|
||||
margin: 4px 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="maincontainer">
|
||||
<div class="topbar">
|
||||
<div class="heading">Selector</div>
|
||||
</div>
|
||||
<div class="selectionOptions">
|
||||
${this.selectionOptions.map((selectionOptionArg) => {
|
||||
if ('divider' in selectionOptionArg && selectionOptionArg.divider) {
|
||||
return html`<div class="selection-divider"></div>`;
|
||||
}
|
||||
|
||||
const option = selectionOptionArg as interfaces.ISelectionOption;
|
||||
return html`
|
||||
<div
|
||||
class="selectionOption ${this.selectedOption === option
|
||||
? 'selectedOption'
|
||||
: null}"
|
||||
@click="${() => {
|
||||
this.selectOption(option);
|
||||
}}"
|
||||
@contextmenu="${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'property settings',
|
||||
action: async () => {},
|
||||
iconName: 'gear',
|
||||
},
|
||||
]);
|
||||
}}"
|
||||
>
|
||||
${option.iconName ? html`
|
||||
<dees-icon .icon="${`lucide:${option.iconName}`}" style="font-size: 14px; opacity: 0.7;"></dees-icon>
|
||||
` : ''}
|
||||
<span style="flex: 1;">${option.key}</span>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private selectOption(optionArg: interfaces.ISelectionOption) {
|
||||
this.selectedOption = optionArg;
|
||||
this.selectedOption.action();
|
||||
|
||||
// Emit option-select event
|
||||
this.dispatchEvent(new CustomEvent('option-select', {
|
||||
detail: { option: optionArg },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
|
||||
await super.firstUpdated(_changedProperties);
|
||||
if (this.selectionOptions && this.selectionOptions.length > 0) {
|
||||
await this.updateComplete;
|
||||
// Find first non-divider option
|
||||
const firstOption = this.selectionOptions.find(option => !('divider' in option)) as interfaces.ISelectionOption;
|
||||
if (firstOption) {
|
||||
this.selectOption(firstOption);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './dees-appui-mainselector.js';
|
||||
@@ -0,0 +1,486 @@
|
||||
import * as plugins from '../../00plugins.js';
|
||||
import * as interfaces from '../../interfaces/index.js';
|
||||
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
state,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* Secondary navigation menu for sub-navigation within MainMenu views
|
||||
* Supports collapsible groups, badges, and dynamic headings
|
||||
*/
|
||||
@customElement('dees-appui-secondarymenu')
|
||||
export class DeesAppuiSecondarymenu extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demo-container {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<dees-appui-secondarymenu
|
||||
.heading=${'Projects'}
|
||||
.groups=${[
|
||||
{
|
||||
name: 'Active',
|
||||
iconName: 'lucide:folder',
|
||||
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') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Archived',
|
||||
iconName: 'lucide:archive',
|
||||
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' },
|
||||
]
|
||||
}
|
||||
] as interfaces.ISecondaryMenuGroup[]}
|
||||
@item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
|
||||
></dees-appui-secondarymenu>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
/** Dynamic heading - typically shows the selected MainMenu item */
|
||||
@property({ type: String })
|
||||
accessor heading: string = 'Menu';
|
||||
|
||||
/** Grouped items with collapse support */
|
||||
@property({ type: Array })
|
||||
accessor groups: interfaces.ISecondaryMenuGroup[] = [];
|
||||
|
||||
/** Legacy flat list support for backward compatibility */
|
||||
@property({ type: Array })
|
||||
accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
|
||||
|
||||
/** Currently selected item */
|
||||
@property({ type: Object })
|
||||
accessor selectedItem: interfaces.ISecondaryMenuItem | null = null;
|
||||
|
||||
/** Internal state for collapsed groups */
|
||||
@state()
|
||||
accessor collapsedGroups: Set<string> = new Set();
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
--sidebar-width: 240px;
|
||||
--sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
--sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
|
||||
--sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
|
||||
--sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
--sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
|
||||
--sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
|
||||
--sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
||||
--sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
|
||||
/* Badge colors */
|
||||
--badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
--badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
|
||||
--badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
|
||||
--badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
|
||||
--badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
|
||||
--badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
||||
--badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
|
||||
--badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
|
||||
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--sidebar-width);
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 16px;
|
||||
border-bottom: 1px solid var(--sidebar-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header .heading {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--sidebar-fg-active);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Scrollable Menu Section */
|
||||
.menuSection {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.menuSection::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.menuSection::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menuSection::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.menuSection::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
|
||||
}
|
||||
|
||||
/* Menu Group */
|
||||
.menuGroup {
|
||||
padding: 0 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.groupHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.groupHeader:hover {
|
||||
background: var(--sidebar-hover);
|
||||
}
|
||||
|
||||
.groupHeader .groupTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--sidebar-fg-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.groupHeader .groupTitle dees-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.groupHeader .chevron {
|
||||
font-size: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
color: var(--sidebar-fg-muted);
|
||||
}
|
||||
|
||||
.groupHeader.collapsed .chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Group Items Container */
|
||||
.groupItems {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.25s ease, opacity 0.2s ease;
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.groupItems.collapsed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Menu Item */
|
||||
.menuItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
margin: 2px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 450;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
background: var(--sidebar-hover);
|
||||
color: var(--sidebar-fg-active);
|
||||
}
|
||||
|
||||
.menuItem:active {
|
||||
background: var(--sidebar-active);
|
||||
}
|
||||
|
||||
.menuItem.selected {
|
||||
background: var(--sidebar-active);
|
||||
color: var(--sidebar-fg-active);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menuItem.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: var(--sidebar-accent);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.menuItem dees-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menuItem.selected dees-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menuItem .itemLabel {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 9px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge.default {
|
||||
background: var(--badge-default-bg);
|
||||
color: var(--badge-default-fg);
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: var(--badge-success-bg);
|
||||
color: var(--badge-success-fg);
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: var(--badge-warning-bg);
|
||||
color: var(--badge-warning-fg);
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
background: var(--badge-error-bg);
|
||||
color: var(--badge-error-fg);
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--sidebar-border);
|
||||
margin: 8px 12px;
|
||||
}
|
||||
|
||||
/* Legacy options container */
|
||||
.legacyOptions {
|
||||
padding: 0 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="maincontainer">
|
||||
<div class="header">
|
||||
<span class="heading">${this.heading}</span>
|
||||
</div>
|
||||
<div class="menuSection">
|
||||
${this.groups.length > 0
|
||||
? this.renderGroups()
|
||||
: this.renderLegacyOptions()}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderGroups(): TemplateResult {
|
||||
return html`
|
||||
${this.groups.map((group) => html`
|
||||
<div class="menuGroup">
|
||||
<div
|
||||
class="groupHeader ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}"
|
||||
@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.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))}
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderMenuItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
|
||||
const isSelected = this.selectedItem?.key === item.key;
|
||||
return html`
|
||||
<div
|
||||
class="menuItem ${isSelected ? 'selected' : ''}"
|
||||
@click="${() => this.selectItem(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>` : ''}
|
||||
<span class="itemLabel">${item.key}</span>
|
||||
${item.badge !== undefined ? html`
|
||||
<span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderLegacyOptions(): TemplateResult {
|
||||
return html`
|
||||
<div class="legacyOptions">
|
||||
${this.selectionOptions.map((option) => {
|
||||
if ('divider' in option && option.divider) {
|
||||
return html`<div class="divider"></div>`;
|
||||
}
|
||||
const item = option as interfaces.ISelectionOption;
|
||||
return this.renderMenuItem({
|
||||
key: item.key,
|
||||
iconName: item.iconName,
|
||||
action: item.action,
|
||||
});
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private toggleGroup(groupName: string): void {
|
||||
const newCollapsed = new Set(this.collapsedGroups);
|
||||
if (newCollapsed.has(groupName)) {
|
||||
newCollapsed.delete(groupName);
|
||||
} else {
|
||||
newCollapsed.add(groupName);
|
||||
}
|
||||
this.collapsedGroups = newCollapsed;
|
||||
}
|
||||
|
||||
private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
|
||||
this.selectedItem = item;
|
||||
item.action();
|
||||
|
||||
this.dispatchEvent(new CustomEvent('item-select', {
|
||||
detail: { item, group },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItem): void {
|
||||
DeesContextmenu.openContextMenuWithOptions(event, [
|
||||
{
|
||||
name: 'View details',
|
||||
action: async () => {},
|
||||
iconName: 'lucide:eye',
|
||||
},
|
||||
{
|
||||
name: 'Edit',
|
||||
action: async () => {},
|
||||
iconName: 'lucide:pencil',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
|
||||
await super.firstUpdated(_changedProperties);
|
||||
|
||||
// Initialize collapsed state from group defaults
|
||||
if (this.groups.length > 0) {
|
||||
const initialCollapsed = 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]);
|
||||
}
|
||||
} else if (this.selectionOptions.length > 0) {
|
||||
// Legacy mode: select first non-divider option
|
||||
const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.ISelectionOption;
|
||||
if (firstOption && !this.selectedItem) {
|
||||
this.selectItem({
|
||||
key: firstOption.key,
|
||||
iconName: firstOption.iconName,
|
||||
action: firstOption.action,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-appui-secondarymenu': DeesAppuiSecondarymenu;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-appui-secondarymenu.js';
|
||||
@@ -4,7 +4,7 @@ export * from './dees-appui-appbar/index.js';
|
||||
export * from './dees-appui-base/index.js';
|
||||
export * from './dees-appui-maincontent/index.js';
|
||||
export * from './dees-appui-mainmenu/index.js';
|
||||
export * from './dees-appui-mainselector/index.js';
|
||||
export * from './dees-appui-secondarymenu/index.js';
|
||||
export * from './dees-appui-profiledropdown/index.js';
|
||||
export * from './dees-appui-tabs/index.js';
|
||||
export * from './dees-appui-view/index.js';
|
||||
|
||||
Reference in New Issue
Block a user