v3.6.0

changelog.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2025-12-29 - 3.6.0 - feat(dees-appui)
+add visibility toggles for main/secondary menus and ability to show/hide content tabs; expose corresponding setters and appconfig entries
+
+- ts_web/elements/00group-appui/dees-appui-base: added boolean properties mainmenuVisible, secondarymenuVisible, maincontentTabsVisible; render main and secondary menus conditionally; pass showTabs to dees-appui-maincontent; added setter methods: setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible.
+- ts_web/elements/00group-appui/dees-appui-maincontent: added showTabs property, support for a notabs attribute via styles, updated() and firstUpdated() to apply notabs state so tabs can be hidden/shown dynamically.
+- ts_web/elements/interfaces/appconfig.ts: expanded appconfig interface to include setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible so host app can control visibility programmatically.
+- No breaking changes: defaults preserve existing behavior (menus and tabs remain visible by default).
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

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.6.0',
   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-base/dees-appui-base.ts

@@ -110,6 +110,16 @@ export class DeesAppuiBase extends DeesElement {
   @property({ type: Boolean })
   accessor secondarymenuCollapsed: boolean = false;
 
+  // Visibility states
+  @property({ type: Boolean })
+  accessor mainmenuVisible: boolean = true;
+
+  @property({ type: Boolean })
+  accessor secondarymenuVisible: boolean = true;
+
+  @property({ type: Boolean })
+  accessor maincontentTabsVisible: boolean = true;
+
   // Properties for maincontent
   @property({ type: Array })
   accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -213,28 +223,33 @@ export class DeesAppuiBase extends DeesElement {
         @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
       ></dees-appui-appbar>
       <div class="maingrid">
-        <dees-appui-mainmenu
-          .logoIcon=${this.mainmenuLogoIcon}
-          .logoText=${this.mainmenuLogoText}
-          .menuGroups=${this.mainmenuGroups}
-          .bottomTabs=${this.mainmenuBottomTabs}
-          .tabs=${this.mainmenuTabs}
-          .selectedTab=${this.mainmenuSelectedTab}
-          .collapsed=${this.mainmenuCollapsed}
-          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
-          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
-        ></dees-appui-mainmenu>
-        <dees-appui-secondarymenu
-          .heading=${this.secondarymenuHeading}
-          .groups=${this.secondarymenuGroups}
-          .selectedItem=${this.secondarymenuSelectedItem}
-          .collapsed=${this.secondarymenuCollapsed}
-          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
-          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
-        ></dees-appui-secondarymenu>
+        ${this.mainmenuVisible ? html`
+          <dees-appui-mainmenu
+            .logoIcon=${this.mainmenuLogoIcon}
+            .logoText=${this.mainmenuLogoText}
+            .menuGroups=${this.mainmenuGroups}
+            .bottomTabs=${this.mainmenuBottomTabs}
+            .tabs=${this.mainmenuTabs}
+            .selectedTab=${this.mainmenuSelectedTab}
+            .collapsed=${this.mainmenuCollapsed}
+            @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+            @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+          ></dees-appui-mainmenu>
+        ` : ''}
+        ${this.secondarymenuVisible ? html`
+          <dees-appui-secondarymenu
+            .heading=${this.secondarymenuHeading}
+            .groups=${this.secondarymenuGroups}
+            .selectedItem=${this.secondarymenuSelectedItem}
+            .collapsed=${this.secondarymenuCollapsed}
+            @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+            @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+          ></dees-appui-secondarymenu>
+        ` : ''}
         <dees-appui-maincontent
           .tabs=${this.maincontentTabs}
           .selectedTab=${this.maincontentSelectedTab}
+          .showTabs=${this.maincontentTabsVisible}
           @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
         >
           <div class="view-container"></div>
@@ -425,6 +440,34 @@ export class DeesAppuiBase extends DeesElement {
     this.mainmenuCollapsed = collapsed;
   }
 
+  /**
+   * Set main menu visibility
+   */
+  public setMainMenuVisible(visible: boolean): void {
+    this.mainmenuVisible = visible;
+  }
+
+  /**
+   * Set secondary menu collapsed state
+   */
+  public setSecondaryMenuCollapsed(collapsed: boolean): void {
+    this.secondarymenuCollapsed = collapsed;
+  }
+
+  /**
+   * Set secondary menu visibility
+   */
+  public setSecondaryMenuVisible(visible: boolean): void {
+    this.secondarymenuVisible = visible;
+  }
+
+  /**
+   * Set content tabs visibility
+   */
+  public setContentTabsVisible(visible: boolean): void {
+    this.maincontentTabsVisible = visible;
+  }
+
   /**
    * Set a badge on a main menu item
    */

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

@@ -43,6 +43,9 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({ type: Object })
   accessor selectedTab: interfaces.IMenuItem | null = null;
 
+  @property({ type: Boolean })
+  accessor showTabs: boolean = true;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -78,6 +81,14 @@ export class DeesAppuiMaincontent extends DeesElement {
         bottom: 0;
         overflow: auto;
       }
+
+      :host([notabs]) .topbar {
+        display: none;
+      }
+
+      :host([notabs]) .content-area {
+        top: 0;
+      }
     `,
   ];
 
@@ -112,8 +123,23 @@ export class DeesAppuiMaincontent extends DeesElement {
     }));
   }
 
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('showTabs')) {
+      if (this.showTabs) {
+        this.removeAttribute('notabs');
+      } else {
+        this.setAttribute('notabs', '');
+      }
+    }
+  }
+
   async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedProperties);
+    // Apply initial notabs state
+    if (!this.showTabs) {
+      this.setAttribute('notabs', '');
+    }
     // Tab selection is now handled by the dees-appui-tabs component
     // But we need to ensure the tabs component is ready
     const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;

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';

ts_web/elements/interfaces/appconfig.ts

@@ -18,6 +18,10 @@ export type TDeesAppuiBase = HTMLElement & {
   removeMainMenuItem: (groupName: string, tabKey: string) => void;
   setMainMenuSelection: (tabKey: string) => void;
   setMainMenuCollapsed: (collapsed: boolean) => void;
+  setMainMenuVisible: (visible: boolean) => void;
+  setSecondaryMenuCollapsed: (collapsed: boolean) => void;
+  setSecondaryMenuVisible: (visible: boolean) => void;
+  setContentTabsVisible: (visible: boolean) => void;
   setMainMenuBadge: (tabKey: string, badge: string | number) => void;
   clearMainMenuBadge: (tabKey: string) => void;
   setSecondaryMenu: (config: { heading?: string; groups: IMenuGroup[] }) => void;