feat: Enhance dees-appui components with dynamic tab and menu configurations

- Updated dees-appui-mainmenu to accept dynamic tabs with actions and icons.
- Modified dees-appui-mainselector to support dynamic selection options.
- Introduced dees-appui-tabs for improved tab navigation with customizable styles.
- Added dees-appui-view to manage views with tabs and content dynamically.
- Implemented event dispatching for tab and option selections.
- Created a comprehensive architecture documentation for dees-appui system.
- Added demo implementations for dees-appui-base and other components.
- Improved responsiveness and user interaction feedback across components.

ts_web/elements/dees-appui-maincontent.ts

@@ -11,24 +11,36 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
+import './dees-appui-tabs.js';
+import type { DeesAppuiTabs } from './dees-appui-tabs.js';
 
 @customElement('dees-appui-maincontent')
 export class DeesAppuiMaincontent extends DeesElement {
-  public static demo = () => html`<dees-appui-maincontent></dees-appui-maincontent>`;
+  public static demo = () => html`
+    <dees-appui-maincontent
+      .tabs=${[
+        { key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
+        { key: 'Details', iconName: 'file', action: () => console.log('Details') },
+        { key: 'Settings', iconName: 'cog', action: () => console.log('Settings') },
+      ]}
+    >
+      <div slot="content" style="padding: 40px; color: #ccc;">
+        <h1>Main Content Area</h1>
+        <p>This is where your application content goes.</p>
+      </div>
+    </dees-appui-maincontent>
+  `;
 
   // INSTANCE
   @property({
     type: Array,
   })
   public tabs: interfaces.ITab[] = [
-    { key: 'option 1', action: () => {} },
-    { key: 'a very long option', action: () => {} },
-    { key: 'reminder: set your tabs', action: () => {} },
-    { key: 'option 4', action: () => {} },
+    { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
   ];
 
-  @property()
-  public selectedTab = null;
+  @property({ type: Object })
+  public selectedTab: interfaces.ITab | null = null;
 
   public static styles = [
     cssManager.defaultStyles,
@@ -52,110 +64,58 @@ export class DeesAppuiMaincontent extends DeesElement {
       .topbar {
         position: absolute;
         width: 100%;
-        background: #000000;
         user-select: none;
       }
 
-      .topbar .tabsContainer {
-        padding-top: 20px;
-        padding-bottom: 0px;
-        position: relative;
-        z-index: 1;
-        display: grid;
-        margin-left: 24px;
-        font-size: 14px;
-      }
-
-      .topbar .tabsContainer .tab {
-        color: #a0a0a0;
-        white-space: nowrap;
-        margin-right: 30px;
-        padding-top: 4px;
-        padding-bottom: 12px;
-        transition: color 0.1s;
-      }
-
-      .topbar .tabsContainer .tab:hover {
-        color: #ffffff;
-      }
-
-      .topbar .tabsContainer .tab.selectedTab {
-        color: #e0e0e0;
-      }
-
-      .topbar .tabIndicator {
+      .content-area {
         position: absolute;
-        z-index: 0;
-        left: 40px;
-        bottom: 0px;
-        height: 40px;
-        width: 40px;
-        background: #161616;
-        transition: all 0.1s;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-        border-top: 1px solid #444444;
-      }
-
-      .mainicon {
+        top: 60px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style>
-        .topbar .tabsContainer {
-          grid-template-columns: repeat(${this.tabs.length}, min-content);
-        }
-      </style>
       <div class="maincontainer">
         <div class="topbar">
-          <div class="tabsContainer">
-            ${this.tabs.map((tabArg) => {
-              return html`
-                <div
-                  class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
-                  @click="${() => {
-                    this.selectedTab = tabArg;
-                    this.updateTabIndicator();
-                    tabArg.action();
-                  }}"
-                >
-                  ${tabArg.key}
-                </div>
-              `;
-            })}
-          </div>
-          <div class="tabIndicator"></div>
+          <dees-appui-tabs
+            .tabs=${this.tabs}
+            .selectedTab=${this.selectedTab}
+            .showTabIndicator=${true}
+            .tabStyle=${'horizontal'}
+            @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
+          ></dees-appui-tabs>
+        </div>
+        <div class="content-area">
+          <slot></slot>
+          <slot name="content"></slot>
         </div>
       </div>
     `;
   }
 
-  /**
-   * updates the indicator
-   */
-  private updateTabIndicator() {
-    let selectedTab = this.selectedTab;
-    const tabIndex = this.tabs.indexOf(selectedTab);
-    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
-      `.tabsContainer .tab:nth-child(${tabIndex + 1})`
-    );
-    const tabsContainer: HTMLElement = this.shadowRoot.querySelector('.tabsContainer');
-    const marginLeft = parseInt(window.getComputedStyle(tabsContainer).getPropertyValue("margin-left"));
-    const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
-    tabIndicator.style.width = selectedTabElement.clientWidth + 24 + 'px';
-    tabIndicator.style.left = selectedTabElement.offsetLeft + marginLeft - 12 + 'px';
+  private handleTabSelect(e: CustomEvent) {
+    this.selectedTab = e.detail.tab;
+    
+    // Re-emit the event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
   }
 
-  private updateTab(tabArg: interfaces.ITab) {
-    this.selectedTab = tabArg;
-    this.updateTabIndicator();
-    this.selectedTab.action();
-  }
-
-  firstUpdated() {
-    this.updateTab(this.tabs[0]);
+  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    // Tab selection is now handled by the dees-appui-tabs component
+    // But we need to ensure the tabs component is ready
+    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    if (tabsComponent) {
+      await tabsComponent.updateComplete;
+    }
   }
 }