feat(dees-appui-base): overhaul AppUI core: replace simple view rendering with a full-featured ViewRegistry (caching, hide/show lifecycle, async lazy-loading), introduce view lifecycle hooks and activation context, add activity log API/component, remove built-in router and state manager, and update configuration interfaces and demos
This commit is contained in:
@@ -1,271 +0,0 @@
|
||||
import type { IRoutingConfig, IViewDefinition } from '../../interfaces/appconfig.js';
|
||||
import type { ViewRegistry } from './view.registry.js';
|
||||
|
||||
export type TRouteChangeCallback = (viewId: string, params?: Record<string, string>) => void;
|
||||
|
||||
/**
|
||||
* Router for managing view navigation and URL synchronization
|
||||
*/
|
||||
export class AppRouter {
|
||||
private config: Required<Omit<IRoutingConfig, 'notFound'>> & Pick<IRoutingConfig, 'notFound'>;
|
||||
private viewRegistry: ViewRegistry;
|
||||
private listeners: Set<TRouteChangeCallback> = new Set();
|
||||
private currentViewId: string | null = null;
|
||||
private isInitialized: boolean = false;
|
||||
|
||||
constructor(config: IRoutingConfig, viewRegistry: ViewRegistry) {
|
||||
this.config = {
|
||||
mode: config.mode,
|
||||
basePath: config.basePath || '',
|
||||
defaultView: config.defaultView || '',
|
||||
syncUrl: config.syncUrl ?? true,
|
||||
notFound: config.notFound,
|
||||
};
|
||||
this.viewRegistry = viewRegistry;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the router
|
||||
*/
|
||||
public init(): void {
|
||||
if (this.isInitialized) return;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
window.addEventListener('hashchange', this.handleHashChange);
|
||||
// Check initial hash
|
||||
const initialView = this.getViewFromHash();
|
||||
if (initialView) {
|
||||
this.navigate(initialView, { source: 'initial' });
|
||||
} else if (this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
} else if (this.config.mode === 'history') {
|
||||
window.addEventListener('popstate', this.handlePopState);
|
||||
// Check initial path
|
||||
const initialView = this.getViewFromPath();
|
||||
if (initialView) {
|
||||
this.navigate(initialView, { source: 'initial' });
|
||||
} else if (this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
} else if (this.config.mode === 'none' && this.config.defaultView) {
|
||||
this.navigate(this.config.defaultView, { source: 'initial' });
|
||||
}
|
||||
// For 'external' mode, we don't set up listeners - the external router handles it
|
||||
|
||||
this.isInitialized = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to a view by ID
|
||||
*/
|
||||
public navigate(
|
||||
viewId: string,
|
||||
options: {
|
||||
source?: 'navigation' | 'popstate' | 'initial' | 'programmatic';
|
||||
replace?: boolean;
|
||||
params?: Record<string, string>;
|
||||
} = {}
|
||||
): boolean {
|
||||
const { source = 'programmatic', replace = false, params } = options;
|
||||
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
if (!view) {
|
||||
console.warn(`Cannot navigate to unknown view: ${viewId}`);
|
||||
if (this.config.notFound) {
|
||||
if (typeof this.config.notFound === 'function') {
|
||||
this.config.notFound();
|
||||
} else {
|
||||
return this.navigate(this.config.notFound, { source, replace: true });
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const previousViewId = this.currentViewId;
|
||||
this.currentViewId = viewId;
|
||||
|
||||
// Update URL if configured
|
||||
if (this.config.syncUrl && this.config.mode !== 'none' && this.config.mode !== 'external') {
|
||||
this.updateUrl(view, replace);
|
||||
}
|
||||
|
||||
// Notify listeners
|
||||
this.notifyListeners(viewId, params);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate back in history
|
||||
*/
|
||||
public back(): void {
|
||||
if (this.config.mode === 'hash' || this.config.mode === 'history') {
|
||||
window.history.back();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate forward in history
|
||||
*/
|
||||
public forward(): void {
|
||||
if (this.config.mode === 'hash' || this.config.mode === 'history') {
|
||||
window.history.forward();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current view ID
|
||||
*/
|
||||
public getCurrentViewId(): string | null {
|
||||
return this.currentViewId;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a route change listener
|
||||
*/
|
||||
public onRouteChange(callback: TRouteChangeCallback): () => void {
|
||||
this.listeners.add(callback);
|
||||
return () => this.listeners.delete(callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle external navigation (for external router mode)
|
||||
*/
|
||||
public handleExternalNavigation(viewId: string, params?: Record<string, string>): void {
|
||||
if (this.config.mode !== 'external') {
|
||||
console.warn('handleExternalNavigation should only be used in external mode');
|
||||
}
|
||||
|
||||
const previousViewId = this.currentViewId;
|
||||
this.currentViewId = viewId;
|
||||
this.notifyListeners(viewId, params);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync state with URL (for external router integration)
|
||||
*/
|
||||
public syncWithUrl(): string | null {
|
||||
if (this.config.mode === 'hash') {
|
||||
return this.getViewFromHash();
|
||||
} else if (this.config.mode === 'history') {
|
||||
return this.getViewFromPath();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current route from the URL
|
||||
*/
|
||||
public getCurrentRoute(): string {
|
||||
if (this.config.mode === 'hash') {
|
||||
return window.location.hash.slice(1) || '';
|
||||
} else if (this.config.mode === 'history') {
|
||||
let path = window.location.pathname;
|
||||
if (this.config.basePath && path.startsWith(this.config.basePath)) {
|
||||
path = path.slice(this.config.basePath.length);
|
||||
}
|
||||
return path.replace(/^\//, '');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a URL for a view
|
||||
*/
|
||||
public buildUrl(viewId: string): string {
|
||||
const view = this.viewRegistry.get(viewId);
|
||||
const route = view?.route || viewId;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
return `#${route}`;
|
||||
} else if (this.config.mode === 'history') {
|
||||
return `${this.config.basePath}/${route}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy the router
|
||||
*/
|
||||
public destroy(): void {
|
||||
if (this.config.mode === 'hash') {
|
||||
window.removeEventListener('hashchange', this.handleHashChange);
|
||||
} else if (this.config.mode === 'history') {
|
||||
window.removeEventListener('popstate', this.handlePopState);
|
||||
}
|
||||
this.listeners.clear();
|
||||
this.isInitialized = false;
|
||||
}
|
||||
|
||||
// Private methods
|
||||
|
||||
private handleHashChange = (): void => {
|
||||
const viewId = this.getViewFromHash();
|
||||
if (viewId && viewId !== this.currentViewId) {
|
||||
this.navigate(viewId, { source: 'popstate' });
|
||||
}
|
||||
};
|
||||
|
||||
private handlePopState = (): void => {
|
||||
const viewId = this.getViewFromPath();
|
||||
if (viewId && viewId !== this.currentViewId) {
|
||||
this.navigate(viewId, { source: 'popstate' });
|
||||
}
|
||||
};
|
||||
|
||||
private getViewFromHash(): string | null {
|
||||
const hash = window.location.hash.slice(1); // Remove #
|
||||
if (!hash) return null;
|
||||
|
||||
// Try to find view by route
|
||||
const view = this.viewRegistry.findByRoute(hash);
|
||||
return view?.id || null;
|
||||
}
|
||||
|
||||
private getViewFromPath(): string | null {
|
||||
let path = window.location.pathname;
|
||||
|
||||
// Remove base path if configured
|
||||
if (this.config.basePath) {
|
||||
if (path.startsWith(this.config.basePath)) {
|
||||
path = path.slice(this.config.basePath.length);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove leading slash
|
||||
path = path.replace(/^\//, '');
|
||||
|
||||
if (!path) return null;
|
||||
|
||||
const view = this.viewRegistry.findByRoute(path);
|
||||
return view?.id || null;
|
||||
}
|
||||
|
||||
private updateUrl(view: IViewDefinition, replace: boolean): void {
|
||||
const route = view.route || view.id;
|
||||
|
||||
if (this.config.mode === 'hash') {
|
||||
const newHash = `#${route}`;
|
||||
if (replace) {
|
||||
window.history.replaceState(null, '', newHash);
|
||||
} else {
|
||||
window.history.pushState(null, '', newHash);
|
||||
}
|
||||
} else if (this.config.mode === 'history') {
|
||||
const basePath = this.config.basePath || '';
|
||||
const newPath = `${basePath}/${route}`;
|
||||
if (replace) {
|
||||
window.history.replaceState({ viewId: view.id }, '', newPath);
|
||||
} else {
|
||||
window.history.pushState({ viewId: view.id }, '', newPath);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private notifyListeners(viewId: string, params?: Record<string, string>): void {
|
||||
for (const listener of this.listeners) {
|
||||
listener(viewId, params);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,238 +1,608 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import type { DeesAppuiBase } from '../dees-appui-base/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 type { IMenuGroup } from '../../interfaces/menugroup.js';
|
||||
import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js';
|
||||
import * as plugins from '../../00plugins.js';
|
||||
import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
|
||||
import type { DeesAppuiBase } from './dees-appui-base.js';
|
||||
import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
|
||||
// Demo view component with lifecycle hooks
|
||||
@customElement('demo-dashboard-view')
|
||||
class DemoDashboardView extends DeesElement {
|
||||
@state()
|
||||
accessor activated: boolean = false;
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.activated = true;
|
||||
console.log('Dashboard activated with context:', context);
|
||||
|
||||
// Set view-specific secondary menu
|
||||
context.appui.setSecondaryMenu({
|
||||
heading: 'Dashboard',
|
||||
groups: [
|
||||
{
|
||||
name: 'Quick Access',
|
||||
iconName: 'lucide:zap',
|
||||
items: [
|
||||
{ key: 'overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
|
||||
{ key: 'recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
iconName: 'lucide:barChart3',
|
||||
items: [
|
||||
{ key: 'metrics', iconName: 'activity', action: () => console.log('Metrics') },
|
||||
{ key: 'reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Set content tabs for dashboard
|
||||
context.appui.setContentTabs([
|
||||
{ key: 'Overview', iconName: 'lucide:layoutDashboard', action: () => console.log('Overview tab') },
|
||||
{ key: 'Analytics', iconName: 'lucide:barChart', action: () => console.log('Analytics tab') },
|
||||
{ key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports tab') },
|
||||
]);
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
this.activated = false;
|
||||
console.log('Dashboard deactivated');
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 40px;
|
||||
color: #a3a3a3;
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
|
||||
p { color: #737373; margin-bottom: 32px; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
.card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
|
||||
.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; }
|
||||
</style>
|
||||
<h1>Dashboard</h1>
|
||||
<p>Welcome back! Here's an overview of your system.</p>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h3>Active Users</h3>
|
||||
<div class="metric">1,234</div>
|
||||
<span class="status active">Online</span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>API Calls</h3>
|
||||
<div class="metric">45.2K</div>
|
||||
<p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>System Health</h3>
|
||||
<div class="metric">99.9%</div>
|
||||
<p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Settings view with route params and canDeactivate guard
|
||||
@customElement('demo-settings-view')
|
||||
class DemoSettingsView extends DeesElement {
|
||||
@state()
|
||||
accessor section: string = 'general';
|
||||
|
||||
@state()
|
||||
accessor hasChanges: boolean = false;
|
||||
|
||||
private appui: DeesAppuiBase;
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.appui = context.appui as any;
|
||||
console.log('Settings activated with params:', context.params);
|
||||
|
||||
if (context.params?.section) {
|
||||
this.section = context.params.section;
|
||||
}
|
||||
|
||||
// Set settings-specific secondary menu
|
||||
context.appui.setSecondaryMenu({
|
||||
heading: 'Settings',
|
||||
groups: [
|
||||
{
|
||||
name: 'Account',
|
||||
iconName: 'lucide:user',
|
||||
items: [
|
||||
{ key: 'general', iconName: 'settings', action: () => this.showSection('general') },
|
||||
{ key: 'profile', iconName: 'user', action: () => this.showSection('profile') },
|
||||
{ key: 'security', iconName: 'shield', action: () => this.showSection('security') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Preferences',
|
||||
iconName: 'lucide:sliders',
|
||||
items: [
|
||||
{ key: 'notifications', iconName: 'bell', badge: 3, action: () => this.showSection('notifications') },
|
||||
{ key: 'appearance', iconName: 'palette', action: () => this.showSection('appearance') },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
context.appui.setSecondaryMenuSelection(this.section);
|
||||
|
||||
// Clear content tabs for settings
|
||||
context.appui.setContentTabs([]);
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
console.log('Settings deactivated');
|
||||
this.hasChanges = false;
|
||||
}
|
||||
|
||||
canDeactivate(): boolean | string {
|
||||
if (this.hasChanges) {
|
||||
return 'You have unsaved changes. Leave anyway?';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
showSection(section: string) {
|
||||
this.section = section;
|
||||
this.appui?.setSecondaryMenuSelection(section);
|
||||
}
|
||||
|
||||
simulateChange() {
|
||||
this.hasChanges = true;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 40px;
|
||||
color: #a3a3a3;
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
|
||||
p { color: #737373; margin-bottom: 24px; }
|
||||
.section-name {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
font-size: 18px;
|
||||
color: #fafafa;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
button {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
button:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
.warning {
|
||||
color: #fbbf24;
|
||||
font-size: 13px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
<h1>Settings</h1>
|
||||
<p>Manage your account and application preferences.</p>
|
||||
<div class="section-name">
|
||||
Current section: <strong>${this.section}</strong>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button @click=${() => this.simulateChange()}>Make Changes</button>
|
||||
</div>
|
||||
${this.hasChanges ? html`<p class="warning">You have unsaved changes. Navigation will prompt for confirmation.</p>` : ''}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Projects view
|
||||
@customElement('demo-projects-view')
|
||||
class DemoProjectsView extends DeesElement {
|
||||
onActivate(context: IViewActivationContext) {
|
||||
context.appui.setSecondaryMenu({
|
||||
heading: 'Projects',
|
||||
groups: [
|
||||
{
|
||||
name: 'My Projects',
|
||||
items: [
|
||||
{ key: 'active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
|
||||
{ key: 'archived', iconName: 'archive', action: () => console.log('Archived') },
|
||||
{ key: 'shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
context.appui.setContentTabs([
|
||||
{ key: 'Grid', iconName: 'lucide:grid', action: () => console.log('Grid view') },
|
||||
{ key: 'List', iconName: 'lucide:list', action: () => console.log('List view') },
|
||||
{ key: 'Board', iconName: 'lucide:kanban', action: () => console.log('Board view') },
|
||||
]);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 40px;
|
||||
color: #a3a3a3;
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
|
||||
.projects {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.project {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.project:hover {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
.project h3 { color: #fafafa; margin: 0 0 8px 0; font-size: 16px; }
|
||||
.project p { color: #737373; margin: 0; font-size: 13px; }
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #14532d;
|
||||
color: #4ade80;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
font-size: 11px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
<h1>Projects</h1>
|
||||
<div class="projects">
|
||||
<div class="project">
|
||||
<h3>Frontend App <span class="badge">Active</span></h3>
|
||||
<p>React-based dashboard application</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3>API Server <span class="badge">Active</span></h3>
|
||||
<p>Node.js REST API backend</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3>Mobile App <span class="badge">Active</span></h3>
|
||||
<p>React Native iOS/Android app</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3>Documentation</h3>
|
||||
<p>Technical documentation site</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Tasks view showing inline template content
|
||||
@customElement('demo-tasks-view')
|
||||
class DemoTasksView extends DeesElement {
|
||||
onActivate(context: IViewActivationContext) {
|
||||
context.appui.setSecondaryMenu({
|
||||
heading: 'Tasks',
|
||||
groups: [
|
||||
{
|
||||
name: 'Filters',
|
||||
items: [
|
||||
{ key: 'all', iconName: 'list', badge: 12, action: () => console.log('All') },
|
||||
{ key: 'today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
|
||||
{ key: 'upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
|
||||
{ key: 'completed', iconName: 'checkCircle', action: () => console.log('Completed') },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
context.appui.setContentTabs([
|
||||
{ key: 'List', iconName: 'lucide:list', action: () => console.log('List') },
|
||||
{ key: 'Calendar', iconName: 'lucide:calendar', action: () => console.log('Calendar') },
|
||||
]);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 40px;
|
||||
color: #a3a3a3;
|
||||
font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
|
||||
}
|
||||
h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
|
||||
.task-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.checkbox {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #525252;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.task-text { color: #fafafa; flex: 1; }
|
||||
.due-date { color: #737373; font-size: 12px; }
|
||||
.priority {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.priority.high { background: #450a0a; color: #f87171; }
|
||||
.priority.medium { background: #451a03; color: #fbbf24; }
|
||||
</style>
|
||||
<h1>Tasks</h1>
|
||||
<div class="task-list">
|
||||
<div class="task">
|
||||
<div class="checkbox"></div>
|
||||
<span class="task-text">Review pull request #42</span>
|
||||
<span class="due-date">Today</span>
|
||||
<span class="priority high">High</span>
|
||||
</div>
|
||||
<div class="task">
|
||||
<div class="checkbox"></div>
|
||||
<span class="task-text">Update documentation</span>
|
||||
<span class="due-date">Tomorrow</span>
|
||||
<span class="priority medium">Medium</span>
|
||||
</div>
|
||||
<div class="task">
|
||||
<div class="checkbox"></div>
|
||||
<span class="task-text">Write unit tests</span>
|
||||
<span class="due-date">Dec 20</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
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') },
|
||||
]},
|
||||
// App configuration using the new unified API
|
||||
const appConfig: IAppConfig = {
|
||||
branding: {
|
||||
logoIcon: 'lucide:box',
|
||||
logoText: 'Acme App'
|
||||
},
|
||||
|
||||
appBar: {
|
||||
menuItems: [
|
||||
{
|
||||
name: 'File',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New') },
|
||||
{ name: 'Open...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open') },
|
||||
{ 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') },
|
||||
]},
|
||||
{ divider: true },
|
||||
{ name: 'Save All', shortcut: 'Cmd+S', iconName: 'save', action: async () => console.log('Save') },
|
||||
]
|
||||
},
|
||||
{
|
||||
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 Activity Log', shortcut: 'Cmd+Shift+A', action: async () => console.log('Toggle activity') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Help',
|
||||
action: async () => {},
|
||||
submenu: [
|
||||
{ name: 'Documentation', iconName: 'book', action: async () => console.log('Docs') },
|
||||
{ name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+/', action: async () => console.log('Shortcuts') },
|
||||
{ divider: true },
|
||||
{ name: 'About', iconName: 'info', action: async () => console.log('About') },
|
||||
]
|
||||
}
|
||||
],
|
||||
breadcrumbs: 'Dashboard',
|
||||
showWindowControls: true,
|
||||
showSearch: true,
|
||||
user: {
|
||||
name: 'Jane Smith',
|
||||
email: 'jane.smith@example.com',
|
||||
status: 'online'
|
||||
},
|
||||
profileMenuItems: [
|
||||
{ name: 'Profile', iconName: 'user', action: async () => console.log('Profile') },
|
||||
{ name: 'Account Settings', iconName: 'settings', action: async () => console.log('Settings') },
|
||||
{ divider: true },
|
||||
{ name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
|
||||
{ name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
|
||||
{ divider: true },
|
||||
{ name: 'Close Project', action: async () => console.log('Close project') },
|
||||
{ name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
|
||||
]
|
||||
},
|
||||
{
|
||||
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') },
|
||||
]
|
||||
|
||||
views: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:home',
|
||||
content: 'demo-dashboard-view',
|
||||
route: 'dashboard'
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
name: 'Projects',
|
||||
iconName: 'lucide:folder',
|
||||
content: 'demo-projects-view',
|
||||
route: 'projects',
|
||||
badge: 3
|
||||
},
|
||||
{
|
||||
id: 'tasks',
|
||||
name: 'Tasks',
|
||||
iconName: 'lucide:checkSquare',
|
||||
content: 'demo-tasks-view',
|
||||
route: 'tasks',
|
||||
badge: 12
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
content: 'demo-settings-view',
|
||||
route: 'settings/:section?'
|
||||
},
|
||||
],
|
||||
|
||||
mainMenu: {
|
||||
sections: [
|
||||
{ name: 'Main', views: ['dashboard'] },
|
||||
{ name: 'Workspace', views: ['projects', 'tasks'] },
|
||||
],
|
||||
bottomItems: ['settings']
|
||||
},
|
||||
{
|
||||
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') },
|
||||
]
|
||||
|
||||
defaultView: 'dashboard',
|
||||
|
||||
onViewChange: (viewId, view) => {
|
||||
console.log(`View changed to: ${viewId} (${view.name})`);
|
||||
},
|
||||
{
|
||||
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') },
|
||||
]
|
||||
|
||||
onSearch: (query) => {
|
||||
console.log('Search query:', query);
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
// Main menu groups (left sidebar)
|
||||
const mainMenuGroups: IMenuGroup[] = [
|
||||
{
|
||||
tabs: [
|
||||
{ key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
|
||||
{ key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox selected') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Workspace',
|
||||
tabs: [
|
||||
{ key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
|
||||
{ key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks selected') },
|
||||
{ key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents selected') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Analytics',
|
||||
tabs: [
|
||||
{ key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports selected') },
|
||||
{ key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights selected') },
|
||||
]
|
||||
}
|
||||
];
|
||||
// Use a container element to properly initialize the demo
|
||||
const containerElement = document.createElement('div');
|
||||
containerElement.className = 'demo-container';
|
||||
containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';
|
||||
|
||||
// Main menu bottom tabs (pinned to bottom)
|
||||
const mainMenuBottomTabs: ITab[] = [
|
||||
{ key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
|
||||
{ key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
|
||||
];
|
||||
const appuiElement = document.createElement('dees-appui-base') as DeesAppuiBase;
|
||||
containerElement.appendChild(appuiElement);
|
||||
|
||||
// Secondary menu groups (second sidebar with collapsible groups)
|
||||
// These showcase the new shadcn-style design with badges and collapsible sections
|
||||
const secondaryMenuGroups: ISecondaryMenuGroup[] = [
|
||||
{
|
||||
name: 'Quick Access',
|
||||
iconName: 'lucide:zap',
|
||||
items: [
|
||||
{ key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') },
|
||||
{ key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 },
|
||||
{ key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Resources',
|
||||
iconName: 'lucide:layers',
|
||||
items: [
|
||||
{ key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 },
|
||||
{ key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' },
|
||||
{ key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' },
|
||||
{ key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Data Management',
|
||||
iconName: 'lucide:database',
|
||||
items: [
|
||||
{ key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
|
||||
{ key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' },
|
||||
{ key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'System',
|
||||
iconName: 'lucide:settings',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') },
|
||||
{ key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' },
|
||||
{ key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') },
|
||||
{ key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') },
|
||||
]
|
||||
}
|
||||
];
|
||||
// Initialize after element is connected
|
||||
setTimeout(async () => {
|
||||
await appuiElement.updateComplete;
|
||||
|
||||
// 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') },
|
||||
];
|
||||
// Configure using the unified API
|
||||
appuiElement.configure(appConfig);
|
||||
|
||||
// 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') }
|
||||
];
|
||||
// Add demo activity entries
|
||||
setTimeout(() => {
|
||||
appuiElement.activityLog.addMany([
|
||||
{
|
||||
type: 'login',
|
||||
user: 'Jane Smith',
|
||||
message: 'logged in from Chrome on macOS'
|
||||
},
|
||||
{
|
||||
type: 'create',
|
||||
user: 'Jane Smith',
|
||||
message: 'created project "Frontend App"'
|
||||
},
|
||||
{
|
||||
type: 'update',
|
||||
user: 'John Doe',
|
||||
message: 'updated API documentation'
|
||||
},
|
||||
{
|
||||
type: 'view',
|
||||
user: 'Jane Smith',
|
||||
message: 'viewed dashboard analytics'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
user: 'Admin',
|
||||
message: 'removed deprecated endpoint'
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
user: 'System',
|
||||
message: 'scheduled backup completed',
|
||||
iconName: 'lucide:database'
|
||||
}
|
||||
]);
|
||||
}, 500);
|
||||
|
||||
// Subscribe to view changes
|
||||
appuiElement.viewChanged$.subscribe((event) => {
|
||||
console.log('View changed event:', event);
|
||||
// Update breadcrumbs based on view
|
||||
appuiElement.setBreadcrumbs(event.view.name);
|
||||
});
|
||||
|
||||
// Subscribe to lifecycle events
|
||||
appuiElement.viewLifecycle$.subscribe((event) => {
|
||||
console.log('Lifecycle event:', event.type, event.viewId);
|
||||
});
|
||||
|
||||
// Demo: Dynamically update a badge after 5 seconds
|
||||
setTimeout(() => {
|
||||
appuiElement.setMainMenuBadge('tasks', 15);
|
||||
appuiElement.activityLog.add({
|
||||
type: 'update',
|
||||
user: 'System',
|
||||
message: 'new tasks added'
|
||||
});
|
||||
}, 5000);
|
||||
}, 0);
|
||||
|
||||
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}
|
||||
.mainmenuLogoIcon=${'lucide:box'}
|
||||
.mainmenuLogoText=${'Acme App'}
|
||||
.mainmenuGroups=${mainMenuGroups}
|
||||
.mainmenuBottomTabs=${mainMenuBottomTabs}
|
||||
.secondarymenuHeading=${'Dashboard'}
|
||||
.secondarymenuGroups=${secondaryMenuGroups}
|
||||
.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)}
|
||||
@secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
|
||||
>
|
||||
<div slot="maincontent" style="padding: 40px; color: #a3a3a3; font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;">
|
||||
<h1 style="color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px;">Welcome to Acme App</h1>
|
||||
<p style="color: #737373; margin-bottom: 32px;">This demo showcases the AppUI component system with the new SecondaryMenu.</p>
|
||||
|
||||
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
|
||||
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
|
||||
<h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">SecondaryMenu Features</h3>
|
||||
<ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8;">
|
||||
<li>Collapsible groups with smooth animations</li>
|
||||
<li>Badge support (counts, status, variants)</li>
|
||||
<li>Dynamic heading from MainMenu selection</li>
|
||||
<li>shadcn-inspired modern design</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
|
||||
<h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">Badge Variants</h3>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">
|
||||
<span style="background: #27272a; color: #a1a1aa; padding: 2px 8px; border-radius: 9px;">default</span>
|
||||
<span style="background: #14532d; color: #4ade80; padding: 2px 8px; border-radius: 9px;">success</span>
|
||||
<span style="background: #451a03; color: #fbbf24; padding: 2px 8px; border-radius: 9px;">warning</span>
|
||||
<span style="background: #450a0a; color: #f87171; padding: 2px 8px; border-radius: 9px;">error</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size: 13px; color: #525252;">
|
||||
Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically.
|
||||
Click group headers in the SecondaryMenu to collapse/expand sections.
|
||||
</p>
|
||||
</div>
|
||||
</dees-appui-base>
|
||||
</div>
|
||||
${containerElement}
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,2 @@
|
||||
export * from './dees-appui-base.js';
|
||||
export * from './view.registry.js';
|
||||
export * from './app.router.js';
|
||||
export * from './state.manager.js';
|
||||
|
||||
560
ts_web/elements/00group-appui/dees-appui-base/readme.md
Normal file
560
ts_web/elements/00group-appui/dees-appui-base/readme.md
Normal file
@@ -0,0 +1,560 @@
|
||||
# DeesAppuiBase
|
||||
|
||||
A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
|
||||
|
||||
## Quick Start
|
||||
|
||||
```typescript
|
||||
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
||||
import { DeesAppuiBase } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('my-app')
|
||||
class MyApp extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
|
||||
async firstUpdated() {
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui-base');
|
||||
|
||||
// Configure with views and menu
|
||||
this.appui.configure({
|
||||
branding: { logoIcon: 'lucide:box', logoText: 'My App' },
|
||||
views: [
|
||||
{ id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
|
||||
{ id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
|
||||
],
|
||||
mainMenu: {
|
||||
sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
|
||||
},
|
||||
defaultView: 'dashboard'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<dees-appui-base></dees-appui-base>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Configuration API
|
||||
|
||||
### `configure(config: IAppConfig)`
|
||||
|
||||
Configure the entire application shell with a single configuration object.
|
||||
|
||||
```typescript
|
||||
interface IAppConfig {
|
||||
branding?: IBrandingConfig;
|
||||
appBar?: IAppBarConfig;
|
||||
views: IViewDefinition[];
|
||||
mainMenu?: IMainMenuConfig;
|
||||
defaultView?: string;
|
||||
activityLog?: IActivityLogConfig;
|
||||
onViewChange?: (viewId: string, view: IViewDefinition) => void;
|
||||
onSearch?: (query: string) => void;
|
||||
}
|
||||
```
|
||||
|
||||
### View Definition
|
||||
|
||||
```typescript
|
||||
interface IViewDefinition {
|
||||
id: string; // Unique identifier
|
||||
name: string; // Display name
|
||||
iconName?: string; // Icon (e.g., 'lucide:home')
|
||||
content: // View content
|
||||
| string // Tag name ('my-component')
|
||||
| (new () => HTMLElement) // Class constructor
|
||||
| (() => TemplateResult) // Template function
|
||||
| (() => Promise<...>); // Async for lazy loading
|
||||
secondaryMenu?: ISecondaryMenuGroup[];
|
||||
contentTabs?: ITab[];
|
||||
route?: string; // URL route (default: id)
|
||||
badge?: string | number;
|
||||
cache?: boolean; // Cache view instance (default: true)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Programmatic APIs
|
||||
|
||||
### App Bar API
|
||||
|
||||
Control the top application bar.
|
||||
|
||||
```typescript
|
||||
// Set menu items (File, Edit, View, etc.)
|
||||
appui.setAppBarMenus([
|
||||
{
|
||||
name: 'File',
|
||||
submenu: [
|
||||
{ name: 'New', shortcut: 'Cmd+N', action: () => {} },
|
||||
{ name: 'Save', shortcut: 'Cmd+S', action: () => {} },
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
// Update single menu
|
||||
appui.updateAppBarMenu('File', { submenu: [...newItems] });
|
||||
|
||||
// Breadcrumbs
|
||||
appui.setBreadcrumbs('Dashboard > Settings > Profile');
|
||||
appui.setBreadcrumbs(['Dashboard', 'Settings', 'Profile']);
|
||||
|
||||
// User profile
|
||||
appui.setUser({
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
avatar: '/avatars/john.png',
|
||||
status: 'online' // 'online' | 'offline' | 'busy' | 'away'
|
||||
});
|
||||
|
||||
appui.setProfileMenuItems([
|
||||
{ name: 'Profile', iconName: 'lucide:user', action: () => {} },
|
||||
{ divider: true },
|
||||
{ name: 'Sign Out', iconName: 'lucide:log-out', action: () => {} }
|
||||
]);
|
||||
|
||||
// Search
|
||||
appui.setSearchVisible(true);
|
||||
appui.onSearch((query) => console.log('Search:', query));
|
||||
|
||||
// Window controls (for Electron/Tauri apps)
|
||||
appui.setWindowControlsVisible(false);
|
||||
```
|
||||
|
||||
### Main Menu API (Left Sidebar)
|
||||
|
||||
Control the main navigation menu.
|
||||
|
||||
```typescript
|
||||
// Set entire menu
|
||||
appui.setMainMenu({
|
||||
logoIcon: 'lucide:box',
|
||||
logoText: 'My App',
|
||||
groups: [
|
||||
{
|
||||
name: 'Main',
|
||||
tabs: [
|
||||
{ key: 'dashboard', iconName: 'lucide:home', action: () => {} },
|
||||
{ key: 'inbox', iconName: 'lucide:inbox', badge: 5, action: () => {} },
|
||||
]
|
||||
}
|
||||
],
|
||||
bottomTabs: [
|
||||
{ key: 'settings', iconName: 'lucide:settings', action: () => {} }
|
||||
]
|
||||
});
|
||||
|
||||
// Update specific group
|
||||
appui.updateMainMenuGroup('Main', { tabs: [...newTabs] });
|
||||
|
||||
// Add/remove items
|
||||
appui.addMainMenuItem('Main', { key: 'tasks', iconName: 'lucide:check', action: () => {} });
|
||||
appui.removeMainMenuItem('Main', 'tasks');
|
||||
|
||||
// Selection
|
||||
appui.setMainMenuSelection('dashboard');
|
||||
appui.setMainMenuCollapsed(true);
|
||||
|
||||
// Badges
|
||||
appui.setMainMenuBadge('inbox', 12);
|
||||
appui.clearMainMenuBadge('inbox');
|
||||
```
|
||||
|
||||
### Secondary Menu API
|
||||
|
||||
Views can control the secondary (contextual) menu.
|
||||
|
||||
```typescript
|
||||
// Set menu
|
||||
appui.setSecondaryMenu({
|
||||
heading: 'Settings',
|
||||
groups: [
|
||||
{
|
||||
name: 'Account',
|
||||
items: [
|
||||
{ key: 'profile', iconName: 'lucide:user', action: () => {} },
|
||||
{ key: 'security', iconName: 'lucide:shield', action: () => {} },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Update group
|
||||
appui.updateSecondaryMenuGroup('Account', { items: newItems });
|
||||
|
||||
// Add item
|
||||
appui.addSecondaryMenuItem('Account', {
|
||||
key: 'notifications',
|
||||
iconName: 'lucide:bell',
|
||||
action: () => {}
|
||||
});
|
||||
|
||||
// Selection
|
||||
appui.setSecondaryMenuSelection('profile');
|
||||
|
||||
// Clear
|
||||
appui.clearSecondaryMenu();
|
||||
```
|
||||
|
||||
### Content Tabs API
|
||||
|
||||
Control tabs in the main content area.
|
||||
|
||||
```typescript
|
||||
// Set tabs
|
||||
appui.setContentTabs([
|
||||
{ key: 'code', iconName: 'lucide:code', action: () => {} },
|
||||
{ key: 'preview', iconName: 'lucide:eye', action: () => {} }
|
||||
]);
|
||||
|
||||
// Add/remove
|
||||
appui.addContentTab({ key: 'debug', iconName: 'lucide:bug', action: () => {} });
|
||||
appui.removeContentTab('debug');
|
||||
|
||||
// Select
|
||||
appui.selectContentTab('preview');
|
||||
|
||||
// Get current
|
||||
const current = appui.getSelectedContentTab();
|
||||
```
|
||||
|
||||
### Activity Log API
|
||||
|
||||
Add activity entries to the right-side activity log.
|
||||
|
||||
```typescript
|
||||
// Add single entry
|
||||
appui.activityLog.add({
|
||||
type: 'create', // 'login' | 'logout' | 'view' | 'create' | 'update' | 'delete' | 'custom'
|
||||
user: 'John Doe',
|
||||
message: 'created a new invoice',
|
||||
iconName: 'lucide:file-plus', // Optional custom icon
|
||||
data: { invoiceId: '123' } // Optional metadata
|
||||
});
|
||||
|
||||
// Add multiple
|
||||
appui.activityLog.addMany([...entries]);
|
||||
|
||||
// Clear
|
||||
appui.activityLog.clear();
|
||||
|
||||
// Query
|
||||
const entries = appui.activityLog.getEntries();
|
||||
const filtered = appui.activityLog.filter({ user: 'John', type: 'create' });
|
||||
const searched = appui.activityLog.search('invoice');
|
||||
```
|
||||
|
||||
### Navigation API
|
||||
|
||||
Navigate between views programmatically.
|
||||
|
||||
```typescript
|
||||
// Navigate to view
|
||||
await appui.navigateToView('settings');
|
||||
await appui.navigateToView('settings', { section: 'profile' });
|
||||
|
||||
// Get current view
|
||||
const current = appui.getCurrentView();
|
||||
|
||||
// Subscribe to view changes
|
||||
appui.viewChanged$.subscribe((event) => {
|
||||
console.log(`Navigated to: ${event.viewId}`);
|
||||
});
|
||||
|
||||
// Subscribe to lifecycle events
|
||||
appui.viewLifecycle$.subscribe((event) => {
|
||||
if (event.type === 'activated') {
|
||||
console.log(`View ${event.viewId} activated`);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## View Lifecycle Hooks
|
||||
|
||||
Views can implement lifecycle hooks to respond to activation/deactivation.
|
||||
|
||||
```typescript
|
||||
import { DeesElement, customElement } from '@design.estate/dees-element';
|
||||
import type { IViewActivationContext, IViewLifecycle } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('my-settings-view')
|
||||
class MySettingsView extends DeesElement implements IViewLifecycle {
|
||||
/**
|
||||
* Called when view is activated (displayed)
|
||||
* Receives typed context with appui reference
|
||||
*/
|
||||
async onActivate(context: IViewActivationContext) {
|
||||
const { appui, viewId, params } = context;
|
||||
|
||||
// Set view-specific secondary menu
|
||||
appui.setSecondaryMenu({
|
||||
heading: 'Settings',
|
||||
groups: [{ name: 'Options', items: [...] }]
|
||||
});
|
||||
|
||||
// Set view-specific tabs
|
||||
appui.setContentTabs([...]);
|
||||
|
||||
// Load data based on route params
|
||||
if (params?.section) {
|
||||
await this.loadSection(params.section);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when view is deactivated (hidden)
|
||||
*/
|
||||
onDeactivate() {
|
||||
this.cleanup();
|
||||
}
|
||||
|
||||
/**
|
||||
* Called before navigation away
|
||||
* Return false or a message string to block navigation
|
||||
*/
|
||||
canDeactivate(): boolean | string {
|
||||
if (this.hasUnsavedChanges) {
|
||||
return 'You have unsaved changes. Leave anyway?';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### IViewActivationContext
|
||||
|
||||
```typescript
|
||||
interface IViewActivationContext {
|
||||
appui: DeesAppuiBase; // Reference to the app shell
|
||||
viewId: string; // The view ID being activated
|
||||
params?: Record<string, string>; // Route parameters
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Routing
|
||||
|
||||
Routes are automatically registered from view definitions using `domtools.router`.
|
||||
|
||||
```typescript
|
||||
const views = [
|
||||
{ id: 'dashboard', route: 'dashboard', ... },
|
||||
{ id: 'settings', route: 'settings/:section?', ... }, // Parameterized
|
||||
{ id: 'user', route: 'users/:id', ... },
|
||||
];
|
||||
|
||||
// URL: #dashboard → navigates to dashboard view
|
||||
// URL: #settings/profile → navigates to settings with params.section = 'profile'
|
||||
// URL: #users/123 → navigates to user with params.id = '123'
|
||||
```
|
||||
|
||||
### Hash-based Routing
|
||||
|
||||
The router uses hash-based routing by default (`#viewId`). URLs are automatically synchronized when navigating via `navigateToView()`.
|
||||
|
||||
---
|
||||
|
||||
## View Caching
|
||||
|
||||
Views are cached by default. When navigating away and back, the same DOM element is reused (hidden/shown) rather than destroyed and recreated.
|
||||
|
||||
```typescript
|
||||
// Disable caching for a specific view
|
||||
{
|
||||
id: 'reports',
|
||||
name: 'Reports',
|
||||
content: 'my-reports-view',
|
||||
cache: false // Always recreate this view
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Lazy Loading
|
||||
|
||||
Use async content functions for lazy loading views.
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'analytics',
|
||||
name: 'Analytics',
|
||||
content: async () => {
|
||||
const module = await import('./views/analytics.js');
|
||||
return module.AnalyticsView;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RxJS Observables
|
||||
|
||||
The component exposes RxJS Subjects for reactive programming.
|
||||
|
||||
```typescript
|
||||
// View lifecycle events
|
||||
appui.viewLifecycle$.subscribe((event) => {
|
||||
// event.type: 'loading' | 'activated' | 'deactivated' | 'loaded' | 'loadError'
|
||||
// event.viewId: string
|
||||
// event.element?: HTMLElement
|
||||
// event.params?: Record<string, string>
|
||||
// event.error?: unknown
|
||||
});
|
||||
|
||||
// View change events
|
||||
appui.viewChanged$.subscribe((event) => {
|
||||
// event.viewId: string
|
||||
// event.view: IViewDefinition
|
||||
// event.previousView?: IViewDefinition
|
||||
// event.params?: Record<string, string>
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Complete Example
|
||||
|
||||
```typescript
|
||||
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
||||
import { DeesAppuiBase, IViewActivationContext } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('my-app')
|
||||
class MyApp extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
|
||||
async firstUpdated() {
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui-base');
|
||||
|
||||
this.appui.configure({
|
||||
branding: {
|
||||
logoIcon: 'lucide:briefcase',
|
||||
logoText: 'CRM Pro'
|
||||
},
|
||||
|
||||
appBar: {
|
||||
menuItems: [
|
||||
{ name: 'File', submenu: [...] },
|
||||
{ name: 'Edit', submenu: [...] }
|
||||
],
|
||||
showSearch: true,
|
||||
user: { name: 'Jane Smith', status: 'online' }
|
||||
},
|
||||
|
||||
views: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:home',
|
||||
content: 'crm-dashboard',
|
||||
route: 'dashboard'
|
||||
},
|
||||
{
|
||||
id: 'contacts',
|
||||
name: 'Contacts',
|
||||
iconName: 'lucide:users',
|
||||
content: 'crm-contacts',
|
||||
route: 'contacts',
|
||||
badge: 42
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
content: 'crm-settings',
|
||||
route: 'settings/:section?'
|
||||
}
|
||||
],
|
||||
|
||||
mainMenu: {
|
||||
sections: [
|
||||
{ name: 'Main', views: ['dashboard', 'contacts'] }
|
||||
],
|
||||
bottomItems: ['settings']
|
||||
},
|
||||
|
||||
defaultView: 'dashboard',
|
||||
|
||||
onViewChange: (viewId, view) => {
|
||||
console.log(`Navigated to: ${view.name}`);
|
||||
},
|
||||
|
||||
onSearch: (query) => {
|
||||
console.log(`Search: ${query}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Load activity from backend
|
||||
const activities = await fetch('/api/activities').then(r => r.json());
|
||||
this.appui.activityLog.addMany(activities);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<dees-appui-base></dees-appui-base>`;
|
||||
}
|
||||
}
|
||||
|
||||
// View with lifecycle hooks
|
||||
@customElement('crm-settings')
|
||||
class CrmSettings extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.appui = context.appui;
|
||||
|
||||
// Set secondary menu for settings
|
||||
this.appui.setSecondaryMenu({
|
||||
heading: 'Settings',
|
||||
groups: [
|
||||
{
|
||||
name: 'Account',
|
||||
items: [
|
||||
{ key: 'profile', iconName: 'lucide:user', action: () => this.showSection('profile') },
|
||||
{ key: 'security', iconName: 'lucide:shield', action: () => this.showSection('security') }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Preferences',
|
||||
items: [
|
||||
{ key: 'notifications', iconName: 'lucide:bell', action: () => this.showSection('notifications') }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// Navigate to section from URL params
|
||||
if (context.params?.section) {
|
||||
this.showSection(context.params.section);
|
||||
}
|
||||
}
|
||||
|
||||
showSection(section: string) {
|
||||
this.appui.setSecondaryMenuSelection(section);
|
||||
// ... load section content
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TypeScript Types
|
||||
|
||||
All interfaces are exported from `@design.estate/dees-catalog`:
|
||||
|
||||
- `IAppConfig` - Main configuration
|
||||
- `IViewDefinition` - View definition
|
||||
- `IViewActivationContext` - Context passed to `onActivate`
|
||||
- `IViewLifecycle` - Lifecycle hooks interface
|
||||
- `IViewLifecycleEvent` - Lifecycle event for rxjs Subject
|
||||
- `IViewChangeEvent` - View change event
|
||||
- `IAppUser` - User configuration
|
||||
- `IActivityEntry` - Activity log entry
|
||||
- `IActivityLogAPI` - Activity log methods
|
||||
- `IAppBarMenuItem` - App bar menu item
|
||||
- `IMainMenuConfig` - Main menu configuration
|
||||
- `ISecondaryMenuGroup` - Secondary menu group
|
||||
- `ITab` - Tab definition
|
||||
@@ -1,185 +0,0 @@
|
||||
import type { IStatePersistenceConfig, IAppUIState } from '../../interfaces/appconfig.js';
|
||||
|
||||
/**
|
||||
* Manager for persisting and restoring UI state
|
||||
*/
|
||||
export class StateManager {
|
||||
private config: Required<IStatePersistenceConfig>;
|
||||
private memoryStorage: Map<string, string> = new Map();
|
||||
|
||||
constructor(config: IStatePersistenceConfig = { enabled: false }) {
|
||||
this.config = {
|
||||
enabled: config.enabled,
|
||||
storageKey: config.storageKey || 'dees-appui-state',
|
||||
storage: config.storage || 'localStorage',
|
||||
persist: {
|
||||
mainMenuCollapsed: true,
|
||||
secondaryMenuCollapsed: true,
|
||||
selectedView: true,
|
||||
secondaryMenuSelection: true,
|
||||
collapsedGroups: true,
|
||||
...config.persist,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if state persistence is enabled
|
||||
*/
|
||||
public isEnabled(): boolean {
|
||||
return this.config.enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current UI state
|
||||
*/
|
||||
public save(state: Partial<IAppUIState>): void {
|
||||
if (!this.config.enabled) return;
|
||||
|
||||
const existingState = this.load() || {};
|
||||
const newState: IAppUIState = {
|
||||
...existingState,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
// Only save what's configured
|
||||
if (this.config.persist.selectedView && state.currentViewId !== undefined) {
|
||||
newState.currentViewId = state.currentViewId;
|
||||
}
|
||||
if (this.config.persist.mainMenuCollapsed && state.mainMenuCollapsed !== undefined) {
|
||||
newState.mainMenuCollapsed = state.mainMenuCollapsed;
|
||||
}
|
||||
if (this.config.persist.secondaryMenuCollapsed && state.secondaryMenuCollapsed !== undefined) {
|
||||
newState.secondaryMenuCollapsed = state.secondaryMenuCollapsed;
|
||||
}
|
||||
if (this.config.persist.secondaryMenuSelection && state.secondaryMenuSelectedKey !== undefined) {
|
||||
newState.secondaryMenuSelectedKey = state.secondaryMenuSelectedKey;
|
||||
}
|
||||
if (this.config.persist.collapsedGroups && state.collapsedGroups !== undefined) {
|
||||
newState.collapsedGroups = state.collapsedGroups;
|
||||
}
|
||||
|
||||
this.setItem(this.config.storageKey, JSON.stringify(newState));
|
||||
}
|
||||
|
||||
/**
|
||||
* Load persisted UI state
|
||||
*/
|
||||
public load(): IAppUIState | null {
|
||||
if (!this.config.enabled) return null;
|
||||
|
||||
try {
|
||||
const data = this.getItem(this.config.storageKey);
|
||||
if (!data) return null;
|
||||
return JSON.parse(data) as IAppUIState;
|
||||
} catch (e) {
|
||||
console.warn('Failed to load UI state:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear persisted state
|
||||
*/
|
||||
public clear(): void {
|
||||
this.removeItem(this.config.storageKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if state exists
|
||||
*/
|
||||
public hasState(): boolean {
|
||||
return this.getItem(this.config.storageKey) !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get state age in milliseconds
|
||||
*/
|
||||
public getStateAge(): number | null {
|
||||
const state = this.load();
|
||||
if (!state?.timestamp) return null;
|
||||
return Date.now() - state.timestamp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update specific state properties
|
||||
*/
|
||||
public update(updates: Partial<IAppUIState>): void {
|
||||
const currentState = this.load() || {};
|
||||
this.save({ ...currentState, ...updates });
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the storage key being used
|
||||
*/
|
||||
public getStorageKey(): string {
|
||||
return this.config.storageKey;
|
||||
}
|
||||
|
||||
// Storage abstraction methods
|
||||
|
||||
private getItem(key: string): string | null {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
return localStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
return sessionStorage.getItem(key);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
case 'memory':
|
||||
return this.memoryStorage.get(key) || null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
private setItem(key: string, value: string): void {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
localStorage.setItem(key, value);
|
||||
} catch (e) {
|
||||
console.warn('Failed to save to localStorage:', e);
|
||||
}
|
||||
break;
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
sessionStorage.setItem(key, value);
|
||||
} catch (e) {
|
||||
console.warn('Failed to save to sessionStorage:', e);
|
||||
}
|
||||
break;
|
||||
case 'memory':
|
||||
this.memoryStorage.set(key, value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private removeItem(key: string): void {
|
||||
switch (this.config.storage) {
|
||||
case 'localStorage':
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
break;
|
||||
case 'sessionStorage':
|
||||
try {
|
||||
sessionStorage.removeItem(key);
|
||||
} catch {
|
||||
// Ignore
|
||||
}
|
||||
break;
|
||||
case 'memory':
|
||||
this.memoryStorage.delete(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,31 @@
|
||||
import { html, render, type TemplateResult } from '@design.estate/dees-element';
|
||||
import type { IViewDefinition } from '../../interfaces/appconfig.js';
|
||||
import type {
|
||||
IViewDefinition,
|
||||
IViewActivationContext,
|
||||
IViewLifecycle,
|
||||
TDeesAppuiBase
|
||||
} from '../../interfaces/appconfig.js';
|
||||
|
||||
/**
|
||||
* Registry for managing views and their lifecycle
|
||||
*
|
||||
* Key features:
|
||||
* - View caching with hide/show pattern (not destroy/create)
|
||||
* - Async content loading support (lazy loading)
|
||||
* - View lifecycle hooks (onActivate, onDeactivate, canDeactivate)
|
||||
*/
|
||||
export class ViewRegistry {
|
||||
private views: Map<string, IViewDefinition> = new Map();
|
||||
private instances: Map<string, HTMLElement> = new Map();
|
||||
private currentViewId: string | null = null;
|
||||
private appui: TDeesAppuiBase | null = null;
|
||||
|
||||
/**
|
||||
* Set the appui reference for view activation context
|
||||
*/
|
||||
public setAppuiRef(appui: TDeesAppuiBase): void {
|
||||
this.appui = appui;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a single view
|
||||
@@ -56,20 +74,222 @@ export class ViewRegistry {
|
||||
}
|
||||
|
||||
/**
|
||||
* Find view by route
|
||||
* Find view by route (supports parameterized routes like 'settings/:section')
|
||||
*/
|
||||
public findByRoute(route: string): IViewDefinition | undefined {
|
||||
public findByRoute(route: string): { view: IViewDefinition; params: Record<string, string> } | undefined {
|
||||
for (const view of this.views.values()) {
|
||||
const viewRoute = view.route || view.id;
|
||||
if (viewRoute === route) {
|
||||
return view;
|
||||
const params = this.matchRoute(viewRoute, route);
|
||||
if (params !== null) {
|
||||
return { view, params };
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a view's content into a container
|
||||
* Match a route pattern against an actual route
|
||||
* Returns params if matched, null otherwise
|
||||
*/
|
||||
private matchRoute(pattern: string, route: string): Record<string, string> | null {
|
||||
const patternParts = pattern.split('/');
|
||||
const routeParts = route.split('/');
|
||||
|
||||
// Check for optional trailing param (ends with ?)
|
||||
const hasOptionalParam = patternParts.length > 0 &&
|
||||
patternParts[patternParts.length - 1].endsWith('?');
|
||||
|
||||
if (hasOptionalParam) {
|
||||
// Allow route to be shorter by 1
|
||||
if (routeParts.length < patternParts.length - 1 || routeParts.length > patternParts.length) {
|
||||
return null;
|
||||
}
|
||||
} else if (patternParts.length !== routeParts.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const params: Record<string, string> = {};
|
||||
|
||||
for (let i = 0; i < patternParts.length; i++) {
|
||||
let part = patternParts[i];
|
||||
const isOptional = part.endsWith('?');
|
||||
if (isOptional) {
|
||||
part = part.slice(0, -1);
|
||||
}
|
||||
|
||||
if (part.startsWith(':')) {
|
||||
// This is a parameter
|
||||
const paramName = part.slice(1);
|
||||
if (routeParts[i] !== undefined) {
|
||||
params[paramName] = routeParts[i];
|
||||
} else if (!isOptional) {
|
||||
return null;
|
||||
}
|
||||
} else if (routeParts[i] !== part) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if navigation away from current view is allowed
|
||||
*/
|
||||
public async canLeaveCurrentView(): Promise<boolean | string> {
|
||||
if (!this.currentViewId) return true;
|
||||
|
||||
const instance = this.instances.get(this.currentViewId);
|
||||
if (!instance) return true;
|
||||
|
||||
const lifecycle = instance as unknown as IViewLifecycle;
|
||||
if (typeof lifecycle.canDeactivate === 'function') {
|
||||
return await lifecycle.canDeactivate();
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Activate a view - handles caching, lifecycle, and rendering
|
||||
*/
|
||||
public async activateView(
|
||||
viewId: string,
|
||||
container: HTMLElement,
|
||||
params?: Record<string, string>
|
||||
): Promise<HTMLElement | null> {
|
||||
const view = this.views.get(viewId);
|
||||
if (!view) {
|
||||
console.error(`View "${viewId}" not found in registry`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if caching is enabled for this view (default: true)
|
||||
const shouldCache = view.cache !== false;
|
||||
|
||||
// Deactivate current view
|
||||
if (this.currentViewId && this.currentViewId !== viewId) {
|
||||
await this.deactivateView(this.currentViewId);
|
||||
}
|
||||
|
||||
// Check for cached instance
|
||||
let element = shouldCache ? this.instances.get(viewId) : undefined;
|
||||
|
||||
if (element) {
|
||||
// Reuse cached instance - just show it
|
||||
element.style.display = '';
|
||||
} else {
|
||||
// Create new instance
|
||||
element = await this.createViewElement(view);
|
||||
if (!element) {
|
||||
console.error(`Failed to create element for view "${viewId}"`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Add to container
|
||||
container.appendChild(element);
|
||||
|
||||
// Cache if enabled
|
||||
if (shouldCache) {
|
||||
this.instances.set(viewId, element);
|
||||
}
|
||||
}
|
||||
|
||||
this.currentViewId = viewId;
|
||||
|
||||
// Call onActivate lifecycle hook
|
||||
await this.callOnActivate(element, viewId, params);
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Deactivate a view (hide and call lifecycle hook)
|
||||
*/
|
||||
private async deactivateView(viewId: string): Promise<void> {
|
||||
const instance = this.instances.get(viewId);
|
||||
if (!instance) return;
|
||||
|
||||
// Call onDeactivate lifecycle hook
|
||||
const lifecycle = instance as unknown as IViewLifecycle;
|
||||
if (typeof lifecycle.onDeactivate === 'function') {
|
||||
await lifecycle.onDeactivate();
|
||||
}
|
||||
|
||||
// Hide the element
|
||||
instance.style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a view element from its definition (supports async content)
|
||||
*/
|
||||
private async createViewElement(view: IViewDefinition): Promise<HTMLElement | null> {
|
||||
let content = view.content;
|
||||
|
||||
// Handle async content (lazy loading)
|
||||
if (typeof content === 'function' &&
|
||||
!(content.prototype instanceof HTMLElement) &&
|
||||
content.constructor.name === 'AsyncFunction') {
|
||||
try {
|
||||
content = await (content as () => Promise<string | (new () => HTMLElement) | (() => TemplateResult)>)();
|
||||
} catch (error) {
|
||||
console.error(`Failed to load async content for view "${view.id}":`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
let element: HTMLElement;
|
||||
|
||||
if (typeof content === 'string') {
|
||||
// Tag name string
|
||||
element = document.createElement(content);
|
||||
} else if (typeof content === 'function') {
|
||||
// Check if it's a class constructor or template function
|
||||
if (content.prototype instanceof HTMLElement) {
|
||||
// Element class constructor
|
||||
element = new (content as new () => HTMLElement)();
|
||||
} else {
|
||||
// Template function - wrap in a container and use Lit's render
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'view-content-wrapper';
|
||||
wrapper.style.cssText = 'display: contents;';
|
||||
const template = (content as () => TemplateResult)();
|
||||
render(template, wrapper);
|
||||
element = wrapper;
|
||||
}
|
||||
} else {
|
||||
console.error(`Invalid content type for view "${view.id}"`);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Add view ID as data attribute for debugging
|
||||
element.dataset.viewId = view.id;
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Call onActivate lifecycle hook on a view element
|
||||
*/
|
||||
private async callOnActivate(
|
||||
element: HTMLElement,
|
||||
viewId: string,
|
||||
params?: Record<string, string>
|
||||
): Promise<void> {
|
||||
const lifecycle = element as unknown as IViewLifecycle;
|
||||
if (typeof lifecycle.onActivate === 'function') {
|
||||
const context: IViewActivationContext = {
|
||||
appui: this.appui!,
|
||||
viewId,
|
||||
params,
|
||||
};
|
||||
await lifecycle.onActivate(context);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method - renders view without caching
|
||||
* @deprecated Use activateView instead
|
||||
*/
|
||||
public renderView(viewId: string, container: HTMLElement): HTMLElement | null {
|
||||
const view = this.views.get(viewId);
|
||||
@@ -78,25 +298,22 @@ export class ViewRegistry {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Clear container
|
||||
// For legacy compatibility, clear container
|
||||
container.innerHTML = '';
|
||||
|
||||
let element: HTMLElement;
|
||||
const content = view.content;
|
||||
|
||||
if (typeof view.content === 'string') {
|
||||
// Tag name string
|
||||
element = document.createElement(view.content);
|
||||
} else if (typeof view.content === 'function') {
|
||||
// Check if it's a class constructor or template function
|
||||
if (view.content.prototype instanceof HTMLElement) {
|
||||
// Element class constructor
|
||||
element = new (view.content as new () => HTMLElement)();
|
||||
if (typeof content === 'string') {
|
||||
element = document.createElement(content);
|
||||
} else if (typeof content === 'function') {
|
||||
if ((content as any).prototype instanceof HTMLElement) {
|
||||
element = new (content as new () => HTMLElement)();
|
||||
} else {
|
||||
// Template function - wrap in a container and use Lit's render
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'view-content-wrapper';
|
||||
wrapper.style.cssText = 'display: contents;';
|
||||
const template = (view.content as () => TemplateResult)();
|
||||
const template = (content as () => TemplateResult)();
|
||||
render(template, wrapper);
|
||||
element = wrapper;
|
||||
}
|
||||
@@ -126,10 +343,29 @@ export class ViewRegistry {
|
||||
return this.instances.get(viewId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear a specific cached instance
|
||||
*/
|
||||
public clearInstance(viewId: string): void {
|
||||
const instance = this.instances.get(viewId);
|
||||
if (instance && instance.parentNode) {
|
||||
instance.parentNode.removeChild(instance);
|
||||
}
|
||||
this.instances.delete(viewId);
|
||||
if (this.currentViewId === viewId) {
|
||||
this.currentViewId = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all instances
|
||||
*/
|
||||
public clearInstances(): void {
|
||||
for (const [viewId, instance] of this.instances) {
|
||||
if (instance.parentNode) {
|
||||
instance.parentNode.removeChild(instance);
|
||||
}
|
||||
}
|
||||
this.instances.clear();
|
||||
this.currentViewId = null;
|
||||
}
|
||||
@@ -138,7 +374,7 @@ export class ViewRegistry {
|
||||
* Unregister a view
|
||||
*/
|
||||
public unregister(viewId: string): boolean {
|
||||
this.instances.delete(viewId);
|
||||
this.clearInstance(viewId);
|
||||
return this.views.delete(viewId);
|
||||
}
|
||||
|
||||
@@ -147,8 +383,7 @@ export class ViewRegistry {
|
||||
*/
|
||||
public clear(): void {
|
||||
this.views.clear();
|
||||
this.instances.clear();
|
||||
this.currentViewId = null;
|
||||
this.clearInstances();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user