feat(dees-appui): Rename DeesAppuiBase to DeesAppui and migrate related API, exports, demos and docs
This commit is contained in:
@@ -1,2 +0,0 @@
|
||||
export * from './dees-appui-base.js';
|
||||
export * from './view.registry.js';
|
||||
@@ -1,5 +1,5 @@
|
||||
import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
|
||||
import type { DeesAppuiBase } from './dees-appui-base.js';
|
||||
import type { DeesAppui } from './dees-appui.js';
|
||||
import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
|
||||
@@ -197,7 +197,7 @@ class DemoSettingsView extends DeesElement {
|
||||
@state()
|
||||
accessor hasChanges: boolean = false;
|
||||
|
||||
private appui: DeesAppuiBase;
|
||||
private appui: DeesAppui;
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.appui = context.appui as any;
|
||||
@@ -619,7 +619,7 @@ export const demoFunc = () => {
|
||||
containerElement.className = 'demo-container';
|
||||
containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';
|
||||
|
||||
const appuiElement = document.createElement('dees-appui-base') as DeesAppuiBase;
|
||||
const appuiElement = document.createElement('dees-appui') as DeesAppui;
|
||||
containerElement.appendChild(appuiElement);
|
||||
|
||||
// Initialize after element is connected
|
||||
@@ -15,7 +15,7 @@ import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainme
|
||||
import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
|
||||
import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
|
||||
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
|
||||
import { demoFunc } from './dees-appui-base.demo.js';
|
||||
import { demoFunc } from './dees-appui.demo.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
// View registry for managing views
|
||||
@@ -30,12 +30,12 @@ import '../dees-appui-activitylog/dees-appui-activitylog.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-appui-base': DeesAppuiBase;
|
||||
'dees-appui': DeesAppui;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-appui-base')
|
||||
export class DeesAppuiBase extends DeesElement {
|
||||
@customElement('dees-appui')
|
||||
export class DeesAppui extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// ==========================================
|
||||
@@ -278,7 +278,7 @@ export class DeesAppuiBase extends DeesElement {
|
||||
this.activitylogElement = this.shadowRoot!.querySelector('dees-appui-activitylog') as DeesAppuiActivitylog;
|
||||
|
||||
// Set appui reference in view registry for lifecycle context
|
||||
this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppuiBase);
|
||||
this.viewRegistry.setAppuiRef(this as unknown as interfaces.TDeesAppui);
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
2
ts_web/elements/00group-appui/dees-appui/index.ts
Normal file
2
ts_web/elements/00group-appui/dees-appui/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './dees-appui.js';
|
||||
export * from './view.registry.js';
|
||||
@@ -1,4 +1,4 @@
|
||||
# DeesAppuiBase
|
||||
# DeesAppui
|
||||
|
||||
A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
|
||||
|
||||
@@ -6,14 +6,14 @@ A comprehensive application shell component providing a complete UI framework wi
|
||||
|
||||
```typescript
|
||||
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
||||
import { DeesAppuiBase } from '@design.estate/dees-catalog';
|
||||
import { DeesAppui } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('my-app')
|
||||
class MyApp extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
private appui: DeesAppui;
|
||||
|
||||
async firstUpdated() {
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui-base');
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui');
|
||||
|
||||
// Configure with views and menu
|
||||
this.appui.configure({
|
||||
@@ -30,7 +30,7 @@ class MyApp extends DeesElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<dees-appui-base></dees-appui-base>`;
|
||||
return html`<dees-appui></dees-appui>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -329,7 +329,7 @@ class MySettingsView extends DeesElement implements IViewLifecycle {
|
||||
|
||||
```typescript
|
||||
interface IViewActivationContext {
|
||||
appui: DeesAppuiBase; // Reference to the app shell
|
||||
appui: DeesAppui; // Reference to the app shell
|
||||
viewId: string; // The view ID being activated
|
||||
params?: Record<string, string>; // Route parameters
|
||||
}
|
||||
@@ -421,14 +421,14 @@ appui.viewChanged$.subscribe((event) => {
|
||||
|
||||
```typescript
|
||||
import { html, DeesElement, customElement } from '@design.estate/dees-element';
|
||||
import { DeesAppuiBase, IViewActivationContext } from '@design.estate/dees-catalog';
|
||||
import { DeesAppui, IViewActivationContext } from '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('my-app')
|
||||
class MyApp extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
private appui: DeesAppui;
|
||||
|
||||
async firstUpdated() {
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui-base');
|
||||
this.appui = this.shadowRoot.querySelector('dees-appui');
|
||||
|
||||
this.appui.configure({
|
||||
branding: {
|
||||
@@ -494,14 +494,14 @@ class MyApp extends DeesElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<dees-appui-base></dees-appui-base>`;
|
||||
return html`<dees-appui></dees-appui>`;
|
||||
}
|
||||
}
|
||||
|
||||
// View with lifecycle hooks
|
||||
@customElement('crm-settings')
|
||||
class CrmSettings extends DeesElement {
|
||||
private appui: DeesAppuiBase;
|
||||
private appui: DeesAppui;
|
||||
|
||||
onActivate(context: IViewActivationContext) {
|
||||
this.appui = context.appui;
|
||||
@@ -3,7 +3,7 @@ import type {
|
||||
IViewDefinition,
|
||||
IViewActivationContext,
|
||||
IViewLifecycle,
|
||||
TDeesAppuiBase
|
||||
TDeesAppui
|
||||
} from '../../interfaces/appconfig.js';
|
||||
|
||||
/**
|
||||
@@ -18,12 +18,12 @@ 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;
|
||||
private appui: TDeesAppui | null = null;
|
||||
|
||||
/**
|
||||
* Set the appui reference for view activation context
|
||||
*/
|
||||
public setAppuiRef(appui: TDeesAppuiBase): void {
|
||||
public setAppuiRef(appui: TDeesAppui): void {
|
||||
this.appui = appui;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// App UI Components
|
||||
export * from './dees-appui-activitylog/index.js';
|
||||
export * from './dees-appui-appbar/index.js';
|
||||
export * from './dees-appui-base/index.js';
|
||||
export * from './dees-appui/index.js';
|
||||
export * from './dees-appui-maincontent/index.js';
|
||||
export * from './dees-appui-mainmenu/index.js';
|
||||
export * from './dees-appui-secondarymenu/index.js';
|
||||
|
||||
Reference in New Issue
Block a user