feat(dees-simple-appdash): add nested sidebar subviews and preserve submit labels from slotted text
This commit is contained in:
@@ -353,12 +353,35 @@ export const demoFunc = () => html`
|
||||
name: 'Analytics',
|
||||
iconName: 'lucide:lineChart',
|
||||
element: DemoViewAnalytics,
|
||||
subViews: [
|
||||
{
|
||||
name: 'Overview',
|
||||
iconName: 'lucide:activity',
|
||||
element: DemoViewAnalytics,
|
||||
},
|
||||
{
|
||||
name: 'Reports',
|
||||
iconName: 'lucide:fileText',
|
||||
element: DemoViewDashboard,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
element: DemoViewSettings,
|
||||
}
|
||||
subViews: [
|
||||
{
|
||||
name: 'Profile',
|
||||
iconName: 'lucide:user',
|
||||
element: DemoViewSettings,
|
||||
},
|
||||
{
|
||||
name: 'Billing',
|
||||
iconName: 'lucide:creditCard',
|
||||
element: DemoViewSettings,
|
||||
},
|
||||
],
|
||||
},
|
||||
] as IView[]}
|
||||
@logout=${() => {
|
||||
console.log('Logout event triggered');
|
||||
|
||||
@@ -26,7 +26,8 @@ declare global {
|
||||
export interface IView {
|
||||
name: string;
|
||||
iconName?: string;
|
||||
element: DeesElement['constructor']['prototype'];
|
||||
element?: DeesElement['constructor']['prototype'];
|
||||
subViews?: IView[];
|
||||
}
|
||||
|
||||
export type TGlobalMessageType = 'info' | 'success' | 'warning' | 'error';
|
||||
@@ -250,6 +251,55 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.viewTab .chevron {
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
opacity: 0.5;
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 0.2s ease, opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.viewTab.hasSubs:hover .chevron {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.viewTab.hasSubs.groupActive .chevron {
|
||||
transform: rotate(0deg);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.subViews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
margin: 2px 0 4px 12px;
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subViews::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 1px;
|
||||
background: var(--dees-color-border-default);
|
||||
}
|
||||
|
||||
.viewTab.sub {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.viewTab.sub dees-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.viewTab.sub.selected::before {
|
||||
left: -12px;
|
||||
}
|
||||
|
||||
.appActions {
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid var(--dees-color-border-default);
|
||||
@@ -563,10 +613,12 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
<div class="viewTabs-container">
|
||||
<div class="section-label">Navigation</div>
|
||||
<div class="viewTabs">
|
||||
${this.viewTabs.map(
|
||||
(view) => html`
|
||||
${this.viewTabs.map((view) => {
|
||||
const hasSubs = !!view.subViews?.length;
|
||||
const groupActive = hasSubs && this.isGroupActive(view);
|
||||
return html`
|
||||
<div
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''}"
|
||||
class="viewTab ${this.selectedView === view ? 'selected' : ''} ${hasSubs ? 'hasSubs' : ''} ${groupActive ? 'groupActive' : ''}"
|
||||
@click=${() => this.loadView(view)}
|
||||
>
|
||||
${view.iconName ? html`
|
||||
@@ -575,9 +627,34 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
<dees-icon .icon="${'lucide:file'}"></dees-icon>
|
||||
`}
|
||||
<span>${view.name}</span>
|
||||
${hasSubs ? html`
|
||||
<dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
|
||||
` : ''}
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
${hasSubs && groupActive ? html`
|
||||
<div class="subViews">
|
||||
${view.subViews!.map(
|
||||
(sub) => html`
|
||||
<div
|
||||
class="viewTab sub ${this.selectedView === sub ? 'selected' : ''}"
|
||||
@click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.loadView(sub);
|
||||
}}
|
||||
>
|
||||
${sub.iconName ? html`
|
||||
<dees-icon .icon="${sub.iconName.includes(':') ? sub.iconName : `lucide:${sub.iconName}`}"></dees-icon>
|
||||
` : html`
|
||||
<dees-icon .icon="${'lucide:dot'}"></dees-icon>
|
||||
`}
|
||||
<span>${sub.name}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
` : ''}
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div class="appActions">
|
||||
@@ -771,8 +848,23 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
}
|
||||
|
||||
|
||||
private isGroupActive(view: IView): boolean {
|
||||
if (this.selectedView === view) return true;
|
||||
return view.subViews?.some((sv) => sv === this.selectedView) ?? false;
|
||||
}
|
||||
|
||||
private currentView!: DeesElement;
|
||||
public async loadView(viewArg: IView) {
|
||||
// Group-only parent: resolve to first sub view with an element
|
||||
if (!viewArg.element && viewArg.subViews?.length) {
|
||||
const firstNavigable = viewArg.subViews.find((sv) => sv.element);
|
||||
if (firstNavigable) {
|
||||
return this.loadView(firstNavigable);
|
||||
}
|
||||
return; // nothing navigable — ignore click
|
||||
}
|
||||
if (!viewArg.element) return; // safety: no element and no subs → no-op
|
||||
|
||||
const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
|
||||
const view = new viewArg.element();
|
||||
if (this.currentView) {
|
||||
@@ -781,7 +873,7 @@ export class DeesSimpleAppDash extends DeesElement {
|
||||
appcontent.appendChild(view);
|
||||
this.currentView = view;
|
||||
this.selectedView = viewArg;
|
||||
|
||||
|
||||
// Emit view-select event
|
||||
this.dispatchEvent(new CustomEvent('view-select', {
|
||||
detail: { view: viewArg },
|
||||
|
||||
Reference in New Issue
Block a user