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>
|
||||
|
||||
Reference in New Issue
Block a user