feat(structure): adjust
This commit is contained in:
157
ts_web/elements/dees-appui-base/dees-appui-base.demo.ts
Normal file
157
ts_web/elements/dees-appui-base/dees-appui-base.demo.ts
Normal file
@@ -0,0 +1,157 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import type { DeesAppuiBase } from './dees-appui-base.js';
|
||||
import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js';
|
||||
import type { ITab } from './interfaces/tab.js';
|
||||
import type { ISelectionOption } from './interfaces/selectionoption.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
|
||||
export const demoFunc = () => {
|
||||
// Menu items for the appbar
|
||||
const menuItems: IAppBarMenuItem[] = [
|
||||
{
|
||||
name: 'File',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') },
|
||||
{ name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') },
|
||||
{ name: 'Recent Projects', action: async () => {}, submenu: [
|
||||
{ name: 'my-app', action: async () => console.log('Open my-app') },
|
||||
{ name: 'component-lib', action: async () => console.log('Open component-lib') },
|
||||
{ name: 'api-server', action: async () => console.log('Open api-server') },
|
||||
]},
|
||||
{ divider: true },
|
||||
{ name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
|
||||
{ divider: true },
|
||||
{ name: 'Close Project', action: async () => console.log('Close project') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Edit',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
|
||||
{ name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
|
||||
{ divider: true },
|
||||
{ name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
|
||||
{ name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
|
||||
{ name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'View',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
|
||||
{ name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
|
||||
{ divider: true },
|
||||
{ name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') },
|
||||
{ name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') },
|
||||
{ name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Help',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
|
||||
{ name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') },
|
||||
{ divider: true },
|
||||
{ name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
|
||||
{ name: 'About', iconName: 'info', action: async () => console.log('About') },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Main menu tabs (left sidebar)
|
||||
const mainMenuTabs: ITab[] = [
|
||||
{ key: 'dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
|
||||
{ key: 'projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
|
||||
{ key: 'analytics', iconName: 'lucide:lineChart', action: () => console.log('Analytics selected') },
|
||||
{ key: 'settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
|
||||
];
|
||||
|
||||
// Selector options (second sidebar)
|
||||
const selectorOptions: (ISelectionOption | { divider: true })[] = [
|
||||
{ key: 'Overview', iconName: 'home', action: () => console.log('Overview selected') },
|
||||
{ key: 'Components', iconName: 'package', action: () => console.log('Components selected') },
|
||||
{ key: 'Services', iconName: 'server', action: () => console.log('Services selected') },
|
||||
{ divider: true },
|
||||
{ key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
|
||||
{ key: 'Settings', iconName: 'settings', action: () => console.log('Settings selected') },
|
||||
];
|
||||
|
||||
// Main content tabs
|
||||
const mainContentTabs: ITab[] = [
|
||||
{ key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') },
|
||||
{ key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') },
|
||||
{ key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') },
|
||||
];
|
||||
|
||||
// Profile menu items
|
||||
const profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [
|
||||
{ name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile settings') },
|
||||
{ name: 'Account', iconName: 'settings', action: async () => console.log('Account settings') },
|
||||
{ divider: true },
|
||||
{ name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
|
||||
{ name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+K', action: async () => console.log('Shortcuts') },
|
||||
{ divider: true },
|
||||
{ name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
|
||||
];
|
||||
|
||||
return html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-appui-base
|
||||
.appbarMenuItems=${menuItems}
|
||||
.appbarBreadcrumbs=${'Dashboard'}
|
||||
.appbarUser=${{
|
||||
name: 'Jane Smith',
|
||||
email: 'jane.smith@example.com',
|
||||
status: 'online' as 'online' | 'offline' | 'busy' | 'away'
|
||||
}}
|
||||
.appbarProfileMenuItems=${profileMenuItems}
|
||||
.appbarShowWindowControls=${true}
|
||||
.appbarShowSearch=${true}
|
||||
.mainmenuTabs=${mainMenuTabs}
|
||||
.mainselectorOptions=${selectorOptions}
|
||||
.maincontentTabs=${mainContentTabs}
|
||||
@appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
|
||||
@appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
|
||||
@appbar-search-click=${() => console.log('Search clicked')}
|
||||
@appbar-user-menu-open=${() => console.log('User menu opened')}
|
||||
@appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)}
|
||||
@mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
|
||||
@mainselector-option-select=${(e: CustomEvent) => console.log('Option selected:', e.detail)}
|
||||
>
|
||||
<div slot="maincontent" style="padding: 40px; color: #ccc;">
|
||||
<h1>Application Content</h1>
|
||||
<p>This is the main content area where your application's primary interface would be displayed.</p>
|
||||
<p>The layout includes:</p>
|
||||
<ul>
|
||||
<li>App bar with menus, breadcrumbs, and user account</li>
|
||||
<li>Main menu (left sidebar) for primary navigation</li>
|
||||
<li>Selector menu (second sidebar) for sub-navigation</li>
|
||||
<li>Main content area (this section)</li>
|
||||
<li>Activity log (right sidebar)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</dees-appui-base>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
219
ts_web/elements/dees-appui-base/dees-appui-base.ts
Normal file
219
ts_web/elements/dees-appui-base/dees-appui-base.ts
Normal file
@@ -0,0 +1,219 @@
|
||||
import {
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import * as plugins from './00plugins.js';
|
||||
import type { DeesAppuiBar } from './dees-appui-appbar/index.js';
|
||||
import type { DeesAppuiMainmenu } from './dees-appui-mainmenu.js';
|
||||
import type { DeesAppuiMainselector } from './dees-appui-mainselector.js';
|
||||
import type { DeesAppuiMaincontent } from './dees-appui-maincontent.js';
|
||||
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
|
||||
import { demoFunc } from './dees-appui-base.demo.js';
|
||||
|
||||
// Import child components
|
||||
import './dees-appui-appbar/index.js';
|
||||
import './dees-appui-mainmenu.js';
|
||||
import './dees-appui-mainselector.js';
|
||||
import './dees-appui-maincontent.js';
|
||||
import './dees-appui-activitylog.js';
|
||||
|
||||
@customElement('dees-appui-base')
|
||||
export class DeesAppuiBase extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// Properties for appbar
|
||||
@property({ type: Array })
|
||||
accessor appbarMenuItems: interfaces.IAppBarMenuItem[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
accessor appbarBreadcrumbs: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
accessor appbarBreadcrumbSeparator: string = ' > ';
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor appbarShowWindowControls: boolean = true;
|
||||
|
||||
|
||||
@property({ type: Object })
|
||||
accessor appbarUser: {
|
||||
name: string;
|
||||
email?: string;
|
||||
avatar?: string;
|
||||
status?: 'online' | 'offline' | 'busy' | 'away';
|
||||
} | undefined = undefined;
|
||||
|
||||
@property({ type: Array })
|
||||
accessor appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor appbarShowSearch: boolean = false;
|
||||
|
||||
// Properties for mainmenu
|
||||
@property({ type: Array })
|
||||
accessor mainmenuTabs: interfaces.ITab[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
|
||||
|
||||
// Properties for mainselector
|
||||
@property({ type: Array })
|
||||
accessor mainselectorOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor mainselectorSelectedOption: interfaces.ISelectionOption | undefined = undefined;
|
||||
|
||||
// Properties for maincontent
|
||||
@property({ type: Array })
|
||||
accessor maincontentTabs: interfaces.ITab[] = [];
|
||||
|
||||
// References to child components
|
||||
@state()
|
||||
accessor appbar: DeesAppuiBar | undefined = undefined;
|
||||
|
||||
@state()
|
||||
accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
|
||||
|
||||
@state()
|
||||
accessor mainselector: DeesAppuiMainselector | undefined = undefined;
|
||||
|
||||
@state()
|
||||
accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
|
||||
|
||||
@state()
|
||||
accessor activitylog: DeesAppuiActivitylog | undefined = undefined;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
|
||||
}
|
||||
.maingrid {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 240px 1fr 240px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<dees-appui-appbar
|
||||
.menuItems=${this.appbarMenuItems}
|
||||
.breadcrumbs=${this.appbarBreadcrumbs}
|
||||
.breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
|
||||
.showWindowControls=${this.appbarShowWindowControls}
|
||||
.user=${this.appbarUser}
|
||||
.profileMenuItems=${this.appbarProfileMenuItems}
|
||||
.showSearch=${this.appbarShowSearch}
|
||||
@menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
|
||||
@breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
|
||||
@search-click=${() => this.handleAppbarSearchClick()}
|
||||
@user-menu-open=${() => this.handleAppbarUserMenuOpen()}
|
||||
@profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
|
||||
></dees-appui-appbar>
|
||||
<div class="maingrid">
|
||||
<dees-appui-mainmenu
|
||||
.tabs=${this.mainmenuTabs}
|
||||
.selectedTab=${this.mainmenuSelectedTab}
|
||||
@tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
|
||||
></dees-appui-mainmenu>
|
||||
<dees-appui-mainselector
|
||||
.selectionOptions=${this.mainselectorOptions}
|
||||
.selectedOption=${this.mainselectorSelectedOption}
|
||||
@option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
|
||||
></dees-appui-mainselector>
|
||||
<dees-appui-maincontent
|
||||
.tabs=${this.maincontentTabs}
|
||||
>
|
||||
<slot name="maincontent"></slot>
|
||||
</dees-appui-maincontent>
|
||||
<dees-appui-activitylog></dees-appui-activitylog>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
// Get references to child components
|
||||
this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
|
||||
this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
|
||||
this.mainselector = this.shadowRoot.querySelector('dees-appui-mainselector');
|
||||
this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
|
||||
this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
|
||||
}
|
||||
|
||||
// Event handlers for appbar
|
||||
private handleAppbarMenuSelect(e: CustomEvent) {
|
||||
this.dispatchEvent(new CustomEvent('appbar-menu-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
|
||||
this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleAppbarSearchClick() {
|
||||
this.dispatchEvent(new CustomEvent('appbar-search-click', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleAppbarUserMenuOpen() {
|
||||
this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private handleAppbarProfileMenuSelect(e: CustomEvent) {
|
||||
this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
// Event handlers for mainmenu
|
||||
private handleMainmenuTabSelect(e: CustomEvent) {
|
||||
this.mainmenuSelectedTab = e.detail.tab;
|
||||
this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
// Event handlers for mainselector
|
||||
private handleMainselectorOptionSelect(e: CustomEvent) {
|
||||
this.mainselectorSelectedOption = e.detail.option;
|
||||
this.dispatchEvent(new CustomEvent('mainselector-option-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user