fix(dees-appui-view): remove DeesAppuiView component, its demo, documentation snippet, and related exports

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-12-29 - 3.5.1 - fix(dees-appui-view)
+remove DeesAppuiView component, its demo, documentation snippet, and related exports
+
+- Deleted component implementation: ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts
+- Deleted demo file: ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.demo.ts
+- Removed index re-export: ts_web/elements/00group-appui/dees-appui-view/index.ts (deleted) and removed export from ts_web/elements/00group-appui/index.ts
+- Removed documentation section for DeesAppuiView from readme.md
+- Breaking change: any consumers using the <dees-appui-view> component or its public API (selectTab, getMenuItems, getTabs) must be migrated to alternate components/approach
+
 ## 2025-12-29 - 3.5.0 - feat(theme,interfaces)
 Introduce a global theming system and unify menu/tab interfaces; migrate components to use themeDefaultStyles and update APIs accordingly
 

readme.md

@@ -775,23 +775,6 @@ Professional application bar component with hierarchical menus, breadcrumb navig
 - **User Account Section** - Avatar with status indicator
 - **Accessibility** - Full ARIA support with menubar roles
 
-#### `DeesAppuiView`
-View wrapper component for single-view layouts with internal tabs.
-
-```typescript
-<dees-appui-view
-  .viewConfig=${{
-    id: 'settings',
-    name: 'Settings',
-    tabs: [
-      { key: 'General', iconName: 'lucide:settings', action: () => {}, content: html`<div>General settings</div>` },
-      { key: 'Security', iconName: 'lucide:shield', action: () => {}, content: html`<div>Security settings</div>` }
-    ]
-  }}
-  .paddingPx=${16}  // Default padding for tab content
-></dees-appui-view>
-```
-
 #### `DeesAppuiTabs`
 Reusable tab component with horizontal/vertical layout support.
 
@@ -1234,14 +1217,6 @@ interface IMenuItem {
   badgeVariant?: 'default' | 'success' | 'warning' | 'error';
 }
 
-// Extended tab interface for views with content
-interface IViewTab extends IMenuItem {
-  content?: TemplateResult | (() => TemplateResult);
-  useSlotName?: boolean;
-  slotName?: string;
-  paddingPx?: number;
-}
-
 // Menu group interface for organized menus
 interface IMenuGroup {
   name: string;

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.5.0',
+  version: '3.5.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -1,30 +0,0 @@
-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

@@ -1,180 +0,0 @@
-import * as interfaces from '../../interfaces/index.js';
-
-import {
-  DeesElement,
-  type TemplateResult,
-  property,
-  customElement,
-  html,
-  css,
-  cssManager,
-  state,
-} from '@design.estate/dees-element';
-
-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 IViewTab extends interfaces.IMenuItem {
-  content?: TemplateResult | (() => TemplateResult);
-  useSlotName?: boolean;
-  slotName?: string;
-  paddingPx?: number;
-}
-
-export interface IAppView {
-  id: string;
-  name: string;
-  description?: string;
-  iconName?: string;
-  tabs: IViewTab[];
-  menuItems?: interfaces.IMenuItem[];
-}
-
-@customElement('dees-appui-view')
-export class DeesAppuiView extends DeesElement {
-  public static demo = demoFunc;
-
-  // INSTANCE
-  @property({ type: Object })
-  accessor viewConfig: IAppView;
-
-  @state()
-  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;
-        width: 100%;
-        height: 100%;
-        background: #161616;
-      }
-
-      .view-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .view-header {
-        background: #000000;
-        border-bottom: 1px solid #333;
-        flex-shrink: 0;
-      }
-
-      .view-content {
-        flex: 1;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .tab-content {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: auto;
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
-
-      .tab-content.active {
-        opacity: 1;
-      }
-
-      dees-appui-tabs {
-        height: 60px;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    if (!this.viewConfig) {
-      return html`<div>No view configuration provided</div>`;
-    }
-
-    return html`
-      <div class="view-container">
-        <div class="view-header">
-          <dees-appui-tabs
-            .tabs=${this.viewConfig.tabs}
-            .selectedTab=${this.selectedTab}
-            @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
-          ></dees-appui-tabs>
-        </div>
-        <div class="view-content">
-          ${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' : ''}" style="padding: ${padding}px;">
-                ${content
-                  ? content
-                  : tab.useSlotName
-                    ? html`<slot name="${tab.slotName || tab.key}"></slot>`
-                    : ''}
-              </div>
-            `;
-          })}
-        </div>
-      </div>
-    `;
-  }
-
-  async firstUpdated() {
-    this.tabs = this.shadowRoot.querySelector('dees-appui-tabs');
-    
-    if (this.viewConfig?.tabs?.length > 0) {
-      this.selectedTab = this.viewConfig.tabs[0];
-    }
-  }
-
-  private handleTabSelect(e: CustomEvent) {
-    this.selectedTab = e.detail.tab;
-    
-    // Re-emit the event with view context
-    this.dispatchEvent(new CustomEvent('view-tab-select', {
-      detail: {
-        view: this.viewConfig,
-        tab: e.detail.tab
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  // Public methods for external control
-  public selectTab(tabKey: string) {
-    const tab = this.viewConfig.tabs.find(t => t.key === tabKey);
-    if (tab) {
-      this.selectedTab = tab;
-      if (this.tabs) {
-        this.tabs.selectedTab = tab;
-      }
-    }
-  }
-
-  public getMenuItems(): interfaces.IMenuItem[] {
-    return this.viewConfig?.menuItems || [];
-  }
-
-  public getTabs(): IViewTab[] {
-    return this.viewConfig?.tabs || [];
-  }
-}

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

@@ -1 +0,0 @@
-export * from './dees-appui-view.js';

ts_web/elements/00group-appui/index.ts

@@ -7,4 +7,3 @@ export * from './dees-appui-mainmenu/index.js';
 export * from './dees-appui-secondarymenu/index.js';
 export * from './dees-appui-profiledropdown/index.js';
 export * from './dees-appui-tabs/index.js';
-export * from './dees-appui-view/index.js';