feat(theme,interfaces): Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly

ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts

@@ -0,0 +1,30 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-appui-view
+    .viewConfig=${{
+      id: 'demo-view',
+      name: 'Demo View',
+      description: 'A demonstration view',
+      iconName: 'lucide:home',
+      tabs: [
+        {
+          key: 'overview',
+          iconName: 'lucide:lineChart',
+          action: () => console.log('Overview tab'),
+          content: html`<div style="padding: 20px;">Overview Content</div>`
+        },
+        {
+          key: 'details',
+          iconName: 'lucide:fileText',
+          action: () => console.log('Details tab'),
+          content: html`<div style="padding: 20px;">Details Content</div>`
+        }
+      ],
+      menuItems: [
+        { key: 'General', action: () => console.log('General') },
+        { key: 'Advanced', action: () => console.log('Advanced') },
+      ]
+    }}
+  ></dees-appui-view>
+`;

ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts

@@ -13,9 +13,14 @@ import {
 
 import '../dees-appui-tabs/dees-appui-tabs.js';
 import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
+import { demoFunc } from './dees-appui-view.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
-export interface IAppViewTab extends interfaces.ITab {
+export interface IViewTab extends interfaces.IMenuItem {
   content?: TemplateResult | (() => TemplateResult);
+  useSlotName?: boolean;
+  slotName?: string;
+  paddingPx?: number;
 }
 
 export interface IAppView {
@@ -23,54 +28,32 @@ export interface IAppView {
   name: string;
   description?: string;
   iconName?: string;
-  tabs: IAppViewTab[];
-  menuItems?: interfaces.ISelectionOption[];
+  tabs: IViewTab[];
+  menuItems?: interfaces.IMenuItem[];
 }
 
 @customElement('dees-appui-view')
 export class DeesAppuiView extends DeesElement {
-  public static demo = () => html`
-    <dees-appui-view
-      .viewConfig=${{
-        id: 'demo-view',
-        name: 'Demo View',
-        description: 'A demonstration view',
-        iconName: 'lucide:home',
-        tabs: [
-          {
-            key: 'overview',
-            iconName: 'lucide:lineChart',
-            action: () => console.log('Overview tab'),
-            content: html`<div style="padding: 20px;">Overview Content</div>`
-          },
-          {
-            key: 'details',
-            iconName: 'lucide:fileText',
-            action: () => console.log('Details tab'),
-            content: html`<div style="padding: 20px;">Details Content</div>`
-          }
-        ],
-        menuItems: [
-          { key: 'General', action: () => console.log('General') },
-          { key: 'Advanced', action: () => console.log('Advanced') },
-        ]
-      }}
-    ></dees-appui-view>
-  `;
+  public static demo = demoFunc;
 
   // INSTANCE
   @property({ type: Object })
   accessor viewConfig: IAppView;
 
   @state()
-  accessor selectedTab: IAppViewTab | null = null;
+  accessor selectedTab: IViewTab | null = null;
 
   @state()
   accessor tabs: DeesAppuiTabs;
 
+  @property({ type: Number })
+  accessor paddingPx: number = 16;
+
   public static styles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;
@@ -138,9 +121,14 @@ export class DeesAppuiView extends DeesElement {
           ${this.viewConfig.tabs.map((tab) => {
             const isActive = tab === this.selectedTab;
             const content = typeof tab.content === 'function' ? tab.content() : tab.content;
+            const padding = tab.paddingPx ?? this.paddingPx;
             return html`
-              <div class="tab-content ${isActive ? 'active' : ''}">
-                ${content || html`<slot name="${tab.key}"></slot>`}
+              <div class="tab-content ${isActive ? 'active' : ''}" style="padding: ${padding}px;">
+                ${content
+                  ? content
+                  : tab.useSlotName
+                    ? html`<slot name="${tab.slotName || tab.key}"></slot>`
+                    : ''}
               </div>
             `;
           })}
@@ -182,11 +170,11 @@ export class DeesAppuiView extends DeesElement {
     }
   }
 
-  public getMenuItems(): interfaces.ISelectionOption[] {
+  public getMenuItems(): interfaces.IMenuItem[] {
     return this.viewConfig?.menuItems || [];
   }
 
-  public getTabs(): IAppViewTab[] {
+  public getTabs(): IViewTab[] {
     return this.viewConfig?.tabs || [];
   }
 }