122 lines
3.2 KiB
TypeScript
122 lines
3.2 KiB
TypeScript
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,
|
|
})
|
|
public tabs: interfaces.ITab[] = [
|
|
{ key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
|
|
];
|
|
|
|
@property({ type: Object })
|
|
public 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;
|
|
}
|
|
}
|
|
}
|