design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

BREAKING CHANGE(dees-appui-secondarymenu): Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-08 14:35:06 +00:00
parent a91098527c
commit 778f457ed5
14 changed files with 773 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
View File

@@ -12,7 +12,7 @@ import * as interfaces from '../../interfaces/index.js';
import * as plugins from '../../00plugins.js';
import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import type { DeesAppuiMainselector } from '../dees-appui-mainselector/dees-appui-mainselector.js';
import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
import { demoFunc } from './dees-appui-base.demo.js';
@@ -20,7 +20,7 @@ import { demoFunc } from './dees-appui-base.demo.js';
// Import child components
import '../dees-appui-appbar/index.js';
import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
import '../dees-appui-mainselector/dees-appui-mainselector.js';
import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
import '../dees-appui-maincontent/dees-appui-maincontent.js';
import '../dees-appui-activitylog/dees-appui-activitylog.js';
@@ -75,12 +75,19 @@ export class DeesAppuiBase extends DeesElement {
@property({ type: Object })
accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
// Properties for mainselector
// Properties for secondarymenu
@property({ type: String })
accessor secondarymenuHeading: string = 'Menu';
@property({ type: Array })
accessor mainselectorOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
@property({ type: Object })
accessor mainselectorSelectedOption: interfaces.ISelectionOption | undefined = undefined;
accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
/** Legacy support for flat options (backward compatibility) */
@property({ type: Array })
accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
// Properties for maincontent
@property({ type: Array })
@@ -94,7 +101,7 @@ export class DeesAppuiBase extends DeesElement {
accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
@state()
accessor mainselector: DeesAppuiMainselector | undefined = undefined;
accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
@state()
accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
@@ -151,11 +158,13 @@ export class DeesAppuiBase extends DeesElement {
.selectedTab=${this.mainmenuSelectedTab}
@tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
></dees-appui-mainmenu>
<dees-appui-mainselector
.selectionOptions=${this.mainselectorOptions}
.selectedOption=${this.mainselectorSelectedOption}
@option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
></dees-appui-mainselector>
<dees-appui-secondarymenu
.heading=${this.secondarymenuHeading}
.groups=${this.secondarymenuGroups}
.selectionOptions=${this.secondarymenuOptions}
.selectedItem=${this.secondarymenuSelectedItem}
@item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
></dees-appui-secondarymenu>
<dees-appui-maincontent
.tabs=${this.maincontentTabs}
>
@@ -170,7 +179,7 @@ export class DeesAppuiBase extends DeesElement {
// Get references to child components
this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
this.mainselector = this.shadowRoot.querySelector('dees-appui-mainselector');
this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
}
@@ -217,6 +226,8 @@ export class DeesAppuiBase extends DeesElement {
// Event handlers for mainmenu
private handleMainmenuTabSelect(e: CustomEvent) {
this.mainmenuSelectedTab = e.detail.tab;
// Update secondary menu heading based on main menu selection
this.secondarymenuHeading = e.detail.tab.key;
this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
detail: e.detail,
bubbles: true,
@@ -224,10 +235,10 @@ export class DeesAppuiBase extends DeesElement {
}));
}
// Event handlers for mainselector
private handleMainselectorOptionSelect(e: CustomEvent) {
this.mainselectorSelectedOption = e.detail.option;
this.dispatchEvent(new CustomEvent('mainselector-option-select', {
// Event handlers for secondarymenu
private handleSecondarymenuItemSelect(e: CustomEvent) {
this.secondarymenuSelectedItem = e.detail.item;
this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
detail: e.detail,
bubbles: true,
composed: true