v3.9.0

changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 2025-12-29 - 3.9.0 - feat(dees-appui-mainmenu)
+add status badges to main menu items with theme-aware styling
+
+- Introduce .badge element and layout (min-width, height, padding, font-size, weight, border-radius) to display counts/status on menu items.
+- Add four badge variants: default, success, warning, error, using cssManager.bdTheme for light/dark color pairs.
+- Render the badge element conditionally in the menu item template when tabArg.badge is provided; hide badges when host has [collapsed] attribute.
+
+## 2025-12-29 - 3.8.0 - feat(dees-appui-base)
+add interactive demo controls to manipulate appui via view activation context
+
+- Store IViewActivationContext on the demo element (this.ctx) during onActivate
+- Add a new "Context Actions" UI section with buttons that call ctx.appui methods (toggle main/secondary menus, content tabs, collapse/expand main menu, set breadcrumbs, navigate to views, add activity entry, set/clear menu badges)
+- Include styles for ctx-actions and button variants (success, danger, hover states)
+- Change is limited to the demo file (dees-appui-base.demo.ts) and is non-breaking
+
 ## 2025-12-29 - 3.7.1 - fix(dees-appui-maincontent)
 migrate main content layout to CSS Grid and enable topbar collapse transitions
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

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

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

@@ -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>
     `;
   }
 }

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -336,6 +336,44 @@ export class DeesAppuiMainmenu extends DeesElement {
         transition-delay: 1s;
       }
 
+      /* Badge styles */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 6px;
+        font-size: 11px;
+        font-weight: 600;
+        border-radius: 9px;
+        margin-left: auto;
+      }
+
+      .badge.default {
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+      }
+
+      .badge.success {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .badge.warning {
+        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .badge.error {
+        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      :host([collapsed]) .badge {
+        display: none;
+      }
+
       /* Bottom Section */
       .bottomSection {
         flex-shrink: 0;
@@ -420,6 +458,9 @@ export class DeesAppuiMainmenu extends DeesElement {
       >
         <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
         <span class="tabLabel">${tabArg.key}</span>
+        ${tabArg.badge !== undefined ? html`
+          <span class="badge ${tabArg.badgeVariant || 'default'}">${tabArg.badge}</span>
+        ` : ''}
         <span class="tab-tooltip">${tabArg.key}</span>
       </div>
     `;