diff --git a/changelog.md b/changelog.md index b181acc..f02120a 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # 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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index e1a6baf..22ebdc5 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.5.1', + version: '3.6.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts index 18a1f86..78e8507 100644 --- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts +++ b/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)} >
- this.handleMainmenuTabSelect(e)} - @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)} - > - this.handleSecondarymenuItemSelect(e)} - @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)} - > + ${this.mainmenuVisible ? html` + this.handleMainmenuTabSelect(e)} + @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)} + > + ` : ''} + ${this.secondarymenuVisible ? html` + this.handleSecondarymenuItemSelect(e)} + @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)} + > + ` : ''} this.handleContentTabSelect(e)} >
@@ -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 */ diff --git a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts index a9d76a7..77a653a 100644 --- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts +++ b/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) { + super.updated(changedProperties); + if (changedProperties.has('showTabs')) { + if (this.showTabs) { + this.removeAttribute('notabs'); + } else { + this.setAttribute('notabs', ''); + } + } + } + async firstUpdated(_changedProperties: Map) { 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; diff --git a/ts_web/elements/interfaces/appconfig.ts b/ts_web/elements/interfaces/appconfig.ts index de336f5..05bea79 100644 --- a/ts_web/elements/interfaces/appconfig.ts +++ b/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;