v3.6.1

changelog.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 2025-12-29 - 3.6.1 - fix(readme)
+document new App UI APIs to control main/secondary menu and content tabs visibility
+
+- Added docs for setMainMenuCollapsed(), setMainMenuVisible(), setSecondaryMenuCollapsed(), setSecondaryMenuVisible(), and setContentTabsVisible() programmatic APIs.
+- Included a TypeScript example showing how to hide secondary menu, hide content tabs, and collapse the main menu in a view's onActivate hook.
+
+## 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.1",
   "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

@@ -54,7 +54,7 @@ For developers working on this library, please refer to the [UI Components Playb
 |----------|------------|
 | **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
 | **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
-| **Layout** | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **Layout** | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
@@ -666,9 +666,26 @@ class MyApp extends DeesElement {
 - `navigateToView(viewId, params?)` - Navigate between views
 - `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
 - `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
-- `setSecondaryMenu()`, `setContentTabs()` - Control view-specific UI
+- `setMainMenuCollapsed()`, `setMainMenuVisible()` - Control main menu visibility
+- `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu
+- `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI
 - `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
 
+**View Visibility Control:**
+```typescript
+// In your view's onActivate hook
+onActivate(context: IViewActivationContext) {
+  // Hide secondary menu for a fullscreen view
+  context.appui.setSecondaryMenuVisible(false);
+
+  // Hide content tabs
+  context.appui.setContentTabsVisible(false);
+
+  // Collapse main menu to give more space
+  context.appui.setMainMenuCollapsed(true);
+}
+```
+
 #### `DeesAppuiMainmenu`
 Main navigation menu component for application-wide navigation.
 
@@ -775,23 +792,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 +1234,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.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-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;