feat(structure): adjust

ts_web/elements/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -0,0 +1,121 @@
+import * as interfaces from './interfaces/index.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} 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
+      .tabs=${[
+        { key: 'Overview', iconName: 'lucide:home', action: () => console.log('Overview') },
+        { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details') },
+        { key: 'Settings', iconName: 'lucide:settings', 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,
+  })
+  accessor tabs: interfaces.ITab[] = [
+    { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
+  ];
+
+  @property({ type: Object })
+  accessor selectedTab: interfaces.ITab | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: ${cssManager.bdTheme('#ffffff', '#161616')};
+      }
+      .maincontainer {
+        position: absolute;
+        height: 100%;
+        right: 0px;
+        top: 0px;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        width: 100%;
+        user-select: none;
+      }
+
+      .content-area {
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="topbar">
+          <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>
+    `;
+  }
+
+  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
+    }));
+  }
+
+  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;
+    }
+  }
+}