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

feat(dees-appui-base): add interactive demo controls to manipulate appui via view activation context

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-29 12:03:11 +00:00
parent 3c1456c0c1
commit 0626889bef
3 changed files with 78 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.7.1',
version: '3.8.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

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

@@ -9,7 +9,10 @@ class DemoDashboardView extends DeesElement {
@state()
accessor activated: boolean = false;
private ctx: IViewActivationContext;
onActivate(context: IViewActivationContext) {
this.ctx = context;
this.activated = true;
console.log('Dashboard activated with context:', context);
@@ -75,6 +78,52 @@ class DemoDashboardView extends DeesElement {
.metric { font-size: 32px; font-weight: 700; color: #fafafa; }
.status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
.status.active { background: #14532d; color: #4ade80; }
.ctx-actions {
margin-top: 32px;
padding: 24px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
}
.ctx-actions h2 { color: #fafafa; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.button-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ctx-btn {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #60a5fa;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.15s ease;
}
.ctx-btn:hover {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.5);
}
.ctx-btn.danger {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #f87171;
}
.ctx-btn.danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.5);
}
.ctx-btn.success {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
color: #4ade80;
}
.ctx-btn.success:hover {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.5);
}
</style>
<h1>Dashboard</h1>
<p>Welcome back! Here's an overview of your system.</p>
@@ -95,6 +144,26 @@ class DemoDashboardView extends DeesElement {
<p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
</div>
</div>
<div class="ctx-actions">
<h2>Context Actions (ctx.appui)</h2>
<div class="button-grid">
<button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuVisible(false)}>Hide Main Menu</button>
<button class="ctx-btn success" @click=${() => this.ctx?.appui.setMainMenuVisible(true)}>Show Main Menu</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.setSecondaryMenuVisible(false)}>Hide Secondary Menu</button>
<button class="ctx-btn success" @click=${() => this.ctx?.appui.setSecondaryMenuVisible(true)}>Show Secondary Menu</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.setContentTabsVisible(false)}>Hide Content Tabs</button>
<button class="ctx-btn success" @click=${() => this.ctx?.appui.setContentTabsVisible(true)}>Show Content Tabs</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuCollapsed(true)}>Collapse Main Menu</button>
<button class="ctx-btn success" @click=${() => this.ctx?.appui.setMainMenuCollapsed(false)}>Expand Main Menu</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.setBreadcrumbs(['Dashboard', 'Overview', 'Stats'])}>Set Breadcrumbs</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.navigateToView('projects')}>Go to Projects</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.navigateToView('settings', { section: 'security' })}>Go to Settings/Security</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.activityLog.add({ type: 'custom', user: 'Demo User', message: 'Button clicked from ctx!', iconName: 'lucide:mouse-pointer-click' })}>Add Activity Entry</button>
<button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuBadge('tasks', 99)}>Set Tasks Badge to 99</button>
<button class="ctx-btn danger" @click=${() => this.ctx?.appui.clearMainMenuBadge('tasks')}>Clear Tasks Badge</button>
</div>
</div>
`;
}
}